:root {
  --tabbar-height: 72px;
  --primary: #FFB400;
  --primary-hover: #F2A300;
  --primary-active: #E09500;
  --accent: #FFE3A6;
  --page-tint: #FFF8ED;
  --text: #2E2E2E;
  --secondary: #A7A7A7;
  --muted-readable: #68645A;
  --border: #F3E4C2;
  --white: #fff;
  --video-surface: #171717;
  --duration-surface: #2e2e2ee6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: var(--white);
  accent-color: var(--primary);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
button, a, video { -webkit-tap-highlight-color: transparent; }
button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button, a { touch-action: manipulation; }
:is(button, a, video, select, textarea):focus-visible { outline: 3px solid var(--primary-active); outline-offset: 4px; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.site-header { border-bottom: 1px solid var(--border); }
.header-inner { max-width: 1280px; padding: 0 40px; margin: auto; height: 88px; display: flex; align-items: center; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; background: var(--primary); border-radius: 12px; }
.brand-mark svg { width: 27px; height: 27px; }
.brand-sub { display: block; margin-top: 3px; font-size: 11px; font-weight: 500; letter-spacing: .08em; color: var(--muted-readable); }
.auth-open { margin-left: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--white); padding: 10px 14px; min-height: 44px; font-size: 14px; white-space: nowrap; }
.auth-open:hover { background: var(--accent); }
.auth-dialog { width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 28px; border: 1px solid var(--border); border-radius: 16px; color: var(--text); background: var(--white); }
.auth-dialog::backdrop { background: #2e2e2e66; }
.membership-success, .redeem-used { width:min(440px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow-y:auto; padding:32px 24px; border:1px solid var(--border); border-radius:16px; color:var(--text); background:var(--white); text-align:center; }
.membership-success::backdrop, .redeem-used::backdrop { background:#2e2e2e66; }
.membership-success h2 { font-size:24px; font-weight:650; line-height:1.5; }
#redeem-used-copy { margin:0; font-size:16px; line-height:1.8; color:var(--muted-readable); }
#membership-success-copy { margin-top:16px; font-size:16px; line-height:1.8; color:var(--muted-readable); }
#membership-success-term { margin-top:28px; padding-top:24px; border-top:1px solid var(--border); }
#membership-success-label { display:block; font-size:14px; line-height:1.7; color:var(--muted-readable); }
#membership-success-expiry { display:block; margin-top:8px; font-size:20px; font-weight:700; line-height:1.5; }
.auth-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auth-heading h2 { font-size: 24px; }
.auth-heading button { display: grid; place-items: center; min-width: 44px; min-height: 44px; border: 0; border-radius: 8px; background: var(--white); }
.auth-heading button:hover { background: var(--accent); }
#auth-description { color: var(--muted-readable); font-size: 14px; line-height: 1.7; margin: 12px 0 24px; }
.auth-dialog label { display: block; margin: 20px 0 8px; font-size: 14px; }
.auth-dialog input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--white); color: var(--text); font: inherit; font-size: 16px; }
.auth-dialog input:focus-visible { outline: 3px solid var(--primary-active); outline-offset: 2px; }
.auth-dialog input[readonly] { background: var(--page-tint); }
.auth-primary { width: 100%; min-height: 48px; padding: 12px; margin-top: 24px; background: var(--primary); border: 0; border-radius: 8px; font-weight: 600; }
.auth-primary:hover { background: var(--primary-hover); }
.auth-primary:active { background: var(--primary-active); }
.auth-dialog button:disabled { opacity: .6; cursor: default; }
.auth-secondary { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
.auth-secondary button { min-height: 44px; padding: 8px 0; border: 0; background: var(--white); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.auth-secondary button:hover { color: var(--text); background: var(--page-tint); }
.auth-message { margin-top: 16px; color: var(--muted-readable); font-size: 14px; line-height: 1.7; }
.auth-message:empty { margin: 0; }
.auth-toast { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 96px); left: 50%; transform: translateX(-50%); z-index: 10; max-width: calc(100% - 32px); padding: 12px 20px; border: 1px solid var(--border); border-radius: 8px; background: var(--accent); color: var(--text); font-size: 14px; line-height: 1.5; pointer-events: none; }
#auth-account { font-size: 14px; line-height: 1.7; }
#auth-email-display { margin-top: 8px; font-size: 16px; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .auth-dialog { padding: 20px; }
  .auth-open { font-size: 13px; padding: 8px; }
  .header-inner { gap: 12px; }
}
.page { max-width: 1280px; min-height: calc(100vh - 88px); margin: auto; padding: 64px 40px; }
h1, h2, p { margin: 0; }
h1 { font-size: 32px; font-weight: 650; line-height: 1.45; letter-spacing: -.03em; text-wrap: balance; }
.list-heading { margin-bottom: 36px; }
.list-heading p { margin-top: 12px; color: var(--muted-readable); font-size: 16px; line-height: 1.7; }
.course-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.course-card { display: block; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: border-color .18s ease; }
.course-card:hover { border-color: var(--primary-active); }
.course-cover { position: relative; aspect-ratio: 16 / 9; background: var(--page-tint); overflow: hidden; }
.course-cover img, .course-cover video { width: 100%; height: 100%; object-fit: cover; display: block; }
.duration { position: absolute; right: 16px; bottom: 14px; background: var(--duration-surface); color: var(--white); font-size: 13px; padding: 5px 9px; border-radius: 5px; font-variant-numeric: tabular-nums; }
.course-body { padding: 24px; }
.course-meta, .course-meta-main { display: flex; align-items: center; gap: 8px; }
.course-meta { justify-content: space-between; font-size: 12px; color: var(--muted-readable); margin-bottom: 14px; }
.preview-tag { background: var(--text); color: var(--surface, #fff); }
.tag, .learned-badge { display: inline-flex; align-items: center; gap: 3px; padding: 5px 10px; border-radius: 5px; background: var(--accent); font-size: 12px; color: var(--text); line-height: 1.5; white-space: nowrap; }
.learned-badge { background: var(--page-tint); border: 1px solid var(--border); padding: 3px 7px; }
.learned-badge svg { width: 14px; height: 14px; }
.course-body h2 { font-size: 22px; font-weight: 650; line-height: 1.5; letter-spacing: -.02em; }
.creator { margin-top: 5px; font-size: 14px; font-weight: 550; color: var(--muted-readable); line-height: 1.7; }
.course-summary { font-size: 14px; line-height: 1.8; color: var(--muted-readable); margin-top: 14px; min-height: 51px; }
.cover-empty { height: 100%; display: grid; place-items: center; color: var(--muted-readable); }
.learning-page { max-width: 960px; padding-top: 24px; }
.back-link { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; font-size: 13px; color: var(--muted-readable); margin-bottom: 14px; border-radius: 4px; }
.back-link:hover { color: var(--text); background: var(--page-tint); }
.back-link svg { width: 16px; }
.lesson-heading { margin-bottom: 20px; }
.lesson-heading h1 { font-size: 28px; }
.lesson-heading p { margin-top: 6px; font-size: 14px; line-height: 1.8; color: var(--muted-readable); max-width: 72ch; }
.video-stage { position: relative; background: var(--video-surface); border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; }
video { width: 100%; height: 100%; display: block; }
video:fullscreen { object-fit: contain; }
.learning-tabs { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 22px; border-bottom: 1px solid var(--border); }
.learning-tabs button { position: relative; min-height: 52px; border: 0; background: var(--white); font-size: 15px; color: var(--muted-readable); }
.learning-tabs button:hover { background: var(--page-tint); }
.learning-tabs button:active { background: var(--accent); }
.learning-tabs button[aria-selected="true"] { color: var(--text); font-weight: 650; }
.learning-tabs button[aria-selected="true"]::after { content: ''; position: absolute; width: 32px; height: 3px; bottom: -1px; left: calc(50% - 16px); background: var(--primary); }
.mode-panel { padding-top: 32px; min-height: 330px; }
/* Subtitles: the box is sized by the lesson's longest sentence (app.js reserveSubtitleHeight); short
   sentences sit centred in it, and the panel no longer reserves a fixed 330px. */
#mode-subtitles { min-height: 0; }
#mode-subtitles .current-copy { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
.current-quote { position: relative; padding: 12px 30px 20px; }
.quote-mark { position: absolute; font-family: Georgia, serif; font-size: 80px; line-height: 1; color: var(--accent); top: -10px; left: 2px; user-select: none; }
.current-copy { border-block: 1px solid var(--border); padding: 30px 16px; text-align: left; }
.current-english { font-size: 24px; line-height: 1.6; text-wrap: pretty; }
.current-chinese { color: var(--muted-readable); font-size: 16px; line-height: 1.8; margin-top: 16px; }
.word { display: inline; font: inherit; color: inherit; padding: 0; border: 0; border-radius: 2px; background: transparent; line-height: inherit; cursor: pointer; user-select: text; }
.word:hover { background: var(--accent); }
.word:active { background: var(--primary); }
.word:focus-visible { outline-width: 2px; outline-offset: 2px; }
[data-language="english"] .zh, [data-language="chinese"] .en { display: none; }
[data-language="chinese"] .current-chinese { margin-top: 0; font-size: 20px; }
[data-language="chinese"] .cue-translation { margin-top: 0; }
.button { min-height: 44px; border: 1px solid var(--border); background: var(--white); color: var(--text); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 13px; font-size: 13px; font-weight: 550; transition: background-color .15s ease; }
.button svg { width: 17px; height: 17px; }
.button:hover { background: var(--accent); border-color: var(--primary-hover); }
.button:active { background: var(--primary-active); }
.button.primary { background: var(--primary); border-color: var(--primary); padding-inline: 18px; }
.button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.button.primary:active { background: var(--primary-active); border-color: var(--primary-active); }
button:disabled { opacity: .55; cursor: default; }
.mode-actions { display: flex; justify-content: center; align-items: center; gap: 24px; margin: 16px auto 28px; }
.subtitle-list-meta { display: flex; justify-content: space-between; gap: 16px; padding: 0 10px 14px; color: var(--muted-readable); font-size: 12px; font-variant-numeric: tabular-nums; }
.cue-list { position: relative; height: 460px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; overscroll-behavior: contain; padding: 5px; }
.cue { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 14px 12px; border-radius: 7px; cursor: pointer; }
.cue + .cue { margin-top: 3px; }
.cue:hover { background: var(--page-tint); }
.cue.is-current { background: var(--accent); }
.cue.is-looping { box-shadow: inset 0 0 0 1px var(--primary); }
.cue-seek { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; padding: 0; background: transparent; min-height: 44px; width: 44px; text-align: center; }
.cue-time { font-size: 11px; color: var(--muted-readable); padding-top: 4px; font-variant-numeric: tabular-nums; }
.cue-text { font-size: 15px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.cue.is-current .cue-text { font-weight: 550; }
.cue-translation { font-size: 13px; line-height: 1.8; margin-top: 6px; color: var(--muted-readable); }
.cue-indicator { visibility: hidden; opacity: .65; }
.cue-indicator svg { width: 14px; height: 14px; fill: currentColor; stroke-width: 0; }
.cue.is-current .cue-indicator { visibility: visible; }
.practice-copy { text-align: left; padding: 8px 28px 24px; }
.practice-english { font-size: 24px; line-height: 1.6; text-wrap: pretty; }
.practice-chinese { font-size: 16px; line-height: 1.8; color: var(--muted-readable); margin-top: 14px; }
.original-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 68px; min-width: 68px; border: 0; border-radius: 8px; background: transparent; font-size: 13px; margin: 8px auto 24px; }
.original-button svg { width: 26px; height: 26px; }
.original-button:hover { background: var(--page-tint); }
.original-button:active { background: var(--accent); }
.record-button, .round-button, .quick-play { display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--primary); width: 64px; height: 64px; }
.record-button:hover, .round-button:hover, .quick-play:hover { background: var(--primary-hover); }
.record-button:active, .round-button:active, .quick-play:active { background: var(--primary-active); }
.record-button svg { width: 28px; height: 28px; }
.record-button[aria-pressed="true"] { outline: 4px solid var(--accent); outline-offset: 4px; }
.practice-note { text-align: center; font-size: 13px; line-height: 1.8; color: var(--muted-readable); }
.recording-playback { margin: 24px auto 0; max-width: 380px; padding: 18px; border-top: 1px solid var(--border); }
.recording-playback label { display: block; margin-bottom: 10px; font-size: 13px; }
.recording-playback audio { display: block; width: 100%; height: 44px; }
#dictation-input { display: block; width: 100%; resize: vertical; min-height: 150px; padding: 20px 16px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: var(--white); font-size: 20px; line-height: 1.7; }
#dictation-input::placeholder { color: var(--muted-readable); font-size: 16px; }
#dictation-input:focus { border-color: var(--primary); }
.dictation-actions { display: flex; justify-content: space-between; gap: 16px; margin: 20px 0 24px; }
.dictation-hint { background: var(--page-tint); padding: 16px; border-radius: 8px; font-size: 16px; line-height: 1.8; color: var(--muted-readable); }
.dictation-feedback:empty { display: none; }
.dictation-feedback { padding: 20px 0; border-block: 1px solid var(--border); margin-bottom: 24px; }
.dictation-verdict { display: flex; gap: 7px; align-items: center; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.answer-diff { font-size: 16px; line-height: 2; display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.answer-diff > span { padding: 3px 6px; }
.answer-diff small { display: block; color: var(--muted-readable); font-size: 11px; line-height: 1.4; }
.diff-incorrect, .diff-missing, .diff-extra { border-radius: 4px; background: var(--accent); }
.diff-missing { border-bottom: 2px dotted var(--primary-active); }
.diff-extra { text-decoration: line-through; }
.diff-extra small { text-decoration: none; }
.correct-answer { margin-top: 20px; display: grid; gap: 8px; font-size: 16px; line-height: 1.8; }
.correct-answer > span:first-child { font-size: 12px; color: var(--muted-readable); }
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.summary-grid h2 { font-size: 17px; font-weight: 650; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.summary-list { margin: 0; padding: 0; list-style: none; counter-reset: summary; }
.summary-list li { position: relative; padding: 22px 0 22px 28px; border-bottom: 1px solid var(--border); counter-increment: summary; }
.summary-list li::before { content: counter(summary) '.'; position: absolute; top: 26px; left: 0; font-size: 13px; color: var(--muted-readable); }
.summary-list strong { display: block; font-size: 20px; font-weight: 600; line-height: 1.6; }
.word-pronunciation { display: block; color: var(--muted-readable); font-size: 13px; line-height: 1.7; margin-top: 4px; }
.word-pronunciation > span { margin-left: 8px; }
.summary-list p { font-size: 14px; line-height: 1.8; margin-top: 8px; color: var(--muted-readable); }
.learning-toolbar { display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr; align-items: center; justify-items: center; margin-top: 32px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--white); }
.toolbar-button, .toolbar-choice select { min-height: 44px; border: 0; background: transparent; font-size: 14px; border-radius: 6px; padding: 8px 12px; cursor: pointer; }
.toolbar-button:hover, .toolbar-choice:hover { background: var(--page-tint); }
.toolbar-button:active { background: var(--accent); }
.toolbar-choice { display: flex; align-items: center; border-radius: 6px; max-width: 100%; }
.toolbar-choice select { max-width: 100%; }
.loop-choice { padding-left: 8px; }
.loop-choice svg { width: 18px; height: 18px; }
.loop-choice select { padding-left: 4px; }
.loop-choice[data-active="true"] { background: var(--accent); }
.quick-play { width: 48px; height: 48px; }
.quick-play svg { width: 22px; height: 22px; }
.vocab-popover { position: fixed; z-index: 40; width: 220px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--white); box-shadow: 0 4px 16px #2e2e2e0a; }
.vocab-popover > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.vocab-popover strong { font-size: 18px; overflow-wrap: anywhere; }
.popover-close { border: 0; display: grid; place-items: center; min-width: 32px; min-height: 32px; background: transparent; border-radius: 5px; }
.popover-close:hover { background: var(--page-tint); }
.vocab-popover .button { width: 100%; }
.learning-notice, .media-error { background: var(--page-tint); border: 1px solid var(--border); color: var(--text); padding: 14px 16px; margin-top: 18px; line-height: 1.7; font-size: 14px; }
.state-message { padding: 48px 0; color: var(--muted-readable); line-height: 1.8; }
.state-message h1 { color: var(--text); margin-bottom: 16px; font-size: 26px; }
.state-message .button { margin-top: 24px; }
@media (max-width: 1000px) {
  .header-inner, .page { padding-inline: 24px; }
  .course-body h2 { font-size: 20px; }
}
@media (max-width: 760px) {
  .header-inner { height: 76px; padding-inline: 20px; }
  .brand { font-size: 17px; gap: 9px; }
  .brand-mark { width: 36px; height: 36px; border-radius: 10px; }
  .page { min-height: calc(100vh - 76px); padding: 36px 20px 48px; }
  h1 { font-size: 26px; }
  .list-heading { margin-bottom: 24px; }
  .list-heading p { font-size: 14px; }
  .course-grid { grid-template-columns: 1fr; gap: 24px; }
  .course-body { padding: 20px; }
  .lesson-heading h1 { font-size: 24px; }
  .learning-page { padding-top: 20px; }
  .learning-tabs { margin-top: 16px; }
  .learning-tabs button { min-height: 48px; font-size: 14px; }
  .mode-panel { padding-top: 24px; }
  .current-quote { padding: 12px 12px 16px; }
  .quote-mark { font-size: 64px; left: -4px; top: -6px; }
  .current-copy { padding: 24px 8px; }
  .current-english, .practice-english { font-size: 20px; }
  .current-chinese, .practice-chinese { font-size: 14px; }
  .practice-copy { padding-inline: 8px; }
  .mode-actions { gap: 16px; }
  .button { padding-inline: 12px; font-size: 12px; }
  .subtitle-list-meta { padding-inline: 4px; font-size: 11px; }
  .cue-list { height: 370px; padding: 4px; }
  .cue { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; padding: 13px 8px; }
  .cue-seek { width: 40px; }
  .summary-grid { grid-template-columns: 1fr; gap: 32px; }
  .learning-toolbar { padding: 10px 6px; grid-template-columns: .8fr .9fr .8fr 1.5fr; }
  .toolbar-button, .toolbar-choice select { font-size: 12px; padding-inline: 6px; }
  .loop-choice { padding-left: 4px; }
  .loop-choice svg { width: 16px; height: 16px; }
  .loop-choice select { padding-left: 2px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
#redeem-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
#redeem-form label { display:block; font-size:14px; margin-bottom:8px; }
#redeem-code { width:100%; min-height:48px; padding:10px 12px; font-size:16px; color:var(--text); border:1px solid var(--border); border-radius:8px; background:var(--white); }
#redeem-help { font-size:13px; color:var(--muted-readable); line-height:1.7; margin:10px 0 16px; }
#entitlement-status { padding:12px; margin-top:16px; background:var(--page-tint); font-size:14px; line-height:1.7; color:var(--text); }
.auth-logout { margin-top:16px; min-height:44px; padding:8px 0; border:0; background:transparent; color:var(--muted-readable); cursor:pointer; }
.auth-logout:hover { color:var(--text); }
.access-prompt { padding:28px 0; border-block:1px solid var(--border); }
.access-prompt h2 { font-size:20px; margin-bottom:12px; }
.access-prompt p { max-width:60ch; color:var(--muted-readable); line-height:1.8; margin-bottom:20px; }
.access-prompt .back-link { display:block; margin-top:20px; }

/* Subtitle Display V1: preserve bilingual utterance boundaries in all learning modes. */
.current-english, .practice-english, .current-chinese, .practice-chinese, .correct-answer [lang="en"] { white-space: pre-line; }
.current-copy[data-silence="true"] > p { visibility: hidden; }
/* Cloud learning uses the incumbent header and account dialog, without a new page. */
.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }
.brand { min-width: 0; }
.brand-mark { flex-shrink: 0; }
.sentence-copy { position: relative; }
.sentence-actions { display: flex; justify-content: center; margin-top: 12px; }
.sentence-heart { position: static; width: 44px; height: 44px; padding: 11px; border: 0; background: transparent; color: var(--muted-readable); border-radius: 4px; }
.sentence-heart svg { width: 22px; height: 22px; fill: none; stroke: var(--muted-readable); }
.sentence-heart[aria-pressed="true"] svg { fill: #EF4444; stroke: #EF4444; }
.sentence-heart:disabled { cursor: default; }
.current-copy[data-silence="true"] .sentence-heart { visibility: hidden; }
.saved-sentence-list { list-style: none; margin: 0; padding: 0 20px; }
.saved-sentence-list li { padding: 24px 0; }
.saved-sentence-list li+li { border-top: 1px solid var(--border); }
.saved-sentence-link { display: block; }
.saved-sentence-link p { white-space: pre-line; overflow-wrap: anywhere; font-size: 16px; line-height: 1.8; }
.saved-sentence-link p+p { margin-top: 12px; font-size: 14px; color: var(--muted-readable); }
.saved-sentence-link span { display: block; margin-top: 12px; font-size: 12px; color: var(--muted-readable); }
.saved-sentence-list .button { margin-top: 16px; }
@media (max-width: 360px) { .brand { font-size: 15px; gap: 8px; } .header-inner { padding-inline: 16px; gap: 8px; } }
.cloud-status { position: static; width: calc(100% - 24px); max-width: 560px; margin: 12px auto; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--white); color: var(--muted-readable); font-size: 14px; line-height: 1.6; }
.cloud-status:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cloud-status > span { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }

/* Three-page app shell inherits the existing honey-orange system. */
.page { padding-bottom: calc(48px + var(--tabbar-height) + env(safe-area-inset-bottom, 0px)); }
.bottom-navigation { position: fixed; z-index: 30; inset: auto 0 0; display: flex; justify-content: center; background: var(--white); border-top: 1px solid var(--border); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.bottom-navigation a { width: min(33.333%, 200px); height: var(--tabbar-height); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 12px; color: var(--muted-readable); }
.bottom-navigation svg { width: 23px; height: 23px; stroke-width: 1.7; }
.bottom-navigation a[aria-current="page"] { color: color-mix(in srgb, var(--primary-active) 55%, var(--text)); font-weight: 600; }
.bottom-navigation a[aria-current="page"] svg { color: var(--primary); }
.bottom-navigation a:hover { background: var(--page-tint); }
.account-surface { background: var(--page-tint); }
.account-page { max-width: 660px; padding: 28px 24px calc(48px + var(--tabbar-height) + env(safe-area-inset-bottom, 0px)); }
.member-card { display: flex; align-items: center; gap: 12px; min-height: 82px; background: var(--accent); border-radius: 16px; padding: 17px 18px; margin-bottom: 24px; }
.member-card:hover { background: color-mix(in srgb, var(--accent) 75%, var(--primary)); }
.member-symbol { display: grid; place-items: center; }
.member-symbol svg { width: 18px; height: 18px; }
.member-copy { flex: 1; min-width: 0; }
.member-copy strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.4; }
.member-copy>span { display: block; margin-top: 5px; font-size: 12px; line-height: 1.5; }
.member-action { font-size: 13px; display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.member-action svg { width: 16px; height: 16px; }
.account-group { background: var(--white); border-radius: 16px; margin-bottom: 24px; overflow: hidden; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 20px 12px; }
.section-heading h2 { margin: 0; font-size: 20px; font-weight: 600; }
.section-heading p { margin-top: 6px; font-size: 13px; color: var(--muted-readable); }
.text-action { border: 0; background: transparent; font-size: 13px; color: var(--muted-readable); min-width: 44px; min-height: 44px; }
.account-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 18px; align-items: center; gap: 14px; width: 100%; min-height: 76px; text-align: left; padding: 16px 20px; background: var(--white); border: 0; }
.account-row+.account-row, .account-menu .account-row:not(:last-child) { border-bottom: 1px solid var(--page-tint); }
.account-row:hover:not(:disabled) { background: var(--page-tint); }
.account-row:disabled { cursor: default; opacity: 1; }
.account-row>svg { width: 16px; height: 16px; color: var(--muted-readable); }
.row-icon { display: grid; place-items: center; color: var(--text); }
.row-icon svg { width: 21px; height: 21px; }
.row-copy { min-width: 0; }
.row-copy strong { font-size: 15px; font-weight: 550; display: block; }
.row-copy>span { display: block; font-size: 12px; line-height: 1.6; margin-top: 5px; color: var(--muted-readable); overflow-wrap: anywhere; }
.section-empty { padding: 20px; color: var(--muted-readable); line-height: 1.8; font-size: 14px; }
.history-list { list-style: none; padding: 0 20px 10px; margin: 0; }
.history-list li+li { border-top: 1px solid var(--page-tint); }
.history-item { display: flex; align-items: center; gap: 14px; padding: 16px 0; }
.history-cover { flex: 0 0 102px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: var(--page-tint); }
.history-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.history-copy { flex: 1; min-width: 0; }
.history-copy strong { display: block; font-size: 15px; font-weight: 550; line-height: 1.5; }
.history-copy>span { display: block; color: var(--muted-readable); font-size: 11px; margin-top: 5px; }
.history-progress { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.history-progress progress { width: 100%; min-width: 0; height: 5px; border: 0; border-radius: 4px; overflow: hidden; }
.history-progress progress::-webkit-progress-bar { background: var(--page-tint); }
.history-progress progress::-webkit-progress-value { background: var(--primary); }
.history-progress progress::-moz-progress-bar { background: var(--primary); }
.history-progress span { font-size: 11px; color: var(--muted-readable); }
.profile-header { display: flex; align-items: center; gap: 18px; padding: 16px 0 30px; }
.profile-avatar { width: 68px; height: 68px; flex: 0 0 68px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.profile-avatar svg { width: 30px; height: 30px; }
.profile-header>div:last-child { min-width: 0; }
.profile-header h2 { font-size: 20px; font-weight: 600; margin: 0; }
.profile-header p { color: var(--muted-readable); font-size: 12px; line-height: 1.6; margin-top: 6px; overflow-wrap: anywhere; }
.profile-header span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-readable); margin-top: 7px; }
.profile-header span svg { width: 15px; height: 15px; color: color-mix(in srgb, var(--primary-active) 55%, var(--text)); }
.group-label { font-size: 14px; font-weight: 500; margin: 28px 4px 12px; }
.logout-page { width: 100%; border: 0; background: var(--white); border-radius: 16px; min-height: 56px; margin-top: 24px; font-size: 15px; }
.logout-page:hover { background: var(--accent); }
.page-message { font-size: 14px; line-height: 1.7; margin-top: 16px; overflow-wrap: anywhere; }
.secondary-heading { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; margin: 0 0 24px; text-align: center; }
.secondary-heading a { min-height: 44px; display: grid; place-items: center; }
.secondary-heading h1 { font-size: 20px; font-weight: 600; letter-spacing: normal; margin: 0; }
.contact-hero { position: relative; min-height: 228px; border-radius: 16px; overflow: hidden; background: var(--accent); margin-bottom: 24px; }
.contact-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-hero>div { position: relative; width: 56%; padding: 30px 0 28px 22px; }
.contact-hero h2 { font-size: 20px; line-height: 1.5; font-weight: 600; margin: 0; }
.contact-hero p { margin-top: 14px; font-size: 12px; color: var(--muted-readable); line-height: 1.8; }
.contact-accent { display: block; height: 4px; width: 26px; background: var(--primary); border-radius: 2px; margin-top: 18px; }
.contact-options { display: grid; gap: 14px; }
.contact-options .account-row { border-radius: 16px; min-height: 86px; }
.detail-card { padding: 24px; }
.detail-card h2 { font-size: 18px; font-weight: 600; margin-bottom: 14px; }
.detail-card p { font-size: 14px; line-height: 1.8; color: var(--muted-readable); margin-bottom: 16px; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .page { padding-bottom: calc(40px + var(--tabbar-height) + env(safe-area-inset-bottom, 0px)); }
  .account-page { padding-top: 24px; padding-inline: 20px; }
}
@media (max-width: 360px) {
  .account-page { padding-inline: 16px; }
  .member-card { padding-inline: 14px; gap: 8px; }
  .member-action { font-size: 12px; }
  .history-cover { flex-basis: 78px; }
  .contact-hero>div { padding-left: 16px; width: 57%; }
  .contact-hero h2 { font-size: 18px; }
  .profile-header h2 { font-size: 18px; }
}
.vocabulary-items { list-style: none; padding: 0; margin: 20px 0 0; }
.vocabulary-items li { padding: 20px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.vocabulary-items strong { font-size: 20px; }
.vocabulary-items p { margin: 8px 0; line-height: 1.6; }
.vocabulary-source { color: var(--muted-readable); font-size: 14px; }
.vocabulary-items button, #vocabulary-close { min-height: 44px; min-width: 44px; }
@media (max-width: 480px) { .header-actions { gap: 4px; } .header-actions .auth-open { padding: 8px; font-size: 14px; } }

.current-quote.subtitle-paused .quote-mark { visibility: hidden; }

/* Membership: prices, how to buy (2026-10-31) */
.perk-list, .buy-steps { margin: 0 0 16px; padding-left: 20px; font-size: 15px; line-height: 1.9; }
.buy-steps li b { overflow-wrap: anywhere; }
.price-list { list-style: none; margin: 0; padding: 0; }
.price-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--border); }
.price-list li:last-child { border-bottom: 0; }
.price-list strong { font-size: 20px; color: var(--text); }
.price-list small { grid-column: 1 / -1; color: var(--muted-readable); font-size: 13px; }
.buy-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.access-price { font-weight: 600; color: var(--text) !important; }
.auth-legal { margin-top: 14px; font-size: 12px; line-height: 1.7; color: var(--muted-readable); }
.auth-legal a { color: var(--text); }

/* User agreement / privacy policy */
.legal-page { padding: 8px 0 32px; max-width: 70ch; font-size: 15px; line-height: 1.9; }
.legal-page h2 { font-size: 17px; font-weight: 600; margin: 24px 0 8px; }
.legal-page ul { padding-left: 20px; margin: 0; }
.legal-page p { margin: 0 0 8px; }
.legal-meta { color: var(--muted-readable); font-size: 13px; }
.legal-draft { background: var(--page-tint); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.legal-blank { background: var(--accent); padding: 0 4px; border-radius: 4px; }

/* Next lesson from the same video (2026-10-31) */
/* Rest of this video under the lesson: big cover for the next part, then compact rows (2026-10-31) */
.series-section { --bleed: 40px; margin: 36px calc(-1 * var(--bleed)) 8px; padding: 24px var(--bleed) 0; border-top: 10px solid #F4EEE3; display: grid; gap: 12px; }
.series-section > .series-heading:first-child { margin-top: 0; font-size: 20px; font-weight: 700; }
@media (max-width: 1000px) { .series-section { --bleed: 24px; } }
@media (max-width: 760px) { .series-section { --bleed: 20px; } }
.next-big { display: block; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--white); color: var(--text); box-shadow: 0 2px 10px rgba(46, 46, 46, .06); }
.next-big:hover { border-color: var(--primary); }
.next-big-cover { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--video-surface); }
.next-big-cover img, .next-big-cover video { width: 100%; height: 100%; object-fit: cover; display: block; }
.next-big.is-locked .next-big-cover img, .next-big.is-locked .next-big-cover video { opacity: .5; }
.next-chip { position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 999px; background: var(--primary); font-size: 12px; font-weight: 700; color: var(--text); }
.next-big-cover .duration { right: 12px; bottom: 12px; }
.next-big-center { position: absolute; inset: 0; display: grid; place-items: center; }
.next-play { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 16px rgba(0, 0, 0, .25); }
.next-play svg { width: 26px; height: 26px; fill: var(--text); stroke: var(--text); margin-left: 3px; }
.next-lock { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(23, 23, 23, .78); color: var(--white); font-size: 14px; font-weight: 600; }
.next-lock svg { width: 17px; height: 17px; stroke: var(--primary); stroke-width: 2; }
.next-big-body { display: flex; align-items: center; gap: 12px; padding: 14px 16px 16px; }
.next-big-text { flex: 1; min-width: 0; display: grid; gap: 4px; }
.next-big-text strong { font-size: 17px; line-height: 1.4; }
.next-big-text span { font-size: 13px; color: var(--muted-readable); }
.next-go { flex: none; display: flex; align-items: center; gap: 2px; height: 36px; padding: 0 10px 0 14px; border-radius: 999px; background: var(--primary); font-size: 14px; font-weight: 600; }
.next-go svg { width: 16px; height: 16px; stroke-width: 2.2; }
.next-big.is-locked .next-go { background: var(--text); color: var(--white); }
.series-heading { margin: 12px 4px 0; font-size: 16px; }
.series-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.series-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; color: var(--text); }
a.series-row:hover { background: var(--page-tint); }
.series-row.is-current { background: var(--page-tint); box-shadow: inset 0 0 0 1px var(--border); }
.series-thumb { position: relative; flex: none; width: 104px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--page-tint); }
.series-thumb img, .series-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.series-no { position: absolute; left: 4px; top: 4px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 6px; background: rgba(23, 23, 23, .78); color: var(--white); font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.series-copy { flex: 1; min-width: 0; display: grid; gap: 3px; }
.series-title { font-size: 15px; line-height: 1.4; }
.series-row.is-current .series-title { font-weight: 600; }
.series-meta { font-size: 12px; color: var(--muted-readable); }
.series-state { flex: none; display: flex; align-items: center; gap: 2px; font-size: 12px; color: var(--muted-readable); }
.series-state svg { width: 16px; height: 16px; }
.series-state.is-locked svg { stroke-width: 2; }
/* Free-tier nudges (2026-10-31) */
.nudge-card { margin: 20px 0 8px; padding: 20px; border-radius: 16px; background: var(--page-tint); border: 1px solid var(--border); }
.nudge-card h2 { margin: 0 0 6px; font-size: 18px; }
.nudge-card p { margin: 0 0 12px; color: var(--muted-readable); line-height: 1.6; }
.nudge-card .access-price { color: var(--text); font-weight: 600; }
.nudge-card .buy-actions { margin-top: 4px; }
.list-heading + .nudge-card { margin: 0 0 24px; }