.translation-actions { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.translation-actions .capture-button { flex: 1; min-width: 0; }
.study-reminder { color: #211b0e; background: #efca75; border-color: #ffe0a0; min-width: 74px; animation: study-glow 2.4s ease-in-out infinite; }
@keyframes study-glow { 50% { box-shadow: 0 0 0 3px #efca7540,3px 3px 0 var(--shadow); } }
@media(prefers-reduced-motion:reduce) { .study-reminder { animation: none; } }
@container(max-width:1220px) { .translation-actions { grid-area: 1 / 1 / 2 / -1; justify-self: center; width: min(100%,440px); } .translation-actions .capture-button { width: auto; } }
@container(max-width:800px) { .translation-actions { order: -1; flex: 0 0 100%; margin-bottom: 4px; } .translation-actions .capture-button { order: 0; flex: 1; margin: 0; } }
[data-mobile="true"] .translation-actions { width: 100%; margin: 0; }
[data-mobile="true"] .study-reminder { font-size: 22px; padding-inline: 10px; min-width: 65px; }
#vocabulary-dialog *{ box-sizing: border-box; }
#vocabulary-dialog .screen-tabs{ display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-bottom: 22px; }
#vocabulary-dialog .screen-tabs button{ font-size: 20px; min-height: 46px; min-width: 0; padding-inline: 6px; gap: 4px; flex-wrap: wrap; }
#vocabulary-dialog .screen-tabs [aria-pressed="true"]{ color: var(--accent); border-color: var(--accent); }
#vocabulary-dialog #collection-badge,#vocabulary-dialog #flashcards-badge,#vocabulary-dialog #dictionary-badge{ font-size: 14px; color: var(--muted); }
#vocabulary-dialog .exercise-settings{ display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
#vocabulary-dialog .difficulty,#vocabulary-dialog .collection-filters{ display: flex; gap: 14px; }
#vocabulary-dialog .level{ padding: 6px 0; min-height: 40px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-size: 20px; }
#vocabulary-dialog .level.active{ color: var(--ink); border-color: var(--accent); }
#vocabulary-dialog .direction{ font-size: 18px; min-height: 40px; padding: 5px 0; background: transparent; color: var(--accent); border: 0; }
#vocabulary-dialog .question-progress{ display: flex; align-items: center; gap: 12px; margin: 18px 0 16px; color: var(--muted); font-size: 18px; }
#vocabulary-dialog .progress-track{ flex: 1; height: 4px; background: var(--raised); }
#vocabulary-dialog .progress-track span{ display: block; height: 100%; background: var(--accent); }
#vocabulary-dialog #question-instruction{ font-size: 24px; line-height: 1.35; margin: 0 0 16px; }
#vocabulary-dialog .context-card{ padding: 12px 16px 10px; background: var(--read-bg); border: 2px solid var(--edge); }
#vocabulary-dialog .context-toolbar{ display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#vocabulary-dialog .context-tools{ display: flex; align-items: center; flex: none; gap: 4px; }
#vocabulary-dialog .sentence-audio{ display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid transparent; padding: 10px; background: transparent; color: var(--accent); }
#vocabulary-dialog .sentence-audio svg{ width: 20px; height: 20px; fill: currentColor; shape-rendering: crispEdges; }
#vocabulary-dialog .sentence-audio:hover{ border-color: var(--edge); }
#vocabulary-dialog .context-label{ font-size: 17px; color: var(--muted); }
#vocabulary-dialog .favorite-button{ display: grid; place-items: center; flex: none; width: 44px; height: 44px; background: transparent; border: 1px solid transparent; padding: 8px; color: var(--muted); }
#vocabulary-dialog .favorite-button svg{ width: 22px; height: 22px; fill: transparent; stroke: currentColor; stroke-width: 1.5; shape-rendering: crispEdges; }
#vocabulary-dialog .favorite-button[aria-pressed="true"]{ color: #efca75; }
#vocabulary-dialog .favorite-button[aria-pressed="true"] svg{ fill: currentColor; stroke: none; }
#vocabulary-dialog .favorite-button:hover{ border-color: var(--edge); }
#vocabulary-dialog .context-sentence{ margin: 4px 0 16px; font-family: "Yu Gothic",Meiryo,system-ui,sans-serif; font-size: 25px; line-height: 1.8; overflow-wrap: anywhere; }
#vocabulary-dialog .context-sentence[lang="fr"]{ font-size: 23px; line-height: 1.6; }
#vocabulary-dialog .target-word,#vocabulary-dialog .gold{ color: #efca75; font-weight: 700; background: none; }
#vocabulary-dialog .context-romaji{ font-family: system-ui,sans-serif; font-style: italic; color: var(--muted); font-size: 16px; line-height: 1.6; margin: -6px 0 14px; }
#vocabulary-dialog .context-actions{ display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--edge); }
#vocabulary-dialog .small-action{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 6px 0; border: 0; background: none; color: var(--accent); font-size: 18px; }
#vocabulary-dialog .small-action svg{ width: 16px; height: 16px; fill: currentColor; shape-rendering: crispEdges; }
#vocabulary-dialog .small-action[aria-expanded="true"]{ color: #efca75; }
#vocabulary-dialog .choice-list{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
#vocabulary-dialog .choice-list button{ min-height: 65px; padding: 12px; font-family: system-ui,sans-serif; font-size: 20px; white-space: normal; line-height: 1.4; }
#vocabulary-dialog .choice-list button[lang="ja"]{ font-family: "Yu Gothic",Meiryo,system-ui,sans-serif; }
#vocabulary-dialog .choice-list button{ flex-direction: column; gap: 5px; }
#vocabulary-dialog .choice-romaji{ display: block; font-family: system-ui,sans-serif; font-size: 15px; font-style: italic; font-weight: 400; color: var(--muted); }
#vocabulary-dialog .check-option{ display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 18px; line-height: 1.3; cursor: pointer; }
#vocabulary-dialog .check-option input{ flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
#vocabulary-dialog #choice-romaji-option{ margin-top: 10px; }
#vocabulary-dialog #choice-romaji-option:not([hidden]) + .choice-list{ margin-top: 6px; }
#vocabulary-dialog .keyboard-note{ color: var(--muted); font-size: 16px; line-height: 1.4; margin: 0 0 10px; }
#vocabulary-dialog .kanji-candidates{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
#vocabulary-dialog .kanji-candidates button{ min-height: 44px; min-width: 52px; border: 1px solid var(--accent); background: var(--raised); color: var(--accent); padding: 6px 12px; font-family: system-ui,sans-serif; font-size: 22px; touch-action: manipulation; }
#vocabulary-dialog .kanji-candidates button:active{ background: var(--accent); color: var(--accent-ink); }
#vocabulary-dialog .choice-list button:disabled{ opacity: 1; color: var(--muted); }
#vocabulary-dialog .choice-list .correct:disabled{ border-color: #b6d894; color: #d4efb7; background: #25342a; }
#vocabulary-dialog .choice-list .incorrect:disabled{ border-color: var(--error); color: var(--error); }
#vocabulary-dialog #written-answer{ margin-top: 18px; }
#vocabulary-dialog #answer-label{ display: block; font-size: 20px; margin-bottom: 10px; }
#vocabulary-dialog #answer-input{ width: 100%; min-height: 54px; padding: 10px 12px; border: 2px solid var(--edge-light); border-radius: 0; background: var(--bg); color: var(--ink); font-family: system-ui,sans-serif; font-size: 22px; caret-color: var(--accent); -webkit-user-select: text; user-select: text; }
#vocabulary-dialog #answer-input:focus{ border-color: var(--accent); outline: 0; }
#vocabulary-dialog #answer-input{ direction: ltr; text-align: left; }
#vocabulary-dialog #answer-input.correct{ border-color: #b6d894; }
#vocabulary-dialog #answer-input.incorrect{ border-color: var(--error); }
#vocabulary-dialog .answer-options{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
#vocabulary-dialog #answer-hint{ font-size: 16px; color: var(--muted); line-height: 1.4; margin: 6px 0; }
#vocabulary-dialog #keyboard-toggle{ white-space: nowrap; font-size: 17px; }
#vocabulary-dialog .submit-answer{ width: 100%; margin-top: 14px; min-height: 46px; }
#vocabulary-dialog .answer-feedback{ margin-top: 20px; padding: 16px 0 0; border-top: 1px solid var(--edge); }
#vocabulary-dialog #answer-verdict{ font-size: 26px; color: #d4efb7; }
#vocabulary-dialog .answer-feedback.missed #answer-verdict{ color: var(--error); }
#vocabulary-dialog .expected-answer{ color: #efca75; font-family: system-ui,sans-serif; font-size: 22px; margin: 10px 0; line-height: 1.5; }
#vocabulary-dialog .reading-copy{ font-family: system-ui,sans-serif; font-size: 17px; line-height: 1.6; margin: 10px 0; }
#vocabulary-dialog .explanation{ color: var(--muted); font-size: 16px; }
#vocabulary-dialog #next-question{ width: 100%; min-height: 46px; margin-top: 12px; }
#vocabulary-dialog .create-flashcard{ width: 100%; min-height: 46px; margin-top: 12px; color: #efca75; border-color: #95825b; font-size: 22px; }
#vocabulary-dialog .create-flashcard.is-saved:disabled{ opacity: 1; color: var(--muted); border-color: var(--edge); }
#vocabulary-dialog .flashcards-empty{ text-align: center; padding: 30px 6px; }
#vocabulary-dialog .flashcards-empty h2{ color: var(--accent); font-size: 26px; }
#vocabulary-dialog .flashcards-empty p{ color: var(--muted); margin: 18px 0 24px; }
#vocabulary-dialog .flashcard-topline{ display: flex; justify-content: space-between; gap: 12px; font-size: 18px; color: var(--muted); margin: 24px 0 14px; }
#vocabulary-dialog .flashcard-face{ padding: 24px 18px; min-height: 260px; background: var(--read-bg); border: 2px solid var(--edge-light); text-align: center; }
#vocabulary-dialog #flashcard-word{ font-family: 'Yu Gothic',Meiryo,system-ui,sans-serif; font-size: 34px; color: #efca75; line-height: 1.5; margin: 4px 0 12px; overflow-wrap: anywhere; }
#vocabulary-dialog #flashcard-romaji{ margin: 0 0 24px; }
#vocabulary-dialog #flashcard-context{ text-align: left; margin-top: 22px; font-size: 20px; }
#vocabulary-dialog #flashcard-note{ text-align: left; border-top: 1px solid var(--edge); padding-top: 12px; }
#vocabulary-dialog #flip-flashcard{ width: 100%; min-height: 46px; margin-top: 16px; }
#vocabulary-dialog .flashcard-navigation{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
#vocabulary-dialog .flashcard-navigation button{ min-height: 44px; font-size: 20px; }
@media(max-width:600px){#vocabulary-dialog .screen-tabs .pixel-button{ font-size: 18px; }
 }
#vocabulary-dialog #quiz-finished{ text-align: center; padding: 26px 0; }
#vocabulary-dialog #final-score{ font-size: 64px; color: var(--accent); margin: 16px 0; }
#vocabulary-dialog #restart-quiz{ margin-top: 16px; }
#vocabulary-dialog #kana-keyboard{ background: var(--bg); border: 1px solid var(--edge); padding: 10px; margin-top: 10px; }
#vocabulary-dialog .keyboard-tabs{ display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
#vocabulary-dialog .keyboard-tabs > div{ display: flex; gap: 5px; }
#vocabulary-dialog .key-tab{ min-width: 44px; min-height: 40px; padding: 5px 8px; border: 1px solid var(--edge); background: var(--surface); color: var(--muted); font-family: system-ui,sans-serif; font-size: 17px; }
#vocabulary-dialog .key-tab.active{ border-color: var(--accent); color: var(--accent); }
#vocabulary-dialog .kana-grid{ display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; }
#vocabulary-dialog .kana-grid button{ min-width: 0; min-height: 44px; padding: 4px; border: 1px solid var(--edge-light); background: var(--raised); color: var(--ink); font-family: system-ui,sans-serif; font-size: 22px; touch-action: manipulation; }
#vocabulary-dialog .kana-grid button:active{ background: var(--accent); color: var(--accent-ink); }
#vocabulary-dialog .key-modifiers{ margin-top: 10px; }
#vocabulary-dialog .key-modifiers{ grid-template-columns: 1fr 1fr 1.6fr 1fr 1fr; }
#vocabulary-dialog .key-modifiers button{ background: var(--surface); }
#vocabulary-dialog .key-modifiers [data-modifier="small"]{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
#vocabulary-dialog .modifier-name{ font-family: 'Fusion Pixel'; font-size: 16px; line-height: 1.2; }
#vocabulary-dialog .keyboard-help{ margin-top: 12px; color: var(--muted); font-size: 17px; line-height: 1.5; }
#vocabulary-dialog .keyboard-help summary{ color: var(--accent); cursor: pointer; }
#vocabulary-dialog .keyboard-help p{ margin: 10px 0 0; }
#vocabulary-dialog .keyboard-help [lang="ja"]{ font-family: system-ui,sans-serif; }
#vocabulary-dialog .collection-summary{ display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 20px; }
#vocabulary-dialog .collection-summary p{ margin: 0; }
#vocabulary-dialog .collection-summary strong{ color: var(--accent); }
#vocabulary-dialog .collection-note{ font-size: 18px; line-height: 1.5; color: var(--muted); margin: 12px 0 18px; }
#vocabulary-dialog #counter-dots{ display: flex; gap: 6px; }
#vocabulary-dialog #counter-dots span{ width: 12px; height: 12px; border: 1px solid var(--edge); background: var(--raised); }
#vocabulary-dialog #counter-dots span.filled{ background: #efca75; border-color: #efca75; }
#vocabulary-dialog .gold-button{ color: #211b0e; background: #efca75; border-color: #ffe0a0; animation: reminder 2s ease-in-out infinite; }
@keyframes reminder{ 50% { box-shadow: 0 0 0 3px #efca7530; } }
#vocabulary-dialog .translation-list{ list-style: none; padding: 0; margin: 12px 0 0; }
#vocabulary-dialog .translation-list li{ display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 4px 10px; padding: 14px 0; border-top: 1px solid var(--edge); }
#vocabulary-dialog .translation-list .favorite-button{ grid-column: 2; grid-row: 1 / 4; align-self: center; }
#vocabulary-dialog .translation-list p{ grid-column: 1; margin: 0; font-family: system-ui,sans-serif; font-size: 17px; line-height: 1.55; overflow-wrap: anywhere; }
#vocabulary-dialog .translation-list .saved-meta{ color: var(--muted); font-family: 'Fusion Pixel'; font-size: 16px; }
#vocabulary-dialog .translation-list .translation-french{ color: var(--muted); }
#vocabulary-dialog .local-status{ font-size: 18px; line-height: 1.4; color: #efca75; border-top: 1px solid var(--edge); padding-top: 12px; margin: 18px 0 0; }
@media(max-width:600px){#vocabulary-dialog .screen-tabs{ margin-bottom: 16px; }
#vocabulary-dialog .screen-tabs button{ font-size: 20px; }
#vocabulary-dialog .exercise-settings{ gap: 4px; }
#vocabulary-dialog .direction{ font-size: 17px; }
#vocabulary-dialog .difficulty{ gap: 12px; }
#vocabulary-dialog .level{ font-size: 19px; }
#vocabulary-dialog .context-card{ padding: 8px 12px; }
#vocabulary-dialog .context-sentence{ font-size: 23px; line-height: 1.75; }
#vocabulary-dialog .choice-list{ gap: 10px; }
#vocabulary-dialog .answer-options{ align-items: flex-start; }
 }
@media(prefers-reduced-motion:reduce){#vocabulary-dialog .gold-button{ animation: none; }
 }
#vocabulary-dialog .library-tabs,#vocabulary-dialog .kana-groups{ display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
#vocabulary-dialog .library-heading{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#vocabulary-dialog .library-heading h2{ font-size: 24px; color: var(--accent); }
#vocabulary-dialog .library-heading > span{ color: var(--muted); font-size: 18px; white-space: nowrap; }
#vocabulary-dialog .library-empty{ text-align: center; border: 1px solid var(--edge); background: var(--read-bg); padding: 24px 16px; }
#vocabulary-dialog .library-empty > span{ display: block; font-family: system-ui,sans-serif; font-size: 60px; color: var(--edge-light); margin-bottom: 12px; }
#vocabulary-dialog .library-empty p{ margin: 8px 0; font-size: 22px; line-height: 1.4; }
#vocabulary-dialog .library-empty .reading-copy{ font-size: 16px; color: var(--muted); }
#vocabulary-dialog .dictionary-demo{ margin: 20px 0 0; }
#vocabulary-dialog .dictionary-demo .keyboard-note{ margin-top: 14px; }
#vocabulary-dialog .dictionary-demo button{ flex: 1; font-size: 20px; white-space: normal; }
#vocabulary-dialog .kanji-word-list{ list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
#vocabulary-dialog .kanji-word-list > li{ border: 1px solid var(--edge); background: var(--read-bg); padding: 14px 16px; }
#vocabulary-dialog .kanji-word-heading{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#vocabulary-dialog .kanji-word-heading h3{ font-family: system-ui,sans-serif; font-size: 32px; color: var(--accent); line-height: 1.4; margin: 0; }
#vocabulary-dialog .kanji-reading{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; font-family: system-ui,sans-serif; font-size: 19px; line-height: 1.5; margin: 2px 0 8px; }
#vocabulary-dialog .kanji-reading > span{ font-size: 15px; font-style: italic; color: var(--muted); }
#vocabulary-dialog .kanji-context{ border-top: 1px solid var(--edge); padding-top: 10px; }
#vocabulary-dialog .kanji-context summary{ color: var(--muted); cursor: pointer; font-size: 18px; }
#vocabulary-dialog .kana-study-actions{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 16px; }
#vocabulary-dialog .kana-study-actions button{ font-size: 19px; min-height: 44px; }
#vocabulary-dialog .kana-reference-grid{ display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; margin-bottom: 16px; }
#vocabulary-dialog .kana-reference-key{ min-width: 0; min-height: 68px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px solid var(--edge); background: var(--raised); color: var(--ink); touch-action: manipulation; }
#vocabulary-dialog .kana-reference-key > [lang="ja"]{ font-family: system-ui,sans-serif; font-size: 27px; }
#vocabulary-dialog .kana-reference-reading{ font-family: system-ui,sans-serif; font-size: 14px; color: var(--muted); }
#vocabulary-dialog .kana-reference-key:hover,#vocabulary-dialog .kana-reference-key:focus-visible{ border-color: var(--accent); }
#vocabulary-dialog .kana-reference-key:active{ background: var(--accent-ink); }
@media(max-width:600px){#vocabulary-dialog .screen-tabs{ grid-template-columns: repeat(2,minmax(0,1fr)); }
#vocabulary-dialog .library-tabs,#vocabulary-dialog .kana-groups{ gap: 14px; }
#vocabulary-dialog .library-tabs .level,#vocabulary-dialog .kana-groups .level{ font-size: 19px; }
 }
#vocabulary-dialog .dictionary-create-card{ min-height: 44px; font-size: 19px; }
#vocabulary-dialog #flashcard-reading{ font-family: system-ui,sans-serif; color: var(--ink); font-size: 21px; margin: 0 0 12px; }
#vocabulary-dialog .catalog-heading{ font-size: 28px; color: var(--ink); line-height: 1.25; margin: 12px 0 22px; }
#vocabulary-dialog .exercise-categories{ display: grid; gap: 16px; }
#vocabulary-dialog .exercise-category{ display: grid; grid-template-columns: 58px minmax(0,1fr) 20px; align-items: center; gap: 16px; width: 100%; min-height: 116px; padding: 18px 16px; text-align: left; border: 2px solid var(--edge-light); background: var(--read-bg); color: var(--ink); box-shadow: 3px 3px 0 #0005; touch-action: manipulation; }
#vocabulary-dialog .exercise-category:hover,#vocabulary-dialog .exercise-category:focus-visible{ border-color: var(--accent); background: var(--raised); }
#vocabulary-dialog .exercise-category:active{ transform: translate(2px,2px); box-shadow: 1px 1px 0 #0005; }
#vocabulary-dialog .exercise-category strong{ display: block; font-size: 24px; line-height: 1.2; font-weight: 400; }
#vocabulary-dialog .exercise-category small{ display: block; margin-top: 8px; font-size: 17px; color: var(--muted); }
#vocabulary-dialog .exercise-category .category-progress{ color: #efca75; }
#vocabulary-dialog .exercise-category .category-example{ color: var(--accent); font-family: system-ui,sans-serif; font-size: 17px; }
#vocabulary-dialog .category-icon{ display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid var(--edge); color: var(--accent); background: var(--surface); font-size: 38px; }
#vocabulary-dialog .exercise-category > span:last-child{ font-size: 24px; color: var(--accent); }
#vocabulary-dialog .exercise-topbar{ display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
#vocabulary-dialog #exercise-options-panel{ padding: 12px; margin-bottom: 16px; border: 1px solid var(--edge); background: var(--surface); }
#vocabulary-dialog .exercise-scope-controls{ margin-bottom: 18px; }
#vocabulary-dialog .exercise-scope-controls label{ display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 17px; color: var(--muted); }
#vocabulary-dialog .exercise-scope-controls select{ width: 100%; min-width: 0; min-height: 44px; padding: 7px 10px; border: 1px solid var(--edge-light); border-radius: 0; background: var(--read-bg); color: var(--ink); font: inherit; font-size: 20px; }
#vocabulary-dialog .exercise-scope-controls select:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
#vocabulary-dialog #kana-exercise-controls{ display: grid; grid-template-columns: minmax(96px,1fr) minmax(0,1.2fr); align-items: center; column-gap: clamp(16px,6%,36px); }
#vocabulary-dialog #kana-exercise-controls .kana-script-choice{ min-width: 0; }
#vocabulary-dialog #kana-exercise-controls select{ padding-inline: 6px; font-size: 19px; }
#vocabulary-dialog .kana-filter-options{ display: grid; min-width: 0; max-width: 100%; justify-self: end; }
#vocabulary-dialog #kana-exercise-controls .check-option{ flex-direction: row; color: var(--ink); font-size: 17px; line-height: 1.2; min-height: 40px; gap: 8px; }
#vocabulary-dialog .kana-filter-options .check-option span{ overflow-wrap: anywhere; }
#vocabulary-dialog .kana-filter-options input{ width: 18px; height: 18px; }
#vocabulary-dialog .dictionary-kana-filters{ display: flex; flex-wrap: wrap; column-gap: 18px; margin-bottom: 12px; }
#vocabulary-dialog #exercise-difficulty{ border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); padding: 4px 0; }
#vocabulary-dialog #exercise-difficulty .level{ padding: 7px 5px; min-width: 76px; text-align: left; }
#vocabulary-dialog #exercise-difficulty small{ display: block; font-size: 15px; line-height: 1.3; color: var(--muted); margin-top: 3px; }
#vocabulary-dialog #exercise-difficulty .level.active{ color: var(--accent); }
#vocabulary-dialog #difficulty-note{ margin-top: 12px; }
#vocabulary-dialog #exercise-kana-card{ text-align: center; padding: 12px; border: 2px solid var(--edge); background: var(--read-bg); }
#vocabulary-dialog #exercise-kana-symbol{ font-family: system-ui,sans-serif; font-size: 84px; color: #efca75; line-height: 1.5; margin: 0; }
#vocabulary-dialog .library-review-link{ width: 100%; min-height: 48px; margin-bottom: 16px; font-size: 21px; }
#vocabulary-dialog #exercise-empty .pixel-button{ margin-top: 14px; font-size: 21px; white-space: normal; }
#vocabulary-dialog #finished-to-exercises{ display: flex; margin: 14px auto 0; }
@media(max-width:400px){#vocabulary-dialog .exercise-category{ grid-template-columns: 48px minmax(0,1fr) 16px; gap: 12px; padding: 16px 12px; }
#vocabulary-dialog .category-icon{ width: 48px; height: 52px; font-size: 32px; }
#vocabulary-dialog .exercise-category strong{ font-size: 22px; }
#vocabulary-dialog #exercise-difficulty .direction{ width: 100%; text-align: left; }
 }


.home-study-links { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.home-study-links .vocabulary-test { width:min(100%,380px); font-size:28px; min-height:62px; }
#vocabulary-dialog { width:min(1080px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); padding:24px; overflow:auto; }
#vocabulary-dialog .study-header { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
#vocabulary-dialog .study-header h2 { flex:1; font-size:30px; }
#vocabulary-dialog #study-close { min-width:44px; min-height:44px; font-size:24px; }
#vocabulary-dialog .study-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:24px; padding-top:18px; border-top:1px solid var(--edge); }
#vocabulary-dialog .context-sentence,#vocabulary-dialog .reading-copy { overflow-wrap:anywhere; }
@media(min-width:900px) {
 #vocabulary-dialog .study-shell { display:grid; grid-template-columns:180px minmax(0,1fr); gap:0 28px; }
 #vocabulary-dialog .study-header,#vocabulary-dialog .study-footer,#vocabulary-dialog #local-status { grid-column:1/-1; }
 #vocabulary-dialog .screen-tabs { display:flex; flex-direction:column; align-self:start; position:sticky; top:0; gap:12px; }
 #vocabulary-dialog .screen-tabs button { justify-content:flex-start; padding:12px; }
 #vocabulary-dialog .study-shell > section { grid-column:2; min-width:0; }
 #vocabulary-dialog #exercise-question { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:16px 24px; align-items:start; }
 #vocabulary-dialog .question-progress,#vocabulary-dialog #question-instruction,#vocabulary-dialog #answer-feedback { grid-column:1/-1; margin-block:0; }
 #vocabulary-dialog #exercise-context,#vocabulary-dialog #exercise-kana-card { grid-column:1;grid-row:3; }
 #vocabulary-dialog .exercise-answer-pane { grid-column:2;grid-row:3;min-width:0; }
 #vocabulary-dialog .choice-list,#vocabulary-dialog #written-answer { margin-top:0; }
 #vocabulary-dialog .question-progress { margin-top:20px; }
 #vocabulary-dialog .context-sentence { font-size:23px; }
 #vocabulary-dialog #choice-romaji-option { margin-top:0; }
 #vocabulary-dialog .kanji-word-list { grid-template-columns:1fr 1fr; }
 #vocabulary-dialog #flashcard-review { max-width:620px;margin:auto; }
}
@media(max-width:600px) {
 #vocabulary-dialog { width:100%;max-height:100dvh;max-width:100%;height:100dvh;margin:0;padding:max(12px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));border:0; }
 #vocabulary-dialog .study-header { gap:8px;margin-bottom:18px; }
 #vocabulary-dialog .study-header h2 { font-size:26px; }
 #vocabulary-dialog[data-exercise-active="true"] .study-header { position:absolute;right:16px;top:max(12px,env(safe-area-inset-top));margin:0; }
 #vocabulary-dialog[data-exercise-active="true"] .study-header h2 { position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
 #vocabulary-dialog .exercise-topbar { padding-right:56px;gap:8px;margin-bottom:8px; }
 #vocabulary-dialog .exercise-topbar button { min-width:0;font-size:18px;text-align:left; }
 #vocabulary-dialog .question-progress { margin:8px 0 10px;font-size:16px; }
 #vocabulary-dialog #question-instruction { font-size:22px;margin-bottom:12px; }
 #vocabulary-dialog .context-sentence { line-height:1.6;margin-bottom:12px; }
 #vocabulary-dialog .choice-list { gap:8px;margin-top:14px; }
 #vocabulary-dialog .choice-list button { min-height:54px;padding:10px; }
}

/* Choose options first; keep an active series focused on the question. */
#vocabulary-dialog .screen-tabs[hidden] { display:none; }
#vocabulary-dialog[data-review-active="true"] .study-shell { grid-template-columns:minmax(0,1fr); }
#vocabulary-dialog[data-review-active="true"] .study-shell > section { grid-column:1; }
#vocabulary-dialog #active-exercise-title:not(.sr-only) { font-size:26px; line-height:1.3; color:var(--accent); margin:6px 0 22px; }
#vocabulary-dialog #exercise-options-panel { padding:0; border:0; background:transparent; max-width:640px; margin:0 auto; }
#vocabulary-dialog .setup-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; width:100%; }
#vocabulary-dialog .setup-choices .pixel-button,#vocabulary-dialog .setup-directions .pixel-button { min-width:0; min-height:56px; white-space:normal; font-size:22px; padding:12px 8px; line-height:1.25; border:2px solid var(--edge-light); background:var(--read-bg); color:var(--ink); }
#vocabulary-dialog .setup-choices .pixel-button.active,#vocabulary-dialog .setup-directions .pixel-button.active { border-color:var(--accent); color:var(--accent); background:var(--raised); box-shadow:inset 0 0 0 1px var(--accent); }
#vocabulary-dialog #exercise-difficulty { padding:0; border:0; margin:20px 0; }
#vocabulary-dialog #exercise-difficulty .level { text-align:center; min-width:0; padding:12px 8px; }
#vocabulary-dialog #exercise-difficulty small { font-size:17px; }
#vocabulary-dialog #kana-exercise-controls { display:block; }
#vocabulary-dialog #kana-exercise-controls[hidden] { display:none; }
#vocabulary-dialog .kana-filter-options { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px; margin-top:12px; }
#vocabulary-dialog .setup-directions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#vocabulary-dialog .setup-directions [data-direction="mixed"] { grid-column:1/-1; }
#vocabulary-dialog .setup-directions .pixel-button { font-size:19px; }
#vocabulary-dialog #launch-exercise { width:100%; min-height:56px; margin:24px 0 0; font-size:24px; }
@media(max-width:600px) {
 #vocabulary-dialog[data-exercise-active="true"] .exercise-topbar { min-height:44px; }
 #vocabulary-dialog .setup-choices { gap:10px; }
 #vocabulary-dialog #exercise-difficulty { margin:16px 0; }
 #vocabulary-dialog .setup-choices .pixel-button { font-size:21px; }
}

/* Revised study workspace */
#vocabulary-dialog #next-question{margin-top:0;margin-bottom:18px}
#vocabulary-dialog #answer-verdict{margin-top:0}
#vocabulary-dialog #kanji-library .library-heading h2{font-size:32px;color:var(--accent);margin:4px 0 0}
#vocabulary-dialog .favorite-star{display:block;font-family:"Fusion Pixel";font-size:24px;font-weight:700;line-height:1;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px currentColor;pointer-events:none}
#vocabulary-dialog .favorite-button[aria-pressed="true"] .favorite-star{-webkit-text-fill-color:currentColor;-webkit-text-stroke:0}

#vocabulary-dialog .fc-muted{font-size:18px;line-height:1.5;color:var(--muted)}
#vocabulary-dialog .fc-muted.error{color:var(--error)}
#vocabulary-dialog #fc-dashboard{max-width:900px;margin:0 auto;padding:8px 0 20px;text-align:center}
#vocabulary-dialog .fc-count{margin:12px 0;color:var(--ink);display:flex;align-items:baseline;justify-content:center;gap:14px}
#vocabulary-dialog .fc-count strong{font-size:52px;color:var(--accent);font-weight:400}
#vocabulary-dialog .fc-count span{font-size:24px}
#vocabulary-dialog .fc-wide{width:100%;min-height:52px}
#vocabulary-dialog #fc-start{margin-top:8px}
#vocabulary-dialog .flashcard-topline{align-items:center;margin:0 0 8px}
#vocabulary-dialog .flashcard-topline .small-action{font-size:17px;flex-shrink:0}
#vocabulary-dialog .fc-face{padding:12px 16px 16px;min-height:0}
#vocabulary-dialog .fc-face-heading{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:17px}
#vocabulary-dialog #flashcard-romaji{margin-bottom:18px}
#vocabulary-dialog .fc-face #flashcard-word{font-size:34px;margin:10px 0}
#vocabulary-dialog #flip-flashcard{margin-top:16px}
#vocabulary-dialog .fc-ratings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
#vocabulary-dialog .fc-ratings button{font-size:21px;padding:12px 4px;white-space:normal;min-width:0;min-height:50px}
#vocabulary-dialog [data-grade="again"]{border-color:#ad7c78;color:#ffb5a9}
#vocabulary-dialog [data-grade="hesitant"]{border-color:#a69263;color:#efca75}
#vocabulary-dialog [data-grade="acquired"]{border-color:#759467;color:#c8e5b1}
#vocabulary-dialog #flashcard-context{border-top:1px solid var(--edge);margin:20px 0 0;padding-top:14px;font-size:19px}
#vocabulary-dialog #fc-explanation{font-size:18px;text-align:left;margin-top:12px;padding-top:12px}
#vocabulary-dialog #flashcard-note{border:0;padding:0;font-size:17px;line-height:1.6}
#vocabulary-dialog .fc-finished{text-align:center;padding:28px 0}
#vocabulary-dialog .fc-finished h2{font-size:28px;color:var(--accent)}
#vocabulary-dialog #fc-new-series{max-width:440px;margin-bottom:16px}
#vocabulary-dialog #fc-finished-home{display:block;margin:0 auto}
#vocabulary-dialog .fc-session-summary{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:22px 0;font-size:18px}
#vocabulary-dialog .fc-session-summary span{border:1px solid var(--edge);padding:8px 12px}
#vocabulary-dialog #fc-card-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:16px;margin:0}
#vocabulary-dialog #fc-card-list>li{min-width:0}
#vocabulary-dialog .fc-library-card{width:100%;height:100%;min-height:224px;display:grid;grid-template-rows:22px minmax(60px,1fr) 48px 34px;gap:10px;padding:14px;text-align:center;background:var(--read-bg);border:2px solid var(--edge);color:var(--ink);box-shadow:3px 3px 0 var(--shadow);cursor:pointer;touch-action:manipulation;transition:border-color .12s,transform .12s}
#vocabulary-dialog .fc-library-word{font:28px/1.3 system-ui,sans-serif;color:var(--accent);overflow-wrap:anywhere;align-self:center}
#vocabulary-dialog .fc-library-word[lang="ja"]{font-size:34px}
#vocabulary-dialog .fc-library-translation{font:17px/1.4 system-ui,sans-serif;align-self:center;overflow-wrap:anywhere}
#vocabulary-dialog .fc-library-word,#vocabulary-dialog .fc-library-translation{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#vocabulary-dialog .fc-library-card small{font-size:14px;line-height:22px;color:var(--fc-state,var(--muted));text-align:left}
#vocabulary-dialog .fc-library-card:hover,#vocabulary-dialog .fc-library-card:focus-visible{border-color:var(--accent);transform:translateY(-2px)}
@media(max-width:600px){
 #vocabulary-dialog[data-flashcard-active="true"] .screen-tabs{display:none}
 #vocabulary-dialog[data-flashcard-active="true"] .study-header{position:absolute;right:16px;top:max(12px,env(safe-area-inset-top));margin:0}
 #vocabulary-dialog[data-flashcard-active="true"] .study-header h2{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 #vocabulary-dialog[data-flashcard-active="true"] .flashcard-topline{padding-right:56px;gap:8px;font-size:16px;min-height:44px}
 #vocabulary-dialog .fc-face{padding:8px 10px 14px}
 #vocabulary-dialog .fc-ratings{gap:6px}
 #vocabulary-dialog .fc-ratings button{font-size:19px;min-height:48px}
 #vocabulary-dialog .fc-wide{font-size:22px}
 #vocabulary-dialog #fc-card-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 #vocabulary-dialog .fc-library-card{gap:8px;padding:10px;min-height:204px}
 #vocabulary-dialog .fc-library-word{font-size:24px}
 #vocabulary-dialog .fc-library-word[lang="ja"]{font-size:30px}
}

/* Personal cards use the same two faces as cards made from translations. */
#vocabulary-dialog .fc-editor{max-width:880px;margin:0 auto 24px}
#vocabulary-dialog .fc-editor h3{font-size:24px;color:var(--accent);margin:10px 0 24px}
#vocabulary-dialog .fc-editor-faces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
#vocabulary-dialog .fc-editor fieldset{min-width:0;margin:0;padding:16px;background:var(--read-bg);border:2px solid var(--edge)}
#vocabulary-dialog .fc-editor legend{padding:0 8px;font-size:20px;color:var(--accent)}
#vocabulary-dialog .fc-editor label{display:block;font-size:17px;margin:12px 0 6px;color:var(--ink)}
#vocabulary-dialog .fc-editor input,#vocabulary-dialog .fc-editor textarea{display:block;box-sizing:border-box;width:100%;min-width:0;min-height:44px;border:1px solid var(--edge-light);border-radius:0;padding:10px;background:var(--bg);color:var(--ink);font:17px/1.5 system-ui,sans-serif}
#vocabulary-dialog .fc-editor textarea{resize:vertical}
#vocabulary-dialog .fc-editor-category{margin-top:24px;padding-top:8px;border-top:1px solid var(--edge)}
#vocabulary-dialog .fc-editor-category .fc-muted{font-size:16px;margin:8px 0}
#vocabulary-dialog .fc-editor-category select{box-sizing:border-box;width:100%;min-width:0;min-height:44px;margin-bottom:8px;padding:10px;font:17px/1.5 system-ui,sans-serif}
#vocabulary-dialog .fc-editor-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:24px}
#vocabulary-dialog .fc-editor-actions button{min-height:44px;font-size:20px}
#vocabulary-dialog .fc-editor [hidden]{display:none}
#vocabulary-dialog .fc-category-footer{display:flex;align-items:center;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;border-top:1px solid var(--edge);margin-top:24px;padding-top:12px;text-align:left;color:var(--muted);font-size:17px;overflow-wrap:anywhere}
#vocabulary-dialog .fc-category-footer .small-action{font-size:16px;min-height:44px}
#vocabulary-dialog .fc-library-category{display:block;min-width:0;align-self:end;border-top:1px solid var(--edge);padding:10px 0 0;color:var(--muted);font-size:15px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#vocabulary-dialog #fc-card-list .fc-category-heading{grid-column:1/-1;padding:8px 0 0;border:0;background:none}
#vocabulary-dialog .fc-category-heading h3{color:var(--accent);font-size:23px;margin:16px 0 4px;overflow-wrap:anywhere}
#vocabulary-dialog #fc-library{padding-top:10px}
#vocabulary-dialog #fc-library input:focus-visible,#vocabulary-dialog .fc-editor input:focus-visible,#vocabulary-dialog .fc-editor textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:600px){
 #vocabulary-dialog .fc-editor-faces{grid-template-columns:minmax(0,1fr);gap:20px}
 #vocabulary-dialog .fc-editor fieldset{padding:12px}
}

/* Flashcards: summary, three destinations, then a separate exercise setup. */
#vocabulary-dialog .fc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0 32px}
#vocabulary-dialog .fc-stats>div{display:flex;flex-direction:column-reverse;gap:7px;min-width:0;padding:14px 6px;border-bottom:2px solid var(--fc-state,var(--edge-light))}
#vocabulary-dialog .fc-stats dt{font-size:17px;line-height:1.2;color:var(--muted)}
#vocabulary-dialog .fc-stats dd{margin:0;font-size:28px;line-height:1;color:var(--fc-state,var(--ink))}
#vocabulary-dialog [data-state="again"]{--fc-state:#efb2a8}
#vocabulary-dialog [data-state="hesitant"]{--fc-state:#efca75}
#vocabulary-dialog [data-state="acquired"]{--fc-state:var(--accent)}
#vocabulary-dialog .fc-home-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#vocabulary-dialog .fc-home-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;width:100%;min-width:0;min-height:140px;padding:22px 12px;font-family:inherit;font-size:22px;line-height:1.25;text-align:center;color:var(--ink);background:var(--read-bg);border:2px solid var(--edge-light);box-shadow:3px 3px 0 var(--shadow);cursor:pointer;touch-action:manipulation;transition:transform .12s,border-color .12s}
#vocabulary-dialog .fc-home-action svg{width:32px;height:32px;flex:none;fill:currentColor;color:var(--accent);shape-rendering:crispEdges}
#vocabulary-dialog .fc-home-action:hover:not(:disabled),#vocabulary-dialog .fc-home-action:focus-visible{border-color:var(--accent);transform:translateY(-2px)}
#vocabulary-dialog .fc-home-action:disabled{opacity:.45;cursor:default}
#vocabulary-dialog .fc-home-action:active:not(:disabled){transform:translateY(1px);box-shadow:1px 1px 0 var(--shadow)}
#vocabulary-dialog .fc-topbar{margin:0 0 22px}
#vocabulary-dialog .fc-topbar .small-action{display:flex;align-items:center;gap:10px;min-height:44px;font-size:18px}
#vocabulary-dialog .fc-topbar svg{width:16px;height:16px;fill:currentColor;shape-rendering:crispEdges}
#vocabulary-dialog .fc-setup{max-width:640px;margin:0 auto}
#vocabulary-dialog .fc-setup h2{font-size:26px;color:var(--accent);line-height:1.3;margin:4px 0 24px}
#vocabulary-dialog .fc-setup>.setup-choices,#vocabulary-dialog .fc-setup>.setup-directions{margin-bottom:20px}
#vocabulary-dialog .fc-setup [data-fc-direction="random"]{grid-column:1/-1}
#vocabulary-dialog .fc-setup [hidden]{display:none}
#vocabulary-dialog .fc-category-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px;margin:-6px 0 20px;border:1px solid var(--edge);background:var(--read-bg)}
#vocabulary-dialog .fc-category-choice{min-width:0;min-height:44px;padding:10px;font-size:18px;line-height:1.25;overflow-wrap:anywhere;border:1px solid var(--edge-light);background:var(--surface);color:var(--ink)}
#vocabulary-dialog .fc-category-choice.active{border-color:var(--accent);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
#vocabulary-dialog #fc-selected-count{font-size:17px;text-align:center;margin:16px 0 8px}
@media(max-width:600px){
 #vocabulary-dialog .fc-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin:16px 0 24px}
 #vocabulary-dialog .fc-stats>div{flex-direction:row-reverse;align-items:center;justify-content:space-between;padding:10px 2px;gap:4px}
 #vocabulary-dialog .fc-stats dd{font-size:24px}
 #vocabulary-dialog .fc-stats dt{font-size:16px}
 #vocabulary-dialog .fc-home-actions{grid-template-columns:minmax(0,1fr);gap:12px}
 #vocabulary-dialog .fc-home-action{flex-direction:row;justify-content:flex-start;gap:20px;min-height:80px;padding:18px 20px;font-size:22px;text-align:left}
 #vocabulary-dialog .fc-setup h2{font-size:24px}
 #vocabulary-dialog .fc-setup .setup-choices .pixel-button{font-size:19px}
}
@media(prefers-reduced-motion:reduce){
 #vocabulary-dialog .fc-home-action,#vocabulary-dialog .fc-library-card{transition:none}
 #vocabulary-dialog .fc-home-action:hover:not(:disabled),#vocabulary-dialog .fc-home-action:focus-visible,#vocabulary-dialog .fc-library-card:hover,#vocabulary-dialog .fc-library-card:focus-visible{transform:none}
}