/* ==========================================================================
   QMSoft — "Aurora" Design System v3
   World-class premium aesthetic. Load once via <link>; it retemes the app.
   ========================================================================== */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Design tokens ---------- */
:root{
  /* Core palette — deep navy + royal indigo + violet + saffron gold */
  --ink-950:#07081A;
  --ink-900:#0E1230;
  --ink-800:#161B45;
  --ink-700:#1F2660;
  --ink-600:#2D3785;
  --ink-500:#4F5BB5;
  --ink-400:#8993D0;
  --ink-300:#B8BFE3;
  --ink-200:#D7DCF0;
  --ink-100:#EAEDF8;
  --ink-50:#F4F5FB;

  --violet-600:#6D3CF0;
  --violet-500:#8B5CF6;
  --violet-400:#A78BFA;

  --indigo-600:#4338CA;
  --indigo-500:#6366F1;

  /* Saffron / accent (evokes Indian educational heritage) */
  --gold-600:#C68612;
  --gold-500:#F59E0B;
  --gold-400:#FBBF24;
  --gold-300:#FCD34D;

  /* Semantic */
  --emerald-500:#10B981;
  --emerald-400:#34D399;
  --rose-500:#F43F5E;
  --rose-400:#FB7185;
  --cyan-500:#06B6D4;

  /* Surfaces */
  --bg:#F4F5FB;
  --bg-app:radial-gradient(1200px 600px at 10% -10%, rgba(139,92,246,0.14), transparent 60%),
          radial-gradient(900px 500px at 110% 10%, rgba(99,102,241,0.12), transparent 60%),
          radial-gradient(800px 600px at 50% 110%, rgba(245,158,11,0.08), transparent 60%),
          linear-gradient(180deg, #F4F5FB 0%, #EDEFF8 100%);
  --surface:#FFFFFF;
  --surface-muted:#F8F9FD;
  --border:rgba(15, 23, 66, 0.08);
  --border-strong:rgba(15, 23, 66, 0.14);

  /* Gradients */
  --grad-primary:linear-gradient(135deg, #4338CA 0%, #6D3CF0 50%, #8B5CF6 100%);
  --grad-primary-hover:linear-gradient(135deg, #3730A3 0%, #5B28E0 50%, #7C3AED 100%);
  --grad-gold:linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
  --grad-emerald:linear-gradient(135deg, #059669 0%, #34D399 100%);
  --grad-rose:linear-gradient(135deg, #E11D48 0%, #FB7185 100%);
  --grad-cyan:linear-gradient(135deg, #0891B2 0%, #22D3EE 100%);
  --grad-hero:linear-gradient(120deg, #0E1230 0%, #2D3785 45%, #6D3CF0 100%);
  --grad-aurora:linear-gradient(135deg, #6D3CF0 0%, #4338CA 35%, #0E1230 75%);

  /* Shadows — layered & premium */
  --shadow-sm:0 1px 2px rgba(15,23,66,0.06), 0 1px 3px rgba(15,23,66,0.04);
  --shadow:0 4px 10px -2px rgba(15,23,66,0.08), 0 12px 30px -8px rgba(15,23,66,0.10);
  --shadow-lg:0 10px 20px -6px rgba(15,23,66,0.12), 0 28px 60px -16px rgba(69,39,160,0.22);
  --shadow-glow:0 8px 24px -6px rgba(109,60,240,0.45);
  --shadow-gold:0 8px 24px -6px rgba(245,158,11,0.40);

  /* Radii */
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-xl:28px;

  /* Motion */
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Base ---------- */
html, body{
  font-family:'Sora', system-ui, -apple-system, sans-serif;
  font-feature-settings:'ss01','cv11';
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color:var(--ink-900);
  background:var(--bg) !important;
  letter-spacing:-0.005em;
}
body{
  background:var(--bg-app) !important;
  background-attachment:fixed;
  min-height:100vh;
}

/* Subtle grain overlay for premium feel */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  opacity:0.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
}
main, nav, #nav, .relative, .absolute{ position:relative; }
main{ z-index:1; }

/* Selection */
::selection{ background:rgba(109,60,240,0.22); color:var(--ink-950); }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(15,23,66,0.12); border-radius:10px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(109,60,240,0.35); background-clip:content-box; border:2px solid transparent; }

/* ---------- Typography helpers ---------- */
.serif{ font-family:'Instrument Serif', 'Sora', serif; font-weight:400; letter-spacing:-0.01em; }
.mono{ font-family:'JetBrains Mono', monospace; }
h1, h2, h3, .font-bold{ letter-spacing:-0.02em; }
.display{ font-family:'Instrument Serif', serif; font-weight:400; font-style:italic; }

/* ---------- Card rework ---------- */
.card{
  background:var(--surface) !important;
  border-radius:var(--r-lg) !important;
  border:1px solid var(--border) !important;
  box-shadow:var(--shadow-sm) !important;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out) !important;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 30%);
  pointer-events:none;
  opacity:0.6;
  border-radius:inherit;
}
.card > *{ position:relative; z-index:1; }
.card:hover{
  transform:translateY(-3px) !important;
  box-shadow:var(--shadow-lg) !important;
  border-color:var(--border-strong) !important;
}

/* Stat top-border -> now replaced with left gradient bar + subtle tint */
.stat-blue, .stat-amber, .stat-red, .stat-green, .stat-purple{
  border-top:none !important;
  position:relative;
}
.stat-blue::after, .stat-amber::after, .stat-red::after, .stat-green::after, .stat-purple::after{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:4px;
  border-radius:var(--r-lg) 0 0 var(--r-lg);
  z-index:2;
}
.stat-blue::after{ background:var(--grad-primary); }
.stat-green::after{ background:var(--grad-emerald); }
.stat-amber::after{ background:var(--grad-gold); }
.stat-red::after{ background:var(--grad-rose); }
.stat-purple::after{ background:linear-gradient(135deg,#8B5CF6,#A78BFA); }

/* Icon badges — richer */
.icon-badge{
  width:40px; height:40px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.6), 0 6px 14px -6px rgba(15,23,66,0.15);
}

/* ---------- Navbar override (targets the renderNavbar output) ---------- */
nav.sticky{
  background:var(--grad-aurora) !important;
  box-shadow:0 8px 24px -8px rgba(14,18,48,0.4), inset 0 -1px 0 rgba(255,255,255,0.08) !important;
  position:relative;
  overflow:hidden;
}
nav.sticky::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(600px 150px at 15% 0%, rgba(139,92,246,0.35), transparent 60%),
    radial-gradient(500px 150px at 85% 100%, rgba(251,191,36,0.18), transparent 60%);
  pointer-events:none;
}
nav.sticky > div{ position:relative; z-index:1; }
nav.sticky a, nav.sticky button, nav.sticky span{ position:relative; }

/* Active nav link — keep white background but style properly */
nav.sticky a[style*="background:rgba(255,255,255,0.95)"]{
  background:rgba(255,255,255,0.98) !important;
  color:var(--ink-800) !important;
  box-shadow:0 2px 12px rgba(14,18,48,0.25);
}

/* ---------- Buttons ---------- */
.btn-brand{
  background:var(--grad-primary) !important;
  color:#fff !important;
  box-shadow:var(--shadow-glow) !important;
  border:none;
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), filter .25s var(--ease-out) !important;
  letter-spacing:0.01em;
  font-weight:600;
}
.btn-brand:hover{
  background:var(--grad-primary-hover) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 14px 34px -8px rgba(109,60,240,0.55) !important;
  filter:brightness(1.04);
}
.btn-brand:active{ transform:translateY(0) !important; }

/* Generic button polish */
button:not([class*="toast"]):not(.btn-brand){
  transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s;
}

/* ---------- Inputs ---------- */
.inp,
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]),
select, textarea{
  background:#fff !important;
  border:1.5px solid var(--border) !important;
  border-radius:var(--r) !important;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
  color:var(--ink-900);
}
.inp:focus,
input:focus:not([type=checkbox]):not([type=radio]),
select:focus, textarea:focus{
  background:#fff !important;
  border-color:var(--violet-500) !important;
  box-shadow:0 0 0 4px rgba(109,60,240,0.12) !important;
  outline:none;
}
input::placeholder, textarea::placeholder{ color:var(--ink-400); }

/* ---------- Animations ---------- */
@keyframes auroraShift{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  50%{ transform:translate(2%,-2%) rotate(1deg); }
}
@keyframes fadeUp{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes shimmer{ 0%{background-position:-400px 0} 100%{background-position:400px 0} }
@keyframes pulseGlow{ 0%,100%{box-shadow:0 0 0 0 rgba(109,60,240,0.4)} 50%{box-shadow:0 0 0 10px rgba(109,60,240,0)} }

.fade-up,.fade-up2,.fade-up3,.fade-up4,.fade-up5{ animation:fadeUp .55s var(--ease-out) both !important; }
.fade-up2{ animation-delay:.08s !important; }
.fade-up3{ animation-delay:.16s !important; }
.fade-up4{ animation-delay:.24s !important; }
.fade-up5{ animation-delay:.32s !important; }
.float{ animation:float 5s ease-in-out infinite; }
.pulse-glow{ animation:pulseGlow 2.5s ease-in-out infinite; }

/* Shimmer for skeletons */
.animate-pulse{
  background:linear-gradient(90deg, #EDEFF8 0%, #F8F9FD 50%, #EDEFF8 100%) !important;
  background-size:400px 100% !important;
  animation:shimmer 1.6s linear infinite !important;
}

/* ---------- Table polish ---------- */
table{ border-collapse:separate; border-spacing:0; }
thead th{
  background:var(--surface-muted) !important;
  color:var(--ink-600) !important;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-size:11px;
  border-bottom:1px solid var(--border) !important;
}
tbody tr{ transition:background-color .18s; }
tbody tr:hover{ background:var(--surface-muted) !important; }

/* ---------- Badges / chips ---------- */
.badge,
span[class*="rounded-full"][class*="px-"]{
  font-weight:600;
  letter-spacing:0.01em;
}

/* ---------- Utility: glass panel ---------- */
.glass{
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:var(--shadow);
}
.glass-dark{
  background:rgba(14,18,48,0.55);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,0.1);
}

/* Aurora orb backgrounds — add <div class="aurora"></div> anywhere */
.aurora{
  position:absolute; inset:-20%;
  z-index:0;
  pointer-events:none;
  filter:blur(80px) saturate(1.4);
  opacity:0.55;
  animation:auroraShift 18s ease-in-out infinite;
}
.aurora::before,.aurora::after{
  content:""; position:absolute; border-radius:50%;
}
.aurora::before{
  width:52%; height:52%; top:-10%; left:-10%;
  background:radial-gradient(circle, #6D3CF0 0%, transparent 60%);
}
.aurora::after{
  width:46%; height:46%; bottom:-10%; right:-5%;
  background:radial-gradient(circle, #F59E0B 0%, transparent 60%);
}

/* Headings default to Sora — but allow serif opt-in */
h1.serif, h2.serif, h3.serif,
h1.display, h2.display, h3.display{
  font-family:'Instrument Serif', serif;
  font-weight:400;
  letter-spacing:-0.015em;
}

/* Make color swatches used inline look smarter */
[style*="color:#1A2456"]{ color:var(--ink-800) !important; }
[style*="color:#6B7A99"]{ color:var(--ink-500) !important; }
[style*="color:#9AA3B8"]{ color:var(--ink-400) !important; }
[style*="background:#EEF2F7"]:not(body):not(html){ background:var(--surface-muted) !important; }
[style*="background:#F5F7FB"]{ background:var(--surface-muted) !important; }
[style*="border-color:#E4EAF5"]{ border-color:var(--border) !important; }
[style*="border-color:#D9E2F5"]{ border-color:var(--border) !important; }
[style*="background:#D9E2F5"]{ background:rgba(109,60,240,0.08) !important; }
[style*="color:#3B5BBD"]{ color:var(--indigo-600) !important; }
[style*="background:#3B5BBD"]{ background:var(--grad-primary) !important; }