:root {
  color-scheme: light;
  --bg: #eef6ff;
  --bg-2: #f6f3ff;
  --bg-3: #effcf9;
  --surface: rgba(255, 255, 255, 0.62);
  --surface-strong: rgba(255, 255, 255, 0.78);
  --surface-soft: rgba(255, 255, 255, 0.44);
  --surface-hover: rgba(255, 255, 255, 0.86);
  --border: rgba(255, 255, 255, 0.82);
  --border-strong: rgba(135, 158, 190, 0.24);
  --text: #17233a;
  --text-2: #44546d;
  --muted: #708198;
  --muted-2: #91a0b2;
  --primary: #3478f6;
  --primary-2: #5b67e8;
  --secondary: #7b61df;
  --teal: #2aa7a1;
  --green: #2f9f75;
  --green-soft: #e5f7ef;
  --red: #cf5e70;
  --red-soft: #fdecef;
  --amber: #b9812d;
  --amber-soft: #fff4dd;
  --violet-soft: #f0edff;
  --blue-soft: #eaf2ff;
  --shadow-xs: 0 1px 2px rgba(31, 52, 85, 0.04);
  --shadow-sm: 0 8px 22px rgba(57, 80, 120, 0.07);
  --shadow-md: 0 18px 48px rgba(57, 80, 120, 0.10);
  --shadow-lg: 0 28px 80px rgba(57, 80, 120, 0.14);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --blur: 18px;
  --max: 1440px;
  --sidebar: 264px;
  --ease: cubic-bezier(.2,.8,.2,1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--text);
  background:
    radial-gradient(42rem 42rem at 7% 8%, rgba(52, 120, 246, 0.18), transparent 66%),
    radial-gradient(38rem 38rem at 91% 10%, rgba(123, 97, 223, 0.16), transparent 65%),
    radial-gradient(42rem 38rem at 82% 88%, rgba(42, 167, 161, 0.16), transparent 64%),
    linear-gradient(145deg, #eef7ff 0%, #f8f5ff 48%, #f0fbf8 100%);
  background-attachment: fixed;
}
body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(3px);
  z-index: -1;
}
body::before {
  width: 440px;
  height: 440px;
  left: -120px;
  bottom: -120px;
  background: radial-gradient(circle, rgba(74, 144, 246, .16), rgba(74, 144, 246, 0) 70%);
}
body::after {
  width: 500px;
  height: 500px;
  right: -160px;
  top: 26%;
  background: radial-gradient(circle, rgba(121, 102, 226, .13), rgba(121, 102, 226, 0) 70%);
}

button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid rgba(52, 120, 246, .55);
  outline-offset: 2px;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }
.eyebrow {
  margin: 0;
  color: #5f77a7;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.glass {
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.48));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.84);
  backdrop-filter: blur(var(--blur)) saturate(128%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(128%);
}

/* Login */
.login-body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
}
.login-shell {
  width: min(1100px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr);
  gap: 28px;
  align-items: stretch;
}
.login-story,
.login-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(255,255,255,.68), rgba(255,255,255,.46));
  border: 1px solid rgba(255,255,255,.84);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
}
.login-story {
  min-height: 590px;
  padding: 52px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.login-story::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -90px;
  bottom: -110px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(52,120,246,.24), rgba(123,97,223,.15) 42%, rgba(255,255,255,0) 70%);
}
.brand-lockup { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(52,120,246,.94), rgba(106,103,224,.92));
  color: white; font-weight: 800; letter-spacing: .04em; font-size: .78rem;
  box-shadow: 0 10px 28px rgba(52,120,246,.22);
}
.brand-copy strong { display:block; font-size: .95rem; letter-spacing: -.01em; }
.brand-copy span { color: var(--muted); font-size: .82rem; }
.story-copy { position: relative; z-index: 1; max-width: 650px; }
.story-copy h1 {
  margin: 10px 0 16px;
  max-width: 690px;
  font-size: clamp(2.7rem, 5.3vw, 4.3rem);
  line-height: .98;
  letter-spacing: -.065em;
}
.story-copy p { margin:0; max-width: 60ch; color: var(--text-2); font-size: 1.05rem; line-height: 1.75; }
.story-metrics { position: relative; z-index: 1; display: flex; gap: 12px; flex-wrap: wrap; }
.story-chip {
  padding: 10px 13px; border-radius: 999px;
  background: rgba(255,255,255,.52); border: 1px solid rgba(255,255,255,.78);
  color: var(--text-2); font-size: .84rem; font-weight: 600;
}
.login-card { align-self: center; padding: 38px; }
.login-card h2 { margin: 8px 0 8px; font-size: 2rem; letter-spacing: -.04em; }
.login-card > p { margin: 0; color: var(--muted); }
.form-field { margin-top: 28px; }
.form-field label { display:block; margin-bottom: 8px; font-size:.9rem; font-weight:650; color:var(--text-2); }
.password-row {
  display:flex; align-items:center; overflow:hidden;
  border:1px solid rgba(103,125,158,.24); border-radius: var(--radius-md);
  background: rgba(255,255,255,.64);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.password-row:focus-within { border-color: rgba(52,120,246,.52); box-shadow: 0 0 0 4px rgba(52,120,246,.08); background: rgba(255,255,255,.84); }
.password-row input { flex:1; min-width:0; padding: 14px 15px; border:0; outline:0; background:transparent; color:var(--text); font-size: 1rem; }
.password-row input::placeholder { color: #9aa8b8; }
.icon-btn { width:48px; height:48px; border:0; background:transparent; color:#718198; cursor:pointer; display:grid; place-items:center; }
.primary-btn {
  width:100%; min-height:48px; margin-top: 14px; border:0; border-radius: var(--radius-md);
  background: linear-gradient(135deg, #3a7cf5, #6271e7);
  color:white; font-weight:700; cursor:pointer;
  box-shadow: 0 12px 28px rgba(52,120,246,.20);
  transition: transform .2s var(--ease), filter .2s var(--ease), box-shadow .2s var(--ease);
}
.primary-btn:hover { transform: translateY(-1px); filter: brightness(.98); box-shadow: 0 16px 34px rgba(52,120,246,.24); }
.primary-btn:active { transform: translateY(1px); }
.primary-btn:disabled { opacity:.6; cursor:progress; }
.error-text { min-height: 22px; margin: 9px 0 0; color: var(--red); font-size:.9rem; }
.privacy-note { margin-top:18px; padding-top:18px; border-top:1px solid rgba(112,129,152,.14); color:var(--muted); font-size:.85rem; }

/* App shell */
.app-shell { min-height: 100dvh; }
.loading-screen { min-height:100dvh; display:grid; place-items:center; align-content:center; gap:12px; color:var(--muted); }
.skeleton-line { width:170px; height:12px; border-radius:99px; background:linear-gradient(90deg,rgba(255,255,255,.45),rgba(255,255,255,.88),rgba(255,255,255,.45)); background-size:220% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }

.layout { display:grid; grid-template-columns: var(--sidebar) minmax(0,1fr); min-height:100dvh; }
.sidebar {
  position: sticky; top: 0; height: 100dvh; padding: 18px 14px;
  background: rgba(255,255,255,.48);
  border-right: 1px solid rgba(255,255,255,.72);
  box-shadow: 8px 0 28px rgba(79,102,140,.05);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  display:flex; flex-direction:column; z-index:100;
}
.side-brand { display:flex; align-items:center; gap:11px; padding: 8px 9px 24px; }
.side-brand .brand-mark { width:40px; height:40px; box-shadow:0 8px 22px rgba(52,120,246,.16); }
.side-brand b { display:block; font-size:.97rem; letter-spacing:-.02em; }
.side-brand small { display:block; margin-top:1px; color:var(--muted); font-size:.78rem; }
.nav-label { padding: 2px 11px 8px; color:var(--muted-2); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.nav { display:grid; gap:5px; }
.nav button {
  position:relative; display:flex; align-items:center; gap:11px;
  min-height:44px; padding:0 12px;
  border:1px solid transparent; border-radius: var(--radius-md);
  background:transparent; color:#5e6f87; text-align:left; font-size:.94rem; font-weight:560; cursor:pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.nav button:hover { background:rgba(255,255,255,.56); color:var(--text); }
.nav button.active {
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(245,249,255,.68));
  border-color:rgba(255,255,255,.88); color:#244c91; box-shadow: var(--shadow-xs), inset 0 1px 0 white;
}
.nav button.active::before { content:""; position:absolute; left:-4px; width:3px; height:20px; border-radius:8px; background:linear-gradient(#4d8cf5,#786be0); }
.nav-icon { width:18px; height:18px; stroke-width:1.8; }
.side-foot { margin-top:auto; padding:16px 9px 5px; border-top:1px solid rgba(112,129,152,.14); color:var(--muted); font-size:.8rem; line-height:1.65; }
.logout-btn { width:100%; min-height:39px; margin-top:10px; border:1px solid rgba(103,125,158,.20); border-radius:var(--radius-md); background:rgba(255,255,255,.54); color:#576a82; cursor:pointer; font-size:.86rem; font-weight:600; }
.logout-btn:hover { background:rgba(255,255,255,.82); }

.main { min-width:0; }
.topbar {
  position:sticky; top:0; z-index:90; min-height:74px; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  background:rgba(247,251,255,.55); border-bottom:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(18px) saturate(125%); -webkit-backdrop-filter:blur(18px) saturate(125%);
}
.topbar-left { display:flex; align-items:center; gap:11px; min-width:0; }
.mobile-menu { display:none; width:40px; height:40px; border:1px solid rgba(103,125,158,.18); border-radius:var(--radius-md); background:rgba(255,255,255,.60); cursor:pointer; }
.topbar h1 { margin:0; font-size:1.02rem; letter-spacing:-.02em; }
.topbar p { margin:1px 0 0; color:var(--muted); font-size:.78rem; }
.session-pill { display:flex; align-items:center; gap:8px; min-height:36px; padding:0 12px; border:1px solid rgba(255,255,255,.78); border-radius:999px; background:rgba(255,255,255,.56); color:#5b6e86; font-size:.82rem; font-weight:600; box-shadow:var(--shadow-xs); }
.session-dot { width:7px; height:7px; border-radius:50%; background:#44b58a; box-shadow:0 0 0 4px rgba(68,181,138,.10); }

.content { width:min(100%, var(--max)); margin:0 auto; padding:30px 30px 54px; }
.screen { display:none; }
.screen.active { display:block; animation: enter .42s var(--ease) both; }
@keyframes enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.page-head h2 { margin:6px 0 0; font-size:clamp(1.9rem,3vw,2.45rem); line-height:1.08; letter-spacing:-.05em; }
.page-head p { margin:8px 0 0; max-width:68ch; color:var(--text-2); font-size:.98rem; }
.page-actions { display:flex; gap:8px; flex-wrap:wrap; }
.soft-pill { display:inline-flex; align-items:center; min-height:34px; padding:0 11px; border:1px solid rgba(255,255,255,.82); border-radius:999px; background:rgba(255,255,255,.58); box-shadow:var(--shadow-xs); color:#586a83; font-size:.82rem; font-weight:650; }

/* Overview */
.overview-lead { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr); gap:16px; margin-bottom:16px; }
.lead-card,
.pass-card,
.kpi,
.card,
.subject-row-card,
.filter-panel,
.modal,
.table-wrap,
.heat-wrap {
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.48));
  border:1px solid rgba(255,255,255,.82);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter:blur(var(--blur)) saturate(128%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(128%);
}
.lead-card { position:relative; overflow:hidden; min-height:240px; padding:28px; border-radius:var(--radius-xl); display:flex; flex-direction:column; justify-content:space-between; }
.lead-card::after { content:""; position:absolute; width:300px; height:300px; right:-80px; top:-100px; border-radius:50%; background:radial-gradient(circle,rgba(52,120,246,.20),rgba(123,97,223,.09) 45%,transparent 70%); }
.lead-card > * { position:relative; z-index:1; }
.lead-card h3 { margin:8px 0 10px; max-width:760px; font-size:clamp(2rem,3.7vw,3.2rem); line-height:1.02; letter-spacing:-.06em; }
.lead-card .lead-copy { max-width:68ch; color:var(--text-2); font-size:1rem; line-height:1.7; }
.lead-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; }
.lead-tag { min-height:30px; padding:5px 10px; border:1px solid rgba(255,255,255,.82); border-radius:999px; background:rgba(255,255,255,.52); color:#5f7086; font-size:.8rem; font-weight:600; }
.pass-card { min-height:240px; padding:24px; border-radius:var(--radius-xl); display:grid; place-items:center; }
.pass-ring { --value:0%; position:relative; width:164px; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:conic-gradient(#4a8bf5 var(--value), rgba(83,110,150,.10) 0); box-shadow:inset 0 0 0 1px rgba(255,255,255,.64), 0 14px 38px rgba(58,104,177,.10); }
.pass-ring::before { content:""; position:absolute; inset:12px; border-radius:50%; background:rgba(255,255,255,.78); box-shadow:inset 0 1px 0 white; backdrop-filter:blur(12px); }
.pass-ring-inner { position:relative; text-align:center; }
.pass-ring-inner strong { display:block; font-size:2.35rem; line-height:1; letter-spacing:-.06em; }
.pass-ring-inner span { display:block; margin-top:7px; color:var(--muted); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.pass-caption { margin-top:16px; color:var(--text-2); font-size:.9rem; text-align:center; }

.kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.kpi { min-height:124px; padding:17px 18px; border-radius:var(--radius-lg); transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); }
.kpi:hover { transform:translateY(-2px); background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.60)); box-shadow:var(--shadow-md); }
.kpi-label { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); font-size:.83rem; font-weight:650; }
.kpi-accent { width:8px; height:8px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px rgba(52,120,246,.09); }
.kpi-value { margin-top:13px; font-size:2.05rem; line-height:1; letter-spacing:-.055em; font-weight:760; }
.kpi-sub { margin-top:8px; color:var(--muted); font-size:.79rem; }

.grid-main { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr); gap:16px; margin-bottom:16px; }
.grid-secondary { display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:16px; margin-bottom:16px; }
.card { border-radius:var(--radius-lg); padding:20px; min-width:0; }
.card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.card-head h3 { margin:0; font-size:1.05rem; letter-spacing:-.025em; }
.card-head p { margin:5px 0 0; color:var(--muted); font-size:.84rem; }
.metric-badge { padding:5px 8px; border-radius:999px; background:rgba(255,255,255,.58); border:1px solid rgba(255,255,255,.82); color:#667891; font-size:.75rem; font-weight:650; white-space:nowrap; }

.bar-list { display:grid; gap:13px; }
.bar-row { display:grid; grid-template-columns:minmax(130px,1fr) minmax(120px,2fr) 58px; gap:12px; align-items:center; }
.bar-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-2); font-size:.88rem; }
.bar-track { height:9px; border-radius:99px; background:rgba(78,105,145,.10); overflow:hidden; box-shadow:inset 0 1px 2px rgba(55,76,108,.05); }
.bar-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,#4c8df5,#6e77e8); }
.bar-fill.red { background:linear-gradient(90deg,#e27a87,#d95f79); }
.bar-fill.teal { background:linear-gradient(90deg,#55bdb4,#318f9f); }
.bar-value { text-align:right; color:var(--text); font-size:.86rem; font-weight:700; }

.distribution { display:flex; align-items:flex-end; gap:10px; height:220px; padding:18px 4px 0; }
.dist-item { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:7px; }
.dist-count { font-size:.82rem; font-weight:700; }
.dist-bar { width:min(42px,78%); min-height:5px; border-radius:9px 9px 4px 4px; background:linear-gradient(to top,#5c85ef,#7bb7f4); box-shadow:0 10px 24px rgba(80,128,220,.14); }
.dist-label { color:var(--muted); font-size:.76rem; text-align:center; line-height:1.2; }

.rank-list { display:grid; gap:2px; }
.rank-row { display:grid; grid-template-columns:34px 40px minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 8px; border-radius:10px; cursor:pointer; transition:background .2s var(--ease), transform .2s var(--ease); }
.rank-row:hover { background:rgba(255,255,255,.56); transform:translateX(2px); }
.rank-num { color:var(--muted-2); font-size:.78rem; font-variant-numeric:tabular-nums; }
.avatar { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(80,137,238,.16),rgba(120,101,222,.14)); border:1px solid rgba(255,255,255,.84); color:#4967a1; font-size:.78rem; font-weight:800; box-shadow:inset 0 1px 0 white; }
.rank-name { min-width:0; color:var(--text); font-size:.9rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-name span { display:block; margin-top:2px; color:var(--muted); font-size:.76rem; font-weight:500; }
.rank-score { color:#365b9b; font-size:.91rem; font-weight:760; }

.insight-strip { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border:1px solid rgba(255,255,255,.82); border-radius:var(--radius-md); background:rgba(255,255,255,.52); box-shadow:var(--shadow-xs); color:var(--text-2); font-size:.9rem; }
.insight-strip svg { flex:0 0 auto; width:18px; height:18px; color:#527bbd; margin-top:1px; }

/* Filters and tables */
.filter-panel { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; padding:14px; border-radius:var(--radius-lg); margin-bottom:14px; }
.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.field { display:grid; gap:6px; }
.field label { color:var(--muted); font-size:.76rem; font-weight:650; }
.field input, .field select {
  height:42px; min-width:150px; border:1px solid rgba(105,126,158,.20); border-radius:var(--radius-md); padding:0 12px;
  background:rgba(255,255,255,.62); color:var(--text); outline:0; font-size:.9rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.field.search input { min-width:290px; }
.field input:focus, .field select:focus { border-color:rgba(52,120,246,.48); box-shadow:0 0 0 3px rgba(52,120,246,.08); background:rgba(255,255,255,.86); }
.result-count { color:var(--muted); font-size:.84rem; white-space:nowrap; padding:0 4px 9px; }
.table-wrap { overflow:auto; border-radius:var(--radius-lg); }
.data-table { width:100%; border-collapse:separate; border-spacing:0; min-width:900px; font-size:.9rem; }
.data-table th { position:sticky; top:0; z-index:2; padding:13px 14px; background:rgba(247,250,255,.90); border-bottom:1px solid rgba(113,133,161,.14); color:#738298; text-align:left; font-size:.76rem; font-weight:700; letter-spacing:.045em; text-transform:uppercase; backdrop-filter:blur(12px); }
.data-table td { padding:14px; border-bottom:1px solid rgba(113,133,161,.10); color:var(--text-2); vertical-align:middle; }
.data-table tbody tr:last-child td { border-bottom:0; }
.data-table tbody tr { transition:background .18s var(--ease); }
.data-table tbody tr:hover td { background:rgba(255,255,255,.48); }
.clickable { cursor:pointer; }
.student-cell { display:flex; align-items:center; gap:11px; min-width:220px; }
.student-cell .avatar { width:36px; height:36px; border-radius:10px; }
.student-cell b { display:block; color:var(--text); font-size:.92rem; }
.student-cell span { display:block; color:var(--muted); font-size:.76rem; }
.total-marks-cell{display:grid;gap:2px;min-width:145px}.total-marks-cell b{color:var(--text);font-size:.88rem;font-weight:700}.total-marks-cell span{color:var(--muted);font-size:.73rem;line-height:1.35}
.pill { display:inline-flex; align-items:center; min-height:26px; padding:3px 9px; border-radius:999px; font-size:.78rem; font-weight:680; border:1px solid transparent; }
.pill.green { background:var(--green-soft); color:#277e60; border-color:rgba(47,159,117,.10); }
.pill.red { background:var(--red-soft); color:#a94d5d; border-color:rgba(207,94,112,.10); }
.pill.amber { background:var(--amber-soft); color:#91651f; border-color:rgba(185,129,45,.10); }
.pill.blue { background:var(--blue-soft); color:#466ba7; border-color:rgba(52,120,246,.10); }
.pill.violet { background:var(--violet-soft); color:#6654a7; border-color:rgba(123,97,223,.10); }

/* Subjects */
.subject-layout { display:grid; grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr); gap:16px; }
.subject-stack { display:grid; gap:10px; }
.subject-row-card { border-radius:var(--radius-lg); padding:16px; }
.subject-row-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.subject-row-card h3 { margin:0; font-size:.98rem; }
.subject-row-card p { margin:4px 0 0; color:var(--muted); font-size:.8rem; }
.subject-progress { margin-top:13px; height:8px; border-radius:999px; background:rgba(77,104,145,.10); overflow:hidden; }
.subject-progress span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#4b8df4,#6a75e4); }
.subject-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:8px 18px; margin-top:13px; }
.subject-metric { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:.82rem; }
.subject-metric b { color:var(--text-2); font-weight:700; }

/* Heatmap */
.heat-wrap { overflow:auto; border-radius:var(--radius-lg); padding:12px; }
.heat { border-collapse:separate; border-spacing:6px; font-size:.82rem; }
.heat th { padding:8px; color:var(--muted); font-size:.75rem; font-weight:700; max-width:110px; white-space:normal; line-height:1.25; }
.heat td { min-width:50px; height:42px; padding:0 8px; border-radius:9px; text-align:center; font-weight:720; border:1px solid rgba(255,255,255,.62); }
.heat-name { position:sticky; left:0; z-index:3; min-width:220px!important; padding:9px 12px!important; text-align:left!important; background:rgba(250,252,255,.90)!important; color:var(--text)!important; box-shadow:8px 0 16px rgba(70,90,120,.04); backdrop-filter:blur(10px); }
.heat-name span { display:block; margin-top:2px; color:var(--muted); font-size:.76rem; font-weight:500; }
.heat .fail { background:#fdecef; color:#a74e5e; }
.heat .low { background:#fff2dd; color:#946723; }
.heat .mid { background:#edf3ff; color:#496ca5; }
.heat .high { background:#e6f7ef; color:#2b7f63; }
.heat-legend { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; color:var(--muted); font-size:.8rem; }

/* Modal */
.modal-backdrop { position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:24px; background:rgba(74,92,119,.22); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.modal { width:min(1050px,100%); max-height:92dvh; overflow:auto; border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); }
.modal-head { position:sticky; top:0; z-index:3; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:22px 24px; background:rgba(250,252,255,.84); border-bottom:1px solid rgba(113,133,161,.12); backdrop-filter:blur(18px); }
.modal-head h3 { margin:5px 0 0; font-size:1.55rem; letter-spacing:-.04em; }
.modal-head p { margin:4px 0 0; color:var(--muted); font-size:.86rem; }
.close-btn { width:40px; height:40px; border:1px solid rgba(103,125,158,.18); border-radius:var(--radius-md); background:rgba(255,255,255,.66); cursor:pointer; color:#61738b; display:grid; place-items:center; }
.modal-body { padding:22px 24px 26px; }
.profile-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.summary-item { padding:12px 13px; border:1px solid rgba(255,255,255,.78); border-radius:var(--radius-md); background:rgba(255,255,255,.50); }
.summary-item small { display:block; color:var(--muted); font-size:.73rem; font-weight:650; text-transform:uppercase; letter-spacing:.05em; }
.summary-item b { display:block; margin-top:4px; color:var(--text); font-size:.92rem; }
.profile-insight { margin-bottom:14px; padding:14px 15px; border:1px solid rgba(255,255,255,.82); border-radius:var(--radius-md); background:linear-gradient(135deg,rgba(236,244,255,.72),rgba(246,242,255,.68)); color:var(--text-2); font-size:.9rem; line-height:1.65; }
.subject-results-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.subject-result { padding:14px; border:1px solid rgba(255,255,255,.82); border-radius:var(--radius-md); background:rgba(255,255,255,.50); }
.subject-result.fail { background:rgba(253,236,239,.76); border-color:rgba(255,255,255,.88); }
.subject-result-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.subject-result h4 { margin:0; color:var(--text); font-size:.9rem; }
.subject-result small { display:block; margin-top:2px; color:var(--muted); font-size:.76rem; }
.subject-result-value { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:12px; }
.subject-result-value strong { font-size:1.6rem; line-height:1; letter-spacing:-.04em; }
.subject-result-value span { color:var(--muted); font-size:.8rem; }

.empty { padding:54px 24px; text-align:center; color:var(--muted); }
.empty svg { width:32px; height:32px; margin-bottom:10px; color:#7890b2; }
.footer-note { margin-top:11px; color:var(--muted); font-size:.8rem; }

@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .overview-lead, .grid-main, .grid-secondary, .subject-layout { grid-template-columns:1fr; }
  .subject-layout .subject-stack { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 920px) {
  .layout { grid-template-columns:1fr; }
  .sidebar { position:fixed; left:-280px; width:var(--sidebar); transition:left .22s var(--ease); box-shadow:18px 0 50px rgba(66,85,115,.12); }
  .sidebar.open { left:0; }
  .mobile-menu { display:grid; place-items:center; }
  .content { padding:24px 18px 42px; }
  .topbar { padding:0 18px; }
  .login-shell { grid-template-columns:1fr; width:min(620px,100%); }
  .login-story { min-height:auto; padding:34px; }
  .story-copy h1 { font-size:clamp(2.5rem,8vw,3.8rem); }
}

@media (max-width: 768px) {
  .page-head { align-items:flex-start; flex-direction:column; }
  .kpi-grid { grid-template-columns:1fr 1fr; }
  .filter-panel { align-items:stretch; flex-direction:column; }
  .filters { display:grid; grid-template-columns:1fr 1fr; }
  .field.search { grid-column:1/-1; }
  .field input, .field select, .field.search input { min-width:0; width:100%; }
  .result-count { padding:0 2px; }
  .subject-layout .subject-stack { grid-template-columns:1fr; }
  .profile-summary { grid-template-columns:1fr 1fr; }
}

@media (max-width: 560px) {
  .content { padding:18px 12px 32px; }
  .topbar { min-height:66px; padding:0 12px; }
  .session-pill { display:none; }
  .kpi-grid { grid-template-columns:1fr; }
  .lead-card, .pass-card { border-radius:var(--radius-lg); padding:20px; }
  .lead-card h3 { font-size:2.15rem; }
  .filters { grid-template-columns:1fr; }
  .field.search { grid-column:auto; }
  .subject-metrics { grid-template-columns:1fr; }
  .profile-summary, .subject-results-grid { grid-template-columns:1fr; }
  .login-card, .login-story { padding:26px; border-radius:var(--radius-lg); }
  .story-copy h1 { font-size:2.65rem; }
}