/* ========= Theme tokens ========= */
:root{
  --ring:#e5e7eb; --ink:#0f172a; --muted:#6b7280;
  --ok:#16a34a; --bad:#dc2626;
  --card:#ffffffF2; --accent:#6366f1; --accent-2:#22d3ee;
  --bg-glass:rgba(255,255,255,.78);
  --shadow:0 16px 40px rgba(0,0,0,.14);
}
@media (prefers-color-scheme: dark){
  :root{
    --ring:#263044; --ink:#e5e7eb; --muted:#9ca3af;
    --ok:#22c55e; --bad:#f87171;
    --card:#0b1224cc; --accent:#818cf8; --accent-2:#22d3ee;
    --bg-glass:rgba(15,23,42,.78);
    --shadow:0 16px 40px rgba(0,0,0,.35);
  }
}

/* ========= Answer Inputs + Check Buttons ========= */
.answer-box{
  margin:.6rem 0;
  display:flex; gap:.5rem;
  justify-content:flex-end; align-items:center;
}
.answer-box input[type="text"],
.answer-box input:not([type]){
  width:120px; padding:.5rem .6rem;
  border:1px solid var(--ring); border-radius:.55rem;
  background:linear-gradient(180deg,#eef2ff,#e0e7ff);
  color:#0b3b6a; text-align:center; outline:none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .04s ease;
}
.answer-box input[type="text"]:active{ transform:scale(.99); }
.answer-box button{
  padding:.5rem .85rem; border:1px solid transparent; border-radius:.65rem;
  color:#fff; font-weight:600; cursor:pointer;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
}
.answer-box button:active{ transform:translateY(1px) scale(.99); }

/* Section-specific input + button colors */
.qa-sa .answer-box input{ background:linear-gradient(180deg,#dbeafe,#bfdbfe); color:#1e3a8a; }
.qa-sa .answer-box input:focus{ border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.25); }
.qa-sa .answer-box button{ background:linear-gradient(120deg,#3b82f6,#2563eb); }

.qa-mcq .answer-box input{ background:linear-gradient(180deg,#d1fae5,#a7f3d0); color:#065f46; }
.qa-mcq .answer-box input:focus{ border-color:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.25); }
.qa-mcq .answer-box button{ background:linear-gradient(120deg,#34d399,#059669); }

.va .answer-box input{ background:linear-gradient(180deg,#fef3c7,#fde68a); color:#78350f; }
.va .answer-box input:focus{ border-color:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.25); }
.va .answer-box button{ background:linear-gradient(120deg,#fbbf24,#d97706); }

/* ========= Feedback ========= */
.feedback {
  min-height: 1.25rem;
  white-space: pre-line;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  margin-top: 0.3rem;
}

/* Correct attempt */
[data-question].correct .feedback {
  color: var(--ok);
  font-weight: 600;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

/* Wrong attempt */
[data-question].incorrect .feedback {
  color: var(--bad);
  font-weight: 600;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Right answer line */
.feedback[data-right-answer]::after {
  display: block;
  margin-top: 0.25rem;
  font-weight: 500;
  content: attr(data-right-answer);
}
.feedback[data-right-answer-correct="true"]::after {
  color: var(--ok);
  content: "✔️ " attr(data-right-answer);
}
.feedback[data-right-answer]:not([data-right-answer-correct])::after {
  color: #f59e0b;
  content: "✖️ " attr(data-right-answer);
}

/* ========= MCQ Pills ========= */
.mcq-box{
  flex-direction:row; align-items:center;
  justify-content:flex-end; gap:.5rem; flex-wrap:nowrap;
}
.mcq-box label{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.28rem .65rem; border:1px solid var(--ring); border-radius:999px;
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  cursor:pointer; user-select:none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  font-size:.92rem;
}
.qa-sa .mcq-box label:hover{ border-color:#3b82f6; box-shadow:0 4px 12px rgba(59,130,246,.2); }
.qa-sa .mcq-box label:has(input:checked){ background:linear-gradient(180deg,#3b82f6,#2563eb); color:#fff; border-color:transparent; }
.qa-mcq .mcq-box label:hover{ border-color:#10b981; box-shadow:0 4px 12px rgba(16,185,129,.2); }
.qa-mcq .mcq-box label:has(input:checked){ background:linear-gradient(180deg,#34d399,#059669); color:#fff; border-color:transparent; }
.va .mcq-box label:hover{ border-color:#f59e0b; box-shadow:0 4px 12px rgba(245,158,11,.2); }
.va .mcq-box label:has(input:checked){ background:linear-gradient(180deg,#fbbf24,#d97706); color:#fff; border-color:transparent; }
.mcq-box input[type="radio"]{ accent-color:#fff; }
@media (max-width:560px){ .mcq-box{ flex-wrap:wrap; justify-content:flex-end; } }

/* ========= Locked State ========= */
[data-question][data-attempted="true"] input,
[data-question][data-attempted="true"] textarea,
[data-question][data-attempted="true"] .mcq-box label,
[data-question][data-attempted="true"] .answer-box button {
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed !important;
}

/* ========= Scoreboard ========= */
.score-widget{
  position:fixed; right:1rem; bottom:1rem; z-index:2147483647;
  display:flex; align-items:flex-end; gap:.6rem;
}
.score-toggle{
  border:1px solid var(--ring); background:var(--card); color:inherit;
  width:2.4rem; height:2.4rem; border-radius:.7rem; cursor:pointer;
  display:grid; place-items:center; box-shadow:0 6px 20px rgba(0,0,0,.15);
}
.score-card{
  min-width:300px; max-width:380px;
  background:linear-gradient(180deg,var(--bg-glass),rgba(255,255,255,.92));
  backdrop-filter:blur(10px); border:1px solid var(--ring); border-radius:16px;
  padding:12px; box-shadow:var(--shadow); transition:transform .25s ease,opacity .25s ease; color:inherit;
}
@media (prefers-color-scheme: dark){
  .score-card{ background:linear-gradient(180deg,var(--bg-glass),rgba(11,18,36,.9)); }
}
.score-widget[data-collapsed="true"] .score-card{ transform:translateY(8px) scale(.98); opacity:0; pointer-events:none; }
.score-row{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; }

/* ========= Total Score Container ========= */
.total {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  min-width: 180px;
  border-radius: 1rem;
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.total .label{ font-size:1rem; font-weight:500; color:rgba(255,255,255,0.85); margin-bottom:.3rem; }
.score-numerator { font-size:2rem; font-weight:800; color:#fff; }
.score-denominator { font-size:1rem; font-weight:500; color:rgba(255,255,255,0.75); margin-left:.2rem; }
.score-percent { font-size:.95rem; font-weight:600; margin-top:.25rem; text-align:center; color:#fff; }
.value.bump, .score-numerator.bump { animation:bump .35s ease; }
@keyframes bump{ 0%{transform:scale(1)} 30%{transform:scale(1.15)} 100%{transform:scale(1)} }

/* ========= Chips (Right/Wrong) ========= */
.chip {
  font-size: 0.85rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-weight: 700;
  color: #fff;
  display: inline-block;
  min-width: 2rem;
  text-align: center;
  box-shadow: 0 3px 4px rgba(0,0,0,0.15);
  transition: transform .15s ease, box-shadow .15s ease;
}
.chip.ok { background: linear-gradient(135deg, #10b981, #059669); }
.chip.bad { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.chip.ok:hover, .chip.bad:hover{ transform:scale(1.05); box-shadow:0 5px 12px rgba(0,0,0,0.2); }
.label-ok { font-size:.85rem; font-weight:600; color:#059669; margin-right:.3rem; }
.label-bad { font-size:.85rem; font-weight:600; color:#b91c1c; margin-right:.3rem; }

/* ========= Section Tiles with Gradient ========= */
.stats-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; margin-top:.6rem; justify-items:center; }
.stat {
  border:none;
  border-radius:14px;
  padding:.3rem .3rem;
  text-align:center;
  min-width:100px;
  color:var(--ink);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.stat:hover { transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.12); }

/* Gradients */
.stat.sa { background:linear-gradient(135deg,#e0f2fe,#bfdbfe); }
.stat.mcq{ background:linear-gradient(135deg,#d1fae5,#a7f3d0); }
.stat.va { background:linear-gradient(135deg,#fef3c7,#fde68a); }

/* Section labels + values */
.stat-label{ font-size:.85rem; font-weight:600; margin-bottom:.3rem; }
[data-sec-total]{ display:flex; align-items:baseline; justify-content:center; gap:.2rem; font-size:1rem; }
.sec-numerator{ font-weight:700; font-size:1.1rem; }
.sec-denominator{ font-weight:500; color:var(--muted); font-size:.9rem; }
.sec-percent{ font-weight:600; font-size:.85rem; margin-left:.2rem; color:var(--accent); }

/* Attempts + Accuracy */
.stat-acc,
[data-quiz-acc-label],
.stat-attempt,
[data-quiz-attempt-label] {
  font-size:.8rem;
  color:var(--muted);
  font-weight:400;
  text-align:center;
}
.stat-acc.good, [data-quiz-acc-label].good { color:#16a34a; }
.stat-acc.mid,  [data-quiz-acc-label].mid  { color:#f59e0b; }
.stat-acc.bad,  [data-quiz-acc-label].bad  { color:#dc2626; }

.stat-meter{ margin-top:.25rem; }
.stat-meter-bar{ position:relative; height:.4rem; border-radius:.4rem; background:rgba(0,0,0,.08); overflow:hidden; border:1px solid var(--ring); }
.stat-meter-bar .fill{ display:block; height:100%; width:0%; transition:width .35s ease; }
.stat.sa   .stat-meter-bar .fill{ background:linear-gradient(90deg,#60a5fa,#2563eb); }
.stat.mcq  .stat-meter-bar .fill{ background:linear-gradient(90deg,#34d399,#059669); }
.stat.va   .stat-meter-bar .fill{ background:linear-gradient(90deg,#fbbf24,#d97706); }

/* ========= Global Attempt Progress ========= */
.attempt{ margin:.6rem 0 .3rem; }
.attempt-bar{ position:relative; height:.6rem; border-radius:.5rem; background:rgba(0,0,0,.08); overflow:hidden; border:1px solid var(--ring); }
.attempt-bar .fill{ display:block; height:100%; width:0%; background:linear-gradient(90deg,#6366f1,#22d3ee); transition:width .35s ease; }
.attempt-label{ font-size:.8rem; color:var(--muted); margin-top:.3rem; text-align:right; }

/* ========= Reset Button ========= */
.reset-btn.small {
  font-size: 1.2rem;
  padding: 0.25rem 0.6rem;
  border-radius: 0.6rem;
  border: none;
  cursor: pointer;
  background: linear-gradient(180deg,skyblue, teal, skyblue);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.reset-btn.small:hover { transform:scale(1.05); box-shadow:0 8px 18px rgba(0,0,0,0.25); }
.reset-btn.small:active{ transform:scale(0.97); box-shadow:0 4px 10px rgba(0,0,0,0.2); }

/* ========= Mobile tweaks ========= */
@media (max-width: 560px){
  .score-card{ min-width:260px; max-width:95vw; padding:8px; border-radius:12px; }
  .total{ padding:.4rem .6rem; min-width:120px; }
  .score-numerator{ font-size:1.5rem; }
  .score-denominator{ font-size:.9rem; }
  .score-percent{ font-size:.8rem; }
  .chip{ font-size:.7rem; padding:.25rem .45rem; }
  .stats-grid{ grid-template-columns:repeat(3,1fr); gap:.3rem; margin-top:.4rem; }
  .stat{ min-width:70px; padding:.35rem .4rem; border-radius:8px; }
  .stat-label{ font-size:.65rem; margin-bottom:.1rem; }
  .sec-numerator{ font-size:.95rem; }
  .sec-denominator{ font-size:.8rem; }
  .sec-percent{ font-size:.75rem; }
  .chips.small .chip{ font-size:.65rem; padding:.15rem .35rem; }
  .stat-acc, .stat-attempt{ font-size:.65rem; }
  .stat-meter-bar{ height:.3rem; }
  .reset-btn{ font-size:.7rem; padding:.35rem .55rem; border-radius:.5rem; }
  .rule{ font-size:.7rem; }
}

/* Right-side vertical stack */
.right-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* Align all to the right */
  gap: 0.4em;
}

/* Align chips to the right */
.right-stack .chip {
  align-self: flex-end; /* Each chip right-aligned */
  text-align: right;    /* Text inside chip aligned to right */
  min-width: 2rem;    /* Ensures a little breathing space */
}