.llcd-hazard-widget {
  --llcd-ink: #17352f;
  --llcd-muted: #5f6f69;
  --llcd-cream: #f5f1e7;
  --llcd-lake: #1d6d75;
  --llcd-green: #35a853;
  --llcd-yellow: #f4c430;
  --llcd-red: #e5483f;
  box-sizing: border-box;
  width: 100%;
  max-width: 390px;
  overflow: hidden;
  border: 1px solid #cbd5d0;
  border-radius: 18px;
  background: #fff;
  color: var(--llcd-ink);
  box-shadow: 0 14px 38px rgba(30, 58, 50, .13);
  font-family: Arial, Helvetica, sans-serif;
}
.llcd-hazard-widget *, .llcd-hazard-widget *::before, .llcd-hazard-widget *::after { box-sizing: border-box; }
.llcd-widget-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 12px; border-top: 7px solid var(--llcd-lake); }
.llcd-lake-name { margin: 0 0 2px !important; color: var(--llcd-lake); font-size: 12px !important; font-weight: 900; letter-spacing: .14em; }
.llcd-widget-header h2 { margin: 0 !important; color: var(--llcd-ink); font-size: 25px !important; line-height: 1.1; letter-spacing: -.025em; }
.llcd-updated-badge { flex: 0 0 auto; margin-top: 2px; border-radius: 99px; background: #e6f1ef; color: #235c58; padding: 7px 9px; font-size: 10px; font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: .05em; }
.llcd-dial-wrap { position: relative; min-height: 221px; padding: 2px 15px 0; }
.llcd-dial { display: block; width: 100%; height: auto; overflow: visible; }
.llcd-zone { pointer-events: none; stroke: #fff; stroke-width: 4; transform-origin: 180px 180px; transition: filter .16s ease, opacity .16s ease, transform .16s ease; }
.llcd-zone-low { fill: var(--llcd-green); }
.llcd-zone-medium { fill: var(--llcd-yellow); }
.llcd-zone-high { fill: var(--llcd-red); }
.llcd-zone-hit { position: absolute; z-index: 2; appearance: none; border: 0 !important; background: transparent !important; cursor: help; margin: 0 !important; padding: 0 !important; box-shadow: none !important; }
.llcd-zone-hit:focus { outline: 3px solid rgba(29,109,117,.35); outline-offset: 2px; border-radius: 9px; }
.llcd-zone-hit-low { left: 8%; top: 42%; width: 33%; height: 42%; }
.llcd-zone-hit-medium { left: 35%; top: 9%; width: 30%; height: 59%; }
.llcd-zone-hit-high { right: 8%; top: 42%; width: 33%; height: 42%; }
.llcd-dial-wrap:has(.llcd-zone-hit-low:hover) .llcd-zone-low, .llcd-dial-wrap:has(.llcd-zone-hit-low:focus) .llcd-zone-low,
.llcd-dial-wrap:has(.llcd-zone-hit-medium:hover) .llcd-zone-medium, .llcd-dial-wrap:has(.llcd-zone-hit-medium:focus) .llcd-zone-medium,
.llcd-dial-wrap:has(.llcd-zone-hit-high:hover) .llcd-zone-high, .llcd-dial-wrap:has(.llcd-zone-hit-high:focus) .llcd-zone-high { filter: brightness(1.04) saturate(1.15); opacity: .92; transform: scale(1.015); }
.llcd-dial-label { fill: #fff; font-size: 14px; font-weight: 900; letter-spacing: .05em; pointer-events: none; }
.llcd-dial-label.llcd-dark { fill: #483c0c; font-size: 12px; }
.llcd-needle { transform-origin: 180px 180px; transition: transform 700ms cubic-bezier(.22,.8,.31,1); }
.llcd-needle path { fill: #fff; stroke: var(--llcd-ink); stroke-width: 3; filter: drop-shadow(0 3px 3px rgba(0,0,0,.2)); }
.llcd-needle-hub { fill: #fff; stroke: var(--llcd-ink); stroke-width: 4; filter: drop-shadow(0 2px 3px rgba(0,0,0,.2)); }
.llcd-needle-pin { fill: var(--llcd-ink); }
.llcd-dial-prompt { margin: -7px 0 0 !important; color: #6f7f79; font-size: 10px !important; font-weight: 700; line-height: 1.3; text-align: center; }
.llcd-zone-popover { position: absolute; z-index: 5; pointer-events: none; left: 20px; right: 20px; top: 55px; padding: 12px 14px; border-radius: 11px; background: rgba(22,40,35,.96); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.22); font-size: 12px; line-height: 1.35; }
.llcd-zone-popover[hidden] { display: none; }
.llcd-zone-popover strong { display: block; margin-bottom: 3px; font-size: 13px; }
.llcd-zone-popover span { color: #eaf0ed; }
.llcd-status-banner { display: flex; align-items: center; gap: 11px; margin: 12px 20px 0; padding: 13px 14px; border: 1px solid #c6e5cf; border-radius: 12px; background: #eaf6ed; }
.llcd-status-dot { width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%; background: var(--llcd-green); box-shadow: 0 0 0 5px rgba(53,168,83,.14); }
.llcd-status-banner p { margin: 0 0 2px !important; color: #52705c; font-size: 10px !important; font-weight: 800; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; }
.llcd-status-banner h3 { margin: 0 !important; color: #1f6a35; font-size: 14px !important; line-height: 1.2; letter-spacing: .015em; }
.llcd-status-medium .llcd-status-banner { border-color: #f0dc83; background: #fff7d6; }
.llcd-status-medium .llcd-status-dot { background: var(--llcd-yellow); box-shadow: 0 0 0 5px rgba(244,196,48,.17); }
.llcd-status-medium .llcd-status-banner h3 { color: #775e00; }
.llcd-status-high .llcd-status-banner { border-color: #f0c1bb; background: #ffebe8; }
.llcd-status-high .llcd-status-dot { background: var(--llcd-red); box-shadow: 0 0 0 5px rgba(229,72,63,.14); }
.llcd-status-high .llcd-status-banner h3 { color: #9d2923; }
.llcd-status-detail { margin: 11px 21px 17px !important; color: #51625c; font-size: 12px !important; line-height: 1.48; }
.llcd-sample-panel { margin: 0 14px; border-radius: 13px; background: var(--llcd-cream); padding: 14px; }
.llcd-sample-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #d9d3c5; }
.llcd-sample-heading h3 { margin: 0 !important; color: var(--llcd-ink); font-size: 14px !important; }
.llcd-sample-heading time { color: #64736d; font-size: 11px; font-weight: 700; }
.llcd-results-list { margin: 0 !important; }
.llcd-results-list div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #ded9cc; }
.llcd-results-list div:last-child { border-bottom: 0; padding-bottom: 0; }
.llcd-results-list dt { color: #52625c; font-size: 12px; font-weight: 400; }
.llcd-results-list dd { margin: 0 !important; color: var(--llcd-ink); font-size: 13px; font-weight: 800; text-align: right; }
.llcd-results-list small { color: #66736e; font-size: 9px; font-weight: 700; }
.llcd-widget-footer { padding: 15px 20px 20px; }
.llcd-widget-footer p { margin: 0 0 9px !important; color: #6b7772; font-size: 10px !important; line-height: 1.45; }
.llcd-widget-footer a { color: var(--llcd-lake); font-size: 11px; font-weight: 800; text-decoration: none; }
.llcd-widget-footer a:hover, .llcd-widget-footer a:focus { text-decoration: underline; }
@media (max-width: 410px) {
  .llcd-hazard-widget { border-radius: 14px; }
  .llcd-widget-header { padding-left: 16px; padding-right: 16px; }
  .llcd-dial-wrap { padding-left: 7px; padding-right: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .llcd-needle, .llcd-zone { transition: none; }
}