body[data-view="library"] {
--vocab-library-accent: var(--learning-primary);
--vocab-library-accent-strong: var(--learning-primary-hover);
--vocab-library-accent-bright: var(--learning-primary);
--vocab-library-accent-soft: var(--learning-primary-soft);
--vocab-library-accent-faint: var(--learning-surface-soft);
--vocab-library-ink: var(--learning-ink);
--vocab-library-muted: var(--learning-muted);
--vocab-library-line: var(--learning-line);
--vocab-library-line-strong: var(--learning-line-accent);
--vocab-library-surface: var(--learning-surface-solid);
--vocab-library-surface-soft: var(--learning-surface-soft);
--vocab-library-on-accent: var(--md-sys-color-on-primary, var(--color-paper));
--vocab-library-danger: var(--color-danger);
--vocab-library-danger-soft: var(--color-danger-soft);
--vocab-library-focus-ring: color-mix(in srgb, var(--learning-primary) 44%, transparent);
--vocab-library-shadow: var(--shadow-popover);
--vocab-library-ease: var(--learning-ease-out);
}

body:not([data-view="library"]) .vocab-library-section {
display: none !important;
}

body[data-view="library"] .reading-workbench,
body[data-view="library"] .vocab-section-page,
body[data-view="library"] .grammar-section,
body[data-view="library"] .typing-section,
body[data-view="library"] .retell-section,
body[data-view="library"] .discover-section,
body[data-view="library"] .test-section,
body[data-view="library"] .history-section,
body[data-view="library"] .settings-section {
display: none !important;
}

body[data-view="library"] .nav-library.active,
body[data-view="library"] #menuPanel [data-view="library"].active {
background: var(--vocab-library-accent-soft) !important;
color: var(--vocab-library-accent-strong) !important;
}

body[data-view="library"] .vocab-library-section {
display: block !important;
}

.vocab-library-root {
min-height: 0;
}

.vocab-library-loading,
.vocab-library-error {
display: grid;
min-height: 440px;
place-items: center;
align-content: center;
gap: var(--space-3);
padding: var(--space-7);
color: var(--vocab-library-muted);
text-align: center;
}

.vocab-library-error strong {
color: var(--vocab-library-ink);
font-size: var(--type-size-subtitle);
}

.vocab-library-error p {
max-width: 520px;
margin: 0;
}

.vocab-library-status {
position: sticky;
top: var(--space-3);
z-index: 50;
width: fit-content;
max-width: calc(100% - var(--space-6));
margin: var(--space-3) auto calc(-1 * var(--space-5));
padding: 9px 14px;
border: 1px solid var(--vocab-library-line);
border-radius: var(--radius-round);
background: color-mix(in srgb, var(--vocab-library-surface) 95%, transparent);
color: var(--vocab-library-muted);
box-shadow: var(--shadow-popover);
backdrop-filter: blur(18px) saturate(150%);
font-size: var(--type-size-meta);
}

.vocab-library-status.success {
border-color: var(--vocab-library-line-strong);
color: var(--vocab-library-accent-strong);
}

.vocab-library-status.warning,
.vocab-library-status.error {
border-color: color-mix(in srgb, var(--vocab-library-danger) 24%, transparent);
color: var(--danger);
}

.vocab-library-primary-action,
.vocab-library-show-all,
.vocab-library-empty-lessons button {
min-height: 46px;
padding: 10px 20px;
border-radius: 12px;
font-weight: 800;
transition: transform 150ms var(--vocab-library-ease), box-shadow 180ms ease, background-color 180ms ease;
}

.vocab-library-primary-action {
border: 1px solid var(--vocab-library-surface);
background: var(--vocab-library-surface);
color: var(--vocab-library-accent-strong);
box-shadow: var(--vocab-library-shadow);
}

.vocab-library-primary-action:hover {
box-shadow: var(--shadow-modal);
}

.vocab-library-primary-action:active,
.vocab-library-lesson-tile:active,
.vocab-library-focus-actions button:active,
.vocab-library-compact-progress button:active {
transform: scale(0.975);
}

.vocab-library-overview {
padding: clamp(28px, 4vw, 48px);
background: var(--vocab-library-surface);
}

.vocab-library-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-5);
}

.vocab-library-section-title {
display: flex;
gap: 12px;
align-items: center;
}

.vocab-library-section-icon {
display: grid;
width: 40px;
height: 40px;
place-items: center;
border-radius: 12px;
background: var(--vocab-library-accent-soft);
color: var(--vocab-library-accent);
font-size: var(--type-size-emphasis);
}

.vocab-library-section-title h2 {
margin: 0;
color: var(--vocab-library-ink);
font-family: var(--font-display);
font-size: var(--type-size-section-title-large);
letter-spacing: -0.02em;
}

.vocab-library-section-title p {
margin: 3px 0 0;
color: var(--vocab-library-muted);
font-size: var(--type-size-meta);
}

.vocab-library-directory-tools {
display: flex;
gap: var(--space-2);
align-items: center;
}

.vocab-library-filter-control select {
min-height: 40px;
padding: 7px 34px 7px 12px;
border: 1px solid var(--vocab-library-line);
border-radius: 10px;
background: var(--vocab-library-surface);
color: var(--vocab-library-ink);
}

.vocab-library-layout-toggle {
display: flex;
gap: 4px;
padding: 4px;
border: 1px solid var(--vocab-library-line);
border-radius: 10px;
background: var(--vocab-library-surface);
}

.vocab-library-layout-toggle button {
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--vocab-library-muted);
}

.vocab-library-layout-toggle button.is-active {
background: var(--vocab-library-accent-soft);
color: var(--vocab-library-accent-strong);
}

.vocab-library-lesson-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-3);
}

.vocab-library-lesson-tile {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: var(--space-3);
align-items: start;
min-height: 118px;
padding: 18px 16px 22px;
overflow: hidden;
border: 1px solid var(--vocab-library-line);
border-radius: 15px;
background: var(--vocab-library-surface);
color: var(--vocab-library-ink);
text-align: left;
box-shadow: var(--vocab-library-shadow);
transition: transform 180ms var(--vocab-library-ease), border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.vocab-library-lesson-tile:hover {
border-color: var(--vocab-library-line-strong);
box-shadow: var(--vocab-library-shadow);
transform: translateY(-2px);
}

.vocab-library-lesson-tile.is-current {
border-color: color-mix(in srgb, var(--vocab-library-accent) 60%, transparent);
background: linear-gradient(145deg, var(--vocab-library-surface) 0%, var(--vocab-library-accent-faint) 100%);
box-shadow: var(--vocab-library-shadow);
}

.vocab-library-lesson-tile.is-complete {
background: var(--vocab-library-accent-faint);
}

.vocab-library-lesson-index {
display: grid;
min-width: 34px;
min-height: 34px;
place-items: center;
border-radius: 10px;
background: var(--vocab-library-accent-soft);
color: var(--vocab-library-accent-strong);
font-weight: 850;
}

.vocab-library-lesson-copy {
min-width: 0;
}

.vocab-library-lesson-copy strong,
.vocab-library-lesson-copy small,
.vocab-library-lesson-copy em {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.vocab-library-lesson-copy strong {
color: var(--vocab-library-ink);
font-size: var(--type-size-control);
}

.vocab-library-lesson-copy small {
margin-top: 2px;
color: var(--vocab-library-accent-strong);
font-size: var(--type-size-meta);
font-weight: 680;
}

.vocab-library-lesson-copy em {
margin-top: 6px;
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
font-style: normal;
}

.vocab-library-lesson-count {
padding: 4px 7px;
border-radius: var(--radius-round);
background: var(--vocab-library-surface-soft);
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
font-weight: 750;
}

.vocab-library-lesson-tile[data-access-state="LOGIN_LOCK"] .vocab-library-lesson-count,
.vocab-library-lesson-tile[data-access-state="PLUS_LOCK"] .vocab-library-lesson-count {
border: 1px solid var(--vocab-library-border);
background: var(--vocab-library-surface);
color: var(--vocab-library-ink-soft);
}

.vocab-library-lesson-tile[data-access-state="PREVIEW"] .vocab-library-lesson-count {
color: var(--vocab-library-accent-strong);
}

.vocab-library-lesson-tile-progress {
position: absolute;
right: 16px;
bottom: 10px;
left: 16px;
height: 4px;
overflow: hidden;
border-radius: var(--radius-round);
background: var(--vocab-library-surface-soft);
}

.vocab-library-lesson-tile-progress i {
display: block;
height: 100%;
border-radius: inherit;
background: var(--vocab-library-accent);
}

.vocab-library-overview.is-list .vocab-library-lesson-grid {
grid-template-columns: 1fr;
}

.vocab-library-overview.is-list .vocab-library-lesson-tile {
min-height: 84px;
grid-template-columns: auto minmax(0, 1fr) auto;
}

.vocab-library-empty-lessons {
grid-column: 1 / -1;
display: grid;
min-height: 180px;
place-items: center;
align-content: center;
gap: var(--space-3);
border: 1px dashed var(--vocab-library-line-strong);
border-radius: 16px;
color: var(--vocab-library-muted);
}

.vocab-library-empty-lessons button,
.vocab-library-show-all {
border: 1px solid var(--vocab-library-line-strong);
background: var(--vocab-library-surface);
color: var(--vocab-library-accent-strong);
}

.vocab-library-show-all {
display: flex;
width: fit-content;
min-width: 220px;
margin: var(--space-5) auto 0;
align-items: center;
justify-content: center;
gap: 8px;
}

.vocab-library-compact-progress {
position: sticky;
top: 0;
z-index: 30;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
padding: 14px clamp(20px, 4vw, 44px);
border-bottom: 1px solid var(--vocab-library-line);
background: color-mix(in srgb, var(--vocab-library-surface) 92%, transparent);
backdrop-filter: blur(20px) saturate(150%);
}

.vocab-library-lesson-view {
padding: clamp(24px, 4vw, 46px);
background: linear-gradient(180deg, var(--vocab-library-surface-soft) 0%, var(--vocab-library-surface) 36%);
}

.vocab-library-focus-card {
max-width: var(--workspace-max);
margin: 0 auto;
overflow: hidden;
border: 1px solid var(--vocab-library-line);
border-radius: 15px;
background: var(--vocab-library-surface);
box-shadow: var(--vocab-library-shadow);
scroll-margin-top: 88px;
}

.vocab-library-focus-card.is-learned {
border-color: color-mix(in srgb, var(--vocab-library-accent) 32%, transparent);
box-shadow: var(--vocab-library-shadow);
}

.vocab-library-focus-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: 18px 22px 0;
}

.vocab-library-focus-meta,
.vocab-library-focus-states {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.vocab-library-focus-meta span,
.vocab-library-saved-state,
.vocab-library-learned-state {
padding: 5px 9px;
border-radius: var(--radius-round);
background: var(--vocab-library-accent-soft);
color: var(--vocab-library-accent-strong);
font-size: var(--type-size-caption);
font-weight: 800;
}

.vocab-library-saved-state {
background: var(--vocab-library-surface-soft);
}

.vocab-library-learned-state {
background: var(--vocab-library-accent);
color: var(--vocab-library-on-accent);
}

.vocab-library-focus-word {
padding-right: var(--space-5);
border-right: 1px solid var(--vocab-library-line);
}

.vocab-library-focus-word strong,
.vocab-library-focus-word span {
display: block;
}

.vocab-library-focus-word strong {
color: var(--vocab-library-ink);
font-family: var(--font-display);
font-size: clamp(var(--type-size-feature-title), 5vw, var(--type-size-hero));
font-weight: 650;
line-height: 1;
letter-spacing: -0.035em;
}

.vocab-library-focus-word span {
margin-top: 10px;
color: var(--vocab-library-muted);
font-size: var(--type-size-body-large);
}

.vocab-library-focus-meaning span,
.vocab-library-focus-meaning strong,
.vocab-library-focus-meaning em {
display: block;
}

.vocab-library-focus-meaning span {
width: fit-content;
padding: 4px 8px;
border-radius: var(--radius-round);
background: var(--vocab-library-surface-soft);
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
font-weight: 750;
}

.vocab-library-focus-meaning strong {
margin-top: 10px;
color: var(--vocab-library-ink);
font-size: var(--type-size-section-title-large);
line-height: 1.35;
}

.vocab-library-focus-meaning em {
width: fit-content;
margin-top: 10px;
padding: 4px 8px;
border-radius: var(--radius-round);
background: var(--vocab-library-accent-soft);
color: var(--vocab-library-accent-strong);
font-size: var(--type-size-caption);
font-style: normal;
font-weight: 750;
}

.vocab-library-focus-example {
position: relative;
padding: 26px 30px;
border-top: 1px solid var(--vocab-library-line);
border-bottom: 1px solid var(--vocab-library-line);
background: var(--vocab-library-accent-faint);
}

.vocab-library-focus-example p {
margin: 0;
}

.vocab-library-focus-example p:nth-of-type(1) {
color: var(--vocab-library-ink);
font-family: var(--font-reading);
font-size: var(--type-size-section-title-large);
line-height: 1.6;
}

.vocab-library-focus-example p:nth-of-type(2) {
margin-top: 5px;
color: var(--vocab-library-muted);
font-size: var(--type-size-body-large);
}

.vocab-library-usage-row {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
padding: 18px 30px;
border-bottom: 1px solid var(--vocab-library-line);
color: var(--vocab-library-ink);
font-size: var(--type-size-meta);
}

.vocab-library-usage-row span {
display: inline-flex;
gap: 7px;
align-items: center;
}

.vocab-library-usage-row small {
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
}

.vocab-library-study-tip {
padding: 14px 30px;
border-bottom: 1px solid var(--vocab-library-line);
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
}

.vocab-library-study-tip summary {
width: fit-content;
color: var(--vocab-library-accent-strong);
cursor: pointer;
font-weight: 780;
}

.vocab-library-study-tip p {
margin: 7px 0 0;
line-height: 1.7;
}

.vocab-library-focus-actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(190px, 1.25fr);
gap: 10px;
padding: 20px 22px;
}

.vocab-library-focus-actions button {
display: inline-flex;
min-width: 0;
min-height: 48px;
align-items: center;
justify-content: center;
gap: 7px;
padding: 9px 12px;
border-radius: 12px;
font-size: var(--type-size-caption);
font-weight: 780;
transition: transform 150ms var(--vocab-library-ease), background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.vocab-library-save-action {
border: 1px solid var(--vocab-library-line);
background: var(--vocab-library-surface);
color: var(--vocab-library-ink);
}

.vocab-library-save-action:hover:not(:disabled) {
border-color: var(--vocab-library-line-strong);
background: var(--vocab-library-accent-faint);
color: var(--vocab-library-accent-strong);
}

.vocab-library-save-action.is-saved,
.vocab-library-save-action:disabled {
background: var(--vocab-library-accent-soft);
color: var(--vocab-library-accent-strong);
opacity: 1;
}

.vocab-library-learn-action {
border: 1px solid var(--vocab-library-accent);
background: var(--vocab-library-accent);
color: var(--vocab-library-on-accent);
box-shadow: var(--vocab-library-shadow);
}

.vocab-library-learn-action:hover {
border-color: var(--vocab-library-accent-strong);
background: var(--vocab-library-accent-strong);
}

.vocab-library-learn-action.is-learned {
background: var(--vocab-library-accent-soft);
color: var(--vocab-library-accent-strong);
box-shadow: none;
}

.vocab-library-learn-icon {
display: grid;
width: 18px;
height: 18px;
place-items: center;
border: 1.5px solid currentColor;
border-radius: 50%;
line-height: 1;
}

.vocab-library-action-icon {
width: 18px;
height: 18px;
flex: 0 0 auto;
fill: var(--vocab-library-accent);
}

.vocab-library-speaker-icon path:last-child {
fill: none;
stroke: var(--vocab-library-accent);
stroke-width: 1.7;
stroke-linecap: round;
}

.vocab-library-sound-bars {
display: none;
gap: 2px;
align-items: center;
height: 18px;
}

.vocab-library-sound-bars i {
width: 3px;
height: 7px;
border-radius: var(--radius-round);
background: currentColor;
animation: vocab-library-sound-wave 720ms ease-in-out infinite alternate;
}

.vocab-library-sound-bars i:nth-child(2) {
height: 14px;
animation-delay: 120ms;
}

.vocab-library-sound-bars i:nth-child(3) {
height: 10px;
animation-delay: 240ms;
}

.vocab-speech-action { display:inline-grid; width:40px!important; min-width:40px!important; height:40px; min-height:40px; place-items:center; border-radius:9px; }
.vocab-speech-row { display:flex; min-width:0; align-items:center; gap:8px; }
.vocab-speech-row > :first-child { min-width:0; flex:1 1 auto; }

.reader-speech-tool.is-speaking {
border-color: color-mix(in srgb, var(--vocab-library-accent) 42%, transparent);
background: var(--vocab-library-accent-soft);
color: var(--vocab-library-accent-strong);
}

.reader-speech-tool.is-speaking .vocab-library-action-icon {
display: none;
}

.reader-speech-tool.is-speaking .vocab-library-sound-bars {
display: inline-flex;
}

.vocab-library-item-navigation {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: var(--space-3);
align-items: center;
padding: 14px 22px;
border-top: 1px solid var(--vocab-library-line);
background: var(--vocab-library-surface-soft);
}

.vocab-library-item-navigation button {
min-height: 36px;
padding: 6px 10px;
border: 0;
background: transparent;
color: var(--vocab-library-accent-strong);
font-weight: 750;
}

.vocab-library-item-navigation button:disabled {
color: var(--vocab-library-muted);
opacity: 0.4;
}

.vocab-library-item-navigation span {
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
text-align: center;
}

@keyframes vocab-library-sound-wave {
from { transform: scaleY(0.65); }
to { transform: scaleY(1.15); }
}

@media (max-width: 1120px) {
.vocab-library-lesson-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vocab-library-focus-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vocab-library-learn-action {
  grid-column: 2;
}
}

@media (max-width: 1024px) {
.vocab-library-compact-progress {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

}

@media (max-width: 760px) {
.vocab-library-overview,
.vocab-library-lesson-view {
  padding: var(--space-4);
}

.vocab-library-section-head {
  align-items: stretch;
  flex-direction: column;
}

.vocab-library-directory-tools {
  justify-content: space-between;
}

.vocab-library-filter-control {
  flex: 1;
}

.vocab-library-filter-control select {
  width: 100%;
}

.vocab-library-lesson-grid {
  grid-template-columns: 1fr;
}

.vocab-library-lesson-tile {
  min-height: 108px;
}

.vocab-library-compact-progress {
  grid-template-columns: minmax(0, 1fr);
  padding: 10px 12px;
}

.vocab-library-focus-word {
  padding-right: 0;
  padding-bottom: var(--space-4);
  border-right: 0;
  border-bottom: 1px solid var(--vocab-library-line);
}

.vocab-library-focus-example,
.vocab-library-usage-row,
.vocab-library-study-tip {
  padding-right: 20px;
  padding-left: 20px;
}

.vocab-library-focus-actions {
  grid-template-columns: 1fr 1fr;
  padding: 16px;
}

.vocab-library-learn-action {
  grid-column: 1 / -1;
}

.vocab-library-item-navigation {
  grid-template-columns: 1fr 1fr;
}

.vocab-library-item-navigation span {
  grid-column: 1 / -1;
  grid-row: 1;
}
}

@media (prefers-reduced-motion: reduce) {
.vocab-library-primary-action,
.vocab-library-level-card,
.vocab-library-lesson-tile,
.vocab-library-focus-actions button,
.vocab-library-item-navigation button,
.vocab-library-completion-actions button {
  transition: none;
}

.vocab-library-sound-bars i {
  animation: none;
}

.vocab-library-lesson-tile:hover,
.vocab-library-level-card.is-available:hover,
.vocab-library-primary-action:active,
.vocab-library-focus-actions button:active,
.vocab-library-item-navigation button:active,
.vocab-library-completion-actions button:active {
  transform: none;
}
}

@media (prefers-reduced-transparency: reduce) {
.vocab-library-status,
.vocab-library-compact-progress {
  background: var(--vocab-library-surface);
  backdrop-filter: none;
}
}

.vocab-library-overview {
padding-top: clamp(24px, 3vw, 36px);
}

.vocab-library-compact-progress {
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 14px;
padding: 11px clamp(18px, 3vw, 34px);
}

.vocab-library-compact-title {
min-width: 0;
}

.vocab-library-compact-title strong,
.vocab-library-compact-title span {
display: block;
}

.vocab-library-compact-title strong {
overflow: hidden;
color: var(--vocab-library-ink);
font-size: var(--type-size-control);
text-overflow: ellipsis;
white-space: nowrap;
}

.vocab-library-compact-title span {
margin-top: 1px;
color: var(--vocab-library-muted);
font-size: var(--type-size-micro);
}

.vocab-library-lesson-view {
padding: clamp(20px, 3vw, 34px);
background: var(--vocab-library-surface);
}

.vocab-library-level-card,
.vocab-library-level-back,
.vocab-library-filter-control select,
.vocab-library-layout-toggle button,
.vocab-library-lesson-tile,
.vocab-library-focus-actions button,
.vocab-library-item-navigation button,
.vocab-library-completion-actions button {
touch-action: manipulation;
}

#vocabLibraryLessonsTitle:focus-visible,
.vocab-library-compact-title h1:focus-visible,
.vocab-library-focus-card:focus-visible,
.vocab-library-completion-card:focus-visible {
outline: 3px solid var(--vocab-library-focus-ring);
outline-offset: 5px;
}

.vocab-library-focus-main {
padding: 22px 24px 16px;
}

.vocab-library-focus-card-head {
padding: 0 0 16px;
}

.vocab-library-focus-meta span,
.vocab-library-saved-state,
.vocab-library-learned-state {
padding: 3px 7px;
font-size: var(--type-size-micro);
}

.vocab-library-focus-grid {
display: grid;
grid-template-columns: minmax(160px, 0.55fr) minmax(170px, 0.7fr) minmax(320px, 1.6fr);
gap: 22px;
align-items: center;
}

.vocab-library-focus-word,
.vocab-library-focus-meaning {
min-height: 100px;
padding-right: 22px;
border-right: 1px solid var(--vocab-library-line);
}

.vocab-library-focus-word strong {
font-size: clamp(2.4rem, 4vw, 3.5rem);
}

.vocab-library-focus-word span {
margin-top: 7px;
font-size: var(--type-size-body-large);
}

.vocab-library-focus-meaning small,
.vocab-library-focus-example > small {
display: block;
margin-bottom: 7px;
color: var(--vocab-library-muted);
font-size: var(--type-size-micro);
font-weight: 700;
}

.vocab-library-focus-meaning strong {
margin: 0;
font-size: var(--type-size-subtitle);
}

.vocab-library-focus-example {
padding: 0;
border: 0;
background: transparent;
}

.vocab-library-focus-example p:nth-of-type(1) {
font-size: var(--type-size-body-large);
line-height: 1.55;
}

.vocab-library-focus-example p:nth-of-type(2) {
margin-top: 3px;
font-size: var(--type-size-meta);
}

.vocab-library-usage-row {
gap: 7px;
padding: 14px 0 0;
border: 0;
}

.vocab-library-usage-row span {
padding: 4px 8px;
border-radius: var(--radius-round);
background: var(--vocab-library-surface-soft);
color: var(--vocab-library-muted);
font-size: var(--type-size-micro);
}

.vocab-library-study-tip {
padding: 12px 0 0;
border: 0;
}

.vocab-library-focus-actions {
display: flex;
gap: 7px;
align-items: center;
justify-content: flex-end;
padding: 11px 18px;
border-top: 1px solid var(--vocab-library-line);
background: var(--vocab-library-surface-soft);
}

.vocab-library-focus-actions button {
min-height: 34px;
padding: 5px 10px;
border-radius: 9px;
}

.vocab-library-mini-action {
width: 34px;
min-width: 34px;
padding: 0 !important;
border: 1px solid var(--vocab-library-line);
background: var(--vocab-library-surface);
color: var(--vocab-library-accent-strong);
}

.vocab-library-mini-action .vocab-library-action-icon {
width: 16px;
height: 16px;
}

.vocab-library-mini-action.reader-speech-tool {
width: auto;
min-width: 72px;
gap: 6px;
padding: 0 10px !important;
}

.vocab-library-speech-label {
font-size: var(--type-size-caption);
font-weight: 780;
line-height: 1;
white-space: nowrap;
}

.vocab-library-learn-action {
min-width: 108px;
box-shadow: none;
}

.vocab-library-learn-icon {
width: 15px;
height: 15px;
}

.reader-speech-tool.is-speaking .vocab-library-sound-bars {
display: flex;
transform: scale(0.78);
}

.vocab-library-item-navigation {
padding: 9px 18px;
background: var(--vocab-library-surface);
}

.vocab-library-item-navigation button {
min-height: 30px;
padding: 4px 7px;
font-size: var(--type-size-caption);
}

@media (max-width: 820px) {
.vocab-library-focus-grid {
  grid-template-columns: minmax(140px, 0.65fr) minmax(0, 1.35fr);
}

.vocab-library-focus-word {
  border-right: 1px solid var(--vocab-library-line);
}

.vocab-library-focus-meaning {
  padding-right: 0;
  border-right: 0;
}

.vocab-library-focus-example {
  grid-column: 1 / -1;
  padding-top: 16px;
  border-top: 1px solid var(--vocab-library-line);
}
}

@media (max-width: 760px) {
.vocab-library-compact-progress {
  grid-template-columns: minmax(0, 1fr);
}

.vocab-library-focus-main {
  padding: 18px 18px 12px;
}

.vocab-library-focus-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}

.vocab-library-focus-word,
.vocab-library-focus-meaning {
  min-height: 0;
  padding: 0 0 14px;
  border-right: 0;
  border-bottom: 1px solid var(--vocab-library-line);
}

.vocab-library-focus-example {
  grid-column: auto;
  padding-top: 0;
  border-top: 0;
}

.vocab-library-focus-actions {
  display: flex;
  padding: 10px 12px;
}

.vocab-library-learn-action {
  margin-left: auto;
}
}


.vocab-library-directory-context {
display: flex;
min-height: 70px;
align-items: center;
gap: 18px;
padding: 14px clamp(20px, 3vw, 34px);
border-bottom: 1px solid var(--vocab-library-line);
background: var(--vocab-library-surface);
}

.vocab-library-level-back {
display: inline-flex;
min-height: 36px;
align-items: center;
gap: 7px;
padding: 6px 10px;
border: 1px solid var(--vocab-library-line);
border-radius: 10px;
background: var(--vocab-library-surface);
color: var(--vocab-library-accent-strong);
font-size: var(--type-size-caption);
font-weight: 750;
}

.vocab-library-directory-context > div {
display: flex;
min-width: 0;
align-items: baseline;
gap: 10px;
}

.vocab-library-directory-context strong {
color: var(--vocab-library-ink);
font-size: var(--type-size-control);
}

.vocab-library-directory-context div span {
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
}

.vocab-library-course-progress {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(180px, 280px);
gap: 18px;
align-items: center;
padding: 12px clamp(20px, 3vw, 34px);
border-bottom: 1px solid var(--vocab-library-line);
background: var(--vocab-library-accent-faint);
}

.vocab-library-course-progress-copy strong,
.vocab-library-course-progress-copy span {
display: block;
}

.vocab-library-course-progress-copy strong {
color: var(--vocab-library-ink);
font-size: var(--type-size-caption);
}

.vocab-library-course-progress-copy span {
margin-top: 2px;
color: var(--vocab-library-muted);
font-size: var(--type-size-micro);
}

.vocab-library-course-progress-track {
height: 5px;
overflow: hidden;
border-radius: var(--radius-round);
background: color-mix(in srgb, var(--vocab-library-accent) 13%, transparent);
}

.vocab-library-course-progress-track i {
display: block;
height: 100%;
border-radius: inherit;
background: var(--vocab-library-accent);
}

.vocab-library-completion-view {
display: grid;
min-height: 520px;
place-items: center;
padding: clamp(24px, 5vw, 56px);
background: linear-gradient(180deg, var(--vocab-library-surface), var(--vocab-library-accent-faint));
}

.vocab-library-completion-card {
width: min(720px, 100%);
padding: clamp(28px, 5vw, 48px);
border: 1px solid var(--vocab-library-line);
border-radius: 22px;
background: var(--vocab-library-surface);
box-shadow: var(--vocab-library-shadow);
text-align: center;
}

.vocab-library-completion-kicker {
color: var(--vocab-library-accent-strong);
font-size: var(--type-size-caption);
font-weight: 850;
letter-spacing: 0.08em;
}

.vocab-library-completion-mark {
display: grid;
width: 58px;
height: 58px;
margin: 18px auto 0;
place-items: center;
border-radius: 18px;
background: var(--vocab-library-accent);
color: var(--vocab-library-on-accent);
font-size: var(--type-size-section-title-large);
font-weight: 850;
}

.vocab-library-completion-card h1 {
margin: 18px 0 0;
color: var(--vocab-library-ink);
font-family: var(--font-display);
font-size: clamp(1.8rem, 4vw, 2.6rem);
letter-spacing: -0.035em;
}

.vocab-library-completion-card > p {
max-width: 560px;
margin: 10px auto 0;
color: var(--vocab-library-muted);
line-height: 1.7;
}

.vocab-library-completion-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 26px;
overflow: hidden;
border: 1px solid var(--vocab-library-line);
border-radius: 14px;
background: var(--vocab-library-accent-faint);
}

.vocab-library-completion-stats span {
padding: 16px 10px;
}

.vocab-library-completion-stats span + span {
border-left: 1px solid var(--vocab-library-line);
}

.vocab-library-completion-stats strong,
.vocab-library-completion-stats small {
display: block;
}

.vocab-library-completion-stats strong {
color: var(--vocab-library-accent-strong);
font-size: var(--type-size-subtitle);
}

.vocab-library-completion-stats small {
margin-top: 3px;
color: var(--vocab-library-muted);
font-size: var(--type-size-micro);
}

.vocab-library-completion-note {
padding: 9px 12px;
border-radius: 10px;
background: var(--vocab-library-accent-soft);
color: var(--vocab-library-accent-strong) !important;
font-size: var(--type-size-caption);
}

.vocab-library-completion-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-top: 26px;
}

.vocab-library-completion-actions button {
min-height: 42px;
padding: 8px 16px;
border-radius: 11px;
font-weight: 800;
}

.vocab-library-completion-actions .vocab-library-primary-action {
border-color: var(--vocab-library-accent);
background: var(--vocab-library-accent);
color: var(--vocab-library-on-accent);
box-shadow: none;
}

.vocab-library-secondary-action {
border: 1px solid var(--vocab-library-line);
background: var(--vocab-library-surface);
color: var(--vocab-library-accent-strong);
}

.vocab-library-overview {
padding-top: clamp(22px, 3vw, 32px);
}

.vocab-library-compact-progress {
grid-template-columns: minmax(0, 1fr);
align-items: center;
padding: 12px clamp(18px, 3vw, 34px);
}

.vocab-library-compact-title h1 {
overflow: hidden;
margin: 0;
color: var(--vocab-library-ink);
font-size: var(--type-size-control);
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}

.vocab-library-compact-title > span {
display: block;
margin-top: 2px;
color: var(--vocab-library-muted);
font-size: var(--type-size-micro);
}

.vocab-library-compact-title > span > span {
color: var(--vocab-library-accent-strong);
font-weight: 650;
}

.vocab-library-lesson-view {
padding: clamp(20px, 3vw, 34px);
}

.vocab-library-item-navigation button:last-child:not(:disabled) {
color: var(--vocab-library-accent-strong);
font-weight: 750;
}

@media (max-width: 760px) {
.vocab-library-directory-context {
  min-height: 64px;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
}

.vocab-library-directory-context > div {
  display: grid;
  gap: 1px;
}

.vocab-library-course-progress {
  grid-template-columns: 1fr;
  gap: 9px;
  padding: 11px 16px;
}

.vocab-library-completion-view {
  min-height: 0;
  padding: 20px 14px 28px;
}

.vocab-library-completion-card {
  padding: 26px 18px;
  border-radius: 17px;
}

.vocab-library-completion-stats span {
  padding: 13px 5px;
}

.vocab-library-completion-actions {
  display: grid;
  grid-template-columns: 1fr;
}

.vocab-library-completion-actions button {
  min-height: 44px;
  width: 100%;
}

.vocab-library-level-back,
.vocab-library-filter-control select,
.vocab-library-layout-toggle button,
.vocab-library-focus-actions button,
.vocab-library-item-navigation button {
  min-height: 44px;
}

.vocab-library-layout-toggle button,
.vocab-library-mini-action {
  width: 44px;
  min-width: 44px;
}

.vocab-library-compact-progress {
  grid-template-columns: minmax(0, 1fr);
  padding: 11px 14px;
}

.vocab-library-lesson-view {
  padding: 18px 14px 24px;
}
}

.vocab-library-lesson-number {
flex: 0 0 auto;
padding: 0;
color: var(--vocab-library-muted);
font-size: var(--type-size-micro);
font-weight: var(--type-weight-medium);
}

.vocab-library-level-back {
gap: 0;
}

.vocab-library-compact-title h1 {
display: flex;
min-width: 0;
align-items: baseline;
gap: 8px;
font-family: var(--font-ui);
font-size: var(--type-size-emphasis);
font-weight: var(--type-weight-semibold);
letter-spacing: -0.01em;
white-space: nowrap;
}

.vocab-library-compact-title h1 > .vocab-library-lesson-number,
.vocab-library-compact-title h1 > .vocab-library-lesson-title,
.vocab-library-compact-title h1 > span:last-child {
overflow: hidden;
text-overflow: ellipsis;
}

.vocab-library-compact-title h1 > .vocab-library-lesson-number {
overflow: visible;
font-size: var(--type-size-meta);
white-space: nowrap;
}

.vocab-library-compact-title h1 > .vocab-library-lesson-title,
.vocab-library-compact-title h1 > span:last-child {
color: var(--vocab-library-ink);
font-size: inherit;
font-weight: inherit;
}

.vocab-library-compact-title h1 > span:last-child {
font-family: var(--type-font-ui-ja);
}

.vocab-library-title-divider {
flex: 0 0 auto;
color: var(--vocab-library-line-strong);
font-weight: var(--type-weight-regular);
}

.vocab-library-focus-grid {
grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.65fr);
gap: 26px;
align-items: stretch;
}

.vocab-library-focus-word {
display: flex;
min-width: 0;
min-height: 152px;
flex-direction: column;
justify-content: center;
padding-right: 26px;
border-right: 1px solid var(--vocab-library-line);
}

.vocab-library-word-lockup {
display: inline-grid;
width: 100%;
min-width: 0;
max-width: 100%;
grid-template-rows: auto auto;
align-items: center;
align-self: flex-start;
justify-items: center;
}

.vocab-library-word-lockup strong {
grid-row: 2;
}

.vocab-library-word-lockup span {
max-width: 100%;
grid-row: 1;
margin: 0 0 5px;
overflow: visible;
overflow-wrap: anywhere;
text-align: center;
text-overflow: clip;
white-space: normal;
word-break: normal;
}

.vocab-library-focus-word strong {
max-width: 100%;
overflow: visible;
font-family: var(--font-reading);
font-size: clamp(var(--type-size-display), 4.6vw, var(--type-size-hero-max));
font-weight: var(--type-weight-semibold);
line-height: 1.08;
letter-spacing: -0.04em;
overflow-wrap: anywhere;
text-align: center;
text-overflow: clip;
white-space: normal;
word-break: normal;
}

.vocab-library-focus-word.is-word-long strong {
font-size: clamp(var(--type-size-page-title), 3.8vw, var(--type-size-hero-large));
letter-spacing: -0.045em;
}

.vocab-library-focus-word.is-word-extra-long strong {
font-size: clamp(var(--type-size-feature-title), 3.2vw, var(--type-size-hero-wide));
}

.vocab-library-focus-word span {
font-family: var(--font-reading);
font-size: var(--type-size-emphasis);
}

.vocab-library-focus-details {
display: grid;
min-width: 0;
align-content: center;
gap: 18px;
}

.vocab-library-focus-meaning {
min-height: 0;
padding: 0 0 18px;
border-right: 0;
border-bottom: 1px solid var(--vocab-library-line);
}

.vocab-library-focus-meaning strong {
font-family: var(--font-ui);
font-size: var(--type-size-subtitle);
font-weight: var(--type-weight-semibold);
line-height: var(--type-line-ui);
}

.vocab-library-focus-example {
padding: 0;
border: 0;
background: transparent;
}

.vocab-library-focus-example p:nth-of-type(1) {
font-family: var(--font-reading);
font-size: var(--type-size-emphasis);
line-height: var(--type-line-body);
}

.vocab-library-focus-example p:nth-of-type(2) {
font-family: var(--font-ui);
font-size: var(--type-size-control);
}

.vocab-library-focus-meta span,
.vocab-library-saved-state {
font-family: var(--font-ui);
}

.vocab-library-learned-state,
.vocab-library-learn-icon {
display: none;
}

.vocab-library-focus-actions button {
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.vocab-library-learn-action {
min-width: 104px;
}

.vocab-library-completion-card {
box-shadow: var(--vocab-library-shadow);
}

.vocab-library-completion-stats {
margin-top: 26px;
overflow: visible;
border: 0;
border-top: 1px solid var(--vocab-library-line);
border-bottom: 1px solid var(--vocab-library-line);
border-radius: 0;
background: transparent;
}

.vocab-library-completion-actions {
gap: 12px;
}

@media (max-width: 820px) {
.vocab-library-focus-grid {
  grid-template-columns: minmax(180px, 0.75fr) minmax(0, 1.4fr);
}

.vocab-library-focus-word {
  min-height: 140px;
}
}

@media (max-width: 760px) {
.vocab-library-compact-progress {
  grid-template-columns: minmax(0, 1fr);
}

.vocab-library-compact-title h1 {
  gap: 6px;
  font-size: var(--type-size-control);
}

.vocab-library-focus-main {
  padding: 16px 16px 10px;
}

.vocab-library-focus-card-head {
  padding-bottom: 10px;
}

.vocab-library-focus-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.vocab-library-focus-word {
  min-height: 0;
  padding: 0 0 12px;
  border-right: 0;
  border-bottom: 1px solid var(--vocab-library-line);
}

.vocab-library-focus-word strong,
.vocab-library-focus-word.is-word-long strong,
.vocab-library-focus-word.is-word-extra-long strong {
  font-size: clamp(var(--type-size-page-title), 12vw, var(--type-size-hero-max));
}

.vocab-library-focus-details {
  gap: 10px;
}

.vocab-library-focus-meaning {
  padding-bottom: 10px;
}

.vocab-library-usage-row {
  padding-top: 10px;
}

.vocab-library-study-tip {
  padding-top: 8px;
}

.vocab-library-focus-actions {
  padding: 8px 10px;
}

.vocab-library-mini-action.reader-speech-tool {
  width: auto;
  min-width: 64px;
  gap: 4px;
  padding: 0 7px !important;
}

.vocab-library-item-navigation {
  padding: 7px 10px;
}
}

.vocab-library-conjugation {
margin-top: 10px;
padding: 22px 0 4px;
border-top: 1px solid var(--vocab-library-line);
}

.vocab-library-conjugation-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 12px;
}

.vocab-library-conjugation-kicker,
.vocab-library-conjugation-head h2,
.vocab-library-conjugation-type,
.vocab-library-conjugation-form span,
.vocab-library-conjugation-form small,
.vocab-library-conjugation-expanded summary,
.vocab-library-conjugation-rule {
font-family: var(--font-ui);
}

.vocab-library-conjugation-kicker {
display: block;
margin-bottom: 3px;
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
font-weight: var(--type-weight-medium);
}

.vocab-library-conjugation-head h2 {
margin: 0;
color: var(--vocab-library-ink);
font-size: var(--type-size-subtitle);
font-weight: var(--type-weight-semibold);
line-height: var(--type-line-ui);
}

.vocab-library-conjugation-type {
flex: 0 0 auto;
padding: 5px 9px;
border-radius: var(--radius-round);
background: var(--vocab-library-accent-soft);
color: var(--vocab-library-accent-strong);
font-size: var(--type-size-caption);
font-weight: var(--type-weight-semibold);
}

.vocab-library-conjugation-grid {
display: grid;
gap: 8px;
}

.vocab-library-conjugation-grid.is-core {
grid-template-columns: repeat(5, minmax(0, 1fr));
}

.vocab-library-conjugation-grid.is-expanded {
grid-template-columns: repeat(3, minmax(0, 1fr));
padding: 12px 0 2px;
}

.vocab-library-conjugation-form {
min-width: 0;
padding: 12px;
border: 1px solid var(--vocab-library-line);
border-radius: 11px;
background: var(--vocab-library-surface-soft);
}

.vocab-library-conjugation-form span,
.vocab-library-conjugation-form strong,
.vocab-library-conjugation-form small {
display: block;
}

.vocab-library-conjugation-form span {
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
font-weight: var(--type-weight-medium);
}

.vocab-library-conjugation-form strong {
margin-top: 5px;
color: var(--vocab-library-ink);
font-family: var(--font-reading);
font-size: var(--type-size-emphasis);
font-weight: var(--type-weight-semibold);
line-height: var(--type-line-ui);
overflow-wrap: anywhere;
word-break: keep-all;
}

.vocab-library-conjugation-form small {
margin-top: 3px;
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
line-height: var(--type-line-ui);
overflow-wrap: anywhere;
}

.vocab-library-conjugation-form.is-unavailable {
opacity: 0.68;
}

.vocab-library-conjugation-expanded {
margin-top: 10px;
border-top: 1px solid var(--vocab-library-line);
border-bottom: 1px solid var(--vocab-library-line);
}

.vocab-library-conjugation-expanded summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 2px;
color: var(--vocab-library-accent-strong);
cursor: pointer;
font-size: var(--type-size-control);
font-weight: var(--type-weight-semibold);
list-style-position: inside;
}

.vocab-library-conjugation-expanded summary small {
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
font-weight: var(--type-weight-medium);
}

.vocab-library-conjugation-expanded summary:focus-visible {
outline: 2px solid var(--vocab-library-accent);
outline-offset: 3px;
border-radius: 6px;
}

.vocab-library-conjugation-rule {
display: flex;
gap: 8px;
margin: 12px 0 0;
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
line-height: var(--type-line-body);
}

.vocab-library-conjugation-rule strong {
flex: 0 0 auto;
color: var(--vocab-library-ink);
font-weight: var(--type-weight-semibold);
}

.vocab-library-conjugation-rule.is-access-note {
flex-wrap: wrap;
align-items: center;
}

.vocab-library-conjugation-rule.is-access-note > span {
flex: 1 1 180px;
}

.vocab-library-conjugation-plus-action {
min-height: 36px;
margin-left: auto;
border: 0;
padding: 6px 2px;
background: transparent;
color: var(--vocab-library-accent);
cursor: pointer;
font: inherit;
font-weight: var(--type-weight-semibold);
}

@media (max-width: 820px) {
.vocab-library-conjugation-grid.is-core {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vocab-library-conjugation-grid.is-expanded {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 760px) {
.vocab-library-conjugation {
  padding-top: 16px;
}

.vocab-library-conjugation-head {
  flex-wrap: wrap;
}

.vocab-library-conjugation-grid.is-core {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vocab-library-conjugation-grid.is-expanded {
  grid-template-columns: 1fr;
}
}

.vocab-library-conjugation-practice {
margin-top: 14px;
border-top: 1px solid var(--vocab-library-line);
}

.vocab-library-conjugation-practice > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 2px;
color: var(--vocab-library-accent-strong);
cursor: pointer;
font-family: var(--font-ui);
font-size: var(--type-size-control);
font-weight: var(--type-weight-semibold);
list-style-position: inside;
}

.vocab-library-conjugation-practice > summary small {
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
font-weight: var(--type-weight-medium);
}

.vocab-library-conjugation-practice > summary:focus-visible {
outline: 2px solid var(--vocab-library-accent);
outline-offset: 3px;
border-radius: 6px;
}

.vocab-library-conjugation-practice-body {
padding: 2px 0 8px;
}

.vocab-library-conjugation-practice-scopes,
.vocab-library-conjugation-practice-modes {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}

.vocab-library-conjugation-practice-modes {
margin-bottom: 12px;
}

.vocab-library-conjugation-practice-scope,
.vocab-library-conjugation-practice-mode {
appearance: none;
min-height: 36px;
padding: 7px 11px;
border: 1px solid var(--vocab-library-line);
border-radius: var(--radius-round);
background: var(--vocab-library-surface);
color: var(--vocab-library-muted);
cursor: pointer;
font-family: var(--font-ui);
font-size: var(--type-size-caption);
font-weight: var(--type-weight-semibold);
}

.vocab-library-conjugation-practice-scope:hover,
.vocab-library-conjugation-practice-scope.is-active,
.vocab-library-conjugation-practice-mode:hover,
.vocab-library-conjugation-practice-mode.is-active {
border-color: var(--vocab-library-accent);
background: var(--vocab-library-accent-soft);
color: var(--vocab-library-accent-strong);
}

.vocab-library-conjugation-practice-scope:disabled {
cursor: not-allowed;
opacity: 0.55;
}

.vocab-library-conjugation-practice-scope:focus-visible,
.vocab-library-conjugation-practice-mode:focus-visible,
.vocab-library-conjugation-practice-answer input:focus-visible,
.vocab-library-conjugation-practice-answer button:focus-visible {
outline: 2px solid var(--vocab-library-accent);
outline-offset: 2px;
}

.vocab-library-conjugation-practice-question {
padding: 14px;
border: 1px solid var(--vocab-library-line);
border-radius: 12px;
background: var(--vocab-library-surface-soft);
}

.vocab-library-conjugation-practice-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
margin-bottom: 8px;
color: var(--vocab-library-muted);
font-family: var(--font-ui);
font-size: var(--type-size-caption);
}

.vocab-library-conjugation-practice-question > strong,
.vocab-library-conjugation-practice-question > small {
display: block;
overflow-wrap: anywhere;
}

.vocab-library-conjugation-practice-question > strong {
color: var(--vocab-library-ink);
font-family: var(--font-reading);
font-size: var(--type-size-subtitle);
font-weight: var(--type-weight-semibold);
line-height: var(--type-line-ui);
}

.vocab-library-conjugation-practice-question > small {
margin-top: 4px;
color: var(--vocab-library-muted);
font-family: var(--font-reading);
font-size: var(--type-size-caption);
}

.vocab-library-conjugation-practice-answer {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
margin-top: 10px;
}

.vocab-library-conjugation-practice-answer input,
.vocab-library-conjugation-practice-answer button {
min-height: 42px;
border-radius: 10px;
font-family: var(--font-ui);
font-size: var(--type-size-control);
}

.vocab-library-conjugation-practice-answer input {
min-width: 0;
padding: 8px 11px;
border: 1px solid var(--vocab-library-line-strong);
background: var(--vocab-library-surface);
color: var(--vocab-library-ink);
}

.vocab-library-conjugation-practice-answer button {
padding: 8px 14px;
border: 0;
background: var(--vocab-library-accent);
color: var(--vocab-library-on-accent);
cursor: pointer;
font-weight: var(--type-weight-semibold);
}

.vocab-library-conjugation-practice-feedback {
min-height: 22px;
margin: 8px 0 0;
color: var(--vocab-library-muted);
font-family: var(--font-ui);
font-size: var(--type-size-caption);
line-height: var(--type-line-body);
}

.vocab-library-conjugation-practice-feedback strong {
margin-right: 8px;
color: var(--vocab-library-ink);
}

.vocab-library-conjugation-practice-feedback.is-correct strong {
color: var(--learning-success, var(--vocab-library-accent-strong));
}

.vocab-library-conjugation-practice-feedback.is-wrong strong,
.vocab-library-conjugation-practice-feedback.is-warning {
color: var(--vocab-library-danger);
}

@media (max-width: 520px) {
.vocab-library-conjugation-practice-answer {
  grid-template-columns: 1fr;
}

.vocab-library-conjugation-practice-answer button {
  width: 100%;
}
}

.vocab-library-relations {
margin-top: 22px;
padding-top: 22px;
border-top: 1px solid var(--vocab-library-line);
font-family: var(--font-ui);
}

.vocab-library-relations-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}

.vocab-library-relations-head > div > span {
display: block;
margin-bottom: 4px;
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
font-weight: var(--type-weight-medium);
}

.vocab-library-relations-head h2 {
margin: 0;
color: var(--vocab-library-ink);
font-size: var(--type-size-subtitle);
font-weight: var(--type-weight-semibold);
line-height: var(--type-line-ui);
}

.vocab-library-relations-head > small,
.vocab-library-relation-family {
flex: 0 0 auto;
padding: 5px 9px;
border-radius: var(--radius-round);
background: var(--vocab-library-accent-soft);
color: var(--vocab-library-accent-strong);
font-size: var(--type-size-caption);
font-weight: var(--type-weight-semibold);
}

.vocab-library-relations-intro,
.vocab-library-relations-more {
margin: 8px 0 0;
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
line-height: var(--type-line-body);
}

.vocab-library-relation-list {
display: grid;
gap: 12px;
margin-top: 14px;
}

.vocab-library-relation-card {
padding: 16px;
border: 1px solid var(--vocab-library-line);
border-radius: 14px;
background: var(--vocab-library-surface-soft);
}

.vocab-library-relation-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}

.vocab-library-relation-wordline {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
min-width: 0;
}

.vocab-library-relation-wordline strong {
color: var(--vocab-library-ink);
font-family: var(--font-reading);
font-size: var(--type-size-emphasis);
font-weight: var(--type-weight-semibold);
}

.vocab-library-relation-wordline small {
color: var(--vocab-library-muted);
font-family: var(--font-reading);
font-size: var(--type-size-caption);
}

.vocab-library-relation-wordline i {
color: var(--vocab-library-muted);
font-style: normal;
}

.vocab-library-relation-rule {
margin: 10px 0 0;
color: var(--vocab-library-ink);
font-size: var(--type-size-control);
line-height: var(--type-line-body);
}

.vocab-library-relation-members {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 12px;
}

.vocab-library-relation-member {
min-width: 0;
padding: 12px;
border: 1px solid var(--vocab-library-line);
border-radius: 11px;
background: var(--vocab-library-surface);
}

.vocab-library-relation-member.is-current {
border-color: var(--vocab-library-accent);
}

.vocab-library-relation-member-word {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}

.vocab-library-relation-member-word strong {
color: var(--vocab-library-ink);
font-family: var(--font-reading);
font-size: var(--type-size-control);
font-weight: var(--type-weight-semibold);
}

.vocab-library-relation-member-word small {
color: var(--vocab-library-muted);
font-family: var(--font-reading);
font-size: var(--type-size-caption);
}

.vocab-library-relation-member-word > span {
padding: 2px 6px;
border-radius: var(--radius-round);
background: var(--vocab-library-accent-soft);
color: var(--vocab-library-accent-strong);
font-size: var(--type-size-caption);
font-weight: var(--type-weight-semibold);
}

.vocab-library-relation-member p {
margin: 7px 0 0;
color: var(--vocab-library-ink);
font-size: var(--type-size-caption);
line-height: var(--type-line-body);
}

.vocab-library-relation-member > small {
display: block;
margin-top: 7px;
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
line-height: var(--type-line-body);
}

.vocab-library-relation-examples {
margin-top: 12px;
border-top: 1px solid var(--vocab-library-line);
}

.vocab-library-relation-examples summary {
padding: 12px 1px 4px;
color: var(--vocab-library-accent-strong);
cursor: pointer;
font-size: var(--type-size-control);
font-weight: var(--type-weight-semibold);
list-style-position: inside;
}

.vocab-library-relation-examples summary:focus-visible,
.vocab-library-relation-practice-start:focus-visible,
.vocab-library-relation-practice-options button:focus-visible {
outline: 2px solid var(--vocab-library-accent);
outline-offset: 3px;
}

.vocab-library-relation-example-list {
display: grid;
gap: 8px;
padding-top: 8px;
}

.vocab-library-relation-example {
padding: 11px 12px;
border-radius: 10px;
background: var(--vocab-library-surface);
}

.vocab-library-relation-example > span,
.vocab-library-relation-example > small {
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
line-height: var(--type-line-body);
}

.vocab-library-relation-example p {
margin: 5px 0 0;
color: var(--vocab-library-ink);
font-size: var(--type-size-control);
line-height: var(--type-line-body);
}

.vocab-library-relation-example p[lang="ja"] {
font-family: var(--font-reading);
font-weight: var(--type-weight-medium);
}

.vocab-library-relation-example > small {
display: block;
margin-top: 7px;
}

.vocab-library-relation-practice-start {
min-height: 40px;
margin-top: 12px;
padding: 8px 13px;
border: 1px solid var(--vocab-library-accent);
border-radius: 10px;
background: var(--vocab-library-surface);
color: var(--vocab-library-accent-strong);
cursor: pointer;
font-family: var(--font-ui);
font-size: var(--type-size-control);
font-weight: var(--type-weight-semibold);
}

.vocab-library-relation-practice-note {
margin: 12px 0 0;
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
line-height: var(--type-line-body);
}

.vocab-library-relation-practice {
margin-top: 12px;
padding: 12px;
border-top: 1px solid var(--vocab-library-line);
}

.vocab-library-relation-practice > span {
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
font-weight: var(--type-weight-semibold);
}

.vocab-library-relation-practice > p {
margin: 5px 0 0;
color: var(--vocab-library-ink);
font-size: var(--type-size-control);
line-height: var(--type-line-body);
}

.vocab-library-relation-practice-options {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}

.vocab-library-relation-practice-options button {
min-width: 92px;
min-height: 40px;
padding: 8px 12px;
border: 1px solid var(--vocab-library-line-strong);
border-radius: 10px;
background: var(--vocab-library-surface);
color: var(--vocab-library-ink);
cursor: pointer;
font-family: var(--font-reading);
font-size: var(--type-size-control);
font-weight: var(--type-weight-semibold);
}

.vocab-library-relation-practice-options button.is-correct {
border-color: var(--learning-success, var(--vocab-library-accent));
color: var(--learning-success, var(--vocab-library-accent-strong));
}

.vocab-library-relation-practice-options button.is-wrong {
border-color: var(--vocab-library-danger);
color: var(--vocab-library-danger);
}

.vocab-library-relation-practice-result {
margin-top: 10px;
padding: 10px 12px;
border-radius: 10px;
background: var(--vocab-library-surface);
}

.vocab-library-relation-practice-result strong {
color: var(--vocab-library-danger);
font-size: var(--type-size-control);
}

.vocab-library-relation-practice-result.is-correct strong {
color: var(--learning-success, var(--vocab-library-accent-strong));
}

.vocab-library-relation-practice-result p,
.vocab-library-relation-practice-result small {
display: block;
margin: 5px 0 0;
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
line-height: var(--type-line-body);
}

.vocab-library-relation-practice-result small {
font-family: var(--font-reading);
}

@media (max-width: 760px) {
.vocab-library-relations {
  margin-top: 18px;
  padding-top: 18px;
}

.vocab-library-relations-head,
.vocab-library-relation-card-head {
  flex-wrap: wrap;
}

.vocab-library-relation-members {
  grid-template-columns: 1fr;
}
}

@media (max-width: 520px) {
.vocab-library-relation-card {
  padding: 13px;
}

.vocab-library-relation-practice-start,
.vocab-library-relation-practice-options button {
  width: 100%;
}
}

.vocab-topic-page-head,
.vocab-topic-group-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-5);
padding: 8px 2px 18px;
}

.vocab-topic-group-head > div {
min-width: 0;
}

.vocab-topic-group-head > div > span,
.vocab-topic-rule > small,
.vocab-topic-current small {
color: var(--vocab-library-accent-strong);
font-size: var(--type-size-caption);
font-weight: var(--type-weight-semibold);
}

.vocab-topic-group-head > div > span {
font-family: var(--font-ui-zh);
letter-spacing: 0;
}

.vocab-topic-page-head h1,
.vocab-topic-group-head h1 {
margin: 0;
color: var(--vocab-library-ink);
font-size: clamp(var(--type-size-section-title-large), 3.2vw, var(--type-size-page-title));
font-weight: var(--type-weight-semibold);
line-height: 1.18;
}

.vocab-topic-page-head h1,
.vocab-topic-group-head h1.vocab-summary-unit-title {
font-family: var(--font-ui-zh);
letter-spacing: 0;
}

.vocab-topic-group-head h1:not(.vocab-summary-unit-title) {
font-family: var(--font-reading);
letter-spacing: -.025em;
}

.vocab-topic-group-head > div > small {
display: block;
margin-top: 6px;
color: var(--vocab-library-muted);
font-family: var(--font-reading);
font-size: var(--type-size-control);
}

.vocab-topic-page-head > strong,
.vocab-topic-group-head > span {
flex: 0 0 auto;
padding: 7px 11px;
border-radius: var(--radius-round);
background: var(--vocab-library-accent-soft);
color: var(--vocab-library-accent-strong);
font-size: var(--type-size-caption);
font-weight: var(--type-weight-semibold);
}

.vocab-topic-continue {
width: 100%;
min-height: 74px;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-4);
padding: 15px 18px;
border: 1px solid var(--vocab-library-line);
border-radius: var(--learning-radius-card);
color: var(--vocab-library-ink);
text-align: left;
cursor: pointer;
}

.vocab-topic-continue strong {
font-size: var(--type-size-control);
font-weight: var(--type-weight-semibold);
}

.vocab-topic-continue > span:last-child {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--vocab-library-accent-strong);
font-size: var(--type-size-caption);
font-weight: var(--type-weight-semibold);
}

.vocab-topic-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
}

.vocab-topic-card {
position: relative;
min-width: 0;
min-height: 126px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-3);
padding: 20px 18px 24px;
overflow: hidden;
border: 1px solid var(--vocab-library-line);
border-radius: var(--learning-radius-card);
color: var(--vocab-library-ink);
text-align: left;
cursor: pointer;
}

.vocab-topic-card:hover,
.vocab-topic-card:focus-visible,
.vocab-topic-continue:hover,
.vocab-topic-continue:focus-visible {
border-color: var(--vocab-library-line-strong) !important;
background: var(--vocab-library-surface-soft) !important;
}

.vocab-topic-card:focus-visible,
.vocab-topic-continue:focus-visible,
.vocab-topic-path summary:focus-visible,
.vocab-topic-path-list button:focus-visible,
.vocab-topic-member header button:focus-visible,
.vocab-topic-member summary:focus-visible,
.vocab-topic-examples summary:focus-visible,
.vocab-topic-practice-start:focus-visible,
.vocab-topic-practice-options button:focus-visible,
.vocab-topic-group-actions button:focus-visible {
outline: 2px solid var(--vocab-library-accent);
outline-offset: 3px;
}

.vocab-topic-card > strong {
min-width: 0;
color: var(--vocab-library-ink);
font-size: var(--type-size-emphasis);
font-weight: var(--type-weight-semibold);
}

.vocab-topic-card-meta {
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
font-weight: var(--type-weight-medium);
white-space: nowrap;
}

.vocab-topic-card.is-complete .vocab-topic-card-meta {
color: var(--vocab-library-accent-strong);
}

.vocab-topic-card-track {
position: absolute;
left: 18px;
right: 18px;
bottom: 12px;
height: 4px;
overflow: hidden;
border-radius: var(--radius-round);
background: var(--vocab-library-accent-soft);
}

.vocab-topic-card-track i,
.vocab-topic-progress i {
display: block;
height: 100%;
border-radius: inherit;
background: var(--vocab-library-accent);
}

.vocab-topic-progress {
height: 6px;
margin-bottom: var(--space-4);
overflow: hidden;
border-radius: var(--radius-round);
background: var(--vocab-library-accent-soft);
}

.vocab-topic-current {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-5);
padding: 22px;
border: 1px solid var(--vocab-library-line);
border-radius: var(--learning-radius-card);
}

.vocab-topic-current h2 {
margin: 5px 0 0;
color: var(--vocab-library-ink);
font-family: var(--font-reading);
font-size: var(--type-size-section-title-large);
font-weight: var(--type-weight-semibold);
}

.vocab-topic-current p {
max-width: 720px;
margin: 8px 0 0;
color: var(--vocab-library-muted);
font-size: var(--type-size-control);
line-height: var(--type-line-body);
}

.vocab-topic-current > button {
min-width: 124px;
min-height: 44px;
}

.vocab-topic-path {
margin-top: var(--space-4);
border-top: 1px solid var(--vocab-library-line);
border-bottom: 1px solid var(--vocab-library-line);
}

.vocab-topic-path > summary,
.vocab-topic-member summary,
.vocab-topic-examples details > summary,
.vocab-topic-rule summary {
cursor: pointer;
color: var(--vocab-library-accent-strong);
font-size: var(--type-size-control);
font-weight: var(--type-weight-semibold);
list-style-position: inside;
}

.vocab-topic-path > summary {
display: flex;
justify-content: space-between;
gap: var(--space-3);
padding: 15px 2px;
}

.vocab-topic-path > summary small {
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
}

.vocab-topic-path-list {
display: grid;
gap: 1px;
padding: 0 0 14px;
}

.vocab-topic-path-list button {
min-height: 48px;
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-3);
padding: 8px 10px;
border: 0;
border-radius: 9px;
background: transparent;
color: var(--vocab-library-ink);
text-align: left;
cursor: pointer;
}

.vocab-topic-path-list button:hover { background: var(--vocab-library-surface-soft); }
.vocab-topic-path-list button > span { color: var(--vocab-library-muted); font-size: var(--type-size-caption); }
.vocab-topic-path-list button > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-reading); font-size: var(--type-size-control); }
.vocab-topic-current h2[lang="zh-CN"],
.vocab-topic-path-list button > strong[lang="zh-CN"] { font-family: var(--font-ui-zh); letter-spacing: 0; }
.vocab-topic-path-list button > small { color: var(--vocab-library-muted); font-size: var(--type-size-caption); }
.vocab-topic-path-list button.is-complete > small { color: var(--vocab-library-accent-strong); }

.vocab-topic-rule {
padding: 20px 22px;
border: 1px solid var(--vocab-library-line);
border-radius: var(--learning-radius-card);
}

.vocab-topic-rule > p {
margin: 6px 0 0;
color: var(--vocab-library-ink);
font-size: var(--type-size-emphasis);
line-height: var(--type-line-body);
}

.vocab-topic-rule details { margin-top: 12px; }
.vocab-topic-rule details p { margin: 7px 0 0; color: var(--vocab-library-muted); font-size: var(--type-size-caption); line-height: var(--type-line-body); }

.vocab-topic-members {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
margin-top: var(--space-3);
}

.vocab-topic-member {
min-width: 0;
padding: 18px;
border: 1px solid var(--vocab-library-line);
border-radius: var(--learning-radius-card);
background: var(--vocab-library-surface);
}

.vocab-topic-member header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
}

.vocab-topic-member-title-row { display: flex; min-width: 0; align-items: center; gap: 8px; }
.vocab-topic-member-word-lockup { min-width: 0; display: grid; gap: 2px; }

.vocab-topic-member header strong {
color: var(--vocab-library-ink);
font-family: var(--font-reading);
font-size: var(--type-size-section-title-large);
font-weight: var(--type-weight-semibold);
}

.vocab-topic-member header small {
color: var(--vocab-library-muted);
font-family: var(--font-reading);
font-size: var(--type-size-caption);
}

.vocab-topic-member header > button {
min-height: 36px;
padding: 6px 9px;
border: 1px solid var(--vocab-library-line);
border-radius: 9px;
background: var(--vocab-library-surface);
color: var(--vocab-library-accent-strong);
cursor: pointer;
font-size: var(--type-size-caption);
font-weight: var(--type-weight-semibold);
white-space: nowrap;
}

.vocab-topic-member > p {
margin: 13px 0 0;
color: var(--vocab-library-ink);
font-size: var(--type-size-control);
line-height: var(--type-line-body);
}

.vocab-topic-member details {
margin-top: 14px;
padding-top: 11px;
border-top: 1px solid var(--vocab-library-line);
}

.vocab-topic-member-detail {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
padding-top: 10px;
}

.vocab-topic-member-detail ul {
min-width: 0;
margin: 0;
padding-left: 18px;
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
line-height: var(--type-line-body);
}

.vocab-topic-member-detail li + li { margin-top: 5px; }
.vocab-topic-member-detail .is-collocation li { display: grid; gap: 1px; }
.vocab-topic-member-detail .is-collocation span { color: var(--vocab-library-ink); font-family: var(--font-reading); }
.vocab-topic-member-detail .is-collocation small { color: var(--vocab-library-muted); font-size: var(--type-size-micro); }

.vocab-topic-examples,
.vocab-topic-practice {
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--vocab-library-line);
}

.vocab-topic-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-3);
}

.vocab-topic-section-head h2 {
margin: 0;
color: var(--vocab-library-ink);
font-size: var(--type-size-subtitle);
font-weight: var(--type-weight-semibold);
}

.vocab-topic-section-head > span {
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
}

.vocab-summary-panel {
margin-top: var(--space-5);
}

.vocab-summary-table {
overflow: hidden;
border: 1px solid var(--vocab-library-line);
border-radius: var(--learning-radius-card);
background: var(--vocab-library-surface);
}

.vocab-summary-row {
display: grid;
grid-template-columns: minmax(110px,.72fr) minmax(130px,.9fr) minmax(150px,1fr) minmax(180px,1.25fr);
gap: var(--space-3);
align-items: start;
padding: 13px 16px;
border-top: 1px solid var(--vocab-library-line);
}

.vocab-summary-row:first-child { border-top: 0; }
.vocab-summary-row.is-head { background: var(--vocab-library-surface-soft); }
.vocab-summary-row > * { min-width: 0; }
.vocab-summary-row > b { color: var(--vocab-library-muted); font-size: var(--type-size-caption); font-weight: var(--type-weight-semibold); }
.vocab-summary-row > span { color: var(--vocab-library-muted); font-family: var(--font-ui-zh); font-size: var(--type-size-body); line-height: var(--type-line-body); }
.vocab-summary-row > span[lang="ja"] { color: var(--vocab-library-ink); font-family: var(--font-ui-ja); font-weight: var(--type-weight-medium); }
.vocab-summary-row > span.is-reading { color: var(--vocab-library-muted); font-weight: var(--type-weight-medium); }
.vocab-summary-mobile-head { display: none; }

.vocab-summary-theme-list {
display: flex;
flex-wrap: wrap;
gap: 7px;
padding: 16px;
border: 1px solid var(--vocab-library-line);
border-radius: var(--learning-radius-card);
background: var(--vocab-library-surface);
}

.vocab-summary-theme-list span {
padding: 6px 9px;
border-radius: var(--learning-radius-control);
background: var(--vocab-library-surface-soft);
color: var(--vocab-library-ink);
font-family: var(--font-reading);
font-size: var(--type-size-caption);
}

.vocab-topic-example-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
}

.vocab-topic-example-grid.is-extra { margin-top: var(--space-3); }

.vocab-topic-example {
min-width: 0;
padding: 15px;
border-radius: var(--learning-radius-control);
background: var(--vocab-library-surface-soft);
}

.vocab-topic-example > small,
.vocab-topic-example > span {
color: var(--vocab-library-muted);
font-size: var(--type-size-caption);
line-height: var(--type-line-body);
}

.vocab-topic-example p { margin: 7px 0 0; }
.vocab-topic-example p[lang="ja"] { color: var(--vocab-library-ink); font-family: var(--font-reading); font-size: var(--type-size-control); font-weight: var(--type-weight-medium); }
.vocab-topic-example p:not([lang="ja"]) { color: var(--vocab-library-muted); font-size: var(--type-size-caption); }
.vocab-topic-example > span { display: block; margin-top: 8px; }
.vocab-topic-examples details { margin-top: 12px; }

.vocab-topic-practice > p {
max-width: 760px;
margin: 0;
color: var(--vocab-library-muted);
font-size: var(--type-size-control);
line-height: var(--type-line-body);
}

.vocab-topic-practice-start {
min-height: 42px;
margin-top: 13px;
padding: 8px 14px;
border: 1px solid var(--vocab-library-accent);
border-radius: 10px;
background: var(--vocab-library-surface);
color: var(--vocab-library-accent-strong);
cursor: pointer;
font-weight: var(--type-weight-semibold);
}

.vocab-topic-practice.is-explanatory {
padding: 18px;
border: 1px solid var(--vocab-library-line);
border-radius: var(--learning-radius-card);
background: var(--vocab-library-surface-soft);
}

.vocab-topic-practice-options {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 13px;
}

.vocab-topic-practice-options button {
min-width: 112px;
min-height: 42px;
padding: 8px 14px;
border: 1px solid var(--vocab-library-line-strong);
border-radius: 10px;
background: var(--vocab-library-surface);
color: var(--vocab-library-ink);
cursor: pointer;
font-family: var(--font-reading);
font-size: var(--type-size-control);
font-weight: var(--type-weight-semibold);
}

.vocab-topic-practice-options button.is-correct { border-color: var(--learning-success, var(--vocab-library-accent)); color: var(--learning-success, var(--vocab-library-accent-strong)); }
.vocab-topic-practice-options button.is-wrong { border-color: var(--vocab-library-danger); color: var(--vocab-library-danger); }
.vocab-topic-practice-options button:disabled { cursor: default; opacity: 1; }

.vocab-topic-practice-result {
margin-top: 12px;
padding: 12px 14px;
border-radius: var(--learning-radius-control);
background: var(--vocab-library-surface-soft);
}

.vocab-topic-practice-result strong { color: var(--vocab-library-danger); font-size: var(--type-size-control); }
.vocab-topic-practice-result.is-correct strong { color: var(--learning-success, var(--vocab-library-accent-strong)); }
.vocab-topic-practice-result p,
.vocab-topic-practice-result small { display: block; margin: 5px 0 0; color: var(--vocab-library-muted); font-size: var(--type-size-caption); line-height: var(--type-line-body); }
.vocab-topic-practice-result small { font-family: var(--font-reading); }

.vocab-topic-group-actions {
position: sticky;
bottom: 12px;
z-index: 20;
display: grid;
grid-template-columns: minmax(100px, .7fr) minmax(130px, .8fr) minmax(180px, 1.4fr);
gap: 9px;
margin-top: var(--space-5);
padding: 10px;
border: 1px solid var(--vocab-library-line);
border-radius: 14px;
background: color-mix(in srgb, var(--vocab-library-surface) 94%, transparent);
box-shadow: var(--shadow-popover);
backdrop-filter: blur(18px) saturate(140%);
}

.vocab-topic-group-actions button {
min-height: 44px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.vocab-topic-group-actions .is-complete:disabled {
opacity: 1;
border-color: var(--vocab-library-line-strong);
background: var(--vocab-library-accent-soft);
color: var(--vocab-library-accent-strong);
}

@media (max-width: 900px) {
.vocab-topic-grid { grid-template-columns: 1fr; }
.vocab-topic-members { grid-template-columns: 1fr; }
.vocab-summary-row { grid-template-columns: minmax(110px,.8fr) minmax(130px,1fr) minmax(0,1.35fr); }
.vocab-summary-row > *:last-child { grid-column: 2 / -1; }
}

@media (max-width: 720px) {
.vocab-topic-page-head,
.vocab-topic-group-head { flex-direction: column; gap: var(--space-3); }
.vocab-summary-row { grid-template-columns: minmax(0, .78fr) minmax(0, 1fr) minmax(0, 1.22fr); gap: 8px; padding: 14px; }
.vocab-summary-row.is-head { display: none; }
.vocab-summary-mobile-head {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1fr) minmax(0, 1.22fr);
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--vocab-library-line);
  background: var(--vocab-library-surface-soft);
}
.vocab-summary-mobile-head > b {
  min-width: 0;
  color: var(--vocab-library-muted);
  font-family: var(--font-ui);
  font-size: var(--type-size-caption);
  font-weight: var(--type-weight-semibold);
}
.vocab-summary-mobile-head > small {
  grid-column: 1 / -1;
  color: var(--vocab-library-muted);
  font-family: var(--font-ui);
  font-size: var(--type-size-micro);
  line-height: var(--type-line-ui);
}
.vocab-summary-row:not(.is-head) > .vocab-summary-cell.is-detail {
  grid-column: 1 / -1;
  padding-top: 2px;
  color: var(--vocab-library-muted);
  font-size: var(--type-size-caption);
}
.vocab-summary-row:not(.is-head) > .vocab-summary-cell.is-empty { display: none; }
.vocab-topic-current { grid-template-columns: 1fr; padding: 18px; }
.vocab-topic-current > button { width: 100%; }
.vocab-topic-member-detail { grid-template-columns: 1fr; }
.vocab-topic-example-grid { grid-template-columns: 1fr; }
.vocab-topic-group-actions { position: static; grid-template-columns: 1fr; box-shadow: none; }
.vocab-topic-group-actions button { width: 100%; white-space: normal; }
}

@media (max-width: 520px) {
.vocab-speech-action { width:44px!important; min-width:44px!important; height:44px; min-height:44px; }
.vocab-topic-card { padding: 16px 14px 22px; }
.vocab-topic-card-track { left: 14px; right: 14px; }
.vocab-topic-member header { flex-direction: column; }
.vocab-topic-member header > button { width: 100%; min-height: 44px; }
.vocab-topic-practice-start,
.vocab-topic-practice-options button { width: 100%; }
.vocab-topic-path-list button { grid-template-columns: 30px minmax(0, 1fr); }
.vocab-topic-path-list button > small { grid-column: 2; }
}