@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap);
:root {
  --navy:  #0a1628;
  --navy2: #0f2040;
  --cyan:  #06c8d4;
  --cyand: rgba(6,200,212,.13);
  --cyano: rgba(6,200,212,.25);
  --amber: #f59e0b;
  --violet:#7c3aed;
  --green: #10b981;
  --red:   #ef4444;
  --s50:  #f8fafc; --s100:#f1f5f9; --s200:#e2e8f0;
  --s300: #cbd5e1; --s400:#94a3b8; --s500:#64748b;
  --s700: #334155; --s900:#0f172a; --white:#ffffff;
  --r6:6px; --r10:10px; --r14:14px;
  --sh1: 0 1px 4px rgba(0,0,0,.07);
  --sh2: 0 4px 16px rgba(0,0,0,.1);
}

/* ── RESET ── */
#stemtrack-root *, #stemtrack-root *::before, #stemtrack-root *::after {
}
#stemtrack-root {
  font-family:'Inter',-apple-system,sans-serif;
  color:var(--s900); -webkit-font-smoothing:antialiased;
  font-size:14px; line-height:1.5;
}

/* ══════════════════════════════════════
   APP SHELL — sidebar left + main right
   ══════════════════════════════════════ */
.st-app {
  display: flex;
  flex-direction: row;          /* sidebar | main */
  width: 100%;
  min-height: 600px;
  background: var(--s50);
  border-radius: var(--r14);
  overflow: hidden;
  border: 1px solid var(--s200);
  box-shadow: var(--sh2);
}

/* ══════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════ */
.st-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 600px;
  position: relative;
  overflow: hidden;
}
/* grid texture */
.st-sidebar::before {
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(6,200,212,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(6,200,212,.045) 1px,transparent 1px);
  background-size:24px 24px;
  pointer-events:none;
}
/* top glow */
.st-sidebar::after {
  content:'';
  position:absolute;
  top:-80px; left:50%; transform:translateX(-50%);
  width:280px; height:280px;
  background:radial-gradient(circle,rgba(6,200,212,.1) 0%,transparent 65%);
  pointer-events:none;
}

/* Brand */
.st-sidebar-brand {
  display:flex; align-items:center; gap:10px;
  padding:20px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,.07);
  position:relative; z-index:1;
}
.st-brand-icon {
  width:34px; height:34px; flex-shrink:0;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  box-shadow:0 0 16px var(--cyano);
}
.st-brand-name { font-size:15px; font-weight:800; color:#fff; letter-spacing:-.3px; }
.st-brand-tag  {
  font-size:9px; font-weight:700;
  color:var(--cyan); letter-spacing:1.2px;
  font-family:'JetBrains Mono',monospace;
  margin-top:1px;
}

/* School card */
.st-school-card {
  margin:12px 12px 4px;
  padding:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r10);
  position:relative; z-index:1;
}
.st-school-av {
  width:38px; height:38px;
  border-radius:9px;
  background:linear-gradient(135deg,var(--navy2),#1e3a6e);
  border:1px solid rgba(6,200,212,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:800; color:var(--cyan);
  font-family:'JetBrains Mono',monospace;
  margin-bottom:10px;
}
.st-school-nm {
  font-size:12px; font-weight:700; color:#f1f5f9;
  line-height:1.3; margin-bottom:2px;
}
.st-school-dt { font-size:10px; color:var(--s400); margin-bottom:10px; }
.st-badge-pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:99px;
  font-size:10px; font-weight:700;
  font-family:'JetBrains Mono',monospace;
}

/* Nav */
.st-nav {
  flex:1;
  padding:12px 10px 8px;
  display:flex; flex-direction:column; gap:2px;
  overflow-y:auto; scrollbar-width:none;
  position:relative; z-index:1;
}
.st-nav::-webkit-scrollbar { display:none; }
.st-nav-label {
  font-size:9px; font-weight:700;
  color:rgba(148,163,184,.5);
  text-transform:uppercase; letter-spacing:1.2px;
  padding:4px 10px 6px;
  font-family:'JetBrains Mono',monospace;
}
.st-nav-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:var(--r6); border:none;
  background:transparent; color:var(--s400);
  font-size:13px; font-weight:500;
  cursor:pointer; width:100%; text-align:left;
  transition:all .16s; font-family:'Inter',sans-serif;
  position:relative;
}
.st-nav-item:hover { background:rgba(255,255,255,.06); color:#e2e8f0; }
.st-nav-item.active {
  background:linear-gradient(90deg,rgba(6,200,212,.18),rgba(6,200,212,.06));
  color:var(--cyan);
  border-left:2px solid var(--cyan);
  padding-left:10px;
}
.st-nav-icon { font-size:16px; width:20px; text-align:center; flex-shrink:0; }
.st-nav-text { flex:1; }
.st-nav-badge {
  background:var(--red); color:#fff;
  font-size:9px; font-weight:700;
  padding:1px 6px; border-radius:99px;
  font-family:'JetBrains Mono',monospace;
  margin-left:auto;
}

/* Sidebar footer */
.st-sidebar-footer {
  padding:12px 14px 16px;
  border-top:1px solid rgba(255,255,255,.07);
  position:relative; z-index:1;
}
.st-user-row {
  display:flex; align-items:center; gap:9px;
  padding:9px 10px;
  background:rgba(255,255,255,.04);
  border-radius:var(--r6); margin-bottom:8px;
}
.st-user-av {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#fff;
}
.st-user-info { min-width:0; }
.st-user-name { font-size:12px; font-weight:700; color:#e2e8f0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-user-role { font-size:10px; color:var(--s400); }
.st-logout-btn {
  width:100%; background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.22);
  color:#fca5a5; border-radius:var(--r6);
  padding:7px; font-size:12px; font-weight:600;
  cursor:pointer; transition:all .15s; font-family:'Inter',sans-serif;
}
.st-logout-btn:hover { background:rgba(239,68,68,.2); color:#fff; }

/* ══════════════════════════════════════
   MAIN CONTENT
   ══════════════════════════════════════ */
.st-main {
  flex:1;
  overflow-y:auto;
  background:var(--s50);
  min-width:0;
}

/* PAGE — full width of remaining space */
.st-page {
  width:100%;
  padding:32px 36px;
}

.st-page-header {
  display:flex; align-items:flex-start;
  justify-content:space-between;
  margin-bottom:28px;
  padding-bottom:20px;
  border-bottom:1px solid var(--s200);
}
.st-page-eyebrow {
  font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:1.3px;
  color:var(--cyan);
  font-family:'JetBrains Mono',monospace;
  margin-bottom:4px;
}
.st-page-title { font-size:22px; font-weight:800; color:var(--s900); letter-spacing:-.5px; }
.st-page-sub   { font-size:13px; color:var(--s400); margin-top:4px; }

/* ══════════════════════════════════════
   HERO CARD
   ══════════════════════════════════════ */
.st-hero {
  background:var(--navy);
  border-radius:var(--r14);
  padding:28px 32px;
  margin-bottom:24px;
  display:grid; grid-template-columns:1fr auto;
  gap:32px; align-items:center;
  position:relative; overflow:hidden;
}
.st-hero::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(6,200,212,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(6,200,212,.04) 1px,transparent 1px);
  background-size:22px 22px; pointer-events:none;
}
.st-hero::after {
  content:''; position:absolute;
  top:-70px; right:-50px; width:260px; height:260px;
  background:radial-gradient(circle,rgba(6,200,212,.1) 0%,transparent 65%);
  pointer-events:none;
}
.st-hero-left { position:relative; z-index:1; }
.st-hero-eyebrow {
  font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:1.5px; color:var(--cyan);
  font-family:'JetBrains Mono',monospace; margin-bottom:6px;
}
.st-hero-score {
  font-size:54px; font-weight:900; color:#fff; line-height:1;
  font-family:'JetBrains Mono',monospace; letter-spacing:-2px;
}
.st-hero-score-label { font-size:16px; font-weight:500; color:var(--cyan); margin-left:5px; }
.st-hero-school      { font-size:13px; color:var(--s400); margin-top:8px; }
.st-hero-progress-section { margin-top:20px; }
.st-hero-progress-label {
  display:flex; justify-content:space-between;
  font-size:10px; color:var(--s400);
  font-family:'JetBrains Mono',monospace; margin-bottom:7px;
}
.st-hero-bar-track { height:6px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; }
.st-hero-bar-fill {
  height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--cyan),#22d9e8);
  box-shadow:0 0 10px var(--cyano);
  transition:width 1s cubic-bezier(.4,0,.2,1);
}
.st-hero-right { display:flex; flex-direction:column; gap:8px; position:relative; z-index:1; }
.st-tier-row {
  display:flex; align-items:center; gap:10px;
  padding:9px 16px; border-radius:var(--r6);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  font-size:12px; color:var(--s400); min-width:144px;
}
.st-tier-row.achieved { background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.28); color:var(--amber); }
.st-tier-row.achieved.is-platinum { background:rgba(124,58,237,.13); border-color:rgba(124,58,237,.32); color:#a78bfa; }
.st-tier-emoji { font-size:15px; }
.st-tier-name  { font-weight:600; flex:1; }
.st-tier-pts   { font-family:'JetBrains Mono',monospace; font-size:10px; opacity:.7; }

/* ══════════════════════════════════════
   STATS GRID
   ══════════════════════════════════════ */
.st-stats-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:16px; margin-bottom:24px;
}
.st-stat {
  background:var(--white); border-radius:var(--r10);
  padding:20px; border:1px solid var(--s200); box-shadow:var(--sh1);
  display:flex; flex-direction:column; gap:10px;
}
.st-stat-icon-wrap {
  width:36px; height:36px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.st-stat-val {
  font-size:26px; font-weight:900; color:var(--s900);
  font-family:'JetBrains Mono',monospace; letter-spacing:-1px;
}
.st-stat-label { font-size:11px; color:var(--s400); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }

/* ══════════════════════════════════════
   CARD
   ══════════════════════════════════════ */
.st-card {
  background:var(--white); border-radius:var(--r10);
  padding:22px 24px; box-shadow:var(--sh1);
  margin-bottom:20px; border:1px solid var(--s200);
}
.st-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.st-card-eyebrow {
  font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; color:var(--s400);
  font-family:'JetBrains Mono',monospace; margin-bottom:3px;
}
.st-card-title { font-size:14px; font-weight:700; color:var(--s900); }

/* KPI rows */
.st-kpi-row { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--s100); }
.st-kpi-row:last-child { border-bottom:none; }
.st-kpi-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.st-kpi-name { flex:1; font-size:13px; color:var(--s700); font-weight:500; }
.st-kpi-count{ font-size:10px; color:var(--s400); font-family:'JetBrains Mono',monospace; }
.st-kpi-bar-wrap { width:80px; height:5px; background:var(--s100); border-radius:99px; overflow:hidden; }
.st-kpi-bar  { height:100%; border-radius:99px; }
.st-kpi-pts  { font-size:12px; font-weight:700; color:var(--cyan); font-family:'JetBrains Mono',monospace; min-width:48px; text-align:right; }

/* Quick action buttons */
.st-quick-btn {
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:var(--r6);
  border:1px solid var(--s100); background:var(--s50);
  cursor:pointer; width:100%; text-align:left;
  transition:all .15s; font-family:'Inter',sans-serif; margin-bottom:8px;
}
.st-quick-btn:last-child { margin-bottom:0; }
.st-quick-btn:hover { border-color:var(--cyan); background:var(--cyand); }
.st-quick-icon  { font-size:18px; flex-shrink:0; }
.st-quick-label { font-size:13px; font-weight:700; color:var(--s700); }
.st-quick-sub   { font-size:11px; color:var(--s400); margin-top:1px; }

/* ══════════════════════════════════════
   FORMS
   ══════════════════════════════════════ */
.st-form { display:flex; flex-direction:column; gap:18px; }
.st-form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.st-form-group { display:flex; flex-direction:column; gap:6px; }
.st-label { font-size:11px; font-weight:700; color:var(--s500); text-transform:uppercase; letter-spacing:.5px; }
.st-input,.st-select,.st-textarea {
  border:1.5px solid var(--s200); border-radius:var(--r6);
  padding:11px 14px; font-size:13px; color:var(--s900); outline:none;
  transition:border .15s,box-shadow .15s;
  font-family:'Inter',sans-serif; background:var(--white); width:100%;
}
.st-select { cursor:pointer; color-scheme: light; }
.st-select option,
.st-select optgroup {
  background: var(--white) !important;
  color: var(--s900) !important;
}
.st-select optgroup { font-weight:700; }
.st-input:focus,.st-select:focus,.st-textarea:focus {
  border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyand);
}
.st-input::placeholder,.st-textarea::placeholder { color:var(--s300); }
.st-hint { font-size:11px; color:var(--s400); }
.st-input-wrap { position:relative; }
.st-input-wrap .st-input { padding-right:42px; }
.st-eye-btn {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; font-size:16px; color:var(--s400); padding:2px; line-height:1;
}
.st-pts-hint { display:flex; gap:8px; margin-top:5px; }
.st-pts-badge {
  display:inline-flex; align-items:center; gap:3px;
  background:var(--cyand); color:var(--cyan);
  font-size:10px; font-weight:700; padding:3px 10px;
  border-radius:99px; border:1px solid rgba(6,200,212,.22);
  font-family:'JetBrains Mono',monospace;
}
.st-pts-max { background:rgba(16,185,129,.08); color:var(--green); border-color:rgba(16,185,129,.22); }

/* ══════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════ */
.st-btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:7px; padding:11px 22px; border-radius:var(--r6); border:none;
  font-size:13px; font-weight:700; cursor:pointer; transition:all .16s;
  text-decoration:none; font-family:'Inter',sans-serif; white-space:nowrap;
}
.st-btn-primary { background:linear-gradient(135deg,var(--cyan),#0284c7); color:#fff; box-shadow:0 2px 10px rgba(6,200,212,.3); }
.st-btn-primary:hover:not(:disabled) { box-shadow:0 4px 18px rgba(6,200,212,.44); transform:translateY(-1px); }
.st-btn-outline { background:transparent; color:var(--cyan); border:1.5px solid var(--cyan); }
.st-btn-outline:hover { background:var(--cyand); }
.st-btn-ghost { background:transparent; color:var(--s500); border:1.5px solid var(--s200); }
.st-btn-ghost:hover { background:var(--s100); color:var(--s700); }
.st-btn-danger { background:rgba(239,68,68,.08); color:var(--red); border:1px solid rgba(239,68,68,.22); }
.st-btn-danger:hover { background:rgba(239,68,68,.16); }
.st-btn-full { width:100%; }
.st-btn-sm { padding:6px 14px; font-size:12px; border-radius:6px; }
.st-btn:disabled { opacity:.44; cursor:not-allowed; transform:none !important; }
.st-btn-spinner {
  width:13px; height:13px; border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%; animation:st-spin .7s linear infinite;
}

/* ══════════════════════════════════════
   ALERTS
   ══════════════════════════════════════ */
.st-alert {
  display:flex; align-items:flex-start; gap:10px;
  padding:13px 16px; border-radius:var(--r6);
  font-size:13px; font-weight:500; margin-bottom:20px;
}
.st-alert-error   { background:rgba(239,68,68,.07);  color:#b91c1c; border:1px solid rgba(239,68,68,.2);  }
.st-alert-success { background:rgba(16,185,129,.07); color:#065f46; border:1px solid rgba(16,185,129,.2); }
.st-alert-info    { background:var(--cyand);         color:#0e7490; border:1px solid rgba(6,200,212,.22); }

/* ══════════════════════════════════════
   TOOLBAR
   ══════════════════════════════════════ */
.st-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px; gap:12px; flex-wrap:wrap;
}
.st-tabs { display:flex; gap:3px; background:var(--s100); padding:3px; border-radius:var(--r6); }
.st-tab {
  padding:6px 15px; border-radius:5px; border:none;
  background:transparent; font-size:12px; font-weight:600; color:var(--s500);
  cursor:pointer; transition:all .14s; font-family:'Inter',sans-serif;
  display:flex; align-items:center; gap:5px;
}
.st-tab:hover { color:var(--s700); }
.st-tab.active { background:var(--white); color:var(--s900); box-shadow:var(--sh1); }
.st-tab-count { background:var(--s200); font-size:10px; padding:1px 5px; border-radius:99px; font-family:'JetBrains Mono',monospace; }
.st-tab.active .st-tab-count { background:var(--cyan); color:#fff; }
.st-search {
  border:1.5px solid var(--s200); border-radius:var(--r6);
  padding:9px 14px; font-size:13px; outline:none;
  transition:border .15s,box-shadow .15s;
  min-width:190px; font-family:'Inter',sans-serif; background:var(--white);
}
.st-search:focus { border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyand); }

/* ══════════════════════════════════════
   SUBMISSIONS
   ══════════════════════════════════════ */
.st-sub-list { display:flex; flex-direction:column; gap:12px; }
.st-sub-card {
  background:var(--white); border-radius:var(--r10);
  padding:18px 22px; border:1px solid var(--s200); box-shadow:var(--sh1); transition:box-shadow .15s;
}
.st-sub-card:hover { box-shadow:var(--sh2); }
.st-sub-top { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:12px; }
.st-sub-title { font-size:14px; font-weight:700; color:var(--s900); }
.st-sub-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px; }
.st-sub-desc { font-size:13px; color:var(--s500); margin-bottom:14px; line-height:1.55; }
.st-sub-footer { display:flex; align-items:center; justify-content:space-between; }
.st-sub-links { display:flex; gap:8px; }
.st-sub-actions { display:flex; align-items:center; gap:8px; }
.st-status-pill { padding:4px 12px; border-radius:99px; font-size:11px; font-weight:700; white-space:nowrap; font-family:'JetBrains Mono',monospace; }
.st-link-btn { font-size:12px; color:var(--cyan); text-decoration:none; font-weight:600; padding:4px 10px; background:var(--cyand); border-radius:5px; transition:background .14s; }
.st-link-btn:hover { background:rgba(6,200,212,.22); }
.st-reviewer-note { font-size:12px; color:var(--s400); font-style:italic; }
.st-tag      { background:var(--cyand); color:var(--cyan); font-size:11px; padding:3px 8px; border-radius:5px; font-weight:700; font-family:'JetBrains Mono',monospace; border:1px solid rgba(6,200,212,.18); }
.st-pts-tag  { background:rgba(16,185,129,.09); color:var(--green); font-size:11px; padding:3px 8px; border-radius:5px; font-weight:700; font-family:'JetBrains Mono',monospace; }
.st-date-tag { font-size:11px; color:var(--s400); font-family:'JetBrains Mono',monospace; }
.st-role-pill{ background:rgba(124,58,237,.1); color:var(--violet); font-size:11px; padding:3px 8px; border-radius:5px; font-weight:700; }

/* ══════════════════════════════════════
   UPLOAD / MEDIA
   ══════════════════════════════════════ */
.st-upload-zone {
  border:2px dashed var(--s200); border-radius:var(--r10); padding:32px 20px; text-align:center;
  cursor:pointer; transition:all .2s; background:var(--s50);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; color:var(--s400); font-size:13px; min-height:110px;
}
.st-upload-zone:hover { border-color:var(--cyan); background:var(--cyand); }
.st-upload-icon { font-size:28px; margin-bottom:3px; }
.st-upload-hint { font-size:11px; color:var(--s400); font-family:'JetBrains Mono',monospace; }
.st-upload-preview { max-height:90px; border-radius:6px; object-fit:cover; }
.st-upload-done { font-size:13px; color:var(--green); font-weight:700; }
.st-upload-progress { display:flex; align-items:center; gap:10px; margin-top:9px; }
.st-upload-bar-wrap { flex:1; height:5px; background:var(--s200); border-radius:99px; overflow:hidden; }
.st-upload-bar { height:100%; background:var(--cyan); border-radius:99px; transition:width .2s; }
.st-upload-actions { display:flex; gap:9px; margin-top:10px; flex-wrap:wrap; }
.st-dropzone {
  border:2px dashed var(--s200); border-radius:var(--r10); padding:28px; text-align:center;
  cursor:pointer; transition:all .2s; margin-bottom:18px; color:var(--s500);
}
.st-dropzone:hover { border-color:var(--cyan); background:var(--cyand); }
.st-dz-icon { font-size:30px; margin-bottom:8px; }
.st-dz-hint { font-size:11px; color:var(--s400); margin-top:4px; font-family:'JetBrains Mono',monospace; }
.st-dz-progress-wrap { width:200px; height:5px; background:var(--s200); border-radius:99px; overflow:hidden; margin:0 auto 10px; }
.st-dz-progress-bar  { height:100%; background:var(--cyan); transition:width .2s; }
.st-media-grid-full { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:12px; margin-bottom:18px; }
.st-media-card { border:1.5px solid var(--s200); border-radius:var(--r6); overflow:hidden; cursor:pointer; transition:all .14s; background:var(--white); }
.st-media-card:hover,.st-media-card.selected { border-color:var(--cyan); box-shadow:0 0 0 2px var(--cyand); }
.st-media-thumb { aspect-ratio:1; background:var(--s50); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.st-media-thumb img { width:100%; height:100%; object-fit:cover; }
.st-media-doc-icon { font-size:30px; }
.st-media-doc-icon.large { font-size:48px; margin-bottom:12px; }
.st-media-info { padding:7px 8px; border-top:1px solid var(--s100); }
.st-media-fname { font-size:10px; font-weight:600; color:var(--s700); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.st-media-meta  { font-size:9px; color:var(--s400); margin-top:1px; font-family:'JetBrains Mono',monospace; }
.st-media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(85px,1fr)); gap:8px; max-height:300px; overflow-y:auto; }
.st-media-item { border:1.5px solid var(--s200); border-radius:6px; overflow:hidden; cursor:pointer; transition:border .14s; }
.st-media-item:hover { border-color:var(--cyan); }
.st-media-item img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.st-media-doc { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:26px; background:var(--s50); }
.st-media-name { font-size:9px; padding:3px 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--s500); }
.st-media-detail { background:var(--white); border-radius:var(--r6); padding:16px; border:1px solid rgba(6,200,212,.2); margin-top:10px; }
.st-media-detail-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.st-media-detail-head h4 { font-size:13px; font-weight:700; }
.st-detail-table { width:100%; font-size:12px; border-collapse:collapse; }
.st-detail-table td { padding:5px 6px; border-bottom:1px solid var(--s100); vertical-align:top; }
.st-detail-table td:first-child { color:var(--s400); width:72px; font-family:'JetBrains Mono',monospace; font-size:10px; }

/* ══════════════════════════════════════
   MODAL
   ══════════════════════════════════════ */
.st-modal-overlay {
  position:fixed; inset:0; background:rgba(6,13,31,.72);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; padding:20px; backdrop-filter:blur(3px);
}
.st-modal {
  background:var(--white); border-radius:var(--r14); padding:26px;
  width:100%; max-width:520px; max-height:82vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.22);
}
.st-modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.st-modal-head h3 { font-size:15px; font-weight:800; }
.st-modal-close { background:none; border:none; cursor:pointer; font-size:18px; color:var(--s400); padding:3px; line-height:1; }

/* ══════════════════════════════════════
   SURVEY
   ══════════════════════════════════════ */
.st-survey-avg-card {
  background:var(--navy); border-radius:var(--r14); padding:22px 28px;
  display:flex; align-items:center; gap:24px; margin-bottom:22px;
  position:relative; overflow:hidden;
}
.st-survey-avg-card::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(6,200,212,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(6,200,212,.04) 1px,transparent 1px);
  background-size:20px 20px; pointer-events:none;
}
.st-survey-big { font-size:50px; font-weight:900; color:var(--cyan); font-family:'JetBrains Mono',monospace; letter-spacing:-2px; position:relative; z-index:1; line-height:1; }
.st-survey-out { color:var(--s400); font-size:15px; position:relative; z-index:1; }
.st-survey-avg-right { position:relative; z-index:1; }
.st-survey-label { font-size:14px; font-weight:700; color:#fff; }
.st-survey-count { font-size:12px; color:var(--s400); margin:4px 0 10px; font-family:'JetBrains Mono',monospace; }
.st-survey-bar-wrap { height:5px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; width:190px; }
.st-survey-bar-fill { height:100%; background:linear-gradient(90deg,var(--cyan),#22d9e8); border-radius:99px; }
.st-role-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.st-role-tab { padding:7px 16px; border-radius:var(--r6); border:1.5px solid var(--s200); background:var(--white); font-size:12px; font-weight:700; color:var(--s400); cursor:pointer; transition:all .14s; font-family:'Inter',sans-serif; }
.st-role-tab.active { border-color:var(--cyan); background:var(--cyand); color:var(--cyan); }
.st-survey-q { background:var(--s50); border:1px solid var(--s200); border-radius:var(--r6); padding:16px 18px; margin-bottom:12px; }
.st-survey-q-cat { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--cyan); font-family:'JetBrains Mono',monospace; }
.st-survey-q-text { font-size:14px; font-weight:500; color:var(--s900); margin:7px 0 14px; line-height:1.5; }
.st-rating-row { display:flex; gap:7px; }
.st-rating-btn {
  flex:1; padding:10px 3px; border:1.5px solid var(--s200); border-radius:8px;
  background:var(--white); cursor:pointer; transition:all .14s;
  display:flex; flex-direction:column; align-items:center; gap:4px; font-family:'Inter',sans-serif;
}
.st-rating-btn:hover { border-color:var(--cyan); background:var(--cyand); }
.st-rating-btn.active { border-color:var(--cyan); background:var(--cyan); color:#fff; }
.st-rating-btn.dim { opacity:.35; }
.st-rating-num { font-size:17px; font-weight:900; font-family:'JetBrains Mono',monospace; }
.st-rating-lbl { font-size:8px; font-weight:700; text-align:center; line-height:1.2; text-transform:uppercase; letter-spacing:.3px; }
.st-survey-preview { background:var(--cyand); border:1px solid rgba(6,200,212,.22); border-radius:var(--r6); padding:10px 14px; font-size:12px; color:var(--cyan); font-family:'JetBrains Mono',monospace; margin-top:14px; }

/* ══════════════════════════════════════
   LEADERBOARD
   ══════════════════════════════════════ */
.st-lb-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.st-lb-summary-card { background:var(--white); border-radius:var(--r10); padding:16px 18px; text-align:center; border:1px solid var(--s200); box-shadow:var(--sh1); }
.st-lb-summary-num { font-size:28px; font-weight:900; font-family:'JetBrains Mono',monospace; margin:6px 0 3px; letter-spacing:-1px; }
.st-lb-summary-label { font-size:10px; font-weight:700; color:var(--s400); text-transform:uppercase; letter-spacing:.8px; }
.st-lb-list { display:flex; flex-direction:column; gap:8px; }
.st-lb-row {
  display:flex; align-items:center; gap:14px;
  background:var(--white); border-radius:var(--r10);
  padding:14px 18px; border:1px solid var(--s200); box-shadow:var(--sh1);
  opacity:0; transform:translateX(-10px);
  transition:opacity .3s ease,transform .3s ease,box-shadow .15s;
}
.st-lb-row.visible { opacity:1; transform:translateX(0); }
.st-lb-row:hover { box-shadow:var(--sh2); }
.st-lb-row.top3 { border-left:3px solid var(--amber); }
.st-lb-rank { width:34px; text-align:center; flex-shrink:0; }
.st-lb-rank-num { font-size:13px; font-weight:800; color:var(--s400); font-family:'JetBrains Mono',monospace; }
.st-lb-school-info { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.st-lb-avatar { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; flex-shrink:0; font-family:'JetBrains Mono',monospace; }
.st-lb-logo { width:34px; height:34px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.st-lb-school-name { font-size:13px; font-weight:700; color:var(--s900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-lb-school-loc  { font-size:11px; color:var(--s400); font-family:'JetBrains Mono',monospace; }
.st-lb-bar-wrap { flex:1; height:5px; background:var(--s100); border-radius:99px; overflow:hidden; max-width:130px; }
.st-lb-bar { height:100%; border-radius:99px; transition:width .8s cubic-bezier(.4,0,.2,1); }
.st-lb-pts { font-size:14px; font-weight:900; color:var(--s900); font-family:'JetBrains Mono',monospace; min-width:68px; text-align:right; }
.st-lb-badge-pill { padding:4px 11px; border-radius:6px; font-size:11px; font-weight:700; font-family:'JetBrains Mono',monospace; white-space:nowrap; }

/* ══════════════════════════════════════
   MANAGERS
   ══════════════════════════════════════ */
.st-manager-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.st-manager-card { background:var(--white); border-radius:var(--r10); padding:18px 20px; border:1px solid var(--s200); display:flex; align-items:flex-start; gap:14px; box-shadow:var(--sh1); }
.st-manager-avatar { width:42px; height:42px; border-radius:var(--r6); background:linear-gradient(135deg,var(--violet),var(--cyan)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; font-weight:800; flex-shrink:0; font-family:'JetBrains Mono',monospace; }
.st-manager-info { flex:1; min-width:0; }
.st-manager-name { font-size:14px; font-weight:700; color:var(--s900); }
.st-manager-username { font-size:11px; color:var(--s400); font-family:'JetBrains Mono',monospace; margin-top:2px; }
.st-manager-email { font-size:12px; color:var(--s500); margin-top:3px; }
.st-manager-school { margin-top:8px; }
.st-manager-actions { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }

/* ══════════════════════════════════════
   AUTH
   ══════════════════════════════════════ */
.st-auth-wrap {
  display:flex; align-items:center; justify-content:center;
  padding:48px 24px; min-height:500px;
  background:var(--navy); position:relative; overflow:hidden; border-radius:var(--r14);
}
.st-auth-wrap::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(6,200,212,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(6,200,212,.05) 1px,transparent 1px);
  background-size:30px 30px; pointer-events:none;
}
.st-auth-wrap::after {
  content:''; position:absolute; top:-80px; left:50%; transform:translateX(-50%);
  width:520px; height:340px;
  background:radial-gradient(ellipse,rgba(6,200,212,.07) 0%,transparent 65%);
  pointer-events:none;
}
.st-auth-card {
  background:rgba(15,32,64,.8); backdrop-filter:blur(18px);
  border:1px solid rgba(6,200,212,.16); border-radius:var(--r14);
  padding:40px 36px; width:100%; max-width:420px;
  box-shadow:0 22px 64px rgba(0,0,0,.38),0 0 0 1px rgba(6,200,212,.08);
  position:relative; z-index:1;
}
.st-auth-header { text-align:center; margin-bottom:30px; }
.st-auth-logo {
  width:54px; height:54px; background:linear-gradient(135deg,var(--cyan),var(--violet));
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:26px; margin:0 auto 16px; box-shadow:0 0 28px var(--cyano);
}
.st-auth-header h1 { font-size:22px; font-weight:900; color:#fff; letter-spacing:-.4px; }
.st-auth-header p  { color:var(--s400); font-size:13px; margin-top:5px; }
.st-auth-header p strong { color:var(--cyan); }
.st-auth-note { text-align:center; font-size:11px; color:var(--s500); margin-top:20px; font-family:'JetBrains Mono',monospace; }
.st-auth-card .st-label { color:var(--s400); }
.st-auth-card .st-input,.st-auth-card .st-select,.st-auth-card .st-textarea {
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12); color:#fff;
}
.st-auth-card .st-select { color-scheme: dark; }
.st-auth-card .st-input:focus,.st-auth-card .st-select:focus,.st-auth-card .st-textarea:focus {
  border-color:var(--cyan); background:rgba(255,255,255,.09); box-shadow:0 0 0 3px var(--cyand);
}
.st-auth-card .st-input::placeholder,.st-auth-card .st-textarea::placeholder { color:var(--s500); }
.st-auth-card .st-select option { background:var(--navy2); color:#fff; }
.st-auth-card .st-btn-ghost { border-color:rgba(255,255,255,.15); color:var(--s400); }
.st-auth-card .st-btn-ghost:hover { background:rgba(255,255,255,.06); color:#e2e8f0; }
.st-badge-mini { display:none; }

/* Badge standalone */
.st-badge-standalone { border:2px solid; border-radius:20px; padding:44px 52px; text-align:center; max-width:360px; margin:0 auto; }
.st-badge-big-emoji  { font-size:68px; margin-bottom:14px; }
.st-badge-big-label  { font-size:30px; font-weight:900; letter-spacing:-.5px; }
.st-badge-big-pts    { font-size:17px; color:var(--s500); margin-top:6px; font-family:'JetBrains Mono',monospace; }
.st-badge-big-school { font-size:14px; color:var(--s400); margin-top:4px; }
.st-badge-tiers { display:flex; gap:18px; justify-content:center; margin-top:24px; }
.st-badge-tier-item { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; opacity:.3; }
.st-badge-tier-item.achieved { opacity:1; }
.st-badge-tier-pts { font-size:10px; color:var(--s400); font-family:'JetBrains Mono',monospace; }

/* LOADING / EMPTY */
.st-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px; color:var(--s400); min-height:280px; }
.st-spinner { width:34px; height:34px; border:3px solid var(--s200); border-top-color:var(--cyan); border-radius:50%; animation:st-spin .8s linear infinite; margin-bottom:14px; box-shadow:0 0 10px var(--cyano); }
@keyframes st-spin { to { transform:rotate(360deg); } }
.st-empty-state { text-align:center; padding:52px 24px; }
.st-empty-icon  { font-size:44px; margin-bottom:14px; opacity:.4; }
.st-empty-state h3 { font-size:17px; font-weight:800; color:var(--s700); margin-bottom:6px; }
.st-empty-state p  { font-size:13px; color:var(--s400); margin-bottom:20px; }

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */
@media (max-width:768px) {
  .st-app { flex-direction:column; }
  .st-sidebar { width:100%; min-height:auto; flex-direction:row; align-items:center; padding:10px 14px; gap:8px; flex-wrap:wrap; }
  .st-sidebar::before,.st-sidebar::after { display:none; }
  .st-sidebar-brand { padding:0; border:none; flex-shrink:0; }
  .st-school-card { display:none; }
  .st-nav { flex-direction:row; padding:0; gap:2px; flex:1; overflow-x:auto; }
  .st-nav-label { display:none; }
  .st-nav-item { flex-direction:column; gap:3px; padding:7px 10px; min-width:52px; text-align:center; border-left:none !important; border-bottom:2px solid transparent; font-size:10px; }
  .st-nav-item.active { border-bottom-color:var(--cyan) !important; background:rgba(6,200,212,.1); padding-left:10px; }
  .st-nav-icon { font-size:17px; width:auto; }
  .st-nav-text { font-size:9px; }
  .st-sidebar-footer { display:none; }
  .st-page { padding:16px 18px; }
  .st-stats-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .st-hero { grid-template-columns:1fr; }
  .st-hero-right { flex-direction:row; flex-wrap:wrap; }
  .st-form-row { grid-template-columns:1fr; }
  .st-lb-summary { grid-template-columns:1fr 1fr; }
  .st-lb-bar-wrap { display:none; }
}
@media (max-width:460px) {
  .st-rating-lbl { display:none; }
  .st-hero-score { font-size:40px; }
  .st-page { padding:12px 14px; }
}