/* ThresholdStack Viewer — shared header shell styles.
   Loaded by every module page. Theme tokens are referenced with fallbacks so the
   header renders correctly even on a page that hasn't declared its own :root set. */
#top{position:absolute;top:0;left:0;right:0;height:52px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:0 16px;z-index:8;
  background:color-mix(in srgb, var(--ground2,#0c1017) 82%, transparent);
  border-bottom:1px solid var(--line,#212a36);backdrop-filter:blur(10px)}
.top-l{display:flex;align-items:center;gap:14px;min-width:0}
.logo{display:flex;align-items:center;flex:none;text-decoration:none;opacity:.95;transition:opacity .12s}
.logo:hover{opacity:1}
.logo img{height:20px;width:auto;display:block}
.top-div{width:1px;height:22px;background:var(--line2,#2c3746);flex:none}
.modules{display:flex;align-items:center;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none}
.modules::-webkit-scrollbar{display:none}
.mod{display:flex;align-items:center;gap:7px;flex:none;text-decoration:none;
  font-family:"Archivo",system-ui,sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.01em;
  color:var(--muted,#7d8b99);background:transparent;border:1px solid transparent;border-radius:8px;
  padding:6px 11px;cursor:pointer;white-space:nowrap;transition:color .12s,background .12s,border-color .12s}
.mod:hover{color:var(--text,#e6edf3);background:#ffffff08}
.mod.active{color:var(--text,#e6edf3);background:color-mix(in srgb, var(--accent,#34d3c6) 12%, transparent);
  border-color:var(--accent-dim,#1c6b66)}
.mod .mod-dot{width:7px;height:7px;border-radius:50%;background:var(--dim,#55616f);flex:none}
.mod.active .mod-dot{background:var(--accent,#34d3c6);box-shadow:0 0 8px var(--accent,#34d3c6)}
.mod[disabled]{cursor:not-allowed;opacity:.55}
.mod[disabled]:hover{color:var(--muted,#7d8b99);background:transparent}
.mod .soon{font-family:"IBM Plex Mono",monospace;font-size:9px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim,#55616f);
  border:1px solid var(--line2,#2c3746);border-radius:999px;padding:1px 6px}
.top-r{display:flex;align-items:center;gap:12px;flex:none}
#scene-name{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--accent,#34d3c6);
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
@media (max-width:640px){
  .top-div,.mod .soon{display:none}
  #scene-name{display:none}
  .logo img{height:18px}
  .mod{padding:6px 8px;font-size:12px}
}