/* Scoped to the existing mode state: 2D keeps its original presentation. */
body.mode-3d .sidebar { background:color-mix(in srgb,var(--bg-primary) 88%,transparent); backdrop-filter:blur(10px); border-right:1px solid var(--border); box-shadow:0 8px 30px #0003; }
body.mode-3d .sidebar-header { background:color-mix(in srgb,var(--bg-secondary) 70%,transparent); }
body.mode-3d .sidebar::before { opacity:.45; animation:none; }
body.mode-3d .observation-layer:has(input:checked) { background:var(--accent-bg); box-shadow:inset 2px 0 var(--accent); }
body.mode-3d #map3d-options { background:transparent; border:0; padding:0; min-width:0; }
body.mode-3d .map3d-options-legend { position:absolute; clip-path:inset(50%); width:1px; height:1px; overflow:hidden; }
body.mode-3d .construction-temporal { display:block; margin:0; padding:0; border:0; }
body.mode-3d .map3d-accordion { margin:0 0 6px; border:0; border-radius:10px; background:transparent; overflow:hidden; }
body.mode-3d .map3d-accordion-content { padding:8px 10px; min-width:0; }
body.mode-3d .construction-temporal > h4 { position:absolute; clip-path:inset(50%); width:1px; height:1px; overflow:hidden; }
body.mode-3d .temporal-panel-group { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px 7px; }
body.mode-3d .temporal-selection { grid-template-columns:78px minmax(0,1fr); }
body.mode-3d #temporal-year { font-size:19px; font-weight:750; color:var(--accent); margin:0; height:34px; min-height:34px; padding:3px 4px; }
body.mode-3d #temporal-mode { align-self:center; margin:0; height:34px; min-height:34px; font-size:11px; padding:3px; }
body.mode-3d #temporal-progress { grid-column:1/-1; width:100%; min-height:22px; margin:0; accent-color:var(--accent); }
body.mode-3d .temporal-history-controls,body.mode-3d #temporal-compare-year,body.mode-3d #temporal-compare-label,body.mode-3d .temporal-panel-group > label,body.mode-3d .temporal-panel-group > output { grid-column:1/-1; }
body.mode-3d .temporal-history-controls { display:grid; grid-template-columns:minmax(0,1fr); gap:5px; border:0; padding:0; }
body.mode-3d #temporal-compare-year { margin:0; padding:4px; font-size:11px; }
body.mode-3d #construction-temporal [hidden] { display:none!important; }
body.mode-3d #temporal-play,body.mode-3d #temporal-restart { min-height:32px; margin:0; padding:5px; font-size:11px; }
body.mode-3d #map3d-options label.temporal-switch { display:flex; align-items:center; gap:8px; min-height:28px; font-size:12px; margin:0!important; cursor:pointer; line-height:1.4; }
body.mode-3d .temporal-switch input[type=checkbox] { appearance:none; position:relative; flex:0 0 28px; width:28px; height:16px; border:1px solid var(--border); border-radius:10px; background:var(--bg-tertiary); margin:0; cursor:pointer; }
body.mode-3d .temporal-switch input::before { content:''; position:absolute; width:10px; height:10px; left:2px; top:2px; border-radius:50%; background:var(--text-muted); transition:transform .15s; }
body.mode-3d .temporal-switch input:checked { background:var(--accent); border-color:var(--accent); }
body.mode-3d .temporal-switch input:checked::before { background:var(--bg-primary); transform:translateX(12px); }
body.mode-3d .temporal-switch input:disabled { opacity:.4; cursor:help; }
body.mode-3d .temporal-switch input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
body.mode-3d .construction-temporal output { font-size:11px; line-height:1.5; }
body.mode-3d #temporal-count { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
body.mode-3d .temporal-stat { display:flex; flex-direction:column; justify-content:space-between; gap:3px; min-width:0; padding:7px; border:1px solid var(--border-light); border-radius:6px; background:var(--bg-input); color:var(--text-muted); line-height:1.3; }
body.mode-3d .temporal-stat strong { font-size:19px; font-variant-numeric:tabular-nums; font-weight:700; color:var(--accent); }
body.mode-3d .temporal-statistics > small,body.mode-3d .temporal-statistics > details { grid-column:1/-1; }
body.mode-3d .construction-temporal small { display:block; margin-top:4px!important; font-size:11px; color:var(--text-faint); line-height:1.3; }
body.mode-3d #temporal-year-legend { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:5px 6px; color:var(--text-muted); font-size:11px; }
body.mode-3d #temporal-year-legend span { display:inline-flex; align-items:center; gap:3px; }
body.mode-3d #temporal-year-legend i { width:9px; height:9px; border-radius:2px; }
body.mode-3d .temporal-methodology { color:var(--text-faint); font-size:11px; margin-top:4px; }
body.mode-3d .temporal-methodology summary { cursor:pointer; }
@media(max-width:768px) { body.mode-3d #map3d-options label.temporal-switch { min-height:36px; } body.mode-3d #temporal-play,body.mode-3d #temporal-restart,body.mode-3d #temporal-year,body.mode-3d #temporal-mode { min-height:36px; } }
@media(prefers-reduced-motion:reduce) { body.mode-3d .sidebar,body.mode-3d .layer-group-header,body.mode-3d .map3d-accordion > summary::after { transition:none; } }