/* Lexemeo learner design system. Component rules consume only tokens.css. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; max-width: 100%; }
body { display: flex; min-height: 100vh; flex-direction: column; background: var(--lx-paper); color: var(--lx-text-body); font-family: var(--lx-font); font-size: 16px; line-height: 1.65; }
a { color: var(--lx-indigo); text-decoration-color: var(--lx-link-underline); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--lx-indigo); outline-offset: 2px; }
button, input, select, textarea { font: inherit; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .45; }
img, svg { max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, .brand, .option-choice, .word-identity, .messages li { overflow-wrap: anywhere; }
h1 { color: var(--lx-text); font-size: 30px; font-weight: 500; letter-spacing: -.03em; line-height: 1.2; }
h2 { color: var(--lx-text); font-size: 24px; font-weight: 500; letter-spacing: -.025em; line-height: 1.25; }
h3 { color: var(--lx-text); font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }

.lx-icon { display: inline-block; flex: none; font-family: var(--lx-font-icon); font-size: 20px; font-style: normal; font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24; font-weight: 300; letter-spacing: normal; line-height: 1; text-transform: none; user-select: none; white-space: nowrap; word-wrap: normal; }

.shell-header, .practice-header, .shell-footer { flex: none; width: 100%; min-width: 0; }
.shell-header, .practice-header { border-bottom: 1px solid var(--lx-line); background: var(--lx-surface); }
.shell-header__inner, .practice-header__inner, .shell-footer__inner { width: 100%; max-width: var(--lx-page-max); min-width: 0; margin: 0 auto; padding-inline: 32px; }
.shell-header__inner, .practice-header__inner { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 24px; }
.brand-group { display: flex; min-width: 0; align-items: center; gap: 11px; }
.brand { display: inline-flex; min-width: 0; align-items: center; gap: 8px; color: var(--lx-indigo); text-decoration: none; }
.brand-mark, .brand-mark svg { display: block; width: 25px; height: 25px; flex: none; }
.brand-wordmark { color: var(--lx-ink); font-size: 20px; font-weight: 500; letter-spacing: -.035em; line-height: 1; }
.beta-badge { display: inline-flex; min-height: 22px; align-items: center; padding: 2px 6px; border: 1px solid var(--lx-ochre-border); border-radius: var(--lx-radius-sm); color: var(--lx-ochre); font-family: var(--lx-font-mono); font-size: 9px; letter-spacing: .12em; line-height: 1; text-decoration: none; text-transform: uppercase; }
.account-nav { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 18px; }
.account-nav a, .nav-link { display: inline-flex; align-items: center; gap: 7px; color: var(--lx-text-secondary); font-size: 13px; text-decoration: none; }
.account-nav a:hover, .account-nav a:focus-visible, .nav-link:hover, .nav-link:focus-visible { color: var(--lx-indigo); }
.account-nav .lx-icon { color: var(--lx-text-icon); font-size: 18px; }
.shell-footer { margin-top: auto; border-top: 1px solid var(--lx-line); }
.shell-footer__inner { display: flex; min-height: 62px; align-items: center; justify-content: center; gap: 20px; color: var(--lx-text-muted); font-size: 12px; }

.messages { display: grid; width: min(calc(100% - 40px), var(--lx-reading-max)); min-width: 0; margin: 18px auto 0; padding: 0; gap: 8px; list-style: none; }
.messages li { padding: 12px 14px; border: 1px solid var(--lx-sage-border); border-radius: var(--lx-radius); background: var(--lx-sage-tint); color: var(--lx-sage); font-size: 14px; }
.content { display: flex; width: 100%; max-width: var(--lx-reading-max); min-width: 0; flex: 1 0 auto; flex-direction: column; margin: 0 auto; padding: 48px 32px 64px; gap: 26px; }
.page-practice .content { max-width: var(--lx-practice-max); padding-top: 44px; }
.page-form .content { max-width: calc(var(--lx-form-max) + 64px); }
.lede, .page-lede { color: var(--lx-text-secondary); font-size: 16px; line-height: 1.65; }
.content > h1 + .lede, .content > h1 + .page-lede { margin-top: -18px; }
.section-heading, .example-label, .answer-audio__heading, .form-field > label, .eyebrow { color: var(--lx-text-muted); font-family: var(--lx-font-mono); font-size: 10px; font-weight: 400; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; }
.section-stack { display: flex; min-width: 0; flex-direction: column; gap: 12px; }

.btn { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 9px; padding: 12px 28px; border: 1px solid transparent; border-radius: var(--lx-radius); cursor: pointer; font-family: var(--lx-font); font-size: 15px; font-weight: 500; line-height: 1.4; text-align: center; text-decoration: none; transition: border-color 150ms ease-out, opacity 150ms ease-out; }
.btn-block { width: 100%; }
.btn-primary { background: var(--lx-indigo); color: var(--lx-surface); }
.btn-secondary { border-color: var(--lx-border-input); background: var(--lx-surface); color: var(--lx-ink); }
.btn-secondary .lx-icon { color: var(--lx-indigo); }
.btn-secondary:hover, .btn-secondary:focus-visible { border-color: var(--lx-indigo); }
.btn-danger { border-color: var(--lx-border-input); background: var(--lx-surface); color: var(--lx-rust); }
.btn-danger-solid { background: var(--lx-rust); color: var(--lx-surface); }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; text-decoration: none; }
.text-link > span:not(.lx-icon) { text-decoration: underline; text-decoration-color: var(--lx-link-underline); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.text-link:hover > span:not(.lx-icon) { text-decoration-color: currentColor; }

.card, .primary-card, .empty-state, .vocabulary-sets-card, .notice-card, .saved-items-card, .progress-section, .saved-detail__state { min-width: 0; border: 1px solid var(--lx-line-strong); border-radius: var(--lx-radius-lg); background: var(--lx-surface); }
.primary-card { display: flex; flex-direction: column; padding: 26px 28px; gap: 18px; }
.primary-card h2 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.primary-card__scope, .primary-card__meta { color: var(--lx-text-secondary); font-size: 14px; overflow-wrap: anywhere; }
.primary-card__meta { color: var(--lx-indigo); font-family: var(--lx-font-mono); font-size: 12px; letter-spacing: .04em; }
.primary-card__secondary-link { align-self: center; color: var(--lx-clay); font-size: 13px; }
.primary-card__alternative { margin-top: -6px; }
progress { overflow: hidden; border: 0; border-radius: 2px; appearance: none; background: var(--lx-line); color: var(--lx-indigo); }
progress::-webkit-progress-bar { border-radius: 2px; background: var(--lx-line); }
progress::-webkit-progress-value { border-radius: 2px; background: var(--lx-indigo); }
progress::-moz-progress-bar { border-radius: 2px; background: var(--lx-indigo); }
.primary-card__progress, .practice-progress__bar { width: 100%; height: 4px; }
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home-summary-card { display: flex; min-width: 0; flex-direction: column; padding: 22px; gap: 8px; }
.home-summary-card__title { display: flex; align-items: center; gap: 9px; color: var(--lx-text); font-size: 17px; font-weight: 500; }
.home-summary-card__title .lx-icon { color: var(--lx-indigo); }
.home-summary-card p, .progress-section__line, .progress-section__empty, .saved-items-card__empty, .saved-items-card__count { color: var(--lx-text-secondary); font-size: 14px; }
.home-summary-card a, .saved-items-card__link, .progress-section__reset-link { font-size: 13px; }
.locked-modes, .vocabulary-sets-card, .saved-items-card, .progress-section { display: flex; min-width: 0; flex-direction: column; gap: 12px; }
.locked-modes ul, .vocabulary-set-list, .saved-list, .saved-detail__attempts ul { display: flex; min-width: 0; flex-direction: column; margin: 0; padding: 0; gap: 8px; list-style: none; }
.locked-modes { margin-top: 1.375rem; }
.mode-card { display: grid; grid-template-columns: 28px 1fr; padding: 18px 20px; border: 1px solid var(--lx-line); border-radius: var(--lx-radius); background: var(--lx-surface); gap: 2px 12px; }
.mode-card > .lx-icon { grid-row: 1 / span 3; margin-top: 2px; color: var(--lx-indigo); }
.mode-card p { color: var(--lx-text); font-size: 15px; font-weight: 500; }
.mode-card small { color: var(--lx-text-muted); font-size: 13px; line-height: 1.55; }
.mode-card form { grid-column: 1 / -1; margin-top: 10px; }
.mode-card.locked { border-style: dashed; border-color: var(--lx-border-input); }
.mode-card.locked > .lx-icon, .mode-card.locked p, .mode-card.locked small { color: var(--lx-placeholder); }
.vocabulary-sets-card, .saved-items-card, .progress-section, .notice-card { padding: 22px; }
.vocabulary-sets-card p, .notice-card p { color: var(--lx-text-secondary); font-size: 14px; }
.progress-section__line strong { color: var(--lx-text); font-family: var(--lx-font-mono); font-size: 12px; font-weight: 500; }
.confidence-explanation { color: var(--lx-text-muted); font-size: 13px; }

.practice-progress { display: grid; min-width: 0; flex: 1; grid-template-columns: auto 1fr; align-items: center; gap: 14px; }
.practice-progress__count { color: var(--lx-text-secondary); font-family: var(--lx-font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.overflow-menu { position: relative; flex: none; }
.overflow-menu summary { display: inline-flex; min-height: var(--lx-tap-target); align-items: center; gap: 7px; padding: 8px; border-radius: var(--lx-radius); color: var(--lx-text-secondary); cursor: pointer; font-size: 13px; list-style: none; }
.overflow-menu summary::-webkit-details-marker { display: none; }
.overflow-menu summary .lx-icon { font-size: 18px; }
.overflow-menu ul { position: absolute; z-index: 10; top: calc(100% + 4px); right: 0; width: max-content; min-width: 240px; max-width: min(320px, calc(100vw - 40px)); margin: 0; padding: 8px; border: 1px solid var(--lx-line-strong); border-radius: var(--lx-radius-lg); background: var(--lx-surface); box-shadow: var(--lx-shadow-dialog); list-style: none; }
.overflow-menu a { display: flex; padding: 10px 12px; border-radius: var(--lx-radius); color: var(--lx-text); font-size: 14px; text-decoration: none; }
.overflow-menu a:hover, .overflow-menu a:focus-visible { background: var(--lx-surface-alt); color: var(--lx-indigo); }
.question-heading { display: flex; flex-direction: column; gap: 8px; }
.question-word { color: var(--lx-text); font-size: 44px; font-weight: 500; letter-spacing: -.035em; line-height: 1; }
.question-pos, .part-of-speech, .saved-list__pos { color: var(--lx-indigo); font-family: var(--lx-font-mono); font-size: 11px; font-weight: 400; letter-spacing: .1em; line-height: 1.4; overflow-wrap: anywhere; text-transform: uppercase; }
.options-form { display: flex; min-width: 0; flex-direction: column; }
fieldset { display: flex; min-width: 0; flex-direction: column; margin: 0; padding: 0; border: 0; gap: 12px; }
legend, .question-instruction { width: 100%; margin: 0 0 4px; padding: 0; color: var(--lx-text-secondary); font-size: 15px; }
.option-choice { display: grid; width: 100%; max-width: 100%; min-width: 0; min-height: 58px; grid-template-columns: 18px 1fr; align-items: start; padding: 17px 20px; border: 1px solid var(--lx-line-strong); border-radius: var(--lx-radius); background: var(--lx-surface); color: var(--lx-text-body); cursor: pointer; gap: 12px; text-align: left; transition: border-color 150ms ease-out, opacity 150ms ease-out; }
.option-choice:hover, .option-choice:focus-visible { border-color: var(--lx-indigo); }
.option-letter { color: var(--lx-text-muted); font-family: var(--lx-font-mono); font-size: 12px; line-height: 1.55; }
.option-text { min-width: 0; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.question-meta-actions, .answer-meta-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--lx-line); gap: 12px 20px; }
.visual-hint { min-height: 48px; }
.visual-hint--unrevealed { width: 100%; }
.visual-hint--revealed { display: inline-flex; width: fit-content; max-width: 100%; min-height: 0; align-self: flex-start; align-items: flex-start; justify-content: flex-start; overflow: hidden; border: 1px solid var(--lx-line-strong); border-radius: var(--lx-radius); background: var(--lx-surface); }
.visual-hint__image { display: block; width: auto; max-width: 100%; height: auto; max-height: min(60vh, 360px); margin: 0; object-fit: contain; }

.feedback-heading { display: flex; align-items: center; gap: 9px; font-family: var(--lx-font-mono); font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
.feedback-heading:focus { outline: none; }
.feedback-heading .lx-icon { font-size: 22px; }
.feedback-heading.is-correct { color: var(--lx-sage); }
.feedback-heading.is-incorrect { color: var(--lx-rust); }
.word-identity { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.word-identity .headword { color: var(--lx-text); font-size: 36px; font-weight: 500; letter-spacing: -.035em; line-height: 1.05; }
.options-result { display: flex; min-width: 0; flex-direction: column; gap: 10px; }
.option-result { min-width: 0; padding: 17px 20px; border: 1px solid var(--lx-line-strong); border-radius: var(--lx-radius); background: var(--lx-surface); }
.option-result .option-text { color: var(--lx-text-secondary); overflow-wrap: anywhere; }
.option-result .option-marker { margin-top: 8px; font-family: var(--lx-font-mono); font-size: 10px; letter-spacing: .03em; text-transform: uppercase; }
.option-result.is-correct { border-color: var(--lx-sage-border); background: var(--lx-sage-tint); }
.option-result.is-correct .option-text { color: var(--lx-text); }
.option-result.is-correct .option-marker { color: var(--lx-sage); }
.option-result.is-incorrect { border-color: var(--lx-rust-border); background: var(--lx-rust-tint); }
.option-result.is-incorrect .option-text { color: var(--lx-text); }
.option-result.is-incorrect .option-marker { color: var(--lx-rust); }
.example-block { display: flex; flex-direction: column; gap: 10px; }
.example-sentence { color: var(--lx-text-body); font-size: 17px; font-style: italic; line-height: 1.6; overflow-wrap: anywhere; }
.example-sentence q { quotes: "\201C" "\201D"; }
.answer-audio { display: flex; flex-direction: column; gap: 12px; }
.answer-audio__items { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.answer-audio__item { min-width: 0; }
.answer-audio__label { display: flex; align-items: center; margin-bottom: 8px; gap: 9px; color: var(--lx-text); font-size: 14px; }
.answer-audio__label .lx-icon { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; background: var(--lx-indigo); color: var(--lx-surface); font-size: 16px; }
.answer-audio__player { display: block; width: 100%; max-width: 100%; min-width: 0; height: 42px; }
.answer-audio__error { color: var(--lx-rust); font-size: 13px; }
.czech-help { padding-block: 4px; }
.czech-help summary { display: flex; width: fit-content; min-height: var(--lx-tap-target); align-items: center; color: var(--lx-indigo); cursor: pointer; font-size: 14px; }
.czech-help p { margin-top: 8px; padding: 14px 16px; border-left: 2px solid var(--lx-indigo-light); color: var(--lx-text-body); font-size: 16px; }
.answer-actions { display: flex; flex-direction: column; gap: 10px; }

.result-heading { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.result-score { color: var(--lx-text); font-size: 68px; font-weight: 500; letter-spacing: -.04em; line-height: 1; text-align: center; }
.result-score__total { color: var(--lx-text-secondary); font-size: 17px; font-weight: 400; letter-spacing: 0; }
.result-divider { width: 100%; height: 1px; margin: 0; border: 0; background: var(--lx-line); }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.result-stat { display: flex; min-width: 0; flex-direction: column; padding: 18px; border: 1px solid var(--lx-line); border-radius: var(--lx-radius); background: var(--lx-surface); gap: 6px; }
.result-stat strong { color: var(--lx-indigo); font-family: var(--lx-font-mono); font-size: 20px; font-weight: 500; }
.result-stat--review strong { color: var(--lx-clay); }
.result-stat--confidence strong { color: var(--lx-sage); }
.result-stat span, .result-line { color: var(--lx-text-secondary); font-size: 13px; }

.empty-state { display: flex; flex-direction: column; align-items: center; padding: 32px 26px; border-style: dashed; border-color: var(--lx-border-input); gap: 10px; text-align: center; }
.empty-state > .lx-icon { color: var(--lx-placeholder); font-size: 30px; }
.empty-state h2 { font-size: 17px; font-weight: 500; }
.empty-state p { max-width: 480px; color: var(--lx-text-secondary); font-size: 14px; }
.back-link { margin-bottom: -12px; font-size: 13px; }
.vocabulary-set-list__link { display: grid; min-width: 0; grid-template-columns: 34px 1fr auto; align-items: start; padding: 22px; border: 1px solid var(--lx-line-strong); border-radius: var(--lx-radius); background: var(--lx-surface); color: var(--lx-text); gap: 6px 12px; overflow-wrap: anywhere; text-decoration: none; transition: border-color 150ms ease-out; }
.vocabulary-set-list__link:hover, .vocabulary-set-list__link:focus-visible { border-color: var(--lx-indigo); }
.vocabulary-set-list__icon { grid-row: 1 / span 4; color: var(--lx-indigo); }
.vocabulary-set-list__level, .vocabulary-set-detail__level { color: var(--lx-ochre); font-family: var(--lx-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.vocabulary-set-list__link small { grid-column: 2; color: var(--lx-text-secondary); font-size: 13px; }
.vocabulary-set-list__action { display: inline-flex; grid-column: 3; grid-row: 1 / span 4; align-items: center; align-self: center; gap: 7px; color: var(--lx-indigo); font-size: 13px; }
.vocabulary-collection { margin-block: 36px; }
.vocabulary-collection > h2 { margin-bottom: 6px; }
.vocabulary-collection > p { margin-top: 0; color: var(--lx-text-secondary); }
.active-session-actions { display: flex; min-width: 0; flex-wrap: wrap; gap: 10px; }
.vocabulary-set-detail__practice-note { color: var(--lx-text-muted); font-size: 13px; }

.saved-table { overflow: hidden; border: 1px solid var(--lx-line-strong); border-radius: var(--lx-radius); background: var(--lx-surface); }
.saved-list { gap: 0; }
.saved-list__header, .saved-list__link { display: grid; min-width: 0; grid-template-columns: 1.6fr 3fr 1fr 1.1fr; align-items: center; gap: 16px; }
.saved-list__header { padding: 11px 16px; background: var(--lx-surface-alt); color: var(--lx-text-muted); font-family: var(--lx-font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.saved-list__item { min-width: 0; border-top: 1px solid var(--lx-line); }
.saved-list__link { padding: 15px 16px; color: inherit; text-decoration: none; }
.saved-list__link:hover, .saved-list__link:focus-visible { background: var(--lx-surface-alt); }
.saved-list__identity { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.saved-list__headword { color: var(--lx-text); font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.saved-list__definition, .saved-list__state, .saved-list__due, .saved-list__unavailable { min-width: 0; color: var(--lx-text-secondary); font-size: 13px; overflow-wrap: anywhere; }
.saved-list__state { color: var(--lx-clay); font-family: var(--lx-font-mono); font-size: 11px; }
.saved-list__due, .saved-list__unavailable { font-family: var(--lx-font-mono); font-size: 11px; }
.saved-detail__definition { color: var(--lx-text); font-size: 17px; line-height: 1.55; overflow-wrap: anywhere; }
.saved-detail__state { display: grid; grid-template-columns: repeat(3, 1fr); padding: 18px 20px; gap: 16px; }
.saved-detail__state p { color: var(--lx-text-secondary); font-family: var(--lx-font-mono); font-size: 11px; }
.saved-detail__attempts { display: flex; flex-direction: column; gap: 12px; }
.saved-detail__attempt { display: grid; min-width: 0; grid-template-columns: auto auto 1fr; padding: 14px 16px; border: 1px solid var(--lx-line); border-radius: var(--lx-radius); background: var(--lx-surface); gap: 12px; }
.saved-detail__attempt-date { color: var(--lx-text-muted); font-family: var(--lx-font-mono); font-size: 11px; }
.saved-detail__attempt-result { font-family: var(--lx-font-mono); font-size: 11px; }
.saved-detail__attempt.is-correct .saved-detail__attempt-result { color: var(--lx-sage); }
.saved-detail__attempt.is-incorrect .saved-detail__attempt-result { color: var(--lx-rust); }
.saved-detail__attempt-definition { color: var(--lx-text); font-size: 13px; overflow-wrap: anywhere; }

.form-stack { display: flex; flex-direction: column; gap: 18px; }
.form-field { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.form-field input:not([type="checkbox"]):not([type="radio"]), .form-field select, .form-field textarea { display: block; width: 100%; min-width: 0; min-height: 48px; padding: 11px 14px; border: 1px solid var(--lx-border-input); border-radius: var(--lx-radius); background: var(--lx-surface); color: var(--lx-text); font-size: 15px; }
.form-field textarea { min-height: 118px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--lx-indigo); box-shadow: 0 0 0 3px var(--lx-focus); outline: none; }
.form-field:has(.form-field__error) > label { color: var(--lx-rust); }
.form-field:has(.form-field__error) input, .form-field:has(.form-field__error) select, .form-field:has(.form-field__error) textarea { border-color: var(--lx-rust); }
.form-field__error { display: flex; align-items: center; gap: 7px; color: var(--lx-rust); font-size: 13px; }
.form-field > div { display: flex; flex-direction: column; gap: 8px; }
.form-field > div > div label { display: flex; min-height: var(--lx-tap-target); align-items: center; gap: 9px; color: var(--lx-text-body); cursor: pointer; font-size: 14px; }
.form-field input[type="radio"], .form-field input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--lx-indigo); }
.character-count { align-self: flex-end; color: var(--lx-text-muted); font-family: var(--lx-font-mono); font-size: 11px; }
.report-context { display: flex; flex-direction: column; padding: 18px 20px; gap: 6px; }
.page-report-question .content { max-width: var(--lx-practice-max); }
.report-question-panel { display: flex; min-width: 0; flex-direction: column; padding: 34px; border: 1px solid var(--lx-line-strong); border-radius: var(--lx-radius-lg); background: rgb(255 255 255 / 28%); gap: 26px; }
.report-question-heading { display: flex; flex-direction: column; gap: 8px; }
.report-question-heading p { color: var(--lx-text-secondary); font-size: 15px; }
.report-question-panel .report-context { padding: 18px 20px; }
.report-context__identity { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.report-context__identity strong { color: var(--lx-text); font-size: 23px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
.report-question-form { display: flex; min-width: 0; flex-direction: column; gap: 20px; }
.report-question-categories { gap: 10px; }
.report-question-categories .section-heading { margin-bottom: 2px; }
.report-question-categories > div { display: flex; flex-direction: column; gap: 9px; }
.report-question-categories > div > div label { display: flex; min-height: 52px; align-items: center; padding: 12px 16px; border: 1px solid var(--lx-line-strong); border-radius: var(--lx-radius); background: var(--lx-surface); color: var(--lx-text-body); cursor: pointer; font-size: 15px; gap: 12px; transition: border-color 150ms ease-out; }
.report-question-categories > div > div label:hover, .report-question-categories > div > div label:has(input:checked) { border-color: var(--lx-indigo); }
.report-question-categories input[type="radio"] { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--lx-indigo); }
.report-question-details { border-top: 1px solid var(--lx-line); padding-top: 16px; }
.report-question-details summary { width: fit-content; color: var(--lx-indigo); cursor: pointer; font-size: 13px; }
.report-question-details[open] summary { margin-bottom: 14px; }
.report-question-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.report-question-actions > a { color: var(--lx-text-secondary); font-size: 14px; }

.confirm-card { display: flex; width: 100%; max-width: 420px; flex-direction: column; align-self: center; padding: 28px; border: 1px solid var(--lx-line-strong); border-radius: var(--lx-radius-lg); background: var(--lx-surface); box-shadow: var(--lx-shadow-dialog); gap: 18px; }
.confirm-card__heading { display: flex; align-items: center; gap: 10px; }
.confirm-card__heading .lx-icon { color: var(--lx-clay); font-size: 26px; }
.confirm-card--danger .confirm-card__heading .lx-icon, .confirm-card__warning { color: var(--lx-rust); }
.confirm-card__copy { display: flex; flex-direction: column; gap: 8px; }
.confirm-card__copy p, .confirm-card__warning { font-size: 14px; line-height: 1.6; }
.confirm-card__actions { display: flex; flex-direction: column; gap: 10px; }

.about-hero { display: flex; flex-direction: column; gap: 14px; }
.about-hero__claim { color: var(--lx-text); font-size: 40px; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.about-card { display: flex; flex-direction: column; padding: 20px; gap: 8px; }
.about-card .lx-icon { color: var(--lx-indigo); font-size: 24px; }
.about-card h2 { font-size: 17px; }
.about-card p { color: var(--lx-text-secondary); font-size: 13px; }

@media (max-width: 719px) {
  .shell-header__inner, .practice-header__inner, .shell-footer__inner { padding-inline: 20px; }
  .shell-header__inner { min-height: 64px; flex-wrap: wrap; padding-block: 14px; gap: 12px; }
  .account-nav { width: 100%; justify-content: flex-start; gap: 12px 16px; }
  .account-nav a { font-size: 12px; }
  .content { padding: 34px 20px 48px; gap: 22px; }
  .page-practice .content { padding-top: 32px; }
  h1 { font-size: 27px; }
  .question-word { font-size: 38px; }
  .report-question-panel { padding: 24px 20px; }
  .word-identity .headword { font-size: 30px; }
  .btn { width: 100%; }
  .home-grid, .answer-audio__items, .result-stats, .about-grid, .saved-detail__state { grid-template-columns: 1fr; }
  .primary-card, .confirm-card { padding: 22px 20px; }
  .overflow-menu summary .overflow-menu__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .option-choice, .option-result { padding: 16px; }
  .saved-list__header { display: none; }
  .saved-list__link { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .saved-list__identity, .saved-list__definition { grid-column: 1 / -1; }
  .saved-list__state, .saved-list__due, .saved-list__unavailable { grid-row: 3; }
  .saved-detail__attempt { grid-template-columns: 1fr auto; }
  .saved-detail__attempt-definition { grid-column: 1 / -1; }
  .vocabulary-set-list__link { grid-template-columns: 28px 1fr; }
  .vocabulary-set-list__action { grid-column: 2; grid-row: auto; justify-self: start; }
  .about-hero__claim { font-size: 34px; }
}

@media (max-width: 420px) {
  .brand-wordmark { font-size: 18px; }
  .brand-mark, .brand-mark svg { width: 23px; height: 23px; }
  .account-nav .lx-icon { display: none; }
  .result-score { font-size: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; }
}