.vocabulary-hero { padding-bottom: 28px; }
.study-section { padding-top: 0; }
.study-layout { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 24px; align-items: start; }
.study-sidebar { position: sticky; top: 92px; padding: 22px; }
.study-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; }
.study-stat-grid div { padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.study-stat-grid span, .progress-meta, .card-hint, .tap-hint, .shortcut-note { font-size: .86rem; opacity: .74; }
.study-stat-grid strong { display: block; margin-top: 4px; font-size: 1.65rem; line-height: 1; }
.study-settings { display: grid; gap: 10px; }
.study-settings .button { justify-content: center; width: 100%; }
.jump-form { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.jump-form label { display: block; margin-bottom: 8px; font-size: .9rem; }
.jump-form div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.jump-form input { width: 100%; min-height: 44px; padding: 0 12px; color: inherit; background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.study-links { display: grid; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.study-links a, .study-links button { padding: 0; color: inherit; background: none; border: 0; font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.shortcut-note { margin: 20px 0 0; line-height: 1.7; }
.study-main { min-width: 0; }
.study-progress { margin-bottom: 14px; }
.progress-meta { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.progress-track { height: 5px; overflow: hidden; background: color-mix(in srgb, var(--line) 75%, transparent); border-radius: 999px; }
.progress-track span { display: block; width: 0; height: 100%; background: currentColor; border-radius: inherit; transition: width .25s ease; }
.flashcard { min-height: 480px; padding: clamp(24px, 5vw, 58px); cursor: pointer; outline: none; transition: transform .2s ease, border-color .2s ease; }
.flashcard:hover { transform: translateY(-2px); }
.flashcard:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }
.card-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 34px; }
.card-number { font-variant-numeric: tabular-nums; letter-spacing: .12em; opacity: .7; }
.card-status { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .78rem; }
.term-list { display: grid; gap: 16px; margin: 42px 0; }
.term-item { display: flex; align-items: center; gap: 12px; font-family: "Times New Roman", serif; font-size: clamp(1.65rem, 4vw, 3.25rem); font-weight: 700; line-height: 1.1; }
.speak-button { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; color: inherit; background: transparent; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
.tap-hint { margin-top: 34px; }
.answer-list { display: grid; gap: 0; margin-top: 22px; }
.answer-item { display: grid; grid-template-columns: minmax(150px, .75fr) minmax(0, 1.4fr); gap: 24px; padding: 18px 0; border-top: 1px solid var(--line); }
.answer-item:first-child { border-top: 0; }
.answer-term { font-family: "Times New Roman", serif; font-size: 1.25rem; font-weight: 700; }
.answer-definition { line-height: 1.8; }
.card-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.card-actions .button { justify-content: center; }
.unknown-button { border-color: color-mix(in srgb, #b54b4b 62%, var(--line)); }
.known-button { border-color: color-mix(in srgb, #39825d 62%, var(--line)); }
.study-message { min-height: 1.5em; margin: 12px 2px 0; font-size: .9rem; opacity: .8; }
@media (max-width: 900px) { .study-layout { grid-template-columns: 1fr; } .study-sidebar { position: static; } .study-settings { grid-template-columns: repeat(3, 1fr); } .shortcut-note { display: none; } }
@media (max-width: 640px) { .study-sidebar { padding: 16px; } .study-settings { grid-template-columns: 1fr; } .flashcard { min-height: 430px; padding: 24px 20px; } .card-topline { margin-bottom: 24px; } .term-list { margin: 30px 0; } .term-item { font-size: clamp(1.45rem, 8vw, 2.3rem); } .answer-item { grid-template-columns: 1fr; gap: 7px; padding: 14px 0; } .card-actions { grid-template-columns: repeat(2, 1fr); } .reveal-button { grid-column: 1 / -1; grid-row: 1; } .progress-meta { font-size: .8rem; } }
@media (prefers-reduced-motion: reduce) { .flashcard, .progress-track span { transition: none; } }