/* ══════════════════════════════════════════════════════════════════════
   NovaStudios — shared design system (brand violet: deep indigo → vivid purple)
   Referenced by Design-Agent A (shell/mobile/login) + Design-Agent B (pages).
   Tokens + helper classes are STABLE — do not rename.
   ══════════════════════════════════════════════════════════════════════ */

:root{--ns-b1:#6d28d9;--ns-b2:#8b5cf6;--ns-b3:#a855f7;--ns-b4:#c084fc;--ns-deep:#4c1d95;--ns-fyp:#d946ef}

/* ── Scrollbars (branded, thin) ─────────────────────────────────────── */
*{scrollbar-width:thin;scrollbar-color:#4c1d95 transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:linear-gradient(#6d28d9,#a855f7);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}

/* ── Focus ring ─────────────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--ns-b2);outline-offset:2px}

/* ── Reveal-on-load ─────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(14px);animation:nsReveal .6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes nsReveal{to{opacity:1;transform:none}}

/* ── Glass cards ────────────────────────────────────────────────────── */
.ns-card{position:relative;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 20px 40px -24px rgba(0,0,0,.7);backdrop-filter:blur(12px);transition:border-color .25s,box-shadow .25s,transform .25s}
.ns-card:hover{border-color:rgba(168,85,247,.35);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 26px 60px -26px rgba(124,58,237,.45)}
.ns-card-accent{border:1px solid transparent;background:linear-gradient(180deg,rgba(20,12,38,.72),rgba(15,10,28,.72)) padding-box,linear-gradient(135deg,var(--ns-b1),var(--ns-b3) 55%,var(--ns-fyp)) border-box;box-shadow:0 24px 60px -28px rgba(124,58,237,.55)}

/* ── Icon chip ──────────────────────────────────────────────────────── */
.ns-chip{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--ns-b1),var(--ns-b3));color:#fff;box-shadow:0 8px 20px -8px rgba(139,92,246,.8)}

/* ── Inputs ─────────────────────────────────────────────────────────── */
.ns-in{width:100%;background:rgba(2,6,23,.6);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:.6rem .8rem;font-size:.875rem;color:#fff;transition:border-color .2s,box-shadow .2s}
.ns-in::placeholder{color:#64748b}
.ns-in:focus{outline:none;border-color:var(--ns-b2);box-shadow:0 0 0 3px rgba(139,92,246,.22)}

/* ── Primary button (gradient + shimmer + glow) ─────────────────────── */
.ns-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,var(--ns-b1),var(--ns-b3));color:#fff;font-weight:600;font-size:.875rem;border-radius:12px;padding:.62rem 1.15rem;cursor:pointer;box-shadow:0 10px 26px -10px rgba(139,92,246,.8);transition:transform .18s,box-shadow .18s,filter .18s}
.ns-btn:hover{transform:translateY(-1px);filter:brightness(1.07);box-shadow:0 16px 34px -12px rgba(168,85,247,.9)}
.ns-btn:active{transform:translateY(0)}
.ns-btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg)}
.ns-btn:hover::after{animation:nsShimmer .9s ease}
@keyframes nsShimmer{to{left:140%}}

/* ── Gradient text ──────────────────────────────────────────────────── */
.grad-text{background:linear-gradient(120deg,#fff,#d8b4fe 45%,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── Aurora hero background (contained, subtle, slow drift) ─────────── */
.ns-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ns-aurora .ns-blob{position:absolute;border-radius:9999px;filter:blur(80px);opacity:.28;will-change:transform}
.ns-aurora .ns-b1{width:460px;height:460px;top:-140px;left:-80px;background:radial-gradient(circle at 30% 30%,#7c3aed,transparent 70%);animation:nsFloaty 18s ease-in-out infinite}
.ns-aurora .ns-b2{width:520px;height:520px;top:-60px;right:-120px;background:radial-gradient(circle at 60% 40%,#a855f7,transparent 70%);animation:nsFloaty 22s ease-in-out infinite reverse}
.ns-aurora .ns-b3{width:380px;height:380px;bottom:-120px;left:40%;background:radial-gradient(circle at 50% 50%,#c026d3,transparent 70%);opacity:.18;animation:nsFloaty 26s ease-in-out infinite}
@keyframes nsFloaty{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(24px,26px) scale(1.06)}}

/* ── Pill ───────────────────────────────────────────────────────────── */
.ns-pill{display:inline-flex;align-items:center;gap:.3rem;font-size:11px;line-height:1;padding:.3rem .6rem;border-radius:9999px;font-weight:600;color:#e9d5ff;background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.35)}

/* ── Live status dot ────────────────────────────────────────────────── */
.ns-live-dot{width:7px;height:7px;border-radius:9999px;background:#a855f7;box-shadow:0 0 0 0 rgba(168,85,247,.7);animation:nsPing 1.8s ease-out infinite;display:inline-block}
@keyframes nsPing{0%{box-shadow:0 0 0 0 rgba(168,85,247,.55)}70%,100%{box-shadow:0 0 0 8px rgba(168,85,247,0)}}

/* ══════════════════════════════════════════════════════════════════════
   SHELL — sidebar branding (base.html)
   ══════════════════════════════════════════════════════════════════════ */

/* Active nav item = brand violet gradient (replaces flat indigo-600) */
#sidebar .ns-nav-active{
  background:linear-gradient(135deg,var(--ns-b1),var(--ns-b3))!important;
  color:#fff!important;
  box-shadow:0 8px 22px -10px rgba(139,92,246,.85);
}
#sidebar .ns-nav-active:hover{filter:brightness(1.05)}

/* Sidebar gets a subtle brand tint + right edge glow */
#sidebar{background:linear-gradient(185deg,#120b26 0%,#0b0718 55%,#0a0616 100%)!important;border-right:1px solid rgba(139,92,246,.12)}
#sidebar nav a,#sidebar nav button{border:1px solid transparent}
/* Inactive hover = faint violet glass instead of flat slate */
#sidebar nav a:hover:not(.ns-nav-active),
#sidebar nav button:hover{background:rgba(139,92,246,.10)!important;color:#fff!important}

/* Touch targets ≥44px on mobile */
@media (max-width:767px){
  #sidebar nav a,#sidebar nav button{min-height:44px}
}

/* Mobile drawer polish: soft shadow + backdrop blur on the overlay */
@media (max-width:767px){
  #sidebar{box-shadow:0 0 0 1px rgba(139,92,246,.12),24px 0 60px -20px rgba(0,0,0,.8)}
  #sidebarOverlay{background:rgba(6,4,15,.55)!important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
}

/* Mobile header = brand-tinted glass */
html.dark #mobileHeader{
  background:rgba(11,7,24,.85)!important;
  border-color:rgba(139,92,246,.18)!important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}