/* === layout.css YOUR ORIGINAL CSS (kept & tokenized) ======================= */
:root{
  /* Dark (baseline) */
  --bg:#000;            /* page background */
  --fg:#fff;            /* primary text */
  --muted:#9ca3af;      /* secondary text */
  --blue:#1676d8;
  --green:#06a06b;
  --red:#c3122b;
  --border:#1a1a1a;

  /* NEW surface tokens to remove hardcoded colors */
  --surface:#0a0a0a;    /* panels/strips */
  --surface-2:#000;     /* gradient end */
  --chip:#050505;       /* small tiles/badges */
  --input-bg:#0a0a0a;   /* inputs */
  --input-ink:#fff;
  --btn-bg:#0a0a0a;
  --btn-ink:#fff;

  /* Glow defaults (you already had these later; kept here for clarity) */
  --glow-core: rgba(40,160,255,.55);
  --glow-ring: rgba(40,160,255,.28);
  --glow-fade: rgba(0,0,0,0);

  /* Cursor pos (JS updates) */
  --mx: 50vw;
  --my: 50vh;
}

/* LIGHT MODE: when JS toggles body.theme-light */
body.theme-light{
  --bg:#dff0ff;
  --fg:#000;
  --muted:#2f2f2f;
  --blue:#1a6fb8;
  --green:#147a38;
  --red:#b21d1d;
  --border:#b7d6ff;

  --surface:#eaf4ff;
  --surface-2:#dff0ff;
  --chip:#cfe8ff;
  --input-bg:#ffffff;
  --input-ink:#000000;
  --btn-bg:#cfe8ff;
  --btn-ink:#000000;

  /* soften glow on light backgrounds */
  --glow-core: rgba(40,160,255,.35);
  --glow-ring: rgba(40,160,255,.18);
  --glow-fade: rgba(223,240,255,0);
}

/* Base canvas + typography */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--fg);
  font-family:Segoe UI,system-ui,-apple-system,Roboto,Ubuntu,"Noto Sans",sans-serif
}

/* Layout grid */
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}

/* Sidebar */
.sidebar{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border-right:1px solid var(--border); padding:14px
}
.sb-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sb-logo{
  width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--border);border-radius:8px;background:var(--chip); color:var(--fg)
}
.sb-title{font-weight:700}
.sb-sub{font-size:12px;color:var(--muted)}

/* Nav */
.nav{list-style:none;margin:0;padding:0}
.nav a{
  display:flex;align-items:center;gap:10px;padding:9px 10px;margin:4px 0;
  border:1px solid var(--border);border-radius:10px;text-decoration:none;
  color:var(--fg);
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
}
.nav a:hover{border-color: var(--blue); box-shadow:0 0 18px rgba(22,118,216,.18) inset}
.nav a.active{border-color: var(--blue)}

/* Header */
.header{
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,var(--surface),var(--surface-2))
}
.head-wrap{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:12px}
.toggler{
  background:var(--chip); border:1px solid var(--border); color:var(--fg);
  border-radius:10px;padding:8px 10px;cursor:pointer
}
.brand{font-weight:700;letter-spacing:.3px}

/* Search */
.search{display:flex;gap:8px}
.search input{
  background:var(--input-bg); border:1px solid var(--border); color:var(--input-ink);
  border-radius:10px;padding:10px;min-width:260px
}

/* Buttons */
.btn{
  border:1px solid var(--border); border-radius:10px; padding:9px 12px;
  background:var(--btn-bg); color:var(--btn-ink); cursor:pointer
}
.btn.blue{border-color:#233a55} .btn.green{border-color:#0b4c3a} .btn.red{border-color:#5a0e18}

/* Main & cards */
.main{padding:14px}
.card{
  border:1px solid var(--border); border-radius:16px;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  box-shadow:inset 0 0 18px rgba(255,255,255,.03)
}

/* Forms */
.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.fg-3{grid-column:span 3} .fg-4{grid-column:span 4} .fg-6{grid-column:span 6} .fg-12{grid-column:span 12}
.input, select{
  width:100%; background:var(--input-bg); border:1px solid var(--border);
  color:var(--input-ink); border-radius:10px; padding:10px
}

/* Tables */
.table{width:100%;border-collapse:separate;border-spacing:0;margin-top:8px}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px}
.table th{background:var(--surface);text-align:left;color:var(--fg)}

/* KBD */
.kbd{border:1px solid var(--border);padding:2px 6px;border-radius:6px;background:var(--chip);color:var(--fg)}

/* Responsive */
@media (max-width: 980px){
  .app{grid-template-columns:1fr}
  .sidebar{position:sticky;top:0}
  .search input{min-width:0;width:100%}
}

/* === YOUR GLOW OVERRIDES (kept) ==================================== */
.glowable::before{
  background:
    radial-gradient(520px 520px at var(--mx) var(--my),
      var(--glow-core) 0%,
      var(--glow-ring) 42%,
      var(--glow-fade) 70%);
  opacity:.95;
  mix-blend-mode: screen;
  will-change: background;
}
.sidebar.glowable::before{ opacity:.85; }
.header.glowable::before{ opacity:.9; }

.tile::before{
  background:
    radial-gradient(420px 420px at var(--mx) var(--my),
      rgba(40,160,255,.40) 0%,
      rgba(40,160,255,.20) 45%,
      rgba(0,0,0,0) 72%);
}
.tile:hover::before{ opacity:1; }

.nav a::after{
  background:
    radial-gradient(340px 340px at var(--mx) var(--my),
      rgba(42,163,255,.35) 0%,
      rgba(42,163,255,.16) 45%,
      rgba(0,0,0,0) 75%);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .glowable::before,
  .tile::before,
  .nav a::after{ transition: none; }
}

/* === ADDITION: global full-viewport cursor glow overlay ============ */
#cursorGlow{
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 2147483647;
  mix-blend-mode: screen;
  background:
    radial-gradient(520px 520px at var(--mx) var(--my),
      var(--glow-core) 0%,
      var(--glow-ring) 42%,
      var(--glow-fade) 70%);
  opacity: .9;
  transition: opacity .12s ease;
}
@media (max-width:980px){
  #cursorGlow{
    background:
      radial-gradient(640px 640px at var(--mx) var(--my),
        var(--glow-core) 0%,
        var(--glow-ring) 42%,
        var(--glow-fade) 70%);
    opacity: .95;
  }
}