/* =========================================================================
   CLASSFLOW — "The Ledger"
   A lecture workspace styled like a well-kept binder: dark ink spine,
   warm paper pages, rubber-stamp accents for the things that matter
   (lecture numbers, due dates, grades). Built for coaching institutes
   and solo teachers who outgrew a WhatsApp group.
   ========================================================================= */

/* ---------- 0. TOKENS ---------- */
:root{
  /* ink (dark surfaces) */
  --ink-950:#0B1610;
  --ink-900:#0F2016;
  --ink-800:#17301F;
  --ink-700:#20402A;
  --ink-600:#2C5439;
  --ink-line:rgba(247,242,228,.10);
  --ink-line-strong:rgba(247,242,228,.20);

  /* paper (light surfaces) */
  --paper-100:#FDF9EE;
  --paper-200:#F7F0DC;
  --paper-300:#EEE1BE;
  --paper-ink:#20291F;
  --paper-ink-soft:#5B6555;
  --paper-line:rgba(32,41,31,.12);
  --paper-line-strong:rgba(32,41,31,.22);

  /* accents */
  --gold-400:#EAC372;
  --gold-500:#D9A441;
  --gold-600:#AD7C28;
  --teal-300:#9CD6C6;
  --teal-500:#3E8074;
  --teal-700:#295A51;
  --brick-500:#B5503A;
  --brick-soft:rgba(181,80,58,.14);
  --success-500:#4C9A5C;
  --success-soft:rgba(76,154,92,.14);

  /* text on dark */
  --text-strong:#F6F1E3;
  --text-soft:#C9D4C6;
  --text-mute:#84958A;

  /* type */
  --font-display:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  /* shape / motion */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;
  --sh-sm:0 1px 3px rgba(6,12,9,.35);
  --sh-md:0 10px 26px -12px rgba(6,12,9,.5);
  --sh-lg:0 24px 56px -20px rgba(6,12,9,.6);
  --ease:cubic-bezier(.22,1,.36,1);
  --dur-f:140ms; --dur-m:260ms; --dur-s:440ms;

  --sidebar-w:236px;
  --topbar-h:68px;
  --max-w:1180px;
}

/* ---------- 1. RESET / BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; min-height:100vh;
  background:var(--ink-950);
  color:var(--text-strong);
  font-family:var(--font-body);
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; color:inherit; letter-spacing:-.01em; }
p{ margin:0; }
a{ color:inherit; }
button, input, select, textarea{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }
ul{ list-style:none; margin:0; padding:0; }
::selection{ background:var(--gold-500); color:var(--ink-950); }

:focus-visible{ outline:2px solid var(--gold-400); outline-offset:2px; border-radius:4px; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--ink-600); border-radius:99px; border:2px solid var(--ink-950); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

.material-symbols,
.icon{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; line-height:0; }
.icon svg{ width:1em; height:1em; }

/* generic empty state */
.empty-text{ color:var(--text-mute); font-size:13.5px; padding:6px 0; }
.card .empty-text{ color:var(--paper-ink-soft); }

/* ---------- 2. TYPE UTILITIES ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-400);
}
.card .eyebrow{ color:var(--gold-600); }

/* ---------- 3. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:var(--r-pill);
  font-weight:600; font-size:14px; white-space:nowrap;
  transition:transform var(--dur-f) var(--ease), box-shadow var(--dur-f) var(--ease), background var(--dur-f) var(--ease), border-color var(--dur-f) var(--ease);
  border:1px solid transparent;
}
.btn:active{ transform:translateY(1px) scale(.98); }
.btn-sm{ padding:7px 14px; font-size:13px; }

.btn-stamp{
  background:var(--gold-500); color:#241704; box-shadow:var(--sh-sm);
}
.btn-stamp:hover{ background:var(--gold-400); box-shadow:0 8px 20px -8px rgba(217,164,65,.55); transform:translateY(-1px); }

.btn-ink{
  background:var(--ink-800); color:var(--text-strong); border-color:var(--ink-line-strong);
}
.btn-ink:hover{ background:var(--ink-700); border-color:var(--gold-400); }

.btn-ghost{
  background:transparent; color:var(--text-soft); border-color:var(--ink-line-strong);
}
.btn-ghost:hover{ color:var(--text-strong); border-color:var(--gold-400); }

.btn-outline-paper{
  background:transparent; color:var(--paper-ink); border-color:var(--paper-line-strong);
}
.btn-outline-paper:hover{ border-color:var(--gold-600); background:var(--paper-300); }

.btn-solid-paper{
  background:var(--paper-ink); color:var(--paper-100);
}
.btn-solid-paper:hover{ background:#111a0d; }

.btn-danger{
  background:transparent; color:var(--brick-500); border-color:var(--brick-soft);
}
.btn-danger:hover{ background:var(--brick-soft); }

.btn-link{
  background:none; padding:4px 0; font-weight:600; font-size:13.5px; color:var(--teal-300);
  border-radius:0; text-decoration:none;
}
.card .btn-link{ color:var(--teal-700); }
.btn-link:hover{ text-decoration:underline; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }


/* ---------- 4. PUBLIC SHELL (landing / marketing) ---------- */
.public-shell{ min-height:100vh; background:
  radial-gradient(1100px 520px at 12% -10%, rgba(217,164,65,.16), transparent 60%),
  radial-gradient(900px 480px at 100% 0%, rgba(62,128,116,.16), transparent 55%),
  var(--ink-950);
}
.public-header{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(20px,5vw,56px);
  background:rgba(11,22,16,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ink-line);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(155deg, var(--gold-400), var(--gold-600));
  color:#241704; font-family:var(--font-display); font-weight:700; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-sm);
}
.brand-name{ font-family:var(--font-display); font-size:19px; font-weight:600; letter-spacing:-.01em; }
.brand-tag{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; color:var(--text-mute);
  border:1px solid var(--ink-line-strong); padding:3px 9px; border-radius:99px; margin-left:2px;
  display:none;
}
@media (min-width:720px){ .brand-tag{ display:inline-block; } }

.public-nav{ display:flex; align-items:center; gap:6px; }
.nav-link{
  padding:9px 14px; border-radius:99px; font-size:14px; font-weight:600; color:var(--text-soft);
  transition:background var(--dur-f), color var(--dur-f);
}
.nav-link:hover{ color:var(--text-strong); background:var(--ink-800); }
.nav-link.active{ color:var(--ink-950); background:var(--gold-500); }
.nav-divider{ width:1px; height:22px; background:var(--ink-line-strong); margin:0 6px; }

.public-main{ max-width:var(--max-w); margin:0 auto; padding:0 clamp(20px,5vw,56px) 100px; }


/* ---------- 5. HERO ---------- */
.hero{
  display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;
  padding:30px 0 20px;
}
.hero-eyebrow{ margin-bottom:18px; }
.hero h1{
  font-size:clamp(34px,4.6vw,56px); line-height:1.06; color:var(--text-strong);
}
.hero h1 em{ font-style:italic; color:var(--gold-400); }
.hero-sub{
  margin-top:20px; max-width:46ch; font-size:16.5px; color:var(--text-soft); line-height:1.6;
}
.hero-actions{ display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
.hero-proof{
  margin-top:36px; display:flex; gap:28px; flex-wrap:wrap;
}
.proof-item{ display:flex; flex-direction:column; }
.proof-num{ font-family:var(--font-display); font-size:26px; color:var(--gold-400); }
.proof-label{ font-size:12px; color:var(--text-mute); }

/* the "ledger card" — signature visual: a stamped, ruled binder page */
.ledger-card{
  background:var(--paper-200); border-radius:var(--r-lg); padding:26px;
  box-shadow:var(--sh-lg); position:relative; transform:rotate(1.2deg);
  border:1px solid var(--paper-line);
  animation:floatIn var(--dur-s) var(--ease) both;
}
.ledger-card::before{
  content:""; position:absolute; inset:14px 14px auto 14px; height:1px; background:var(--paper-line-strong);
}
.ledger-row{
  display:flex; align-items:center; gap:12px; padding:12px 0;
  border-bottom:1px dashed var(--paper-line-strong); color:var(--paper-ink);
}
.ledger-row:last-child{ border-bottom:none; }
.ledger-row .stamp-num{ flex-shrink:0; }
.ledger-row-title{ font-weight:700; font-size:14px; }
.ledger-row-meta{ font-size:12px; color:var(--paper-ink-soft); }
.ledger-stamp-corner{
  position:absolute; top:-14px; right:18px; transform:rotate(8deg);
}

/* rubber-stamp numbered badge — the recurring signature element */
.stamp-num{
  width:34px; height:34px; border-radius:50%;
  border:2px solid var(--gold-600); color:var(--gold-600);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:13px;
  background:transparent;
}
.stamp-num.is-done{ background:var(--teal-500); border-color:var(--teal-700); color:#fff; }
.stamp-num.is-current{ background:var(--gold-500); border-color:var(--gold-600); color:#241704; }

/* ---------- 6. SECTIONS / FEATURES ---------- */
.section{ padding:64px 0; }
.section-head{ max-width:640px; margin-bottom:36px; }
.section-head h2{ font-size:clamp(24px,3vw,32px); color:var(--text-strong); margin-top:10px; }
.section-head p{ margin-top:10px; color:var(--text-soft); font-size:15px; }

.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feature-card{
  background:var(--ink-800); border:1px solid var(--ink-line); border-radius:var(--r-lg);
  padding:26px; transition:transform var(--dur-m) var(--ease), border-color var(--dur-m);
}
.feature-card:hover{ transform:translateY(-4px); border-color:var(--gold-500); }
.feature-icon{
  width:44px; height:44px; border-radius:11px; margin-bottom:16px;
  background:var(--ink-700); display:flex; align-items:center; justify-content:center;
  color:var(--gold-400); font-size:20px;
}
.feature-card h3{ font-size:16.5px; color:var(--text-strong); margin-bottom:8px; }
.feature-card p{ font-size:13.8px; color:var(--text-soft); line-height:1.6; }

.course-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.course-card{
  background:var(--paper-200); border-radius:var(--r-lg); padding:20px;
  border:1px solid var(--paper-line); display:flex; flex-direction:column; gap:10px;
  color:var(--paper-ink); transition:transform var(--dur-m) var(--ease), box-shadow var(--dur-m);
}
.course-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.course-card h3{ font-size:17px; }
.course-card p{ font-size:13.5px; color:var(--paper-ink-soft); line-height:1.55; }
.course-card-foot{ font-size:12px; color:var(--paper-ink-soft); font-family:var(--font-mono); }


/* ---------- 7. BADGES / STAMPS ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:99px;
  font-size:11.5px; font-weight:700; font-family:var(--font-mono); letter-spacing:.02em;
  white-space:nowrap;
}
.badge-gold{ background:rgba(217,164,65,.16); color:var(--gold-400); border:1px solid rgba(217,164,65,.35); }
.badge-teal{ background:var(--success-soft); color:var(--success-500); border:1px solid rgba(76,154,92,.3); }
.badge-brick{ background:var(--brick-soft); color:var(--brick-500); border:1px solid rgba(181,80,58,.3); }
.badge-mute{ background:rgba(255,255,255,.06); color:var(--text-mute); border:1px solid var(--ink-line-strong); }
.card .badge-gold{ background:rgba(173,124,40,.14); border-color:rgba(173,124,40,.3); color:var(--gold-600); }
.card .badge-mute{ background:rgba(32,41,31,.06); color:var(--paper-ink-soft); border-color:var(--paper-line-strong); }

/* diagonal "due" / "graded" ink stamp */
.ink-stamp{
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px;
  border:2px solid currentColor; border-radius:6px; transform:rotate(-3deg);
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brick-500); opacity:.9;
}
.ink-stamp.stamp-good{ color:var(--teal-700); }
.on-dark .ink-stamp.stamp-good{ color:var(--teal-300); }

/* ---------- 8. AUTH ---------- */
.auth-shell{
  min-height:100vh; display:grid; grid-template-columns:1fr 1fr;
  background:var(--ink-950);
}
.auth-side{
  position:relative; padding:56px; display:flex; flex-direction:column; justify-content:space-between;
  background:
    radial-gradient(700px 420px at 15% 10%, rgba(217,164,65,.18), transparent 60%),
    radial-gradient(700px 420px at 90% 90%, rgba(62,128,116,.18), transparent 60%),
    var(--ink-900);
  border-right:1px solid var(--ink-line);
}
.auth-side-quote{ font-family:var(--font-display); font-size:26px; line-height:1.35; color:var(--text-strong); max-width:32ch; }
.auth-side-quote span{ color:var(--gold-400); }
.auth-side-foot{ font-size:12.5px; color:var(--text-mute); }
.auth-form-col{ display:flex; align-items:center; justify-content:center; padding:32px; }
.auth-box{ width:100%; max-width:380px; }
.auth-tabs{
  display:flex; gap:4px; background:var(--ink-800); padding:4px; border-radius:99px; margin:26px 0 22px;
}
.auth-tabs button{
  flex:1; padding:9px 0; border-radius:99px; font-weight:600; font-size:13.5px; color:var(--text-mute);
  transition:all var(--dur-f);
}
.auth-tabs button.active{ background:var(--gold-500); color:#241704; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--paper-ink-soft); margin-bottom:6px; letter-spacing:.02em; }
.auth-box .field label{ color:var(--text-soft); }
.field input, .field select, .field textarea{
  width:100%; padding:11px 13px; border-radius:var(--r-sm);
  background:var(--paper-100); border:1px solid var(--paper-line-strong); color:var(--paper-ink);
  transition:border-color var(--dur-f), box-shadow var(--dur-f);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(217,164,65,.18);
}
.auth-box .field input, .auth-box .field select, .auth-box .field textarea{
  background:var(--ink-800); border-color:var(--ink-line-strong); color:var(--text-strong);
}
.field textarea{ resize:vertical; min-height:64px; }
.error-text{
  color:var(--brick-500); font-size:13px; margin-top:10px; padding:10px 12px;
  background:var(--brick-soft); border-radius:var(--r-sm); border:1px solid rgba(181,80,58,.3);
}
.hint-text{ font-size:12px; color:var(--text-mute); margin-top:16px; text-align:center; }


/* ---------- 9. APP SHELL (post-login) ---------- */
.app-shell{ display:flex; min-height:100vh; background:var(--ink-950); }

.sidebar{
  width:var(--sidebar-w); flex-shrink:0; background:var(--ink-900);
  border-right:1px solid var(--ink-line); display:flex; flex-direction:column;
  padding:20px 14px; position:sticky; top:0; height:100vh;
}
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 22px; }
.sidebar-nav{ display:flex; flex-direction:column; gap:3px; flex:1; }
.sidebar-link{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--r-sm);
  font-size:14px; font-weight:600; color:var(--text-soft);
  transition:background var(--dur-f), color var(--dur-f);
  width:100%; text-align:left;
}
.sidebar-link .icon{ color:var(--text-mute); transition:color var(--dur-f); }
.sidebar-link:hover{ background:var(--ink-800); color:var(--text-strong); }
.sidebar-link.active{ background:var(--ink-800); color:var(--gold-400); }
.sidebar-link.active .icon{ color:var(--gold-400); }
.sidebar-foot{
  border-top:1px solid var(--ink-line); padding-top:14px; margin-top:10px;
  display:flex; align-items:center; gap:10px;
}
.avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(155deg, var(--teal-300), var(--teal-700));
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#0b1a16;
}
.sidebar-user-name{ font-size:13px; font-weight:600; color:var(--text-strong); line-height:1.3; }
.sidebar-user-role{ font-size:11px; color:var(--text-mute); font-family:var(--font-mono); }
.sidebar-logout{ margin-left:auto; color:var(--text-mute); }
.sidebar-logout:hover{ color:var(--brick-500); }

.app-main{ flex:1; min-width:0; padding:36px clamp(20px,4vw,48px) 80px; max-width:1120px; }

.page-title{ font-size:clamp(24px,3vw,30px); color:var(--text-strong); }
.page-subtitle{ margin-top:8px; color:var(--text-soft); font-size:14.5px; max-width:60ch; }

/* stat cards */
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.stat-card{
  background:var(--ink-800); border:1px solid var(--ink-line); border-radius:var(--r-lg);
  padding:20px; display:flex; align-items:center; justify-content:space-between;
  transition:border-color var(--dur-m), transform var(--dur-m);
}
.stat-card:hover{ border-color:var(--gold-500); transform:translateY(-2px); }
.stat-number{ font-family:var(--font-display); font-size:28px; color:var(--text-strong); }
.stat-label{ font-size:12.5px; color:var(--text-mute); margin-top:2px; }
.stat-icon{
  width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:19px;
}

/* ---------- 10. TABS ---------- */
.tab-row{ display:flex; gap:6px; margin:24px 0 22px; flex-wrap:wrap; border-bottom:1px solid var(--ink-line); padding-bottom:0; }
.tab-row button{
  padding:10px 16px; font-size:13.8px; font-weight:600; color:var(--text-mute);
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:color var(--dur-f), border-color var(--dur-f);
}
.tab-row button:hover{ color:var(--text-strong); }
.tab-row button.active{ color:var(--gold-400); border-bottom-color:var(--gold-500); }

/* ---------- 11. CARDS / ROWS (paper surfaces inside the app) ---------- */
.card{
  background:var(--paper-200); border-radius:var(--r-lg); padding:22px;
  border:1px solid var(--paper-line); color:var(--paper-ink);
}
.card + .card{ margin-top:16px; }
.card h3{ font-size:16.5px; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.detail-layout{ display:grid; grid-template-columns:300px 1fr; gap:18px; align-items:start; }

.card-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 4px; border-bottom:1px solid var(--paper-line);
}
.card-row:last-child{ border-bottom:none; }
.card-row.link-item{ cursor:pointer; border-radius:var(--r-sm); transition:background var(--dur-f); }
.card-row.link-item:hover{ background:var(--paper-300); padding-left:10px; padding-right:10px; margin:0 -6px; }
.card-row strong{ color:var(--paper-ink); font-size:14.2px; }

.script-tag{
  font-family:'Caveat', cursive; font-size:19px; color:var(--gold-600); font-weight:700;
}

.progress-track{ height:7px; border-radius:99px; background:var(--paper-300); overflow:hidden; }
.progress-fill{ height:100%; border-radius:99px; background:linear-gradient(90deg, var(--gold-500), var(--teal-500)); transition:width var(--dur-s) var(--ease); }

.num-circle{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--paper-line-strong); color:var(--paper-ink-soft);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:12px;
}
.num-circle.done{ background:var(--teal-500); border-color:var(--teal-700); color:#fff; }


/* ---------- 12. FORMS INSIDE PAPER CARDS ---------- */
.card form{ border:1px dashed var(--paper-line-strong); border-radius:var(--r-md); padding:18px; margin-bottom:16px; background:var(--paper-100); }
.form-row{ display:flex; gap:8px; align-items:flex-end; }
.form-row .field{ flex:1; margin-bottom:0; }

/* ---------- 13. MODAL ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(8,14,10,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:200;
  animation:fadeIn var(--dur-f) var(--ease) both;
}
.modal-box{
  width:100%; max-width:380px; background:var(--paper-200); color:var(--paper-ink);
  border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh-lg);
  animation:popIn var(--dur-m) var(--ease) both;
}
.modal-box h3{ font-size:17px; margin-bottom:8px; }
.modal-box p{ font-size:13.8px; color:var(--paper-ink-soft); line-height:1.55; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }

/* ---------- 14. TOAST ---------- */
#toast-root{ position:fixed; right:22px; bottom:22px; z-index:300; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.toast{
  display:flex; align-items:center; gap:10px; padding:13px 18px; border-radius:var(--r-md);
  background:var(--ink-800); border:1px solid var(--ink-line-strong); color:var(--text-strong);
  box-shadow:var(--sh-md); font-size:13.5px; font-weight:600;
  animation:toastIn var(--dur-m) var(--ease) both;
  max-width:320px;
}
.toast.success{ border-color:rgba(76,154,92,.4); }
.toast.success .icon{ color:var(--success-500); }
.toast.error{ border-color:rgba(181,80,58,.4); }
.toast.error .icon{ color:var(--brick-500); }
.toast .icon{ color:var(--gold-400); font-size:18px; }
.toast.leaving{ animation:toastOut var(--dur-m) var(--ease) both; }

/* ---------- 15. ANIMATIONS ---------- */
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes popIn{ from{ opacity:0; transform:translateY(10px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes floatIn{ from{ opacity:0; transform:translateY(16px) rotate(1.2deg); } to{ opacity:1; transform:translateY(0) rotate(1.2deg); } }
@keyframes toastIn{ from{ opacity:0; transform:translateX(24px); } to{ opacity:1; transform:none; } }
@keyframes toastOut{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateX(24px); } }
@keyframes pageIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.page{ animation:pageIn var(--dur-m) var(--ease) both; }

/* ---------- 16. RESPONSIVE ---------- */
@media (max-width:980px){
  .hero{ grid-template-columns:1fr; }
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .detail-layout{ grid-template-columns:1fr; }
  .two-col{ grid-template-columns:1fr; }
  .auth-shell{ grid-template-columns:1fr; }
  .auth-side{ display:none; }
}
@media (max-width:720px){
  .app-shell{ flex-direction:column; }
  .sidebar{ width:100%; height:auto; position:relative; flex-direction:row; align-items:center; padding:10px 14px; overflow-x:auto; }
  .sidebar-brand{ padding:4px 8px 4px 0; }
  .sidebar-nav{ flex-direction:row; flex:none; }
  .sidebar-link span:last-child{ display:none; }
  .sidebar-foot{ display:none; }
  .feature-grid{ grid-template-columns:1fr; }
  .public-nav .nav-link span{ display:inline; }
  .stats-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .public-nav{ gap:2px; }
  .public-header{ padding:14px 16px; }
  .hero{ padding:56px 0 48px; }
}