:root {
  --ink: #1d2421;
  --muted: #69736e;
  --line: #d9dfdc;
  --surface: #ffffff;
  --canvas: #f3f6f4;
  --green: #23856d;
  --blue: #3578a8;
  --amber: #d8952d;
  --coral: #d95c4f;
  --red: #b93636;
  --shadow: 0 8px 24px rgba(29, 36, 33, 0.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--canvas); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; }
button, input { font: inherit; letter-spacing: 0; }
button { color: inherit; }

.topbar {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 22px;
  color: #f8faf8;
  background: var(--ink);
  border-bottom: 3px solid var(--green);
}
.brand-block, .topbar-meta, .brand-block > div { display: flex; align-items: center; }
.brand-block { gap: 11px; min-width: 0; }
.brand-block > div { align-items: flex-start; flex-direction: column; line-height: 1.1; }
.brand-block strong { font-size: 15px; }
.brand-block span { margin-top: 4px; color: #bfc8c3; font-size: 11px; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #53615a; border-radius: 4px; color: #61c1a5; }
.brand-mark svg, .icon-button svg { width: 18px; height: 18px; }
.topbar-meta { gap: 12px; }
.mode-badge { padding: 5px 8px; border: 1px solid #5c6a63; border-radius: 3px; color: #d5ddd9; font-size: 10px; font-weight: 800; }
.update-time { color: #aab6b0; font-size: 11px; white-space: nowrap; }
.icon-button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #5c6a63; border-radius: 4px; color: white; background: transparent; cursor: pointer; }
.icon-button:hover { background: #333d38; }
.icon-button.loading svg { animation: spin 0.9s linear infinite; }

.summary-strip { display: grid; grid-template-columns: repeat(4, minmax(110px, 150px)) 1fr; min-height: 70px; background: var(--surface); border-bottom: 1px solid var(--line); }
.summary-strip > div { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 10px 18px; border-right: 1px solid var(--line); }
.summary-strip span { color: var(--muted); font-size: 11px; }
.summary-strip strong { font-size: 20px; line-height: 1; }
.summary-strip .method-note { flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; border-right: 0; }
.method-note svg { width: 17px; color: var(--green); }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 410px; max-width: 1800px; min-height: calc(100vh - 174px); margin: 0 auto; background: var(--surface); border-inline: 1px solid var(--line); }
.monitor-pane { min-width: 0; border-right: 1px solid var(--line); }
.map-toolbar { height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 14px; border-bottom: 1px solid var(--line); }
.search-control { display: flex; align-items: center; width: min(280px, 45%); height: 34px; padding: 0 10px; gap: 7px; border: 1px solid #c8d0cc; border-radius: 4px; background: #f8faf9; }
.search-control:focus-within { border-color: var(--green); box-shadow: 0 0 0 2px rgba(35, 133, 109, 0.12); }
.search-control svg { width: 15px; color: var(--muted); }
.search-control input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: 12px; }
.map-legend { display: flex; gap: 14px; white-space: nowrap; }
.map-legend span { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot.normal { background: var(--green); }.dot.elevated { background: var(--amber); }.dot.high { background: var(--coral); }
#map { width: 100%; height: clamp(390px, 52vh, 650px); background: #e5ebe7; }
.leaflet-container { font-family: inherit; }
.leaflet-control-zoom a { border-radius: 0 !important; }
.score-marker { display: grid; place-items: center; width: 34px; height: 34px; border: 3px solid #fff; border-radius: 50%; color: white; background: var(--marker, var(--green)); box-shadow: 0 2px 9px rgba(29,36,33,.28); font-size: 11px; font-weight: 800; transition: transform .15s ease; }
.score-marker:hover, .score-marker.selected { transform: scale(1.18); outline: 2px solid rgba(29, 36, 33, .32); }
.leaflet-tooltip { border: 0; border-radius: 3px; box-shadow: var(--shadow); font-size: 11px; }

.ranking-band { border-top: 1px solid var(--line); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 17px 18px 12px; }
.section-heading h2, .timeline-head h2 { margin: 0; font-size: 15px; line-height: 1.2; }
.section-heading > span { color: var(--muted); font-size: 10px; }
.eyebrow { display: block; margin-bottom: 4px; color: var(--green); font-size: 9px; font-weight: 800; }
.ranking-table-wrap { overflow-x: auto; }
.ranking-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ranking-table th { padding: 9px 14px; border-block: 1px solid var(--line); color: var(--muted); background: #f7f9f8; text-align: left; font-size: 9px; text-transform: uppercase; }
.ranking-table th:not(:first-child), .ranking-table td:not(:first-child) { text-align: right; }
.ranking-table td { height: 44px; padding: 8px 14px; border-bottom: 1px solid #e7ebe9; white-space: nowrap; }
.ranking-table tbody tr { cursor: pointer; }
.ranking-table tbody tr:hover, .ranking-table tbody tr.selected { background: #edf5f1; }
.region-cell { display: flex; align-items: center; gap: 9px; text-align: left; }
.region-cell b { font-size: 12px; }.region-cell small { color: var(--muted); }
.score-value { font-weight: 800; }
.confidence-bar { display: inline-block; width: 42px; height: 4px; margin-right: 7px; overflow: hidden; vertical-align: middle; background: #e1e6e3; }
.confidence-bar i { display: block; height: 100%; background: var(--blue); }
.table-status { display: inline-block; min-width: 70px; padding: 4px 6px; border-radius: 3px; text-align: center; font-size: 9px; font-weight: 800; }
.loading-cell { height: 90px !important; color: var(--muted); text-align: center !important; }

.detail-pane { min-width: 0; background: #fbfcfb; }
.detail-header { display: flex; justify-content: space-between; align-items: flex-start; min-height: 84px; padding: 18px; border-bottom: 1px solid var(--line); }
.detail-header h1 { max-width: 250px; margin: 0; font-size: 22px; line-height: 1.15; overflow-wrap: anywhere; }
.status-label { padding: 5px 7px; border-radius: 3px; font-size: 9px; font-weight: 900; }
.status-label.normal, .table-status.normal { color: #17634f; background: #dcefe8; }
.status-label.watch, .table-status.watch { color: #786016; background: #f5e9bf; }
.status-label.elevated, .table-status.elevated { color: #8d5118; background: #f8dcc2; }
.status-label.high, .table-status.high { color: #a13731; background: #f7d2ce; }
.status-label.exceptional, .table-status.exceptional { color: white; background: var(--red); }
.score-overview { display: flex; align-items: center; gap: 18px; padding: 20px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.score-ring { --score: 0; --ring-color: var(--green); display: grid; place-items: center; flex: 0 0 122px; width: 122px; height: 122px; border-radius: 50%; background: conic-gradient(var(--ring-color) calc(var(--score) * 1%), #e4e9e6 0); }
.score-ring::before { content: ""; grid-area: 1/1; width: 96px; height: 96px; border-radius: 50%; background: white; }
.score-ring > div { grid-area: 1/1; z-index: 1; display: flex; align-items: baseline; }
.score-ring strong { font-size: 34px; }.score-ring span { margin-left: 3px; color: var(--muted); font-size: 11px; }
.score-meta { display: flex; flex-direction: column; min-width: 0; }
.score-meta > span, .score-meta small, .score-meta time { color: var(--muted); font-size: 10px; }
.score-meta strong { margin: 8px 0 1px; font-size: 20px; }.score-meta time { margin-top: 10px; }
.detail-section { padding: 15px 18px 18px; border-bottom: 1px solid var(--line); }
.section-heading.compact { align-items: center; padding: 0 0 12px; }
.component-list { display: grid; gap: 11px; }
.component-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 35px; align-items: center; gap: 9px; font-size: 11px; }
.component-track { height: 6px; overflow: hidden; background: #e3e8e5; }
.component-track i { display: block; height: 100%; background: var(--component-color, var(--blue)); transition: width .25s ease; }
.component-row strong { text-align: right; font-size: 11px; }
.reason-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.reason-list li { position: relative; padding-left: 17px; color: #434d48; font-size: 11px; line-height: 1.45; }
.reason-list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.reason-list li.context::before { background: var(--blue); }
.timeline-section { padding-inline: 12px; }
.timeline-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6px 12px; }
.segmented { display: flex; border: 1px solid #ccd3cf; border-radius: 4px; overflow: hidden; }
.segmented button { min-width: 36px; height: 27px; padding: 0 7px; border: 0; border-right: 1px solid #ccd3cf; background: #fff; color: var(--muted); cursor: pointer; font-size: 9px; }
.segmented button:last-child { border-right: 0; }.segmented button.active { color: #fff; background: var(--ink); }
.chart-wrap { position: relative; width: 100%; height: 230px; }
.context-list { display: grid; gap: 9px; }
.context-item { padding-left: 10px; border-left: 3px solid var(--blue); }
.context-item a, .context-item strong { display: block; color: var(--ink); font-size: 11px; font-weight: 700; text-decoration: none; line-height: 1.35; }
.context-item a:hover { color: var(--blue); }.context-item span { color: var(--muted); font-size: 9px; }
.evaluation-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.evaluation-grid div { display: flex; flex-direction: column; gap: 5px; padding: 10px; border-right: 1px solid var(--line); }
.evaluation-grid div:last-child { border-right: 0; }.evaluation-grid span { color: var(--muted); font-size: 9px; }.evaluation-grid strong { font-size: 14px; }

footer { display: flex; justify-content: space-between; gap: 20px; max-width: 1800px; min-height: 40px; margin: 0 auto; padding: 12px 18px; color: var(--muted); background: #e9eeeb; font-size: 10px; }
.toast { position: fixed; z-index: 2000; right: 18px; bottom: 18px; max-width: min(360px, calc(100vw - 36px)); padding: 11px 13px; border-radius: 4px; color: #fff; background: var(--ink); box-shadow: var(--shadow); font-size: 11px; }

@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1040px) {
  .workspace { grid-template-columns: minmax(0, 1fr) 360px; }
  .summary-strip { grid-template-columns: repeat(4, 1fr); }
  .summary-strip .method-note { display: none; }
}
@media (max-width: 780px) {
  .topbar { padding-inline: 13px; }.brand-block span { display: none; }.update-time { display: none; }
  .summary-strip { grid-template-columns: repeat(2, 1fr); }
  .summary-strip > div:nth-child(2) { border-right: 0; }.summary-strip > div { border-bottom: 1px solid var(--line); }
  .workspace { display: block; border: 0; }.monitor-pane { border-right: 0; }
  #map { height: 52vh; min-height: 360px; }
  .detail-pane { border-top: 5px solid var(--ink); }
  .ranking-table th:nth-child(3), .ranking-table td:nth-child(3), .ranking-table th:nth-child(4), .ranking-table td:nth-child(4) { display: none; }
  footer { flex-direction: column; gap: 5px; }
}
@media (max-width: 460px) {
  .mode-badge { display: none; }.map-toolbar { align-items: stretch; height: auto; flex-direction: column; }
  .search-control { width: 100%; }.map-legend { justify-content: space-between; }
  .score-overview { gap: 14px; }.score-ring { flex-basis: 108px; width: 108px; height: 108px; }.score-ring::before { width: 84px; height: 84px; }
  .timeline-head { align-items: flex-start; flex-direction: column; }.segmented { width: 100%; }.segmented button { flex: 1; }
}