:root{--word-known:#dce5c8;--word-fuzzy:#fff0c8;--word-unknown:#ecd8c4}
.vocab-card.mark-known,.word-list-row.mark-known,.flashcard-result-counts .mark-known{background:var(--word-known);border-color:#c3d2a9}
.vocab-card.mark-unknown,.word-list-row.mark-unknown,.flashcard-result-counts .mark-unknown{background:var(--word-unknown);border-color:#d3b28e}
.vocab-card.mark-fuzzy,.word-list-row.mark-fuzzy,.flashcard-result-counts .mark-fuzzy{background:var(--word-fuzzy);border-color:#e1ce93}
.vocab-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background-color .2s ease}
.card-hover-actions [data-mark="known"].active{background:#4c6741}.card-hover-actions [data-mark="unknown"].active{background:#87603e}.card-hover-actions [data-mark="fuzzy"].active{background:#927421}
.study-mode-modal{width:min(100%,620px)}.study-options{border:0;padding:0;margin:4px 0 10px;display:grid;gap:10px}.study-options legend{font-size:13px;color:#777;margin-bottom:10px}.study-options label{display:flex;gap:13px;align-items:center;border:1px solid #e5e2dc;background:#faf9f6;border-radius:12px;padding:17px;cursor:pointer}.study-options label:has(input:checked){border-color:#de7548;background:#fff0e3;box-shadow:0 0 0 1px #de7548}.study-options input{accent-color:#de7548;width:18px;height:18px;flex-shrink:0}.study-options strong{display:block;font-size:16px;margin-bottom:6px}.study-options small{display:block;line-height:1.6;font-size:12px}.study-mode-modal .button-row{justify-content:end}
.is-flashcards .bottom-nav{display:none}.is-flashcards .site-main{max-width:100%;background:#fcf9f5;overflow:hidden;min-height:calc(100vh - 110px);padding:20px 20px 35px}.flashcard-shell{max-width:620px;margin:0 auto}.flashcard-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.flashcard-progress{display:flex;justify-content:space-between;color:#888;font-size:14px;margin:14px 0 10px}.flashcard-shell .progress-track{height:7px;margin-bottom:22px;background:#e9e9e9}.flashcard-stack{position:relative;perspective:1300px;margin:0 22px}.flashcard-stack:before,.flashcard-stack:after{content:"";position:absolute;inset:0;background:#e9e5dc;border-radius:22px;transform:translateY(9px) scale(.97)}.flashcard-stack:after{transform:translateY(16px) scale(.94);background:#ddd8cf}.flashcard{position:relative;z-index:1;min-height:clamp(430px,52vh,560px);height:auto;border-radius:22px;outline-offset:5px;cursor:pointer;animation:flashcard-enter .2s ease-out}.flashcard-inner{display:grid;min-height:inherit;position:relative;transform-style:preserve-3d;transition:transform .42s ease}.flashcard.is-flipped .flashcard-inner{transform:rotateY(180deg)}.flashcard-face{position:relative;grid-area:1 / 1;min-width:0;padding:30px;border-radius:22px;backface-visibility:hidden;background:#fff;box-shadow:0 18px 35px #0002;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:visible}.flashcard.mark-known .flashcard-face{background:#e6edd9}.flashcard.mark-unknown .flashcard-face{background:#f0e1d1}.flashcard.mark-fuzzy .flashcard-face{background:#fff4d6}.flashcard-front h1{font:700 clamp(28px,4vw,42px)/1.3 Arial,sans-serif;overflow-wrap:anywhere;margin:20px 0}.flashcard-forms{font:14px/1.7 Arial,sans-serif;color:#777;text-align:center}.flashcard-front .pos-tag{margin:10px}.flashcard-flip-hint{font-size:12px;color:#999;margin:30px 0 0;text-align:center}.flashcard-back{transform:rotateY(180deg);align-items:stretch;justify-content:flex-start}.flashcard-back-title{display:flex;justify-content:center;align-items:center;gap:10px;margin:0 0 15px}.flashcard-back-title h2{font:700 24px/1.4 Arial,sans-serif;margin:0;overflow-wrap:anywhere}.flashcard-detail{border-radius:12px;background:#fff9;padding:14px 17px;margin:6px 0;font-size:15px}.flashcard-detail small{font-size:10px}.flashcard-detail p{margin:7px 0;line-height:1.7;overflow-wrap:anywhere}.flashcard-meaning{font-weight:700;font-size:20px}.flashcard-translation{color:#666}.flashcard-back .flashcard-flip-hint{margin-top:auto;padding-top:15px}.flashcard-shortcuts{font-size:11px;color:#999;text-align:center;margin:26px 0 18px}.flashcard-rating-actions{display:flex;justify-content:center;gap:20px}.flashcard-rating-actions button{border:0;width:82px;height:82px;border-radius:50%;font-size:16px;font-weight:700;color:#555;box-shadow:0 5px 15px #0001;transition:transform .15s ease}.flashcard-rating-actions button:hover:not(:disabled){transform:translateY(-4px)}.flashcard-rating-actions .mark-known{background:#dce5c8}.flashcard-rating-actions .mark-fuzzy{background:#fff0c8}.flashcard-rating-actions .mark-unknown{background:#ecd8c4}.flashcard-save-status{font-size:12px;color:#888;text-align:center;min-height:18px;margin:15px 0}.flashcard-finished{max-width:620px;margin:60px auto;text-align:center}.flashcard-finished h1{font-size:32px}.flashcard-finished>p{font-size:14px;line-height:1.8}.flashcard-result-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0}.flashcard-result-counts>div{padding:25px;border-radius:16px;display:grid;gap:8px}.flashcard-result-counts b{font:700 32px Arial,sans-serif}.flashcard-result-counts span{font-size:13px}
@keyframes flashcard-enter{from{opacity:.5;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:700px){.is-flashcards .site-main{padding:16px 15px 24px}.flashcard-stack{margin:0 8px}.flashcard{height:auto;min-height:clamp(360px,53vh,480px)}.flashcard-face{padding:24px 20px}.flashcard-top{margin-bottom:10px}.flashcard-shell .progress-track{margin-bottom:18px}.flashcard-detail{padding:10px 14px;font-size:14px}.flashcard-shortcuts{margin-top:24px;font-size:10px}.flashcard-rating-actions button{width:66px;height:66px;font-size:14px}.flashcard-rating-actions{gap:16px}.flashcard-finished{margin:30px auto}.flashcard-result-counts>div{padding:20px 10px}.study-options label{padding:13px}.study-options strong{font-size:15px}}
@media(prefers-reduced-motion:reduce){.flashcard,.flashcard-inner,.flashcard-rating-actions button{animation:none;transition:none}}

/* Fit the complete exercise, including rating controls, into the viewport. */
.is-flashcards .site-main{padding:12px 16px 16px;min-height:0;overflow:visible}
.flashcard-shell{max-width:560px}
.flashcard-top{margin-bottom:6px}
.flashcard-top button{min-height:44px}
.flashcard-progress{margin:6px 0 6px}
.flashcard-shell .progress-track{margin-bottom:12px;height:6px}
.flashcard-stack{margin:0 10px}
.flashcard-inner{height:100%;min-height:0}
.flashcard-face{min-height:0;padding:20px 24px}
.flashcard-front h1{font-size:32px;margin:10px 0}
.flashcard-front .word-phonetic{margin:4px 0}
.flashcard-forms{margin:6px 0;line-height:1.45}
.flashcard-front .pos-tag{margin:6px}
.flashcard-flip-hint{margin-top:16px}
.flashcard-back-title{margin-bottom:8px}
.flashcard-back-title h2{font-size:24px}
.flashcard-detail{padding:8px 14px;margin:4px 0;font-size:16px}
.flashcard-detail p{margin:4px 0;line-height:1.4}
.flashcard-meaning{font-size:19px}
.flashcard-back .flashcard-flip-hint{padding-top:8px;margin-bottom:0}
.flashcard-shortcuts{margin:20px 0 10px}
.flashcard-rating-actions{gap:18px}
.flashcard-rating-actions button{width:60px;height:60px;font-size:15px}
.flashcard-save-status{margin:8px 0 0;min-height:16px}
.flashcard-detail-tabs{display:none}
.compact-details .flashcard-detail-tabs{display:flex;gap:6px;margin-bottom:6px}
.flashcard-detail-tabs button{flex:1;min-height:44px;border:1px solid #ddd7ca;border-radius:8px;background:#fff8;color:#555;font-size:14px}
.flashcard-detail-tabs button[aria-pressed=true]{background:#fff;font-weight:700;border-color:#a99b80}
.compact-details .flashcard-detail:not(.is-active){display:none}
@media(max-height:720px){
 .flashcard-face{padding:12px 18px}
 .flashcard-shortcuts{margin:18px 0 6px}
 .flashcard-rating-actions button{width:52px;height:52px;font-size:14px}
 .flashcard-front h1{font-size:28px;margin:6px 0}
 .flashcard-flip-hint{margin-top:10px}
 .flashcard-back-title h2{font-size:22px}
}
@media(max-width:700px){.flashcard-stack{margin:0 4px}.flashcard-face{padding:16px}.flashcard-detail{font-size:15px}}