/* Farve-variabler (lys som default) */
.dkb4q-wrapper{
  --dkb4q-bg: #ffffff;
  --dkb4q-fg: #111111;
  --dkb4q-border: #dddddd;
  --dkb4q-card-border: #eeeeee;
  --dkb4q-muted: rgba(0,0,0,.7);
  --dkb4q-ok-bg: #f3fff8;
  --dkb4q-ok-border: #1b995f;
  --dkb4q-bad-bg: #fff6f6;
  --dkb4q-bad-border: #c33;
  --dkb4q-btn: #0b6;
  --dkb4q-btn-2: #0a6;
  --dkb4q-btn-3: #777;
  --dkb4q-btn-4: #0a5;
  --dkb4q-btn-5: #555;
  --dkb4q-btn-fg: #ffffff;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark){
  .dkb4q-wrapper{
    --dkb4q-bg: #151515;
    --dkb4q-fg: #f3f3f3;
    --dkb4q-border: #333333;
    --dkb4q-card-border: #333333;
    --dkb4q-muted: rgba(255,255,255,.8);
    --dkb4q-ok-bg: #0f2a1f;
    --dkb4q-ok-border: #2ec27e;
    --dkb4q-bad-bg: #2a1616;
    --dkb4q-bad-border: #ff6b6b;
    --dkb4q-btn: #2aa578;
    --dkb4q-btn-2: #279a71;
    --dkb4q-btn-3: #8b8b8b;
    --dkb4q-btn-4: #2a8f6d;
    --dkb4q-btn-5: #777777;
    --dkb4q-btn-fg: #ffffff;
  }
}

.dkb4q-wrapper{
  max-width:760px;margin:1rem auto;padding:1rem;
  border:1px solid var(--dkb4q-border);border-radius:12px;background:var(--dkb4q-bg);
  color:var(--dkb4q-fg);
}
.dkb4q-wrapper *{ color:inherit; }

.dkb4q-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
#dkb4q-title{margin:0;font-size:1.25rem}
.dkb4q-progress{font-size:.95rem;opacity:.9;color:var(--dkb4q-muted)}

.dkb4q-q{
  margin-bottom:1rem;border:1px solid var(--dkb4q-card-border);
  padding:.75rem 1rem;border-radius:10px;background:transparent;
}
.dkb4q-row{display:flex;align-items:center;gap:.5rem;margin:.25rem 0}

.dkb4q-q input[type="radio"]{ accent-color: var(--dkb4q-btn); }

.dkb4q-actions{display:flex;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}
.dkb4q-submit,.dkb4q-next,.dkb4q-prev,.dkb4q-finish,.dkb4q-restart{
  padding:.6rem 1rem;border:0;border-radius:8px;cursor:pointer;color:var(--dkb4q-btn-fg)
}
.dkb4q-submit{background:var(--dkb4q-btn)}
.dkb4q-next{background:var(--dkb4q-btn-2)}
.dkb4q-prev{background:var(--dkb4q-btn-3)}
.dkb4q-finish{background:var(--dkb4q-btn-4)}
.dkb4q-restart{background:var(--dkb4q-btn-5)}
.dkb4q-submit:disabled,.dkb4q-next:disabled,.dkb4q-prev:disabled,.dkb4q-finish:disabled{
  opacity:.6;cursor:not-allowed
}

.dkb4q-q.dkb4q-correct{border-color:var(--dkb4q-ok-border);background:var(--dkb4q-ok-bg)}
.dkb4q-q.dkb4q-incorrect{border-color:var(--dkb4q-bad-border);background:var(--dkb4q-bad-bg)}
.dkb4q-feedback{margin-top:.5rem;font-size:.95rem}

.dkb4q-score{margin-top:1rem;font-weight:600}

.dkb4q-wrapper button:focus,
.dkb4q-wrapper input[type="radio"]:focus + label{
  outline:2px solid var(--dkb4q-btn-2); outline-offset:2px;
}