:root {
  --bg: #f8fafc;
  --panel: #ffffff;
  --panel-2: #eef2ff;
  --text: #111827;
  --muted: #374151;
  --line: #cbd5e1;
  --brand: #0b3d91;
  --brand-2: #075985;
  --accent: #7c2d12;
  --success: #14532d;
  --warning: #854d0e;
  --danger: #991b1b;
  --link: #0b3d91;
  --shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
  --radius: 18px;
}
html[data-theme="dark"] {
  --bg: #070b14;
  --panel: #111827;
  --panel-2: #172554;
  --text: #f8fafc;
  --muted: #dbeafe;
  --line: #334155;
  --brand: #93c5fd;
  --brand-2: #bfdbfe;
  --accent: #fed7aa;
  --success: #bbf7d0;
  --warning: #fde68a;
  --danger: #fecaca;
  --link: #bfdbfe;
  --shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.18), transparent 26rem),
    radial-gradient(circle at bottom right, rgba(249,115,22,.12), transparent 22rem),
    var(--bg);
  line-height: 1.55;
  min-height: 100vh;
}
a { color: var(--link); font-weight: 700; text-decoration: none; }
a:hover { text-decoration: underline; }
.skip-link { position:absolute; top:-4rem; left:1rem; background:var(--brand); color:#fff; padding:.75rem 1rem; border-radius:.5rem; z-index:999; }
.skip-link:focus { top:1rem; }
.topnav {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  padding: .8rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.topnav a, .topnav button {
  color: var(--text);
  padding: .55rem .7rem;
  border-radius: .8rem;
}
.topnav a:hover, .topnav button:hover { background: var(--panel-2); text-decoration: none; }
.topnav .brand {
  color: var(--brand);
  font-size: 1.06rem;
  margin-right: auto;
  letter-spacing: .01em;
}
.navform { display:inline; margin:0; }
.hero {
  max-width: 1200px;
  margin: 1.2rem auto 0;
  padding: 1.5rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.hero h1 { margin:.15rem 0 0; font-size: clamp(1.8rem, 4vw, 3.25rem); line-height:1.05; }
.hero.compact { padding-bottom:.5rem; }
.eyebrow { color: var(--accent); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; margin:0; }
.container { max-width: 1200px; margin: 0 auto; padding: 1rem 1rem 3rem; }
.footer { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; color: var(--muted); border-top: 1px solid var(--line); }
.user-chip, .badge {
  display:inline-flex; align-items:center; gap:.35rem;
  border:1px solid var(--line); background:var(--panel); color:var(--text);
  padding:.35rem .6rem; border-radius:999px; font-weight:800; font-size:.86rem;
}
.badge-admin { background:#7f1d1d; color:#fff; border-color:#7f1d1d; }
.badge-leader { background:#075985; color:#fff; border-color:#075985; }
html[data-theme="dark"] .badge-admin { background:#fecaca; color:#450a0a; }
html[data-theme="dark"] .badge-leader { background:#bfdbfe; color:#082f49; }
.status { background: var(--panel-2); }
.splash, .dashboard-hero {
  display:grid; grid-template-columns: 1.45fr .9fr; gap:1.2rem; align-items:stretch;
  background: linear-gradient(135deg, var(--panel), var(--panel-2));
  border:1px solid var(--line); border-radius: var(--radius); padding:1.5rem; box-shadow:var(--shadow);
}
.splash h2 { font-size: clamp(2rem, 5vw, 4rem); line-height:1; margin:.4rem 0 1rem; }
.splash p, .dashboard-hero p { color: var(--muted); font-size:1.05rem; }
.splash-panel, .stats { display:grid; gap:.8rem; }
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat {
  background:var(--panel); border:1px solid var(--line); border-radius:1rem; padding:1rem;
  display:flex; flex-direction:column; gap:.2rem; box-shadow: 0 8px 18px rgba(0,0,0,.06);
}
.stat span { font-size:1.4rem; }
.stat strong { font-size:1.6rem; color:var(--brand); }
.stat small { color:var(--muted); font-weight:800; }
.grid { display:grid; gap:1rem; margin:1rem 0; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card, .panel, .auth-card .panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.05rem;
  box-shadow: var(--shadow);
}
.card-head { display:flex; gap:.6rem; align-items:center; }
.card h2, .panel h2 { margin:.2rem 0 .6rem; }
.card-body p:first-child { margin-top:.3rem; }
.icon, .big-icon { font-size:1.6rem; }
.big-icon { font-size:3rem; }
.actions { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-top:.75rem; }
.button, button {
  border:1px solid var(--line); background:var(--panel-2); color:var(--text); border-radius:.8rem;
  padding:.68rem .95rem; font-weight:900; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  min-height: 42px;
}
button { font-family: inherit; font-size: 1rem; }
.button.primary, button.primary { background: var(--brand); color: #ffffff; border-color: var(--brand); }
html[data-theme="dark"] .button.primary, html[data-theme="dark"] button.primary { background:#bfdbfe; color:#082f49; border-color:#bfdbfe; }
.button.ghost, button.ghost { background: transparent; }
button.danger, .danger { background:#fee2e2; color:#7f1d1d; border-color:#fecaca; }
html[data-theme="dark"] button.danger, html[data-theme="dark"] .danger { background:#7f1d1d; color:#fff; border-color:#ef4444; }
button.small, .small { min-height:32px; padding:.3rem .55rem; font-size:.86rem; }
.auth-card { max-width: 560px; margin: 1rem auto; }
.form-card label, .filter-bar label { display:flex; flex-direction:column; gap:.25rem; font-weight:900; color:var(--text); margin:.55rem 0; }
input, select, textarea {
  width:100%; padding:.75rem .8rem; border-radius:.75rem; border:1px solid var(--line);
  background:var(--bg); color:var(--text); font: inherit;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus, a:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.hint { color: var(--muted); font-size:.92rem; font-weight:700; }
.flash-stack { display:grid; gap:.5rem; margin: 0 0 1rem; }
.flash { border-radius: 1rem; padding:.8rem 1rem; font-weight:800; border:1px solid var(--line); }
.flash.success { background:#dcfce7; color:#14532d; border-color:#86efac; }
.flash.error { background:#fee2e2; color:#7f1d1d; border-color:#fecaca; }
.flash.warning { background:#fef3c7; color:#78350f; border-color:#fde68a; }
html[data-theme="dark"] .flash.success { background:#052e16; color:#bbf7d0; border-color:#166534; }
html[data-theme="dark"] .flash.error { background:#450a0a; color:#fecaca; border-color:#991b1b; }
html[data-theme="dark"] .flash.warning { background:#451a03; color:#fde68a; border-color:#92400e; }
.filter-bar {
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)) auto auto; gap:.7rem; align-items:end;
}
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:1rem; }
table { width:100%; border-collapse: collapse; background:var(--panel); }
th, td { padding:.75rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { background:var(--panel-2); color:var(--text); }
tr:hover td { background: rgba(59,130,246,.08); }
.split { display:flex; justify-content:space-between; gap:1rem; align-items:center; flex-wrap:wrap; }
.lesson-title { display:flex; gap:1rem; align-items:center; }
.lesson-block { border-left:5px solid var(--brand); padding:.5rem .9rem; margin:.8rem 0; background:var(--panel-2); border-radius:.6rem; }
.formula-box { border:1px solid var(--line); border-radius:1rem; padding:1rem; background:var(--bg); }
.formula-box code { font-size:1.05rem; font-weight:900; color:var(--brand); }
.back { display:inline-flex; margin:.3rem 0 .9rem; }
.pagination { display:flex; gap:.35rem; justify-content:center; margin:1.2rem 0; }
.page { padding:.5rem .75rem; border:1px solid var(--line); border-radius:.6rem; background:var(--panel); }
.page.active { background:var(--brand); color:#fff; }
.note { border-left:4px solid var(--brand); padding:.6rem .8rem; margin:.5rem 0; background:var(--panel-2); border-radius:.5rem; }
.note small { display:block; color:var(--muted); font-weight:800; }
.inline-note { display:flex; gap:.5rem; align-items:center; }
.inline-actions { display:flex; gap:.3rem; flex-wrap:wrap; }
.guide { max-width: 920px; margin: 0 auto; }
.bullet { padding-left: .8rem; }
@media (max-width: 900px) {
  .grid.two, .grid.three, .splash, .dashboard-hero, .filter-bar { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .topnav .brand { width:100%; }
}
@media print {
  .topnav, .footer, .actions, button { display:none !important; }
  body { background:#fff; color:#000; }
  .card, .panel { box-shadow:none; }
}
/* Premium Suite enhancements */
.premium-hero { border-width: 2px; }
.scorebar { width:100%; height:18px; border-radius:999px; border:1px solid var(--line); background:var(--bg); overflow:hidden; margin:.7rem 0; }
.scorebar span { display:block; height:100%; background:var(--brand); border-radius:999px; min-width:2%; }
html[data-theme="dark"] .scorebar span { background:#bfdbfe; }
.report h3 { margin-top:1.1rem; color:var(--brand); }
input[type="file"] { padding:.65rem; background:var(--panel); }
.card .table-wrap { margin-top:.5rem; }

/* DMAC premium visual refresh - typography and layout polish only.
   No route, form, data, or business-logic behavior is changed. */
:root {
  --radius: 22px;
  --content-max: 1320px;
  --comfortable-pad: clamp(1.15rem, 1.1vw + .75rem, 1.75rem);
  --section-gap: clamp(1.05rem, 1vw + .65rem, 1.6rem);
}
html {
  font-size: clamp(17px, 0.22vw + 16px, 19px);
  scroll-behavior: smooth;
}
body {
  font-size: 1rem;
  line-height: 1.68;
  letter-spacing: 0.002em;
}
p, li, td, th, label, input, select, textarea, button, .button {
  font-size: 1rem;
}
.topnav {
  gap: .5rem;
  padding: .95rem clamp(1rem, 2vw, 1.75rem);
}
.topnav a, .topnav button {
  padding: .68rem .88rem;
  border-radius: 1rem;
  font-size: .98rem;
  min-height: 44px;
}
.topnav .brand {
  font-size: clamp(1.18rem, 1vw + .95rem, 1.45rem);
  font-weight: 950;
  letter-spacing: .015em;
}
.hero, .container, .footer {
  max-width: var(--content-max);
}
.hero {
  margin-top: 1.45rem;
  padding: clamp(1.25rem, 2.4vw, 2.2rem);
}
.hero h1 {
  font-size: clamp(2.15rem, 4.4vw, 4.15rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.hero.compact {
  padding-bottom: .85rem;
}
.eyebrow {
  font-size: .86rem;
  letter-spacing: .105em;
}
.container {
  padding: 1.15rem clamp(1rem, 2vw, 1.75rem) 3.8rem;
}
.footer {
  padding: 2.5rem clamp(1rem, 2vw, 1.75rem);
  font-size: .96rem;
}
.splash, .dashboard-hero {
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .9fr);
  gap: var(--section-gap);
  padding: clamp(1.35rem, 2.4vw, 2.3rem);
  border-radius: 28px;
}
.splash h2 {
  font-size: clamp(2.55rem, 5vw, 5rem);
  letter-spacing: -0.06em;
}
.splash p, .dashboard-hero p, .card-body p, .note, .formula-box, .guide p {
  font-size: 1.035rem;
}
.grid {
  gap: var(--section-gap);
  margin: 1.2rem 0;
}
.card, .panel, .auth-card .panel {
  padding: var(--comfortable-pad);
  border-radius: 24px;
}
.card h2, .panel h2 {
  font-size: clamp(1.38rem, 1.2vw + 1rem, 1.95rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin-bottom: .8rem;
}
.card h3, .panel h3, .report h3 {
  font-size: clamp(1.14rem, .7vw + .96rem, 1.45rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
}
.card-head {
  gap: .8rem;
  margin-bottom: .25rem;
}
.icon { font-size: 1.85rem; }
.big-icon { font-size: 3.45rem; }
.actions {
  gap: .75rem;
  margin-top: 1rem;
}
.button, button {
  min-height: 48px;
  padding: .78rem 1.08rem;
  border-radius: 1rem;
  font-size: 1rem;
  letter-spacing: .004em;
}
button.small, .small {
  min-height: 38px;
  padding: .42rem .72rem;
  font-size: .92rem;
}
.auth-card {
  max-width: 640px;
  margin: 1.4rem auto;
}
.form-card label, .filter-bar label {
  gap: .38rem;
  margin: .72rem 0;
  font-size: 1.01rem;
}
input, select, textarea {
  min-height: 48px;
  padding: .86rem .95rem;
  border-radius: 1rem;
  font-size: 1rem;
}
textarea {
  min-height: 7rem;
}
input[type="file"] {
  padding: .82rem .95rem;
}
.hint {
  font-size: .97rem;
  line-height: 1.5;
}
.user-chip, .badge {
  padding: .46rem .72rem;
  font-size: .92rem;
}
.stats {
  gap: 1rem;
}
.stat {
  padding: 1.2rem;
  border-radius: 1.25rem;
}
.stat span { font-size: 1.7rem; }
.stat strong { font-size: clamp(1.7rem, 2.2vw, 2.25rem); }
.stat small { font-size: .92rem; }
.filter-bar {
  gap: .9rem;
  align-items: end;
}
.table-wrap {
  border-radius: 1.2rem;
}
table {
  font-size: 1rem;
}
th, td {
  padding: .95rem 1rem;
}
th {
  font-size: .98rem;
  letter-spacing: .015em;
}
.lesson-title {
  gap: 1.1rem;
}
.lesson-block {
  padding: .85rem 1.05rem;
  margin: 1rem 0;
  border-radius: .9rem;
}
.formula-box {
  padding: 1.15rem;
  border-radius: 1.2rem;
}
.formula-box code {
  font-size: 1.13rem;
}
.flash-stack {
  gap: .65rem;
  margin-bottom: 1.2rem;
}
.flash {
  padding: .95rem 1.1rem;
  border-radius: 1.15rem;
}
.note {
  padding: .82rem 1rem;
  margin: .7rem 0;
  border-radius: .8rem;
}
.pagination {
  gap: .5rem;
  margin: 1.45rem 0;
}
.page {
  padding: .62rem .9rem;
  border-radius: .8rem;
  min-width: 44px;
  text-align: center;
}
.guide {
  max-width: 1020px;
}
.bullet {
  padding-left: 1.1rem;
}
.scorebar {
  height: 22px;
  margin: .9rem 0;
}
.report {
  font-size: 1.035rem;
}
@media (min-width: 1200px) {
  .grid.three {
    grid-template-columns: repeat(3, minmax(310px, 1fr));
  }
  .grid.two {
    grid-template-columns: repeat(2, minmax(420px, 1fr));
  }
}
@media (max-width: 1050px) {
  .grid.three, .splash, .dashboard-hero, .filter-bar {
    grid-template-columns: 1fr;
  }
  .splash, .dashboard-hero {
    padding: 1.35rem;
  }
}
@media (max-width: 700px) {
  html { font-size: 16.5px; }
  .topnav {
    position: static;
    padding: .85rem;
  }
  .topnav .brand {
    width: 100%;
  }
  .topnav a, .topnav button, .button, button {
    width: 100%;
  }
  .actions, .inline-actions {
    flex-direction: column;
    align-items: stretch;
  }
  th, td {
    padding: .82rem;
  }
}

/* Consistent vector icon system. SVG avoids platform-dependent emoji rendering
   and keeps navigation, cards, and metrics visually aligned. */
.ui-icon,
.icon,
.stat-icon,
.big-icon,
.brand-icon,
.nav-icon,
.user-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--brand);
  line-height: 1;
}
.ui-icon svg,
.icon svg,
.stat-icon svg,
.big-icon svg,
.brand-icon svg,
.nav-icon svg,
.user-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.icon,
.stat-icon {
  width: 2.65rem;
  height: 2.65rem;
  padding: .58rem;
  border: 1px solid rgba(11, 61, 145, .18);
  border-radius: .85rem;
  background: linear-gradient(145deg, rgba(59, 130, 246, .14), rgba(14, 116, 144, .06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
}
html[data-theme="dark"] .icon,
html[data-theme="dark"] .stat-icon,
html[data-theme="dark"] .big-icon {
  border-color: rgba(147, 197, 253, .28);
  background: linear-gradient(145deg, rgba(59, 130, 246, .2), rgba(15, 23, 42, .35));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.stat-icon {
  margin-bottom: .25rem;
}
.big-icon {
  width: 4.5rem;
  height: 4.5rem;
  padding: 1rem;
  border: 1px solid rgba(11, 61, 145, .18);
  border-radius: 1.35rem;
  background: linear-gradient(145deg, rgba(59, 130, 246, .14), rgba(14, 116, 144, .06));
}
.brand,
.topnav button,
.user-chip {
  gap: .5rem;
}
.brand-icon {
  width: 1.55rem;
  height: 1.55rem;
}
.nav-icon,
.user-icon {
  width: 1.1rem;
  height: 1.1rem;
}
.card-head {
  align-items: flex-start;
}
.card-head h2 {
  padding-top: .2rem;
}