*{box-sizing:border-box}

:root{
  color-scheme:light;
  --bg:#f3f4f8;
  --surface:#ffffff;
  --surface-alt:#f7f8fc;
  --surface-border:rgba(45,56,76,0.12);
  --text:#1f2535;
  --muted:#5f6b7e;
  --primary:#2d3648;
  --primary-contrast:#f8fafc;
  --accent:#3b82f6;
  --accent-border:rgba(59,130,246,0.35);
  --shadow-soft:0 16px 32px rgba(15,23,42,0.08);
  --shadow-card:0 14px 26px rgba(15,23,42,0.06);
  --shadow-card-hover:0 18px 34px rgba(15,23,42,0.1);
  --nav-bg:rgba(246,248,253,0.92);
  --nav-border:rgba(45,56,76,0.08);
  --nav-fg:#1f2535;
  --nav-muted:rgba(31,37,53,0.65);
  --nav-link-hover-bg:rgba(47,56,76,0.1);
  --nav-link-active-bg:#ffffff;
  --nav-link-active-fg:#1f2535;
  --nav-button-border:rgba(47,56,76,0.18);
  --nav-button-bg:rgba(255,255,255,0.65);
  --nav-button-hover-bg:rgba(47,56,76,0.12);
  --theme-toggle-bg:rgba(255,255,255,0.7);
  --theme-toggle-border:rgba(47,56,76,0.2);
  --theme-toggle-icon:#1f2535;
  --card-border:rgba(45,56,76,0.08);
  --card-hover-border:rgba(45,56,76,0.18);
  --input-border:rgba(45,56,76,0.18);
  --input-bg:#ffffff;
  --input-color:var(--text);
  --option-bg:var(--surface);
  --option-border:var(--input-border);
  --option-selected-shadow:0 0 0 2px rgba(59,130,246,0.18);
  --success:#10b981;
  --success-bg:#ecfdf5;
  --danger:#ef4444;
  --danger-bg:#fef2f2;
  --warning:#f59e0b;
  --progress-track:rgba(47,56,76,0.15);
  --progress-fill:#475569;
  --chip-border:rgba(59,130,246,0.35);
  --chip-bg:rgba(59,130,246,0.16);
  --chip-color:#1d4ed8;
  --chip-active-border:rgba(245,158,11,0.6);
  --chip-active-bg:rgba(245,158,11,0.24);
  --chip-active-color:#b45309;
  --tag-bg:rgba(59,130,246,0.18);
  --tag-color:#1d4ed8;
  --flash-error-bg:#fbeaea;
  --flash-error-border:#f3b9b9;
  --flash-success-bg:#e7faf0;
  --flash-success-border:#b8ecd1;
  --table-stripe:rgba(45,56,76,0.06);
  --hero-bg:linear-gradient(135deg,#e2e9ff,#ccd6ff);
  --hero-color:#1f2535;
  --qb-bg:#f3f5fb;
  --qb-border:rgba(45,56,76,0.16);
  --qb-hover-border:rgba(45,56,76,0.35);
  --qb-active-outline:rgba(59,130,246,0.38);
  --qb-idle-bg:#eef1f6;
  --qb-idle-border:rgba(148,163,184,0.4);
  --qb-answered-bg:#eff6ff;
  --qb-answered-border:#93c5fd;
  --legend-border:rgba(148,163,184,0.45);
  --legend-muted:var(--muted);
}

:root[data-theme='dark']{
  color-scheme:dark;
  --bg:#0f172a;
  --surface:#1a2233;
  --surface-alt:#161e2d;
  --surface-border:rgba(148,163,184,0.22);
  --text:#e5ebf7;
  --muted:#97a6c3;
  --primary:#f8fafc;
  --primary-contrast:#121826;
  --accent:#93c5fd;
  --accent-border:rgba(96,165,250,0.45);
  --shadow-soft:0 20px 38px rgba(2,6,23,0.55);
  --shadow-card:0 16px 32px rgba(2,6,23,0.55);
  --shadow-card-hover:0 22px 46px rgba(2,6,23,0.68);
  --nav-bg:rgba(10,14,24,0.92);
  --nav-border:rgba(148,163,184,0.18);
  --nav-fg:#f8fafc;
  --nav-muted:rgba(226,232,240,0.65);
  --nav-link-hover-bg:rgba(148,163,184,0.16);
  --nav-link-active-bg:rgba(148,163,184,0.24);
  --nav-link-active-fg:#f8fafc;
  --nav-button-border:rgba(148,163,184,0.4);
  --nav-button-bg:rgba(148,163,184,0.18);
  --nav-button-hover-bg:rgba(148,163,184,0.26);
  --theme-toggle-bg:rgba(148,163,184,0.18);
  --theme-toggle-border:rgba(148,163,184,0.45);
  --theme-toggle-icon:#f8fafc;
  --card-border:rgba(148,163,184,0.2);
  --card-hover-border:rgba(148,163,184,0.4);
  --input-border:rgba(148,163,184,0.32);
  --input-bg:rgba(15,23,42,0.6);
  --input-color:var(--text);
  --option-bg:rgba(15,23,42,0.6);
  --option-border:rgba(148,163,184,0.28);
  --option-selected-shadow:0 0 0 2px rgba(96,165,250,0.4);
  --success-bg:rgba(16,185,129,0.18);
  --danger-bg:rgba(248,113,113,0.2);
  --progress-track:rgba(148,163,184,0.22);
  --progress-fill:rgba(226,232,240,0.82);
  --chip-border:rgba(96,165,250,0.45);
  --chip-bg:rgba(59,130,246,0.24);
  --chip-color:#cbdffb;
  --chip-active-border:rgba(251,191,36,0.65);
  --chip-active-bg:rgba(245,158,11,0.32);
  --chip-active-color:#fde68a;
  --tag-bg:rgba(59,130,246,0.3);
  --tag-color:#bfdbfe;
  --flash-error-bg:rgba(248,113,113,0.2);
  --flash-error-border:rgba(248,113,113,0.42);
  --flash-success-bg:rgba(16,185,129,0.2);
  --flash-success-border:rgba(16,185,129,0.45);
  --table-stripe:rgba(148,163,184,0.12);
  --hero-bg:linear-gradient(135deg,#1f2a44,#111a2f);
  --hero-color:#f8fafc;
  --qb-bg:rgba(15,23,42,0.7);
  --qb-border:rgba(148,163,184,0.28);
  --qb-hover-border:rgba(96,165,250,0.55);
  --qb-active-outline:rgba(96,165,250,0.7);
  --qb-idle-bg:rgba(148,163,184,0.16);
  --qb-idle-border:rgba(148,163,184,0.28);
  --qb-answered-bg:rgba(96,165,250,0.22);
  --qb-answered-border:rgba(147,197,253,0.55);
  --legend-border:rgba(148,163,184,0.5);
  --legend-muted:rgba(148,163,184,0.75);
}

body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.5;
  transition:background-color .3s ease,color .3s ease;
}

a{color:inherit;}

.container{max-width:1140px;margin:32px auto;padding:0 16px;transition:color .3s ease;}

.nav{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  gap:24px;
  padding:12px 16px;
  background:var(--nav-bg);
  color:var(--nav-fg);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--nav-border);
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}

.brand{display:flex;flex-direction:column;gap:4px;}
.brand-main{font-weight:700;font-size:18px;text-decoration:none;color:var(--nav-fg);letter-spacing:.5px;}
.brand-tag{text-transform:uppercase;font-size:11px;letter-spacing:1.2px;color:var(--nav-muted);}

.nav-toggle{
  margin-left:auto;
  width:38px;
  height:38px;
  border-radius:10px;
  border:1px solid var(--nav-button-border);
  background:var(--nav-button-bg);
  color:var(--nav-fg);
  cursor:pointer;
  display:none;
  position:relative;
  transition:background-color .2s ease,border-color .2s ease,transform .2s ease,color .2s ease;
}
.nav-toggle::before,.nav-toggle::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  height:2px;
  background:currentColor;
  transition:transform .2s ease,opacity .2s ease,top .2s ease,bottom .2s ease;
}
.nav-toggle::before{top:14px;}
.nav-toggle::after{bottom:14px;}
.nav-toggle:hover{transform:translateY(-1px);background:var(--nav-button-hover-bg);}
.nav-toggle[aria-expanded="true"]::before{transform:translateY(4px) rotate(45deg);top:18px;}
.nav-toggle[aria-expanded="true"]::after{transform:translateY(-4px) rotate(-45deg);bottom:18px;}

.theme-toggle{
  margin-left:12px;
  width:38px;
  height:38px;
  border-radius:10px;
  border:1px solid var(--theme-toggle-border);
  background:var(--theme-toggle-bg);
  color:var(--theme-toggle-icon);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,transform .2s ease,color .2s ease;
}
.theme-toggle:hover{transform:translateY(-1px);background:var(--nav-link-hover-bg);}
.theme-toggle-icon{font-size:18px;line-height:1;}

.links{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:16px;
}
.links>a{
  color:var(--nav-fg);
  text-decoration:none;
  padding:8px 12px;
  border-radius:10px;
  transition:background-color .2s ease,color .2s ease,transform .2s ease;
}
.links>a:hover{background:var(--nav-link-hover-bg);transform:translateY(-1px);}
.links>a.active{background:var(--nav-link-active-bg);color:var(--nav-link-active-fg);}

.nav-user{
  display:flex;
  align-items:center;
  gap:12px;
  padding-left:16px;
  margin-left:8px;
  border-left:1px solid var(--nav-border);
}
.nav-user-name{font-size:14px;color:var(--nav-muted);}
.nav-logout{
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--nav-button-border);
  background:var(--nav-button-bg);
  color:var(--nav-fg);
  text-decoration:none;
  font-size:13px;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.nav-logout:hover{
  background:var(--nav-link-active-bg);
  color:var(--nav-link-active-fg);
  transform:translateY(-1px);
}

.flash{margin:10px 0;display:grid;gap:8px;}
.flash-item{padding:10px 12px;border-radius:10px;}
.flash-item.error{background:var(--flash-error-bg);border:1px solid var(--flash-error-border);}
.flash-item.ok{background:var(--flash-success-bg);border:1px solid var(--flash-success-border);}

.form{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:14px;
  padding:20px;
  display:grid;
  gap:12px;
  box-shadow:var(--shadow-soft);
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.form input,.form select{
  width:100%;
  padding:10px;
  border:1px solid var(--input-border);
  border-radius:10px;
  background:var(--input-bg);
  color:var(--input-color);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.form button{
  padding:10px 14px;
  border-radius:10px;
  border:1px solid transparent;
  background:var(--primary);
  color:var(--primary-contrast);
  cursor:pointer;
  transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease,color .2s ease;
}
.form button:hover{transform:translateY(-1px);box-shadow:var(--shadow-card);}

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

.row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:14px 0 20px;}

.card{
  background:var(--surface);
  border:1px solid var(--card-border);
  border-radius:18px;
  padding:20px;
  display:block;
  color:var(--text);
  text-decoration:none;
  box-shadow:var(--shadow-card);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background-color .2s ease;
}
.card:hover{border-color:var(--card-hover-border);transform:translateY(-1px);box-shadow:var(--shadow-card-hover);}

.qcard{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:18px;
  padding:20px;
  box-shadow:var(--shadow-card);
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}

.options{margin-top:12px;display:grid;gap:8px;}
.opt{
  display:flex;
  gap:10px;
  align-items:center;
  border:1px solid var(--option-border);
  border-radius:12px;
  padding:12px;
  background:var(--option-bg);
  transition:box-shadow .2s ease,border-color .2s ease,background-color .2s ease,transform .2s ease;
}
.opt.correct{border-color:var(--success);background:var(--success-bg);}
.opt.wrong{border-color:var(--danger);background:var(--danger-bg);}
.options .opt.selected{border-color:var(--accent);box-shadow:var(--option-selected-shadow);}

.controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;align-items:center;}
.controls .spacer{flex:1 1 auto;min-width:0;}

.btn{
  padding:10px 18px;
  border-radius:12px;
  border:1px solid transparent;
  background:var(--primary);
  color:var(--primary-contrast);
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease;
}
.btn.secondary{
  background:var(--surface-alt);
  color:var(--text);
  border-color:var(--surface-border);
}
.btn[disabled],.btn.disabled{opacity:.5;pointer-events:none;}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-card);}

.progress{
  height:8px;
  background:var(--progress-track);
  border-radius:8px;
  overflow:hidden;
  margin:10px 0;
  transition:background-color .3s ease;
}
.progress>div{
  height:8px;
  background:var(--progress-fill);
  width:0;
  transition:width .3s ease;
}

.quiz-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;}
.quiz-labels{display:flex;flex-direction:column;gap:4px;}
.quiz-counter{font-size:20px;font-weight:700;color:var(--primary);}
.quiz-tag{
  display:inline-block;
  align-self:flex-start;
  background:var(--tag-bg);
  color:var(--tag-color);
  padding:4px 12px;
  border-radius:999px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.6px;
}

.quiz-actions{display:flex;align-items:center;gap:10px;}

.chip-button{
  border-radius:999px;
  border:1px solid var(--chip-border);
  background:var(--chip-bg);
  color:var(--chip-color);
  padding:8px 16px;
  font-size:13px;
  cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.chip-button:hover{transform:translateY(-1px);}
.chip-button.active{
  border-color:var(--chip-active-border);
  background:var(--chip-active-bg);
  color:var(--chip-active-color);
}

.quiz-status{display:flex;flex-wrap:wrap;gap:16px;margin:14px 0;color:var(--muted);font-size:13px;}
.quiz-status-item{display:flex;gap:6px;align-items:center;}

.stats-page{display:grid;gap:24px;}
.stats-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;}
.stats-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:8px 0 12px;}
.stats-card{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:14px;
  padding:16px;
  display:grid;
  gap:6px;
  box-shadow:var(--shadow-card);
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}

.filter-form{display:flex;gap:12px;flex-wrap:wrap;}
.filter-form label{display:flex;flex-direction:column;font-size:12px;gap:6px;color:var(--muted);}
.filter-form select{
  padding:10px;
  border-radius:10px;
  border:1px solid var(--input-border);
  background:var(--input-bg);
  color:var(--input-color);
  min-width:160px;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}

.train-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.train-actions .btn{width:auto;}
.empty-state{
  padding:20px;
  border:1px dashed var(--surface-border);
  border-radius:12px;
  text-align:center;
  color:var(--muted);
  background:var(--surface);
}

.test-wrap{display:grid;grid-template-columns:1fr 260px;gap:16px;}
.sidebar{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:16px;
  padding:16px;
  position:sticky;
  top:16px;
  height:max-content;
  box-shadow:var(--shadow-card);
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.sb-title{font-weight:600;margin-bottom:8px;color:var(--text);}

.qb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(46px,1fr));gap:8px;}
.qb{
  position:relative;
  border:1px solid var(--qb-border);
  border-radius:10px;
  padding:10px 0;
  text-align:center;
  background:var(--qb-bg);
  cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,background-color .15s ease,box-shadow .15s ease;
  color:var(--text);
}
.qb:hover{transform:translateY(-1px);border-color:var(--qb-hover-border);}
.qb.active{outline:2px solid var(--qb-active-outline);outline-offset:2px;}
.qb.ok{background:var(--success-bg);border-color:var(--success);}
.qb.bad{background:var(--danger-bg);border-color:var(--danger);}
.qb.idle{background:var(--qb-idle-bg);border-color:var(--qb-idle-border);}
.qb.answered{background:var(--qb-answered-bg);border-color:var(--qb-answered-border);}
.qb.flagged::after{content:"★";position:absolute;top:4px;right:6px;font-size:12px;color:var(--warning);}

.legend{display:flex;gap:10px;align-items:center;margin-top:10px;color:var(--legend-muted);font-size:13px;flex-wrap:wrap;}
.legend .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
  border:1px solid var(--legend-border);
}
.legend .dot.ok{background:var(--success);}
.legend .dot.bad{background:var(--danger);}
.legend .dot.idle{background:var(--qb-idle-border);border-color:var(--qb-idle-border);}
.legend .dot.answered{background:var(--accent);border-color:var(--accent-border);}
.legend .dot.flagged{background:var(--warning);border-color:var(--warning);}

.hero{
  background:var(--hero-bg);
  color:var(--hero-color);
  border-radius:16px;
  padding:18px 20px;
  margin:10px 0 16px;
  box-shadow:var(--shadow-card);
  transition:background .3s ease,color .3s ease,box-shadow .3s ease;
}
.hero h2{margin:0 0 8px 0;}
.hero p{margin:0 0 12px 0;color:var(--muted);}

.selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;}
.selector .item{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:14px;
  padding:12px;
  display:grid;
  gap:8px;
  transition:background-color .3s ease,border-color .3s ease;
}
.selector label{font-size:13px;color:var(--muted);}
.selector input,.selector select{
  width:100%;
  padding:10px;
  border:1px solid var(--input-border);
  border-radius:10px;
  background:var(--input-bg);
  color:var(--input-color);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.selector .row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.selector .actions{display:flex;gap:10px;align-items:center;}
.selector .actions button{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid transparent;
  background:var(--primary);
  color:var(--primary-contrast);
  cursor:pointer;
  transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.selector .actions button:hover{transform:translateY(-1px);box-shadow:var(--shadow-card);}

.loader{display:flex;align-items:center;gap:10px;color:var(--muted);padding:18px 0;font-size:14px;}
.loader::before{
  content:"";
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(148,163,184,0.25);
  border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.results-wrapper{display:grid;gap:20px;}
.results-head{display:flex;flex-direction:column;gap:4px;}
.results-head h1{margin:0;color:var(--text);}
.results-head .muted{margin:0;}
.results-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;}
.result-card{
  background:var(--surface);
  border:1px solid var(--card-border);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--shadow-card);
  display:grid;
  gap:6px;
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.result-card .caption{text-transform:uppercase;font-size:12px;letter-spacing:1px;color:var(--muted);}
.result-card .value{font-size:28px;font-weight:700;color:var(--text);}
.result-card.success{border-color:rgba(16,185,129,0.45);}
.result-card.danger{border-color:rgba(239,68,68,0.4);}
.result-card.exam{border-color:rgba(59,130,246,0.4);}
.result-card.neutral{border-color:var(--surface-border);}

.review-list{display:grid;gap:14px;margin-bottom:24px;}
.result-question{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:18px;
  padding:16px 18px;
  box-shadow:var(--shadow-card);
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.result-question h3{margin:0 0 12px;font-size:17px;color:var(--text);}

.answer-options{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.answer-option{
  border:1px solid var(--option-border);
  border-radius:12px;
  padding:10px 14px;
  background:var(--option-bg);
  color:var(--text);
  transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.answer-option.correct{border-color:rgba(16,185,129,0.7);background:var(--success-bg);}
.answer-option.wrong{border-color:rgba(239,68,68,0.7);background:var(--danger-bg);}
.answer-option.selected{box-shadow:var(--option-selected-shadow);}

.answer-meta{display:flex;gap:12px;color:var(--muted);font-size:13px;margin-top:10px;}
.answer-meta span{display:flex;align-items:center;gap:6px;}

.table{
  display:block;
  border:1px solid var(--surface-border);
  border-radius:14px;
  overflow:hidden;
  margin:8px 0;
  background:var(--surface);
  box-shadow:var(--shadow-card);
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.thead,.trow{display:grid;grid-template-columns:repeat(4,1fr);padding:12px 16px;gap:10px;align-items:center;}
.thead{background:var(--surface-alt);font-weight:600;color:var(--text);}
.trow:nth-child(even){background:var(--table-stripe);}

.chart-card,.list-card{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:16px;
  padding:18px;
  box-shadow:var(--shadow-card);
  display:grid;
  gap:14px;
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.chart-card h2,.list-card h2{margin:0;color:var(--text);}
.progress-chart{width:100%;overflow:auto;}
.progress-chart svg{width:100%;min-width:480px;min-height:220px;}
.progress-chart circle{fill:var(--accent);}
.chart-points{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px;flex-wrap:wrap;}
.chart-points span{flex:1 1 auto;text-align:center;min-width:100px;}

@media (max-width:1080px){
  .test-wrap{grid-template-columns:1fr;}
  .sidebar{position:static;}
}

@media (max-width:880px){
  .nav{flex-wrap:wrap;row-gap:12px;}
  .nav-toggle{display:block;}
  .theme-toggle{order:2;margin-left:auto;}
  .links{
    order:3;
    width:100%;
    margin-left:0;
    flex-direction:column;
    align-items:stretch;
    padding-top:0;
    max-height:0;
    overflow:hidden;
    border-top:1px solid var(--nav-border);
    transition:max-height .25s ease,padding .25s ease;
  }
  .links.open{max-height:320px;padding-top:12px;}
  .links>a{width:100%;background:transparent;border-radius:12px;}
  .nav-user{
    width:100%;
    margin:0;
    padding:10px 14px;
    border:none;
    background:var(--nav-button-bg);
    border-radius:12px;
    flex-wrap:wrap;
    gap:8px;
  }
  .nav-logout{margin-left:auto;}
}

@media (max-width:720px){
  .container{margin:24px auto;}
  .hero{padding:16px 18px;}
  .controls{flex-wrap:wrap;}
  .controls .spacer{display:none;}
  .btn{width:100%;justify-content:center;text-align:center;}
  .progress{margin:16px 0;}
  .quiz-head{flex-direction:column;align-items:flex-start;gap:12px;}
  .quiz-actions{width:100%;}
  .chip-button{width:100%;text-align:center;}
  .results-summary{grid-template-columns:1fr 1fr;}
  .answer-meta{flex-direction:column;align-items:flex-start;}
  .filter-form{width:100%;}
  .filter-form select{width:100%;}
  .chart-card,.list-card{padding:16px;}
  .chart-points span{min-width:80px;}
  .train-actions{flex-direction:column;align-items:flex-start;}
  .train-actions .btn{width:100%;}
}

@media (max-width:560px){
  .results-summary{grid-template-columns:1fr;}
  .cards{grid-template-columns:1fr;}
  .selector{grid-template-columns:1fr;}
  .stats-cards{grid-template-columns:1fr;}
}

@media (max-width:820px){
  .table{overflow-x:auto;}
  .thead,.trow{min-width:640px;}
}