:root{
  --bg:#0d1117;
  --card:#161b22;
  --card2:#11161d;
  --line:#262d38;
  --txt:#e6edf3;
  --mut:#8b949e;
  --acc:#22d3ee;
  --ok:#3fb950;
  --bad:#f85149;
  --purple:#a371f7;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:radial-gradient(1200px 600px at 50% -10%,#16202b 0%,var(--bg) 60%);
  color:var(--txt);
  min-height:100vh;
  padding:24px 14px 60px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:860px;margin:0 auto}

header{text-align:center;margin-bottom:22px}
header h1{font-size:25px;letter-spacing:-.5px}
header p{color:var(--mut);font-size:13.5px;margin-top:6px}

a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px;
  margin-bottom:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.hidden{display:none!important}

h2{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--mut);
  margin-bottom:14px;
  font-weight:600;
}

.group{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--acc);
  font-weight:700;
  margin:14px 0 8px;
  opacity:.75;
}
.group:first-child{margin-top:0}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:6px}
.chip input{display:none}
.chip span{
  display:block;
  padding:8px 13px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--card2);
  cursor:pointer;
  font-size:12.5px;
  user-select:none;
  transition:.15s;
}
.chip span:hover{border-color:#3a4553}
.chip input:checked+span{
  background:rgba(34,211,238,.13);
  border-color:var(--acc);
  color:var(--acc);
  box-shadow:0 0 0 1px rgba(34,211,238,.25) inset;
}

/* ---------- Layout ---------- */
.row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.row.between{justify-content:space-between}
.optgrid{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  margin:18px 0 16px;
}

label.select,
label.check{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--mut);
  font-size:14px;
  cursor:pointer;
}
label.check input{
  width:16px;
  height:16px;
  accent-color:var(--acc);
  cursor:pointer;
}

/* ---------- Inputs & buttons ---------- */
select,
input[type=text],
input[type=password]{
  background:var(--card2);
  color:var(--txt);
  border:1px solid var(--line);
  padding:8px 10px;
  border-radius:9px;
  font-size:14px;
  outline:none;
  font-family:inherit;
}
select:focus,
input:focus{border-color:var(--acc)}

button{
  font-family:inherit;
  cursor:pointer;
  border:none;
  border-radius:10px;
  font-size:15px;
  transition:.15s;
}
button.primary{
  background:linear-gradient(180deg,#2ad4ef,#12b6d1);
  color:#04222a;
  font-weight:700;
  padding:12px 22px;
  letter-spacing:.02em;
}
button.primary:hover{filter:brightness(1.08)}
button.primary:disabled{opacity:.5;cursor:not-allowed}
button.ghost{
  background:transparent;
  border:1px solid var(--line);
  color:var(--mut);
  padding:9px 16px;
  font-size:13.5px;
}
button.ghost:hover{color:var(--txt);border-color:#3a4553}

/* Full-width primary buttons only when they're standalone */
#startBtn,
#againBtn{
  width:100%;
  margin-top:6px;
}

.hint{color:var(--mut);font-size:12.5px;margin-top:14px;text-align:center}
kbd{
  background:var(--card2);
  border:1px solid var(--line);
  border-bottom-width:2px;
  padding:1px 6px;
  border-radius:5px;
  font-size:11.5px;
  font-family:ui-monospace,monospace;
}

/* ---------- Quiz topbar ---------- */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:var(--mut);
  margin-bottom:18px;
  font-variant-numeric:tabular-nums;
}
.topbar .live{color:var(--acc);font-weight:700;font-size:15px}

/* ---------- Question box ---------- */
.qbox{
  background:var(--card2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px 18px;
  text-align:center;
  margin-bottom:18px;
}
.qtype{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--acc);
  margin-bottom:12px;
  font-weight:700;
}
.question{
  font-size:clamp(16px,4vw,24px);
  font-weight:700;
  letter-spacing:.2px;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  word-break:break-word;
  line-height:1.45;
}

/* ============================================================
   ANSWER ROW — FINAL BULLETPROOF VERSION
   The input claims all remaining space; the button is locked
   to a fixed 150px width. Every property is forced.
   ============================================================ */
.answerRow{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:12px !important;
  width:100% !important;
  align-items:stretch !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:0 !important;
}

.answerRow #answer,
#answer{
  flex:1 1 auto !important;
  flex-grow:1 !important;
  flex-shrink:1 !important;
  flex-basis:auto !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:64px !important;
  height:auto !important;
  box-sizing:border-box !important;
  background:var(--card2) !important;
  border:1.5px solid var(--line) !important;
  border-radius:11px !important;
  padding:14px 20px !important;
  font-size:22px !important;
  color:var(--txt) !important;
  outline:none !important;
  font-family:ui-monospace,monospace !important;
  display:block !important;
}
#answer:focus{
  border-color:var(--acc) !important;
  box-shadow:0 0 0 3px rgba(34,211,238,.15) !important;
}
#answer:disabled{opacity:.6 !important}

.answerRow #submitBtn,
#submitBtn{
  flex:0 0 150px !important;
  flex-grow:0 !important;
  flex-shrink:0 !important;
  flex-basis:150px !important;
  width:150px !important;
  max-width:150px !important;
  min-width:150px !important;
  height:auto !important;
  min-height:64px !important;
  margin:0 !important;
  padding:0 20px !important;
  font-size:15px !important;
  align-self:stretch !important;
  box-sizing:border-box !important;
}

@media (max-width:520px){
  .answerRow{
    flex-direction:column !important;
    flex-wrap:wrap !important;
  }
  .answerRow #answer,
  #answer{
    min-height:56px !important;
    width:100% !important;
    font-size:20px !important;
  }
  .answerRow #submitBtn,
  #submitBtn{
    flex:0 0 auto !important;
    flex-basis:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:54px !important;
  }
}

/* ---------- Feedback ---------- */
.feedback{
  min-height:26px;
  text-align:center;
  font-size:15px;
  font-weight:600;
  margin-top:14px;
  line-height:1.5;
}
.feedback.ok{color:var(--ok)}
.feedback.bad{color:var(--bad)}
.feedback small{
  display:block;
  font-weight:500;
  font-size:12.5px;
  color:var(--mut);
  margin-top:4px;
  font-family:ui-monospace,monospace;
}

.shake{animation:shake .28s}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-7px)}
  75%{transform:translateX(7px)}
}

/* ---------- Stats ---------- */
.bigstats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:12px;
  margin-bottom:22px;
}
.stat{
  background:var(--card2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px;
  text-align:center;
}
.stat .v{
  font-size:22px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.stat .l{
  font-size:11px;
  color:var(--mut);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-top:5px;
  line-height:1.5;
}
.stat.good .v{color:var(--ok)}
.stat.time .v{color:var(--acc)}
.stat.bad .v{color:var(--bad)}
.stat.ds .v{color:var(--purple)}

/* ---------- Table ---------- */
table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  font-variant-numeric:tabular-nums;
}
th{
  text-align:left;
  color:var(--mut);
  font-weight:600;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.07em;
  padding:8px 6px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
td{
  padding:9px 6px;
  border-bottom:1px solid #1c222b;
  font-family:ui-monospace,monospace;
}
tr.ok td:nth-child(3){color:var(--ok)}
tr.no td:nth-child(3){color:var(--bad)}
td.type{font-family:inherit;color:var(--mut);font-size:12px}
td.t{text-align:right;color:var(--mut)}
td.ds{text-align:center;color:var(--mut);font-size:12px}
td.ds.hit{color:var(--purple);font-weight:700}
.tablewrap{max-height:420px;overflow:auto;border-radius:10px}

.legend{
  font-size:12px;
  color:var(--mut);
  margin-top:10px;
  text-align:center;
  font-family:ui-monospace,monospace;
}

/* ---------- Admin textarea ---------- */
textarea{
  width:100%;
  background:var(--card2);
  color:var(--txt);
  border:1px solid var(--line);
  border-radius:9px;
  padding:10px;
  font-family:ui-monospace,monospace;
  font-size:13px;
  outline:none;
}
textarea:focus{border-color:var(--acc)}