/* =====================================================================
   SEMS — Design System
   A "mark-sheet ledger" aesthetic: deep emerald + aged-gold seal accents,
   a serif display face for ceremony (titles, result cards) paired with a
   crisp grotesk for UI and a mono face for tabular data (roll numbers,
   marks). Ruled hairlines and medallion badges echo a real report card.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root{
  /* ---- Palette ---- */
  --ink:#102A1E;
  --ink-soft:#3C5449;
  --paper:#F6F4EC;
  --paper-raised:#FFFFFF;
  --paper-sunken:#EFEBDD;
  --line: rgba(16,42,30,0.12);
  --line-strong: rgba(16,42,30,0.22);

  --primary:#146C46;
  --primary-dark:#0B4A30;
  --primary-light:#1F9D5E;
  --primary-50:#E4F3EA;
  --primary-100:#CBE8D6;

  --gold:#B8862F;
  --gold-light:#E8C170;
  --gold-50:#FBF3E1;

  --success:#1F9D5E;
  --success-50:#E4F3EA;
  --danger:#B23B32;
  --danger-50:#FBEAE8;
  --warning:#C07A1E;
  --warning-50:#FBF0DF;
  --info:#2A6FA8;
  --info-50:#E7F1FA;

  --text:#16281F;
  --text-muted:#5B6F63;
  --text-faint:#8B9C92;

  --card-bg: var(--paper-raised);
  --bg: var(--paper);
  --border: var(--line);

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:20px;
  --radius-full:999px;

  --shadow-sm: 0 1px 2px rgba(16,42,30,0.06), 0 1px 1px rgba(16,42,30,0.04);
  --shadow: 0 6px 20px rgba(16,42,30,0.08), 0 2px 6px rgba(16,42,30,0.05);
  --shadow-lg: 0 20px 50px rgba(16,42,30,0.16), 0 6px 16px rgba(16,42,30,0.08);
  --shadow-gold: 0 6px 18px rgba(184,134,47,0.28);

  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --sidebar-w: 264px;
  --topbar-h: 68px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

[data-theme="dark"]{
  --ink:#EAF3EC;
  --paper:#0B1E15;
  --paper-raised:#122C20;
  --paper-sunken:#0E2419;
  --line: rgba(234,243,236,0.10);
  --line-strong: rgba(234,243,236,0.18);

  --primary:#2CBE7A;
  --primary-dark:#1F9D5E;
  --primary-light:#5BD69B;
  --primary-50: rgba(44,190,122,0.14);
  --primary-100: rgba(44,190,122,0.22);

  --gold:#E8C170;
  --gold-light:#F3D896;
  --gold-50: rgba(232,193,112,0.14);

  --success:#2CBE7A; --success-50: rgba(44,190,122,0.14);
  --danger:#E5695D; --danger-50: rgba(229,105,93,0.14);
  --warning:#E3A64B; --warning-50: rgba(227,166,75,0.14);
  --info:#5FA8DE; --info-50: rgba(95,168,222,0.14);

  --text:#EAF3EC;
  --text-muted:#9FB5A8;
  --text-faint:#6C8578;

  --card-bg: var(--paper-raised);
  --bg: var(--paper);
  --border: var(--line);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow: 0 6px 20px rgba(0,0,0,0.35);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.5);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:14.5px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .3s var(--ease), color .3s var(--ease);
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; color:var(--text); margin:0; letter-spacing:-0.01em; }
h1{ font-size:26px; } h2{ font-size:21px; } h3{ font-size:17px; } h4{ font-size:15px; }
p{ margin:0; }
a{ color:var(--primary); }
button{ font-family:inherit; }
input,select,textarea{ font-family:var(--font-body); }
::selection{ background:var(--gold-50); color:var(--ink); }

.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

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

/* =========================== LAYOUT SHELL =========================== */
.app-layout{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w); flex-shrink:0; background:var(--primary-dark);
  color:#EAF3EC; display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0;
  z-index:40; transition:transform .35s var(--ease); background-image:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,0.06), transparent 45%);
}
.sidebar-header{ display:flex; align-items:center; gap:12px; padding:22px 20px 18px; }
.sidebar-logo{ width:42px; height:42px; border-radius:11px; background:linear-gradient(155deg,var(--gold-light),var(--gold)); display:flex; align-items:center; justify-content:center; font-size:19px; box-shadow:var(--shadow-gold); flex-shrink:0; }
.sidebar-brand h2{ font-family:var(--font-display); color:#fff; font-size:17px; margin:0; line-height:1.15; }
.sidebar-brand span{ font-size:10.5px; color:rgba(234,243,236,0.55); letter-spacing:.08em; text-transform:uppercase; }
.sidebar-user{ display:flex; align-items:center; gap:10px; margin:4px 16px 12px; padding:10px 12px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius); }
.sidebar-user-avatar{ width:34px; height:34px; border-radius:50%; background:linear-gradient(155deg,var(--gold-light),var(--gold)); color:#3a2a06; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex-shrink:0; }
.sidebar-user-info h4{ margin:0; font-size:12.5px; color:#fff; font-weight:700; }
.sidebar-user-info span{ font-size:10.5px; color:rgba(234,243,236,0.55); }
.sidebar-nav{ flex:1; overflow-y:auto; padding:6px 12px 20px; }
.nav-section-label{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgba(234,243,236,0.4); margin:16px 12px 6px; font-weight:700; }
.nav-item{ display:flex; align-items:center; gap:11px; padding:9.5px 12px; border-radius:10px; color:rgba(234,243,236,0.78); text-decoration:none; font-size:13.5px; font-weight:600; margin-bottom:2px; transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease); position:relative; }
.nav-item i{ width:17px; text-align:center; font-size:14px; opacity:.9; }
.nav-item:hover{ background:rgba(255,255,255,0.07); color:#fff; transform:translateX(2px); }
.nav-item.active{ background:linear-gradient(90deg, rgba(232,193,112,0.18), rgba(232,193,112,0.03)); color:#fff; box-shadow:inset 3px 0 0 var(--gold); }

.sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(6,17,11,0.55); z-index:35; opacity:0; transition:opacity .3s var(--ease); }
.sidebar-overlay.active{ display:block; opacity:1; }

.main-content{ margin-left:var(--sidebar-w); flex:1; min-width:0; display:flex; flex-direction:column; }
.header{ height:var(--topbar-h); display:flex; align-items:center; gap:14px; padding:0 26px; background:var(--card-bg); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20; backdrop-filter:blur(10px); }
.header-toggle{ display:none; }
.header-title{ font-family:var(--font-display); font-size:19px; font-weight:700; flex:1; }
.header-actions{ display:flex; gap:8px; }
.page-content{ padding:26px; max-width:1400px; width:100%; margin:0 auto; animation:pageIn .4s var(--ease); }

@keyframes pageIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }

@media (max-width:980px){
  .sidebar{ transform:translateX(-100%); box-shadow:var(--shadow-lg); }
  .sidebar.open{ transform:translateX(0); }
  .main-content{ margin-left:0; }
  .header-toggle{ display:inline-flex; }
  .page-content{ padding:16px; }
}

/* =========================== BUTTONS =========================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:11px; border:1px solid transparent;
  font-size:13.5px; font-weight:700; cursor:pointer; white-space:nowrap;
  transition:transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), opacity .2s;
  font-family:var(--font-body);
}
.btn:active{ transform:translateY(1px) scale(0.98); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.btn-primary{ background:linear-gradient(155deg,var(--primary-light),var(--primary)); color:#fff; box-shadow:0 4px 14px rgba(20,108,70,0.35); }
.btn-primary:hover{ box-shadow:0 8px 22px rgba(20,108,70,0.4); transform:translateY(-1px); }
.btn-secondary{ background:var(--paper-sunken); color:var(--text); border-color:var(--border); }
.btn-secondary:hover{ background:var(--line); }
.btn-danger{ background:linear-gradient(155deg,#D2564A,var(--danger)); color:#fff; box-shadow:0 4px 14px rgba(178,59,50,0.3); }
.btn-warning{ background:linear-gradient(155deg,#DDA24E,var(--warning)); color:#fff; box-shadow:0 4px 14px rgba(192,122,30,0.3); }
.btn-success{ background:linear-gradient(155deg,var(--primary-light),var(--success)); color:#fff; }
.btn-outline{ background:transparent; border-color:var(--line-strong); color:var(--text); }
.btn-outline:hover{ background:var(--paper-sunken); }
.btn-gold{ background:linear-gradient(155deg,var(--gold-light),var(--gold)); color:#3a2a06; box-shadow:var(--shadow-gold); }
.btn-info{ background:linear-gradient(155deg,#4E93CB,var(--info)); color:#fff; }
.btn-sm{ padding:6px 12px; font-size:12px; border-radius:9px; }
.btn-lg{ padding:13px 22px; font-size:14.5px; border-radius:12px; }
.btn-block{ width:100%; }
.btn-icon{ width:38px; height:38px; padding:0; border-radius:10px; background:transparent; border:1px solid transparent; color:var(--text-muted); }
.btn-icon:hover{ background:var(--paper-sunken); color:var(--text); }

/* =========================== FORMS =========================== */
.form-group{ margin-bottom:16px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-bottom:16px; }
@media (max-width:640px){ .form-row,.form-row-3{ grid-template-columns:1fr; } }
label{ display:block; font-size:12.5px; font-weight:700; color:var(--text-muted); margin-bottom:6px; letter-spacing:.01em; }
.form-control{
  width:100%; padding:10px 13px; border-radius:10px; border:1.5px solid var(--border);
  background:var(--card-bg); color:var(--text); font-size:13.5px;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.form-control:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3.5px var(--primary-50); }
select.form-control{ cursor:pointer; }
.help-text{ font-size:11.5px; color:var(--text-faint); margin-top:5px; }
.password-wrapper{ position:relative; }
.password-toggle{ position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-faint); cursor:pointer; padding:4px; }
.checkbox-list{ max-height:260px; overflow-y:auto; border:1px solid var(--border); border-radius:10px; padding:6px; }
.checkbox-item{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px; font-size:13px; cursor:pointer; }
.checkbox-item:hover{ background:var(--paper-sunken); }
.checkbox-item.class-header{ font-weight:800; color:var(--primary); text-transform:uppercase; font-size:10.5px; letter-spacing:.07em; cursor:default; padding-top:12px; }
.checkbox-item.class-header:hover{ background:transparent; }
.checkbox-item input{ accent-color:var(--primary); width:15px; height:15px; }

/* =========================== CARDS =========================== */
.card{ background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.card-header h3{ display:flex; align-items:center; gap:9px; }
.card-body{ padding:22px; }
.page-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.page-header h1{ display:flex; align-items:center; gap:11px; }
.page-header p{ color:var(--text-muted); font-size:13px; margin-top:4px; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:860px){ .grid-2{ grid-template-columns:1fr; } }

.stat-card{ background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; display:flex; align-items:center; gap:14px; box-shadow:var(--shadow-sm); transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.stat-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.stat-icon{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
.stat-value{ font-family:var(--font-display); font-size:24px; font-weight:800; line-height:1.1; }
.stat-label{ font-size:11.5px; color:var(--text-muted); font-weight:600; margin-top:2px; }

.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:22px; }
.stat-icon.blue{ background:var(--info-50); color:var(--info); }
.stat-icon.orange{ background:var(--gold-50); color:var(--gold); }
.stat-icon.green{ background:var(--success-50); color:var(--success); }
.stat-icon.purple{ background:rgba(124,58,237,0.12); color:#7C3AED; }
[data-theme="dark"] .stat-icon.purple{ background:rgba(167,139,250,0.16); color:#A78BFA; }

.progress-item{ margin-bottom:16px; }
.progress-item:last-child{ margin-bottom:0; }
.progress-item .label-row{ display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:6px; }
.progress-fill.orange{ background:linear-gradient(90deg,var(--warning),var(--gold-light)); }

.analytics-box{ background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:16px; text-align:center; }
.analytics-box .value{ font-family:var(--font-mono); font-size:22px; font-weight:700; }
.analytics-box .label{ font-size:11px; color:var(--text-muted); margin-top:3px; }

/* =========================== TABLES (ledger style) =========================== */
.table-wrapper{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
thead th{ text-align:left; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); font-weight:800; padding:12px 14px; background:var(--paper-sunken); border-bottom:2px solid var(--border); white-space:nowrap; }
tbody td{ padding:11px 14px; border-bottom:1px solid var(--border); color:var(--text); }
tbody tr{ transition:background .15s; }
tbody tr:hover{ background:var(--primary-50); }
tfoot td{ padding:10px 14px; }

/* =========================== BADGES / CHIPS / SEALS =========================== */
.badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--radius-full); font-size:11px; font-weight:800; letter-spacing:.02em; }
.badge-primary{ background:var(--primary-50); color:var(--primary-dark); }
.badge-info{ background:var(--info-50); color:var(--info); }
.badge-warning{ background:var(--warning-50); color:var(--warning); }
.badge-gray{ background:var(--paper-sunken); color:var(--text-muted); }
.badge-danger{ background:var(--danger-50); color:var(--danger); }
.chip{ display:inline-flex; padding:4px 11px; border-radius:var(--radius-full); font-size:11.5px; font-weight:700; background:var(--primary-50); color:var(--primary-dark); }

/* Position medallions — the signature "seal" motif */
.pos-badge{ width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; font-family:var(--font-mono); border:1.5px solid transparent; }
.pos-1{ background:radial-gradient(circle at 35% 30%, #FDE9B7, #C9942B); color:#4a3208; box-shadow:0 2px 8px rgba(184,134,47,0.45); }
.pos-2{ background:radial-gradient(circle at 35% 30%, #F1F1F1, #B9BEC2); color:#3a3f42; }
.pos-3{ background:radial-gradient(circle at 35% 30%, #F0D2AE, #C08A55); color:#432c12; }
.pos-other{ background:var(--paper-sunken); color:var(--text-muted); }

.pass-badge{ color:var(--success); font-weight:700; background:var(--success-50); padding:3px 10px; border-radius:var(--radius-full); font-size:11.5px; }
.fail-badge{ color:var(--danger); font-weight:700; background:var(--danger-50); padding:3px 10px; border-radius:var(--radius-full); font-size:11.5px; }

.grade-A-plus,.grade-A{ color:var(--success); font-family:var(--font-mono); }
.grade-B{ color:var(--info); font-family:var(--font-mono); }
.grade-C{ color:var(--warning); font-family:var(--font-mono); }
.grade-D{ color:var(--gold); font-family:var(--font-mono); }
.grade-F{ color:var(--danger); font-family:var(--font-mono); }

.lock-status{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:var(--radius-full); font-size:12px; font-weight:700; }
.lock-status.locked{ background:var(--danger-50); color:var(--danger); }
.lock-status.unlocked{ background:var(--success-50); color:var(--success); }

/* =========================== ALERTS / EMPTY STATES =========================== */
.alert{ display:flex; align-items:flex-start; gap:10px; padding:13px 16px; border-radius:12px; font-size:13px; border:1px solid transparent; }
.alert-info{ background:var(--info-50); color:var(--info); border-color:rgba(42,111,168,0.2); }
.alert-warning{ background:var(--warning-50); color:var(--warning); border-color:rgba(192,122,30,0.2); }
.alert-danger{ background:var(--danger-50); color:var(--danger); border-color:rgba(178,59,50,0.2); }

.empty-state{ text-align:center; padding:50px 20px; color:var(--text-muted); }
.empty-state i{ font-size:36px; color:var(--text-faint); margin-bottom:14px; display:block; }
.empty-state h3{ color:var(--text); margin-bottom:6px; }
.empty-state p{ font-size:13px; }

/* =========================== SEARCH =========================== */
.search-bar{ position:relative; flex:1; min-width:180px; }
.search-bar i{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-size:12.5px; }
.search-bar input{ width:100%; padding:10px 13px 10px 34px; border-radius:10px; border:1.5px solid var(--border); background:var(--card-bg); color:var(--text); font-size:13.5px; }
.search-bar input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3.5px var(--primary-50); }

/* =========================== TABS =========================== */
.tab-bar{ display:flex; gap:4px; overflow-x:auto; margin-bottom:18px; border-bottom:1px solid var(--border); }
.tab-btn{ display:flex; align-items:center; gap:7px; padding:11px 16px; background:none; border:none; border-bottom:2.5px solid transparent; color:var(--text-muted); font-weight:700; font-size:12.5px; cursor:pointer; white-space:nowrap; transition:color .18s,border-color .18s; }
.tab-btn:hover{ color:var(--text); }
.tab-btn.active{ color:var(--primary); border-color:var(--gold); }
.tab-content{ display:none; }
.tab-content.active{ display:block; animation:pageIn .35s var(--ease); }

/* =========================== MODALS =========================== */
.modal-overlay{ position:fixed; inset:0; background:rgba(11,25,17,0.5); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:100; opacity:0; pointer-events:none; transition:opacity .25s var(--ease); padding:20px; }
.modal-overlay.active{ opacity:1; pointer-events:all; }
.modal{ background:var(--card-bg); border-radius:var(--radius-lg); width:100%; max-width:480px; max-height:88vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); transform:translateY(14px) scale(.98); transition:transform .3s var(--ease); }
.modal-overlay.active .modal{ transform:translateY(0) scale(1); }
.modal-lg{ max-width:680px; }
.modal-xl{ max-width:840px; }
.modal-header{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border); }
.modal-header h3{ display:flex; align-items:center; gap:9px; }
.modal-close{ background:none; border:none; font-size:22px; color:var(--text-faint); cursor:pointer; line-height:1; padding:4px 8px; border-radius:8px; }
.modal-close:hover{ background:var(--paper-sunken); color:var(--text); }
.modal-body{ padding:22px; overflow-y:auto; }
.modal-footer{ display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--border); }

/* =========================== TOASTS =========================== */
#toast-container{ position:fixed; top:20px; right:20px; z-index:200; display:flex; flex-direction:column; gap:10px; max-width:340px; }
.toast{ display:flex; align-items:center; gap:10px; background:var(--card-bg); color:var(--text); border:1px solid var(--border); border-left:4px solid var(--primary); padding:13px 16px; border-radius:11px; box-shadow:var(--shadow-lg); font-size:13px; font-weight:600; animation:slideIn .35s var(--ease); }
.toast.error{ border-left-color:var(--danger); } .toast.error i{ color:var(--danger); }
.toast.warning{ border-left-color:var(--warning); } .toast.warning i{ color:var(--warning); }
.toast.info{ border-left-color:var(--info); } .toast.info i{ color:var(--info); }
.toast.success i{ color:var(--success); }
@keyframes slideIn{ from{ opacity:0; transform:translateX(40px);} to{ opacity:1; transform:translateX(0);} }

/* =========================== LOADING: overlay + skeleton shimmer =========================== */
.loading-overlay{ position:fixed; inset:0; background:rgba(246,244,236,0.82); backdrop-filter:blur(2px); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:300; gap:16px; }
[data-theme="dark"] .loading-overlay{ background:rgba(11,30,21,0.85); }
.seal-spinner{ width:52px; height:52px; border-radius:50%; border:3.5px solid var(--primary-50); border-top-color:var(--gold); animation:spin .85s linear infinite; position:relative; }
.seal-spinner::after{ content:''; position:absolute; inset:8px; border-radius:50%; border:2px dashed var(--primary-100); animation:spin 2.4s linear infinite reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.loading-text{ font-size:13px; font-weight:700; color:var(--primary-dark); letter-spacing:.02em; }
[data-theme="dark"] .loading-text{ color:var(--primary-light); }

.skeleton{ background:linear-gradient(100deg, var(--paper-sunken) 30%, var(--line-strong) 50%, var(--paper-sunken) 70%); background-size:220% 100%; animation:shimmer 1.6s ease-in-out infinite; border-radius:8px; }
@keyframes shimmer{ from{ background-position:120% 0; } to{ background-position:-20% 0; } }
.sk-line{ height:12px; border-radius:6px; margin-bottom:8px; }
.sk-card{ height:88px; border-radius:var(--radius); }
.sk-row{ height:42px; border-radius:8px; margin-bottom:6px; }
.skeleton-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }

.progress-track{ height:7px; background:var(--paper-sunken); border-radius:99px; overflow:hidden; }
.progress-fill{ height:100%; background:linear-gradient(90deg,var(--primary),var(--primary-light)); border-radius:99px; transition:width .5s var(--ease); }

/* =========================== UTILITIES =========================== */
.d-flex{ display:flex; } .align-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.flex-wrap{ flex-wrap:wrap; } .gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; }
.mb-4{ margin-bottom:4px; } .mb-8{ margin-bottom:8px; } .mb-16{ margin-bottom:16px; } .mt-4{ margin-top:4px; }
.text-muted{ color:var(--text-muted); } .text-faint{ color:var(--text-faint); }
.no-print{ }
@media print{ .no-print{ display:none !important; } }

/* =========================== AUTH PAGES =========================== */
.auth-page{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 12% -10%, rgba(232,193,112,0.18), transparent 45%),
    radial-gradient(circle at 90% 110%, rgba(31,157,94,0.35), transparent 50%),
    linear-gradient(160deg,#0B2418 0%, #0F3A26 55%, #146C46 100%);
}
.auth-page::before{ content:''; position:absolute; inset:0; opacity:.05; background-image:repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 34px); pointer-events:none; }
.auth-card{ position:relative; z-index:1; background:var(--paper-raised); border-radius:22px; padding:38px 36px; width:100%; max-width:420px; box-shadow:0 30px 80px rgba(0,0,0,0.4); animation:authIn .55s var(--ease); }
@keyframes authIn{ from{ opacity:0; transform:translateY(24px) scale(.97);} to{ opacity:1; transform:translateY(0) scale(1);} }
.auth-logo-row{ display:flex; justify-content:center; gap:14px; margin-bottom:18px; }
.auth-logo-badge{ width:52px; height:52px; border-radius:13px; background:var(--primary-50); display:flex; align-items:center; justify-content:center; font-size:22px; overflow:hidden; }
.auth-logo-badge img{ width:100%; height:100%; object-fit:contain; }
.auth-header{ text-align:center; margin-bottom:26px; }
.auth-header h1{ font-size:21px; color:var(--primary-dark); margin-bottom:5px; }
[data-theme="dark"] .auth-header h1{ color:var(--primary-light); }
.auth-header p{ font-size:11.5px; color:var(--text-faint); letter-spacing:.1em; text-transform:uppercase; font-weight:700; }
.auth-tabs{ display:flex; background:var(--paper-sunken); border-radius:11px; padding:4px; margin-bottom:20px; }
.auth-tab{ flex:1; padding:9px; text-align:center; border-radius:8px; border:none; background:none; font-weight:700; font-size:12.5px; color:var(--text-muted); cursor:pointer; transition:all .2s var(--ease); }
.auth-tab.active{ background:var(--card-bg); color:var(--primary); box-shadow:var(--shadow-sm); }
.auth-err{ background:var(--danger-50); color:var(--danger); border-radius:10px; padding:11px 14px; font-size:12.5px; margin-bottom:14px; display:none; align-items:center; gap:8px; font-weight:600; }
.auth-err.show{ display:flex; animation:shake .4s var(--ease); }
@keyframes shake{ 20%,60%{ transform:translateX(-4px);} 40%,80%{ transform:translateX(4px);} }
.auth-remember-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; font-size:12.5px; }
.auth-footer{ text-align:center; margin-top:22px; font-size:11px; color:var(--text-faint); }
.auth-footer strong{ color:var(--text-muted); }

.dev-credit{ position:relative; z-index:1; margin-top:18px; background:var(--paper-raised); border-radius:18px; padding:20px 28px; text-align:center; width:100%; max-width:420px; box-shadow:0 16px 36px rgba(0,0,0,0.3); animation:authIn .6s var(--ease) .1s both; }
.dev-credit-label{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); font-weight:800; margin:0 0 4px; }
.dev-credit-name{ font-size:18px; color:var(--primary-dark); margin:0 0 16px; }
[data-theme="dark"] .dev-credit-name{ color:var(--primary-light); }
.btn-whatsapp{ display:inline-flex; align-items:center; gap:9px; background:linear-gradient(155deg,#2FE07A,#1DBE5C); color:#fff; padding:11px 28px; border-radius:999px; font-weight:800; font-size:14px; text-decoration:none; box-shadow:0 8px 18px rgba(29,190,92,0.4); transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.btn-whatsapp:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(29,190,92,0.5); }
.btn-whatsapp i{ font-size:18px; }

.stepper{ display:flex; justify-content:center; gap:10px; margin-bottom:26px; }
.step{ width:32px; height:32px; border-radius:50%; background:var(--paper-sunken); color:var(--text-faint); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; font-family:var(--font-mono); transition:all .3s var(--ease); }
.step.active{ background:linear-gradient(155deg,var(--primary-light),var(--primary)); color:#fff; box-shadow:0 4px 12px rgba(20,108,70,0.4); }
.step.completed{ background:var(--gold); color:#fff; }
.setup-section{ display:none; animation:pageIn .35s var(--ease); }
.setup-section.active{ display:block; }

/* =========================== RESULT CARD / PRINT =========================== */
.result-print-area{ background:#fff; color:#16281F; padding:4px; }
.print-header{ display:flex; align-items:center; justify-content:space-between; gap:14px; border-bottom:3px solid #146C46; padding-bottom:14px; margin-bottom:14px; }
.print-logo{ width:66px; height:66px; object-fit:contain; border-radius:10px; }
.print-school-info{ text-align:center; }
.print-school-info h1{ font-size:19px; color:#146C46; margin:0 0 3px; font-family:var(--font-display); }
.print-school-info p{ font-size:11.5px; color:#555; margin:2px 0; }
.print-table{ width:100%; border-collapse:collapse; margin:10px 0; font-size:12.5px; }
.print-table th{ background:#146C46; color:#fff; padding:7px 9px; text-align:center; font-size:11px; }
.print-table td{ padding:6px 9px; border:1px solid #ddd; text-align:center; }
.print-table tbody tr:nth-child(even){ background:#f8f8f4; }
.print-summary{ display:flex; gap:18px; flex-wrap:wrap; background:#F1F7F3; border:1px solid #CBE8D6; border-radius:10px; padding:12px 14px; margin:10px 0; font-size:13px; }
.print-summary .item{ display:flex; align-items:center; gap:5px; }
.print-position-box{ background:linear-gradient(135deg,#B8862F,#E8C170); color:#3a2a06; border-radius:10px; padding:10px 16px; text-align:center; margin:10px 0; font-size:13px; font-weight:800; }
.print-signatures{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-top:38px; text-align:center; }
.sig-line{ border-top:1px solid #444; padding-top:5px; margin-top:34px; font-size:11px; font-weight:700; }
@media print{ body *{ visibility:hidden; } .result-print-area,.result-print-area *{ visibility:visible; } .result-print-area{ position:absolute; top:0; left:0; width:100%; } }

/* Logo preview (settings) */
.logo-preview{ width:92px; height:92px; border-radius:13px; object-fit:contain; border:2px dashed var(--line-strong); display:flex; align-items:center; justify-content:center; font-size:30px; cursor:pointer; overflow:hidden; background:var(--paper-sunken); }
.logo-preview img{ width:100%; height:100%; object-fit:contain; border-radius:11px; }
.toggle-switch{ position:relative; width:48px; height:26px; flex-shrink:0; }
.toggle-switch input{ opacity:0; width:0; height:0; }
.toggle-slider{ position:absolute; inset:0; background:var(--line-strong); border-radius:13px; cursor:pointer; transition:.3s; }
.toggle-slider:before{ content:''; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.3s; box-shadow:var(--shadow-sm); }
.toggle-switch input:checked + .toggle-slider{ background:var(--danger); }
.toggle-switch input:checked + .toggle-slider:before{ transform:translateX(22px); }