*{box-sizing:border-box;margin:0;padding:0}
body{background:#0d1117;color:#c9d1d9;font-family:'Courier New',monospace;font-size:13px}
*{scrollbar-width:thin;scrollbar-color:#30363d transparent}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#30363d;border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:#484f58}
header{background:#161b22;border-bottom:1px solid #30363d;padding:10px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#header-controls button{white-space:nowrap}
header h1{font-size:15px;color:#58a6ff;letter-spacing:1px}
#cfg{color:#6e7681;font-size:11px}
[title]{cursor:help}
#status-dot{width:8px;height:8px;border-radius:50%;background:#238636;animation:pulse 2s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
#boot-overlay{position:fixed;inset:0;background:rgba(13,17,23,.88);backdrop-filter:blur(2px);z-index:9999;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;pointer-events:none}
#boot-overlay.visible{display:flex}
#boot-overlay svg{overflow:visible}
@keyframes seismic-wave{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-400}}
#wave-path{stroke-dasharray:400;animation:seismic-wave 1.4s linear infinite}
#boot-overlay p{color:#6e7681;font-size:12px;letter-spacing:.5px}
#last-update{color:#6e7681;font-size:11px;margin-left:auto}
#last-event-summary{font-size:11px;color:#8b949e;border-left:1px solid #30363d;padding-left:12px}
.grid{display:grid;grid-template-columns:var(--sta-w,220px) 4px 1fr 320px;gap:0;padding:12px;height:calc(100vh - 50px)}
.grid>*{margin:0 6px}
.panel{background:#161b22;border:1px solid #30363d;border-radius:6px;padding:12px;min-width:0}
.panel-hdr{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.panel-hdr h2{font-size:11px;color:#8b949e;text-transform:uppercase;letter-spacing:1px}
.det-count{font-size:10px;color:#6e7681;background:#21262d;border-radius:8px;padding:1px 6px}
.station{padding:6px 0;border-bottom:1px solid #21262d;cursor:default}
.spark-wrap{position:relative;margin-top:3px}
.spark-wrap svg{margin-top:0!important;display:block}
.spark-cursor{position:absolute;top:0;bottom:0;width:1px;background:#58a6ff99;pointer-events:none;display:none}
.station:last-child{border-bottom:none}
.sta-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}
.sta-name{color:#58a6ff;font-weight:bold}
.sta-conf{font-size:11px}
.conf-bar{height:4px;border-radius:2px;background:#21262d;margin-top:2px}
.conf-fill{height:100%;border-radius:2px;transition:width .5s}
.det{display:flex;flex-direction:column;padding:7px 12px;border-bottom:1px solid #21262d;font-size:11px;min-width:0}
.det:last-child{border-bottom:none}
.det-selected{background:#0d2a15!important;box-shadow:inset 2px 0 0 #3fb950}
.det:hover:not(.det-selected){background:#1c2128}
.det-muted{opacity:0.55}
.det-verified{position:relative;z-index:1;border:1px solid #2ea043!important}
.det-verified+.det-verified{margin-top:-1px}
.det-row1{display:flex;justify-content:space-between;align-items:baseline;gap:4px}
.det-row2{display:flex;align-items:center;gap:4px;margin-top:3px;min-width:0}
.det-time{color:#8b949e;font-size:10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.det-stas{color:#58a6ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;font-size:10px}
.det-chips-inline{display:flex;gap:3px;flex-shrink:0;align-items:center;margin-left:auto}
.det-usgs-icon{flex-shrink:0;font-size:12px;line-height:1;cursor:default}.det-usgs-icon[href]{cursor:pointer}
.det-age{color:#6e7681;font-size:10px;white-space:nowrap;letter-spacing:.2px}
.det-deploy-sep{display:flex;align-items:center;gap:6px;padding:5px 0;color:#d29922;font-size:10px;letter-spacing:.5px}
.det-deploy-sep::before,.det-deploy-sep::after{content:'';flex:1;border-top:1px solid #2a1f00}
.chip{font-size:10px;border-radius:3px;padding:1px 5px;font-weight:bold;white-space:nowrap}
.fault-tip{background:#1a1209;border:1px solid #e36209;color:#e8c07a;font-size:10px;padding:2px 6px;border-radius:3px;white-space:nowrap}
.det-tip{background:#161b22;border:1px solid #30363d;border-radius:8px;padding:0;box-shadow:0 6px 24px rgba(0,0,0,.7);font-size:12px;color:#c9d1d9;white-space:nowrap;pointer-events:none;min-width:220px;max-width:310px;overflow:hidden}
.det-tip .tip-head{padding:8px 12px 7px;border-bottom:1px solid #21262d}
.det-tip .tip-time{color:#8b949e;font-size:10px;letter-spacing:.3px;font-variant-numeric:tabular-nums;margin-bottom:4px}
.det-tip .tip-mag-row{display:flex;align-items:center;gap:8px}
.det-tip .tip-mb{font-size:18px;font-weight:700;letter-spacing:.02em;line-height:1}
.det-tip .tip-mb.high{color:#f85149}.det-tip .tip-mb.mid{color:#d29922}.det-tip .tip-mb.low{color:#58a6ff}
.det-tip .tip-badges{display:flex;gap:4px;flex-wrap:wrap}
.det-tip .tip-badge{font-size:9px;font-weight:600;padding:2px 6px;border-radius:3px;letter-spacing:.3px;text-transform:uppercase}
.det-tip .tip-badge.tele{background:#21262d;color:#8b949e;border:1px solid #30363d}
.det-tip .tip-badge.conf-ok{background:#0d2a15;color:#3fb950;border:1px solid #238636}
.det-tip .tip-place{font-size:12px;font-weight:600;color:#e6edf3;margin-top:5px;white-space:normal;line-height:1.3}
.det-tip .tip-body{padding:7px 12px}
.det-tip .tip-row{display:flex;align-items:baseline;gap:6px;margin-bottom:3px;font-size:11px}
.det-tip .tip-row-label{color:#8b949e;font-size:10px;min-width:46px;flex-shrink:0}
.det-tip .tip-cat-val{color:#c9d1d9}
.det-tip .tip-depth{color:#8b949e;font-size:10px}
.det-tip .tip-stas-val{color:#c9d1d9;white-space:normal;line-height:1.4}
.det-tip .tip-loc-val{color:#adbac7;font-variant-numeric:tabular-nums}
.det-tip .tip-loc-orig a{color:#4a9eff;text-decoration:none;pointer-events:all}.det-tip .tip-loc-orig a:hover{text-decoration:underline}
.det-tip .tip-foot{padding:6px 12px;border-top:1px solid #21262d;background:#0d1117}
.det-tip .tip-link a{color:#4a9eff;font-size:10px;text-decoration:none;pointer-events:all}.det-tip .tip-link a:hover{text-decoration:underline}
.leaflet-tooltip.det-tip::before{display:none}.leaflet-tooltip.det-tip{pointer-events:all}
.sta-tip{background:#0d1117;border:1px solid #21262d;border-radius:5px;padding:5px 9px;box-shadow:0 3px 12px rgba(0,0,0,.5);font-size:10px;color:#c9d1d9;white-space:nowrap;pointer-events:none}
.sta-tip .tip-key{color:#58a6ff;font-weight:600;font-size:11px}
.sta-tip .tip-conf{margin-top:2px}
.leaflet-tooltip.sta-tip::before{display:none}
.chip-mb-low{color:#3fb950;background:#0d2a15}
.chip-mb-mid{color:#d29922;background:#2a1f00}
.chip-mb-high{color:#f85149;background:#2d1216}
.chip-mb-approx{opacity:.8;font-style:italic}
.chip-epi{color:#d29922;background:#2a1f00}
.chip-usgs{color:#a371f7;background:#1e1129}
.chip-emsc{color:#39c5cf;background:#0d1f21}
#left-panel{display:flex;flex-direction:column;min-height:0;margin-left:0!important}
#left-panel>.panel-hdr{margin-bottom:0}
#stations{flex:1;overflow-y:auto;min-height:0}
#sta-resize-handle{width:4px;cursor:col-resize;background:transparent;border-radius:2px;transition:background .15s;z-index:10;margin:0!important;align-self:stretch;position:relative}
#sta-resize-handle::after{content:'';position:absolute;top:0;bottom:0;left:-8px;right:-8px}
#sta-resize-handle:hover,#sta-resize-handle.dragging{background:#58a6ff55}
#map{height:100%;border-radius:4px;background:#000}
#map-wrap{position:relative;border-radius:4px;overflow:hidden;min-height:0}
#event-log{position:absolute;bottom:24px;right:10px;z-index:400;width:600px;max-height:200px;overflow-y:auto;pointer-events:auto;background:rgba(13,17,23,0.75);border:1px solid #21262d;border-radius:4px;padding:4px 0;backdrop-filter:blur(3px)}
#event-log .elog{font-size:10.5px;font-family:monospace;color:#8b949e;padding:1px 8px;white-space:pre-wrap;word-break:break-all;line-height:1.5}
#event-log .elog.elog-det{color:#f85149;border-left:2px solid #f85149;padding-left:6px}
#event-log .elog.elog-usgs{color:#3fb950;border-left:2px solid #3fb950;padding-left:6px}
#event-log .elog.elog-sta{color:#8b949e}
#event-log .elog.elog-info{color:#6e7681}
/* Satellite mode — brighter text + stronger backdrop so logs are legible over imagery */
body.sat-mode #event-log{background:rgba(0,0,0,0.82);border-color:#444;backdrop-filter:blur(4px)}
body.sat-mode #event-log .elog{color:#d0d7de;text-shadow:0 1px 2px rgba(0,0,0,.9)}
body.sat-mode #event-log .elog.elog-det{color:#ff6b6b;text-shadow:0 1px 3px rgba(0,0,0,1)}
body.sat-mode #event-log .elog.elog-usgs{color:#56d364;text-shadow:0 1px 3px rgba(0,0,0,1)}
body.sat-mode #event-log .elog.elog-sta{color:#b0bec5;text-shadow:0 1px 2px rgba(0,0,0,.9)}
body.sat-mode #event-log .elog.elog-info{color:#8b9ba8;text-shadow:0 1px 2px rgba(0,0,0,.8)}
/* Fullscreen — event log above detections panel */
body.fs-mode #event-log{z-index:1002;right:350px;bottom:14px}
.right-col{display:flex;flex-direction:column;min-height:0;background:#161b22;border:1px solid #30363d;border-radius:6px;overflow:hidden}
.no-data{color:#6e7681;font-style:italic;font-size:11px}
/* fullscreen map */
#fs-btn{position:absolute;top:6px;right:6px;z-index:1000;background:#161b22cc;border:1px solid #30363d;color:#8b949e;border-radius:4px;padding:3px 7px;font-size:11px;cursor:pointer;backdrop-filter:blur(4px)}
#fs-btn:hover{color:#e6edf3;border-color:#58a6ff}
body.fs-mode .grid{display:block}
body.fs-mode #fs-btn{right:350px}
body.fs-mode .right-col{position:fixed!important;top:50px;right:10px;bottom:10px;width:330px;z-index:1001;background:#161b22bb;backdrop-filter:blur(10px);border:1px solid #30363d;border-radius:8px;overflow:hidden;display:flex!important;flex-direction:column}
body.fs-mode .right-col .panel-hdr{background:transparent}
body.fs-mode .right-col{border:none;border-radius:8px}
body.fs-mode #left-panel{display:none}
body.fs-mode #map-wrap{position:fixed;inset:0;z-index:500;border-radius:0;margin:0;top:50px}
body.fs-mode #map{height:100%!important;border-radius:0}
body.fs-mode header{z-index:502;position:relative}
/* fullscreen overlay */
#fs-overlay{display:none;position:fixed;top:55px;left:10px;z-index:1001;background:#161b22cc;border:1px solid #30363d;border-radius:6px;padding:10px 14px;min-width:220px;max-width:280px;backdrop-filter:blur(6px);font-size:11px;pointer-events:none}
body.fs-mode #fs-overlay{display:block}
#fs-overlay h3{font-size:10px;color:#8b949e;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.fso-sta{display:flex;justify-content:space-between;margin-bottom:4px;align-items:center}
.fso-bar{height:3px;border-radius:2px;background:#21262d;margin-top:2px;margin-bottom:6px}
.fso-bar-fill{height:100%;border-radius:2px}
.fso-det{margin-top:8px;border-top:1px solid #21262d;padding-top:8px}
#map-legend{position:absolute;bottom:30px;left:10px;z-index:400;background:rgba(13,17,23,0.8);border:1px solid #21262d;border-radius:4px;padding:6px 10px;font-size:10px;color:#8b949e;pointer-events:none;line-height:2;white-space:nowrap}
#map-legend .leg-dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin-right:5px}

/* ── Desktop: hide mobile-only elements ─────────────────────────────── */
@media(min-width:601px){
  #mobile-tabs{display:none}
  #mobile-sta-panel{display:none}
  #detections-wrap{display:contents} /* transparent to layout — children flow as normal right-col children */
}
/* ── Narrow / mobile layout (Z Fold 6 folded ≈ 374px, phones ≤ 600px) ─────── */
@media(max-width:600px){
  header{padding:4px 10px;gap:4px;min-height:0;flex-wrap:wrap;overflow-x:hidden}
  header h1{font-size:12px;white-space:nowrap;flex:1}
  #header-controls{width:100%;justify-content:flex-end;flex-wrap:wrap;gap:3px}
  #cfg,#last-update{display:none}
  #last-event-summary{font-size:10px;border:none;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
  header button,header select{padding:2px 5px;font-size:10px}
  /* Stack layout: map top half, panel bottom half */
  .grid{display:flex;flex-direction:column;padding:4px;gap:4px;height:calc(100vh - 40px);overflow:hidden}
  .grid>*{margin:0}
  #sta-resize-handle{display:none}
  #left-panel{display:none!important}/* hidden — surfaced via tab */
  #map-wrap{flex:0 0 45vh;min-height:120px;border-radius:4px}
  .right-col{flex:1;min-height:0;border-radius:4px;overflow:hidden;display:flex;flex-direction:column}
  /* Tab bar */
  #mobile-tabs{display:flex;background:#161b22;border-bottom:1px solid #30363d;flex-shrink:0}
  .mob-tab{flex:1;padding:6px 4px;font-size:11px;text-align:center;color:#6e7681;cursor:pointer;border:none;background:none;font-family:inherit;border-bottom:2px solid transparent}
  .mob-tab.active{color:#58a6ff;border-bottom-color:#58a6ff}
  /* Mobile station panel (shown via tab) */
  #mobile-sta-panel{display:none;flex:1;overflow-y:auto;padding:6px 8px;background:#161b22}
  #mobile-sta-panel.active{display:block}
  #detections-wrap{display:none;flex:1;min-height:0;flex-direction:column;overflow:hidden}
  #detections-wrap.active{display:flex}
  /* Tighten detection rows */
  .det{padding:5px 8px}
  .det-row1,.det-row2{gap:3px}
  /* Shrink map controls */
  #fs-btn{padding:2px 5px;font-size:10px}
  #event-log{width:calc(100vw - 20px);right:10px;bottom:4px;max-height:80px;font-size:9.5px}
  #map-legend{font-size:9px;padding:4px 7px;line-height:1.8}
  /* Hide replay scrub bar on narrow */
  #replay-bar{display:none}
}
/* ── Very small viewports (folded phones, ≤ 480px) ──────────────────────── */
@media(max-width:480px){
  #event-log{display:none}
  #map-legend{display:none}
}

/* Epicenter cluster bubbles — strip Leaflet's default div-icon chrome
   (white box + border) so only the flat colored circle from app.js shows. */
.epi-cluster-icon{background:transparent!important;border:none!important}

/* Dual-handle replay range — plain draggable divs positioned by percentage
   (see app.js), not native range inputs. The two-overlaid-range-inputs CSS
   trick is fiddly across browsers and silently produced invisible thumbs;
   this is fully controlled from JS instead so it's actually verifiable. */
.replay-thumb{
  position:absolute;top:1px;width:12px;height:12px;border-radius:50%;
  border:1px solid;cursor:pointer;transform:translateX(-50%);
  box-shadow:0 1px 2px rgba(0,0,0,.5);touch-action:none
}

/* Playback position marker — only visible while replay is actively running. */
#replay-cursor{
  position:absolute;top:2px;width:2px;height:12px;background:#f85149;
  border-radius:1px;transform:translateX(-50%);pointer-events:none;
  box-shadow:0 0 3px rgba(248,81,73,.8);display:none
}

/* Header controls — buttons and selects mix native UA chrome that don't
   share intrinsic height, so pin box-sizing+height explicitly rather than
   relying on padding alone to make the row line up. */
.hdr-btn,.hdr-sel{
  box-sizing:border-box;height:24px;background:#161b22;
  border:1px solid #30363d;border-radius:4px;font-size:11px;
  cursor:pointer;color:#6e7681
}
.hdr-btn{display:inline-flex;align-items:center;justify-content:center;padding:0 8px}
.hdr-sel{padding:0 5px}