:root{
  --bg:#0d0f14;
  --panel:#151923;
  --panel-2:#1b2130;
  --field:#0f141e;         /* input background */
  --text:#e8ecf3;
  --muted:#a9b3c7;
  --primary:#7aa2ff;
  --primary-press:#5a83e6;
  --danger:#ff5d6c;
  --success:#22c55e;
  --success-press:#16a34a;
  --ring:#9ec1ff;
  --border:#2a3244;
  /* brand accents */
  /* EZ gold accent (logo-inspired) */
  --brand:#FFC94A;
  --brand-press:#E5B03F;

  /* polish tokens */
  --field-border:#33405a;
  --field-hover:#121a27;
  --focus-shadow:0 0 0 3px rgba(126, 163, 255, .35);
}

body[data-theme="light"]{
  --bg:#f6f8fb;
  --panel:#ffffff;
  --panel-2:#f0f3f8;
  --field:#eef2f7;
  --text:#0d1117;
  --muted:#4b5565;
  --primary:#245cff;
  --primary-press:#1a44c4;
  --danger:#cf2e3a;
  --success:#22c55e;
  --success-press:#1a8e45;
  --ring:#6ea3ff;
  --border:#dbe2ef;
  --brand:#FFC94A;
  --brand-press:#E5B03F;

  --field-border:#cfd8ea;
  --field-hover:#e8edf6;
  --focus-shadow:0 0 0 3px rgba(110, 163, 255, .35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  display:flex; flex-direction:column; min-height:100vh;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; /* ~20% taller than 12px */
  border-bottom:1px solid var(--border); background:var(--panel);
  position:sticky; top:0; z-index:50;
}
.brand-link{display:inline-flex; align-items:center; text-decoration:none}
.brand-logo{height:44px; width:auto; display:block}
@media (min-width:900px){ .brand-logo{ height:48px } }
.header-actions{display:flex; gap:10px}
.icon-btn{
  appearance:none; border:1px solid var(--border); background:var(--panel-2);
  color:var(--text); border-radius:12px; padding:10px 16px; cursor:pointer; line-height:1; font-size:20px;
  transition:transform .04s ease, box-shadow .2s ease, filter .15s ease;
}
.icon-btn:hover{filter:brightness(1.06)}
.icon-btn:active{transform:translateY(1px)}
.icon-btn:focus-visible{outline:2px solid var(--ring); outline-offset:2px; box-shadow:var(--focus-shadow)}

/* Ensure badge-style padding is visible in all themes */
/* Default: no badge on dark; light will style explicitly */

/* Light mode hero (brand) padding + contrast */
/* Remove brand badge for now (both themes) */
body[data-theme="light"] .site-header .brand-link,
body[data-theme="dark"] .site-header .brand-link{
  padding:0;
  margin:0;
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
}

/* Layout */
.container{max-width:1060px; margin:24px auto; padding:0 16px}
#app{flex:1}
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:16px;
  padding:16px; margin-bottom:16px; box-shadow:0 6px 18px rgba(0,0,0,.2);
}
/* Keep quiz runner comfortably large on desktop */
@media (min-width: 900px){
  #quizView{ max-width: 920px; min-width: 760px; margin-left:auto; margin-right:auto }
}
@media (min-width: 1400px){
  #quizView{ max-width: 960px }
}
.hero{margin:0 0 12px 0}

/* Landing hero removed in favor of header logo */

/* Generate toolbar */
.gen-toolbar{
  display:grid; grid-template-columns:1fr 90px 130px auto auto; gap:10px;
  background:var(--panel-2); border:1px solid var(--field-border); border-radius:14px;
  padding:10px; margin:0 auto 8px; max-width:900px;
}
.toolbar-input{
  border:1px solid var(--field-border); background:var(--field); color:var(--text);
  border-radius:12px; padding:10px 12px; min-height:42px;
}
.toolbar-input:hover{background:var(--field-hover); border-color:var(--border)}
.toolbar-input:focus{outline:2px solid var(--ring); outline-offset:2px; box-shadow:var(--focus-shadow)}
.toolbar-input.narrow{max-width:140px}

@media (max-width:820px){
  .gen-toolbar{grid-template-columns:1fr 90px 1fr;}
  .gen-toolbar .btn{min-width:100%}
}
@media (max-width:560px){
  .gen-toolbar{grid-template-columns:1fr;}
}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
 @media (max-width:880px){.grid{grid-template-columns:1fr}}

/* Labels */
.col .lbl{display:block; margin-bottom:6px; color:var(--muted); font-size:14px}

/* Fields */
.editor,.mirror, textarea, input[type="text"], input[type="number"]{
  width:100%;
  border:1px solid var(--field-border);
  background:var(--field);
  color:var(--text);
  border-radius:12px;
  padding:12px 12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .2s ease;
}
.editor:hover,.mirror:hover, textarea:hover, input[type="text"]:hover, input[type="number"]:hover{
  background:var(--field-hover);
  border-color:var(--border);
}
.editor:focus,.mirror:focus, textarea:focus, input[type="text"]:focus, input[type="number"]:focus{
  outline:2px solid var(--ring); outline-offset:2px; box-shadow:var(--focus-shadow);
}
.editor{min-height:220px}
.mirror{min-height:220px}
.status{margin-top:8px; color:var(--muted); min-height:20px}

/* Buttons */
.row{display:flex; align-items:center}
.gap{gap:12px}
.btn{
  appearance:none; border:1px solid var(--border); background:var(--panel-2);
  color:var(--text); padding:12px 16px; border-radius:14px; cursor:pointer; min-width:112px;
  transition:transform .04s ease, box-shadow .2s ease, filter .15s ease, background-color .15s ease;
  line-height:1.2;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--ring); outline-offset:2px; box-shadow:var(--focus-shadow)}
.btn.primary{background:var(--primary); border-color:transparent; color:#fff}
.btn.primary:hover{filter:brightness(1.05)}
.btn.primary:active{background:var(--primary-press)}
.btn.success{background:var(--success); border-color:transparent; color:#fff}
.btn.success:hover{filter:brightness(1.05)}
.btn.success:active{background:var(--success-press)}
.btn.danger{background:var(--danger); color:#fff; border-color:transparent}
.btn[disabled]{opacity:.6; cursor:not-allowed}

/* Advanced */
.advanced{margin-top:12px}
.advanced-body{padding:10px; background:var(--panel-2); border-radius:12px}
details.advanced > summary{display:none}

/* Visibility */
.is-hidden{display:none}

/* Timer */
.timer{margin:6px 0 12px 0; font-weight:600}

/* Progress bar */
.quiz-header-row{display:flex; align-items:center; gap:12px; margin:6px 0 12px}
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  height:28px; min-width:64px; padding:0 10px;
  border-radius:999px; font-weight:600; font-size:14px;
  background:var(--panel-2); color:var(--text);
  border:1px solid var(--field-border);
}
.prog{flex:1; height:8px; background:var(--panel-2); border:1px solid var(--field-border); border-radius:999px; overflow:hidden}
.prog-bar{height:100%; width:0%; background:linear-gradient(90deg, var(--primary), #8bb6ff); transition:width .25s ease}

/* Quiz title row */
.quiz-title-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px}
.quiz-title-row h2{margin:0}

/* Inline progress spacing inside question */
#quizView .qwrap .prog{margin:6px 0 10px}

/* Quiz Options (polish) */
#quizView .options{display:grid; gap:10px}
#quizView .options{margin-bottom:12px}
#quizView label.opt{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 12px;
  border:1px solid var(--field-border);
  background:var(--panel-2);
  border-radius:12px;
  line-height:1.4;
  transition:border-color .15s ease, box-shadow .2s ease, background-color .15s ease;
}
#quizView label.opt input{margin-top:2px}
#quizView label.opt:hover{
  background:var(--field-hover);
  border-color:var(--border);
}
#quizView label.opt:has(input:focus-visible){
  outline:2px solid var(--ring);
  outline-offset:2px;
  box-shadow:var(--focus-shadow);
}
#quizView .qhdr{font-size:14px; color:var(--muted)}
#quizView .qtext{font-size:16px}
#quizView .mtwrap{display:grid; gap:10px}
#quizView .mtwrap{margin-bottom:12px}
#quizView .mtrow{
  display:grid; grid-template-columns:1fr 220px; gap:12px;
  padding:10px 12px; border:1px solid var(--field-border); border-radius:12px; background:var(--panel-2);
}
#quizView .mtleft{align-self:center}
#quizView .mtright select{
  width:100%; border:1px solid var(--field-border); background:var(--field);
  color:var(--text); border-radius:10px; padding:8px 10px;
}
#quizView .mtright select:focus{outline:2px solid var(--ring); outline-offset:2px; box-shadow:var(--focus-shadow)}
 @media (max-width:560px){
  #quizView .mtrow{grid-template-columns:1fr}
}

/* Desktop sizing polish for quiz runner */
@media (min-width:1024px){
  #quizView .qtext{font-size:18px; line-height:1.55}
  #quizView label.opt{padding:12px 14px}
  #quizView label.opt span{font-size:16px}
  #quizView .mtrow{grid-template-columns:1fr 260px}
}

/* Results */
.results-header-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 8px}
.results-header-left{display:flex; align-items:center; gap:10px}
.results-filter{display:flex; gap:8px}
.chip-btn{
  appearance:none; border:1px solid var(--field-border); background:var(--panel-2); color:var(--text);
  border-radius:999px; padding:6px 10px; cursor:pointer; font-size:13px; line-height:1; font-weight:600;
}
.chip-btn:hover{filter:brightness(1.06)}
.chip-btn:focus-visible{outline:2px solid var(--ring); outline-offset:2px; box-shadow:var(--focus-shadow)}
.chip-btn.active{ background:var(--primary); color:#fff; border-color:transparent }
.results-summary{margin-bottom:12px}
.results-missed{display:grid; gap:10px}
.results-missed .missed-item{
  padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--panel-2);
  border-left:4px solid transparent;
}
.results-missed .missed-item.is-correct{ border-left-color: var(--success) }
.results-missed .missed-item.is-wrong{ border-left-color: var(--danger) }
.results-actions{margin-top:14px; align-items:center}
.results-actions .flex-spacer{flex:1 1 0}

/* Brand accent on Retake button */
#retakeBtn.btn{background:var(--brand); border-color:transparent; color:#fff}
#retakeBtn.btn:hover{filter:brightness(1.05)}
#retakeBtn.btn:active{background:var(--brand-press)}

/* Color coding for user's answers */
.user-ans.ans-correct{ color: var(--success); font-weight:600 }
.user-ans.ans-wrong{ color: var(--danger); font-weight:600 }
/* Sub‑answer text (the part that used to be in parentheses): smaller and not bold */
.ans-text{ color:var(--text); font-weight:400; font-size:.94em; opacity:.9 }
.user-ans .ans-text{ color:var(--text) }

/* Split button + menu */
.split{position:relative; display:inline-flex; align-items:stretch; min-width:260px; white-space:nowrap}
/* Make the caret side-button very thin (~1/4 of previous size) */
.split .btn{min-width:0} /* override global min-width so flex ratio applies */
.split > .btn:first-child{border-top-right-radius:8px; border-bottom-right-radius:8px; flex:15 1 0}
.split > .split-caret{padding:0 8px; display:inline-flex; align-items:center; justify-content:center; flex:1 1 0}
.menu{position:absolute; top:100%; right:0; background:var(--panel); border:1px solid var(--border); border-radius:10px; min-width:180px; padding:6px; box-shadow:0 10px 24px rgba(0,0,0,.35); z-index:20}
.menu .menu-item{display:block; width:100%; text-align:left; background:transparent; color:var(--text); border:0; padding:8px 10px; border-radius:8px; cursor:pointer}
.menu .menu-item:hover{background:var(--panel-2)}

/* Modals */
.modal{position:fixed; inset:0; display:none}
.modal.is-open{display:block}
.modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.5)}
.modal__dialog{
  position:relative; margin:10vh auto; max-width:640px; max-height:80vh; background:var(--panel);
  border:1px solid var(--border); border-radius:16px; padding:0 0 12px 0;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
}
.modal__header{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 12px 8px; border-bottom:1px solid var(--border);
}
.modal__body{padding:12px; display:grid; gap:10px; overflow:auto}
.modal__footer{padding:12px; border-top:1px solid var(--border)}
.block{display:block}
.fieldgroup{border:1px solid var(--border); border-radius:12px; padding:10px; margin-bottom:10px}

/* Floating BuyMeACoffee */
#bmacBtn.bmac{
  position:fixed; right:16px; bottom:16px; padding:12px 14px; border-radius:999px;
  background:var(--primary); color:#fff; text-decoration:none; border:0;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
#bmacBtn:focus-visible{outline:3px solid var(--ring); outline-offset:2px}

/* Footer centering */
footer.container{
  text-align:center;
  margin-top:auto;
  /* Keep some internal breathing room */
  padding-top:8px;
  padding-bottom:12px;
  /* Ensure visual space below footer for gesture bars and rounded corners */
  margin-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}
@media (max-width:600px){
  /* Sticky actions at bottom on results screen */
  #resultsView .results-actions{position:sticky; bottom:0; background:var(--panel); padding-top:10px; margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; border-top:1px solid var(--border)}
  footer.container{
    padding-bottom: 12px;
    margin-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  }
}

/* Veil loader */
.veil{position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:100}
.veil[hidden]{display:none !important}
.veil__panel{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:16px 18px; display:flex; align-items:center; gap:12px; box-shadow:0 20px 60px rgba(0,0,0,.35)}
.veil__msg{font-weight:600}
.spinner{width:22px; height:22px; border-radius:50%; border:3px solid rgba(255,255,255,.25); border-top-color:#fff; animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Optional hero adjustments */
 @media (min-width:900px){
  /* uncomment to center hero at start
  .container .hero { text-align:center; }
  */
}
body.is-quiz .hero{ /* transform: scale(.96); opacity:.9; */ }

/* Small screens polish */
 @media (max-width:600px){
  .site-header{padding:10px 12px}
  .icon-btn{padding:8px 10px; font-size:16px}
  /* Global button scale down */
  .btn{padding:10px 12px; font-size:14px; min-width:0}
  /* Generator toolbar keeps full-width buttons in stacked layout */
  .gen-toolbar .btn{width:100%}
  /* Quiz nav buttons share space neatly */
  #quizView .quiz-nav-row .btn{flex:1 1 0; min-width:0}
  /* Results actions: avoid oversized buttons */
  .results-actions .btn{padding:10px 12px; font-size:14px}
  .grid{gap:12px}
  .card{padding:14px}
}

/* Extra small screens */
@media (max-width:480px){
  .brand-logo{height:38px}
  .gen-toolbar{gap:8px}
  .toolbar-input{min-height:38px; font-size:14px}
  .quiz-title-row h2{font-size:18px}
  .btn{padding:9px 10px; font-size:13px}
  #quizView .quiz-nav-row .btn{padding:10px 10px}
  .chip{min-width:52px; height:24px; font-size:12px; padding:0 8px}
  .split{min-width:0}
  .split > .btn:first-child{flex:12 1 0}
  .split > .split-caret{flex:1 1 0; padding:0 6px}
}

@media (max-width:360px){
  .header-actions{gap:8px}
  .header-actions .icon-btn{padding:6px 8px; font-size:14px}
  /* Collapse Prev/Next labels to icons on extra narrow screens */
  #prevBtn, #nextBtn{font-size:0}
  #prevBtn::before{content:'◀'; font-size:14px}
  #nextBtn::before{content:'▶'; font-size:14px}
}
#quizView #questionHost + .row{margin-top:12px}
#quizView .quiz-nav-row{margin-top:12px}
@media (max-width:600px){
  #quizView .quiz-nav-row{position:sticky; bottom:0; background:var(--panel); padding-top:10px; margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; border-top:1px solid var(--border)}
}