:root {
  color-scheme: light;
  --bg: #f8fafc;
  --surface: #fff;
  --surface-soft: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --brand: #2376e8;
  --brand-soft: #eff6ff;
  --shadow: 0 1px 2px rgb(15 23 42 / 6%), 0 1px 4px rgb(15 23 42 / 4%);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Microsoft YaHei", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .02em;
}

button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 32px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
}

.brand strong { font-size: 20px; letter-spacing: -.02em; }
.brand strong span { color: var(--brand); }
.site-logo { width: 36px; height: 36px; border-radius: 9px; object-fit: contain; }

.brand-mark {
  position: relative;
  width: 29px;
  height: 34px;
  display: inline-block;
}

.brand-mark i {
  position: absolute;
  inset: 11px 4px 0;
  border-radius: 50% 50% 7px 7px;
  background: linear-gradient(90deg, #63a5f3 0 45%, white 46% 54%, #2376e8 55%);
}

.brand-mark b {
  position: absolute;
  left: 11px;
  top: 3px;
  width: 8px;
  height: 15px;
  border: 2px solid #2376e8;
  border-radius: 5px;
}

.brand-mark em {
  position: absolute;
  left: 7px;
  top: 0;
  width: 16px;
  height: 22px;
  border: 2px solid #a6caff;
  border-top-color: transparent;
  border-radius: 0 0 10px 10px;
}

.desktop-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-link, .account-chip, .theme-toggle, .icon-button, .mobile-method {
  border: 0;
  background: transparent;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 22px;
  color: #334155;
  white-space: nowrap;
}

.nav-link span { font-size: 22px; color: #475569; line-height: 1; }
.desktop-nav .nav-link span { display: grid; width: 18px; height: 18px; place-items: center; font-size: inherit; }
.desktop-nav .nav-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.desktop-nav .nav-link.active .nav-icon-home,
.desktop-nav .nav-link.active .nav-icon-favorite { fill: currentColor; }
.nav-link:hover, .nav-link.active { color: #1d4ed8; background: var(--brand-soft); }
.nav-link.active span { color: var(--brand); }

.account-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  color: #334155;
  letter-spacing: .16em;
}

.account-chip span { display: grid; width: 17px; height: 17px; place-items: center; color: var(--brand); }
.account-chip svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.mobile-filter, .mobile-method, .theme-toggle { display: none; }

.app-shell {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  min-height: 100vh;
  padding-top: 64px;
}

.sidebar {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  padding: 0 9px 18px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  scrollbar-color: #64748b transparent;
  scrollbar-width: thin;
}

.side-card {
  margin-bottom: 10px;
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.side-title, .calendar-head, .side-title h2, .filters h2, .learning-message-card h2 {
  display: flex;
  align-items: center;
}

.side-title { justify-content: space-between; }
.side-title h2, .filters h2, .learning-message-card h2 { gap: 8px; margin: 0; font-size: 17px; font-weight: 600; }
.side-title h2 span, .filters h2 span, .learning-message-card h2 span { display: grid; width: 25px; height: 25px; place-items: center; color: var(--brand); }
.side-title h2 svg, .filters h2 svg, .learning-message-card h2 svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }

.mini-theme {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 20px;
}
.mini-theme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 14px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.stats div { position: relative; text-align: center; }
.stats div:first-child::after {
  content: "";
  position: absolute;
  height: 2px;
  inset: auto 16px -11px;
  border-radius: 2px;
  background: var(--brand);
}

.stats strong { display: block; margin-bottom: 4px; font-size: 19px; color: #4f46e5; }
.stats div:nth-child(2) strong { color: #059669; }
.stats div:nth-child(3) strong { color: #d97706; }
.stats div:nth-child(4) strong { color: #e11d48; }
.stats span { color: var(--muted); font-size: 11px; }

.calendar-head { justify-content: space-between; padding: 4px 0 12px; font-size: 12px; }
.calendar-head button { border: 0; background: none; color: var(--muted); font-size: 25px; }
.calendar-week, .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.calendar-week { margin-bottom: 10px; color: var(--muted); font-size: 10px; }
.calendar-days { row-gap: 4px; font-size: 10px; }
.calendar-days span { display: grid; place-items: center; width: 36px; height: 36px; margin: auto; border-radius: 10px; }
.calendar-days .muted { color: transparent; }
.calendar-days .learned { background: #d1fae5; color: #065f46; font-weight: 700; }
.calendar-days .today { background: #059669; color: white; font-weight: 700; box-shadow: 0 4px 14px rgb(5 150 105 / 24%); }
.calendar-days .today.learned { outline: 3px solid #a7f3d0; outline-offset: 2px; }

.filters h2 { margin-bottom: 18px; }
.filters label { display: block; margin: 16px 2px 7px; color: #94a3b8; font-size: 12px; }

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.segmented button { padding: 7px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); }
.segmented button.active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow); }

select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
  background: var(--surface-soft);
  color: #475569;
}

.content { min-width: 0; padding: 0 18px 36px 32px; }

.learning-message-card { padding: 16px; border-radius: 16px; }
.learning-message-card h2 { margin-bottom: 12px; }
.learning-message-card > div { padding: 12px; border-left: 4px solid var(--brand); border-radius: 0 8px 8px 0; background: #eff6ff; }
.learning-message-card p { margin: 0; overflow-wrap: anywhere; color: #1d4ed8; font-size: 14px; font-weight: 500; line-height: 1.65; white-space: pre-wrap; }

.site-footer { display: grid; gap: 8px; justify-items: center; padding: 24px 24px 28px; border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 12px; line-height: 1.7; text-align: center; }
.site-footer p { margin: 0; color: #475569; }
.site-footer div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
body.play-view .site-footer { display: none; }
body.dark .learning-message-card > div { background: rgb(30 64 175 / 20%); }
body.dark .learning-message-card p { color: #60a5fa; }
body.dark .site-footer { background: #111827; }
body.dark .site-footer p { color: #cbd5e1; }

.playback-access-dialog { width: min(420px, calc(100vw - 32px)); padding: 34px 30px 28px; border: 0; border-radius: 20px; background: var(--surface); color: var(--text); text-align: center; box-shadow: 0 24px 70px rgb(15 23 42 / 28%); }
.playback-access-dialog::backdrop { background: rgb(15 23 42 / 52%); backdrop-filter: blur(3px); }
.playback-access-close { position: absolute; top: 14px; right: 14px; display: grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: var(--surface-soft); color: var(--muted); font-size: 22px; }
.playback-access-icon { display: grid; width: 58px; height: 58px; margin: 0 auto 18px; place-items: center; border-radius: 18px; background: var(--brand-soft); color: var(--brand); }
.playback-access-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.playback-access-dialog h2 { margin: 0; font-size: 23px; }
.playback-access-dialog p { margin: 12px 0 24px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.playback-access-dialog a { display: grid; min-height: 44px; place-items: center; border-radius: 11px; font-size: 14px; font-weight: 750; text-decoration: none; }
.playback-access-primary { background: var(--brand); color: white; }
.playback-access-secondary { margin-top: 10px; border: 1px solid var(--line); background: var(--surface); color: #475569; }
body.dark .playback-access-secondary { color: #cbd5e1; }

.category-tabs {
  position: sticky;
  top: 64px;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  height: 60px;
  gap: 3px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.category-tabs button {
  height: 44px;
  padding: 0 17px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: #475569;
}

.category-tabs button:hover, .category-tabs button.active { color: #1d4ed8; }
.category-tabs button.active { border-bottom-color: var(--brand); font-weight: 600; }

.search-panel {
  position: sticky;
  top: 124px;
  z-index: 19;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.search-panel[hidden] { display: none; }
.search-panel span { color: var(--brand); font-size: 22px; }
.search-panel input { width: 100%; border: 0; outline: none; background: transparent; color: var(--text); }

.video-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding-top: 14px;
}

.video-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}

.video-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgb(15 23 42 / 10%); }

.cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #eaf1ff, #d7e4fb 55%, #c8d9f5); }
.cover::before { content: "SpeakFlow"; position: absolute; inset: 0; display: grid; place-items: center; color: #7392c8; font-size: clamp(18px, 2vw, 27px); font-weight: 800; letter-spacing: .08em; }
.cover img { position: relative; z-index: 1; width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s ease; }
.video-card:hover .cover img { transform: scale(1.025); }

.check-badge, .difficulty-badge, .duration {
  position: absolute;
  z-index: 2;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1;
}

.check-badge { top: 10px; left: 10px; padding: 6px 8px; color: white; background: #f5a30a; }
.difficulty-badge { bottom: 10px; left: 10px; padding: 6px 9px; color: #92400e; background: #fef3c7; }
.difficulty-badge.beginner { color: #047857; background: #d1fae5; }
.difficulty-badge.advanced { color: #7c3aed; background: #ede9fe; }
.duration { right: 9px; bottom: 10px; padding: 5px 7px; color: white; background: rgb(15 23 42 / 82%); }

.favorite {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 7px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 96%);
  color: #f35b74;
  box-shadow: 0 2px 8px rgb(15 23 42 / 12%);
}

.favorite svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.favorite.active svg { fill: currentColor; }

.card-body { padding: 13px 16px 14px; }
.card-body h2 { margin: 0 0 4px; overflow: hidden; color: #111827; font-size: 17px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.description { margin: 0; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.6; white-space: nowrap; text-overflow: ellipsis; }

.tags { display: none; }
.meta, .details { display: flex; align-items: center; gap: 7px; min-width: 0; }
.meta { margin-top: 11px; }
.meta span { overflow: hidden; padding: 5px 8px; border: 1px solid; border-radius: 6px; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.meta .accent { color: #be185d; border-color: #fce7f3; background: #fff1f2; }
.meta .tag-one { color: #6b21a8; border-color: #e9d5ff; background: #faf5ff; }
.meta .tag-two { color: #4d7c0f; border-color: #d9f99d; background: #f7fee7; }

.details {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid #f1f5f9;
}

.details span {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: #475569;
  font-size: 10px;
  white-space: nowrap;
}

.details time { margin-left: auto; color: #94a3b8; font-size: 10px; white-space: nowrap; }

.empty-state { padding: 90px 20px; text-align: center; color: var(--muted); }
.empty-state span { font-size: 46px; color: #94a3b8; }
.empty-state h2 { color: var(--text); }

.page-view { min-height: calc(100vh - 64px); }
.section-view .app-shell { grid-template-columns: minmax(0, 1fr); }
.section-view .content { padding: 0 16px 80px; }

.inner-page {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 20px 0 40px;
}

.inner-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.inner-heading > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #e7f0ff;
  color: var(--brand);
  font-size: 25px;
}

.inner-heading > span svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.inner-heading h1, .collection-head h1 {
  margin: 0;
  font-size: 25px;
}

.info-callout {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  padding: 20px 24px;
  border: 1px solid #b9d7f3;
  border-radius: 16px;
  background: #f0f8ff;
  color: #334155;
}

.info-callout > span { color: var(--brand); font-size: 20px; }
.info-callout p { margin: 0; line-height: 1.8; }

.method-list { display: grid; gap: 20px; }

.method-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.method-card header { display: flex; align-items: center; gap: 12px; }
.method-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #e7f0ff; color: var(--brand); font-size: 22px; }
.method-card h2 { margin: 0 0 2px; font-size: 20px; }
.method-card code { padding: 2px 7px; border-radius: 5px; background: var(--surface-soft); color: var(--muted); letter-spacing: .14em; }
.method-card > p { color: #334155; line-height: 1.8; }
.method-card .method-level { color: #334155; }
.method-level strong { color: var(--brand); font-weight: 500; }
.method-card h3 { margin: 18px 0 12px; font-size: 15px; }
.method-card ol { margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.method-card li { display: grid; grid-template-columns: 24px 1fr; gap: 9px; margin: 9px 0; color: #334155; line-height: 1.65; counter-increment: steps; }
.method-card li::before { content: counter(steps); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e7f0ff; color: var(--brand); font-size: 11px; }
.mini-methods { margin-top: 20px; }
.mini-methods > div { padding: 12px 0; border-top: 1px solid var(--line); }
.mini-methods p { margin: 4px 0; }
.mini-methods b { color: #059669; font-size: 12px; }

.search-page { padding-top: 20px; }
.subtitle-search-form {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 7px 8px 7px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.subtitle-search-form > span { color: #94a3b8; font-size: 25px; }
.subtitle-search-form input { min-width: 0; padding: 11px 0; border: 0; outline: none; background: transparent; color: var(--text); font-size: 16px; }
.subtitle-search-form button { padding: 13px 24px; border: 0; border-radius: 12px; background: var(--brand); color: white; font-weight: 600; }
.subtitle-search-form button:disabled { background: #94b7ee; cursor: default; }
.subtitle-results { display: grid; gap: 12px; padding-top: 18px; }
.result-count { color: var(--muted); font-size: 13px; }
.subtitle-hit { display: grid; grid-template-columns: 110px auto 1fr; align-items: center; gap: 14px; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: left; }
.subtitle-hit img, .subtitle-hit .cover-fallback { width: 110px; aspect-ratio: 16 / 9; border-radius: 10px; object-fit: cover; }
.subtitle-hit .hit-time { color: var(--brand); font-size: 11px; }
.subtitle-hit b, .subtitle-hit small, .subtitle-hit em { display: block; }
.subtitle-hit b { margin-bottom: 4px; }
.subtitle-hit small { color: var(--muted); }
.subtitle-hit em { margin-top: 4px; color: #94a3b8; font-size: 11px; font-style: normal; }
.subtitle-hit mark, .transcript-list mark, .current-caption mark { background: transparent; color: #a855f7; }
.transcript-list mark.learning-pair-0, .current-caption mark.learning-pair-0 { color: #a855f7; }
.transcript-list mark.learning-pair-1, .current-caption mark.learning-pair-1 { color: #f59e0b; }
.transcript-list mark.learning-pair-2, .current-caption mark.learning-pair-2 { color: #f472b6; }
.transcript-list mark.learning-pair-3, .current-caption mark.learning-pair-3 { color: #fb923c; }
.transcript-list mark.learning-pair-4, .current-caption mark.learning-pair-4 { color: #3b82f6; }
.transcript-list mark.learning-pair-5, .current-caption mark.learning-pair-5 { color: #10b981; }
.transcript-list article > span mark.learning-highlight,
.current-caption > span mark.learning-highlight { font-weight: 700; }

.inner-page.collections-page { width: min(1380px, 100%); }
.collections-page { min-height: calc(100vh - 64px); }
.collection-desktop-layout { display: grid; grid-template-columns: 292px minmax(0, 1fr); align-items: start; gap: 24px; }
.collection-main { min-width: 0; }
.collection-desktop-manager { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.collection-desktop-manager > header { display: flex; min-height: 64px; align-items: center; padding: 0 20px; border-bottom: 1px solid var(--line); }
.collection-desktop-manager h2 { margin: 0; font-size: 18px; }
.collection-desktop-manager > .collection-manager-body { max-height: calc(100vh - 169px); padding: 20px 16px 24px; overflow-y: auto; }
.collection-head { display: flex; align-items: center; gap: 10px; }
.collection-head h1 { flex: 1; }
.collection-head button { display: grid; width: 32px; height: 32px; padding: 5px; place-items: center; border: 0; background: none; color: #64748b; }
.collection-head button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.collection-head .collection-manage-trigger { display: none; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: #f1f5f9; }
.collection-head .collection-manage-trigger svg { width: 18px; height: 18px; }
.collection-folders { display: flex; gap: 8px; margin: 22px 0 12px; overflow-x: auto; scrollbar-width: none; }
.collection-folders::-webkit-scrollbar { display: none; }
.collection-folders button { padding: 9px 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.collection-folders button.active { border-color: var(--brand); background: var(--brand); color: white; }
.collection-manager-backdrop { position: fixed; z-index: 1200; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgb(15 23 42 / 60%); backdrop-filter: blur(4px); }
.collection-manager-backdrop[hidden] { display: none; }
.collection-manager { display: flex; width: min(440px, 100%); max-height: 85vh; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 24px 64px rgb(15 23 42 / 28%); }
.collection-manager > header { display: flex; min-height: 72px; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--line); }
.collection-manager h3 { margin: 0; color: var(--text); font-size: 18px; }
.collection-manager > header button { display: grid; width: 36px; height: 36px; padding: 8px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #94a3b8; }
.collection-manager svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.collection-manager-body { min-height: 0; padding: 24px 20px 30px; overflow-y: auto; }
.collection-manager-loading { padding: 44px 0; color: var(--muted); text-align: center; }
.collection-manager-section + .collection-manager-section { margin-top: 28px; }
.collection-manager-section > label { display: block; margin-bottom: 12px; color: #94a3b8; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.collection-quick-card { overflow: hidden; border: 1px solid #f1f5f9; border-radius: 16px; background: #f8fafc; }
.collection-one-click { display: flex; min-height: 62px; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #e2e8f0; }
.collection-bolt { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 11px; background: #dbeafe; color: #2563eb; }
.collection-bolt svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; }
.collection-one-click strong { flex: 1; color: #334155; font-size: 14px; }
.collection-switch { position: relative; width: 44px; height: 24px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 999px; background: #cbd5e1; transition: background .18s ease; }
.collection-switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgb(15 23 42 / 20%); transition: translate .18s ease; }
.collection-switch.active { background: var(--brand); }
.collection-switch.active i { translate: 20px 0; }
.collection-quick-target { display: grid; gap: 7px; padding: 10px 16px 16px; }
.collection-quick-target span { color: #94a3b8; font-size: 11px; }
.collection-quick-target select { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; outline: none; background: var(--surface); color: var(--text); }
.collection-quick-target select:disabled { opacity: .55; }
.collection-create-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.collection-create-row input { min-width: 0; height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; outline: none; background: var(--surface); color: var(--text); font-size: 14px; }
.collection-create-row input:focus { border-color: #93c5fd; box-shadow: 0 0 0 3px rgb(59 130 246 / 10%); }
.collection-create-row button { min-width: 62px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--brand); color: white; font-weight: 700; }
.collection-create-row button:disabled { background: #93b4ea; cursor: default; }
.collection-existing-list { display: grid; gap: 8px; }
.collection-manager-empty { margin: 28px 0 0; color: #94a3b8; font-style: italic; text-align: center; }
.collection-manager-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; }
.collection-manager-row svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.collection-manager-row > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; background: #eff6ff; color: var(--brand); }
.collection-manager-row > span svg { width: 16px; height: 16px; }
.collection-manager-row > div { display: grid; min-width: 0; gap: 2px; }
.collection-manager-row strong { overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.collection-manager-row small { color: #94a3b8; font-size: 11px; }
.collection-manager-row > button { display: grid; width: 30px; height: 30px; padding: 6px; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #94a3b8; }
.collection-manager-row > button svg { width: 14px; height: 14px; }
.collection-manager-row > button:hover { background: #f1f5f9; color: #475569; }
.collection-manager-row > button:last-child:hover { background: #fff1f2; color: #e11d48; }
.collection-manager-row.editing { grid-template-columns: auto 1fr auto auto; }
.collection-manager-row.editing input { min-width: 0; height: 34px; padding: 0 10px; border: 1px solid #93c5fd; border-radius: 8px; outline: none; color: var(--text); }
.favorite-picker-backdrop { position: fixed; z-index: 1400; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgb(15 23 42 / 60%); backdrop-filter: blur(4px); }
.favorite-picker { width: min(420px, 100%); max-height: 78vh; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 24px 64px rgb(15 23 42 / 28%); }
.favorite-picker > header { display: flex; min-height: 68px; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--line); }
.favorite-picker h3 { margin: 0; color: var(--text); font-size: 18px; }
.favorite-picker > header button { display: grid; width: 36px; height: 36px; padding: 8px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #94a3b8; }
.favorite-picker svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.favorite-picker-list { display: grid; gap: 8px; max-height: calc(78vh - 68px); padding: 16px 20px 24px; overflow-y: auto; }
.favorite-picker-list > button { display: grid; min-height: 56px; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--text); text-align: left; }
.favorite-picker-list > button:hover,
.favorite-picker-list > button:focus-visible { border-color: #93c5fd; background: #eff6ff; outline: none; }
.favorite-picker-list > button > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: #dbeafe; color: var(--brand); }
.favorite-picker-list > button > strong { min-width: 0; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.favorite-picker-list > button > small { color: #94a3b8; font-size: 11px; }
.favorite-picker-list > button > svg { color: var(--brand); }
.collection-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); }
.collection-tabs button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-bottom: 2px solid transparent; background: none; color: #64748b; font-size: 14px; font-weight: 700; line-height: 20px; transition: border-color .18s ease, color .18s ease; }
.collection-tabs button:hover { color: #0f172a; }
.collection-tabs button.active { border-bottom-color: #3b82f6; color: #2563eb; }
.collection-tabs b { display: inline-flex; min-width: 0; align-items: center; justify-content: center; margin: 0; padding: 2px 6px; border-radius: 9999px; background: #f1f5f9; color: #64748b; font-size: 10px; font-weight: 700; line-height: 20px; }
.collection-tabs b[hidden] { display: none; }
.collection-tabs button.active b { background: #dbeafe; color: #2563eb; }
.collection-actions { display: flex; gap: 8px; padding-top: 8px; }
.collection-actions button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); color: #475569; font-size: 12px; }
.collection-actions button.selected { border-color: #bfdbfe; background: #eff6ff; color: #2563eb; }
.collection-actions svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.collection-empty { min-height: 380px; display: grid; place-content: center; justify-items: center; color: #94a3b8; }
.collection-empty span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--surface); color: #cbd5e1; font-size: 34px; }
.collection-learning-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 10px; padding-top: 14px; }
.collection-content .learning-card { display: flex; flex-direction: column; }
.collection-content .learning-definition-reveal { display: none; }
.collection-content .learning-definition { display: block; }
.collections-page.hide-collection-english .collection-learning-grid .learning-card h4,
.collections-page.hide-collection-english .collection-learning-grid .learning-phonetics { visibility: hidden; }
.collections-page.hide-collection-chinese .collection-learning-grid .learning-definition { visibility: hidden; }
.collection-subtitle-list { display: grid; gap: 10px; padding-top: 14px; }
.collection-subtitle-card { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 1px 2px rgb(15 23 42 / 4%); }
.collection-subtitle-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.collection-subtitle-card > header > button:first-child { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: space-between; gap: 12px; padding: 0; border: 0; background: transparent; color: #475569; text-align: left; }
.collection-subtitle-card > header b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collection-subtitle-card time { flex: 0 0 auto; color: #2563eb; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; font-weight: 700; }
.collection-subtitle-card > header > button:last-child { display: grid; width: 30px; height: 30px; flex: 0 0 auto; padding: 5px; place-items: center; border: 0; background: transparent; color: #f59e0b; }
.collection-subtitle-card > header svg { width: 19px; height: 19px; fill: currentColor; stroke: currentColor; stroke-width: 1.8; }
.collection-subtitle-card p { margin: 9px 0 0; line-height: 1.55; }
.collection-subtitle-english { color: #0f172a; font-size: 16px; font-weight: 700; }
.collection-subtitle-chinese { color: #64748b; font-size: 14px; }
.collections-page.hide-collection-english .collection-subtitle-english,
.collections-page.hide-collection-chinese .collection-subtitle-chinese { visibility: hidden; }
.favorite-video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 14px; }
.favorite-video-grid article { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.favorite-video-card { width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.favorite-video-card div { position: relative; aspect-ratio: 16 / 9; }
.favorite-video-card img { width: 100%; height: 100%; object-fit: cover; }
.favorite-video-card .favorite-duration { position: absolute; right: 8px; bottom: 7px; padding: 3px 6px; border-radius: 4px; background: rgb(15 23 42 / 75%); color: white; font-size: 11px; }
.cover-fallback { display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, #eaf1ff, #d7e4fb 55%, #c8d9f5); color: #7392c8; font-weight: 800; letter-spacing: .08em; }
.favorite-video-card .cover-fallback { width: 100%; height: 100%; font-size: 22px; }
.favorite-video-card h3 { margin: 10px 12px 3px; }
.favorite-video-card p { margin: 0 12px 12px; color: var(--muted); }
.profile-page {
  width: min(640px, 100%);
  min-height: calc(100vh - 64px);
  margin: 0 auto;
  padding: 32px 0 70px;
}

.profile-banner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 32px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(135deg, #2c6ceb, #2d57d8);
  color: white;
}

.profile-banner > span { display: grid; place-items: center; width: 80px; height: 80px; border: 1px solid rgb(255 255 255 / 25%); border-radius: 50%; background: rgb(255 255 255 / 12%); font-size: 38px; }
.profile-banner > span svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.profile-banner h1 { margin: 0 0 5px; font-size: 27px; }
.profile-banner p { margin: 0; font-size: 12px; }
.profile-body { padding: 32px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 20px 20px; background: var(--surface); }
.profile-section-title { display: flex; align-items: center; gap: 12px; }
.profile-section-title > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #faf5ff; color: #a855f7; }
.profile-section-title h2, .security-row h2 { margin: 0; font-size: 18px; }
.profile-section-title p, .security-row p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.device-list { display: grid; gap: 10px; margin: 18px 0 24px; }
.device-list article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid #edf2f7; border-radius: 12px; background: var(--surface-soft); }
.device-list article > div { min-width: 0; }
.device-list b { display: inline-block; margin-right: 8px; padding: 3px 7px; border-radius: 5px; background: #e8eef8; font-size: 12px; }
.device-list em { padding: 3px 7px; border-radius: 4px; background: #dcfce7; color: #15803d; font-size: 11px; font-style: normal; }
.device-list p, .device-list small { display: block; overflow-wrap: anywhere; margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.device-list button, .security-row button { padding: 8px 16px; border: 0; border-radius: 8px; background: #3b82f6; color: white; white-space: nowrap; }
.device-list button.danger { background: #ef4444; }
.security-row { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; border-top: 1px solid var(--line); }
.logout-demo { width: 100%; padding: 11px; border: 1px solid #fecaca; border-radius: 10px; background: #fff1f2; color: #dc2626; }
.profile-name-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin: 18px 0 28px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.profile-name-form label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.profile-name-form input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); outline: none; }
.profile-name-form input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgb(59 130 246 / 12%); }
.profile-name-form button { height: 40px; padding: 0 18px; border: 0; border-radius: 9px; background: var(--brand); color: white; }
.profile-name-error { grid-column: 1 / -1; min-height: 16px; margin: 0; color: #dc2626; font-size: 12px; }
.profile-loading { min-height: 320px; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 30px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--muted); text-align: center; }
.profile-guest-page { display: grid; place-items: center; }
.profile-login-required { position: relative; isolation: isolate; display: grid; width: 100%; min-height: 300px; place-content: center; justify-items: center; gap: 11px; overflow: hidden; padding: 42px 32px; border: 1px solid #dbe4f2; border-radius: 24px; background: radial-gradient(circle at 50% 0, rgb(59 130 246 / 13%), transparent 52%), var(--surface); box-shadow: 0 18px 50px rgb(15 23 42 / 8%); color: var(--muted); text-align: center; }
.profile-login-required > span { display: grid; width: 68px; height: 68px; margin-bottom: 5px; place-items: center; border: 1px solid rgb(255 255 255 / 72%); border-radius: 22px; background: linear-gradient(145deg, #eff6ff, #dbeafe); box-shadow: 0 10px 24px rgb(37 99 235 / 15%); color: var(--brand); font-size: 28px; font-weight: 800; }
.profile-login-required > span svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.profile-login-required h1, .profile-login-required p { margin: 0; }
.profile-login-required h1 { color: var(--text); font-size: 28px; line-height: 1.25; letter-spacing: -.02em; }
.profile-login-required p { max-width: 320px; font-size: 14px; line-height: 1.65; }
.profile-login-required a { display: inline-flex; min-height: 44px; align-items: center; gap: 6px; margin-top: 10px; padding: 0 22px; border-radius: 12px; background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 9px 20px rgb(37 99 235 / 24%); color: white; font-weight: 700; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.profile-login-required a:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgb(37 99 235 / 30%); }
.profile-login-required a:focus-visible { outline: 3px solid rgb(59 130 246 / 25%); outline-offset: 3px; }
.profile-login-required a svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.password-dialog { width: min(430px, calc(100vw - 28px)); padding: 0; border: 0; border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: 0 24px 80px rgb(15 23 42 / 28%); }
.password-dialog::backdrop { background: rgb(15 23 42 / 55%); backdrop-filter: blur(3px); }
.password-dialog form { display: grid; gap: 16px; padding: 22px; }
.password-dialog header { display: flex; align-items: start; justify-content: space-between; gap: 15px; margin-bottom: 2px; }
.password-dialog header h2, .password-dialog header p { margin: 0; }
.password-dialog header h2 { display: flex; align-items: center; gap: 8px; }
.password-dialog header h2 svg { width: 20px; height: 20px; fill: none; stroke: var(--brand); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.password-dialog header p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.password-dialog header button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-soft); color: var(--muted); font-size: 22px; }
.password-dialog label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.password-dialog input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); outline: none; }
.password-dialog input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgb(59 130 246 / 12%); }
.password-error { min-height: 18px; margin: -4px 0; color: #dc2626; font-size: 12px; }
.password-submit { padding: 11px; border: 0; border-radius: 9px; background: var(--brand); color: white; }

.play-view { overflow: hidden; }
.play-view .topbar, .play-view .bottom-nav { display: none; }
.play-view .app-shell { display: block; min-height: 100vh; padding: 0; }
.play-view .content { padding: 0; }
.play-view .page-view { min-height: 100vh; }

.player-page {
  display: grid;
  grid-template-columns: 50% minmax(0, 1fr);
  gap: 12px;
  height: 100vh;
  padding: 8px 0 0;
  background: var(--bg);
}

.player-left, .transcript-panel { min-width: 0; overflow: hidden; border-radius: 16px; background: var(--surface); }
.player-left { width: calc(100% - 16px); margin-left: 16px; padding: 0 13px 20px; overflow-y: auto; }
.player-left > header { height: 52px; display: flex; align-items: center; gap: 8px; margin: 0 -13px; padding: 0 6px 0 0; }
.player-left > header > button { border: 0; background: none; color: #64748b; font-size: 28px; }
.player-left > header h1 { overflow: hidden; flex: 1; min-width: 0; margin: 0; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.player-left > header div { display: flex; gap: 8px; margin-left: auto; }
.player-left > header div button { display: flex; height: 30px; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid #e2e8f0; border-radius: 999px; background: #e2e8f0; color: #64748b; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 2px rgb(15 23 42 / 6%); }
.player-left > header button svg,
.mobile-study-toolbar svg,
.transcript-list article > button svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.player-left > header > button svg { width: 22px; height: 22px; }
.player-left > header div button svg { width: 18px; height: 18px; }
.player-left > header .player-like { color: #e11d48; background: #fff1f2; }
.player-left > header .player-like:not(.active) { color: #64748b; background: #f1f5f9; }
.player-left > header .player-like svg { fill: currentColor; }
.player-left > header .player-like:not(.active) svg { fill: none; }
.player-settings { font-size: 12px; }
@media (min-width: 1024px) {
  .player-left > header .player-settings { display: none; }
}
.checkin-dialog { width: min(520px, calc(100vw - 28px)); padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: 0 24px 80px rgb(15 23 42 / 28%); }
.checkin-dialog::backdrop { background: rgb(15 23 42 / 52%); backdrop-filter: blur(2px); }
.checkin-dialog > header { display: flex; align-items: center; gap: 14px; padding: 24px 26px 13px; }
.checkin-dialog h3, .checkin-dialog p { margin: 0; }
.checkin-dialog h3 { font-size: 18px; }
.checkin-dialog header p, .checkin-complete p { margin-top: 6px; color: var(--muted); font-size: 13px; }
.checkin-icon { display: grid; flex: 0 0 auto; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #dcfce7; color: #16a34a; font-size: 22px; font-weight: 800; }
.checkin-steps { display: grid; gap: 10px; margin: 4px 26px 22px; padding: 16px 18px 16px 42px; border-radius: 12px; background: var(--surface-soft); color: #475569; font-size: 13px; line-height: 1.55; }
.checkin-steps li::marker { color: var(--brand); font-weight: 800; }
.checkin-complete { display: grid; justify-items: center; padding: 30px 28px 25px; text-align: center; }
.checkin-complete .checkin-icon { margin-bottom: 13px; }
.checkin-dialog footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-soft); }
.checkin-dialog footer button { min-width: 92px; padding: 10px 17px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: #475569; }
.checkin-dialog footer .primary { border-color: var(--brand); background: var(--brand); color: white; }
.checkin-dialog footer .danger { border-color: #fecaca; background: #fff1f2; color: #dc2626; }
.player-settings-sheet {
  position: fixed;
  inset: auto 0 0;
  width: min(520px, 100vw);
  max-width: none;
  max-height: min(78vh, 560px);
  margin: 0 auto;
  padding: 0;
  overflow: hidden auto;
  border: 0;
  border-radius: 24px 24px 0 0;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 -20px 60px rgb(15 23 42 / 18%);
}
.player-settings-sheet::backdrop { background: rgb(15 23 42 / 36%); backdrop-filter: blur(4px); }
.player-settings-sheet > header { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 24px; }
.player-settings-sheet h3 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 18px; line-height: 26px; }
.player-settings-sheet h3 svg { width: 18px; height: 18px; color: var(--brand); }
.player-settings-sheet button svg,
.player-settings-sheet h3 svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.player-settings-sheet > header > button { display: grid; width: 40px; height: 40px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: #f1f5f9; color: #64748b; }
.player-settings-sheet > header > button svg { width: 18px; height: 18px; }
.settings-sheet-body { padding: 0 24px 20px; }
.settings-sheet-row { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin: 0; }
.settings-sheet-row strong, .caption-size-setting > strong { color: #1e293b; font-size: 15px; font-weight: 700; }
.settings-download { display: grid; width: 40px; height: 24px; padding: 0; place-items: center; border: 0; border-radius: 14px; background: var(--brand); color: white; }
.settings-download svg { width: 16px; height: 16px; }
.settings-sheet-row input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.settings-switch { position: relative; width: 40px; height: 24px; border-radius: 14px; background: #dbe5ef; transition: .18s ease; cursor: pointer; }
.settings-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgb(15 23 42 / 18%); transition: .18s ease; }
.settings-sheet-row input:checked + .settings-switch { background: var(--brand); }
.settings-sheet-row input:checked + .settings-switch::after { translate: 16px 0; }
.settings-sheet-row input:focus-visible + .settings-switch { outline: 2px solid #93c5fd; outline-offset: 2px; }
.caption-size-setting { padding-top: 11px; }
.caption-size-setting > strong { display: block; margin-bottom: 13px; color: #64748b; }
.caption-size-setting > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.caption-size-setting button { height: 44px; border: 1px solid #e2e8f0; border-radius: 11px; background: white; color: #475569; font-size: 15px; font-weight: 700; }
.caption-size-setting button.selected,
.caption-size-setting button[aria-pressed="true"] { border-color: var(--brand) !important; background: var(--brand) !important; color: white !important; box-shadow: 0 6px 14px rgb(37 99 235 / 23%); }
.live-position-setting { padding: 11px 0 4px; }
.live-position-setting[hidden] { display: none; }
.live-position-setting > strong { display: block; margin-bottom: 11px; color: #64748b; font-size: 13px; font-weight: 700; }
.live-position-setting > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.live-position-setting button { min-width: 0; height: 36px; padding: 0 4px; border: 1px solid #e2e8f0; border-radius: 9px; background: white; color: #64748b; font-size: 12px; font-weight: 700; }
.live-position-setting button.selected,
.live-position-setting button[aria-pressed="true"] { border-color: var(--brand) !important; background: var(--brand) !important; color: white !important; box-shadow: 0 5px 12px rgb(37 99 235 / 20%); }
@media (min-width: 1024px) {
  .player-settings-sheet {
    inset: 64px 16px auto auto;
    width: 286px;
    max-height: calc(100vh - 80px);
    margin: 0;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    box-shadow: 0 16px 38px rgb(15 23 42 / 18%);
  }
  .player-settings-sheet::backdrop { background: transparent; backdrop-filter: none; }
  .player-settings-sheet > header { height: 54px; padding: 0 16px; border-bottom: 1px solid #f1f5f9; }
  .player-settings-sheet > header > button { width: 30px; height: 30px; background: transparent; }
  .settings-sheet-body { padding: 4px 16px 16px; }
  .settings-sheet-row { min-height: 40px; }
  .settings-sheet-row strong, .caption-size-setting > strong { font-size: 14px; }
  .caption-size-setting { padding-top: 8px; }
  .caption-size-setting > strong { margin-bottom: 8px; font-size: 12px; }
  .caption-size-setting > div { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .caption-size-setting button { height: 31px; border-radius: 7px; font-size: 12px; }
  .live-position-setting > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.transcript-phonetic { display: none; margin: 6px 28px 0 0; color: #94a3b8; font-family: "Gentium Plus", Georgia, serif; font-size: 14px; font-style: italic; font-weight: 400; line-height: 20px; }
.player-page.setting-phonetics .transcript-phonetic:not(:empty) { display: block; }
.player-page[data-caption-size="standard"] .transcript-list p,
.player-page[data-caption-size="standard"] .screen-caption b { font-size: 14px; line-height: 23px; }
.player-page[data-caption-size="standard"] .transcript-list article > span,
.player-page[data-caption-size="standard"] .screen-caption span { font-size: 13px; line-height: 20px; }
.player-page[data-caption-size="medium"] .transcript-list p,
.player-page[data-caption-size="medium"] .screen-caption b { font-size: 16px; line-height: 26px; }
.player-page[data-caption-size="medium"] .transcript-list article > span,
.player-page[data-caption-size="medium"] .screen-caption span { font-size: 15px; line-height: 23px; }
.player-page[data-caption-size="large"] .transcript-list p,
.player-page[data-caption-size="large"] .screen-caption b { font-size: 18px; line-height: 29px; }
.player-page[data-caption-size="large"] .transcript-list article > span,
.player-page[data-caption-size="large"] .screen-caption span { font-size: 17px; line-height: 25px; }
.player-page[data-caption-size="xlarge"] .transcript-list p,
.player-page[data-caption-size="xlarge"] .screen-caption b { font-size: 21px; line-height: 33px; }
.player-page[data-caption-size="xlarge"] .transcript-list article > span,
.player-page[data-caption-size="xlarge"] .screen-caption span { font-size: 19px; line-height: 28px; }
.video-live-caption {
  position: absolute;
  z-index: 4;
  right: 7%;
  bottom: 12%;
  left: 7%;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: white;
  text-align: center;
  text-shadow: 0 2px 4px rgb(0 0 0 / 96%), 0 0 10px rgb(0 0 0 / 76%);
  pointer-events: none;
}
.player-page.setting-liveCaption .video-live-caption { display: flex; }
.video-live-caption p { max-width: 100%; margin: 0; font-weight: 700; line-height: 1.35; }
.video-live-caption .live-caption-english { font-size: 18px; }
.video-live-caption .live-caption-chinese { font-size: 16px; font-weight: 600; }
.video-live-caption .caption-word,
.screen-caption .caption-word { color: inherit; text-shadow: inherit; }
.video-live-caption mark,
.screen-caption mark { background: transparent; text-shadow: inherit; }
.video-live-caption mark.learning-pair-0,
.screen-caption mark.learning-pair-0 { color: #d8b4fe; }
.video-live-caption mark.learning-pair-1,
.screen-caption mark.learning-pair-1 { color: #fbbf24; }
.video-live-caption mark.learning-pair-2,
.screen-caption mark.learning-pair-2 { color: #f9a8d4; }
.video-live-caption mark.learning-pair-3,
.screen-caption mark.learning-pair-3 { color: #fdba74; }
.video-live-caption mark.learning-pair-4,
.screen-caption mark.learning-pair-4 { color: #93c5fd; }
.video-live-caption mark.learning-pair-5,
.screen-caption mark.learning-pair-5 { color: #6ee7b7; }
.screen-caption mark.learning-pair-0 { color: #a855f7; }
.screen-caption mark.learning-pair-1 { color: #f59e0b; }
.screen-caption mark.learning-pair-2 { color: #ec4899; }
.screen-caption mark.learning-pair-3 { color: #f97316; }
.screen-caption mark.learning-pair-4 { color: #3b82f6; }
.screen-caption mark.learning-pair-5 { color: #10b981; }
.player-page[data-caption-size="standard"] .video-live-caption .live-caption-english { font-size: 15px; }
.player-page[data-caption-size="standard"] .video-live-caption .live-caption-chinese { font-size: 13px; }
.player-page[data-caption-size="large"] .video-live-caption .live-caption-english { font-size: 21px; }
.player-page[data-caption-size="large"] .video-live-caption .live-caption-chinese { font-size: 18px; }
.player-page[data-caption-size="xlarge"] .video-live-caption .live-caption-english { font-size: 24px; }
.player-page[data-caption-size="xlarge"] .video-live-caption .live-caption-chinese { font-size: 21px; }
.player-page[data-live-position="bothTop"] .video-live-caption { top: 9%; bottom: auto; }
.player-page[data-live-position="zhTopEnBottom"] .video-live-caption,
.player-page[data-live-position="zhBottomEnTop"] .video-live-caption { inset: 0 7%; display: none; }
.player-page.setting-liveCaption[data-live-position="zhTopEnBottom"] .video-live-caption,
.player-page.setting-liveCaption[data-live-position="zhBottomEnTop"] .video-live-caption { display: block; }
.player-page[data-live-position="zhTopEnBottom"] .video-live-caption p,
.player-page[data-live-position="zhBottomEnTop"] .video-live-caption p { position: absolute; right: 0; left: 0; }
.player-page[data-live-position="zhTopEnBottom"] .live-caption-chinese,
.player-page[data-live-position="zhBottomEnTop"] .live-caption-english { top: 9%; }
.player-page[data-live-position="zhTopEnBottom"] .live-caption-english,
.player-page[data-live-position="zhBottomEnTop"] .live-caption-chinese { bottom: 12%; }
.video-vocabulary-overlay {
  position: absolute;
  z-index: 5;
  top: 50%;
  right: 5%;
  display: none;
  max-width: 42%;
  translate: 0 -50%;
  color: white;
  text-align: right;
  text-shadow: 0 2px 5px rgb(0 0 0 / 98%), 0 0 12px rgb(0 0 0 / 82%);
  pointer-events: none;
}
.video-vocabulary-overlay[hidden] { display: none !important; }
.player-page.setting-autoVocabulary .video-vocabulary-overlay { display: grid; gap: 8px; }
.video-vocabulary-overlay span { display: block; background: transparent; }
.video-vocabulary-overlay b { display: block; font-size: 18px; line-height: 23px; }
.video-vocabulary-overlay small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; line-height: 17px; opacity: .92; }
.screen-caption { display: none; flex-direction: column; align-items: stretch; gap: 7px; min-height: 72px; padding: 13px 12px 15px; border: 1px solid rgb(147 197 253 / 72%); border-radius: 7px; background: transparent; text-align: left; }
.screen-caption > header { display: flex; align-items: center; justify-content: space-between; min-height: 22px; }
.screen-caption time { color: #2563eb; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; font-weight: 700; }
.screen-caption > header button { display: grid; width: 30px; height: 30px; padding: 0; place-items: center; border: 0; background: transparent; color: #60a5fa; }
.screen-caption > header button.active { color: #f59e0b; }
.screen-caption > header svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.screen-caption > header button.active svg { fill: currentColor; }
.screen-caption > b { color: #0f172a; font-weight: 800; }
.screen-caption > span { color: #94a3b8; }
.player-page.setting-bottomCaption .screen-caption > span mark { font-weight: 700; }
.player-page.setting-bottomCaption .screen-caption { display: flex; }
.player-page.setting-bottomCaption { grid-template-columns: minmax(0, 1fr); }
.player-page.setting-bottomCaption .transcript-panel { display: none; }
.player-page.setting-bottomCaption .current-caption { display: none; }
.player-page.english-mode .screen-caption span,
.player-page.english-only .screen-caption span,
.player-page.english-mode .live-caption-chinese,
.player-page.english-only .live-caption-chinese { display: none; }
.player-page.chinese-mode .screen-caption b,
.player-page.chinese-mode .live-caption-english { display: none; }
.player-page.blind-mode .video-live-caption,
.player-page.blind-mode .screen-caption { display: none; }

.subtitle-preview-dialog {
  width: min(896px, calc(100vw - 32px));
  height: min(90vh, 820px);
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: white;
  color: #0f172a;
  box-shadow: 0 24px 80px rgb(15 23 42 / 30%);
}
.subtitle-preview-dialog[open] { display: flex; flex-direction: column; }
.subtitle-preview-dialog::backdrop { background: rgb(15 23 42 / 62%); backdrop-filter: blur(4px); }
.subtitle-preview-dialog > header { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px 17px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.subtitle-preview-heading { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 22px; }
.subtitle-preview-heading h3 { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; margin: 0; font-size: 20px; }
.subtitle-preview-heading h3 svg { width: 24px; height: 24px; color: var(--brand); }
.subtitle-preview-dialog svg { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.subtitle-preview-dialog > header > button { display: grid; flex: 0 0 auto; width: 36px; height: 36px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #64748b; }
.subtitle-preview-dialog > header > button:hover { background: #e2e8f0; }
.subtitle-preview-dialog > header > button svg { width: 20px; height: 20px; }
.subtitle-preview-tabs { display: flex; flex: 0 0 auto; gap: 10px; }
.subtitle-preview-tabs button { padding: 6px 13px; border: 1px solid #e2e8f0; border-radius: 8px; background: white; color: #475569; font-size: 14px; font-weight: 700; }
.subtitle-preview-tabs button.selected { border-color: var(--brand); background: var(--brand); color: white; box-shadow: 0 4px 9px rgb(37 99 235 / 20%); }
.subtitle-preview-options { display: grid; min-width: 0; gap: 7px; }
.subtitle-preview-options > div { display: flex; flex-wrap: wrap; gap: 7px 15px; }
.subtitle-preview-options label { display: flex; align-items: center; gap: 6px; color: #475569; font-size: 14px; font-weight: 500; white-space: nowrap; }
.subtitle-preview-options input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.subtitle-preview-scroll { min-height: 0; flex: 1 1 auto; overflow-y: auto; background: white; }
.subtitle-document, .intensive-document { padding: 18px 24px 28px; }
.subtitle-preview-row { padding: 14px 0 16px; border-bottom: 1px solid #f1f5f9; }
.subtitle-preview-row p, .intensive-caption-row p { margin: 0; }
.preview-phonetic { color: #8b919d; font-family: "Gentium Plus", Georgia, serif; font-size: 14px; font-style: italic; line-height: 20px; }
.preview-phonetic:empty { display: none; }
.preview-english { margin-top: 2px !important; color: #1e293b; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 15px; font-weight: 800; line-height: 22px; }
.preview-chinese { margin-top: 2px !important; color: #64748b; font-size: 14px; line-height: 21px; }
.subtitle-preview-dialog [hidden] { display: none !important; }
.subtitle-preview-dialog > footer { flex: 0 0 auto; padding: 18px 24px 24px; border-top: 1px solid #f1f5f9; background: #f8fafc; }
.subtitle-preview-dialog > footer button { display: flex; width: 100%; height: 48px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; background: #334155; color: white; font-size: 16px; font-weight: 800; }
.subtitle-preview-dialog > footer button svg { width: 18px; height: 18px; }
.intensive-document { padding: 24px; }
.intensive-cover { position: relative; display: flex; gap: 24px; margin-bottom: 22px; padding: 24px; overflow: hidden; border-radius: 16px; background: #f4f9f6; }
.intensive-cover > div { min-width: 0; flex: 1 1 auto; padding: 22px; border-radius: 12px; background: white; box-shadow: 0 4px 12px rgb(15 23 42 / 5%); }
.intensive-cover small { display: inline-block; padding-bottom: 7px; border-bottom: 2px solid #059669; color: #059669; font-size: 11px; font-weight: 800; }
.intensive-cover h2 { margin: 19px 0; color: #1e293b; font-size: 30px; line-height: 1.25; }
.intensive-cover p { display: flex; gap: 8px; margin: 0; }
.intensive-cover p span { padding: 5px 8px; border: 1px solid #dce7e1; border-radius: 6px; color: #059669; font-size: 12px; font-weight: 700; }
.intensive-cover p span:first-child { border-color: #059669; background: #059669; color: white; }
.intensive-cover img { align-self: center; width: 190px; aspect-ratio: 1; border: 12px solid white; border-radius: 9px; object-fit: cover; rotate: 4deg; box-shadow: 0 12px 22px rgb(15 23 42 / 18%); }
.intensive-document h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: #1e293b; font-size: 15px; }
.intensive-document h4::before { content: ""; width: 5px; height: 17px; border-radius: 3px; background: var(--brand); }
.intensive-summary, .intensive-vocabulary { margin-bottom: 18px; padding: 17px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.intensive-summary > p { margin: 0; color: #475569; font-size: 14px; line-height: 1.8; }
.intensive-vocabulary { background: white; }
.intensive-vocabulary > div { display: flex; flex-wrap: wrap; gap: 8px; }
.intensive-vocabulary span { padding: 7px 9px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; color: #64748b; font-size: 12px; }
.intensive-vocabulary b { margin-right: 5px; color: #2563eb; }
.intensive-shadow > h4 { margin-top: 26px; }
.intensive-caption-row { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid #f1f5f9; }
.intensive-caption-row time { color: #94a3b8; font-family: monospace; font-size: 11px; line-height: 21px; }
.print-extra-page { display: none; }
.video-stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 4px; background: #0f172a; }
.video-stage img, .video-stage video { width: 100%; height: 100%; object-fit: cover; }
.video-stage video { display: block; background: #0f172a; }
.stage-play { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; width: 58px; height: 58px; border: 0; border-radius: 50%; background: rgb(37 99 235 / 90%); color: white; font-size: 22px; opacity: 0; transition: opacity .2s; }
.video-stage:hover .stage-play { opacity: 1; }
.desktop-transport { position: absolute; inset: auto 0 0; padding: 28px 13px 10px; background: linear-gradient(transparent, rgb(2 6 23 / 78%)); color: white; opacity: 0; transition: opacity .18s; }
.video-stage:hover .desktop-transport { opacity: 1; }
.desktop-transport > input { width: 100%; height: 4px; accent-color: #3b82f6; cursor: pointer; }
.desktop-transport > div { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.desktop-transport button { min-width: 28px; padding: 3px; border: 0; background: transparent; color: white; font-size: 13px; }
.desktop-transport button:disabled { color: rgb(255 255 255 / 80%); opacity: .4; cursor: not-allowed; }
.desktop-transport [data-transport-play] svg { width: 14px; height: 14px; margin: auto; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.transport-pause-icon { display: none !important; fill: currentColor !important; stroke: currentColor; stroke-width: 2 !important; }
[data-transport-play].is-playing .transport-play-icon,
[data-control="播放"].is-playing .transport-play-icon { display: none; }
[data-transport-play].is-playing .transport-pause-icon,
[data-control="播放"].is-playing .transport-pause-icon { display: block !important; }
.desktop-transport time { margin-right: auto; font-size: 11px; font-variant-numeric: tabular-nums; }
.player-controls { display: flex; width: max-content; align-items: center; gap: 8px; margin: 13px auto 21px; }
.player-controls > button,
.desktop-control-wrap > button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: #475569; font-size: 10px; font-weight: 500; line-height: 15px; }
.player-controls > button:disabled,
.desktop-control-wrap > button:disabled { cursor: not-allowed; }
.player-controls > button:disabled > b,
.desktop-control-wrap > button:disabled > b { opacity: .4; }
.player-controls > button > b,
.desktop-control-wrap > button > b { display: grid; width: 36px; height: 36px; box-sizing: border-box; place-items: center; border-radius: 50%; background: #e2e8f0; box-shadow: 0 1px 3px rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%); color: #334155; transition: background-color .15s, color .15s, transform .15s; }
.player-controls > button:hover:not(:disabled) > b,
.desktop-control-wrap > button:hover:not(:disabled) > b { background: #cbd5e1; }
.player-controls > button:active:not(:disabled) > b,
.desktop-control-wrap > button:active:not(:disabled) > b { transform: scale(.95); }
.player-controls > button > b svg,
.desktop-control-wrap > button > b svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.player-controls > button > b .desktop-phonetic-icon { width: 18px; height: 18px; stroke: none; }
.player-controls [data-control="播放"] > b svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; }
.player-controls [data-control="播放"] > b { background: #2563eb; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%); color: white; }
.player-controls [data-control="播放"]:hover > b { background: #1d4ed8; }
.player-controls > button.selected > b,
.desktop-control-wrap > button.selected > b { background: #2563eb; color: white; }
.desktop-control-wrap { position: relative; display: flex; min-width: 0; justify-content: center; }
.desktop-control-wrap > button.popover-open > b { background: #cbd5e1; }
.desktop-control-wrap > button > b strong { font-size: 12px; line-height: 1; }
.desktop-control-popover {
  position: absolute;
  z-index: 30;
  bottom: calc(100% + 16px);
  width: 280px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: white;
  color: #334155;
  box-shadow: 0 18px 42px rgb(15 23 42 / 18%);
}
.desktop-control-popover[hidden] { display: none; }
.desktop-speed-popover { right: 0; padding: 13px 12px 10px; }
.desktop-speed-popover > strong { display: block; margin-bottom: 9px; color: #475569; font-size: 12px; text-align: center; }
.desktop-speed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.desktop-speed-grid button {
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}
.desktop-speed-grid button.selected { background: var(--brand); color: white; box-shadow: 0 4px 8px rgb(37 99 235 / 25%); }
.desktop-popover-close { width: 100%; margin-top: 9px; padding: 9px 0 0; border: 0; border-top: 1px solid #f1f5f9; background: transparent; color: #94a3b8; font-size: 12px; }
.desktop-loop-popover { left: 50%; translate: -50% 0; padding: 14px 16px 16px; }
.desktop-loop-popover > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.desktop-loop-popover > header strong { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.desktop-loop-popover > header strong svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.desktop-loop-popover > header button { display: grid; width: 24px; height: 24px; padding: 0; place-items: center; border: 0; background: transparent; color: #94a3b8; }
.desktop-loop-popover > header button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.desktop-loop-toggle,
.desktop-loop-auto-pause { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.desktop-loop-toggle { padding: 11px 0; border-top: 1px solid #f1f5f9; }
.desktop-loop-toggle > span { display: grid; gap: 2px; text-align: left; }
.desktop-loop-toggle > span b { font-size: 13px; }
.desktop-loop-toggle > span small { color: #94a3b8; font-size: 10px; }
.desktop-loop-toggle input,
.desktop-loop-auto-pause input { position: absolute; opacity: 0; pointer-events: none; }
.desktop-loop-toggle > i,
.desktop-loop-auto-pause > i { position: relative; width: 38px; height: 22px; flex: 0 0 auto; border-radius: 999px; background: #dbe5f0; transition: .2s; }
.desktop-loop-toggle > i::after,
.desktop-loop-auto-pause > i::after { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgb(15 23 42 / 25%); content: ""; transition: .2s; }
.desktop-loop-toggle input:checked + i,
.desktop-loop-auto-pause input:checked + i { background: var(--brand); }
.desktop-loop-toggle input:checked + i::after,
.desktop-loop-auto-pause input:checked + i::after { translate: 16px 0; }
.desktop-sentence-loop-options { padding-top: 9px; border-top: 1px solid #f1f5f9; }
.desktop-sentence-loop-options[hidden] { display: none; }
.desktop-sentence-loop-options > strong { display: block; margin-bottom: 8px; color: #64748b; font-size: 11px; }
.desktop-loop-count-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.desktop-loop-count-grid button { height: 32px; padding: 0; border: 1px solid #e2e8f0; border-radius: 7px; background: white; color: #475569; font-size: 12px; font-weight: 700; }
.desktop-loop-count-grid button.selected { border-color: var(--brand); background: var(--brand); color: white; }
.desktop-loop-auto-pause { margin-top: 12px; }
.desktop-loop-auto-pause > span { font-size: 12px; font-weight: 700; }
.desktop-live-popover { left: 50%; width: 200px; translate: -50% 0; overflow: hidden; padding: 8px; }
.desktop-live-popover > strong { display: block; padding: 5px 10px 8px; color: #64748b; font-size: 12px; }
.desktop-live-popover > button { width: 100%; height: 35px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: #334155; font-size: 12px; text-align: left; }
.desktop-live-popover > button:hover { background: #f8fafc; }
.desktop-live-popover > button.selected { background: #eff6ff; color: var(--brand); font-weight: 700; }
.desktop-live-popover > .desktop-live-close { margin-top: 5px; border-top: 1px solid #f1f5f9; border-radius: 0; color: #94a3b8; }
.player-page.english-only .current-caption span,
.player-page.english-only .transcript-list article > span { display: none; }
.player-page.english-mode .current-caption span,
.player-page.english-mode .transcript-list article > span { display: none; }
.player-page.chinese-mode .current-caption b,
.player-page.chinese-mode .transcript-list article > p { display: none; }
.player-page.blind-mode .current-caption b,
.player-page.blind-mode .current-caption span { visibility: hidden; }
.player-page.blind-mode .transcript-list { display: none; }
.player-page.hide-vocabulary mark { color: inherit; }
.blind-listening-prompt {
  display: none;
  box-sizing: border-box;
  width: min(260px, calc(100% - 48px));
  min-height: 88px;
  margin: auto;
  padding: 24px;
  place-items: center;
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  background: #f8fafc;
  color: #3b82f6;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 10px 15px -3px rgb(15 23 42 / 10%), 0 4px 6px -4px rgb(15 23 42 / 10%);
}
@media (min-width: 1024px) {
  .player-page.blind-mode .blind-listening-prompt { display: grid; }
}
.current-caption { display: flex; min-height: 72px; margin-inline: 3px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); text-align: center; }
.current-caption b { font-size: 16px; line-height: 22px; }
.current-caption.is-ready b { color: #2563eb; }
.current-caption span { font-size: 14px; line-height: 20px; }
.current-caption span { color: var(--muted); }
.video-intro { margin: 40px 3px 24px; padding: 16px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 5%); }
.video-intro h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: #1e293b; font-size: 14px; font-weight: 700; line-height: 20px; }
.video-intro h3 svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: #a855f7; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.video-intro p { margin: 0; color: #475569; font-size: 14px; line-height: 1.625; white-space: pre-line; }
.page-loading { display: grid; min-height: 60vh; place-items: center; color: var(--muted); font-size: 15px; }

.transcript-panel { display: flex; flex-direction: column; }
.transcript-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; padding: 8px 12px 8px 20px; border-bottom: 1px solid var(--line); }
.transcript-panel h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 16px; white-space: nowrap; }
.transcript-panel h2 i { width: 5px; height: 22px; border-radius: 3px; background: var(--brand); }
.transcript-panel header > div { display: flex; gap: 7px; }
.transcript-panel header button { display: flex; height: 36px; align-items: center; gap: 7px; padding: 0 13px; border: 0; border-radius: 8px; background: #f1f5f9; color: #475569; font-size: 14px; font-weight: 500; white-space: nowrap; }
.transcript-panel header button svg { display: block; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.transcript-panel header button small { margin-left: -2px; font-size: 12px; }
.transcript-panel header button.selected { background: #e8f1ff; color: var(--brand); }
.desktop-practice-wrap { position: relative; display: inline-flex; }
.desktop-practice-chevron { width: 14px !important; height: 14px !important; transition: transform .18s ease; }
[data-practice][aria-expanded="true"] .desktop-practice-chevron { transform: rotate(180deg); }
.desktop-practice-menu {
  position: absolute;
  z-index: 12;
  top: calc(100% + 5px);
  right: 0;
  display: grid;
  width: 144px;
  overflow: hidden;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 0 0 10px 10px;
  background: white;
  box-shadow: 0 12px 26px rgb(15 23 42 / 16%);
}
.desktop-practice-menu[hidden] { display: none; }
.transcript-panel header .desktop-practice-menu button {
  width: 100%;
  height: 44px;
  justify-content: flex-start;
  padding: 0 16px;
  border-radius: 0;
  background: white;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
}
.transcript-panel header .desktop-practice-menu button:hover { background: #eff6ff; color: var(--brand); }
.transcript-panel header .desktop-practice-menu button svg { width: 17px; height: 17px; }
.transcript-panel header .desktop-practice-menu .practice-menu-exit { border-top: 1px solid #f1f5f9; color: #64748b; }
.transcript-list { display: grid; min-height: 0; flex: 1 1 auto; align-content: start; grid-auto-rows: max-content; gap: 7px; padding: 0 12px 16px; overflow-y: auto; }
.transcript-list article { position: relative; align-self: start; width: 100%; min-width: 0; height: auto; box-sizing: border-box; padding: 7px 16px 8px; border: 1px solid var(--line); border-radius: 16px; }
.transcript-list article.active { border-color: #bfdbfe; background: #eff6ff; }
.transcript-list time { color: #94a3b8; font-family: monospace; font-size: 11px; }
.sentence-loop-progress { display: inline-flex; margin-left: 6px; padding: 2px 5px; border-radius: 4px; background: #dbeafe; color: #2563eb; font-size: 11px; font-weight: 700; line-height: 16px; vertical-align: middle; }
.sentence-loop-progress[hidden] { display: none; }
.transcript-list article > button { position: absolute; top: 10px; right: 14px; visibility: hidden; opacity: 0; pointer-events: none; border: 0; background: none; color: #60a5fa; font-size: 20px; transition: opacity .15s ease; }
.transcript-list article.active > button { visibility: visible; opacity: 1; pointer-events: auto; }
.transcript-list article > button.active { color: #f59e0b; }
.transcript-list article > button svg { width: 18px; height: 18px; }
.transcript-list article > button.active svg { fill: currentColor; }
.transcript-list p { margin: 6px 28px 0 0; overflow-wrap: anywhere; white-space: normal; font-size: 16px; font-weight: 700; line-height: 26px; }
.transcript-list article > span { display: block; margin-top: 4px; overflow-wrap: anywhere; white-space: normal; color: #94a3b8; font-size: 16px; font-weight: 400; line-height: 24px; }
.caption-text-hitbox { display: inline; }
.caption-word { display: inline; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; }
.learning-highlight { border-radius: 3px; cursor: pointer; }
.caption-word:focus-visible, .learning-highlight:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.caption-lookup-tooltip { position: fixed; z-index: 240; padding: 6px 12px; border: 2px solid #fff; border-radius: 999px; background: #2563eb; box-shadow: 0 8px 20px rgb(37 99 235 / 28%); color: #fff; font-size: 14px; font-weight: 700; line-height: 20px; white-space: nowrap; }
.caption-lookup-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; width: 8px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; background: #2563eb; transform: translate(-50%, -5px) rotate(45deg); }
.caption-lookup-tooltip span { opacity: .86; }
.caption-detail-backdrop { display: none; }
.caption-detail-backdrop[hidden] { display: none !important; }
.caption-word-detail { position: fixed; z-index: 245; width: min(320px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 24px)); overflow: auto; border: 1px solid #dbe3ef; border-radius: 14px; background: #fff; box-shadow: 0 18px 44px rgb(15 23 42 / 22%); color: #0f172a; }
.caption-word-detail > header { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 12px 14px 8px 18px; border: 0; }
.caption-word-detail > header h4 { margin: 0; overflow-wrap: anywhere; font-size: 22px; line-height: 30px; }
.caption-word-detail > header button { display: grid; width: 32px; height: 32px; padding: 6px; border: 0; border-radius: 8px; background: transparent; color: #64748b; place-items: center; }
.caption-word-detail > header button:hover { background: #f1f5f9; }
.caption-word-detail > header svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }
.caption-detail-body { padding: 0 18px 14px; }
.caption-detail-phonetics { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 10px; }
.caption-detail-phonetics button { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: #64748b; font-size: 13px; }
.caption-detail-phonetics svg { width: 15px; height: 15px; fill: none; stroke: #2563eb; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.caption-detail-phonetics i { color: #2563eb; font-size: 12px; font-style: normal; font-weight: 700; }
.caption-detail-definition { margin: 8px 0 14px; color: #1e293b; font-size: 14px; font-weight: 650; line-height: 22px; }
.caption-detail-definition b { margin-right: 6px; color: #64748b; font-size: 12px; }
.caption-detail-body section { margin-top: 13px; padding-top: 12px; border-top: 1px solid #eef2f7; }
.caption-detail-body h5 { display: flex; align-items: center; gap: 7px; margin: 0 0 7px; color: #475569; font-size: 13px; }
.caption-detail-body h5 span { display: grid; width: 20px; height: 20px; border-radius: 6px; background: #eff6ff; color: #2563eb; font-size: 12px; place-items: center; }
.caption-detail-body section > p { margin: 0; color: #64748b; font-size: 13px; font-weight: 500; line-height: 20px; }
.caption-detail-body blockquote { margin: 0; padding: 10px 11px; border-radius: 9px; background: #f8fafc; }
.caption-detail-body blockquote p { margin: 0; color: #334155; font-size: 13px; font-weight: 600; line-height: 20px; }
.caption-detail-body blockquote p + p { margin-top: 3px; color: #94a3b8; font-weight: 400; }
.caption-word-detail > footer { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 11px 14px 14px; border-top: 1px solid #eef2f7; }
.caption-word-detail > footer button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; border: 0; border-radius: 9px; background: #eff6ff; color: #2563eb; font-weight: 700; }
.caption-word-detail > footer button:first-child { background: #fff7ed; color: #f59e0b; }
.caption-word-detail > footer button:first-child.active { background: #fef3c7; }
.caption-word-detail > footer button:disabled { cursor: not-allowed; opacity: .48; }
.caption-word-detail > footer svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linejoin: round; stroke-width: 1.8; }
.caption-word-detail > footer button.active svg { fill: currentColor; }
.caption-detail-loading { display: flex; align-items: center; gap: 9px; min-height: 92px; padding: 10px 18px 22px; color: #64748b; font-size: 13px; }
.caption-detail-loading i { width: 16px; height: 16px; border: 2px solid #bfdbfe; border-top-color: #2563eb; border-radius: 50%; animation: caption-detail-spin .8s linear infinite; }
@keyframes caption-detail-spin { to { transform: rotate(360deg); } }
@keyframes caption-sheet-up {
  from { opacity: .55; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
.mobile-study-toolbar { display: none; }

.bottom-nav, .mobile-drawer-head, .drawer-backdrop { display: none; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 300;
  translate: -50% 20px;
  padding: 10px 16px;
  border-radius: 20px;
  background: #0f172a;
  color: white;
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
}

.toast.show { translate: -50% 0; opacity: 1; }

body.dark {
  color-scheme: dark;
  --bg: #020617;
  --surface: #0f172a;
  --surface-soft: #111c31;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --line: #243146;
  --brand-soft: #172554;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%);
}

body.dark .card-body h2 { color: #f1f5f9; }
body.dark .info-callout, body.dark .transcript-list article.active { background: #10213d; color: #cbd5e1; }
body.dark .method-card > p, body.dark .method-card li, body.dark .method-card .method-level,
body.dark .video-intro p { color: #cbd5e1; }
body.dark .player-controls > button > b,
body.dark .desktop-control-wrap > button > b,
body.dark .transcript-panel header button { background: #1e293b; color: #cbd5e1; }
body.dark .logout-demo { background: #32131b; }
body.dark .collection-head .collection-manage-trigger,
body.dark .collection-manager-row > button:hover { background: #1e293b; color: #cbd5e1; }
body.dark .collection-quick-card { border-color: #334155; background: #172033; }
body.dark .collection-one-click { border-bottom-color: #334155; }
body.dark .collection-one-click strong { color: #e2e8f0; }
body.dark .collection-bolt,
body.dark .collection-manager-row > span,
body.dark .favorite-picker-list > button > span { background: #172554; color: #60a5fa; }
body.dark .collection-manager-row.editing input { background: #0f172a; }
body.dark .favorite-picker-list > button:hover,
body.dark .favorite-picker-list > button:focus-visible { border-color: #3b82f6; background: #10213d; }
body.dark .collection-tabs button { color: #94a3b8; }
body.dark .collection-tabs button:hover { color: #e2e8f0; }
body.dark .collection-tabs button.active { color: #60a5fa; }
body.dark .collection-tabs b { background: #1e293b; color: #94a3b8; }
body.dark .collection-tabs button.active b { background: rgb(30 58 138 / 30%); color: #60a5fa; }

@media (max-width: 1535px) {
  .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1199px) {
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desktop-nav { gap: 0; }
  .nav-link { padding-inline: 9px; }
  .player-left > header div button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; font-size: 18px; }
  .player-left > header div button span { display: none; }
}

@media (max-width: 1279px) and (min-width: 1024px) {
  .transcript-panel > header { gap: 8px; padding-inline: 20px; }
  .transcript-panel h2 { transform: scale(.9); transform-origin: left center; }
  .transcript-panel header > div { gap: 6px; flex-wrap: nowrap; }
  .transcript-panel header button {
    height: 32px;
    gap: 4px;
    padding-inline: 12px;
    font-size: 12px;
  }
  .transcript-panel header button svg { width: 14px; height: 14px; }
  .desktop-practice-chevron { width: 14px !important; height: 14px !important; }
  .transcript-panel header .desktop-practice-menu button {
    height: 42px;
    padding-inline: 14px;
    font-size: 13px;
  }
}

@media (max-width: 1023px) {
  body { padding-bottom: 64px; }
  .site-footer { padding-bottom: 40px; }

  .collection-desktop-layout { display: block; }
  .collection-desktop-manager { display: none; }
  .collection-head .collection-manage-trigger { display: grid; }

  .caption-detail-backdrop:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 242;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgb(15 23 42 / 42%);
    backdrop-filter: blur(1px);
  }

  .caption-word-detail {
    inset: auto 0 0 !important;
    display: flex;
    width: 100%;
    max-width: none;
    max-height: min(76dvh, 620px);
    overflow: hidden;
    flex-direction: column;
    border: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -14px 38px rgb(15 23 42 / 20%);
    animation: caption-sheet-up .2s ease-out;
  }

  .caption-word-detail[hidden] { display: none !important; }
  .caption-word-detail::before { content: ""; flex: 0 0 auto; align-self: center; width: 38px; height: 4px; margin-top: 8px; border-radius: 999px; background: #d5dbe5; }
  .caption-word-detail > header { min-height: 50px; padding: 6px 16px 4px 20px; }
  .caption-word-detail > header h4 { font-size: 21px; line-height: 29px; }
  .caption-detail-body { min-height: 0; padding: 0 20px 16px; overflow-y: auto; overscroll-behavior: contain; }
  .caption-detail-definition { margin-top: 7px; font-size: 14px; line-height: 21px; }
  .caption-detail-body section { margin-top: 12px; padding-top: 11px; }
  .caption-word-detail > footer { flex: 0 0 auto; gap: 10px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; }
  .caption-word-detail > footer button { min-height: 42px; border-radius: 10px; }
  .caption-detail-loading { min-height: 120px; padding: 12px 20px 28px; }

  .topbar {
    justify-content: center;
    padding: 0 17px;
  }

  .desktop-nav { display: none; }
  .mobile-filter, .mobile-method, .theme-toggle { position: absolute; display: inline-flex; align-items: center; gap: 5px; }
  .mobile-filter { left: 8px; width: 40px; height: 40px; justify-content: center; padding: 10px; }
  .mobile-filter .icon, .mobile-method span { display: grid; width: 21px; height: 21px; place-items: center; }
  .mobile-filter svg, .mobile-method svg, .theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
  .mobile-method { right: 16px; padding: 8px 0; border-radius: 0; background: none; font-size: 14px; }
  .theme-toggle { left: 56px; padding: 8px; color: var(--muted); }

  .app-shell { display: block; padding-top: 64px; }
  .content { padding: 0 9px 18px; }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 220;
    width: min(350px, 90vw);
    height: 100vh;
    padding: 0 10px 18px;
    border-right: 1px solid var(--line);
    background: var(--bg);
    transform: translateX(-103%);
    transition: transform .25s ease;
  }

  .sidebar.open { transform: translateX(0); }
  .mobile-drawer-head { display: flex; align-items: center; justify-content: flex-end; padding: 18px 8px 10px; }
  .mobile-drawer-head button { border: 0; background: none; font-size: 30px; }

  .drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 210;
    background: rgb(15 23 42 / 45%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }

  .drawer-backdrop.show { display: block; opacity: 1; pointer-events: auto; }

  .category-tabs {
    top: 64px;
    height: 48px;
    gap: 0;
    overflow-x: auto;
    background: var(--surface);
  }

  .category-tabs button { min-width: 66px; height: 44px; padding-inline: 15px; font-size: 13px; }
  .search-panel { top: 112px; }
  .video-grid { gap: 24px; padding-top: 9px; }

  .bottom-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 90;
    height: 64px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--line);
    background: var(--surface);
  }
  body.restricted-guest .bottom-nav { grid-template-columns: repeat(3, 1fr); }

  .bottom-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    background: transparent;
    color: #475569;
    font-size: 11px;
  }

  .bottom-nav button span { display: grid; width: 24px; height: 24px; place-items: center; line-height: 1; }
  .bottom-nav button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
  .bottom-nav button.active .nav-icon-home,
  .bottom-nav button.active .nav-icon-favorite { fill: currentColor; }
  .bottom-nav button.active { color: var(--brand); }
  .toast { bottom: 78px; }

  .section-view { padding-bottom: 64px; }
  .section-view .topbar { display: none; }
  .section-view .app-shell { padding-top: 0; }
  .section-view .content { padding: 0 16px 20px; }
  .section-view .page-view { min-height: calc(100vh - 64px); }
  .inner-page { padding-top: 16px; }
  .inner-heading { margin-bottom: 24px; }
  .favorite-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-page { padding-top: 32px; }

  .play-view { height: 100vh; padding-bottom: 0; overflow: hidden; background: #f8fafc; }
  .play-view .content { padding: 0; }
  .player-page { display: block; height: auto; min-height: 100vh; padding: 50px 0 150px; background: #f8fafc; }
  .player-left, .transcript-panel { border-radius: 0; }
  .player-left { width: auto; height: 0; margin-left: 0; padding: 0 10px; overflow: visible; background: #f8fafc; }
  .player-left > header { position: fixed; inset: 0 0 auto; z-index: 120; height: 50px; margin: 0; padding: 0 10px; border-bottom: 1px solid #edf1f6; background: rgb(255 255 255 / 96%); }
  .player-left > header > button { display: grid; width: 30px; height: 30px; padding: 0; place-items: center; }
  .player-left > header > button svg { width: 22px; height: 22px; }
  .player-left > header h1 { overflow: hidden; flex: 1; min-width: 0; font-size: 16px; font-weight: 700; line-height: 24px; text-overflow: ellipsis; white-space: nowrap; }
  .player-left > header div { flex: 0 0 auto; gap: 5px; }
  .player-left > header div button { display: grid; width: 30px; height: 30px; padding: 0; place-items: center; overflow: visible; border: 0; background: transparent; box-shadow: none; color: #64748b; font-size: 0; }
  .player-left > header div button span { display: none; }
  .player-left > header div button svg { width: 22px; height: 22px; }
  .player-left > header .player-like { background: transparent; color: #ef476f; }
  .player-left > header .player-like:not(.active) { color: #64748b; }
  .player-left > header .player-settings { font-size: 0; }
  .video-stage { position: fixed; inset: 50px 10px auto; z-index: 110; border-radius: 12px; }
  .player-page.setting-bottomCaption .video-stage {
    top: calc(clamp(180px, 27.4dvh, 322px) - 54px);
    right: 16px;
    left: 16px;
    border-radius: 14px;
    box-shadow: 0 12px 22px rgb(15 23 42 / 10%);
  }
  .player-page.setting-bottomCaption .screen-caption {
    position: fixed;
    z-index: 108;
    top: calc(clamp(180px, 27.4dvh, 322px) - 54px + (100vw - 32px) * .5625 + 22px);
    right: 16px;
    left: 16px;
    max-height: none;
    padding: 0 12px;
    overflow: visible;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
  }
  .player-page.setting-bottomCaption .screen-caption > header { display: none; }
  .player-page.setting-bottomCaption .screen-caption > b {
    max-width: 100%;
    color: #0f172a;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
  }
  .player-page.setting-bottomCaption .screen-caption > span {
    max-width: 100%;
    color: #64748b;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
  }
  .player-page.setting-bottomCaption[data-caption-size="standard"] .screen-caption > b { font-size: 16px; }
  .player-page.setting-bottomCaption[data-caption-size="standard"] .screen-caption > span { font-size: 14px; }
  .player-page.setting-bottomCaption[data-caption-size="large"] .screen-caption > b { font-size: 23px; }
  .player-page.setting-bottomCaption[data-caption-size="large"] .screen-caption > span { font-size: 18px; }
  .player-page.setting-bottomCaption[data-caption-size="xlarge"] .screen-caption > b { font-size: 26px; }
  .player-page.setting-bottomCaption[data-caption-size="xlarge"] .screen-caption > span { font-size: 20px; }
  .player-page.setting-bottomCaption .transcript-panel { display: none; }
  .video-live-caption { right: 5%; left: 5%; }
  .video-live-caption .live-caption-english { font-size: 16px; }
  .video-live-caption .live-caption-chinese { font-size: 14px; }
  .video-vocabulary-overlay { right: 4%; max-width: 48%; }
  .video-vocabulary-overlay b { font-size: 15px; line-height: 20px; }
  .video-vocabulary-overlay small { font-size: 10px; line-height: 14px; }
  .stage-play { opacity: 0; width: 48px; height: 48px; }
  .video-stage:hover .stage-play { opacity: 1; }
  .desktop-transport, .player-controls, .current-caption, .video-intro { display: none; }
  .transcript-panel { position: fixed; inset: 79px 0 0; z-index: 100; overflow: hidden; background: #f8fafc; }
  .transcript-panel > header { display: none; }
  .transcript-list {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    max-height: none;
    gap: 4px;
    padding: calc((100vw - 20px) * .5625 - 25px) 12px 160px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .transcript-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .transcript-list article { min-height: 0; padding: 6px 8px; border-color: #e5e7eb; border-radius: 6px; background: white; box-shadow: 0 1px 2px rgb(15 23 42 / 3%); }
  .transcript-list article.active { border-color: #bfdbfe; background: #eff6ff; }
  .transcript-list time { color: #94a3b8; font-size: 11px; line-height: 16.5px; }
  .transcript-list article.active time { color: var(--brand); font-weight: 700; }
  .transcript-list article > button { top: 11px; right: 12px; color: #60a5fa; font-size: 0; }
  .transcript-list article > button svg { width: 18px; height: 18px; }
  .transcript-list p { margin: 6px 32px 0 0; color: #000; font-size: 16px; font-weight: 700; line-height: 26px; }
  .transcript-list article > span { display: block; margin-top: 4px; color: #94a3b8; font-size: 16px; font-weight: 400; line-height: 24px; }
  .mobile-study-toolbar { position: fixed; inset: auto 0 0; z-index: 130; display: block; padding: 8px 14px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid #e5e7eb; background: rgb(255 255 255 / 97%); box-shadow: 0 -8px 24px rgb(15 23 42 / 8%); backdrop-filter: blur(12px); }
  .mobile-study-actions { display: flex; align-items: center; justify-content: space-around; }
  .mobile-study-actions button { display: flex; flex: 0 0 48px; width: 48px; height: 44px; flex-direction: column; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; color: #475569; font-size: 12px; font-weight: 500; line-height: 16px; }
  .mobile-study-actions b { display: grid; width: 20px; height: 20px; place-items: center; color: inherit; font-weight: 600; }
  .mobile-study-actions b svg { width: 16px; height: 16px; }
  .mobile-study-actions b strong { font-size: 16px; font-weight: 700; line-height: 20px; }
  .mobile-study-actions button.selected { color: var(--brand); }
  .speed-popover { position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 4; width: 280px; translate: -50% 0; padding: 14px 12px 10px; border: 1px solid #e2e8f0; border-radius: 12px; background: white; box-shadow: 0 18px 42px rgb(15 23 42 / 18%); }
  .speed-popover[hidden] { display: none; }
  .speed-popover > strong { display: block; margin-bottom: 8px; color: #475569; font-size: 12px; text-align: center; }
  .speed-popover > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .speed-popover > div button { height: 32px; border: 0; border-radius: 7px; background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 700; }
  .speed-popover > div button.selected { background: var(--brand); color: white; box-shadow: 0 4px 8px rgb(37 99 235 / 25%); }
  .speed-popover > button { width: 100%; margin-top: 9px; padding-top: 9px; border: 0; border-top: 1px solid #f1f5f9; background: transparent; color: #94a3b8; font-size: 12px; }
  .mobile-study-toolbar > .player-progress {
    width: calc(100% - 12px);
    height: 6px;
    margin: 16px 6px;
    appearance: none;
    border: 0;
    border-radius: 9999px;
    background: linear-gradient(to right, #2563eb 0 var(--progress-percent, 0%), #e2e8f0 var(--progress-percent, 0%) 100%);
    cursor: pointer;
  }
  .mobile-study-toolbar > .player-progress::-webkit-slider-runnable-track { height: 6px; border-radius: 9999px; background: transparent; }
  .mobile-study-toolbar > .player-progress::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -5px;
    appearance: none;
    border: 0;
    border-radius: 50%;
    background: white;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
  }
  .mobile-study-toolbar > .player-progress::-moz-range-track { height: 6px; border: 0; border-radius: 9999px; background: transparent; }
  .mobile-study-toolbar > .player-progress::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: white; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%); }
  .mobile-transport { display: flex; align-items: center; justify-content: space-around; }
  .mobile-transport button { display: grid; width: 40px; height: 40px; padding: 0; place-items: center; border: 0; background: transparent; color: #64748b; }
  .mobile-transport button[data-control]:not(:disabled),
  .mobile-transport button[data-mobile-collapse]:not(:disabled),
  .mobile-transport button[data-toggle-video]:not(:disabled) { color: #334155; }
  .mobile-transport button:disabled { opacity: .4; cursor: not-allowed; }
  .mobile-transport button svg { width: 16px; height: 16px; }
  .mobile-transport .transport-direction { stroke-width: 1.5; }
  .mobile-transport .transport-direction path:first-child { fill: currentColor; stroke: currentColor; stroke-width: 4; }
  .mobile-transport .mobile-play { width: 40px; height: 40px; margin: 0; border-radius: 50%; background: #2774ea; color: white; box-shadow: 0 5px 12px rgb(39 116 234 / 28%); }
  .mobile-transport .mobile-play > svg { position: absolute; top: 50%; left: 50%; translate: -50% -50%; }
  .mobile-transport .mobile-play { position: relative; }
  .mobile-transport .transport-play-icon { fill: currentColor; stroke: currentColor; }
  .mobile-study-toolbar.compact .mobile-study-actions, .mobile-study-toolbar.compact > .player-progress { display: none; }
  .player-page.video-hidden .video-stage { display: none; }
  .player-page.video-hidden .player-left { height: 0; }
  .player-page.video-hidden .transcript-panel { top: 50px; }
  .player-page.video-hidden .transcript-panel::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 2; height: 12px; background: #f8fafc; pointer-events: none; }
  .player-page.video-hidden .transcript-list { padding-top: 12px; }
  .player-page.blind-mode .blind-listening-prompt {
    position: fixed;
    inset: 48% auto auto 50%;
    z-index: 105;
    display: block;
    translate: -50% -50%;
    width: 228px;
    max-width: calc(100vw - 48px);
    min-height: 0;
    margin: 0;
    padding: 24px;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    background: #f8fafc;
    color: #3b82f6;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 10px 15px -3px rgb(15 23 42 / 10%), 0 4px 6px -4px rgb(15 23 42 / 10%);
  }
  .player-page.video-hidden { padding-top: 50px; }
  .player-page[data-caption-size="standard"] .transcript-list p { font-size: 14px; line-height: 23px; }
  .player-page[data-caption-size="standard"] .transcript-list article > span { font-size: 12px; line-height: 18px; }
  .player-page[data-caption-size="medium"] .transcript-list p { font-size: 16px; line-height: 26px; }
  .player-page[data-caption-size="medium"] .transcript-list article > span { font-size: 14px; line-height: 21px; }
  .player-page[data-caption-size="large"] .transcript-list p { font-size: 18px; line-height: 29px; }
  .player-page[data-caption-size="large"] .transcript-list article > span { font-size: 16px; line-height: 23px; }
  .player-page[data-caption-size="xlarge"] .transcript-list p { font-size: 21px; line-height: 33px; }
  .player-page[data-caption-size="xlarge"] .transcript-list article > span { font-size: 18px; line-height: 27px; }

  .subtitle-preview-dialog {
    width: calc(100vw - 32px);
    height: 90dvh;
    border-radius: 16px;
  }
  .subtitle-preview-dialog > header { padding: 22px 24px 16px; }
  .subtitle-preview-heading { display: grid; gap: 14px; }
  .subtitle-preview-heading h3 { font-size: 20px; }
  .subtitle-preview-tabs { grid-row: 2; }
  .subtitle-preview-options { grid-row: 3; }
  .subtitle-preview-options > div { gap: 8px 14px; }
  .subtitle-document, .intensive-document { padding: 14px 24px 24px; }
  .subtitle-preview-dialog > footer { padding: 18px 24px 24px; }
  .intensive-cover { display: block; padding: 14px; }
  .intensive-cover > div { padding: 16px; }
  .intensive-cover h2 { margin: 15px 0; font-size: 23px; }
  .intensive-cover img { display: none; }
}

.control-sheet {
  position: fixed;
  inset: auto 0 0;
  width: min(520px, 100vw);
  max-width: none;
  margin: 0 auto;
  padding: 24px;
  overflow: hidden;
  border: 0;
  border-radius: 24px 24px 0 0;
  background: white;
  color: #1e293b;
  box-shadow: 0 -20px 60px rgb(15 23 42 / 20%);
}
.control-sheet::backdrop { background: rgb(15 23 42 / 30%); backdrop-filter: blur(3px); }
.control-sheet > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.control-sheet h3 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 18px; }
.control-sheet h3 b { padding: 2px 8px; border-radius: 4px; background: #dbeafe; color: var(--brand); font-size: 14px; }
.control-sheet > header button { display: grid; width: 40px; height: 40px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: #f1f5f9; color: #64748b; }
.control-sheet svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.repeat-sheet {
  box-sizing: border-box;
  width: 100vw;
  height: 84.5vh;
  height: 84.5dvh;
  max-height: 84.5vh;
  max-height: 84.5dvh;
  padding-bottom: 24px;
}
.repeat-sheet[open] { display: flex; flex-direction: column; }
.sheet-tip { margin: 0 0 14px; padding: 12px; border: 1px solid #f1f5f9; border-radius: 12px; background: #f8fafc; color: #64748b; font-size: 13px; font-style: italic; }
.sheet-tip[hidden], .repeat-range-summary[hidden] { display: none; }
.repeat-range-summary { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 12px; border: 1px solid #dbeafe; border-radius: 12px; background: #eff6ff; color: #1e3a8a; font-size: 13px; font-weight: 700; }
.repeat-range-summary svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: var(--brand); stroke-width: 2; }
.repeat-range-summary strong { margin-left: 4px; color: var(--brand); }
.repeat-caption-list { display: grid; min-height: 0; flex: 1 1 auto; gap: 4px; overflow-y: auto; scrollbar-width: none; }
.repeat-caption-list::-webkit-scrollbar { display: none; }
.repeat-caption-list button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; overflow: hidden; border: 0; border-left: 4px solid transparent; border-radius: 10px; background: transparent; color: #64748b; text-align: left; }
.repeat-caption-list button.selected,
.repeat-caption-list button.in-range { border-left-color: var(--brand); background: #eff6ff; color: #1e3a8a; }
.repeat-caption-list time { flex: 0 0 auto; padding: 3px 6px; border-radius: 4px; background: #f1f5f9; font-family: monospace; font-size: 10px; }
.repeat-caption-list button.selected time,
.repeat-caption-list button.in-range time { background: #bfdbfe; color: #1d4ed8; }
.repeat-caption-list .repeat-caption-text { min-width: 0; flex: 1 1 auto; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.repeat-caption-list .repeat-marker { display: none; flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; background: #dbeafe; color: var(--brand); font-size: 10px; font-weight: 700; line-height: 1; }
.repeat-caption-list button.range-start .repeat-marker,
.repeat-caption-list button.range-end .repeat-marker { display: inline-flex; }
.control-sheet > footer { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.control-sheet > footer button, .practice-exit { height: 44px; border: 0; border-radius: 12px; background: #f1f5f9; color: #475569; font-weight: 700; }
.control-sheet > footer button { display: flex; align-items: center; justify-content: center; gap: 8px; }
.control-sheet > footer button svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 2; }
.repeat-sheet > footer { flex: 0 0 auto; margin-bottom: 0; }
.control-sheet > footer .primary { background: var(--brand); color: white; }
.control-sheet > footer .primary:disabled { background: #dbe5ef; color: #94a3b8; }
.loop-sheet { padding-bottom: 4px; }
.loop-sheet h3 svg { color: var(--brand); }
.loop-setting-card { margin: 0 0 24px; padding: 16px; border-radius: 14px; background: #f8fafc; }
.loop-setting-card:last-child { margin-bottom: 0; }
.loop-toggle-row, .loop-auto-pause { display: flex; align-items: center; justify-content: space-between; }
.loop-toggle-row span { display: grid; gap: 3px; }
.loop-toggle-row b, .loop-auto-pause b { color: #1e293b; font-size: 16px; line-height: 22px; }
.loop-toggle-row small { color: #94a3b8; font-size: 12px; line-height: 17px; }
.loop-sheet input { position: absolute; opacity: 0; pointer-events: none; }
.loop-sheet label i { position: relative; width: 48px; height: 28px; flex: 0 0 auto; border-radius: 9999px; background: #e2e8f0; transition: .2s; }
.loop-sheet label i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgb(15 23 42 / 18%); transition: .2s; }
.loop-sheet input:checked + i { background: #2563eb; box-shadow: 0 4px 8px rgb(37 99 235 / 20%); }
.loop-sheet input:checked + i::after { translate: 20px 0; }
.sentence-loop-options { margin-top: 14px; padding-top: 14px; border-top: 1px solid #f1f5f9; }
.sentence-loop-options[hidden] { display: none; }
.sentence-loop-options > strong { display: block; margin-bottom: 10px; color: #64748b; font-size: 12px; line-height: 17px; }
.loop-count-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.loop-count-grid button { height: 42px; padding: 0; border: 1px solid #e2e8f0; border-radius: 11px; background: white; color: #475569; font-size: 14px; font-weight: 700; }
.loop-count-grid button.selected { border-color: #2563eb; background: #2563eb; color: white; box-shadow: 0 5px 10px rgb(37 99 235 / 24%); }
.loop-auto-pause { margin-top: 20px; }
.loop-auto-pause b { font-size: 14px; }
.practice-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.practice-mode-grid button { display: grid; min-height: 84px; place-items: center; gap: 8px; border: 0; border-radius: 14px; background: #f8fafc; color: #475569; font-weight: 700; }
.practice-mode-grid svg { width: 23px; height: 23px; }
.practice-exit { width: 100%; margin-top: 16px; color: #64748b; }
.vocabulary-workspace { position: fixed; inset: 0; z-index: 140; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px 16px 0 0; background: white; }
.practice-workspace { position: fixed; inset: 0 0 136px; z-index: 125; overflow: hidden auto; background: #f8fafc; scrollbar-width: none; }
.vocabulary-workspace::-webkit-scrollbar, .practice-workspace::-webkit-scrollbar { display: none; }
.vocabulary-workspace[hidden], .practice-workspace[hidden] { display: none; }
.vocabulary-workspace > header, .practice-workspace > header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 12px; border-bottom: 1px solid #e2e8f0; background: white; }
.vocabulary-workspace h3, .practice-workspace h3 { margin: 0; font-size: 18px; }
.vocabulary-workspace > header button, .practice-workspace > header button { display: grid; width: 36px; height: 36px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: #f1f5f9; color: #64748b; }
.vocabulary-workspace svg, .practice-workspace svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vocabulary-workspace > header { position: static; flex: 0 0 auto; height: 44.8px; padding: 8px 12px; border-bottom-color: #f1f5f9; }
.vocabulary-workspace h3 { font-size: 16px; line-height: 24px; }
.vocabulary-workspace > header button { width: 28px; height: 28px; padding: 4px; }
.vocabulary-workspace > header button svg { width: 20px; height: 20px; }
.vocabulary-workspace > nav { position: static; z-index: 2; display: grid; flex: 0 0 46.4px; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #f1f5f9; background: rgb(248 250 252 / 50%); }
.vocabulary-workspace > nav button { height: 45.6px; padding: 12px 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #64748b; font-size: 14px; font-weight: 700; line-height: 20px; }
.vocabulary-workspace > nav button.selected { border-bottom-color: #a855f7; color: #9333ea; background: white; }
.vocabulary-workspace[data-learning-type="phrase"] > nav button.selected { border-bottom-color: #0284c7; color: #0284c7; }
.vocabulary-workspace[data-learning-type="expression"] > nav button.selected { border-bottom-color: #ea580c; color: #ea580c; }
.learning-filters { position: static; z-index: 2; display: flex; flex: 0 0 50.4px; gap: 8px; padding: 8px 16px; border-bottom: 1px solid #e2e8f0; background: rgb(248 250 252 / 50%); }
.learning-filter-wrap { position: relative; flex: 1; min-width: 0; }
.learning-filters > button, .learning-filter-wrap > button { display: flex; width: 100%; height: 33.6px; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 8px; background: white; color: #475569; font-size: 12px; font-weight: 600; line-height: 16px; }
.learning-filters > button { flex: 1; }
.learning-filters svg { width: 14px; height: 14px; }
.learning-filter-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; display: grid; width: 100%; min-width: 132px; padding: 6px; border: 1px solid #e2e8f0; border-radius: 10px; background: white; box-shadow: 0 12px 28px rgb(15 23 42 / 16%); }
.learning-filter-menu[hidden] { display: none; }
.learning-filter-menu button { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 8px 9px; border: 0; border-radius: 7px; background: transparent; color: #475569; font-size: 12px; }
.learning-filter-menu button:hover { background: #f1f5f9; }
.learning-filter-menu b { color: #94a3b8; font-weight: 600; }
.learning-card-list { display: grid; min-height: 0; flex: 1 1 auto; grid-template-columns: repeat(7, minmax(0, 1fr)); align-content: start; gap: 10px; padding: 16px; overflow-y: auto; overscroll-behavior: contain; background: rgb(248 250 252 / 50%); scrollbar-width: none; }
.learning-card-list::-webkit-scrollbar { display: none; }
.learning-card { display: none; height: 428px; align-self: start; gap: 12px; padding: 20px; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 12px; background: white; line-height: 24px; box-shadow: 0 1px 2px rgb(15 23 42 / 4%); }
.vocabulary-workspace[data-learning-type="word"] .learning-card.word,
.vocabulary-workspace[data-learning-type="phrase"] .learning-card.phrase,
.vocabulary-workspace[data-learning-type="expression"] .learning-card.expression { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.vocabulary-workspace[data-learning-filter-mode="favorite"] .learning-card:not(.is-favorite),
.vocabulary-workspace[data-learning-filter-mode="unfavorite"] .learning-card.is-favorite { display: none !important; }
.learning-card > header { display: flex; min-height: 30px; align-items: flex-start; justify-content: space-between; }
.learning-card h4 { margin: 0; color: #7e22ce; font-size: 24px; line-height: 30px; }
.learning-card.phrase h4 { color: #0284c7; }
.learning-card.expression h4 { color: #1e293b; }
.learning-card-tools { display: flex; flex: 0 0 auto; align-items: center; gap: 0; border: 1px solid #e2e8f0; border-radius: 9999px; background: white; box-shadow: 0 1px 2px rgb(15 23 42 / 6%); }
.learning-card-tools button { height: 28px; border: 0; background: transparent; }
.learning-card-tools > i { width: 1px; height: 16px; background: #e2e8f0; }
.learning-card-tools .learning-star { display: grid; width: 32px; padding: 6px 8px; place-items: center; border-radius: 9999px; color: #94a3b8; }
.learning-card-tools .learning-star svg { width: 16px; height: 16px; }
.learning-card-tools .learning-book { padding: 6px 12px; border-radius: 9999px; color: #2563eb; font-size: 12px; font-weight: 500; line-height: 16px; }
.learning-card-tools .learning-star.active,
.learning-card.is-favorite .learning-card-tools .learning-star { color: #f59e0b; }
.learning-card-tools .learning-star.active svg,
.learning-card.is-favorite .learning-card-tools .learning-star svg { fill: currentColor; stroke: currentColor; }
.learning-card-tools .learning-star.active svg path,
.learning-card.is-favorite .learning-card-tools .learning-star svg path { fill: currentColor; }
.learning-card-body { min-height: 0; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; }
.learning-card-body::-webkit-scrollbar { display: none; }
.learning-phonetics { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; color: #475569; font-size: 14px; line-height: 20px; }
.learning-phonetics > button { display: flex; min-height: 24px; align-items: center; gap: 4px; padding: 2px 4px; border: 0; border-radius: 6px; background: transparent; color: #334155; font-size: 14px; line-height: 20px; }
.learning-phonetics > button:hover { background: #eff6ff; }
.learning-phonetics > button > svg { width: 12px; height: 12px; color: #3b82f6; }
.learning-phonetics i { padding: 0 4px; border-radius: 4px; background: #eff6ff; color: #3b82f6; font-size: 12px; font-style: normal; line-height: 16px; }
.learning-phonetics > button + button > svg { color: #ef4444; }
.learning-phonetics > button + button i { background: #fef2f2; color: #ef4444; }
.learning-definition-reveal { padding: 16px 0; }
.learning-definition-reveal button { display: flex; width: 100%; height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border: 0; border-radius: 12px; background: #f1f5f9; color: #334155; font-size: 14px; font-weight: 700; line-height: 20px; box-shadow: 0 1px 2px rgb(15 23 42 / 5%); }
.learning-definition-reveal svg { width: 16px; height: 16px; }
.learning-definition { display: none; color: #334155; line-height: 1.6; }
.show-definitions .learning-definition-reveal, .learning-card.show-definition .learning-definition-reveal { display: none; }
.show-definitions .learning-definition, .learning-card.show-definition .learning-definition { display: block; }
.learning-definition-main { color: #0f172a; font-size: 20px; font-weight: 700; line-height: 32px; }
.learning-definition-main p { margin: 0; }
.learning-definition section { margin-top: 8px; }
.learning-definition h5 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: #475569; font-size: 14px; font-weight: 600; line-height: 20px; }
.learning-definition h5 b { font-weight: 600; }
.learning-definition section > p { margin: 0; color: #1e293b; font-size: 14px; line-height: 20px; }
.learning-definition blockquote { margin: 0; padding: 12px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.learning-definition blockquote p { margin: 0; color: #1e293b; font-size: 14px; line-height: 20px; }
.learning-definition blockquote p + p { margin-top: 4px; color: #64748b; font-size: 12px; line-height: 16px; }
.learning-card footer { display: flex; flex: 0 0 50.4px; align-items: flex-end; gap: 8px; margin-top: 4px; padding-top: 8px; border-top: 1px solid #f1f5f9; }
.learning-card footer button { min-width: 39.6px; height: 39.6px; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: white; color: #94a3b8; font-weight: 700; }
.learning-card footer button:first-child { flex: 1; }
.learning-card footer button:first-child { display: flex; height: 41.6px; align-items: center; justify-content: center; gap: 8px; padding: 10px 0; border-color: #bfdbfe; color: #2563eb; font-size: 14px; line-height: 20px; }
.learning-card footer button:first-child svg { width: 18px; height: 18px; }
.learning-card footer .definition-toggle { border-color: #fde68a; background: #fffbeb; color: #d97706; font-size: 12px; }
.learning-icon-badge { position: relative; display: block; width: 18px; height: 18px; }
.learning-icon-badge svg { width: 18px; height: 18px; }
.learning-icon-badge b { position: absolute; top: -4px; right: -7px; padding: 0 2px; border: 1px solid currentColor; border-radius: 9999px; background: white; font-size: 8px; font-weight: 700; line-height: 9px; white-space: nowrap; }
.learning-card footer [data-learning-english] .learning-eye-off,
.learning-card footer .definition-toggle .learning-eye { display: none; }
.hide-learning-english .learning-card:not(.show-english) footer [data-learning-english] .learning-eye,
.learning-card.hide-english footer [data-learning-english] .learning-eye,
.show-definitions .learning-card footer .definition-toggle .learning-eye-off,
.learning-card.show-definition footer .definition-toggle .learning-eye-off { display: none; }
.hide-learning-english .learning-card:not(.show-english) footer [data-learning-english] .learning-eye-off,
.learning-card.hide-english footer [data-learning-english] .learning-eye-off,
.show-definitions .learning-card footer .definition-toggle .learning-eye,
.learning-card.show-definition footer .definition-toggle .learning-eye { display: block; }
.hide-learning-english .learning-card:not(.show-english) footer [data-learning-english],
.learning-card.hide-english footer [data-learning-english] {
  border-color: #fde68a;
  background: #fffbeb;
  color: #d97706;
}
.show-definitions .learning-card footer .definition-toggle,
.learning-card.show-definition footer .definition-toggle {
  border-color: #e2e8f0;
  background: white;
  color: #94a3b8;
}
.hide-learning-english .learning-card:not(.show-english) .learning-phonetics,
.learning-card.hide-english .learning-phonetics { display: none; }
.hide-learning-english .learning-card:not(.show-english) h4,
.learning-card.hide-english h4 { color: transparent; background: #e2e8f0; border-radius: 5px; }
.practice-body { padding: 14px 14px 32px; }
.practice-card-list { display: grid; max-width: 820px; gap: 10px; margin: 0 auto; }
.practice-sentence-card { position: relative; padding: 15px 14px 13px; border: 1px solid #e2e8f0; border-radius: 12px; background: white; box-shadow: 0 1px 2px rgb(15 23 42 / 4%); }
.practice-workspace[data-practice-mode="shadowing"] .practice-sentence-card { cursor: pointer; }
.practice-workspace[data-practice-mode="shadowing"] .practice-sentence-card.is-current { border-color: #dbeafe; background: #eff6ff; box-shadow: 0 0 0 1px #dbeafe, 0 1px 2px rgb(15 23 42 / 5%); }
.practice-workspace mark.learning-highlight { background: transparent; font-weight: 700; }
.practice-workspace mark.learning-pair-0 { color: #a855f7; }
.practice-workspace mark.learning-pair-1 { color: #f59e0b; }
.practice-workspace mark.learning-pair-2 { color: #f472b6; }
.practice-workspace mark.learning-pair-3 { color: #fb923c; }
.practice-workspace mark.learning-pair-4 { color: #3b82f6; }
.practice-workspace mark.learning-pair-5 { color: #10b981; }
.practice-sentence-card > time { display: block; margin-bottom: 8px; color: #94a3b8; font-family: ui-monospace, monospace; font-size: 11px; }
.practice-english { margin: 0; color: #0f172a; font-size: 16px; font-weight: 700; line-height: 1.55; }
.practice-chinese { margin: 5px 0 0; color: #94a3b8; font-size: 14px; line-height: 1.45; }
.practice-phonetic { margin: 8px 0 0; color: #64748b; font-size: 13px; font-weight: 500; letter-spacing: .02em; }
.practice-card-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.practice-action-divider { display: block; width: 1px; height: 24px; flex: 0 0 1px; margin: 0 4px; background: #e2e8f0; }
.practice-card-actions button, .dictation-actions button, .fulltext-actions button { display: flex; min-height: 40px; align-items: center; justify-content: center; gap: 5px; padding: 7px 8px; border: 0; border-radius: 10px; background: #eff6ff; color: #2563eb; font-size: 12px; font-weight: 700; }
.practice-card-actions button { width: 40px; flex: 0 0 40px; padding: 0; border-radius: 12px; box-shadow: 0 1px 2px rgb(15 23 42 / 5%); transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; }
.practice-card-actions button span { display: none; }
.practice-card-actions button:nth-child(2) { background: #eef2ff; color: #4f46e5; }
.practice-card-actions button.record { background: #fef2f2; color: #ef4444; }
.practice-card-actions button:last-child { background: #f8fafc; color: #64748b; }
.practice-card-actions button:disabled { color: #cbd5e1; cursor: not-allowed; }
.practice-card-actions button.selected, .practice-card-actions button.recording { box-shadow: inset 0 0 0 1px currentColor; }
.practice-card-actions button.has-recording { background: #ecfdf5; color: #059669; }
.practice-card-actions button.is-playing { position: relative; z-index: 0; color: #2563eb; box-shadow: 0 0 0 0 rgb(37 99 235 / 36%); animation: practice-control-breathe 1.25s ease-in-out infinite; }
.practice-card-actions button.has-recording.is-playing { color: #059669; animation-name: practice-recording-playback-breathe; }
.practice-card-actions button.recording { animation: practice-record-breathe 1.1s ease-in-out infinite; }
.practice-card-actions svg, .dictation-actions svg, .fulltext-actions svg { width: 17px; height: 17px; }
.practice-card-actions svg { width: 20px; height: 20px; }
.practice-card-actions .practice-phonetic-icon,
.practice-card-actions .practice-phonetic-icon text { stroke: none; }
.practice-card-actions b { font-size: 14px; }
@keyframes practice-control-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgb(37 99 235 / 34%); transform: scale(1); }
  50% { box-shadow: 0 0 0 7px rgb(37 99 235 / 0%); transform: scale(1.06); }
}
@keyframes practice-record-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgb(239 68 68 / 34%); transform: scale(1); }
  50% { box-shadow: 0 0 0 7px rgb(239 68 68 / 0%); transform: scale(1.06); }
}
@keyframes practice-recording-playback-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgb(5 150 105 / 34%); transform: scale(1); }
  50% { box-shadow: 0 0 0 7px rgb(5 150 105 / 0%); transform: scale(1.06); }
}
.practice-recording { width: 100%; height: 34px; margin-top: 10px; }
.practice-status { position: absolute; right: 14px; bottom: 24px; display: block; margin: 0; color: #94a3b8; font-size: 11px; text-align: right; }
.practice-status.is-practiced { display: inline-flex; align-items: center; gap: 3px; color: #16a34a; font-weight: 700; }
.practice-status svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.practice-reveal { position: absolute; top: 9px; right: 9px; display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 9px; background: transparent; color: #94a3b8; }
.practice-reveal svg { width: 18px; height: 18px; }
.practice-reveal.selected { background: #eff6ff; color: var(--brand); }
.cloze-card { padding-right: 50px; }
.practice-blank { display: inline-flex; min-width: 70px; min-height: 28px; align-items: center; margin: 0 3px; vertical-align: middle; border-bottom: 2px dashed #60a5fa; border-radius: 4px; background: #dbeafe; }
.practice-blank input { width: var(--cloze-width, 8ch); min-width: 70px; height: 26px; box-sizing: border-box; padding: 1px 6px; border: 0; outline: 0; background: transparent; color: #1d4ed8; font: inherit; font-weight: 700; text-align: center; }
.practice-blank input:focus { border-radius: 4px; box-shadow: 0 0 0 3px rgb(59 130 246 / 20%); }
.practice-blank input.correct { color: #15803d; }
.practice-blank input.incorrect { color: #dc2626; }
.practice-blank i { display: none; padding: 0 5px; color: #2563eb; font-style: normal; }
.answer-visible .practice-blank { height: auto; background: #eff6ff; }
.answer-visible .practice-blank input { display: none; }
.answer-visible .practice-blank i { display: inline; }
.dictation-card { min-height: 92px; padding-right: 50px; }
.dictation-answer { margin: 4px 0 12px; color: #0f172a; font-weight: 700; line-height: 1.5; }
.dictation-actions { display: flex; gap: 8px; }
.dictation-actions button { min-width: 86px; background: #eff6ff; }
.dictation-actions button + button { background: #f1f5f9; color: #475569; }
.dictation-actions button.selected { background: #e2e8f0; color: #1e293b; }
.dictation-editor { margin-top: 10px; }
.dictation-editor[hidden], .dictation-answer[hidden] { display: none; }
.dictation-editor textarea { width: 100%; min-height: 88px; box-sizing: border-box; padding: 10px; border: 1px solid #bfdbfe; border-radius: 9px; outline: 0; resize: vertical; font: inherit; }
.dictation-editor textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px #dbeafe; }
.dictation-editor > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.dictation-editor button { min-width: 68px; min-height: 36px; border: 0; border-radius: 8px; background: #f1f5f9; color: #475569; font-weight: 700; }
.dictation-editor button.primary { background: var(--brand); color: white; }
.practice-result { min-height: 0; margin: 8px 0 0; color: #dc2626; font-size: 12px; font-weight: 700; }
.practice-result:empty { display: none; }
.practice-result.correct { color: #16a34a; }
.fulltext-practice { position: relative; max-width: 820px; margin: 0 auto; padding-bottom: 64px; }
.fulltext-practice h4 { margin: 5px 0 10px; font-size: 16px; }
.fulltext-hints { display: flex; gap: 18px; margin-bottom: 12px; color: #64748b; font-size: 12px; }
.fulltext-copy { padding: 20px; border: 1px solid #e2e8f0; border-radius: 12px; background: white; line-height: 2; }
.fulltext-copy p { margin: 0; }
.fulltext-english { color: #0f172a; font-size: 17px; }
.fulltext-english button { display: inline; min-height: 0; padding: 1px 0; border: 0; border-radius: 3px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.fulltext-english button:hover, .fulltext-english button:focus { background: #dbeafe; color: #1d4ed8; outline: 0; }
.fulltext-sentence { border-radius: 4px; }
.fulltext-sentence:has(button:focus) { background: #eff6ff; }
.fulltext-translation { margin-top: 16px !important; padding-top: 16px; border-top: 1px solid #f1f5f9; color: #64748b; font-size: 15px; }
.fulltext-translation-sentence { display: inline; }
.translation-hidden .fulltext-translation { display: none; }
.word-lookup { position: sticky; bottom: 64px; z-index: 2; display: flex; gap: 8px; margin: 10px 0; padding: 10px 12px; border: 1px solid #bfdbfe; border-radius: 10px; background: #eff6ff; color: #334155; box-shadow: 0 4px 16px rgb(15 23 42 / 10%); }
.word-lookup[hidden] { display: none; }
.word-lookup strong { color: #2563eb; }
.fulltext-actions { position: sticky; bottom: 0; display: flex; justify-content: center; gap: 10px; margin-top: 14px; padding: 8px; border-radius: 14px; background: rgb(248 250 252 / 92%); backdrop-filter: blur(8px); }
.fulltext-actions button { min-width: 110px; background: white; color: #475569; box-shadow: 0 1px 4px rgb(15 23 42 / 10%); }
.fulltext-actions button.selected { background: var(--brand); color: white; }
@media (max-width: 2399px) and (min-width: 1024px) {
  .learning-card-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1999px) and (min-width: 1024px) {
  .learning-card-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1599px) and (min-width: 1024px) {
  .learning-card-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1199px) and (min-width: 1024px) {
  .learning-card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .practice-workspace {
    inset: 70px 0 8px calc(50% + 12px);
    z-index: 8;
    border-radius: 0 0 16px 16px;
    background: var(--surface);
  }
  .practice-workspace > header { display: none; }
  .practice-body { padding: 0 12px 16px; }
  .practice-card-list, .fulltext-practice { max-width: none; }
  .practice-card-list { gap: 7px; }
  .practice-sentence-card { border-radius: 16px; box-shadow: none; }
  .practice-sentence-card .practice-english { padding-right: 72px; }
  .practice-card-actions button:not(:disabled):hover { transform: scale(1.05); box-shadow: 0 4px 12px rgb(15 23 42 / 10%); }
  .practice-status { right: 16px; bottom: 24px; }
}
@media (max-width: 1023px) {
  .learning-card-list { grid-template-columns: 1fr; }
  .learning-card { height: 390px; }
}
@media (max-width: 700px) {
  .practice-workspace { inset: 50px 0 132px; }
  .practice-workspace > header { height: 46px; }
  .practice-workspace h3 { font-size: 16px; }
  .practice-body { padding: 10px 12px 24px; }
  .practice-sentence-card { padding: 13px 12px 11px; border-radius: 10px; }
  .practice-english { font-size: 15px; }
  .practice-chinese { font-size: 13px; }
  .fulltext-copy { padding: 15px 13px; }
  .fulltext-english { font-size: 16px; line-height: 1.9; }
  .fulltext-translation { font-size: 14px; line-height: 1.8; }
  .fulltext-hints { gap: 10px; font-size: 11px; }
}

@media (max-width: 700px) {
  .brand strong { font-size: 17px; }
  .brand-mark { scale: .9; }
  .video-grid { gap: 10px; }
  .card-body { padding: 11px 11px 12px; }
  .card-body h2 { font-size: 15px; }
  .meta { gap: 4px; }
  .meta span { padding: 4px 6px; }
  .details { gap: 4px; }
  .details span { padding-inline: 5px; }

  .section-view .content { padding-inline: 12px; }
  .inner-heading > span { width: 38px; height: 38px; }
  .inner-heading h1, .collection-head h1 { font-size: 22px; }
  .info-callout, .method-card { padding: 18px 16px; }
  .method-card li { font-size: 14px; }
  .subtitle-hit { grid-template-columns: 82px 1fr; }
  .subtitle-hit img, .subtitle-hit .cover-fallback { width: 82px; }
  .subtitle-hit .hit-time { display: none; }
  .collection-tabs { overflow-x: auto; }
  .collection-tabs button { padding-inline: 16px; }
  .collection-manager-backdrop { align-items: flex-end; padding: 0; }
  .collection-manager { width: 100%; max-height: 85vh; border-width: 1px 0 0; border-radius: 24px 24px 0 0; }
  .collection-manager > header { min-height: 72px; }
  .collection-manager-body { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
  .favorite-picker-backdrop { align-items: flex-end; padding: 0; }
  .favorite-picker { width: 100%; max-height: 78vh; border-width: 1px 0 0; border-radius: 24px 24px 0 0; }
  .favorite-picker-list { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .favorite-video-grid { gap: 10px; }
  .profile-page { padding-top: 0; }
  .profile-guest-page { padding-top: 0; }
  .profile-banner { margin-inline: -12px; border-radius: 0; }
  .profile-body { margin-inline: -12px; padding: 24px 16px; border-inline: 0; border-radius: 0; }
  .device-list article { align-items: flex-start; }
  .device-list p { max-width: 230px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}

@media (max-width: 560px) {
  .video-grid { grid-template-columns: 1fr; }
  .mobile-method span { width: 22px; height: 22px; }
  .mobile-method svg { width: 22px; height: 22px; }
  .category-tabs button { flex: 1 0 auto; }
  .favorite-video-grid { grid-template-columns: 1fr; }
  .profile-banner { padding-inline: 20px; }
  .profile-banner > span { width: 64px; height: 64px; font-size: 31px; }
  .profile-banner > span svg { width: 30px; height: 30px; }
  .profile-banner h1 { font-size: 23px; }
  .profile-login-required { min-height: 280px; padding: 34px 22px; border-radius: 20px; }
  .profile-login-required > span { width: 62px; height: 62px; border-radius: 20px; }
  .profile-login-required h1 { font-size: 25px; }
  .profile-login-required p { font-size: 13px; }
  .transcript-panel > header { align-items: flex-start; }
  .transcript-panel h2 { font-size: 16px; }
  .transcript-panel header button { padding: 8px; font-size: 12px; }
}

body.dark.play-view,
body.dark.play-view .player-page { background: var(--bg); color: var(--text); }
body.dark.play-view .player-left,
body.dark.play-view .transcript-panel { background: var(--surface); }
body.dark.play-view .practice-action-divider { background: #334155; }
body.dark.play-view .player-left > header div button,
body.dark.play-view .transcript-panel header button,
body.dark.play-view .player-controls > button > b,
body.dark.play-view .desktop-control-wrap > button > b { background: #1e293b; color: #cbd5e1; }
body.dark.play-view .player-controls > button,
body.dark.play-view .desktop-control-wrap > button { color: #94a3b8; }
body.dark.play-view .player-controls > button:hover:not(:disabled) > b,
body.dark.play-view .desktop-control-wrap > button:hover:not(:disabled) > b,
body.dark.play-view .desktop-control-wrap > button.popover-open > b { background: #334155; }
body.dark.play-view .player-controls [data-control="播放"] > b { background: #2563eb; color: white; }
body.dark.play-view .player-controls > button.selected > b,
body.dark.play-view .desktop-control-wrap > button.selected > b { background: #2563eb; color: white; }
body.dark.play-view .desktop-control-popover { border-color: var(--line); background: var(--surface); color: #e2e8f0; }
body.dark.play-view .desktop-speed-popover > strong,
body.dark.play-view .desktop-sentence-loop-options > strong,
body.dark.play-view .desktop-live-popover > strong { color: #94a3b8; }
body.dark.play-view .desktop-speed-grid button,
body.dark.play-view .desktop-loop-count-grid button { border-color: #334155; background: #1e293b; color: #cbd5e1; }
body.dark.play-view .desktop-speed-grid button.selected,
body.dark.play-view .desktop-loop-count-grid button.selected { border-color: var(--brand); background: var(--brand); color: white; }
body.dark.play-view .desktop-loop-toggle,
body.dark.play-view .desktop-sentence-loop-options,
body.dark.play-view .desktop-popover-close,
body.dark.play-view .desktop-live-popover > .desktop-live-close { border-color: var(--line); }
body.dark.play-view .desktop-live-popover > button { color: #cbd5e1; }
body.dark.play-view .desktop-live-popover > button:hover { background: #1e293b; }
body.dark.play-view .desktop-live-popover > button.selected { background: #172554; color: #60a5fa; }

@media (min-width: 1024px) {
  .player-left > header .checkin-trigger {
    display: flex;
    width: auto;
    height: 30px;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    background: #e2e8f0;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
    transition: all 150ms cubic-bezier(.4, 0, .2, 1);
  }

  .player-left > header .checkin-trigger:hover {
    background: #cbd5e1;
  }

  .player-left > header .checkin-trigger.checked {
    border-color: #bbf7d0;
    background: #dcfce7;
    color: #15803d;
  }

  .player-left > header .checkin-trigger svg {
    width: 14px;
    height: 14px;
  }

  .player-left > header .checkin-trigger span {
    display: inline;
  }

  .player-left > header .player-like {
    display: flex;
    width: auto;
    height: 30px;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    font-size: 12px;
  }

  .player-left > header .player-like span {
    display: inline;
  }

  body.dark.play-view .player-left > header .checkin-trigger {
    border-color: #334155;
    background: #1e293b;
    color: #94a3b8;
  }

  body.dark.play-view .player-left > header .checkin-trigger:hover {
    background: #334155;
  }

  body.dark.play-view .player-left > header .checkin-trigger.checked {
    border-color: #166534;
    background: rgb(20 83 45 / 30%);
    color: #86efac;
  }
}
body.dark.play-view .player-left > header .player-like { background: #3f1422; color: #fb7185; }
body.dark.play-view .player-left > header .player-like:not(.active) { background: #1e293b; color: #94a3b8; }
body.dark.play-view .current-caption,
body.dark.play-view .transcript-list article { border-color: var(--line); background: var(--surface-soft); }
body.dark.play-view .transcript-list article.active { border-color: #3b82f6; background: #10213d; }
body.dark.play-view .transcript-list p,
body.dark.play-view .current-caption b,
body.dark.play-view .screen-caption > b { color: #f1f5f9; }
body.dark.play-view .current-caption.is-ready b { color: #2563eb; }
body.dark.play-view .transcript-list article > span,
body.dark.play-view .current-caption span,
body.dark.play-view .screen-caption > span { color: #94a3b8; }
body.dark.play-view .video-intro { border-color: #1e293b; background: #0f172a; }
body.dark.play-view .video-intro h3 { color: #f1f5f9; }
body.dark.play-view .video-intro p { color: #94a3b8; }
body.dark.play-view .player-settings-sheet,
body.dark.play-view .control-sheet,
body.dark.play-view .subtitle-preview-dialog,
body.dark.play-view .caption-word-detail,
body.dark.play-view .vocabulary-workspace,
body.dark.play-view .practice-workspace { background: var(--surface); color: var(--text); }
body.dark.play-view .player-settings-sheet > header > button,
body.dark.play-view .control-sheet > header button,
body.dark.play-view .caption-size-setting button,
body.dark.play-view .live-position-setting button,
body.dark.play-view .control-sheet > footer button,
body.dark.play-view .practice-exit { border-color: var(--line); background: #1e293b; color: #cbd5e1; }
body.dark.play-view .settings-sheet-row strong,
body.dark.play-view .caption-size-setting > strong,
body.dark.play-view .control-sheet h3 { color: #e2e8f0; }
body.dark.play-view .settings-switch { background: #334155; }
body.dark.play-view .settings-switch::after { background: #e2e8f0; }

@media (max-width: 900px) {
  body.dark.play-view .player-page,
  body.dark.play-view .player-left,
  body.dark.play-view .transcript-panel { background: var(--bg); }
  body.dark.play-view .player-left > header {
    border-bottom-color: var(--line);
    background: rgb(15 23 42 / 96%);
  }
  body.dark.play-view .player-left > header div button,
  body.dark.play-view .player-left > header .player-like,
  body.dark.play-view .player-left > header .player-like:not(.active) { background: transparent; }
  body.dark.play-view .transcript-list article { border-color: var(--line); background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / 24%); }
  body.dark.play-view .transcript-list article.active { border-color: #3b82f6; background: #10213d; }
  body.dark.play-view .transcript-list p { color: #f1f5f9; }
  body.dark.play-view .mobile-study-toolbar {
    border-top-color: var(--line);
    background: rgb(15 23 42 / 97%);
    box-shadow: 0 -8px 24px rgb(0 0 0 / 28%);
  }
  body.dark.play-view .mobile-study-actions button,
  body.dark.play-view .mobile-transport button,
  body.dark.play-view .mobile-transport button[data-control]:not(:disabled),
  body.dark.play-view .mobile-transport button[data-mobile-collapse]:not(:disabled),
  body.dark.play-view .mobile-transport button[data-toggle-video]:not(:disabled) { color: #cbd5e1; }
  body.dark.play-view .mobile-transport .mobile-play { color: white; }
  body.dark.play-view .mobile-study-toolbar > .player-progress {
    background: linear-gradient(to right, #3b82f6 0 var(--progress-percent, 0%), #334155 var(--progress-percent, 0%) 100%);
  }
  body.dark.play-view .mobile-study-toolbar > .player-progress::-webkit-slider-thumb,
  body.dark.play-view .mobile-study-toolbar > .player-progress::-moz-range-thumb { background: #e2e8f0; }
  body.dark.play-view .speed-popover { border-color: var(--line); background: var(--surface); }
  body.dark.play-view .speed-popover > strong { color: #cbd5e1; }
  body.dark.play-view .speed-popover > div button { background: #1e293b; color: #cbd5e1; }
  body.dark.play-view .speed-popover > button { border-top-color: var(--line); }
  body.dark.play-view .player-page.video-hidden .transcript-panel::before { background: var(--bg); }
}

@media print {
  @page { margin: 14mm; size: A4 portrait; }
  body.printing-subtitle-preview * { visibility: hidden !important; }
  body.printing-subtitle-preview .subtitle-preview-dialog,
  body.printing-subtitle-preview .subtitle-preview-dialog * { visibility: visible !important; }
  body.printing-subtitle-preview .subtitle-preview-dialog {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
    overflow: visible;
    border: 0;
    box-shadow: none;
  }
  body.printing-subtitle-preview .subtitle-preview-dialog > header,
  body.printing-subtitle-preview .subtitle-preview-dialog > footer { display: none !important; }
  body.printing-subtitle-preview .subtitle-preview-scroll {
    display: block;
    overflow: visible;
  }
  body.printing-subtitle-preview .subtitle-document,
  body.printing-subtitle-preview .intensive-document { padding: 0; }
  body.printing-subtitle-preview .print-extra-page:not([hidden]) {
    display: block;
    break-before: page;
    page-break-before: always;
  }
  body.printing-subtitle-preview .print-extra-page h2 {
    margin: 0 0 20px;
    font-size: 24px;
  }
  body.printing-subtitle-preview .english-print-page p {
    margin: 0 0 12px;
    color: #1e293b;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.65;
  }
  body.printing-subtitle-preview .subtitle-preview-row,
  body.printing-subtitle-preview .intensive-caption-row { break-inside: avoid; }
}