/* ==========================================================================
   Quiz App — Flat Minimal Dark Theme
   Author: Cascade
   Notes:
   - No gradients. Flat surfaces, clear borders, strong typography.
   - Accent: #2f81f7
   - Radii: 12–14px
   - Breakpoints: 860px, 740px, 520px
   ========================================================================== */

/* 0) CSS Reset (Modern Minimal) */
*,
*::before,
*::after { box-sizing: border-box }
html, body { height: 100% }
body, h1, h2, h3, p, ul, ol, figure { margin: 0 }
img, svg, video, canvas { display: block; max-width: 100% }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer; background: none; border: none; }
:focus-visible { outline: 2px solid #2f81f7; outline-offset: 2px }

/* 1) Theme Tokens */
:root{
  --bg:#0e1117;
  --surface:#161b22;
  --surface-2:#0f141b;
  --border:#2a2f37;
  --border-soft:#242a32;
  --text:#c9d1d9;
  --muted:#9aa4af;
  --accent:#2f81f7;
  --accent-2:#2f81f7;
  --ok:#37d67a;
  --danger:#ff6b81;
  --radius:14px;
  --radius-sm:12px;
  --gap-1:6px; --gap-2:10px; --gap-3:12px; --gap-4:14px; --gap-5:16px; --gap-6:20px;
}

/* 2) Base */
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* Containers & Layout */
.container{ max-width: 1024px; margin: 0 auto; padding: 20px }

/* Header & Footer */
.header, .footer{ display:flex; align-items:center; justify-content:space-between; gap: var(--gap-3) }
.brand{ display:flex; align-items:center; gap: var(--gap-3) }
.logo{
  width:36px; height:36px; border-radius: 10px;
  display:grid; place-items:center; color:#fff; font-weight:800; letter-spacing:1px;
  background: var(--accent);
}
.title{ font-weight: 700 }
.nav{ display:flex; gap: var(--gap-2) }
.footer .muted{ color: var(--muted) }

/* Typography */
.h1{ font-size:28px; font-weight:800; letter-spacing:.2px; margin-bottom: 6px }
.h2{ font-size:22px; font-weight:800; letter-spacing:.2px; margin-bottom: 10px }
.h3{ font-size:18px; font-weight:800; letter-spacing:.2px }
.muted{ color: var(--muted) }

/* 3) Cards & Views */
.card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
}
.view{ display:none; margin: 20px 0 }
.view.active{ display:block; }

/* 4) Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: 8px;
  padding: 10px 14px; border-radius: 12px;
  color: var(--text); border:1px solid var(--border); background: var(--surface);
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:hover{ border-color: var(--border) }
.btn:active{ transform: translateY(0) }
.btn:disabled{ opacity:.6; cursor:not-allowed }
.btn.primary{ background: var(--accent); border-color: var(--accent); color:#fff }
.btn.ghost{ background: transparent }
.icon-btn{ border:1px solid var(--border); background: var(--surface); color:var(--text); border-radius: 10px; padding: 6px 10px }
.icon-btn.circle{ width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:999px }

/* 5) Home / Selection */
.home-cats{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-4); margin: 20px 0;
}
.home-cat{
  position:relative; padding: 16px 18px; border-radius: 16px;
  background: var(--surface); border:1px solid var(--border);
  color: var(--text); font-weight: 800; text-align:center;
  transition: border-color .15s ease, background .15s ease;
}
.home-cat:hover{ border-color: var(--border) }
.home-cat.active{ border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent) }

/* Levels & Grids */
.levels{ margin-top: 8px }
.level-grid, .lang-grid, .difficulty-grid, .group-grid, .sublevel-grid{
  display:grid; grid-template-columns: 1fr; gap: var(--gap-3); margin-top: 10px;
}
.level, .lang, .difficulty, .group, .sublevel{
  padding: 16px; border-radius: var(--radius-sm); background: var(--surface);
  border:1px solid var(--border); color: var(--text); font-weight:800; text-align:center;
  transition: border-color .15s ease, background .15s ease;
}
.level:hover, .lang:hover, .difficulty:hover, .group:hover, .sublevel:hover{ border-color: var(--border) }
.level:active, .lang:active, .difficulty:active, .group:active, .sublevel:active{ transform: translateY(0) }
.lang.disabled{ opacity:.5; cursor:not-allowed }
.lang.active, .group.active, .sublevel.active, .difficulty.active{
  border-color: var(--accent); background: var(--surface-2);
}

/* Hidden util */
.hidden{ display:none !important }

/* 6) Settings Card */
.settings.card{
  border-radius: 18px;
  background: var(--surface);
  border:1px solid var(--border);
  padding: 18px 16px;
}
.settings .title-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px }
.settings .title{ font-weight:800; font-size:15px; letter-spacing:.35px; opacity:.95 }
.settings .grid{
  display:grid; grid-template-columns: 1fr auto minmax(140px, 200px);
  gap: 12px 16px; align-items:center;
}
.settings .field{ min-width:0 }
.settings .field.control{ justify-self:end; min-width:130px }
.settings .field.triple{ justify-self: stretch }
.settings .label{ font-weight:700; margin-bottom: 2px; letter-spacing:.2px }
.settings .sublabel{ font-size:11px; letter-spacing:.35px; text-transform:uppercase; color: var(--muted); margin-bottom: 6px; display:block }
.settings .desc{ font-size:12px; color: var(--muted) }
.settings .divider{ height:1px; background: var(--border); opacity:.6; margin: 14px 0 }
.settings .grid + .grid{ margin-top: 4px }

/* Number inputs */
.settings input[type="number"]{
  width:100%; max-width: 180px;
  padding: 10px 12px;
  border-radius: 10px;
  border:1px solid var(--border); background: var(--surface-2);
  color: var(--text); font-weight:800; text-align:center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.settings input[type="number"]:focus{
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
/* hide spinners */
.settings input[type="number"]::-webkit-outer-spin-button,
.settings input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.settings input[type="number"]{ -moz-appearance:textfield; appearance:textfield; }

/* Minimal Switch (checkbox) */
.settings .switch{ display:inline-flex; align-items:center; gap: 12px; font-weight:600 }
.settings .switch input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width: 20px; height: 20px; border-radius: 6px;
  border:1.5px solid var(--border); background: transparent;
  transition: border-color .12s ease, background .12s ease;
}
.settings .switch input[type="checkbox"]:hover{ border-color: var(--border) }
.settings .switch input[type="checkbox"]:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px }
.settings .switch input[type="checkbox"]:checked{
  border-color: var(--accent); background: var(--accent);
}

/* Settings help text */
.settings .help{ margin-top: 8px }

/* 7) Quiz */
.quiz-header{ display:flex; align-items:center; justify-content:space-between; gap: 16px; margin-bottom: 12px }
.badge{
  display:inline-block; padding: 6px 10px; border-radius: 10px;
  background: var(--surface-2); border:1px solid var(--border);
  font-weight: 800;
}
.progress{ flex:1 }
.bar{
  height:8px; border-radius: 999px; background: var(--surface-2); border:1px solid var(--border); overflow:hidden
}
.bar > span{
  display:block; height:100%; width:0%;
  background: var(--accent);
  transition: width .25s ease;
}
#question-text{ line-height: 1.4 }
.options{ display:grid; gap: 10px; margin-top: 14px }
.option{
  display:flex; align-items:center; gap: 12px; padding: 12px;
  border-radius: 12px; border:1px solid var(--border); cursor:pointer;
  background: var(--surface);
  transition: border-color .15s ease, background .15s ease;
}
.option:hover{ border-color: var(--border) }
.option input{
  appearance:none; width:18px; height:18px; border-radius:50%;
  border:2px solid #606872; display:grid; place-items:center;
}
.option input:checked{ border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent) }
.option.correct{ border-color: color-mix(in srgb, var(--ok) 70%, transparent) }
.option.wrong{ border-color: color-mix(in srgb, var(--danger) 70%, transparent) }

.quiz-actions{ display:flex; justify-content:space-between; gap: 10px; margin-top: 16px }
.countdown{
  min-width:64px; text-align:center; border:1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: var(--surface-2);
  font-weight:700;
}

/* 8) Results */
.result-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0;
}
.result-item{
  background: var(--surface); border:1px solid var(--border); border-radius: 12px; padding: 16px; text-align:center;
}
.kpi{ font-size: 24px; font-weight: 800 }
.kpi-label{ color: var(--muted); margin-top: 6px }

.stat-card{
  margin-top: 10px; border-radius: 12px; border:1px solid var(--border); padding: 14px; background: var(--surface);
}
.stat-head{ display:flex; align-items:center; justify-content:space-between }
.stat-title{ font-weight: 700 }
.review-list{ display:grid; gap: 10px; margin-top: 10px }
.review-item{ border:1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--surface) }
.review-q{ font-weight: 700; margin-bottom: 6px }
.review-a{ display:flex; gap: 8px; align-items:center }
.pill{ display:inline-block; padding: 4px 8px; border-radius: 999px; border:1px solid var(--border) }
.pill.ok{ background: color-mix(in srgb, var(--ok) 14%, transparent); border-color: color-mix(in srgb, var(--ok) 45%, transparent) }
.pill.no{ background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: color-mix(in srgb, var(--danger) 45%, transparent) }

.result-actions{ display:flex; gap: 10px; margin-top: 14px }

/* 9) Modals */
dialog{
  border:none; border-radius: 14px; max-width: 720px; width: 96%; padding: 0;
  background: var(--surface); color: var(--text); border:1px solid var(--border);
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom:1px solid var(--border) }
.modal-body{ padding: 14px 16px }
.modal-body ul{ margin: 0 0 10px 18px }

/* 10) Utilities */
.badge#quiz-badge, .badge#result-badge{ user-select:none }
#home-cats{ background: var(--surface); border:1px solid var(--border); border-radius: 14px; padding: 10px }

/* 11) Responsive */
@media (max-width: 860px){
  .settings .grid{ grid-template-columns: 1fr; }
  .settings .field.control{ justify-self: start }
  .home-cats{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 740px){
  .result-grid{ grid-template-columns: 1fr }
  .quiz-header{ flex-direction: column; align-items: stretch }
  .btn{ width:100% }
}
@media (max-width: 520px){
  .home-cats{ grid-template-columns: 1fr }
}

/* 12) Accessibility tweaks */
button:focus-visible, input:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px }
[aria-live]{ outline: none }