/* A quiet instrument panel: data stays in the sidebar, never over the model. */
:root {
  color-scheme: dark;
  --bg: #080e15; --bg-2: #0b131d; --paper: #101b26;
  --ink: #e1eaf0; --ink-soft: #95a7b6; --line: rgba(163, 190, 208, .13);
  --blue: #87d3dc; --blue-soft: rgba(135, 211, 220, .08);
  --accent-warm: #efb572; --green: #8dd3c0; --radius: 18px;
}
body { background: var(--bg); height: 100svh; min-height: 560px; }
header { padding: 20px 28px; gap: 36px; background: var(--bg); backdrop-filter: none; border-color: var(--line); position: relative; }
.brand { font-size: 19px; font-weight: 600; letter-spacing: -.7px; gap: 12px; }
.brand svg rect:nth-child(1) { fill: var(--accent-warm); }
.brand svg rect:nth-child(2), .brand svg rect:nth-child(3) { fill: var(--blue); }
.tabs { gap: 4px; padding: 4px; background: #101a24; border: 1px solid var(--line); border-radius: 10px; }
.tabs button { padding: 9px 18px; border-radius: 7px; font-size: 12px; font-weight: 500; }
.tabs button.active { background: #223440; color: #d9f2f4; box-shadow: inset 0 0 0 1px rgba(167, 213, 224, .12), 0 2px 6px #0003; }
.tabs button:not(.active):hover { color: var(--ink); background: #192530; }
.live { gap: 9px; font-size: 11px; }
.live b { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.dot { width: 6px; height: 6px; background: var(--accent-warm); animation: instrument-pulse 3s ease-out infinite; }
@keyframes instrument-pulse { 0%, 100% { box-shadow: 0 0 0 0 #efb57200; } 35% { box-shadow: 0 0 0 5px #efb57218; } }
main { padding: 22px 28px 28px; gap: 20px; }
.stage { background: #0b131d; border-color: rgba(163, 190, 208, .15); box-shadow: inset 0 1px 0 #ffffff05, 0 20px 60px #0002; isolation: isolate; }
.stage[data-renderer="3d"] .hint { display: none; }
.stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 90px #03091038; z-index: 1; }
#stage3d { touch-action: none; outline: none; }
aside { width: 302px; gap: 16px; }
.panel { background: #0e1822; box-shadow: none; border-color: var(--line); }
.panel > h2 { padding: 18px 18px; letter-spacing: .025em; font-weight: 400; font-size: 10.5px; gap: 10px; }
.panel > h2 .count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 20px; padding: 0 6px; border-radius: 5px; background: #1b303c; color: #a2dbe0; }
.ev { padding: 14px 18px; gap: 10px; border-color: #96b0c40b; grid-template-columns: 6px minmax(0, 1fr) auto; }
.ev .txt { font-size: 12.5px; line-height: 1.65; }
.ev .txt b { font-weight: 500; color: #c9dce6; }
.ev .txt span { color: #8fa4b4; }
.ev time { color: #8b9ead; font-size: 9.5px; }
.ev i { height: 5px; width: 5px; }
.ev i.visit { background: var(--accent-warm); box-shadow: 0 0 7px #efb57230; }
.ev i.pageview { background: var(--blue); }
.ev i.leave { background: #445866; outline: none; }
.ev:hover { background: #8bd7df08; }
.ev.selected { background: #87d3dc0f; box-shadow: inset 2px 0 var(--blue); }
#visitorDetail .vd-body { padding: 18px; }
.vd-id { font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
.vd-meta { font-size: 10.5px; line-height: 1.8; }
.tl b { font-size: 11.5px; font-weight: 400; }
.tl time { font-size: 9.5px; }
#events { scrollbar-width: thin; scrollbar-color: #344653 transparent; }
.scene-controls { position: absolute; right: 20px; bottom: 20px; z-index: 3; display: flex; gap: 6px; padding: 5px; border: 1px solid #8eaabd26; border-radius: 12px; background: #101c28d9; backdrop-filter: blur(12px); }
.scene-controls[hidden] { display: none; }
.scene-controls button { display: grid; place-items: center; width: 36px; height: 36px; padding: 8px; color: #99b0bf; background: transparent; border: 0; border-radius: 7px; cursor: pointer; transition: background .15s, color .15s; }
.scene-controls button svg { width: 21px; height: 21px; }
.scene-controls button:hover { color: #e1eff4; background: #283e4b; }
.scene-controls button[aria-pressed="true"] { color: #a8e1e6; background: #253b47; }
button:focus-visible, .ev:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (min-width: 1600px) { main { max-width: 1920px; width: 100%; margin-inline: auto; } aside { width: 340px; } }
@media (max-width: 1080px) { header { gap: 20px; padding-inline: 18px; } main { padding: 16px 18px 20px; gap: 14px; } aside { width: 270px; } #tzNote { display: none; } }
@media (max-width: 860px) {
  body { height: auto; min-height: 100svh; }
  header { gap: 14px; padding: 16px; flex-wrap: wrap; }
  .brand { margin-right: auto; }
  .tabs { order: 3; width: 100%; }
  .tabs button { flex: 1; padding: 10px; }
  .live { margin-left: 0; font-size: 10px; gap: 6px; }
  main { flex-direction: column; padding: 12px; gap: 14px; }
  .stage { min-height: 0; height: clamp(410px, 66svh, 700px); flex: none; }
  aside { width: 100%; flex: none; }
  #events { max-height: 320px; }
  .scene-controls { right: 14px; bottom: 14px; }
  .scene-controls button { width: 44px; height: 44px; }
  .stage[data-renderer="3d"][data-view="park"] { height: clamp(360px, 50svh, 500px); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.scene-controls button:disabled { opacity: .4; cursor: not-allowed; background: transparent; }