/* Dashboard UI V2 — struktur bersama untuk semua tema. */
:root {
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --page-bg: #f7f2eb;
  --surface: #fffdfa;
  --surface-soft: #f4eee7;
  --surface-strong: #0d5558;
  --ink: #173c3f;
  --muted: #6c7776;
  --line: rgba(23, 60, 63, .14);
  --primary: #0d6668;
  --primary-ink: #ffffff;
  --secondary: #f4aa8b;
  --accent: #f6ca72;
  --accent-2: #63b9b5;
  --success: #21835b;
  --warning: #d28b2f;
  --danger: #c94c4c;
  --info: #4177a8;
  --sidebar-bg: #0d5558;
  --sidebar-ink: #fffaf3;
  --sidebar-muted: rgba(255, 250, 243, .67);
  --sidebar-hover: rgba(255,255,255,.09);
  --sidebar-active: #f6ca72;
  --sidebar-active-ink: #173c3f;
  --hero-bg: linear-gradient(125deg, #0c5558, #0f6b6c 58%, #154348);
  --hero-ink: #fffaf3;
  --hero-muted: rgba(255,250,243,.76);
  --card-shadow: 0 18px 42px rgba(45, 62, 60, .10);
  --card-shadow-hover: 0 24px 52px rgba(45, 62, 60, .16);
  --hard-shadow: none;
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --border-width: 1px;
  --chart-grid: rgba(23,60,63,.10);
  --chart-text: #6c7776;
  --chart-center: #173c3f;
  --chart-point-bg: #fffdfa;
  --chart-palette: #0d6668,#f4aa8b,#f6ca72,#63b9b5,#8663a8,#21835b,#d28b2f,#c94c4c,#4177a8;
  --table-head: #f2ebe3;
  --table-hover: #fff7ed;
  --focus-ring: rgba(13,102,104,.18);
  --organic-opacity: .16;
  --nav-width: 286px;
  /* Alias untuk komponen dashboard sedia ada. */
  --nav: var(--sidebar-bg);
  --nav2: var(--sidebar-bg);
  --bg: var(--page-bg);
  --card: var(--surface);
  --blue: var(--primary);
  --cyan: var(--accent-2);
  --purple: var(--secondary);
  --green: var(--success);
  --amber: var(--warning);
  --red: var(--danger);
  --shadow: var(--card-shadow);
  --radius: var(--radius-md);
}

html[data-theme] { color-scheme: light; }
body.dashboard-page,
body.login-page {
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-body);
  transition: background-color .25s ease, color .25s ease;
}

body.dashboard-page::before,
body.dashboard-page::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: -1;
  opacity: var(--organic-opacity);
  filter: blur(.2px);
}
body.dashboard-page::before {
  width: 420px;
  height: 420px;
  right: -150px;
  top: 90px;
  border-radius: 43% 57% 61% 39% / 38% 44% 56% 62%;
  background: var(--secondary);
  transform: rotate(18deg);
}
body.dashboard-page::after {
  width: 360px;
  height: 360px;
  left: calc(var(--nav-width) - 170px);
  bottom: -190px;
  border-radius: 58% 42% 38% 62% / 45% 58% 42% 55%;
  background: var(--accent-2);
}

.app-shell { grid-template-columns: var(--nav-width) minmax(0, 1fr); }
.main { grid-column: 2; }

.sidebar {
  width: var(--nav-width);
  background: var(--sidebar-bg);
  color: var(--sidebar-ink);
  padding: 22px 17px 18px;
  border-right: var(--border-width) solid var(--line);
  box-shadow: 10px 0 30px rgba(0,0,0,.06);
}
.sidebar::before {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -70px;
  top: -55px;
  border-radius: 50%;
  background: var(--secondary);
  opacity: .16;
}
.sidebar::after {
  content: "✦";
  position: absolute;
  right: 25px;
  top: 105px;
  color: var(--accent);
  font-size: 22px;
  opacity: .75;
}
.brand {
  position: relative;
  align-items: flex-start;
  padding: 5px 7px 21px;
  border-bottom-color: rgba(255,255,255,.14);
}
.brand-mark {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--sidebar-active);
  color: var(--sidebar-active-ink);
  box-shadow: var(--hard-shadow), 0 12px 30px rgba(0,0,0,.16);
  border: var(--border-width) solid rgba(255,255,255,.16);
}
.brand-copy { min-width: 0; }
.brand-kicker {
  display: block;
  margin: 1px 0 5px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.brand strong {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.04;
  letter-spacing: -.02em;
}
.brand span { color: var(--sidebar-muted); }

.menu { gap: 5px; padding-top: 16px; }
.menu-group {
  color: var(--sidebar-muted);
  margin-top: 13px;
  font-size: 9px;
}
.menu-item {
  color: var(--sidebar-muted);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 11px;
}
.menu-item:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-ink);
  transform: translateX(2px);
}
.menu-item.active {
  background: var(--sidebar-active);
  color: var(--sidebar-active-ink);
  border-color: color-mix(in srgb, var(--sidebar-active-ink) 18%, transparent);
  box-shadow: var(--hard-shadow), 0 12px 24px rgba(0,0,0,.12);
}
.menu-icon {
  background: rgba(255,255,255,.10);
  border: var(--border-width) solid rgba(255,255,255,.08);
}
.menu-item.active .menu-icon {
  background: color-mix(in srgb, var(--sidebar-active-ink) 10%, transparent);
  border-color: color-mix(in srgb, var(--sidebar-active-ink) 15%, transparent);
}
.menu-badge {
  background: rgba(255,255,255,.09);
  color: var(--sidebar-muted);
}
.menu-item.active .menu-badge { color: currentColor; background: rgba(0,0,0,.08); }
.menu-badge.ready { color: #a8f0c1; }
.sidebar-footer { border-top-color: rgba(255,255,255,.14); color: var(--sidebar-muted); }
.privacy-note { color: var(--sidebar-ink); }

.topbar {
  min-height: 92px;
  height: auto;
  background: color-mix(in srgb, var(--page-bg) 86%, transparent);
  border-bottom: var(--border-width) solid var(--line);
  padding: 15px 28px;
  backdrop-filter: blur(18px) saturate(1.1);
}
.page-heading span { color: var(--primary); }
.page-heading h1 {
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 29px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.025em;
}
.top-actions { flex-wrap: wrap; justify-content: flex-end; }
.action-cluster { display: flex; gap: 8px; align-items: center; }

.source-pill,
.primary-btn,
.secondary-btn,
.icon-btn,
.theme-trigger {
  border-radius: var(--radius-sm);
  border-width: var(--border-width);
}
.source-pill {
  background: var(--surface);
  color: var(--muted);
  border-color: var(--line);
  box-shadow: 0 5px 15px rgba(0,0,0,.035);
}
.primary-btn {
  background: var(--primary);
  color: var(--primary-ink);
  border: var(--border-width) solid color-mix(in srgb, var(--primary) 75%, black);
  box-shadow: var(--hard-shadow), 0 10px 20px color-mix(in srgb, var(--primary) 24%, transparent);
}
.primary-btn:hover { box-shadow: var(--hard-shadow), var(--card-shadow-hover); }
.secondary-btn,
.theme-trigger {
  background: var(--surface);
  color: var(--ink);
  border: var(--border-width) solid var(--line);
  box-shadow: 0 5px 15px rgba(0,0,0,.035);
}
.secondary-btn:hover,
.theme-trigger:hover {
  background: var(--surface-soft);
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
}

.theme-control { position: relative; }
.theme-trigger {
  min-height: 39px;
  padding: 8px 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.theme-trigger-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--primary);
  color: var(--primary-ink);
  font-size: 13px;
}
.theme-trigger-copy { text-align: left; line-height: 1.05; }
.theme-trigger-copy small { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 3px; }
.theme-trigger-copy strong { font-size: 11px; color: var(--ink); }
.theme-chevron { font-size: 10px; color: var(--muted); }
.theme-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(420px, calc(100vw - 36px));
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-md);
  padding: 13px;
  box-shadow: var(--hard-shadow), 0 28px 70px rgba(0,0,0,.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-7px) scale(.985);
  transform-origin: top right;
  transition: .18s ease;
  z-index: 80;
}
.theme-popover.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.theme-popover-head { padding: 4px 4px 11px; }
.theme-popover-head strong { display: block; font-family: var(--font-display); font-size: 17px; }
.theme-popover-head small { color: var(--muted); }
.theme-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.theme-option {
  border: var(--border-width) solid var(--line);
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  padding: 8px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.theme-option:hover { transform: translateY(-2px); box-shadow: var(--card-shadow); }
.theme-option.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.theme-mini {
  height: 68px;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 31% 1fr;
  margin-bottom: 8px;
  border: 1px solid rgba(0,0,0,.10);
}
.theme-mini > span:first-child { background: var(--mini-nav); }
.theme-mini > span:last-child {
  background: var(--mini-bg);
  position: relative;
}
.theme-mini > span:last-child::before,
.theme-mini > span:last-child::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  border-radius: 7px;
  border: var(--mini-border, 0) solid #111;
  box-shadow: var(--mini-shadow, none);
}
.theme-mini > span:last-child::before { height: 17px; top: 10px; background: var(--mini-accent); }
.theme-mini > span:last-child::after { height: 22px; top: 35px; background: var(--mini-card); }
.theme-option strong { display: block; font-size: 11px; margin-bottom: 2px; }
.theme-option small { display: block; color: var(--muted); font-size: 9px; }
.theme-option[data-theme="creative"] { --mini-nav:#0d5558; --mini-bg:#fff4ea; --mini-accent:#f6ca72; --mini-card:#f4aa8b; }
.theme-option[data-theme="brutal"] { --mini-nav:#59d4cf; --mini-bg:#fff4df; --mini-accent:#ffe56a; --mini-card:#ff7a80; --mini-border:2px; --mini-shadow:3px 3px 0 #111; }
.theme-option[data-theme="earthy"] { --mini-nav:#7a3f27; --mini-bg:#f4eadc; --mini-accent:#a9a582; --mini-card:#b8633b; }

.content {
  padding: 28px 30px 50px;
  max-width: 1720px;
}
.hero {
  background: var(--hero-bg);
  color: var(--hero-ink);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid color-mix(in srgb, var(--hero-ink) 14%, transparent);
  padding: clamp(25px, 4vw, 43px);
  min-height: 236px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--hard-shadow), var(--card-shadow);
}
.hero::before,
.hero::after { opacity: .75; }
.hero::after {
  width: 350px;
  height: 350px;
  background: var(--secondary);
  opacity: .22;
  border-radius: 45% 55% 61% 39% / 51% 39% 61% 49%;
}
.hero::before {
  width: 230px;
  height: 230px;
  background: var(--accent);
  opacity: .20;
  border-radius: 57% 43% 37% 63% / 36% 62% 38% 64%;
}
.hero-eyebrow {
  width: max-content;
  background: color-mix(in srgb, var(--hero-ink) 10%, transparent);
  border-color: color-mix(in srgb, var(--hero-ink) 17%, transparent);
  color: var(--hero-ink);
}
.hero h2 {
  font-family: var(--font-display);
  font-size: clamp(31px, 4vw, 54px);
  max-width: 900px;
  line-height: .98;
  letter-spacing: -.045em;
  margin-top: 17px;
}
.hero p { color: var(--hero-muted); font-size: 13px; max-width: 850px; }
.hero-meta span { color: var(--hero-muted); }

.kpi-grid { gap: 14px; }
.kpi-card,
.panel,
.exam-row,
.analysis-card,
.topic-card,
.detail-box,
.empty-state,
.loading-card,
.login-card,
.modal-panel,
.notice {
  background: var(--surface);
  color: var(--ink);
  border: var(--border-width) solid var(--line);
  box-shadow: var(--hard-shadow), var(--card-shadow);
}
.kpi-card {
  min-height: 138px;
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.kpi-card::before {
  left: 18px;
  top: 17px;
  bottom: auto;
  width: 34px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent, var(--primary));
}
.kpi-card::after {
  content: "✦";
  position: absolute;
  right: 16px;
  top: 12px;
  color: var(--accent, var(--primary));
  opacity: .32;
}
.kpi-label { color: var(--muted); margin-top: 16px; }
.kpi-value { color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 31px; }
.kpi-note { color: var(--muted); }

.panel { border-radius: var(--radius-md); overflow: hidden; }
.panel-head {
  background: color-mix(in srgb, var(--surface-soft) 65%, var(--surface));
  border-bottom-color: var(--line);
  padding: 19px 21px;
}
.panel-head h3 { font-family: var(--font-display); font-size: 19px; color: var(--ink); }
.panel-head p { color: var(--muted); }
.panel-body { padding: 21px; }

input,
select,
.search-box input {
  background: var(--surface);
  color: var(--ink);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-sm);
}
input::placeholder { color: color-mix(in srgb, var(--muted) 72%, transparent); }
.search-box input:focus,
select:focus,
input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--focus-ring); }
.search-box::before { color: var(--muted); }

.table-shell { background: var(--surface); }
.data-table th {
  background: var(--table-head);
  color: var(--ink);
  border-bottom-color: var(--line);
  font-weight: 850;
}
.data-table td { color: var(--ink); border-bottom-color: var(--line); }
.data-table tbody tr:hover td { background: var(--table-hover); }
.data-table .sticky-first { background: var(--surface); }
.data-table th.sticky-first { background: var(--table-head); }
.data-table tbody tr:hover .sticky-first { background: var(--table-hover); }

.exam-row {
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.exam-row:hover { border-color: var(--primary); box-shadow: var(--hard-shadow), var(--card-shadow-hover); transform: translateY(-2px); }
.exam-row strong,
.exam-metric b { color: var(--ink); }
.exam-row small,
.exam-metric { color: var(--muted); }

.analysis-card { overflow: hidden; }
.analysis-summary { background: var(--surface); }
.analysis-summary:hover { background: var(--table-hover); }
.analysis-topic strong,
.analysis-score { color: var(--ink); }
.analysis-topic small,
.analysis-score small { color: var(--muted); }
.analysis-item { background: var(--primary); color: var(--primary-ink); border-radius: var(--radius-sm); }
.analysis-detail { background: var(--surface-soft); border-top-color: var(--line); }
.detail-box { box-shadow: none; }
.detail-box p { color: var(--muted); }

.progress { background: color-mix(in srgb, var(--line) 70%, transparent); }
.progress > span { background: linear-gradient(90deg, var(--primary), var(--accent-2)); }

.topic-card { box-shadow: none; border-radius: var(--radius-sm); }
.topic-card span { color: var(--primary); font-family: var(--font-display); }

.empty-state,
.loading-card { border-radius: var(--radius-lg); }
.empty-icon { background: var(--surface-soft); color: var(--primary); }
.loader { border-color: color-mix(in srgb, var(--primary) 20%, transparent); border-top-color: var(--primary); }
.notice.info { background: color-mix(in srgb, var(--info) 8%, var(--surface)); color: var(--ink); }

.modal-backdrop { background: rgba(18, 27, 27, .58); backdrop-filter: blur(5px); }
.modal-panel { border-radius: var(--radius-lg); }
.modal-close { background: var(--surface-soft); color: var(--ink); }
.student-header { background: var(--hero-bg); color: var(--hero-ink); border-radius: var(--radius-md); }
.student-header p { color: var(--hero-muted); }
.mini-kpi { background: color-mix(in srgb, var(--hero-ink) 11%, transparent); border-color: color-mix(in srgb, var(--hero-ink) 14%, transparent); }
.item-chip { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
.item-chip.zero { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }

.footer { color: var(--muted); }

.login-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 28%),
    radial-gradient(circle at 88% 80%, color-mix(in srgb, var(--secondary) 35%, transparent), transparent 28%),
    var(--page-bg);
}
.login-card { border-radius: var(--radius-lg); }
.login-card h1 { font-family: var(--font-display); color: var(--ink); }
.login-card p,
.login-card label { color: var(--muted); }
.login-card button { background: var(--primary); color: var(--primary-ink); border: var(--border-width) solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--hard-shadow); }

@media (max-width: 1180px) {
  .theme-trigger-copy { display: none; }
  .theme-trigger { padding: 7px; }
  .theme-chevron { display: none; }
}
@media (max-width: 880px) {
  :root { --nav-width: 286px; }
  body.dashboard-page::after { display: none; }
  .main { grid-column: 1; }
  .topbar { padding: 12px 16px; }
  .content { padding: 20px 16px 40px; }
  .theme-options { grid-template-columns: 1fr; }
  .theme-mini { height: 52px; }
  .source-pill { display: none; }
}
@media (max-width: 560px) {
  .top-actions { gap: 6px; }
  .action-cluster .secondary-btn { display: none; }
  .theme-popover { position: fixed; top: 75px; right: 12px; left: 12px; width: auto; }
  .hero { min-height: 205px; }
  .hero h2 { font-size: 34px; }
  .kpi-card { min-height: 118px; }
}

@media print {
  .theme-control { display: none !important; }
  body.dashboard-page::before,
  body.dashboard-page::after { display: none; }
}

/* Warna status mengikut palet tema. */
.grade-Aplus,.grade-A,.grade-Aminus { background: var(--success); }
.grade-Bplus,.grade-B { background: var(--info); }
.grade-Cplus,.grade-C { background: var(--secondary); }
.grade-D,.grade-E { background: var(--warning); }
.grade-G { background: var(--danger); }
.grade-TH { background: var(--muted); }
.level-critical { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); color: var(--danger); }
.level-weak { background: color-mix(in srgb, var(--warning) 18%, var(--surface)); color: color-mix(in srgb, var(--warning) 78%, #4b2a00); }
.level-medium { background: color-mix(in srgb, var(--accent) 35%, var(--surface)); color: var(--ink); }
.level-good { background: color-mix(in srgb, var(--success) 15%, var(--surface)); color: var(--success); }
.level-excellent { background: color-mix(in srgb, var(--info) 15%, var(--surface)); color: var(--info); }
.status-badge { background: color-mix(in srgb, var(--primary) 11%, var(--surface)); color: var(--primary); }

/* ===== Analisis Ikut Murid — kemas & konsisten ===== */
.analysis-shell{display:flex;flex-direction:column;gap:22px}
.analysis-header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.analysis-title-row{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.analysis-title-row h2{margin:0;font-family:var(--font-body);font-size:clamp(28px,2vw,36px);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.analysis-badge-icon{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:color-mix(in srgb, var(--warning) 25%, transparent);color:var(--ink);font-size:20px}
.analysis-header p{margin:0;color:var(--muted);font-size:14px}
.analysis-inline-alert{color:#c86434;font-weight:700}
.analysis-switch{display:flex;gap:10px;flex-wrap:wrap}
.view-switch-btn{height:44px;padding:0 18px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:13px;font-weight:800;letter-spacing:.02em;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px rgba(0,0,0,.04)}
.view-switch-btn.active{background:color-mix(in srgb, var(--success) 78%, white);color:#fff;border-color:transparent}
.analysis-summary-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.summary-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px 20px;box-shadow:var(--shadow);min-height:110px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.summary-card-label{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;margin-bottom:10px}
.summary-card-value{font-size:28px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.summary-card-value.is-warn{color:#c86434}.summary-card-value.is-amber{color:#b47a19}.summary-card-value.is-green{color:#4c8057}
.student-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.student-card-clean{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:22px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}
.student-card-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.student-card-top h3{margin:0 0 10px;font-family:var(--font-body);font-size:20px;line-height:1.2;font-weight:800;color:#323233}
.student-score-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#7a7269;font-size:14px}
.student-score-line strong{font-size:34px;line-height:1;font-weight:500;color:#8d8479}
.target-copy{font-size:14px;color:#857b71}.target-copy b{color:#4b4137}.target-copy small{font-size:12px;color:#9b9084}
.delta-chip{font-size:13px;font-weight:700;color:#8b8072;white-space:nowrap}
.insight-line{margin:0;font-size:15px;line-height:1.65;color:#73695f}
.insight-line span{font-weight:800;color:#c86434}
.insight-line.intervention span{color:#4c8057}
.skill-tags{display:flex;gap:8px;flex-wrap:wrap}
.skill-pill{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;background:#dde7dc;color:#54795e;font-size:13px;font-weight:700;border:1px solid #c8d6c6}
.work-box{background:color-mix(in srgb, var(--surface-soft) 75%, white);border:1px solid color-mix(in srgb, var(--line) 85%, transparent);border-radius:16px;padding:16px 18px}
.work-title{font-size:12px;font-weight:800;letter-spacing:.08em;color:#795d3f;text-transform:uppercase;margin-bottom:12px}
.work-box ol{margin:0;padding-left:0;list-style:none;display:grid;gap:10px}
.work-box li{position:relative;padding-left:32px;font-size:15px;line-height:1.5;color:#675f57}
.work-box li::before{counter-increment:item;content:counter(item);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:999px;background:#7b5a36;color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.work-box ol{counter-reset:item}
.student-card-clean .grade-badge{min-width:34px;justify-content:center;padding:6px 11px;border-radius:10px;font-size:18px;font-weight:800}
#analysisModeRoot .kpi-card{background:var(--surface);box-shadow:var(--shadow)}
@media (max-width: 1100px){.student-card-grid,.analysis-summary-cards{grid-template-columns:1fr}}
@media (max-width: 720px){.student-card-clean{padding:18px}.student-card-top{flex-direction:column}.student-score-line strong{font-size:28px}.analysis-title-row h2{font-size:24px}}