:root{
  --neutral-bg:#f9fafb;
  --neutral-txt:#0f172a;
  --blue:#1e3a8a;   /* selected (open) */
  --green:#065f46;  /* correct (closed + facit) */
  --red:#991b1b;    /* wrong (closed + facit) */
  --btn-radius:10px;
}

/* Layout basics */
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#f5f5f5;
  margin:40px;
  color:var(--neutral-txt);
}
h1{text-align:center;margin-bottom:12px}
.wrap{max-width:1100px;margin:0 auto}
.muted{color:#475569}

/* Cards & misc */
.card{
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;
  padding:16px; box-shadow:0 2px 8px rgba(0,0,0,.06); margin-bottom:16px;
}
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
label.inline{font-weight:600}
.text-input{padding:.6rem .7rem;border:1px solid #cbd5e1;border-radius:10px;min-width:220px}
.actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  padding:.65rem 1rem;border-radius:10px;border:1px solid #111827;background:#111827;color:#fff;cursor:pointer;
}
.btn.secondary{ background:#fff; color:#111827; }

/* Alerts */
.msg{padding:10px 12px;border-radius:8px;margin-top:8px}
.msg.ok{background:#ecfdf5;border:1px solid #10b981;color:#065f46}
.msg.err{background:#fef2f2;border:1px solid #ef4444;color:#7f1d1d}

/* Links on top */
.toplinks{ text-align:center; margin-bottom:12px; }
.toplinks a{display:inline-block;padding:.5rem .8rem;border:1px solid #111827;border-radius:10px;background:#111827;color:#fff;text-decoration:none}

/* Table */
table{width:100%;border-collapse:collapse;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08)}
th,td{padding:12px;border:1px solid #e5e7eb;text-align:center;vertical-align:middle}
th{background:#111827;color:#fff;font-weight:600}

/* CLOSED ROW: darker gray and dim text */
tr.closed td{ background:#d1d5db; color:#374151; }

/* Option group & buttons */
.option-group{
  display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap;
}
/* hide radios but keep accessible */
.option-group input[type="radio"]{
  position:absolute; opacity:0; pointer-events:none; width:0; height:0; margin:0; padding:0; border:0;
}

.option-btn{
  display:inline-block;
  padding:.5rem .9rem;
  background:var(--neutral-bg);
  color:var(--neutral-txt);
  border:1px solid #cbd5e1;
  border-radius:var(--btn-radius);
  cursor:pointer;
  user-select:none;
  transition:transform .04s ease, box-shadow .2s ease, background .15s, color .15s, border-color .15s;
  min-width:90px;
}
.option-btn:active{ transform:scale(.98); }

/* OPEN: selected = blue, others neutral */
.option-group input:checked + .option-btn{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
  box-shadow:0 0 0 2px rgba(30,58,138,.15) inset;
}

/* CLOSED + FACIT: label gets .correct or .wrong on server render */
.option-btn.correct{
  background:var(--green);
  border-color:var(--green);
  color:#fff;
  box-shadow:0 0 0 2px rgba(16,185,129,.18) inset;
}
.option-btn.wrong{
  background:var(--red);
  border-color:var(--red);
  color:#fff;
  box-shadow:0 0 0 2px rgba(239,68,68,.18) inset;
}

/* Tiny toast */
#toast{
  position:fixed; right:16px; bottom:16px;
  background:#111827; color:#fff;
  padding:10px 12px; border-radius:10px;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
#toast.show{ opacity:1; }

/* Facit colors must override the blue :checked style when row is closed */
tr.closed .option-group input:checked + .option-btn.correct,
tr.closed .option-group .option-btn.correct {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(16,185,129,.18) inset;
}

tr.closed .option-group input:checked + .option-btn.wrong,
tr.closed .option-group .option-btn.wrong {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(239,68,68,.18) inset;
}

/* Show the real correct answer with green border only (neutral background) */
tr.closed .option-btn.facit {
  background: var(--neutral-bg);
  color: var(--neutral-txt);
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(16,185,129,.25);
}

.toplinks a.btn-green{
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(16,185,129,.18) inset;
}