/* ═══════════════════════════════════════════════════════════════════
   VEXTAL V2 — WebGL Spatial OS
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #03050a;
  overscroll-behavior: none;
}

#vextal-engine {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  image-rendering: pixelated;
}

/* ── Pre-flight init screen ─────────────────────────────────────── */

#init-screen {
  position:        fixed;
  inset:           0;
  z-index:         100;
  background:      #0b1411;   /* deep green-black — complements the wordmark sweep */
  display:         flex;
  flex-direction:  column;     /* stack content + legal so they can never overlap */
  align-items:     center;
  justify-content: center;
  gap:             2.2rem;     /* guaranteed clearance between the button stack and legal links */
  overflow-y:      auto;       /* short viewports scroll instead of clipping/overlapping */
}

/* ── All-in-one onboarding wrap: text lines + button in one stack ── */

#onboarding-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            44px;
  text-align:     center;
  max-width:      900px;
  padding:        0 40px;
  user-select:    none;
}

/* ── (DELETED) Vextal wordmark — the second title-cased "Vextal" splash and all of
   its vacuum/sweep styling were REMOVED ENTIRELY along with the JS element. The 3D
   letter-spelling animation is now the only title; nothing renders #vextal-wordmark. */

.ob-line {
  opacity:     0;
  font-family: inherit;
  line-height: 1.5;
}

/* Main title — dominates the screen */
#ob-line-1 {
  color:          #ffffff;
  font-size:      2.6rem;
  font-weight:    700;
  letter-spacing: 5px;
  text-transform: uppercase;
}

/* World-building sub-line */
#ob-line-2 {
  color:          #ffffff;   /* Req 1 — solid white, full contrast */
  font-size:      1.4rem;
  font-weight:    300;
  letter-spacing: 4px;
  text-transform: uppercase;
}

/* Quiet recommendation */
#ob-line-3 {
  color:          #ffffff;   /* Req 1 — solid white, full contrast */
  font-size:      1.15rem;
  font-weight:    300;
  letter-spacing: 2px;
  font-style:     italic;
}

/* The flex statement — confident, punchy, distinct */
#ob-line-4 {
  color:          #ffffff;   /* Req 1 — solid white, full contrast */
  font-size:      1.25rem;
  font-weight:    400;
  letter-spacing: 1px;
  line-height:    1.7;
}

/* ── Init button — locked inside the wrap, unlocks after line 4 ─── */

#init-btn {
  margin-top:     28px;   /* extra breathing room separating button from line 4 */
  background:     transparent;
  border:         1px solid #ffffff;
  color:          #ffffff;
  font-family:    inherit;
  font-size:      11px;
  font-weight:    400;
  letter-spacing: 6px;
  text-transform: uppercase;
  padding:        26px 52px;      /* taller button */
  min-height:     68px;
  display:        inline-flex;
  align-items:    center;
  justify-content:center;
  cursor:         pointer;
  outline:        none;
  transition:     background 0.25s ease, color 0.25s ease;
  opacity:        0;
  pointer-events: none;
}

#init-btn:hover {
  background: #ffffff;
  color:      #000000;
}

/* ══════════════════════════════════════════════════════════════════
   MODULE OVERLAY — 2040-style full-screen environment (CONSOLIDATED)
   ══════════════════════════════════════════════════════════════════ */

#module-overlay {
  position:         fixed;
  inset:            0;
  z-index:          99999;                  /* High priority to sit cleanly over the WebGL canvas */
  display:          none;                   /* Controlled dynamically as a block asset via script.js */
  flex-direction:   column;
  opacity:          1;                      /* Managed natively; baseline set to visible when display triggers */
  pointer-events:   auto;                   /* Unlocks interactive UI grid vectors and buttons */
  overflow:         hidden;
  background:       rgba(3, 5, 10, 0.65);   /* Semi-transparent dark ambient foundation space */
  backdrop-filter:  blur(15px);             /* Cinematic frosted glass treatment over starfields */
  -webkit-backdrop-filter: blur(15px);
}

/* ── Cyber-matrix scanline grid — hardware-accelerated, zero-lag ── */
/* Sits at z-index:2 (above video + UI scrim), pointer-events:none   */
/* so all clicks pass through. Creates the military-feed dither look. */

#module-overlay::before {
  content:          '';
  display:          block;
  position:         absolute;
  top:    0;
  left:   0;
  bottom: 0;
  right:  0;
  background:
    linear-gradient(
      rgba(18, 16, 16, 0) 50%,
      rgba(0,  0,  0, 0.22) 50%
    ),
    linear-gradient(
      90deg,
      rgba(255, 0,   0,   0.05),
      rgba(0,   255, 0,   0.018),
      rgba(0,   0,   255, 0.05)
    );
  background-size:  100% 3px, 6px 100%;
  z-index:          2;
  pointer-events:   none;
  opacity:          0.80;
  animation:        ambientScan 12s linear infinite;
}

@keyframes ambientScan {
  0%   { background-position: 0 0,    0 0; }
  100% { background-position: 0 100%, 0 0; }
}

/* Dark gradient scrim for text legibility over the live starfield */
#overlay-ui {
  position:        relative;
  z-index:         1;
  display:         flex;
  flex-direction:  column;
  height:          100%;
  background:      linear-gradient(
    160deg,
    rgba(4, 8, 18, 0.32) 0%,
    rgba(10, 16, 34, 0.10) 50%,
    rgba(4, 8, 18, 0.38) 100%
  );
}

/* ── Full-Screen Horizon Header — pinned top, minimal height ──────── */

#overlay-nav-header {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         20px 40px;
  border-bottom:   1px solid rgba(255, 255, 255, 0.07);
  flex-shrink:     0;
  width:           100%;
}

/* ── Universe Tab Bar — centered between back button and section label */

#universe-tab-bar {
  position:    absolute;
  left:        50%;
  transform:   translateX(-50%);
  display:     flex;
  gap:         2.4rem;
  align-items: center;
}

.uni-tab-btn {
  background:      transparent;
  border:          none;
  color:           rgba(255, 255, 255, 0.25);
  font-family:     inherit;
  font-size:       0.62rem;
  font-weight:     700;
  letter-spacing:  0.22em;
  text-transform:  uppercase;
  cursor:          pointer;
  padding:         6px 0;
  outline:         none;
  transition:      color 0.18s, text-shadow 0.18s;
  white-space:     nowrap;
  user-select:     none;
}

.uni-tab-btn:hover {
  color:       rgba(0, 229, 255, 0.70);
  text-shadow: 0 0 14px rgba(0, 229, 255, 0.40);
}

.uni-tab-btn.active {
  color:       #00E5FF;
  text-shadow: 0 0 18px rgba(0, 229, 255, 0.70),
               0 0 40px rgba(0, 229, 255, 0.20);
}

/* ── Logistics horizontal stream ─────────────────────────────────── */

.uni-logistics-stream {
  display:     flex;
  gap:         1.8rem;
  width:       100%;
  flex-wrap:   wrap;
  align-items: stretch;
}

.uni-logistics-card {
  flex:        1;
  min-width:   180px;
}

#overlay-back {
  background:      transparent;
  border:          1px solid rgba(255, 255, 255, 0.32);
  color:           #ffffff;
  font-family:     inherit;
  font-size:       11px;
  font-weight:     500;
  letter-spacing:  5px;
  text-transform:  uppercase;
  padding:         13px 28px;
  cursor:          pointer;
  outline:         none;
  transition:      background 0.22s, border-color 0.22s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#overlay-back:hover {
  background:   rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.65);
}

#overlay-title {
  font-size:      1.1rem;
  font-weight:    700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color:          #ffffff;
  text-shadow:    0 0 24px rgba(255, 255, 255, 0.35);
}

/* ── Universe Workspace — unrestricted open canvas below the header ── */

#universe-workspace {
  position:    relative;
  display:     flex;
  gap:         1.6rem;
  padding:     2.8rem 3.5rem;
  flex:        1;
  min-height:  0;
  width:       100%;
  align-items: flex-start;
  flex-wrap:   wrap;
  overflow:    hidden;
  background:  transparent;
  border:      none;
}

.ov-col {
  flex:        1;
  min-width:   260px;
  max-width:   420px;
  padding:     0 0.5rem;
}
.ov-col:not(:first-child) {
  border-left: 0.5px solid rgba(255, 255, 255, 0.06);
}

.ov-col-title {
  font-size:      0.54rem;
  font-weight:    700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.24);
  margin-bottom:  1.1rem;
  padding-bottom: 0.5rem;
  text-shadow:    0 1px 5px rgba(0,0,0,0.90);
}

.ov-row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  padding:         0.48rem 0;
}

.ov-label {
  font-size:      0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.28);
  font-weight:    500;
  text-shadow:    0 1px 5px rgba(0,0,0,0.90);
}

.ov-val {
  font-size:      0.88rem;
  font-weight:    700;
  letter-spacing: 0.04em;
  text-shadow:    0 2px 8px rgba(0,0,0,0.95);
}

/* ══════════════════════════════════════════════════════════════════
   ACADEMICS OVERLAY — Cyber-HUD 3-Zone Production Interface
   ══════════════════════════════════════════════════════════════════ */

/* 3-column grid layout override */
#universe-workspace.ac-layout {
  display:               grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap:                   1.4rem;
  padding:               1.8rem 2.8rem;
  flex:                  1;
  align-items:           flex-start;
  overflow:              hidden;
}

/* Shared column shell */
.ac-ov-col {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  height:         100%;
  min-height:     0;
  overflow-y:     auto;
  scrollbar-width: none;
}
.ac-ov-col::-webkit-scrollbar { display: none; }

/* ── LEFT: GPA Radial Engine ─────────────────────────────────────── */

.ac-gpa-wrap {
  position:       relative;
  width:          148px;
  height:         148px;
  flex-shrink:    0;
  align-self:     center;
}

.ac-gpa-ring {
  width:    100%;
  height:   100%;
  overflow: visible;
}

.ac-gpa-track {
  fill:         none;
  stroke:       rgba(255, 255, 255, 0.06);
  stroke-width: 8;
}

.ac-gpa-arc {
  fill:            none;
  stroke-width:    8;
  stroke-linecap:  round;
  transition:      stroke-dashoffset 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  filter:          drop-shadow(0 0 6px rgba(0, 160, 255, 0.70))
                   drop-shadow(0 0 14px rgba(0, 80, 255, 0.40));
}

.ac-gpa-center {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             1px;
}

.ac-gpa-num {
  font-family:    'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  font-size:      2.4rem;
  line-height:    1;
  color:          #ffffff;
  text-shadow:    0 0 16px rgba(0, 200, 255, 0.55);
  letter-spacing: 0.04em;
}

.ac-gpa-sub {
  font-size:      0.50rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.38);
  font-weight:    600;
}

.ac-gpa-mode {
  font-size:      0.44rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color:          rgba(0, 220, 255, 0.55);
  margin-top:     2px;
}

/* Triple-ring GPA header row — spans both grid columns, centered */
.ac-gpa-row {
  grid-column:     1 / -1;
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             clamp(1.2rem, 4vw, 3.5rem);
  flex-wrap:       wrap;
  padding-bottom:  0.5rem;
}
.ac-gpa-mini { width: 130px; height: 130px; }

/* ── Slider Matrix ───────────────────────────────────────────────── */

.ac-slider-matrix {
  background:    rgba(4, 8, 24, 0.50);
  border:        1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding:       1rem 1.1rem;
  display:       flex;
  flex-direction: column;
  gap:           0.65rem;
}

.ac-sm-header {
  font-size:      0.54rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.30);
  font-weight:    700;
  padding-bottom: 0.4rem;
  border-bottom:  1px solid rgba(255, 255, 255, 0.07);
}

.ac-sl-row {
  display:             grid;
  grid-template-columns: 5.5rem 1fr 2.8rem;
  align-items:         center;
  gap:                 0.5rem;
}

.ac-sl-label {
  font-size:      0.52rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.38);
  white-space:    nowrap;
}

/* Neon line slider with square handle */
.ac-slider {
  -webkit-appearance: none;
  appearance:         none;
  height:             2px;
  background:         rgba(0, 180, 255, 0.18);
  border-radius:      0;
  outline:            none;
  cursor:             pointer;
  width:              100%;
}
.ac-slider::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(90deg, rgba(0,200,255,0.35), rgba(0,60,255,0.35));
  border-radius: 0;
}
.ac-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:       10px;
  height:      10px;
  background:  #00CFFF;
  border-radius: 0;          /* square handle */
  box-shadow:  0 0 6px rgba(0,207,255,0.80), 0 0 14px rgba(0,207,255,0.35);
  cursor:      pointer;
  margin-top:  -4px;
}
.ac-slider::-moz-range-thumb {
  width: 10px; height: 10px;
  background: #00CFFF; border: none; border-radius: 0;
  box-shadow: 0 0 6px rgba(0,207,255,0.80); cursor: pointer;
}
.ac-slider::-moz-range-track {
  height: 2px;
  background: linear-gradient(90deg, rgba(0,200,255,0.35), rgba(0,60,255,0.35));
}

.ac-sl-pct {
  font-size:   0.62rem;
  color:       #00CFFF;
  font-weight: 700;
  text-align:  right;
  text-shadow: 0 0 6px rgba(0,207,255,0.60);
}

.ac-sim-gpa-row {
  display:         flex;
  justify-content: space-between;
  padding-top:     0.4rem;
  border-top:      1px solid rgba(255,255,255,0.07);
  margin-top:      0.1rem;
}
.ac-sim-label {
  font-size: 0.52rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.30);
}
.ac-sim-val {
  font-size: 0.78rem; font-weight: 700; color: #00CFFF;
  text-shadow: 0 0 8px rgba(0,207,255,0.55);
}

/* ── CENTER: Grade Matrix ────────────────────────────────────────── */

.ac-gm-wrap {
  background:    rgba(4, 8, 24, 0.50);
  border:        1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow:      hidden;
}

.ac-gm-header-row {
  display:               grid;
  grid-template-columns: 1fr auto auto;
  gap:                   1rem;
  padding:               0.55rem 1rem;
  font-size:             0.50rem;
  letter-spacing:        0.18em;
  text-transform:        uppercase;
  color:                 rgba(255, 255, 255, 0.28);
  font-weight:           700;
  border-bottom:         1px solid rgba(255, 255, 255, 0.07);
}

.ac-gm-row {
  display:               grid;
  grid-template-columns: 1fr auto auto;
  gap:                   1rem;
  padding:               0.58rem 1rem;
  border-bottom:         1px solid rgba(255, 255, 255, 0.045);
  align-items:           center;
  transition:            background 0.2s;
}
.ac-gm-row:last-child { border-bottom: none; }
.ac-gm-row:hover { background: rgba(255,255,255,0.03); }

.ac-gm-course {
  font-size:      0.68rem;
  letter-spacing: 0.04em;
  color:          rgba(255, 255, 255, 0.78);
  font-weight:    500;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

.ac-gm-pct {
  font-size:   0.72rem;
  font-weight: 700;
  color:       rgba(255, 255, 255, 0.55);
  text-align:  right;
}

.ac-gm-letter {
  font-size:   0.72rem;
  font-weight: 700;
  text-align:  right;
  min-width:   2rem;
}

/* Status — secure: neon cyan, no animation */
.ac-gm-row.secure .ac-gm-course { color: rgba(255,255,255,0.92); }
.ac-gm-row.secure .ac-gm-pct    { color: #00EDCC; text-shadow: 0 0 7px rgba(0,237,204,0.50); }
.ac-gm-row.secure .ac-gm-letter { color: #00EDCC; text-shadow: 0 0 7px rgba(0,237,204,0.50); }

/* Status — warning: amber pulse */
.ac-gm-row.warning .ac-gm-pct    { color: #FFAA00; text-shadow: 0 0 8px rgba(255,170,0,0.55); }
.ac-gm-row.warning .ac-gm-letter { color: #FFAA00; text-shadow: 0 0 8px rgba(255,170,0,0.55); }
.ac-gm-row.warning .ac-gm-course {
  color:     #FFD070;
  animation: ac-warn-amber 2.8s ease-in-out infinite;
}
@keyframes ac-warn-amber {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.60; }
}

/* ── Assignment Velocity Ticker ──────────────────────────────────── */

.ac-ticker-wrap {
  background:    rgba(4, 8, 24, 0.50);
  border:        1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow:      hidden;
  flex:          1;
}

.ac-ticker-title {
  font-size:      0.50rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.28);
  font-weight:    700;
  padding:        0.55rem 1rem;
  border-bottom:  1px solid rgba(255, 255, 255, 0.07);
}

.ac-tick-item {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
  padding:     0.52rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.045);
}
.ac-tick-item:last-child { border-bottom: none; }

.ac-tick-dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  flex-shrink:   0;
  background:    rgba(255,255,255,0.25);
}
.ac-tick-item.missing .ac-tick-dot {
  background:  #FF4444;
  box-shadow:  0 0 6px rgba(255,68,68,0.70);
  animation:   ac-dot-pulse 1.4s ease-in-out infinite;
}
@keyframes ac-dot-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255,68,68,0.70); }
  50%       { box-shadow: 0 0 14px rgba(255,68,68,0.30); }
}

.ac-tick-name {
  flex:      1;
  font-size: 0.66rem;
  color:     rgba(255,255,255,0.70);
}
.ac-tick-item.missing .ac-tick-name { color: #FF6666; font-weight: 600; }

.ac-tick-due {
  font-size:      0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.30);
  white-space:    nowrap;
}
.ac-tick-item.missing .ac-tick-due { color: #FF4444; font-weight: 700; }

/* ── RIGHT: AI Terminal ──────────────────────────────────────────── */

.ac-term-header {
  font-size:      0.50rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          rgba(0, 237, 180, 0.45);
  font-weight:    700;
  padding-bottom: 0.4rem;
  border-bottom:  1px solid rgba(0,237,180,0.10);
}

.ac-ai-terminal {
  background:    rgba(0, 4, 12, 0.65);
  border:        1px solid rgba(0, 237, 180, 0.14);
  border-radius: 4px;
  padding:       0.85rem 1rem;
  font-family:   'Courier New', Courier, monospace;
  font-size:     0.66rem;
  line-height:   1.80;
  color:         rgba(0, 237, 180, 0.82);
  text-shadow:   0 0 4px rgba(0, 237, 180, 0.25);
  min-height:    120px;
  max-height:    190px;
  overflow-y:    auto;
  scrollbar-width: none;
  white-space:   pre-wrap;
  word-break:    break-word;
}
.ac-ai-terminal::-webkit-scrollbar { display: none; }

.ac-term-cursor {
  display:   inline-block;
  animation: ac-cur-blink 1s step-end infinite;
  color:     rgba(0,237,180,0.85);
}
@keyframes ac-cur-blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── Diplomacy Trigger ───────────────────────────────────────────── */

.diplomacy-trigger { margin-top: 0.4rem; }

.ac-diplomacy-btn {
  width:          100%;
  background:     rgba(255, 165, 0, 0.05);
  border:         1px solid rgba(255, 165, 0, 0.30);
  border-radius:  4px;
  color:          rgba(255, 165, 0, 0.82);
  font-family:    'Courier New', Courier, monospace;
  font-size:      0.60rem;
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding:        0.75rem 0.6rem;
  cursor:         pointer;
  transition:     background 0.22s, border-color 0.22s, color 0.22s,
                  box-shadow 0.22s;
}
.ac-diplomacy-btn:hover {
  background:   rgba(255,165,0,0.12);
  border-color: rgba(255,165,0,0.60);
  color:        #FFAA00;
  box-shadow:   0 0 16px rgba(255,165,0,0.18);
}

/* ── Extension Slide-Out Panel ───────────────────────────────────── */

.ac-ext-panel {
  display:        flex;
  flex-direction: column;
  gap:            0.6rem;
  max-height:     0;
  overflow:       hidden;
  opacity:        0;
  transition:     max-height 0.4s cubic-bezier(0.22,1,0.36,1),
                  opacity    0.3s ease;
  background:     rgba(4, 8, 24, 0.70);
  border:         1px solid rgba(255,165,0,0.18);
  border-radius:  4px;
  margin-top:     0;
}
.ac-ext-panel.open {
  max-height:  600px;
  opacity:     1;
  padding:     0.9rem 1rem;
  margin-top:  0.6rem;
}

.ac-ext-panel-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       0.52rem;
  letter-spacing:  0.18em;
  text-transform:  uppercase;
  color:           rgba(255,165,0,0.55);
  font-weight:     700;
}

.ac-ext-close {
  background:  none;
  border:      none;
  color:       rgba(255,255,255,0.35);
  cursor:      pointer;
  font-size:   0.75rem;
  line-height: 1;
  padding:     0;
  transition:  color 0.2s;
}
.ac-ext-close:hover { color: #FF4444; }

.ac-ext-body {
  font-family:  'Courier New', Courier, monospace;
  font-size:    0.62rem;
  line-height:  1.7;
  color:        rgba(255,255,255,0.62);
  white-space:  pre-wrap;
  word-break:   break-word;
  margin:       0;
  max-height:   200px;
  overflow-y:   auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,165,0,0.20) transparent;
}

.ac-ext-actions { display: flex; justify-content: flex-end; }

.ac-ext-copy {
  background:     none;
  border:         1px solid rgba(255,165,0,0.22);
  border-radius:  3px;
  color:          rgba(255,165,0,0.60);
  font-family:    'Courier New', Courier, monospace;
  font-size:      0.54rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding:        0.35rem 0.7rem;
  cursor:         pointer;
  transition:     border-color 0.2s, color 0.2s;
}
.ac-ext-copy:hover { border-color: rgba(255,165,0,0.50); color: #FFAA00; }

/* ── Academics live rebuild — Aspen Sync pod, courses, Gmail draft (2026-06) ── */

#universe-workspace.ac-grid-2 { grid-template-columns: 0.92fr 1.16fr 0.92fr; }

/* Google Classroom column + split line between grades and assignments */
.ac-ov-mid {
  display:        flex;
  flex-direction: column;
  gap:            0.6rem;
  min-width:      0;
  border-left:    1px solid rgba(255, 255, 255, 0.10);
  padding-left:   clamp(0.8rem, 1.6vw, 1.6rem);
}
.ac-courses-sub { font-size: 0.46rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.30); }
.ac-gc-email    { font-size: 0.52rem; letter-spacing: 0.05em; color: rgba(0,237,204,0.70); min-height: 0.7rem; }
.ac-gc-list     { display: flex; flex-direction: column; overflow-y: auto; }
.ac-gc-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             0.6rem;
  padding:         0.46rem 0;
  border-bottom:   1px solid rgba(255, 255, 255, 0.05);
  text-decoration: none;
  cursor:          pointer;
  transition:      background 0.15s;
}
.ac-gc-row:hover  { background: rgba(255, 255, 255, 0.03); }
.ac-gc-row-main   { display: flex; flex-direction: column; min-width: 0; }
.ac-gc-title      { font-size: 0.66rem; color: rgba(255,255,255,0.86); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-gc-course     { font-size: 0.48rem; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255,255,255,0.38); }
.ac-gc-due        { font-size: 0.56rem; color: rgba(255,255,255,0.50); white-space: nowrap; flex-shrink: 0; }
.ac-gc-row.missing .ac-gc-title { color: #FF8888; }
.ac-gc-row.missing .ac-gc-due   { color: #FF5555; font-weight: 700; }
.ac-gc-row.done .ac-gc-due      { color: #00EDCC; }
.ac-gc-row.late .ac-gc-due      { color: #FFAA00; }

/* Assignments column — quarter filter + rows */
.ac-aq-filter { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ac-aq-btn {
  background:     none;
  border:         1px solid rgba(255, 255, 255, 0.14);
  border-radius:  3px;
  color:          rgba(255, 255, 255, 0.45);
  font-family:    'Courier New', Courier, monospace;
  font-size:      0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding:        0.25rem 0.5rem;
  cursor:         pointer;
  transition:     color 0.18s, border-color 0.18s, background 0.18s;
}
.ac-aq-btn:hover  { color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.30); }
.ac-aq-btn.active { color: #00CFFF; border-color: rgba(0,207,255,0.55); background: rgba(0,207,255,0.08); }

.ac-assign-list { display: flex; flex-direction: column; overflow-y: auto; }
.ac-as-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             0.6rem;
  padding:         0.45rem 0;
  border-bottom:   1px solid rgba(255, 255, 255, 0.05);
}
.ac-as-main  { display: flex; flex-direction: column; min-width: 0; }
.ac-as-name  { font-size: 0.66rem; color: rgba(255,255,255,0.86); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-as-meta  { font-size: 0.46rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.36); }
.ac-as-right { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.ac-as-score { font-size: 0.62rem; font-weight: 700; color: rgba(255,255,255,0.70); }
.ac-as-due   { font-size: 0.5rem; color: rgba(255,255,255,0.40); white-space: nowrap; }
.ac-as-row.low  .ac-as-score { color: #FF6666; }
.ac-as-row.high .ac-as-score { color: #00EDCC; }
.ac-as-row.pend .ac-as-score { color: rgba(255,255,255,0.40); font-weight: 400; }
.ac-as-due.soon { color: #00CFFF; font-weight: 700; text-shadow: 0 0 6px rgba(0,207,255,0.4); }
.ac-class-select { width: 100%; margin-bottom: 0.1rem; }

/* ── Mental Health & Recovery module (panel 5, replaces Intelligence) ──────── */
#universe-workspace.mh-layout {
  display: flex; justify-content: center; align-items: flex-start;
  padding: 2.4rem 3.5rem; flex: 1; min-height: 0; overflow-y: auto;
}
.mh-wrap { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 1.1rem; }
.mh-head {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: 0.2em; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 0 18px rgba(0,150,255,0.30);
}
.mh-sub   { font-size: 0.72rem; color: rgba(255,255,255,0.45); margin: -0.6rem 0 0; }
.mh-block { display: flex; flex-direction: column; gap: 0.55rem; }
.mh-label { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.50); }
.mh-stress-val { color: #FFAA00; font-weight: 700; font-size: 0.8rem; }
.mh-stress-max { color: rgba(255,255,255,0.35); }
.mh-slider { width: 100%; }
.mh-chips  { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mh-chip {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.16); border-radius: 4px;
  color: rgba(255,255,255,0.55); font-family: 'Inter', sans-serif; font-size: 0.66rem;
  padding: 0.4rem 0.7rem; cursor: pointer; transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.mh-chip:hover  { color: #fff; border-color: rgba(255,255,255,0.35); }
.mh-chip.active { color: #00EDCC; border-color: rgba(0,237,204,0.60); background: rgba(0,237,204,0.10); box-shadow: 0 0 10px rgba(0,237,204,0.15); }
.mh-log-btn { width: 100%; margin-top: 0.2rem; }
.mh-status  { font-family: 'Courier New', Courier, monospace; font-size: 0.6rem; min-height: 0.8rem; color: rgba(255,255,255,0.50); }
.mh-status.ok { color: #00EDCC; text-shadow: 0 0 6px rgba(0,237,204,0.4); }
.mh-history-head {
  font-size: 0.55rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.30);
  border-top: 1px solid rgba(255,255,255,0.08); padding-top: 0.8rem;
}
.mh-history { display: flex; flex-direction: column; gap: 0.3rem; }
.mh-log-row {
  display: flex; align-items: baseline; gap: 0.7rem; padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.66rem;
}
.mh-log-date    { color: rgba(255,255,255,0.70); white-space: nowrap; font-weight: 600; }
.mh-log-stress  { white-space: nowrap; font-weight: 700; }
.mh-log-stress.slo  { color: #00EDCC; }
.mh-log-stress.smid { color: #FFAA00; }
.mh-log-stress.shi  { color: #FF6666; }
.mh-log-methods { color: rgba(255,255,255,0.45); overflow: hidden; text-overflow: ellipsis; }

/* Recovery protocols — 5 phase accordions */
.mh-proto-head {
  font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.30);
  border-top: 1px solid rgba(255,255,255,0.08); padding-top: 0.8rem; line-height: 1.5;
}
.mh-phases { display: flex; flex-direction: column; gap: 0.5rem; }
.mh-phase {
  border: 1px solid rgba(255,255,255,0.08); border-left: 2px solid var(--mh-accent, #888);
  border-radius: 5px; overflow: hidden; background: rgba(255,255,255,0.02);
}
.mh-phase-head {
  width: 100%; display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
  background: none; border: none; padding: 0.6rem 0.8rem; text-align: left;
}
.mh-phase-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--mh-accent); box-shadow: 0 0 8px var(--mh-accent); }
.mh-phase-name { font-size: 0.66rem; font-weight: 700; color: rgba(255,255,255,0.85); letter-spacing: 0.03em; }
.mh-phase-tag  { font-size: 0.44rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mh-accent); margin-left: auto; white-space: nowrap; }
.mh-phase-chev { font-size: 0.5rem; color: rgba(255,255,255,0.4); transition: transform 0.25s; margin-left: 0.4rem; }
.mh-phase.open .mh-phase-chev { transform: rotate(180deg); }
.mh-phase-body { max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.22,1,0.36,1); }
.mh-phase.open .mh-phase-body { max-height: 4000px; }
.mh-proto { padding: 0.6rem 0.8rem; border-top: 1px solid rgba(255,255,255,0.05); }
.mh-proto.active { background: rgba(0,237,204,0.06); }
.mh-proto-top { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.mh-proto-name { font-size: 0.68rem; font-weight: 600; color: rgba(255,255,255,0.90); }
.mh-proto-mark {
  font-size: 0.5rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  color: rgba(255,255,255,0.40); background: none; border: 1px solid rgba(255,255,255,0.18); border-radius: 3px; padding: 0.2rem 0.45rem;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.mh-proto-mark:hover { color: #fff; border-color: rgba(255,255,255,0.40); }
.mh-proto.active .mh-proto-mark { color: #00EDCC; border-color: rgba(0,237,204,0.6); background: rgba(0,237,204,0.10); }
.mh-proto-detail { font-size: 0.62rem; color: rgba(255,255,255,0.55); line-height: 1.5; margin: 0.35rem 0 0.25rem; }
.mh-proto-how   { font-size: 0.62rem; color: rgba(255,255,255,0.74); line-height: 1.5; margin: 0; }
.mh-how-k       { font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mh-accent); font-weight: 700; margin-right: 0.45rem; }

/* Hide scrollbars inside the module overlay (content still scrolls) */
#universe-workspace, #universe-workspace * { scrollbar-width: none; -ms-overflow-style: none; }
#universe-workspace::-webkit-scrollbar, #universe-workspace *::-webkit-scrollbar { width: 0; height: 0; display: none; }

.ac-sync-box {
  background:    rgba(4, 8, 24, 0.50);
  border:        1px solid rgba(0, 207, 255, 0.16);
  border-radius: 6px;
  overflow:      hidden;
}
.ac-sync-head {
  width:          100%;
  display:        flex;
  justify-content: space-between;
  align-items:    center;
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        0.7rem 0.9rem;
  font-family:    'Courier New', Courier, monospace;
  font-size:      0.58rem;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(0, 207, 255, 0.78);
  text-shadow:    0 0 6px rgba(0,207,255,0.30);
}
.ac-sync-head:hover { color: #00CFFF; }
.ac-sync-chev { font-size: 0.5rem; transition: transform 0.25s; color: rgba(0,207,255,0.6); }

.ac-sync-drawer {
  max-height:     0;
  opacity:        0;
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  padding:        0 0.9rem;
  transition:     max-height 0.35s cubic-bezier(0.22,1,0.36,1), opacity 0.3s, padding 0.35s;
}
.ac-sync-drawer.open { max-height: 340px; opacity: 1; padding: 0.2rem 0.9rem 0.9rem; }

.ac-field {
  width:         100%;
  background:    rgba(0, 0, 0, 0.35);
  border:        1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  color:         rgba(255, 255, 255, 0.88);
  font-family:   'Inter', sans-serif;
  font-size:     0.66rem;
  padding:       0.5rem 0.6rem;
  outline:       none;
  box-sizing:    border-box;
  transition:    border-color 0.2s, box-shadow 0.2s;
}
.ac-field::placeholder { color: rgba(255,255,255,0.30); }
.ac-field:focus { border-color: rgba(0,207,255,0.55); box-shadow: 0 0 8px rgba(0,207,255,0.18); }
.ac-field option { background: #04081c; color: #fff; }

.ac-btn-cyan {
  background:     rgba(0, 207, 255, 0.08);
  border:         1px solid rgba(0, 207, 255, 0.40);
  border-radius:  4px;
  color:          #00CFFF;
  font-family:    'Courier New', Courier, monospace;
  font-size:      0.60rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding:        0.6rem;
  cursor:         pointer;
  transition:     background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.ac-btn-cyan:hover    { background: rgba(0,207,255,0.16); border-color: rgba(0,207,255,0.70); box-shadow: 0 0 14px rgba(0,207,255,0.22); }
.ac-btn-cyan:disabled { opacity: 0.5; cursor: wait; }

.ac-sync-status {
  font-family: 'Courier New', Courier, monospace;
  font-size:   0.56rem;
  line-height: 1.5;
  color:       rgba(255,255,255,0.55);
  min-height:  0.8rem;
}
.ac-sync-status.ok  { color: #00EDCC; text-shadow: 0 0 6px rgba(0,237,204,0.4); }
.ac-sync-status.err { color: #FF6666; }

.ac-courses-head {
  display:         flex;
  justify-content: flex-start;   /* ASPEN badge rides right beside the title, not at the far edge */
  gap:             0.8rem;
  align-items:     center;
  padding:         0.55rem 1rem;
  font-size:       0.50rem;
  letter-spacing:  0.18em;
  text-transform:  uppercase;
  color:           rgba(255,255,255,0.40);
  font-weight:     700;
  border-bottom:   1px solid rgba(255,255,255,0.07);
}
.ac-gc-btn {
  background:     none;
  border:         1px solid rgba(0,207,255,0.25);
  border-radius:  3px;
  color:          rgba(0,207,255,0.70);
  font-family:    'Courier New', Courier, monospace;
  font-size:      0.46rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding:        0.28rem 0.5rem;
  cursor:         pointer;
  transition:     border-color 0.2s, color 0.2s;
}
.ac-gc-btn:hover { border-color: rgba(0,207,255,0.55); color: #00CFFF; }

.ac-empty-row {
  padding:     1rem;
  font-size:   0.60rem;
  color:       rgba(255,255,255,0.35);
  text-align:  center;
  line-height: 1.6;
}

.ac-draft-controls { display: flex; flex-direction: column; gap: 0.45rem; }
.ac-draft-days-row { display: flex; align-items: center; gap: 0.6rem; }
.ac-draft-days-row label {
  font-size: 0.54rem; letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(255,255,255,0.40);
}
.ac-field-days { width: 4.5rem; flex: none; }

.ac-draft-body {
  width:         100%;
  flex:          1;
  min-height:    180px;
  background:    rgba(0, 4, 12, 0.65);
  border:        1px solid rgba(0, 237, 180, 0.16);
  border-radius: 4px;
  padding:       0.85rem 1rem;
  font-family:   'Courier New', Courier, monospace;
  font-size:     0.64rem;
  line-height:   1.7;
  color:         rgba(0, 237, 180, 0.85);
  outline:       none;
  resize:        vertical;
  box-sizing:    border-box;
}
.ac-draft-body:focus { border-color: rgba(0,237,180,0.40); }

.ac-draft-actions { display: flex; justify-content: flex-end; gap: 0.6rem; align-items: center; }

/* ══════════════════════════════════════════════════════════════════
   REMINDERS OVERLAY — Hot Magenta / Neon Pink / Midnight Violet HUD
   ══════════════════════════════════════════════════════════════════ */

.rem-section-title {
  font-size:      0.50rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color:          rgba(255, 0, 127, 0.45);
  font-weight:    700;
  padding-bottom: 0.38rem;
  border-bottom:  1px solid rgba(255, 0, 127, 0.14);
  flex-shrink:    0;
  font-family:    'Courier New', Courier, monospace;
}

#universe-workspace.rem-layout {
  grid-template-columns: 1fr 1.25fr 1fr;
}

/* ── LEFT: Gravity Well SVG ──────────────────────────────────────── */

.rem-gravity-wrap {
  position:    relative;
  flex-shrink: 0;
}

.rem-gravity-svg {
  width:    100%;
  height:   auto;
  overflow: visible;
  display:  block;
}

.rem-orbit-ring {
  fill:         none;
  stroke:       rgba(255, 0, 127, 0.09);
  stroke-width: 0.6;
  stroke-dasharray: 3 5;
}

.rem-core {
  filter: drop-shadow(0 0 5px rgba(255,0,127,0.90));
}
.rem-core-pulse {
  animation: rem-core-breathe 2.2s ease-in-out infinite;
}
@keyframes rem-core-breathe {
  0%,100% { opacity: 0.55; r: 14; }
  50%      { opacity: 0.20; r: 18; }
}

.rem-tether {
  fill:         none;
  stroke-width: 0.7;
  stroke-opacity: 0.30;
  stroke-dasharray: 3 4;
}

/* Node components */
.rem-node-body { transition: r 0.2s; }
.rem-node-glow { transition: r 0.2s; }
.rem-node-text {
  font-size:      6px;
  font-family:    'Courier New', Courier, monospace;
  font-weight:    700;
  letter-spacing: 0.08em;
  pointer-events: none;
  text-shadow:    none;
}

/* Dependency tooltip */
.rem-node-tooltip {
  position:       absolute;
  bottom:         0.3rem;
  left:           50%;
  transform:      translateX(-50%);
  background:     rgba(12, 0, 22, 0.85);
  border:         1px solid rgba(255, 0, 127, 0.30);
  border-radius:  3px;
  padding:        0.25rem 0.6rem;
  font-size:      0.50rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(255, 0, 127, 0.80);
  white-space:    nowrap;
  font-family:    'Courier New', Courier, monospace;
  pointer-events: none;
}

/* ── CENTER: Energy Queue ────────────────────────────────────────── */

.rem-energy-section { display: flex; flex-direction: column; gap: 0.35rem; }

.rem-energy-label {
  display:        flex;
  align-items:    center;
  gap:            0.4rem;
  font-size:      0.48rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.30);
  font-weight:    700;
  font-family:    'Courier New', Courier, monospace;
  margin-bottom:  0.1rem;
}

.rem-energy-dot {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
}
.rem-dot-critical { background:#FF007F; box-shadow:0 0 5px rgba(255,0,127,0.70); }
.rem-dot-recovery { background:#CC00FF; box-shadow:0 0 5px rgba(204,0,255,0.60); }

/* Task cards */
.rem-task-card {
  background:    rgba(255, 0, 127, 0.05);
  border:        1px solid rgba(255, 0, 127, 0.18);
  border-radius: 4px;
  padding:       0.55rem 0.75rem;
  display:       flex;
  flex-direction: column;
  gap:           0.2rem;
  overflow:      hidden;
  transform-origin: left center;
}

.rem-task-card.rem-high    { border-color: rgba(255, 105, 180, 0.18); }
.rem-task-card.rem-med     { border-color: rgba(204,   0, 255, 0.15); background: rgba(204,0,255,0.04); }
.rem-task-card.rem-low     { border-color: rgba(180,   0, 255, 0.12); background: rgba(180,0,255,0.03); }

.rem-task-top {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             0.4rem;
}
.rem-task-name {
  font-size:      0.68rem;
  font-weight:    600;
  color:          rgba(255, 255, 255, 0.85);
  font-family:    'Courier New', Courier, monospace;
}
.rem-task-deadline {
  font-size:      0.46rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(255, 105, 180, 0.60);
  font-weight:    700;
  white-space:    nowrap;
}
.rem-dead-critical {
  color:       #FF007F;
  text-shadow: 0 0 6px rgba(255,0,127,0.55);
  animation:   rem-dead-pulse 1.6s ease-in-out infinite;
}
@keyframes rem-dead-pulse { 0%,100%{opacity:1} 50%{opacity:0.55} }

.rem-task-meta {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}
.rem-task-origin {
  font-size:      0.52rem;
  color:          rgba(255, 0, 127, 0.42);
  font-family:    'Courier New', Courier, monospace;
}
.rem-task-load {
  font-size:      0.44rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.22);
  font-family:    'Courier New', Courier, monospace;
}

/* ── Micro-action shatter output ─────────────────────────────────── */

.rem-micro-wrap {
  display:        flex;
  flex-direction: column;
  gap:            0.28rem;
}

.rem-micro-header {
  font-size:      0.46rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(255, 0, 127, 0.55);
  font-family:    'Courier New', Courier, monospace;
  font-weight:    700;
  padding:        0.2rem 0;
}

.rem-micro-card {
  display:         grid;
  grid-template-columns: 1.5rem 1fr auto;
  align-items:     center;
  gap:             0.4rem;
  background:      rgba(255, 0, 127, 0.05);
  border:          1px solid rgba(255, 0, 127, 0.22);
  border-radius:   3px;
  padding:         0.42rem 0.65rem;
}
.rem-micro-step {
  font-size:   0.52rem; color:#FF007F; font-weight:700;
  font-family: 'Courier New', Courier, monospace;
  text-shadow: 0 0 5px rgba(255,0,127,0.50);
}
.rem-micro-text {
  font-size:  0.65rem; color:rgba(255,255,255,0.82);
  font-family: 'Courier New', Courier, monospace;
}
.rem-micro-time {
  font-size:      0.46rem; color:rgba(255,0,127,0.45);
  letter-spacing: 0.08em; text-transform:uppercase;
  font-family: 'Courier New', Courier, monospace;
}

/* ── RIGHT: Macro Console ────────────────────────────────────────── */

.rem-shield-btn {
  width:          100%;
  background:     rgba(255, 0, 127, 0.05);
  border:         1px solid rgba(255, 0, 127, 0.28);
  border-radius:  3px;
  color:          rgba(255, 0, 127, 0.80);
  font-family:    'Courier New', Courier, monospace;
  font-size:      0.56rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding:        0.68rem 0.5rem;
  cursor:         pointer;
  transition:     background 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.rem-shield-btn:hover {
  background:   rgba(255,0,127,0.12);
  border-color: rgba(255,0,127,0.55);
  box-shadow:   0 0 12px rgba(255,0,127,0.20);
}
.rem-shield-btn.active {
  background:   rgba(255,0,127,0.14);
  border-color: #FF007F;
  color:        #FF007F;
  box-shadow:   0 0 16px rgba(255,0,127,0.28), inset 0 0 6px rgba(255,0,127,0.08);
  cursor:       default;
}

.rem-dispatch-btn {
  width:          100%;
  background:     rgba(204, 0, 255, 0.05);
  border:         1px solid rgba(204, 0, 255, 0.28);
  border-radius:  3px;
  color:          rgba(204, 0, 255, 0.80);
  font-family:    'Courier New', Courier, monospace;
  font-size:      0.56rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding:        0.68rem 0.5rem;
  cursor:         pointer;
  transition:     background 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.rem-dispatch-btn:hover {
  background:   rgba(204,0,255,0.12);
  border-color: rgba(204,0,255,0.55);
  color:        #CC00FF;
  box-shadow:   0 0 12px rgba(204,0,255,0.22);
}

/* Dispatch log terminal */
.rem-dispatch-log {
  background:    rgba(10, 0, 18, 0.65);
  border:        1px solid rgba(255, 0, 127, 0.14);
  border-radius: 4px;
  padding:       0.75rem 0.85rem;
  font-family:   'Courier New', Courier, monospace;
  font-size:     0.62rem;
  line-height:   1.80;
  color:         rgba(255, 105, 180, 0.82);
  text-shadow:   0 0 4px rgba(255,0,127,0.22);
  min-height:    100px;
  max-height:    175px;
  overflow-y:    auto;
  scrollbar-width: none;
  white-space:   pre-wrap;
  flex:          1;
}
.rem-dispatch-log::-webkit-scrollbar { display: none; }

/* ══════════════════════════════════════════════════════════════════
   NUTRITION OVERLAY — Metabolic Amber / Copper / Coral HUD
   ══════════════════════════════════════════════════════════════════ */

.nut-section-title {
  font-size:      0.50rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color:          rgba(255,140,0,0.45);
  font-weight:    700;
  padding-bottom: 0.38rem;
  border-bottom:  1px solid rgba(255,140,0,0.14);
  flex-shrink:    0;
}

#universe-workspace.nut-layout {
  display:               grid;
  grid-template-columns: 0.95fr 1.3fr 1fr;
  gap:                   1.6rem;
  padding:               1rem 2.2rem 1.4rem;
  align-items:           flex-start;
  overflow:              hidden;
  /* Floating Text HUD — depth shadow so labels stay legible over the starfield. */
  text-shadow:           0 2px 8px rgba(0,0,0,0.95), 0 0 4px rgba(255,255,255,0.05);
}

/* ── LEFT: Volumetric Scanner ────────────────────────────────────── */

.nut-scanner {
  position:      relative;
  width:         100%;
  aspect-ratio:  4/3;
  background:    rgba(6, 3, 0, 0.65);
  border:        1px solid rgba(255,140,0,0.28);
  border-radius: 4px;
  overflow:      hidden;
  flex-shrink:   0;
}

/* CSS grid lines inside viewport */
.nut-scanner-grid {
  position: absolute;
  inset:    0;
  background-image:
    linear-gradient(rgba(255,140,0,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,140,0,0.07) 1px, transparent 1px);
  background-size: 20% 20%;
}

/* Scanning line */
.nut-scan-line {
  position:   absolute;
  left:       0;
  right:      0;
  height:     2px;
  background: linear-gradient(90deg, transparent, #FF8C00, transparent);
  box-shadow: 0 0 8px rgba(255,140,0,0.70);
  top:        0%;
  animation:  nut-scan 3s linear infinite;
}
@keyframes nut-scan {
  0%   { top: 0%; opacity: 1; }
  95%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.nut-scanner.scanning .nut-scan-line {
  animation-duration: 0.45s;
  background: linear-gradient(90deg, transparent, #FFCC00, transparent);
  box-shadow: 0 0 14px rgba(255,204,0,0.85);
}

/* Corner reticles */
.nut-corner {
  position:     absolute;
  width:        10px;
  height:       10px;
  border-color: #FF8C00;
  border-style: solid;
  opacity:      0.70;
}
.nut-tl { top:0; left:0;   border-width: 2px 0 0 2px; }
.nut-tr { top:0; right:0;  border-width: 2px 2px 0 0; }
.nut-bl { bottom:0; left:0;  border-width: 0 0 2px 2px; }
.nut-br { bottom:0; right:0; border-width: 0 2px 2px 0; }

.nut-scanner-status {
  position:       absolute;
  bottom:         0.5rem;
  left:           0;
  right:          0;
  text-align:     center;
  font-size:      0.48rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          rgba(255,140,0,0.55);
  font-weight:    700;
}

.nut-scan-btn {
  width:          100%;
  background:     rgba(255,140,0,0.05);
  border:         1px solid rgba(255,140,0,0.28);
  border-radius:  3px;
  color:          rgba(255,140,0,0.80);
  font-family:    'Courier New', Courier, monospace;
  font-size:      0.56rem;
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding:        0.65rem 0.4rem;
  cursor:         pointer;
  transition:     background 0.22s, border-color 0.22s, box-shadow 0.22s;
  margin-top:     0.3rem;
}
.nut-scan-btn:hover {
  background:   rgba(255,140,0,0.12);
  border-color: rgba(255,140,0,0.55);
  color:        #FF8C00;
  box-shadow:   0 0 14px rgba(255,140,0,0.18);
}

/* ── Macro Telemetry Rings ───────────────────────────────────────── */

.nut-macro-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   0.6rem;
}

.nut-macro-ring-wrap {
  position:    relative;
  display:     flex;
  flex-direction: column;
  align-items: center;
  gap:         0.15rem;
}

.nut-ring-svg {
  width:    62px;
  height:   62px;
  overflow: visible;
}
.nut-ring-track {
  fill: none; stroke: rgba(255,140,0,0.10); stroke-width: 5;
}
.nut-ring-arc {
  fill: none; stroke-width: 5; stroke-linecap: round;
  transition: stroke-dashoffset 0.3s ease;
  filter: drop-shadow(0 0 4px currentColor);
}

.nut-ring-center {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0;
}
.nut-ring-val  { font-size:.70rem; font-weight:700; color:#FF8C00; text-shadow:0 0 6px rgba(255,140,0,0.50); }
.nut-ring-lbl  { font-size:.40rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,0.35); font-weight:700; }
.nut-ring-tgt  { font-size:.40rem; color:rgba(255,140,0,0.35); }

/* ── CENTER: Glycemic Graph ──────────────────────────────────────── */

.nut-glucose-wrap {
  background:    rgba(6, 3, 0, 0.50);
  border:        1px solid rgba(255,140,0,0.13);
  border-radius: 5px;
  padding:       0.7rem 0.8rem 0.5rem;
  display:       flex;
  flex-direction: column;
  gap:           0.4rem;
}

.nut-mode-label {
  font-size:      0.50rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight:    700;
}

.nut-glucose-svg {
  width:    100%;
  height:   80px;
  display:  block;
  overflow: visible;
}

.nut-svg-grid {
  stroke:       rgba(255,140,0,0.10);
  stroke-width: 0.5;
}

.nut-svg-label {
  fill:        rgba(255,255,255,0.25);
  font-size:   6px;
  font-family: monospace;
}

/* Glowing neon line — glow applied via SVG filter in HTML */
#nut-glucose-line {
  filter: drop-shadow(0 0 3px #FF8C00) drop-shadow(0 0 8px rgba(255,140,0,0.40));
}

.nut-glucose-legend {
  display:     flex;
  gap:         0.8rem;
  flex-wrap:   wrap;
}
.nut-leg {
  display:        flex;
  align-items:    center;
  gap:            0.3rem;
  font-size:      0.46rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.38);
  font-weight:    600;
}
.nut-leg-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}

/* ── Micronutrient Profile ───────────────────────────────────────── */

.nut-micro-grid {
  display:        flex;
  flex-direction: column;
  gap:            0.38rem;
  background:     rgba(6, 3, 0, 0.45);
  border:         1px solid rgba(255,140,0,0.10);
  border-radius:  5px;
  padding:        0.65rem 0.8rem;
}

.nut-micro-row {
  display:             grid;
  grid-template-columns: 5.5rem 1fr 2.6rem;
  align-items:         center;
  gap:                 0.4rem;
}
.nut-micro-label {
  font-size:      0.50rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          rgba(255,140,0,0.48);
  font-family:    'Courier New', Courier, monospace;
}
.nut-micro-bar-wrap {
  height:        3px;
  background:    rgba(255,140,0,0.12);
  border-radius: 0;
  overflow:      hidden;
}
.nut-micro-bar {
  height:     100%;
  background: linear-gradient(90deg, #B87333, #FF8C00);
  box-shadow: 0 0 5px rgba(255,140,0,0.45);
}
.nut-micro-pct {
  font-size:   0.58rem;
  font-weight: 700;
  color:       #FF8C00;
  text-align:  right;
  font-family: 'Courier New', Courier, monospace;
}

/* ── RIGHT: Mode Buttons ─────────────────────────────────────────── */

.nut-mode-btns {
  display:        flex;
  flex-direction: column;
  gap:            0.4rem;
}

.nut-mode-btn {
  background:     rgba(255,140,0,0.04);
  border:         1px solid rgba(255,140,0,0.20);
  border-radius:  3px;
  color:          rgba(255,140,0,0.55);
  font-family:    'Courier New', Courier, monospace;
  font-size:      0.56rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding:        0.58rem 0.6rem;
  cursor:         pointer;
  transition:     background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
  text-align:     left;
}
.nut-mode-btn:hover {
  background:   rgba(255,140,0,0.10);
  border-color: rgba(255,140,0,0.45);
  color:        #FF8C00;
}
.nut-mode-btn.active {
  background:   rgba(255,140,0,0.12);
  border-color: #FF8C00;
  color:        #FF8C00;
  box-shadow:   0 0 10px rgba(255,140,0,0.18), inset 0 0 6px rgba(255,140,0,0.06);
}

/* ── Pantry Meal Ticker ──────────────────────────────────────────── */

.nut-meal-ticker {
  display:        flex;
  flex-direction: column;
  gap:            0;
  background:     rgba(6, 3, 0, 0.50);
  border:         1px solid rgba(255,140,0,0.12);
  border-radius:  4px;
  overflow:       hidden;
  flex:           1;
}

.nut-meal-item {
  display:       flex;
  align-items:   flex-start;
  gap:           0.55rem;
  padding:       0.58rem 0.8rem;
  border-bottom: 1px solid rgba(255,140,0,0.07);
}
.nut-meal-item:last-child { border-bottom: none; }

.nut-meal-dot {
  width:       5px;
  height:      5px;
  border-radius: 50%;
  background:  #FF8C00;
  box-shadow:  0 0 5px rgba(255,140,0,0.60);
  flex-shrink: 0;
  margin-top:  0.25rem;
}

.nut-meal-body { display:flex; flex-direction:column; gap:1px; }
.nut-meal-name {
  font-size:   0.66rem;
  font-weight: 600;
  color:       rgba(255,255,255,0.82);
}
.nut-meal-sub {
  font-size:   0.54rem;
  color:       rgba(255,140,0,0.48);
  font-style:  italic;
}

/* ══════════════════════════════════════════════════════════════════
   ATHLETICS OVERLAY — Biomechanical Violet / Purple HUD
   ══════════════════════════════════════════════════════════════════ */

/* Shared section label */
.ath-section-title {
  font-size:      0.50rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color:          rgba(199, 125, 255, 0.45);
  font-weight:    700;
  padding-bottom: 0.4rem;
  border-bottom:  1px solid rgba(139, 0, 255, 0.15);
  flex-shrink:    0;
}

/* Grid column width overrides — left/right tighter, center wider */
#universe-workspace.ath-layout {
  grid-template-columns: 0.9fr 1.3fr 1fr;
}

/* ── LEFT: Skeleton SVG ──────────────────────────────────────────── */

.ath-skeleton-svg {
  width:     100%;
  max-height: 200px;
  overflow:  visible;
}

/* Bone lines — thin biomechanical scan aesthetic */
.ath-bone {
  fill:         none;
  stroke:       rgba(139, 0, 255, 0.22);
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Joint nodes — resting state */
.ath-node {
  fill:         rgba(139, 0, 255, 0.10);
  stroke:       #C77DFF;
  stroke-width: 1.2;
  cursor:       pointer;
  transition:   filter 0.2s;
}
.ath-node:hover {
  filter: drop-shadow(0 0 4px rgba(199,125,255,0.80));
}
.ath-node.ath-node-active {
  fill:   rgba(199, 125, 255, 0.18);
  filter: drop-shadow(0 0 6px rgba(199,125,255,0.90));
}
.ath-node.ath-node-warn {
  animation: ath-node-pulse 1.4s ease-in-out infinite;
}
@keyframes ath-node-pulse {
  0%,100% { filter: drop-shadow(0 0 5px rgba(139,0,255,0.80)); }
  50%      { filter: drop-shadow(0 0 14px rgba(139,0,255,0.35)); }
}

/* Reticle rings */
.ath-reticle-ring {
  fill:         none;
  stroke-width: 0.8;
}
.ath-reticle-inner {
  stroke:    rgba(199,125,255,0.70);
  animation: ath-reticle 1.8s ease-in-out infinite;
}
.ath-reticle-outer {
  stroke:    rgba(139,0,255,0.40);
  animation: ath-reticle 1.8s ease-in-out infinite 0.3s;
}
@keyframes ath-reticle {
  0%,100% { opacity: 0.8; r: 7; }
  50%      { opacity: 0.4; r: 9; }
}

/* ── Pain Logger ─────────────────────────────────────────────────── */

.ath-pain-panel {
  background:    rgba(8, 2, 20, 0.55);
  border:        1px solid rgba(139, 0, 255, 0.18);
  border-radius: 5px;
  padding:       0.8rem 0.9rem;
  display:       flex;
  flex-direction: column;
  gap:           0.5rem;
}

.ath-pain-joint-name {
  font-size:      0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          rgba(199, 125, 255, 0.70);
  font-weight:    700;
}

.ath-pain-scale-wrap {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
}
.ath-pain-scale-label {
  font-size:      0.50rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.28);
  white-space:    nowrap;
}

/* Violet pain slider — same square-handle pattern as academics */
.ath-pain-slider {
  -webkit-appearance: none;
  appearance:         none;
  flex:               1;
  height:             2px;
  background:         rgba(139, 0, 255, 0.20);
  border-radius:      0;
  outline:            none;
  cursor:             pointer;
}
.ath-pain-slider:disabled { opacity: 0.3; cursor: not-allowed; }
.ath-pain-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:        10px;
  height:       10px;
  background:   #8B00FF;
  border-radius: 0;
  box-shadow:   0 0 6px rgba(139,0,255,0.85), 0 0 14px rgba(139,0,255,0.35);
  cursor:       pointer;
  margin-top:   -4px;
}
.ath-pain-slider::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(90deg, rgba(139,0,255,0.30), rgba(199,125,255,0.40));
}
.ath-pain-slider::-moz-range-thumb {
  width: 10px; height: 10px;
  background: #8B00FF; border: none; border-radius: 0;
  box-shadow: 0 0 6px rgba(139,0,255,0.85);
}

.ath-pain-val {
  font-size:   0.68rem;
  color:       #C77DFF;
  font-weight: 700;
  min-width:   3rem;
  text-align:  right;
  text-shadow: 0 0 6px rgba(199,125,255,0.55);
}

.ath-recovery-box {
  max-height: 0;
  overflow:   hidden;
  opacity:    0;
  transition: max-height 0.35s ease, opacity 0.3s ease;
  background: rgba(139,0,255,0.06);
  border:     1px solid rgba(139,0,255,0.22);
  border-radius: 3px;
}
.ath-recovery-box.visible {
  max-height: 120px;
  opacity:    1;
  padding:    0.5rem 0.7rem;
}
.ath-recovery-text {
  font-size:   0.60rem;
  line-height: 1.65;
  color:       rgba(199,125,255,0.80);
  font-style:  italic;
}

/* ── CENTER: Travel Ticker ───────────────────────────────────────── */

.ath-travel-ticker {
  display:        flex;
  flex-direction: column;
  gap:            0;
  background:     rgba(8, 2, 20, 0.50);
  border:         1px solid rgba(139, 0, 255, 0.15);
  border-radius:  5px;
  overflow:       hidden;
}

.ath-travel-card {
  display:       flex;
  align-items:   center;
  gap:           0.65rem;
  padding:       0.55rem 0.85rem;
  border-bottom: 1px solid rgba(139,0,255,0.10);
}
.ath-travel-card:last-child { border-bottom: none; }

.ath-tc-icon {
  font-size:  0.85rem;
  flex-shrink: 0;
  opacity:    0.55;
  width:      1.2rem;
  text-align: center;
}

.ath-tc-body {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            1px;
  min-width:      0;
}
.ath-tc-label {
  font-size:      0.46rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          rgba(199,125,255,0.38);
  font-weight:    700;
}
.ath-tc-value {
  font-size:      0.68rem;
  color:          rgba(255,255,255,0.80);
  font-weight:    500;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}
.ath-tc-detail {
  font-size:  0.52rem;
  color:      rgba(255,255,255,0.35);
}
.ath-tc-status {
  font-size:      0.46rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          #C77DFF;
  text-shadow:    0 0 6px rgba(199,125,255,0.45);
  font-weight:    700;
  white-space:    nowrap;
}

/* ── Performance Metrics Grid ────────────────────────────────────── */

.ath-perf-grid {
  display:        flex;
  flex-direction: column;
  gap:            0.4rem;
  background:     rgba(8, 2, 20, 0.50);
  border:         1px solid rgba(139, 0, 255, 0.15);
  border-radius:  5px;
  padding:        0.7rem 0.9rem;
}

.ath-pm-row {
  display:             grid;
  grid-template-columns: 6rem 1fr 3rem 4.5rem;
  align-items:         center;
  gap:                 0.4rem;
}

.ath-pm-label {
  font-size:      0.52rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          rgba(199,125,255,0.50);
  white-space:    nowrap;
}

.ath-pm-bar-wrap {
  height:        3px;
  background:    rgba(139,0,255,0.15);
  border-radius: 1px;
  overflow:      hidden;
}
.ath-pm-bar {
  height:        100%;
  background:    linear-gradient(90deg, #5A0080, #C77DFF);
  border-radius: 1px;
  box-shadow:    0 0 4px rgba(199,125,255,0.40);
}

.ath-pm-val {
  font-size:   0.62rem;
  font-weight: 700;
  color:       #C77DFF;
  text-align:  right;
  white-space: nowrap;
}
.ath-pm-trend {
  font-size:      0.48rem;
  letter-spacing: 0.06em;
  color:          rgba(199,125,255,0.45);
  text-align:     right;
  white-space:    nowrap;
}

/* ── RIGHT: Readiness Gauge ──────────────────────────────────────── */

.ath-ready-wrap {
  position:    relative;
  width:       110px;
  height:      110px;
  align-self:  center;
  flex-shrink: 0;
}

.ath-ready-ring {
  width:    100%;
  height:   100%;
  overflow: visible;
}

.ath-ready-track {
  fill:         none;
  stroke:       rgba(139, 0, 255, 0.10);
  stroke-width: 7;
}
.ath-ready-arc {
  fill:            none;
  stroke-width:    7;
  stroke-linecap:  round;
  transition:      stroke-dashoffset 0.5s ease;
  filter:          drop-shadow(0 0 6px rgba(139,0,255,0.65))
                   drop-shadow(0 0 14px rgba(90,0,128,0.35));
}

.ath-ready-center {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
}
.ath-ready-num {
  font-family:    'Bebas Neue', 'Arial Narrow', Arial, sans-serif;
  font-size:      1.9rem;
  line-height:    1;
  color:          #C77DFF;
  text-shadow:    0 0 14px rgba(199,125,255,0.55);
  letter-spacing: 0.04em;
}
.ath-ready-sub {
  font-size:      0.44rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          rgba(199,125,255,0.38);
  font-weight:    700;
}

/* ── Scout Terminal ──────────────────────────────────────────────── */

.ath-scout-terminal {
  background:    rgba(8, 2, 20, 0.65);
  border:        1px solid rgba(139, 0, 255, 0.18);
  border-radius: 4px;
  padding:       0.75rem 0.9rem;
  font-family:   'Courier New', Courier, monospace;
  font-size:     0.62rem;
  line-height:   1.80;
  color:         rgba(199, 125, 255, 0.82);
  text-shadow:   0 0 4px rgba(139,0,255,0.30);
  min-height:    105px;
  max-height:    160px;
  overflow-y:    auto;
  scrollbar-width: none;
  white-space:   pre-wrap;
}
.ath-scout-terminal::-webkit-scrollbar { display: none; }

/* ── Dispatch Button ─────────────────────────────────────────────── */

.ath-dispatch-btn {
  width:          100%;
  background:     rgba(139,0,255,0.05);
  border:         1px solid rgba(139,0,255,0.30);
  border-radius:  4px;
  color:          rgba(199,125,255,0.82);
  font-family:    'Courier New', Courier, monospace;
  font-size:      0.58rem;
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding:        0.7rem 0.5rem;
  cursor:         pointer;
  transition:     background 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.ath-dispatch-btn:hover {
  background:   rgba(139,0,255,0.12);
  border-color: rgba(199,125,255,0.55);
  color:        #C77DFF;
  box-shadow:   0 0 16px rgba(139,0,255,0.20);
}

/* ── Scout Slide-Out Panel ───────────────────────────────────────── */

.ath-scout-panel {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  max-height:     0;
  overflow:       hidden;
  opacity:        0;
  transition:     max-height 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease;
  background:     rgba(8, 2, 20, 0.72);
  border:         1px solid rgba(139,0,255,0.22);
  border-radius:  4px;
  margin-top:     0;
}
.ath-scout-panel.open {
  max-height:  700px;
  opacity:     1;
  padding:     0.85rem 0.9rem;
  margin-top:  0.5rem;
}

.ath-scout-panel-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       0.50rem;
  letter-spacing:  0.18em;
  text-transform:  uppercase;
  color:           rgba(199,125,255,0.50);
  font-weight:     700;
  padding-bottom:  0.4rem;
  border-bottom:   1px solid rgba(139,0,255,0.12);
}

.ath-scout-close {
  background:  none;
  border:      none;
  color:       rgba(255,255,255,0.28);
  cursor:      pointer;
  font-size:   0.75rem;
  transition:  color 0.2s;
  padding:     0;
}
.ath-scout-close:hover { color: #FF4FFF; }

.ath-scout-body {
  font-family:   'Courier New', Courier, monospace;
  font-size:     0.58rem;
  line-height:   1.70;
  color:         rgba(255,255,255,0.58);
  white-space:   pre-wrap;
  word-break:    break-word;
  margin:        0;
  max-height:    190px;
  overflow-y:    auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(139,0,255,0.22) transparent;
}

.ath-scout-actions {
  display: flex;
  gap:     0.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.ath-scout-copy, .ath-scout-mail {
  background:     none;
  border:         1px solid rgba(139,0,255,0.22);
  border-radius:  3px;
  color:          rgba(199,125,255,0.55);
  font-family:    'Courier New', Courier, monospace;
  font-size:      0.50rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding:        0.30rem 0.65rem;
  cursor:         pointer;
  transition:     border-color 0.2s, color 0.2s;
}
.ath-scout-copy:hover, .ath-scout-mail:hover {
  border-color: rgba(199,125,255,0.48);
  color:        #C77DFF;
}

/* ══════════════════════════════════════════════════════════════════
   FINANCES OVERLAY — Emerald / Matrix Mint / Obsidian Glass HUD
   ══════════════════════════════════════════════════════════════════ */

#universe-workspace.fin-layout {
  grid-template-columns: 0.95fr 1.25fr 1fr;
}

/* Shared section label */
.fin-section-title {
  font-size:      0.50rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color:          rgba(0, 255, 136, 0.45);
  font-weight:    700;
  padding-bottom: 0.4rem;
  border-bottom:  1px solid rgba(0, 255, 136, 0.15);
  flex-shrink:    0;
}

/* ── LEFT: Asset Card ─────────────────────────────────────────── */

.fin-asset-card {
  background:     rgba(0, 20, 10, 0.55);
  border:         1px solid rgba(0, 255, 136, 0.18);
  border-radius:  6px;
  padding:        0.75rem 0.9rem;
  cursor:         pointer;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.35rem;
  flex-shrink:    0;
  transition:     border-color 0.25s, box-shadow 0.25s;
}
.fin-asset-card:hover {
  border-color: rgba(0, 255, 136, 0.50);
  box-shadow:   0 0 16px rgba(0, 255, 136, 0.18);
}

.fin-asset-badge {
  font-size:      0.44rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          rgba(0, 255, 136, 0.55);
  font-weight:    700;
  align-self:     flex-start;
}

/* Vehicle wireframe SVG */
.fin-car-svg {
  width:      100%;
  max-height: 76px;
  overflow:   visible;
  filter:     drop-shadow(0 0 6px rgba(0,255,136,0.25));
}
.fin-car-body {
  fill:             none;
  stroke:           rgba(0, 255, 136, 0.60);
  stroke-width:     1.0;
  stroke-linecap:   round;
  stroke-linejoin:  round;
}
.fin-car-wheel {
  fill:         none;
  stroke:       rgba(0, 255, 136, 0.42);
  stroke-width: 1.0;
}
.fin-car-wheel-inner {
  fill:         rgba(0, 255, 136, 0.08);
  stroke:       rgba(0, 255, 136, 0.25);
  stroke-width: 0.6;
}
.fin-car-headlight { fill: rgba(255,240,120,0.60); }
.fin-car-taillight  { fill: rgba(255, 60,  60,0.60); }
.fin-car-glass {
  fill:         none;
  stroke:       rgba(0, 255, 136, 0.22);
  stroke-width: 0.6;
}
.fin-car-reticle {
  fill:             none;
  stroke:           #00ff88;
  stroke-width:     0.9;
  stroke-dasharray: 4 3;
}

.fin-asset-typewriter {
  font-size:   0.48rem;
  letter-spacing: 0.08em;
  color:       #00ff88;
  text-shadow: 0 0 8px rgba(0,255,136,0.70);
  font-family: 'Courier New', monospace;
  min-height:  1.3em;
  text-align:  center;
}

/* Savings ring */
.fin-savings-wrap {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  align-self:      center;
}
.fin-savings-ring { width: 80px; height: 80px; }
.fin-savings-track {
  fill:         none;
  stroke:       rgba(0, 255, 136, 0.10);
  stroke-width: 5;
}
.fin-savings-arc {
  fill:           none;
  stroke-width:   5;
  stroke-linecap: round;
  filter:         drop-shadow(0 0 4px rgba(0,255,136,0.50));
}
.fin-savings-center {
  position:        absolute;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  line-height:     1.1;
}
.fin-savings-num {
  font-size:   0.70rem;
  font-weight: 700;
  color:       #00ff88;
  text-shadow: 0 0 8px rgba(0,255,136,0.60);
  font-family: 'Courier New', monospace;
}
.fin-savings-target {
  font-size:      0.34rem;
  color:          rgba(0,255,136,0.38);
  letter-spacing: 0.06em;
}

/* Market metrics */
.fin-market-metric {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  padding:         0.28rem 0;
  border-bottom:   1px solid rgba(0,255,136,0.07);
}
.fin-metric-label {
  font-size:      0.44rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.28);
}
.fin-metric-val {
  font-size:      0.58rem;
  font-weight:    700;
  color:          rgba(255,255,255,0.72);
  font-family:    'Courier New', monospace;
}
.fin-metric-neg {
  color:       #ff4466;
  text-shadow: 0 0 6px rgba(255,68,102,0.45);
}

/* ── CENTER: Ledger Stream ────────────────────────────────────── */

.fin-ov-center {
  overflow: hidden;
}

.fin-ledger-stream {
  display:        flex;
  flex-direction: column;
  gap:            0;
  background:     rgba(0, 20, 10, 0.45);
  border:         1px solid rgba(0, 255, 136, 0.12);
  border-radius:  5px;
  overflow:       hidden;
  flex:           1;
  min-height:     0;
}

.fin-tx-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0.44rem 0.7rem;
  border-bottom:   1px solid rgba(0, 255, 136, 0.06);
  border-left:     2px solid transparent;
  transition:      border-color 0.2s, box-shadow 0.2s, background 0.2s;
  cursor:          default;
}
.fin-tx-row:last-child { border-bottom: none; }

.fin-tx-income  { border-left-color: rgba(0, 255, 136, 0.55); }
.fin-tx-expense { border-left-color: rgba(110,  60, 190, 0.42); }

.fin-tx-row:hover {
  border-left-color: #00ff88;
  box-shadow:        0 0 8px rgba(0, 255, 136, 0.18);
  background:        rgba(0, 255, 136, 0.04);
}
.fin-tx-expense:hover {
  border-left-color: #9955ff;
  box-shadow:        0 0 8px rgba(120, 60, 200, 0.20);
  background:        rgba(100, 40, 180, 0.05);
}

.fin-tx-left {
  display:        flex;
  flex-direction: column;
  gap:            1px;
  min-width:      0;
}
.fin-tx-label {
  font-size:      0.52rem;
  font-weight:    700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}
.fin-tx-income  .fin-tx-label { color: #00ff88; text-shadow: 0 0 8px rgba(0,255,136,0.55); }
.fin-tx-expense .fin-tx-label { color: rgba(160,100,220,0.78); }

.fin-tx-note {
  font-size:      0.40rem;
  letter-spacing: 0.10em;
  color:          rgba(255,255,255,0.20);
  text-transform: uppercase;
}

.fin-tx-amount {
  font-size:   0.66rem;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  white-space: nowrap;
  flex-shrink: 0;
  padding-left: 0.5rem;
}
.fin-tx-income  .fin-tx-amount { color: #00ff88; text-shadow: 0 0 6px rgba(0,255,136,0.45); }
.fin-tx-expense .fin-tx-amount { color: rgba(140,80,210,0.80); }

.fin-tx-new { background: rgba(0, 255, 136, 0.06) !important; }
.fin-tx-pulse { animation: fin-new-pulse 1.6s ease-out 1; }
@keyframes fin-new-pulse {
  0%   { box-shadow: 0 0 18px rgba(0,255,136,0.65); }
  100% { box-shadow: none; }
}

/* Net flow footer */
.fin-ledger-footer {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  padding:         0.38rem 0.7rem;
  background:      rgba(0, 255, 136, 0.04);
  border-top:      1px solid rgba(0,255,136,0.13);
  flex-shrink:     0;
}
.fin-footer-label {
  font-size:      0.44rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.26);
}
.fin-footer-val {
  font-size:   0.76rem;
  font-weight: 700;
  font-family: 'Courier New', monospace;
}

/* Shared income / expense colour tokens used across all three columns */
.fin-income  { color: #00ff88; text-shadow: 0 0 6px rgba(0,255,136,0.45); }
.fin-expense { color: rgba(140,80,210,0.82); }

/* ── RIGHT: Capital Runway ────────────────────────────────────── */

.fin-runway-card {
  background:     rgba(0, 20, 10, 0.55);
  border:         1px solid rgba(0, 255, 136, 0.18);
  border-radius:  5px;
  padding:        0.75rem 0.9rem;
  display:        flex;
  flex-direction: column;
  gap:            0.35rem;
  flex-shrink:    0;
}
.fin-runway-label {
  font-size:      0.44rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color:          rgba(0,255,136,0.38);
  font-weight:    700;
}
.fin-runway-amount {
  font-size:   1.05rem;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  color:       #00ff88;
  text-shadow: 0 0 10px rgba(0,255,136,0.50);
}
.fin-runway-denom {
  font-size:   0.58rem;
  font-weight: 400;
  color:       rgba(0,255,136,0.38);
}
.fin-runway-bar-wrap {
  height:        4px;
  background:    rgba(0, 255, 136, 0.10);
  border-radius: 2px;
  overflow:      hidden;
}
.fin-runway-bar {
  height:        100%;
  background:    linear-gradient(90deg, #00cc55, #00ff88);
  border-radius: 2px;
  box-shadow:    0 0 6px rgba(0,255,136,0.50);
}
.fin-runway-sub {
  font-size:      0.44rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          rgba(0,255,136,0.42);
}

/* Budget velocity rows */
.fin-velocity-wrap {
  display:        flex;
  flex-direction: column;
  gap:            0.26rem;
  flex-shrink:    0;
}
.fin-velocity-row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  padding:         0.25rem 0;
  border-bottom:   1px solid rgba(0,255,136,0.07);
}
.fin-vel-label {
  font-size:      0.43rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.26);
}
.fin-vel-val {
  font-size:   0.58rem;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  color:       rgba(255,255,255,0.68);
}

/* Intercept console */
.fin-intercept-zone {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  background:     rgba(0, 20, 10, 0.55);
  border:         1px solid rgba(0, 255, 136, 0.18);
  border-radius:  5px;
  padding:        0.7rem 0.9rem;
  position:       relative;
  overflow:       hidden;
  flex-shrink:    0;
  transition:     box-shadow 0.3s;
}

.fin-intercept-scan {
  display:    none;
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     2px;
  background: #00ff88;
  box-shadow: 0 0 10px rgba(0,255,136,0.80);
  animation:  fin-scan-sweep 0.55s linear infinite;
  z-index:    2;
}
@keyframes fin-scan-sweep {
  0%   { top: 0%; }
  100% { top: 100%; }
}

.fin-scanning {
  animation: fin-matrix-flash 0.11s ease-in-out 7;
}
@keyframes fin-matrix-flash {
  0%,100% { background: rgba(0, 20, 10, 0.55); }
  50%      { background: rgba(0, 255, 136, 0.08); }
}

.fin-intercept-status {
  font-size:      0.46rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(0, 255, 136, 0.50);
  font-family:    'Courier New', monospace;
  min-height:     1.4em;
  line-height:    1.4;
}

.fin-trans-btn {
  background:     transparent;
  border:         1px solid rgba(0, 255, 136, 0.55);
  color:          #00ff88;
  font-family:    'Courier New', monospace;
  font-size:      0.52rem;
  letter-spacing: 0.10em;
  padding:        0.5rem 0.6rem;
  cursor:         pointer;
  text-transform: uppercase;
  text-shadow:    0 0 6px rgba(0,255,136,0.45);
  box-shadow:     0 0 8px rgba(0,255,136,0.15), inset 0 0 6px rgba(0,255,136,0.04);
  transition:     box-shadow 0.2s, border-color 0.2s;
  width:          100%;
  border-radius:  2px;
}
.fin-trans-btn:hover {
  box-shadow:  0 0 20px rgba(0,255,136,0.45), inset 0 0 10px rgba(0,255,136,0.08);
  border-color: #00ff88;
}
.fin-trans-btn:disabled {
  opacity: 0.42;
  cursor:  not-allowed;
}

/* ══════════════════════════════════════════════════════════════════
   FITNESS OVERLAY — Ice-Blue / Platinum / Smoky Slate HUD
   ══════════════════════════════════════════════════════════════════ */

#universe-workspace.fit-layout {
  grid-template-columns: 0.9fr 1.3fr 1fr;
}

.fit-section-title {
  font-size:      0.50rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color:          rgba(0, 229, 255, 0.45);
  font-weight:    700;
  padding-bottom: 0.4rem;
  border-bottom:  1px solid rgba(0, 229, 255, 0.14);
  flex-shrink:    0;
}

/* ── LEFT: Body SVG + Muscle Map ──────────────────────────────── */

.fit-body-wrap {
  position:  relative;
  display:   flex;
  justify-content: center;
  flex-shrink: 0;
}
.fit-body-svg {
  width:      68px;
  height:     auto;
  overflow:   visible;
}

/* Skeleton outline lines */
.fit-skel {
  fill:             none;
  stroke:           rgba(0, 229, 255, 0.22);
  stroke-width:     0.7;
  stroke-linecap:   round;
  stroke-linejoin:  round;
}

/* Muscle group ellipses */
.fit-muscle {
  fill:        rgba(0, 229, 255, 0.08);
  stroke:      rgba(0, 229, 255, 0.32);
  stroke-width: 0.7;
  cursor:      pointer;
  transition:  fill 0.2s, filter 0.2s, stroke 0.2s;
}
.fit-muscle:hover {
  fill:   rgba(0, 229, 255, 0.20);
  filter: drop-shadow(0 0 4px rgba(0,229,255,0.55));
}
.fit-muscle.fit-muscle-active {
  fill:   rgba(0, 229, 255, 0.28);
  stroke: #00e5ff;
  filter: drop-shadow(0 0 8px rgba(0,229,255,0.80));
}
/* Posterior muscles (hamstrings) slightly dimmer */
.fit-muscle.fit-muscle-post {
  fill:         rgba(0, 229, 255, 0.04);
  stroke:       rgba(0, 229, 255, 0.18);
  stroke-dasharray: 2 2;
}
.fit-muscle.fit-muscle-post.fit-muscle-active {
  fill:   rgba(0, 229, 255, 0.18);
  stroke: rgba(0, 229, 255, 0.70);
}

/* Hover tooltip */
.fit-muscle-tip {
  position:       absolute;
  top:            4px;
  right:          0;
  background:     rgba(4, 10, 18, 0.85);
  border:         1px solid rgba(0, 229, 255, 0.35);
  padding:        0.28rem 0.45rem;
  display:        flex;
  flex-direction: column;
  gap:            2px;
  pointer-events: none;
  z-index:        5;
}
.fit-tip-name {
  font-size:      0.48rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  color:          #00e5ff;
  text-transform: uppercase;
}
.fit-tip-sets {
  font-size:      0.40rem;
  letter-spacing: 0.08em;
  color:          rgba(0, 229, 255, 0.55);
  text-transform: uppercase;
}

/* Muscle set-volume table */
.fit-muscle-table {
  display:        flex;
  flex-direction: column;
  gap:            0.28rem;
  flex-shrink:    0;
}
.fit-mt-row {
  display:             grid;
  grid-template-columns: 5.4rem 1.6rem 1.6rem 1fr;
  align-items:         center;
  gap:                 0.3rem;
}
.fit-mt-name {
  font-size:      0.46rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          rgba(200, 230, 255, 0.55);
  white-space:    nowrap;
}
.fit-mt-chip {
  font-size:      0.42rem;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-align:     center;
  padding:        0.10rem 0.18rem;
  border:         1px solid;
}
.fit-mt-d {
  color:        rgba(0, 229, 255, 0.75);
  border-color: rgba(0, 229, 255, 0.30);
}
.fit-mt-i {
  color:        rgba(180, 200, 255, 0.45);
  border-color: rgba(180, 200, 255, 0.18);
}
.fit-mt-bar-wrap {
  height:     3px;
  background: rgba(0, 229, 255, 0.10);
  overflow:   hidden;
}
.fit-mt-bar {
  height:     100%;
  background: linear-gradient(90deg, rgba(0,150,200,0.70), #00e5ff);
  box-shadow: 0 0 4px rgba(0,229,255,0.40);
}

/* ── CENTER: Viewfinder ───────────────────────────────────────── */

.fit-viewfinder {
  position:   relative;
  background: rgba(4, 10, 18, 0.70);
  border:     1px solid rgba(0, 229, 255, 0.22);
  height:     88px;
  flex-shrink: 0;
  overflow:   hidden;
}

/* Corner bracket decorations */
.fit-vf-corner {
  position:    absolute;
  width:       10px;
  height:      10px;
  border-color: #00e5ff;
  border-style: solid;
  opacity:     0.75;
  z-index:     3;
}
.fit-vf-tl { top: 5px; left: 5px;   border-width: 1.5px 0 0 1.5px; }
.fit-vf-tr { top: 5px; right: 5px;  border-width: 1.5px 1.5px 0 0; }
.fit-vf-bl { bottom: 5px; left: 5px;  border-width: 0 0 1.5px 1.5px; }
.fit-vf-br { bottom: 5px; right: 5px; border-width: 0 1.5px 1.5px 0; }

/* HUD labels */
.fit-vf-hud {
  position:       absolute;
  font-size:      0.40rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family:    'Courier New', monospace;
  z-index:        3;
}
.fit-vf-hud-tl {
  top:   8px;
  left:  18px;
  color: rgba(255, 60, 60, 0.75);
}
.fit-vf-hud-tr {
  top:   8px;
  right: 18px;
  color: rgba(0, 229, 255, 0.45);
}

.fit-vf-vel-readout {
  position:    absolute;
  bottom:      8px;
  left:        50%;
  transform:   translateX(-50%);
  font-size:   0.72rem;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  color:       #00e5ff;
  text-shadow: 0 0 10px rgba(0,229,255,0.65);
  z-index:     3;
  white-space: nowrap;
}

/* Moving horizontal tracking line */
.fit-track-line {
  position:   absolute;
  left:       0;
  right:      0;
  top:        88%;
  height:     1px;
  background: #00e5ff;
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.80), 0 0 14px rgba(0, 229, 255, 0.30);
  z-index:    2;
}

/* ── Velocity Graph ───────────────────────────────────────────── */

.fit-vel-graph-area {
  display:    flex;
  align-items: stretch;
  gap:        4px;
  background: rgba(4, 10, 18, 0.60);
  border:     1px solid rgba(0, 229, 255, 0.12);
  padding:    5px 6px;
  flex-shrink: 0;
}
.fit-vel-yaxis {
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  font-size:       0.36rem;
  color:           rgba(0, 229, 255, 0.38);
  font-family:     'Courier New', monospace;
  width:           16px;
  flex-shrink:     0;
}
.fit-vel-graph-box {
  flex:     1;
  position: relative;
}
.fit-vel-graph {
  width:    100%;
  height:   62px;
  display:  block;
  overflow: visible;
}

.fit-grid-ln {
  stroke:       rgba(0, 229, 255, 0.10);
  stroke-width: 0.6;
}
.fit-thresh-ln {
  stroke:       rgba(0, 229, 255, 0.40);
  stroke-width: 0.8;
  stroke-dasharray: 3 3;
}
.fit-vel-poly {
  fill:           none;
  stroke:         #00e5ff;
  stroke-width:   1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:         drop-shadow(0 0 3px rgba(0,229,255,0.60));
}
.fit-vel-dot {
  fill:   #00e5ff;
  filter: drop-shadow(0 0 4px rgba(0,229,255,0.80));
}

.fit-thresh-tag {
  position:       absolute;
  right:          2px;
  top:            36px;
  font-size:      0.36rem;
  letter-spacing: 0.06em;
  color:          rgba(0, 229, 255, 0.55);
  font-family:    'Courier New', monospace;
  white-space:    nowrap;
  pointer-events: none;
}

/* ── RIR Counter ──────────────────────────────────────────────── */

.fit-rir-box {
  display:     flex;
  align-items: baseline;
  gap:         0.5rem;
  background:  rgba(4, 10, 18, 0.60);
  border:      1px solid rgba(0, 229, 255, 0.12);
  padding:     0.45rem 0.7rem;
  flex-shrink: 0;
}
.fit-rir-label {
  font-size:      0.44rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(200, 230, 255, 0.38);
  flex:           1;
}
.fit-rir-val {
  font-size:      1.45rem;
  font-weight:    700;
  font-family:    'Courier New', monospace;
  color:          #00e5ff;
  text-shadow:    0 0 10px rgba(0,229,255,0.60);
  line-height:    1;
}
.fit-rir-unit {
  font-size:      0.50rem;
  letter-spacing: 0.14em;
  color:          rgba(0, 229, 255, 0.45);
  font-weight:    700;
}

/* Mechanical Breakdown Alert */
.fit-breakdown-alert {
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(0, 229, 255, 0.07);
  border:          1px solid rgba(0, 229, 255, 0.55);
  padding:         0.5rem 0.6rem;
  font-size:       0.50rem;
  font-weight:     700;
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  color:           #00e5ff;
  text-shadow:     0 0 10px rgba(0,229,255,0.70);
  font-family:     'Courier New', monospace;
  text-align:      center;
  animation:       fit-alert-pulse 0.9s ease-in-out infinite;
  flex-shrink:     0;
}
@keyframes fit-alert-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.60; }
}

/* ── RIGHT: CNS Governor ──────────────────────────────────────── */

.fit-cns-grid {
  display:        flex;
  flex-direction: column;
  gap:            0;
  background:     rgba(4, 10, 18, 0.55);
  border:         1px solid rgba(0, 229, 255, 0.12);
  flex-shrink:    0;
}
.fit-cns-row {
  display:         flex;
  align-items:     center;
  padding:         0.36rem 0.6rem;
  border-bottom:   1px solid rgba(0, 229, 255, 0.07);
  gap:             0.4rem;
}
.fit-cns-row:last-child { border-bottom: none; }
.fit-cns-label {
  font-size:      0.44rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          rgba(200, 230, 255, 0.35);
  flex:           1;
}
.fit-cns-val {
  font-size:      0.58rem;
  font-weight:    700;
  font-family:    'Courier New', monospace;
  color:          rgba(200, 230, 255, 0.78);
}
.fit-cns-badge {
  font-size:      0.38rem;
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding:        0.10rem 0.28rem;
  border:         1px solid;
  white-space:    nowrap;
}
.fit-cns-nom  { color: rgba(0,229,255,0.75);   border-color: rgba(0,229,255,0.30); }
.fit-cns-low  { color: rgba(100,220,100,0.75); border-color: rgba(100,220,100,0.28); }
.fit-cns-elev { color: rgba(255,180,0,0.75);   border-color: rgba(255,180,0,0.28); }
.fit-cns-high { color: rgba(0,229,255,0.85);   border-color: rgba(0,229,255,0.40); }
.fit-cns-opt  { color: rgba(160,255,160,0.80); border-color: rgba(160,255,160,0.30); }

/* ── Right: Autoregulated Rest Card ──────────────────────────── */

.fit-rest-card {
  background:     rgba(4, 10, 18, 0.55);
  border:         1px solid rgba(0, 229, 255, 0.16);
  padding:        0.65rem 0.8rem;
  display:        flex;
  flex-direction: column;
  gap:            0.38rem;
  flex-shrink:    0;
}
.fit-rest-top {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
}
.fit-rest-label-sm {
  font-size:      0.44rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          rgba(0, 229, 255, 0.38);
}
.fit-rest-countdown {
  font-size:      1.10rem;
  font-weight:    700;
  font-family:    'Courier New', monospace;
  color:          #00e5ff;
  text-shadow:    0 0 10px rgba(0,229,255,0.55);
  line-height:    1;
}
.fit-rest-bar-wrap {
  height:     5px;
  background: rgba(0, 229, 255, 0.10);
  overflow:   hidden;
}
.fit-rest-bar {
  height:     100%;
  background: linear-gradient(90deg, rgba(0,130,180,0.70), #00e5ff);
  box-shadow: 0 0 6px rgba(0,229,255,0.50);
  transition: width 0.9s linear;
}
.fit-fc-row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
}
.fit-fc-label {
  font-size:      0.43rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(200, 230, 255, 0.30);
}
.fit-fc-val {
  font-size:      0.60rem;
  font-weight:    700;
  font-family:    'Courier New', monospace;
  color:          rgba(0, 229, 255, 0.75);
}

/* Recovery zone */
.fit-recovery-zone {
  display:        flex;
  flex-direction: column;
  gap:            0.45rem;
  background:     rgba(4, 10, 18, 0.55);
  border:         1px solid rgba(0, 229, 255, 0.16);
  padding:        0.65rem 0.8rem;
  flex-shrink:    0;
}
.fit-recovery-status {
  font-size:      0.44rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          rgba(0, 229, 255, 0.42);
  font-family:    'Courier New', monospace;
  min-height:     1.5em;
  line-height:    1.5;
}
.fit-recovery-btn {
  background:     transparent;
  border:         1px solid rgba(0, 229, 255, 0.50);
  color:          #00e5ff;
  font-family:    'Courier New', monospace;
  font-size:      0.50rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding:        0.48rem 0.5rem;
  cursor:         pointer;
  text-shadow:    0 0 6px rgba(0,229,255,0.40);
  box-shadow:     0 0 8px rgba(0,229,255,0.12), inset 0 0 5px rgba(0,229,255,0.04);
  transition:     box-shadow 0.2s, border-color 0.2s;
  width:          100%;
}
.fit-recovery-btn:hover {
  box-shadow:  0 0 18px rgba(0,229,255,0.40), inset 0 0 8px rgba(0,229,255,0.07);
  border-color: #00e5ff;
}
.fit-recovery-btn:disabled {
  opacity: 0.38;
  cursor:  not-allowed;
}

/* Shared center column clip for GSAP track line */
.fit-ov-center { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════
   GOALS OVERLAY — Neon Gold · Electric Cyan · Celestial Space Glass
   ══════════════════════════════════════════════════════════════════ */

#universe-workspace.glo-layout {
  grid-template-columns: 1fr 1.2fr 0.9fr;
}

.glo-section-title {
  font-size:      0.50rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color:          rgba(255, 215, 0, 0.45);
  font-weight:    700;
  padding-bottom: 0.4rem;
  border-bottom:  1px solid rgba(255, 215, 0, 0.14);
  flex-shrink:    0;
}

/* ── LEFT: Constellation ──────────────────────────────────────── */

.glo-constellation-wrap {
  position:    relative;
  flex-shrink: 0;
  background:  rgba(3, 5, 18, 0.70);
  border:      1px solid rgba(255, 215, 0, 0.10);
  overflow:    hidden;
}
.glo-constellation {
  width:    100%;
  height:   auto;
  display:  block;
  overflow: visible;
}

/* Star field twinkle */
.glo-star {
  fill:      rgba(255, 255, 255, 0.32);
  animation: glo-twinkle 3s ease-in-out infinite;
}
.glo-star:nth-child(2n) { animation-delay: 1.1s; }
.glo-star:nth-child(3n) { animation-delay: 2.3s; }
@keyframes glo-twinkle {
  0%,100% { opacity: 0.30; }
  50%      { opacity: 0.85; }
}

/* Vector tether paths */
.glo-tether {
  fill:           none;
  stroke-width:   1;
  stroke-linecap: round;
}
.glo-tether-gold {
  stroke: #ffd700;
  filter: drop-shadow(0 0 4px #ffd700);
  opacity: 0.55;
}
.glo-tether-cyan {
  stroke: #00e5ff;
  filter: drop-shadow(0 0 4px #00e5ff);
  opacity: 0.55;
}

/* Macro anchor rings */
.glo-anchor-ring {
  fill:         none;
  stroke-width: 1.2;
}
.glo-anchor-gold { stroke: rgba(255,215,0,0.65); }
.glo-anchor-cyan { stroke: rgba(0,229,255,0.65); }

/* Macro anchor cores */
.glo-anchor-core      { stroke-width: 0; }
.glo-anchor-core-gold { fill: rgba(255,215,0,0.18); }
.glo-anchor-core-cyan { fill: rgba(0,229,255,0.18); }

/* Anchor SVG text */
.glo-anchor-t1 {
  font-size:      4.5px;
  font-weight:    700;
  text-anchor:    middle;
  letter-spacing: 0.5px;
  fill:           rgba(255,255,255,0.82);
  font-family:    'Courier New', monospace;
}
.glo-anchor-t2 {
  font-size:      3.8px;
  text-anchor:    middle;
  letter-spacing: 0.3px;
  fill:           rgba(255,255,255,0.40);
  font-family:    'Courier New', monospace;
}

/* Micro habit node rings */
.glo-hn-ring {
  fill:         none;
  stroke-width: 0.9;
  cursor:       pointer;
  transition:   filter 0.2s;
}
.glo-hn-gold { stroke: rgba(255,215,0,0.55); }
.glo-hn-cyan { stroke: rgba(0,229,255,0.55); }
.glo-hn-ring:hover { filter: drop-shadow(0 0 5px currentColor); }
.glo-hn-core {
  fill:   rgba(255,255,255,0.22);
  cursor: pointer;
}

/* Particle layer */
.glo-particle-layer {
  position:       absolute;
  inset:          0;
  pointer-events: none;
  z-index:        5;
  overflow:       hidden;
}
.glo-particle {
  position:      absolute;
  width:         4px;
  height:        4px;
  border-radius: 50%;
  transform:     translate(-50%, -50%);
  pointer-events: none;
}

/* Habit action cards */
.glo-habit-cards {
  display:        flex;
  flex-direction: column;
  gap:            0.26rem;
  flex-shrink:    0;
}
.glo-habit-card {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  background:      rgba(3, 5, 18, 0.55);
  border:          1px solid rgba(255, 215, 0, 0.22);
  padding:         0.36rem 0.52rem;
  cursor:          pointer;
  text-align:      left;
  gap:             0.4rem;
  transition:      border-color 0.2s, box-shadow 0.2s;
}
.glo-habit-card:hover {
  border-color: rgba(255, 215, 0, 0.58);
  box-shadow:   0 0 10px rgba(255,215,0,0.18);
}
.glo-habit-card.glo-hc-cyan {
  border-color: rgba(0, 229, 255, 0.22);
}
.glo-habit-card.glo-hc-cyan:hover {
  border-color: rgba(0, 229, 255, 0.58);
  box-shadow:   0 0 10px rgba(0,229,255,0.18);
}
.glo-habit-card.glo-hc-done {
  opacity:      0.42;
  cursor:       not-allowed;
  border-color: rgba(100,255,100,0.30) !important;
  box-shadow:   none !important;
}
.glo-hc-label {
  font-size:      0.50rem;
  font-weight:    700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          rgba(255, 215, 0, 0.82);
  flex:           1;
}
.glo-habit-card.glo-hc-cyan .glo-hc-label {
  color: rgba(0, 229, 255, 0.82);
}
.glo-hc-right {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            1px;
  flex-shrink:    0;
}
.glo-hc-sub {
  font-size:      0.38rem;
  color:          rgba(255,255,255,0.22);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.glo-hc-streak {
  font-size:      0.56rem;
  font-weight:    700;
  font-family:    'Courier New', monospace;
  color:          #ffd700;
  text-shadow:    0 0 6px rgba(255,215,0,0.50);
  padding:        0.08rem 0.22rem;
  border:         1px solid transparent;
  transition:     all 0.35s;
}
.glo-habit-card.glo-hc-cyan .glo-hc-streak {
  color:       #00e5ff;
  text-shadow: 0 0 6px rgba(0,229,255,0.50);
}
.glo-streak-frozen {
  border-color: rgba(0,229,255,0.65)  !important;
  box-shadow:   0 0 10px rgba(0,229,255,0.65), inset 0 0 5px rgba(0,229,255,0.18) !important;
  color:        #00e5ff !important;
  text-shadow:  0 0 8px rgba(0,229,255,0.72) !important;
}

/* ── CENTER: Progress Meters ──────────────────────────────────── */

.glo-progress-list {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
  flex:           1;
}
.glo-prog-item {
  display:        flex;
  flex-direction: column;
  gap:            0.28rem;
  background:     rgba(3, 5, 18, 0.55);
  border:         1px solid rgba(255, 215, 0, 0.10);
  padding:        0.58rem 0.72rem;
}
.glo-prog-header {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
}
.glo-prog-label {
  font-size:      0.48rem;
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          rgba(200, 200, 255, 0.60);
}
.glo-prog-pct {
  font-size:      0.72rem;
  font-weight:    700;
  font-family:    'Courier New', monospace;
}
.glo-prog-bar-wrap {
  height:     5px;
  background: rgba(255, 215, 0, 0.08);
  overflow:   hidden;
}
.glo-prog-bar { height: 100%; }
.glo-prog-meta {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}
.glo-prog-vel {
  font-size:      0.42rem;
  font-family:    'Courier New', monospace;
  color:          rgba(100, 255, 120, 0.65);
  letter-spacing: 0.06em;
}
.glo-eta-block {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            1px;
}
.glo-eta-label {
  font-size:      0.37rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.20);
  font-family:    'Courier New', monospace;
}
.glo-eta-date {
  font-size:      0.58rem;
  font-weight:    700;
  font-family:    'Courier New', monospace;
  letter-spacing: 0.05em;
}

/* ── RIGHT: Focus Router ──────────────────────────────────────── */

.glo-focus-grid {
  display:        flex;
  flex-direction: column;
  background:     rgba(3, 5, 18, 0.55);
  border:         1px solid rgba(255, 215, 0, 0.10);
  flex-shrink:    0;
}
.glo-focus-row {
  display:     flex;
  align-items: center;
  gap:         0.35rem;
  padding:     0.34rem 0.58rem;
  border-bottom: 1px solid rgba(255,215,0,0.07);
}
.glo-focus-row:last-child { border-bottom: none; }
.glo-focus-label {
  font-size:      0.43rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          rgba(200,200,255,0.32);
  flex:           1;
}
.glo-focus-val {
  font-size:      0.58rem;
  font-weight:    700;
  font-family:    'Courier New', monospace;
  color:          rgba(200, 225, 255, 0.78);
}
.glo-focus-badge {
  font-size:      0.38rem;
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding:        0.08rem 0.24rem;
  border:         1px solid;
  white-space:    nowrap;
}
.glo-fb-active  { color: rgba(100,255,100,0.80); border-color: rgba(100,255,100,0.28); }
.glo-fb-nominal { color: rgba(255,215,0,0.75);   border-color: rgba(255,215,0,0.28);   }
.glo-fb-prime   { color: rgba(0,229,255,0.80);   border-color: rgba(0,229,255,0.30);   }
.glo-fb-elev    { color: rgba(255,150,0,0.78);   border-color: rgba(255,150,0,0.28);   }
.glo-fb-low     { color: rgba(100,255,100,0.70); border-color: rgba(100,255,100,0.24); }

/* Safeguard panel */
.glo-safeguard-panel {
  display:        flex;
  flex-direction: column;
  gap:            0.48rem;
  background:     rgba(3, 5, 18, 0.65);
  border:         1px solid rgba(255, 215, 0, 0.18);
  padding:        0.68rem 0.78rem;
  flex-shrink:    0;
  transition:     box-shadow 0.4s, border-color 0.4s;
}
.glo-safeguard-status {
  font-size:      0.44rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          rgba(100,255,100,0.55);
  font-family:    'Courier New', monospace;
  min-height:     1.4em;
}
.glo-stasis-btn {
  background:     transparent;
  border:         1px solid rgba(255, 215, 0, 0.50);
  color:          #ffd700;
  font-family:    'Courier New', monospace;
  font-size:      0.50rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding:        0.46rem 0.5rem;
  cursor:         pointer;
  text-shadow:    0 0 6px rgba(255,215,0,0.40);
  box-shadow:     0 0 8px rgba(255,215,0,0.12), inset 0 0 5px rgba(255,215,0,0.04);
  transition:     box-shadow 0.2s, border-color 0.2s;
  width:          100%;
}
.glo-stasis-btn:hover {
  box-shadow:  0 0 18px rgba(255,215,0,0.40), inset 0 0 8px rgba(255,215,0,0.07);
  border-color: #ffd700;
}
.glo-stasis-btn.glo-stasis-active {
  border-color: rgba(0,229,255,0.65)  !important;
  color:        #00e5ff               !important;
  text-shadow:  0 0 8px rgba(0,229,255,0.55) !important;
  box-shadow:   0 0 14px rgba(0,229,255,0.28) !important;
  cursor:       not-allowed;
}
.glo-stasis-log {
  font-size:      0.42rem;
  letter-spacing: 0.05em;
  line-height:    1.7;
  color:          rgba(0, 229, 255, 0.55);
  font-family:    'Courier New', monospace;
  font-style:     italic;
  padding:        0.32rem 0.38rem;
  background:     rgba(0, 229, 255, 0.05);
  border:         1px solid rgba(0, 229, 255, 0.18);
}

/* ══════════════════════════════════════════════════════════════════
   ZERO-CHROME SPATIAL TELEMETRY
   Container Vaporization · Scalpel Dividers · Depth Typography
   ══════════════════════════════════════════════════════════════════ */

/* ── Column coordinate dividers (all 3-zone ac-layout modules) ─── */

.ac-ov-col:not(:first-child) {
  border-left: 0.5px solid rgba(255, 255, 255, 0.08);
}

/* ── Crosshair anchors on every module section title ────────────── */

.fin-section-title::before,
.fit-section-title::before,
.glo-section-title::before,
.ath-section-title::before {
  content:      '+ ';
  opacity:      0.38;
  font-size:    0.70em;
  font-weight:  400;
  letter-spacing: 0;
}

/* ── .ov-coord — alignment bracket in default module columns ─────── */

.ov-coord {
  font-size:      0.40rem;
  letter-spacing: 0.08em;
  color:          rgba(255, 255, 255, 0.20);
  font-family:    'Courier New', monospace;
  margin-right:   0.4rem;
  text-shadow:    0 0 5px rgba(255,255,255,0.12);
}

/* ── Finance: vaporize card/panel backgrounds ────────────────────── */

.fin-asset-card      { background: transparent            !important; box-shadow: none !important; border-color: rgba(0,255,136,0.12) !important; }
.fin-runway-card     { background: transparent            !important; box-shadow: none !important; border-color: rgba(0,255,136,0.10) !important; }
.fin-intercept-zone  { background: transparent            !important; box-shadow: none !important; border-color: rgba(0,255,136,0.12) !important; }
.fin-ledger-stream   { background: rgba(0,255,136,0.022)  !important; border-color: rgba(0,255,136,0.08) !important; }
.fin-ledger-footer   { background: transparent            !important; }
.fin-velocity-row    { border-color: rgba(0,255,136,0.06) !important; }

/* ── Fitness: vaporize card/panel backgrounds ────────────────────── */

.fit-viewfinder      { background: rgba(0,229,255,0.022)  !important; border-color: rgba(0,229,255,0.14) !important; }
.fit-vel-graph-area  { background: rgba(0,229,255,0.018)  !important; border-color: rgba(0,229,255,0.07) !important; }
.fit-rir-box         { background: transparent            !important; border-color: rgba(0,229,255,0.07) !important; }
.fit-rest-card       { background: transparent            !important; box-shadow: none !important; border-color: rgba(0,229,255,0.10) !important; }
.fit-recovery-zone   { background: transparent            !important; box-shadow: none !important; border-color: rgba(0,229,255,0.10) !important; }
.fit-cns-grid        { background: transparent            !important; border-color: rgba(0,229,255,0.07) !important; }
.fit-cns-row         { border-color: rgba(0,229,255,0.055) !important; }

/* ── Goals: vaporize card/panel backgrounds ──────────────────────── */

.glo-constellation-wrap { background: rgba(0,0,0,0.07) !important; border-color: transparent !important; }
.glo-prog-item       { background: transparent            !important; box-shadow: none !important; border-color: rgba(255,215,0,0.08) !important; }
.glo-focus-grid      { background: transparent            !important; border-color: rgba(255,215,0,0.07) !important; }
.glo-focus-row       { border-color: rgba(255,215,0,0.055) !important; }
.glo-safeguard-panel { background: transparent            !important; box-shadow: none !important; border-color: rgba(255,215,0,0.13) !important; }
.glo-habit-card      { background: rgba(255,215,0,0.015)  !important; box-shadow: none !important; }
.glo-habit-card.glo-hc-cyan { background: rgba(0,229,255,0.015) !important; }

/* ── Athletics: vaporize panel backgrounds ───────────────────────── */

.ath-pain-panel      { background: transparent            !important; box-shadow: none !important; border-color: rgba(139,0,255,0.13) !important; }
.ath-travel-ticker   { background: transparent            !important; border-color: rgba(139,0,255,0.11) !important; }
.ath-travel-card     { border-color: rgba(139,0,255,0.07) !important; }
.ath-perf-grid       { background: transparent            !important; border-color: rgba(139,0,255,0.11) !important; }
.ath-recovery-box    { background: rgba(139,0,255,0.025)  !important; }
.ath-scout-terminal  { background: transparent            !important; border-color: rgba(139,0,255,0.13) !important; }
.ath-scout-panel     { background: transparent            !important; border-color: rgba(139,0,255,0.16) !important; }

/* ── Academics: vaporize panel backgrounds ───────────────────────── */

.ac-slider-matrix,
.ac-gm-wrap,
.ac-ticker-wrap,
.ac-ai-terminal,
.ac-ext-panel        { background: transparent !important; box-shadow: none !important; border-color: rgba(255,215,0,0.10) !important; }
.ac-gm-row           { background: transparent !important; }

/* ── Reminders: vaporize panel backgrounds ───────────────────────── */

.rem-task-card,
.rem-micro-card      { background: transparent !important; box-shadow: none !important; border-color: rgba(255,165,0,0.11) !important; }
.rem-dispatch-log    { background: transparent !important; }

/* ── Nutrition: vaporize panel backgrounds ───────────────────────── */

.nut-scanner,
.nut-glucose-wrap,
.nut-micro-grid,
.nut-meal-ticker     { background: transparent !important; box-shadow: none !important; border-color: rgba(255,100,0,0.10) !important; }

/* ── Universal text-depth shadow — all floating labels ──────────── */

.fin-section-title, .fin-metric-label, .fin-metric-val,
.fin-tx-label, .fin-tx-note, .fin-tx-amount,
.fin-footer-label, .fin-asset-typewriter,
.fin-runway-label, .fin-runway-sub,
.fin-vel-label, .fin-vel-val, .fin-intercept-status,
.fin-savings-target {
  text-shadow: 0 2px 6px rgba(0,0,0,0.92);
}

.fit-section-title, .fit-cns-label, .fit-cns-val,
.fit-rest-label-sm, .fit-fc-label, .fit-fc-val,
.fit-recovery-status, .fit-rir-label, .fit-rir-unit,
.fit-vf-hud, .fit-vel-yaxis span, .fit-thresh-tag {
  text-shadow: 0 2px 6px rgba(0,0,0,0.92);
}

.glo-section-title, .glo-prog-label, .glo-prog-vel,
.glo-eta-label, .glo-focus-label, .glo-focus-val,
.glo-safeguard-status, .glo-stasis-log,
.glo-hc-sub, .glo-anchor-t1, .glo-anchor-t2 {
  text-shadow: 0 2px 6px rgba(0,0,0,0.92);
}

.ath-section-title, .ath-tc-label, .ath-tc-value,
.ath-tc-detail, .ath-pm-label, .ath-pm-val,
.ath-pain-joint-name, .ath-pain-scale-label {
  text-shadow: 0 2px 6px rgba(0,0,0,0.92);
}

/* ── Enhanced neon self-luminance on primary live metrics ────────── */

.fin-savings-num   { text-shadow: 0 3px 10px rgba(0,0,0,0.95), 0 0 22px rgba(0,255,136,0.80) !important; }
.fin-runway-amount { text-shadow: 0 3px 12px rgba(0,0,0,0.95), 0 0 24px rgba(0,255,136,0.75) !important; }
.fin-footer-val    { text-shadow: 0 2px 8px rgba(0,0,0,0.95),  0 0 14px rgba(0,255,136,0.62) !important; }

.fit-rir-val          { text-shadow: 0 3px 14px rgba(0,0,0,0.95), 0 0 26px rgba(0,229,255,0.78) !important; }
.fit-rest-countdown   { text-shadow: 0 3px 10px rgba(0,0,0,0.95), 0 0 20px rgba(0,229,255,0.68) !important; }
.fit-vf-vel-readout   { text-shadow: 0 3px 10px rgba(0,0,0,0.95), 0 0 18px rgba(0,229,255,0.72) !important; }

.glo-eta-date  { text-shadow: 0 3px 10px rgba(0,0,0,0.95), 0 0 18px rgba(255,215,0,0.68) !important; }
.glo-prog-pct  { text-shadow: 0 3px 10px rgba(0,0,0,0.95), 0 0 16px rgba(255,215,0,0.62) !important; }
.glo-hc-streak { text-shadow: 0 2px 8px rgba(0,0,0,0.95),  0 0 12px rgba(255,215,0,0.58) !important; }
.glo-habit-card.glo-hc-cyan .glo-hc-streak {
  text-shadow: 0 2px 8px rgba(0,0,0,0.95), 0 0 12px rgba(0,229,255,0.58) !important;
}

/* ── Reminders · CALENDAR view — tasks (left) + month grid (right) + task→node pipeline ── */
.rem-cal-left     { display:flex; flex-direction:column; gap:.5rem; }
.rem-cal-tasklist { display:flex; flex-direction:column; gap:.42rem; }
.rem-cal-task {
  text-align:left; background:rgba(12,0,22,.55); border:1px solid rgba(255,45,111,.22);
  border-left:3px solid var(--rc,#ff2d6f); border-radius:6px; padding:.5rem .6rem; color:#e8e2f0;
  cursor:pointer; font-family:inherit; display:flex; flex-direction:column; gap:.3rem;
  transition:background .18s, box-shadow .18s, transform .12s;
}
.rem-cal-task:hover   { background:rgba(28,4,44,.82); transform:translateX(2px); }
.rem-cal-task.flagged { box-shadow:0 0 14px -2px var(--rc,#ff2d6f); background:rgba(36,4,56,.92); }
.rem-cal-task-top  { display:flex; justify-content:space-between; align-items:center; }
.rem-cal-task-name { font-size:.82rem; font-weight:600; letter-spacing:.2px; }
.rem-cal-task-flag { font-size:.58rem; letter-spacing:1px; color:var(--rc,#ff2d6f); opacity:.65; }
.rem-cal-task.flagged .rem-cal-task-flag { opacity:1; }
.rem-cal-task-meta { display:flex; justify-content:space-between; gap:.5rem; font-size:.6rem; letter-spacing:.4px; color:#9b8fb0; text-transform:uppercase; }
.rem-cal-task-due  { color:var(--rc,#ff2d6f); white-space:nowrap; }
.rem-cal-hint { font-size:.58rem; letter-spacing:1px; color:#6f6486; text-transform:uppercase; margin-top:.15rem; }

.rem-cal-right { display:flex; flex-direction:column; gap:.42rem; }
.rem-cal-head  { display:flex; justify-content:space-between; align-items:center; }
.rem-cal-month { font-size:.8rem; font-weight:700; letter-spacing:2px; color:#ff5e9a; }
.rem-cal-legend   { display:flex; gap:.5rem; font-size:.54rem; letter-spacing:.5px; color:#9b8fb0; align-items:center; }
.rem-cal-legend i { width:7px; height:7px; border-radius:50%; margin-right:2px; display:inline-block; vertical-align:middle; }
.rem-cal-dowrow, .rem-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.rem-cal-dow { text-align:center; font-size:.56rem; letter-spacing:1px; color:#7d7194; padding:1px 0; }
.rem-cal-cell {
  position:relative; min-height:30px; aspect-ratio:1/1; border:1px solid rgba(255,45,111,.14);
  border-radius:5px; background:rgba(10,2,18,.5); padding:3px; overflow:hidden;
}
.rem-cal-empty         { border-color:transparent; background:transparent; }
.rem-cal-cell.today    { border-color:#ff2d6f; box-shadow:inset 0 0 10px -3px #ff2d6f; }
.rem-cal-cell.has-task { background:rgba(36,4,56,.72); }
.rem-cal-daynum { font-size:.58rem; color:#b9aecb; }
.rem-cal-cell.today .rem-cal-daynum { color:#ff7eac; font-weight:700; }
.rem-cal-node-slot { position:absolute; left:3px; right:3px; bottom:3px; display:flex; gap:2px; flex-wrap:wrap; }
.rem-cal-node { width:7px; height:7px; border-radius:50%; box-shadow:0 0 6px 0 rgba(255,255,255,.5); }

/* ── Academics · ACADEMIC SYSTEM POSITION (anonymous leaderboard + growth vector) ── */
.ac-leaderboard-panel {
  margin-top:.6rem; border:1px solid rgba(0,255,136,.22); border-radius:8px;
  background:linear-gradient(160deg, rgba(2,16,12,.85), rgba(4,8,16,.9)); padding:.65rem .7rem; overflow:hidden;
}
.ac-leaderboard-panel.locked { border-color:rgba(255,170,40,.28); background:linear-gradient(160deg, rgba(20,12,2,.9), rgba(8,6,14,.92)); }
.ac-lb-head { display:flex; justify-content:space-between; align-items:center; font-size:.64rem; letter-spacing:2px; color:#8fd9c0; font-weight:700; }
.ac-leaderboard-panel.locked .ac-lb-head { color:#e6b86a; }
.ac-lb-live    { color:#00ff88; font-size:.56rem; letter-spacing:1px; }
.ac-lb-lockico { font-size:.8rem; filter:drop-shadow(0 0 6px rgba(255,170,40,.7)); }

.ac-lb-rankrow { display:flex; align-items:baseline; gap:.4rem; margin-top:.45rem; }
.ac-lb-rank    { font-size:1.5rem; font-weight:800; letter-spacing:1px; }
.ac-lb-of      { font-size:.8rem; color:#7c8a84; }
.ac-lb-rankrow.emerald .ac-lb-rank { color:#00ff88; text-shadow:0 0 16px rgba(0,255,136,.55); }
.ac-lb-rankrow.amber   .ac-lb-rank { color:#ffb340; text-shadow:0 0 16px rgba(255,179,64,.5); }
.ac-lb-meta  { display:flex; justify-content:space-between; gap:.5rem; margin-top:.3rem; font-size:.58rem; letter-spacing:.6px; }
.ac-lb-tier.emerald { color:#00ff88; } .ac-lb-tier.amber { color:#ffb340; }
.ac-lb-pct   { color:#9fb0aa; }
.ac-lb-status { margin-top:.35rem; font-size:.62rem; letter-spacing:1.5px; color:#ccffee; text-align:center; padding:.3rem; border:1px dashed rgba(0,255,136,.25); border-radius:5px; }
.ac-lb-stasis { margin-top:.35rem; font-size:.52rem; letter-spacing:.6px; color:#6f7d77; text-transform:uppercase; text-align:center; }

.ac-growth-vector-zone { margin-top:.5rem; border-top:1px solid rgba(0,255,136,.14); padding-top:.45rem; }
.ac-growth-vector-zone.active { border-top-color:rgba(255,179,64,.3); }
.ac-gv-head { font-size:.58rem; letter-spacing:1.5px; color:#8fd9c0; font-weight:700; margin-bottom:.35rem; }
.ac-growth-vector-zone.active .ac-gv-head { color:#ffb340; }
.ac-gv-quest { display:flex; justify-content:space-between; align-items:center; gap:.5rem; font-size:.6rem; color:#d6e6e0; padding:.28rem .35rem; border-radius:4px; background:rgba(0,255,136,.05); margin-bottom:.25rem; }
.ac-growth-vector-zone.active .ac-gv-quest { background:rgba(255,179,64,.07); }
.ac-gv-q { line-height:1.25; }
.ac-gv-climb { color:#00ff88; font-weight:700; white-space:nowrap; }
.ac-growth-vector-zone.active .ac-gv-climb { color:#ffb340; }
.ac-gv-velocity { margin-top:.3rem; font-size:.56rem; letter-spacing:.6px; color:#00ff88; text-align:right; }

.ac-lb-firewall  { position:relative; text-align:center; padding:.7rem .3rem .4rem; }
.ac-lb-lockmsg   { font-size:.56rem; letter-spacing:.8px; color:#e6b86a; line-height:1.4; animation:acLbBlink 1.6s steps(2) infinite; }
@keyframes acLbBlink { 50% { opacity:.45; } }
.ac-lb-countdown { font-size:1.7rem; font-weight:800; letter-spacing:3px; color:#ffb340; margin:.35rem 0; text-shadow:0 0 16px rgba(255,179,64,.5); font-variant-numeric:tabular-nums; }
.ac-lb-locksub   { font-size:.52rem; letter-spacing:.5px; color:#7a6f5c; }
.ac-lb-scan { position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,transparent,#ffb340,transparent); animation:acLbScan 2.4s linear infinite; }
@keyframes acLbScan { 0%{top:0;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{top:100%;opacity:0} }

/* ── Academics · GPA rings sit cleanly inside the left column (no longer full-width) ── */
.ac-ov-left .ac-gpa-row  { gap: .6rem; padding-bottom: .4rem; }
.ac-ov-left .ac-gpa-mini { width: 96px; height: 96px; }

/* ── Application-wide typography upscale (~20–25% over baselines) ── */
.ac-term-header, .rem-section-title, .nut-section-title, .ath-section-title,
.fin-section-title, .fit-section-title, .glo-section-title, .mh-section-title {
  font-size: 1.1rem !important; font-weight: 700;
}
#universe-workspace.ac-layout .ov-label { font-size: 0.72rem; }
.ov-val        { font-size: 1.08rem; }
.ac-gm-course  { font-size: 0.84rem; }
.ac-gm-pct     { font-size: 0.84rem; }
.ac-gm-letter  { font-size: 0.92rem; }
.ac-gc-title   { font-size: 0.82rem; }
.ac-gc-course  { font-size: 0.66rem; }
.ac-gc-due     { font-size: 0.68rem; }
.ac-as-name    { font-size: 0.82rem; }
.ac-as-meta    { font-size: 0.64rem; }

/* ── Academics · chromatic letter-grade matrix — overrides the row-status colours ── */
.ac-gm-row .ac-gm-letter.gl-a { color: #00CFFF; text-shadow: 0 0 8px rgba(0,207,255,0.55); }
.ac-gm-row .ac-gm-letter.gl-b { color: #00FF66; text-shadow: 0 0 8px rgba(0,255,102,0.50); }
.ac-gm-row .ac-gm-letter.gl-c { color: #FFAA00; text-shadow: 0 0 8px rgba(255,170,0,0.55); }
.ac-gm-row .ac-gm-letter.gl-d { color: #FF4444; text-shadow: 0 0 8px rgba(255,68,68,0.55); }
.ac-gm-row .ac-gm-letter.gl-f { color: #AA0022; text-shadow: 0 0 9px rgba(170,0,34,0.65); }

/* ── Academics · WHAT NOW? triage button + critical node ── */
.ac-what-now-btn {
  width: 100%; padding: .6rem; margin-bottom: .5rem; cursor: pointer; font-family: inherit;
  font-size: .92rem; font-weight: 800; letter-spacing: 2px; color: #00131a;
  background: linear-gradient(90deg, #00CFFF, #00EDCC); border: none; border-radius: 7px;
  box-shadow: 0 0 18px -2px rgba(0,207,255,.6); animation: acWhatNowPulse 2.2s ease-in-out infinite;
}
.ac-what-now-btn:hover { filter: brightness(1.12); }
@keyframes acWhatNowPulse { 0%,100%{box-shadow:0 0 14px -2px rgba(0,207,255,.5)} 50%{box-shadow:0 0 26px 2px rgba(0,237,204,.78)} }

.ac-as-row.critical-node {
  position: relative; border: 1px solid #00EDCC; background: rgba(0,237,204,.08);
  box-shadow: inset 0 0 16px -4px rgba(0,237,204,.5); animation: acCritPulse 1.4s ease-in-out infinite;
}
@keyframes acCritPulse { 0%,100%{box-shadow:inset 0 0 12px -4px rgba(0,237,204,.4)} 50%{box-shadow:inset 0 0 22px -2px rgba(0,237,204,.78)} }
.ac-as-alert { position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:#00EDCC; box-shadow:0 0 8px #00EDCC; animation:acBlink 1s steps(2) infinite; }
@keyframes acBlink { 50%{opacity:.25} }

/* ── Academics · Focus Sprint terminal (Pomodoro) ── */
.ac-focus-sprint {
  margin-top: .7rem; border: 1px solid rgba(0,207,255,.25); border-radius: 8px;
  background: linear-gradient(160deg, rgba(2,10,20,.9), rgba(4,6,16,.92)); padding: .7rem; text-align: center;
}
.ac-focus-sprint.running { border-color: #00EDCC; box-shadow: 0 0 20px -4px rgba(0,237,204,.5); }
.ac-fs-head      { font-size: .72rem; letter-spacing: 2px; font-weight: 700; color: #7fd8ff; }
.ac-sprint-clock { font-size: 2.4rem; font-weight: 800; letter-spacing: 3px; color: #00CFFF; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(0,207,255,.5); margin: .2rem 0; }
.ac-sprint-task  { font-size: .62rem; letter-spacing: .4px; color: #8fb8c8; min-height: .9rem; margin-bottom: .45rem; }
.ac-fs-controls  { display: flex; gap: .4rem; }
.ac-fs-btn { flex:1; padding:.45rem; cursor:pointer; font-family:inherit; font-size:.62rem; letter-spacing:1px; font-weight:700; border-radius:5px; background:rgba(0,207,255,.12); color:#00CFFF; border:1px solid rgba(0,207,255,.4); }
.ac-fs-btn:hover      { background:rgba(0,207,255,.22); }
.ac-fs-btn.abort      { color:#ff7b7b; border-color:rgba(255,90,90,.4); background:rgba(255,80,80,.1); }
.ac-fs-btn.abort:hover{ background:rgba(255,80,80,.2); }

/* ── Academics · Prestige XP tracker ── */
.ac-prestige-xp { border:1px solid rgba(0,237,204,.25); border-radius:8px; background:linear-gradient(160deg, rgba(2,16,14,.85), rgba(4,8,16,.9)); padding:.55rem .65rem; }
.ac-xp-head  { display:flex; justify-content:space-between; font-size:.6rem; letter-spacing:1.5px; font-weight:700; color:#8fd9c0; }
.ac-xp-lv    { color:#00EDCC; }
.ac-xp-title { font-size:.74rem; font-weight:700; letter-spacing:.5px; color:#cffdf0; margin:.25rem 0; }
.ac-xp-bar-wrap { height:13px; border-radius:7px; background:rgba(0,0,0,.5); overflow:hidden; border:1px solid rgba(0,237,204,.2); }
.ac-xp-bar { height:100%; background:linear-gradient(90deg,#00CFFF,#00EDCC,#00FF88); box-shadow:0 0 12px rgba(0,237,204,.7); border-radius:7px; transition:width .8s cubic-bezier(.22,1,.36,1); }
.ac-xp-sub { font-size:.54rem; letter-spacing:.4px; color:#7d9a90; margin-top:.3rem; }

/* ════════════════════════════════════════════════════════════════════════════
   ACADEMICS · "FLOATING TEXT HUD" — boxes vaporized; text floats over the starfield.
   ════════════════════════════════════════════════════════════════════════════ */

/* Universal floating-text depth shadow (inherited) — protects legibility over the
   moving particles underneath. Elements with their own neon shadow keep theirs. */
#universe-workspace.ac-layout {
  text-shadow: 0 2px 8px rgba(0,0,0,0.95), 0 0 4px rgba(255,255,255,0.05);
}

/* Strip every solid plate / container panel / row background across the layout. */
#universe-workspace.ac-layout .ac-slider-matrix,
#universe-workspace.ac-layout .ac-gm-wrap,
#universe-workspace.ac-layout .ac-ticker-wrap,
#universe-workspace.ac-layout .ac-ai-terminal,
#universe-workspace.ac-layout .ac-focus-sprint,
#universe-workspace.ac-layout .ac-prestige-xp,
#universe-workspace.ac-layout .ac-leaderboard-panel,
#universe-workspace.ac-layout .ac-sync-box,
#universe-workspace.ac-layout .ac-sync-drawer,
#universe-workspace.ac-layout .ac-growth-vector-zone,
#universe-workspace.ac-layout .ac-gc-list,
#universe-workspace.ac-layout .ac-assign-list,
#universe-workspace.ac-layout .ac-gm-row,
#universe-workspace.ac-layout .ac-as-row:not(.critical-node),
#universe-workspace.ac-layout .ac-gc-row,
#universe-workspace.ac-layout .ac-gv-quest,
#universe-workspace.ac-layout .ac-empty-row {
  background:  transparent !important;
  box-shadow:  none        !important;
  border:      none        !important;
}

/* Keep row rhythm without plates — hover is a faint luminous lift, not a box. */
#universe-workspace.ac-layout .ac-gm-row:hover,
#universe-workspace.ac-layout .ac-as-row:hover,
#universe-workspace.ac-layout .ac-gc-row:hover {
  background: rgba(255,255,255,0.045) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   ACADEMICS · 6-TAB ROUTER + VIEW STACK (overrides the 3-column grid)
   ════════════════════════════════════════════════════════════════════════════ */
#universe-workspace.ac-layout {
  display: flex; flex-direction: column; gap: .9rem;
  padding: 1.1rem 2rem 1.4rem; overflow: hidden;
}
.ac-nav-router {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 1.6rem;
  padding-bottom: .5rem; border-bottom: 0.5px solid rgba(255,255,255,0.08); flex-shrink: 0;
}
.ac-nav-tab {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: .82rem; font-weight: 700; letter-spacing: 1.5px; padding: .25rem .2rem;
  color: rgba(255,255,255,0.40); transition: color .2s, text-shadow .2s;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}
.ac-nav-tab:hover      { color: rgba(255,255,255,0.78); }
.ac-nav-tab.active-tab { color: #00EDCC; text-shadow: 0 0 16px rgba(0,237,204,0.9), 0 0 6px rgba(0,207,255,0.7); }

.ac-view-stack { flex: 1; min-height: 0; }
.ac-view { display: none; height: 100%; gap: 2.2rem; }
.ac-view.active-view { display: flex; }
.ac-view-col {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1rem;
  overflow-y: auto; scrollbar-width: none;
}
.ac-view-col::-webkit-scrollbar { display: none; }
.ac-view-col:not(:first-child) { border-left: 0.5px solid rgba(255,255,255,0.08); padding-left: 2.2rem; }
.ac-view-placeholder {
  margin: auto; text-align: center; font-size: .92rem; letter-spacing: 2px; line-height: 2.1;
  color: rgba(255,255,255,0.55); text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}
.ac-view-placeholder span { display:inline-block; margin-top:.4rem; font-size: .6rem; letter-spacing: 4px; color: #00CFFF; }

/* Hypothetical Projection engine */
.ac-hyp-row { display: flex; align-items: center; gap: .55rem; font-size: .72rem; color: rgba(255,255,255,0.72); margin: .35rem 0; }
.ac-hyp-row label { min-width: 5.5rem; }
.ac-hyp-row input[type=range] { flex: 1; accent-color: #00EDCC; }
.ac-hyp-num { width: 4rem; }
.ac-hyp-out  { margin-top: .6rem; }
.ac-hyp-line { display: flex; justify-content: space-between; font-size: .82rem; color: rgba(255,255,255,0.86); padding: .28rem 0; }
.ac-hyp-line.big { font-size: 1.05rem; font-weight: 700; border-top: 0.5px solid rgba(255,255,255,0.12); padding-top: .45rem; margin-top: .2rem; }
.ac-hyp-line em      { font-style: normal; font-size: .8rem; }
.ac-hyp-line em.up   { color: #00FF88; }
.ac-hyp-line em.down { color: #FF8888; }

/* Priority triage urgency (Classroom view) */
.ac-as-row.due-imminent .ac-as-due  { color: #FF5555 !important; font-weight: 800; animation: acDueBlink 1.1s steps(2) infinite; }
.ac-as-row.due-imminent .ac-as-name { color: #FFB0B0; }
.ac-as-row.due-soon .ac-as-due      { color: #FFAA00 !important; font-weight: 700; }
@keyframes acDueBlink { 50% { opacity: .4; } }

/* ── Academics · shift up + centered top GPA banner (below the tab router) ── */
#universe-workspace.ac-layout { padding-top: 0.5rem; }
.ac-gpa-banner { flex-shrink: 0; gap: 2.4rem; padding: .15rem 0 .35rem; }
.ac-gpa-banner .ac-gpa-num  { font-size: 2.64rem; }   /* +10% — the dominant on-screen metric */
.ac-gpa-banner .ac-gpa-mode { font-size: 0.5rem; }

/* ── Academics · nav router merged onto the DASHBOARD header row (#universe-tab-bar) ── */
#universe-tab-bar .ac-nav-router { border-bottom: none; padding: 0; gap: 1.1rem; flex-wrap: nowrap; }
#universe-tab-bar .ac-nav-tab    { font-size: 0.7rem; letter-spacing: 1px; padding: 0; }

/* ── Academics · ASPEN stacked layout (top row + quarter assignments grid) ── */
.ac-view-stacked.active-view { flex-direction: column; gap: 1rem; }
.ac-aspen-row { display: flex; gap: 2.2rem; flex: 0 0 auto; max-height: 42%; }
.ac-aspen-row > .ac-view-col { overflow-y: auto; scrollbar-width: none; }
.ac-aspen-row > .ac-view-col::-webkit-scrollbar { display: none; }
.ac-aspen-assignments { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5rem; }
.ac-assign-head  { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.ac-assign-tools { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.ac-assign-tools .ac-class-select { width: auto; min-width: 9rem; }
.ac-what-now-inline { width: auto !important; margin: 0 !important; padding: .35rem .9rem !important; font-size: .72rem !important; }
.ac-current-q { color: #00EDCC; font-size: .72rem; font-weight: 700; letter-spacing: 1.5px; text-shadow: 0 0 12px rgba(0,237,204,.7); white-space: nowrap; }

/* ── Academics · 4-column quarter grid (Q1–Q4) ── */
.ac-quarter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.8rem; flex: 1; min-height: 0; padding: 0 .2rem; }
.ac-q-col  { display: flex; flex-direction: column; min-height: 0; padding-top: .4rem; border-top: 2px solid rgba(255,255,255,0.06); }
.ac-q-head { font-size: 1.05rem; font-weight: 800; letter-spacing: 4px; color: rgba(255,255,255,0.55); margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem; }
.ac-q-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: .25rem; }
.ac-q-list::-webkit-scrollbar { display: none; }
.ac-q-live { font-size: .55rem; color: #00EDCC; letter-spacing: 1px; }
/* Active (live) quarter — neon top laser line + glow */
.ac-q-col.ac-q-active { border-top-color: #00EDCC; box-shadow: 0 -3px 22px -6px rgba(0,237,204,0.65); }
.ac-q-col.ac-q-active .ac-q-head { color: #00EDCC; text-shadow: 0 0 14px rgba(0,237,204,0.85); }
/* Quarter grid assignment rows inside columns — compact but spacious */
.ac-q-list .ac-as-row { padding: .35rem .4rem; gap: .4rem; }
.ac-q-list .ac-as-name { font-size: .7rem; }
.ac-q-list .ac-as-meta { font-size: .5rem; }
.ac-q-list .ac-as-score { font-size: .66rem; }
.ac-q-list .ac-as-due { font-size: .52rem; }

/* ════════════════════════════════════════════════════════════════════════════
   ACADEMICS · PROGRESSIVE DISCLOSURE — centred floating menu → left-sidebar shift
   ════════════════════════════════════════════════════════════════════════════ */
#universe-workspace.ac-layout {
  display: block; position: relative; padding: 1.5rem 2rem; overflow: hidden;
}

/* Router — a centred, stacked floating-text menu by default */
#universe-workspace.ac-layout .ac-left-sidebar {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 6; display: flex; flex-direction: column; align-items: center;
  transition: top .7s cubic-bezier(.66,0,.2,1), left .7s cubic-bezier(.66,0,.2,1),
              transform .7s cubic-bezier(.66,0,.2,1);
}
#universe-workspace.ac-layout .ac-nav-router {
  display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
  border-bottom: none; padding: 0;
  transition: gap .45s ease;
}
#universe-workspace.ac-layout .ac-nav-tab {
  font-size: 1.5rem; letter-spacing: 3px; font-weight: 700; padding: 0; white-space: nowrap;
  color: rgba(255,255,255,0.62); background: none; border: none; cursor: pointer; font-family: inherit;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9);
  transition: color .25s, text-shadow .25s, opacity .25s, transform .25s, font-size .45s ease;
}
#universe-workspace.ac-layout .ac-nav-tab:hover { color: #fff; text-shadow: 0 0 18px rgba(0,237,204,.75); }

/* Expanded — the sidebar slides to a far-left vertical column */
#universe-workspace.ac-layout.ac-expanded .ac-left-sidebar {
  top: 1.5rem; left: 1.5rem; transform: none;
  align-items: flex-start; gap: .2rem;
  width: 12.5rem; height: calc(100% - 3rem);
  overflow-y: auto; scrollbar-width: none;
}
#universe-workspace.ac-layout.ac-expanded .ac-nav-router {
  align-items: flex-start; gap: .7rem;
}
#universe-workspace.ac-layout.ac-expanded .ac-nav-tab { font-size: .82rem; letter-spacing: 1.5px; opacity: .5; transform-origin: left center; }
#universe-workspace.ac-layout.ac-expanded .ac-nav-tab:hover { opacity: 1; color: #fff; }
#universe-workspace.ac-layout.ac-expanded .ac-nav-tab.active-tab {
  opacity: 1; color: #00EDCC; transform: scale(1.05);
  text-shadow: 0 0 20px rgba(0,237,204,.95), 0 0 8px rgba(0,207,255,.8);
}
/* Sidebar draft widget — sits below the nav when expanded */
.ac-sidebar-draft {
  display: none; flex-direction: column; gap: .45rem;
  width: 100%; padding: .6rem 1.4rem .4rem .4rem; margin-top: .3rem;
  border-top: 0.5px solid rgba(0,237,180,0.12);
}
.ac-sidebar-draft-head {
  font-size: .45rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(0,237,180,0.45); font-weight: 700; padding-bottom: .2rem;
}
#universe-workspace.ac-layout.ac-expanded .ac-sidebar-draft { display: flex; }
.ac-sidebar-draft .ac-draft-controls { gap: .3rem; }
.ac-sidebar-draft .ac-field { font-size: .56rem; padding: .35rem .5rem; }
.ac-sidebar-draft .ac-field-days { width: 3.2rem; }
.ac-sidebar-draft .ac-draft-body {
  min-height: 90px; max-height: 140px; font-size: .55rem; padding: .4rem .5rem;
  resize: none;
}
.ac-sidebar-draft .ac-draft-actions { gap: .3rem; }
.ac-sidebar-draft .ac-btn-cyan { font-size: .5rem; padding: .35rem .5rem; }
.ac-sidebar-draft .ac-ext-copy { font-size: .5rem; padding: .35rem .5rem; }

/* View stack — hidden until a title is chosen, then fills centre + right */
#universe-workspace.ac-layout .ac-view-stack {
  position: absolute; top: 1.5rem; right: 2rem; bottom: 1.5rem; left: 15rem;
  flex: none; opacity: 0; pointer-events: none;
  transition: opacity .55s ease .25s;
}
#universe-workspace.ac-layout.ac-expanded .ac-view-stack { opacity: 1; pointer-events: auto; }

/* GPA — massive top-centre HERO element inside the Aspen panel */
.ac-gpa-hero { flex: 0 0 auto; justify-content: center; gap: 3rem; padding: 0 0 1rem; }
.ac-gpa-hero .ac-gpa-mini { width: 150px; height: 150px; }
.ac-gpa-hero .ac-gpa-num  { font-size: 3rem; }

/* ── Academics · Aspen nested sub-navigation (accordion file-tree) ── */
.ac-sub-nav {
  display: flex; flex-direction: column; gap: .5rem;
  margin-left: 1.5rem; padding-left: .8rem;
  border-left: 0.5px solid rgba(255,255,255,0.2);
  max-height: 0; opacity: 0; overflow: hidden; pointer-events: none;
  transition: max-height .5s cubic-bezier(.66,0,.2,1), opacity .35s ease;
}
#universe-workspace.ac-layout:not(.ac-expanded) .ac-sub-nav { display: none; }  /* hidden in the centred menu */
#universe-workspace.ac-layout.ac-expanded .ac-sub-nav.open { max-height: 6rem; opacity: 1; pointer-events: auto; }
.ac-sub-tab {
  background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; padding: 0;
  font-size: .68rem; letter-spacing: 1px; color: rgba(255,255,255,0.5); white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9);
  transition: color .2s, text-shadow .2s, opacity .2s;
}
.ac-sub-tab:hover { color: #fff; opacity: 1; }
.ac-sub-tab.active-sub { opacity: 1; color: #00EDCC; text-shadow: 0 0 16px rgba(0,237,204,.9), 0 0 6px rgba(0,255,136,.7); }

/* ── Academics · Aspen A/B view swap ── */
.ac-aspen-panel { flex: 1; min-height: 0; position: relative; }
.ac-aspen-view  { display: none; height: 100%; flex-direction: column; gap: 1rem; }
.ac-aspen-view.active-sub { display: flex; animation: acSubFade .45s ease; }
@keyframes acSubFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ac-quarter-section { flex: 2; min-height: 0; display: flex; flex-direction: column; gap: .5rem; }
.ac-assign-flat { flex: 0 0 auto; max-height: 38%; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.ac-assign-flat::-webkit-scrollbar { display: none; }

/* ── Academics · GPA privacy toggle (Show / Hide) ── */
.ac-gpa-hero-wrap { display: flex; flex-direction: column; align-items: center; gap: .7rem; flex: 0 0 auto; }
.ac-gpa-hero .ac-gpa-num { transition: filter .3s ease; }
.ac-gpa-hero.gpa-hidden .ac-gpa-num { filter: blur(9px); }
.ac-gpa-toggle {
  background: none; border: 1px solid rgba(0,237,204,.45); border-radius: 6px;
  color: #00EDCC; font-family: inherit; font-size: .72rem; font-weight: 700; letter-spacing: 2px;
  padding: .4rem 1.3rem; cursor: pointer; text-shadow: 0 0 10px rgba(0,237,204,.6);
  transition: background .2s, box-shadow .2s;
}
.ac-gpa-toggle:hover { background: rgba(0,237,204,.12); box-shadow: 0 0 16px -2px rgba(0,237,204,.55); }

/* ════════════════════════════════════════════════════════════════════════════
   ACADEMICS · Overview & Grades — nav → top header, GPA → right, grades expand down
   (overrides the earlier left-sidebar progressive-disclosure rules)
   ════════════════════════════════════════════════════════════════════════════ */

/* 1 · NAV — left vertical sidebar → top horizontal header bar */
#universe-workspace.ac-layout.ac-expanded .ac-left-sidebar {
  top: 1.1rem; left: 2rem; right: 2rem; transform: none;
  width: auto; height: auto; overflow: visible;
  flex-direction: row; align-items: center; justify-content: center; gap: 1.6rem;
}
#universe-workspace.ac-layout.ac-expanded .ac-nav-router {
  flex-direction: row; align-items: center; justify-content: center; gap: 1.6rem; flex-wrap: wrap;
}
/* Aspen accordion — vertical drop-down → inline horizontal reveal (still smooth) */
#universe-workspace.ac-layout.ac-expanded .ac-sub-nav {
  flex-direction: row; align-items: center; gap: .9rem;
  margin: 0; padding-left: .9rem; border-left: 0.5px solid rgba(255,255,255,0.2);
  max-height: none; max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width .5s cubic-bezier(.66,0,.2,1), opacity .35s ease;
}
#universe-workspace.ac-layout.ac-expanded .ac-sub-nav.open { max-width: 26rem; opacity: 1; }

/* 2 · VIEW STACK — clears the TOP header instead of the old left sidebar */
#universe-workspace.ac-layout.ac-expanded .ac-view-stack {
  top: 4.4rem; left: 2rem; right: 2rem; bottom: 1.4rem;
}

/* 3 · OVERVIEW & GRADES body — grades LEFT (tall) | GPA + projection + draft RIGHT */
.ac-aspen-view[data-sub="grades"] .ac-aspen-row {
  max-height: none; flex: 1; min-height: 0; align-items: stretch;
}
.ac-aspen-view[data-sub="grades"] .ac-aspen-row > .ac-view-col { min-height: 0; }
.ac-grades-col { flex: 1.15; overflow: hidden; }
.ac-grades-col .ac-gm-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ac-grades-col #ac-course-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.ac-grades-col #ac-course-list::-webkit-scrollbar { display: none; }

/* GPA spine — the 3 rings live in their OWN middle column between the grades
   table and the right panels, stacked VERTICALLY in a tight cluster so all
   three are visible at once with zero scrolling. Divider line + its padding
   removed on this column ("squished") to reclaim the space. */
.ac-aspen-view[data-sub="grades"] .ac-view-col.ac-gpa-col {
  flex: 0 0 11.5rem; align-self: stretch; display: flex; min-height: 0;
  border-left: none; padding-left: 0;
}
.ac-aspen-view[data-sub="grades"] .ac-gpa-hero-wrap {
  flex: 1; align-items: center; justify-content: flex-start; gap: .9rem;
  padding-top: .4rem;
}
.ac-aspen-view[data-sub="grades"] .ac-gpa-hero {
  flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 1.1rem; padding: 0;
}
.ac-aspen-view[data-sub="grades"] .ac-gpa-hero .ac-gpa-mini { width: 118px; height: 118px; }
.ac-aspen-view[data-sub="grades"] .ac-gpa-hero .ac-gpa-num  { font-size: 2.2rem; }

/* ════════════════════════════════════════════════════════════════════════════
   REMINDERS · consolidated single page — one scannable 3-column grid (no sub-tabs)
   ════════════════════════════════════════════════════════════════════════════ */
#universe-workspace.rem-consolidated-layout {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem;
  padding: 1.6rem 2.6rem; align-content: start; overflow: hidden;
  text-shadow: 0 2px 8px rgba(0,0,0,0.95), 0 0 4px rgba(255,255,255,0.05);
}
.rem-c-col { display: flex; flex-direction: column; gap: .7rem; min-height: 0; height: 100%; overflow-y: auto; scrollbar-width: none; }
.rem-c-col::-webkit-scrollbar { display: none; }
.rem-c-list, .rem-c-alerts { display: flex; flex-direction: column; gap: .5rem; }

/* Column 1 — active-tasks checklist */
.rem-c-task { display: flex; align-items: center; gap: .65rem; cursor: pointer; padding: .5rem .15rem; border-bottom: 0.5px solid rgba(255,255,255,0.07); }
.rem-c-task input { position: absolute; opacity: 0; pointer-events: none; }
.rem-c-box { width: 15px; height: 15px; flex-shrink: 0; border: 1.5px solid var(--rc, #ff2d6f); border-radius: 3px; position: relative; transition: background .15s ease; box-shadow: 0 0 8px -2px var(--rc, #ff2d6f); }
.rem-c-task.done .rem-c-box { background: var(--rc, #ff2d6f); }
.rem-c-task.done .rem-c-box::after { content: '\2713'; position: absolute; left: 2px; top: -2px; font-size: 12px; font-weight: 700; color: #06030a; }
.rem-c-task-body { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.rem-c-task-name { font-size: .82rem; color: #e8e2f0; letter-spacing: .2px; }
.rem-c-task-origin { font-size: .56rem; letter-spacing: .4px; color: #9b8fb0; text-transform: uppercase; }
.rem-c-task.done .rem-c-task-name { text-decoration: line-through; color: #6f6486; }

/* Column 2 — system alerts & calendar notifications */
.rem-c-alert { display: flex; align-items: center; gap: .6rem; font-size: .74rem; color: #cbbfe0; padding: .55rem .65rem; border-left: 2px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.025); border-radius: 0 6px 6px 0; }
.rem-c-alert-ico { font-size: .95rem; line-height: 1; }
.rem-c-alert.crit { border-left-color: #ff3b5c; color: #ffb3bf; }
.rem-c-alert.med  { border-left-color: #ff8a00; color: #ffd6a0; }
.rem-c-alert.ok   { border-left-color: #00ff95; color: #aeffd3; }

/* Column 3 — upcoming deadlines */
.rem-c-dl { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .5rem .6rem; border-left: 3px solid var(--rc, #ff2d6f); background: rgba(255,255,255,0.022); border-radius: 0 6px 6px 0; }
.rem-c-dl-name { font-size: .76rem; color: #e0d8ee; }
.rem-c-dl-due  { font-size: .62rem; font-weight: 700; letter-spacing: 1px; color: #9b8fb0; white-space: nowrap; }
.rem-c-dl-due.soon { color: #ff5c7a; }

@media (max-width: 820px) {
  #universe-workspace.rem-consolidated-layout { grid-template-columns: 1fr; gap: 1.4rem; overflow-y: auto; }
}

/* Reminders — readability bump to match the dashboard-wide legibility pass
   (larger body text, muted #64748b secondary states, spacing over borders) */
.rem-c-task { padding: .65rem .15rem; border-bottom: none; }
.rem-c-task-name { font-size: 1rem; }
.rem-c-task-origin { font-size: .68rem; color: #64748b; }
.rem-c-task.done .rem-c-task-name { color: #64748b; }
.rem-c-alert { font-size: .92rem; padding: .65rem .75rem; }
.rem-c-dl-name { font-size: .95rem; }
.rem-c-dl-due { font-size: .74rem; color: #64748b; }
.rem-section-title { font-size: .95rem; }

/* ════════════════════════════════════════════════════════════════════════════
   ACADEMICS · Assignments — temporal header + 3-column command grid
   ════════════════════════════════════════════════════════════════════════════ */
.ac-as-datehead {
  text-align: center; font-size: 1.02rem; font-weight: 600; letter-spacing: 1.5px;
  color: #cfeaff; padding: .1rem 0 .7rem;
  text-shadow: 0 0 14px rgba(0,207,255,0.55), 0 2px 10px rgba(0,0,0,0.9);
}
.ac-as-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem;
  flex: 1; min-height: 0; height: 100%;
}
.ac-as-col { display: flex; flex-direction: column; min-height: 0; gap: .55rem; }
.ac-as-col-head {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding-bottom: .45rem; border-bottom: 0.5px solid rgba(255,255,255,0.14);
}
.ac-as-col-title { font-size: .72rem; font-weight: 700; letter-spacing: 2.5px; color: #8fe9ff; text-shadow: 0 0 10px rgba(0,207,255,0.5); }
.ac-as-count { font-size: .7rem; font-weight: 700; color: #ff6b86; min-width: 1.2rem; text-align: center; text-shadow: 0 0 9px rgba(255,80,110,0.6); }
.ac-as-stream { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: .35rem; padding-right: .2rem; }
.ac-as-stream::-webkit-scrollbar { display: none; }

/* Quarter selector → minimal dropdown (styled as .ac-q-dropdown in the readability pass below) */
.ac-as-metric { display: flex; justify-content: space-between; font-size: .64rem; font-weight: 600; letter-spacing: 1px; color: #7fd9c4; padding: .1rem .15rem .25rem; }

/* Class selector (Column 3) */
.ac-as-classsel { font-size: .66rem; padding: .2rem .4rem; max-width: 9rem; }

/* Missing / Overdue rows with live countdown (Column 2) */
.ac-miss-row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .5rem .55rem; border-left: 2px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.022); border-radius: 0 5px 5px 0;
}
.ac-miss-row.overdue { border-left-color: #ff3b5c; background: rgba(255,40,70,0.06); }
.ac-miss-row.due     { border-left-color: #ffb000; }
.ac-miss-count { font-size: .62rem; font-weight: 700; letter-spacing: .4px; white-space: nowrap; color: #ffd27f; text-shadow: 0 0 8px rgba(255,180,0,0.5); }
.ac-miss-count.overdue { color: #ff6b86; text-shadow: 0 0 9px rgba(255,60,90,0.6); }

@media (max-width: 900px) {
  .ac-as-grid { grid-template-columns: 1fr; overflow-y: auto; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ACADEMICS · readability + declutter pass
   Larger type · glass columns · generous padding · muted secondary text · borderless.
   Scoped to the Academics terminal (NOT the html root) so the rest of the OS keeps
   its sizing and nothing else reflows.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Header hierarchy scales up above the new body text ── */
.ac-as-datehead  { font-size: 1.3rem;  letter-spacing: 1px; padding-bottom: 1.1rem; }
.ac-as-col-title { font-size: 0.95rem; letter-spacing: 2px; }
.ac-as-count     { font-size: 0.95rem; }
.ac-as-metric    { font-size: 0.82rem; }

/* ── 2 · Unified semi-transparent dark-glass columns · subtle outer border ── */
.ac-as-grid { gap: 1.5rem; }
.ac-as-col {
  background: rgba(12, 18, 32, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 1.4rem;                                  /* ~22px — spacing replaces borders */
  gap: 1rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ac-as-col-head { border-bottom: none; padding-bottom: 0.1rem; }  /* drop the divider line */
.ac-as-stream   { gap: 0.7rem; }

/* ── 3 · Larger, legible body text + muted secondary states (#64748b) ── */
.ac-as-stream .ac-as-name,
.ac-miss-row  .ac-as-name   { font-size: 1.02rem; line-height: 1.3; white-space: normal; color: #e8eefc; }
.ac-as-stream .ac-as-meta,
.ac-miss-row  .ac-as-meta   { font-size: 0.8rem; letter-spacing: 0.02em; text-transform: none; color: #64748b; }
.ac-as-stream .ac-as-score  { font-size: 0.88rem; }
.ac-as-stream .ac-as-due    { font-size: 0.8rem; color: #64748b; }    /* neutral/past dates dim by default */
.ac-as-stream .ac-empty-row { font-size: 0.92rem; color: #64748b; padding: 0.6rem 0.1rem; }
.ac-as-stream .ac-as-row    { border: none; background: none; padding: 0.45rem 0.1rem; }  /* no micro-borders */

/* ── 4 · Center column — strip the row chrome, keep the countdown accent ── */
.ac-miss-row           { background: none; border-left: none; padding: 0.55rem 0.1rem; gap: 0.8rem; }
.ac-miss-count         { font-size: 0.84rem; }
.ac-miss-count.due     { color: #ffb000; text-shadow: 0 0 8px rgba(255, 176, 0, 0.45); }
.ac-miss-count.overdue { color: #ff5c7a; text-shadow: 0 0 9px rgba(255, 92, 122, 0.5); }

/* ── 5 · Left column — minimal quarter dropdown ── */
.ac-q-dropdown {
  font-family: inherit; font-size: 0.84rem; font-weight: 600; letter-spacing: 0.4px;
  color: #cfe6ff; background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px;
  padding: 0.4rem 0.65rem; cursor: pointer; outline: none; transition: border-color 0.15s ease;
}
.ac-q-dropdown:hover  { border-color: rgba(0, 207, 255, 0.4); }
.ac-q-dropdown:focus  { border-color: rgba(0, 207, 255, 0.6); }
.ac-q-dropdown option { background: #0a1020; color: #cfe6ff; }

/* ── 6 · Grades matrix (table cells) — bigger text, drop the micro grid lines ── */
#universe-workspace.ac-layout .ac-gm-row { border-bottom: none; padding: 0.7rem 1rem; }
.ac-gm-course { font-size: 0.95rem; }
.ac-gm-pct    { font-size: 0.9rem;  }
.ac-gm-letter { font-size: 0.95rem; }

/* ════════════════════════════════════════════════════════════════════════════
   ACADEMICS · VERTICAL ACCORDION expansion (replaces the horizontal sidebar-shift)
   The nav becomes a normal-flow top command bar; clicking a tab drops the content
   panel straight DOWN via an animated grid-template-rows transition (0fr → 1fr) —
   nothing slides sideways and the dashboard's horizontal flex/grid is untouched.
   ════════════════════════════════════════════════════════════════════════════ */
#universe-workspace.ac-layout {
  display: grid;
  grid-template-columns: 1fr;                    /* kill the legacy 1fr 1.3fr 1fr columns (line ~433) —
                                                    without this the nav + content land SIDE-BY-SIDE */
  grid-template-rows: auto 0fr;                  /* row 1 = nav bar · row 2 = collapsed content */
  align-content: start; row-gap: 1rem;
  transition: grid-template-rows .6s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
}
#universe-workspace.ac-layout.ac-expanded {
  grid-template-rows: auto 1fr;                  /* content accordions down to fill */
}

/* Nav → normal-flow top command bar (no absolute centering, no side-shift) */
#universe-workspace.ac-layout .ac-left-sidebar {
  position: static; transform: none; z-index: auto;
  width: auto; height: auto; overflow: visible;
  display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 1.5rem;
  transition: none;
}
#universe-workspace.ac-layout .ac-nav-router {
  flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem;
}
#universe-workspace.ac-layout .ac-nav-tab,
#universe-workspace.ac-layout.ac-expanded .ac-nav-tab {
  font-size: 1.02rem; letter-spacing: 2px; opacity: .55; transform: none;
}
#universe-workspace.ac-layout .ac-nav-tab:hover { opacity: 1; }
#universe-workspace.ac-layout .ac-nav-tab.active-tab,
#universe-workspace.ac-layout.ac-expanded .ac-nav-tab.active-tab {
  opacity: 1; color: #00EDCC;
  text-shadow: 0 0 20px rgba(0,237,204,.95), 0 0 8px rgba(0,207,255,.8);
}

/* View stack → row 2: the accordion content panel (drops down, scrolls internally) */
#universe-workspace.ac-layout .ac-view-stack,
#universe-workspace.ac-layout.ac-expanded .ac-view-stack {
  position: static; inset: auto;
  min-height: 0; overflow: hidden;
  opacity: 0; transition: opacity .45s ease .15s;
}
#universe-workspace.ac-layout.ac-expanded .ac-view-stack { opacity: 1; }

/* Aspen sub-nav stays inline in the top bar (a touch wider for the two labels) */
#universe-workspace.ac-layout.ac-expanded .ac-sub-nav.open { max-width: 30rem; opacity: 1; }

/* Merged OVERALL PERFORMANCE block — sits under the grades in the LEFT column */
.ac-grades-col .ac-perf-header      { margin-top: 1rem; }
.ac-grades-col .ac-perf-placeholder { margin-top: .6rem; min-height: 5rem; }

/* ════════════════════════════════════════════════════════════════════════════
   GLOBAL HUB · custom cursor · Earth-time pin · Student Essentials · Weather/News
   ════════════════════════════════════════════════════════════════════════════ */

/* ── (Req 1) Custom Vextal cursor — hidden until the cinematic settles ── */
#vextal-cursor { position: fixed; inset: 0; pointer-events: none; z-index: 100050; opacity: 0; transition: opacity .6s ease; }
body.hud-active #vextal-cursor, body.globe-active #vextal-cursor { opacity: 1; }
#vextal-cursor .vc-dot, #vextal-cursor .vc-ring { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; will-change: transform; }
#vextal-cursor .vc-dot  { width: 7px;  height: 7px;  background: #00EDCC; box-shadow: 0 0 10px 2px rgba(0,237,204,.9); }
#vextal-cursor .vc-ring { width: 30px; height: 30px; border: 1.5px solid rgba(168,85,247,.85);
  box-shadow: 0 0 16px rgba(168,85,247,.5), inset 0 0 10px rgba(0,237,204,.3); }
/* Once inside the environment the native cursor is hidden — the custom one takes over */
body.hud-active, body.globe-active,
body.hud-active *, body.globe-active * { cursor: none !important; }

/* ABSOLUTE CONCEALMENT during the cinematic intro — applied the instant
   "Enter Environment" is clicked, lifted when the dashboard settles. */
.cinematic-running, .cinematic-running * {
  cursor: none !important;
  pointer-events: none !important;
}

/* GLOBE LOCK — a hidden dashboard must never be clickable underneath the hub */
#hud-dashboard:not(.hud-show) .hud-card { pointer-events: none !important; }

/* ACADEMICS — default scale 95% so the projection line never clips at 100% */
#universe-workspace.ac-layout { zoom: 0.95; }

/* ── (Req 2) Earth-time pin — glowing clock above the Earth crest ── */
#earth-time {
  position: fixed; left: 50%; bottom: 23vh; transform: translateX(-50%);
  z-index: 60; opacity: 0; pointer-events: none; transition: opacity .6s ease;
  font-family: 'Oxanium', sans-serif; font-size: 1.3rem; font-weight: 700; letter-spacing: 3px;
  color: #dffaff; text-shadow: 0 0 18px rgba(0,207,255,.8), 0 0 40px rgba(0,207,255,.4);
}
body.hud-active #earth-time { opacity: 1; }
#earth-time .et-zone { color: #8fe9ff; font-weight: 600; }

/* ── (Req 4) Student Essentials dock ── */
#student-essentials {
  position: fixed; right: 1.6rem; bottom: 1.4rem; z-index: 60;
  display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border-radius: 14px;
  background: rgba(10,16,30,.55); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .5s ease, transform .5s ease;
}
body.hud-active #student-essentials { opacity: 1; transform: none; pointer-events: auto; }
.se-title { font-size: .54rem; letter-spacing: 2px; color: #7fd9c4; writing-mode: vertical-rl; transform: rotate(180deg); opacity: .65; }
.se-item {
  position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 10px; text-decoration: none; background: rgba(255,255,255,.04);
  border: 1px solid var(--se, #00EDCC); transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.se-ico { font-family: 'Oxanium', sans-serif; font-size: .9rem; font-weight: 800; color: var(--se, #00EDCC); }
.se-item:hover { transform: translateY(-4px); background: rgba(255,255,255,.09); box-shadow: 0 0 16px -1px var(--se, #00EDCC); }
.se-tip {
  position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: .58rem; letter-spacing: 1px; color: #dffaff; background: rgba(8,12,24,.92);
  padding: .2rem .45rem; border-radius: 5px; opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.se-item:hover .se-tip { opacity: 1; }

/* ── (Req 3) Global Hub — weather + news side panels ── */
#global-hub { position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
body.globe-active #global-hub { opacity: 1; }
body.globe-active #global-hub .gh-panel, body.globe-active #global-hub .gh-center { pointer-events: auto; }
.gh-panel {
  position: fixed; top: 50%; transform: translateY(-50%); width: 270px; padding: 1.3rem;
  background: rgba(10,16,30,.5); border: 1px solid rgba(255,255,255,.09); border-radius: 14px;
  backdrop-filter: blur(9px); text-shadow: 0 2px 8px rgba(0,0,0,.9);
}
.gh-weather { left: 2.5vw; }
.gh-news    { right: 2.5vw; }
.gh-head { font-size: .72rem; letter-spacing: 3px; color: #8fe9ff; margin-bottom: 1rem; text-shadow: 0 0 12px rgba(0,207,255,.6); }
.gh-temp { font-size: 2.6rem; font-weight: 800; color: #dffaff; line-height: 1; margin-bottom: .8rem; }
.gh-row  { display: flex; justify-content: space-between; font-size: .82rem; color: #cbd9ee; padding: .35rem 0; border-bottom: .5px solid rgba(255,255,255,.06); }
.gh-rec  { margin-top: 1rem; font-size: .8rem; line-height: 1.5; color: #a9e9d8; border-left: 2px solid #00EDCC; padding-left: .7rem; }
.gh-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.gh-feed li { display: flex; gap: .6rem; align-items: flex-start; font-size: .82rem; line-height: 1.4; color: #d8e4f5; }
.gh-dot { flex-shrink: 0; width: 7px; height: 7px; margin-top: .35rem; border-radius: 50%; background: #a855f7; box-shadow: 0 0 8px rgba(168,85,247,.8); }
.gh-center { position: fixed; left: 50%; bottom: 6vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; }
#gh-return {
  font-family: 'Oxanium', sans-serif; font-size: .8rem; font-weight: 700; letter-spacing: 2px; color: #00EDCC;
  background: rgba(0,237,204,.08); border: 1px solid rgba(0,237,204,.5); border-radius: 8px; padding: .55rem 1.4rem;
  text-shadow: 0 0 10px rgba(0,237,204,.6); transition: background .2s ease, box-shadow .2s ease;
}
#gh-return:hover { background: rgba(0,237,204,.18); box-shadow: 0 0 18px -2px rgba(0,237,204,.6); }
.gh-hint { font-size: .62rem; letter-spacing: 2px; color: #8fa5c0; }

@media (max-width: 820px) {
  .gh-panel { width: 42vw; padding: 1rem; }
  #earth-time { bottom: 18vh; font-size: 1.05rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ACADEMICS · OVERLAP HOTFIX — collapse/overlap after the 3-column + 14pt pass
   (1) Assignments grid: hard 300px column floor + horizontal scroll escape hatch;
       also drops the flex:1 + height:100% double-sizing that overflowed the panel
       by the date-header's height.
   (2) Accordion: content height goes natural (auto) and the view stack scrolls
       vertically, so tall content pushes down instead of overflowing its bounds.
   (3) Grades table: locked to 100% of the LEFT column; columns can't bleed across.
   ════════════════════════════════════════════════════════════════════════════ */

/* 1 · Assignments 3-column grid */
.ac-as-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  overflow-x: auto;
  height: auto;                      /* was flex:1 + height:100% — double-sized */
  flex: none;
  min-height: 0;
}
.ac-as-col { min-width: 0; }

/* 2 · Vertical accordion — natural height + internal vertical scroll */
#universe-workspace.ac-layout .ac-view-stack,
#universe-workspace.ac-layout.ac-expanded .ac-view-stack {
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
}
#universe-workspace.ac-layout .ac-view-stack::-webkit-scrollbar { display: none; }
.ac-view.active-view  { height: auto !important; max-height: 2000px; min-height: 0; }
.ac-aspen-panel       { height: auto; }
.ac-aspen-view.active-sub { height: auto; min-height: 0; }
.ac-aspen-view[data-sub="grades"] .ac-aspen-row { flex: none; min-height: 0; align-items: flex-start; }

/* 3 · Grades table — full width of its left container, no bleed into the right */
.ac-aspen-view[data-sub="grades"] .ac-aspen-row { flex-wrap: nowrap; }
.ac-grades-col  { width: 100%; min-width: 0; float: none; overflow: visible; }
.ac-grades-col .ac-gm-wrap { width: 100%; flex: none; }
.ac-grades-col #ac-course-list { overflow-y: visible; flex: none; }   /* rows render full height; the stack scrolls */
.ac-right-col   { min-width: 0; }

/* 4 · Course ↔ grade spacing — kill the 1fr stretch that shoved the % to the far
   edge; one shared fixed template (header + rows) puts the grade right beside the
   course name and keeps the columns vertically aligned. */
.ac-gm-header-row,
.ac-gm-row {
  grid-template-columns: 15rem 4.5rem 2.5rem;
  gap: 20px;
  justify-content: start;
}

/* 5 · Character-perfect vertical locking — tabular (equal-width) digits so every
   decimal point stacks dead straight, and letters LEFT-anchored so "A" and "A-"
   start on the same column line instead of right-shifting around the minus. */
.ac-gm-pct    { font-variant-numeric: tabular-nums; }
.ac-gm-letter { font-variant-numeric: tabular-nums; text-align: left; }
.ac-gm-header-row span:last-child { text-align: left; }

/* ── Earth-time pin — high-visibility white + Vextal-cyan glow, clickable 12/24h ── */
#earth-time {
  color: #ffffff;
  text-shadow: 0 0 15px rgba(6, 182, 212, 0.9), 0 0 30px rgba(6, 182, 212, 0.6);
  cursor: pointer;
}
body.hud-active #earth-time { pointer-events: auto; }   /* clickable only while visible */
#earth-time .et-zone { color: #ffffff; opacity: .75; }

/* ── Global Hub entry — modules drop out instantly instead of the 1s entrance fade ── */
#hud-dashboard.hud-quick { transition: opacity .25s ease, transform .25s ease; }

/* ════════════════════════════════════════════════════════════════════════════
   ENTER WEATHER · cinematic sky + boxless floating data + particle FX layers
   ════════════════════════════════════════════════════════════════════════════ */

/* Atmospheric sky — cross-fades in over the dimming starfield (canvas sits below) */
#sky-layer {
  position: fixed; inset: 0; z-index: 51; pointer-events: none;
  opacity: 0; transition: opacity 1.4s ease;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(64,150,220,0.50) 0%, rgba(28,80,140,0.35) 38%, rgba(8,24,60,0.25) 64%, rgba(2,6,20,0) 100%),
    linear-gradient(to top, rgba(20,60,110,0.45) 0%, rgba(8,20,50,0.30) 45%, rgba(2,4,16,0.08) 100%);
}
body.globe-active #sky-layer { opacity: 1; }

/* Particle FX canvas — rain / snow / wind, above the sky, below the floating text */
#weather-fx {
  position: fixed; inset: 0; z-index: 53; pointer-events: none;
  opacity: 0; transition: opacity .9s ease;
}
body.globe-active #weather-fx { opacity: 1; }

/* BOXLESS floating data — strip every card/border/glass; text sits on the sky */
body.globe-active .gh-panel {
  background: none; border: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-radius: 0; width: 330px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.95), 0 0 30px rgba(0,0,0,0.5);
}
/* High-visibility terminal type scale */
.gh-head { font-size: .95rem;  letter-spacing: 4px; }
.gh-temp { font-size: 4.2rem;  text-shadow: 0 0 24px rgba(6,182,212,0.55), 0 2px 14px rgba(0,0,0,0.95); }
.gh-row  { font-size: 1.08rem; border-bottom: none; padding: .42rem 0; }
.gh-rec  { font-size: 1.05rem; line-height: 1.55; border-left-width: 3px; }
.gh-feed li { font-size: 1.02rem; line-height: 1.45; }
.gh-feed { gap: 1rem; }
/* terminal caret feel while values print */
.gh-rec:empty::after, .gh-headline:empty::after { content: '▌'; opacity: .7; animation: ghCaret 0.7s steps(2) infinite; }
@keyframes ghCaret { 50% { opacity: 0; } }

/* ════════════════════════════════════════════════════════════════════════════
   LAUNCH GATE · optional Google + Aspen account link on the init screen
   ════════════════════════════════════════════════════════════════════════════ */
/* Google sign-in lives in the onboarding cascade (old "Preparing…" slot) —
   the Aspen intake was removed from the landing screen (it lives in Academics). */
#ob-gate {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  font-family: 'Oxanium', sans-serif;
}
#google-signin-slot { min-height: 32px; display: flex; justify-content: center; align-items: center; }
/* active-session email confirmation — injected into the slot the button vacated */
.lg-active-email {
  font-family: 'Oxanium', sans-serif; font-size: .82rem; font-weight: 600; letter-spacing: .5px;
  color: #7fe9c9; text-shadow: 0 0 1px #fff, 0 0 12px rgba(20,232,162,.5); word-break: break-all;
}
.lg-active-email::before { content: '✔ '; color: #14e8a2; }
.lg-status { min-height: 1rem; font-size: .66rem; letter-spacing: .5px; color: rgba(255,255,255,.45); }
.lg-status.ok  { color: #7fe9c9; }
.lg-status.err { color: #ff8097; }

/* ════════════════════════════════════════════════════════════════════════════
   ATHLETICS · consolidated single-flow (Academics blueprint — no inner tabs)
   ════════════════════════════════════════════════════════════════════════════ */
#universe-workspace.ath-consolidated-layout {
  display: block; overflow-y: auto; overflow-x: hidden;
  padding: 1.4rem 2.4rem; scrollbar-width: none;
}
#universe-workspace.ath-consolidated-layout::-webkit-scrollbar { display: none; }
.ath-c-section { padding: 1.4rem 0 1.8rem; }
.ath-c-section + .ath-c-section { margin-top: .6rem; }
.ath-c-head {
  font-size: .95rem; font-weight: 700; letter-spacing: 3.5px; color: #8fe9ff;
  text-shadow: 0 0 12px rgba(0,207,255,.55), 0 2px 8px rgba(0,0,0,.9);
  padding-bottom: 1rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   SAFE ICONS · left utility dock — exact mirror of the right Essentials dock
   ════════════════════════════════════════════════════════════════════════════ */
#safe-dock {
  position: fixed; left: 1.6rem; bottom: 1.4rem; z-index: 60;
  display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border-radius: 14px;
  background: rgba(10,16,30,.55); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .5s ease, transform .5s ease;
}
body.hud-active #safe-dock { opacity: 1; transform: none; pointer-events: auto; }
.sd-title { font-size: .54rem; letter-spacing: 2px; color: #7fd9c4; writing-mode: vertical-rl; transform: rotate(180deg); opacity: .65; }
.sd-item {
  position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 10px; background: rgba(255,255,255,.04); cursor: pointer;
  border: 1px solid var(--sd, #00EDCC); transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.sd-item svg { width: 19px; height: 19px; stroke: var(--sd, #00EDCC); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sd-item:hover { transform: translateY(-4px); background: rgba(255,255,255,.09); box-shadow: 0 0 16px -1px var(--sd, #00EDCC); }
.sd-item.engaged { background: rgba(255,255,255,.12); box-shadow: 0 0 14px -1px var(--sd, #00EDCC); }
.sd-tip {
  position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: .58rem; letter-spacing: 1px; color: #dffaff; background: rgba(8,12,24,.92);
  padding: .2rem .45rem; border-radius: 5px; opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.sd-item:hover .sd-tip { opacity: 1; }
.sd-dot { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: #475569; box-shadow: 0 0 6px rgba(0,0,0,.6); }
.sd-dot.ok   { background: #34d77a; box-shadow: 0 0 8px rgba(52,215,122,.9); }
.sd-dot.warn { background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,.9); }
.sd-dot.err  { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,.9); }

/* ════════════════════════════════════════════════════════════════════════════
   ACADEMICS · SCHEDULE — live Aspen schedule matrix + next-year requests
   ════════════════════════════════════════════════════════════════════════════ */
.ac-sched-gap { margin-top: 1.4rem; }
.ac-sched-grid { display: flex; flex-direction: column; gap: .15rem; padding-top: .5rem; }
.ac-sched-row {
  display: grid; grid-template-columns: 5rem 7rem minmax(0, 1.4fr) minmax(0, 1fr) 5rem;
  gap: 20px; align-items: center; padding: .55rem .4rem;
  font-size: .95rem; color: #e8eefc;
}
.ac-sched-row.three { grid-template-columns: 7rem minmax(0, 1.4fr) minmax(0, 1fr); }
.ac-sched-row.ac-sched-head {
  font-size: .62rem; font-weight: 700; letter-spacing: 2px; color: #64748b; padding-bottom: .2rem;
}
.ac-sched-period { font-variant-numeric: tabular-nums; font-weight: 700; color: #8fe9ff; text-shadow: 0 0 10px rgba(0,207,255,.45); }
.ac-sched-course { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-sched-muted  { color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ════════════════════════════════════════════════════════════════════════════
   FINANCES · PLAID BANK LINK — sandbox-first flow, HUD-native rendering
   ════════════════════════════════════════════════════════════════════════════ */
.fin-plaid { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.2rem; }
.fin-plaid-btn {
  font-family: inherit; font-size: .78rem; font-weight: 700; letter-spacing: 2px;
  color: #05121f; background: linear-gradient(90deg, #00edcc, #00cfff);
  border: none; border-radius: 9px; padding: .65rem 1.1rem; cursor: pointer;
  box-shadow: 0 0 16px -3px rgba(0, 237, 204, .8);
  transition: filter .15s ease, transform .15s ease;
}
.fin-plaid-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.fin-plaid-btn:disabled { filter: grayscale(.6) brightness(.7); cursor: default; transform: none; }
.fin-plaid-status { min-height: .9rem; font-size: .68rem; letter-spacing: .4px; color: #8fa5c0; }
.fin-plaid-status.ok  { color: #7fe9c9; }
.fin-plaid-status.err { color: #ff8097; }
.fin-plaid-acct {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .55rem .2rem; border-bottom: .5px solid rgba(255, 255, 255, .07);
}
.fin-pa-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.fin-pa-name { font-size: .85rem; color: #e8eefc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-pa-type { font-size: .56rem; letter-spacing: 1.5px; color: #64748b; }
.fin-pa-bal  { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; }
.fin-pa-cur  { font-size: .92rem; font-weight: 700; color: #00edcc; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(0, 237, 204, .45); }
.fin-pa-avail { font-size: .6rem; color: #64748b; font-variant-numeric: tabular-nums; }

/* ── Aspen LIVE-SYNC loading state — transparent glass, 15-45s expectation set ── */
.ac-sync-progress {
  display: flex; flex-direction: column; gap: .65rem;
  margin: .6rem 0 .2rem; padding: 1rem 1.2rem; border-radius: 10px;
  background: rgba(10, 16, 30, .5); border: 1px solid rgba(6, 182, 212, .25);
  backdrop-filter: blur(8px);
}
.ac-sync-progress[hidden] { display: none; }
.ac-sp-msg { font-size: .92rem; color: #dffaff; line-height: 1.45; text-shadow: 0 2px 8px rgba(0,0,0,.9); }
.ac-sp-msg b { color: #8fe9ff; }
.ac-sp-track { height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.ac-sp-bar {
  height: 100%; width: 2%; border-radius: 999px;
  background: linear-gradient(90deg, #06b6d4, #a855f7);
  box-shadow: 0 0 12px rgba(6, 182, 212, .7);
}
/* fills fast early, slows toward 93% across the worst-case 45s window;
   the panel is hidden on completion, so it never visibly stalls */
.ac-sync-progress.running .ac-sp-bar { animation: acSyncFill 45s cubic-bezier(.2,.6,.3,1) forwards; }
@keyframes acSyncFill { 0% { width: 2%; } 15% { width: 38%; } 50% { width: 72%; } 100% { width: 93%; } }
.ac-sp-sub { font-size: .68rem; color: #64748b; letter-spacing: .3px; }

/* Loading / empty pulse — clean monospace heartbeat, never a broken layout */
.ac-sched-loading {
  font-family: 'Courier New', Courier, monospace; font-size: .82rem; letter-spacing: 3px;
  color: #7fd9c4; padding: 1.1rem .4rem; text-shadow: 0 0 10px rgba(0,237,204,.4);
  animation: schedPulse 1.15s ease-in-out infinite;
}
@keyframes schedPulse { 50% { opacity: .3; } }

/* PRIVACY VEIL — Safe-Icon toggle blurs every sensitive academic figure app-wide */
body.privacy-veil .ac-gm-pct, body.privacy-veil .ac-gm-letter,
body.privacy-veil .ac-gpa-num, body.privacy-veil .ac-as-score,
body.privacy-veil .ac-hyp-out { filter: blur(8px); }

/* ════════════════════════════════════════════════════════════════════════════
   ROADMAP BANNERS · locked modules show target launch; Academics flies ready
   ════════════════════════════════════════════════════════════════════════════ */
.dev-banner {
  position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%);
  z-index: 30; pointer-events: none; white-space: nowrap;
  font-family: 'Oxanium', sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: 2.5px;
  color: #ffd27f; padding: .55rem 1.5rem; border-radius: 999px;
  background: rgba(20, 14, 2, .62); border: 1px solid rgba(245, 158, 11, .45);
  box-shadow: 0 0 22px -4px rgba(245, 158, 11, .55); backdrop-filter: blur(8px);
  text-shadow: 0 0 12px rgba(245, 158, 11, .6);
  animation: devPulse 2.6s ease-in-out infinite;
}
.dev-banner b { color: #ffe9c4; }
.dev-banner.ready {
  color: #9fffe0; border-color: rgba(0, 237, 204, .45);
  background: rgba(2, 20, 16, .62);
  box-shadow: 0 0 22px -4px rgba(0, 237, 204, .55); text-shadow: 0 0 12px rgba(0, 237, 204, .6);
}
@keyframes devPulse { 50% { box-shadow: 0 0 30px -2px rgba(245, 158, 11, .75); } }

/* ════════════════════════════════════════════════════════════════════════════
   SYSTEM PANELS · Master Settings + Account Profile (anchored over the Safe Dock)
   ════════════════════════════════════════════════════════════════════════════ */
.sys-panel {
  position: fixed; left: 1.6rem; bottom: 5.6rem; z-index: 75; width: 330px;
  display: none; flex-direction: column; gap: .55rem;
  max-height: 72vh; overflow-y: auto; scrollbar-width: none;
  padding: 1.1rem 1.2rem; border-radius: 14px;
  background: rgba(8, 13, 26, .88); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(12px);
  font-family: 'Oxanium', sans-serif; color: #d7e6f5;
}
.sys-panel::-webkit-scrollbar { display: none; }
.sys-panel.open { display: flex; }

/* MASTER SETTINGS → FULL-SCREEN command center: controls LEFT, live preview RIGHT */
#settings-panel {
  inset: 0; left: 0; top: 0; bottom: 0; transform: none;
  width: 100vw; height: 100vh; max-height: none; border-radius: 0;
  padding: 2rem 3rem; z-index: 99998;
  background: rgba(4, 8, 18, .94);
}
#settings-panel .sp-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 1.05rem; letter-spacing: 4px; padding-bottom: .8rem;
}
#sp-close {
  font-family: inherit; font-size: .72rem; font-weight: 700; letter-spacing: 2px;
  color: #ff8097; background: rgba(255, 60, 90, .08); border: 1px solid rgba(255, 60, 90, .45);
  border-radius: 8px; padding: .5rem 1.1rem; cursor: pointer; transition: background .2s ease;
}
#sp-close:hover { background: rgba(255, 60, 90, .18); }

/* hue BARS — the draggable rainbow strips replacing the old static swatches */
.sp-huerow { gap: .8rem; }
.sp-huerow > label { flex: 0 0 10.5rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sp-hue {
  flex: 1; -webkit-appearance: none; appearance: none; height: 10px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, hsl(0 90% 60%), hsl(60 90% 60%), hsl(120 90% 60%),
    hsl(180 90% 60%), hsl(240 90% 60%), hsl(300 90% 60%), hsl(360 90% 60%));
  border: 1px solid rgba(255, 255, 255, .15);
}
.sp-hue::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid #0a1020; box-shadow: 0 0 8px rgba(255, 255, 255, .7); cursor: grab;
}
.sp-hue::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid #0a1020; box-shadow: 0 0 8px rgba(255, 255, 255, .7); cursor: grab;
}
.sp-dot {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 0 8px -1px currentColor;
  font-size: .56rem; line-height: 18px; text-align: center; color: #cfeaff;
}
.sp-vol {
  flex: 1; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, rgba(0, 237, 204, .15), rgba(0, 237, 204, .8));
  border: 1px solid rgba(255, 255, 255, .15);
}
.sp-vol::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #00edcc; border: 3px solid #0a1020; box-shadow: 0 0 10px rgba(0, 237, 204, .8); cursor: grab;
}
.sp-vol-val { width: auto; min-width: 26px; border: none; box-shadow: none; background: none !important; color: #7fd9c4; font-weight: 700; }
.sp-select {
  flex: 1; font-family: inherit; font-size: .72rem; letter-spacing: .5px;
  color: #cfe6ff; background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 7px; padding: .4rem .6rem; outline: none; cursor: pointer;
}
.sp-select option { background: #0a1020; }

/* ════════════════════════════════════════════════════════════════════════════
   AUTH GATE — interaction asks guests to sign in; guest sessions are ephemeral
   ════════════════════════════════════════════════════════════════════════════ */
#auth-gate {
  position: fixed; inset: 0; z-index: 99999; display: none;
  align-items: center; justify-content: center;
  background: rgba(2, 5, 14, .78); backdrop-filter: blur(10px);
}
#auth-gate.open { display: flex; }
.ag-card {
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  width: min(460px, 92vw); padding: 2.2rem 2.4rem; border-radius: 16px;
  background: rgba(8, 13, 26, .92); border: 1px solid rgba(0, 207, 255, .25);
  box-shadow: 0 0 40px -8px rgba(0, 207, 255, .45);
  font-family: 'Oxanium', sans-serif; text-align: center;
}
.ag-title {
  font-size: 1.05rem; font-weight: 800; letter-spacing: 3px; color: #dffaff;
  text-shadow: 0 0 16px rgba(0, 207, 255, .7);
}
.ag-sub { font-size: .78rem; line-height: 1.6; color: #9fb4cc; }
.ag-sub b { color: #ffd27f; }
#ag-google-slot { min-height: 44px; display: flex; justify-content: center; }
.ag-guest {
  font-family: inherit; font-size: .62rem; font-weight: 600; letter-spacing: 1px;
  color: #64748b; background: none; border: none; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  transition: color .15s ease;
}
.ag-guest:hover { color: #9fb4cc; }

/* ════════════════════════════════════════════════════════════════════════════
   ATHLETIC ELIGIBILITY LOCK — cross-module badge (grades → Athletics cockpit)
   ════════════════════════════════════════════════════════════════════════════ */
.ath-elig { display: flex; flex-direction: column; gap: .5rem; }
.ath-elig-status { font-size: 1.15rem; font-weight: 800; letter-spacing: 3px; }
.ath-elig-detail { font-size: .92rem; color: #c9d6e8; }
.ath-elig-detail b { color: #ffffff; font-variant-numeric: tabular-nums; }
.ath-elig-action { font-size: .78rem; color: var(--muted, #8a94a6); letter-spacing: .4px; }
.ath-elig.cleared { border-color: rgba(20, 232, 162, .4); }
.ath-elig.cleared .ath-elig-status { color: #14e8a2; text-shadow: 0 0 1px #fff, 0 0 12px #14e8a2, 0 0 26px #14e8a2; }
.ath-elig.risk { border-color: rgba(255, 178, 36, .45); }
.ath-elig.risk .ath-elig-status { color: #ffb224; text-shadow: 0 0 1px #fff, 0 0 12px #ffb224, 0 0 26px #ffb224; }
.ath-elig.bench { border-color: rgba(255, 87, 87, .55); background: rgba(255, 60, 60, .05); }
.ath-elig.bench .ath-elig-status {
  color: #ff5757; text-shadow: 0 0 1px #fff, 0 0 12px #ff5757, 0 0 28px #ff5757;
  animation: benchFlash 1.1s steps(2) infinite;
}
@keyframes benchFlash { 50% { opacity: .45; } }
.ath-elig.unknown .ath-elig-status { color: var(--muted, #8a94a6); letter-spacing: 2px; font-size: .9rem; }

/* numeric settings input (eligibility threshold) */
.sp-num {
  width: 5rem; font-family: inherit; font-size: .8rem; font-weight: 700; text-align: center;
  color: #dffaff; background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 7px; padding: .35rem .4rem; outline: none;
  font-variant-numeric: tabular-nums;
}
.sp-num:focus { border-color: rgba(0, 207, 255, .55); }

/* Legal footer on the landing screen */
#legal-links {
  position: static; transform: none; flex: 0 0 auto;   /* in-flow — the column gap keeps it clear of the button */
  display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap; white-space: nowrap;
  font-family: 'Oxanium', sans-serif; font-size: .58rem; letter-spacing: 2px; color: #8a94a6;
}
#legal-links a { color: #8a94a6; text-decoration: none; transition: color .2s ease, text-shadow .2s ease; }
#legal-links a:hover { color: #0cdcf8; text-shadow: 0 0 10px rgba(12, 220, 248, .6); }
.ll-credit { color: #5b6678; }

/* ════════════════════════════════════════════════════════════════════════════
   ONBOARDING QUIZ — 3 setup questions before the sign-in gate
   ════════════════════════════════════════════════════════════════════════════ */
#onboard-quiz { opacity: 0; margin: 2.2rem auto 0; max-width: 560px; font-family: 'Oxanium', sans-serif; }
#onboard-quiz .oq-step { display: none; flex-direction: column; align-items: center; gap: 1.2rem; }
#onboard-quiz .oq-step.active { display: flex; }
.oq-q { font-size: 1rem; font-weight: 700; letter-spacing: 1.5px; color: #dffaff; text-shadow: 0 0 14px rgba(0, 207, 255, .6); }
.oq-opts { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; }
.oq-btn {
  font-family: inherit; font-size: .74rem; font-weight: 700; letter-spacing: 2px;
  color: #cfe6ff; background: rgba(255, 255, 255, .05); border: 1px solid rgba(0, 207, 255, .35);
  border-radius: 10px; padding: .75rem 1.5rem; cursor: pointer;
  transition: background .15s ease, box-shadow .2s ease, transform .15s ease;
}
.oq-btn:hover { background: rgba(0, 207, 255, .12); box-shadow: 0 0 16px -3px rgba(0, 207, 255, .7); transform: translateY(-2px); }
.oq-finish { color: #05121f; background: linear-gradient(90deg, #00edcc, #00cfff); border: none; box-shadow: 0 0 16px -3px rgba(0, 237, 204, .8); }
.oq-mods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.6rem; text-align: left; }
.oq-mod-row { display: flex; align-items: center; gap: .5rem; font-size: .72rem; letter-spacing: 1px; color: #cfe6ff; cursor: pointer; }
.oq-mod-row input { accent-color: #00edcc; }
.oq-mod-row.locked { color: #7fe9c9; }
.oq-mod-row.locked::after { content: 'AUTO — STUDENT'; font-size: .5rem; letter-spacing: 1px; color: #64748b; }

/* SETTINGS · category rail — one clean group at a time */
.sp-tabs { display: flex; gap: .6rem; padding: .4rem 0 .9rem; }
.sp-tab {
  font-family: inherit; font-size: .68rem; font-weight: 700; letter-spacing: 2px;
  color: #64748b; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px; padding: .5rem 1.2rem; cursor: pointer; transition: all .15s ease;
}
.sp-tab:hover { color: #cfe6ff; }
.sp-tab.active {
  color: #05121f; background: linear-gradient(90deg, #00edcc, #00cfff);
  border-color: transparent; box-shadow: 0 0 14px -3px rgba(0, 237, 204, .8);
}
.sp-cat { display: none; flex-direction: column; gap: .55rem; }
.sp-cat.active { display: flex; }

/* UNIVERSAL TOUCH — kill tap-zoom/delay on every interactive element */
button, input, select, .hud-card, .sd-item, .se-item, .ac-nav-tab, .ac-sub-tab { touch-action: manipulation; }

/* RESPONSIVE — phones + small touch screens */
@media (max-width: 760px) {
  #settings-panel { padding: 1.1rem 1.2rem; }
  #settings-panel .sp-body { grid-template-columns: 1fr; overflow-y: auto; }
  .sp-preview-wrap { min-height: 200px; }
  .sp-huerow > label { flex-basis: 7.5rem; font-size: .64rem; }
  .oq-mods { grid-template-columns: 1fr; }
  .ag-card { padding: 1.5rem 1.2rem; }
  #onboarding-wrap { padding: 0 1rem; }
}

/* INTERFACE VISIBILITY toggles + custom-cursor opt-out */
body.hide-timepin #earth-time { display: none !important; }
body.hide-essentials #student-essentials { display: none !important; }
body.no-custom-cursor #vextal-cursor { display: none !important; }
body.no-custom-cursor.hud-active, body.no-custom-cursor.globe-active,
body.no-custom-cursor.hud-active *, body.no-custom-cursor.globe-active * { cursor: auto !important; }
#settings-panel .sp-body {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.3rem;
  min-height: 0; overflow: hidden;
}
#settings-panel .sp-controls {
  display: flex; flex-direction: column; gap: .55rem;
  overflow-y: auto; scrollbar-width: none; padding-right: .4rem; min-height: 0;
}
#settings-panel .sp-controls::-webkit-scrollbar { display: none; }
.sp-preview-wrap { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
#sp-preview {
  position: relative; flex: 1; min-height: 320px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .1); overflow: hidden;
  transition: background .25s ease;
}
.spv-title {
  position: absolute; top: 7%; left: 50%; transform: translateX(-50%);
  font-size: .8rem; font-weight: 700; letter-spacing: 7px; color: #cfeaff;
  text-shadow: 0 0 10px rgba(0, 207, 255, .6);
}
.spv-grid {
  position: absolute; top: 20%; left: 6%; right: 6%;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.spv-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 2px; }
.spv-ico  { width: 15px; height: 15px; border-radius: 4px; }
.spv-name { font-size: .44rem; font-weight: 600; letter-spacing: .5px; color: #9fb4cc; text-align: center; }
.spv-earth {
  position: absolute; bottom: -62%; left: 50%; transform: translateX(-50%);
  width: 92%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, #2a6db5, #0a2350 58%, #03102a);
  box-shadow: 0 0 44px rgba(40, 120, 200, .5);
}
.spv-dust { position: absolute; top: 12px; right: 12px; width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 9px 1px currentColor; }
.sp-head { font-size: .78rem; font-weight: 700; letter-spacing: 3px; color: #8fe9ff; text-shadow: 0 0 10px rgba(0,207,255,.5); padding-bottom: .2rem; }
.sp-sec  { font-size: .58rem; font-weight: 700; letter-spacing: 2px; color: #64748b; padding-top: .55rem; }
.sp-mode {
  font-family: inherit; font-size: .72rem; font-weight: 800; letter-spacing: 1.5px;
  color: #05121f; background: #00edcc; border: none; border-radius: 8px;
  padding: .55rem .8rem; cursor: pointer; box-shadow: 0 0 14px -2px rgba(0,237,204,.7);
}
.sp-mode:hover { filter: brightness(1.12); }
.sp-mrow { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .72rem; }
.sp-mrow input[type="color"] { width: 34px; height: 22px; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 5px; background: none; cursor: pointer; }
.sp-check { display: flex; align-items: center; gap: .5rem; font-size: .7rem; line-height: 1.35; cursor: pointer; }
.sp-check input { accent-color: #00edcc; }
.sp-reset {
  font-family: inherit; font-size: .6rem; font-weight: 700; letter-spacing: 1.5px;
  color: #8fa5c0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16);
  border-radius: 7px; padding: .4rem .6rem; cursor: pointer; margin-top: .2rem;
}
.sp-reset:hover { color: #fff; border-color: rgba(0,207,255,.5); }

/* Profile card */
.pp-name  { font-size: .85rem; font-weight: 700; color: #eaf4ff; }
.pp-email { font-size: .72rem; color: #7fd9c4; letter-spacing: .4px; word-break: break-all; }
.pp-phone {
  font-family: inherit; font-size: .76rem; color: #dffaff; padding: .5rem .7rem;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 7px; outline: none;
}
.pp-phone:focus { border-color: rgba(0,207,255,.55); }
.pp-hint { font-size: .56rem; color: #64748b; letter-spacing: .4px; }
.pp-actions { display: flex; gap: .6rem; padding-top: .5rem; }
.pp-actions button {
  flex: 1; font-family: inherit; font-size: .62rem; font-weight: 700; letter-spacing: 1.2px;
  padding: .5rem 0; border-radius: 7px; cursor: pointer;
  color: #00edcc; background: rgba(0,237,204,.07); border: 1px solid rgba(0,237,204,.45);
}
.pp-actions button:hover { background: rgba(0,237,204,.16); }
.pp-actions button.danger { color: #ff8097; background: rgba(255,60,90,.07); border-color: rgba(255,60,90,.45); }
.pp-actions button.danger:hover { background: rgba(255,60,90,.16); }

/* ════════════════════════════════════════════════════════════════════════════
   ECO DISPLAY (low-rendering) + DISALLOW-ANIMATIONS — global enforcement
   ════════════════════════════════════════════════════════════════════════════ */
body.no-anim *, body.no-anim *::before, body.no-anim *::after,
body.eco *,     body.eco *::before,     body.eco *::after {
  transition: none !important;
  animation: none !important;
}
/* Eco: particle layers off, gradients/glow frozen static */
body.eco .hud-dust, body.eco #hud-particles, body.eco #weather-fx { display: none !important; }
body.eco .dev-banner { animation: none; }
/* Animation-revealed elements must still LAND visible when animations are killed
   (the card titles sit at opacity:0 until their reveal animation runs) */
body.eco .hud-card-title, body.no-anim .hud-card-title { background-position: 0% 50%; opacity: 1; }

/* Module BG tint (settings picker) — gentle wash over the module environment */
#overlay-ui { background: var(--vextal-tint, transparent); }

/* ═══════════════════════════════════════════════════════════════════════════════
   HUD COMMAND CENTER — the final dashboard state. A DOM grid layered over the
   WebGL canvas, occupying the top half above the docked half-Earth.
   ═══════════════════════════════════════════════════════════════════════════════ */
#hud-dashboard {
  position: fixed; left: 0; top: 0; right: 0; height: 64vh;
  z-index: 50;                       /* above the canvas, below #module-overlay (99999) */
  pointer-events: none;              /* only the cards are interactive — Earth stays inert */
  opacity: 0; transform: translateY(-12px) translateZ(0);
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;            /* (Req 1) promote to a GPU compositor layer — no paint hitch on reveal */
  backface-visibility: hidden;                /* keep the layer rasterized while opacity:0 (pre-mounted before the intro) */
  font-family: 'Oxanium', 'Eurostile', 'Rajdhani', system-ui, sans-serif;
}
#hud-dashboard.hud-show { opacity: 1; transform: none; }

/* ── Outer structural frame ── */
/* (Req 3) Frame is now a transparent layout wrapper only — no border / bg / box. */
.hud-frame {
  position: absolute; inset: 3vh 2.4vw auto;
  height: calc(100% - 5vh);
}

/* ── Top-centered status tag — floating glowing text, no box ── */
.hud-status-tag {
  position: absolute; top: -1.2vh; left: 50%; transform: translateX(-50%);
  color: #00EDCC; font-size: 0.72rem; font-weight: 700; letter-spacing: 5px; white-space: nowrap;
  text-shadow: 0 0 14px rgba(0,237,204,0.85);
}

/* ── Drifting space-dust particle layer (behind the grid) ── */
#hud-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hud-dust {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: var(--dust-color, #cdeee9); box-shadow: 0 0 5px 1px rgba(0,237,204,0.7);
  animation: hudDrift linear infinite;
}
@keyframes hudDrift {
  0%   { transform: translateY(8px)  scale(.7); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(-34px) scale(1); opacity: 0; }
}

/* ── The 4 × 2 grid ── */
.hud-grid {
  position: absolute; inset: 0; padding: 4.2vh 2vw 2.6vh;
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr);
  gap: 1.7vw;                          /* (Req 3) clean dark space between cards — no grid lines */
}

/* ── Each "card" is now BOX-FREE (Req 3/4) — just floating title + icon, no
   background, border, blur, frame, or corner brackets. Empty grid gaps divide. ── */
.hud-card {
  position: relative; pointer-events: auto; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 1rem; padding: 1.2rem 0.6rem;
  background: none; border: none;
  transition: transform .25s ease;
  font-family: inherit;
}
/* Box-free hover — the content itself lifts + brightens (no panel, no border). */
.hud-card:hover { transform: translateY(-4px) scale(1.04); }
.hud-card:hover .hud-card-icon svg { filter: drop-shadow(0 0 16px var(--icon-glow, rgba(0,237,204,1))); }
.hud-card:hover .hud-card-title   { text-shadow: 0 0 16px rgba(255,255,255,0.65); }

.hud-card-title {
  font-size: clamp(1.5rem, 2.8vw, 3.2rem);     /* (Req 3) enlarged up to 3.2rem */
  font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; text-align: center; line-height: 1.08;
  /* (Req 2/3) overarching cyan ⇄ purple gradient loop — endpoints user-tunable in settings */
  background: linear-gradient(90deg, var(--title-a, #06b6d4) 0%, var(--title-b, #a855f7) 50%, var(--title-a, #06b6d4) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  opacity: 0;                                   /* hidden until the staggered reveal fires */
}
/* Staggered REVEAL (one-time, left→right) + continuous cyan ⇄ purple gradient LOOP.
   The per-card animation-delay (inline) staggers BOTH across the row (Academics → Mental Relaxation). */
#hud-dashboard.hud-show .hud-card-title {
  animation: hudTitleReveal 0.8s cubic-bezier(0.25, 1, 0.5, 1) both,
             hudTitleLoop   4.5s ease-in-out infinite;
}
@keyframes hudTitleReveal {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: none; }
}
@keyframes hudTitleLoop {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 200% 50%; }
  100% { background-position:   0% 50%; }
}
.hud-card-icon { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; }
.hud-card-icon svg {
  width: 86px; height: 86px;          /* prominent, balanced, centred under the title */
  stroke: var(--icon-color, #00EDCC); fill: none;                     /* (Req 2) per-module brand colour */
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 9px var(--icon-glow, rgba(0,237,204,0.9))); /* matching ambient glow */
  transition: filter .25s ease;
  transform: translateZ(0); backface-visibility: hidden;             /* (Req 1) pre-rasterize the drop-shadow layer on the GPU — kills the reveal hitch */
}
.hud-card-sub {
  color: rgba(0,237,204,0.9); font-size: 0.56rem; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; text-shadow: 0 0 8px rgba(0,237,204,0.6);
}

@media (max-width: 760px) {
  .hud-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); }
  #hud-dashboard { height: 70vh; }
}
/* ════════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2 — spatial precision · glass containment · luminescence ·
   ambient depth · typographic hierarchy. Appended last: this layer GOVERNS.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --u: 0.5rem;                                    /* base spacing unit (8px) */
  --glass-bg: rgba(255, 255, 255, 0.02);
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);
  --radius: 12px;
  --metric: #ffffff;
  --muted: #8a94a6;
}

/* ── 1 · GLASS CONTAINMENT — every module/data group gets ultra-subtle anchoring
       (2% white fill, hairline border, uniform radius, 4px depth blur) ── */
.hud-card, .gh-panel, .rem-c-col, .ath-c-section,
.ac-hypothetical-engine, .ac-leaderboard-panel, .fin-plaid,
.ac-as-col, .ac-gm-wrap, .ac-sync-box, .ag-card, .gh-center {
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* consistent breathing room where containers previously hugged content */
.rem-c-col, .ath-c-section, .ac-hypothetical-engine,
.ac-leaderboard-panel, .fin-plaid, .gh-center { padding: calc(var(--u) * 3); }
.gh-panel { padding: calc(var(--u) * 3) !important; width: 300px; }

/* ── 2 · LUMINESCENCE — multi-layer glows: white-hot core, smooth brand falloff ── */
.hud-card-icon svg {
  filter: drop-shadow(0 0 2px #ffffff)
          drop-shadow(0 0 6px var(--icon-color, #0cdcf8))
          drop-shadow(0 0 16px var(--icon-color, #0cdcf8));
}
.hud-card:hover .hud-card-icon svg {
  filter: drop-shadow(0 0 3px #ffffff)
          drop-shadow(0 0 8px var(--icon-glow, #0cdcf8))
          drop-shadow(0 0 20px var(--icon-glow, #0cdcf8));
}
.ac-gpa-arc {
  filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 8px currentColor);
}
.hud-status-tag, .ac-term-header, .fin-section-title, .gh-head,
.ath-c-head, .ac-as-col-title, .rem-section-title {
  text-shadow: 0 0 1px #ffffff, 0 0 10px currentColor, 0 0 22px currentColor;
}
.sd-item:hover, .se-item:hover {
  box-shadow: 0 0 4px #ffffff, 0 0 12px var(--sd, var(--se, #0cdcf8)), 0 0 24px var(--sd, var(--se, #0cdcf8));
}

/* ── 2b · ALIVE HOVER — unified 0.3s lift + glow intensify on every interactive ── */
.hud-card, .sd-item, .se-item, .oq-btn, .fin-plaid-btn, .ac-btn-cyan,
.ac-gpa-toggle, #gh-return, .sp-tab, .pp-actions button, .sp-reset, .ac-q-dropdown {
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease,
              background 0.3s ease, color 0.3s ease;
}
.hud-card:hover, .sd-item:hover, .se-item:hover, .oq-btn:hover,
.fin-plaid-btn:hover, .ac-gpa-toggle:hover, #gh-return:hover, .sp-tab:hover {
  transform: translateY(-2px) scale(1.02);
}

/* ── 3 · AMBIENT DEPTH — the void breathes: volumetric engine-light radials ── */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(55% 45% at 50% 80%, rgba(124, 58, 237, 0.15), transparent 70%),
    radial-gradient(42% 36% at 16% 12%, rgba(6, 182, 212, 0.08), transparent 70%),
    radial-gradient(46% 40% at 86% 18%, rgba(168, 85, 247, 0.07), transparent 70%);
}

/* ── 4 · TYPOGRAPHIC HIERARCHY — piercing metrics, muted labels, tabular digits ── */
.ac-gm-pct  { color: var(--metric); font-weight: 700; }
.ac-as-score { color: var(--metric); font-weight: 600; }
.ac-gpa-num { font-weight: 700; }
.fin-pa-cur { font-weight: 700; }
.ac-as-meta, .ac-sched-muted, .fin-pa-type, .fin-pa-avail,
.ac-as-due, .spv-name, .rem-c-task-origin, .pp-hint, .gh-hint { color: var(--muted); }
.ac-gm-pct, .ac-gm-letter, .ac-as-score, .ac-as-due, .gh-temp, .gh-row,
.fin-pa-cur, .fin-pa-avail, .fin-tx-amount, .ac-gpa-num, .ac-sched-period,
.rem-c-dl-due, .ac-miss-count, .sp-vol-val, .ac-as-metric, .earth-time,
#earth-time { font-variant-numeric: tabular-nums; }
.sp-sec { letter-spacing: 0.1em; }

/* ════════════════════════════════════════════════════════════════════════════
   FLOATING v3 — boxes removed app-wide. Text floats statically over LIVE SPACE;
   each section carries a soft concentration WASH of its module''s icon color
   (--mod-color, set per module by populateOverlay). No borders, no glass edges.
   ════════════════════════════════════════════════════════════════════════════ */

/* The module environment is pure space: the starfield shows through; the only
   addition is the module''s designated color breathing behind the content. */
#module-overlay { background: transparent !important; backdrop-filter: none !important; }
#overlay-ui {
  background:
    radial-gradient(62% 52% at 50% 28%,
      color-mix(in srgb, var(--mod-color, #0cdcf8) 12%, transparent),
      transparent 75%) !important;
}

/* Boxes → washes: kill borders/glass, keep a rounded color field per section */
.hud-card, .gh-panel, .gh-center, .rem-c-col, .ath-c-section,
.ac-hypothetical-engine, .ac-leaderboard-panel, .fin-plaid,
.ac-as-col, .ac-gm-wrap, .ac-sync-box {
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: color-mix(in srgb, var(--mod-color, #0cdcf8) 8%, transparent);
  border-radius: 14px;
}
/* the dashboard grid + globe hub live OUTSIDE a module — keep them fully naked */
.hud-card, .gh-panel, .gh-center { background: none; }
/* eligibility badge keeps its semantic tint, borderless */
.ath-elig.bench   { background: rgba(255, 60, 60, .10) !important; }
.ath-elig.cleared { background: rgba(20, 232, 162, .07) !important; }
.ath-elig.risk    { background: rgba(255, 178, 36, .08) !important; }

/* ATHLETICS — no more long single column: a balanced two-column grid */
#universe-workspace.ath-consolidated-layout {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem; align-items: start; align-content: start;
}
#universe-workspace.ath-consolidated-layout .ath-elig { grid-column: 1 / -1; }
@media (max-width: 900px) {
  #universe-workspace.ath-consolidated-layout { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════════
   FLOATING v3.1 — ZERO BOXES. No washes, no fields, no tints, no rectangles.
   Pure floating text over live space. The module''s designated color lives ONLY
   in the ambient page radial (#overlay-ui) — never as a shape.
   ════════════════════════════════════════════════════════════════════════════ */
.hud-card, .gh-panel, .gh-center, .rem-c-col, .ath-c-section,
.ac-hypothetical-engine, .ac-leaderboard-panel, .fin-plaid, .fin-asset-card,
.ac-as-col, .ac-gm-wrap, .ac-sync-box, .ac-sync-progress,
.mh-phase-card, .rem-c-alert, .rem-c-dl,
.ath-elig, .ath-elig.bench, .ath-elig.cleared, .ath-elig.risk, .ath-elig.unknown {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* DEV BANNER → top-nav chip beside ← DASHBOARD (boxless glowing text, not a pill) */
.dev-banner, .dev-banner.ready {
  position: static !important; bottom: auto; left: auto; transform: none !important;
  background: none !important; border: none !important; box-shadow: none !important;
  backdrop-filter: none !important; padding: 0 0 0 1.2rem; border-radius: 0;
  font-size: .6rem; letter-spacing: 2px; white-space: nowrap;
  align-self: center; pointer-events: none;
}
@media (max-width: 900px) { .dev-banner { display: none; } }

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE RESCUE — the landing/init flow must FIT and be TAPPABLE on phones.
   Touch devices get no phantom cursor; everything is tap-first.
   ════════════════════════════════════════════════════════════════════════════ */
body.is-touch #vextal-cursor { display: none !important; }
body.is-touch.hud-active, body.is-touch.globe-active,
body.is-touch.hud-active *, body.is-touch.globe-active * { cursor: auto !important; }

@media (max-width: 700px) {
  #init-screen { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  #onboarding-wrap {
    max-width: 100vw; padding: 1.6rem 1.1rem 3.5rem; box-sizing: border-box;
  }
  #ob-line-1 { font-size: 1.15rem !important; letter-spacing: 2px !important; line-height: 1.4 !important; }
  .ob-line   { font-size: .8rem  !important; letter-spacing: .5px !important; line-height: 1.5 !important; }
  #init-btn {
    font-size: .92rem !important; letter-spacing: 3px !important;
    padding: 1rem 2.2rem !important; width: 100%; max-width: 340px;
  }
  #onboard-quiz { max-width: 100%; margin-top: 1.4rem; }
  .oq-q { font-size: .88rem; }
  .oq-btn { padding: .85rem 1.1rem; font-size: .7rem; flex: 1 1 40%; }
  #ob-gate { transform: scale(.92); }
  #legal-links { margin-top: 0; }
  #earth-time { font-size: .92rem; bottom: 16vh; }
  #student-essentials, #safe-dock { transform: scale(.85); transform-origin: bottom right; }
  #safe-dock { transform-origin: bottom left; }
  .sys-panel { left: 0; right: 0; width: 100vw; }
}
@media (max-width: 700px) {
  .ob-line, #ob-line-1 { white-space: normal !important; word-break: break-word; max-width: 100%; }
  #onboarding-wrap > * { max-width: 100%; }
}
@media (max-width: 700px) {
  #init-screen { flex-direction: column !important; }
  #onboarding-wrap { width: 100%; min-width: 0; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MODULE FOCUS LOCK — inside a module, the outside world ceases to exist:
   invisible (opacity 0) AND untouchable (pointer-events none). The module
   floods with its icon color; text scales up for effortless reading.
   ════════════════════════════════════════════════════════════════════════════ */
body.module-open #hud-dashboard,
body.module-open #safe-dock,
body.module-open #student-essentials,
body.module-open #earth-time,
body.module-open #global-hub,
body.module-open #sky-layer,
body.module-open #weather-fx {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .3s ease;
}
body.module-open #vextal-engine { pointer-events: none !important; }

/* the SECOND you enter: the module''s designated color owns the room */
body.module-open #overlay-ui {
  background:
    radial-gradient(75% 62% at 50% 26%,
      color-mix(in srgb, var(--mod-color, #0cdcf8) 20%, transparent),
      color-mix(in srgb, var(--mod-color, #0cdcf8) 6%, transparent) 60%,
      transparent 85%) !important;
}

/* logically larger text everywhere inside modules (Academics keeps its tuned
   .95 fit for the projection line — net ~unchanged there by design) */
#universe-workspace:not(.ac-layout) { zoom: 1.07; }

/* 0.5s skip-notice splash — shown at Enter Environment, before cursor concealment */
/* (skip-note splash removed — audio now primes on hover, resumes on click) */

/* ════════════════════════════════════════════════════════════════════════════
   LANDING REFACTOR — particle background · Times-Roman title at top-centre ·
   uniform type size · no scroll · boxless animated-gradient ENTER. Appended
   last so it governs the scattered base rules.
   ════════════════════════════════════════════════════════════════════════════ */
#init-screen {
  background: rgba(5, 9, 16, 0.5);     /* translucent → the live star/particle canvas shows through */
  justify-content: center;              /* dead-centre vertically — the whole block sits mid-screen */
  align-items: center;
  gap: 1.5vh;                           /* tighter stack → lower overall height, less eye travel */
  padding: 2.4vh 1.2rem;
  overflow: hidden;                     /* NO scrolling */
}
#onboarding-wrap { gap: 1.8vh; max-width: min(1600px, 96vw); width: 100%; justify-content: center; }

/* uniform font size across every line on the landing page (the title scales on
   its own responsive curve below — the subtitle/button/legal stay uniform here) */
#ob-line-4, #init-btn, #legal-links, #legal-links a,
#legal-links span, .lg-active-email, .lg-status {
  font-size: 1.12rem;
  letter-spacing: 1.5px;
}
/* the full backronym name → ONE wide, elegant horizontal line that scales
   smoothly with the viewport (no narrow cap forcing it to stack vertically) */
#ob-line-1 {
  font-family: 'Times New Roman', Times, serif;
  font-weight: 700; text-transform: uppercase;
  color: #ffffff; line-height: 1.22; margin: 0;
  max-width: none; white-space: nowrap;
  font-size: clamp(0.58rem, 1.55vw, 1.5rem);
  letter-spacing: clamp(0.5px, 0.18vw, 2.5px);
}
#ob-line-4 { font-family: 'Times New Roman', Times, serif; color: #cfe0ee; line-height: 1.4; }
#legal-links { flex-wrap: wrap; }

/* ENTER ENVIRONMENT — boxless glowing text; blue→green→gold gradient sweeping
   bottom-left → top-right, slow→fast, looping identically each cycle. */
#init-btn {
  border: none !important;
  background: linear-gradient(45deg, #4cc9f0 0%, #2ee6a6 30%, #ffd45e 55%, #4cc9f0 85%, #2ee6a6 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 10px rgba(76,201,240,0.55)) drop-shadow(0 0 22px rgba(46,230,166,0.35));
  padding: 1rem 1.4rem; min-height: 0;
  animation: enterGradShift 2.6s cubic-bezier(0.55, 0, 1, 0.45) infinite;
}
#init-btn:hover {
  background: linear-gradient(45deg, #4cc9f0 0%, #2ee6a6 30%, #ffd45e 55%, #4cc9f0 85%, #2ee6a6 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 14px rgba(76,201,240,0.85)) drop-shadow(0 0 32px rgba(255,212,94,0.5));
}
@keyframes enterGradShift {
  0%   { background-position: 0% 100%; }    /* bottom-left */
  100% { background-position: 100% 0%; }    /* top-right */
}
@media (prefers-reduced-motion: reduce) { #init-btn { animation: none; } }

/* ════════════════════════════════════════════════════════════════════════════
   LOCATION TELEMETRY ONBOARDING — boxless permission modal (post-sign-in).
   Same language as the landing: translucent space backdrop, no card borders,
   gradient glowing primary action. Centered + scale/fade in.
   ════════════════════════════════════════════════════════════════════════════ */
#geo-onboard {
  position: fixed; inset: 0; z-index: 100050;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 9, 16, 0.62); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .4s ease; padding: 1.2rem;
}
#geo-onboard.open { opacity: 1; }
#geo-onboard .geo-card {
  text-align: center; max-width: 40ch;
  transform: scale(.94); transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
#geo-onboard.open .geo-card { transform: scale(1); }
#geo-onboard .geo-glyph {
  font-size: 2.6rem; color: #4cc9f0; line-height: 1;
  filter: drop-shadow(0 0 14px rgba(76,201,240,.7)); margin-bottom: .6rem;
}
#geo-onboard .geo-title {
  font-family: 'Times New Roman', Times, serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px; color: #fff;
  margin: 0 0 .7rem; font-size: 1.5rem;
}
#geo-onboard .geo-sub {
  color: #cfe0ee; line-height: 1.5; font-size: 1rem; margin: 0 0 1.4rem;
}
#geo-onboard .geo-actions {
  display: flex; gap: 1.6rem; justify-content: center; align-items: center; flex-wrap: wrap;
}
/* primary = the same blue→green→gold glowing gradient text as ENTER ENVIRONMENT */
#geo-onboard .geo-allow {
  border: none; background: linear-gradient(45deg, #4cc9f0 0%, #2ee6a6 30%, #ffd45e 55%, #4cc9f0 85%, #2ee6a6 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 10px rgba(76,201,240,.55)) drop-shadow(0 0 22px rgba(46,230,166,.35));
  font: inherit; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: .6rem .4rem; cursor: pointer;
  animation: enterGradShift 2.6s cubic-bezier(0.55, 0, 1, 0.45) infinite;
}
#geo-onboard .geo-deny {
  border: none; background: none; cursor: pointer;
  color: #7d93a8; font: inherit; letter-spacing: 1.5px; text-transform: uppercase;
  transition: color .2s ease;
}
#geo-onboard .geo-deny:hover { color: #cfe0ee; }
#geo-onboard .geo-status { margin-top: 1rem; min-height: 1.2em; color: #2ee6a6; font-size: .85rem; letter-spacing: 1px; }
@media (prefers-reduced-motion: reduce) {
  #geo-onboard, #geo-onboard .geo-card { transition: none; }
  #geo-onboard .geo-allow { animation: none; }
}

/* Settings → ENVIRONMENT → LOCATION TELEMETRY re-sync control */
.sp-resync {
  background: rgba(0, 207, 255, .08); border: 1px solid rgba(0, 207, 255, .35);
  color: #cfe9f6; letter-spacing: 1.2px; text-transform: uppercase;
  padding: .5rem .9rem; border-radius: 999px; cursor: pointer; font-size: .8rem;
  transition: border-color .2s ease, color .2s ease;
}
.sp-resync:hover { color: #fff; border-color: rgba(0, 207, 255, .65); }
.sp-geo-status { margin-left: .8rem; color: #8fb6c9; font-size: .8rem; }

/* ════════════════════════════════════════════════════════════════════════════
   AUTO-SCALING VIEWPORT — --vx-scale (set per resize by vextalApplyViewport)
   keeps the HTML HUD layers proportional and centered. It only scales DOWN
   (clamped ≤1), so content always fits the smaller dimension without clipping.
   Center transform-origin guarantees the module HUD stays centered on resize.
   ════════════════════════════════════════════════════════════════════════════ */
:root { --vx-scale: 1; --vx-vh: 1vh; }
/* PRODUCTION: the DOM auto-scale transform on #overlay-ui was REMOVED. Sizing the
   element to width:100%/scale made it wider than the viewport, and any scale<1
   re-introduced the "module screen shoved to the right" bug. The overlay now stays
   a clean full-width flex column and #universe-workspace centres with margin:auto +
   max-width (see the hard-centre block below). The camera's adaptive FOV (the 3D
   half of the viewport engine) is untouched. */
@media (min-width: 701px) {
  #overlay-ui {
    transform: none !important; width: 100% !important; height: 100% !important;
  }
}
/* the floating dashboard HUD pins scale about their own anchor so they never
   drift off-center or clip when the window is dragged between phone/desktop sizes */
#earth-time, #student-essentials { transform-origin: center center; }

/* ════════════════════════════════════════════════════════════════════════════
   MASTER SETTINGS — CYBER-HUD INFUSION (Part 3)
   Per-tab accent that propagates through every control via --sp-accent, vibrant
   gradient tab rail, neon section labels, and uniform glow tracking on toggles,
   checkboxes and sliders so the panel reads as native to the dashboard modules.
   ════════════════════════════════════════════════════════════════════════════ */
#settings-panel {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(0, 207, 255, .10), transparent 60%),
    radial-gradient(90% 60% at 100% 110%, rgba(168, 85, 247, .10), transparent 55%),
    linear-gradient(180deg, rgba(4, 8, 18, .96), rgba(3, 6, 14, .97)) !important;
}
#settings-panel .sp-head {
  background: linear-gradient(90deg, #8fe9ff, #c084fc 45%, #ffb24c 75%, #00edcc);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 12px rgba(0, 207, 255, .35));
}

/* four tab identities — the rail glows in each module's own hue */
.sp-tab[data-cat="appearance"]  { --sp-accent: #c084fc; }
.sp-tab[data-cat="environment"] { --sp-accent: #00edcc; }
.sp-tab[data-cat="sound"]       { --sp-accent: #ffb24c; }
.sp-tab[data-cat="system"]      { --sp-accent: #ff6b81; }
.sp-tab { transition: color .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; }
.sp-tab:hover {
  color: #fff; border-color: var(--sp-accent, #00edcc);
  box-shadow: 0 0 14px -5px var(--sp-accent, #00edcc); background: rgba(255,255,255,.06);
}
.sp-tab.active {
  color: #05121f;
  background: linear-gradient(120deg, var(--sp-accent, #00edcc), #ffffff 160%) !important;
  border-color: transparent !important;
  box-shadow: 0 0 18px -3px var(--sp-accent, #00edcc), inset 0 0 12px rgba(255,255,255,.25) !important;
}

/* the visible category paints all of its controls in its accent */
.sp-cat[data-cat="appearance"]  { --sp-accent: #c084fc; }
.sp-cat[data-cat="environment"] { --sp-accent: #00edcc; }
.sp-cat[data-cat="sound"]       { --sp-accent: #ffb24c; }
.sp-cat[data-cat="system"]      { --sp-accent: #ff6b81; }
.sp-cat .sp-sec {
  color: var(--sp-accent, #00edcc); opacity: .92;
  text-shadow: 0 0 10px -2px var(--sp-accent, #00edcc);
}
.sp-cat .sp-mrow, .sp-cat .sp-check {
  border-radius: 8px; padding: .15rem .35rem;
  transition: background .18s ease, box-shadow .18s ease, color .18s ease;
}
.sp-cat .sp-mrow:hover, .sp-cat .sp-check:hover {
  color: #fff; background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sp-accent, #00edcc) 35%, transparent);
}
/* checkboxes — accent-tracked with a hover glow */
.sp-cat .sp-check input[type="checkbox"] { accent-color: var(--sp-accent, #00edcc); width: 15px; height: 15px; }
.sp-cat .sp-check:hover input[type="checkbox"] { box-shadow: 0 0 9px var(--sp-accent, #00edcc); border-radius: 4px; }
/* sliders — thumb + value chip track the accent, with a live glow */
.sp-cat .sp-vol { background: linear-gradient(90deg, color-mix(in srgb, var(--sp-accent, #00edcc) 18%, transparent), var(--sp-accent, #00edcc)); }
.sp-cat .sp-vol::-webkit-slider-thumb { background: var(--sp-accent, #00edcc); box-shadow: 0 0 12px var(--sp-accent, #00edcc); }
.sp-cat .sp-vol::-moz-range-thumb     { background: var(--sp-accent, #00edcc); box-shadow: 0 0 12px var(--sp-accent, #00edcc); }
.sp-cat .sp-vol-val { color: var(--sp-accent, #00edcc); text-shadow: 0 0 10px -2px var(--sp-accent, #00edcc); }
.sp-cat .sp-hue:hover::-webkit-slider-thumb { box-shadow: 0 0 12px var(--sp-accent, #00edcc); }
/* number + select inputs — accent focus ring */
.sp-cat .sp-num:focus, .sp-cat .sp-select:focus {
  border-color: var(--sp-accent, #00edcc) !important;
  box-shadow: 0 0 12px -3px var(--sp-accent, #00edcc);
}
.sp-cat .sp-select:hover { border-color: color-mix(in srgb, var(--sp-accent, #00edcc) 55%, transparent); }

/* ════════════════════════════════════════════════════════════════════════════
   MODULE SECTIONS & BOTTOM QUICK DOCKS — symmetry + crisp spacing (Part 4)
   The left Safe dock and right Essentials dock are exact structural mirrors;
   normalize their box model, item metrics and label rhythm so they read as a
   matched pair, and tidy the module workspace section spacing.
   ════════════════════════════════════════════════════════════════════════════ */
#safe-dock, #student-essentials {
  box-sizing: border-box; height: 56px; align-items: center;
  padding: .55rem .85rem; gap: .7rem;
}
.sd-item, .se-item {
  box-sizing: border-box; width: 38px; height: 38px; cursor: pointer; flex: 0 0 auto;
}
.sd-title, .se-title { align-self: center; }
/* module workspace — centered with a sane max-width so content stays symmetric
   on ultrawide displays instead of stretching edge-to-edge (no added padding, so
   each module keeps its own tuned inner gutters); guard flex children from clipping */
#universe-workspace { margin-inline: auto; max-width: 1680px; }
#universe-workspace > * { min-width: 0; }

/* ════════════════════════════════════════════════════════════════════════════
   MASTER SETTINGS — FULL NEON OVERHAUL (Part 3, round 2)
   No flat/monochrome boxes left: every input, select, slider track and the close
   button gets a gradient fill + glowing accent. Inputs track the active tab hue.
   ════════════════════════════════════════════════════════════════════════════ */
.sp-cat .sp-select, .sp-cat .sp-num {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sp-accent, #00edcc) 14%, rgba(255,255,255,.02)),
                            rgba(255,255,255,.02)) !important;
  border: 1px solid color-mix(in srgb, var(--sp-accent, #00edcc) 45%, transparent) !important;
  color: #eafcff !important; box-shadow: inset 0 0 10px -6px var(--sp-accent, #00edcc);
}
.sp-cat .sp-select option { background: #0a1020; color: #cfe6ff; }
/* hue + volume slider tracks — glassy with an accent inner glow */
.sp-cat .sp-hue, .sp-cat .sp-vol {
  border: 1px solid color-mix(in srgb, var(--sp-accent, #00edcc) 50%, transparent) !important;
  box-shadow: 0 0 12px -5px var(--sp-accent, #00edcc), inset 0 0 8px -4px rgba(255,255,255,.4);
}
.sp-cat .sp-hue::-webkit-slider-thumb, .sp-cat .sp-vol::-webkit-slider-thumb { border-color: #04101c; }
.sp-cat .sp-dot { box-shadow: 0 0 10px -1px currentColor, 0 0 4px var(--sp-accent, #00edcc); }
/* close button — keep its red identity but make it glow like the rest of the HUD */
#sp-close {
  background: linear-gradient(180deg, rgba(255,90,120,.18), rgba(255,60,90,.06)) !important;
  box-shadow: 0 0 14px -5px rgba(255,80,110,.8), inset 0 0 10px -6px rgba(255,120,140,.7);
}
#sp-close:hover { box-shadow: 0 0 18px -3px rgba(255,80,110,1), inset 0 0 12px -5px rgba(255,140,160,.9); }
/* category section divider rules glow faintly in the accent */
.sp-cat .sp-sec { border-top: 1px solid color-mix(in srgb, var(--sp-accent, #00edcc) 16%, transparent); margin-top: .15rem; }

/* ════════════════════════════════════════════════════════════════════════════
   SETTINGS · LIVE LAYOUT PREVIEW — full reconstruction (Part 4)
   Was a near-black box with 7px grey labels + a 550px earth mostly off-screen, so
   it read as empty. Rebuilt as a vibrant, correctly-scaled miniature dashboard:
   neon screen frame, a titled header strip, glowing module chips with readable
   labels, and a properly-proportioned planet horizon arc at the base.
   ════════════════════════════════════════════════════════════════════════════ */
#sp-preview {
  min-height: 340px !important;
  border: 1px solid rgba(0, 207, 255, .35) !important;
  border-radius: 16px !important;
  /* no !important on background → a user tint (set inline by JS) can still override */
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(0, 207, 255, .12), transparent 55%),
    linear-gradient(180deg, #061226, #030814 72%);
  box-shadow: inset 0 0 36px -10px rgba(0, 207, 255, .35), 0 0 26px -12px rgba(0, 207, 255, .5) !important;
}
/* header strip — frames it as a real "screen" */
#sp-preview::before {
  content: 'VEXTAL OS · LIVE DASHBOARD';
  position: absolute; top: 0; left: 0; right: 0; height: 26px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  font-size: .5rem; font-weight: 700; letter-spacing: 3px; color: #9fe9ff;
  background: linear-gradient(90deg, rgba(0,207,255,.16), rgba(168,85,247,.12) 60%, rgba(0,237,204,.16));
  border-bottom: 1px solid rgba(0, 207, 255, .25); text-shadow: 0 0 8px rgba(0, 207, 255, .6);
}
.spv-title {
  top: 34px !important; font-size: .82rem !important; letter-spacing: 8px !important;
  color: #eafcff !important; text-shadow: 0 0 14px rgba(0, 207, 255, .8) !important; z-index: 2;
}
.spv-grid {
  top: 64px !important; left: 9% !important; right: 9% !important; gap: 12px 10px !important; z-index: 2;
}
.spv-card {
  gap: 7px !important; padding: 7px 2px !important; border-radius: 9px;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.spv-ico {
  width: 24px !important; height: 24px !important; border-radius: 7px !important;
  box-shadow: 0 0 14px -2px currentColor, inset 0 0 8px -3px rgba(255,255,255,.7) !important;
}
.spv-name {
  font-size: .52rem !important; font-weight: 700 !important; letter-spacing: .6px !important;
  color: #d6ecff !important; text-shadow: 0 0 6px rgba(0, 207, 255, .35);
}
/* planet horizon — a clean glowing arc rising from the base, not a 550px overflow */
.spv-earth {
  bottom: -88% !important; width: 150% !important; left: 50% !important;
  background: radial-gradient(circle at 50% 22%, #3a8fe0, #11418f 46%, #061634 74%) !important;
  box-shadow: 0 0 70px rgba(40, 130, 220, .6), inset 0 14px 40px -10px rgba(150, 210, 255, .55) !important;
  border-top: 1px solid rgba(150, 210, 255, .5);
}
.spv-dust { box-shadow: 0 0 12px 2px currentColor !important; }

/* ════════════════════════════════════════════════════════════════════════════
   HARD OVERRIDE LAYER — maximum specificity (#id + !important) so these rules
   beat every earlier/inline style. Fixes (1) landing centering and (3) settings
   that stubbornly rendered monochromatic under higher-specificity base rules.
   ════════════════════════════════════════════════════════════════════════════ */

/* (1) LANDING — force the block dead-centre, shorter, single-line title */
#init-screen {
  justify-content: center !important;
  align-items: center !important;
  gap: 1.4vh !important;
  padding: 2vh 1.2rem !important;
}
#onboarding-wrap { gap: 1.7vh !important; justify-content: center !important; margin: auto !important; }
#ob-line-1 { white-space: nowrap !important; max-width: none !important; }

/* (3) SETTINGS — neon accent that every control inherits, hard-forced */
#settings-panel .sp-tab[data-cat="appearance"],  #settings-panel .sp-cat[data-cat="appearance"]  { --sp-accent: #c084fc; }
#settings-panel .sp-tab[data-cat="environment"], #settings-panel .sp-cat[data-cat="environment"] { --sp-accent: #00edcc; }
#settings-panel .sp-tab[data-cat="sound"],       #settings-panel .sp-cat[data-cat="sound"]       { --sp-accent: #ffb24c; }
#settings-panel .sp-tab[data-cat="system"],      #settings-panel .sp-cat[data-cat="system"]      { --sp-accent: #ff6b81; }

#settings-panel {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(0,207,255,.10), transparent 60%),
    radial-gradient(90% 60% at 100% 110%, rgba(168,85,247,.10), transparent 55%),
    linear-gradient(180deg, rgba(4,8,18,.96), rgba(3,6,14,.97)) !important;
}
#settings-panel .sp-head {
  background: linear-gradient(90deg, #8fe9ff, #c084fc 45%, #ffb24c 75%, #00edcc) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  filter: drop-shadow(0 0 12px rgba(0,207,255,.4)) !important;
}
#settings-panel .sp-tab:hover {
  color: #fff !important; border-color: var(--sp-accent, #00edcc) !important;
  box-shadow: 0 0 14px -5px var(--sp-accent, #00edcc) !important; background: rgba(255,255,255,.06) !important;
}
#settings-panel .sp-tab.active {
  color: #05121f !important;
  background: linear-gradient(120deg, var(--sp-accent, #00edcc), #ffffff 170%) !important;
  border-color: transparent !important;
  box-shadow: 0 0 18px -3px var(--sp-accent, #00edcc), inset 0 0 12px rgba(255,255,255,.25) !important;
}
#settings-panel .sp-cat .sp-sec {
  color: var(--sp-accent, #00edcc) !important; opacity: .95 !important;
  text-shadow: 0 0 10px -2px var(--sp-accent, #00edcc) !important;
  border-top: 1px solid color-mix(in srgb, var(--sp-accent, #00edcc) 18%, transparent) !important;
}
#settings-panel .sp-cat .sp-mrow:hover, #settings-panel .sp-cat .sp-check:hover {
  color: #fff !important; background: rgba(255,255,255,.05) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sp-accent, #00edcc) 38%, transparent) !important;
  border-radius: 8px !important;
}
#settings-panel .sp-cat .sp-check input[type="checkbox"] { accent-color: var(--sp-accent, #00edcc) !important; }
#settings-panel .sp-cat .sp-check:hover input[type="checkbox"] { box-shadow: 0 0 9px var(--sp-accent, #00edcc) !important; }
#settings-panel .sp-cat .sp-select, #settings-panel .sp-cat .sp-num {
  background: linear-gradient(180deg, color-mix(in srgb, var(--sp-accent, #00edcc) 16%, rgba(255,255,255,.02)), rgba(255,255,255,.02)) !important;
  border: 1px solid color-mix(in srgb, var(--sp-accent, #00edcc) 50%, transparent) !important;
  color: #eafcff !important; box-shadow: inset 0 0 10px -6px var(--sp-accent, #00edcc) !important;
}
#settings-panel .sp-cat .sp-select:focus, #settings-panel .sp-cat .sp-num:focus {
  border-color: var(--sp-accent, #00edcc) !important; box-shadow: 0 0 12px -3px var(--sp-accent, #00edcc) !important;
}
#settings-panel .sp-cat .sp-hue, #settings-panel .sp-cat .sp-vol {
  border: 1px solid color-mix(in srgb, var(--sp-accent, #00edcc) 50%, transparent) !important;
  box-shadow: 0 0 12px -5px var(--sp-accent, #00edcc), inset 0 0 8px -4px rgba(255,255,255,.4) !important;
}
#settings-panel .sp-cat .sp-vol::-webkit-slider-thumb { background: var(--sp-accent, #00edcc) !important; box-shadow: 0 0 12px var(--sp-accent, #00edcc) !important; }
#settings-panel .sp-cat .sp-vol-val { color: var(--sp-accent, #00edcc) !important; text-shadow: 0 0 10px -2px var(--sp-accent, #00edcc) !important; }
#settings-panel .sp-cat .sp-dot { box-shadow: 0 0 10px -1px currentColor, 0 0 5px var(--sp-accent, #00edcc) !important; }
#settings-panel #sp-close {
  background: linear-gradient(180deg, rgba(255,90,120,.18), rgba(255,60,90,.06)) !important;
  box-shadow: 0 0 14px -5px rgba(255,80,110,.8), inset 0 0 10px -6px rgba(255,120,140,.7) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   (2) PRODUCTION HARD-CENTER — module workspace can NEVER hug an edge.
   Highest specificity (#id + !important) on every container in the stack: the
   active module view (#module-overlay → its flex child #overlay-ui fills it),
   the workspace wrapper, and the content frame. margin:auto + max-width:1680 in
   a flex column = perfectly centered on any width; !important beats every
   per-module .X-layout rule and the leftover zoom tweaks.
   ════════════════════════════════════════════════════════════════════════════ */
#module-overlay { left: 0 !important; right: 0 !important; }
#overlay-ui {
  width: 100% !important; max-width: 100% !important;
  margin-left: auto !important; margin-right: auto !important; transform: none !important;
}
#universe-workspace {
  width: 100% !important; max-width: 1680px !important;
  margin-left: auto !important; margin-right: auto !important;
  box-sizing: border-box !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   THEMING ENGINE (Pass 1) — Dashboard Templates picker + Module-Text controller.
   Presets feed the same CSS-var engine (applySettings), so one click re-tones the
   whole app instantly. --module-text colours every module's body text uniformly.
   ════════════════════════════════════════════════════════════════════════════ */
.sp-presets { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .2rem 0 .4rem; }
.sp-preset {
  --pc: #00edcc; display: flex; align-items: center; gap: .5rem;
  font-family: inherit; font-size: .62rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: #cfe6ff; cursor: pointer; padding: .5rem .6rem; border-radius: 9px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--pc) 14%, rgba(255,255,255,.02)), rgba(255,255,255,.02));
  border: 1px solid color-mix(in srgb, var(--pc) 38%, transparent);
  transition: box-shadow .2s ease, border-color .2s ease, transform .12s ease, color .2s ease;
}
.sp-preset:hover { color: #fff; border-color: var(--pc); box-shadow: 0 0 16px -5px var(--pc); transform: translateY(-1px); }
.sp-preset.active {
  color: #fff; border-color: var(--pc);
  box-shadow: 0 0 18px -4px var(--pc), inset 0 0 14px -8px var(--pc);
}
.sp-preset-chip {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
  background: var(--pc); box-shadow: 0 0 10px -1px var(--pc), inset 0 0 6px -2px rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.25);
}

/* MODULE-TEXT controller — every module's body text inherits the live var (no
   !important, so coloured accent chips/letters keep their own hues). */
#universe-workspace { color: var(--module-text, #dbe7f5); }

/* ════════════════════════════════════════════════════════════════════════════
   LANDING TRUST SECTIONS — Security Architecture + Powered-By infra strip.
   Cyberpunk-lite over the dark vector environment: hairline rules, translucent
   panels, per-brand accent glows. Fades in gently (no dependency on the JS
   cascade). The landing scrolls if the extra content can't fit a short screen.
   ════════════════════════════════════════════════════════════════════════════ */
#init-screen { overflow-y: auto !important; }

/* transform-only entrance — opacity stays 1 so the block is ALWAYS visible even
   if the animation clock never advances (no risk of an invisible section). */
@keyframes obTrustIn { from { transform: translateY(12px); } to { transform: none; } }

/* ── Security Architecture ── */
#ob-security {
  width: 100%; max-width: 760px; margin: 0 auto;
  border-top: 1px solid rgba(0, 207, 255, .14); border-bottom: 1px solid rgba(0, 207, 255, .14);
  padding: 1.1rem 0; opacity: 1; animation: obTrustIn .8s ease .4s both;
}
.obs-head {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: .62rem; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
  color: #8fe9ff; text-shadow: 0 0 12px rgba(0, 207, 255, .5); margin-bottom: .9rem;
}
.obs-dot { width: 6px; height: 6px; border-radius: 50%; background: #2ee6a6; box-shadow: 0 0 8px #2ee6a6; }
.obs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; text-align: left; }
.obs-item { display: flex; gap: .6rem; align-items: flex-start; }
.obs-item svg {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px;
  fill: none; stroke: #5fe0ff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(0, 207, 255, .55));
}
.obs-item strong { display: block; font-size: .74rem; font-weight: 700; color: #eaf6ff; letter-spacing: .3px; margin-bottom: .15rem; }
.obs-item span { display: block; font-size: .64rem; line-height: 1.5; color: #93acc4; }

/* ── Powered By — infrastructure chips ── */
#ob-infra {
  width: 100%; max-width: 820px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  opacity: 1; animation: obTrustIn .8s ease .6s both;
}
.obi-label { font-size: .54rem; font-weight: 700; letter-spacing: 3.5px; color: #62788f; }
.obi-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; }
.obi-chip {
  --b: #00edcc;
  display: inline-flex; align-items: center; gap: .42rem;
  font-size: .64rem; font-weight: 600; letter-spacing: 1px; color: #d3e6f5;
  padding: .4rem .7rem; border-radius: 999px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--b) 13%, rgba(255,255,255,.02)), rgba(255,255,255,.015));
  border: 1px solid color-mix(in srgb, var(--b) 38%, transparent);
  transition: border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.obi-chip svg { width: 14px; height: 14px; fill: var(--b); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--b) 70%, transparent)); }
.obi-chip:hover { border-color: var(--b); box-shadow: 0 0 16px -5px var(--b); transform: translateY(-1px); }

@media (max-width: 760px) {
  .obs-grid { grid-template-columns: 1fr; gap: .7rem; }
  #ob-security { max-width: 100%; }
}