/* =====================================================================
 * SPM ECG Simulator — WebGL ambient field + glass + unified Tweaks + a11y
 * ===================================================================== */
#webgl-bg{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none;background:var(--bg)}
.app{position:relative;z-index:1}

/* Glass */
body.glass{--glass-alpha:.6}
body.glass{
  --bg2:color-mix(in srgb,#0a110e calc(var(--glass-alpha)*100%),transparent);
  --bg3:color-mix(in srgb,#0e1714 calc(var(--glass-alpha)*100%),transparent);
  --bg4:color-mix(in srgb,#15201b calc(var(--glass-alpha)*100%),transparent);
}
:root[data-theme="light"] body.glass{
  --bg2:color-mix(in srgb,#ffffff calc(var(--glass-alpha)*100%),transparent);
  --bg3:color-mix(in srgb,#f5f8f6 calc(var(--glass-alpha)*100%),transparent);
  --bg4:color-mix(in srgb,#e6ece8 calc(var(--glass-alpha)*100%),transparent);
}
body.glass .topbar,body.glass .sidebar,body.glass .crit,body.glass .blk.mgmt,
body.glass .choice,body.glass .feedback,body.glass .tweaks{
  -webkit-backdrop-filter:blur(13px) saturate(1.15);backdrop-filter:blur(13px) saturate(1.15);
}

/* Back-to-hub tab */
.hub-link{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:99999;display:flex;align-items:center;gap:6px;
  padding:9px 11px 9px 9px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#cdd6d9;text-decoration:none;background:rgba(8,16,12,.72);border:1px solid rgba(255,255,255,.12);border-left:0;
  border-radius:0 9px 9px 0;-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:0 8px 26px -12px rgba(0,0,0,.75);transition:background .15s,color .15s,padding .15s}
.hub-link:hover{background:rgba(16,26,20,.92);color:#fff;padding-left:14px}
.hub-link .hl-x{font-size:13px;line-height:1}
:root[data-theme="light"] .hub-link{background:rgba(255,255,255,.82);color:#1e2a24;border-color:rgba(0,0,0,.1)}

/* Unified Tweaks panel */
.tweaks-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:400;opacity:0;pointer-events:none;transition:opacity .25s}
.tweaks-scrim.open{opacity:1;pointer-events:auto}
.tweaks{position:fixed;top:0;right:0;height:100%;width:320px;max-width:86vw;z-index:401;background:var(--bg2);
  border-left:1px solid var(--border);box-shadow:-20px 0 60px -30px rgba(0,0,0,.8);transform:translateX(105%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;padding:20px}
.tweaks.open{transform:translateX(0)}
.tweaks h3{font-family:var(--serif);font-size:1.3rem;color:var(--white);margin:0 0 2px}
.tweaks .tw-sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--tx2);text-transform:uppercase;margin-bottom:18px}
.tw-close{position:absolute;top:16px;right:16px;background:none;border:1px solid var(--border);color:var(--tx2);width:30px;height:30px;border-radius:6px;cursor:pointer;font-size:1rem}
.tw-close:hover{border-color:var(--red);color:var(--red)}
.tw-group{margin-bottom:18px;border:1px solid var(--border);border-radius:9px;padding:14px;background:var(--bg3)}
.tw-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);margin-bottom:10px;display:block}
.tw-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:9px 0;font-size:.84rem;color:var(--tx)}
.tw-seg{display:flex;border:1px solid var(--border);border-radius:7px;overflow:hidden}
.tw-seg button{flex:1;font-family:var(--mono);font-size:.64rem;padding:7px 9px;background:var(--bg2);color:var(--tx2);border:none;cursor:pointer;text-transform:uppercase;letter-spacing:.04em}
.tw-seg button.on{background:var(--acc);color:#03130b;font-weight:700}
.switch{position:relative;width:42px;height:23px;flex-shrink:0;cursor:pointer}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch .track{position:absolute;inset:0;background:var(--bg4);border:1px solid var(--border);border-radius:20px;transition:.2s}
.switch .thumb{position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:var(--tx2);transition:.2s}
.switch input:checked+.track{background:var(--acc-dim);border-color:var(--acc)}
.switch input:checked~.thumb{transform:translateX(19px);background:var(--acc)}
.tw-range{width:100%;accent-color:var(--acc);margin-top:6px}

/* Accessibility */
.tbtn:focus-visible,.seg button:focus-visible,.rhy:focus-visible,.btn:focus-visible,.choice:focus-visible,
.hub-link:focus-visible,.tw-seg button:focus-visible,.switch:focus-within,.sound-toggle:focus-visible,.gs-row select:focus-visible{
  outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}

@media (prefers-reduced-motion: reduce){ #webgl-bg{will-change:auto} .brand .dot,.toast,.tweaks,.gbar i{animation:none;transition:none} }