/* Workspace layout: navigation and page content keep independent, stable space. */
html, body { overflow-x: clip; }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.shell { grid-template-columns: 236px minmax(0, 1fr); align-items: start; }
.sidebar { position: sticky; top: 0; height: 100dvh; width: 236px; z-index: 30; overscroll-behavior: contain; }
.main { width: 100%; max-width: none; min-width: 0; margin: 0; padding: 28px clamp(20px, 3vw, 48px) 88px; overflow: visible; }
.view.active { animation: none; }
.view-head { flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.view-head > div { flex: 1 1 260px; }
.view-head .search { width: min(340px, 100%); }
.view h1 { font-size: clamp(24px, 2.2vw, 34px); line-height: 1.25; }
.view-sub { max-width: 75ch; line-height: 1.65; }
.seg, .bw-toolbar, .learning-list-head { flex-wrap: wrap; }
.bw-toolbar { align-items: end; gap: 14px; }
.bw-toolbar > label { display: grid; gap: 6px; }
.bw-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 275px), 1fr)); }
.learning-group-title { grid-column: 1 / -1; margin: 18px 0 0; font-size: 20px; }
.study-word-source { display: block; color: var(--muted); margin-top: 12px; overflow-wrap: anywhere; line-height: 1.6; }
.notes-layout, .gloss-layout { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 24px; }
.notes-layout > *, .gloss-layout > * { min-width: 0; }
.notes-side, .gloss-index { top: 20px; max-height: calc(100dvh - 40px); padding: 16px; }
.notes-list, .gloss-list { min-height: 80px; overflow-y: auto; overscroll-behavior: contain; }
.notes-editor-wrap, .gloss-detail { width: 100%; min-width: 0; }
.notes-editor { padding: clamp(18px, 2vw, 30px); gap: 14px; }
.ne-text { min-height: 290px; line-height: 1.8; resize: vertical; }
.ne-trans { min-height: 165px; resize: vertical; }
.ne-top .note-title-input { font-size: 22px; padding: 12px; }
.note-item { padding: 13px 12px; gap: 6px; }
.note-item strong { font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
.gd-head { padding: 24px; }
.gd-ref { align-items: flex-start; padding: 16px; }
.gd-ref-title, .gd-ref-text { white-space: normal; overflow-wrap: anywhere; line-height: 1.7; }
.config-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px; }
.study-settings { display: flex; flex-direction: column; gap: 16px; }
.study-settings label, .study-toolbar label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); min-width: 0; }
.study-settings select, .study-toolbar select, .bw-toolbar select { width: 100%; min-height: 42px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel-2); color: var(--text); padding: 9px 12px; font: inherit; }
.study-toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; padding: 10px 0 18px; }
.study-toolbar label { flex: 1 1 190px; }
.study-toolbar button { min-height: 42px; }
.note-ai-tools { border-top: 1px solid var(--border); padding-top: 18px; }
.note-ai-tools h3 { margin: 0 0 10px; }
.study-ai-result { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; max-height: 480px; overflow-y: auto; }
.study-ai-result:not(:empty) { padding: 18px; background: var(--panel-2); border-radius: 12px; margin: 8px 0 16px; }
.translation-alternatives { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 14px; }
.translation-alternatives small { font-size: 12px; color: var(--muted); line-height: 1.5; }
.translation-alternatives button { text-align: left; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: 8px; white-space: normal; cursor: pointer; }
.word-sheet { width: min(620px, calc(100vw - 32px)); animation: none; }
#wsTerm { overflow-wrap: anywhere; max-height: 100px; overflow-y: auto; }
#wsTabs { flex-wrap: wrap; flex-shrink: 0; }
#wsBody { line-height: 1.75; overflow-y: auto; min-height: 40px; }
.reader-doc .rw.known { color: var(--known-color, #3ddc97) !important; }
.reader-doc .rw.learning { color: var(--learning-color, #e8b94f) !important; }
.reader-body:has(#readerWordsPanel:not(.hidden)) > .reader-main,
.reader-body:has(#readerWordsPanel:not(.hidden)) > .reader-chapters { display: none; }
#readerWordsPanel.reader-words { position: relative; inset: auto; transform: none; z-index: auto; width: 100%; flex: 1; min-height: 0; max-height: none; height: 100%; box-shadow: none; backdrop-filter: none; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
.reader-body { min-width: 0; }
.reader-main { min-width: 0; }
.reader-word-item .rwi-word { overflow-wrap: anywhere; white-space: normal; }
.reader-word-list { overscroll-behavior: contain; }
.reader-player { max-width: calc(100vw - 28px); }
.study-cards-backdrop { z-index: 300; padding: 24px; }
.study-cards-dialog { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 22px; width: min(780px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; padding: clamp(20px, 3vw, 36px); box-shadow: var(--shadow); }
.study-cards-dialog header { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.study-cards-dialog h2 { margin: 6px 0 22px; font-size: 20px; overflow-wrap: anywhere; }
.study-card-progress, .study-cards-dialog footer, .study-card-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.study-cards-dialog progress { width: 100%; height: 5px; accent-color: var(--accent); }
.study-training-card { background: var(--panel-2); padding: clamp(20px, 3vw, 38px); border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.study-training-card h3 { font-size: clamp(28px, 4vw, 44px); overflow-wrap: anywhere; margin: 8px 0; }
.study-training-card small { color: var(--muted); line-height: 1.6; }
.study-card-answer { width: 100%; line-height: 1.7; white-space: pre-wrap; }
.study-card-actions > button { flex: 1 1 200px; min-height: 52px; }
.study-complete { padding: 30px 0; line-height: 1.8; }
.study-complete button { margin: 12px 12px 0 0; }
.vocabulary-list-picker { z-index: 420; padding: 20px; }
.vocabulary-list-picker > section { width: min(560px,100%); max-height: calc(100dvh - 40px); overflow-y: auto; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 18px; padding: 24px; }
.vocabulary-list-picker header { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.vocabulary-list-picker h2 { font-size: 22px; overflow-wrap: anywhere; margin: 8px 0; }
.vocabulary-list-picker form { display: grid; gap: 14px; border-top: 1px solid var(--border); margin-top: 18px; padding-top: 16px; }
.vocabulary-list-picker label { display: grid; gap: 8px; font-size: 14px; }
.vocabulary-list-picker input:not([type=color]) { width: 100%; min-width: 0; padding: 12px; }
.list-picker-option { width: 100%; text-align: left; border-left: 5px solid; padding: 14px; border-radius: 8px; margin: 4px 0; background: var(--panel-2); }
.deck-appearance { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; padding: 18px 0; }
.deck-appearance label { display: grid; gap: 8px; }
#readerDoc .rw.list-mark { color: var(--list-color) !important; }
#readerDoc, #readerDoc .sent, #readerDoc .rw { user-select: text; -webkit-user-select: text; }
#readerDoc .sent-actions, #readerDoc .para-play, #readerDoc .para-btn { user-select: none; -webkit-user-select: none; }
#readerDoc .rw.list-mark.learning { text-decoration: underline dotted #fbbf24; text-underline-offset: 5px; }
#readerDoc .rw.list-mark.known { text-decoration: underline solid #34d399; text-underline-offset: 5px; }
.dictionary-body { white-space: normal; font-size: 15px; line-height: 1.65; }
.dictionary-entry { border-top: 1px solid var(--border); padding: 16px 0; }
.dictionary-entry h4 { font-size: 16px; margin: 0 0 10px; }
.dictionary-entry p { margin: 8px 0; }
.dictionary-entry blockquote { margin: 10px 0; padding-left: 14px; border-left: 2px solid var(--accent); color: var(--muted); }
.dictionary-choice { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; margin: 4px; overflow: hidden; vertical-align: middle; }
.dictionary-choice button { padding: 7px 9px; background: var(--panel-2); color: var(--text); }
.dictionary-source { display: block; font-size: 12px; color: var(--muted); margin-top: 12px; }
.dictionary-forms { padding: 14px; background: var(--panel-2); border-radius: 10px; }
#paraNoteSheet { position: fixed; width: min(780px,calc(100vw - 32px)); max-width: none; left: 50%; right: auto; top: 5dvh; bottom: auto; transform: translateX(-50%); height: 90dvh; max-height: 90dvh; border-radius: 20px; display: flex; flex-direction: column; z-index: 260; }
#paraNoteSheet.hidden { display: none; }
#paraNoteSheet .rs-body { flex: 1; min-height: 0; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
#paraNoteSheet .pn-excerpt { max-height: 180px; overflow-y: auto; font-size: 16px; line-height: 1.7; flex-shrink: 0; margin: 0; }
#paraNoteSheet .pn-comment-sec { order: -1; }
#paraNoteSheet .pn-textarea { min-height: 190px; resize: vertical; font-size: 16px; line-height: 1.6; }
.pn-save-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 12px; }
#paraNoteSheet .pn-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#paraNoteSheet .pn-actions button { flex: 1 1 160px; padding: 12px; }
#paraNoteBackdrop { z-index: 259; }
.ws-tabs { flex-wrap: wrap; gap: 6px; }
.ws-tabs button, .ws-foot button { min-height: 36px; font-size: 13px; }
.ws-body { min-height: 100px; max-height: min(46dvh,430px); overflow-y: auto; }
.profile-learning-grid, .profile-metrics { grid-template-columns: repeat(auto-fit,minmax(min(210px,100%),1fr)); }
#profileMetrics { grid-template-columns: repeat(auto-fit,minmax(min(210px,100%),1fr)); }
.profile-metric > span, .profile-learning-grid span { font-size: 13px; }
.profile-metric small, .profile-learning-grid small { font-size: 12px; line-height: 1.5; }
.list-library-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 24px 0; }
.list-library-head h2 { font-size: 24px; margin: 0 0 8px; }
.list-library-head p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; max-width: 65ch; }
.list-library-filters { padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); margin-bottom: 24px; }
.list-library-filters input { width: 100%; min-height: 42px; }
#deckList { grid-template-columns: repeat(auto-fill,minmax(min(340px,100%),1fr)); gap: 18px; }
.deck-group-head { padding: 12px 0 0; font-size: 16px; font-weight: 650; }
.deck-card { border-top: 4px solid var(--list-color,var(--accent)); padding: 22px; min-height: 210px; box-shadow: 0 5px 24px #00000012; }
.deck-main { gap: 12px; }
.deck-name { font-size: 19px; line-height: 1.35; }
.deck-description, .deck-progress { font-size: 13px; line-height: 1.6; }
.deck-mastery small { font-size: 12px; line-height: 1.5; }
.deck-card .deck-n b { font-size: 24px; }
.deck-card .deck-n small { font-size: 11px; }
.deck-new { width: 100%; max-width: none; padding: 26px; }
.deck-new.hidden { display: none; }
.deck-new input:not([type=color]), .deck-new select, .deck-new textarea { font-size: 15px; min-height: 42px; }
.deck-color-field { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-block: 10px; font-size: 14px; }
#deckColorPreview { color: #b48aff; font-family: Georgia,serif; font-size: 22px; }
.deck-head { gap: 12px; align-items: center; padding: 14px 0; }
.deck-title { flex-basis: 280px; white-space: normal; font-size: 27px; }
.deck-meta { margin-left: 0; gap: 8px; }
.deck-tools { flex-wrap: wrap; gap: 12px; align-items: center; padding: 16px 0; }
.deck-tools select { flex: 1 1 155px; max-width: 240px; min-height: 42px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; padding: 8px; }
.deck-tools .search { flex: 2 1 230px; min-height: 42px; }
#deckFilterCount { color: var(--muted); font-size: 13px; }
.deck-term-card { gap: 16px; padding: 20px; }
.deck-term-card .bw-word { font-size: 23px; }
.deck-term-translation, .deck-term-note { font-size: 15px; line-height: 1.65; }
.deck-term-translation span { font-size: 11px; }
.deck-learning-details { border-top: 1px solid var(--border); padding-top: 12px; }
.deck-learning-details summary { font-size: 13px; color: var(--muted); cursor: pointer; padding: 4px 0; }
.deck-learning-details .learning-cell { margin-top: 12px; }
.deck-more, .list-no-results { grid-column: 1 / -1; padding: 20px; }
.deck-appearance { display: block; border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; margin-bottom: 18px; }
.deck-appearance summary { font-size: 14px; cursor: pointer; color: var(--muted); }
.deck-appearance-fields { display: flex; gap: 16px; align-items: end; flex-wrap: wrap; margin-top: 16px; }
.deck-appearance-fields label { display: grid; gap: 8px; font-size: 14px; }
.deck-appearance input:not([type=color]), .vocabulary-list-picker input:not([type=color]) { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; min-height: 42px; padding: 10px 12px; color: var(--text); font-size: 15px; }
.deck-mastery { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.deck-mastery small { white-space: normal; overflow: visible; text-overflow: clip; }
@media(max-width:820px) {
  .vocab-tabs button { flex: 1 1 145px; min-width: 145px; white-space: normal; overflow-wrap: normal; word-break: normal; padding: 12px; font-size: 13px; }
  .deck-card { padding: 18px; min-height: 190px; }
  .deck-add-fields { grid-template-columns: minmax(0,1fr); }
  .deck-appearance { flex-direction: column; align-items: stretch; }
  .deck-appearance input:not([type=color]) { width: 100%; }
  .deck-head > button:not(.icon-btn) { flex: 1 1 150px; }
  .deck-title { font-size: 24px; }
  .deck-new { padding: 18px; }
  .profile-learning-levels { grid-template-columns: 1fr; }
}
@media (min-width: 821px) {
  body:not(.nav-collapsed) .reader-player { left: calc(50% + 118px); }
  body.nav-collapsed .reader-player { left: calc(50% + 38px); }
  body.nav-collapsed .shell { grid-template-columns: minmax(0, 1fr); }
  body.nav-collapsed .sidebar { display: none; }
  body.nav-collapsed .main { padding-left: 76px; }
  .sidebar-backdrop { display: none !important; }
}
@media (min-width: 821px) and (max-width: 1180px) {
  body:not(.nav-collapsed) .reader-player { left: calc(50% + 105px); }
  .notes-layout, .gloss-layout { grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); gap: 16px; }
  .shell { grid-template-columns: 210px minmax(0, 1fr); }
  .sidebar { width: 210px; }
  .main { padding-inline: 22px; }
}
.ne-comment { min-height: 160px; resize: vertical; }
.ne-save-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0 20px; }
.ne-save-row .ne-status { flex: 1 1 160px; }
@media (max-width: 820px) {
  .shell, body.nav-collapsed .shell { display: block; }
  .sidebar { position: fixed; left: 0; top: 0; width: min(290px, calc(100vw - 52px)); z-index: 201; height: 100dvh; }
  body.nav-collapsed .sidebar { visibility: hidden; pointer-events: none; }
  .sidebar-backdrop { z-index: 200; }
  .menu-toggle { z-index: 202; }
  .main, body.nav-collapsed .main { padding: 64px 16px 96px; overflow: visible; }
  .notes-layout, .gloss-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .notes-side, .gloss-index { position: static; max-height: 52dvh; }
  .notes-editor { padding: 18px; }
  .ne-text { min-height: 250px; }
  .ne-trans { min-height: 150px; }
  .study-toolbar { gap: 10px; }
  .study-toolbar label { flex-basis: 140px; }
  .study-cards-backdrop { padding: 10px; }
  .study-cards-dialog { max-height: calc(100dvh - 20px); border-radius: 16px; }
  .study-training-card { padding: 20px 14px; }
  #readerWordsPanel.reader-words { padding: 12px; }
  .word-sheet { width: calc(100vw - 20px); max-height: calc(100dvh - var(--reader-player-clearance, 112px) - 12px); }
}