/* ── Scroll progress (funky gradient) ── */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:var(--grad);
  background-size:300% 100%;
  animation:gradShift 6s linear infinite;
  z-index:200;will-change:width;
  box-shadow:0 0 14px var(--glow);
  border-radius:0 3px 3px 0;
}

/* ═══════════════════════════════════════════════════════════
   Premium glossy theme toggle (single source of truth)
═══════════════════════════════════════════════════════════ */
.theme-toggle{
  position:relative;width:58px;height:30px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:999px;cursor:none;flex-shrink:0;
  display:flex;align-items:center;padding:3px;overflow:hidden;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35),0 0 0 0 transparent;
  transition:background .45s,border-color .45s,box-shadow .45s;
}
.theme-toggle::before{
  content:'';position:absolute;inset:0;border-radius:999px;
  background:var(--grad);background-size:200% 100%;
  opacity:0;transition:opacity .45s;animation:gradShift 6s linear infinite;
}
[data-theme="light"] .theme-toggle::before{opacity:.22}
.theme-toggle:hover{border-color:var(--accent);box-shadow:inset 0 2px 6px rgba(0,0,0,.25),0 0 18px -4px var(--glow)}

.theme-toggle-knob{
  position:relative;z-index:1;width:22px;height:22px;border-radius:50%;
  background:var(--grad-soft);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.4),inset 0 1px 1px rgba(255,255,255,.5);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),background .45s;
  flex-shrink:0;
}
[data-theme="light"] .theme-toggle-knob{transform:translateX(28px)}
.theme-toggle-knob svg{
  width:11px;height:11px;stroke:var(--bg);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s;
}
.theme-toggle .icon-moon{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:12px;height:12px;stroke:var(--ink-dim);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:opacity .3s;
}
[data-theme="light"] .theme-toggle .icon-moon{opacity:0}
[data-theme="dark"] .theme-toggle-knob svg{opacity:1}
[data-theme="light"] .theme-toggle-knob svg{opacity:0}

/* ── Side rail ── */
.rail{
  position:fixed;right:24px;top:50%;transform:translateY(-50%);
  z-index:50;display:flex;flex-direction:column;gap:18px;mix-blend-mode:difference;
}
.rail-item{
  width:22px;height:2px;background:rgba(255,255,255,.4);position:relative;
  cursor:none;border-radius:2px;
  transition:width .45s cubic-bezier(.2,.8,.2,1),background .3s;
}
.rail-item:hover{width:36px}
.rail-item.active{width:46px;background:var(--accent)}
.rail-item::after{
  content:attr(data-label);position:absolute;right:30px;top:50%;
  transform:translateY(-50%);font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.14em;color:#fff;white-space:nowrap;
  opacity:0;transition:opacity .3s;
}
.rail-item.active::after,.rail-item:hover::after{opacity:1}
@media(max-width:900px){.rail{display:none}}