@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --bg:      #05080f;
  --bg-2:    #080c18;
  --bg-3:    #0c1120;
  --bg-4:    #101828;
  --bg-5:    #141f30;
  --bg-6:    #192538;

  --line:    rgba(255,255,255,.06);
  --line-hi: rgba(255,255,255,.11);

  --blue:    #2563eb;
  --blue-hi: #3b82f6;
  --blue-lo: rgba(37,99,235,.12);
  --cyan:    #06b6d4;
  --cyan-lo: rgba(6,182,212,.1);
  --purple:  #8b5cf6;

  --t-1: #eef4ff;
  --t-2: #8ba3c7;
  --t-3: #3d5278;

  --green:    #10b981;
  --green-lo: rgba(16,185,129,.1);
  --red:      #ef4444;
  --red-lo:   rgba(239,68,68,.1);
  --amber:    #f59e0b;
  --amber-lo: rgba(245,158,11,.1);

  --f:      'Inter', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', monospace;

  --r-xs:4px; --r-sm:7px; --r-md:11px; --r-lg:16px;
  --r-xl:20px; --r-2xl:28px; --r-full:9999px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,.4);
  --shadow-md:  0 4px 24px rgba(0,0,0,.4);
  --shadow-lg:  0 16px 64px rgba(0,0,0,.6), 0 4px 16px rgba(0,0,0,.4);
  --shadow-glow-blue: 0 0 48px rgba(37,99,235,.28);
  --shadow-glow-cyan: 0 0 36px rgba(6,182,212,.22);

  --nav-h:     64px;
  --nav-bar-h: 64px;
  --announce-h: 34px;
  --sidebar-w:  228px;

  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --ease-back:  cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html {
  font-size: 16px;
  /* Smooth scrolling everywhere, but only if user hasn't opted out */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
body {
  font-family: var(--f);
  background: var(--bg);
  color: var(--t-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
a { color:inherit; text-decoration:none; }
button { font-family:var(--f); cursor:pointer; border:none; background:none; }
input, select, textarea { font-family:var(--f); }
ul, ol { list-style:none; }
img { display:block; max-width:100%; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--bg-6); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:var(--t-3); }
::selection { background:rgba(37,99,235,.35); color:#fff; }

/* ── Page system ── */
.page { display:none; }
.page.is-active { display:block; }
#page-dashboard.is-active, #page-admin.is-active { display:flex; flex-direction:column; }
.view { display:none; }
.view.is-active { display:block; }

/* ── Global keyframes ── */
@keyframes fadeUp     { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes fadeIn     { from{opacity:0} to{opacity:1} }
@keyframes spin       { to{transform:rotate(360deg)} }
@keyframes pulse      { 0%,100%{opacity:1}50%{opacity:.25} }
@keyframes glow       { 0%,100%{box-shadow:0 0 24px rgba(37,99,235,.3)}50%{box-shadow:0 0 52px rgba(37,99,235,.7)} }
@keyframes shimmer    { 0%{background-position:200% 0}100%{background-position:-200% 0} }
@keyframes float      { 0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)} }
@keyframes barGrow    { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes modalIn    { from{opacity:0;transform:translateY(18px) scale(.97)} to{opacity:1;transform:none} }
@keyframes slideInR   { from{opacity:0;transform:translateX(14px)} to{opacity:1;transform:none} }
@keyframes snowFall   { 0%{transform:translateY(0) rotate(0deg);opacity:0}10%{opacity:1}90%{opacity:.4}100%{transform:translateY(220px) rotate(540deg);opacity:0} }