:root {
  --panel-bg: #10141c;
  --panel-fg: #dfe6ee;
  --panel-border: #2a3442;
  --accent: #4da3ff;
  --timebar-bg: #0c1016;
  --handle-size: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; background: #080a10; color: var(--panel-fg); }
#map { position: absolute; inset: 0; background: #0a0d13; }

/* ---------- panel ---------- */
.panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 300px; max-width: 85vw;
  background: var(--panel-bg);
  border-left: 1px solid var(--panel-border);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform .25s ease;
  box-shadow: -4px 0 20px rgba(0,0,0,.5);
}
.panel.closed { transform: translateX(100%); }
.panel.open { transform: translateX(0); }
.panel-handle {
  position: absolute; left: -38px; top: 12px;
  width: 38px; height: 40px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-right: none;
  border-radius: 8px 0 0 8px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--panel-fg);
  user-select: none;
}
.panel-body { padding: 14px 14px 90px; overflow-y: auto; height: 100%; }
.panel-body h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #8fa3b8; margin: 18px 0 8px; }
.panel-body h2:first-child { margin-top: 0; }

.layer-card {
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: #161b25;
}
.layer-card .layer-head { display: flex; align-items: center; gap: 8px; }
.layer-card .layer-name { font-weight: 600; flex: 1; cursor: pointer; }
.layer-card .layer-vis { cursor: pointer; font-size: 16px; user-select: none; }
.layer-card .layer-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.layer-card label { font-size: 11px; color: #8fa3b8; min-width: 60px; }
.layer-card select { flex: 1; background: #0f141d; color: var(--panel-fg); border: 1px solid var(--panel-border); border-radius: 4px; padding: 3px 4px; font-size: 12px; }
.layer-card input[type=range] { flex: 1; }
.layer-card .val { font-size: 11px; color: #8fa3b8; width: 36px; text-align: right; }
.layer-card .layer-time { font-size: 11px; color: #6b7c8f; margin-top: 4px; }
.btn-mini { padding: 2px 6px; font-size: 11px; }

/* ---------- alignment panel ---------- */
#panel.notools .calib-btn { display: none; }
.align-panel { display: none; margin-top: 14px; border-top: 1px solid var(--panel-border); padding-top: 4px; }
.align-panel.open { display: block; }
.align-panel h2 { display: flex; align-items: center; justify-content: space-between; }
.align-target { font-size: 12px; color: #9fd1a0; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.align-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.align-row label { font-size: 11px; color: #8fa3b8; min-width: 60px; }
.align-row select { flex: 1; background: #0f141d; color: var(--panel-fg); border: 1px solid var(--panel-border); border-radius: 4px; padding: 3px 4px; font-size: 12px; }
.align-row input[type=number] { flex: 1; background: #0f141d; color: var(--panel-fg); border: 1px solid var(--panel-border); border-radius: 4px; padding: 3px 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
.align-status { font-size: 11px; color: #8fa3b8; min-height: 14px; margin-top: 4px; word-break: break-all; }
.georef-list { margin: 2px 0 6px; max-height: 170px; overflow-y: auto; }
.georef-row { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 2px 0; border-bottom: 1px solid var(--panel-border); font-variant-numeric: tabular-nums; }
.georef-row .n { color: #ff7b00; font-weight: 700; min-width: 18px; }
.georef-row .coords { flex: 1; color: var(--panel-fg); word-break: break-all; }
.georef-row .err { color: #8fa3b8; min-width: 52px; text-align: right; }

/* ---------- timebar ---------- */
#timebar {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--timebar-bg);
  border-top: 1px solid var(--panel-border);
  z-index: 1000;
  padding: 8px 12px 6px;
}
.timebar-top { display: flex; align-items: center; gap: 10px; }
.player-controls { display: inline-flex; align-items: center; gap: 10px; flex: none; }
#timeline { flex: 1; height: 28px; touch-action: none; cursor: pointer; }
.timestamp { font-weight: 700; font-size: 15px; min-width: 130px; text-align: right; font-variant-numeric: tabular-nums; }
#speedVal { min-width: 0; text-align: left; }
.hours-sel { background: #1c2430; color: var(--panel-fg); border: 1px solid var(--panel-border); border-radius: 4px; padding: 3px 4px; font-size: 12px; }
.timebar-bottom { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: #6b7c8f; }

/* ---------- small screens: compact timebar so the slider keeps room ---------- */
@media (max-width: 760px) {
  #timebar { padding: 6px 8px 4px; }
  .timebar-top { gap: 6px; flex-wrap: wrap; }
  .player-controls { gap: 6px; }
  #timebar .btn { padding: 4px 7px; font-size: 12px; }
  /* slider takes the full first row; play/speed/timestamp wrap below */
  #timeline { flex: 1 1 100%; min-width: 0; }
  .timestamp { font-size: 12px; min-width: 0; margin-left: auto; }
  .hours-sel { font-size: 11px; padding: 2px 3px; }
}

/* ---------- buttons ---------- */
.btn {
  background: #1c2430; color: var(--panel-fg);
  border: 1px solid var(--panel-border); border-radius: 5px;
  padding: 5px 10px; cursor: pointer; font-size: 12px;
}
.btn:hover { background: #27303f; }
.btn.active { background: var(--accent); color: #081018; border-color: var(--accent); }

.tool-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.tool-help { margin: 2px 0 6px; }
.tool-help-card { background: #0f141d; border: 1px solid var(--panel-border); border-radius: 6px; padding: 8px 10px; font-size: 12px; }
.tool-help-card h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 4px; font-size: 13px; }
.tool-help-card p { margin: 0; color: var(--panel-fg); }
#calibToggle { margin-left: auto; }

.tool-status { font-size: 11px; color: #8fa3b8; min-height: 14px; margin-bottom: 4px; }
/* layer chooser popup for ambiguous marks */
.layer-chooser { position: absolute; z-index: 900; background: #0f141d; border: 1px solid var(--panel-border); border-radius: 6px; padding: 4px; font-size: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.6); min-width: 170px; }
.layer-chooser-title { font-size: 11px; color: #8fa3b8; padding: 2px 10px 4px; }
.layer-chooser button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--panel-fg); padding: 7px 10px; cursor: pointer; font-size: 12px; border-radius: 4px; }
.layer-chooser button:hover { background: #27303f; }
.hint { font-size: 11px; color: #8fa3b8; }
.settings-row label { font-size: 11px; color: #8fa3b8; }
.chk { font-size: 12px; display: flex; align-items: center; gap: 5px; cursor: pointer; }
.lightning-info { font-size: 11px; color: #6b7c8f; }

/* ---------- vector / tool layers ---------- */
.vector-handle {
  width: var(--handle-size); height: var(--handle-size);
  background: #fff; border: 2px solid var(--accent);
  border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.prediction-line { stroke-dasharray: 8 6; }
.prediction-label { color: #ffb35c; font-size: 12px; font-weight: 600; text-shadow: -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000; white-space: nowrap; }
.measure-label { color: #7cc4ff; font-size: 11px; font-weight: 600; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.tool-point-marker { background: #ffd23f; border: 2px solid #111; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.6); }
.tool-line { stroke: #ffd23f; }
.tool-drag-icon { background: transparent; border: none; }

/* ---------- load status ---------- */
.load-status { font-weight: 600; }
.load-status.loading { color: #4da3ff; }
.load-status.polling { color: #3fbf6f; }
.frame-info { font-variant-numeric: tabular-nums; }

/* ---------- loading progress (lower-left) ---------- */
.load-progress {
  position: absolute; left: 12px; bottom: 64px; z-index: 1001;
  background: rgba(12, 16, 22, 0.92);
  border: 1px solid var(--panel-border); border-radius: 5px;
  padding: 4px 9px; font-size: 11px; color: #9fd1a0;
  font-variant-numeric: tabular-nums;
  max-width: 62vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: 0; pointer-events: none;
}