/* ===== ChemSteps Dark, Boxed UI (admin-themed via CSS vars) ===== */
.cstt-shell,
.cstt-shell * { box-sizing: border-box; }

/* Shell & header */
.cstt-shell {
  background: var(--cstt-bg, #0b0b0f);
  color: var(--cstt-text, #ffffff);
  padding:16px; border-radius:12px; max-width:1000px; margin:0 auto;
  border:1px solid var(--cstt-border, #2a2f39);
}
.cstt-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.cstt-hello  { font-size:1.15rem; font-weight:600; }
.cstt-badge  {
  background: var(--cstt-box, #121317);
  border:1px solid var(--cstt-border, #2a2f39);
  padding:6px 10px; border-radius:999px; color:#fff;
}
/* Colorize badge by group */
.cstt-shell[data-class="CHM1025"] .cstt-badge{ background: var(--cstt-badge-1025); }
.cstt-shell[data-class="CHM1045"] .cstt-badge{ background: var(--cstt-badge-1045); }
.cstt-shell[data-class="CHM1046"] .cstt-badge{ background: var(--cstt-badge-1046); }

/* HUD row (boxed blocks) */
.cstt-hud { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:12px; }
.cstt-hud-item {
  background: var(--box-bg, var(--cstt-box, #121317));
  border:1px solid var(--box-bor, var(--cstt-border, #2a2f39));
  padding:10px; border-radius:12px;
}
.cstt-label { font-size:.8rem; opacity:.85; display:block; }
.cstt-value { font-weight:600; margin-top:6px; display:flex; gap:10px; flex-wrap:wrap; }
.cstt-pill  { margin-top:6px; font-size:.8rem; opacity:.9; }

/* Inline kudos under hearts box */
.cstt-kudos-inline{
  margin-top:8px;
  background: color-mix(in srgb, var(--cstt-box, #121317) 85%, black 15%);
  border:1px solid var(--cstt-border, #2a2f39);
  border-radius:10px; padding:8px 10px; display:none;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}

/* Timer emphasis */
.cstt-timer.cstt-timer-low       { box-shadow:0 0 0 2px rgba(255,165,0,.35) inset; }
.cstt-timer.cstt-timer-critical  { box-shadow:0 0 0 2px #c33 inset; }

/* Progress bar */
.cstt-progressbar {
  position:relative; height:10px;
  background: color-mix(in srgb, var(--cstt-box, #121317) 80%, black 20%);
  border-radius:999px; overflow:hidden; margin:8px 0 16px;
  border:1px solid var(--cstt-border, #2a2f39);
}
#cstt-progressbar-fill { position:absolute; inset:0 100% 0 0; background: var(--cstt-accent, #7a5af8); width:0%; }

/* Stage (question card) */
.cstt-stage {
  background: var(--box-bg, var(--cstt-box, #121317));
  border:1px solid var(--box-bor, var(--cstt-border, #2a2f39));
  border-radius:12px; padding:14px; margin-top:8px;
}
.cstt-loading { opacity:.8; }
.cstt-question { font-size:1.05rem; margin-bottom:10px; }
.cstt-choices { display:grid; gap:8px; }
.cstt-choice {
  background: color-mix(in srgb, var(--cstt-box, #121317) 90%, black 10%);
  border:1px solid color-mix(in srgb, var(--cstt-border, #2a2f39) 85%, white 15%);
  border-radius:10px; padding:11px; cursor:pointer; color: var(--cstt-text, #ffffff);
}
.cstt-choice:hover   { background: color-mix(in srgb, var(--cstt-box, #121317) 80%, black 20%); }
.cstt-choice.disabled{ opacity:.5; pointer-events:none; }
.cstt-choice.correct { outline:2px solid #2ecc71; }
.cstt-choice.wrong   { outline:2px solid #e74c3c; }
.cstt-choice-input   {
  background: color-mix(in srgb, var(--cstt-box, #121317) 90%, black 10%);
  border:1px solid color-mix(in srgb, var(--cstt-border, #2a2f39) 85%, white 15%);
  border-radius:10px; padding:11px; color: var(--cstt-text, #ffffff); width:100%;
}

/* Matching / ordering layouts */
.cstt-match-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cstt-match-left .selected{ outline:2px dashed var(--cstt-accent, #7a5af8); }
.cstt-order-list{ display:flex; flex-direction:column; gap:8px; }
.cstt-order-item{
  background: color-mix(in srgb, var(--cstt-box, #121317) 90%, black 10%);
  border:1px solid color-mix(in srgb, var(--cstt-border, #2a2f39) 85%, white 15%);
  border-radius:10px; padding:11px; cursor:grab; color:#fff;
}
.cstt-order-item.dragging{ opacity:.7; cursor:grabbing; }

/* Buttons */
.cstt-button {
  background: var(--cstt-accent, #7a5af8);
  color:#fff; border:none; border-radius:10px; padding:9px 14px; cursor:pointer; font-weight:600;
}
.cstt-button:hover { filter:brightness(.95); }
.cstt-controls { display:flex; gap:10px; margin-top:10px; }

/* Feedback */
.cstt-feedback { margin-top:10px; min-height:20px; }
.lightbulb { margin-right:6px; }

/* Confetti (kept bright, behind HUD) */
#cstt-confetti { position:fixed; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:999; }

/* Leaderboard block */
.cstt-leaderboard {
  margin-top:18px;
  background: var(--box-bg, var(--cstt-box, #121317));
  border:1px solid var(--box-bor, var(--cstt-border, #2a2f39));
  border-radius:12px; padding:12px;
}
.cstt-leaderboard h3 { margin:0 0 8px 0; }
.cstt-leaderboard-table { width:100%; border-collapse:collapse; font-size:.95rem; }
.cstt-leaderboard-table th, .cstt-leaderboard-table td {
  border-bottom:1px solid var(--cstt-border, #2a2f39); padding:8px; text-align:left; color: var(--cstt-text, #ffffff);
}
.cstt-leaderboard-table tr:last-child td { border-bottom:none; }

/* Theme safety */
.cstt-shell a, .cstt-shell p, .cstt-shell div, .cstt-shell h1, .cstt-shell h2, .cstt-shell h3, .cstt-shell h4, .cstt-shell h5 {
  color: var(--cstt-text, #ffffff); text-decoration:none;
}
.cstt-shell input, .cstt-shell button { font:inherit; }