:root { color-scheme: dark; }
html, body, gradio-app, .gradio-container { background: #101217 !important; color: #f4f5f7 !important; }
.gradio-container {
  --body-background-fill: #101217; --body-text-color: #f4f5f7;
  --body-text-color-subdued: #b8bdc9; --block-background-fill: #171a21;
  --block-border-color: #303644; --block-label-text-color: #c5cad5;
  --block-title-text-color: #f4f5f7; --input-background-fill: #101217;
  --input-border-color: #3c4354; --input-text-color: #f4f5f7;
  --button-secondary-background-fill: #202737; --button-secondary-text-color: #f4f5f7;
  --button-secondary-border-color: #576179; --border-color-primary: #303644;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  width: 100% !important; min-width: 0 !important; max-width: 1280px !important; padding: 32px 24px 24px !important; margin: 0 auto !important;
}
.gradio-container > .main { width: 100% !important; min-width: 0 !important; }
.hero { text-align: center; padding: 24px 0 40px; }
.eyebrow { color: #9cacd0; font-size: 10px; letter-spacing: .24em; margin-bottom: 12px; }
.hero h1 { font-size: clamp(3.5rem, 9vw, 5rem); font-weight: 300; letter-spacing: -.04em; margin: 0; line-height: 1.1; }
.hero p { color: #b8bdc9; font-size: 17px; margin: 14px 0 8px; }
.hero-note { color: #81899c; font-size: 13px; }
#workspace { display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 5.5fr); gap: 24px; align-items: stretch; }
#workspace > .column { min-width: 0 !important; box-sizing: border-box; background: #171a21; border: 1px solid #303644; border-radius: 20px; padding: 24px !important; }
.section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.section-title span { color: #9cacd0; font-size: 11px; border: 1px solid #3c4354; border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; }
.section-title h2 { font-size: 18px; font-weight: 450; margin: 0; }
.hint, .hint p { color: #9da5b6 !important; font-size: 12px !important; line-height: 1.6; }
button { border-radius: 999px !important; transition: background .15s, border-color .15s; }
#workspace button { font-size: 13px; }
#assess { background: #b8c9ff !important; color: #101217 !important; border: 1px solid #b8c9ff !important; font-weight: 600; }
#assess:hover { background: #d1dcff !important; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #b8c9ff !important; outline-offset: 3px; }
.score-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 2px 0 14px; }
.score-card { background: #101217; border: 1px solid #303644; border-radius: 14px; padding: 15px 10px; text-align: center; }
.score-card span { display: block; color: #b8bdc9; font-size: 11px; margin-bottom: 10px; }
.score-card strong { display: block; color: #d4dfff; font-size: 28px; font-weight: 350; font-variant-numeric: tabular-nums; }
.score-card small { color: #81899c; font-size: 10px; }
.transcript { padding: 14px 16px; border-left: 2px solid #9cacd0; background: #101217; border-radius: 0 10px 10px 0; margin-bottom: 10px; }
.transcript span { color: #9da5b6; font-size: 11px; }
.transcript p { color: #f4f5f7; font-size: 15px; line-height: 1.6; margin: 6px 0 0; }
.page-footer { padding: 26px 0 4px; color: #81899c; text-align: center; font-size: 11px; line-height: 1.8; }
.page-footer span { display: block; }
@media (max-width: 1000px) {
  #workspace { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .gradio-container { padding: 20px 12px !important; }
  .hero { padding: 12px 0 28px; }
  #workspace { flex-direction: column; }
  #workspace > .column { padding: 18px !important; min-width: 0 !important; width: 100%; }
  .score-grid { grid-template-columns: repeat(2, 1fr); }
}

.assessment-progress { margin-bottom: 14px; }
.step-caption { color: #b8bdc9; font-size: 12px; margin-bottom: 12px; }
.assessment-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.assessment-step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 4px; row-gap: 8px; min-width: 0; padding: 10px 4px; border: 1px solid #303644; border-radius: 10px; color: #81899c; font-size: 12px; line-height: 1.4; }
.assessment-step > span:last-of-type { min-width: 0; white-space: nowrap; }
.assessment-steps:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#assessment-stages { min-width: 0; max-width: 100%; container-type: inline-size; }
.assessment-progress, .assessment-steps { min-width: 0; width: 100%; box-sizing: border-box; }
.assessment-step { box-sizing: border-box; }
.step-number { display: inline-grid; place-items: center; font-size: inherit; line-height: inherit; }
.assessment-step.active { color: #d4dfff; border-color: #9cacd0; }
.assessment-step.done { color: #b8c9ff; }
.assessment-step.failed { color: #f0a5a5; }
.step-track { grid-column: 1 / -1; height: 3px; background: #303644; border-radius: 3px; overflow: hidden; margin-top: 6px; }
.step-track i { display: block; height: 100%; width: 0; background: #b8c9ff; }
.done .step-track i { width: 100%; }
.active .step-track i { width: 35%; animation: stage-motion 1.4s ease-in-out infinite; }
@keyframes stage-motion { from { transform: translateX(-110%); } to { transform: translateX(390%); } }
@media (prefers-reduced-motion: reduce) { .active .step-track i { animation: none; width: 100%; opacity: .6; } }

/* Fit all stage labels and their numbers on one row within the panel. */
#assessment-stages .assessment-step { font-size: min(12px, 2.05cqi); column-gap: min(4px, .6cqi); padding-inline: min(4px, .6cqi); }

/* Match the inset of Gradio HTML results above the word table. */
#word-scores, #status {
  box-sizing: border-box;
  width: calc(100% - 24px) !important;
  min-width: 0 !important;
  max-width: calc(100% - 24px);
  margin-inline: 12px !important;
}