:root {
  color-scheme: light;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei",
    sans-serif;
  background: #f6f4ee;
  color: #172026;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --panel: #ffffff;
  --panel-soft: #faf9f4;
  --line: #dedbd1;
  --ink: #172026;
  --muted: #667074;
  --brand: #33a315;
  --brand-ink: #1e6a0c;
  --danger: #b42318;
  --warn: #9a6700;
  --ok: #147a4d;
  --shadow: 0 14px 32px rgba(36, 42, 46, 0.08);
}

/* 20260529-fix15: Me public ID, podcast video shelf, safer podcast taps */
.me-profile-app {
  min-height: 100vh;
  padding: 14px clamp(16px, 4vw, 28px) calc(108px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 90% 0%, rgba(51, 163, 21, .08), transparent 34%),
    linear-gradient(180deg, #f5f5f4 0%, #f7f8f7 42%, #ffffff 100%);
}

.me-app-top {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-bottom: 14px;
}

.me-icon-round {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  color: #334328;
  font-size: 22px;
}

.me-icon-round.bell {
  position: relative;
}

.me-icon-round.bell::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5a1f;
}

.me-profile-card,
.me-grid-panel {
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
}

.me-profile-card {
  position: relative;
  padding: 20px 18px 18px;
}

.me-profile-link {
  position: absolute;
  top: 18px;
  right: 16px;
  border: 0;
  background: transparent;
  color: #9aa3a0;
  font-size: 15px;
}

.me-profile-main {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 4px 82px 16px 2px;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}

.me-profile-avatar {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid #57c724;
  border-radius: 50%;
  background: #ecfdf5;
  color: #33a315;
  font-size: 30px;
  font-weight: 900;
}

.me-profile-id h1 {
  margin: 0 0 8px;
  color: #1f2933;
  font-size: clamp(25px, 6vw, 34px);
  line-height: 1.05;
  letter-spacing: -.04em;
}

.me-profile-id p {
  display: grid;
  gap: 3px;
  margin: 0;
  color: #737f7a;
  font-size: 15px;
}
.me-public-id {
  display: inline-grid;
  gap: 3px;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: #737f7a;
}
.me-public-id span {
  color: #9aa5a0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.me-public-id code {
  width: fit-content;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f2f7ee;
  color: #557344;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
}

.me-profile-id p span {
  color: #9aa5a0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.me-profile-id code {
  color: #5f6f69;
  font-family: inherit;
}

.me-id-copy-inline {
  display: inline-flex;
  width: fit-content;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #f1f5f2;
  color: #697872;
  font-size: 13px;
}

.me-profile-metrics {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  margin-top: 14px;
}

.me-profile-metrics button {
  border: 0;
  background: transparent;
  text-align: center;
}

.me-profile-metrics strong {
  display: block;
  color: #54c425;
  font-size: 32px;
  line-height: 1;
}

.me-profile-metrics span {
  color: #1f2933;
  font-size: 16px;
  font-weight: 800;
}

.me-profile-metrics i {
  height: 44px;
  background: #e5e7eb;
}

.me-badge-fallback {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(181, 129, 35, .26);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #fff8dc 0 14%, transparent 15%),
    linear-gradient(145deg, #f8e5a8, #b7791f 48%, #f3d27c);
  color: #6b4212;
  font-weight: 900;
}

.me-badge-fallback.unlocked {
  box-shadow: 0 10px 20px rgba(181, 129, 35, .22);
}

.me-grid-panel {
  margin-top: 18px;
  padding: 20px 18px;
}

.me-grid-panel h2 {
  margin: 0 0 16px;
  color: #1f2933;
  font-size: 24px;
}

.me-profile-app .me-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 10px;
}

.me-profile-app .me-icon-grid > button {
  min-height: 70px;
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #1f2933;
}

.me-profile-app .me-icon-grid .me-ic {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #eeffec, #dcfbcc);
  box-shadow: 0 8px 20px rgba(75, 230, 25, .14);
  font-size: 22px;
}

.me-profile-app .me-icon-grid em {
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
}

.checkin-page {
  margin: -18px -12px 0;
  padding: 28px 18px 40px;
  border-radius: 0 0 32px 32px;
  background:
    radial-gradient(circle at 84% 8%, rgba(88, 212, 45, .26), transparent 28%),
    linear-gradient(180deg, #ddf4ff 0%, #f9fff6 42%, #fff 100%);
}

.checkin-hero {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 420px;
  margin: 0 auto 28px;
  text-align: center;
}

.checkin-hero span,
.checkin-summary-grid span {
  display: block;
  color: #506f42;
  font-size: 14px;
}

.checkin-hero strong {
  display: block;
  color: #65cd31;
  font-size: 52px;
  line-height: 1;
}

.checkin-calendar-card {
  padding: 8px 0 22px;
}

.checkin-month-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.checkin-month-row button,
.checkin-month-row h3 {
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(55, 109, 24, .10);
  border-radius: 14px;
  background: rgba(255,255,255,.62);
}

.checkin-month-row button {
  width: 54px;
  color: #6b7a76;
  font-size: 26px;
}

.checkin-month-row h3 {
  margin: 0;
  padding: 0 22px;
  color: #526744;
  font-size: 22px;
}

.checkin-week,
.checkin-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.checkin-week {
  margin-bottom: 14px;
  color: #6b815f;
  font-weight: 800;
}

.checkin-grid {
  gap: 12px 4px;
}

.checkin-grid span {
  min-height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #344529;
  font-size: 20px;
}

.checkin-grid span.active {
  background: rgba(88, 212, 45, .20);
  color: #4aa906;
  font-weight: 900;
}

.checkin-grid span.today {
  outline: 2px solid rgba(88, 212, 45, .72);
}

.checkin-grid span.empty {
  visibility: hidden;
}

.checkin-summary-grid,
.learning-data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.checkin-summary-grid div,
.learning-data-grid article {
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 28px rgba(55, 109, 24, .08);
}

.checkin-summary-grid strong,
.learning-data-grid strong {
  display: inline-block;
  margin-top: 6px;
  color: #2a6d0c;
  font-size: 30px;
}

.checkin-summary-grid em,
.learning-data-grid em {
  margin-left: 4px;
  color: #728079;
  font-style: normal;
}

.learning-data-overview {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid rgba(55, 109, 24, .08);
  border-radius: 24px;
  background: #fff;
}

.learning-data-overview h3 {
  margin: 0 0 14px;
}

.me-badge-page-head {
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(135deg, #fff7db, #ffffff);
}

.me-badge-page-head h3 {
  margin: 0 0 6px;
}

.me-badge-page-head p {
  margin: 0;
  color: #64756f;
  line-height: 1.6;
}

.me-badge-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.me-badge-card {
  min-width: 0;
  padding: 18px 12px 16px;
  border: 1px solid rgba(185, 135, 48, .36);
  border-radius: 22px;
  background: linear-gradient(180deg, #fff9df, #fff0bf);
  text-align: center;
  box-shadow: 0 14px 30px rgba(185, 135, 48, .12);
}

.me-badge-card.locked {
  opacity: .58;
  filter: grayscale(.7);
}

.me-badge-art {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255,255,255,.62);
}

.me-badge-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.me-badge-card strong,
.me-badge-card span {
  display: block;
}

.me-badge-card strong {
  color: #1f2933;
  font-size: 16px;
}

.me-badge-card span {
  margin-top: 4px;
  color: #728079;
  font-size: 11px;
}

@media (max-width: 540px) {
  .me-profile-main {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 12px;
    padding: 4px 0 14px;
  }

  .me-profile-avatar {
    width: 64px;
    height: 64px;
  }

  .me-badge-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
}

body::selection {
  background: #33a315;
  color: #ffffff;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}

button {
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: wait;
  opacity: 0.72;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fffefa;
  outline: 0;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #33a315;
  box-shadow: 0 0 0 3px rgba(51, 163, 21, 0.14);
}

textarea {
  min-height: 128px;
  resize: vertical;
}

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

.selector-shell {
  min-height: 100vh;
  background: #f6f4ee;
}

.selector-hero,
.industry-header {
  position: relative;
  overflow: hidden;
  color: #ffffff;
  background-image:
    linear-gradient(90deg, rgba(31, 57, 32, 0.88), rgba(31, 57, 32, 0.56), rgba(31, 57, 32, 0.18)),
    var(--cover);
  background-position: center;
  background-size: cover;
}

.selector-hero {
  min-height: 520px;
  padding: 20px 24px 52px;
}

.selector-nav,
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1220px;
  margin: 0 auto;
}

.selector-nav .brand span,
.site-nav .brand span {
  color: rgba(255, 255, 255, 0.74);
}

.selector-nav .brand-mark,
.site-nav .brand-mark {
  background: #ffffff;
  color: #2a6819;
}

.selector-copy {
  max-width: 760px;
  margin: 116px auto 0;
  transform: translateX(-230px);
}

.selector-copy h1 {
  max-width: 700px;
  margin-bottom: 16px;
  color: #ffffff;
  font-size: 56px;
  line-height: 1.08;
}

.selector-copy p {
  max-width: 640px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 17px;
  line-height: 1.7;
}

.selector-search,
.header-search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #425d45;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.18);
}

.selector-search input,
.header-search input {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.selector-search input:focus,
.header-search input:focus {
  box-shadow: none;
}

.selector-body {
  max-width: 1220px;
  margin: -42px auto 0;
  padding: 0 24px 42px;
}

.cluster-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.cluster-row span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fffefa;
  color: #34444a;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(36, 42, 46, 0.08);
}

.industry-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
}

.industry-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefa;
  box-shadow: var(--shadow);
}

.industry-cover {
  min-height: 142px;
  background-color: color-mix(in srgb, var(--accent) 18%, #172026);
  background-position: center;
  background-size: cover;
}

.industry-card-body {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.cluster-tag {
  width: fit-content;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--accent) 75%, #172026);
  background: color-mix(in srgb, var(--accent) 14%, #fffefa);
  font-size: 12px;
  font-weight: 900;
}

.industry-card h2 {
  margin: 0;
}

.industry-card p {
  margin: -4px 0 0;
  color: var(--muted);
}

.industry-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.industry-stats span {
  display: grid;
  place-items: center;
  min-height: 34px;
  border-radius: 8px;
  background: #f1eee5;
  color: #34444a;
  font-size: 12px;
  font-weight: 800;
}

.wide {
  width: 100%;
}

.industry-site {
  min-height: 100vh;
  background: #f6f4ee;
}

.industry-header {
  min-height: 390px;
  padding: 18px 24px 28px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.industry-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 22px;
  align-items: end;
  max-width: 1220px;
  margin: 74px auto 0;
}

.industry-hero h1 {
  max-width: 760px;
  margin-bottom: 12px;
  color: #ffffff;
  font-size: 48px;
}

.industry-hero p {
  max-width: 760px;
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.7;
}

.daily-panel {
  min-height: 168px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px);
}

.daily-panel span,
.daily-panel p {
  color: rgba(255, 255, 255, 0.78);
}

.daily-panel strong {
  display: block;
  margin: 10px 0;
  color: #ffffff;
  font-size: 54px;
  line-height: 1;
}

.header-search {
  max-width: 1220px;
  margin: 24px auto 0;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.14);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border-right: 1px solid var(--line);
  background: #fffefa;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #33a315;
  color: #fff;
  font-weight: 800;
}

.brand strong,
.brand span {
  display: block;
}

.brand span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.sidebar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.sidebar-search input {
  border: 0;
  padding: 0;
  min-width: 0;
  background: transparent;
  box-shadow: none;
}

.sidebar-search input:focus {
  box-shadow: none;
}

.industry-list {
  display: grid;
  gap: 6px;
  overflow: auto;
  padding-right: 4px;
}

.industry-button {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  min-height: 58px;
  border-radius: 8px;
  color: #223036;
  background: transparent;
  text-align: left;
}

.industry-button:hover,
.industry-button.active {
  background: color-mix(in srgb, var(--accent) 11%, #fffefa);
}

.industry-button.active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, #dedbd1);
}

.accent-dot {
  width: 10px;
  height: 30px;
  border-radius: 99px;
  background: var(--accent);
}

.industry-button strong,
.industry-button small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.industry-button small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.workspace {
  min-width: 0;
  padding: 22px;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
}

.eyebrow {
  margin: 0 0 6px;
  color: #64706b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 10px;
  font-size: 31px;
  line-height: 1.16;
}

h2 {
  margin-bottom: 0;
  font-size: 20px;
  line-height: 1.24;
}

h3 {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.32;
}

.role-line,
.workflow-pills,
.goal-grid,
.practice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.role-line span,
.workflow-pills span,
.goal-grid span,
.practice-row span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffefa;
  color: #405057;
  font-size: 12px;
  line-height: 1.2;
}

.status-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.status-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.status-ok {
  background: #e5f6ee;
  color: var(--ok);
}

.status-warn {
  background: #fff3d5;
  color: var(--warn);
}

.view-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefa;
}

.view-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 7px;
  color: #4d5b60;
  background: transparent;
  white-space: nowrap;
}

.view-tabs button.active {
  color: #fff;
  background: #172026;
}

.view-grid,
.library-page,
.scenario-layout,
.ai-layout,
.listening-layout,
.progress-layout {
  animation: settle 180ms ease-out;
}

@keyframes settle {
  from {
    opacity: 0.68;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.library-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 332px;
  align-items: start;
  gap: 16px;
}

.library-page {
  display: grid;
  gap: 16px;
}

.study-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 16px;
}

.word-focus,
.recall-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.word-focus {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  padding: 24px;
}

.word-focus::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  background: var(--accent);
}

.word-focus h2 {
  margin-top: 18px;
  margin-bottom: 8px;
  color: #10191d;
  font-size: 44px;
  line-height: 1.08;
}

.word-focus > strong {
  display: block;
  margin-bottom: 14px;
  color: color-mix(in srgb, var(--accent) 76%, #172026);
  font-size: 22px;
}

.word-focus > p {
  max-width: 720px;
  color: #405057;
  font-size: 16px;
  line-height: 1.65;
}

.word-focus .example-line {
  margin: 24px 0 14px;
  padding: 14px;
  border: 1px solid #ece8dc;
  border-radius: 8px;
  background: #fffefa;
  font-size: 15px;
}

.recall-panel {
  padding: 20px;
}

.recall-panel h3 {
  font-size: 28px;
}

.recall-panel input {
  height: 46px;
  padding: 0 12px;
}

.metric-row,
.section-head,
.term-grid {
  grid-column: 1;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px;
}

.metric-card {
  min-height: 88px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.metric-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.metric-card strong {
  display: block;
  margin-top: 10px;
  font-size: 30px;
  line-height: 1;
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  margin-bottom: 12px;
}

.section-head.compact {
  margin-top: 0;
  margin-bottom: 12px;
}

.term-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.term-card,
.quiz-panel,
.scenario-main,
.coach-panel,
.ai-form,
.generated-output,
.listening-form,
.preset-list,
.loop-board,
.progress-columns > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.term-card {
  display: flex;
  flex-direction: column;
  min-height: 282px;
  padding: 14px;
}

.term-card.mastered {
  border-color: #98d3b4;
  background: #fbfffc;
}

.term-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.level,
.task {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.level {
  color: #2a8d10;
  background: #e6f5df;
}

.task {
  overflow: hidden;
  max-width: 150px;
  color: #6d4a00;
  background: #fff1c2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.term-card h3 {
  margin-bottom: 4px;
  color: #10191d;
  font-size: 19px;
}

.term-card > strong {
  margin-bottom: 10px;
  color: #396739;
}

.term-card p {
  color: #4f5d62;
  line-height: 1.56;
}

.example-line {
  margin-top: auto;
  padding: 10px 0;
  border-top: 1px solid #ece8dc;
  color: #39603d;
  font-size: 13px;
  line-height: 1.5;
}

.term-actions,
.button-row,
.voice-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-button,
.soft-button,
.primary,
.button-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  border-radius: 8px;
  font-weight: 800;
}

.icon-button {
  width: 36px;
  color: #44545a;
  background: #f1eee5;
}

.icon-button:hover,
.icon-button.active {
  color: #fff;
  background: #172026;
}

.soft-button,
.button-row button {
  padding: 8px 12px;
  color: #325635;
  background: #ece7db;
}

.primary {
  padding: 9px 14px;
  color: #fff;
  background: #33a315;
}

.quiz-panel {
  position: sticky;
  top: 18px;
  grid-column: 2;
  grid-row: 1 / span 4;
  padding: 16px;
}

.quiz-body span {
  display: inline-flex;
  margin-bottom: 10px;
  color: #7a5712;
  font-size: 12px;
  font-weight: 800;
}

.quiz-body input {
  height: 42px;
  padding: 0 12px;
}

.answer-box {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #dce7d7;
  border-radius: 8px;
  background: #f3fbf8;
}

.answer-box p {
  margin-bottom: 6px;
  color: #405057;
  font-size: 13px;
  line-height: 1.45;
}

.scenario-layout {
  display: grid;
  grid-template-columns: 206px minmax(0, 1fr) 326px;
  align-items: start;
  gap: 16px;
}

.scenario-list,
.preset-list {
  display: grid;
  gap: 8px;
}

.scenario-tab,
.preset-list button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px;
  border-radius: 8px;
  color: #34444a;
  background: #fffefa;
  text-align: left;
  box-shadow: inset 0 0 0 1px var(--line);
}

.scenario-tab.active,
.preset-list button:hover {
  color: #fff;
  background: #172026;
  box-shadow: none;
}

.scenario-main,
.coach-panel,
.ai-form,
.generated-output,
.listening-form,
.preset-list,
.progress-columns > div {
  padding: 16px;
}

.briefing-block {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 8px;
  background: #f2f7f0;
  color: #2f6124;
}

.briefing-block p {
  margin: 6px 0 0;
  line-height: 1.55;
}

.goal-grid {
  margin: 12px 0;
}

.dialogue-stream {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.dialogue-turn,
.compact-turn {
  max-width: 84%;
  padding: 11px 12px;
  border-radius: 8px;
  background: #f3efe5;
}

.dialogue-turn.alt {
  margin-left: auto;
  background: #ecf3e9;
}

.dialogue-turn span,
.compact-turn span {
  display: block;
  margin-bottom: 5px;
  color: #5c696e;
  font-size: 12px;
  font-weight: 800;
}

.dialogue-turn p,
.compact-turn p {
  margin: 0;
  line-height: 1.55;
}

.coach-input {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.coach-input textarea {
  min-height: 74px;
  padding: 10px;
}

.coach-input select {
  height: 42px;
  padding: 0 10px;
}

.coach-score {
  display: grid;
  gap: 14px;
}

.coach-score div {
  display: grid;
  gap: 6px;
}

.coach-score span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.coach-score strong {
  font-size: 24px;
}

meter {
  width: 100%;
  height: 10px;
}

.coach-score ul {
  display: grid;
  gap: 8px;
  padding-left: 18px;
  margin: 0;
  color: #546e57;
  line-height: 1.45;
}

.improved-line {
  padding: 12px;
  border-radius: 8px;
  background: #fff6db;
  color: #5f430c;
  line-height: 1.5;
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 220px;
  gap: 8px;
  color: #6d777a;
  text-align: center;
}

.empty-state.tall {
  min-height: 440px;
}

.ai-layout {
  display: grid;
  grid-template-columns: 408px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.form-grid {
  display: grid;
  gap: 12px;
}

label span {
  display: block;
  margin-bottom: 6px;
  color: #5a676c;
  font-size: 12px;
  font-weight: 800;
}

label input,
label select {
  height: 42px;
  padding: 0 10px;
}

.manual-box {
  margin-top: 12px;
  min-height: 260px;
  padding: 12px;
  line-height: 1.55;
}

.summary-text {
  color: #3f4f55;
  line-height: 1.58;
}

.mini-term-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(198px, 1fr));
  gap: 10px;
}

.mini-term {
  min-height: 138px;
  padding: 12px;
  border: 1px solid #e7e1d2;
  border-radius: 8px;
  background: #fffefa;
}

.mini-term strong,
.mini-term span {
  display: block;
}

.mini-term span {
  margin-top: 4px;
  color: #33a315;
  font-size: 13px;
  font-weight: 800;
}

.mini-term p {
  margin: 10px 0 0;
  color: #617d64;
  font-size: 13px;
  line-height: 1.48;
}

.text-audio {
  width: fit-content;
  min-height: 30px;
  margin-top: 10px;
  padding: 6px 9px;
  border-radius: 8px;
  color: #2e8b16;
  background: #e6f5df;
  font-size: 12px;
  font-weight: 900;
}

.generated-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}

.compact-turn {
  max-width: none;
  margin-bottom: 8px;
}

pre {
  min-height: 220px;
  overflow: auto;
  padding: 12px;
  border: 1px solid #e7e1d2;
  border-radius: 8px;
  background: #314632;
  color: #f4f0e6;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  line-height: 1.55;
  white-space: pre-wrap;
}

.practice-row {
  margin-top: 12px;
}

.listening-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

.voice-row {
  margin-bottom: 12px;
}

.voice-row select {
  max-width: 260px;
  height: 42px;
  padding: 0 10px;
}

.voice-row span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.listening-form textarea {
  min-height: 420px;
  padding: 12px;
  line-height: 1.6;
}

audio {
  width: 100%;
  margin-top: 12px;
}

.preset-list {
  position: sticky;
  top: 18px;
}

.progress-layout {
  display: grid;
  gap: 16px;
}

.progress-layout .metric-row {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.loop-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 10px;
  padding: 14px;
  overflow-x: auto;
}

.loop-step {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px;
  border-radius: 8px;
  background: #f4f0e7;
}

.loop-step span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  background: #33a315;
  font-weight: 900;
}

.progress-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
  gap: 16px;
}

.review-list,
.note-list {
  display: grid;
  gap: 10px;
}

.review-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #ece8dc;
}

.review-list span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

.note-list p {
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid #ece8dc;
  color: #536e56;
  line-height: 1.5;
}

.spin {
  animation: spin 900ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .library-grid,
  .study-stage,
  .scenario-layout,
  .ai-layout,
  .listening-layout,
  .progress-columns {
    grid-template-columns: 1fr;
  }

  .quiz-panel,
  .preset-list {
    position: static;
    grid-column: auto;
    grid-row: auto;
  }

  .metric-row,
  .section-head,
  .term-grid {
    grid-column: auto;
  }

  .scenario-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .coach-input {
    grid-template-columns: 1fr;
  }

  .selector-copy {
    margin-left: 0;
    transform: none;
  }

  .industry-hero {
    grid-template-columns: 1fr;
  }

  .daily-panel {
    max-width: 320px;
  }
}

@media (max-width: 820px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    position: static;
    height: auto;
    max-height: 52vh;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .workspace {
    padding: 16px;
  }

  .selector-hero,
  .industry-header {
    padding: 16px;
  }

  .selector-nav,
  .site-nav,
  .topbar,
  .section-head {
    display: grid;
    justify-content: stretch;
  }

  .selector-copy {
    margin-top: 58px;
  }

  .selector-copy h1,
  .industry-hero h1 {
    font-size: 36px;
  }

  .selector-body {
    padding: 0 16px 34px;
  }

  .nav-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .status-strip {
    justify-content: flex-start;
  }

  .metric-row,
  .progress-layout .metric-row,
  .generated-split,
  .loop-board {
    grid-template-columns: 1fr 1fr;
  }

  h1 {
    font-size: 26px;
  }

  .dialogue-turn {
    max-width: 100%;
  }
}

@media (max-width: 540px) {
  .workspace {
    padding: 12px;
  }

  .metric-row,
  .progress-layout .metric-row,
  .generated-split,
  .scenario-list,
  .loop-board {
    grid-template-columns: 1fr;
  }

  .term-grid,
  .mini-term-grid {
    grid-template-columns: 1fr;
  }

  .view-tabs button {
    min-width: 112px;
  }

  .selector-copy h1,
  .industry-hero h1,
  .word-focus h2 {
    font-size: 31px;
  }

  .industry-stats {
    grid-template-columns: 1fr;
  }

  .role-line span,
  .workflow-pills span,
  .goal-grid span,
  .practice-row span {
    max-width: 100%;
  }
}

/* === Goals view === */
.goals-layout {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  max-width: 1180px;
  margin: 0 auto;
}

.goals-intro {
  color: var(--muted);
  margin-top: 6px;
  max-width: 720px;
  line-height: 1.6;
}

.goal-grid-rich {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.goal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--accent, var(--brand));
}

.goal-card.flagship {
  background: linear-gradient(180deg, #ffffff, #fbf8f0);
}

.goal-card .goal-tag {
  align-self: flex-start;
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(51, 163, 21, 0.1);
  color: var(--brand-ink);
}

.goal-card.ai .goal-tag {
  background: rgba(55, 125, 255, 0.12);
  color: #224a9b;
}

.goal-card h3 {
  margin: 0;
  font-size: 20px;
  color: var(--ink);
  line-height: 1.35;
}

.goal-card .english-title {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.goal-card .goal-summary {
  margin: 0;
  color: var(--ink);
  line-height: 1.6;
  font-size: 14px;
}

.goal-outcomes {
  margin: 4px 0 0;
  padding-left: 18px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.goal-step-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.step-pill {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  color: var(--ink);
}

.step-pill.step-vocab {
  border-color: rgba(51, 163, 21, 0.4);
}
.step-pill.step-read {
  border-color: rgba(184, 121, 19, 0.4);
}
.step-pill.step-dialogue {
  border-color: rgba(55, 125, 255, 0.4);
}
.step-pill.step-produce {
  border-color: rgba(180, 35, 24, 0.4);
}

.goal-card .primary,
.goal-card .soft-button {
  margin-top: auto;
  background: var(--accent, var(--brand));
  color: #fff;
  border-radius: 10px;
  padding: 11px 16px;
  font-weight: 600;
}

.goal-card .soft-button {
  background: var(--panel-soft);
  color: var(--ink);
  border: 1px solid var(--line);
  font-weight: 500;
}

/* === Goal detail === */
.goal-detail {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.goal-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.goal-detail .source-tag {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(51, 163, 21, 0.1);
  color: var(--brand-ink);
}

.goal-detail-hero {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  border-left: 5px solid var(--accent, var(--brand));
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.goal-detail-hero h2 {
  margin: 0;
  font-size: 26px;
  color: var(--ink);
}

.goal-detail-hero .english-title {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.goal-detail-hero .goal-summary {
  margin: 0;
  line-height: 1.7;
  color: var(--ink);
}

.goal-stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.goal-step-block {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  box-shadow: var(--shadow);
  position: relative;
}

.goal-step-block::before {
  content: "";
  position: absolute;
  left: 22px;
  top: -18px;
  bottom: -18px;
  width: 2px;
  background: var(--line);
}

.goal-step-block:first-child::before {
  top: 22px;
}

.goal-step-block:last-child::before {
  bottom: 22px;
}

.step-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 1;
}

.step-marker span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent, var(--brand));
  color: #fff;
  font-weight: 700;
}

.step-marker strong {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.step-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step-body h3 {
  margin: 0;
  font-size: 18px;
  color: var(--ink);
}

.step-brief {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

.mini-term.mastered {
  border-color: rgba(20, 122, 77, 0.45);
  background: rgba(20, 122, 77, 0.05);
}

.mini-term-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.read-block {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 16px;
}

.read-text {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.read-text p {
  margin: 0;
  line-height: 1.7;
  color: var(--ink);
  font-family:
    "SF Mono", ui-monospace, Menlo, Consolas, "PingFang SC", monospace;
  font-size: 14px;
  white-space: pre-wrap;
}

.read-questions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.read-q {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}

.read-q .q-ask {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.read-q .q-answer {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: var(--panel-soft);
  border-radius: 8px;
  color: var(--ink);
  line-height: 1.6;
  font-size: 14px;
}

.read-q .q-answer.placeholder {
  color: var(--muted);
  font-style: italic;
}

.dialogue-preview {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.briefing-block.compact {
  padding: 10px 14px;
  gap: 10px;
}

.produce-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.structure-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.structure-pills span {
  padding: 4px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  font-size: 12px;
  color: var(--muted);
  background: var(--panel-soft);
}

.sample-block {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink);
}

.sample-block summary {
  cursor: pointer;
  color: var(--brand-ink);
  font-weight: 600;
}

.sample-block pre {
  white-space: pre-wrap;
  font-family:
    "SF Mono", ui-monospace, Menlo, Consolas, "PingFang SC", monospace;
  font-size: 13px;
  margin: 10px 0 0;
  color: var(--ink);
  line-height: 1.6;
}

.produce-input {
  min-height: 180px;
  padding: 14px;
  border-radius: 10px;
  font-family:
    "SF Mono", ui-monospace, Menlo, Consolas, "PingFang SC", monospace;
  line-height: 1.6;
}

.rubric-block {
  background: var(--panel-soft);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--ink);
}

.rubric-block .eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.rubric-block ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.writing-result {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.writing-score-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.writing-score-grid > div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.writing-score-grid span {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.writing-score-grid strong {
  font-size: 18px;
  color: var(--ink);
}

.writing-feedback {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.revised-block {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
}

.revised-block summary {
  cursor: pointer;
  color: var(--brand-ink);
  font-weight: 600;
}

.revised-block pre {
  white-space: pre-wrap;
  font-family:
    "SF Mono", ui-monospace, Menlo, Consolas, "PingFang SC", monospace;
  font-size: 13px;
  margin: 10px 0 0;
  line-height: 1.6;
}

.empty-inline {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  background: var(--panel-soft);
  border: 1px dashed var(--line);
  padding: 10px 14px;
  border-radius: 10px;
}

@media (max-width: 1024px) {
  .goal-grid-rich {
    grid-template-columns: 1fr;
  }

  .goal-step-block {
    grid-template-columns: 1fr;
  }

  .goal-step-block::before {
    display: none;
  }

  .read-block {
    grid-template-columns: 1fr;
  }
}

/* =================================================================
   通用首页 + 入门测评 (home / onboarding / study placeholder)
   ================================================================= */

.home-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 28px 80px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
/* Home page (profile-summary or empty-home hero) fills wide screens better —
   widen the cap so big monitors show much less dead side-margin. Scoped via
   :has() to the home shell ONLY; course / me / account / vy shells keep their
   own widths. The ≤760px override below still removes the cap on mobile. */
.home-shell:has(.profile-summary),
.home-shell:has(> .home-hero) {
  max-width: 1440px;
}
/* Empty / bank-picker home is short content. On tall screens, fill the viewport
   and vertically center the hero + grid so leftover space is balanced top &
   bottom instead of dumped as a big void below the cards. If the grid is taller
   than the viewport the auto-margins collapse and it scrolls normally. Desktop
   only — at ≤760px the hero/picker are hidden in favour of the mobile shell. */
.home-shell:has(> .home-hero) {
  min-height: 100vh;
  box-sizing: border-box;
}
.home-shell:has(> .home-hero) > .home-hero { margin-top: auto; }
.home-shell:has(> .home-hero) > .bank-picker { margin-bottom: auto; }
.home-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}
.home-nav-right {
  display: flex;
  gap: 10px;
}

.home-nav .brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: inherit;
}
.home-nav .brand-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4be619, #33a315);
  box-shadow: 0 0 0 3px rgba(51, 163, 21, 0.12);
}
.home-nav .brand-name {
  font-size: 18px;
  color: var(--brand-ink);
}

.btn-primary,
.btn-ghost,
.btn-link,
.btn-text,
.btn-ghost-light {
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  padding: 10px 20px;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover { background: var(--brand-ink); }
.btn-primary:disabled { background: #b8c0bf; cursor: not-allowed; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-ink); }
.btn-ghost-light {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.28); }
.btn-link {
  background: transparent;
  color: var(--brand-ink);
  padding: 10px 12px;
  font-weight: 500;
}
.btn-link:hover { text-decoration: underline; }
.btn-text {
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 8px 4px;
}
.btn-text:hover { color: var(--ink); }
.btn-lg { padding: 14px 28px; font-size: 15px; }

.home-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 40px 0 8px;
}
.home-tag {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--brand-ink);
  background: rgba(51, 163, 21, 0.08);
  padding: 6px 14px;
  border-radius: 999px;
}
.home-hero h1 {
  font-size: 52px;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--ink);
}
.home-hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, #33a315 30%, #4be619 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.home-sub {
  font-size: 17px;
  color: var(--muted);
  max-width: 640px;
  line-height: 1.65;
  margin: 0;
}
.home-cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.home-cta-row.big { margin-top: -32px; }

.home-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.home-features.compact .feat { padding: 18px 18px; }
.feat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.feat:hover { transform: translateY(-3px); border-color: var(--brand); }
.feat-tag {
  display: inline-block;
  width: fit-content;
  background: rgba(51, 163, 21, 0.1);
  color: var(--brand-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 8px;
}
.feat h3 { margin: 0; font-size: 18px; color: var(--ink); }
.feat p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
/* 首页「单词表 / 阅读挑战」= 与「调整每日目标」(btn-lg 15px / 14px padding) 字号、框高一致 */
.home-features.compact .feat-btn { padding: 14px 18px; display: flex; align-items: center; justify-content: center; min-height: 0; }
.home-features.compact .feat-btn .feat-tag { background: transparent; padding: 0; border-radius: 0; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: 0; }

.home-rationale {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-rationale h2 { margin: 0; font-size: 22px; color: var(--brand-ink); }
.home-rationale p { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.7; max-width: 760px; }
.home-rationale strong { color: var(--brand-ink); }

.profile-summary { display: flex; flex-direction: column; gap: 8px; }
.profile-summary h1 { font-size: 36px; margin: 0; font-weight: 700; }
.profile-sub { margin: 0 0 12px; color: var(--muted); font-size: 15px; }
.profile-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 12px;
}
.pcard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow);
}
.pcard span { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.pcard strong { font-size: 26px; color: var(--brand-ink); font-weight: 700; }
.pcard em { font-style: normal; font-size: 12px; color: var(--muted); }

.profile-cards.compact-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 560px;
}

/* —— 每日连续打卡 + 目标环 (home today strip) —— */
.today-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 4px 0 14px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,142,60,0.10), rgba(255,196,120,0.06));
  box-shadow: var(--shadow);
}
.today-streak {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 18px;
  border-right: 1px solid var(--line);
}
/* 今日三环卡（单词 / 互译 / 造句，借鉴手表健康 App） */
.rings-card { background: transparent; border: 0; border-radius: 0; padding: 4px 6px 0; margin: 0 0 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rings-wrap { width: 150px; height: 150px; }
.rings-svg { display: block; width: 100%; height: 100%; }
.rings-svg .ar-track { fill: none; opacity: .16; stroke-linecap: round; }
.rings-svg .ar-fill { fill: none; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.rings-stats { display: flex; width: 100%; }
.rings-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; position: relative; }
.rings-stat + .rings-stat::before { content: ""; position: absolute; left: 0; top: 18%; height: 64%; width: 1px; background: var(--line, #eef0f3); }
.rings-stat .rs-top { font-size: 12.5px; color: var(--muted, #69757a); display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.rings-stat .rs-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.rings-stat .rs-line { display: inline-flex; align-items: baseline; gap: 3px; }
.rings-stat .rs-num { font-size: 23px; font-weight: 800; color: var(--ink, #101820); line-height: 1.1; }
.rings-stat .rs-goal { font-size: 11.5px; color: var(--muted, #9aa3aa); }
.today-streak .ts-flame { display: inline-flex; }
.today-streak .ts-flame .bank-ic { width: 27px; height: 27px; stroke: #c3c7cc; fill: none; transition: stroke .2s; }
.today-streak.on .ts-flame .bank-ic { stroke: #e8730f; fill: #fde2c4; animation: ts-flicker 2.2s ease-in-out infinite; }
.today-streak .ts-body { display: flex; flex-direction: column; line-height: 1.1; }
.today-streak .ts-body strong { font-size: 28px; font-weight: 800; color: #e8730f; }
.today-streak .ts-body em { font-style: normal; font-size: 12px; color: var(--muted); }
@keyframes ts-flicker { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.today-goal { position: relative; width: 62px; height: 62px; flex: none; }
.today-goal .goal-ring { transform: rotate(-90deg); }
.today-goal .gr-track { fill: none; stroke: var(--line); stroke-width: 7; }
.today-goal .gr-fill {
  fill: none; stroke: #ff8e3c; stroke-width: 7; stroke-linecap: round;
  transition: stroke-dashoffset .5s ease;
}
.today-goal.done .gr-fill { stroke: #29c06a; }
.today-goal .goal-ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1;
}
.today-goal .goal-ring-center strong { font-size: 17px; font-weight: 800; color: var(--brand-ink); }
.today-goal .goal-ring-center span { font-size: 10px; color: var(--muted); }
.today-goal-cap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.today-goal-cap .tgc-title { font-size: 15px; font-weight: 700; color: var(--brand-ink); }
.today-goal-cap .tgc-sub { font-size: 12px; color: var(--muted); }
.today-strip.at-risk { background: linear-gradient(135deg, rgba(255,93,93,0.12), rgba(255,150,90,0.08)); border-color: rgba(255,120,90,0.4); }
.today-strip.at-risk .tgc-title { color: #d8472f; }
.me-profile-metrics .me-streak-val { color: #e8730f; }

/* Day-1 activation: first-run quick-start checklist */
.first-run-card { margin: 4px 0 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(135deg, rgba(255,142,60,0.12), rgba(255,93,177,0.07)); box-shadow: var(--shadow); }
.first-run-card .frc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.first-run-card .frc-emoji { font-size: 30px; flex: none; }
.first-run-card .frc-head strong { display: block; font-size: 16px; color: var(--brand-ink); }
.first-run-card .frc-head span { font-size: 12.5px; color: var(--muted); }
.frc-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.frc-step { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 13px; background: #fff; cursor: pointer; transition: transform .12s, box-shadow .15s, border-color .15s; text-align: left; }
.frc-step:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.07); }
.frc-step:active { transform: scale(.99); }
.frc-step.primary { background: linear-gradient(135deg, #ff8e3c, #ff5db1); border-color: transparent; }
.frc-num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; background: rgba(255,142,60,0.16); color: #e8730f; }
.frc-step.primary .frc-num { background: rgba(255,255,255,0.3); color: #fff; }
.frc-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.frc-copy b { font-size: 14.5px; color: var(--brand-ink); }
.frc-copy em { font-style: normal; font-size: 12px; color: var(--muted); margin-top: 2px; }
.frc-step.primary .frc-copy b, .frc-step.primary .frc-copy em { color: #fff; }
.frc-go { flex: none; font-size: 13px; font-weight: 800; color: var(--muted); }
.frc-step.primary .frc-go { color: #fff; font-size: 14px; }

/* —— 首页词库选择器 —— */
.home-hero.compact { padding-top: 32px; padding-bottom: 16px; }
.home-hero.compact h1 { font-size: 38px; line-height: 1.2; }
.bank-picker { padding: 0 0 64px; }
.bank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.bank-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 22px 22px 18px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.bank-card:hover:not([disabled]) {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: 0 10px 28px rgba(20, 122, 77, 0.16);
}

.bank-picker,
.home-tools,
.home-features,
.industry-card-grid,
.course-shell,
.rd-shell,
.podcast-shell {
  content-visibility: auto;
  contain-intrinsic-size: 720px;
}

.loading-shell {
  min-height: 100vh;
  justify-content: center;
}

.mobile-app-home {
  display: none;
}

.mobile-topbar,
.mobile-bottom-nav,
.mobile-page-tabs,
.mobile-swipe-pages,
.mobile-chip-grid {
  letter-spacing: 0;
}

.mobile-screen {
  display: none;
}

.mobile-screen.is-active {
  display: block;
}

.mobile-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px 10px;
}

.mobile-topbar > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.mobile-kicker {
  color: #6a7378;
  font-size: 12px;
  font-weight: 800;
}

.mobile-topbar strong {
  color: #101820;
  font-size: 24px;
  line-height: 1.15;
}

.mobile-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #101820;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
}

.mobile-page-tabs {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 12px 18px 8px;
  scrollbar-width: none;
}

.mobile-page-tabs::-webkit-scrollbar,
.mobile-swipe-pages::-webkit-scrollbar {
  display: none;
}

.mobile-page-tabs button {
  position: relative;
  flex: 0 0 auto;
  padding: 0 0 8px;
  background: transparent;
  color: #7d8589;
  font-size: 18px;
  font-weight: 900;
}

.mobile-page-tabs button.is-active {
  color: #101820;
}

.mobile-page-tabs button.is-active::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 4px;
  border-radius: 999px;
  background: #41d716;
}

.mobile-swipe-pages {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.mobile-swipe-page {
  min-width: 0;
  scroll-snap-align: start;
  padding: 12px 18px 110px;
}

.mobile-screen-panel {
  padding: 12px 18px 110px;
}

.mobile-today-card,
.mobile-feature-card {
  width: 100%;
  min-height: 154px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 18px;
  border: 1px solid #e8ecef;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.82), rgba(243, 248, 240, 0.72)),
    url("/data/book-covers/thinking-fast-and-slow.jpg");
  background-position: center;
  background-size: cover;
  box-shadow: 0 12px 28px rgba(16, 24, 32, 0.08);
  color: #101820;
  text-align: left;
}

.mobile-today-card.industry {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.86), rgba(245,249,252,0.76)),
    url("/data/course/covers/pulse-5.png");
  background-position: center;
  background-size: cover;
}

.mobile-today-card span,
.mobile-feature-card span {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(65, 215, 22, 0.12);
  color: #25930a;
  font-size: 12px;
  font-weight: 900;
}

.mobile-today-card strong,
.mobile-feature-card strong {
  font-size: 24px;
  line-height: 1.18;
}

.mobile-today-card p,
.mobile-feature-card p {
  margin: 0;
  max-width: 280px;
  color: #536168;
  font-size: 13px;
  line-height: 1.5;
}

.mobile-primary {
  width: fit-content;
  min-height: 38px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #101820;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
}

.mobile-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.mobile-quick-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.mobile-mini-tool {
  min-height: 112px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 14px;
  border: 1px solid #e7ecef;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f9fbf7);
  color: #101820;
  text-align: left;
  box-shadow: 0 8px 22px rgba(16, 24, 32, 0.06);
}

.mobile-mini-tool span {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: #f1f7ee;
  color: #28950c;
  font-size: 16px;
}

.mobile-mini-tool strong {
  min-width: 0;
  font-size: 16px;
  line-height: 1.2;
  color: #111b22;
}

.mobile-mini-tool em {
  min-width: 0;
  color: #69757a;
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.mobile-course-chip {
  min-height: 112px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 14px;
  border: 1px solid #e7ecef;
  border-radius: 8px;
  background: #ffffff;
  color: #101820;
  text-align: left;
  box-shadow: 0 8px 22px rgba(16, 24, 32, 0.06);
}

.mobile-course-chip span {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: #f1f7ee;
  color: #28950c;
  font-size: 15px;
  font-weight: 900;
}

.mobile-course-chip strong {
  min-width: 0;
  color: #111b22;
  font-size: 16px;
  line-height: 1.25;
}

.mobile-course-chip em {
  min-width: 0;
  color: #69757a;
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

/* 2-line home chips (首页词库/行业卡)：图标一行 + 名称(含同行词量)一行 */
.mobile-course-chip.chip-2line { min-height: 88px; }
.mobile-course-chip.chip-2line strong {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.mobile-course-chip.chip-2line strong i.chip-size {
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  color: #69757a;
  white-space: nowrap;
}
.mobile-course-chip.chip-2line.mobile-series-head strong i.chip-size { color: #2563eb; }

.mobile-feature-card {
  min-height: 420px;
  align-content: end;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.92) 64%),
    url("/data/reading-corpus/assets/covers/dd39faa0617bc200a2892f7ba8d4a14f.jpg");
  background-position: center;
  background-size: cover;
}

.mobile-feature-card.comics {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.92) 64%),
    url("/data/reading-corpus/assets/covers/330f13d45d3a9aa4c608481f9f4e42b6.png");
  background-position: center;
  background-size: cover;
}

.mobile-feature-card.podcast {
  min-height: 340px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.94) 68%),
    url("/data/book-covers/thinking-fast-and-slow.jpg");
  background-position: center;
  background-size: cover;
}

.mobile-feature-card.course {
  min-height: 340px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.94) 68%),
    url("/data/course/covers/pulse-5.png");
  background-position: center;
  background-size: cover;
}

.mobile-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5000;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
  border-top: 1px solid #e7ecef;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px);
  box-shadow: 0 -10px 26px rgba(16, 24, 32, 0.08);
}

.mobile-bottom-nav button {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 4px 0;
  background: transparent;
  color: #9aa3a7;
  touch-action: manipulation;
}

.mobile-bottom-nav span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1.5px solid currentColor;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.mobile-bottom-nav em {
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.mobile-bottom-nav button.is-active {
  color: #101820;
}
.bank-card:active:not([disabled]) { transform: translateY(-1px); }
.bank-card[disabled],
.bank-card.not-ready {
  cursor: not-allowed;
  opacity: 0.55;
}
.bank-emoji { font-size: 32px; line-height: 1; }
/* 手绘词库图标（替代 emoji）：在各处图标容器里按容器尺寸缩放、继承容器颜色 */
.bank-ic { width: 1.05em; height: 1.05em; display: block; color: inherit; }
.mobile-course-chip span .bank-ic { width: 20px; height: 20px; }
.prof-book-emoji .bank-ic { width: 26px; height: 26px; color: #28950c; }
.prof-series-emoji .bank-ic { width: 24px; height: 24px; color: #28950c; vertical-align: middle; }
.bank-emoji .bank-ic { width: 32px; height: 32px; color: var(--brand-ink); }
.industry-card-simple .bank-emoji .bank-ic { width: 26px; height: 26px; }
.bank-name { font-size: 22px; font-weight: 700; color: var(--brand-ink); }
.bank-en { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; }
.bank-desc { font-size: 14px; color: var(--ink); margin-top: 2px; }
.bank-meta {
  font-size: 12px;
  color: var(--ok);
  margin-top: 6px;
  font-weight: 600;
}
.bank-card.not-ready .bank-meta { color: var(--muted); }

/* —— 行业方向 picker —— */
.brand-tag {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(20, 122, 77, 0.12);
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
}
.industry-card-simple {
  /* 比通用词库卡片更紧凑些（emoji 大一点）*/
}
.industry-summary {
  border-left: 5px solid var(--accent, var(--brand));
  padding-left: 16px;
  margin-bottom: 24px;
}
.industry-subs h3 {
  margin: 32px 0 14px;
  font-size: 16px;
  color: var(--muted);
  font-weight: 600;
}
.sub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.sub-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 18px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.sub-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 6px 18px rgba(20, 122, 77, 0.12);
}
.sub-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.sub-count { font-size: 12px; color: var(--muted); }

/* ============================================ */
/*           朝夕说 · Voyage 教材库              */
/* ============================================ */
.vy-shell { padding-bottom: 80px; }
.vy-hero { text-align: center; padding: 32px 0 24px; }
.vy-hero h1 { margin: 0 0 8px; font-size: 36px; }
.vy-hero-sub { color: var(--muted); font-size: 15px; }
.vy-library-filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.vy-library-filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(20, 122, 77, 0.18);
  background: rgba(20, 122, 77, 0.08);
  color: var(--brand-ink);
  font-size: 13px;
  font-weight: 700;
}
.vy-library-filter-reset {
  min-height: 38px;
}
.vy-series-jump-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.vy-series-pill {
  border: 1px solid rgba(20, 122, 77, 0.18);
  background: rgba(20, 122, 77, 0.08);
  color: var(--brand-ink);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.vy-series-pill:hover {
  transform: translateY(-1px);
  background: rgba(20, 122, 77, 0.14);
  border-color: rgba(20, 122, 77, 0.35);
}

.vy-library {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
}
.vy-book-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  padding: 20px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  align-items: stretch;
}
.vy-book-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 8px 22px rgba(20, 122, 77, 0.12);
}
.vy-cover {
  width: 100%; height: 280px; object-fit: cover;
  border-radius: 14px;
  display: block;
}
.vy-cover-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800; color: rgba(255,255,255,0.85);
  letter-spacing: 0.04em;
}
.vy-book-info { display: flex; flex-direction: column; gap: 8px; padding: 4px 4px 4px 0; }
.vy-book-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.vy-level {
  display: inline-block;
  padding: 3px 12px;
  background: var(--brand);
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 999px;
}
.vy-subtitle { font-size: 14px; color: var(--muted); }
.vy-book-info h2 { margin: 4px 0 0; font-size: 30px; font-weight: 800; color: var(--ink); }
.vy-desc { color: var(--ink); font-size: 14px; line-height: 1.55; margin: 4px 0 8px; }
.vy-stats { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0; }
.vy-stat { font-size: 13px; color: var(--muted); }
.vy-stat strong { color: var(--brand-ink); font-weight: 700; }
.vy-stat.vy-cert a { color: var(--brand); text-decoration: underline; cursor: pointer; }
.vy-enter { align-self: flex-start; padding: 10px 22px; font-size: 15px; }

/* —— Book 页（16 单元卡片）—— */
.vy-book-hero {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 16px auto 28px;
  padding: 18px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  border-left: 5px solid var(--book-color, var(--brand));
  align-items: center;
}
.vy-book-hero-cover {
  width: 100%; height: 220px; object-fit: cover; border-radius: 12px;
}
.vy-book-hero-text h1 { margin: 4px 0 8px; font-size: 28px; }

.vy-units {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}
/* 单元列表：一个单元一行(横向,显示单元主题),独立 class 避开旧 .vy-units 三列网格(2026-06-20) */
.vyr-list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin: 0 auto; padding: 6px 16px 0; }
.vyr-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--panel); border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s; }
.vyr-item:hover:not(.not-ready):not(.locked) { border-color: var(--brand); box-shadow: 0 4px 14px rgba(20,122,77,.08); }
.vyr-item:active:not(.not-ready):not(.locked) { transform: scale(.995); }
.vyr-num { flex: none; width: 40px; font-size: 22px; font-weight: 800; color: var(--brand); text-align: center; line-height: 1; }
.vyr-main { flex: 1; min-width: 0; }
.vyr-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.vyr-zh { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vyr-status { flex: none; font-size: 12.5px; font-weight: 700; color: var(--brand); white-space: nowrap; }
.vyr-go { flex: none; color: #c4c9d0; font-size: 20px; font-weight: 700; line-height: 1; }
.vyr-item.complete { border-color: var(--ok); background: rgba(20,122,77,.04); }
.vyr-item.complete .vyr-status { color: var(--ok); }
.vyr-item.not-ready { opacity: .5; cursor: not-allowed; }
.vyr-item.not-ready .vyr-status, .vyr-item.locked .vyr-status { color: #94a3b8; }
.vyr-item.locked { opacity: .6; cursor: not-allowed; background: repeating-linear-gradient(135deg, rgba(120,120,120,.04) 0 10px, rgba(120,120,120,.08) 10px 20px); }
.vy-unit-card {
  display: grid;
  grid-template-columns: 50px 1fr 28px;
  gap: 12px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  align-items: center;
  transition: all 0.15s ease;
}
.vy-unit-card:hover:not(.not-ready) {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 6px 16px rgba(20,122,77,0.1);
}
.vy-unit-card.not-ready { opacity: 0.45; cursor: not-allowed; }
.vy-unit-card.complete { border-color: var(--ok); background: rgba(20,122,77,0.04); }
/* 线上锁定单元：可见但置灰，点击给提示 */
.vy-unit-card.locked { opacity: 0.55; cursor: not-allowed; background: repeating-linear-gradient(135deg, rgba(120,120,120,.04) 0 10px, rgba(120,120,120,.08) 10px 20px); }
.vy-unit-card.locked .vy-unit-status { color: #94a3b8; font-weight: 800; }
.vy-unit-card.locked:hover { transform: none; box-shadow: none; }
.vy-lock-toast { position: fixed; left: 50%; bottom: 86px; transform: translateX(-50%) translateY(12px); background: rgba(17,24,39,.94); color: #fff; padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.vy-lock-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.blink-trial-toast { position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%) translateY(12px); background: rgba(17,24,39,.94); color: #fff; padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.blink-trial-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.vy-unit-num { font-size: 24px; font-weight: 800; color: var(--brand); text-align: center; }
.vy-unit-body h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.vy-unit-zh { margin: 2px 0 6px; font-size: 13px; color: var(--muted); }
.vy-unit-progress { display: flex; gap: 4px; align-items: center; }
.vy-mod-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  font-size: 12px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  color: var(--muted);
  opacity: 0.55;
}
.vy-mod-dot.done { background: var(--ok); color: white; opacity: 1; }
.vy-mod-counter { margin-left: 6px; font-size: 11px; color: var(--muted); }
.vy-unit-cta { font-size: 18px; color: var(--brand); text-align: center; font-weight: 700; }
.vy-unit-card.complete .vy-unit-cta { color: var(--ok); }

/* —— Unit 详情（侧栏 + 当前模块）—— */
.vy-unit-shell { max-width: 1200px; margin: 0 auto; }
.vy-unit-head { padding: 16px 20px 8px; }
.vy-unit-head h1 { margin: 4px 0; font-size: 26px; }
.vy-unit-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  padding: 0 16px;
}
.vy-unit-sidebar {
  display: flex; flex-direction: column; gap: 8px;
  position: sticky; top: 16px; align-self: start;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.vy-mod-nav {
  display: grid;
  grid-template-columns: 28px 1fr 18px;
  gap: 8px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  transition: all 0.12s ease;
  align-items: center;
}
.vy-mod-nav:hover { border-color: var(--brand); }
.vy-mod-nav.active { background: var(--brand); color: white; border-color: var(--brand); }
.vy-mod-nav.done:not(.active) { background: rgba(20,122,77,0.05); border-color: rgba(20,122,77,0.4); }
.vy-mod-nav.done .vy-mod-check { color: var(--ok); font-weight: 800; }
.vy-mod-nav.active.done .vy-mod-check { color: white; }
.vy-mod-icon { font-size: 18px; }
.vy-mod-name { font-size: 14px; font-weight: 600; }

.vy-unit-pane {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 20px 24px;
  min-height: 60vh;
}
.vy-tag {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(20,122,77,0.12);
  color: var(--brand);
  font-size: 11px;
  letter-spacing: 0.05em;
  font-weight: 700;
  border-radius: 999px;
  margin-bottom: 6px;
}
.vy-unit-pane header h3 { margin: 0; font-size: 22px; }
.vy-unit-pane .vy-name-zh { font-weight: 400; font-size: 15px; color: var(--muted); margin-left: 6px; }
.vy-unit-pane h4 { margin: 18px 0 8px; font-size: 14px; color: var(--muted); letter-spacing: 0.04em; }
.vy-explain { padding: 12px 14px; background: rgba(0,0,0,0.03); border-radius: 10px; font-size: 14px; line-height: 1.6; color: var(--ink); }
.vy-mod-actions { margin-top: 28px; display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }

/* dialogue, lines */
.vy-dialogue { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px dashed var(--line); }
.vy-scene { font-style: italic; color: var(--muted); margin: 4px 0 12px; }
.vy-lines { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.vy-line { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; padding: 8px 12px; border-radius: 10px; }
.vy-line:hover { background: rgba(0,0,0,0.02); }
.vy-line-play, .vy-listen-big {
  background: var(--brand); color: white; border: none; border-radius: 50%;
  width: 28px; height: 28px; cursor: pointer; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.vy-listen-big { width: auto; height: auto; padding: 10px 22px; border-radius: 999px; font-size: 14px; }
.vy-line-speaker { display: inline-block; font-size: 11px; color: var(--muted); font-weight: 700; }
.vy-line-en { margin: 2px 0 0; font-size: 15px; color: var(--ink); }
.vy-line-zh { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

/* mcq */
.vy-mcq { margin: 16px 0; padding: 12px 14px; background: rgba(0,0,0,0.02); border-radius: 10px; }
.vy-q { margin: 0 0 4px; font-weight: 600; color: var(--ink); }
.vy-q-zh { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.vy-mcq-options { display: flex; flex-direction: column; gap: 6px; }
.vy-opt { display: flex; gap: 6px; padding: 6px 10px; border-radius: 8px; cursor: pointer; align-items: center; font-size: 14px; }
.vy-opt:hover { background: rgba(0,0,0,0.04); }
.vy-mcq-result { margin: 6px 0 0; font-size: 13px; }
.vy-mcq-result.ok { color: var(--ok); }
.vy-mcq-result.no { color: var(--danger); }

/* grammar drills */
.vy-drills { padding-left: 22px; }
.vy-drills li { margin-bottom: 12px; }
.vy-drill-input { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; min-width: 200px; }
.vy-drill-result { margin-left: 8px; font-weight: 700; }
.vy-drill-result.ok { color: var(--ok); }
.vy-drill-result.no { color: var(--danger); font-size: 12px; font-weight: 500; }
.vy-grammar-example { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: rgba(20,122,77,0.05); border-radius: 10px; }

/* pron */
.vy-pron-drills { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.vy-pron-drills li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); }
.vy-pron-text { font-size: 15px; color: var(--ink); }

/* interactive */
.vy-task-prompt { padding: 14px 18px; background: rgba(255,196,0,0.08); border-radius: 12px; border-left: 4px solid #f59e0b; margin: 10px 0; }
.vy-prompt-en { margin: 0 0 4px; font-weight: 600; }
.vy-prompt-zh { margin: 0; color: var(--muted); }
.vy-tips { padding-left: 22px; font-size: 14px; color: var(--ink); line-height: 1.6; }
/* Cambridge-aligned: per-cycle separator + empty state + Workbook (练习册) */
.vy-cycle-sep { border: none; border-top: 2px dashed var(--line); margin: 22px 0; }
.vy-empty { color: var(--muted); padding: 18px; text-align: center; }
.vy-wb-ex { margin-bottom: 14px; }
.vy-wb-ex h3 { margin: 0 0 4px; font-size: 16px; }
.vy-wb-instr { color: var(--muted); font-size: 14px; margin: 0 0 10px; }
.vy-wb-passage { background: var(--panel-soft); border-left: 3px solid var(--brand, #3b82f6); padding: 10px 14px; border-radius: 8px; margin: 8px 0; line-height: 1.6; }
.vy-wb-items { padding-left: 20px; display: grid; gap: 12px; }
.vy-wb-item { line-height: 1.6; }
.vy-wb-prompt { margin-bottom: 4px; }
.vy-wb-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.vy-wb-opt { border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px; font-size: 13px; background: var(--panel-soft); }
.vy-wb-reveal { font-size: 12px; padding: 3px 10px; margin-top: 2px; }
.vy-wb-answer { margin-top: 6px; padding: 8px 12px; background: #ecfdf5; border-left: 3px solid #16a34a; border-radius: 6px; font-size: 14px; }
.vy-wb-answer.hidden { display: none; }

/* ===== Workbook V2 — Cambridge Passages-grade, fully interactive ===== */
.vy-wbx-section {
  max-width: 880px; margin: 0 auto;
  --wb-ink: #1f2430; --wb-slate: #2b3340; --wb-rule: #d9dde3;
  --wb-accent: #c0392b;            /* Passages red */
  color: var(--wb-ink);
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.vy-wbx-section .vy-section-head h1 { font-weight: 800; letter-spacing: -.01em; }

/* —— Lesson banner (Cambridge dark angled header) —— */
.vy-wbx-lesson { margin: 0 0 40px; }
.vy-wbx-lesson-head {
  display: flex; align-items: stretch; gap: 0; margin: 8px 0 0;
  height: 84px;                     /* 固定高度 → Lesson A/B 头部框完全等高，与标题长短无关 */
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(31,36,48,.18);
}
.vy-wbx-lesson-tag {
  flex-shrink: 0; display: flex; align-items: center;
  font-weight: 800; font-size: 13px; letter-spacing: .12em;
  background: var(--wb-accent); color: #fff; padding: 0 16px;
}
.vy-wbx-lesson-text {
  flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: linear-gradient(100deg, #2b3340 0%, #3a4554 100%);
  color: #fff; padding: 13px 18px;
}
/* 顶部 Lesson A / Lesson B 选择按钮（替代"练习册"标题） */
.vy-wb-ltabs { flex: 1; min-width: 0; display: flex; justify-content: center; gap: 8px; }
.vy-wb-ltab {
  border: 1px solid #e3e6ea; background: #fff; color: #5b6670;
  font-size: 13.5px; font-weight: 700; padding: 7px 17px; border-radius: 999px; cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.vy-wb-ltab.is-active { background: #c0392b; border-color: #c0392b; color: #fff; }
.vy-wbx-finish-hint { text-align: center; margin: 26px 0 8px; font-size: 14px; font-weight: 700; color: #1f8a55; }
.vy-wbx-lesson-arrow { color: var(--wb-accent); font-size: 15px; font-weight: 800; }
.vy-wbx-lesson-head h2 { margin: 0; font-size: 18px; line-height: 1.25; color: #fff; font-style: italic; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vy-wbx-lesson-zh { margin: 0; font-size: 13px; color: #c3cad4; font-style: normal; }

/* —— Exercise card —— */
.vy-wbx {
  background: #fff; border: none; border-radius: 0;
  padding: 22px 4px 22px; margin: 0;
  border-bottom: 1px solid var(--wb-rule);
}
.vy-wbx:last-of-type { border-bottom: none; }
.vy-wbx-head { margin-bottom: 14px; }

/* section line: [num tile] SECTION ──────── */
.vy-wbx-secline { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.vy-wbx-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
  background: linear-gradient(160deg, #3a4554, #232a35);
  color: #fff; font-weight: 800; font-family: Georgia, "Times New Roman", serif;
  font-size: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.2);
}
.vy-wbx-sec {
  flex-shrink: 0; font-size: 14px; font-weight: 800; letter-spacing: .11em;
  color: var(--wb-slate); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  padding-bottom: 2px; border-bottom: 2px solid var(--wb-accent);
}
.vy-wbx-part {
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  background: var(--wb-accent); color: #fff; border-radius: 4px; padding: 1px 6px;
}
.vy-wbx-rule { flex: 1; height: 1px; background: var(--wb-rule); }
/* per-section accent tint */
.vy-wbx-g { --wb-accent: #2563a8; }
.vy-wbx-v { --wb-accent: #1f8a55; }
.vy-wbx-r { --wb-accent: #c0392b; }
.vy-wbx-w { --wb-accent: #8e44ad; }

.vy-wbx-title { margin: 6px 0 3px; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--wb-ink); }
.vy-wbx-inst { margin: 2px 0; font-size: 14.5px; color: #3a4150; line-height: 1.55; }
.vy-wbx-inst-zh { margin: 2px 0; font-size: 13px; color: #8a909c; line-height: 1.5; }

/* —— Photos: polaroid frame, soft shadow, gentle tilt —— */
.vy-wbx-photo, .vy-wbx-hero, .vy-wbx-para-img {
  margin: 0 0 14px; background: #fff; padding: 7px 7px 6px;
  border: 1px solid #e7e3da; border-radius: 3px;
  box-shadow: 0 6px 18px rgba(31,36,48,.13);
  display: inline-block; max-width: 100%;
}
.vy-wbx-photo img, .vy-wbx-hero img, .vy-wbx-para-img img {
  display: block; width: 100%; border-radius: 1px; object-fit: cover;
}
.vy-wbx-photo figcaption, .vy-wbx-hero figcaption, .vy-wbx-para-img figcaption {
  font-size: 10.5px; color: #a9a299; padding: 5px 2px 1px; font-style: italic; text-align: right;
}
.vy-wbx-lesson-photo { display: block; margin: 18px auto 2px; transform: rotate(-1.2deg); }
.vy-wbx-lesson-photo img { max-height: 230px; }
.vy-wbx-hero { display: block; float: right; width: 250px; margin: 0 0 8px 16px; transform: rotate(1.4deg); }
.vy-wbx-hero img { max-height: 170px; }
.vy-wbx-para-img { float: right; width: 220px; margin: 2px 0 6px 16px; transform: rotate(-1.5deg); }
.vy-wbx-para-img img { max-height: 150px; }

/* —— answer rows —— */
.vy-wbx-rows { display: flex; flex-direction: column; gap: 2px; }
.vy-wbx-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 11px; border-radius: 9px; border: 1px solid transparent;
  transition: background .12s;
}
.vy-wbx-row:hover { background: #fafbfc; }
.vy-wbx-row.ok { background: #f1faf4; border-color: #c7ead5; }
.vy-wbx-row.no { background: #fdf3f2; border-color: #f3cdc9; }
.vy-wbx-term { flex: 1 1 200px; font-size: 15.5px; min-width: 160px; line-height: 1.5; }
.vy-wbx-term strong { font-weight: 700; }
/* keep the dropdown on the same line as its prompt */
.vy-wbx-row > select.vy-wb-input { flex: 0 0 210px; min-width: 0; max-width: 210px; margin-left: auto; }
.vy-wbx-row > .vy-wbx-mark { flex: 0 0 auto; }
.vy-wbx-term em, .vy-wbx-tf-q em, .vy-wbx-para em, .vy-wbx-mc-q em { color: #9aa0ac; font-size: 13px; font-style: normal; }
.vy-wbx-tf { align-items: flex-start; }
.vy-wbx-tf-q { flex: 1 1 55%; font-size: 15.5px; min-width: 220px; line-height: 1.5; }
.vy-wbx-tf-opts { display: flex; gap: 6px; flex-shrink: 0; }
.vy-wbx-tf-lead { margin: 12px 0 2px; font-size: 14px; font-weight: 700; color: var(--wb-slate); }
.vy-wbx-fill-q { flex: 1 1 55%; font-size: 15.5px; min-width: 220px; line-height: 1.7; }
.vy-wbx-mc { flex-direction: column; align-items: stretch; }
.vy-wbx-mc-q { margin: 0 0 7px; font-size: 15.5px; line-height: 1.5; font-weight: 600; }
.vy-wbx-mc-cue { margin: 7px 0 3px; font-size: 12.5px; color: #9aa0ac; font-style: italic; }
.vy-wbx-para { margin: 4px 0; font-size: 15px; line-height: 1.75; }
.vy-wbx-para sup { color: var(--wb-accent); font-weight: 800; margin-right: 3px; font-size: 11px; }
.vy-wbx-para-zh { margin: 0 0 10px; }
.vy-wbx-blank { letter-spacing: 1px; color: #b9bdc6; }

/* inputs */
.vy-wb-input {
  font-size: 15px; padding: 7px 11px; border: 1.5px solid #d4d8df;
  border-radius: 8px; background: #fff; font-family: inherit; min-width: 150px;
  transition: border-color .12s, box-shadow .12s;
}
.vy-wb-input:focus { outline: none; border-color: var(--wb-accent); box-shadow: 0 0 0 3px rgba(192,57,43,.13); }
select.vy-wb-input { cursor: pointer; }
/* radios/checkboxes must NOT inherit the text-input box styling */
input[type=radio].vy-wb-input, input[type=checkbox].vy-wb-input {
  min-width: 0; width: auto; padding: 0; border: none; background: none;
  box-shadow: none; margin: 0; accent-color: var(--wb-accent); cursor: pointer;
}
/* main-idea / MCQ options: card buttons w/ letter circle (mirrors 阅读拓展 .vy-opt) */
.vy-wbx-mc-q { margin: 0 0 9px; }
.vy-wbx-opts { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; }
.vy-wbx-opt {
  display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center;
  padding: 11px 15px; background: #fff; border: 1.5px solid var(--wb-rule);
  border-radius: 10px; cursor: pointer; transition: border-color .12s, background .12s; position: relative;
}
.vy-wbx-opt:hover { border-color: var(--wb-accent); background: rgba(192,57,43,.035); }
.vy-wbx-opt input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.vy-wbx-opt-letter {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--wb-rule); border-radius: 50%; font-weight: 800; font-size: 13px;
  color: var(--wb-accent); background: #fff; transition: all .12s ease;
  font-family: Georgia, serif;
}
.vy-wbx-opt-text { font-size: 14.5px; line-height: 1.5; color: var(--wb-ink); }
.vy-wbx-opt:has(input:checked) { border-color: var(--wb-accent); background: rgba(192,57,43,.06); }
.vy-wbx-opt input:checked ~ .vy-wbx-opt-letter { background: var(--wb-accent); color: #fff; border-color: var(--wb-accent); }
/* graded: parent row gets .ok / .no */
.vy-wbx-row.ok .vy-wbx-opt:has(input:checked) { border-color: #167a4a; background: #eef9f1; }
.vy-wbx-row.ok .vy-wbx-opt input:checked ~ .vy-wbx-opt-letter { background: #167a4a; border-color: #167a4a; color: #fff; }
.vy-wbx-row.no .vy-wbx-opt:has(input:checked) { border-color: #b3271c; background: #fdf3f2; }
.vy-wbx-row.no .vy-wbx-opt input:checked ~ .vy-wbx-opt-letter { background: #b3271c; border-color: #b3271c; color: #fff; }
.vy-wbx-row.vy-wbx-mc.ok, .vy-wbx-row.vy-wbx-mc.no { background: transparent; border-color: transparent; }

/* collapsible translation toggle (reading stays English by default) */
.vy-wbx-zh-toggle { margin: 9px 0 4px; }
.vy-wbx-zh-toggle summary {
  cursor: pointer; font-size: 12.5px; color: #9aa0ac; font-weight: 600;
  list-style: none; display: inline-flex; align-items: center; gap: 5px;
}
.vy-wbx-zh-toggle summary::before { content: "▸"; font-size: 10px; }
.vy-wbx-zh-toggle[open] summary::before { content: "▾"; }
.vy-wbx-zh-toggle summary::-webkit-details-marker { display: none; }
.vy-wbx-zh-body { margin: 7px 0 2px; font-size: 13px; color: #9aa0ac; line-height: 1.75; }
.vy-wbx-zh-body p { margin: 3px 0; }
/* fill-blank: underline style (Cambridge "write on the line") */
.vy-wbx-fill input[type=text].vy-wb-input {
  flex: 0 1 190px; border: none; border-bottom: 2px solid #c2c7d0;
  border-radius: 0; padding: 4px 4px; background: #fcfcfd;
}
.vy-wbx-fill input[type=text].vy-wb-input:focus { box-shadow: none; border-bottom-color: var(--wb-accent); background: #fff; }

.vy-wbx-mark {
  display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 800;
  min-width: 28px; padding: 2px 7px; border-radius: 20px;
}
.vy-wbx-mark.ok { color: #167a4a; background: #d4f0df; }
.vy-wbx-mark.no { color: #b3271c; background: #fbdbd7; }

/* T/F radio chips */
.vy-iu-radio { transition: background .12s; }
.vy-wbx-tf-opts .vy-iu-radio { border: 1.5px solid #e2e5ea; border-radius: 8px; }
.vy-wbx-mc .vy-iu-radio { border: 1.5px solid transparent; border-radius: 9px; align-items: flex-start; }
.vy-wbx-mc .vy-iu-radio:hover { background: #f6f7f9; }

/* identify (click-the-clause) */
.vy-wbx-identify { flex-direction: column; align-items: stretch; }
.vy-wbx-sent { margin: 2px 0; font-size: 16px; line-height: 2.15; }
.vy-wb-chunk {
  display: inline; font: inherit; font-size: 15.5px; cursor: pointer;
  background: none; border: none; border-bottom: 2px dotted #c2c7d0;
  padding: 1px 3px; color: var(--wb-ink); border-radius: 3px; transition: background .1s;
}
.vy-wb-chunk:hover { background: #fbeec9; }
.vy-wb-chunk.sel { background: #fbe08a; border-bottom: 2px solid #b07400; font-weight: 600; }
.vy-wb-chunk.ans { border-bottom: 2px solid #167a4a; }

/* —— Reading article (styled panel + display headline) —— */
.vy-wbx-article {
  background: #f7f5f0; border: 1px solid #e7e3da; border-left: 4px solid var(--wb-accent);
  border-radius: 6px; padding: 18px 20px; margin: 8px 0 16px;
}
.vy-wbx-article::after { content: ""; display: block; clear: both; }
.vy-wbx-article-title {
  margin: 0 0 12px; font-size: 23px; font-weight: 800; line-height: 1.2;
  letter-spacing: -.01em; color: #20262f;
  font-family: Georgia, "Times New Roman", serif;
}
.vy-wbx-paras p { margin: 6px 0; }
.vy-wbx-paras .vy-wbx-para { font-size: 15px; color: #2b313c; }
.vy-wbx-paras .vy-line-zh { color: #9aa0ac; font-size: 13px; }

.vy-wbx-legend, .vy-wbx-bank, .vy-wbx-hint {
  font-size: 13.5px; color: #475569; background: #f3f5f8;
  border-radius: 8px; padding: 8px 13px; margin: 0 0 12px; line-height: 1.65;
  border: 1px solid #e7eaef;
}
.vy-wbx-bank strong, .vy-wbx-legend strong { color: var(--wb-accent); }
.vy-wbx-optref, .vy-wbx-scaffold { margin: 0 0 12px; font-size: 13.5px; }
.vy-wbx-optref summary, .vy-wbx-scaffold summary { cursor: pointer; color: var(--wb-accent); font-weight: 700; }
.vy-wbx-optref ul, .vy-wbx-scaffold ul { margin: 7px 0; padding-left: 20px; line-height: 1.85; }

/* —— free-produce / writing —— */
.vy-wbx-frees { display: flex; flex-direction: column; gap: 14px; }
.vy-wbx-free { background: #fbfafe; border: 1px solid #ece8f2; border-left: 3px solid var(--wb-accent); border-radius: 8px; padding: 13px 15px; }
.vy-wbx-cue-line { margin: 1px 0; font-size: 14px; color: #475569; }
.vy-wbx-stem { margin: 4px 0 9px; font-size: 15.5px; line-height: 1.55; font-weight: 600; color: #2b313c; }
.vy-wbx-stems { margin: 6px 0; }
.vy-wb-free-input {
  width: 100%; box-sizing: border-box; font-size: 15px; padding: 11px 13px;
  border: 1.5px solid #d8d4e2; border-radius: 9px; font-family: inherit;
  line-height: 1.65; resize: vertical; background: #fff;
}
.vy-wb-free-input:focus { outline: none; border-color: var(--wb-accent); box-shadow: 0 0 0 3px rgba(192,57,43,.12); }
.vy-wbx-free-actions { display: flex; gap: 8px; margin: 9px 0 0; }
.vy-wbx-tiny { font-size: 13px; padding: 6px 13px; border-radius: 8px; }
.vy-wbx-free-fb { margin-top: 9px; }
.vy-wbx-free-fb .qfeedback { display: flex; gap: 10px; padding: 11px 13px; border: 1px solid; border-radius: 10px; }
.vy-wbx-free-fb .qfb-body { flex: 1; }
.vy-wbx-ref { margin-top: 9px; padding: 9px 13px; background: #eef9f1; border-left: 3px solid #1f8a55; border-radius: 8px; font-size: 14px; line-height: 1.65; }
.vy-wbx-ref em { color: #167a4a; font-style: italic; }
.vy-wbx-ref.hidden, .vy-wbx-fix.hidden { display: none; }
.vy-wbx-fix { width: 100%; margin-top: 7px; padding: 7px 11px; background: #fff8ec; border-left: 3px solid #d99a16; border-radius: 6px; font-size: 13.5px; }
.vy-wbx-fix em { color: #b07400; font-style: italic; }

/* —— actions + score —— */
.vy-wbx-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 16px; }
.vy-wbx-actions .btn-primary { background: var(--wb-accent); border-color: var(--wb-accent); }
.vy-wbx-score { font-size: 14px; font-weight: 800; margin-left: 2px; }
.vy-wbx-score.ok { color: #167a4a; }
.vy-wbx-score.no { color: #b3271c; }

@media (max-width: 640px) {
  .vy-wbx-hero, .vy-wbx-para-img { float: none; display: block; width: 100%; max-width: 320px; margin: 0 0 12px; }
}

/* listening */
.vy-audio-block { display: flex; gap: 12px; align-items: center; margin: 14px 0; }
.vy-listen-toggle { padding: 8px 16px; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; cursor: pointer; }
.vy-transcript { padding: 14px 18px; background: rgba(0,0,0,0.03); border-radius: 10px; }
.vy-transcript.hidden { display: none; }

/* reading */
.vy-passage { padding: 14px 18px; background: var(--panel-soft); border-radius: 10px; line-height: 1.7; font-size: 15px; }
.vy-passage-zh { padding: 12px 16px; font-size: 13px; color: var(--muted); }
.vy-passage-zh-toggle, .vy-model-toggle { margin: 10px 0; }
.vy-passage-zh-toggle summary, .vy-model-toggle summary { cursor: pointer; font-size: 13px; color: var(--muted); }

/* writing */
.vy-write-area { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 15px; line-height: 1.55; resize: vertical; box-sizing: border-box; }
.vy-write-area:focus { outline: none; border-color: var(--brand); }
.vy-write-actions { display: flex; gap: 10px; margin-top: 10px; }
.vy-length-hint { color: var(--muted); font-size: 12px; }
.vy-write-feedback { margin-top: 14px; }
.vy-model-answer { padding: 12px 16px; background: rgba(20,122,77,0.05); border-radius: 10px; font-size: 14px; line-height: 1.6; }

/* ============== certificate ============== */
.vy-cert-shell { padding: 24px; }
.cert-frame {
  max-width: 920px;
  margin: 24px auto;
  perspective: 1000px;
}
.cert-border {
  background: linear-gradient(135deg, #f5e7c4 0%, #e8d199 50%, #f5e7c4 100%);
  padding: 16px;
  border-radius: 6px;
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.25);
}
.cert-inner {
  background: #fbf6e7;
  border: 4px double #b08c4f;
  padding: 50px 60px 40px;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  position: relative;
  background-image:
    radial-gradient(circle at 18% 18%, rgba(176, 140, 79, 0.12) 0%, transparent 30%),
    radial-gradient(circle at 82% 82%, rgba(176, 140, 79, 0.12) 0%, transparent 30%);
}
.cert-top { margin-bottom: 18px; }
.cert-seal {
  display: inline-block;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b08c4f, #7d5d2d);
  color: #fbf6e7;
  font-size: 30px;
  line-height: 56px;
  text-align: center;
  margin-bottom: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.cert-issuer-en {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #7d5d2d;
  text-transform: uppercase;
}
.cert-issuer-zh { margin: 2px 0 0; font-size: 13px; color: #8a6c3f; }
.cert-title {
  margin: 18px 0 4px;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #2b2014;
}
.cert-title-zh { margin: 0 0 22px; font-size: 16px; color: #6b5538; letter-spacing: 0.2em; }
.cert-body { margin: 8px 0; color: #4a3a23; font-size: 15px; line-height: 1.65; }
.cert-name {
  margin: 18px 0;
  font-size: 38px;
  font-style: italic;
  font-weight: 600;
  color: #2b2014;
  border-bottom: 1px solid #b08c4f;
  display: inline-block;
  padding: 0 30px 8px;
}
.cert-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid rgba(176, 140, 79, 0.4);
}
.cert-bottom-col p { margin: 2px 0; }
.cert-date, .cert-signature, .cert-id { font-size: 16px; color: #2b2014; font-weight: 600; }
.cert-signature { font-style: italic; }
.cert-id { font-size: 12px; font-family: monospace; color: #6b5538; }
.cert-label { font-size: 10px; color: #8a6c3f; letter-spacing: 0.1em; text-transform: uppercase; }
.cert-actions { text-align: center; margin: 20px 0 60px; display: flex; gap: 12px; justify-content: center; }

@media print {
  .home-nav, .cert-actions { display: none !important; }
  .cert-frame { margin: 0 auto; }
  body { background: white; }
}

/* ═══════════════════════════════════════════════════════════ */
/*    NEW Voyage UI — typographic covers, redesigned cards,    */
/*    multi-scene unit pages, custom MCQ buttons               */
/* ═══════════════════════════════════════════════════════════ */

/* ── 印刷感封面 ── */
.vy-typo-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--c-top, #fff) 0%, var(--c-bot, #999) 100%);
  color: var(--c-ink, #1f2937);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  font-family: Georgia, "Times New Roman", serif;
}
.vy-typo-cover::before {
  content: "";
  position: absolute; inset: 12px;
  border: 1.5px double var(--c-ink);
  opacity: 0.18;
  border-radius: 3px;
  pointer-events: none;
}
.vy-typo-band-top, .vy-typo-band-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--c-ink);
  opacity: 0.85;
}
.vy-typo-band-bot {
  margin-top: auto;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.vy-typo-band-bot span { font-size: 9px; }
.vy-typo-brand { font-style: italic; letter-spacing: 0.2em; }
.vy-typo-level {
  background: var(--c-ink);
  color: white;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.18em;
  font-size: 11px;
}
.vy-typo-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 18px;
  gap: 4px;
}
.vy-typo-num {
  font-size: 64px;
  line-height: 1;
  font-weight: 800;
  color: var(--c-ink);
  margin: 0;
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.4);
}
.vy-typo-series {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--c-ink);
  margin: 4px 0 0;
}
.vy-typo-divider {
  width: 32px; height: 2px; background: var(--c-ink);
  margin: 8px 0;
}
.vy-typo-subtitle-en {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--c-ink);
}
.vy-typo-subtitle-zh {
  font-size: 18px;
  color: var(--c-ink);
  margin-top: 2px;
  font-family: -apple-system, system-ui, sans-serif;
}
/* size variants */
.vy-typo-lg { width: 100%; max-width: 240px; aspect-ratio: 3/4; }
.vy-typo-md { width: 200px; aspect-ratio: 3/4; }
.vy-typo-sm { width: 100px; aspect-ratio: 3/4; }
.vy-typo-md .vy-typo-num { font-size: 52px; }
.vy-typo-md .vy-typo-series { font-size: 26px; }
.vy-typo-md .vy-typo-subtitle-zh { font-size: 16px; }

/* ── library card with goals ── */
.vy-book-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  align-items: stretch;
}
.vy-book-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vy-goals {
  list-style: none;
  padding: 0;
  margin: 8px 0 4px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px;
}
.vy-goals li {
  display: grid;
  grid-template-columns: 22px 38px 1fr;
  gap: 6px;
  font-size: 13px;
  align-items: start;
  line-height: 1.45;
}
.vy-goal-icon { font-size: 14px; }
.vy-goal-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--brand);
  background: rgba(20, 122, 77, 0.08);
  border-radius: 4px;
  padding: 1px 5px;
  text-align: center;
  height: fit-content;
}
.vy-goal-text { color: var(--ink); }
.vy-goals.compact { grid-template-columns: 1fr; gap: 4px; margin: 6px 0; }
.vy-goals.compact li { grid-template-columns: 22px 1fr; font-size: 12px; }

/* ── Unit cards (book page) — rebuilt ── */
.vy-units {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}
.vy-unit-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  /* override the older grid-based layout */
  grid-template-columns: none !important;
}
.vy-unit-card:hover:not(.not-ready) {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 6px 18px rgba(20, 122, 77, 0.12);
}
.vy-unit-card.not-ready { opacity: 0.45; cursor: not-allowed; }
.vy-unit-card.complete { border-color: var(--ok); background: rgba(20, 122, 77, 0.04); }
.vy-unit-card-head { display: flex; justify-content: space-between; align-items: center; }
.vy-unit-num {
  font-size: 22px; font-weight: 800; color: var(--brand);
  text-align: left !important;
}
.vy-unit-status {
  font-size: 11px; font-weight: 700;
  background: rgba(0, 0, 0, 0.05);
  color: var(--muted);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.vy-unit-card.complete .vy-unit-status { background: rgba(20, 122, 77, 0.12); color: var(--ok); }
.vy-unit-title {
  margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.4;
  word-break: break-word;
}
.vy-unit-zh { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.4; word-break: break-word; }
.vy-progress-bar {
  height: 6px; background: rgba(0, 0, 0, 0.06); border-radius: 999px; overflow: hidden;
}
.vy-progress-bar > span {
  display: block; height: 100%; background: var(--brand);
  transition: width 0.3s ease;
  border-radius: 999px;
}
.vy-unit-mods { display: flex; gap: 4px; }
.vy-mod-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  font-size: 11px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: var(--muted);
  opacity: 0.55;
  filter: grayscale(0.7);
}
.vy-mod-dot.done { background: var(--ok); color: white; opacity: 1; filter: none; }

/* ── Book hero ── */
.vy-book-hero {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 16px auto 28px;
  padding: 24px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  align-items: center;
}

/* ── Unit banner (modules-list scene) ── */
.vy-unit-shell { max-width: 1100px; margin: 0 auto; padding: 16px 20px 60px; }
.vy-unit-nav { padding: 0 4px; margin-bottom: 8px; }
.vy-unit-banner {
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(20, 122, 77, 0.08), rgba(255, 255, 255, 0.5));
  border: 1.5px solid rgba(20, 122, 77, 0.18);
  border-radius: 16px;
  margin-bottom: 22px;
}
.vy-unit-banner-cefr {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--brand);
  color: white;
  padding: 3px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.vy-unit-banner-title { margin: 0 0 4px; font-size: 28px; font-weight: 700; color: var(--ink); }
.vy-unit-banner-zh { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.vy-unit-banner-progress { display: flex; align-items: center; gap: 14px; }
.vy-unit-banner-progress .vy-progress-bar { flex: 1; height: 8px; }
.vy-progress-meta { font-size: 12px; color: var(--muted); white-space: nowrap; font-weight: 600; }

/* ── Module grid (the new module list) ── */
.vy-mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.vy-mod-card {
  display: grid;
  grid-template-columns: 36px 38px 1fr;
  gap: 14px;
  align-items: center;
  padding: 18px 22px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  transition: all 0.15s ease;
}
.vy-mod-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 6px 16px rgba(20, 122, 77, 0.1);
}
.vy-mod-card.done { background: rgba(20, 122, 77, 0.04); border-color: rgba(20, 122, 77, 0.4); }
.vy-mod-card-num {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: 0.04em;
}
.vy-mod-card-icon { font-size: 28px; }
.vy-mod-card-body h3 { margin: 0; font-size: 16px; font-weight: 700; }
.vy-mod-card-body p { margin: 2px 0 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
.vy-mod-card-cta {
  grid-column: 1 / -1;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.04em;
  margin-top: 6px;
}
.vy-mod-card.done .vy-mod-card-cta { color: var(--ok); }
.vy-unit-finish {
  margin-top: 28px;
  padding: 22px 24px;
  background: linear-gradient(135deg, rgba(20, 122, 77, 0.1), rgba(255, 196, 0, 0.1));
  border-radius: 14px;
  text-align: center;
}
.vy-unit-finish h2 { margin: 0 0 4px; }

/* ── Section page header / shared cards ── */
.vy-section { padding: 0 4px; }
.vy-section-head { margin-bottom: 18px; }
.vy-section-head h1 { margin: 6px 0 4px; font-size: 26px; }
.vy-section-head .vy-name-zh { font-weight: 400; font-size: 16px; color: var(--muted); margin-left: 8px; }
.vy-section-sub { color: var(--muted); font-size: 14px; margin: 4px 0; }
.vy-section-title { font-size: 26px; margin: 0 0 8px; }
.vy-card {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 16px;
}
.vy-card h3 {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 700;
}
.vy-card .vy-explain {
  background: rgba(0, 0, 0, 0.03);
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
}
.vy-tag {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(20, 122, 77, 0.12);
  color: var(--brand);
  font-size: 11px;
  letter-spacing: 0.05em;
  font-weight: 700;
  border-radius: 999px;
}
.vy-mod-actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.vy-mod-actions.inline { margin-top: 14px; justify-content: flex-start; }

/* ── Series blocks / image covers / vocabulary cards ── */
/* Series switcher dropdown (mountBook header — lets user jump between
   Voyage / Pulse / etc. without going back to the library) */
.vy-series-switcher { position: relative; display: inline-block; }
.vy-series-toggle { white-space: nowrap; }
.vy-series-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.15);
}
.vy-series-menu[hidden] {
  display: none;
}
.vy-series-menu-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  color: var(--ink);
  transition: background 0.15s ease;
}
.vy-series-menu-item:hover {
  background: rgba(99, 102, 241, 0.08);
}
.vy-series-menu-item.active {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.35);
  font-weight: 600;
}
.vy-series-menu-item em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--muted);
}

.vy-series-block {
  max-width: 1100px;
  margin: 0 auto 34px;
  scroll-margin-top: 96px;
}
.vy-series-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  padding: 0 4px;
  margin: 0 0 14px;
}
.vy-series-kicker {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(20, 122, 77, 0.1);
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.vy-series-head h2 {
  margin: 0 0 6px;
  font-size: 28px;
}
.vy-series-desc {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 760px;
}
.vy-image-cover {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}
.vy-image-lg { width: 100%; max-width: 240px; aspect-ratio: 3 / 4; }
.vy-image-md { width: 200px; aspect-ratio: 3 / 4; }
.vy-image-cover .vy-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vy-image-cover-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 16px 14px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.82) 56%, rgba(15, 23, 42, 0.96) 100%);
  color: white;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vy-image-cover-series {
  font-size: 11px;
  letter-spacing: 0.18em;
  opacity: 0.82;
}
.vy-image-cover-overlay strong {
  font-size: 18px;
  line-height: 1.2;
}
.vy-image-cover-overlay span:last-child {
  font-size: 12px;
  opacity: 0.88;
}
.vy-vocab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.vy-vocab-card {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 18px;
}
.vy-vocab-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  margin-bottom: 8px;
}
.vy-vocab-head h3 {
  margin: 0;
  font-size: 18px;
}
.vy-vocab-ipa {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.vy-vocab-zh {
  margin: 0 0 10px;
  color: var(--brand-ink);
  font-size: 14px;
  line-height: 1.5;
}
.vy-vocab-examples {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vy-vocab-examples li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
  padding-top: 10px;
  border-top: 1px dashed rgba(15, 23, 42, 0.12);
}
.vy-vocab-examples li:first-child {
  padding-top: 0;
  border-top: none;
}
.vy-vocab-examples p {
  margin: 0;
  line-height: 1.55;
}

/* ── Dialogue list (page) ── */
.vy-dlg-list { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.vy-dlg-card {
  display: grid;
  grid-template-columns: 48px 1fr 32px;
  gap: 16px;
  padding: 20px 22px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  align-items: center;
  transition: all 0.15s ease;
}
.vy-dlg-card:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 6px 14px rgba(0,0,0,0.08); }
.vy-dlg-card.done { border-color: rgba(20,122,77,0.4); background: rgba(20,122,77,0.04); }
.vy-dlg-num {
  width: 40px; height: 40px;
  background: var(--brand); color: white;
  font-size: 20px; font-weight: 800;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.vy-dlg-card.done .vy-dlg-num { background: var(--ok); }
.vy-dlg-body h3 { margin: 0; font-size: 17px; }
.vy-dlg-zh { margin: 2px 0 4px; font-size: 13px; color: var(--muted); }
.vy-dlg-scene { margin: 4px 0 6px; font-size: 13px; color: var(--ink); font-style: italic; }
.vy-dlg-meta { font-size: 12px; color: var(--muted); }
.vy-dlg-cta { font-size: 22px; color: var(--brand); font-weight: 700; }
.vy-dlg-card.done .vy-dlg-cta { color: var(--ok); }

/* ── Walkthrough (dialogue step-by-step) ── */
.vy-walk-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0 18px;
}
.vy-walk-step-meta { font-size: 12px; color: var(--muted); letter-spacing: 0.05em; }
.vy-walk-dots { display: flex; gap: 8px; }
.vy-walk-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
}
.vy-walk-dot.active { background: var(--brand); width: 26px; border-radius: 999px; }
.vy-walk-dot.done { background: var(--ok); }
.vy-walk-page {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 24px 28px;
}
.vy-walk-h2 { margin: 0 0 14px; font-size: 22px; color: var(--brand-ink); }
.vy-walk-text { font-size: 16px; line-height: 1.65; margin: 8px 0; color: var(--ink); }
.vy-walk-text-zh { font-size: 14px; color: var(--muted); line-height: 1.65; margin: 6px 0; }
.vy-walk-hook {
  margin: 18px 0;
  padding: 16px 20px;
  background: rgba(255, 196, 0, 0.08);
  border-radius: 12px;
  border-left: 4px solid #f59e0b;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.vy-walk-hook > div { flex: 1; }
.vy-walk-hookq { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.vy-walk-hookq-zh { margin: 0; font-size: 13px; color: var(--muted); }
.vy-walk-subq { padding-left: 20px; margin: 12px 0; }
.vy-walk-subq li { margin: 6px 0; font-size: 14px; line-height: 1.5; }
.vy-walk-zh-inline { color: var(--muted); font-size: 13px; }
.vy-walk-scene { margin: 6px 0 12px; font-style: italic; color: var(--muted); }
.vy-line-play.tiny { width: 22px; height: 22px; font-size: 9px; }

/* ── Dialogue lines (in walkthrough) ── */
.vy-lines { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 8px; }
.vy-line {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  align-items: start;
  background: rgba(0, 0, 0, 0.02);
}
.vy-line:hover { background: rgba(0, 0, 0, 0.04); }
.vy-line-play, .vy-listen-big {
  background: var(--brand); color: white; border: none; border-radius: 50%;
  width: 32px; height: 32px;
  cursor: pointer; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vy-line-play:hover { background: var(--brand-ink); }
.vy-listen-big {
  width: auto; height: auto; padding: 14px 28px;
  border-radius: 999px; font-size: 15px; font-weight: 600;
}
.vy-line-body { min-width: 0; }
.vy-line-speaker {
  display: inline-block; font-size: 11px; font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.04em;
}
.vy-line-en { margin: 4px 0 2px; font-size: 16px; color: var(--ink); line-height: 1.5; }
.vy-line-zh { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ── New MCQ buttons (replaces broken radio approach) ── */
.vy-mcq-list { display: flex; flex-direction: column; gap: 18px; }
.vy-mcq {
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  border: 1px solid var(--line);
}
.vy-q { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.vy-q-zh { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.vy-mcq-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vy-opt {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  transition: all 0.12s ease;
  width: 100%;
}
.vy-opt:hover:not(:disabled) { border-color: var(--brand); background: rgba(20, 122, 77, 0.04); }
.vy-opt-letter {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  font-weight: 700;
  color: var(--brand);
  background: white;
  font-size: 13px;
}
.vy-opt-text { font-size: 14.5px; line-height: 1.5; }
.vy-mcq.answered .vy-opt { cursor: default; }
.vy-mcq.answered .vy-opt.correct {
  border-color: var(--ok);
  background: rgba(20, 122, 77, 0.06);
}
.vy-mcq.answered .vy-opt.correct .vy-opt-letter {
  background: var(--ok); color: white; border-color: var(--ok);
}
.vy-mcq.answered .vy-opt.wrong {
  border-color: var(--danger);
  background: rgba(180, 35, 24, 0.04);
}
.vy-mcq.answered .vy-opt.wrong .vy-opt-letter {
  background: var(--danger); color: white; border-color: var(--danger);
}
.vy-mcq.answered .vy-opt.dim { opacity: 0.5; }
.vy-mcq-result { margin: 12px 0 0; font-size: 13px; font-weight: 600; }
.vy-mcq-result.ok { color: var(--ok); }
.vy-mcq-result.no { color: var(--danger); }

/* ── Listening / reading / writing card variants ── */
.vy-listen-card {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.vy-listen-toggle { padding: 10px 18px; }
.vy-transcript {
  flex-basis: 100%;
  margin-top: 8px;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.65;
}
.vy-transcript.hidden { display: none; }

.vy-passage-card { padding: 24px 28px; }
.vy-passage { line-height: 1.75; font-size: 15px; }
.vy-passage p { margin: 8px 0; }
.vy-passage-zh-toggle { margin-top: 14px; }
.vy-passage-zh-toggle summary {
  cursor: pointer; font-size: 13px; color: var(--muted);
  padding: 6px 0;
}
.vy-passage-zh { padding: 12px 16px; background: rgba(0,0,0,0.03); border-radius: 8px; font-size: 13px; line-height: 1.65; color: var(--muted); margin-top: 8px; }

.vy-task-card { background: color-mix(in srgb, var(--brand) 5%, #fff); border-color: color-mix(in srgb, var(--brand) 22%, transparent); }
.vy-task-card .vy-prompt-en { font-size: 16px; font-weight: 600; margin: 8px 0; }
.vy-task-card .vy-prompt-zh { color: var(--muted); margin: 4px 0; }
/* 任务说明：逐行步骤（学「写作润色」的清爽排版），中文默认折叠 */
.vy-task-steps { list-style: none; counter-reset: tstep; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.vy-task-steps li {
  counter-increment: tstep; position: relative; padding-left: 34px;
  font-size: 15.5px; line-height: 1.6; color: var(--ink);
}
.vy-task-steps li::before {
  content: counter(tstep); position: absolute; left: 0; top: 1px;
  width: 23px; height: 23px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 800;
  display: grid; place-items: center;
}
.vy-task-zh { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.vy-task-zh > summary {
  cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; color: var(--brand);
  display: inline-flex; align-items: center; gap: 5px;
}
.vy-task-zh > summary::-webkit-details-marker { display: none; }
.vy-task-zh > summary::before { content: "译"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: color-mix(in srgb, var(--brand) 12%, #fff); font-size: 11px; }
.vy-task-zh[open] > summary { margin-bottom: 8px; }
.vy-task-zh p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.vy-ft-call { display: inline-flex; align-items: center; justify-content: center; }
.vy-tips { padding-left: 22px; line-height: 1.65; }

.vy-grammar-example {
  display: flex; gap: 14px; align-items: center;
  padding: 14px 18px;
  background: rgba(20, 122, 77, 0.05);
  border-radius: 10px;
  margin: 8px 0;
}
.vy-patterns { padding-left: 22px; }
.vy-patterns code { background: rgba(0,0,0,0.06); padding: 3px 8px; border-radius: 6px; font-size: 14px; }
.vy-drills { padding-left: 22px; }
.vy-drills li { margin-bottom: 14px; }
.vy-drill-input {
  padding: 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: 14.5px;
  min-width: 220px;
  margin-top: 6px;
}
.vy-drill-input:focus { outline: none; border-color: var(--brand); }
.vy-drill-result { margin-left: 10px; font-weight: 700; }
.vy-drill-result.ok { color: var(--ok); }
.vy-drill-result.no { color: var(--danger); font-size: 12px; font-weight: 500; }

.vy-pron-drills {
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.vy-pron-drills li {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.vy-pron-text { font-size: 15px; }

.vy-write-area {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
}
.vy-write-area:focus { outline: none; border-color: var(--brand); }
.vy-length-hint { color: var(--muted); font-size: 12px; margin: 0 0 10px; }
.vy-write-feedback { margin-top: 14px; }
.vy-model-toggle { padding: 14px 18px; }
.vy-model-toggle summary {
  cursor: pointer; font-weight: 600; color: var(--muted);
  list-style: none;
}
.vy-model-toggle summary::before { content: "▸ "; }
.vy-model-toggle[open] summary::before { content: "▾ "; }
.vy-model-answer {
  margin-top: 12px;
  padding: 14px 18px;
  background: rgba(20, 122, 77, 0.05);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
}

@media (max-width: 720px) {
  .vy-book-card, .vy-book-hero { grid-template-columns: 1fr; }
  .vy-typo-lg { max-width: 100%; aspect-ratio: 4/3; }
  .vy-goals { grid-template-columns: 1fr; }
  .vy-walk-page { padding: 18px 16px; }
  .vy-mod-card { grid-template-columns: 28px 32px 1fr; }
  .vy-mod-card-cta { font-size: 11px; }
  .vy-shell .home-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .vy-shell .brand-mark {
    display: block;
  }
  .vy-shell .brand-dot {
    display: none;
  }
  .vy-shell .brand-name {
    display: block;
    font-size: 16px;
    line-height: 1.2;
  }
  .vy-shell .brand-tag {
    display: inline-flex;
    margin-left: 0;
    margin-top: 6px;
  }
  .vy-shell .home-nav-right {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  .vy-shell .home-nav-right > .btn-ghost,
  .vy-shell .home-nav-right > .vy-series-switcher {
    flex: 1 1 100%;
  }
  .vy-shell .home-nav-right .btn-ghost,
  .vy-shell .vy-series-toggle {
    width: 100%;
    justify-content: center;
  }
  .vy-shell .vy-series-menu {
    left: 0;
    right: auto;
    min-width: min(320px, calc(100vw - 32px));
  }
  .vy-hero {
    text-align: left;
    padding: 12px 0 20px;
  }
  .vy-hero h1 {
    font-size: 28px;
    line-height: 1.1;
  }
  .vy-hero-sub {
    font-size: 14px;
    line-height: 1.6;
  }
}
@media (max-width: 720px) {
  .vy-book-card, .vy-book-hero { grid-template-columns: 1fr; }
  .vy-cover, .vy-book-hero-cover { height: 200px; }
  .vy-unit-layout { grid-template-columns: 1fr; }
  .vy-unit-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .cert-inner { padding: 30px 24px; }
  .cert-name { font-size: 26px; padding: 0 8px 6px; }
  .cert-bottom { grid-template-columns: 1fr; }
}

/* Onboarding shell */
.ob-shell {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 28px 64px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ob-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
}
.ob-steps {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ob-steps li {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.ob-steps li.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  font-weight: 600;
}
.ob-steps li.done { color: var(--brand-ink); border-color: rgba(51, 163, 21, 0.4); }

.ob-step h1 { font-size: 32px; margin: 0 0 6px; color: var(--ink); font-weight: 700; }
.ob-sub { margin: 0 0 24px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.ob-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Goal step */
.goal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.goal-card {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 22px 20px 18px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.goal-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.goal-card.selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(51, 163, 21, 0.12), var(--shadow);
  background: rgba(51, 163, 21, 0.04);
}
.goal-emoji { font-size: 28px; }
.goal-card strong { font-size: 20px; color: var(--ink); }
.goal-card em {
  font-style: normal;
  font-size: 12px;
  color: var(--brand-ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.goal-card p { margin: 6px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* Test step */
.ob-progress {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ob-bar { height: 6px; background: var(--panel-soft); border-radius: 999px; overflow: hidden; }
.ob-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #4be619, #33a315);
  border-radius: 999px;
  transition: width 0.25s ease;
}
.ob-progress-meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }

.qcard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--shadow);
}
.qhead .qtype {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-ink);
  background: rgba(51, 163, 21, 0.08);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.word-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 12px 8px;
}
.word-en { font-size: 44px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.word-ipa { font-size: 16px; color: var(--muted); }
.word-display.zh .word-zh { font-size: 30px; color: var(--ink); font-weight: 600; }

.listen-block { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 0; }
.btn-listen {
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 16px 36px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(51, 163, 21, 0.25);
}
.btn-listen:hover { background: var(--brand-ink); }
.btn-listen:active { transform: scale(0.97); }
.listen-hint { font-size: 13px; color: var(--muted); }

.opt-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.opt {
  background: var(--panel-soft);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.opt:hover { border-color: var(--brand); }
.opt.right {
  background: rgba(20, 122, 77, 0.1);
  border-color: var(--ok);
  color: var(--ok);
  font-weight: 600;
}
.opt.wrong {
  background: rgba(180, 35, 24, 0.08);
  border-color: var(--danger);
  color: var(--danger);
  font-weight: 600;
}
.opt.dim { opacity: 0.5; }

.spell-form { display: flex; gap: 10px; }
.spell-input {
  flex: 1;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  font-size: 18px;
  background: var(--panel-soft);
  color: var(--ink);
  letter-spacing: 0.02em;
}
.spell-input:focus { outline: none; border-color: var(--brand); background: var(--panel); }
.spell-input.right { border-color: var(--ok); background: rgba(20, 122, 77, 0.06); color: var(--ok); }
.spell-input.wrong { border-color: var(--danger); background: rgba(180, 35, 24, 0.06); color: var(--danger); }

.qfeedback {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}
.qfeedback.ok { border-color: rgba(20, 122, 77, 0.4); background: rgba(20, 122, 77, 0.06); }
.qfeedback.no { border-color: rgba(180, 35, 24, 0.35); background: rgba(180, 35, 24, 0.05); }
.qfeedback.big { padding: 18px 22px; }
.qfeedback.big .qfb-icon { font-size: 32px; }
.qfeedback.big .qfb-body strong { font-size: 18px; }
.spell-next-hint {
  margin: 8px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}
.sentence-mode-toggle { margin: 6px 0 14px; }
.sentence-row.voice-mode {
  align-items: center;
}
.voice-input-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.voice-mic-big {
  padding: 12px 22px;
  font-size: 16px;
  border-radius: 999px;
  background: var(--brand);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(20, 122, 77, 0.25);
}
.voice-mic-big:hover { background: var(--brand-ink); }
.voice-mic-big.rec {
  background: var(--danger);
  box-shadow: 0 0 0 6px rgba(180, 35, 24, 0.16);
  animation: voice-pulse 1.2s ease-in-out infinite;
}
@keyframes voice-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
.voice-heard {
  margin: 0;
  padding: 10px 14px;
  background: rgba(20, 122, 77, 0.06);
  border: 1px solid rgba(20, 122, 77, 0.2);
  border-radius: 10px;
  font-size: 15px;
  color: var(--ink);
}
.voice-hint { margin: 0; font-style: italic; }
.study-actions.inline { margin-top: 12px; gap: 10px; }
.translate-section .trans-task {
  margin: 10px 0 14px;
  padding: 12px 16px;
  background: var(--panel-soft);
  border-radius: 12px;
  border-left: 4px solid var(--brand);
}
.translate-section .trans-task .big-line.zh {
  margin: 0;
  font-size: 18px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.5;
}
.trans-summary { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 12px; }
.trans-summary-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}
.trans-summary-item.ok { border-color: rgba(20, 122, 77, 0.35); background: rgba(20, 122, 77, 0.04); }
.trans-summary-item.fail { border-color: rgba(180, 35, 24, 0.25); background: rgba(180, 35, 24, 0.03); }
.trans-summary-item .ts-icon { font-size: 22px; line-height: 1; }
.trans-summary-item .ts-zh { margin: 0; font-size: 14px; color: var(--ink); font-weight: 600; }
.trans-summary-item .ts-ref { margin: 4px 0 0; font-size: 13px; color: var(--brand-ink); }
.trans-summary-item .ts-heard { margin: 4px 0 0; font-size: 12px; }

/* 翻译题序号小圆点导航 */
.trans-dots {
  display: flex;
  gap: 8px;
  margin: 8px 0 14px;
}
.trans-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.trans-dot:hover { transform: translateY(-1px); }
.trans-dot.active { background: var(--brand); color: white; border-color: var(--brand); }
.trans-dot.done.ok { background: rgba(20, 122, 77, 0.12); color: var(--ok); border-color: var(--ok); }
.trans-dot.done.fail { background: rgba(180, 35, 24, 0.08); color: var(--danger); border-color: var(--danger); }
.trans-dot.todo { opacity: 0.65; }

/* 历史学习痕迹折叠卡 */
.history-section details { border: 1px solid var(--line); border-radius: 14px; padding: 0; background: var(--panel-soft); }
.history-section summary { list-style: none; padding: 12px 18px; cursor: pointer; user-select: none; }
.history-section summary::-webkit-details-marker { display: none; }
.history-section summary::before { content: "▸ "; color: var(--muted); margin-right: 6px; transition: transform 0.15s; display: inline-block; }
.history-section details[open] summary::before { content: "▾ "; }
.history-section .history-summary { display: inline; margin: 0; font-size: 16px; }
.history-section .history-summary .hint { font-weight: normal; }
.history-body { padding: 0 18px 16px; }
.history-sub { margin: 14px 0 8px; font-size: 13px; color: var(--muted); letter-spacing: 0.04em; }
.history-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.history-item {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 14px;
}
.history-item.ok { border-left: 3px solid var(--ok); }
.history-item.fail { border-left: 3px solid var(--danger); }
.history-item .hist-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.history-item .hist-icon { font-size: 16px; }
.history-item .hist-time { font-size: 11px; color: var(--muted); }
.history-item p { margin: 2px 0; line-height: 1.45; }
.history-item .hist-zh { font-weight: 600; color: var(--ink); }
.history-item .hist-heard { color: var(--ink); }
.history-item .hist-ref { color: var(--brand-ink); }
.history-item .hist-corrected em { font-style: italic; color: var(--brand-ink); }
.history-item .hist-original { font-weight: 600; color: var(--ink); }
.history-item .hist-polished em { font-style: italic; color: var(--brand-ink); }
.trans-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  flex-wrap: wrap;
}
.trans-input-row .speak-input { flex: 1; min-width: 200px; padding: 10px 14px; font-size: 15px; }
.speak-heard {
  margin: 6px 0 0;
  padding: 10px 14px;
  background: rgba(0,0,0,0.04);
  border-radius: 10px;
  color: var(--ink);
  font-size: 14px;
}
.reference-answer {
  margin: 12px 0 4px;
  padding: 12px 16px;
  background: rgba(20, 122, 77, 0.08);
  border: 1px solid rgba(20, 122, 77, 0.3);
  border-radius: 10px;
}
.ref-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ok);
  font-weight: 700;
}
.reference-answer p { margin: 4px 0 0; font-size: 15px; color: var(--ink); }
.sf-tag {
  display: inline-block;
  margin: 0 4px 0 0;
  padding: 2px 8px;
  background: rgba(255, 196, 0, 0.18);
  color: #7a5b00;
  border-radius: 999px;
  font-size: 12px;
}
.qfb-icon { font-size: 22px; }
.qfb-body { flex: 1; }
.qfb-body strong { display: block; font-size: 14px; margin-bottom: 2px; color: var(--ink); }
.qfb-body p { margin: 0; font-size: 14px; color: var(--muted); }
.qfb-body em { font-style: normal; color: var(--brand-ink); font-weight: 600; }

/* Skills step */
.skill-list { display: flex; flex-direction: column; gap: 18px; }
.skill-row {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.skill-label { font-size: 15px; color: var(--ink); }
.skill-label strong {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  width: 28px;
  height: 28px;
  text-align: center;
  line-height: 28px;
  border-radius: 8px;
  margin-right: 10px;
  font-size: 14px;
  vertical-align: middle;
}
.skill-scale { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.skill-anchor { font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.skill-dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--panel-soft);
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.12s ease;
}
.skill-dot:hover { border-color: var(--brand); color: var(--brand-ink); }
.skill-dot.active { background: var(--brand); border-color: var(--brand); color: #fff; transform: scale(1.06); }

/* Result step */
.result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.rcard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow);
}
.rcard.accent {
  background: linear-gradient(140deg, rgba(51, 163, 21, 0.95), rgba(75, 230, 25, 0.85));
  color: #fff;
  border: none;
}
.rcard.accent span,
.rcard.accent em { color: rgba(255, 255, 255, 0.78); }
.rcard.accent strong { color: #fff; }
.rcard span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.rcard strong { font-size: 26px; color: var(--brand-ink); font-weight: 700; }
.rcard em { font-style: normal; font-size: 13px; color: var(--muted); }

.ratio-row,
.daily-row {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}
.ratio-row label,
.daily-row label { font-weight: 600; color: var(--ink); font-size: 14px; }
.ratio-control { display: flex; align-items: center; gap: 12px; flex: 1; max-width: 460px; justify-content: flex-end; }
.ratio-control input[type="range"] { flex: 1; accent-color: var(--brand); }
.ratio-control span {
  font-size: 13px;
  color: var(--brand-ink);
  font-weight: 600;
  min-width: 160px;
  text-align: right;
}
.daily-control { display: flex; align-items: center; gap: 14px; }
.daily-control button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--panel-soft);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  color: var(--brand-ink);
}
.daily-control button:hover { border-color: var(--brand); }
.daily-control span {
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-ink);
  min-width: 36px;
  text-align: center;
}

/* Study placeholder */
.study-stub {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 36px 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow);
}
.study-stub h1 { margin: 0; font-size: 28px; color: var(--brand-ink); }
.study-stub-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }

/* Selector header extra nav */
.selector-nav-actions { display: flex; gap: 8px; margin-left: auto; margin-right: 16px; }

@media (max-width: 1024px) {
  body {
    background: #fbfcfb;
  }
  .home-shell {
    max-width: none;
    min-height: 100vh;
    padding: 0;
    gap: 0;
  }
  .home-shell:has(.mobile-app-home) > :not(.mobile-app-home) {
    display: none !important;
  }
  .home-shell .mobile-app-home {
    display: block;
    min-height: 100vh;
    background: #fbfcfb;
  }
  .home-hero h1 { font-size: 36px; }
  /* 行业英语方向选择页：手机上字号收紧 + 恢复左右内边距（.home-shell padding:0 会把标题贴边裁切），
     顶部留出悬浮返回按钮的位置。 */
  .home-shell.industry-list-page {
    padding: 56px 18px 36px;
    gap: 0;
  }
  .industry-list-page .home-hero.compact {
    padding-top: 6px;
    padding-bottom: 4px;
    margin: 0 !important;
    gap: 10px;
  }
  .industry-list-page .home-hero h1 {
    font-size: 25px;
    line-height: 1.3;
    letter-spacing: 0;
    word-break: keep-all;
  }
  .industry-list-page .home-sub {
    font-size: 13px;
    line-height: 1.6;
    max-width: 100%;
  }
  .industry-list-page .home-tag { font-size: 11.5px; padding: 5px 12px; }
  .industry-list-page .bank-picker { margin: 0 !important; }
  .industry-list-page .bank-grid { gap: 12px; margin-top: 16px; }
  .industry-list-page .industry-card-simple { padding: 16px 18px; }
  .industry-list-page .industry-card-simple .bank-emoji { font-size: 26px; }
  .industry-list-page .industry-card-simple .bank-name { font-size: 18px; }
  .industry-list-page .industry-card-simple .bank-en { font-size: 12px; }
  .industry-list-page .industry-card-simple .bank-meta { font-size: 12.5px; }
  .home-features,
  .profile-cards,
  .study-stub-cards { grid-template-columns: repeat(2, 1fr); }
  .result-grid { grid-template-columns: 1fr; }
  .opt-list { grid-template-columns: 1fr; }
  .word-en { font-size: 36px; }
  .ratio-row,
  .daily-row { flex-direction: column; align-items: stretch; }
}

/* =================================================================
   Phase 3 学习闭环 (study.js)
   ================================================================= */

.study-shell {
  max-width: 880px;
  margin: 0 auto;
  padding: 20px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.study-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 8px 0;
}
.study-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.study-bar { height: 6px; background: var(--panel-soft); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.study-bar span { display: block; height: 100%; background: linear-gradient(90deg, #4be619, #33a315); transition: width 0.3s ease; }
.study-meta { font-size: 12px; color: var(--muted); text-align: center; }
.study-step-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.step-tab {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
}
.step-tab.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}
.step-tab.done {
  background: rgba(20, 122, 77, 0.1);
  color: var(--ok);
  border-color: rgba(20, 122, 77, 0.3);
}

.study-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--shadow);
}

.study-actions {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.study-actions.center { justify-content: center; }

/* —— Dict step —— */
.dict-card { gap: 22px; }
.dict-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 18px;
}
.dict-word { font-size: 42px; margin: 0; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.dict-ipa { margin: 0; color: var(--muted); font-size: 18px; }
.dict-ipa-pair { margin-right: 14px; white-space: nowrap; }
.dict-ipa-pair b { color: var(--brand); font-weight: 700; margin-right: 3px; }
/* 富词典补充段（近义反义 / 形近辨析 / 派生词）—— study 卡片复用 */
.dict-chiprow { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; flex-wrap: wrap; }
.dict-chiplabel { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #fff; background: #9aa6b6; border-radius: 6px; padding: 2px 8px; }
.dict-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dict-chip { font-size: 14px; color: var(--brand-ink, #166534); background: var(--panel-soft); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 999px; padding: 4px 12px; }
.dict-pair { padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.dict-pair:last-child { border-bottom: 0; }
.dict-pair-w { font-size: 15px; color: var(--brand-ink, #166534); margin-right: 8px; }
.dict-pair-note { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.btn-listen.small {
  padding: 6px 14px;
  font-size: 13px;
  box-shadow: 0 4px 10px rgba(51, 163, 21, 0.18);
  margin-left: auto;
}
.btn-listen.tiny {
  padding: 4px 10px;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(51, 163, 21, 0.2);
  flex: 0 0 auto;
}
.dict-section h3 {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.pos-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pos-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pos-tag {
  display: inline-block;
  background: rgba(51, 163, 21, 0.1);
  color: var(--brand-ink);
  font-weight: 600;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  font-style: italic;
}
.pos-trans {
  background: var(--panel-soft);
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
  border: 1px solid var(--line);
}
.colloc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.colloc {
  background: rgba(51, 163, 21, 0.06);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--brand-ink);
  border: 1px solid rgba(51, 163, 21, 0.2);
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}
.example-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.example-list li {
  display: flex;
  gap: 10px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  align-items: flex-start;
}
.ex-en { margin: 0; font-size: 15px; color: var(--ink); line-height: 1.5; }
.ex-zh { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

/* —— Pronounce step —— */
.pronounce-target { text-align: center; padding: 18px 0 8px; }
.pronounce-word { font-size: 42px; font-weight: 700; margin: 0; color: var(--ink); }
.pronounce-ipa { margin: 4px 0 0; font-size: 16px; color: var(--muted); }
.pronounce-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.btn-listen.recording {
  background: var(--danger);
  box-shadow: 0 0 0 0 rgba(180, 35, 24, 0.6);
  animation: pulse 1.2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(180, 35, 24, 0.5); }
  70% { box-shadow: 0 0 0 12px rgba(180, 35, 24, 0); }
  100% { box-shadow: 0 0 0 0 rgba(180, 35, 24, 0); }
}
.score-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.score-card {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.score-card span { font-size: 12px; color: var(--muted); }
.score-card strong { font-size: 28px; color: var(--brand-ink); font-weight: 700; }
.score-card em { font-style: normal; font-size: 12px; color: var(--muted); }
.score-card.pass {
  background: rgba(20, 122, 77, 0.1);
  border-color: rgba(20, 122, 77, 0.4);
}
.score-card.pass strong { color: var(--ok); }
.score-card.fail {
  background: rgba(180, 35, 24, 0.06);
  border-color: rgba(180, 35, 24, 0.3);
}
.score-card.fail strong { color: var(--danger); }
.word-scores { display: flex; flex-wrap: wrap; gap: 8px; }
.ws {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
}
.ws em { font-style: normal; color: var(--muted); font-size: 11px; }
.ws.good { background: rgba(20, 122, 77, 0.08); border-color: rgba(20, 122, 77, 0.35); color: var(--ok); }
.ws.ok { background: rgba(154, 103, 0, 0.08); border-color: rgba(154, 103, 0, 0.3); color: var(--warn); }
.ws.bad { background: rgba(180, 35, 24, 0.08); border-color: rgba(180, 35, 24, 0.35); color: var(--danger); }

/* —— Sentence step —— */
.sentence-prompt p { margin: 0 0 6px; color: var(--ink); font-size: 14px; line-height: 1.6; }
.sentence-tip { color: var(--muted) !important; font-size: 13px !important; }
.sentence-list { display: flex; flex-direction: column; gap: 10px; }
.sentence-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.sentence-num {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--brand-ink);
  width: 24px;
  padding-top: 14px;
  text-align: right;
}
.sentence-input {
  flex: 1;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--panel-soft);
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  line-height: 1.6;
  color: var(--ink);
}
.sentence-input:focus { outline: none; border-color: var(--brand); background: var(--panel); }
.btn-mic {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--panel-soft);
  cursor: pointer;
  font-size: 18px;
  margin-top: 4px;
  transition: all 0.15s ease;
}
.btn-mic:hover { border-color: var(--brand); background: rgba(51, 163, 21, 0.06); }

.sentence-feedback {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sf-overall {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}
.sf-overall > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(140deg, rgba(51, 163, 21, 0.95), rgba(75, 230, 25, 0.85));
  color: #fff;
  border-radius: 14px;
  padding: 12px 18px;
  min-width: 80px;
}
.sf-overall strong { font-size: 28px; font-weight: 700; }
.sf-overall em { font-style: normal; font-size: 11px; opacity: 0.8; letter-spacing: 0.05em; }
.sf-overall p { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.6; }
.sf-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sf-item header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sf-num {
  background: var(--brand);
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  font-size: 13px;
  font-weight: 600;
}
.sf-scores { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.sf-pill {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
}
.sf-original { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.sf-polished { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.6; }
.sf-polished em { font-style: normal; font-weight: 500; color: var(--brand-ink); }
.sf-notes { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.sf-praise {
  margin: 6px 0 0;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(154, 103, 0, 0.25);
  color: var(--warn);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}
.sf-reused { margin: 0; font-size: 12px; color: var(--brand-ink); }
.sf-tag {
  display: inline-block;
  background: rgba(51, 163, 21, 0.12);
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: 4px;
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 11px;
}

/* —— Done step —— */
.done-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--shadow);
}
.done-card h1 { margin: 0; font-size: 28px; color: var(--brand-ink); }
.challenge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.challenge-card {
  background: var(--panel-soft);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.15s ease;
}
.challenge-card:hover { border-color: var(--brand); transform: translateY(-2px); background: var(--panel); }
.challenge-card strong { font-size: 16px; color: var(--ink); }
.challenge-card p { margin: 0; color: var(--muted); font-size: 13px; }

@media (max-width: 1024px) {
  .study-header { grid-template-columns: 1fr; gap: 10px; }
  .score-grid { grid-template-columns: repeat(2, 1fr); }
  .challenge-grid { grid-template-columns: 1fr; }
  .dict-word { font-size: 32px; }
  .pronounce-word { font-size: 32px; }
}

/* =================================================================
   Phase 4 挑战 (challenges.js)
   ================================================================= */
.study-header.simple {
  grid-template-columns: auto 1fr auto;
}
.challenge-shell-header {
  display: grid;
  grid-template-columns: minmax(86px, auto) 1fr minmax(86px, auto);
  align-items: center;
}
.challenge-back-btn {
  justify-self: start;
}
.challenge-header-spacer {
  display: block;
  width: 86px;
}
.ch-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-ink);
  text-align: center;
}
.ch-section-title {
  margin: 0 0 6px;
  font-size: 22px;
  color: var(--ink);
  font-weight: 700;
}

/* —— Dictation —— */
.dict-wrong {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
}
.dict-wrong h3 { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.dict-wrong ul { margin: 0; padding-left: 20px; }
.dict-wrong li { font-size: 14px; color: var(--ink); margin: 4px 0; }
.dict-wrong li em { font-style: normal; color: var(--danger); margin-left: 8px; font-size: 13px; }

/* —— New Dialogue (Lisa-style) —— */
.dialogue-shell {
  max-width: 760px;
}
.dlg-screen {
  min-height: 100vh;
  max-width: 920px;
  margin: 0 auto;
  padding: 18px 20px 156px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background:
    radial-gradient(circle at top, rgba(210, 231, 255, 0.65), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f5f9ff 72%, #eef4ff 100%);
}
.dlg-screen.is-mobile {
  padding: 12px 14px calc(112px + env(safe-area-inset-bottom));
}
.dlg-screen-loading {
  padding-bottom: 48px;
}
.dlg-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dlg-topbar-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.dlg-topbar-title > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dlg-topbar-title strong {
  font-size: 16px;
  line-height: 1.1;
  color: #102235;
}
.dlg-topbar-title span {
  font-size: 12px;
  color: #6c7b8c;
}
.dlg-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dlg-icon-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: rgba(255,255,255,0.92);
  color: #0f2436;
  font: inherit;
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(15, 36, 54, 0.06);
}
.dlg-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 2px;
}
.dlg-stage-loading {
  justify-content: center;
  padding-top: 32px;
}
.dlg-stage-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dlg-stage-loading-text {
  margin: 0;
  color: #607286;
  font-size: 14px;
}
.dlg-stage-meta {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.dlg-stage-meta strong {
  font-size: 16px;
  color: #0f2436;
}
.dlg-stage-meta span {
  font-size: 13px;
  color: #708195;
}
.dlg-thread-wrap {
  flex: 1;
  min-height: 0;
}
.dlg-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px 26px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dlg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.dlg-tutor {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dlg-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(140deg, #4be619, #33a315);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(75, 230, 25, 0.25);
}
.dlg-avatar.small {
  width: 36px;
  height: 36px;
  font-size: 16px;
}
.dlg-tutor-meta {
  display: flex;
  flex-direction: column;
}
.dlg-tutor-meta strong {
  font-size: 18px;
  color: var(--ink);
}
.dlg-tutor-meta span {
  font-size: 13px;
  color: var(--muted);
}
.dlg-phone-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(140deg, #77e814, #5cc707);
  color: #fff;
  border: 0;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(119, 232, 20, 0.28);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.dlg-phone-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(119, 232, 20, 0.35);
}
.dlg-phone-ico {
  font-size: 16px;
}
.dlg-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dlg-progress-track {
  flex: 1;
  height: 10px;
  background: var(--panel-soft);
  border-radius: 999px;
  overflow: hidden;
}
.dlg-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4be619, #77e814);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.dlg-progress-text {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.dlg-progress-text b {
  color: var(--brand-ink);
  font-size: 15px;
}
.dlg-words-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px;
  background: var(--panel-soft);
  border-radius: 12px;
  border: 1px solid var(--line);
}
.dlg-words-pool .chat-word {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
  border: 1px solid var(--line);
  transition: all 0.15s ease;
}
.dlg-words-pool .chat-word.used {
  background: linear-gradient(140deg, #4be619, #33a315);
  color: #fff;
  border-color: transparent;
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.55);
}

.dlg-log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: none;
  min-height: 190px;
  overflow-y: auto;
  padding-right: 4px;
}
.dlg-turn {
  display: flex;
  gap: 0;
  align-items: flex-start;
}
.dlg-turn.ai {
  justify-content: flex-start;
}
.dlg-turn.user {
  justify-content: flex-end;
}
.dlg-turn.user .dlg-bubble {
  margin-left: auto;
}
.dlg-bubble {
  max-width: min(760px, 100%);
  border-radius: 22px;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.55;
  position: relative;
}
.dlg-bubble.ai {
  background: #eef3fa;
  border: 1px solid #d9e3f0;
  color: var(--ink);
  border-top-left-radius: 18px;
  box-shadow: 0 8px 18px rgba(15, 36, 54, 0.04);
}
.dlg-bubble.user {
  background: #ffffff;
  border: 1px solid #d6e4ee;
  color: #0f2436;
  border-top-right-radius: 18px;
}
.dlg-bubble-text {
  word-break: break-word;
  font-size: 16px;
  line-height: 1.48;
}
.dlg-bubble-text mark {
  background: rgba(75, 230, 25, 0.18);
  color: inherit;
  padding: 0 3px;
  border-radius: 4px;
  font-weight: 600;
}
.dlg-bubble.user mark {
  background: rgba(51, 163, 21, 0.22);
}
/* Today's learned vocab, surfaced inside the chat (both teacher + user turns):
   bold + fruit-green so the learner can see when a word they studied today is
   actually being used in conversation. */
.dlg-bubble-text .dlg-learned {
  color: #4d9400;
  font-weight: 700;
  background: rgba(124, 201, 30, 0.16);
  padding: 0 3px;
  border-radius: 4px;
}
body.rd-body-dark .dlg-bubble-text .dlg-learned,
.dlg-bubble.ai .dlg-learned,
.dlg-bubble.user .dlg-learned { color: #4d9400; }
.dlg-bubble-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.dlg-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(0,0,0,0.08);
  cursor: pointer;
  transition: all 0.12s ease;
}
.dlg-bubble.ai .dlg-action-pill {
  background: var(--panel);
  border-color: var(--line);
}
.dlg-action-pill:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.dlg-action-pill.active {
  background: var(--brand-ink);
  color: #fff;
  border-color: var(--brand-ink);
}

.dlg-analysis {
  margin-top: 12px;
  padding: 14px 16px;
  background: rgba(255, 251, 235, 0.92);
  border: 1px solid rgba(202, 138, 4, 0.2);
  border-radius: 12px;
  color: #1f2937;
  font-size: 13px;
  line-height: 1.6;
  animation: dlgFadeIn 0.25s ease;
}
@keyframes dlgFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dlg-analysis.error {
  background: rgba(254, 226, 226, 0.65);
  border-color: rgba(220, 38, 38, 0.3);
}
.dlg-analysis-head {
  font-weight: 700;
  font-size: 13px;
  color: var(--brand-ink);
  margin-bottom: 8px;
}
.dlg-analysis-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dlg-analysis-section {
  background: rgba(255,255,255,0.65);
  border-radius: 10px;
  padding: 10px 12px;
}
.dlg-analysis-section.dlg-polished {
  background: rgba(187, 247, 208, 0.5);
}
.dlg-analysis-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 4px;
}
.dlg-analysis-bigtext {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink);
}
.dlg-alt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dlg-alt-list li {
  font-size: 14px;
  line-height: 1.5;
}
.dlg-tips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dlg-tips li {
  padding-left: 14px;
  position: relative;
  font-size: 13px;
  color: #4b5563;
}
.dlg-tips li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--brand);
}
.dlg-fineprint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
.dlg-skel {
  display: block;
  height: 12px;
  background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.12), rgba(0,0,0,0.06));
  background-size: 200% 100%;
  animation: dlgSkel 1.2s linear infinite;
  border-radius: 6px;
  margin: 4px 0;
}
@keyframes dlgSkel {
  from { background-position: 0% 50%; }
  to   { background-position: -200% 50%; }
}
.dlg-pron-scores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.dlg-pron-score {
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 6px;
  text-align: center;
}
.dlg-pron-score b {
  font-size: 18px;
  color: var(--brand-ink);
  display: block;
}
.dlg-pron-score em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
}
.dlg-pron-issues {
  margin-top: 8px;
}
.dlg-pron-issues ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.dlg-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--panel-soft);
  border-radius: 14px;
  border: 1px solid var(--line);
}
.dlg-form textarea {
  border: 0;
  background: var(--panel);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  resize: vertical;
  font-family: inherit;
  color: var(--ink);
  min-height: 48px;
}
.dlg-form textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}
.dlg-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.dlg-mic-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--panel);
  border: 1.5px solid var(--line);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.dlg-mic-btn:hover {
  border-color: var(--brand);
  background: rgba(75, 230, 25, 0.06);
}
.dlg-send-btn {
  padding: 12px 28px;
  border-radius: 999px;
  background: linear-gradient(140deg, #4be619, #33a315);
  color: #fff;
  border: 0;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(75, 230, 25, 0.28);
}
.dlg-send-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.dlg-end {
  text-align: center;
  padding: 18px;
}
.dlg-end-stat {
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-ink);
  margin-bottom: 6px;
}
.dlg-end-stat b {
  font-size: 32px;
}
.dlg-pick .scenario-grid {
  margin-top: 14px;
}

.dlg-phone-modal {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 52% 37%, rgba(255,255,255,.78), transparent 20%),
    linear-gradient(135deg, #f4ddeb 0%, #d8ecff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 0;
  animation: dlgFadeIn 0.18s ease;
}
.dlg-phone-panel {
  position: relative;
  background: transparent;
  border-radius: 0;
  padding: 18px 16px 30px;
  max-width: 560px;
  width: 100%;
  min-height: 100dvh;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.dlg-phone-top {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dlg-phone-top .scene-btn,
.dlg-phone-top .txt-btn {
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #374151;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  padding: 10px 14px;
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
}
.dlg-phone-avatar {
  width: min(56vw, 280px);
  height: min(56vw, 280px);
  border-radius: 50%;
  background: linear-gradient(135deg, #f1a6c8, #7fd6ff);
  color: #fff;
  font-size: 64px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 80px rgba(15,23,42,.10);
  animation: dlgPulse 2s ease-in-out infinite;
}
@keyframes dlgPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
.dlg-phone-panel h2 {
  margin: 10px 0 0;
  font-size: clamp(22px, 6vw, 30px);
  color: #4b5563;
}

/* Avatar img + sizes */
.dlg-avatar-img {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(75, 230, 25, 0.2);
}
.dlg-avatar-img.lg, .dlg-avatar.lg { width: 48px; height: 48px; font-size: 20px; }
.dlg-avatar-img.sm, .dlg-avatar.sm { width: 36px; height: 36px; font-size: 16px; }
.dlg-avatar-img.hero, .dlg-avatar.hero {
  width: 138px;
  height: 138px;
  font-size: 52px;
  box-shadow: 0 16px 36px rgba(75, 230, 25, 0.18);
}
.dlg-tutor.dlg-tutor-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 8px 4px 0;
  border-radius: 12px;
  transition: background 0.15s ease;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
}
.dlg-tutor.dlg-tutor-btn:hover {
  background: var(--panel-soft);
}
.dlg-tutor-edit {
  margin-left: 6px;
  font-size: 14px;
  color: var(--muted);
}
.dlg-flag {
  font-size: 14px;
  margin-left: 4px;
}

/* Tutor picker modal */
.dlg-modal-wrap {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9100;
  padding: 18px;
  animation: dlgFadeIn 0.18s ease;
}
.dlg-tutor-picker, .dlg-azure-modal {
  background: var(--panel);
  border-radius: 20px;
  width: min(640px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 22px 60px rgba(0,0,0,0.3);
}
.dlg-tutor-picker header, .dlg-azure-modal header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.dlg-tutor-picker header h2, .dlg-azure-modal header h2 { margin: 0; font-size: 18px; }
.dlg-modal-close {
  background: transparent;
  border: 0;
  font-size: 22px;
  color: var(--muted);
  cursor: pointer;
}
.dlg-tutor-picker footer {
  padding: 12px 22px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.dlg-tutor-grid {
  padding: 16px 22px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px) {
  .dlg-tutor-grid { grid-template-columns: 1fr; }
}
.dlg-tutor-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--panel-soft);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: all 0.12s ease;
}
.dlg-tutor-card:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
}
.dlg-tutor-card.active {
  border-color: var(--brand);
  background: rgba(75, 230, 25, 0.08);
  box-shadow: 0 4px 14px rgba(75, 230, 25, 0.15);
}
.dlg-tutor-card .dlg-avatar-img, .dlg-tutor-card .dlg-avatar {
  width: 56px; height: 56px; font-size: 22px;
}
.dlg-tutor-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dlg-tutor-card-meta strong {
  font-size: 16px;
  color: var(--ink);
}
.dlg-tutor-card-tag {
  font-size: 11px;
  color: var(--brand-ink);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dlg-tutor-card-desc {
  font-size: 12px;
  color: var(--muted);
}
.dlg-tutor-card-preview {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  border: 0;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.dlg-tutor-card-preview:hover { transform: scale(1.05); }

.dlg-dock {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(920px, calc(100vw - 24px));
  padding: 8px;
  background: rgba(255,255,255,0.94);
  border: 1px solid #e1e8f0;
  border-radius: 24px;
  box-shadow: 0 18px 48px rgba(15, 36, 54, 0.14);
  backdrop-filter: blur(16px);
  display: block;
  z-index: 40;
}
.dlg-dock-input[hidden] {
  display: none !important;
}
.dlg-dock-input {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.dlg-dock-input textarea {
  min-height: 64px;
  border: 1px solid #d5e0ea;
  border-radius: 18px;
  padding: 14px 16px;
  resize: none;
  background: #f8fbff;
  color: #102235;
  font: inherit;
  font-size: 15px;
}
.dlg-dock-send {
  align-self: stretch;
  min-width: 92px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(140deg, #6de717, #64ce13);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0 20px;
}
.dlg-dock-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.dlg-talk-btn {
  min-height: 62px;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(140deg, #0d3152, #102a46);
  color: #fff;
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(13, 49, 82, 0.24);
}
.dlg-mini-btn {
  width: 62px;
  min-height: 62px;
  border-radius: 20px;
  border: 1px solid #dde6ef;
  background: #fff;
  color: #0f2436;
  font: inherit;
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.dlg-mini-btn.active {
  border-color: #0d3152;
  color: #0d3152;
  box-shadow: inset 0 0 0 2px rgba(13, 49, 82, 0.08);
}
.dlg-mini-btn.call {
  background: linear-gradient(140deg, #27d368, #11b958);
  color: #fff;
  border-color: transparent;
}

/* Azure pronunciation modal */
.dlg-azure-body {
  padding: 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dlg-azure-ref {
  background: var(--panel-soft);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink);
}
.dlg-azure-mic-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dlg-azure-mic {
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(140deg, #ef4444, #b91c1c);
  color: #fff;
  border: 0;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.3);
}
.dlg-azure-mic:disabled { opacity: 0.7; cursor: default; }
.dlg-azure-status {
  font-size: 13px;
  color: var(--muted);
}
.dlg-azure-result {
  background: rgba(255, 251, 235, 0.92);
  border: 1px solid rgba(202, 138, 4, 0.2);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dlg-azure-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

/* Phone modal: avatar + transcript */
.dlg-phone-avatar-img {
  width: min(42vw, 188px);
  height: min(42vw, 188px);
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 20px 70px rgba(15,23,42,.12),
    0 0 0 14px rgba(255,255,255,.42);
  animation: dlgPulse 2s ease-in-out infinite;
}
.dlg-phone-transcript {
  position: absolute;
  top: calc(80px + env(safe-area-inset-top));
  right: 12px;
  max-height: 46vh;
  overflow-y: auto;
  width: min(58vw, 420px);
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  padding: 12px;
  backdrop-filter: blur(10px);
}
.phone-line {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.phone-line.phone-user {
  background: rgba(187, 247, 208, 0.45);
  align-self: flex-end;
  max-width: 90%;
}
.phone-line.phone-ai {
  background: var(--panel-soft);
  align-self: flex-start;
  max-width: 90%;
}
.dlg-phone-actions {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dlg-phone-mic,
.dlg-phone-hangup {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 0;
  color: #fff;
  font: inherit;
  font-size: 28px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 38px rgba(15,23,42,.15);
}
.dlg-phone-mic {
  background: #fff;
  color: #172033;
  opacity: .86;
}
.dlg-phone-hangup {
  background: linear-gradient(140deg, #ef4444, #b91c1c);
  color: #fff;
  cursor: pointer;
}
.dlg-phone-note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(8px + env(safe-area-inset-bottom));
  color: rgba(17,24,39,.28);
  font-size: 12px;
}
@media (max-width: 620px) {
  .dlg-phone-transcript {
    left: 12px;
    right: 12px;
    top: calc(78px + env(safe-area-inset-top));
    width: auto;
    max-height: 34vh;
  }
}

@media (max-width: 640px) {
  .dlg-card { padding: 16px 14px; gap: 12px; }
  .dlg-bubble { max-width: 100%; padding: 14px 16px; }
  .dlg-pron-scores { grid-template-columns: repeat(2, 1fr); }
  .dlg-phone-btn span:last-child { display: none; }
  .dlg-icon-btn {
    width: 46px;
    height: 46px;
    font-size: 22px;
  }
  .dlg-stage-meta strong { font-size: 16px; }
  .dlg-stage-meta span { font-size: 12px; }
  .dlg-avatar-img.hero, .dlg-avatar.hero {
    width: 116px;
    height: 116px;
    font-size: 44px;
  }
  .dlg-dock {
    width: calc(100vw - 16px);
    bottom: calc(8px + env(safe-area-inset-bottom));
    padding: 8px;
    border-radius: 22px;
  }
  .dlg-dock-actions {
    grid-template-columns: minmax(0, 1fr) 58px;
    gap: 8px;
  }
  .dlg-talk-btn {
    min-height: 58px;
    font-size: 17px;
  }
  .dlg-mini-btn {
    width: 58px;
    min-height: 58px;
    border-radius: 18px;
    font-size: 22px;
  }
}

/* —— Dialogue (legacy compatibility — keep scenario-grid + chat-word) —— */
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.scenario-card {
  background: var(--panel-soft);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}
.scenario-card:hover {
  border-color: var(--brand);
  background: rgba(51, 163, 21, 0.04);
  transform: translateY(-2px);
}
.scenario-card strong { display: block; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.scenario-card p { margin: 0; font-size: 13px; color: var(--muted); font-style: italic; }
.scenario-card-loading {
  opacity: 0.55;
  cursor: progress;
  pointer-events: none;
}
.scenario-card-loading:hover {
  transform: none;
  background: var(--panel-soft);
  border-color: var(--line);
}
.scenario-words {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}
.scenario-word-chip {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  background: rgba(99, 102, 241, 0.10);
  color: #4338ca;
  border-radius: 999px;
  font-style: normal;
  font-weight: 600;
}
.scenario-actions {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.chat-card { gap: 14px; }
.chat-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}
.chat-head strong { font-size: 16px; color: var(--brand-ink); }
.chat-meta { font-size: 12px; color: var(--muted); }
.chat-words-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chat-word {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: "SF Mono", ui-monospace, monospace;
}
.chat-word.used {
  background: rgba(20, 122, 77, 0.1);
  border-color: var(--ok);
  color: var(--ok);
  text-decoration: line-through;
  font-weight: 600;
}
.chat-log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}
.chat-turn {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-turn .who {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.chat-turn p {
  margin: 0;
  background: var(--panel);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  align-self: flex-start;
  max-width: 90%;
}
.chat-turn.user p {
  background: rgba(51, 163, 21, 0.08);
  border-color: rgba(51, 163, 21, 0.3);
  color: var(--brand-ink);
  align-self: flex-end;
}
.chat-turn .who { align-self: flex-start; }
.chat-turn.user .who { align-self: flex-end; }
.chat-fb {
  font-style: italic;
  font-size: 12px;
  color: var(--brand-ink);
  background: rgba(51, 163, 21, 0.05);
  padding: 4px 8px;
  border-radius: 6px;
  align-self: flex-end;
  max-width: 90%;
}
.chat-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-form textarea {
  flex: 1;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  background: var(--panel-soft);
  color: var(--ink);
}
.chat-form textarea:focus { outline: none; border-color: var(--brand); background: var(--panel); }
.chat-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.chat-end {
  text-align: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
}
.chat-end-score {
  display: inline-block;
  background: linear-gradient(140deg, rgba(51, 163, 21, 0.95), rgba(75, 230, 25, 0.85));
  color: #fff;
  font-size: 38px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 14px;
}
.chat-end p { margin: 14px 0; color: var(--ink); }

/* —— Writing —— */
.writing-topic {
  margin: 0 0 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 15px;
  color: var(--ink);
  font-style: italic;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.writing-area {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  font-family: inherit;
  background: var(--panel-soft);
  color: var(--ink);
  line-height: 1.65;
  resize: vertical;
}
.writing-area:focus { outline: none; border-color: var(--brand); background: var(--panel); }
.writing-area:disabled { opacity: 0.85; }
.writing-meta {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}
.writing-result {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.polished-essay {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  color: var(--ink);
  margin: 0;
}

/* —— Reading —— */
.reading-meta { font-size: 12px; color: var(--muted); margin: 0; }
.reading-passage {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 22px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink);
  white-space: pre-wrap;
}
.reading-passage mark {
  background: rgba(51, 163, 21, 0.18);
  color: var(--brand-ink);
  padding: 0 4px;
  border-radius: 4px;
  font-weight: 600;
}
.reading-questions { display: flex; flex-direction: column; gap: 14px; }
.rq {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rq header { display: flex; align-items: baseline; gap: 10px; }
.rq-num {
  background: var(--brand);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  text-align: center;
  line-height: 22px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.rq header p { margin: 0; font-size: 14px; color: var(--ink); line-height: 1.5; }
.rq-opts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.rq-opt {
  width: 100%;
  text-align: left;
  background: var(--panel-soft);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  color: var(--ink);
}
.rq-opt:hover { border-color: var(--brand); }
.rq-opt.picked { border-color: var(--brand); background: rgba(51, 163, 21, 0.06); }
.rq-opt.right { background: rgba(20, 122, 77, 0.1); border-color: var(--ok); color: var(--ok); font-weight: 600; }
.rq-opt.wrong { background: rgba(180, 35, 24, 0.08); border-color: var(--danger); color: var(--danger); font-weight: 600; }
.rq-opt.dim { opacity: 0.5; }
.rq-explain {
  margin: 6px 0 0;
  background: var(--panel-soft);
  padding: 8px 12px;
  border-left: 3px solid var(--brand);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  color: var(--muted);
}
.reading-score {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-ink);
  margin-right: auto;
}

.loading-shimmer {
  height: 80px;
  background: linear-gradient(90deg, var(--panel-soft) 25%, var(--line) 50%, var(--panel-soft) 75%);
  background-size: 400% 100%;
  border-radius: 12px;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@media (max-width: 1024px) {
  .scenario-grid { grid-template-columns: 1fr; }
}

/* =================================================================
   行内跟读评测 + ASR 麦克风状态
   ================================================================= */
.dict-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 14px;
}
.dict-word-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.dict-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pron-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.pron-btn {
  font: inherit;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--brand);
  background: rgba(51, 163, 21, 0.06);
  color: var(--brand-ink);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.15s ease;
}
.pron-btn:hover { background: var(--brand); color: #fff; }
.pron-btn.primary { background: var(--brand); color: #fff; }
.pron-btn.primary:hover { background: var(--brand-ink); }
.pron-btn.rec {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
  animation: pulse 1.2s infinite;
}
.pron-btn.small {
  padding: 4px 10px;
  font-size: 12px;
}
.pron-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
}
.pron-summary strong {
  font-size: 16px;
  color: var(--brand-ink);
  font-weight: 700;
}
.pron-summary em {
  font-style: normal;
  color: var(--muted);
  font-size: 12px;
}
.pron-summary.pass { background: rgba(20,122,77,0.08); border-color: var(--ok); color: var(--ok); }
.pron-summary.pass strong { color: var(--ok); }
.pron-summary.fail { background: rgba(180,35,24,0.06); border-color: rgba(180,35,24,0.35); }
.pron-summary.fail strong { color: var(--danger); }
.pron-err {
  font-size: 12px;
  color: var(--danger);
  background: rgba(180,35,24,0.06);
  padding: 4px 10px;
  border-radius: 8px;
}
.word-scores.small { gap: 4px; margin-top: 4px; }
.word-scores.small .ws { font-size: 11px; padding: 3px 8px; }

/* 例句行：标准布局 */
.example-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.example-list li {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ex-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.ex-text { flex: 1; }

/* 搭配带翻译 */
.colloc-list.bigger {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.colloc-list.bigger li {
  background: rgba(51, 163, 21, 0.05);
  border: 1px solid rgba(51, 163, 21, 0.18);
  padding: 8px 14px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.colloc-list.bigger .colloc {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 14px;
  color: var(--brand-ink);
  background: transparent;
  border: none;
  padding: 0;
  font-weight: 600;
}
.colloc-zh {
  color: var(--ink);
  font-size: 13px;
  margin-left: auto;
}

/* =================================================================
   听音识词新版 + 设置页 + 造句卡片 + 搭配展开 + 更多例句
   ================================================================= */

/* 顶部模式切换 */
.listen-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.seg-toggle {
  display: inline-flex;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}
.seg-toggle button {
  font: inherit;
  padding: 6px 16px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
}
.seg-toggle button.active {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}
.seg-toggle.small button { padding: 5px 12px; font-size: 12px; }

/* 听音 block */
.listen-block.big {
  align-items: center;
  gap: 14px;
}
.btn-dontknow {
  font-size: 13px;
  padding: 8px 16px;
}

/* 拼写音标提示 */
.ipa-hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.ipa-hint em {
  font-style: normal;
  color: var(--brand-ink);
  font-weight: 600;
}

/* 选择 4 选 1 */
.choice-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.choice-opt {
  background: var(--panel-soft);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
  font-size: 16px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  transition: all 0.12s ease;
}
.choice-opt:hover { border-color: var(--brand); }
.choice-opt.picked { border-color: var(--brand); background: rgba(51, 163, 21, 0.06); }
.choice-opt.right {
  background: rgba(20,122,77,0.1);
  border-color: var(--ok);
  color: var(--ok);
  font-weight: 600;
}
.choice-opt.wrong {
  background: rgba(180,35,24,0.08);
  border-color: var(--danger);
  color: var(--danger);
  font-weight: 600;
}
.choice-opt.dim { opacity: 0.5; }

/* 设置页 */
/* 调整学习计划：「保存设置」吸底常驻，不用上滑就能看到，避免没保存就返回 */
.settings-shell { min-height: 100%; padding-bottom: 4px; }
.settings-shell .ob-step { padding-bottom: 8px; }
.settings-sticky-actions {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; gap: 12px; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg, #f6f7f9) 72%, transparent);
  backdrop-filter: blur(2px);
}
.settings-sticky-actions .btn-ghost { flex: 0 0 auto; }
.settings-sticky-actions .btn-primary { flex: 1 1 auto; }
.settings-head { display: flex; align-items: center; gap: 14px; padding: 10px 0 2px; }
.settings-shell .settings-head .settings-title { font-size: 20px; margin: 0; line-height: 1.2; }
.settings-back { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 7px 16px; font-size: 14px; font-weight: 800; cursor: pointer; }
.settings-back:active { transform: scale(.96); }
.settings-shell .settings-title { font-size: 24px; margin: 10px 0 4px; }
.diff-toggle { flex-wrap: wrap; }
.diff-toggle button { flex: 1 1 22%; min-width: 64px; }
.settings-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  margin-top: 14px;
  box-shadow: var(--shadow);
}
.settings-label {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  display: block;
  margin-bottom: 4px;
}
.settings-hint {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
}
.settings-stepper { justify-content: flex-start; }
.goal-grid.compact {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.goal-card.small {
  padding: 12px 10px;
  text-align: center;
  align-items: center;
}
.goal-card.small strong { font-size: 14px; }
.goal-card.small em { font-size: 10px; }
.goal-card.small p { display: none; }
.goal-card.small .goal-emoji { font-size: 22px; }
.ratio-control.wide { max-width: none; flex: 1; }

/* 搭配展开 */
.colloc-list.bigger li.colloc-row {
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  display: block;
}
.colloc-list.bigger li.colloc-row.open {
  background: rgba(51, 163, 21, 0.04);
  border-color: rgba(51, 163, 21, 0.22);
}
.colloc-toggle {
  width: 100%;
  background: rgba(51, 163, 21, 0.05);
  border: 1px solid rgba(51, 163, 21, 0.18);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  flex-wrap: wrap;
  transition: background 0.12s ease;
}
.colloc-toggle:hover { background: rgba(51, 163, 21, 0.1); }
.colloc-row.open .colloc-toggle {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: rgba(51, 163, 21, 0.1);
}
.chev {
  color: var(--brand);
  font-size: 14px;
  width: 14px;
  flex: 0 0 auto;
}
.colloc-examples {
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.colloc-ex-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--panel);
  border-radius: 8px;
  padding: 8px 12px;
}

/* 例句标题 + 难度切换 */
.examples-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.examples-head h3 { margin: 0; }

/* 更多例句按钮 */
.more-ex-row {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.more-ex-btn {
  font-size: 13px;
  padding: 8px 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.more-ex-btn:disabled {
  opacity: 0.7;
  cursor: progress;
}
.more-ex-spinner {
  display: inline-block;
  animation: rdSpin 1.4s linear infinite;
}
@keyframes rdSpin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
.more-ex-error {
  color: #dc2626;
  font-size: 12px;
}

/* 造句卡片 — 重新设计：更紧凑、灰底胶囊麦克风按钮 */
.sentences-section { gap: 14px; }
.sentences-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sentences-head h3 { margin: 0; }
.must-write-pill {
  background: rgba(154, 103, 0, 0.1);
  color: var(--warn);
  border: 1px solid rgba(154, 103, 0, 0.32);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.sentence-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sentence-row.card {
  position: relative;
  background: var(--panel-soft);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px 12px 44px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.sentence-row.card:focus-within {
  border-color: var(--brand);
  background: var(--panel);
}
.sentence-row.card .sentence-num {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--brand);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  text-align: center;
  line-height: 22px;
  font-size: 12px;
  font-weight: 700;
  padding: 0;
}
.sentence-row.card .sentence-input {
  flex: 1;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--panel);
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
  resize: vertical;
  min-height: 56px;
  max-height: 220px;
  font-family: inherit;
}
.sentence-row.card .sentence-input:focus {
  outline: none;
  border-color: var(--brand);
}
.sentence-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.btn-icon {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.btn-icon:hover { border-color: var(--danger); color: var(--danger); background: rgba(180,35,24,0.04); }
.btn-add-sentence {
  align-self: flex-start;
  background: rgba(51, 163, 21, 0.04);
  border: 1.5px dashed rgba(51, 163, 21, 0.32);
  color: var(--brand-ink);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  font-size: 13px;
  transition: background 0.12s ease;
}
.btn-add-sentence:hover { background: rgba(51, 163, 21, 0.1); }

/* hint 小字 */
.dict-section h3 .hint {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 8px;
}

/* ============================================================
   听说课程预览（Stage A）
   ============================================================ */
.course-shell {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 28px 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.course-hero {
  background: linear-gradient(140deg, rgba(51, 163, 21, 0.08), rgba(75, 230, 25, 0.04));
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.course-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.course-pill {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--brand-ink);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.course-pill.grammar {
  background: rgba(51, 163, 21, 0.1);
  border-color: rgba(51, 163, 21, 0.3);
}
.course-hero h1 { margin: 4px 0 4px; font-size: 28px; font-weight: 700; color: var(--ink); }
.course-warmup-zh { margin: 0; color: var(--brand-ink); font-size: 14px; }
.course-cta { margin-top: 8px; }

.course-section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow);
}
.course-section h2 { margin: 0; font-size: 18px; color: var(--brand-ink); }
.course-section h3 { margin: 12px 0 6px; font-size: 14px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.course-section.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.course-section.split > div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 26px;
  box-shadow: var(--shadow);
}
.course-section.dim {
  background: var(--panel-soft);
  border-style: dashed;
  box-shadow: none;
  font-size: 13px;
  color: var(--muted);
}

/* Dialogue */
.dialogue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: dt;
}
.dialogue-turn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px 14px 56px;
  border-radius: 14px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.dialogue-turn::before {
  counter-increment: dt;
  content: counter(dt);
  position: absolute;
  left: 16px;
  top: 14px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialogue-turn.b::before { background: var(--brand-ink); }
.dialogue-turn.active {
  background: rgba(51, 163, 21, 0.06);
  border-color: var(--brand);
}
.dt-head { display: flex; align-items: baseline; gap: 8px; }
.dt-speaker { font-weight: 700; color: var(--brand-ink); font-size: 13px; }
.dt-voice { font-size: 11px; color: var(--muted); }
.dt-line { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); }
.dt-zh { margin: 0; font-size: 13px; color: var(--muted); }
.dialogue-turn .btn-listen.tiny { position: absolute; right: 14px; top: 12px; }

/* Vocab + expression lists */
.vocab-list, .expr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vocab-list li, .expr-list li {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
}
.vocab-list strong, .expr-list strong { color: var(--brand-ink); font-size: 15px; margin-right: 6px; }
.vocab-ipa { color: var(--muted); font-size: 12px; margin-right: 6px; }
.vocab-pos { background: rgba(51, 163, 21, 0.1); color: var(--brand-ink); font-size: 11px; padding: 2px 6px; border-radius: 4px; margin-right: 6px; font-style: italic; }
.vocab-zh { color: var(--ink); font-size: 13px; }
.vocab-ex { margin: 4px 0 0; font-size: 13px; color: var(--ink); line-height: 1.5; }
.vocab-ex em { color: var(--muted); font-style: normal; margin-left: 6px; }

/* Grammar */
.grammar-quote {
  margin: 0;
  background: var(--panel-soft);
  border-left: 3px solid var(--brand);
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
}
.grammar-quote p { margin: 0; font-size: 15px; color: var(--ink); }
.grammar-quote em { font-style: normal; color: var(--muted); font-size: 13px; }
.pattern-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pattern-list code {
  background: rgba(51, 163, 21, 0.06);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--brand-ink);
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
}

/* Q&A */
.qa-list {
  list-style: decimal;
  padding-left: 22px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qa-list li { font-size: 14px; color: var(--ink); line-height: 1.5; }
.qa-list em.zh { color: var(--muted); font-style: normal; margin-left: 8px; font-size: 12px; }
.qa-list p { margin: 4px 0 0; color: var(--brand-ink); }

/* ============================================================
   听说课程 · Stage B 步进 UI
   ============================================================ */
.course-progress {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow);
}
.cp-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.cp-step { font-size: 13px; color: var(--brand-ink); font-weight: 600; }
.cp-bar {
  height: 6px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.cp-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #4be619, #33a315);
  transition: width 0.3s ease;
}

.lesson-step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow);
  margin-top: 16px;
}
.lesson-step h2 { margin: 0; font-size: 22px; color: var(--brand-ink); }

/* AI 老师对话气泡 */
.teacher-bubble {
  background: linear-gradient(135deg, rgba(51, 163, 21, 0.08), rgba(75, 230, 25, 0.04));
  border: 1px solid rgba(51, 163, 21, 0.25);
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.teacher-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.teacher-bubble p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

/* —— 5 · 语音讲解：画布 —— */
.phonetic-canvas-wrap {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.canvas-toolbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tool-btn {
  font: inherit;
  background: var(--panel);
  border: 1.5px solid var(--line);
  color: var(--ink);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
}
.tool-btn:hover { border-color: var(--brand); }
.tool-btn.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  font-weight: 600;
}
.tool-btn.ghost {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
  margin-left: auto;
}
.canvas-stage {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px 18px;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.canvas-sentence {
  margin: 0;
  font-size: 22px;
  line-height: 1.85;
  color: var(--ink);
  font-family: "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.02em;
  user-select: none;
  pointer-events: none;
}
.phonetic-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}
.phonetic-markup-preview {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  justify-content: center;
}
.phonetic-markup-preview img { max-width: 100%; max-height: 200px; border-radius: 8px; }

/* —— 6 · 操练 · 情绪表演 —— */
.emotion-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.emotion-pills button {
  font: inherit;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
}
.emotion-pills button.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  font-weight: 600;
}
.scenario-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scenario-list li {
  background: rgba(51, 163, 21, 0.06);
  border: 1px solid rgba(51, 163, 21, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--ink);
}
.lesson-step p.ob-sub { margin: 0; }
.ob-sub.small { font-size: 12px; }
.intro-image-wrap { display: flex; justify-content: center; }
.intro-image {
  max-width: 100%;
  max-height: 320px;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.intro-q {
  background: rgba(51, 163, 21, 0.06);
  border-left: 3px solid var(--brand);
  margin: 0;
  padding: 14px 18px;
  border-radius: 0 12px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.intro-q-en { margin: 0; font-size: 17px; color: var(--ink); font-weight: 500; }
.intro-q em { color: var(--muted); font-style: normal; font-size: 13px; }

.speak-zone { display: flex; flex-direction: column; gap: 10px; }
.speak-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.speak-input {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--panel-soft);
  font-size: 14px;
  font-family: inherit;
}
.speak-input:focus { outline: none; border-color: var(--brand); background: var(--panel); }
.speak-heard {
  flex: 1;
  background: var(--panel-soft);
  border: 1px dashed var(--line);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--brand-ink);
  min-height: 24px;
  font-style: italic;
}

.step-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 6px;
}

.reveal-line {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.big-line { margin: 0; font-size: 20px; line-height: 1.5; color: var(--ink); }
.big-line.zh { font-size: 15px; color: var(--muted); }
.reveal-line mark { background: rgba(51, 163, 21, 0.18); color: var(--brand-ink); padding: 0 4px; border-radius: 4px; }
.focus-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.stress-hint { margin: 0; }
.stress-hint mark {
  background: rgba(51, 163, 21, 0.18);
  color: var(--brand-ink);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.review-card {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.review-q { margin: 0; color: var(--muted); font-size: 13px; }
.review-hints {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pattern-history {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pattern-history li {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
}
.pattern-history li p { margin: 0; }

/* Sentence points */
.sp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sp-list li {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.sp-line { margin: 0; font-size: 14px; color: var(--ink); }
.sp-focus, .sp-notes, .sp-link, .sp-stress { margin: 0; color: var(--muted); font-size: 12px; }
.sp-focus em { color: var(--ink); font-style: normal; margin-left: 4px; }
.sp-stress mark { background: rgba(51, 163, 21, 0.18); color: var(--brand-ink); padding: 0 4px; border-radius: 4px; }

@media (max-width: 1024px) {
  .course-section.split { grid-template-columns: 1fr; }
}

/* 词汇量测评 · 各级别表现 */
.level-breakdown {
  margin-top: 18px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
}
.level-breakdown h3 {
  margin: 0 0 12px;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.level-breakdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lb-row {
  display: grid;
  grid-template-columns: 36px 100px 1fr 100px;
  align-items: center;
  gap: 12px;
  padding: 6px 4px;
  font-size: 13px;
}
.lb-row.empty { opacity: 0.45; }
.lb-row.passed .lb-level { background: var(--ok); }
.lb-level {
  background: var(--brand);
  color: #fff;
  text-align: center;
  padding: 3px 0;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
}
.lb-size { color: var(--muted); font-size: 12px; }
.lb-bar {
  height: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.lb-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #4be619, #33a315);
  border-radius: 999px;
}
.lb-row.passed .lb-bar span { background: linear-gradient(90deg, #22c55e, var(--ok)); }
.lb-stat { font-size: 12px; color: var(--ink); text-align: right; font-family: "SF Mono", ui-monospace, monospace; }
.lb-note {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--muted);
}

/* 生词本星按钮 */
.btn-star {
  font: inherit;
  background: var(--panel-soft);
  border: 1.5px solid var(--line);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.12s ease;
}
.btn-star:hover { border-color: var(--brand); color: var(--brand-ink); }
.btn-star.on {
  background: rgba(154,103,0,0.1);
  border-color: rgba(154,103,0,0.4);
  color: var(--warn);
  font-weight: 600;
}

/* ============================================================
   Account 页 + "我的" 页
   ============================================================ */
.account-shell { max-width: 480px; }
.account-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px 36px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.account-card h1 { margin: 0; font-size: 28px; }
.account-card a { color: var(--brand-ink); text-decoration: underline; }
.account-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.account-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.account-form input {
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
  background: var(--panel-soft);
  color: var(--ink);
  font-family: inherit;
}
.account-form input:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--panel);
}
.account-fineprint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.account-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.account-form .field label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.account-form .agree-line, .account-card .agree-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 4px 0;
  font-size: 14px;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.6;
  user-select: none;
}
.account-form .agree-line input[type="checkbox"],
.account-card .agree-line input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  accent-color: var(--brand);
  cursor: pointer;
  /* large tappable area on mobile */
  margin: 0 4px 0 0;
}
/* When the agree-line itself is a <label> wrapping the checkbox + text,
   the whole row is clickable (native label behavior). Cursor: pointer
   on the wrapper makes that explicit on desktop. */
.agree-line-wrap {
  cursor: pointer;
  padding: 8px 4px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.agree-line-wrap:hover {
  background: rgba(99, 102, 241, 0.04);
}
.agree-line-wrap .agree-text {
  flex: 1;
  line-height: 1.55;
}
.account-form .agree-line .agree-check-target,
.account-card .agree-line .agree-check-target {
  cursor: pointer;
  padding: 6px 4px;
  /* expand tappable region around the label text */
  -webkit-tap-highlight-color: rgba(75, 230, 25, 0.12);
}
.account-form .agree-line .agree-link,
.account-card .agree-line .agree-link {
  color: var(--brand-ink);
  text-decoration: underline;
  padding: 6px 2px;
  cursor: pointer;
}

/* ── 登录 / 注册 v2：去掉外框，顶部留出浮动返回键空间，勾选框与文字同行左对齐 ── */
.account-shell-v2 { max-width: 440px; margin: 0 auto; }
.account-shell-v2 .account-body { padding: calc(62px + env(safe-area-inset-top)) 24px 44px; display: flex; flex-direction: column; gap: 14px; }
.account-brand-row { font-size: 17px; font-weight: 800; color: var(--brand); letter-spacing: .4px; }
.account-shell-v2 h1 { margin: 4px 0 0; font-size: 30px; color: var(--ink); }
.account-shell-v2 .ob-sub { margin: 0; }
.account-shell-v2 .account-fineprint { margin-top: 12px; text-align: left; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
/* 勾选框：左侧 + 文字右侧，始终同一行、左对齐（之前会换行 / 居中显示） */
.account-shell-v2 .agree-line { flex-wrap: nowrap; align-items: flex-start; gap: 9px; padding: 4px 0; margin: 2px 0; background: transparent; }
.account-shell-v2 .agree-line input[type="checkbox"] { flex: none; margin: 2px 0 0; width: 20px; height: 20px; }
.account-shell-v2 .agree-line .agree-text { flex: 1; min-width: 0; line-height: 1.55; text-align: left; }

/* ── 登录页 帆书风格（acc3）：弹层式、居中 logo、标签页、+86、协议气泡 ── */
.acc3-shell { max-width: 480px; margin: 0 auto; min-height: 100vh; background: #fff; position: relative; }
.acc3-close { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 16px; z-index: 5; width: 34px; height: 34px; border: 0; background: transparent; font-size: 28px; line-height: 1; color: #9aa3a0; cursor: pointer; }
.acc3-body { padding: calc(64px + env(safe-area-inset-top)) 28px 40px; display: flex; flex-direction: column; align-items: center; }
.acc3-logo { width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(135deg, #33a315, #4be619); display: grid; place-items: center; box-shadow: 0 8px 22px rgba(51, 163, 21, .28); }
.acc3-logo-mark { color: #fff; font-size: 32px; font-weight: 800; }
.acc3-brand { margin-top: 12px; font-size: 21px; font-weight: 800; color: #38482f; letter-spacing: 1px; }
.acc3-title { margin: 22px 0 0; font-size: 21px; font-weight: 700; color: #3c4b34; }
.acc3-tabs { display: flex; gap: 36px; margin: 30px 0 8px; }
.acc3-tab { position: relative; border: 0; background: transparent; font-size: 17px; font-weight: 700; color: #9aa5a0; cursor: pointer; padding: 6px 0; }
.acc3-tab.on { color: #38482f; }
.acc3-tab.on::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -2px; width: 60%; height: 3px; border-radius: 999px; background: var(--brand, #33a315); }
.acc3-form { width: 100%; display: flex; flex-direction: column; margin-top: 14px; }
.acc3-pane { display: flex; flex-direction: column; gap: 14px; }
.acc3-pane[hidden] { display: none !important; }
.acc3-input { display: flex; align-items: center; background: #f4f6f5; border-radius: 12px; padding: 0 16px; height: 54px; }
.acc3-input input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; color: #38482f; outline: none; height: 100%; font-family: inherit; }
.acc3-input input::placeholder { color: #aab3af; }
.acc3-cc { font-size: 16px; font-weight: 600; color: #46524e; }
.acc3-vline { width: 1px; height: 20px; background: #d4dcd9; margin: 0 12px; }
.acc3-getcode { flex: none; border: 0; background: transparent; color: var(--brand, #33a315); font-size: 15px; font-weight: 700; cursor: pointer; padding-left: 12px; white-space: nowrap; }
.acc3-err { color: #d9534f; font-size: 13px; margin: 12px 2px 0; text-align: left; }
.acc3-submit { margin-top: 22px; width: 100%; height: 52px; border: 0; border-radius: 999px; background: var(--brand, #33a315); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px rgba(51, 163, 21, .26); }
.acc3-submit:active { transform: translateY(1px); }
.acc3-tip { position: relative; align-self: flex-start; margin: 14px 0 0 4px; background: #4a5741; color: #fff; font-size: 12.5px; padding: 7px 12px; border-radius: 8px; }
.acc3-tip::after { content: ""; position: absolute; left: 16px; bottom: -5px; width: 10px; height: 10px; background: #4a5741; transform: rotate(45deg); }
.acc3-agree { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 8px; margin-top: 12px; cursor: pointer; }
.acc3-agree input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--brand, #33a315); cursor: pointer; }
.acc3-agree-text { flex: 1 1 auto; min-width: 0; font-size: 13px; color: #6b7975; line-height: 1.5; }
.acc3-agree-text a { color: var(--brand-ink, #318b16); }
.acc3-switch { margin: 18px 0 0; font-size: 14px; color: #8a9590; text-align: center; }
.acc3-switch a { color: var(--brand-ink, #318b16); font-weight: 600; }
.acc3-fineprint { margin-top: 22px; font-size: 12px; color: #aab3af; text-align: center; line-height: 1.6; }

/* ── 全站底部备案信息（首页底部）── */
.site-footer { margin: 30px 0 0; padding: 24px 18px calc(28px + env(safe-area-inset-bottom)); text-align: center; border-top: 1px solid rgba(0,0,0,.06); color: #9aa5a0; font-size: 12px; line-height: 1.95; }
.site-footer-links { margin-bottom: 6px; }
.site-footer-links a { color: #6b7975; text-decoration: none; }
.site-footer-dot { margin: 0 8px; color: #c3ccc8; }
.site-footer-icp { display: inline-block; color: #8a9590; text-decoration: none; }
.site-footer-icp:active { color: var(--brand, #33a315); }
.site-footer-co, .site-footer-mail, .site-footer-copy { color: #aab3af; }

/* Phone / Username tabs */
.auth-tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0 12px;
  background: var(--panel-soft);
  border-radius: 12px;
  padding: 4px;
}
.auth-tab {
  flex: 1;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s ease;
}
.auth-tab.active {
  background: var(--panel);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.account-form button[type="submit"][disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.account-err {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: #b91c1c;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
}
.legal-modal-wrap {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 16px;
}
.legal-modal {
  background: var(--panel);
  border-radius: 18px;
  width: min(720px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.32);
}
.legal-modal header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}
.legal-modal header h2 { margin: 0; font-size: 20px; }
.legal-modal .legal-close {
  background: transparent;
  border: 0;
  font-size: 24px;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
}
.legal-modal .legal-body {
  padding: 18px 24px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}
.legal-modal .legal-body h3 {
  margin: 18px 0 6px;
  font-size: 15px;
}
.legal-modal footer {
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
}

/* Industry exam picker cards */
.industry-exams {
  margin: 18px 0 8px;
}
.industry-exams h3 {
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--brand-ink);
}
.exam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.exam-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1.5px solid var(--brand);
  border-radius: 14px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.exam-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(51, 163, 21, 0.12);
}
.exam-card-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.exam-card-head strong {
  font-size: 15px;
  color: var(--ink);
}
.exam-card-en {
  font-size: 11px;
  color: var(--brand-ink);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.exam-card-desc {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}
.exam-card-count {
  font-size: 11px;
  color: var(--brand);
  font-weight: 600;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.exam-card-pct {
  font-weight: 400;
  color: var(--muted);
}
.exam-card-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(202, 138, 4, 0.18);
  color: #b45309;
  font-size: 10px;
  font-weight: 600;
  vertical-align: middle;
  animation: pulse-badge 1.8s ease-in-out infinite;
}
@keyframes pulse-badge {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.exam-card-progress {
  width: 100%;
  height: 4px;
  background: var(--line);
  border-radius: 999px;
  margin-top: 6px;
  overflow: hidden;
}
.exam-card-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4be619, #33a315);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* ─── Home tools section ─── */
.home-tools {
  margin-top: 22px;
}
.home-tools h3 {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}
.home-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.home-tool-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.home-tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  border-color: var(--brand);
}
.ht-icon { font-size: 24px; margin-bottom: 2px; }
.ht-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.ht-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* ─── Reading feature ─── */
.rd-shell, .rd-view-shell {
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 18px 80px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rd-header, .rd-view-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 12px;
  border-bottom: 1px solid var(--line);
}
.rd-header h1 { margin: 0; font-size: 22px; flex: 1; }
.rd-shanbay-shell {
  max-width: 760px;
  gap: 12px;
  background: linear-gradient(180deg, #f8fbf8 0%, #ffffff 34%);
}
.rd-shanbay-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
  border-radius: 24px;
  background: linear-gradient(135deg, #3c6523, #33a315);
  color: #f5fff9;
  box-shadow: 0 18px 42px rgba(51, 163, 21, 0.22);
}
.rd-shanbay-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  color: rgba(236, 253, 245, 0.72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rd-shanbay-hero h1 {
  margin: 0;
  font-size: clamp(28px, 7vw, 44px);
  line-height: 1;
  letter-spacing: -0.04em;
}
.rd-shanbay-hero p {
  margin: 10px 0 0;
  max-width: 460px;
  color: rgba(245, 253, 240, 0.84);
  font-size: 14px;
  line-height: 1.55;
}
.rd-shanbay-ring {
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: conic-gradient(from 190deg, #facc15, #83d334, #b7f699, #facc15);
  color: #355d1f;
  box-shadow: inset 0 0 0 10px rgba(255,255,255,0.72);
  font-weight: 900;
}
.rd-shanbay-ring span { font-size: 22px; line-height: 1; }
.rd-shanbay-ring em {
  display: block;
  margin-top: -18px;
  font-style: normal;
  font-size: 11px;
  color: rgba(53, 93, 31, 0.72);
}
.rd-skeleton-list { display: grid; gap: 12px; }
.rd-skeleton-card {
  display: grid;
  grid-template-columns: 1fr 96px;
  gap: 12px;
  min-height: 112px;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.rd-skeleton-card i,
.rd-skeleton-card b,
.rd-skeleton-card span {
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, #eef2f7, #f8fafc, #eef2f7);
  background-size: 180% 100%;
  animation: rdSkeleton 1.2s ease-in-out infinite;
}
.rd-skeleton-card i { height: 18px; align-self: end; }
.rd-skeleton-card b { height: 48px; grid-column: 2; grid-row: 1 / span 3; border-radius: 16px; }
.rd-skeleton-card span { height: 12px; }
@keyframes rdSkeleton {
  0% { background-position: 0% 50%; }
  100% { background-position: 180% 50%; }
}
.rd-level-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: linear-gradient(140deg, #0ae317, #15f817);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  vertical-align: middle;
}
.rd-generate-btn {
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(140deg, #6366f1, #4f46e5);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.32);
}
.rd-generate-btn:disabled { opacity: 0.6; cursor: default; }
.rd-hint-card {
  background: linear-gradient(140deg, #eeffec, #f5fdf0);
  border: 1px solid #a8fca5;
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rd-hint-tag {
  align-self: flex-start;
  padding: 3px 12px;
  border-radius: 999px;
  background: linear-gradient(140deg, #0ae317, #15f817);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.rd-hint-card p { margin: 0; font-size: 13px; line-height: 1.6; color: #13be21; }
.rd-list { display: flex; flex-direction: column; gap: 12px; }
.rd-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.rd-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.08); }
.rd-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.rd-card h2 { margin: 0; font-size: 17px; flex: 1; }
.rd-level-pill {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(10, 227, 23, 0.12);
  color: #13be21;
  font-size: 11px;
  font-weight: 600;
}
.rd-preview { margin: 8px 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.rd-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rd-card-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.rd-vocab-pill {
  padding: 2px 8px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 11px;
  color: var(--muted);
}
.rd-empty { text-align: center; color: var(--muted); padding: 40px 0; }

/* ─── Article-view reader prefs (theme/font/size) ─── */
.rd-view-shell {
  max-width: 1160px;
  margin: 0 auto;
  padding: 14px 20px 100px;
  transition: background-color 0.3s ease, color 0.3s ease;
  min-height: 100vh;
}
.rd-rd-theme-light  { background: var(--bg); color: var(--ink); }
.rd-rd-theme-sepia  { background: #f3eddc; color: #4a3a25; }
.rd-rd-theme-dark   { background: #14151a; color: #e6e6ea; }

/* Body-level theme — the shell is a centered narrow column; the body
   shows on either side and behind it. Match the page chrome to the theme. */
body.rd-body-light  { background: #fafafa; }
body.rd-body-sepia  { background: #ede4cc; }
body.rd-body-dark   { background: #14151a; color: #e6e6ea; }

/* Dark theme overrides — the article card, paragraph text, header label
   chip, and the hint banner all need explicit colors so the page is fully
   dark (not just the outer shell). */
.rd-rd-theme-dark .rd-view-article {
  background: #1c1d22;
  border-color: #2b2d33;
  color: #e6e6ea;
}
.rd-rd-theme-dark .rd-view-article h1 { color: #f5f5f7; }
.rd-rd-theme-dark .rd-para-en { color: #e6e6ea; }
.rd-rd-theme-dark .rd-para-zh {
  background: #2b2d33;
  border-left-color: #6366f1;
  color: #c7c7cc;
}
.rd-rd-theme-dark .rd-level-pill {
  background: rgba(99, 102, 241, 0.22);
  color: #c7d2fe;
}
.rd-rd-theme-dark .rd-hl-hint {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.10), rgba(99, 102, 241, 0.12));
  border-color: rgba(99, 102, 241, 0.30);
  color: #c7c7cc;
}
.rd-rd-theme-dark .rd-wiki-attribution {
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
  border-left-color: #22c55e;
}
.rd-rd-theme-dark .rd-wiki-attribution a { color: #86efac; }

/* Sepia variant — keep the article card matching the warm background */
.rd-rd-theme-sepia .rd-view-article {
  background: #faf3e0;
  border-color: #d8c89a;
  color: #4a3a25;
}
.rd-rd-theme-sepia .rd-view-article h1 { color: #2a2014; }
.rd-rd-theme-sepia .rd-para-en { color: #3b2e16; }

/* 自托管阅读字体（woff2，从本站加载，国内/安卓也能渲染——系统字体名在安卓上会全部
   回退成 Roboto 导致"看起来一模一样"，所以这几款必须自带文件）。4 款风格差异明显：
   Lora 优雅衬线 · Nunito 圆润无衬线 · Bitter 厚重板衬线 · Oswald 紧凑标题体。 */
@font-face { font-family:"VP Lora";   src:url("fonts/lora-400.woff2")   format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"VP Lora";   src:url("fonts/lora-700.woff2")   format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"VP Nunito"; src:url("fonts/nunito-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"VP Nunito"; src:url("fonts/nunito-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"VP Bitter"; src:url("fonts/bitter-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"VP Bitter"; src:url("fonts/bitter-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"VP Oswald"; src:url("fonts/oswald-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"VP Oswald"; src:url("fonts/oswald-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

.rd-rd-font-system  .rd-view-article { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Roboto, sans-serif; }
.rd-rd-font-lora    .rd-view-article { font-family: "VP Lora", Georgia, "Noto Serif", serif; }
.rd-rd-font-nunito  .rd-view-article { font-family: "VP Nunito", "Segoe UI", Roboto, sans-serif; }
.rd-rd-font-bitter  .rd-view-article { font-family: "VP Bitter", "Roboto Slab", Georgia, serif; }
.rd-rd-font-oswald  .rd-view-article { font-family: "VP Oswald", "Roboto Condensed", "Arial Narrow", sans-serif; }
/* 旧字体类名保留兼容（已保存过偏好的老用户不至于回退到无样式）。 */
.rd-rd-font-serif      .rd-view-article { font-family: "VP Lora", Georgia, "Noto Serif", serif; }
.rd-rd-font-verdana    .rd-view-article { font-family: "VP Nunito", "Segoe UI", Roboto, sans-serif; }
.rd-rd-font-courier    .rd-view-article { font-family: "VP Bitter", "Roboto Slab", Georgia, serif; }
.rd-rd-font-condensed  .rd-view-article { font-family: "VP Oswald", "Roboto Condensed", "Arial Narrow", sans-serif; }
.rd-rd-font-newsreader .rd-view-article { font-family: "VP Lora", "Source Serif Pro", Georgia, serif; }
/* Additional curated fonts — all use widely-available system fonts so the
   choice is reflected even when the device has nothing extra installed. */
.rd-rd-font-pingfang   .rd-view-article { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
.rd-rd-font-songti     .rd-view-article { font-family: "Songti SC", "STSong", "SimSun", "Source Han Serif SC", serif; }
.rd-rd-font-kaiti      .rd-view-article { font-family: "Kaiti SC", "STKaiti", "KaiTi", "FZKai-Z03S", serif; }
.rd-rd-font-yahei      .rd-view-article { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
.rd-rd-font-sourcehan-sans  .rd-view-article { font-family: "Source Han Sans SC", "PingFang SC", "Noto Sans CJK SC", sans-serif; }
.rd-rd-font-sourcehan-serif .rd-view-article { font-family: "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", serif; }
.rd-rd-font-inter      .rd-view-article { font-family: "Inter", -apple-system, "Helvetica Neue", sans-serif; }
.rd-rd-font-merriweather .rd-view-article { font-family: "Merriweather", Georgia, serif; }
.rd-rd-font-charter    .rd-view-article { font-family: "Charter", "Iowan Old Style", Georgia, serif; }
.rd-rd-font-helvetica  .rd-view-article { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* Custom font slot — applied via inline style when the user picks a local-only font. */
.rd-rd-font-custom .rd-view-article { font-family: var(--rd-custom-font, inherit); }

/* CSS variables used by the font-grid swatch buttons so each label is
   rendered IN its own font (so the user can see what they'll get). */
.rd-rd-prefs {
  --rd-font-system: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  --rd-font-pingfang: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --rd-font-songti: "Songti SC", "STSong", "SimSun", serif;
  --rd-font-kaiti: "Kaiti SC", "STKaiti", "KaiTi", serif;
  --rd-font-yahei: "Microsoft YaHei", "PingFang SC", sans-serif;
  --rd-font-sourcehan-sans: "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --rd-font-sourcehan-serif: "Source Han Serif SC", "Noto Serif CJK SC", serif;
  --rd-font-serif: Georgia, "Source Serif Pro", serif;
  --rd-font-newsreader: "Newsreader", Georgia, serif;
  --rd-font-inter: "Inter", -apple-system, sans-serif;
  --rd-font-merriweather: "Merriweather", Georgia, serif;
  --rd-font-charter: "Charter", "Iowan Old Style", Georgia, serif;
  --rd-font-helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.rd-rd-pref-row-stack { flex-direction: column; align-items: stretch; }
.rd-rd-pref-row-stack > span { margin-bottom: 6px; }
.rd-rd-pref-opts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.rd-rd-pref-opts-grid button {
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.rd-rd-pref-opts-grid button.active {
  outline: 2px solid #6366f1;
  outline-offset: 1px;
  background: #eef2ff;
}
.rd-rd-font-local-btn { font-family: inherit !important; font-weight: 500; }

/* Local-fonts picker modal */
.rd-fontpicker-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
}
.rd-fontpicker-card {
  width: min(620px, 92vw);
  max-height: 80vh;
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
}
.rd-fontpicker-card header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #eef2f7;
}
.rd-fontpicker-card header h3 { font-size: 15px; margin: 0; flex: 0 0 auto; }
.rd-fontpicker-search {
  flex: 1; padding: 6px 10px;
  border: 1px solid #e5e7eb; border-radius: 6px; font-size: 14px;
}
.rd-fontpicker-close {
  border: none; background: none; font-size: 20px; cursor: pointer;
  color: #94a3b8; padding: 0 4px;
}
.rd-fontpicker-list {
  flex: 1; overflow-y: auto;
  margin: 0; padding: 0; list-style: none;
}
.rd-fontpicker-list li {
  padding: 10px 16px;
  border-bottom: 1px solid #f1f5f9;
  display: flex; flex-direction: column; gap: 2px;
  cursor: pointer;
}
.rd-fontpicker-list li:hover { background: #f8fafc; }
.rd-fontpicker-sample { font-size: 16px; color: #0f172a; }
.rd-fontpicker-name { font-size: 12px; color: #64748b; }

/* Font size — controls only font-size; line-height is applied via .rd-rd-lh-*  */
.rd-rd-size-small  .rd-para-en { font-size: 14.5px; }
.rd-rd-size-medium .rd-para-en { font-size: 16px;   }
.rd-rd-size-large  .rd-para-en { font-size: 18px;   }
.rd-rd-size-xlarge .rd-para-en { font-size: 21px;   }
/* Line-height — 3 presets that the user picks independently of size */
.rd-rd-lh-compact .rd-para-en { line-height: 1.55; }
.rd-rd-lh-normal  .rd-para-en { line-height: 1.85; }
.rd-rd-lh-loose   .rd-para-en { line-height: 2.15; }

/* Top-right toolbar (3 buttons: 标注 / Aa / 日夜) */
.rd-rd-toolbar {
  display: flex;
  gap: 4px;
}
.rd-rd-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  height: 36px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  color: inherit;
  font-size: 16px;
  opacity: 0.85;
  transition: all 0.15s ease;
}
.rd-rd-tool-btn:hover {
  opacity: 1;
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.25);
}
.rd-rd-tool-btn.active {
  background: rgba(99, 102, 241, 0.15);
  border-color: #6366f1;
  color: #4338ca;
}
.rd-rd-theme-dark .rd-rd-tool-btn { border-color: rgba(255,255,255,0.12); }
.rd-rd-theme-dark .rd-rd-tool-btn:hover { background: rgba(255,255,255,0.08); }
.rd-rd-tool-label {
  font-size: 12px;
  font-weight: 600;
  margin-left: 2px;
}
.rd-rd-tool-aa {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.04em;
}
.rd-rd-tool-aa::first-letter {
  font-size: 22px;
}

.rd-rd-icon-btn {
  width: 36px; height: 36px;
  border: none; background: transparent;
  font-size: 18px; cursor: pointer;
  border-radius: 8px; color: inherit;
  opacity: 0.7;
}
.rd-rd-icon-btn:hover { opacity: 1; background: rgba(0,0,0,0.05); }
.rd-rd-theme-dark .rd-rd-icon-btn:hover { background: rgba(255,255,255,0.08); }

.rd-rd-prefs {
  background: rgba(0,0,0,0.04);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.rd-rd-theme-dark .rd-rd-prefs { background: rgba(255,255,255,0.05); }
.rd-rd-pref-row {
  display: grid; grid-template-columns: 50px 1fr; gap: 10px;
  align-items: center; margin: 4px 0;
}
.rd-rd-pref-row > span { font-size: 12px; opacity: 0.7; }
.rd-rd-pref-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.rd-rd-pref-opts button {
  padding: 4px 10px; font-size: 12px;
  border: 1px solid rgba(0,0,0,0.1);
  background: transparent; border-radius: 6px;
  cursor: pointer; color: inherit;
}
.rd-rd-theme-dark .rd-rd-pref-opts button { border-color: rgba(255,255,255,0.15); }
.rd-rd-pref-opts button.active {
  background: #6366f1; color: #fff; border-color: #6366f1;
}
.rd-rd-theme-btn.active { box-shadow: 0 0 0 2px #6366f1; }

/* Cover image inside article view */
.rd-view-cover {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 18px;
  display: block;
}
.rd-view-subtitle-zh {
  margin: -4px 0 14px;
  color: #475569;
  font-size: 15px;
  line-height: 1.55;
}
.rd-rd-theme-dark .rd-view-subtitle-zh { color: rgba(255,255,255,0.7); }
.rd-rd-theme-sepia .rd-view-subtitle-zh { color: #6b563a; }
.rd-view-follow {
  margin-left: auto;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.rd-view-follow.is-followed {
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
}
.rd-view-follow:hover { background: #f1f5f9; }
.rd-view-follow.is-followed:hover { background: #4f46e5; }

/* ─── Search box (P10-G) ─── */
.rd-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.rd-search:focus-within { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.rd-search-icon { font-size: 15px; color: #94a3b8; flex: 0 0 auto; display: inline-flex; align-items: center; }
.rd-search-icon .rd-ic { width: 17px; height: 17px; }
/* 阅读首页 筛选/卡片 手绘图标对齐 */
.rd-filter-label .rd-ic { width: 15px; height: 15px; vertical-align: -3px; }
.rd-chip .rd-ic { width: 14px; height: 14px; vertical-align: -2.5px; }
.rd-art-topic .rd-ic { width: 15px; height: 15px; vertical-align: -3px; }
.rd-art-diff .rd-ic, .rd-art-words .rd-ic { width: 13px; height: 13px; vertical-align: -2px; }
.rd-search-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  color: #0f172a;
  padding: 2px 0;
}
.rd-search-input::placeholder { color: #94a3b8; }
.rd-search-clear {
  border: 0;
  background: #f1f5f9;
  color: #475569;
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.rd-search-clear:hover { background: #e2e8f0; }

/* ─── Section head with "查看历史" link (P10-F) ─── */
.rd-events-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.rd-events-section-head h3 { margin: 0; }
.rd-history-link {
  border: 0;
  background: transparent;
  color: #6366f1;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.rd-history-link:hover { background: rgba(99,102,241,0.08); }

/* ─── History page ─── */
.rd-history-list { display: flex; flex-direction: column; gap: 28px; }
.rd-history-month-head {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 500;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5e7eb;
  letter-spacing: 1px;
}
.rd-history-rows { display: flex; flex-direction: column; gap: 12px; }
.rd-history-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
}
.rd-history-row:hover { transform: translateY(-1px); border-color: #c7d2fe; }
.rd-history-cover {
  width: 140px;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f5f9;
  position: relative;
}
.rd-history-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-history-cover .rd-event-cover-gradient { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.rd-history-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rd-history-meta { display: flex; align-items: center; gap: 8px; }
.rd-history-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 500;
}
.rd-history-badge-headline { background: #fee2e2; color: #b91c1c; }
.rd-history-badge-major    { background: #dbeafe; color: #1e40af; }
.rd-history-badge-minor    { background: #f1f5f9; color: #475569; }
.rd-history-badge-closed   { background: #f3e8ff; color: #6b21a8; }
.rd-history-badge-archived { background: #e5e7eb; color: #4b5563; }
.rd-history-date { font-size: 12px; color: #94a3b8; }
.rd-history-body h4 { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: #0f172a; }
.rd-history-en { margin: 0; font-size: 12px; color: #64748b; }
.rd-history-summary { margin: 4px 0 0; font-size: 13px; color: #475569; line-height: 1.5; }

/* ─── Embedded Bilibili video tab (P8-2) ─── */
.rd-evd-video-list { display: flex; flex-direction: column; gap: 18px; }
.rd-evd-video-hint {
  margin: 0 0 4px;
  color: #64748b;
  font-size: 12px;
}
.rd-evd-video-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rd-evd-video-label {
  display: inline-block;
  padding: 2px 8px;
  background: #eef2ff;
  color: #4338ca;
  border-radius: 999px;
  font-size: 11px;
  width: fit-content;
}
.rd-evd-video-card h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.rd-evd-video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;   /* 16:9 */
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.rd-evd-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.rd-evd-video-note { margin: 0; color: #475569; font-size: 13px; line-height: 1.5; }
.rd-evd-video-hint-small {
  margin: 4px 0 0;
  font-size: 11px;
  color: #94a3b8;
}
.rd-evd-video-link {
  align-self: flex-start;
  font-size: 12px;
  color: #0ea5e9;
  text-decoration: none;
}
.rd-evd-video-link:hover { text-decoration: underline; }
.rd-view-meta {
  display: flex;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 18px;
  flex-wrap: wrap;
}
.rd-rd-theme-dark .rd-view-meta { color: rgba(255,255,255,0.55); }

/* ─── Vocab-level tagging — black + bold (no color tint) ─── */
/* When the user selects a level in the prefs panel, every word/phrase that
   appears in that exam's vocab bank renders bold + slightly darker. Same look
   across all five levels so the body stays readable. */
.rd-vocab-tag {
  font-weight: 700;
  color: #0f172a;
}
.rd-rd-theme-dark .rd-vocab-tag { color: #f5f5f7; }
.rd-rd-theme-sepia .rd-vocab-tag { color: #2a2014; }

/* Vocab picker row in the prefs sheet */
.rd-vocab-row button {
  font-weight: 600;
}
.rd-vocab-row button.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
}
.rd-rd-vocab-hint {
  margin: 6px 4px 0;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.85;
}

/* ─── Underline rendering (matches Aixie's .inline-underline) ─── */
.inline-underline {
  --underline-accent: #8c61ff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.inline-underline.underline-highlight {
  background: color-mix(in srgb, var(--underline-accent) 26%, transparent);
  border-radius: 0.22em;
  box-shadow: inset 0 -0.16em 0 color-mix(in srgb, var(--underline-accent) 26%, transparent);
}
.inline-underline.underline-line {
  text-decoration: underline 2px solid var(--underline-accent);
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
}
.inline-underline.underline-line .rd-word { padding: 0; }
.inline-underline.underline-wave .rd-word { padding: 0; }
.inline-underline.underline-wave {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--underline-accent);
  text-decoration-thickness: 1.7px;
  text-underline-offset: 4px;
}
/* Preview swatch (used inside the picker buttons) */
.underline-preview {
  --underline-accent: #8c61ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  color: #1f2329;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}
.underline-preview.underline-highlight {
  background: color-mix(in srgb, var(--underline-accent) 22%, rgba(31, 35, 41, 0.06));
}
.underline-preview.underline-line {
  text-decoration: underline 2px var(--underline-accent);
  text-underline-offset: 3px;
}
.underline-preview.underline-wave {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--underline-accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.action-menu-style-btn.active {
  outline: 2px solid #6366f1;
  outline-offset: 1px;
}

/* ─── Selection toolbar v2 — two stacked white pills ─── */
.action-menu-v2 {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 280px;
}
.action-menu-v2 .am-row {
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.08);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.rd-rd-theme-dark .action-menu-v2 .am-row {
  background: #2a2c34;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.action-menu-v2 .am-row-styles { gap: 4px; }
.action-menu-v2 .am-row-actions {
  border-radius: 18px;
  padding: 6px 8px;
  gap: 0;
  justify-content: space-around;
}
.action-menu-v2 .am-style-btn {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
  color: #1f2329;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 16px;
  padding: 0;
}
.action-menu-v2 .am-style-btn.active {
  background: #f3f4f9;
  outline: none;
}
.rd-rd-theme-dark .action-menu-v2 .am-style-btn {
  background: #3a3d47; border-color: #4a4d57; color: #f5f5f7;
}
.action-menu-v2 .am-sep {
  width: 1px; height: 22px;
  background: rgba(0,0,0,0.10);
  margin: 0 6px;
}
.rd-rd-theme-dark .action-menu-v2 .am-sep { background: rgba(255,255,255,0.18); }
.action-menu-v2 .am-color-btn {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: none;
  background: var(--swatch-color);
  cursor: pointer;
  padding: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.action-menu-v2 .am-color-btn.active {
  outline: 2px solid #fff;
  outline-offset: -2px;
  box-shadow: 0 0 0 2px var(--swatch-color);
}
.am-check { width: 14px; height: 14px; display: block; }

.action-menu-v2 .am-action {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  background: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  color: #3b3f46;
  font-size: 11.5px;
  font-weight: 500;
  min-width: 56px;
}
.rd-rd-theme-dark .action-menu-v2 .am-action { color: #d4d4d8; }
.action-menu-v2 .am-action:hover {
  background: rgba(99, 102, 241, 0.10);
  color: #4338ca;
}
.action-menu-v2 .am-action-ico {
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.action-menu-v2 .am-action-ico svg { width: 22px; height: 22px; }

/* Inline translation panel (replaces toolbar after 翻译 is clicked) */
.am-trans-loading {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  padding: 16px 22px;
  font-size: 13px;
  color: #3b3f46;
  text-align: center;
}
.am-trans-result {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  padding: 14px 18px;
  max-width: 360px;
}
.am-trans-en { margin: 0 0 6px; font-size: 13px; line-height: 1.55; color: #1f2329; font-style: italic; }
.am-trans-zh { margin: 0; font-size: 14px; line-height: 1.6; color: #3b3f46; }
.am-trans-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 10px;
}
.am-trans-actions button {
  padding: 5px 12px;
  font-size: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 999px;
  cursor: pointer;
  color: #3b3f46;
}
.am-trans-actions button:hover { background: #f9fafb; }
.rd-rd-theme-dark .am-trans-loading,
.rd-rd-theme-dark .am-trans-result { background: #2a2c34; color: #e6e6ea; }
.rd-rd-theme-dark .am-trans-en { color: #f5f5f7; }
.rd-rd-theme-dark .am-trans-zh { color: #c7c7cc; }
.rd-rd-theme-dark .am-trans-actions button { background: #3a3d47; border-color: #4a4d57; color: #e6e6ea; }

/* ─── Selection action menu (legacy) ─── */
.rd-hl-popup {
  position: fixed;
  z-index: 1000;
}
@media (max-width: 1024px) {
  .rd-hl-popup {
    max-width: calc(100vw - 16px);
  }
  .rd-hl-popup .action-menu {
    min-width: min(304px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
  }
}
.action-menu {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}
.rd-rd-theme-dark .action-menu {
  background: #262626;
  border-color: #3a3a3a;
  color: #e0e0e0;
}
/* v2 工具栏 = 两颗独立白胶囊，容器本身必须透明。.action-menu 基础规则在本文件中
   定义在 .action-menu-v2 之后，等权重下后者被覆盖，导致工具栏外多出一圈白底/阴影
   （阅读文章页与解读文稿页都会出现）。这里用更高权重把容器重新压成透明。 */
.action-menu.action-menu-v2 {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.rd-rd-theme-dark .action-menu.action-menu-v2 { background: transparent; }
.action-menu-toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 4px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.rd-rd-theme-dark .action-menu-toolbar { border-bottom-color: rgba(255,255,255,0.08); }
.action-menu-style-row {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.action-menu-color-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.action-menu-color-btn {
  --swatch-color: #8c61ff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--swatch-color);
  cursor: pointer;
  padding: 0;
}
.action-menu-color-btn.active {
  border-color: #1f2329;
  box-shadow: 0 0 0 2px #fff inset;
}
.action-menu-actions {
  display: flex;
  gap: 2px;
  padding: 2px;
}
.action-menu-actions button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: inherit;
  font-size: 11px;
}
.action-menu-actions button:hover {
  background: rgba(99, 102, 241, 0.08);
}
.action-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.12);
  color: #4338ca;
  font-weight: 700;
  font-size: 13px;
}
.rd-rd-theme-dark .action-menu-icon {
  background: rgba(99, 102, 241, 0.25);
  color: #c7d2fe;
}

/* Share-sheet tab bar — switch between 原文版 / 彩虹卡 / 笔记版 */
.rd-share-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 16px 0;
  background: #fff;
}
.rd-share-tab {
  flex: 1;
  padding: 10px 12px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
}
.rd-share-tab:hover { background: rgba(99, 102, 241, 0.06); color: #4338ca; }
.rd-share-tab.active {
  color: #4338ca;
  border-bottom-color: #6366f1;
  background: rgba(99, 102, 241, 0.06);
}

/* Poster wrapper inside the share sheet — canvas fits responsively */
.rd-share-card-poster {
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rd-share-poster-wrap {
  flex: 1 1 auto;
  overflow-y: auto;
  background: #f4ecda;
  padding: 14px;
  display: flex;
  justify-content: center;
}
.rd-share-canvas {
  width: 100%;
  max-width: 480px;
  height: auto;
  aspect-ratio: 1080 / 1350;
  background: #fefbf3;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

/* Share sheet (阅读手帐) */
.rd-share-sheet {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rd-share-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}
.rd-share-card {
  position: relative;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #1a1a1a;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.rd-share-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #eee;
  font-size: 15px;
}
.rd-share-close {
  width: 30px; height: 30px;
  border: none; background: transparent;
  font-size: 22px; cursor: pointer;
  color: #888; line-height: 1;
}
.rd-share-preview {
  flex: 1;
  margin: 0;
  padding: 18px;
  font-size: 13px;
  font-family: -apple-system, "PingFang SC", sans-serif;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.6;
  background: #f8f9fb;
  overflow: auto;
}
.rd-share-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #eee;
  flex-wrap: wrap;
}
.rd-share-btn {
  flex: 1;
  min-width: 100px;
  padding: 10px 14px;
  font-size: 13px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #fff;
  color: #333;
  cursor: pointer;
  font-weight: 600;
}
.rd-share-btn.primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-color: transparent;
}

/* Highlight hint banner — explains how to highlight */
.rd-hl-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 0 0 14px;
  font-size: 12px;
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.12), rgba(99, 102, 241, 0.08));
  border: 1px dashed rgba(99, 102, 241, 0.25);
  border-radius: 8px;
  color: var(--muted);
}
.rd-hl-hint-dismiss {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}

/* ─── AI 精讲 / 完整词典 modal sheet (matches Aixie's .article-brief-sheet) ─── */
.overlay-shell {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  padding: 24px;
}
.sheet-card {
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: #fffbf4;
  color: #2c2419;
  border-radius: 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}
.article-brief-sheet { background: linear-gradient(180deg, #fffbf4 0%, #f7eddf 100%); }
.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 22px 12px;
  border-bottom: 1px solid rgba(184, 167, 145, 0.5);
}
.sheet-head h3 {
  margin: 4px 0 0;
  font-size: 17px;
  line-height: 1.45;
  color: #3b2f20;
}
.pill {
  display: inline-block;
  padding: 3px 10px;
  background: #f4d76b;
  color: #5c3e0a;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.icon-btn {
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  font-size: 22px;
  color: #93887a;
  cursor: pointer;
  border-radius: 50%;
  line-height: 1;
  flex-shrink: 0;
}
.icon-btn:hover { background: rgba(0,0,0,0.06); color: #3b2f20; }

.sheet-block {
  padding: 14px 22px;
  border-bottom: 1px dashed rgba(184, 167, 145, 0.4);
  overflow-y: auto;
}
.sheet-block:last-child { border-bottom: none; }
.sheet-block h4 {
  margin: 0 0 10px;
  font-size: 14px;
  color: #6b5a3e;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.example-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.example-card {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(216, 205, 191, 0.7);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.65;
}
.example-card strong {
  display: block;
  font-weight: 600;
  color: #2c2419;
}
.example-card .small-zh,
.example-card p {
  margin: 6px 0 0;
  font-size: 13px;
  color: #6b5a3e;
  line-height: 1.6;
}
.example-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}
.dict-jump-btn {
  padding: 3px 10px;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.dict-jump-btn:hover { background: #4f46e5; }
.pattern-example-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(184, 167, 145, 0.4);
}
.pattern-example-item {
  padding: 8px 10px;
  background: #fef9ec;
  border-radius: 8px;
}
.pattern-example-en {
  margin: 0;
  font-size: 13px;
  font-style: italic;
  color: #3b2f20;
}
.pattern-example-zh {
  margin: 4px 0 0;
  font-size: 12px;
  color: #6b5a3e;
}
.muted { color: #93887a; font-size: 13px; }
.rd-brief-loading {
  padding: 40px 22px;
  text-align: center;
}
.rd-brief-error {
  padding: 20px 22px;
  color: #dc2626;
  background: #fef2f2;
  margin: 0;
}

/* Full-dict-specific styling */
.rd-full-ipa {
  font-size: 14px;
  color: #6b5a3e;
  margin-left: 6px;
  font-weight: 400;
}
.rd-full-senses {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rd-full-senses li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
}
.rd-full-pos {
  font-style: italic;
  font-weight: 600;
  color: #b08c4f;
  min-width: 36px;
}
.rd-full-trans {
  color: #2c2419;
}
.rd-full-collocs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rd-full-colloc {
  padding: 4px 10px;
  background: #fff;
  border: 1px solid rgba(216, 205, 191, 0.7);
  border-radius: 999px;
  font-size: 12px;
  color: #3b2f20;
}
.rd-full-foot {
  display: flex;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid rgba(184, 167, 145, 0.5);
}

/* AI 精讲 inline explanation (deprecated, kept for legacy) */
.rd-para-explain {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(99, 102, 241, 0.06);
  border-left: 3px solid #6366f1;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.6;
}
.rd-rd-theme-dark .rd-para-explain { background: rgba(99, 102, 241, 0.15); }
.rd-para-explain p { margin: 4px 0; }
.rd-ex-sum strong { color: #4338ca; }
.rd-ex-grammar strong { color: #b45309; }
.rd-ex-phrases strong { color: #4aa906; }
.rd-ex-phrases em { font-style: italic; font-weight: 600; }
.rd-rd-theme-dark .rd-ex-sum strong,
.rd-rd-theme-dark .rd-ex-grammar strong,
.rd-rd-theme-dark .rd-ex-phrases strong { color: #c7d2fe; }

/* ─── Big tab bar (文章 / 书籍) ─── */
.rd-tab-bar {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--panel-soft);
  border-radius: 14px;
  margin: 14px 0;
}
.rd-big-tab {
  flex: 1;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.rd-big-tab em {
  font-style: normal;
  font-size: 12px;
  margin-left: 4px;
  opacity: 0.7;
  font-weight: 500;
}
.rd-big-tab:hover { color: var(--ink); }
.rd-big-tab.active {
  background: var(--panel);
  color: var(--brand-ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* ─── Article card with cover image (Aixie-style) ─── */
.rd-article-list { display: flex; flex-direction: column; gap: 14px; }
.rd-article-card {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 14px;
  align-items: stretch;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rd-article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
.rd-art-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.rd-art-topic-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rd-art-topic {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.rd-art-title {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rd-art-preview {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rd-art-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--muted);
}
.rd-art-diff, .rd-art-words, .rd-art-source {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.rd-art-cover {
  width: 130px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel-soft);
  position: relative;
}
.rd-art-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rd-art-cover-fail {
  background: linear-gradient(135deg, #94a3b8, #64748b);
}
.rd-art-cover-fail::after {
  content: "📄";
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  color: rgba(255,255,255,0.8);
}
.rd-art-cover-gradient {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  color: rgba(255,255,255,0.95);
}
.rd-grad-news     { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.rd-grad-culture  { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.rd-grad-life     { background: linear-gradient(135deg, #15f817, #0ae317); }
.rd-grad-growth   { background: linear-gradient(135deg, #84cc16, #65a30d); }
.rd-grad-science  { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.rd-grad-nature   { background: linear-gradient(135deg, #77e814, #4aa906); }
.rd-grad-health   { background: linear-gradient(135deg, #ec4899, #be185d); }
.rd-grad-business { background: linear-gradient(135deg, #6366f1, #4338ca); }
.rd-grad-arts     { background: linear-gradient(135deg, #f43f5e, #be123c); }
.rd-grad-seed-0 { background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.32), transparent 34%), linear-gradient(135deg, #33a315, #4be619); }
.rd-grad-seed-1 { background-image: radial-gradient(circle at 80% 18%, rgba(255,255,255,0.26), transparent 30%), linear-gradient(135deg, #c2410c, #f59e0b); }
.rd-grad-seed-2 { background-image: radial-gradient(circle at 22% 78%, rgba(255,255,255,0.28), transparent 32%), linear-gradient(135deg, #1d4ed8, #38bdf8); }
.rd-grad-seed-3 { background-image: radial-gradient(circle at 72% 72%, rgba(255,255,255,0.28), transparent 32%), linear-gradient(135deg, #7c3aed, #f472b6); }
.rd-grad-seed-4 { background-image: radial-gradient(circle at 36% 26%, rgba(255,255,255,0.3), transparent 30%), linear-gradient(135deg, #365314, #84cc16); }

@media (max-width: 480px) {
  .rd-article-card { grid-template-columns: 1fr 90px; }
  .rd-art-cover { width: 90px; height: 80px; }
}

@media (max-width: 1024px) {
  .rd-shell, .rd-view-shell {
    max-width: 100%;
    padding: 8px 0 92px;
  }
  .rd-view-article {
    width: 100%;
    padding: 18px 14px 24px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .rd-view-header {
    padding: 10px 12px 12px;
  }
  .rd-paragraphs {
    gap: 16px;
  }
  .rd-para-en {
    font-size: 16px;
    line-height: 1.8;
  }
}

/* ─── Book grid (扇贝 书架) ─── */
.rd-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}
.rd-book-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.rd-book-card:hover { transform: translateY(-4px); }
.rd-book-cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #8B4513, #5d2e08);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rd-book-cover img {
  width: 100%; height: 100%; object-fit: cover;
}
.rd-cover-fallback {
  font-size: 48px;
  color: rgba(255, 255, 255, 0.6);
}
.rd-book-title {
  margin: 6px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rd-book-author {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
}
.rd-book-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
}
.rd-book-chapters {
  font-size: 10.5px;
  color: var(--muted);
}

/* ─── Book reader (沉浸式) ─── */
.rd-bk-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 20px 100px;
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.rd-bk-theme-light  { background: #fdfdfb; color: #2a2a2a; }
.rd-bk-theme-sepia  { background: #f3eddc; color: #4a3a25; }
.rd-bk-theme-dark   { background: #1a1a1a; color: #e0e0e0; }

.rd-bk-font-newsreader { font-family: "Newsreader", "Source Serif Pro", Georgia, serif; }
.rd-bk-font-playfair   { font-family: "Playfair Display", Georgia, serif; }
.rd-bk-font-plex       { font-family: "IBM Plex Sans", -apple-system, sans-serif; }

.rd-bk-size-small  .rd-bk-content { font-size: 15px; line-height: 1.75; }
.rd-bk-size-medium .rd-bk-content { font-size: 17px; line-height: 1.85; }
.rd-bk-size-large  .rd-bk-content { font-size: 19px; line-height: 1.9; }
.rd-bk-size-xlarge .rd-bk-content { font-size: 22px; line-height: 1.95; }

.rd-bk-header {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0 14px;
}
.rd-bk-back {
  font-size: 13px;
}
.rd-bk-theme-dark .rd-bk-back { color: #93c5fd; }
.rd-bk-title-bar {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.rd-bk-title-bar strong {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rd-bk-sub {
  font-size: 11px;
  opacity: 0.7;
}
.rd-bk-icon-btn {
  width: 36px; height: 36px;
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  border-radius: 8px;
  color: inherit;
  opacity: 0.7;
  transition: all 0.15s ease;
}
.rd-bk-icon-btn:hover { opacity: 1; background: rgba(0,0,0,0.05); }
.rd-bk-theme-dark .rd-bk-icon-btn:hover { background: rgba(255,255,255,0.08); }

.rd-bk-progress {
  height: 3px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 20px;
}
.rd-bk-theme-dark .rd-bk-progress { background: rgba(255, 255, 255, 0.08); }
.rd-bk-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #ec4899);
  transition: width 0.4s ease;
}

.rd-bk-toc {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  max-height: 320px;
  overflow-y: auto;
}
.rd-bk-theme-dark .rd-bk-toc { background: rgba(255, 255, 255, 0.05); }
.rd-bk-toc h3 { margin: 0 0 8px; font-size: 13px; opacity: 0.7; }
.rd-bk-toc ul { list-style: none; padding: 0; margin: 0; }
.rd-bk-toc li {
  display: flex;
  gap: 10px;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 13px;
}
.rd-bk-toc li:hover { background: rgba(0,0,0,0.04); }
.rd-bk-theme-dark .rd-bk-toc li:hover { background: rgba(255,255,255,0.06); }
.rd-bk-toc li.active { background: rgba(99, 102, 241, 0.15); color: #6366f1; font-weight: 700; }
.rd-bk-toc-n { color: inherit; opacity: 0.6; min-width: 60px; }
.rd-bk-toc-t {
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.rd-bk-prefs {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.rd-bk-theme-dark .rd-bk-prefs { background: rgba(255, 255, 255, 0.05); }
.rd-bk-prefs h3 { margin: 0 0 8px; font-size: 13px; opacity: 0.7; }
.rd-bk-pref-row {
  display: grid; grid-template-columns: 60px 1fr; gap: 10px;
  align-items: center; margin: 6px 0;
}
.rd-bk-pref-row > span { font-size: 12px; opacity: 0.7; }
.rd-bk-pref-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.rd-bk-pref-opts button {
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid rgba(0,0,0,0.1);
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: inherit;
}
.rd-bk-theme-dark .rd-bk-pref-opts button { border-color: rgba(255,255,255,0.15); }
.rd-bk-pref-opts button.active {
  background: #6366f1; color: #fff; border-color: #6366f1;
}
.rd-bk-theme-btn { font-size: 11px !important; }
.rd-bk-theme-btn.light  { background-color: #fdfdfb; color: #2a2a2a; }
.rd-bk-theme-btn.sepia  { background-color: #f3eddc; color: #4a3a25; }
.rd-bk-theme-btn.dark   { background-color: #1a1a1a; color: #e0e0e0; }
.rd-bk-theme-btn.active { box-shadow: 0 0 0 2px #6366f1; }

.rd-bk-page {
  padding: 10px 0;
}
.rd-bk-chapter-title {
  font-size: 22px;
  margin: 0 0 24px;
  font-weight: 700;
  text-align: center;
  border-bottom: 1px solid currentColor;
  padding-bottom: 14px;
  opacity: 0.95;
}
.rd-bk-chapter-title em {
  display: block;
  font-style: normal;
  font-size: 16px;
  font-weight: 500;
  margin-top: 4px;
  opacity: 0.7;
}
.rd-bk-content { letter-spacing: 0.01em; }
.rd-bk-para { margin: 0 0 18px; text-indent: 1.6em; }
.rd-bk-word { cursor: pointer; padding: 0 1px; border-radius: 3px; }
.rd-bk-word:hover { background: rgba(99, 102, 241, 0.18); }

.rd-bk-dict-popup {
  width: 300px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  z-index: 999;
  color: var(--ink);
}

.rd-bk-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding: 16px 0;
  border-top: 1px solid currentColor;
  border-top-color: rgba(0, 0, 0, 0.08);
}
.rd-bk-theme-dark .rd-bk-footer { border-top-color: rgba(255, 255, 255, 0.1); }
.rd-bk-nav-btn {
  padding: 8px 16px;
  font-size: 14px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 600;
}
.rd-bk-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.rd-bk-page-info { font-size: 12px; opacity: 0.6; }

/* ─── 多维度筛选条 (CEFR · 主题 · 来源 · 排序) ─── */
.rd-filters {
  margin: 6px -2px 12px;
  padding: 6px 2px 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rd-filter-row {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 8px;
  align-items: center;
}
.rd-filter-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  padding-top: 0;
  white-space: nowrap;
}
.rd-filter-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 4px 3px 0;
}
.rd-filter-chips::-webkit-scrollbar {
  display: none;
}
.rd-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 8px 15px;
  font-size: 14px;
  border: 0;
  background: #f4f5f1;
  color: var(--ink);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-weight: 800;
}
.rd-chip em {
  font-style: normal;
  font-size: 10.5px;
  opacity: 0.7;
  padding-left: 2px;
}
.rd-chip:hover {
  background: #edf7ef;
}
.rd-chip.active {
  background: #e8f8ea;
  color: #65b418;
  box-shadow: none;
}
.rd-chip.active em { opacity: 0.85; }
.rd-chip-cefr { font-weight: 700; letter-spacing: 0.02em; }

/* Corpus card style — slightly richer than the old rd-card */
.rd-card-corpus {
  position: relative;
  cursor: pointer;
  background: var(--panel);
}
.rd-card-corpus .rd-preview {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CEFR level pill — color-coded */
.rd-level-A1 { background: #d1fae5 !important; color: #418f09 !important; }
.rd-level-A2 { background: #dcfbcc !important; color: #2f8919 !important; }
.rd-level-B1 { background: #dbeafe !important; color: #1e40af !important; }
.rd-level-B2 { background: #ede9fe !important; color: #5b21b6 !important; }
.rd-level-C1 { background: #fce7f3 !important; color: #9d174d !important; }
.rd-level-C2 { background: #fee2e2 !important; color: #991b1b !important; }

/* ─── (kept) CEFR difficulty tab bar (legacy class for AI list) ─── */
.rd-cefr-tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin: 14px 0 18px;
  background: var(--panel-soft);
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.rd-cefr-tab {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  padding: 8px 4px;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.15s ease;
}
.rd-cefr-tab:hover { background: rgba(255,255,255,0.5); color: var(--ink); }
.rd-cefr-tab strong { font-size: 14px; font-weight: 700; }
.rd-cefr-tab em { font-style: normal; font-size: 11px; opacity: 0.75; }
.rd-cefr-tab.active {
  background: linear-gradient(135deg, var(--brand), #6366f1);
  color: #fff;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
}
.rd-cefr-tab.active em { opacity: 0.95; }

/* Two-section reading list */
.rd-list-section { margin: 16px 0 22px; }
.rd-list-section > h3 {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.rd-card-ai {
  background: linear-gradient(180deg, rgba(99,102,241,0.04), var(--panel));
  border-color: rgba(99,102,241,0.25);
}
.rd-card-wiki { position: relative; }
.rd-card-wiki.rd-loading { pointer-events: none; opacity: 0.7; }
.rd-card-loading {
  padding: 30px 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* Source/topic pills inside catalog cards */
.rd-source-pill {
  padding: 2px 8px;
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.rd-topic-pill {
  padding: 2px 8px;
  background: rgba(99, 102, 241, 0.10);
  color: #4338ca;
  border-radius: 6px;
  font-size: 11px;
}
.rd-card-est {
  padding: 2px 8px;
  background: var(--panel-soft);
  color: var(--muted);
  border-radius: 6px;
  font-size: 11px;
}
.rd-card-open {
  font-size: 12px;
  color: var(--brand);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* Wikipedia attribution footer inside article */
.rd-wiki-attribution {
  margin: 22px 0 0;
  padding: 10px 14px;
  background: rgba(34, 197, 94, 0.08);
  border-left: 3px solid #22c55e;
  border-radius: 6px;
  font-size: 12px;
  color: #166534;
  line-height: 1.55;
}
.rd-wiki-attribution a {
  color: #166534;
  text-decoration: underline;
}

.rd-view-article {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 32px 40px;
}
.rd-view-article h1 { margin: 0 0 18px; font-size: 24px; line-height: 1.3; }
.rd-paragraphs { display: flex; flex-direction: column; gap: 18px; }
.rd-para-en {
  margin: 0;
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink);
}
/* Per-paragraph read-aloud follow highlight (#36). The currently-spoken
   paragraph gets a soft brand-tinted background + left accent bar so the
   reader's eye can track along. Transition keeps the hand-off smooth. */
.rd-para {
  border-radius: 10px;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.rd-para.rd-para-reading {
  background: rgba(99, 102, 241, 0.10);
  box-shadow: inset 3px 0 0 var(--brand);
  padding: 6px 10px 6px 14px;
  margin: -6px -10px -6px -14px;
}
.rd-rd-theme-dark .rd-para.rd-para-reading { background: rgba(129, 140, 248, 0.18); }
.rd-rd-theme-sepia .rd-para.rd-para-reading { background: rgba(180, 130, 60, 0.15); }
.rd-view-shell-loading {
  max-width: 1160px;
}
.rd-view-article-loading {
  min-height: 360px;
}
.rd-loading-article {
  margin: 12px 0 0;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 16px;
}
.rd-para-zh {
  margin: 4px 0 0;
  padding: 10px 14px;
  background: var(--panel-soft);
  border-left: 3px solid var(--brand);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.7;
  color: #475569;
}
/* padding:0 1px 会让每个词在选区里多出 1px 偏移的矩形 → 多词选区出现白色竖线断裂。
   去掉横向 padding 让选区连续（听书 + 阅读共用）。tap 命中区靠 word 本身已足够。 */
.rd-word { cursor: pointer; padding: 0; border-radius: 3px; }
.rd-word:hover { background: rgba(99, 102, 241, 0.12); }
/* Legacy `.rd-hl` (AI-curated highlights from older articles) — now styled
   the same as vocab-tag so the reader has a SINGLE consistent annotation
   style: black + bold, no colored background. */
.rd-word.rd-hl {
  font-weight: 700;
  color: #0f172a;
  background: transparent;
}
.rd-rd-theme-dark .rd-word.rd-hl { color: #f5f5f7; }
.rd-rd-theme-sepia .rd-word.rd-hl { color: #2a2014; }
.rd-view-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

/* ══════════ 读后开口 (post-reading speaking) ══════════════════════════════ */
/* Entry CTA at the end of an article */
.rd-speak-cta {
  display: flex; align-items: center; gap: 14px; width: 100%;
  margin: 18px 0 4px; padding: 16px 18px; border: 0; border-radius: 18px; cursor: pointer;
  text-align: left; color: #fff;
  background: linear-gradient(120deg, #33a315 0%, #44d619 46%, #6d5efc 116%);
  box-shadow: 0 12px 28px rgba(51, 163, 21, .28);
  position: relative; overflow: hidden;
}
.rd-speak-cta::after { content: ""; position: absolute; top: -60%; right: -10%; width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(255,255,255,.20), transparent 70%); pointer-events: none; }
.rd-speak-cta:active { transform: translateY(1px); }
.rd-speak-cta-ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  font-size: 24px; background: rgba(255,255,255,.18); backdrop-filter: blur(2px); color: #fff; }
.rd-speak-cta-ic .rd-ic { width: 27px; height: 27px; stroke: #fff; }
.rd-speak-cta-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rd-speak-cta-txt b { font-size: 16px; font-weight: 800; }
.rd-speak-cta-txt i { font-style: normal; font-size: 12.5px; opacity: .92; line-height: 1.45; }
.rd-speak-cta-go { flex: none; font-size: 22px; font-weight: 700; opacity: .9; }

/* Overlay shell */
.rds-overlay { position: fixed; inset: 0; z-index: 8000; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(36, 54, 27, .5); opacity: 0; transition: opacity .26s; backdrop-filter: blur(3px); }
.rds-overlay.on { opacity: 1; }
.rds-sheet { width: 100%; max-width: 480px; height: 92vh; max-height: 92vh; background: #f6f8f6;
  border-radius: 26px 26px 0 0; overflow: hidden; display: flex; flex-direction: column;
  transform: translateY(16px); transition: transform .3s cubic-bezier(.2,.9,.3,1.05); box-shadow: 0 -10px 40px rgba(0,0,0,.22); }
.rds-overlay.on .rds-sheet { transform: none; }
@media (min-width: 540px) { .rds-overlay { align-items: center; } .rds-sheet { height: 88vh; border-radius: 24px; } }

/* Header */
.rds-head { position: relative; flex: none; display: flex; align-items: center; gap: 6px; padding: 18px 16px 20px;
  color: #fff; background: linear-gradient(125deg, #33a315, #46d01b 52%, #6d5efc 130%); }
.rds-head::after { content: ""; position: absolute; top: -50%; right: -8%; width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); }
.rds-close { flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; font-size: 26px; line-height: 1; display: grid; place-items: center; z-index: 1; }
.rds-head-txt { min-width: 0; z-index: 1; }
.rds-head-kicker { font-size: 12px; font-weight: 700; opacity: .9; letter-spacing: .02em; }
.rds-head-title { margin: 3px 0 0; font-size: 17px; font-weight: 800; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Tabs */
.rds-tabs { flex: none; display: flex; gap: 6px; padding: 12px 14px 6px; background: #f6f8f6; }
.rds-tab { flex: 1; padding: 10px; border: 0; border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 700;
  background: #ebeee9; color: #5d6b67; transition: all .18s; }
.rds-tab.on { background: #fff; color: var(--brand, #33a315); box-shadow: 0 3px 12px rgba(51, 163, 21, .16); }

/* Body */
.rds-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 14px 28px; }
.rds-intro { font-size: 13px; color: #6b7975; line-height: 1.6; padding: 6px 4px 12px; }
.rds-empty, .rds-err { text-align: center; color: #8a9893; font-size: 14px; padding: 24px 12px; }
.rds-err { color: #c2562f; background: #fdeee7; border-radius: 12px; margin-top: 12px; padding: 12px; }

/* Skeleton */
.rds-skel { text-align: center; padding: 48px 24px; color: #7b8884; }
.rds-skel-spark { font-size: 34px; animation: rds-pulse 1.4s ease-in-out infinite; }
.rds-skel p { margin: 10px 0 22px; font-size: 14px; }
.rds-skel-bar { height: 56px; border-radius: 14px; margin: 10px 0;
  background: linear-gradient(100deg, #eff1ed 30%, #f6f8f6 50%, #eff1ed 70%); background-size: 200% 100%;
  animation: rds-shimmer 1.3s linear infinite; }
.rds-skel-bar.short { width: 60%; }
@keyframes rds-shimmer { to { background-position: -200% 0; } }
@keyframes rds-pulse { 0%,100%{ opacity:.5; transform:scale(.92);} 50%{ opacity:1; transform:scale(1.06);} }

/* Prompt cards */
.rds-cards { display: flex; flex-direction: column; gap: 11px; }
.rds-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 15px 14px; border: 1px solid #eaefed; border-radius: 16px; background: #fff;
  box-shadow: 0 4px 16px rgba(50, 98, 33, .05); transition: transform .15s, box-shadow .15s; }
.rds-card:active { transform: scale(.985); }
.rds-card:hover { box-shadow: 0 8px 22px rgba(50, 98, 33, .10); }
.rds-card-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 21px;
  background: linear-gradient(135deg, #ebf5e6, #eef0ff); }
.rds-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rds-card-tag { font-size: 11px; font-weight: 800; color: var(--brand, #33a315); letter-spacing: .03em; }
.rds-card.sentence .rds-card-tag { color: #6d5efc; }
.rds-card-en { font-size: 15px; font-weight: 650; color: #3c4b34; line-height: 1.4; }
.rds-card-zh { font-size: 12.5px; color: #8a9590; line-height: 1.4; }
.rds-card-go { flex: none; font-size: 13px; font-weight: 800; color: #b6c0bc; }

/* Stage */
.rds-stage { display: flex; flex-direction: column; align-items: center; }
.rds-back { align-self: flex-start; border: 0; background: none; cursor: pointer; color: #7c8a85; font-size: 14px; font-weight: 600; padding: 4px 2px 10px; }
.rds-q { width: 100%; background: #fff; border-radius: 18px; padding: 18px 16px; text-align: center;
  border: 1px solid #eaefed; box-shadow: 0 4px 18px rgba(50, 98, 33, .06); }
.rds-q.shadow { background: linear-gradient(135deg, #fbfbff, #f3f1ff); border-color: #e7e3fb; }
.rds-q-tag { font-size: 11.5px; font-weight: 800; color: var(--brand, #33a315); letter-spacing: .04em; }
.rds-q.shadow .rds-q-tag { color: #6d5efc; }
.rds-q-en { margin: 8px 0 0; font-size: 19px; font-weight: 700; color: #38482f; line-height: 1.45; }
.rds-q.shadow .rds-q-en { font-size: 20px; }
.rds-q-zh { margin: 8px 0 0; font-size: 13.5px; color: #8a9590; line-height: 1.5; }
.rds-listen { margin-top: 13px; border: 0; cursor: pointer; padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  background: #6d5efc; color: #fff; box-shadow: 0 5px 14px rgba(109,94,252,.3); }

/* Mic */
.rds-mic-wrap { position: relative; width: 120px; height: 120px; margin: 26px auto 6px; display: grid; place-items: center; }
.rds-mic { position: relative; z-index: 2; width: 78px; height: 78px; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
  display: grid; place-items: center; background: linear-gradient(140deg, #33a315, #4be619);
  box-shadow: 0 10px 26px rgba(51, 163, 21, .4); transition: transform .15s, background .2s; }
.rds-mic:active { transform: scale(.94); }
.rds-mic .hand-mic { width: 34px; height: 34px; }
.rds-mic-rings { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; }
.rds-mic-rings span { position: absolute; width: 78px; height: 78px; border-radius: 50%; border: 2px solid #4be619; opacity: 0; }
.rds-mic-wrap.recording .rds-mic { background: linear-gradient(140deg, #e0683c, #ef4444); box-shadow: 0 10px 26px rgba(239,68,68,.42); }
.rds-mic-wrap.recording .rds-mic-rings span { animation: rds-ring 1.8s ease-out infinite; border-color: #ef4444; }
.rds-mic-wrap.recording .rds-mic-rings span:nth-child(2) { animation-delay: .6s; }
.rds-mic-wrap.recording .rds-mic-rings span:nth-child(3) { animation-delay: 1.2s; }
@keyframes rds-ring { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.1); opacity: 0; } }
.rds-mic-wrap.processing .rds-mic { background: linear-gradient(140deg, #94a3a0, #6b7975); }
.rds-mic-wrap.processing::after { content: ""; position: absolute; z-index: 3; width: 94px; height: 94px; border-radius: 50%;
  border: 3px solid transparent; border-top-color: var(--brand, #33a315); animation: rds-spin .8s linear infinite; }
@keyframes rds-spin { to { transform: rotate(360deg); } }
.rds-mic-hint { font-size: 13px; color: #8a9590; margin: 2px 0 4px; min-height: 18px; }

/* Report */
.rds-report { width: 100%; margin-top: 14px; animation: rds-rise .34s cubic-bezier(.2,.9,.3,1.05); }
@keyframes rds-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rds-report-top { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid #eaefed; border-radius: 18px; padding: 16px; box-shadow: 0 4px 18px rgba(50, 98, 33, .06); }
.rds-ring { flex: none; position: relative; width: 84px; height: 84px; display: grid; place-items: center; }
.rds-ring.big-emoji { font-size: 40px; }
.rds-ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.rds-ring-num b { font-size: 26px; font-weight: 800; }
.rds-ring-num span { font-size: 10.5px; font-weight: 700; margin-top: 3px; }
.rds-report-summary { flex: 1; min-width: 0; }
.rds-report-h { font-size: 11.5px; font-weight: 800; color: var(--brand, #33a315); letter-spacing: .04em; }
.rds-report-summary p { margin: 5px 0 0; font-size: 14px; color: #4a5741; line-height: 1.55; }
.rds-bars { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.rds-bar-row { display: flex; align-items: center; gap: 9px; }
.rds-bar-name { flex: none; width: 28px; font-size: 12px; font-weight: 700; color: #6b7975; }
.rds-bar-track { flex: 1; height: 8px; border-radius: 999px; background: #eef1f0; overflow: hidden; }
.rds-bar-track i { display: block; height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(.2,.9,.3,1); }
.rds-bar-val { flex: none; width: 22px; text-align: right; font-size: 12.5px; font-weight: 800; color: #46524e; }
.rds-said { margin-top: 11px; background: #fff; border: 1px solid #eef1f0; border-radius: 14px; padding: 11px 14px; }
.rds-said span { font-size: 11px; font-weight: 800; color: #9aa5a0; letter-spacing: .04em; }
.rds-said em { display: block; margin-top: 3px; font-style: normal; font-size: 14.5px; color: #47503e; line-height: 1.5; }
.rds-fb { margin-top: 11px; border-radius: 14px; padding: 12px 14px; }
.rds-fb.good { background: #eafaf3; }
.rds-fb.tip { background: #fff6e8; }
.rds-fb b { font-size: 13px; font-weight: 800; color: #4a5741; }
.rds-fb ul { margin: 7px 0 0; padding-left: 18px; }
.rds-fb li { font-size: 13.5px; color: #3b4945; line-height: 1.6; margin: 3px 0; }
.rds-fb p { margin: 6px 0 0; font-size: 13.5px; color: #3b4945; line-height: 1.55; }
.rds-words { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.rds-word { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  color: #36433f; background: #fff; border: 1.5px solid var(--wc, #e0a020); }
.rds-word i { font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: var(--wc, #e0a020); border-radius: 999px; padding: 1px 6px; }
.rds-next { width: 100%; margin-top: 16px; border: 0; cursor: pointer; padding: 14px; border-radius: 14px; font-size: 15px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #33a315, #4be619); box-shadow: 0 8px 20px rgba(51, 163, 21, .28); }
.rds-next:active { transform: translateY(1px); }
.rds-report-btns { display: flex; gap: 10px; margin-top: 16px; }
.rds-report-btns .rds-next { margin-top: 0; flex: 1; }
.rds-share { flex: 0 0 auto; border: 1.5px solid var(--brand, #33a315); background: #fff; color: var(--brand, #33a315);
  cursor: pointer; padding: 14px 18px; border-radius: 14px; font-size: 15px; font-weight: 800; }
.rds-share:active { transform: translateY(1px); }

/* ── 举一反三：生成本周战报 CTA ─────────────────────────────────────────── */
.exp-report-btn { display: flex; align-items: center; gap: 12px; width: calc(100% - 36px); margin: 12px 18px 4px;
  padding: 14px 16px; border: 0; cursor: pointer; border-radius: 18px; text-align: left;
  background: linear-gradient(135deg, #33a315, #4be619); color: #fff; box-shadow: 0 8px 22px rgba(51, 163, 21, .26); }
.exp-report-btn:active { transform: translateY(1px); }
.exp-report-ic { font-size: 26px; line-height: 1; }
.exp-report-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.exp-report-txt b { font-size: 15.5px; font-weight: 800; }
.exp-report-txt i { font-size: 11.5px; font-style: normal; color: rgba(255,255,255,.82); }
.exp-report-go { font-size: 22px; color: rgba(255,255,255,.85); }

/* ── 晒英语输出：分享卡片浮层 (share-output.js) ───────────────────────────── */
.shx-wrap { position: fixed; inset: 0; z-index: 10200; display: flex; align-items: center; justify-content: center;
  background: rgba(45, 59, 38, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .22s ease; padding: 20px; }
.shx-wrap.on { opacity: 1; }
.shx-sheet { position: relative; width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  transform: translateY(14px) scale(.98); transition: transform .26s cubic-bezier(.2,.9,.3,1.05); }
.shx-wrap.on .shx-sheet { transform: none; }
.shx-close { position: absolute; top: -8px; right: -2px; width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.92); color: #4a5741; font-size: 18px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.2); z-index: 2; }
.shx-canvas-box { width: 100%; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.shx-canvas { display: block; width: 100%; height: auto; }
.shx-styles { display: flex; gap: 8px; width: 100%; justify-content: center; }
.shx-style { flex: 0 0 auto; padding: 8px 18px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.82); font-size: 14px; font-weight: 700; cursor: pointer; transition: all .15s; }
.shx-style.on { background: #fff; color: #1f2a22; border-color: #fff; }
.shx-actions { display: flex; gap: 12px; width: 100%; }
.shx-btn { flex: 1; border: 0; cursor: pointer; padding: 15px; border-radius: 15px; font-size: 15px; font-weight: 800; }
.shx-btn.primary { color: #fff; background: linear-gradient(135deg, #f0a93a, #e8923a); box-shadow: 0 8px 20px rgba(232,146,58,.35); }
.shx-btn.ghost { color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); }
.shx-btn:active { transform: translateY(1px); }
.shx-btn:disabled { opacity: .65; }
.shx-tip { margin: 0; font-size: 12px; color: rgba(255,255,255,.78); text-align: center; line-height: 1.5; }
.shx-toast { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(8px);
  background: rgba(47, 61, 40, .92); color: #fff; font-size: 13px; font-weight: 700; padding: 10px 18px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; white-space: nowrap; }
.shx-toast.on { opacity: 1; transform: translateX(-50%); }
.rd-act-btn {
  flex: 1;
  min-width: 100px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  font-size: 14px;
  cursor: pointer;
  color: var(--ink);
}
.rd-act-btn.primary {
  background: linear-gradient(140deg, #4be619, #33a315);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
}

.rd-dict-popup {
  position: fixed;
  width: 300px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
  z-index: 1000;
  overflow: hidden;
}
.rd-dict-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--panel-soft);
  border-bottom: 1px solid var(--line);
}
.rd-dict-head strong { font-size: 16px; }
.rd-dict-ipa { color: var(--muted); font-size: 13px; flex: 1; }
.rd-dict-play, .rd-dict-close {
  width: 28px; height: 28px; border: 0; background: transparent; cursor: pointer; font-size: 14px; color: var(--brand-ink);
}
.rd-dict-body { padding: 12px 14px; font-size: 14px; line-height: 1.55; }
.rd-dict-pos { color: var(--muted); font-size: 12px; margin: 0 0 4px; }
.rd-dict-zh { font-weight: 600; margin: 0 0 6px; }
.rd-dict-en { color: #475569; margin: 0 0 6px; font-style: italic; }
.rd-dict-eg { color: var(--muted); margin: 0; font-size: 13px; }
.rd-dict-foot {
  display: flex;
  border-top: 1px solid var(--line);
}
.rd-dict-link {
  flex: 1;
  padding: 10px;
  border: 0;
  background: transparent;
  font-size: 12px;
  color: var(--brand-ink);
  cursor: pointer;
}
.rd-dict-link:hover { background: var(--panel-soft); }
.rd-dict-loading, .rd-dict-error { padding: 16px; text-align: center; color: var(--muted); }

.rd-questions, .rd-vocab-sheet {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
}
.rd-questions h3, .rd-vocab-sheet h3 { margin: 0 0 14px; }
.rd-questions-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.rd-q-stem { font-size: 15px; line-height: 1.6; }
.rd-q-options { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.rd-q-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-align: left;
  background: var(--panel-soft);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
}
.rd-q-option:hover { border-color: var(--brand); }
.rd-q-option.correct { background: rgba(119, 232, 20, 0.15); border-color: #77e814; }
.rd-q-option.wrong { background: rgba(239, 68, 68, 0.12); border-color: #ef4444; }
.rd-q-opt-letter {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--panel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}
.rd-q-feedback { font-size: 13px; padding: 8px 12px; background: var(--panel-soft); border-radius: 8px; margin: 8px 0 0; }
.rd-q-ok { color: #77e814; font-weight: 600; }
.rd-q-no { color: #ef4444; font-weight: 600; }
.rd-q-speak-btn {
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(140deg, #ef4444, #b91c1c);
  color: #fff;
  border: 0;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}
.rd-q-status { font-size: 13px; color: var(--muted); margin: 8px 0; }
.rd-speak-scores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.rd-speak-scores span {
  background: var(--panel-soft);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}
.rd-speak-scores b { display: block; font-size: 18px; color: var(--brand-ink); }
.rd-speak-scores em { font-style: normal; font-size: 11px; color: var(--muted); }
.rd-speak-heard, .rd-speak-model { font-size: 13px; margin: 6px 0; line-height: 1.5; }
.rd-vocab-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.rd-vocab-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.rd-vocab-list strong { font-size: 15px; }

/* ─── Comics page ─── */
.cx-shell, .cx-view-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 4px 18px 80px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cx-header, .cx-view-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 12px;
  border-bottom: 1px solid var(--line);
}
.cx-header h1 { margin: 0; font-size: 22px; flex: 1; }
.cx-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.14);
  color: #6d28d9;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}
.cx-hint { color: var(--muted); font-size: 13px; line-height: 1.6; }
.cx-cat-bar {
  display: flex; gap: 8px; padding: 8px 0 10px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cx-cat-bar::-webkit-scrollbar { display: none; }
.cx-cat-pill {
  padding: 6px 16px; height: 32px;
  border-radius: 999px; border: 1px solid;
  font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  background: var(--panel); color: var(--ink);
  border-color: var(--line);
  transition: all 0.12s ease;
}
.cx-cat-pill:hover { color: #fb7299; background: #fff0f5; }
.cx-cat-active {
  background: #fb7299; color: #fff;
  border-color: #fb7299;
}
.cx-cat-active:hover { background: #fb7299; color: #fff; }
.cx-empty {
  text-align: center; color: var(--muted);
  font-size: 14px; padding: 40px 0;
}
.cx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.cx-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.cx-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0,0,0,0.12); }
.cx-cover { width: 100%; aspect-ratio: 2/3; object-fit: cover; background: var(--panel-soft); }
.cx-cover-fallback {
  width: 100%; aspect-ratio: 2/3;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #c084fc, #7c3aed);
  color: #fff;
  font-size: 30px;
  font-weight: 700;
}
.cx-card-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cx-card-body strong { font-size: 14px; }
.cx-card-body em { font-style: italic; color: var(--muted); font-size: 12px; }
.cx-pages { font-size: 11px; color: var(--brand-ink); margin-top: 4px; }

.cx-view-header h2 { margin: 0; font-size: 18px; flex: 1; }
.cx-page-num { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.cx-page {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cx-page-img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.cx-page h3 { margin: 0; font-size: 18px; }
.cx-page-sub { margin: 0; color: var(--muted); font-style: italic; }
.cx-dialogue { display: flex; flex-direction: column; gap: 6px; }
.cx-line { margin: 0; font-size: 14px; line-height: 1.6; }
.cx-line strong { color: var(--brand-ink); }
.cx-narrative {
  padding: 12px 14px;
  background: var(--panel-soft);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.7;
}
.cx-highlights h4 { margin: 8px 0 6px; font-size: 13px; color: var(--muted); }
.cx-hl-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-hl-pill {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 12px;
  font-weight: 600;
}
.cx-view-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
}
.cx-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.cx-progress-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #6d28d9);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.cx-loading, .cx-error { text-align: center; color: var(--muted); padding: 40px 0; }
.cx-vol-badge {
  position: absolute; top: 8px; right: 8px;
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}
.cx-card { position: relative; }
.cx-vol-card .cx-card-body strong { color: var(--brand-ink); }

/* ─── Immersive Reader (沉浸阅读) ─── */
.cx-ir-root {
  position: fixed; inset: 0; z-index: 9999;
  background: #111; color: #fff;
  transition: filter 0.15s ease;
}
.cx-ir-scroll {
  position: absolute; inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: none;          /* let clicks pass through to bars below */
}
.cx-ir-scroll::-webkit-scrollbar { display: none; }
.cx-ir-scroll { scrollbar-width: none; }
.cx-ir-pages-wrap {
  max-width: 720px; margin: 0 auto;
  pointer-events: auto;           /* re-enable for scroll + interaction */
}
.cx-ir-page {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}
.cx-ir-page-inner { position: relative; background: #f0f0f0; min-height: 200px; }
.cx-ir-page-img {
  width: 100%; display: block;
  pointer-events: none;
}
.cx-ir-page-no {
  position: absolute; bottom: 10px; right: 10px; z-index: 20;
  min-width: 32px; height: 26px; padding: 0 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.7); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.4);
}
.cx-ir-bubbles-layer {
  position: absolute; inset: 0; z-index: 10;
  pointer-events: none;           /* don't block clicks on narration below */
}
.cx-ir-narration-bar {
  padding: 14px 18px;
  background: #fff; color: #1a1a1a;
  font-size: 15px; line-height: 1.65;
  border-top: 1px solid #e5e5e5;
  pointer-events: auto;           /* ensure narration is clickable */
}
.cx-ir-narration-bar b { font-weight: 800; }
.cx-ir-word-token { cursor: pointer; border-bottom: 1px dotted rgba(0,0,0,0.28); }

/* Reader page-image load failure placeholder */
.cx-ir-page-fallback {
  display: flex; align-items: center; justify-content: center;
  min-height: 240px; padding: 24px;
  background: #f2f2f2; color: #888; font-size: 14px;
  border: 1px dashed #ccc;
}

/* Word lookup popup (tap a word in the reader) */
.cx-ir-word-pop {
  position: absolute; z-index: 60;
  transform: translate(-50%, -100%);
  background: #1f2330; color: #fff;
  border-radius: 12px; padding: 10px 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
  min-width: 140px; max-width: 80vw;
  pointer-events: auto;
}
.cx-ir-word-pop-head { font-size: 16px; font-weight: 800; margin-bottom: 8px; word-break: break-word; }
.cx-ir-word-pop-actions { display: flex; gap: 8px; }
.cx-ir-word-pop-actions button {
  flex: 1; white-space: nowrap;
  background: rgba(255,255,255,0.12); color: #fff;
  border: none; border-radius: 8px; padding: 7px 10px;
  font-size: 13px; cursor: pointer;
}
.cx-ir-word-pop-actions button:disabled { opacity: 0.55; cursor: default; }
.cx-ir-word-pop-actions button:not(:disabled):active { background: rgba(255,255,255,0.24); }
.cx-ir-word-pop-dict {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 13px; line-height: 1.5; max-width: 78vw;
}
.cx-ir-word-pop-dict-loading,
.cx-ir-word-pop-dict-err { opacity: 0.8; }
.cx-ir-word-pop-ipa { color: #9fb4ff; font-size: 12px; margin-bottom: 2px; }
.cx-ir-word-pop-pos { color: #ffd27a; font-size: 12px; margin-bottom: 2px; }
.cx-ir-word-pop-zh { font-weight: 700; margin-bottom: 2px; }
.cx-ir-word-pop-en { opacity: 0.9; }
.cx-ir-word-pop-eg { margin-top: 4px; opacity: 0.78; font-size: 12px; }

/* Bubbles */
.cx-ir-bubble {
  position: absolute; z-index: 10;
  pointer-events: auto;           /* individual bubbles are clickable */
}
.cx-ir-bubble-wrap {
  position: relative;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.cx-ir-bubble-inner {
  border-radius: 28px; padding: 12px 18px;
  border: 2px solid #111827;
  background: #fff; color: #111827;
  max-width: 200px;
}
.cx-ir-bubble-speaker {
  font-size: 13px; font-weight: 700; margin-bottom: 2px;
  color: #fb7299;
}
.cx-ir-bubble-text {
  font-size: 17px; line-height: 1.35; font-weight: 600;
}
.cx-ir-bubble-inner.orange {
  background: #ff8a3d; border-color: #c2410c; color: #fff;
}
.cx-ir-bubble-speaker.orange { color: #fff7ed; }
.cx-ir-bubble-tail {
  position: absolute; width: 0; height: 0;
  border-left: 12px solid transparent; border-right: 12px solid transparent;
  border-top: 16px solid #111827;
}
.cx-ir-bubble-tail-inner {
  position: absolute; width: 0; height: 0;
  border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-top: 14px solid #fff;
}
.cx-ir-bubble-tail.orange { border-top-color: #c2410c; }
.cx-ir-bubble-tail-inner.orange { border-top-color: #ff8a3d; }

/* End marker */
.cx-ir-end-marker {
  padding: 50px 0 60px; text-align: center;
  color: rgba(255,255,255,.4); font-size: 14px;
}

/* Chrome bars */
.cx-ir-top-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  height: calc(58px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 14px 0;
  background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.28), rgba(0,0,0,0));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; gap: 12px;
  transition: transform 0.25s ease;
  pointer-events: auto;
}
.cx-ir-bottom-bar {
  position: absolute; bottom: 14px; left: 14px; right: 14px; z-index: 30;
  background: rgba(18,20,32,.88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(0,0,0,.38);
  transition: transform 0.25s ease;
  pointer-events: auto;
}
.cx-ir-chrome-hidden.cx-ir-top-bar { transform: translateY(-100%); }
.cx-ir-chrome-hidden.cx-ir-bottom-bar { transform: translateY(100%); }

.cx-ir-top-bar .cx-ir-back {
  width: 42px; height: 42px; border-radius: 50%;
  font-size: 36px; line-height: 1; color: #fff;
  background: rgba(0,0,0,.18); border: none; cursor: pointer;
  display: grid; place-items: center;
}
.cx-ir-title {
  flex: 1; min-width: 0;
  font-size: 18px; font-weight: 800; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-ir-explain-btn {
  width: 42px; height: 42px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.66); cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff;
  font-size: 14px; font-weight: 900;
  display: flex; align-items: center; gap: 4px;
  justify-content: center;
}
.cx-ir-menu-btn {
  width: 42px; height: 42px;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,.12); color: #fff;
  font-size: 30px; line-height: 1; cursor: pointer;
}
.cx-ir-page-counter {
  position: absolute; top: calc(66px + env(safe-area-inset-top)); right: 14px; z-index: 30;
  background: rgba(0,0,0,.6); color: #fff;
  border-radius: 999px; padding: 4px 10px;
  font-size: 12px; font-weight: 700;
  transition: opacity 0.25s;
}

/* Bottom bar controls */
.cx-ir-slider-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 4px 4px;
}
.cx-ir-slider-row input[type="range"] {
  flex: 1; accent-color: #fb7299; height: 4px;
}
.cx-ir-slider-row button {
  font-size: 18px; color: rgba(255,255,255,.8);
  background: none; border: none; cursor: pointer; padding: 2px 4px;
}
.cx-ir-bar-btns {
  display: grid; grid-template-columns: repeat(3, 1fr);
  height: 54px;
}
.cx-ir-bar-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.8); font-size: 13px; gap: 2px;
}
.cx-ir-bar-btn:hover { color: #fff; }
.cx-ir-bar-btn-icon { font-size: 18px; line-height: 1; }
.cx-ir-bar-btn-label { font-size: 11px; }

/* Sheet overlay (bottom sheet for settings/chapters) */
.cx-ir-sheet-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,.6);
}
.cx-ir-sheet-panel {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: #1e1f26; color: #fff;
  border-radius: 16px 16px 0 0;
  padding: 20px;
  max-height: 75vh; overflow-y: auto;
  padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
}
.cx-ir-comments-panel {
  background: #fff;
  color: #1f2933;
  max-height: 82vh;
}
.cx-ir-comment-compose {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-bottom: 12px;
}
.cx-ir-comment-compose textarea {
  resize: none;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  border-radius: 16px;
  padding: 12px 14px;
  font: inherit;
  line-height: 1.5;
}
.cx-ir-comment-compose button {
  border: none;
  border-radius: 16px;
  background: #fb7299;
  color: #fff;
  font-weight: 900;
  padding: 0 16px;
}
.cx-ir-comment-compose button:disabled,
.cx-ir-comment-compose textarea:disabled {
  opacity: .55;
}
.cx-ir-comments-status {
  color: #6b7280;
  font-size: 14px;
  margin: 10px 0;
}
.cx-ir-comments-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.cx-ir-comment-item {
  padding: 12px 0;
  border-bottom: 1px solid #eef2f7;
}
.cx-ir-comment-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}
.cx-ir-comment-head strong { color: #1f2937; }
.cx-ir-comment-head span { color: #9ca3af; font-size: 13px; }
.cx-ir-comment-item p {
  margin: 0;
  color: #111827;
  line-height: 1.65;
  font-size: 16px;
}
.cx-ir-sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.cx-ir-sheet-title {
  font-size: 18px; font-weight: 700;
}
.cx-ir-sheet-close {
  font-size: 18px; color: rgba(255,255,255,.6);
  background: none; border: none; cursor: pointer;
}

/* Settings row */
.cx-ir-row {
  background: rgba(255,255,255,.05);
  border-radius: 12px; padding: 14px;
  margin-bottom: 10px;
}
.cx-ir-row-label {
  font-size: 14px; color: rgba(255,255,255,.7);
  margin-bottom: 8px;
}
.cx-ir-row-content {
  display: flex; align-items: center; gap: 12px;
}
.cx-ir-row-content input[type="range"] {
  flex: 1; accent-color: #fb7299;
}
.cx-ir-toggle {
  width: 44px; height: 24px; border-radius: 999px;
  background: rgba(255,255,255,.2);
  position: relative; cursor: pointer; border: none;
  transition: background 0.2s;
}
.cx-ir-toggle.active { background: #fb7299; }
.cx-ir-toggle-dot {
  position: absolute; top: 2px; width: 20px; height: 20px;
  border-radius: 999px; background: #fff;
  transition: left 0.2s;
  left: 2px;
}
.cx-ir-toggle.active .cx-ir-toggle-dot { left: 22px; }

/* Quality buttons */
.cx-ir-q-btn {
  padding: 6px 14px; height: 32px;
  border-radius: 8px; border: 1px solid;
  font-size: 13px; cursor: pointer;
  background: transparent;
}
.cx-ir-q-btn.active {
  border-color: #fb7299; color: #fb7299;
}
.cx-ir-q-btn.inactive {
  border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.7);
}
.cx-ir-q-btn:disabled {
  opacity: .4; cursor: not-allowed;
}

/* Chapters sheet */
.cx-ir-ch-item {
  width: 100%; text-align: left;
  border-radius: 12px; padding: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid transparent;
  margin-bottom: 8px; cursor: pointer;
  transition: background 0.12s;
}
.cx-ir-ch-item:hover { background: rgba(255,255,255,.1); }
.cx-ir-ch-item.current {
  background: rgba(251,114,153,.15);
  border-color: rgba(251,114,153,.4);
}
.cx-ir-ch-title {
  font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-ir-ch-pages {
  font-size: 12px; color: rgba(255,255,255,.5); margin-top: 2px;
}
.cx-ir-ch-reading {
  font-size: 12px; color: #fb7299; font-weight: 700;
}

/* Explain panel (full-screen overlay) */
.cx-ir-explain-full {
  position: fixed; inset: 0; z-index: 50;
  background: #fff; color: #1a1a1a;
  overflow-y: auto;
}
.cx-ir-explain-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #e5e5e5;
  height: 52px; padding: 0 16px;
  display: flex; align-items: center; gap: 12px;
}
.cx-ir-explain-back {
  font-size: 20px; background: none; border: none; cursor: pointer;
}
.cx-ir-explain-title {
  flex: 1; font-size: 16px; font-weight: 700;
}
.cx-ir-explain-model {
  font-size: 12px; color: #999;
}
.cx-ir-explain-body {
  max-width: 640px; margin: 0 auto;
  padding: 20px 16px 40px;
}

.cx-ir-section {
  margin-bottom: 24px;
}
.cx-ir-section-title {
  font-size: 20px; font-weight: 800; margin-bottom: 12px;
}

.cx-ir-sentence-row {
  margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
}
.cx-ir-sentence-row:last-child { border-bottom: none; }
.cx-ir-sentence-en {
  font-size: 14px; font-weight: 600;
}
.cx-ir-sentence-zh {
  font-size: 14px; color: #666; margin-top: 4px;
}

.cx-ir-word-card {
  margin-bottom: 14px; padding: 14px;
  border-radius: 12px;
  background: #fce4ec; border: 1px solid #f8bbd0;
}
.cx-ir-word-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.cx-ir-word-word {
  font-size: 18px; font-weight: 800;
}
.cx-ir-word-pos {
  font-size: 12px; color: #666;
}
.cx-ir-word-ipa {
  font-size: 12px; color: #666;
}
.cx-ir-word-zh {
  font-size: 14px; margin-top: 4px;
}
.cx-ir-word-en {
  font-size: 12px; color: #666; margin-top: 2px;
}

.cx-ir-pattern-card {
  margin-bottom: 12px; padding: 14px;
  border-radius: 12px;
  background: #e8eaf6; border: 1px solid #c5cae9;
}
.cx-ir-pattern-pattern {
  font-size: 16px; font-weight: 700;
}
.cx-ir-pattern-explain {
  font-size: 14px; color: #555; margin-top: 4px;
}

.cx-ir-example-list {
  margin-top: 8px;
}
.cx-ir-example-item {
  font-size: 14px; background: #fff;
  border-radius: 8px; padding: 8px;
  border: 1px solid #e5e5e5;
  margin-bottom: 6px;
}
.cx-ir-example-num {
  font-size: 10px; color: #999;
  width: 16px; flex-shrink: 0;
}
.cx-ir-example-en {
  font-style: italic; color: #1a1a1a;
}
.cx-ir-example-zh {
  font-size: 12px; color: #666; margin-top: 2px;
}
.cx-ir-pattern-card .cx-ir-example-item {
  border-color: #c5cae9;
}

/* Loading spinner */
.cx-ir-loading {
  padding: 60px 0; text-align: center;
}
.cx-ir-spinner {
  width: 40px; height: 40px;
  border: 4px solid rgba(251,114,153,.3);
  border-top-color: #fb7299;
  border-radius: 999px;
  animation: cx-ir-spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes cx-ir-spin { to { transform: rotate(360deg); } }
.cx-ir-loading-text {
  margin-top: 16px; font-size: 14px; color: #999;
}

.cx-ir-error {
  font-size: 14px; color: #c62828;
}

.cx-ir-empty-hint {
  font-size: 14px; color: rgba(255,255,255,.6);
  padding: 20px 0;
}

.cx-ir-hunzhi .cx-ir-page { background: #fff; color: #1a1a1a; }

/* ─── Stats dashboard (我的) ─── */
.stats-top {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}
.stats-big-card {
  padding: 24px 28px;
  border-radius: 22px;
  background: linear-gradient(135deg, #4be619 0%, #33a315 100%);
  color: #fff;
  box-shadow: 0 12px 32px rgba(75, 230, 25, 0.22);
}
.stats-big-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.stats-card-label {
  font-size: 14px;
  opacity: 0.85;
}
.stats-card-bank {
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.stats-big-num {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stats-big-sub {
  font-size: 14px;
  opacity: 0.9;
  margin: 6px 0 14px;
}
.stats-bar {
  height: 8px;
  background: rgba(255,255,255,0.22);
  border-radius: 999px;
  overflow: hidden;
}
.stats-bar-fill {
  height: 100%;
  background: #fff;
  border-radius: 999px;
  transition: width 0.5s ease;
}
.stats-mini-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.stats-mini {
  padding: 14px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: center;
}
.stats-mini-n {
  font-size: 24px;
  font-weight: 700;
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
}
.stats-mini-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.stats-dist-card, .stats-chart-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 22px;
  margin-bottom: 14px;
}
.stats-dist-card h3, .stats-chart-card h3 {
  margin: 0 0 12px;
  font-size: 16px;
  color: var(--ink);
}
.dist-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}
.dist-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.dist-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.dist-bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  align-items: end;
  height: 160px;
}
.dist-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}
.dist-bar {
  width: 100%;
  flex: 1;
  background: var(--panel-soft);
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.dist-bar-fill {
  width: 100%;
  border-radius: 8px 8px 0 0;
  transition: height 0.5s ease;
  min-height: 4px;
}
.dist-bar-pct {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.dist-bar-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.stats-bar-chart {
  display: flex;
  gap: 4px;
  align-items: end;
  height: 90px;
}
.sbc-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.sbc-bar {
  width: 100%;
  background: linear-gradient(180deg, #4be619, #33a315);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  transition: height 0.5s ease;
}
.sbc-label {
  margin-top: 4px;
  font-size: 10px;
  color: var(--muted);
}

/* ─── 我的页面 — 个人主页 redesign ─── */
.prof-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  margin: 0 0 20px;
  padding: 22px 24px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  color: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(99,102,241,0.25);
}
.prof-hero-greet { display: flex; align-items: center; gap: 10px; }
.prof-hero-emoji { font-size: 28px; }
.prof-hero-greet h2 { margin: 0; font-size: 19px; font-weight: 700; }
.prof-hero-sub { margin: 6px 0 0; font-size: 13px; opacity: 0.92; }
.prof-hero-sub strong { font-weight: 700; }
.prof-hero-right {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 18px;
  align-items: center;
}
.prof-hero-stat { display: flex; flex-direction: column; align-items: center; }
.prof-hero-stat .phn { font-size: 22px; font-weight: 800; line-height: 1; }
.prof-hero-stat .phl { font-size: 11px; opacity: 0.85; margin-top: 3px; }

@media (max-width: 640px) {
  .prof-hero { grid-template-columns: 1fr; }
  .prof-hero-right { justify-content: start; gap: 22px; }
}

.prof-block {
  margin: 14px 0;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.prof-block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.prof-block-head h3 {
  margin: 0;
  font-size: 15px;
  color: var(--brand-ink);
  font-weight: 700;
}
.prof-block-hint { font-size: 11px; color: var(--muted); }

/* Cross-bank progress matrix */
.prof-bank-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prof-bank-row {
  display: grid;
  grid-template-columns: 110px 1fr 130px;
  gap: 10px;
  align-items: center;
  padding: 6px 4px;
  border-radius: 8px;
}
.prof-bank-row.active { background: rgba(99, 102, 241, 0.06); }
.prof-bank-name {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.prof-active-dot {
  font-style: normal;
  padding: 1px 6px;
  background: var(--brand);
  color: #fff;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}
.prof-bank-bar {
  height: 8px;
  background: var(--panel-soft);
  border-radius: 4px;
  overflow: hidden;
}
.prof-bank-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #ec4899);
  transition: width 0.5s ease;
}
.prof-bank-stat {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 540px) {
  .prof-bank-row { grid-template-columns: 80px 1fr 90px; }
}

/* Achievements */
.prof-achv-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: 10px;
}
.prof-achv {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 8px;
  background: var(--panel-soft);
  border: 1px dashed var(--line);
  border-radius: 12px;
  opacity: 0.45;
  filter: grayscale(0.5);
  transition: all 0.25s ease;
}
.prof-achv.got {
  opacity: 1;
  filter: none;
  background: linear-gradient(180deg, #fef3c7, #fff7ed);
  border-style: solid;
  border-color: #f59e0b;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.15);
}
.prof-achv-icon { font-size: 26px; }
.prof-achv-label { margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--ink); }
.prof-achv-hint { margin-top: 2px; font-size: 10px; color: var(--muted); }

/* Activity heatmap */
.prof-heatmap {
  display: grid;
  grid-template-columns: repeat(28, 1fr);
  gap: 3px;
}
.prof-heat-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--panel-soft);
  transition: transform 0.15s ease;
}
.prof-heat-cell:hover { transform: scale(1.25); }
@media (max-width: 540px) {
  .prof-heatmap { grid-template-columns: repeat(14, 1fr); }
}

.prof-pref-cards { margin-top: 4px; }

/* ─── Stats: 5-skill pillars (听说读写背) ─── */
.stats-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.pillar-card {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pillar-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
.pillar-icon {
  font-size: 26px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-soft);
  border-radius: 10px;
  flex-shrink: 0;
}
.pillar-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pillar-n {
  font-size: 22px;
  font-weight: 800;
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pillar-label {
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
}
.pillar-hint { font-size: 10.5px; color: var(--muted); }

/* ─── Stats: 拓展学习模块（阅读/听书/漫画） ─── */
.stats-ext-modules { margin: 14px 0; }
.stats-ext-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.stats-ext-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.stats-ext-hint { font-size: 12px; color: var(--muted); }
.stats-ext-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.stats-ext-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  border-left: 3px solid var(--ext-accent, var(--brand));
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stats-ext-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
.stats-ext-icon {
  font-size: 28px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-soft);
  border-radius: 12px;
  flex-shrink: 0;
}
.stats-ext-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.stats-ext-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.stats-ext-row { display: flex; align-items: baseline; gap: 4px; }
.stats-ext-num {
  font-size: 20px;
  font-weight: 800;
  color: var(--ext-accent, var(--brand-ink));
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stats-ext-label { font-size: 11px; color: var(--muted); }

/* Profile tab: 拓展学习 compact cards */
.prof-ext-cards { margin-top: 4px; }
.pcard-ext { border-left: 3px solid var(--brand); }

/* ─── Word list page ─── */
.wl-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 18px 80px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wl-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0 12px;
  border-bottom: 1px solid var(--line);
}
.wl-header h1 {
  margin: 0;
  font-size: 22px;
  flex: 1;
}
.wl-goal {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: linear-gradient(140deg, #4be619, #33a315);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  vertical-align: middle;
}
.wl-count {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.wl-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.wl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.wl-row-label {
  width: 64px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.seg-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.seg-pill {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.seg-pill.active {
  background: var(--brand-ink);
  color: #fff;
  border-color: var(--brand-ink);
}
.seg-pill:hover:not(.active) {
  border-color: var(--brand);
  color: var(--brand-ink);
}
.wl-search {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  background: var(--panel-soft);
}
.wl-tier-slider {
  flex: 1;
  appearance: none;
  background: linear-gradient(90deg,#cbd5e1,#ef4444,#f59e0b,#84cc16,#77e814);
  height: 8px;
  border-radius: 999px;
  outline: none;
}
.wl-tier-slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.wl-tier-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--c, var(--line));
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}
.wl-az-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.wl-az-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
}
.wl-list { display: flex; flex-direction: column; gap: 16px; }
.wl-group { padding: 0; }
.wl-letter {
  margin: 0 0 6px;
  padding: 4px 12px;
  font-size: 15px;
  color: var(--brand-ink);
  background: var(--panel-soft);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wl-letter-n {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}
.wl-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wl-item {
  display: grid;
  grid-template-columns: 14px minmax(120px, max-content) 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.12s ease;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.wl-item:hover { background: var(--panel-soft); }
.wl-item.mastered .wl-word { color: var(--muted); text-decoration: line-through; }
.wl-tier-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.wl-word {
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  white-space: nowrap;
}
.wl-pos {
  font-style: italic;
  color: var(--muted);
  font-size: 12px;
  margin-right: 6px;
}
.wl-meaning {
  font-size: 14px;
  color: #475569;
  text-align: left;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wl-used {
  min-width: 32px;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(140deg, #4be619, #33a315);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.wl-used-zero {
  background: var(--panel-soft);
  color: var(--muted);
  font-weight: 400;
}
@media (max-width: 540px) {
  .wl-item { grid-template-columns: 14px minmax(90px, max-content) 1fr auto; }
  .wl-word { font-size: 15px; }
  .wl-meaning { font-size: 13px; }
}
.wl-empty {
  text-align: center;
  color: var(--muted);
  padding: 40px 0;
}

/* Per-bank progress block on profile-home */
.bank-progress-block {
  margin: 12px 0 6px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(75, 230, 25, 0.06), rgba(51, 163, 21, 0.02));
  border: 1px solid rgba(75, 230, 25, 0.24);
  border-radius: 16px;
}
.bank-progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.bank-progress-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.bank-progress-label .bank-ic { width: 18px; height: 18px; vertical-align: -3px; stroke: #15a05a; }
.bank-progress-numbers {
  font-size: 14px;
  color: var(--muted);
}
.bank-progress-numbers b {
  color: var(--brand-ink);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bank-progress-numbers em {
  font-style: normal;
  margin-left: 4px;
  font-size: 13px;
  color: var(--brand);
  font-weight: 600;
}
.bank-progress-bar {
  height: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.bank-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4be619, #33a315);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.bank-progress-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* Sub progression bar on done page (industry mode) */
.sub-progress {
  margin: 12px 0 6px;
  padding: 12px 16px;
  background: var(--panel-soft);
  border-radius: 12px;
  border: 1px solid var(--line);
}
.sub-progress-bar {
  height: 8px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.sub-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4be619, #33a315);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.sub-progress-text {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.sub-progress-text b {
  color: var(--brand-ink);
}
[data-act="next-sub"] {
  display: block;
  width: 100%;
  margin: 12px 0;
}

/* Home page challenge buttons */
.home-features .feat-btn {
  display: block;
  text-align: left;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.home-features .feat-btn:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(51, 163, 21, 0.10);
}
.home-features .feat-btn .feat-tag {
  display: inline-block;
  font-weight: 600;
  margin-bottom: 4px;
}
.home-features .feat-btn p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.me-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 28px 80px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.me-header {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(140deg, rgba(51, 163, 21, 0.08), rgba(75, 230, 25, 0.04));
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px 28px;
}
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(140deg, #4be619, #33a315);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.me-info h1 { margin: 0 0 4px; font-size: 24px; }
.me-info p { margin: 0; color: var(--muted); font-size: 13px; }
.me-email { color: var(--brand-ink) !important; }
.me-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  padding: 0 4px;
}
.me-tabs button {
  font: inherit;
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 12px 18px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 500;
}
.me-tabs button.active {
  color: var(--brand-ink);
  border-bottom-color: var(--brand);
  font-weight: 700;
}
.me-tabs button:hover { color: var(--ink); }
.me-body { display: flex; flex-direction: column; gap: 16px; }
.me-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.me-section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: var(--shadow);
}
.me-section h3 { margin: 0 0 12px; font-size: 16px; color: var(--brand-ink); }
.me-section h3 em { font-style: normal; font-size: 13px; color: var(--muted); margin-left: 8px; }

/* 漫画书架 (我的页面) */
.me-comic-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.me-comic-head h3 { margin: 0; }
.me-comic-go {
  border: none; background: var(--brand); color: #fff; font-size: 13px; font-weight: 600;
  padding: 6px 14px; border-radius: 8px; cursor: pointer;
}
.me-comic-go:hover { opacity: 0.9; }
.me-comic-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px;
}
.me-comic-card {
  display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: var(--panel); cursor: pointer;
  transition: transform 0.15s;
}
.me-comic-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.me-comic-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; background: var(--panel-soft); }
.me-comic-fallback {
  width: 100%; aspect-ratio: 2/3; display: flex; align-items: center; justify-content: center;
  background: var(--panel-soft); font-size: 24px; font-weight: 800; color: var(--muted);
}
.me-comic-info { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.me-comic-info strong { font-size: 13px; line-height: 1.3; }
.me-comic-info span { font-size: 11px; color: var(--muted); }

/* 生词本 */
.wb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
}
.wb-item strong { font-size: 15px; color: var(--ink); flex: 1; }
.wb-meta { font-size: 11px; color: var(--muted); }

/* 档案 log */
.log-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.log-list li {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  padding: 8px 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  flex-wrap: wrap;
}
.log-date { color: var(--muted); font-family: "SF Mono", ui-monospace, monospace; font-size: 12px; }
.log-list strong { color: var(--ink); }
.log-list em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  background: var(--panel);
  padding: 2px 8px;
  border-radius: 999px;
}
.log-warn { color: var(--warn) !important; background: rgba(154,103,0,0.1) !important; }

/* ASR 麦克风按钮状态 */
.btn-mic.rec-active {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
  animation: pulse 1.2s infinite;
}
.btn-mic.rec-busy {
  background: var(--warn);
  color: #fff;
  border-color: var(--warn);
  cursor: progress;
}
.btn-mic.rec-error {
  background: rgba(180,35,24,0.15);
  color: var(--danger);
  border-color: var(--danger);
}



/* ============================================================
   听说课程 Stage C 新增：意群板书 / 中英结合引入 / 发音规则示范
   ============================================================ */
.sg-board {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px;
  font-size: 22px;
  line-height: 1.6;
  font-family: Inter, ui-sans-serif, system-ui;
}
.sg-block {
  padding: 2px 6px;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.sg-block.now {
  background: rgba(51, 163, 21, 0.18);
  color: var(--brand-ink);
  font-weight: 700;
}
.sg-block.past { color: var(--ok); }
.sg-block.future { color: var(--muted); }
.sg-sep {
  color: var(--brand);
  font-weight: 700;
  font-size: 24px;
  margin: 0 4px;
}

.intro-headline { display: flex; flex-direction: column; gap: 4px; }
.intro-headline h2 { margin: 0; }
.intro-headline .zh-light { color: var(--muted); font-weight: 500; font-size: 18px; }

.intro-subq-list { display: flex; flex-direction: column; gap: 12px; }
.intro-subq {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0.55;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.intro-subq.active { opacity: 1; border-color: var(--brand); background: rgba(51, 163, 21, 0.04); }
.intro-subq.answered { opacity: 1; }
.intro-subq header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.subq-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  text-align: center;
  line-height: 28px;
  font-size: 14px;
  font-weight: 700;
  flex: 0 0 auto;
}
.intro-subq header > div { flex: 1; }
.intro-q-en { margin: 0; font-size: 16px; color: var(--ink); font-weight: 500; }
.intro-subq em { color: var(--muted); font-style: normal; font-size: 13px; }
.btn-listen.tiny {
  padding: 4px 10px;
  font-size: 12px;
  background: rgba(51, 163, 21, 0.1);
  color: var(--brand-ink);
  border-color: rgba(51, 163, 21, 0.3);
}

.phonetic-example {
  background: rgba(255, 244, 222, 0.5);
  border: 1px solid #f5d99f;
  border-radius: 12px;
  padding: 8px 14px;
}
.phonetic-example summary {
  cursor: pointer;
  font-weight: 600;
  color: #92400e;
  font-size: 13px;
}
.example-card { padding: 8px 0; }
.example-cap {
  margin: 0 0 4px;
  font-size: 13px;
  color: #78350f;
}
.example-cap.small { font-size: 11px; color: var(--muted); margin-top: 4px; }

.comp-q.active { background: rgba(51, 163, 21, 0.05); border: 1px solid var(--brand); }
.comp-q.answered { opacity: 0.85; }
.comp-q-list { display: flex; flex-direction: column; gap: 12px; }
.comp-q-list-title {
  margin: 0 0 4px;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}
.comp-q {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.comp-q p { margin: 0; }
.comp-q p.zh { color: var(--muted); font-size: 13px; margin: 4px 0 8px; }



/* 白板叠层：保留学生在前几步画的笔迹 */
.markup-board { position: relative; }
.markup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.85;
  mix-blend-mode: multiply;
}
.markup-overlay.stress { opacity: 0.95; }
.canvas-toolbar.simple {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 4px;
}



/* 权威板书 SVG 容器 */
.spec-board-wrap {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  overflow-x: auto;
}
.spec-board {
  width: 100%;
  height: auto;
  display: block;
}
.phonetic-markup-preview {
  margin-top: 6px;
  background: var(--panel-soft);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 8px 12px;
}
.phonetic-markup-preview summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
}
.phonetic-markup-preview img {
  max-width: 100%;
  border-radius: 8px;
  margin-top: 8px;
  filter: contrast(1.2);
}


/* 权威板书 (HTML + 绝对定位 SVG)：浏览器算字宽，标记位置贴合真实文本 */
.spec-board {
  position: relative;
  display: block;
  padding: 28px 14px 40px;
  font-family: Inter, ui-sans-serif, system-ui;
  background: var(--panel-soft);
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow-x: auto;
}
.spec-board.compact {
  padding: 16px 10px 28px;
  font-size: 0;
}
.spec-board.compact .spec-line { font-size: 18px; }
.spec-line {
  margin: 0;
  font-size: 24px;
  line-height: 1.6;
  color: #1f2937;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
}
.spec-word {
  display: inline-block;
  padding: 0 1px;
  position: relative;
}
.spec-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.example-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 8px 0;
}
.example-item {
  background: #fffaf2;
  border: 1px solid #f5d99f;
  border-radius: 8px;
  padding: 8px 10px 10px;
}
.example-item .spec-board { background: transparent; border: none; padding: 18px 4px 26px; }
.example-item .spec-board .spec-line { font-size: 18px; }
.example-item .example-cap { margin: 4px 0 0; font-size: 11px; }

/* 句型板书 + 参考答案 */
.pattern-board {
  background: linear-gradient(180deg, #fff8e6 0%, #fff3d2 100%);
  border: 1px solid #f5c267;
  border-radius: 14px;
  padding: 14px 18px;
  margin: 8px 0 12px;
}
.pattern-board-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #92400e;
  font-weight: 700;
}
.pattern-board-en {
  margin: 6px 0 4px;
  font-size: 22px;
  font-weight: 700;
  color: #92400e;
  letter-spacing: 0.01em;
}
.pattern-board-eg {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.pattern-board-eg em { font-style: italic; color: var(--ink); }

/* ==== 重点短语 5 阶段教学卡片 ==== */
.fp-header {
  margin-bottom: 14px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(20, 122, 77, 0.06), rgba(255, 255, 255, 0.4));
  border: 1px solid rgba(20, 122, 77, 0.18);
  border-radius: 14px;
}
.fp-header h2 { margin: 0 0 6px 0; font-size: 18px; }
.fp-current { margin: 0 0 10px 0; font-size: 16px; color: var(--ink); }
.fp-current strong { color: var(--brand); font-size: 18px; }
.fp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-chip {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--muted);
  white-space: nowrap;
}
.fp-chip.now { background: var(--brand); color: white; font-weight: 600; }
.fp-chip.done { background: rgba(20, 122, 77, 0.15); color: var(--ok); }
.fp-chip.future { opacity: 0.55; }

.fp-collocations { margin: 12px 0; padding: 10px 14px; background: rgba(255, 196, 0, 0.08); border-radius: 10px; }
.fp-coll-label { font-size: 12px; color: var(--muted); margin-right: 6px; }
.fp-coll {
  display: inline-block;
  margin: 2px 6px 2px 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 196, 0, 0.18);
  color: #7a5b00;
  font-size: 13px;
}

.fp-examples { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.fp-example {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  align-items: start;
}
.fp-example .btn-listen.tiny {
  grid-row: span 2;
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 8px;
  align-self: center;
}
.fp-ex-en { margin: 0; font-size: 15px; color: var(--ink); }
.fp-ex-zh { margin: 2px 0 0 0; font-size: 13px; color: var(--muted); }

.reference-answer {
  margin-top: 10px;
  background: rgba(20, 122, 77, 0.08);
  border: 1px solid rgba(20, 122, 77, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
}
.ref-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ok);
  font-weight: 700;
}
.reference-answer p {
  margin: 4px 0 0;
  font-size: 16px;
  color: var(--ink);
  font-weight: 500;
}

/* 4SAPI 生成的发音板书图 */
.phonetic-board-img {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fffaf0;
}
.board-placeholder {
  position: relative;
}
.board-placeholder p { margin-top: 8px; color: var(--muted); font-size: 12px; text-align: center; }

/* ── AI Dialogue Class (7-step pipeline) ────────────────────────── */
.dc-container { padding: 24px 20px; max-width: 920px; margin: 0 auto; }
.dc-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.dc-progress-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.dc-step-label { font-size: 14px; }
.dc-step-label strong { font-size: 16px; color: var(--accent, #1a73e8); }
.dc-scene-card { background: linear-gradient(180deg, #f8fafc, #fff); border: 1px solid #e4e9f0; border-radius: 14px; padding: 18px 20px; margin-bottom: 18px; }
.dc-h2 { margin: 0 0 4px 0; font-size: 22px; }
.dc-subtitle { color: var(--muted, #6b7585); margin: 0 0 8px 0; font-size: 13px; }
.dc-scene { margin: 0; color: #444; font-size: 14px; line-height: 1.55; }
.dc-stage { margin-bottom: 16px; min-height: 200px; }
.dc-stage-block { background: #fff; border: 1px solid #e4e9f0; border-radius: 14px; padding: 18px 20px; }
.dc-stage-text { font-size: 16px; line-height: 1.6; margin: 0 0 6px 0; }
.dc-stage-text-zh { color: #6b7585; font-size: 13px; margin: 0 0 14px 0; }
.dc-wordbank { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px 0; }
.dc-word-chip { font-size: 13px; font-weight: 600; color: #60933e; background: #eef6e7; border: 1px solid #d0e6bf; border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: background .15s; }
.dc-word-chip:hover { background: #e0efd3; }
.dc-warmup-q { padding: 12px 14px; background: #fff8e1; border-radius: 10px; display: flex; align-items: flex-start; gap: 10px; }
.dc-q-en { font-weight: 600; margin: 0 0 4px 0; }
.dc-q-zh { color: #6b7585; font-size: 13px; margin: 0; }
.dc-instruction { color: #444; margin: 0 0 14px 0; font-size: 14px; }
.dc-lines { list-style: none; padding: 0; margin: 0 0 14px 0; }
.dc-line { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; align-items: flex-start; transition: background 0.15s; }
.dc-line.cur { background: #fff7d8; border: 1px solid #ffe48d; }
.dc-line.done { opacity: 0.55; }
.dc-line-speaker { font-weight: 700; color: var(--accent, #1a73e8); min-width: 60px; }
.dc-line-en { margin: 0; flex: 1; font-size: 15px; line-height: 1.55; }
.dc-line-zh { color: #6b7585; font-size: 13px; margin: 4px 0 0 0; }
.dc-mini-review { margin-top: 14px; padding: 12px 14px; background: #e8f5ff; border-left: 3px solid #1a73e8; border-radius: 8px; font-size: 14px; }
.dc-teacher-bubble { margin: 14px 0; }
.dc-teacher-msg { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; background: linear-gradient(180deg, #fff8f0, #fff); border: 1px solid #ffd9a8; border-radius: 14px; }
.dc-teacher-icon { font-size: 24px; }
.dc-teacher-msg p { margin: 0; line-height: 1.6; }
.dc-controls { display: flex; gap: 12px; justify-content: flex-end; }
.dc-controls .btn-lg { min-width: 160px; }
.dc-stub { color: #888; font-style: italic; padding: 24px 12px; text-align: center; }

/* ── Immersive classroom shell (no top chrome — just stage + slim progress) ── */
/* flex 列 + 满屏高度,把进度条/上一步下一步推到页面底部(上方留更多空间) */
.dc-immersive { position: relative; padding-top: 56px; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; }
.dc-immersive .dc-stage { margin-bottom: 0; }
.dc-immersive .dc-progress-rail { margin-top: auto; }   /* ← 把进度+控制条顶到底部(上方 stage 撑开剩余空间) */
.dc-immersive .dc-controls { padding-bottom: 4px; }
/* 上一步/下一步等宽,贴底更协调 */
.dc-immersive .dc-controls { justify-content: stretch; }
.dc-immersive .dc-controls > button { flex: 1; min-width: 0; }
/* 学生展示(脱稿) */
.dc-demo-rec { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:56px; border:0; border-radius:16px; padding:16px; margin-top:6px;
  font-size:16px; font-weight:700; color:#fff; background:linear-gradient(180deg,#34c759,#28a745); box-shadow:0 6px 16px rgba(40,167,69,.28); cursor:pointer; transition:transform .1s; }
.dc-demo-rec:active { transform:scale(.98); }
.dc-demo-rec.rec { background:linear-gradient(180deg,#ff5b5b,#e03131); box-shadow:0 6px 16px rgba(224,49,49,.32); animation:dcgPulse 1s infinite; }
.dc-recdot2 { width:11px; height:11px; border-radius:50%; background:#fff; display:inline-block; animation:dcgPulse .9s infinite; }
.dc-demo-rec .dc-ico, .dc-demo-rec svg { stroke:#fff; }
.dc-demo-result { margin-top:14px; }
.dc-demo-result .dc-loading { color:#6e6e73; font-size:14px; padding:8px 2px; }
.dc-demo-scores { display:flex; gap:10px; margin:2px 0 14px; }
.dc-demo-score { flex:1; background:#f6f8fb; border-radius:14px; padding:12px 6px; text-align:center; }
.dc-demo-score b { display:block; font-size:30px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.dc-demo-score b.g { color:#1f9d4d; } .dc-demo-score b.y { color:#e0a52e; } .dc-demo-score b.r { color:#d9534f; }
.dc-demo-score span { font-size:12.5px; color:#6e6e73; margin-top:5px; display:block; }
.dc-demo-sec { background:#fff; border:1px solid #eef1f5; border-radius:12px; padding:12px 14px; margin-bottom:10px; font-size:14px; line-height:1.6; color:#33403c; }
.dc-demo-sec.ok { background:#f1fbf4; border-color:#cdeed7; }
.dc-demo-sec strong { display:inline-flex; align-items:center; gap:6px; color:#1d1d1f; }
.dc-demo-sec strong svg { vertical-align:-3px; }
.dc-demo-sec p { margin:6px 0 0; }
.dc-demo-sub { color:#8a8a8e; font-size:13px; }
.dc-demo-sec code { background:#eef2f7; border-radius:5px; padding:1px 6px; font-size:14px; color:#0f766e; }
.dc-bad-word { color:#d9534f; font-weight:700; }
.dc-demo-sec .dc-fb-list { margin:8px 0 0; padding-left:18px; }
.dc-demo-sec .dc-fb-list li { margin:4px 0; }
.dc-demo-sec .dc-fb-list b { color:#0f766e; }
.dc-rd-theme-dark .dc-demo-score, .dc-rd-theme-dark .dc-demo-sec { background:#262a33; border-color:#363b45; color:#cfd4dd; }
.dc-exit-min {
  position: absolute; top: 14px; left: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #e4e9f0; background: #fff; color: #5a6472;
  font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); z-index: 5; transition: background .15s, color .15s;
}
.dc-exit-min:hover { background: #f3f5f8; color: #1a2030; }
.dc-resume-toast {
  position: absolute; top: 14px; left: 50%; transform: translate(-50%, -8px);
  background: rgba(26,32,48,.92); color: #fff; font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: 999px; z-index: 9;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease; white-space: nowrap;
}
.dc-resume-toast.show { opacity: 1; transform: translate(-50%, 0); }
.dc-records-btn {
  position: absolute; top: 14px; right: 16px; z-index: 6;
  border: 1px solid #e4e9f0; background: #fff; color: #49972a;
  font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 999px;
  cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.06);
  display: inline-flex; align-items: center; gap: 4px; transition: background .15s;
}
.dc-records-btn:hover { background: #f4faf1; }
.dc-records-overlay {
  position: fixed; inset: 0; z-index: 1200; background: rgba(15,23,32,.45);
  display: flex; align-items: flex-end; justify-content: center;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.dc-records-sheet {
  width: 100%; max-width: 640px; max-height: 86vh; background: #f7f9fb;
  border-radius: 20px 20px 0 0; display: flex; flex-direction: column;
  box-shadow: 0 -8px 30px rgba(0,0,0,.18); animation: dcSheetUp .25s ease;
}
@keyframes dcSheetUp { from { transform: translateY(28px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
@media (min-width: 720px) { .dc-records-overlay { align-items: center; } .dc-records-sheet { border-radius: 20px; } }
.dc-records-head {
  display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px;
  border-bottom: 1px solid #eef2f6; position: sticky; top: 0; background: #f7f9fb; border-radius: 20px 20px 0 0;
}
.dc-records-head strong { font-size: 17px; color: #16202c; }
.dc-records-sub { font-size: 12px; color: #8a97a4; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-records-close {
  border: none; background: #eceff3; color: #5a6472; width: 30px; height: 30px;
  border-radius: 50%; font-size: 15px; cursor: pointer; flex-shrink: 0;
}
.dc-records-close:hover { background: #e2e6ec; }
.dc-records-body { padding: 14px 16px 26px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.dc-records-empty { text-align: center; color: #8a97a4; font-size: 14px; line-height: 1.7; padding: 40px 18px; }
.dc-rec-card { background: #fff; border: 1px solid #eef2f6; border-radius: 14px; padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.dc-rec-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dc-rec-badge { font-size: 11px; font-weight: 700; color: #49972a; background: #ebf5e6; padding: 3px 9px; border-radius: 999px; }
.dc-rec-score { font-size: 11px; font-weight: 700; color: #b06a00; background: #fff3e0; padding: 3px 9px; border-radius: 999px; }
.dc-rec-q { font-size: 15px; font-weight: 700; color: #16202c; line-height: 1.5; }
.dc-rec-ref { font-size: 12px; color: #8a97a4; margin-top: 4px; }
.dc-rec-ans { font-size: 13px; color: #3a4856; margin-top: 8px; line-height: 1.6; }
.dc-rec-ans em { color: #16202c; font-style: normal; font-weight: 600; }
.dc-rec-fb { font-size: 13px; color: #49972a; background: #f4faf1; border-radius: 10px; padding: 9px 11px; margin-top: 8px; line-height: 1.6; }
.dc-rec-actions { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.dc-rec-btn { border: 1px solid #d9e0e7; background: #fff; color: #3a4856; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.dc-rec-btn:hover { background: #f3f6f9; }
.dc-rec-btn.primary { border-color: #49972a; color: #49972a; background: #f4faf1; }
.dc-rec-btn.stop { border-color: #d9534f; color: #d9534f; background: #fdf2f1; }
.dc-rec-btn:disabled { opacity: .55; cursor: default; }
.dc-rec-redo-box { margin-top: 10px; }
.dc-rec-redo-box:empty { margin-top: 0; }
.dc-rec-live { font-size: 13px; color: #3a4856; }
.dc-rec-live .dc-live-asr { margin-top: 6px; color: #16202c; font-weight: 600; min-height: 18px; }
.dc-progress-rail { height: 6px; background: #eef1f5; border-radius: 999px; overflow: hidden; margin: 20px 0 8px; }
.dc-progress-fill { height: 100%; background: linear-gradient(90deg, #1a73e8, #68c427); border-radius: 999px; transition: width .4s ease; }
.dc-progress-text { font-size: 12px; color: #6b7585; text-align: center; margin: 0 0 14px; }
.dc-progress-text strong { color: #1a2030; }

/* prepared-content accents */
.dc-pron-tip { background: #eef6ff; border-left: 3px solid #1a73e8; padding: 8px 12px; border-radius: 8px; font-size: 13px; color: #33455c; margin: 8px 0; }
.dc-example-line { margin: 8px 0 2px; font-size: 15px; }
.dc-example-zh { color: #6b7585; font-size: 13px; margin: 0 0 6px; }
.dc-pattern-name { font-size: 14px; color: #33455c; margin: 6px 0 10px; }
.dc-pattern-name code { background: #f1f4f8; padding: 2px 6px; border-radius: 6px; }
/* Prominent themed pattern box (句型) + big single question (no numbering). */
.dc-pattern-box { background: rgba(51,163,21,.09); border: 1px solid rgba(51,163,21,.22); border-radius: 14px; padding: 14px 16px; margin: 12px 0 16px; }
.dc-pattern-box-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--brand); letter-spacing: .04em; margin-bottom: 6px; }
.dc-pattern-box-label .dc-ic { width: 16px; height: 16px; }
.dc-pattern-box-name { font-size: 20px; font-weight: 800; color: #1d1d1f; line-height: 1.35; }
.dc-pattern-box-formula { font-size: 16px; color: #3a4856; margin-top: 6px; line-height: 1.5; }
.dc-pattern-single { font-size: 20px; font-weight: 700; color: #1d1d1f; line-height: 1.5; margin: 14px 0; }
/* Swipeable 互译+造句 carousel (3 translations + 1 make-a-sentence on one page). */
.dc-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 8px 0 4px; padding: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.dc-carousel::-webkit-scrollbar { display: none; }
.dc-carousel-slide { flex: 0 0 100%; scroll-snap-align: center; }
.dc-carousel-card { background: none; border: 0; border-radius: 0; padding: 4px 2px 8px; min-height: 150px; box-sizing: border-box; }
.dc-carousel-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--brand); margin-bottom: 12px; }
.dc-carousel-kind .dc-ic { width: 16px; height: 16px; }
.dc-carousel-task { font-size: 21px; font-weight: 700; color: #1d1d1f; line-height: 1.5; margin: 0; }
.dc-carousel-dots { display: flex; justify-content: center; gap: 6px; margin: 8px 0 10px; }
.dc-carousel-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(0,0,0,.16); transition: all .2s; }
.dc-carousel-dots i.on { background: var(--brand); width: 18px; border-radius: 4px; }
.dc-carousel-dots i.done { background: rgba(51,163,21,.42); }
.dc-carousel-locked { font-size: 13px; color: #a8a8ad; text-align: center; margin: 26px 0 8px; }
/* Warm-up question progress dots (2 swipeable questions, auto-advance). */
.dc-q-dots { display:flex; justify-content:center; gap:6px; margin:2px 0 12px; }
.dc-q-dots i { width:7px; height:7px; border-radius:50%; background:rgba(0,0,0,.16); transition:all .2s; }
.dc-q-dots i.on { background:var(--brand); width:18px; border-radius:4px; }
.dc-q-dots i.done { background:rgba(51,163,21,.42); }
.dc-comp-q-text { font-size:17px; font-weight:600; color:#1d1d1f; line-height:1.5; margin:0 0 2px; }
/* Hey-Siri-style soundwave — tap to play, bars flow while playing (brand teal/green). */
.dc-wave { display:flex; align-items:center; justify-content:center; width:100%; height:76px; background:none; border:0; padding:0; cursor:pointer; margin:10px 0; }
.dc-wave:active { transform:scale(.98); }
.dc-wave-bars { display:flex; align-items:center; gap:3px; height:64px; }
/* Each bar carries its own --peak / --dur / --delay (set inline) → an organic,
   center-weighted shimmer rather than a uniform marching ripple. */
.dc-wave-bars i {
  width:3px; border-radius:3px;
  background:linear-gradient(180deg,#4fe0a3 0%,#15b87d 55%,#0f9d6b 100%);
  height:calc(5px + var(--peak,.5) * 5px); opacity:.9;
  animation:dcWaveIdle var(--dur,1.7s) ease-in-out infinite; animation-delay:var(--delay,0s);
  will-change:height;
}
.dc-wave.playing .dc-wave-bars i { opacity:1; animation-name:dcWavePlay; animation-duration:calc(var(--dur,1.7s) * 0.46); }
@keyframes dcWaveIdle { 0%,100%{ height:calc(4px + var(--peak,.5) * 3px); } 50%{ height:calc(6px + var(--peak,.5) * 14px); } }
@keyframes dcWavePlay { 0%,100%{ height:calc(6px + var(--peak,.5) * 9px); } 50%{ height:calc(10px + var(--peak,.5) * 50px); } }
.dc-carousel-saved { margin-top: 12px; }
/* Collapsed "Usage (tap to review)" fold shown above the Pronunciation Check. */
.dc-fold { background: rgba(51,163,21,.06); border: 1px solid rgba(51,163,21,.16); border-radius: 12px; padding: 4px 14px; margin: 4px 0 14px; }
.dc-fold > summary { cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--brand); padding: 8px 0; display: flex; align-items: center; gap: 6px; }
.dc-fold > summary::-webkit-details-marker { display: none; }
.dc-fold > summary .dc-ic { width: 16px; height: 16px; }
.dc-fold-body { padding: 2px 0 10px; font-size: 14px; line-height: 1.55; color: #3a4856; }
.dc-fold-body p { margin: 4px 0; }
.dc-pk-best { font-size: 13px; color: #8a6d00; background: #fff8e1; padding: 6px 10px; border-radius: 8px; margin: 8px 0; }
.dc-pk-banner { font-size: 15px; font-weight: 600; color: #0b7a4b; background: linear-gradient(180deg, #eafff3, #fff); border: 1px solid #b7ebcf; border-radius: 10px; padding: 10px 14px; margin: 0 0 10px; }
/* Stressed words highlighted in the sentence so students see what to lean on. */
.dc-stress-hl { color: #d92d20; font-weight: 800; }
/* The AI-chosen drill mode, shown as a static tag (the student does NOT switch it). */
.dc-drill-mode-tag { font-size: 13px; color: #5a6472; background: #f3f5f8; border: 1px solid #e3e7ee; border-radius: 8px; padding: 6px 10px; margin: 0 0 10px; }
.dc-drill-mode-tag strong { color: #1a2030; }
.dc-done-msg { margin-top: 12px; color: #2a8a2a; font-weight: 600; }

/* Dialogue list cards — one clear tap target into the single AI classroom. */
.vy-dlg-card {
  display: block;
  padding: 0;
  border: 1px solid rgba(68, 138, 23, 0.14);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 20%, rgba(78, 177, 25, 0.1), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f7fffc 100%);
  box-shadow: 0 14px 30px rgba(53, 102, 22, 0.08);
}
.vy-dlg-card-main {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 16px;
  border: none;
  background: transparent;
  color: #12202a;
  cursor: pointer;
  text-align: left;
}
.vy-dlg-card-main:hover { background: rgba(80, 180, 27, 0.05); }
.vy-dlg-card.done .vy-dlg-card-main { background: rgba(20, 122, 77, 0.05); }
.vy-dlg-num {
  width: 38px;
  height: 50px;
  border-radius: 999px;
  background: linear-gradient(180deg, #46bb14, #36a50b);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: inset 0 -10px 16px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(54, 165, 11, 0.22);
}
.vy-dlg-num em {
  font-style: normal;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
}
.vy-dlg-body h3 {
  margin: 0;
  font-size: clamp(16px, 4.1vw, 20px);
  line-height: 1.18;
  letter-spacing: -0.02em;
}
.vy-dlg-zh {
  margin: 4px 0 6px;
  font-size: 13px;
  color: #52616c;
}
.vy-dlg-scene { display: none !important; }
.vy-dlg-meta {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(54, 165, 11, 0.08);
  color: #489327;
  font-size: 12px;
  font-weight: 700;
}
.vy-dlg-cta {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #36a50b;
  font-size: 28px;
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(44, 100, 18, 0.12);
}

/* AI Class steps 4-8 additions */
.dc-explain-btn { padding: 4px 10px; background: #fff8d5; color: #a06b00; border: 1px solid #ffe49a; border-radius: 8px; font-size: 13px; cursor: pointer; }
.dc-explain-btn.phon { background: #f0f8ff; color: #1a5d8a; border-color: #c2e0ff; }
.dc-explain-btn:hover { filter: brightness(0.95); }
.dc-rule-chip-grid,
.dc-stress-word-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}
.dc-rule-chip,
.dc-stress-chip {
  border: 1px solid rgba(55, 137, 18, 0.16);
  border-radius: 16px;
  background: #fff;
  color: #172433;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.dc-rule-chip {
  display: grid;
  gap: 4px;
  min-width: 128px;
  max-width: 220px;
  padding: 12px 14px;
  text-align: left;
}
.dc-rule-chip strong { color: #36a50b; }
.dc-rule-chip span { font-weight: 700; }
.dc-rule-chip em { color: #647482; font-size: 12px; font-style: normal; }
.dc-stress-chip {
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 800;
}
.dc-rule-chip.selected,
.dc-stress-chip.selected {
  border-color: #36a50b;
  background: linear-gradient(135deg, rgba(54, 165, 11, 0.14), rgba(54, 165, 11, 0.04));
  box-shadow: 0 10px 20px rgba(54, 165, 11, 0.12);
  transform: translateY(-1px);
}
/* Post-submit marking on the phonetic chips */
.dc-rule-chip.chip-ok { border-color:#2a8a2a; background:rgba(42,138,42,0.1); }
.dc-rule-chip.chip-ok::after { content:"✓"; color:#2a8a2a; font-weight:800; margin-left:4px; }
.dc-rule-chip.chip-wrong { border-color:#d9540a; background:rgba(217,84,10,0.08); opacity:.85; }
.dc-rule-chip.chip-wrong::after { content:"✗"; color:#d9540a; font-weight:800; margin-left:4px; }
.dc-rule-chip.chip-miss { border-color:#d9540a; border-style:dashed; }
.dc-rule-chip.chip-miss::after { content:"漏"; color:#d9540a; font-weight:800; font-size:11px; margin-left:4px; }
.dc-fb-list { margin:6px 0 0; padding-left:18px; }
.dc-fb-list li { margin:4px 0; }
.dc-drill-progress { font-size:12px; color:#647482; font-weight:700; margin:0 0 8px; }
/* 用法讲解 — clean, separated blocks instead of one blob */
.dc-usage-card { background:#fbfaf5; border:1px solid #ece7d8; border-left:3px solid #36a50b; border-radius:10px; padding:12px 14px; margin-top:6px; }
.dc-usage-head { font-size:12px; font-weight:800; color:#36a50b; margin-bottom:6px; letter-spacing:.04em; }
.dc-usage-en { font-size:14px; line-height:1.55; color:#1f2a30; margin:0 0 6px; }
.dc-usage-zh { font-size:14px; line-height:1.7; color:#3c4a52; margin:0; }
.dc-usage-eg { margin-top:10px; background:#f5faf1; border-radius:10px; padding:10px 12px; }
.dc-usage-eg-label { font-size:11px; font-weight:800; color:#647482; margin-bottom:5px; }
.dc-usage-eg-en { display:flex; align-items:center; gap:8px; font-size:15px; line-height:1.5; }
.dc-usage-eg-en .dc-eg-play { flex:0 0 auto; padding:2px 9px; border-radius:999px; }
.dc-usage-eg-zh { font-size:13px; color:#647482; margin-top:4px; }
/* allow line breaks in the usage text (词族/常见搭配 on their own lines) */
.dc-usage-en, .dc-usage-zh { white-space: pre-line; }
/* 整句翻译 (英→中) reference reveal */
.dc-translate-reveal { margin-top:12px; background:#f5faf1; border-left:3px solid #36a50b; border-radius:10px; padding:10px 14px; }
.dc-translate-reveal-label { font-size:11px; font-weight:800; color:#36a50b; margin-bottom:5px; }
.dc-translate-reveal-zh { font-size:16px; line-height:1.6; color:#1f2a30; margin:0; }
/* 句型造句 — question mode */
.dc-pattern-q { font-size:21px; font-weight:800; color:#1f2a30; margin:10px 0 2px; line-height:1.45; }
.dc-pattern-q-zh { font-size:13px; color:#647482; margin:0 0 6px; }
.dc-pattern-hint { font-size:13px; color:#36a50b; background:#f5faf1; border-radius:8px; padding:6px 10px; margin:6px 0; }
.dc-live-asr {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(54, 165, 11, 0.08);
  color: #355b1f;
  font-weight: 700;
  line-height: 1.5;
}
.dc-explain-content { width: 100%; margin-top: 8px; }
.dc-explain-bubble { background: #fffde0; border-left: 3px solid #ffd456; padding: 10px 12px; border-radius: 6px; font-size: 13px; line-height: 1.55; color: #333; }
.dc-explain-bubble.phon { background: #e8f4ff; border-left-color: #1a73e8; }
.dc-loading { color: #888; font-style: italic; font-size: 13px; }
.dc-error { color: #c2410c; font-size: 13px; }
.dc-drill-btn { padding: 4px 12px; background: #ffe2e0; color: #c2410c; border: 1px solid #ffb4b0; border-radius: 8px; font-size: 13px; cursor: pointer; }
.dc-drill-btn:hover { filter: brightness(0.95); }
.dc-drill-result { width: 100%; margin-top: 8px; }
.dc-drill-result-bubble { background: #fff5f5; border-left: 3px solid #ef4444; padding: 10px 12px; border-radius: 6px; font-size: 13px; line-height: 1.55; }
.dc-role-pick { display: flex; gap: 12px; flex-wrap: wrap; padding: 16px 0; }
.dc-role-pick .btn-primary { padding: 12px 18px; }
.dc-pattern-hints { background: #f8fafc; border: 1px solid #e4e9f0; border-radius: 10px; padding: 10px 14px; margin: 10px 0; font-size: 13px; }
.dc-pattern-hints summary { cursor: pointer; font-weight: 600; color: var(--accent, #1a73e8); }
.dc-pattern-hints ul { margin: 8px 0 0 0; padding-left: 20px; }
.dc-textarea { width: 100%; padding: 12px; border: 1px solid #e4e9f0; border-radius: 10px; font-size: 14px; font-family: inherit; resize: vertical; margin: 10px 0; }
.dc-textarea:focus { outline: none; border-color: var(--accent, #1a73e8); }

/* ── Study Buddy modal ──────────────────────────────────────────────── */
.buddy-modal-wrap { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.buddy-modal { background: #fff; border-radius: 16px; max-width: 520px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 28px 32px 24px; position: relative; box-shadow: 0 18px 40px rgba(0,0,0,0.18); }
.buddy-modal-close { position: absolute; top: 12px; right: 14px; background: transparent; border: none; font-size: 28px; cursor: pointer; color: #888; }
.buddy-modal-close:hover { color: #222; }
.buddy-h2 { margin: 0 0 6px 0; font-size: 22px; }
.buddy-p { color: var(--muted, #6b7585); margin: 0 0 16px 0; font-size: 14px; }
.buddy-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.buddy-tab { padding: 8px 16px; border: 1px solid #e4e9f0; background: #f8fafc; border-radius: 8px; cursor: pointer; font-weight: 600; color: #6b7585; }
.buddy-tab.active { background: var(--accent, #1a73e8); color: #fff; border-color: var(--accent, #1a73e8); }
.buddy-input { width: 100%; padding: 10px 12px; border: 1px solid #e4e9f0; border-radius: 8px; margin-bottom: 10px; font-size: 14px; }
.buddy-input:focus { outline: none; border-color: var(--accent, #1a73e8); }
.buddy-btn { width: 100%; padding: 12px; }
.buddy-msg { margin-top: 10px; font-size: 13px; min-height: 18px; }
.buddy-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e4e9f0; }
.buddy-section h3 { margin: 0 0 10px 0; font-size: 15px; color: #444; }
.buddy-search-row { display: flex; gap: 8px; margin-bottom: 10px; }
.buddy-search-row .buddy-input { margin-bottom: 0; }
.buddy-search-row button { padding: 10px 14px; }
.buddy-list { list-style: none; padding: 0; margin: 0; }
.buddy-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid #e4e9f0; border-radius: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.buddy-item button { padding: 6px 12px; font-size: 13px; }
.buddy-id { color: #6b7585; font-size: 12px; margin-left: 6px; }
.buddy-ago { color: #aaa; font-size: 11px; margin-left: 6px; }
.buddy-empty { color: #888; font-style: italic; font-size: 13px; padding: 8px 0; }

/* Weekly XP leaderboard */
.buddy-lb .lb-tip { color: #6b6f76; font-size: 13px; margin: 0 0 10px; }
.lb-list { list-style: none; padding: 0; margin: 0; counter-reset: lb; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; margin-bottom: 7px; background: #f6f8fb; border: 1px solid #eceff4; }
.lb-row.top { background: linear-gradient(135deg, #fff7ec, #fdeffd); border-color: #ffe2bd; }
.lb-row.me { outline: 2px solid #ff8e3c; outline-offset: -2px; background: linear-gradient(135deg, #fff3e6, #ffe9d4); }
.lb-rank { flex: 0 0 30px; text-align: center; font-size: 17px; font-weight: 800; color: #9aa0a8; }
.lb-rank-1, .lb-rank-2, .lb-rank-3 { font-size: 20px; }
.lb-name { flex: 1 1 auto; min-width: 0; font-weight: 700; color: #2b2f36; font-size: 14px; display: flex; flex-direction: column; line-height: 1.25; }
.lb-name em { color: #ff8e3c; font-style: normal; font-weight: 700; }
.lb-name .lb-sub { font-weight: 500; font-size: 12px; color: #8a909a; margin-top: 2px; }
.lb-xp { flex: 0 0 auto; font-size: 13px; color: #6b6f76; }
.lb-xp strong { font-size: 16px; color: #e8730f; }

/* Floating buddy button + invite toast */
.buddy-floating-btn { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #4f8eff, #1a5d8a); color: #fff; font-size: 24px; border: none; box-shadow: 0 6px 16px rgba(0,0,0,0.18); cursor: pointer; z-index: 8500; display: flex; align-items: center; justify-content: center; transition: transform 0.15s; }
.buddy-floating-btn:hover { transform: scale(1.05); }
.buddy-floating-badge { position: absolute; top: -2px; right: -2px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: #ef4444; color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.buddy-invite-toast { position: fixed; top: 24px; right: 24px; width: 340px; background: #fff; border-radius: 14px; box-shadow: 0 14px 32px rgba(0,0,0,0.18); padding: 16px 18px; z-index: 9100; border-left: 4px solid #1a73e8; animation: buddyToastIn 0.3s ease-out; }
@keyframes buddyToastIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.buddy-invite-toast-body { margin-bottom: 12px; }
.buddy-invite-toast-body strong { display: block; margin-bottom: 4px; font-size: 15px; }
.buddy-invite-toast-body p { margin: 0; color: #6b7585; font-size: 13px; }
.buddy-invite-toast-actions { display: flex; gap: 8px; }
.buddy-invite-toast-actions button { flex: 1; padding: 8px 12px; font-size: 13px; }

/* ── AI Class v2 — students bar, intensive loop, phonetic canvas ─────── */
.dc-students-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; background: #f0f6ff; border-radius: 10px; margin-bottom: 14px; }
.dc-students-label { font-size: 13px; color: #6b7585; margin-right: 4px; }
.dc-student-badge { padding: 6px 12px; background: #fff; border: 1px solid #c2dbff; border-radius: 18px; font-size: 13px; font-weight: 600; }
.dc-student-badge.active { background: linear-gradient(135deg, #1a73e8, #4f8eff); color: #fff; border-color: transparent; box-shadow: 0 2px 6px rgba(26,115,232,0.35); }
.dc-student-badge.hand { animation: handWave 1s infinite; }
@keyframes handWave { 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }
.dc-call-count { color: rgba(255,255,255,0.7); font-size: 11px; margin-left: 4px; }
.dc-student-badge:not(.active) .dc-call-count { color: #aaa; }
.dc-hand-raise { padding: 6px 12px; background: #fff8d5; color: #a06b00; border: 1px solid #ffe49a; border-radius: 18px; font-size: 13px; font-weight: 600; cursor: pointer; }
.dc-hand-raise:hover { background: #ffe49a; }

.dc-sentence-meta { color: #1a73e8; font-size: 13px; margin-left: 8px; }
.dc-call-actions { padding: 12px 0; }
.dc-callee { padding: 14px; background: #fff8e1; border: 1px solid #ffd456; border-radius: 12px; margin-top: 10px; }
.dc-callee strong { color: #a06b00; }
.dc-mic-btn { margin-left: 12px; padding: 8px 16px; background: linear-gradient(135deg, #ef4444, #c53d3d); color: #fff; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; }
.dc-mic-btn:hover { filter: brightness(1.05); }
.dc-mic-result { margin-top: 12px; }
.dc-mic-transcript { background: #fff5f5; padding: 10px 14px; border-left: 3px solid #ef4444; border-radius: 6px; font-size: 14px; }
.dc-teacher-feedback { margin-top: 8px; background: #fffdee; padding: 10px 14px; border-left: 3px solid #ffd456; border-radius: 6px; font-size: 14px; }
/* 发音测评:对了 → 绿色点赞;纠音 → 暖橙色带读提示 */
.dc-teacher-feedback.ok { background: #f0fff4; border-left-color: #2a8a2a; color: #1f5c2a; }
.dc-teacher-feedback.bad { background: #fff7ed; border-left-color: #f08c2e; color: #9a4d10; }

.dc-warmup-img-wrap { width: 100%; max-width: 480px; margin: 0 auto 16px; }
.dc-warmup-img { display: block; width: 100%; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.dc-img-placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #fff5e6, #fff8f0); border: 1px dashed #ffd9a8; border-radius: 12px; color: #a06b00; font-style: italic; min-height: 180px; padding: 16px; }

.dc-intensive-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #e4e9f0; margin-bottom: 14px; }
.dc-intensive-phase { font-weight: 700; color: var(--accent, #1a73e8); }
.dc-intensive-speaker { padding: 4px 10px; background: #f0f6ff; border-radius: 12px; font-size: 12px; color: #1a5d8a; }
.dc-line-en-big { font-size: 22px; line-height: 1.5; padding: 16px; background: #fff8e1; border-radius: 10px; margin: 12px 0; }
.dc-line-zh-big { font-size: 16px; color: #6b7585; padding: 0 16px; }
.dc-vocab-ol { padding-left: 24px; }
.dc-vocab-ol li { margin: 8px 0; font-size: 15px; }
.dc-vocab-zh-hint { color: #aaa; font-size: 13px; margin-left: 8px; }

.dc-comp-q { padding: 6px 0 14px; background: none; border: 0; border-radius: 0; margin: 4px 0; }
.dc-q-zh { color: #6b7585; font-size: 13px; margin: 4px 0 8px; }
.dc-q-options { list-style: none; padding: 0; }
.dc-q-options li { margin: 6px 0; }
.dc-q-options label { cursor: pointer; }
.dc-q-check { margin-top: 8px; }
.dc-q-result { margin-left: 8px; font-weight: 600; }

.dc-timer { display: inline-block; padding: 6px 14px; background: #fff5e6; border: 1px solid #ffb060; border-radius: 14px; font-weight: 700; color: #d9540a; margin: 10px 0; font-size: 16px; }
.dc-phon-canvas { display: block; width: 100%; height: 200px; background: #fff; border: 2px dashed #c2dbff; border-radius: 10px; margin: 10px 0; cursor: crosshair; }
.dc-phon-tools { display: flex; gap: 10px; margin-bottom: 10px; }
.dc-snowball-list { list-style: none; padding: 0; margin: 8px 0; }
.dc-snowball-list li { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
.dc-snowball-hint { flex: 1; font-size: 17px; color: #1d1d1f; font-weight: 600; }
.dc-snowball-hint em { font-style: normal; }
.dc-snowball-mic { flex: 0 0 auto; width: 50px; height: 50px; }
.dc-snowball-list .dc-az-score { font-weight: 800; color: var(--brand); font-size: 17px; }
.dc-pattern-card { padding: 12px 14px; background: #f8fafc; border: 1px solid #e4e9f0; border-radius: 10px; margin: 10px 0; }
.dc-pattern-card ul { margin: 6px 0 0 0; padding-left: 20px; }
.dc-pattern-card li { font-size: 13px; margin: 3px 0; }
.dc-drill-modes { display: flex; gap: 10px; margin: 10px 0; flex-wrap: wrap; }

/* Big clickable step strip — 10 step pills */
.dc-step-strip { display: flex; gap: 6px; margin: 14px 0; flex-wrap: wrap; }
.dc-step-pill { flex: 0 1 auto; min-width: 56px; padding: 8px 10px; background: #fff; border: 2px solid #e4e9f0; border-radius: 10px; text-align: center; cursor: pointer; transition: all 0.15s; font-size: 18px; font-weight: 600; color: #6b7585; display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.1; }
.dc-step-pill:hover { border-color: #1a73e8; }
.dc-step-pill.cur { background: linear-gradient(135deg, #1a73e8, #4f8eff); color: #fff; border-color: transparent; box-shadow: 0 4px 10px rgba(26,115,232,0.3); }
.dc-step-pill.done { background: #f1faf5; border-color: #b8e6cd; color: #2a8a2a; }
.dc-step-pill.done::after { content: "✓"; font-size: 10px; }
.dc-step-num { font-size: 11px; font-weight: 700; opacity: 0.85; }
.dc-step-pill-sub { font-weight: 400; font-size: 11px; opacity: 0.8; }
.dc-mode-badge { display: inline-block; padding: 4px 12px; background: linear-gradient(135deg,#ef4444,#ff7846); color:#fff; border-radius:14px; font-weight:700; font-size:12px; }
.dc-skip-q { margin-top: 8px; font-size: 12px; }

/* Per-sentence stepping context */
.dc-sentence-meta { background: #fff5e6; color:#d9540a; padding: 4px 10px; border-radius: 12px; font-weight: 700; font-size: 13px; margin-left: 10px; }
.dc-intensive-speaker { color:#6b7585; font-size:13px; margin-bottom:6px; }
.dc-line-en-big { font-size: 22px; font-weight: 700; line-height: 1.4; margin: 8px 0 12px; color:#1a2030; }
.dc-line-zh-big { font-size: 16px; color:#5b6470; margin: 4px 0 14px; }
.dc-instruction { font-size: 14px; color:#3a4250; margin: 8px 0 12px; line-height: 1.55; }
.dc-done-msg { font-size: 16px; color:#2a8a2a; padding: 18px; text-align:center; background:#f1faf5; border-radius: 10px; }

/* Vocab list */
.dc-vocab-ol { margin: 8px 0; padding-left: 22px; }
.dc-vocab-ol li { margin: 6px 0; font-size: 14px; }
.dc-vocab-ol strong { color: #1a73e8; }
.dc-vocab-zh { color: #2a8a2a; margin-left: 8px; font-size: 13px; }
.dc-vocab-zh-hint { color: #aaa; margin-left: 8px; font-style: italic; }
.dc-vocab-empty { color:#888; font-style:italic; padding:6px 0; }
.dc-explain-bubble { padding: 12px 14px; background: #fffdee; border-left: 3px solid #ffd456; border-radius: 8px; margin: 8px 0; font-size: 14px; line-height: 1.6; }

/* Phonetic canvas + parts */
.dc-phon-canvas-wrap { background:#fff; border-radius:10px; margin:10px 0; }
/* Sense-group list — no boxes, just clean stacked rows. */
.dc-phon-parts { list-style: none; padding: 0; margin: 6px 0; }
.dc-phon-parts li { margin: 16px 0; padding: 0; background: none; border: 0; }
.dc-phon-part-text { font-weight: 700; font-size: 19px; color:#1a2030; }
.dc-phon-part-rule { display:inline-block; margin-left:8px; padding:2px 8px; background:#fff5e6; color:#d9540a; border-radius:10px; font-size:11px; }
.dc-phon-part-score { display:block; margin-top:6px; font-size:13px; }
/* Phonetic-rule annotation drawn ON the sense-group slices (liaison arcs + plosion
   slashes). padding-bottom gives the dipping arcs clearance; inline-block makes each
   slice a single positioning box for its SVG overlay. */
.dc-phon-annotated { position: relative; }
.dc-line-en-big.dc-phon-annotated,
.dc-immersive .dc-line-en-big.dc-phon-annotated { padding-bottom: 18px; }
.dc-phon-part-text.dc-phon-annotated { display: inline-block; vertical-align: top; padding-bottom: 13px; }
.dc-phon-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.dc-phon-arc { fill: none; stroke: #0f9d6b; stroke-width: 2.4; stroke-linecap: round; }
.dc-phon-slash { stroke: #e5484d; stroke-width: 2.6; stroke-linecap: round; }
.dc-phon-legend { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin: 0 0 18px; }
.dc-phon-key { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #6e6e73; font-weight: 600; }
.dc-phon-key svg { overflow: visible; }
/* "Your turn" recording indicator in the 意群跟读 step — a unified circular red mic
   (white wave bars) matching the recording-state of the main record button. */
.dc-phon-rec { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:linear-gradient(180deg,#ff7a66,#e2553e); box-shadow:0 5px 14px rgba(226,85,62,.32); margin:6px 0 0; }
.dc-phon-rec .dc-rec-wave i { background:#fff; }
.dc-phon-fb { padding: 12px 14px; border-radius: 8px; margin-top: 10px; font-size: 13px; line-height: 1.55; }
.dc-phon-fb.ok { background:#f1faf5; border-left:3px solid #2a8a2a; }
.dc-phon-fb.warn { background:#fff7ed; border-left:3px solid #d9540a; }
.dc-phon-fb.err { background:#fff5f5; border-left:3px solid #c2410c; color:#c2410c; }
.dc-phon-corrected { color:#444; font-size:12px; margin-top:6px; }
.dc-phon-hint { color:#666; font-size:12px; }
.dc-phon-done { margin-top:6px; color:#2a8a2a; font-weight:700; }

/* Drill UI (4-mode) */
.dc-drill-switcher { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin: 4px 0 14px; padding: 6px 10px; background:#f8fafc; border-radius:8px; font-size:12px; }
.dc-drill-switcher-label { color:#888; margin-right: 4px; }
.dc-drill-mode-pill { padding: 4px 10px; background:#fff; border:1px solid #e4e9f0; border-radius: 14px; cursor:pointer; font-size:12px; color:#555; }
.dc-drill-mode-pill:hover { border-color:#1a73e8; color:#1a73e8; }
.dc-drill-mode-pill.cur { background: linear-gradient(135deg,#1a73e8,#4f8eff); border-color: transparent; color:#fff; font-weight: 600; }
.dc-drill-card { padding: 14px 16px; background:#fffaf0; border:1px solid #ffd9a8; border-radius: 10px; margin: 12px 0; }
.dc-emotion-pills { display:flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.dc-emotion-pills button { padding: 6px 14px; background:#fff; border: 1px solid #e4e9f0; border-radius: 14px; cursor: pointer; font-size: 13px; }
.dc-emotion-pills button.cur { background:#fff5e6; border-color:#d9540a; color:#d9540a; font-weight: 700; }
.dc-perf-actions { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.dc-scenario-list { padding-left: 22px; margin: 10px 0; }
.dc-scenario-list li { margin: 6px 0; line-height: 1.5; }
.dc-az-score.pass { background:#ecfdf5; border-left-color:#16a34a; }
.dc-az-score.fail { background:#fff7ed; border-left-color:#d9540a; }
.dc-comp-q.answered { background: #f0fff4; border-left: 3px solid #2a8a2a; padding: 12px; border-radius: 6px; margin-bottom: 12px; }
.dc-comp-mic { margin-top: 6px; }

/* Pattern drill (3 zh→en) */
.dc-pattern-ol { margin:8px 0; padding-left: 22px; }
.dc-pattern-ol li { margin: 4px 0; font-size: 14px; color: #3a4250; }
.dc-pattern-zh { font-size: 18px; padding: 12px 14px; background: #fff5e6; border-radius: 8px; color: #1a2030; font-weight: 600; margin: 10px 0; }

/* Mic + score boxes */
.dc-callee { padding: 14px; background:#f8fafc; border:1px solid #e4e9f0; border-radius:10px; margin:10px 0; }
.dc-callee strong { color: #1a73e8; }
.dc-mic-btn { margin: 8px 8px 0 0; padding: 8px 14px; border-radius: 8px; background:#1a73e8; color:#fff; border: none; cursor: pointer; font-weight: 700; }
.dc-mic-btn[data-recording="1"] { background:#ef4444; animation: lkMicPulse 1.4s infinite; }
.dc-mic-result { margin-top: 8px; }
.dc-mic-transcript { padding: 8px 12px; background:#fff; border-left:3px solid #1a73e8; border-radius: 4px; margin: 6px 0; }
.dc-teacher-feedback { padding: 10px 12px; background:#fffdee; border-left:3px solid #ffd456; border-radius:4px; margin: 6px 0; }
.dc-az-score { padding: 8px 12px; background: #f0fff4; border-left:3px solid #2a8a2a; border-radius: 4px; margin: 6px 0; font-size: 13px; }
.dc-az-up { color:#16a34a; font-weight:800; margin-left:4px; }
.dc-az-err { padding: 6px 10px; background: #fff5f5; color:#c2410c; border-radius: 4px; font-size: 12px; }
/* zh→en translation verdict (instant feedback after the student translates) */
.dc-translate-verdict { padding: 10px 14px; border-radius: 8px; margin: 8px 0; font-size: 14px; font-weight: 600; line-height: 1.5; }
.dc-translate-verdict.ok  { background:#ecfdf5; border-left:4px solid #16a34a; color:#14532d; }
.dc-translate-verdict.bad { background:#fff7ed; border-left:4px solid #ea580c; color:#7c2d12; }
.dc-loading { color:#888; font-style: italic; }
.dc-error { color:#c2410c; }

/* Per-vocab teaching */
.dc-vocab-progress { color:#666; font-size:13px; margin: -6px 0 12px; padding: 6px 10px; background:#f8fafc; border-radius:6px; }
.dc-vocab-cur { color:#1a73e8; }
.dc-term-hl { background: #fff5e6; color: #c2410c; padding: 1px 4px; border-radius: 4px; font-weight: 700; }
.dc-play-status { display:inline-block; padding: 8px 14px; background:#fff5e6; border:1px solid #ffd9a8; border-radius:14px; color:#d9540a; font-weight:600; font-size:14px; }
/* 单句精听: 0.5× / 1× listen buttons (listen as many times as you want, then tap mic). */
.dc-intensive-speed { display:flex; justify-content:center; gap:12px; margin:8px 0 6px; }
.dc-intensive-speed .dc-speed-btn { min-width:84px; padding:13px 0; border-radius:999px; font-size:17px; font-weight:700; cursor:pointer; border:1.5px solid rgba(51,163,21,.3); background:#fff; color:var(--brand); transition:transform .12s; }
.dc-intensive-speed .dc-speed-btn.primary { background:linear-gradient(180deg,#4be619,#33a315); color:#fff; border-color:transparent; box-shadow:0 6px 18px rgba(51,163,21,.3); }
.dc-intensive-speed .dc-speed-btn:active { transform:scale(.95); }
.dc-vocab-repeat { display: flex; gap: 8px; margin: 8px 0; }

/* Live class teaching-stage embed */
.lk-controls-mini { display:flex; gap:10px; margin: 10px 0 14px; align-items:center; flex-wrap: wrap; }
.lk-conn-status { color:#2a8a2a; font-size: 12px; }
.lk-teaching-stage { margin-top: 16px; }

/* ── LiveKit Live Class room ─────────────────────────────────────────── */
.lk-container { padding: 24px 20px; max-width: 920px; margin: 0 auto; }
.lk-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid #e4e9f0; margin-bottom: 18px; }
.lk-title { margin: 0; font-size: 20px; flex: 1; }
.lk-room-meta { font-size: 12px; color: #888; }
.lk-room-meta code { background: #f0f6ff; padding: 2px 6px; border-radius: 4px; }
.lk-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 720px) { .lk-stage { grid-template-columns: 1fr; } }
.lk-participants { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lk-participant { padding: 16px 12px; background: #fff; border: 2px solid #e4e9f0; border-radius: 14px; text-align: center; transition: all 0.2s; position: relative; }
.lk-participant.lk-self { background: linear-gradient(135deg, #f0f6ff, #fff); border-color: #1a73e8; }
.lk-participant.called { animation: lkCalled 1.5s 4; }
@keyframes lkCalled { 0%,100%{box-shadow:0 0 0 0 rgba(255,179,0,0)} 50%{box-shadow:0 0 0 8px rgba(255,179,0,0.4)} }
.lk-pavatar { font-size: 36px; margin-bottom: 4px; }
.lk-pname { font-weight: 700; font-size: 14px; }
.lk-pmeta { font-size: 11px; color: #6b7585; margin-top: 2px; }
.lk-pmic { position: absolute; bottom: 6px; right: 8px; font-size: 14px; opacity: 0.3; }
.lk-pmic.active { opacity: 1; color: #ef4444; animation: lkMicPulse 1.5s infinite; }
@keyframes lkMicPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }

.lk-teacher-area { background: linear-gradient(180deg, #fff8f0, #fff); border: 1px solid #ffd9a8; border-radius: 14px; padding: 16px; }
.lk-teacher-box { display: flex; gap: 12px; align-items: flex-start; }
.lk-teacher-icon { font-size: 32px; }
.lk-teacher-box strong { font-size: 15px; }
.lk-teacher-box p { margin: 2px 0 0; font-size: 12px; color: #888; }
.lk-teacher-bubble { margin-top: 12px; padding: 12px 14px; background: #fffdee; border-left: 3px solid #ffd456; border-radius: 8px; min-height: 60px; font-size: 14px; line-height: 1.5; }
.lk-teacher-bubble:empty::before { content: "AI 老师等待中…"; color: #aaa; font-style: italic; }

.lk-controls { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.lk-controls .btn-primary.active { background: #ef4444; }
.lk-log { background: #f8fafc; border: 1px solid #e4e9f0; border-radius: 10px; padding: 10px 14px; max-height: 180px; overflow-y: auto; font-size: 12px; font-family: ui-monospace, Menlo, monospace; }
.lk-log-line { margin: 2px 0; color: #555; }
.lk-error { padding: 24px; background: #fff5f5; border: 1px solid #ffb4b0; border-radius: 12px; color: #c2410c; text-align: center; }

/* Fullscreen LiveKit mount for invite-accept flow */
.lk-fullscreen-mount { position: fixed; inset: 0; background: #fff; z-index: 9500; overflow-y: auto; padding: 20px; }

/* ── Examples section — now collapsible by default ───────────────────── */
.dict-examples-collapsible { background: #fcfcfd; }
.dict-examples-collapsible .examples-toggle {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 14px; font-weight: 600; color: #1a2030; text-align: left;
  font-family: inherit;
}
.dict-examples-collapsible .examples-toggle:hover { background: #f5f7fb; }
.dict-examples-collapsible .examples-toggle-caret { display: inline-block; width: 14px; color: #888; }
.dict-examples-collapsible .examples-head { padding: 4px 14px 8px; display:flex; justify-content:flex-end; }
.dict-examples-collapsible .example-list { padding: 0 14px; }
.dict-examples-collapsible .more-ex-row { padding: 8px 14px 14px; }

/* ── Sentence-making section — cleaner, more inviting layout ─────────── */
.sentences-section {
  background: linear-gradient(180deg, #fff, #f9fbff);
  border: 1px solid #e4e9f0;
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 14px;
}
.sentences-section .sentences-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.sentences-section .sentences-head h3 { margin: 0; }
.sentences-section .sentence-tip { color: #5b6470; font-size: 13px; margin: 4px 0 12px; line-height: 1.55; }
.sentences-section .sentence-mode-toggle { margin-bottom: 14px; }
.sentence-row.card.voice-mode {
  padding: 18px 16px 18px 52px;
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid #e4e9f0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.sentence-row.card.voice-mode .voice-input-area {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-height: 84px; justify-content: center;
}
.sentence-row.card.voice-mode .voice-mic-big {
  background: linear-gradient(135deg, #1a73e8, #4f8eff);
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 52px; height: 52px;
  font-size: 22px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(26,115,232,0.28);
  transition: transform 0.12s, box-shadow 0.12s;
}
.sentence-row.card.voice-mode .voice-mic-big:hover { transform: scale(1.06); box-shadow: 0 8px 18px rgba(26,115,232,0.34); }
.sentence-row.card.voice-mode .voice-mic-big.rec { background: linear-gradient(135deg, #ef4444, #ff7846); animation: micPulse 1.4s infinite; }
@keyframes micPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.sentence-row.card.voice-mode .voice-hint { color: #8a93a3; font-size: 13px; text-align: center; margin: 0; }
.sentence-row.card.voice-mode .voice-heard {
  background: #f0f6ff; padding: 8px 12px; border-radius: 8px; border-left: 3px solid #1a73e8;
  width: 100%; box-sizing: border-box; margin: 0;
}

/* sticky-style action bar so buttons aren't visually jumbled */
.sentences-section .study-actions {
  display: flex; gap: 10px; align-items: center; justify-content: flex-end;
  padding-top: 12px; margin-top: 12px; border-top: 1px solid #eef0f5;
  flex-wrap: wrap;
}
.sentences-section .study-actions .btn-ghost { padding: 8px 16px; }
.sentences-section .study-actions .btn-primary { padding: 10px 22px; font-weight: 700; }
.sentences-section .study-actions .btn-primary.btn-lg { padding: 12px 24px; }

/* ── Ebbinghaus badge + memory stats modal ───────────────────────────── */
.ebb-badge { display: inline-block; padding: 2px 10px; margin-left: 10px; background: linear-gradient(135deg, #fff5e6, #ffe8c2); color: #c2410c; border-radius: 12px; font-size: 12px; font-weight: 700; }
.ebb-stats-btn { margin-left: 8px; padding: 3px 10px; background: transparent; border: 1px solid #e4e9f0; color: #5b6470; border-radius: 12px; font-size: 12px; cursor: pointer; font-family: inherit; }
.ebb-stats-btn:hover { background: #f0f6ff; border-color: #1a73e8; color: #1a73e8; }
.ebb-modal { position: fixed; inset: 0; z-index: 9998; display: none; }
.ebb-modal.open { display: block; }
.ebb-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.ebb-modal-card { position: relative; max-width: 540px; margin: 8vh auto; background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,0.3); overflow: hidden; }
.ebb-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #e4e9f0; }
.ebb-modal-head strong { font-size: 16px; }
.ebb-modal-body { padding: 18px; }
.ebb-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ebb-stat { background: #f8fafc; border: 1px solid #e4e9f0; border-radius: 10px; padding: 12px 8px; text-align: center; }
.ebb-stat-num { display: block; font-size: 22px; font-weight: 700; color: #1a2030; }
.ebb-stat-emph { color: #2a8a2a; }
.ebb-stat-due { color: #d9540a; }
.ebb-stat-lbl { display: block; font-size: 11px; color: #6b7585; margin-top: 4px; }
.ebb-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 120px; align-items: end; padding: 0 4px; }
.ebb-bar { display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; }
.ebb-bar-fill { width: 70%; min-height: 4px; background: linear-gradient(180deg, #4f8eff, #1a73e8); border-radius: 4px 4px 0 0; }
.ebb-bar-num { font-size: 11px; font-weight: 700; color: #1a2030; }
.ebb-bar-lbl { font-size: 11px; color: #6b7585; }

/* inline error pill instead of intrusive alert() */
.inline-error-pill {
  display: inline-block; padding: 4px 12px; background: #fff5f5; color: #c2410c;
  border: 1px solid #ffb4b0; border-radius: 14px; font-size: 12px;
  margin-left: 8px; animation: shake 0.4s;
}
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }

/* ── Real-examples section (Tatoeba + TED + future OpenSubtitles) ─────── */
.real-examples-section { background: linear-gradient(180deg, #f7faff, #fff); border: 1px solid #d8e3f5; border-radius: 12px; padding: 14px 16px; margin-top: 14px; }
.real-examples-section h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; }
.real-examples-section .hint { color: #6b7585; font-weight: 400; }
.real-examples-section.loading p, .real-examples-section.empty p { color:#8a93a3; font-style: italic; margin: 4px 0; }
.real-example-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.real-example-list li { background: #fff; border: 1px solid #e4e9f0; border-radius: 10px; padding: 10px 12px; }
.real-example-list .ex-row { display: flex; gap: 8px; align-items: flex-start; }
.real-example-list .ex-en { margin: 0 0 4px; font-size: 15px; line-height: 1.5; color: #1a2030; }
.real-example-list .ex-zh { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: #5b6470; }
.ex-source { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; padding: 3px 10px; border-radius: 12px; background: #f0f6ff; color: #1a73e8; width: fit-content; }
.ex-source.src-ted { background: linear-gradient(135deg, #ffe5e5, #fff0f0); color: #c2410c; }
.ex-source.src-tatoeba { background: linear-gradient(135deg, #ecfdf5, #f0fff4); color: #16a34a; }
.ex-source.src-opensubs { background: linear-gradient(135deg, #fff5e6, #fff8f0); color: #d9540a; }
.ex-source.src-pubmed { background: linear-gradient(135deg, #e0f2fe, #f0f9ff); color: #0284c7; }
.ex-source.src-arxiv { background: linear-gradient(135deg, #fce7f3, #fdf2f8); color: #be185d; }
.ex-source.src-exam { background: linear-gradient(135deg, #fef3c7, #fffbeb); color: #92400e; font-weight: 700; }
.ex-source.src-exam-cert { background: linear-gradient(135deg, #fce7f3, #fff1f8); color: #9d174d; font-weight: 700; }
.ex-source.src-ai { background: linear-gradient(135deg, #ddd6fe, #ede9fe); color: #5b21b6; font-weight: 700; }
.ex-source.src-voa { background: linear-gradient(135deg, #dbeafe, #eff6ff); color: #1d4ed8; }
.ex-source.src-wikinews { background: linear-gradient(135deg, #d1fae5, #ecfdf5); color: #4aa906; }
.ex-source.src-wikipedia { background: linear-gradient(135deg, #e5e7eb, #f3f4f6); color: #374151; }
.ex-source.src-medlineplus { background: linear-gradient(135deg, #fee2e2, #fef2f2); color: #b91c1c; }
.ex-source.src-govdocs { background: linear-gradient(135deg, #e0e7ff, #eef2ff); color: #3730a3; }
.ex-source.src-stackexchange { background: linear-gradient(135deg, #fed7aa, #fff7ed); color: #c2410c; }

/* Commercial-safety pill — gives users (and you) visibility into license */
.ex-license-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; line-height: 1.4; }
.ex-license-pill.commercial-safe { background: #ecfdf5; color: #4aa906; border: 1px solid #a7f3d0; }
.ex-license-pill.ai-original { background: linear-gradient(135deg, #ddd6fe, #ede9fe); color: #5b21b6; border: 1px solid #c4b5fd; }
.ex-license-pill.non-commercial { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.ex-source.src-sec { background: linear-gradient(135deg, #fef9c3, #fefce8); color: #a16207; }
.ex-source.src-caselaw { background: linear-gradient(135deg, #ede9fe, #f5f3ff); color: #6d28d9; }
.ex-source.src-gutenberg { background: linear-gradient(135deg, #f3e8ff, #faf5ff); color: #7c3aed; }

/* Source row: badge + deep-link + YouGlish button laid out inline */
.ex-source-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; }
.ex-source-link { color: #aab; font-size: 11px; text-decoration: none; }
.ex-source-link:hover { color: #1a73e8; text-decoration: underline; }
.ex-youglish { margin-left: auto; padding: 3px 10px; border: 1px solid #e4e9f0; background: #fff; color: #444; border-radius: 12px; font-size: 11px; cursor: pointer; transition: all 0.12s; }
.ex-youglish:hover { background: #f0f6ff; border-color: #1a73e8; color: #1a73e8; }

/* YouGlish modal */
.yg-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.yg-modal.open { display: block; }
.yg-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.yg-modal-card { position: relative; max-width: 760px; margin: 4vh auto; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
.yg-modal-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #e4e9f0; }
.yg-modal-head strong { font-size: 15px; }
.yg-modal-hint { color: #6b7585; font-size: 12px; flex: 1; }
.yg-modal-hint em { color: #1a73e8; font-style: normal; font-weight: 600; }
.yg-modal-close { padding: 4px 10px; }
#yg-frame { width: 100%; height: 70vh; border: 0; background: #000; }
.ex-source-id { color: #aab; font-size: 10px; margin-left: 4px; }

/* ══════════════════════════════════════════════════════
   英文播客（听英文书）模块 — from aixienglish.com/ic
   ══════════════════════════════════════════════════════ */
.podcast-page-shell{min-height:100vh;background:#f5f7fa}
.podcast-page-header{display:none}
.podcast-back-btn{border:none;background:none;font-size:15px;font-weight:700;color:#0f4564;cursor:pointer;padding:6px 10px;border-radius:8px}
.podcast-back-btn:hover{background:#edf3ed}
.podcast-page-title{font-size:20px;font-weight:800;color:#0e3550;margin:0}
.podcast-home-tabs{position:sticky;top:0;z-index:45;display:flex;gap:8px;padding:6px 16px;background:rgba(245,247,250,.92);backdrop-filter:blur(12px)}
.podcast-home-tabs button{flex:1;border:1px solid #dfe8ec;background:#fff;color:#426174;border-radius:999px;padding:7px 10px;font-size:13px;font-weight:850}
.podcast-home-tabs .on{background:#0f4564;color:#fff;border-color:#0f4564;box-shadow:0 10px 22px rgba(15,69,100,.18)}
.podcast-home-slider{display:grid;grid-template-columns:100% 100%;width:100%;overflow:hidden}
.podcast-home-pane{min-width:0;transition:transform .28s ease}
.podcast-home-slider.show-videos .podcast-home-pane{transform:translateX(-100%)}
/* On the shorts tab, lock the slider to the viewport so the long books pane
   doesn't bloat the page height. A scroll-free page lets the feed capture
   vertical swipes (book switching) instead of the document scrolling. */
.podcast-home-slider.show-videos{height:calc(100vh - 94px);height:calc(100dvh - 94px)}
.podcast-home-slider.show-videos .podcast-home-pane{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* inside a program/episode: full-height scroll, nav/tabs hidden */
.podcast-page-shell.pod-immersive .podcast-home-tabs{display:none}
.podcast-page-shell.pod-immersive .podcast-home-slider.show-videos{height:100vh;height:100dvh}

.blink-home,.blink-detail{display:grid;gap:16px;align-content:start;color:#0b314a;font-family:"Avenir Next","Avenir","SF Pro Text","Segoe UI",system-ui,sans-serif}
.blink-home{max-width:1180px;margin:0 auto;padding:14px 16px 88px}
.blink-search{display:flex;align-items:center;gap:10px;border-radius:14px;background:#eef3ee;border:1px solid #dce5e9;padding:11px 14px}
.blink-search span{color:#0c3f5a;font-size:16px;font-weight:700}
.blink-search input{border:none;background:transparent;width:100%;outline:none;color:#10324b;font-size:16px;font-weight:500}
.blink-home h2{font-size:20px;line-height:1.2;margin:2px 0 0;color:#0e3550;font-weight:900;letter-spacing:-.01em}
.blink-cats{display:grid;grid-template-rows:repeat(3,minmax(0,auto));grid-auto-flow:column;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;align-items:start}
.blink-cats::-webkit-scrollbar{display:none}
.blink-cat{border:none;display:inline-flex;align-items:center;gap:6px;border-radius:12px;background:#edf3ed;border:1px solid #e0e6ea;color:#0f3854;font-size:13px;font-weight:700;padding:8px 12px;white-space:nowrap;cursor:pointer}
.blink-cat-icon{font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.blink-cat-icon .cat-svg{width:17px;height:17px;display:block}
.blink-cat.on .blink-cat-icon .cat-svg{stroke:#fff}
.blink-cat.on{background:#0f4564;color:#fff;border-color:#0f4564}
.blink-sec{display:grid;gap:10px}
.blink-sec-head{display:flex;align-items:baseline;justify-content:space-between}
.blink-sec-head h3{margin:0;font-size:34px;line-height:1.05;color:#0f3550;letter-spacing:-.02em}
.blink-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px 12px;padding:2px}
.blink-empty{grid-column:1/-1;border-radius:12px;border:1px dashed #cddde7;background:#f8fbfd;color:#5a768a;font-size:14px;font-weight:700;padding:18px 12px;text-align:center}
.blink-card{background:#fdfefd;border-radius:14px;padding:8px;border:1px solid #e5edf2;box-shadow:0 6px 16px rgba(7,39,62,.07);display:grid;gap:7px;cursor:pointer;text-align:left;font:inherit;color:inherit}
.blink-card:active{transform:translateY(1px);box-shadow:0 3px 10px rgba(7,39,62,.08)}
.blink-card-cover-wrap{border-radius:12px;overflow:hidden;aspect-ratio:3/4;background:#dbecdd}
.blink-card-cover-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.blink-card-title{font-size:16px;line-height:1.28;color:#0f3550;font-weight:800;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blink-card-author{font-size:13px;color:#3a6077;font-weight:700}
.blink-card-sub{font-size:11px;color:#637f93;line-height:1.45;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;min-height:1.5em}
.blink-card-foot{display:flex;align-items:center;justify-content:space-between;color:#668092;font-size:11px}
.podcast-video-feed{position:relative;min-height:calc(100vh - 94px);min-height:calc(100dvh - 94px);margin:0;background:#143b14;color:#fff;overflow:hidden;display:grid;place-items:center;touch-action:none;overscroll-behavior:contain;user-select:none}
.podcast-video-feed.empty{background:linear-gradient(160deg,#215b0f,#122033)}
.podcast-video-placeholder{max-width:320px;display:grid;gap:10px;text-align:center;color:#e5f7d9}
.podcast-video-placeholder strong{font-size:24px}
.podcast-video-placeholder span{font-size:14px;line-height:1.7;color:#b4c8a9}
/* ── Blinkist-style Shorts (book key-takeaway decks) ── */
.podcast-shorts{--ps-bg:#fdf3da;--ps-ink:#12354e;--ps-soft:rgba(18,53,78,.62);background:var(--ps-bg);color:var(--ps-ink);place-items:stretch}
.podcast-shorts[data-tone="1"]{--ps-bg:#c5c9f6;--ps-ink:#16233f;--ps-soft:rgba(22,35,63,.6)}
.podcast-shorts[data-tone="2"]{--ps-bg:#cfe9d8;--ps-ink:#163a2c;--ps-soft:rgba(22,58,44,.6)}
.podcast-shorts[data-tone="3"]{--ps-bg:#f8dcc6;--ps-ink:#4a2a18;--ps-soft:rgba(74,42,24,.62)}
.podcast-shorts-stage{position:relative;z-index:1;padding:64px 32px 132px;display:flex;flex-direction:column;justify-content:center;min-height:0;height:100%;box-sizing:border-box}
.podcast-shorts-cover{display:flex;flex-direction:column;justify-content:center;gap:18px;height:100%}
.podcast-shorts-badge{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;border:1.5px solid var(--ps-ink);border-radius:999px;padding:7px 16px;font-size:15px;font-weight:800;opacity:.92}
.podcast-shorts-title{margin:0;font-size:clamp(34px,9vw,52px);line-height:1.08;font-weight:900;letter-spacing:-.02em}
.podcast-shorts-h{margin:0;font-size:clamp(30px,7.5vw,42px);font-weight:900;letter-spacing:-.01em}
.podcast-shorts-sub{margin:14px 0 8px;font-size:clamp(17px,4.6vw,22px);line-height:1.4;color:var(--ps-soft);font-weight:600}
.podcast-shorts-list{margin:8px 0 0;padding:0 0 0 6px;list-style:none;display:grid;gap:22px}
.podcast-shorts-list li{position:relative;padding-left:24px;font-size:clamp(19px,5vw,25px);line-height:1.32;font-weight:650}
.podcast-shorts-list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--ps-ink)}
.podcast-shorts-point{display:flex;flex-direction:column;justify-content:center;gap:26px;height:100%}
.podcast-shorts-illu{align-self:center;width:min(74%,300px);aspect-ratio:1;border-radius:24px;overflow:hidden;background:rgba(255,255,255,.55);box-shadow:0 22px 48px rgba(0,0,0,.12)}
.podcast-shorts-illu img{width:100%;height:100%;object-fit:cover;display:block}
.podcast-shorts-point-copy{display:grid;gap:12px}
.podcast-shorts-num{font-size:15px;font-weight:900;letter-spacing:.16em;color:var(--ps-soft)}
.podcast-shorts-ptitle{margin:0;font-size:clamp(28px,7vw,38px);font-weight:900;line-height:1.12;letter-spacing:-.01em}
.podcast-shorts-pbody{margin:0;font-size:clamp(18px,4.8vw,23px);line-height:1.45;color:var(--ps-soft);font-weight:600}
.podcast-shorts-outro{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:18px;height:100%}
.podcast-shorts-outro img{width:min(150px,40vw);aspect-ratio:3/4;object-fit:cover;border-radius:8px;box-shadow:0 18px 36px rgba(0,0,0,.22)}
.podcast-shorts-listen{margin-top:6px;border:0;border-radius:999px;background:var(--ps-ink);color:var(--ps-bg);padding:14px 26px;font-size:17px;font-weight:850;cursor:pointer}
.podcast-shorts-foot{position:absolute;left:28px;right:90px;bottom:calc(26px + env(safe-area-inset-bottom));z-index:3;display:flex;align-items:center;gap:12px}
.podcast-shorts-foot img{width:46px;height:62px;object-fit:cover;border-radius:5px;box-shadow:0 8px 18px rgba(0,0,0,.2)}
.podcast-shorts-foot div{display:grid;gap:2px;min-width:0}
.podcast-shorts-foot strong{font-size:17px;font-weight:850;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.podcast-shorts-foot span{font-size:14px;color:var(--ps-soft);font-weight:600}
.podcast-shorts-progress{position:absolute;left:28px;right:28px;top:calc(20px + env(safe-area-inset-top));z-index:3;display:flex;gap:6px}
.podcast-shorts-progress span{flex:1;height:4px;border-radius:999px;background:rgba(0,0,0,.16)}
.podcast-shorts-progress span.done{background:rgba(0,0,0,.42)}
.podcast-shorts-progress span.on{background:var(--ps-ink)}
.podcast-shorts-playpause{position:absolute;right:18px;bottom:calc(34px + env(safe-area-inset-bottom));z-index:4;width:52px;height:52px;border:0;border-radius:50%;background:rgba(0,0,0,.08);color:var(--ps-ink);display:grid;place-items:center;cursor:pointer}
.podcast-shorts-playpause::before{content:"";width:14px;height:16px;background:currentColor;-webkit-mask:linear-gradient(#000 0 0) left/5px 100% no-repeat,linear-gradient(#000 0 0) right/5px 100% no-repeat;mask:linear-gradient(#000 0 0) left/5px 100% no-repeat,linear-gradient(#000 0 0) right/5px 100% no-repeat}
.podcast-shorts-playpause.paused::before{width:0;height:0;background:transparent;border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent currentColor;-webkit-mask:none;mask:none}
.podcast-shorts-nav{position:absolute;right:18px;top:50%;transform:translateY(-50%);z-index:4;display:none;flex-direction:column;gap:10px}
.podcast-shorts-nav button{width:46px;height:46px;border:0;border-radius:50%;background:rgba(0,0,0,.1);color:var(--ps-ink);font-size:20px;font-weight:900;cursor:pointer}
@media(min-width:769px){.podcast-shorts-nav{display:flex}}
.podcast-shorts-share{position:absolute;right:16px;bottom:84px;z-index:6;display:inline-flex;flex-direction:column;align-items:center;gap:2px;width:52px;padding:8px 0;border:0;border-radius:16px;background:rgba(0,0,0,.16);color:var(--ps-ink);font-size:11px;font-weight:800;cursor:pointer;backdrop-filter:blur(4px);transition:transform .12s,background .15s}
.podcast-shorts-share span{font-size:22px;line-height:1;font-weight:900}
.podcast-shorts-share:hover{background:rgba(0,0,0,.26)}
.podcast-shorts-share:active{transform:scale(.92)}
@media(min-width:769px){.podcast-shorts-share{right:80px;bottom:24px}}
.podcast-shorts-toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(12px);z-index:9300;max-width:80vw;padding:11px 18px;border-radius:999px;background:rgba(20,16,40,.94);color:#fff;font-size:13px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.3);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;text-align:center}
.podcast-shorts-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* Cross-device sync confirmation toast (#38). Sits above the bottom nav, top
   area so it doesn't fight the Shorts toast. */
.app-sync-toast{position:fixed;left:50%;top:18px;transform:translateX(-50%) translateY(-12px);z-index:9400;max-width:88vw;padding:11px 18px;border-radius:999px;background:rgba(20,16,40,.94);color:#fff;font-size:13px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.3);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;text-align:center}
.app-sync-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.podcast-desktop-nav{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);display:none;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;background:rgba(14,53,80,.92);box-shadow:0 16px 36px rgba(10,35,52,.24);z-index:185}
.podcast-desktop-nav button{border:none;background:transparent;color:#eef7fb;font-size:14px;font-weight:800;padding:10px 14px;border-radius:999px;cursor:pointer}
.podcast-desktop-nav button:hover{background:rgba(255,255,255,.14)}

/* Player */
.blink-player{position:fixed;inset:0;z-index:160;display:grid;grid-template-rows:auto auto auto auto;gap:0;overflow:auto;padding:0;color:#fff;font-family:"Avenir Next","Avenir","SF Pro Display","Segoe UI",sans-serif;overscroll-behavior-y:none}
.blink-player.theme-green{--blink-bg:#155a35;--blink-bg-2:#145230;--blink-soft:#f3f8f5;--blink-ac:#2bf189;--blink-ink:#e6f7ef;--blink-ui:rgba(236,249,242,.87)}
.blink-player.theme-ivory{--blink-bg:#f3efe3;--blink-bg-2:#ece3cf;--blink-soft:#fff;--blink-ac:#0e4867;--blink-ink:#13364e;--blink-ui:rgba(19,54,78,.72)}
.blink-player.theme-navy{--blink-bg:#212d6a;--blink-bg-2:#1b255a;--blink-soft:#f2f4fb;--blink-ac:#49f0a6;--blink-ink:#e9eefc;--blink-ui:rgba(233,238,252,.78)}
.blink-player.theme-black{--blink-bg:#253a26;--blink-bg-2:#0c1316;--blink-soft:#f4f6f7;--blink-ac:#2ce38a;--blink-ink:#e8f0f3;--blink-ui:rgba(232,240,243,.76)}
.blink-player{background:#f6f7f8}
.blink-fs-hero{background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.12),transparent 42%),linear-gradient(180deg,var(--blink-bg),var(--blink-bg-2));padding:8px 18px 22px;display:grid;gap:12px}
.blink-player-top{display:grid;grid-template-columns:44px 1fr auto;align-items:center;background:var(--blink-bg);padding:12px 16px 2px;position:sticky;top:0;z-index:2}
.blink-player-top button{border:none;background:transparent;color:var(--blink-ink);font-size:24px;line-height:1;font-weight:700;width:40px;height:40px;cursor:pointer}
.blink-player-top .right{display:flex;gap:6px}
.blink-player-top .right button{font-size:24px}
.blink-player-top .right button.blink-share-count{width:auto;height:auto;min-width:0;font-size:14px;font-weight:700;padding:6px 12px;white-space:nowrap;color:var(--blink-ui);display:inline-flex;align-items:center;gap:3px;border-radius:999px}
.blink-top-title{text-align:center;color:var(--blink-ink);font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.96}
.blink-player-cover{display:grid;justify-items:center;gap:8px;position:relative;padding-top:4px}
.blink-player-cover-shell{position:relative;width:min(260px,68vw);display:grid;justify-items:center;padding-bottom:8px}
.blink-player-cover-base{position:absolute;bottom:0;width:min(310px,80vw);height:104px;border-radius:180px 180px 0 0;background:rgba(236,247,241,.95);z-index:0}
.blink-player-cover img{width:min(176px,46vw);aspect-ratio:3/4;border-radius:6px;object-fit:cover;box-shadow:0 14px 26px rgba(0,0,0,.27);z-index:1}
.blink-player-cover h3{margin:2px 0 0;font-size:32px;line-height:1.22;letter-spacing:-.01em;font-weight:800;color:var(--blink-ink);text-align:center;max-width:90vw;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.blink-player-cover p{margin:0;font-size:21px;color:var(--blink-ui);opacity:.95}
.blink-progress-wrap{display:grid;gap:10px}
.blink-progress-track{height:6px;border-radius:999px;background:rgba(255,255,255,.24);position:relative}
#blink-progress-fill{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:999px;background:var(--blink-ac);z-index:1}
/* 当前播放位置的小白点（拖动手柄） */
#blink-progress-fill::after{content:"";position:absolute;right:-7px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.32);z-index:4}
#blink-progress{position:absolute;inset:-9px 0;width:100%;opacity:0;cursor:pointer;z-index:2}
/* Key message 标记点 */
.blink-progress-marks{position:absolute;inset:0;pointer-events:none}
.blink-pmark{position:absolute;top:50%;transform:translate(-50%,-50%);width:7px;height:7px;padding:0;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.14);box-shadow:0 0 0 1px rgba(255,255,255,.25);cursor:pointer;pointer-events:auto;z-index:3;transition:transform .12s}
.blink-pmark::before{content:"";position:absolute;inset:-7px;border-radius:50%}/* 更大的点击热区 */
.blink-pmark.passed{background:#ffffff;opacity:.55}
.blink-pmark:active{transform:translate(-50%,-50%) scale(1.4)}
.blink-time{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--blink-ui)}
/* 下载完成前锁定进度条：手柄白点收起、轨道走「缓冲」斜纹微动，光标禁用 */
.blink-progress-wrap.seek-locked .blink-progress-track{opacity:.55}
.blink-progress-wrap.seek-locked #blink-progress{cursor:not-allowed;pointer-events:none}
.blink-progress-wrap.seek-locked #blink-progress-fill::after{opacity:.4}
.blink-progress-wrap.seek-locked .blink-progress-track::after{content:"";position:absolute;inset:0;border-radius:999px;background:repeating-linear-gradient(115deg,rgba(255,255,255,.18) 0 8px,rgba(255,255,255,0) 8px 16px);background-size:200% 100%;animation:blinkDlStripe 1.1s linear infinite;z-index:3;pointer-events:none}
@keyframes blinkDlStripe{from{background-position:0 0}to{background-position:32px 0}}
.blink-dl-hint{font-size:12px;color:var(--blink-ui);opacity:.78;letter-spacing:.2px}
.blink-controls{display:grid;grid-template-columns:1fr 1fr 1.35fr 1fr 1fr;align-items:center;gap:8px}
.blink-controls button{border:none;background:transparent;color:var(--blink-ink);font-size:24px;font-weight:700;height:46px;padding:0;display:inline-flex;align-items:center;justify-content:center;line-height:1;cursor:pointer}
.blink-main-play{width:72px!important;height:72px!important;min-width:72px;min-height:72px;max-width:72px;max-height:72px;aspect-ratio:1/1;margin:auto;padding:0;border-radius:50%;background:#fff!important;color:#155133!important;display:grid;place-items:center;box-shadow:0 12px 26px rgba(0,0,0,.28);cursor:pointer}
.bicon-play{width:0;height:0;border-left:16px solid currentColor;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.bicon-pause{width:12px;height:20px;border-left:4px solid currentColor;border-right:4px solid currentColor}
.blink-nav-btn span{position:relative;display:block;width:28px;height:22px}
.blink-nav-btn.prev span::before,.blink-nav-btn.prev span::after,.blink-nav-btn.next span::before,.blink-nav-btn.next span::after{content:"";position:absolute;top:50%;transform:translateY(-50%)}
.blink-nav-btn.prev span::before{left:4px;width:2px;height:20px;border-radius:2px;background:currentColor}
.blink-nav-btn.prev span::after{left:9px;width:0;height:0;border-right:11px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent}
.blink-nav-btn.next span::before{right:4px;width:2px;height:20px;border-radius:2px;background:currentColor}
.blink-nav-btn.next span::after{right:9px;width:0;height:0;border-left:11px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent}
.blink-seek-btn{position:relative}
.blink-seek-btn .blink-seek-num{position:relative;z-index:2;font-weight:700;font-size:18px;letter-spacing:.01em}
.blink-seek-btn::before{content:"";position:absolute;left:50%;top:50%;width:35px;height:35px;border-radius:50%;border:1.2px solid currentColor}
.blink-seek-btn::after{content:"";position:absolute;width:6px;height:6px;border-right:1.2px solid currentColor;border-top:1.2px solid currentColor}
.blink-seek-btn.rewind::before{transform:translate(-50%,-50%) rotate(136deg);border-left-color:transparent;border-bottom-color:transparent}
.blink-seek-btn.rewind::after{left:calc(50% - 12px);top:calc(50% - 12px);transform:rotate(-135deg)}
.blink-seek-btn.forward::before{transform:translate(-50%,-50%) rotate(-46deg);border-right-color:transparent;border-top-color:transparent}
.blink-seek-btn.forward::after{left:calc(50% + 6px);top:calc(50% - 12px);transform:rotate(45deg)}
.blink-sub-controls{display:flex;align-items:center;justify-content:space-between}
.blink-fs-actions button{border:none;background:transparent;color:var(--blink-ui);font-size:15px;font-weight:700;cursor:pointer;display:grid;gap:4px;justify-items:center}
.blink-rate-chip,.blink-cast-chip{border:none;background:transparent;color:var(--blink-ink);font-size:17px;font-weight:800;cursor:pointer}
.blink-cast-chip{font-size:20px}
.blink-controls-reading{display:none}
.blink-swipe-tip{justify-self:center;color:var(--blink-ui);font-size:13px;line-height:1;letter-spacing:.01em;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.08);cursor:pointer}
/* 倍速 + 收藏星 (replaced the prev/next track buttons) */
.blink-side-btn{border:none;background:transparent;color:var(--blink-ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;height:46px}
.blink-side-btn.rate{font-size:17px;font-weight:800;letter-spacing:.01em}
.blink-side-btn.fav{padding:0}
.blink-star-ico{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;transition:fill .15s,stroke .15s,transform .15s}
.blink-side-btn.fav.on .blink-star-ico{fill:#ffce4d;stroke:#ffce4d}
.blink-side-btn.fav.on{transform:scale(1.05)}
.blink-side-btn:active{transform:scale(.9)}
/* 轻提示 toast (收藏/复制) */
.blink-toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(8px);background:rgba(20,28,40,.92);color:#fff;font-size:14px;font-weight:600;padding:10px 18px;border-radius:999px;z-index:4000;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:82vw;text-align:center}
.blink-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
/* 分享面板 (底部抽屉) */
.blink-share-overlay{position:fixed;inset:0;z-index:3500;background:rgba(15,23,32,.5);display:flex;align-items:flex-end;justify-content:center}
.blink-share-card{width:100%;max-width:560px;background:#fff;border-radius:20px 20px 0 0;padding:18px 18px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(0,0,0,.2);animation:blinkSheetUp .26s ease}
@keyframes blinkSheetUp{from{transform:translateY(30px);opacity:.5}to{transform:translateY(0);opacity:1}}
.blink-share-tip{background:#fff6e5;color:#9a6b00;font-size:13px;font-weight:600;padding:10px 14px;border-radius:12px;margin-bottom:12px;line-height:1.5}
.blink-share-h{font-size:13px;color:#8a97a4;font-weight:700;margin:8px 2px 10px}
.blink-share-row{display:flex;gap:26px;padding:0 4px 4px}
.blink-share-row button{border:none;background:transparent;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;color:#3a4856;font-size:13px;font-weight:600}
.blink-share-row .ic{width:52px;height:52px;border-radius:50%;background:#f1f5f8;display:grid;place-items:center;font-size:24px}
.blink-share-posters{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;-webkit-overflow-scrolling:touch;min-height:120px}
.blink-poster-thumb{height:230px;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.14);cursor:pointer;flex:0 0 auto}
.blink-poster-loading{color:#8a97a4;font-size:13px;padding:40px 10px;width:100%;text-align:center}
.blink-share-cancel{width:100%;margin-top:6px;border:none;background:#f1f5f8;color:#3a4856;font-size:15px;font-weight:700;padding:13px;border-radius:14px;cursor:pointer}
/* 海报预览 */
.blink-poster-overlay{position:fixed;inset:0;z-index:3600;background:rgba(10,15,22,.85);display:flex;align-items:center;justify-content:center;padding:24px}
.blink-poster-stage{display:flex;flex-direction:column;align-items:center;gap:18px;max-height:100%}
.blink-poster-stage img{max-width:78vw;max-height:66vh;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.45)}
.blink-poster-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center}
.blink-poster-actions button{border:none;background:#fff;color:#16202c;font-size:15px;font-weight:700;padding:12px 22px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.blink-poster-actions button span{font-size:17px}
.blink-poster-actions button.ghost{background:rgba(255,255,255,.18);color:#fff}
.blink-transcript{display:none;background:#fff;border-radius:0;color:#0f3550;padding:12px 20px 18px;overflow:auto;overscroll-behavior-y:contain;box-shadow:none;-webkit-overflow-scrolling:touch;user-select:text;-webkit-user-select:text}
.blink-transcript-loading{display:flex;align-items:center;justify-content:center;min-height:42vh;padding:24px 12px;text-align:center;color:#6d8194;font-size:16px;line-height:1.65}
.blink-chapter-block{display:grid;gap:10px;margin:0 0 28px}
.blink-chapter-time{justify-self:start;font-size:13px;color:#2b73a9;background:#dcecff;border-radius:999px;padding:5px 12px;font-weight:800}
.blink-chapter-block h4{margin:0;font-size:34px;line-height:1.12;color:#0d3450;letter-spacing:-.015em;font-weight:900}
.blink-sent-line{margin:0 0 .7em;user-select:text;-webkit-user-select:text}
.blink-sent-line:last-child{margin-bottom:0}
.blink-sent-translation{margin:0 0 1.05em;padding:8px 10px;border-left:3px solid #f1c16b;border-radius:8px;background:#f7f9ff;color:#3f5d7a;font-size:14px;line-height:1.7}
.blink-sent{display:inline;border-radius:4px;padding:0 1px;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background-color .2s ease,color .2s ease}
.blink-sent.on{background:#dff0ff;color:#0f3550}
.blink-word:active{color:#0f8b53}

.blink-book-panel{background:#fff;color:#27313a;padding:18px 18px 88px;display:grid;gap:14px;border-radius:0}
.blink-book-info{display:grid;grid-template-columns:112px 1fr;gap:14px;align-items:center}
.blink-book-info img{width:112px;aspect-ratio:3/4;border-radius:8px;object-fit:cover;box-shadow:0 10px 24px rgba(15,23,42,.16)}
.blink-book-info h2{margin:0 0 6px;font-size:26px;line-height:1.2;color:#1f2933}
.blink-book-info p{margin:0 0 8px;color:#7a858f;font-size:15px}
.blink-book-rating{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.blink-stars{display:inline-flex;gap:2px}
.blink-star{border:none;background:transparent;padding:0 1px;font-size:21px;line-height:1;color:#dfe3e8;cursor:pointer;transition:transform .1s,color .12s}
.blink-star.on{color:#f4b400}
.blink-book-rating.mine .blink-star.on{color:#f59e0b}
.blink-star:active{transform:scale(1.25)}
.blink-rating-avg{font-style:normal;color:#8a9299;font-weight:700;font-size:15px}
.blink-rating-tag{font-size:13px;color:#9a7a00;background:#fff7d6;border:1px solid #f5df8b;border-radius:999px;padding:3px 8px;font-weight:700}
.blink-book-cta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.blink-book-cta button{border:1px solid #e5e7eb;background:#fff;border-radius:12px;padding:13px 8px;color:#4b5563;font-size:16px;font-weight:700;cursor:pointer}
.blink-book-cta .blink-cta-speak{color:#0f766e;border-color:#0f766e}
.blink-book-cta .blink-cta-speak:active{background:#0f766e;color:#fff}
.blink-book-tabs{display:flex;gap:24px;border-top:8px solid #f5f5f5;padding-top:14px}
.blink-book-tabs button{border:none;background:transparent;color:#777;font-size:19px;font-weight:800;padding:0 0 7px;position:relative}
.blink-book-tabs button.on{color:#1f2933}
.blink-book-tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;border-radius:999px;background:#f4cf2e}
.blink-book-intro h3{margin:0 0 10px;font-size:21px;color:#1f2933}
.blink-book-intro p{margin:0;color:#666;line-height:1.9;font-size:18px}
.blink-mind-preview{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.blink-mind-preview span{background:#f0f7f3;color:#23613f;border-radius:999px;padding:6px 10px;font-size:13px}
.blink-related-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.blink-related-row button{border:none;background:#f8fafc;border-radius:12px;padding:8px;color:#26333d;text-align:left;cursor:pointer}
.blink-related-row img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;background:#e5e7eb}
.blink-related-row span{display:block;margin-top:6px;font-size:12px;line-height:1.3}
/* 连续滚动的简介/相关/评论分区 */
.blink-book-sec{border-top:8px solid #f5f5f5;padding-top:16px;margin-top:4px}
.blink-sec-title{margin:0 0 12px;font-size:20px;font-weight:800;color:#1f2933}
.blink-book-intro-text{margin:0;color:#666;line-height:1.9;font-size:17px}
.blink-ai-note{display:flex;align-items:center;gap:7px;margin:14px 0 0;padding:9px 12px;background:rgba(15,118,110,.06);border:1px solid rgba(15,118,110,.16);border-radius:10px;color:#0f766e;font-size:12.5px;line-height:1.5}
.blink-ai-dot{flex:none;width:6px;height:6px;border-radius:50%;background:#0f766e}
/* 金句卡片 */
.blink-quote-cards{display:grid;gap:10px;margin-top:14px}
.blink-quote-card{position:relative;background:linear-gradient(135deg,#f4faf1,#eaf4ee);border:1px solid #dcefe8;border-radius:14px;padding:14px 16px 14px 18px;overflow:hidden}
.blink-quote-card .blink-quote-mark{position:absolute;left:8px;top:-6px;font-size:50px;font-family:Georgia,serif;color:rgba(73, 151, 42, .18);line-height:1}
.blink-quote-card p{margin:0;position:relative;color:#376923;font-size:16px;line-height:1.7;font-weight:600}
/* 作者卡片 */
.blink-author-card{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start;background:#f8fafc;border:1px solid #eef2f6;border-radius:14px;padding:14px}
.blink-author-ava{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#dcfbcc,#b7f699);color:#33a315;font-weight:800;font-size:22px;display:grid;place-items:center}
.blink-author-card b{display:block;color:#1f2933;font-size:16px;margin-bottom:5px}
.blink-author-card p{margin:0;color:#667085;line-height:1.7;font-size:14px}
.blink-comment-box{position:sticky;bottom:0;margin:0 -18px -88px;padding:7px 18px calc(7px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid #e5e7eb;display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center}
.blink-comment-box input{border:none;background:#f3f4f6;border-radius:999px;padding:8px 14px;font-size:14px}
.blink-comment-box button{border:none;background:#fff;color:#4b5563;font-weight:700}
.blink-empty-note{margin:12px 0;color:#7a858f;line-height:1.7;font-size:15px}
.blink-comments-tab{display:grid;gap:10px;padding:2px 0 10px}
.blink-comment-item{border:1px solid #e5edf2;border-radius:14px;background:#f8fafc;padding:12px}
.blink-comment-item p{margin:0 0 6px;color:#26333d;line-height:1.55}
.blink-comment-item span{color:#94a3b8;font-size:12px}
.blink-mind-card{display:grid;gap:12px}
.blink-mind-image-wrap{border-radius:18px;overflow:hidden;background:#f6f1e7;border:1px solid #eadfc9}
.blink-mind-image-wrap img{display:block;width:100%;height:auto}
.blink-mind-retry{border:none;border-radius:999px;background:#155a35;color:#fff;font-weight:800;padding:10px 14px}
.blink-mind-node{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;padding:12px;border:1px solid #e5edf2;border-radius:14px;background:#f8fbfd}
.blink-mind-node span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#155a35;color:#fff;font-weight:800}
.blink-mind-node em{font-style:normal;color:#173f59;line-height:1.5}

/* Reading mode */
.blink-player.reading-mode{grid-template-rows:auto 1fr auto;gap:0;background:#f8fcf8;color:#123850;padding:0 0 calc(env(safe-area-inset-bottom) + 8px);overflow:hidden}
.blink-player.reading-mode .blink-fs-hero,.blink-player.reading-mode .blink-book-panel,.blink-player.reading-mode .blink-player-cover,.blink-player.reading-mode .blink-progress-wrap,.blink-player.reading-mode .blink-controls-player,.blink-player.reading-mode .blink-sub-controls,.blink-player.reading-mode .blink-swipe-tip{display:none}
.blink-player.reading-mode .blink-player-top{background:#fff;border-bottom:1px solid #e5edf2;padding:12px 16px}
.blink-player.reading-mode .blink-player-top button{color:#0f4564}
.blink-player.reading-mode .blink-top-title{color:#173e57;font-size:13px;font-weight:600}
.blink-player.reading-mode .blink-controls-reading{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:3;background:#155a35;color:#fff;border-radius:22px 22px 0 0;padding:14px 16px calc(env(safe-area-inset-bottom) + 20px);grid-template-columns:1fr 1.35fr 1fr;align-items:center;box-shadow:0 -10px 24px rgba(0,0,0,.2);overflow:visible}
.blink-player.reading-mode .blink-controls-reading::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:46px;height:5px;border-radius:999px;background:rgba(255,255,255,.55)}
.blink-player.reading-mode .blink-controls-reading button{color:#fff;font-size:21px}
.blink-player.reading-mode .blink-controls-reading .blink-main-play{color:#155a35!important}
.blink-player.reading-mode .blink-controls-reading .blink-dock-handle{position:absolute;left:50%;top:-48px;transform:translateX(-50%);width:106px;height:44px;border:none;background:transparent;color:transparent}
.blink-player.reading-mode .blink-controls-reading .blink-dock-handle::after{content:"";position:absolute;left:50%;top:8px;transform:translateX(-50%);width:42px;height:6px;border-radius:999px;background:rgba(255,255,255,.64)}
.blink-player.reading-mode .blink-transcript{display:block;height:calc(100dvh - 74px);border-radius:0;background:#fff;box-shadow:none;padding:16px 22px 172px}
.blink-player:not(.reading-mode) .blink-transcript{display:none}
/* 解读文稿（reading mode）的背景 + 字号要跟随 Aa 设置 —— 各主题给一套阅读用纸张/文字色，
   字号用 --blink-font-scale（podcastSetFont 设置）。 */
.blink-player.reading-mode.theme-green{--rd-paper:#f8fcf8;--rd-ink:#15384f;--rd-soft:rgba(21,90,53,.10);--rd-line:#e7eef2}
.blink-player.reading-mode.theme-ivory{--rd-paper:#f4eee0;--rd-ink:#4a3f2a;--rd-soft:rgba(120,90,30,.14);--rd-line:#e3d8c2}
.blink-player.reading-mode.theme-navy{--rd-paper:#1b2540;--rd-ink:#dde4f3;--rd-soft:rgba(120,150,230,.22);--rd-line:#2a3656}
.blink-player.reading-mode.theme-black{--rd-paper:#0f1417;--rd-ink:#dce3e6;--rd-soft:rgba(120,200,160,.18);--rd-line:#222a2e}
.blink-player.reading-mode{background:var(--rd-paper,#f8fcf8)!important;color:var(--rd-ink,#15384f)}
.blink-player.reading-mode .blink-transcript{background:var(--rd-paper,#fff)!important;color:var(--rd-ink,#15384f);font-size:calc(19px * var(--blink-font-scale, 1));line-height:1.78}
.blink-player.reading-mode .blink-player-top{background:var(--rd-paper,#fff)!important;border-bottom:1px solid var(--rd-line,#e5edf2)}
.blink-player.reading-mode .blink-player-top button,.blink-player.reading-mode .blink-top-title{color:var(--rd-ink,#173e57)!important}
.blink-player.reading-mode .blink-sent{color:inherit}
.blink-player.reading-mode .blink-chapter-block h4{color:var(--rd-ink,#0d3450);font-size:calc(30px * var(--blink-font-scale, 1))}
.blink-player.reading-mode .blink-chapter-time{color:var(--rd-ink);opacity:.6}
.blink-player.reading-mode .blink-sent.on{background:var(--rd-soft);color:inherit}
.blink-player.reading-mode .blink-sent-translation{background:var(--rd-soft);color:var(--rd-ink);opacity:.92;border-left-color:#f1c16b}
.blink-player:not(.reading-mode) .content-translate-fab.podcast{display:none}
.blink-player.reading-focus .blink-player-top,.blink-player.reading-focus .blink-controls-reading{display:none!important}
.blink-player.reading-focus .blink-transcript{height:100dvh;padding:18px 22px 24px}

/* Panels */
.blink-panel{position:fixed;inset:0;z-index:190;display:none;align-items:flex-end;justify-content:center;background:rgba(8,16,24,.4)}
.blink-panel.on{display:flex}
.blink-panel .panel-card,.blink-panel .chapter-card,.blink-panel .more-card{width:min(760px,100vw);background:#fff;border-radius:24px 24px 0 0;padding:16px;color:#143a53;max-height:76vh;overflow:auto}
.themes{display:flex;gap:12px;margin-bottom:10px}
.themes{display:flex;gap:16px;margin:6px 0 4px}
.themes button{width:46px;height:46px;border-radius:50%;border:2px solid #d8e2ea;background:#fff;cursor:pointer;position:relative;transition:transform .12s}
.themes button[data-theme="ivory"]{background:#f3ebd4}
.themes button[data-theme="navy"]{background:#0f4564}
.themes button[data-theme="black"]{background:#111}
.themes button[data-theme="green"]{background:#eaf4ee}
.themes button.on{border-color:#49972a;box-shadow:0 0 0 3px rgba(73, 151, 42, .18)}
.themes button.on::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#49972a;font-weight:800;font-size:18px}
.themes button[data-theme="navy"].on::after,.themes button[data-theme="black"].on::after{color:#fff}
/* Blinkist 风格阅读设置面板 */
.reader-settings .panel-card{padding:18px 20px calc(20px + env(safe-area-inset-bottom))}
.reader-set-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.reader-set-head strong{font-size:18px;color:#16202c}
.reader-set-close{border:none;background:#eef2f6;color:#5a6472;width:30px;height:30px;border-radius:50%;font-size:18px;cursor:pointer}
.reader-set-label{font-size:13px;color:#8a97a4;font-weight:700;margin:14px 2px 6px}
.reader-font-row{display:flex;align-items:center;gap:14px}
.reader-font-row input[type=range]{flex:1}
.reader-font-a{color:#3a4856;font-weight:800}
.reader-font-a.small{font-size:16px}
.reader-font-a.big{font-size:26px}
.panel-card input[type=range]{width:100%;margin-top:4px;accent-color:#49972a}
.panel-card .reset{margin-top:18px;width:100%;border:none;background:#eef3f7;color:#2d5b78;font-size:16px;font-weight:800;border-radius:999px;padding:12px 16px;cursor:pointer}
.chapter-card .head{display:flex;align-items:center;gap:8px;font-size:19px}
.chapter-card .head button{border:none;background:none;font-size:24px;color:#0f3550;cursor:pointer}
.chapter-card .citem{width:100%;border:none;background:none;border-top:1px solid #e3ebf2;padding:14px 0;display:grid;grid-template-columns:auto 1fr;gap:10px;text-align:left;cursor:pointer}
.chapter-card .citem span{font-size:14px;color:#2f73a8;background:#d8eaff;border-radius:999px;padding:4px 8px;height:fit-content}
.chapter-card .citem em{font-style:normal;font-size:16px;color:#173f59}
.more-card h4{margin:0 0 8px;font-size:22px}
.more-card button{width:100%;text-align:left;border:none;border-top:1px solid #e3ebf2;background:#fff;color:#153e58;font-size:17px;padding:16px 0;cursor:pointer}

/* Translate FAB */
.content-translate-fab.podcast{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom) + 156px);z-index:170;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid #dae6ec;box-shadow:0 6px 18px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;font-weight:800;color:#0f4564}
.translate-fab-stack{display:flex;flex-direction:column;align-items:center;line-height:1.1;font-size:11px}

@media (min-width:1025px){
  .podcast-desktop-nav{display:flex}
  .blink-player{padding:0}
  .blink-player-cover-shell{width:min(220px,24vw)}
  .blink-player-cover-base{width:min(260px,28vw);height:88px}
  .blink-player-cover img{width:min(148px,16vw)}
  .blink-player-cover h3{font-size:24px}
  .blink-player-cover p{font-size:16px}
}

@media (max-width:768px){
  .cx-shell,.cx-view-shell{padding:14px 12px 92px}
  .cx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cx-card-body{padding:10px}
  .cx-card-body strong{font-size:13px}
  .cx-card-body em{font-size:11px}
  .blink-home{gap:14px}
  .blink-search input{font-size:14px}
  .blink-home h2{font-size:18px}
  .blink-sec-head h3{font-size:28px}
  .blink-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 9px}
  .blink-card-title{font-size:15px}
  .podcast-desktop-nav{display:none}
  .blink-player{padding:0;gap:0}
  .blink-fs-hero{padding:8px 14px 18px}
  .blink-player-top{grid-template-columns:36px 1fr auto}
  .blink-player-top button{width:34px;height:34px;font-size:22px}
  .blink-player-cover-shell{width:min(220px,62vw)}
  .blink-player-cover-base{width:min(250px,72vw);height:82px}
  .blink-player-cover img{width:min(148px,42vw)}
  .blink-player-cover h3{font-size:24px}
  .blink-player-cover p{font-size:14px}
  .blink-book-panel{padding:14px 14px 86px}
  .blink-book-info{grid-template-columns:92px 1fr}
  .blink-book-info img{width:92px}
  .blink-book-info h2{font-size:22px}
  .blink-book-info p{font-size:14px}
  .blink-book-cta button{font-size:15px;padding:11px 6px}
  .blink-book-intro p{font-size:16px;line-height:1.85}
  .blink-related-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blink-time{font-size:12px}
  .blink-controls button{font-size:18px;height:38px}
  .blink-main-play{width:62px!important;height:62px!important;min-width:62px;min-height:62px;max-width:62px;max-height:62px}
  .blink-chapter-block h4{font-size:16px}
  .blink-swipe-tip{margin-top:2px;font-size:12px}
  .blink-player.reading-mode .blink-transcript{padding:14px 16px 172px}
  .content-translate-fab.podcast{right:10px;bottom:calc(env(safe-area-inset-bottom) + 130px)}
}

/* ─── Sentence-pattern annotation (句型) in the article reader ───────── */
/* Wrapper that spans across word spans + inter-word text so the underline
   paints CONTINUOUSLY. Bold + solid underline by default, green when
   the user has practiced and mastered the pattern. */
.rd-pattern-wrap {
  font-weight: 700;
  text-decoration: underline 2px solid #2f7df4;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Descendant .rd-word has its own 1px horizontal padding for tap-target
   width — that padding makes each word a separate inline box, breaking the
   underline into per-word segments. Zero it out inside pattern wraps so the
   underline paints as one continuous line across the pattern span. */
.rd-pattern-wrap .rd-word { padding: 0; }
.rd-pattern-wrap.rd-pattern-mastered {
  text-decoration-color: #2ea76a;
  color: #2ea76a;
}
.rd-rd-theme-dark .rd-pattern-wrap { text-decoration-color: #6aa7ff; color: #cfe1ff; }
.rd-rd-theme-dark .rd-pattern-wrap.rd-pattern-mastered { color: #6ee0a5; text-decoration-color: #6ee0a5; }
.rd-pattern-loading {
  margin: 12px 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.08);
  color: #4f46e5;
  font-size: 13px;
}

/* ─── Sentence-pattern study overlay ────────────────────────────────── */
.rd-pattern-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.rd-pattern-modal {
  background: #fff;
  border-radius: 14px;
  width: min(640px, 100%);
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.rd-pattern-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #eef0f3;
}
.rd-pattern-modal-title { font-weight: 600; color: #1f2329; }
.rd-pattern-pattern {
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.06), rgba(99, 102, 241, 0));
  border-bottom: 1px solid #eef0f3;
}
.rd-pattern-pat-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px; font-weight: 600;
  color: #1f2329;
  line-height: 1.4;
}
.rd-pattern-pat-zh { margin-top: 6px; color: #5a6573; font-size: 13px; }
.rd-pattern-tabs {
  display: flex; gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid #eef0f3;
}
.rd-pattern-tabs button {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  border-radius: 8px;
  color: #5a6573;
  font-size: 14px;
  cursor: pointer;
}
.rd-pattern-tabs button.active {
  background: #eef2ff;
  color: #4f46e5;
  font-weight: 600;
}
.rd-pattern-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
}
.rd-pattern-section h4 {
  margin: 0 0 10px;
  font-size: 14px;
  color: #2f3640;
}
.rd-pattern-example-en {
  font-family: Georgia, "Times New Roman", serif;
  background: #f8f9fb;
  padding: 12px 14px;
  border-radius: 10px;
  color: #1f2329;
  line-height: 1.55;
}
.rd-pattern-example-hint { margin-top: 6px; font-size: 12px; color: #94a3b8; }
.rd-pattern-task-zh {
  font-size: 16px;
  color: #1f2329;
  background: #fffaf2;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #ffe5c2;
}
.rd-pattern-task-hint { margin: 8px 0 12px; color: #94a3b8; font-size: 12px; }
.rd-pattern-input {
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e3e6ec;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  background: #fff;
  color: #1f2329;
}
.rd-pattern-feedback {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f8f9fb;
  border: 1px solid #eef0f3;
  font-size: 14px;
  color: #2f3640;
  line-height: 1.5;
}
.rd-pattern-fb-row { margin-bottom: 6px; }
.rd-pattern-fb-row:last-child { margin-bottom: 0; }
.rd-pattern-fb-row.ok { color: #157f4a; }
.rd-pattern-fb-row.warn { color: #b45309; }
.rd-pattern-foot {
  border-top: 1px solid #eef0f3;
  padding: 10px 16px;
  display: flex; justify-content: flex-end;
}

/* ─── Article comments section ─────────────────────────────────────── */
.rd-comments {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #eef0f3;
}
.rd-comments-h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1f2329;
  margin: 0 0 12px;
}
.rd-comments-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 12px;
  font-weight: 500;
}
.rd-comment-compose { margin-bottom: 18px; }
.rd-comment-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e3e6ec;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  background: #fff;
  color: #1f2329;
  min-height: 60px;
}
.rd-comment-compose-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px;
}
.rd-comment-hint { color: #94a3b8; font-size: 12px; }
.rd-comment-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.rd-comment-item {
  padding: 12px 14px;
  background: #f8f9fb;
  border-radius: 10px;
  border: 1px solid #eef0f3;
}
.rd-comment-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}
.rd-comment-name { color: #1f2329; font-weight: 600; }
.rd-comment-date { color: #94a3b8; font-size: 12px; }
.rd-comment-del {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.rd-comment-del:hover { color: #ef5a6f; }
.rd-comment-text {
  color: #2f3640;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.rd-comment-empty {
  color: #94a3b8;
  font-size: 13px;
  text-align: center;
  padding: 16px 0;
}
.rd-rd-theme-dark .rd-comments { border-top-color: rgba(255,255,255,0.08); }
.rd-rd-theme-dark .rd-comments-h3 { color: #f5f5f7; }
.rd-rd-theme-dark .rd-comment-input,
.rd-rd-theme-dark .rd-comment-item {
  background: #1f2329;
  color: #e8eaee;
  border-color: rgba(255,255,255,0.08);
}
.rd-rd-theme-dark .rd-comment-name { color: #f5f5f7; }
.rd-rd-theme-dark .rd-comment-text { color: #c8ced8; }

/* ─── Podcast transcript: per-sentence translate toggle + hl popup ───── */
.blink-sent-translate {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.08);
  color: #4f46e5;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  vertical-align: middle;
  line-height: 1;
}
.blink-sent-translate:hover { background: rgba(99, 102, 241, 0.18); }
.blink-player .blink-sent .rd-word {
  /* Transcript is rendered inside Aixie player theme; match its text color */
  color: inherit;
}
/* 解读文稿长按工具栏 = 复用阅读文章页的浅色 .action-menu（见下方 innerHTML）。
   这里只当一个透明定位容器，不要再加暗色底/按钮样式，否则会盖掉里面的 action-menu。 */
.podcast-hl-popup {
  display: inline-block;
  background: transparent;
  padding: 0;
  z-index: 9100;
}
/* 关键：display:inline-block 会盖掉 [hidden] 的 display:none，导致 pop.hidden=true
   根本收不起来（点别处/切页面工具条都赖着）。显式让 [hidden] 生效。 */
.podcast-hl-popup[hidden] { display: none !important; }
/* The .blink-sent active-line highlight has its own background; make sure
   our inline-underline-wrap doesn't get visually swallowed by it. */
.blink-sent .inline-underline-wrap.podcast-hl {
  /* 跟随用户选的颜色（原来硬编码 #4f46e5 导致切颜色不变色）。 */
  text-decoration-color: var(--underline-accent, #4f46e5);
}


/* ─── Event cards + detail page (Phase 3) ─────────────────────────────── */
.rd-events-section { margin: 20px 0 26px; }
.rd-events-section > h3 {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary, #1f2937);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rd-event-cards { display: flex; flex-direction: column; gap: 14px; }
.rd-event-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.rd-event-card {
  cursor: pointer;
  background: var(--surface, #fff);
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rd-event-card:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(0,0,0,0.08); }

/* Headline (hero) card */
.rd-event-card-headline {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 200px;
}
.rd-event-card-headline .rd-event-cover {
  position: relative;
  overflow: hidden;
  background: #111;
}
.rd-event-card-headline .rd-event-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.rd-event-card-headline .rd-event-body {
  padding: 18px 20px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.rd-event-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-secondary, #6b7280);
}
.rd-event-priority {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff; padding: 3px 9px; border-radius: 999px;
  font-weight: 700; font-size: 11px;
}
.rd-event-status {
  background: rgba(119, 232, 20, 0.12);
  color: #4aa906;
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
}
.rd-event-status-closed {
  background: rgba(107, 114, 128, 0.14);
  color: #4b5563;
}
.rd-event-fresh { font-size: 11px; color: #9ca3af; }
.rd-event-title {
  font-size: 17px; font-weight: 800; margin: 2px 0 0;
  color: var(--text-primary, #111827); line-height: 1.35;
}
.rd-event-title-zh {
  font-size: 15px; font-weight: 600; margin: 0;
  color: var(--text-primary, #111827);
}
.rd-event-summary {
  margin: 6px 0 4px;
  font-size: 13.5px; line-height: 1.55;
  color: var(--text-secondary, #4b5563);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rd-event-stats {
  display: flex; gap: 14px; font-size: 12px; color: #6b7280;
  margin-top: auto;
}
.rd-event-stats em { font-style: normal; color: #111827; font-weight: 700; margin-left: 2px; }
.rd-event-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.rd-event-tag {
  background: rgba(99, 102, 241, 0.10);
  color: #4f46e5;
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
}
.rd-event-cta {
  align-self: flex-start;
  margin-top: 4px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff; border: none; padding: 8px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}

/* Major (smaller) card */
.rd-event-card-major {
  display: grid;
  grid-template-columns: 100px 1fr;
  min-height: 110px;
}
.rd-event-card-major .rd-event-cover-sm {
  background: #111; overflow: hidden;
}
.rd-event-card-major .rd-event-cover-sm img {
  width: 100%; height: 100%; object-fit: cover;
}
.rd-event-card-major .rd-event-body {
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
}
.rd-event-meta-sm {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11px;
}
.rd-event-priority-sm {
  background: rgba(99,102,241,0.12); color: #4338ca;
  padding: 2px 7px; border-radius: 999px; font-weight: 600;
}
.rd-event-dismiss {
  margin-left: auto;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: #64748b;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.rd-event-dismiss:hover { background: rgba(239, 68, 68, 0.10); color: #b91c1c; }
.rd-event-title-sm { font-size: 14px; font-weight: 700; margin: 2px 0 0; line-height: 1.3; color: var(--text-primary, #111827); }
.rd-event-title-zh-sm { font-size: 13px; color: var(--text-secondary, #6b7280); margin: 0; }
.rd-event-stats-sm { display: flex; gap: 10px; font-size: 11px; color: #9ca3af; margin-top: auto; }

/* Cover gradient fallback */
.rd-event-cover-gradient {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px;
}
.rd-event-cover-fail .rd-event-cover-gradient,
.rd-event-cover-fail { background: linear-gradient(135deg, #94a3b8, #64748b); }
.rd-evd-cover-fail img { display: none; }

@media (max-width: 640px) {
  .home-shell:has(.industry-summary),
  .home-shell:has(.industry-exams),
  .home-shell:has(.industry-subs) {
    padding: 84px 24px calc(96px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden;
  }
  .industry-summary {
    margin: 0 0 24px !important;
    padding: 10px 0 10px 18px !important;
  }
  .industry-summary h1 {
    font-size: 32px !important;
    line-height: 1.12 !important;
    word-break: keep-all;
  }
  .industry-exams h3,
  .industry-subs h3 {
    line-height: 1.35;
  }
  .bank-grid,
  .exam-grid,
  .sub-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .bank-card,
  .exam-card,
  .sub-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
    overflow-wrap: anywhere;
  }
  .bank-name,
  .exam-card-head strong,
  .sub-name {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .rd-event-card-headline { grid-template-columns: 1fr; }
  .rd-event-card-headline .rd-event-cover { aspect-ratio: 16/9; }
  .rd-event-cards-grid { grid-template-columns: 1fr; }
}

.me-settings-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.me-setting-row,
.me-setting-card {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 16px;
  padding: 14px;
}
.me-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.me-setting-card {
  display: grid;
  gap: 10px;
}
.me-setting-card p {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.me-setting-card code {
  background: rgba(51, 163, 21, 0.1);
  color: var(--brand-ink);
  border-radius: 8px;
  padding: 2px 8px;
}
.me-setting-card button,
.me-password-box button {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  text-align: left;
}
.me-setting-card button.danger {
  color: #b42318;
  border-color: rgba(180,35,24,.25);
}
.me-password-box {
  display: grid;
  gap: 10px;
}
.me-password-box input {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
}

/* ─── Event detail page (#/reading/event/<id>) ────────────────────────── */
.rd-evd-shell { padding-bottom: 60px; }

.rd-evd-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(99, 102, 241, 0.05));
  border: 1px solid rgba(0,0,0,0.06);
}
.rd-evd-cover {
  width: 100%;
  aspect-ratio: 16 / 7;
  background: #111;
  overflow: hidden;
}
.rd-evd-cover img { width: 100%; height: 100%; object-fit: cover; }
.rd-evd-headline { padding: 18px 22px 20px; }
.rd-evd-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 12px; }
.rd-evd-title-zh { font-size: 22px; font-weight: 800; margin: 4px 0; line-height: 1.3; color: var(--text-primary, #111827); }
.rd-evd-title-en { font-size: 15px; font-weight: 600; color: var(--text-secondary, #4b5563); margin: 0 0 10px; line-height: 1.4; }
.rd-evd-summary { margin: 0 0 8px; font-size: 14.5px; line-height: 1.65; color: var(--text-primary, #1f2937); }
.rd-evd-summary-en { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-secondary, #6b7280); font-style: italic; }

.rd-evd-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  margin: 8px 0 16px;
  scrollbar-width: none;
}
.rd-evd-tabs::-webkit-scrollbar { display: none; }
.rd-evd-tab {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.rd-evd-tab.active {
  color: #dc2626;
  border-bottom-color: #dc2626;
}
.rd-evd-tab em { font-style: normal; font-size: 11px; background: rgba(0,0,0,0.06); border-radius: 999px; padding: 1px 6px; margin-left: 4px; color: #4b5563; }
.rd-evd-tab.active em { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }

.rd-evd-tabpane { padding: 4px 4px 0; }
.rd-evd-placeholder { padding: 30px 12px; text-align: center; color: #9ca3af; font-size: 14px; }

.rd-evd-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.rd-evd-timeline::before {
  content: ""; position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: rgba(0,0,0,0.08);
}
.rd-evd-tl-item {
  position: relative;
  padding: 0 0 18px 26px;
  display: block;
}
.rd-evd-tl-dot {
  position: absolute;
  left: 0; top: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #6366f1;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.rd-tl-dot-update   { background: #ef4444; }
.rd-tl-dot-official { background: #2563eb; }
.rd-tl-dot-rescue   { background: #f59e0b; }
.rd-tl-dot-analysis { background: #8b5cf6; }
.rd-evd-tl-meta {
  font-size: 12px; color: #9ca3af;
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 4px;
}
.rd-evd-tl-kind {
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  color: #4b5563;
}
.rd-evd-tl-headline-zh { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary, #111827); line-height: 1.45; }
.rd-evd-tl-headline-en { margin: 2px 0 0; font-size: 13px; color: var(--text-secondary, #6b7280); line-height: 1.5; }

.rd-evd-article-list { display: flex; flex-direction: column; gap: 10px; }
.rd-evd-article-card {
  display: grid; grid-template-columns: 1fr 90px;
  background: var(--surface, #fff);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.rd-evd-article-card:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.rd-evd-article-card:has(.rd-evd-article-cover:empty) { grid-template-columns: 1fr; }
.rd-evd-article-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.rd-evd-article-level { font-size: 11px; color: #6b7280; }
.rd-evd-article-card h4 { font-size: 15px; font-weight: 700; margin: 2px 0; line-height: 1.35; color: var(--text-primary, #111827); }
.rd-evd-article-card p { font-size: 13px; color: var(--text-secondary, #6b7280); margin: 0; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rd-evd-article-meta { font-size: 11px; color: #9ca3af; margin-top: 2px; }
.rd-evd-article-cover { background: #111; overflow: hidden; }
.rd-evd-article-cover img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   In Use 教材 — A/B/C/D 分节 + 编号练习样式
   ============================================================ */

/* —— Presentation 分节 —— */
.vy-iu-section {
  background: var(--panel, #ffffff);
  border: 1.5px solid var(--line, #e5e7eb);
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 20px;
}
.vy-iu-section-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(15, 23, 42, 0.12);
}
.vy-iu-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand, #f59e0b);
  color: #fff;
  font-weight: 800;
  font-size: 24px;
  font-family: Georgia, "Times New Roman", serif;
  flex-shrink: 0;
}
.vy-iu-section-head h2 {
  margin: 4px 0 4px;
  font-size: 22px;
  line-height: 1.3;
}
.vy-iu-section-zh {
  margin: 0;
  color: var(--muted, #6b7280);
  font-size: 15px;
}
.vy-iu-explain {
  margin: 12px 0 6px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary, #111827);
}
.vy-iu-explain-zh {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted, #6b7280);
}

/* —— Mini-text 块 —— */
.vy-iu-mini {
  margin: 14px 0;
  background: #fffbeb;
  border-left: 4px solid #f59e0b;
  border-radius: 10px;
  padding: 14px 16px;
}
.vy-iu-mini p {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.65;
  color: #1f2937;
}
.vy-iu-mini .vy-line-zh {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
}

/* —— Labels 块（如 \"parts of a book\"）—— */
.vy-iu-labels {
  margin: 14px 0;
}
.vy-iu-labels h4 {
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--brand-ink, #92400e);
}
.vy-iu-label-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 16px;
}
.vy-iu-label-list li {
  font-size: 15px;
  line-height: 1.5;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(15, 23, 42, 0.08);
}
.vy-iu-label-list li strong { color: #111827; }
.vy-iu-label-list li span { color: var(--muted, #6b7280); margin-left: 4px; }

/* —— 词汇表（替代了 <ul>，更像教材左页）—— */
.vy-iu-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 4px;
  font-size: 16px;
}
.vy-iu-table thead th {
  text-align: left;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #6b7280);
  padding: 8px 10px;
  border-bottom: 1.5px solid var(--line, #e5e7eb);
  font-weight: 600;
}
.vy-iu-table tbody tr {
  border-bottom: 1px dashed rgba(15, 23, 42, 0.08);
}
.vy-iu-table tbody tr:last-child { border-bottom: none; }
.vy-iu-table td {
  padding: 12px 10px;
  vertical-align: top;
  line-height: 1.55;
}
.vy-iu-word {
  width: 28%;
  white-space: normal;
}
.vy-iu-word strong {
  font-size: 17px;
  color: #111827;
  display: inline-block;
  margin-left: 4px;
  margin-right: 6px;
}
.vy-iu-ipa {
  display: block;
  font-size: 13px;
  color: var(--muted, #6b7280);
  margin-top: 2px;
  margin-left: 30px;
}
.vy-iu-zh {
  width: 22%;
  font-size: 15px;
  color: var(--brand-ink, #92400e);
}
.vy-iu-eg {
  width: 50%;
}
.vy-iu-eg-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: start;
  padding: 4px 0;
}
.vy-iu-eg-row span {
  display: block;
  font-size: 15px;
  line-height: 1.55;
  color: #1f2937;
}
.vy-iu-eg-row em {
  display: block;
  grid-column: 2;            /* sit under the English line, not in the 28px play-button column */
  font-style: normal;
  font-size: 13px;
  color: var(--muted, #6b7280);
  margin-top: 2px;
}
.vy-iu-note {
  margin: 6px 0 0;
  font-size: 13px;
  color: #b45309;
  background: #fef3c7;
  padding: 6px 10px;
  border-radius: 8px;
  display: inline-block;
}

/* —— 练习区 —— */
.vy-iu-ex {
  border: 1.5px solid var(--line, #e5e7eb);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
  background: #fafaf9;
}
.vy-iu-ex-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}
.vy-iu-ex-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  background: #1e293b;
  color: #fef3c7;
  font-weight: 700;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  flex-shrink: 0;
}
.vy-iu-ex-head h3 {
  margin: 4px 0 2px;
  font-size: 18px;
  line-height: 1.35;
}
.vy-iu-ex-inst {
  margin: 4px 0 2px;
  font-size: 15px;
  color: #374151;
  line-height: 1.5;
}
.vy-iu-ex-head .vy-line-zh {
  margin: 0;
  font-size: 13px;
  color: var(--muted, #6b7280);
}

/* —— 练习：题目列表 —— */
.vy-iu-ex-items {
  margin: 8px 0 4px;
  padding-left: 24px;
  font-size: 16px;
  line-height: 1.9;
  color: #1f2937;
}
.vy-iu-ex-items li {
  padding: 2px 0;
}
.vy-iu-ex-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 6px;
}
.vy-iu-opt {
  display: inline-block;
  font-size: 14px;
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  padding: 4px 10px;
  color: #374151;
}

/* —— 配对题双列 —— */
.vy-iu-ex-pairs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 8px 0 4px;
}
.vy-iu-ex-col h5 {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #6b7280);
}
.vy-iu-ex-col ol {
  margin: 0;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.8;
  color: #1f2937;
}
.vy-iu-ex-col li { padding: 2px 0; }

/* —— 分类题 —— */
.vy-iu-ex-categorize {
  font-size: 15px;
  line-height: 1.7;
  color: #1f2937;
}
.vy-iu-ex-categorize p { margin: 4px 0; }

/* —— 答案折叠区 —— */
.vy-iu-ex-answers {
  margin-top: 10px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 10px;
  padding: 8px 14px;
}
.vy-iu-ex-answers.hidden { display: none; }
.vy-iu-ex-answers summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #4aa906;
  padding: 4px 0;
}
.vy-iu-ex-answers ul,
.vy-iu-ex-answers ol {
  margin: 6px 0 4px;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.8;
  color: #418f09;
}

/* —— 按钮：查看答案 / 隐藏答案 —— */
.vy-iu-ex-head button.btn-ghost {
  margin-left: auto;
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 8px;
}

/* —— 互动答题 —— */
.vy-iu-input {
  font-size: 15px;
  padding: 8px 12px;
  border: 1.5px solid var(--line, #e5e7eb);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  min-width: 160px;
}
.vy-iu-input:focus {
  outline: none;
  border-color: var(--brand, #f59e0b);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
.vy-iu-fill-row,
.vy-iu-match-row,
.vy-iu-cat-row,
.vy-iu-tf-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  flex-wrap: wrap;
}
.vy-iu-fill-q { flex: 1 1 60%; font-size: 16px; line-height: 1.55; color: #1f2937; min-width: 240px; }
.vy-iu-fill-row input[type=text].vy-iu-input { flex: 1 1 200px; min-width: 180px; }
.vy-iu-match-left { flex: 1 1 50%; font-size: 16px; min-width: 200px; }
.vy-iu-cat-item { flex: 1 1 40%; font-size: 16px; min-width: 160px; font-weight: 600; }
.vy-iu-tf-q { flex: 1 1 60%; font-size: 16px; min-width: 240px; }

.vy-iu-mc-row {
  padding: 12px 0;
  border-bottom: 1px dashed rgba(15, 23, 42, 0.08);
}
.vy-iu-mc-row:last-child { border-bottom: none; }
.vy-iu-mc-q { margin: 0 0 8px; font-size: 16px; line-height: 1.5; color: #1f2937; }
.vy-iu-mc-opts { display: flex; flex-direction: column; gap: 6px; }
.vy-iu-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1.4;
}
.vy-iu-radio:hover { background: rgba(245, 158, 11, 0.08); }
.vy-iu-radio input[type=radio] { margin: 0; }

.vy-iu-mark {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  min-width: 32px;
  padding: 2px 6px;
  border-radius: 6px;
}
.vy-iu-mark.ok { color: #4aa906; background: #d1fae5; }
.vy-iu-mark.no { color: #b91c1c; background: #fee2e2; }

.vy-iu-fill-row.ok input,
.vy-iu-match-row.ok select,
.vy-iu-cat-row.ok select {
  border-color: #77e814;
  background: #ecfdf5;
}
.vy-iu-fill-row.no input,
.vy-iu-match-row.no select,
.vy-iu-cat-row.no select {
  border-color: #ef4444;
  background: #fef2f2;
}

.vy-iu-ex-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(15, 23, 42, 0.1);
  flex-wrap: wrap;
}
.vy-iu-ex-score {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-ink, #92400e);
}
.vy-iu-ex-wordbox {
  margin: 6px 0 12px;
  padding: 8px 12px;
  background: #fffbeb;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #78350f;
}

/* —— 小屏幕：表格转列 —— */
@media (max-width: 720px) {
  .vy-iu-table thead { display: none; }
  .vy-iu-table tbody tr {
    display: block;
    padding: 12px 6px;
    border-bottom: 1px dashed rgba(15, 23, 42, 0.12);
  }
  .vy-iu-table td {
    display: block;
    width: 100% !important;
    padding: 4px 2px;
  }
  .vy-iu-zh { font-size: 14px; color: var(--brand-ink, #92400e); }
  .vy-iu-ipa { margin-left: 0; }
  .vy-iu-ex-pairs { grid-template-columns: 1fr; gap: 12px; }
  .vy-iu-section { padding: 18px 16px; }
  .vy-iu-letter { width: 36px; height: 36px; font-size: 20px; }
  .vy-iu-section-head h2 { font-size: 19px; }
}

/* =========================================================================
   Business Vocabulary In Use — mobile-first per-reading flow (bvu-* prefix)
   Goals: large readable type, comfortable line-height, one screen one focus.
   ========================================================================= */
.bvu-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 18px 120px;
  color: #0f172a;
  font-size: 17px;
  line-height: 1.7;
}
.bvu-screen { min-height: 100vh; }
.bvu-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 10px;
  flex-wrap: wrap;
}
.bvu-top-title { flex: 1; min-width: 0; }
.bvu-top-title strong { display: block; font-size: 16px; line-height: 1.35; }
.bvu-top-sub { display: block; font-size: 12px; color: #64748b; margin-top: 2px; }
.bvu-back, .bvu-step-pill {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
.bvu-back:hover { background: #e2e8f0; }
.bvu-step-pill { background: #eeffec; border-color: #d1fecf; color: #0c4a6e; }
.bvu-progress {
  height: 4px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  margin: 4px 0 18px;
}
.bvu-progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0ea5e9, #8b5cf6);
  border-radius: 999px;
  transition: width .35s ease;
}

/* Hero on book index */
.bvu-hero {
  background: linear-gradient(180deg, #f0f9ff, #fff);
  border: 1px solid #e0f2fe;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.bvu-hero-line { font-size: 14px; color: #0c4a6e; margin: 0 0 6px; line-height: 1.55; }
.bvu-hero-line.muted { color: #64748b; }

/* Unit cards on book index */
.bvu-units {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.bvu-unit-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 14px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bvu-unit-card:hover:not([disabled]) {
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
  transform: translateY(-1px);
}
.bvu-unit-card.is-pending { opacity: .55; cursor: not-allowed; }
/* Mastered unit (course exercises ≥ 80%): fruit-green wash + green ✓ */
.bvu-unit-card.is-done {
  border-color: #7cc91e;
  background: linear-gradient(0deg, rgba(124, 201, 30, 0.12), rgba(124, 201, 30, 0.12)), #fff;
}
.bvu-unit-card.is-done .bvu-unit-num { color: #4d9400; }
.bvu-unit-card.is-done .bvu-unit-meta { color: #4d9400; font-weight: 600; }
.bvu-unit-card.is-done .bvu-bar > span { background: #7cc91e; }
/* Locked unit (previous unit not yet mastered): dimmed + not interactive */
.bvu-unit-card.is-locked { opacity: .5; cursor: not-allowed; background: #f8fafc; }
.bvu-unit-card.is-locked .bvu-unit-num { color: #94a3b8; }
.bvu-unit-num { font-weight: 700; font-size: 20px; color: #0ea5e9; }
.bvu-unit-main { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.bvu-unit-en { font-size: 16px; font-weight: 600; line-height: 1.3; }
.bvu-unit-zh { font-size: 13px; color: #64748b; line-height: 1.4; }
.bvu-unit-meta { font-size: 12px; color: #64748b; text-align: right; min-width: 80px; }
.bvu-bar { display: block; height: 3px; background: #e2e8f0; border-radius: 999px; margin-top: 6px; overflow: hidden; }
.bvu-bar > span { display: block; height: 100%; background: #0ea5e9; }

/* Reading screen */
.bvu-section-tag {
  display: inline-block;
  background: #eeffec;
  border: 1px solid #d1fecf;
  color: #0c4a6e;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .04em;
  margin-bottom: 10px;
}
.bvu-section-h { font-size: 22px; line-height: 1.35; margin: 0 0 14px; }
.bvu-section-img { margin: 0 0 16px; position: relative; }
.bvu-section-img img { width: 100%; max-height: 420px; object-fit: contain; border-radius: 14px; display: block; background: #f4f6f9; }
.bvu-section-img img.bvu-zoomable { cursor: zoom-in; }
.bvu-section-img figcaption { font-size: 11px; color: #9aa3ad; margin-top: 5px; text-align: right; }
.bvu-zoom-hint { position: absolute; top: 10px; right: 10px; background: rgba(20,28,32,.62); color: #fff; font-size: 11px;
  font-weight: 700; padding: 4px 9px; border-radius: 999px; pointer-events: none; backdrop-filter: blur(2px); }

/* fullscreen pinch-zoom lightbox */
.bvu-lightbox { position: fixed; inset: 0; z-index: 10300; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(8,12,14,.94); opacity: 0; transition: opacity .2s ease; touch-action: none; }
.bvu-lightbox.on { opacity: 1; }
.bvu-lb-stage { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bvu-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; will-change: transform; user-select: none; -webkit-user-drag: none; touch-action: none; cursor: grab; }
.bvu-lb-close { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 14px; width: 42px; height: 42px; border: 0;
  border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 19px; cursor: pointer; z-index: 2; }
.bvu-lb-cap { color: rgba(255,255,255,.82); font-size: 13px; padding: 8px 16px 2px; text-align: center; }
.bvu-lb-tip { color: rgba(255,255,255,.5); font-size: 12px; padding: 4px 0 calc(16px + env(safe-area-inset-bottom)); }
@media (min-width: 1025px) {
  .bvu-section-img { float: right; width: 360px; margin: 4px 0 14px 20px; }
}

/* —— Picture-dictionary gallery (labelled photos for picturable target words) —— */
.bvu-picdict { clear: both; margin: 18px 0 8px; padding: 14px; background: #f6f9fc; border: 1px solid #e3edf6; border-radius: 16px; }
.bvu-picdict-title { font-size: 13px; font-weight: 700; color: #2563eb; margin-bottom: 12px; }
.bvu-picdict-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.bvu-picdict-item { margin: 0; text-align: center; }
.bvu-picdict-imgbtn { display: block; width: 100%; padding: 0; border: none; background: none; cursor: pointer; border-radius: 12px; }
.bvu-picdict-imgbtn img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; background: #eef1f4; box-shadow: 0 1px 4px rgba(15,23,42,.08); transition: transform .12s ease, box-shadow .12s ease; }
.bvu-picdict-imgbtn:hover img { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(15,23,42,.16); }
.bvu-picdict-item figcaption { margin-top: 6px; display: flex; flex-direction: column; gap: 1px; }
.bvu-picdict-item figcaption strong { font-size: 14px; color: #0f172a; }
.bvu-picdict-zh { font-size: 12px; color: #475569; }
.bvu-picdict-credit { font-size: 10px; color: #aab3bd; }

/* —— Dictionary-popup photo —— */
.bvu-dict-pop-img { margin: 4px 0 10px; }
.bvu-dict-pop-img img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 12px; display: block; background: #eef1f4; }
.bvu-dict-pop-img figcaption { font-size: 10px; color: #aab3bd; margin-top: 4px; text-align: right; }

/* —— Exercise right/wrong row states + pass/fail banner —— */
.bvu-ex-card .row-correct { background: #f0fdf4; border-radius: 10px; }
.bvu-ex-card .row-wrong { background: #fef2f2; border-radius: 10px; }
.bvu-ex-card .bvu-match-mark.is-correct { color: #16a34a; font-weight: 700; }
.bvu-ex-card .bvu-match-mark.is-wrong { color: #dc2626; font-weight: 700; }
.bvu-ex-total.is-pass { background: #dcfce7; border-color: #86efac; color: #166534; }
.bvu-ex-total.is-fail { background: #fee2e2; border-color: #fca5a5; color: #991b1b; text-align: left; line-height: 1.7; }
.bvu-passage {
  font-size: 18px;
  line-height: 1.85;
  color: #1e293b;
  margin: 0 0 16px;
  /* Improve CJK + Latin mixed text readability */
  word-spacing: .02em;
}
.bvu-target {
  background: linear-gradient(transparent 55%, #fef08a 55%);
  font-weight: 700;
  color: #0f172a;
  padding: 0 1px;
  border-radius: 2px;
}
.bvu-zh {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  background: #f8fafc;
  margin: 0 0 14px;
}
.bvu-zh summary { cursor: pointer; font-size: 14px; color: #475569; }
.bvu-zh p { font-size: 16px; line-height: 1.8; color: #334155; margin-top: 8px; }
.bvu-meta-row { font-size: 13px; color: #64748b; }

/* === Phrasal-Verbs rich layouts (table / dialogue / bullets / extracts) === */

/* When a section has a wide block (table/dialogue/…), the image must NOT float
   right — that squeezes the table. Override the float and use a two-column
   intro band (passage left, image right) above the full-width content. */
.bvu-reading--rich .bvu-section-img { float: none; width: auto; max-width: 100%; margin: 0; }
.bvu-intro-band { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 0 18px; }
.bvu-intro-text { min-width: 0; }
.bvu-intro-text .bvu-passage { margin: 0; }
.bvu-intro-media { min-width: 0; }
.bvu-intro-media .bvu-section-img { margin: 0; }
.bvu-intro-media .bvu-section-img img { max-height: 440px; object-fit: contain; }
@media (min-width: 1025px) {
  .bvu-intro-band { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: start; }
}

/* Short helper passage that sometimes sits below a table */
.bvu-passage-sm { font-size: 15px; line-height: 1.75; color: #475569; margin: 8px 0 14px; }

/* Table — matches the green-header look of the Cambridge In Use book */
.bvu-table-wrap { margin: 0 0 18px; overflow-x: auto; border-radius: 12px; border: 1px solid #d4e3da; background: #fff; }
.bvu-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; color: #0f172a; }
.bvu-table thead th {
  background: #0f6b3e; color: #fff; text-align: left; padding: 10px 14px; font-weight: 600;
  border-right: 1px solid rgba(255,255,255,.18);
}
.bvu-table thead th:last-child { border-right: none; }
.bvu-th-zh { font-weight: 400; color: #d1f0dc; font-size: 12px; }
.bvu-table tbody td { padding: 10px 14px; border-top: 1px solid #e2e8f0; vertical-align: top; }
.bvu-table tbody tr:nth-child(odd) td { background: #f7fbf8; }
.bvu-table tbody tr:nth-child(even) td { background: #fff; }
.bvu-td-head { font-weight: 600; color: #0f6b3e; white-space: nowrap; }
@media (max-width: 640px) {
  .bvu-table { font-size: 14px; }
  .bvu-table thead th, .bvu-table tbody td { padding: 8px 10px; }
  .bvu-td-head { white-space: normal; }
}

/* Dialogue — speech-bubble feel */
.bvu-dialogue { margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.bvu-dlg-row { display: grid; grid-template-columns: 80px 1fr; gap: 10px; align-items: start; }
.bvu-dlg-speaker {
  font-weight: 600; color: #0f6b3e; padding: 8px 10px; background: #e7f5ec;
  border-radius: 8px; font-size: 14px; text-align: center;
}
.bvu-dlg-bubble {
  background: #f1f5f9; padding: 10px 14px; border-radius: 12px;
  font-size: 16px; line-height: 1.65; color: #0f172a;
}
.bvu-fnotes { margin: 8px 0 0; padding: 0 0 0 4px; list-style: none; font-size: 13px; color: #64748b; line-height: 1.55; }
.bvu-fnotes sup { font-weight: 700; color: #0f6b3e; margin-right: 3px; }
@media (max-width: 640px) {
  .bvu-dlg-row { grid-template-columns: 64px 1fr; gap: 8px; }
  .bvu-dlg-speaker { font-size: 13px; padding: 6px 8px; }
}

/* Bullets — sub-headings + nested examples */
.bvu-bullets { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 12px; }
.bvu-bullets > li {
  background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #0f6b3e;
  border-radius: 10px; padding: 10px 14px;
}
.bvu-bullet-head { font-weight: 600; color: #0f172a; font-size: 15.5px; margin-bottom: 4px; }
.bvu-bullet-zh { color: #64748b; font-weight: 400; font-size: 14px; }
.bvu-bullet-eg { margin: 4px 0 0; padding: 0 0 0 18px; color: #334155; font-size: 15px; line-height: 1.7; }
.bvu-bullet-eg li { margin: 2px 0; }

/* Extracts — colourful little cards (small ads / headlines / dream extracts) */
.bvu-extracts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 12px; margin: 0 0 18px;
}
.bvu-table-wrap, .bvu-dialogue, .bvu-bullets, .bvu-extracts { max-width: 100%; box-sizing: border-box; }
.bvu-dlg-bubble, .bvu-bullet-eg, .bvu-extract-text, .bvu-extract-headline { word-wrap: break-word; overflow-wrap: anywhere; }
.bvu-extract { padding: 12px 14px; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; }
.bvu-extract-label { font-size: 12px; color: #64748b; margin-bottom: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.bvu-extract-headline { font-weight: 700; font-size: 15px; line-height: 1.45; color: #0f172a; }
.bvu-extract-text { font-size: 15px; line-height: 1.65; color: #1f2937; }
.bvu-extract-zh { font-size: 13px; color: #64748b; margin-top: 6px; }
.bvu-extract-yellow { background: #fffbe6; border-color: #f7e3a3; }
.bvu-extract-blue   { background: #ecf3fc; border-color: #bcd2ee; }
.bvu-extract-pink   { background: #fdecf0; border-color: #f3c2cd; }
.bvu-extract-green  { background: #eaf6ee; border-color: #b9dec4; }
.bvu-extract-orange { background: #fdf0e2; border-color: #f1c89a; }

/* Cards — the same phrasal-verb data shown as a card grid instead of a table */
.bvu-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px; margin: 0 0 18px;
}
.bvu-card {
  background: #fff; border: 1px solid #e2e8f0; border-top: 3px solid #0f6b3e;
  border-radius: 12px; padding: 12px 14px; box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.bvu-card-term { font-weight: 700; color: #0f6b3e; font-size: 16px; margin-bottom: 6px; line-height: 1.35; }
.bvu-card-line { font-size: 14.5px; line-height: 1.6; color: #1f2937; margin: 3px 0; overflow-wrap: anywhere; }
.bvu-card-label { display: inline-block; font-size: 11px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .03em; margin-right: 6px; }

/* Image grid — captioned pictures, each illustrating a phrasal verb in a sentence */
.bvu-imagegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px; margin: 0 0 18px;
}
.bvu-ig-item { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.bvu-ig-item img { width: 100%; height: 160px; object-fit: cover; border-radius: 12px; display: block; background: #f0f2f5; }
.bvu-ig-item figcaption { display: flex; flex-direction: column; gap: 3px; }
.bvu-ig-sentence { font-size: 15px; line-height: 1.6; color: #0f172a; overflow-wrap: anywhere; }
.bvu-ig-cap { font-size: 11px; color: #9aa3ad; }

/* Sticky action bar */
.bvu-actions {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid #e2e8f0;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  z-index: 50;
}
.bvu-actions .bvu-btn-primary { flex: 1; }
.bvu-btn-primary, .bvu-btn-ghost {
  height: 48px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0 18px;
}
.bvu-btn-primary {
  background: linear-gradient(180deg, #0ea5e9, #0284c7);
  color: #fff;
  border-color: #0284c7;
  box-shadow: 0 6px 16px rgba(14, 165, 233, .25);
}
.bvu-btn-primary:hover { filter: brightness(1.05); }
.bvu-btn-ghost {
  background: #fff;
  color: #0f172a;
  border-color: #e2e8f0;
}
.bvu-btn-ghost:hover { background: #f8fafc; }

/* Quiz */
.bvu-quiz-intro {
  font-size: 14px;
  color: #475569;
  background: #f8fafc;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 14px;
}
.bvu-quiz-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
.bvu-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px;
  cursor: pointer;
  user-select: none;
  min-height: 96px;
  display: grid;
  align-items: center;
}
.bvu-card-front, .bvu-card-back { display: flex; flex-direction: column; gap: 6px; }
.bvu-card-hint { font-size: 12px; color: #64748b; letter-spacing: .04em; }
.bvu-card-prompt { font-size: 22px; line-height: 1.3; color: #0f172a; }
.bvu-card-ipa { font-size: 13px; color: #64748b; }
.bvu-card-tap { font-size: 12px; color: #94a3b8; align-self: flex-end; margin-top: 6px; }
.bvu-card-answer { font-size: 20px; color: #0c4a6e; line-height: 1.35; }
.bvu-card-ex { font-size: 15px; color: #334155; margin: 6px 0 0; }
.bvu-card-ex-zh { font-size: 13px; color: #64748b; margin: 0; }
.hidden { display: none !important; }

/* Sentence-making */
.bvu-sentence-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.bvu-sentence-card > header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.bvu-sentence-card > header strong { font-size: 18px; }
.bvu-sentence-hint { font-size: 13px; color: #64748b; margin: 0 0 8px; }
.bvu-sentence-input {
  width: 100%;
  font-size: 16px;
  line-height: 1.6;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  resize: vertical;
  font-family: inherit;
  background: #f8fafc;
}
.bvu-sentence-input:focus { outline: none; border-color: #0ea5e9; background: #fff; box-shadow: 0 0 0 3px #e0f2fe; }

/* Exercises */
.bvu-ex-section { display: grid; gap: 14px; }
.bvu-ex-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
}
.bvu-ex-head { display: grid; grid-template-columns: 48px 1fr; gap: 12px; margin-bottom: 10px; }
.bvu-ex-num { font-weight: 700; color: #0ea5e9; font-size: 18px; }
.bvu-ex-head h3 { font-size: 15px; margin: 0; line-height: 1.45; }
.bvu-ex-zh { font-size: 13px; color: #64748b; margin: 4px 0 0; }
.bvu-ex-wordbox { font-size: 14px; background: #f1f5f9; border-radius: 8px; padding: 8px 12px; }
.bvu-ex-items, .bvu-ex-answers { padding-left: 22px; margin: 8px 0; font-size: 15px; line-height: 1.7; }
.bvu-ex-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bvu-ex-cols h5 { font-size: 12px; color: #64748b; margin: 0 0 4px; letter-spacing: .04em; }
.bvu-ex-cols ol { padding-left: 22px; font-size: 14px; line-height: 1.7; margin: 0; }
.bvu-ex-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.bvu-ex-opt { background: #f1f5f9; border-radius: 6px; padding: 3px 8px; font-size: 13px; color: #334155; }
.bvu-reveal-btn { height: 36px; padding: 0 14px; font-size: 14px; margin-top: 8px; }
.bvu-line-zh { color: #64748b; font-size: 14px; }

/* Empty / Done */
.bvu-empty, .bvu-done {
  text-align: center;
  padding: 40px 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}
.bvu-done-emoji { font-size: 56px; }
.bvu-done h1 { font-size: 26px; margin: 6px 0 8px; }
.bvu-done .muted { color: #64748b; font-size: 14px; margin: 6px 0 18px; }
.bvu-done-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Mobile tuning */
@media (max-width: 480px) {
  .bvu-shell { padding: 14px 14px 130px; font-size: 17px; }
  .bvu-section-h { font-size: 20px; }
  .bvu-passage { font-size: 17.5px; line-height: 1.85; }
  .bvu-card-prompt { font-size: 20px; }
  .bvu-card-answer { font-size: 18px; }
  .bvu-ex-cols { grid-template-columns: 1fr; }
  .bvu-unit-card { grid-template-columns: 38px 1fr; }
  .bvu-unit-meta { grid-column: 1 / -1; text-align: left; padding-top: 4px; }
}

/* === Business In Use — listen-and-choose dictation === */
.bvu-dict-section { display: grid; gap: 14px; }
.bvu-dict-list { display: grid; gap: 14px; }
.bvu-dict-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
}
.bvu-dict-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.bvu-dict-num { font-size: 12px; color: #64748b; min-width: 38px; }
.bvu-dict-play, .bvu-dict-slow {
  background: #0ea5e9; color: #fff; border: none;
  border-radius: 999px; padding: 8px 14px; font-size: 15px;
  cursor: pointer; font-weight: 600;
}
.bvu-dict-slow { background: #64748b; }
.bvu-dict-hint { font-size: 13px; color: #64748b; }
.bvu-dict-choices { display: grid; gap: 8px; }
.bvu-dict-choice {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  color: #0f172a;
  transition: border-color .15s ease, background .15s ease;
}
.bvu-dict-choice:hover { border-color: #94a3b8; background: #f8fafc; }
.bvu-dict-choice.picked { border-color: #0ea5e9; background: #e0f2fe; font-weight: 600; }
.bvu-dict-item.locked .bvu-dict-choice { cursor: not-allowed; }
.bvu-dict-choice.is-correct {
  border-color: #16a34a; background: #f0fdf4; color: #166534; font-weight: 700;
}
.bvu-dict-choice.is-correct::after { content: "  ✓"; }
.bvu-dict-choice.is-wrong {
  border-color: #dc2626; background: #fef2f2; color: #991b1b; font-weight: 700;
}
.bvu-dict-choice.is-wrong::after { content: "  ✗"; }
.bvu-dict-reveal {
  margin-top: 10px; padding: 10px 12px;
  background: #f8fafc; border-radius: 10px; font-size: 14px;
}
.bvu-dict-word { font-size: 18px; margin: 0 0 4px; font-weight: 700; }
.bvu-dict-meaning { color: #0c4a6e; margin: 4px 0 6px; font-weight: 600; }
.bvu-dict-ex { font-size: 14px; color: #334155; margin: 4px 0; }
.bvu-dict-ex-zh { font-size: 13px; color: #64748b; margin: 0; }
.bvu-dict-score, .bvu-ex-total {
  background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 12px;
  padding: 12px 16px; color: #0c4a6e; font-size: 15px; line-height: 1.6;
  margin: 8px 0;
}
.bvu-ex-total { background: #fef3c7; border-color: #fde68a; color: #854d0e; font-size: 16px; text-align: center; }

/* === Dictionary popup (tap a target word) === */
.bvu-target {
  background: linear-gradient(transparent 55%, #fef08a 55%);
  font-weight: 700;
  color: #0f172a;
  padding: 0 2px;
  border: none;
  font: inherit;
  cursor: pointer;
  border-radius: 2px;
  transition: background .15s ease;
}
.bvu-target:hover { background: linear-gradient(transparent 0%, #fde047 0%); }
.bvu-dict-pop-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .55);
  z-index: 200; display: flex; align-items: flex-end; justify-content: center;
  padding: 16px;
  backdrop-filter: blur(2px);
}
@media (min-width: 1025px) { .bvu-dict-pop-backdrop { align-items: center; } }
.bvu-dict-pop {
  background: #fff; border-radius: 18px; padding: 18px;
  max-width: 560px; width: 100%; max-height: 80vh; overflow-y: auto;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
}
.bvu-dict-pop-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.bvu-dict-pop-title strong { font-size: 22px; }
.bvu-dict-pop-tools { display: flex; gap: 6px; }
.bvu-dict-pop-btn {
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 8px 12px; font-size: 16px; cursor: pointer; line-height: 1;
}
.bvu-dict-pop-btn:hover { background: #e2e8f0; }
.bvu-dict-pop-mean { font-size: 17px; font-weight: 700; color: #0c4a6e; margin: 6px 0; }
.bvu-dict-pop-ex { font-size: 15px; color: #334155; margin: 6px 0 2px; }
.bvu-dict-pop-ex-zh { font-size: 13px; color: #64748b; margin: 0 0 12px; }
.bvu-dict-pop-label { display: block; font-size: 14px; color: #475569; margin: 12px 0 6px; }
.bvu-dict-pop-ta {
  width: 100%; min-height: 80px; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 10px 12px; font-size: 16px; line-height: 1.6; resize: vertical;
  font-family: inherit; background: #f8fafc;
}
.bvu-dict-pop-ta:focus { outline: none; border-color: #0ea5e9; background: #fff; box-shadow: 0 0 0 3px #e0f2fe; }
.bvu-dict-pop-actions { display: flex; gap: 10px; margin-top: 12px; justify-content: flex-end; }
.bvu-dict-pop-actions .bvu-btn-primary, .bvu-dict-pop-actions .bvu-btn-ghost { height: 40px; font-size: 15px; padding: 0 14px; }

/* —— 词典弹窗 · 语音/打字 造句（与背单词页一致） —— */
.bvu-write-toggle { display: flex; gap: 12px; justify-content: center; margin: 4px 0 8px; }
.bvu-mode-btn {
  flex: 1 1 0; max-width: 150px; min-height: 48px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  border: 2px solid #e6e8eb; border-radius: 13px; background: #fff; color: #9aa0a6;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s ease;
}
.bvu-mode-btn span { font-size: 13px; }
.bvu-mode-btn svg { width: 22px; height: 22px; }
/* 互译/造句留存项：互译显示 原句中文/我的/标准；造句显示 我造的/AI修改 */
.bvu-sent-row.tr { grid-template-columns: minmax(0,1fr) 22px; align-items: center; }
.bvu-sent-body { min-width: 0; }
.bvu-sent-body .bvu-sent-zh { margin: 0 0 3px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.bvu-sent-body .bvu-sent-my { margin: 0; font-size: 15px; color: var(--ink); line-height: 1.5; }
.bvu-sent-body .bvu-sent-ref { margin: 3px 0 0; font-size: 14px; color: #46503d; line-height: 1.5; }
.bvu-sent-body .bvu-sent-fb { margin: 6px 0 0; font-size: 13px; color: #5a8a3a; line-height: 1.5; background: color-mix(in srgb, var(--brand) 7%, #fff); border-radius: 8px; padding: 6px 9px; }
.bvu-sent-body .bvu-sent-fb.loading { color: #9aa0a6; background: #f4f6f8; }
.bvu-sent-body b { color: var(--brand); font-weight: 700; }
.bvu-write-text { display: flex; gap: 8px; }
.bvu-write-text .bvu-task-text { flex: 1 1 auto; }
.bvu-write-text .bvu-btn-primary { flex: 0 0 auto; height: 40px; padding: 0 16px; font-size: 14px; }

/* 中英互译题（弹窗里 1 题，难度跟随首页挑战） */
.bvu-dict-task { margin: 14px 0 4px; padding: 12px 13px; border-radius: 14px;
  background: color-mix(in srgb, var(--brand) 4%, #fff); border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent); }
.bvu-task-kicker { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, #fff); border-radius: 6px; padding: 2px 8px; margin-bottom: 7px; }
.bvu-task-zh { margin: 0 0 9px; font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.bvu-task-row { display: flex; align-items: center; gap: 8px; }
.bvu-task-mic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; border: 2px solid var(--brand);
  background: #fff; color: var(--brand); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.bvu-task-mic svg { width: 20px; height: 20px; }
.bvu-task-mic.rec-active { border-color: #e2553e; color: #e2553e; background: #fff3f0; animation: bvuRecPulse 1.2s ease-in-out infinite; }
.bvu-task-text { flex: 1 1 auto; min-width: 0; height: 40px; border: 1px solid #e2e8f0; border-radius: 11px; padding: 0 12px; font-size: 15px; background: #fff; }
.bvu-task-text:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
.bvu-task-go { flex: 0 0 auto; height: 40px; padding: 0 16px; border: none; border-radius: 11px; background: var(--brand); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.bvu-task-ref { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.bvu-task-ref b { color: var(--brand); }
/* AI 反馈卡（互译 + 造句共用） */
.bvu-fb { margin: 10px 0 2px; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.55; }
.bvu-fb.loading { background: #f4f6f8; color: #8a9099; }
.bvu-fb.ok { background: color-mix(in srgb, var(--brand) 8%, #fff); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.bvu-fb.bad { background: #fff7ed; border: 1px solid #fcd9a8; }
.bvu-fb-head { margin: 0 0 3px; font-weight: 800; }
.bvu-fb-notes { margin: 0; color: var(--ink); }
.bvu-fb-polished { margin: 5px 0 0; color: var(--ink); }
.bvu-fb-polished b { color: var(--brand); }
.bvu-mode-btn.on { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, #fff); box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 18%, transparent); }
.bvu-mode-btn.mic.rec-active { border-color: #e2553e; color: #e2553e; background: #fff3f0; box-shadow: 0 0 0 4px rgba(226,85,62,.14); animation: bvuRecPulse 1.2s ease-in-out infinite; }
.bvu-mode-btn.mic.rec-busy { border-color: #f59e0b; color: #b8770a; background: #fffbeb; }
@keyframes bvuRecPulse { 0%,100% { box-shadow: 0 0 0 4px rgba(226,85,62,.14); } 50% { box-shadow: 0 0 0 8px rgba(226,85,62,.05); } }
.bvu-write-hint { text-align: center; font-size: 13.5px; color: #8a9099; margin: 6px 0 2px; }
.bvu-write-hint strong { color: var(--brand); }
.bvu-write-textsave { display: flex; justify-content: flex-end; margin-top: 10px; }
.bvu-write-textsave .bvu-btn-primary { height: 40px; font-size: 15px; padding: 0 18px; }
.bvu-sent-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.bvu-sent-row {
  display: grid; grid-template-columns: 22px 1fr 22px; align-items: start; gap: 8px;
  background: color-mix(in srgb, var(--brand) 5%, #fff); border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent);
  border-radius: 12px; padding: 9px 11px;
}
.bvu-sent-num { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.bvu-sent-row p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.bvu-sent-del { border: none; background: transparent; color: #b0b6bd; font-size: 15px; cursor: pointer; line-height: 1; padding: 2px; }
.bvu-sent-del:hover { color: #e2553e; }

/* === Interactive exercise inputs === */
.bvu-input {
  border: 1.5px solid #cbd5e1; border-radius: 8px;
  padding: 6px 10px; font-size: 15px; background: #fff;
  font-family: inherit; line-height: 1.4;
}
.bvu-input:focus { outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 3px #e0f2fe; }
.bvu-input:disabled { background: #f8fafc; color: #475569; }

.bvu-match-bank {
  background: #f1f5f9; border: 1px dashed #cbd5e1; border-radius: 10px;
  padding: 10px 12px; font-size: 13px; margin: 6px 0 12px;
}
.bvu-bank-label { color: #64748b; }
.bvu-bank-chip {
  display: inline-block; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 6px; padding: 3px 8px; margin: 3px;
  font-size: 13px; color: #334155;
}
.bvu-match-rows, .bvu-gap-rows, .bvu-cat-rows, .bvu-tf-rows, .bvu-choose-rows, .bvu-write-rows {
  list-style: none; padding: 0; margin: 0; display: grid; gap: 14px;
}
.bvu-match-row, .bvu-cat-row {
  display: grid; gap: 8px;
  border-bottom: 1px dashed #e2e8f0; padding-bottom: 12px;
}
.bvu-match-row:last-child, .bvu-cat-row:last-child { border-bottom: none; padding-bottom: 0; }
.bvu-match-q, .bvu-tf-q, .bvu-write-q { font-size: 15px; line-height: 1.55; margin: 0; }
.bvu-match-select, .bvu-cat-select { width: 100%; min-height: 40px; }
.bvu-cat-row { grid-template-columns: 1fr 140px auto; align-items: center; gap: 12px; }
.bvu-cat-term { font-weight: 600; font-size: 15px; }
.bvu-cat-hint { font-size: 13px; color: #475569; background: #f1f5f9; padding: 8px 10px; border-radius: 8px; margin: 0 0 12px; }

.bvu-gap-row { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 12px; align-items: center; padding-bottom: 8px; border-bottom: 1px dashed #f1f5f9; }
.bvu-gap-row:last-child { border-bottom: none; }
.bvu-gap-text { font-size: 15.5px; line-height: 1.85; }
.bvu-gap-zh { font-size: 12.5px; color: #94a3b8; white-space: nowrap; justify-self: end; }
.bvu-gap-input {
  display: inline-block;
  width: 110px;
  min-width: 70px;
  margin: 0 3px;
  padding: 4px 8px;
  font-size: 15px;
  border-bottom: 2px solid #0ea5e9;
  border-radius: 4px 4px 0 0;
  border-top: none; border-left: none; border-right: none;
  background: #f0f9ff;
}
.bvu-gap-input:focus { background: #fff; }
.bvu-gap-input.is-correct { background: #f0fdf4; border-color: #16a34a; color: #166534; font-weight: 700; }
.bvu-gap-input.is-wrong { background: #fef2f2; border-color: #dc2626; color: #991b1b; }

.bvu-tf-row, .bvu-choose-row { padding-bottom: 12px; border-bottom: 1px dashed #f1f5f9; }
.bvu-tf-row:last-child, .bvu-choose-row:last-child { border-bottom: none; }
.bvu-choose-opts { display: grid; gap: 10px; margin-top: 10px; }
.bvu-tf-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; max-width: 380px; }
.bvu-radio {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; line-height: 1.45; cursor: pointer;
  padding: 13px 16px; border-radius: 12px;
  border: 1.5px solid #e5e9f0; background: #fff;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .06s ease;
  -webkit-tap-highlight-color: transparent;
}
.bvu-radio:hover { border-color: #93c5fd; background: #f5f9ff; }
.bvu-radio:active { transform: scale(.99); }
/* native control is hidden — the lettered badge IS the indicator */
.bvu-radio input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.bvu-opt-key {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 800; color: #64748b;
  background: #f1f5f9; border: 1.5px solid #e2e8f0;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.bvu-opt-text { flex: 1 1 auto; text-align: left; color: #1e293b; }
/* selected — JS adds .is-picked; :has() covers native :checked as a fallback */
.bvu-radio.is-picked,
.bvu-radio:has(input[type="radio"]:checked) {
  border-color: #2563eb; background: #eff6ff;
  box-shadow: 0 3px 12px rgba(37, 99, 235, .14);
}
.bvu-radio.is-picked .bvu-opt-key,
.bvu-radio:has(input[type="radio"]:checked) .bvu-opt-key {
  background: #2563eb; color: #fff; border-color: #2563eb; transform: scale(1.06);
}

.bvu-match-mark {
  font-size: 13px; font-weight: 700;
  display: inline-block;
  padding: 4px 10px; border-radius: 999px;
  background: transparent;
  min-height: 22px;
  transition: background-color .15s, color .15s;
}
.bvu-match-mark.is-picked   { background: #dbeafe; color: #1e40af; }
.bvu-match-mark.is-correct  { background: #dcfce7; color: #166534; }
.bvu-match-mark.is-wrong    { background: #fee2e2; color: #991b1b; }

/* 选中态——让 select/input 答完即刻有清晰反馈（radio 选中态见上方 .bvu-radio 设计） */
.bvu-match-row.is-picked,
.bvu-cat-row.is-picked,
.bvu-tf-row.is-picked,
.bvu-choose-row.is-picked,
.bvu-gap-row.is-picked {
  background: linear-gradient(180deg, rgba(37, 99, 235, .04), transparent);
  border-radius: 8px;
}
.bvu-match-row.is-picked select.bvu-input,
.bvu-cat-row.is-picked select.bvu-input {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.bvu-gap-row.is-picked .bvu-gap-input:not(.is-correct):not(.is-wrong) {
  background: #eff6ff;
  border-bottom-color: #2563eb;
}

.bvu-write-hint { font-size: 13px; color: #64748b; background: #f1f5f9; padding: 8px 10px; border-radius: 8px; margin: 0 0 10px; }
.bvu-write-ta {
  width: 100%; min-height: 60px;
  border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 10px 12px; font-size: 15px; line-height: 1.55; resize: vertical;
  font-family: inherit; background: #f8fafc;
}
.bvu-write-ta:focus { outline: none; border-color: #0ea5e9; background: #fff; box-shadow: 0 0 0 3px #e0f2fe; }
.bvu-write-model { margin-top: 6px; font-size: 13px; color: #475569; }
.bvu-write-model summary { cursor: pointer; }

.bvu-ex-score { font-size: 14px; padding: 8px 12px; border-radius: 8px; background: #f0f9ff; border: 1px solid #bae6fd; color: #0c4a6e; margin: 10px 0 0; }

/* Mobile tuning for new components */
@media (max-width: 480px) {
  .bvu-cat-row { grid-template-columns: 1fr; }
  .bvu-gap-text { font-size: 16px; }
  .bvu-gap-input { width: 96px; font-size: 16px; }
  .bvu-dict-pop { padding: 16px; }
}

/* ==========================================================================
   Global persistent mobile bottom-nav.
   The element is appended to document.body once, lives outside #root, and
   survives every page re-render. We show it ONLY on narrow screens; desktop
   keeps the top-nav.
   ========================================================================== */
#vocpilot-mobile-bottom-nav.vocpilot-global-nav { display: none; }
@media (max-width: 1024px) {
  #vocpilot-mobile-bottom-nav.vocpilot-global-nav {
    display: grid !important;
    /* Reuses .mobile-bottom-nav styling defined earlier */
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9999;
  }
  #vocpilot-mobile-bottom-nav.vocpilot-global-nav.is-hidden {
    display: none !important;
  }
  /* Visibility is controlled by app.js/mobile-nav.js. Avoid broad :has(...)
     selectors here: embedded reader/player DOM can coexist briefly during route
     transitions, which made the footer flash and then disappear on tap. */
  /* The in-page duplicate nav inside .mobile-app-home is now redundant — hide
     it so we don't show two stacked footers. */
  .mobile-app-home .mobile-bottom-nav { display: none !important; }

  /* Add safe bottom padding to all major page shells so content doesn't
     disappear under the global nav. */
  body.has-mobile-bottom-nav .home-shell,
  body.has-mobile-bottom-nav .me-shell,
  body.has-mobile-bottom-nav .rd-shell,
  body.has-mobile-bottom-nav .pd-shell,
  body.has-mobile-bottom-nav .podcast-shell,
  body.has-mobile-bottom-nav .course-shell,
  body.has-mobile-bottom-nav .vy-shell,
  body.has-mobile-bottom-nav .bvu-shell,
  body.has-mobile-bottom-nav .wordlist-shell,
  body.has-mobile-bottom-nav .comics-shell,
  body.has-mobile-bottom-nav .lk-shell {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
}

.vocpilot-secondary-back {
  display: none;
}
body[data-vocpilot-route="challenge-dialogue"] .vocpilot-secondary-back {
  display: none !important;
}
@media (max-width: 1024px) {
  /* 统一返回键：左上角圆形「←」，和听说页风格一致、干净不突兀 */
  .vocpilot-secondary-back {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    left: 14px;
    z-index: 10020;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    color: #0f172a;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
  }
  .vocpilot-secondary-back:active { transform: scale(.92); }
}

/* ==========================================================================
   Bug 6 — Home "当前词库" card on mobile (.mobile-today-card) was using a
   hard-coded book cover background (Thinking, Fast and Slow). It belongs to
   the WORDS card on the home page, not a book. Use a clean brand gradient
   instead. We do NOT touch .mobile-feature-card here — those big hero cards
   on /podcast and /course pages intentionally use a contextual cover image.
   ========================================================================== */
.mobile-today-card {
  background:
    linear-gradient(135deg, #f7faf8 0%, #ecf3f0 100%) !important;
}
.mobile-today-card.industry {
  background:
    linear-gradient(135deg, #eef1ff 0%, #e6ecff 100%) !important;
}

/* ==========================================================================
   Bug 2 — Dictionary (wordlist `/wordlist` route, class .wl-shell) was very
   narrow on mobile with huge side margins. Fill the screen edge-to-edge and
   relax the rigid row grid so the translation column doesn't truncate.
   ========================================================================== */
@media (max-width: 1024px) {
  .wl-shell {
    max-width: 100% !important;
    padding: 12px 10px calc(80px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
  }
  .wl-header { flex-wrap: wrap; }
  .wl-header h1 { font-size: 18px; flex: 1 0 auto; }
  .wl-controls { padding: 10px 12px; gap: 8px; }
  .wl-row { gap: 6px; }
  .wl-row-label { width: auto; min-width: 48px; font-size: 12px; }
  .seg-pill { padding: 5px 10px; font-size: 12px; }
  .wl-az-nav {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 6px 0;
    position: sticky; top: 0;
    background: var(--panel, #fff);
    z-index: 5;
  }
  .wl-az-btn { padding: 2px 6px; font-size: 12px; }
  .wl-letter { font-size: 16px; padding: 4px 0; }

  /* Each row keeps its single-row grid but uses two text rows so the meaning
     wraps instead of getting clipped after 4-5 letters. */
  .wl-item {
    grid-template-columns: 12px 1fr auto !important;
    grid-template-areas:
      "dot word used"
      "dot meaning meaning" !important;
    gap: 4px 10px !important;
    padding: 10px 8px !important;
  }
  .wl-item .wl-tier-dot { grid-area: dot; }
  .wl-item .wl-word    { grid-area: word; font-size: 15px; white-space: normal; }
  .wl-item .wl-meaning { grid-area: meaning; white-space: normal; font-size: 13px; line-height: 1.5; color: #475569; }
  .wl-item .wl-used    { grid-area: used; align-self: start; }
}

/* ==========================================================================
   Bug 4 — Course-preview / textbook-library on mobile: prevent text overlap
   and shrink the heavy desktop headers.
   ========================================================================== */
@media (max-width: 1024px) {
  .vy-shell .home-nav,
  .course-shell .home-nav {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  .vy-shell .home-nav-right,
  .course-shell .home-nav-right {
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
  }
  .vy-shell h1, .course-shell h1 { font-size: 22px; line-height: 1.25; }
  .vy-shell h2, .course-shell h2 { font-size: 18px; line-height: 1.3; }
  .vy-hero, .vy-series-head { padding: 10px 12px; }
  .vy-library { grid-template-columns: 1fr !important; gap: 10px; }
  .vy-book-card { grid-template-columns: 110px 1fr !important; gap: 10px; padding: 10px; }
  .vy-book-info h2 { font-size: 18px; }
  .vy-book-info p, .vy-goals li { font-size: 13px; line-height: 1.4; }
  .vy-book-info .vy-desc { -webkit-line-clamp: 4; }
}

/* ==========================================================================
   Bug 1 — Reading on mobile: same desktop sections (精选 / 专题 /
   分类阅读) but laid out edge-to-edge with tighter spacing. Plus add room
   for the new global bottom nav and a "swipe to comics" hint button.
   ========================================================================== */
@media (max-width: 1024px) {
  .rd-shell {
    max-width: 100% !important;
    padding: 12px 10px calc(80px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
  }
  .rd-header { flex-wrap: wrap; gap: 8px; padding: 6px 0 10px; }
  .rd-header h1 { font-size: 20px; }
  .rd-search { padding: 6px 8px; }
  .rd-search-input { font-size: 14px; }
  .rd-list-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .rd-card {
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
  .rd-card-title { font-size: 16px; line-height: 1.3; }
  .rd-preview { font-size: 13px; -webkit-line-clamp: 3; }
  .rd-events-section { padding: 10px 12px; border-radius: 12px; }
  .rd-events-section-head { flex-wrap: wrap; gap: 6px; }
  .rd-events-section-head h3 { font-size: 15px; margin: 0; }
  .rd-event-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Real top-right comics shortcut inside the reading header — replaces the
     old floating hint, and tells the user that a left-swipe also works. */
  .rd-comics-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #418f09;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
  }
  .rd-comics-link:active { background: #d1fae5; }
}

/* ==========================================================================
   Account page (我的) on mobile — strip the unneeded "← 首页" button since
   the global nav now provides Home. We just shrink it so it doesn't compete
   for the corner.
   ========================================================================== */
@media (max-width: 1024px) {
  .me-shell, .home-shell.me-shell { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  .me-shell .home-nav { flex-wrap: wrap; padding: 8px 12px; }
  .me-shell .home-nav-right { gap: 6px; flex-wrap: wrap; }
  .me-shell .home-nav-right .btn-ghost { font-size: 12px; padding: 6px 10px; }
}

/* ==========================================================================
   Mobile profile-home cleanup — when a user has picked a bank, the home page
   on phones should match the desktop layout in the screenshot: welcome line,
   current bank, daily goal, three actions, four challenges. The top nav
   (login / 听说课程 / 专业方向 buttons) and the "更多工具" grid both become
   redundant because the global bottom nav already covers those routes.
   ========================================================================== */
@media (max-width: 1024px) {
  .home-shell .home-nav { display: none !important; }
  .home-shell .home-tools { display: none !important; }
  .home-shell.vy-shell .home-nav,
  .home-shell.course-shell .home-nav,
  .home-shell.me-shell .home-nav {
    display: flex !important;
  }

  /* Profile cards: keep two-up but tighter on phones */
  .home-shell .profile-summary { padding: 14px 14px 6px; }
  .home-shell .profile-summary h1 { font-size: 28px; line-height: 1.2; }
  .home-shell .profile-summary .profile-sub { font-size: 14px; }
  .home-shell .profile-cards.compact-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }
  .home-shell .pcard {
    padding: 14px 16px;
    border-radius: 12px;
  }
  .home-shell .pcard strong { font-size: 22px; }

  /* Actions: stack as wide pills.
     The desktop rule `.home-cta-row.big { margin-top: -32px }` pulls the
     button up to overlap the cards as a deliberate desktop visual. On
     phones the cards are taller relative to viewport, so the same overlap
     swallows the cards. Reset on mobile. */
  .home-shell .home-cta-row.big {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 12px 14px 4px !important;
    margin-top: 0 !important;
  }
  .home-shell .home-cta-row.big .btn-primary,
  .home-shell .home-cta-row.big .btn-ghost {
    flex: 1 1 auto;
    min-width: calc(50% - 6px);
    height: 44px;
    border-radius: 999px;
    font-size: 15px;
  }
  .home-shell .home-cta-row.big .btn-primary { min-width: 100%; }
  /* In Use 词库：单词表 = 与「调整每日目标/比例」同款幽灵按钮，独占整行（别和它挤一排） */
  .home-shell .home-cta-row.big .btn-ghost.cta-wordlist { min-width: 100%; }

  /* Four challenges: 2-column grid on phones */
  .home-shell .home-features.compact {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 12px 14px calc(80px + env(safe-area-inset-bottom)) !important;
  }
  .home-shell .home-features.compact .feat {
    padding: 14px;
    border-radius: 14px;
    min-height: 96px;
  }
  /* 单词表 / 阅读挑战 = 与「调整每日目标」按钮一致：胶囊圆角 + 单行居中 + 低高度 */
  .home-shell .home-features.compact .feat-btn {
    min-height: 0;
    padding: 11px 16px;
    line-height: 1.35;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==========================================================================
   Small "swipe →" hint text in the reading & comics headers — no button,
   just a subtle affordance so users on phones know the gesture is available.
   ========================================================================== */
.rd-swipe-hint,
.cx-swipe-hint {
  font-size: 12px;
  color: #8b9aa3;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  align-self: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}
@media (min-width: 1025px) {
  /* Desktop has no swipe; the hint is for touch only. */
  .rd-swipe-hint,
  .cx-swipe-hint { display: none; }
}

/* ==========================================================================
   Reading ↔ Comics horizontal pager (mobile-first).
   Two pages render side-by-side; CSS scroll-snap pulls each page flush to
   the viewport so the user can pan freely between them.
   ========================================================================== */
.rc-pager {
  display: flex;
  flex-direction: column;
  /* Take the full viewport minus the global bottom-nav strip. */
  height: 100dvh;
  min-height: 100vh;
  overflow: hidden;
}
.rc-tabs {
  display: flex;
  gap: 24px;
  padding: 12px 18px 8px;
  background: #fff;
  border-bottom: 1px solid #e7ecef;
  position: sticky; top: 0;
  z-index: 6;
}
.rc-tab {
  background: none;
  border: none;
  padding: 6px 2px;
  font-size: 16px;
  font-weight: 600;
  color: #94a3b8;
  cursor: pointer;
  position: relative;
}
.rc-tab.is-active { color: #0f172a; }
.rc-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  border-radius: 3px;
  background: #33a315;
}
.rc-pages {
  flex: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rc-pages::-webkit-scrollbar { display: none; }
.rc-page {
  flex: 0 0 100%;
  width: 100%;
  overflow-y: auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* Bottom padding gives space for the global nav. */
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}
/* On desktop the pager still works but feels heavy — keep tabs visible but
   compact, and let the page take full width. */
@media (min-width: 1025px) {
  .rc-pager { height: auto; min-height: 0; overflow: visible; }
  .rc-tabs { padding: 10px 24px 6px; }
  .rc-pages { overflow-x: hidden; flex-direction: column; }
  .rc-page { flex: 1 1 auto; padding-bottom: 0; }
  /* On desktop only show the active tab's page. Tabs become click-only. */
  .rc-page[data-rc-page="1"] { display: none; }
  .rc-pager:has(.rc-tab[data-rc-tab="1"].is-active) .rc-page[data-rc-page="0"] { display: none; }
  .rc-pager:has(.rc-tab[data-rc-tab="1"].is-active) .rc-page[data-rc-page="1"] { display: block; }
}

@media (max-width: 1024px) {
  .rd-view-shell {
    max-width: 100% !important;
    padding: 0 0 20px !important;
  }
  .rd-view-header {
    padding: 12px 14px 10px !important;
  }
  .rd-view-article {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 18px 14px 24px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .rd-paragraphs { gap: 14px; }
  .rd-para-en {
    font-size: 19px !important;
    line-height: 1.9 !important;
  }
  .rd-para-zh {
    padding: 8px 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 15px !important;
  }

  .study-shell {
    max-width: 100% !important;
    padding: 12px 14px 28px !important;
    gap: 16px !important;
  }
  .study-header,
  .study-header.simple {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 !important;
  }
  .study-header.simple.challenge-shell-header {
    grid-template-columns: minmax(70px, auto) 1fr minmax(70px, auto) !important;
    align-items: center !important;
  }
  .challenge-back-btn {
    padding-left: 0 !important;
    white-space: nowrap !important;
  }
  .challenge-header-spacer {
    width: 70px !important;
  }
  .study-card,
  .done-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .listen-head,
  .dict-head {
    padding-bottom: 8px !important;
    border-bottom: none !important;
  }
  .dict-card,
  .dict-section,
  .sentences-section,
  .translate-section,
  .real-examples-section,
  .sentence-feedback,
  .history-section details {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .pos-trans {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }
  .example-list li,
  .colloc-ex-row,
  .real-example-list li,
  .challenge-card,
  .choice-opt,
  .sentence-row.card,
  .sentence-row.card.voice-mode {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .colloc-list.bigger li.colloc-row {
    border: none !important;
  }
  .colloc-toggle {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
  }
  .colloc-row.open .colloc-toggle {
    background: transparent !important;
  }
  .colloc-examples {
    padding: 6px 0 12px !important;
  }
  .example-list li,
  .real-example-list li {
    border-bottom: none !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .choice-list { grid-template-columns: 1fr !important; }
  .sentence-row.card,
  .sentence-row.card.voice-mode {
    border-bottom: none !important;
    padding-top: 10px !important;
    padding-bottom: 12px !important;
  }
  .sentence-row.card .sentence-input {
    background: #fff !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 16px !important;
  }
  .sentence-row.card.voice-mode .voice-heard {
    background: transparent !important;
    border-left: 2px solid #cbd5e1 !important;
  }
  .sentences-section .study-actions {
    border-top: none !important;
    padding-top: 6px !important;
    margin-top: 6px !important;
  }

  .wl-shell {
    padding: 10px 12px 24px !important;
  }
  .wl-header {
    padding: 4px 0 8px !important;
    border-bottom: none !important;
  }
  .wl-controls {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 0 10px !important;
  }
  .wl-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #eef2f7 !important;
    border-radius: 0 !important;
    padding: 12px 0 !important;
  }
  .wl-az-nav {
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(10px);
    border-bottom: none !important;
  }

  .vy-hero,
  .vy-series-head {
    padding: 10px 0 !important;
  }
  .vy-book-card {
    grid-template-columns: 84px 1fr !important;
    gap: 12px !important;
    padding: 14px 12px !important;
  }
  .vy-cover {
    height: 148px !important;
    border-radius: 12px !important;
  }
  .vy-book-info h2 {
    font-size: 20px !important;
    line-height: 1.1 !important;
  }
  .vy-book-info .vy-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .vy-goals {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .vy-enter {
    width: 100%;
    justify-content: center;
  }
  .vy-book-hero {
    grid-template-columns: 88px 1fr !important;
    gap: 12px !important;
    padding: 14px 12px !important;
  }
  .vy-book-hero-cover {
    height: 150px !important;
  }
}

/* ==========================================================================
   Redesigned "我的" page — me-shell-v2.
   Avatar hero + stats card + grouped icon grids. Works on both desktop and
   mobile; phone keeps everything edge-to-edge with bottom-nav clearance.
   ========================================================================== */
.me-shell-v2 {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 16px calc(100px + env(safe-area-inset-bottom));
  color: #0f172a;
}
.me-shell-v2 .me-topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0 4px;
}
.me-shell-v2 .me-topbar-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  width: 36px; height: 36px;
  font-size: 16px; line-height: 1;
  cursor: pointer;
}
.me-shell-v2 .me-topbar-btn:hover { background: #e2e8f0; }

/* Hero (avatar + name + ID + 个人主页 link) */
.me-shell-v2 .me-hero {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0 18px;
}
.me-shell-v2 .me-avatar-large {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4be619, #33a315);
  color: #fff;
  display: grid; place-items: center;
  font-size: 36px; font-weight: 700;
  border: none; cursor: pointer;
  box-shadow: 0 6px 18px rgba(75, 230, 25, .25);
}
.me-shell-v2 .me-avatar-empty {
  background: #e2e8f0;
  color: #94a3b8;
  cursor: default;
  box-shadow: none;
}
.me-shell-v2 .me-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.me-shell-v2 .me-hero-info h1 {
  font-size: 24px; line-height: 1.2;
  margin: 0 0 6px;
  font-weight: 700;
}
.me-shell-v2 .me-id-row {
  font-size: 13px; color: #64748b; margin: 0;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.me-shell-v2 .me-id-row code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  background: #f1f5f9;
  padding: 2px 6px; border-radius: 6px;
  color: #0f172a;
}
.me-shell-v2 .me-id-copy {
  background: transparent; border: none; cursor: pointer;
  color: #64748b; font-size: 14px; padding: 2px 6px; border-radius: 4px;
}
.me-shell-v2 .me-id-copy:hover { background: #f1f5f9; }
.me-shell-v2 .me-hero-link {
  background: transparent; border: none; cursor: pointer;
  color: #64748b; font-size: 13px;
  padding: 4px 0;
  align-self: start;
  margin-top: 4px;
}

/* CTA row (logged-out variant) */
.me-shell-v2 .me-cta-row {
  display: grid; grid-template-columns: 2fr 1fr; gap: 10px;
  padding: 4px 0 14px;
}
.me-shell-v2 .me-cta-primary,
.me-shell-v2 .me-cta-secondary {
  height: 44px;
  border-radius: 12px;
  font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.me-shell-v2 .me-cta-primary {
  background: linear-gradient(135deg, #4be619, #33a315);
  color: #fff;
  border: 1px solid #33a315;
  box-shadow: 0 6px 16px rgba(75, 230, 25, .25);
}
.me-shell-v2 .me-cta-secondary {
  background: #fff;
  color: #0f172a;
  border: 1px solid #e2e8f0;
}

/* Stats card */
.me-shell-v2 .me-stats-card {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  background: #fff;
  border: 1px solid #e7ecef;
  border-radius: 16px;
  padding: 14px 8px;
  margin-bottom: 18px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
}
.me-shell-v2 .me-stat {
  background: transparent; border: none; cursor: pointer;
  display: grid; gap: 4px; justify-items: center;
  padding: 4px 0;
}
.me-shell-v2 .me-stat strong {
  font-size: 26px; font-weight: 700; line-height: 1.1;
  color: #4be619;
}
.me-shell-v2 .me-stat span {
  font-size: 12px; color: #64748b;
}
.me-shell-v2 .me-stat-divider {
  width: 1px; height: 32px; background: #e2e8f0;
}

/* Grouped icon grids */
.me-shell-v2 .me-grid-section {
  background: #fff;
  border: 1px solid #e7ecef;
  border-radius: 16px;
  padding: 14px 12px;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
}
.me-shell-v2 .me-grid-section h3 {
  font-size: 16px; font-weight: 700;
  margin: 0 0 12px; padding: 0 4px;
}
.me-shell-v2 .me-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 8px;
}
.me-shell-v2 .me-icon-grid > button {
  background: transparent; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  padding: 10px 4px;
  border-radius: 10px;
  font-size: 12px; color: #0f172a;
  position: relative;
}
.me-shell-v2 .me-icon-grid > button:hover { background: #f8fafc; }
.me-shell-v2 .me-icon-grid > button .me-ic {
  font-size: 26px; line-height: 1;
}
.me-shell-v2 .me-icon-grid > button em {
  font-style: normal; font-weight: 500;
}
.me-shell-v2 .me-ic-badge {
  display: inline-block;
  font-style: normal;
  background: #fee2e2; color: #b91c1c;
  font-size: 10px; font-weight: 700;
  padding: 1px 5px; border-radius: 999px;
  margin-left: 2px;
  vertical-align: 1px;
}

/* Sub-screen (when a tab is opened) */
.me-shell-v2.me-shell-sub { padding-top: 0; }
.me-shell-v2 .me-sub-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 4px 12px;
  border-bottom: 1px solid #e7ecef;
  position: sticky; top: 0;
  background: #fff;
  z-index: 5;
}
.me-shell-v2 .me-sub-back {
  background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px; cursor: pointer;
}
.me-shell-v2 .me-sub-title {
  font-size: 16px;
}

/* Comics grid: 3 per row (issue #3) */
.me-shell-v2 .me-comic-grid-3col,
.me-comic-grid-3col {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.me-comic-grid-3col .me-comic-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  text-align: left;
}
.me-comic-grid-3col .me-comic-card img,
.me-comic-grid-3col .me-comic-fallback {
  width: 100%; aspect-ratio: 2 / 3;
  border-radius: 6px; background: #f8fafc;
  object-fit: cover;
  display: grid; place-items: center;
  font-size: 22px; color: #64748b;
}
.me-comic-grid-3col .me-comic-info strong {
  font-size: 13px; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.me-comic-grid-3col .me-comic-info span { font-size: 11px; color: #64748b; }

.me-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.me-history-head h3 { margin: 0; }
.me-podcast-filters {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 2px 0 14px;
  color: #7a828c;
  font-size: 15px;
  white-space: nowrap;
}
.me-podcast-filters span {
  padding: 6px 12px;
  border-radius: 999px;
}
.me-podcast-filters .on {
  color: #1f2933;
  border: 1px solid #f0db61;
  background: #fffde8;
  font-weight: 700;
}
.me-podcast-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.me-podcast-item {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 14px;
  align-items: center;
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
  border: 1px solid #eef2f4;
}
.me-podcast-item img {
  width: 92px;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  object-fit: cover;
  background: #e5e7eb;
}
.me-podcast-item .mp-cover { display: block; width: 92px; }
.me-podcast-item .mp-cover.no-cover {
  /* 封面 404：撑住网格第一列并给一个占位 */
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(160deg, #e7edf3, #d4dde6);
}
.me-podcast-item .mp-cover.no-cover::before { content: "🎧"; font-size: 28px; }
.me-podcast-item strong {
  display: block;
  color: #1f2933;
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.me-podcast-item p {
  margin: 0 0 18px;
  color: #9aa1aa;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.me-podcast-item em {
  font-style: normal;
  color: #b28a00;
  font-size: 14px;
}
.me-podcast-item button {
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #333;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

/* 朝夕说 Studio profile — a warmer, less app-clone "我的" page. */
.me-shell-v2.me-studio {
  max-width: 860px;
  padding: 14px 14px calc(112px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 18% -8%, rgba(245, 180, 73, .18), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(83, 161, 31, .16), transparent 30%),
    linear-gradient(180deg, #f7f2e8 0%, #f9fbf7 42%, #eef5f0 100%);
  min-height: 100vh;
}
.me-studio-hero {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: 18px;
  min-height: 238px;
  color: #fff8e8;
  background:
    linear-gradient(135deg, rgba(61, 112, 24, .96), rgba(72, 135, 25, .94) 48%, rgba(166, 105, 32, .9)),
    #417519;
  box-shadow: 0 24px 55px rgba(22, 65, 47, .24);
}
.me-studio-glow {
  position: absolute;
  width: 260px;
  height: 260px;
  right: -88px;
  top: -98px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 218, 128, .75), rgba(255, 218, 128, 0) 68%);
  pointer-events: none;
}
.me-studio-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.me-studio .me-studio-avatar {
  width: 78px;
  height: 78px;
  background: linear-gradient(135deg, #fff4d8, #f0b84c);
  color: #466a24;
  box-shadow: 0 15px 30px rgba(0,0,0,.2);
}
.me-studio-settings {
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.12);
  color: #fff8e8;
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.me-studio-name {
  position: relative;
  z-index: 1;
  margin-top: 18px;
}
.me-studio-kicker {
  display: inline-block;
  letter-spacing: .16em;
  font-size: 11px;
  font-weight: 900;
  color: rgba(255,248,232,.72);
}
.me-studio-name h1 {
  margin: 7px 0 8px;
  font-size: clamp(34px, 9vw, 58px);
  line-height: .98;
  letter-spacing: -.05em;
}
.me-studio-name p {
  margin: 0;
  max-width: 620px;
  color: rgba(255,248,232,.78);
  line-height: 1.6;
}
.me-studio-name code {
  color: #fff;
  background: rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 2px 6px;
}
.me-studio .me-id-copy {
  border: none;
  background: rgba(255,255,255,.16);
  color: #fff8e8;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
}
.me-studio-metrics {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 20px;
}
.me-studio-metrics button {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.1);
  color: #fff8e8;
  border-radius: 18px;
  padding: 12px 10px;
  display: grid;
  gap: 3px;
  text-align: left;
  cursor: pointer;
}
.me-studio-metrics strong {
  font-size: 25px;
  line-height: 1;
}
.me-studio-metrics span {
  font-size: 12px;
  color: rgba(255,248,232,.68);
}
.me-command-strip {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}
.me-command-strip button,
.me-action-cards button,
.me-now-card button,
.me-quiet-row button {
  cursor: pointer;
}
.me-command-strip button {
  border: 1px solid rgba(73, 116, 35, .1);
  border-radius: 22px;
  padding: 16px 14px;
  min-height: 84px;
  text-align: left;
  background: rgba(255,255,255,.78);
  color: #3f5e21;
  box-shadow: 0 12px 28px rgba(30, 73, 53, .08);
  display: grid;
  align-content: space-between;
}
.me-command-strip button.primary {
  background: linear-gradient(135deg, #f2c35f, #f6df9d);
  color: #3c2a07;
}
.me-command-strip span,
.me-action-cards span {
  display: block;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.me-command-strip em,
.me-action-cards em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  color: rgba(63, 94, 33, .58);
  font-size: 13px;
  line-height: 1.35;
}
.me-now-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
  padding: 18px;
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(239,247,240,.82)),
    #fff;
  border: 1px solid rgba(78, 130, 29, .1);
  box-shadow: 0 16px 34px rgba(30, 73, 53, .09);
}
.me-section-eyebrow {
  display: inline-block;
  color: #b07116;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}
.me-now-card h2 {
  margin: 6px 0 7px;
  color: #173d2f;
  font-size: 23px;
  line-height: 1.18;
  letter-spacing: -.03em;
}
.me-now-card p {
  margin: 0;
  color: #64756d;
  line-height: 1.65;
}
.me-now-card button {
  border: none;
  background: #173d2f;
  color: #fff8e8;
  border-radius: 999px;
  padding: 11px 15px;
  font-weight: 900;
}
.me-action-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.me-action-cards button {
  min-height: 116px;
  border: 1px solid rgba(73, 116, 35, .1);
  border-radius: 24px;
  background: rgba(255,255,255,.76);
  color: #3f5e21;
  padding: 17px;
  text-align: left;
  box-shadow: 0 12px 26px rgba(30, 73, 53, .07);
}

.me-command-strip.me-command-strip-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.me-command-strip.me-command-strip-compact button {
  min-height: 68px;
  padding: 12px 13px;
  border-radius: 18px;
}
.me-command-strip.me-command-strip-compact span,
.me-action-cards span {
  font-size: 16px;
}
.me-action-cards button {
  min-height: 88px;
  padding: 14px;
  border-radius: 20px;
}
.me-settings-page {
  margin: -8px -12px 0;
  min-height: calc(100vh - 120px);
  background: #f4f4f4;
  padding: 8px 0 30px;
}
.me-settings-list {
  background: #fff;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
}
.me-settings-gap { margin-top: 14px; }
.me-settings-row {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  color: #1f2329;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  text-align: left;
  font-size: 15.5px;
  font-weight: 500;
  cursor: pointer;
}
.me-settings-row:last-child { border-bottom: 0; }
.me-settings-row em {
  font-style: normal;
  color: #9aa0a6;
  font-size: 14px;
  font-weight: 400;
}
.me-settings-row b {
  color: #c4c8cd;
  font-size: 18px;
  font-weight: 300;
}
.me-settings-row small {
  display: block;
  margin-top: 3px;
  color: #b0b4b9;
  font-size: 12px;
  font-weight: 400;
}
.me-settings-row.static { cursor: default; }
.me-settings-row.danger span { color: #1f2933; }
.me-settings-section-label {
  margin: 20px 16px 8px;
  color: #a3a8ad;
  font-size: 12.5px;
}
/* 身份验证（改密码）页 */
.me-verify-page { padding: 26px 18px; }
.me-verify-hint { color: #6b7280; font-size: 14px; margin: 6px 0 26px; }
.me-verify-row { display: flex; align-items: center; gap: 10px; border-bottom: 1.5px solid var(--brand, #16a34a); padding: 8px 2px; margin-bottom: 26px; }
.me-verify-lock { display: inline-flex; }
.me-verify-lock .me-ic { width: 18px; height: 18px; stroke: #c4c8cd; }
.me-verify-input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 16px; background: transparent; color: var(--ink, #101820); }
.me-verify-getcode { flex: none; border: 1px solid var(--brand, #16a34a); background: #fff; color: var(--brand, #16a34a); font-size: 13.5px; font-weight: 600; padding: 8px 15px; border-radius: 999px; cursor: pointer; }
.me-verify-getcode:disabled { opacity: .5; }
.me-verify-next { width: 100%; border: 0; border-radius: 999px; background: var(--brand, #16a34a); color: #fff; font-size: 16px; font-weight: 700; padding: 14px; cursor: pointer; }
.me-verify-next:disabled { background: #c7d3c9; }
.me-verify-note { color: #9aa0a6; font-size: 12px; margin-top: 18px; text-align: center; }
/* 轻量 toast */
.me-toast { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%) translateY(10px); background: rgba(20,24,28,.92); color: #fff; font-size: 13.5px; padding: 10px 18px; border-radius: 999px; z-index: 99999; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; max-width: 80%; text-align: center; }
.me-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.bind-dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-style: normal;
  font-weight: 900;
}
.bind-dot.wechat { background: #35b553; }
.bind-dot.weibo { background: #d1d5db; }
.bind-dot.qq { background: #cfd3d8; }
.me-password-inline {
  margin: 12px 16px 0;
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  display: grid;
  gap: 10px;
}
.me-reading-today h3 em {
  margin-left: 8px;
  color: #84908a;
  font-size: 14px;
  font-style: normal;
}
.me-reading-today-list {
  display: grid;
  gap: 12px;
}
.me-reading-today-list article {
  border: 1px solid rgba(78, 130, 29, .1);
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  padding: 14px;
}
.me-reading-today-list span {
  color: #55b914;
  font-size: 12px;
  font-weight: 900;
}
.me-reading-today-list strong {
  display: block;
  margin: 7px 0 6px;
  color: #17212b;
  font-size: 18px;
  line-height: 1.25;
}
.me-reading-today-list p {
  margin: 0;
  color: #69756f;
  line-height: 1.6;
}
.me-quiet-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-bottom: 8px;
}
.me-quiet-row button {
  border: 1px solid rgba(73, 116, 35, .12);
  background: rgba(255,255,255,.55);
  color: #456256;
  border-radius: 999px;
  padding: 9px 13px;
  font-weight: 800;
}
.me-shell-v2.me-studio-out .me-studio-hero {
  min-height: 220px;
}

@media (max-width: 540px) {
  .me-shell-v2.me-studio {
    padding: 10px 10px calc(104px + env(safe-area-inset-bottom));
  }
  .me-studio-hero {
    border-radius: 26px;
    padding: 16px;
  }
  .me-command-strip {
    grid-template-columns: 1fr;
  }
  .me-command-strip.me-command-strip-compact {
    grid-template-columns: 1fr;
  }
  .me-command-strip button {
    min-height: 74px;
  }
  .me-now-card {
    grid-template-columns: 1fr;
  }
  .me-now-card button {
    justify-self: start;
  }
  .me-action-cards {
    grid-template-columns: 1fr;
  }
}

/* Phone tuning */
@media (max-width: 540px) {
  .me-shell-v2 { padding: 8px 12px calc(96px + env(safe-area-inset-bottom)); }
  .me-shell-v2 .me-hero { grid-template-columns: 72px 1fr auto; gap: 12px; }
  .me-shell-v2 .me-avatar-large { width: 72px; height: 72px; font-size: 30px; }
  .me-shell-v2 .me-hero-info h1 { font-size: 20px; }
  .me-shell-v2 .me-stats-card { grid-template-columns: 1fr auto 1fr auto 1fr; }
  .me-shell-v2 .me-stat strong { font-size: 22px; }
  .me-shell-v2 .me-icon-grid { grid-template-columns: repeat(4, 1fr); }
  .me-shell-v2 .me-icon-grid > button .me-ic { font-size: 22px; }
  .me-podcast-item {
    grid-template-columns: 78px 1fr auto;
    gap: 10px;
    padding: 12px;
  }
  .me-podcast-item img { width: 78px; }
  .me-podcast-item strong { font-size: 17px; }
  .me-podcast-item p { font-size: 13px; margin-bottom: 12px; }
  .me-podcast-item button { padding: 7px 10px; font-size: 13px; }
}

/* ==========================================================================
   Bug #1 — 听说课程 (textbook library) mobile overflow & text overlap.
   Make every container edge-to-edge, cap horizontal padding, and let unit
   cards stack as single column with proper word-wrap.
   ========================================================================== */
@media (max-width: 1024px) {
  .vy-shell,
  .course-shell {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 12px calc(90px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden;
  }
  .vy-shell *,
  .course-shell * {
    /* Soft cap so any over-wide inline child doesn't punch past the viewport */
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }
  .vy-shell .home-nav,
  .course-shell .home-nav {
    flex-wrap: wrap;
    gap: 6px !important;
    padding: 8px 12px !important;
  }
  .vy-shell .home-nav .brand-mark,
  .course-shell .home-nav .brand-mark {
    font-size: 13px;
    gap: 6px;
  }
  .vy-shell .home-nav .brand-dot { display: none; }
  .vy-shell .home-nav .brand-name,
  .course-shell .home-nav .brand-name {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 62vw;
  }
  .vy-shell .home-nav .brand-tag,
  .course-shell .home-nav .brand-tag { font-size: 11px; padding: 2px 6px; }
  .vy-shell .home-nav-right,
  .course-shell .home-nav-right {
    width: 100%;
    flex-wrap: wrap; gap: 6px;
  }
  .vy-shell .home-nav-right .btn-ghost,
  .course-shell .home-nav-right .btn-ghost {
    font-size: 12px; padding: 5px 10px;
  }
  /* Hero */
  .vy-shell .vy-hero,
  .course-shell .vy-hero { padding: 8px 4px 14px; }
  .vy-shell .vy-hero h1 { font-size: 22px; line-height: 1.25; }
  .vy-shell .vy-hero-sub { font-size: 13px; line-height: 1.5; }
  /* Series block + library grid */
  .vy-series-block { padding: 0; }
  .vy-series-head { padding: 8px 4px; }
  .vy-series-head h2 { font-size: 18px; }
  .vy-series-kicker { font-size: 11px; }
  .vy-series-desc { font-size: 12px; line-height: 1.5; }
  .vy-library {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .vy-book-card {
    grid-template-columns: 96px 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
  }
  .vy-book-card .vy-typo-cover,
  .vy-book-card .vy-image-cover {
    width: 96px !important;
    max-width: 96px !important;
    aspect-ratio: 3 / 4;
    height: auto !important;
  }
  .vy-book-card .vy-image-cover .vy-cover,
  .vy-book-card .vy-cover {
    height: 100% !important;
    object-fit: contain !important;
    background: #f8fafc;
  }
  .vy-book-info h2 { font-size: 16px; line-height: 1.25; }
  .vy-book-info .vy-desc { font-size: 12px; -webkit-line-clamp: 4; }
  .vy-book-info .vy-goals li { font-size: 11px; line-height: 1.5; }
  .vy-book-info .vy-stats { font-size: 11px; flex-wrap: wrap; gap: 4px; }
  .vy-book-info .vy-enter { font-size: 13px; padding: 8px 12px; height: 36px; }
  /* Book detail page — compact 3-column unit grid on phones */
  .vy-shell .vy-units {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px;
    padding: 0 4px;
  }
  .vy-shell .vy-unit-card { padding: 10px 8px; min-height: 118px; }
  .vy-shell .vy-unit-card-head { display: block; }
  .vy-shell .vy-unit-num { font-size: 18px; text-align: center !important; display: block; }
  .vy-shell .vy-unit-status { display: none; }
  .vy-shell .vy-unit-title { font-size: 12px; line-height: 1.25; text-align: center; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
  .vy-shell .vy-unit-zh { font-size: 11px; text-align: center; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
  .vy-shell .vy-unit-mods { justify-content:center; gap:2px; }
  .vy-shell .vy-mod-dot { width:16px; height:16px; font-size:9px; }
}

@media (max-width: 1024px) {
  .vy-shell.home-shell .home-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #eef3ee;
  }
  .vy-shell .vy-hero {
    padding-top: 14px !important;
  }
  .vy-shell .vy-series-switcher {
    position: relative;
    z-index: 25;
  }
  .vy-shell .vy-series-toggle {
    display: inline-flex !important;
    min-height: 36px;
    align-items: center;
  }
  .vy-shell .vy-book-card {
    grid-template-columns: 124px minmax(0,1fr) !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }
  .vy-shell .vy-book-card .vy-typo-cover,
  .vy-shell .vy-book-card .vy-image-cover {
    width: 124px !important;
    max-width: 124px !important;
    height: 176px !important;
    min-height: 176px !important;
    aspect-ratio: auto !important;
    align-self: start !important;
    flex: none !important;
  }
  .vy-shell .vy-book-card .vy-typo-cover *,
  .vy-shell .vy-book-card .vy-image-cover * {
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .vy-shell .vy-book-card .vy-cover {
    height: 176px !important;
    object-fit: contain !important;
  }
  .vy-shell .vy-book-info {
    min-width: 0;
    gap: 7px !important;
  }
  .vy-shell .vy-book-head {
    gap: 8px !important;
  }
  .vy-shell .vy-level {
    font-size: 11px;
    padding: 4px 10px;
  }
  .vy-shell .vy-subtitle {
    font-size: 13px;
  }
  .vy-shell .vy-book-info h2 {
    font-size: 22px !important;
    line-height: 1.12 !important;
  }
  .vy-shell .vy-desc {
    font-size: 14px !important;
    line-height: 1.45 !important;
    -webkit-line-clamp: 3 !important;
  }
  .vy-shell .vy-goals {
    display: none !important;
  }
  .vy-shell .vy-stats {
    margin-top: 6px !important;
    gap: 8px !important;
  }
  .vy-shell .vy-stat {
    font-size: 13px !important;
  }
  .vy-shell .vy-enter {
    display: inline-flex !important;
    width: 100%;
    justify-content: center;
    height: 42px !important;
    margin-top: 6px;
    border-radius: 999px;
    font-size: 15px !important;
  }
  .vy-shell .vy-typo-band-top,
  .vy-shell .vy-typo-band-bot {
    padding: 8px 10px;
    letter-spacing: .08em;
  }
  .vy-shell .vy-typo-mid {
    padding: 8px 10px;
  }
  .vy-shell .vy-typo-num {
    font-size: 52px;
    line-height: .9;
  }
  .vy-shell .vy-typo-series {
    font-size: 18px;
    line-height: 1.05;
    letter-spacing: .08em;
  }
}

/* 20260528-fix12: compact Me page rows + calendar-style learning data */
.me-list-actions {
  display: grid;
  gap: 10px;
}

.me-list-actions button {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  border: 1px solid rgba(55, 109, 24, .10);
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 34px rgba(55, 109, 24, .07);
  color: #0f172a;
  text-align: left;
}

.me-list-actions button span {
  font-size: 17px;
  font-weight: 900;
  color: #366819;
}

.me-list-actions button em {
  max-width: 54%;
  overflow: hidden;
  color: #64756f;
  font-style: normal;
  font-size: 13px;
  line-height: 1.25;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-list-actions button.danger span {
  color: #b42318;
}

/* （已移除）原先“我的”子页会通过 :has(.me-shell-sub) 强制隐藏底部导航，
   现在子页与首页一样保留导航，返回靠顶部「← 我的」。 */

.stats-calendar-card {
  position: relative;
  overflow: hidden;
  margin-top: 18px;
  padding: 22px;
  border: 1px solid rgba(51, 163, 21, .12);
  border-radius: 28px;
  background:
    radial-gradient(circle at 84% 0%, rgba(88, 212, 45, .26), transparent 34%),
    linear-gradient(180deg, #e8ffe9 0%, #f8fffc 48%, #ffffff 100%);
  box-shadow: 0 20px 48px rgba(55, 109, 24, .10);
}

.stats-calendar-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 22px;
  max-width: 360px;
  margin: 0 auto 22px;
  text-align: center;
}

.stats-calendar-hero span {
  color: #5e7e51;
  font-size: 14px;
}

.stats-calendar-hero strong {
  color: #61c827;
  font-size: clamp(34px, 8vw, 52px);
  line-height: 1;
}

.stats-calendar-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.stats-calendar-head button {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(55, 109, 24, .10);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  color: #71847e;
  font-size: 28px;
}

.stats-calendar-head h3 {
  margin: 0;
  padding: 10px 18px;
  border: 1px solid rgba(55, 109, 24, .10);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  color: #536446;
  font-size: 20px;
}

.stats-calendar-week,
.stats-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  text-align: center;
}

.stats-calendar-week {
  margin-bottom: 10px;
  color: #6b835e;
  font-weight: 800;
}

.stats-calendar-grid span {
  min-height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #344529;
  font-size: 18px;
}

.stats-calendar-grid span.active {
  background: rgba(88, 212, 45, .18);
  color: #4aa906;
  font-weight: 900;
}

.stats-calendar-grid span.today {
  outline: 2px solid rgba(88, 212, 45, .75);
  background: rgba(255, 255, 255, .82);
  color: #33a315;
  font-weight: 900;
}

.stats-calendar-grid span.empty {
  visibility: hidden;
}

@media (max-width: 540px) {
  .me-list-actions {
    gap: 8px;
  }

  .me-list-actions button {
    min-height: 52px;
    padding: 10px 14px;
    border-radius: 16px;
  }

  .me-list-actions button span {
    font-size: 16px;
  }

  .me-list-actions button em {
    font-size: 12px;
  }

  .stats-calendar-card {
    padding: 18px 14px;
    border-radius: 24px;
  }

  .stats-calendar-grid {
    gap: 6px;
  }

  .stats-calendar-grid span {
    min-height: 38px;
    border-radius: 12px;
    font-size: 16px;
  }
}

/* Keep current Me-page rules after older Me-page blocks. */
.me-shell-v2.me-profile-app {
  max-width: 980px;
  padding-top: 14px;
}

.me-shell-v2.me-profile-app .me-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 10px;
}

.me-shell-v2.me-profile-app .me-icon-grid > button {
  min-height: 70px;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.me-shell-v2.me-profile-app .me-icon-grid > button .me-ic {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #eeffec, #dcfbcc);
  box-shadow: 0 8px 20px rgba(75, 230, 25, .14);
  font-size: 22px;
}

.me-shell-v2.me-profile-app .me-icon-grid > button em {
  color: #1f2933;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}

/* voc-in-use inline vocabulary images (Cambridge-aligned picture words) */
.vy-vocab-img { margin: 8px 0 4px; }
.vy-vocab-img img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 12px; display: block; background: #f0f2f5; }
.vy-vocab-img figcaption { font-size: 11px; color: #9aa3ad; margin-top: 4px; text-align: right; }
/* —— Per-idiom bilingual gloss list (中文对照 · 逐条对应) —— */
.bvu-gloss-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bvu-gloss-item { padding: 12px 14px; background: #f6f9fc; border: 1px solid #e3edf6; border-radius: 12px; }
.bvu-gloss-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.bvu-gloss-word { font-size: 16px; font-weight: 700; color: #33a315; background: rgba(51, 163, 21, .08); border: none; padding: 2px 8px; border-radius: 8px; cursor: pointer; }
.bvu-gloss-word:hover { background: rgba(51, 163, 21, .16); }
.bvu-gloss-ipa { font-size: 13px; color: #94a3b8; }
.bvu-gloss-zh { font-size: 15px; font-weight: 600; color: #b45309; }
.bvu-gloss-en { font-size: 15px; line-height: 1.6; color: #1f2937; margin: 2px 0 1px; }
.bvu-gloss-exzh { font-size: 14px; line-height: 1.6; color: #64748b; margin: 0; }

/* ============================================================
   Cambridge "Vocabulary in Use" textbook theme
   Scoped to 词汇 In Use 2/3/4 (.vy-series-voc-in-use) only.
   Visual language: teal accents, lettered A/B/C/D "Part" tabs,
   clean typographic page. Content is unchanged — styling only.
   ============================================================ */
.vy-series-voc-in-use {
  --iu-teal: #24d01b;
  --iu-teal-dark: #17b610;
  --iu-teal-ink: #158d0f;
  --iu-teal-soft: #edf8ec;
  --iu-teal-line: #c4e7c2;
}

/* — Top nav brand accent — */
.vy-series-voc-in-use .vy-unit-nav .brand-dot { background: var(--iu-teal); box-shadow: 0 0 0 3px rgba(36, 208, 27, .15); }

/* — Module / section intro header (tag pill + h1) — */
.vy-series-voc-in-use .vy-section-head .vy-tag {
  background: var(--iu-teal-soft);
  color: var(--iu-teal-dark);
  border: 1px solid var(--iu-teal-line);
}
.vy-series-voc-in-use .vy-section-head h1 { color: var(--iu-teal-ink); letter-spacing: -0.01em; }
.vy-series-voc-in-use .vy-unit-banner { border-color: var(--iu-teal-line); }

/* — Part (A/B/C/D) section card (books 3/4 sceneSections) — */
.vy-series-voc-in-use .vy-iu-section {
  border-color: var(--iu-teal-line);
  box-shadow: 0 10px 30px -24px rgba(23, 182, 16, .65);
}
.vy-series-voc-in-use .vy-iu-section-head { border-bottom: 2px solid var(--iu-teal-soft); }
.vy-series-voc-in-use .vy-iu-letter {
  background: linear-gradient(158deg, var(--iu-teal) 0%, var(--iu-teal-dark) 100%);
  border-radius: 10px;
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 4px 10px -3px rgba(23, 182, 16, .55);
}
.vy-series-voc-in-use .vy-iu-section-head h2 { color: var(--iu-teal-ink); font-weight: 800; }

/* — Vocabulary table — */
.vy-series-voc-in-use .vy-iu-table thead th {
  color: var(--iu-teal-dark);
  border-bottom: 1.5px solid var(--iu-teal);
}
.vy-series-voc-in-use .vy-iu-word strong { color: var(--iu-teal-ink); }
.vy-series-voc-in-use .vy-iu-table tbody tr:hover { background: var(--iu-teal-soft); }

/* — Mini-text & labels blocks — */
.vy-series-voc-in-use .vy-iu-mini { background: var(--iu-teal-soft); border-left-color: var(--iu-teal); }
.vy-series-voc-in-use .vy-iu-labels h4 { color: var(--iu-teal-dark); }

/* — Exercises — */
.vy-series-voc-in-use .vy-iu-ex { background: var(--iu-teal-soft); border-color: var(--iu-teal-line); }
.vy-series-voc-in-use .vy-iu-ex-num { background: var(--iu-teal-dark); color: #fff; }

/* — Vocabulary cards (book 2 sceneVocabulary) — */
.vy-series-voc-in-use .vy-vocab-card {
  border-color: #e4f0e4;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.vy-series-voc-in-use .vy-vocab-card:hover {
  border-color: var(--iu-teal-line);
  box-shadow: 0 12px 30px -20px rgba(23, 182, 16, .6);
  transform: translateY(-1px);
}
.vy-series-voc-in-use .vy-vocab-head h3 { color: var(--iu-teal-ink); }
.vy-series-voc-in-use .vy-vocab-zh { color: var(--iu-teal-dark); }

/* — Vocabulary image framing (both renderers) — */
.vy-series-voc-in-use .vy-vocab-img img {
  max-height: 190px;
  border-radius: 12px;
  border: 1px solid var(--iu-teal-line);
  box-shadow: 0 6px 16px -12px rgba(23, 182, 16, .5);
}

/* — Play buttons get the teal accent inside In Use — */
.vy-series-voc-in-use .vy-line-play { color: var(--iu-teal-dark); }

/* — In Use vocabulary-table word image (sceneSections rows) — */
.vy-iu-word-img {
  margin: 10px 0 2px 30px;
  max-width: 200px;
}
.vy-iu-word-img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  background: #eef2f4;
  border: 1px solid var(--iu-teal-line, #d6e5d6);
  box-shadow: 0 6px 16px -12px rgba(23, 182, 16, .55);
}
.vy-iu-word-img figcaption {
  font-size: 10px;
  color: #9aa3ad;
  margin-top: 3px;
  text-align: right;
}
@media (max-width: 1024px) {
  .vy-iu-word-img { margin-left: 0; max-width: 100%; }
  .vy-iu-word-img img { aspect-ratio: 16 / 9; max-height: 220px; }
}

/* — Robust In Use table layout: fixed columns so CJK examples never collapse
     to one-char-per-line, and the word image always fits its column. — */
.vy-series-voc-in-use .vy-iu-table { table-layout: fixed; }
.vy-series-voc-in-use .vy-iu-word { width: 26%; }
.vy-series-voc-in-use .vy-iu-zh   { width: 20%; }
.vy-series-voc-in-use .vy-iu-eg   { width: 54%; }
.vy-series-voc-in-use .vy-iu-eg-row span,
.vy-series-voc-in-use .vy-iu-eg-row em { overflow-wrap: anywhere; }
.vy-series-voc-in-use .vy-iu-word-img { max-width: 100%; }

/* —— 专业英语 In Use series group (industry panel, first position) —— */
.prof-series-group { margin: 4px 0 16px; border: 1px solid #e3e0d6; border-radius: 16px; background: linear-gradient(180deg,#fbfaf6,#fff); overflow: hidden; }
.prof-series-summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; }
.prof-series-summary::-webkit-details-marker { display: none; }
.prof-series-emoji { font-size: 24px; }
.prof-series-titles { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.prof-series-titles strong { font-size: 16px; color: #172026; }
.prof-series-titles em { font-size: 12px; color: #8a8f98; font-style: normal; }
.prof-series-caret { color: #b0b4bb; transition: transform .2s ease; }
.prof-series-group[open] .prof-series-caret { transform: rotate(180deg); }
.prof-series-books { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 14px 14px; }
.prof-book-card { display: flex; align-items: center; gap: 10px; text-align: left; padding: 14px; border: 1px solid #e7e4da; border-radius: 14px; background: #fff; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.prof-book-card:hover:not(.is-soon) { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,23,42,.10); border-color: #33a315; }
.prof-book-emoji { font-size: 26px; }
.prof-book-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.prof-book-main strong { font-size: 15px; color: #172026; }
.prof-book-main em { font-size: 11px; color: #9aa0a8; font-style: normal; }
.prof-book-tag { font-size: 11px; font-weight: 600; color: #33a315; background: rgba(51, 163, 21, .08); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.prof-book-card.is-soon { opacity: .55; cursor: not-allowed; }
.prof-book-card.is-soon .prof-book-tag { color: #94a3b8; background: #f1f5f9; }
@media (min-width: 1025px) { .prof-series-books { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================= */
/* Collapsible "In Use" series groups in the bank / goal picker  */
/* ============================================================= */
.bank-series-head { position: relative; }
.bank-series-head .bank-meta { color: #2563eb; font-weight: 600; }
.bank-series-caret {
  position: absolute; top: 14px; right: 16px; font-size: 13px;
  color: #8a8a93; transition: transform 0.18s ease;
}
.bank-series-head.is-open .bank-series-caret { transform: rotate(180deg); }
.bank-series-head.is-open { outline: 2px solid #2563eb; outline-offset: -1px; }
.bank-series-panel { grid-column: 1 / -1; }
.bank-series-panel.hidden { display: none !important; }
.bank-series-subgrid {
  margin: 2px 0 8px; padding: 14px;
  border: 1px dashed #e3e3e8; border-radius: 14px;
  background: rgba(37, 99, 235, 0.05);
}
.mobile-series-head em { color: #2563eb; }
.mobile-series-panel {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin: 2px 0 8px; padding: 12px;
  border: 1px dashed #e3e3e8; border-radius: 14px;
  background: rgba(37, 99, 235, 0.05);
}
.mobile-series-panel.hidden { display: none !important; }

/* ==========================================================================
   "我的" 首页 v3 — me-home-v3.
   参考主流读书 App：浅灰画布 + 白色大圆角卡片 + 分组排版。
   顶栏 → 资料卡(含今日进度条) → 四宫格 → 双半宽卡 → 时长卡 → 收听历史 →
   常用服务。所有按钮沿用 mountMe bind() 里的 data-tab / data-act 选择器。
   ========================================================================== */
.me-home-v3 {
  position: relative;
  padding-top: 4px;
}
/* 浅灰画布：用 body 级背景铺满整个画布（含视口外/滚动回弹区），
   不再用 position:fixed 的伪元素——fixed 在被预览工具 transform 缩放的
   页面里会退化为只盖住内容区，底部露出米色默认背景（"下方大量空白"）。
   html 层同步铺灰：body 被工具 transform 偏移时不露白边。 */
body[data-vocpilot-route="me"] { background: #f1f3f6; }
html:has(body[data-vocpilot-route="me"]) { background: #f1f3f6; }
.me3-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 2px 12px;
}
.me3-topbar-btn {
  border: 0;
  background: transparent;
  color: #1f2933;
  font-size: 16px;
  font-weight: 700;
  padding: 6px 4px;
  cursor: pointer;
}
.me3-topbar-ic { font-size: 22px; }

.me-home-v3 .me3-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
  margin-bottom: 12px;
}

/* —— 资料卡 —— */
.me3-profile { padding: 20px 18px 14px; }
.me3-profile-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}
.me3-avatar {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  flex: none;
  align-self: center;        /* never let the grid/flex row stretch it into an oval */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 0;
  padding: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #dcfbcc, #b7f699);
  color: #33a315;
  font-size: 28px;
  font-weight: 900;
  cursor: pointer;
}
/* width:100% + aspect-ratio guarantees a square box even though height:100% is
   indefinite inside the display:grid container (which let a portrait avatar's
   intrinsic 2:3 ratio stretch it to 64×96 → a teardrop). object-fit:cover crops. */
.me3-avatar img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: 50%; }
.me3-profile-info { min-width: 0; }
.me3-profile-info h1 {
  margin: 0 0 4px;
  font-size: 24px;
  line-height: 1.15;
  color: #1f2933;
  letter-spacing: -.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.me3-id {
  border: 0;
  background: transparent;
  padding: 0;
  color: #8a94a6;
  font-size: 13px;
  cursor: pointer;
}
.me3-profile-link {
  border: 0;
  background: transparent;
  color: #9aa3b2;
  font-size: 14px;
  align-self: start;
  padding: 4px 0;
  cursor: pointer;
  white-space: nowrap;
}
/* 未登录「我的」：与登录态同布局，但内容为空 + 头部是登录/注册入口 */
.me3-profile-guest .me3-profile-row { grid-template-columns: 64px minmax(0, 1fr); }
.me3-avatar-guest { background: linear-gradient(135deg, #e9edf2, #d7dde6); color: #9aa3b2; }
.me3-login-cta {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; padding: 0; cursor: pointer;
}
.me3-login-cta h1 {
  margin: 0; font-size: 23px; font-weight: 800; color: #1f2933; letter-spacing: -.02em;
}
.me3-login-cta b { color: #b6bdc8; font-weight: 700; font-size: 22px; line-height: 1; }
.me3-guest-sub { margin: 6px 0 0; color: #8a94a6; font-size: 13px; line-height: 1.5; }
/* 空占位时数字弱化一点 */
.me-home-guest .me3-daily-strip,
.me-home-guest .me3-duo-card,
.me-home-guest .me3-time-row { opacity: .96; }
.me3-daily-strip {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto minmax(40px, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  border: 0;
  border-radius: 999px;
  background: #f4f6f9;
  padding: 9px 14px;
  font-size: 13px;
  color: #4b5563;
  cursor: pointer;
  text-align: left;
}
.me3-daily-strip b { color: #1f2933; }
.me3-daily-flame { font-size: 15px; }
.me3-daily-text { white-space: nowrap; }
.me3-daily-bar {
  height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.me3-daily-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #58d42d, #4be619);
}
.me3-daily-arrow { color: #9aa3b2; font-weight: 400; font-size: 16px; }

/* —— 四宫格快捷入口 —— */
.me3-quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 16px 6px;
}
.me3-quick > button {
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #1f2933;
  cursor: pointer;
  padding: 4px 0;
}
.me3-qic { font-size: 26px; line-height: 1; }
/* 手绘图标尺寸/配色（我的页 + 会员页，替代 emoji） */
.me3-qic .me-ic { width: 26px; height: 26px; stroke: #16a34a; }
.me3-vip-crown .me-ic { width: 26px; height: 26px; stroke: #f0c040; }
.mem-perk span .me-ic { width: 28px; height: 28px; stroke: #15a05a; }
.me3-quick em {
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
}

/* —— 双半宽卡 —— */
.me3-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.me3-duo-card {
  display: grid;
  gap: 6px;
  justify-items: start;
  border: 0;
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
}
.me3-duo-title {
  font-size: 16px;
  font-weight: 800;
  color: #1f2933;
}
.me3-duo-sub { color: #8a94a6; font-size: 13px; }
.me3-duo-sub b { color: #e8730f; font-size: 16px; }

/* —— 学习总时长 —— */
.me3-time { padding: 16px 18px; }
.me3-time-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.me3-time-label {
  font-size: 16px;
  font-weight: 800;
  color: #1f2933;
}
.me3-time-value { color: #6b7280; font-size: 14px; white-space: nowrap; }
.me3-time-value b {
  color: #1f2933;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.me3-time-sub {
  margin: 8px 0 0;
  color: #9aa3b2;
  font-size: 13px;
  text-align: right;
}

/* —— 收听历史 / 常用服务公共头 —— */
.me3-sec-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px 0;
}
.me3-sec-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #1f2933;
}
.me3-more {
  border: 0;
  background: transparent;
  color: #9aa3b2;
  font-size: 14px;
  cursor: pointer;
}

/* —— 收听历史横滑封面 —— */
.me3-covers {
  display: flex;
  gap: 12px;
  padding: 12px 18px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.me3-covers::-webkit-scrollbar { display: none; }
.me3-cover {
  flex: 0 0 92px;
  display: grid;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.me3-cover img {
  width: 92px;
  height: 126px;
  object-fit: cover;
  border-radius: 10px;
  background: #e2e8f0;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .12);
}
.me3-cover em {
  font-style: normal;
  font-size: 12px;
  color: #4b5563;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.me3-cover.no-cover::before {
  /* 封面图 404 时的占位（onerror 移除 img 并加 no-cover） */
  content: "📖";
  display: grid;
  place-items: center;
  width: 92px;
  height: 126px;
  border-radius: 10px;
  background: linear-gradient(160deg, #e7edf3, #d4dde6);
  font-size: 30px;
}
.me3-cover.me3-cover-read::before {
  content: "📰";
  background: linear-gradient(160deg, #e0f2fe, #bae6fd);
}
.me3-cover.me3-cover-comic::before {
  content: "🎨";
  background: linear-gradient(160deg, #fef3c7, #fde68a);
}
.me3-empty {
  margin: 0;
  padding: 12px 18px 16px;
  color: #9aa3b2;
  font-size: 14px;
}
.me3-inline-link {
  border: 0;
  background: transparent;
  color: #33a315;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

/* —— 常用服务 —— */
.me3-services { padding-bottom: 6px; }
.me3-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 6px;
  padding: 10px 8px 14px;
}
.me3-grid > button {
  display: grid;
  justify-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: #374151;
  cursor: pointer;
  padding: 10px 2px;
  border-radius: 12px;
}
.me3-grid > button:hover { background: #f8fafc; }
.me3-gic { font-size: 24px; line-height: 1; }
.me3-grid em {
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
}

/* —— 个人信息管理子页 —— */
.me-privacy-note {
  margin: 20px 18px 0;
  color: #9a9a9a;
  font-size: 13px;
  line-height: 1.6;
}

/* ==========================================================================
   勋章墙 v2 — badge-wall（帆书式分组陈列）。
   每组一个浅色大圆角卡片，3 列宫格；勋章图为 /badge-images/<id>.png 本地文件，
   未解锁 = 同图置灰 + 降透明度；图片缺失时显示 🏅 占位。
   ========================================================================== */
.badge-wall {
  margin: -8px -12px 0;
  /* 底部导航在子页常驻，多留出它的高度 */
  padding: 6px 16px calc(110px + env(safe-area-inset-bottom));
  background: #f3f4f6;
  min-height: calc(100vh - 120px);
}
.badge-group-title {
  margin: 22px 2px 10px;
  color: #1f2933;
  font-size: 18px;
  font-weight: 800;
}
.badge-group-title em {
  font-style: normal;
  color: #9aa3b2;
  font-size: 14px;
  font-weight: 500;
}
.badge-group-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 8px;
  background: #fbfbfc;
  border-radius: 18px;
  padding: 22px 12px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
}
.badge-item {
  display: grid;
  justify-items: center;
  gap: 6px;
}
.badge-medal {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
}
.badge-medal img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  /* 预生成图带浅底色，正片叠底让它融进卡片背景 */
  mix-blend-mode: multiply;
}
.badge-medal.no-img::before {
  content: "🏅";
  font-size: 44px;
}
.badge-item.locked .badge-medal {
  filter: grayscale(1) opacity(.45);
}
.badge-item strong {
  color: #1f2933;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}
.badge-item.locked strong { color: #9aa3b2; }
.badge-hint {
  color: #9aa3b2;
  font-size: 12px;
  text-align: center;
  line-height: 1.35;
}

/* ==========================================================================
   个人主页 v2 — pp-page（帆书式）。
   品牌色横幅 + 勋章条 → 白卡(头像/编辑资料/昵称/标签/关注·粉丝·获赞) →
   主页/动态/笔记页签 → 内容面板。
   ========================================================================== */
.pp-page {
  margin: -8px -12px 0;
  padding-bottom: calc(110px + env(safe-area-inset-bottom));
  background: #f3f4f6;
  min-height: calc(100vh - 120px);
}
.pp-hero {
  height: 132px;
  position: relative;
  background:
    radial-gradient(circle at 85% -20%, rgba(255,255,255,.35), transparent 42%),
    linear-gradient(135deg, #4be619, #39c311 55%, #2f8919);
}
.pp-badge-strip {
  position: absolute;
  right: 16px;
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pp-badge {
  width: 56px;
  height: 56px;
  border: 0;
  padding: 3px;
  /* 勋章图自带象牙白实底：用同色圆角底片承托，在深色横幅上像一枚奖章牌 */
  background: #faf7f0;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
  cursor: pointer;
}
.pp-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 11px;
}
.pp-badge.no-img::before { content: "🏅"; font-size: 30px; }
.pp-badge-more {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.85);
  font-size: 22px;
  cursor: pointer;
  padding: 0 2px;
}
.pp-card {
  position: relative;
  margin: -26px 12px 0;
  background: #fff;
  border-radius: 18px;
  padding: 16px 18px 14px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
}
.pp-avatar {
  position: absolute;
  top: -34px;
  left: 18px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 4px solid #fff;
  padding: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #dcfbcc, #b7f699);
  color: #33a315;
  font-size: 34px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .14);
}
.pp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-edit-btn {
  float: right;
  margin-top: 6px;
  border: 1.5px solid #d7dde4;
  border-radius: 999px;
  background: #fff;
  color: #1f2933;
  font-size: 14px;
  font-weight: 700;
  padding: 7px 18px;
  cursor: pointer;
}
.pp-name {
  margin: 44px 0 8px;
  color: #1f2933;
  font-size: 24px;
  letter-spacing: -.02em;
}
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-chip {
  background: #eef1f4;
  color: #5b6573;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
}
.pp-chip-gender { background: #dbeafe; color: #2563eb; }
.pp-intro {
  margin: 8px 0 0;
  color: #6b7280;
  font-size: 13px;
}
.pp-stats {
  display: flex;
  gap: 26px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #f1f3f5;
  color: #6b7280;
  font-size: 14px;
}
.pp-stats b {
  color: #1f2933;
  font-size: 17px;
  margin-left: 4px;
}
.pp-tabs {
  display: flex;
  gap: 26px;
  padding: 16px 22px 0;
}
.pp-tabs button {
  border: 0;
  background: transparent;
  color: #6b7280;
  font-size: 17px;
  font-weight: 700;
  padding: 4px 2px 10px;
  cursor: pointer;
  position: relative;
}
.pp-tabs button.on { color: #1f2933; font-size: 19px; }
.pp-tabs button.on::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 26px;
  height: 4px;
  border-radius: 999px;
  background: #4be619;
}
.pp-panel {
  margin: 12px 12px 0;
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
}
.pp-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.pp-join { color: #9aa3b2; font-size: 13px; }
.pp-panel-title { color: #1f2933; font-size: 15px; font-weight: 800; }
.pp-more-link {
  border: 0;
  background: transparent;
  color: #9aa3b2;
  font-size: 13px;
  cursor: pointer;
}
.pp-data-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 6px 0 4px;
}
.pp-data-grid > div { display: grid; gap: 4px; justify-items: center; text-align: center; }
.pp-data-grid span { color: #9aa3b2; font-size: 12px; }
.pp-data-grid b { color: #1f2933; font-size: 26px; font-weight: 800; line-height: 1; }
.pp-data-grid i { color: #9aa3b2; font-size: 12px; font-style: normal; }
.pp-medal-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 0 6px;
}
.pp-medal-row::-webkit-scrollbar { display: none; }
.pp-medal {
  flex: 0 0 64px;
  display: grid;
  gap: 4px;
  justify-items: center;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.pp-medal img { width: 60px; height: 60px; object-fit: contain; mix-blend-mode: multiply; }
.pp-medal.no-img::before { content: "🏅"; font-size: 30px; }
.pp-medal em {
  font-style: normal;
  color: #6b7280;
  font-size: 11px;
  white-space: nowrap;
}
.pp-empty {
  margin: 6px 0;
  color: #9aa3b2;
  font-size: 14px;
}
.pp-feed { padding: 6px 16px; }
.pp-feed-item {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid #f3f4f6;
}
.pp-feed-item:last-child { border-bottom: 0; }
.pp-feed-date { color: #9aa3b2; font-size: 13px; font-weight: 700; }
.pp-feed-item p { margin: 0; color: #374151; font-size: 14px; }
.pp-note-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.pp-note {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  background: #f8fafc;
  border-radius: 10px;
  padding: 10px 12px;
}
.pp-note strong { color: #1f2933; font-size: 15px; }
.pp-note span { color: #9aa3b2; font-size: 12px; }

/* —— 编辑资料页 —— */
.pp-edit-page .pp-avatar-row { min-height: 76px; }
.pp-avatar-thumb {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #dcfbcc, #b7f699);
}
.pp-avatar-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-avatar-thumb i {
  font-style: normal;
  color: #33a315;
  font-weight: 900;
  font-size: 22px;
}
.pp-unset { font-style: normal; color: #b7bec9; }

/* ==========================================================================
   阅读历史 / 漫画书架：更矮的封面（task：缩小高度）
   ========================================================================== */
.me3-covers-sm .me3-cover { flex-basis: 70px; }
.me3-covers-sm .me3-cover img,
.me3-covers-sm .me3-cover.no-cover::before { width: 70px; height: 96px; }
.me3-covers-sm .me3-cover em { font-size: 11px; }

/* ==========================================================================
   页内编辑弹层 input-sheet（替代被 WebView 屏蔽的 prompt()）
   ========================================================================== */
.input-sheet-wrap {
  position: fixed; inset: 0; z-index: 10050;
  background: rgba(15, 23, 42, .45);
  display: flex; align-items: flex-end; justify-content: center;
}
.input-sheet {
  width: 100%; max-width: 560px;
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  animation: input-sheet-up .18s ease;
}
@keyframes input-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.input-sheet header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px;
  border-bottom: 1px solid #f0f2f4;
}
.input-sheet header strong { font-size: 16px; color: #1f2933; }
.input-sheet-cancel, .input-sheet-save {
  border: 0; background: transparent; font-size: 15px; cursor: pointer; padding: 4px 8px;
}
.input-sheet-cancel { color: #8a94a6; }
.input-sheet-save { color: #4be619; font-weight: 800; }
.input-sheet-body { padding: 16px; }
.input-sheet-input {
  width: 100%; box-sizing: border-box;
  border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 12px 14px; font-size: 16px; color: #1f2933;
  background: #f8fafc; outline: none;
}
.input-sheet-input:focus { border-color: #4be619; background: #fff; }
textarea.input-sheet-input { resize: none; line-height: 1.5; }
.input-sheet-options { display: grid; gap: 8px; }
.input-sheet-opt {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid #e2e8f0; border-radius: 12px;
  background: #f8fafc; padding: 14px 16px;
  font-size: 16px; color: #1f2933; cursor: pointer;
}
.input-sheet-opt i { display: none; color: #4be619; font-style: normal; font-weight: 800; }
.input-sheet-opt.on { border-color: #4be619; background: #ecfdf5; color: #33a315; font-weight: 700; }
.input-sheet-opt.on i { display: inline; }

/* ==========================================================================
   打卡日历升级：周/月/总 段控 + 可点选某天 + 6 项数据网格
   ========================================================================== */
.checkin-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  max-width: 320px;
  margin: 0 auto 22px;
  padding: 4px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(55, 109, 24, .10);
  border-radius: 999px;
}
.checkin-tabs button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 9px 0;
  font-size: 16px;
  font-weight: 700;
  color: #677f5a;
  cursor: pointer;
}
.checkin-tabs button.on {
  background: #4be619;
  color: #fff;
  box-shadow: 0 4px 12px rgba(75, 230, 25, .3);
}
.checkin-hero strong { display: inline-block; font-size: 44px; }
.checkin-hero em {
  display: inline; font-style: normal; color: #728079; font-size: 15px; margin-left: 3px;
}
.checkin-nav-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.checkin-nav-row h3 { margin: 0; color: #526744; font-size: 18px; }
.checkin-nav-row button {
  width: 44px; height: 44px;
  border: 1px solid rgba(55, 109, 24, .10);
  border-radius: 12px;
  background: rgba(255, 255, 255, .62);
  color: #6b7a76; font-size: 24px; cursor: pointer;
}
.checkin-grid .ck-day {
  min-height: 42px;
  display: grid; place-items: center;
  border: 0; padding: 0;
  background: transparent;
  border-radius: 50%;
  color: #344529; font-size: 20px;
  cursor: pointer;
}
.checkin-grid .ck-day.active { background: rgba(88, 212, 45, .20); color: #4aa906; font-weight: 900; }
.checkin-grid .ck-day.today { outline: 2px solid rgba(88, 212, 45, .72); }
.checkin-grid .ck-day.selected {
  background: #4be619; color: #fff; font-weight: 900;
  box-shadow: 0 4px 12px rgba(75, 230, 25, .4);
}
.checkin-data { margin-top: 22px; }
.checkin-data-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 2px 12px; color: #677f5a; font-size: 14px; font-weight: 700;
}
.checkin-clear {
  border: 0; background: transparent; color: #4be619;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.checkin-summary-6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.checkin-summary-6 div { padding: 14px 6px; text-align: center; border-radius: 16px; }
.checkin-summary-6 span { font-size: 13px; }
.checkin-summary-6 strong { font-size: 24px; margin-top: 4px; }
.checkin-summary-6 em { margin-left: 3px; font-size: 12px; }

/* ==========================================================================
   首页：顶部搜索 + 消息入口 + 学习/好友PK/学习圈 三页签（左右可滑动）
   ========================================================================== */
.home-toolbar { display: flex; gap: 10px; align-items: center; margin: 4px 0 12px; }
.home-search {
  flex: 1; display: flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 14px; border: 0; border-radius: 999px;
  background: #f1f4f7; color: #98a2b3; font-size: 15px; cursor: pointer; text-align: left;
}
.home-search-ic { font-size: 18px; }
.home-search em { font-style: normal; }
.home-mail {
  position: relative; width: 42px; height: 42px; flex: 0 0 42px;
  border: 0; border-radius: 50%; background: #f1f4f7; color: #475467;
  font-size: 19px; cursor: pointer;
}
.home-mail-badge {
  position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff;
  font-size: 11px; font-style: normal; line-height: 17px; text-align: center; font-weight: 700;
}
.home-tabs { display: flex; gap: 22px; margin: 0 2px 14px; border-bottom: 1px solid #eef1f4; }
.home-tabs button {
  border: 0; background: transparent; padding: 6px 2px 12px;
  font-size: 17px; font-weight: 700; color: #98a2b3; cursor: pointer; position: relative;
}
.home-tabs button.is-active { color: #0f172a; }
.home-tabs button.is-active::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 24px; height: 3px; border-radius: 999px; background: #4be619;
}
.home-page { display: none; }
/* 学习页里的各 section 原先靠 .home-shell 的 flex gap(64px) 排版；包进 pager
   后要在这里补回同样的列间距，否则桌面端区块挤在一起互相叠压。 */
.home-page.is-active { display: flex; flex-direction: column; gap: 64px; animation: home-page-in .2s ease; }
@media (max-width: 1024px) {
  .home-page.is-active { gap: 0; }
}
@keyframes home-page-in { from { opacity: .3; } to { opacity: 1; } }

/* ==========================================================================
   社交：好友PK / 关注·粉丝 / 资料 / 私信 / 学习圈（soc-*）
   ========================================================================== */
.soc-loading, .soc-empty { padding: 28px 16px; text-align: center; color: #98a2b3; font-size: 14px; }
.soc-empty .soc-sub, .soc-pk-empty .soc-sub { display: block; margin-top: 6px; font-size: 13px; color: #b0b8c4; }
.soc-btn {
  border: 1px solid #d7dde4; background: #fff; color: #1f2933;
  border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.soc-btn.primary { background: linear-gradient(135deg, #58d42d, #4be619); color: #fff; border-color: transparent; }
.soc-av {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 17px;
  background: hsl(var(--h, 200), 62%, 55%);
}
.soc-av.lg { width: 64px; height: 64px; flex-basis: 64px; font-size: 26px; }
.soc-av { overflow: hidden; }
.soc-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* 好友PK */
.soc-pk { padding: 4px 0 12px; }
.soc-pk-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(135deg, #fff7ed, #ffedd5); border-radius: 16px; padding: 16px;
  margin-bottom: 14px;
}
.soc-pk-kicker { display: block; font-size: 12px; color: #b45309; margin-bottom: 4px; }
.soc-pk-banner strong { font-size: 18px; color: #7c2d12; }
.soc-pk-empty { text-align: center; padding: 30px 16px; color: #98a2b3; }
.soc-pk-empty-art { font-size: 46px; }
.soc-lb { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.soc-lb-row {
  display: grid; grid-template-columns: 34px 42px 1fr auto; align-items: center; gap: 10px;
  background: #fff; border: 1px solid #eef1f4; border-radius: 14px; padding: 10px 12px;
  cursor: pointer; text-align: left; width: 100%;
}
.soc-lb-row.me { background: #ecfdf5; border-color: #b7f699; }
.soc-lb-rank { font-size: 16px; font-weight: 800; color: #98a2b3; text-align: center; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; }
.soc-lb-rank .soc-medal { width: 26px; height: 26px; display: block; }
.soc-lb-name { min-width: 0; color: #1f2933; font-weight: 700; font-size: 15px; }
.soc-lb-name em { color: #4be619; font-style: normal; font-size: 12px; }
.soc-lb-name small { display: block; color: #98a2b3; font-size: 12px; font-weight: 500; }
.soc-lb-xp { color: #6b7280; font-size: 13px; white-space: nowrap; }
.soc-lb-xp b { color: #e8730f; font-size: 17px; }
.soc-pk-foot { margin: 14px 4px 0; color: #b0b8c4; font-size: 12px; line-height: 1.6; }

/* 子页通用 */
.soc-sub, .soc-chat { min-height: calc(100vh - 60px); }
.soc-sub-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 4px 12px; border-bottom: 1px solid #eef1f4; position: sticky; top: 0; background: #fff; z-index: 4;
}
.soc-sub-bar strong { font-size: 17px; color: #1f2933; }
.soc-back { border: 0; background: transparent; font-size: 26px; color: #475467; cursor: pointer; width: 36px; line-height: 1; }
.soc-sub-body { padding: 12px 2px; }

/* 搜索 + 关注/粉丝列表 */
.soc-search-bar { display: flex; gap: 8px; margin: 4px 0 12px; }
.soc-search-input { flex: 1; border: 1px solid #e2e8f0; border-radius: 12px; padding: 11px 14px; font-size: 15px; background: #f8fafc; }
.soc-tabs { display: flex; gap: 20px; border-bottom: 1px solid #eef1f4; margin: 6px 2px 10px; }
.soc-tabs button { border: 0; background: transparent; padding: 6px 2px 10px; font-size: 16px; font-weight: 700; color: #98a2b3; cursor: pointer; position: relative; }
.soc-tabs button.on { color: #0f172a; }
.soc-tabs button.on::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 22px; height: 3px; border-radius: 999px; background: #4be619; }
.soc-list { display: grid; gap: 4px; }
.soc-user-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid #f3f4f6; }
.soc-user-main { flex: 1; display: flex; align-items: center; gap: 12px; border: 0; background: transparent; cursor: pointer; text-align: left; min-width: 0; padding: 0; }
.soc-user-meta { min-width: 0; }
.soc-user-meta strong { display: block; color: #1f2933; font-size: 15px; }
.soc-user-meta small { color: #98a2b3; font-size: 12px; }
.soc-follow-btn { flex: 0 0 auto; border: 1px solid #4be619; background: #fff; color: #4be619; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.soc-follow-btn.on { border-color: #d7dde4; background: #f1f4f7; color: #6b7280; }

/* 他人主页 */
.soc-prof-hero { display: flex; align-items: center; gap: 14px; padding: 16px 6px 6px; }
.soc-prof-id h2 { margin: 0 0 4px; font-size: 22px; color: #1f2933; }
.soc-prof-id span { color: #98a2b3; font-size: 13px; }
.soc-prof-counts { display: flex; gap: 26px; padding: 10px 8px; color: #6b7280; font-size: 14px; }
.soc-prof-counts b { color: #1f2933; font-size: 17px; margin-right: 3px; }
.soc-prof-actions { display: flex; gap: 10px; padding: 8px 6px 16px; }
.soc-prof-actions .soc-btn { flex: 1; }
.soc-prof-stats { background: #f8fafc; border-radius: 16px; padding: 14px 16px; margin: 0 2px; }
.soc-prof-stats h3 { margin: 0 0 12px; font-size: 15px; color: #1f2933; }
.soc-prof-posts { margin: 18px 2px 0; }
.soc-prof-posts > h3 { margin: 0 0 12px; font-size: 15px; color: #1f2933; }
.soc-prof-feed { display: flex; flex-direction: column; gap: 12px; }
.soc-prof-feed .soc-post { position: relative; }
.soc-prof-feed .soc-post-time { color: #9aa7b4; font-size: 12px; }
.soc-prof-empty { color: #9aa7b4; font-size: 14px; text-align: center; padding: 18px 0; }
.soc-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
.soc-stat-grid div { display: grid; justify-items: center; text-align: center; gap: 2px; }
.soc-stat-grid span { color: #98a2b3; font-size: 12px; }
.soc-stat-grid b { color: #1f2933; font-size: 22px; }
.soc-stat-grid em { color: #98a2b3; font-size: 11px; font-style: normal; }

/* 私信 */
.soc-chat { display: flex; flex-direction: column; }
.soc-chat-scroll { flex: 1; overflow-y: auto; padding: 14px 8px 8px; display: flex; flex-direction: column; gap: 10px; min-height: 50vh; }
.soc-bubble { max-width: 76%; align-self: flex-start; }
.soc-bubble.mine { align-self: flex-end; }
.soc-bubble p { margin: 0; padding: 9px 13px; border-radius: 14px; background: #f1f4f7; color: #1f2933; font-size: 15px; line-height: 1.45; }
.soc-bubble.mine p { background: linear-gradient(135deg, #58d42d, #4be619); color: #fff; }
.soc-bubble time { display: block; margin-top: 3px; font-size: 11px; color: #b0b8c4; text-align: right; }
.soc-bubble:not(.mine) time { text-align: left; }
.soc-chat-input { display: flex; gap: 8px; padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #eef1f4; background: #fff; }
.soc-chat-input input { flex: 1; border: 1px solid #e2e8f0; border-radius: 999px; padding: 10px 16px; font-size: 15px; background: #f8fafc; }

/* 消息中心 */
.soc-thread { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; padding: 12px 6px; border-bottom: 1px solid #f3f4f6; cursor: pointer; text-align: left; }
.soc-thread-meta { flex: 1; min-width: 0; }
.soc-thread-meta strong { display: block; color: #1f2933; font-size: 15px; }
.soc-thread-meta small { color: #98a2b3; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.soc-thread-side { text-align: right; }
.soc-thread-side time { display: block; color: #b0b8c4; font-size: 11px; }
.soc-unread { display: inline-block; margin-top: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 11px; font-style: normal; line-height: 16px; }

/* 学习圈 */
.soc-circle { padding: 4px 0 14px; }
.soc-compose { background: #f8fafc; border: 1px solid #eef1f4; border-radius: 16px; padding: 12px; margin-bottom: 14px; }
.soc-compose textarea { width: 100%; box-sizing: border-box; border: 0; background: transparent; resize: none; min-height: 56px; font-size: 15px; line-height: 1.5; outline: none; }
.soc-compose-foot { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.soc-topic { flex: 1; border: 0; background: transparent; color: #4be619; font-size: 13px; outline: none; }
.soc-feed { display: grid; gap: 12px; }
.soc-post { background: #fff; border: 1px solid #eef1f4; border-radius: 16px; padding: 14px; }
.soc-post-head { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 0; cursor: pointer; }
.soc-post-who strong { display: block; color: #1f2933; font-size: 15px; }
.soc-post-who small { color: #98a2b3; font-size: 12px; }
.soc-post-topic { display: inline-block; margin: 8px 0 0; color: #4be619; font-size: 13px; font-weight: 700; }
.soc-post-body { margin: 8px 0 10px; color: #374151; font-size: 15px; line-height: 1.6; white-space: pre-wrap; }
.soc-post-foot { display: flex; gap: 16px; border-top: 1px solid #f3f4f6; padding-top: 8px; }
.soc-like { border: 0; background: transparent; color: #98a2b3; font-size: 14px; cursor: pointer; }
.soc-like.on { color: #ef4444; }

/* ==========================================================================
   全局搜词浮层 vsearch-* + 词典卡
   ========================================================================== */
.vsearch-wrap { position: fixed; inset: 0; z-index: 10060; background: #fff; display: flex; flex-direction: column; }
.vsearch { display: flex; flex-direction: column; height: 100%; max-width: 760px; margin: 0 auto; width: 100%; }
.vsearch-bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px calc(12px + env(safe-area-inset-top)); border-bottom: 1px solid #eef1f4; }
.vsearch-icon { font-size: 20px; color: #98a2b3; }
.vsearch-input { flex: 1; border: 0; outline: none; font-size: 17px; background: transparent; color: #1f2933; }
.vsearch-close { border: 0; background: transparent; color: #4be619; font-size: 15px; font-weight: 700; cursor: pointer; }
.vsearch-body { flex: 1; overflow-y: auto; padding: 8px 0; }
.vsearch-hint { padding: 28px 18px; color: #b0b8c4; font-size: 14px; text-align: center; }
.vsearch-list { list-style: none; margin: 0; padding: 0; }
.vsearch-item { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid #f3f4f6; cursor: pointer; }
.vsearch-item strong { color: #1f2933; font-size: 16px; }
.vsearch-item span { flex: 1; color: #6b7280; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsearch-item i { color: #cbd5e1; font-style: normal; }
.vsearch-empty { padding: 30px 18px; text-align: center; color: #98a2b3; }
.vsearch-empty .soc-btn { margin-top: 12px; }
.vsearch-dict-loading { padding: 30px 18px; text-align: center; color: #98a2b3; }
.vsearch-dict { padding: 14px 18px 40px; }
.vsearch-dict-back { border: 0; background: transparent; color: #4be619; font-size: 14px; font-weight: 700; cursor: pointer; padding: 0 0 12px; }
.vsd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vsd-head h2 { margin: 0; font-size: 28px; color: #1f2933; }
.vsd-ipa { margin: 4px 0 0; color: #8a94a6; font-size: 15px; }
.vsd-actions { display: flex; gap: 8px; flex-shrink: 0; }
.vsd-btn { border: 1px solid #d7dde4; background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; color: #1f2933; }
.vsd-btn.on { border-color: #4be619; background: #ecfdf5; color: #33a315; }
.vsd-sec { margin-top: 18px; }
.vsd-sec h3 { margin: 0 0 8px; font-size: 14px; color: #98a2b3; font-weight: 700; }
.vsd-pos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vsd-pos li { color: #1f2933; font-size: 15px; }
.vsd-tag { display: inline-block; min-width: 32px; margin-right: 8px; color: #4be619; font-weight: 700; font-style: italic; }
.vsd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vsd-chips span { background: #f1f4f7; border-radius: 8px; padding: 5px 10px; font-size: 14px; color: #475467; }
.vsd-ex { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vsd-ex li { border-left: 3px solid #b7f699; padding-left: 12px; }
.vsd-en { margin: 0; color: #1f2933; font-size: 15px; line-height: 1.5; }
.vsd-zh { margin: 3px 0 0; color: #8a94a6; font-size: 14px; }

/* 我的 → 历史 子页（听书/阅读/漫画 三页签可滑动） */
.me-history-tabs { display: flex; gap: 22px; border-bottom: 1px solid #eef1f4; margin: 4px 2px 12px; }
.me-history-tabs button { border: 0; background: transparent; padding: 6px 2px 10px; font-size: 16px; font-weight: 700; color: #98a2b3; cursor: pointer; position: relative; }
.me-history-tabs button.on { color: #0f172a; }
.me-history-tabs button.on::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 22px; height: 3px; border-radius: 999px; background: #4be619; }
.me-history-body { min-height: 50vh; }

/* 大屏手机/折叠屏（≤1024px）让"我的"页全宽，避免 760 上限造成两侧留白显窄 */
@media (max-width: 1024px) {
  .me-shell-v2 { max-width: 100%; }
}

/* ==========================================================================
   学习圈发布：悬浮按钮 + 全屏编辑器（图片/书籍/文章/课程）+ 帖子附件
   ========================================================================== */
.soc-fab {
  position: fixed; right: 18px; bottom: calc(80px + env(safe-area-inset-bottom));
  width: 54px; height: 54px; border-radius: 50%; border: 0;
  background: linear-gradient(135deg, #58d42d, #4be619); color: #fff;
  font-size: 24px; box-shadow: 0 8px 22px rgba(75, 230, 25, .42); cursor: pointer; z-index: 30;
}
.soc-post-imgs { display: grid; gap: 4px; margin: 6px 0 2px; }
.soc-post-imgs.n1 { grid-template-columns: minmax(0, 220px); }
.soc-post-imgs.n2 { grid-template-columns: repeat(2, 1fr); }
.soc-post-imgs.n3 { grid-template-columns: repeat(3, 1fr); }
.soc-post-imgs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #eef1f4; }
.soc-post-ref { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; padding: 8px 10px; background: #f4f6f9; border-radius: 10px; }
.soc-ref-cover { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 6px; display: grid; place-items: center; background: #e2e8f0; font-size: 20px; overflow: hidden; }
.soc-ref-cover img { width: 100%; height: 100%; object-fit: cover; }
.soc-ref-text { min-width: 0; color: #1f2933; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-ref-text em { display: block; font-style: normal; color: #98a2b3; font-size: 11px; }

.soc-composer-wrap { position: fixed; inset: 0; z-index: 10070; background: #fff; }
.soc-composer { display: flex; flex-direction: column; height: 100%; max-width: 760px; margin: 0 auto; }
.soc-cmp-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px calc(12px + env(safe-area-inset-top)); border-bottom: 1px solid #eef1f4; }
.soc-cmp-bar strong { font-size: 16px; color: #1f2933; }
.soc-cmp-close { border: 0; background: #f1f4f7; width: 32px; height: 32px; border-radius: 50%; font-size: 15px; color: #475467; cursor: pointer; }
.soc-cmp-pub { border: 0; background: linear-gradient(135deg, #58d42d, #4be619); color: #fff; border-radius: 999px; padding: 7px 18px; font-size: 15px; font-weight: 700; cursor: pointer; }
.soc-cmp-pub:disabled { opacity: .6; }
.soc-cmp-scroll { flex: 1; overflow-y: auto; padding: 14px 16px; }
.soc-cmp-text { width: 100%; box-sizing: border-box; border: 0; outline: none; resize: none; min-height: 120px; font-size: 17px; line-height: 1.6; color: #1f2933; }
.soc-cmp-text::placeholder { color: #b0b8c4; }
.soc-cmp-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.soc-cmp-img { position: relative; width: 92px; height: 92px; }
.soc-cmp-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.soc-cmp-img button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(15,23,42,.7); color: #fff; font-size: 11px; cursor: pointer; }
.soc-cmp-chip { display: inline-flex; align-items: center; gap: 8px; margin: 8px 8px 0 0; padding: 8px 12px; background: #f4f6f9; border-radius: 10px; font-size: 14px; color: #1f2933; max-width: 100%; }
.soc-cmp-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-cmp-chip button { border: 0; background: transparent; color: #98a2b3; font-size: 13px; cursor: pointer; }
.soc-cmp-topic { border: 0; border-top: 1px solid #eef1f4; outline: none; padding: 14px 16px; font-size: 15px; color: #4be619; }
.soc-cmp-tools { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #eef1f4; padding-bottom: env(safe-area-inset-bottom); }
.soc-cmp-tools button { border: 0; background: transparent; padding: 12px 0; display: grid; justify-items: center; gap: 4px; color: #475467; cursor: pointer; }
.soc-cmp-tools span { font-size: 22px; }
.soc-cmp-tools em { font-style: normal; font-size: 12px; }

.soc-picker-wrap { position: fixed; inset: 0; z-index: 10080; background: rgba(15,23,42,.45); display: flex; align-items: flex-end; justify-content: center; }
.soc-picker { width: 100%; max-width: 560px; max-height: 70vh; display: flex; flex-direction: column; background: #fff; border-radius: 18px 18px 0 0; }
.soc-picker header { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-bottom: 1px solid #f0f2f4; }
.soc-picker header strong { font-size: 16px; color: #1f2933; }
.soc-picker-cancel { border: 0; background: transparent; color: #8a94a6; font-size: 15px; cursor: pointer; }
.soc-picker-list { overflow-y: auto; padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); }
.soc-picker-row { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; padding: 11px 16px; cursor: pointer; text-align: left; border-bottom: 1px solid #f5f6f8; }
.soc-picker-row span:last-child { min-width: 0; color: #1f2933; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-pick-cover { width: 38px; height: 50px; flex: 0 0 38px; object-fit: cover; border-radius: 5px; background: #e2e8f0; }
.soc-pick-ic { font-size: 22px; }

/* 取消关注确认面板（仿主流 App 底部弹层：提示 + 红色操作 + 关闭） */
.soc-confirm-wrap {
  position: fixed; inset: 0; z-index: 10090;
  background: rgba(15, 23, 42, .45);
  display: flex; align-items: flex-end; justify-content: center;
}
.soc-confirm {
  width: 100%; max-width: 560px;
  background: #fff; border-radius: 18px 18px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.soc-confirm-msg {
  margin: 0; padding: 20px 18px;
  text-align: center; color: #1f2933; font-size: 16px; font-weight: 600;
  border-bottom: 1px solid #f0f2f4;
}
.soc-confirm-danger, .soc-confirm-close {
  display: block; width: 100%; border: 0; background: transparent;
  padding: 16px 0; font-size: 17px; cursor: pointer;
}
.soc-confirm-danger { color: #e02424; font-weight: 700; border-bottom: 8px solid #f4f6f9; }
.soc-confirm-close { color: #1f2933; }

/* ===================================================================
   完成后流程：今日学习小结 / Good Job / 打卡分享卡片  (fix112)
   =================================================================== */
.summary-shell {
  min-height: 100vh;
  padding: 0 0 calc(96px + env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(51, 163, 21, .10), transparent 60%),
    linear-gradient(180deg, #f3faf7 0%, #f7f8f6 38%, #ffffff 100%);
}
.summary-top {
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center;
  gap: 8px; padding: 12px clamp(14px,4vw,22px);
  padding-top: calc(12px + env(safe-area-inset-top));
  background: linear-gradient(180deg, rgba(247,250,248,.96), rgba(247,250,248,.72));
  backdrop-filter: saturate(1.2) blur(8px);
}
.summary-title { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: .5px; }
.sm-iconbtn {
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(51, 163, 21, .10); color: var(--brand-ink);
  font-size: 24px; line-height: 1; display: grid; place-items: center;
}
.sm-iconbtn.light { background: rgba(255,255,255,.22); color: #fff; }
.sm-iconbtn:active { transform: scale(.94); }
.sm-mask {
  border: 1px solid rgba(51, 163, 21, .28); background: #fff; color: var(--brand-ink);
  border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.sm-mask.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.summary-sub { margin: 6px clamp(16px,4.4vw,24px) 4px; color: var(--muted); font-size: 14px; }
.summary-sub b { color: var(--brand); }

.summary-list { list-style: none; margin: 8px clamp(12px,4vw,22px) 0; padding: 0; display: grid; gap: 12px; }
.summary-item {
  background: #fff; border-radius: 20px; padding: 16px 18px;
  box-shadow: 0 8px 22px rgba(36,42,46,.06); border: 1px solid #eef0ec;
  animation: si-rise .42s cubic-bezier(.2,.8,.25,1) backwards;
  animation-delay: calc(var(--i,0) * 38ms);
}
@keyframes si-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.si-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.si-word { font-size: 24px; font-weight: 800; color: #16242b; letter-spacing: .2px; font-family: Georgia, "Times New Roman", serif; }
.si-audio {
  flex: none; width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(51, 163, 21, .10); color: var(--brand); display: grid; place-items: center;
}
.si-audio:active { transform: scale(.9); background: rgba(51, 163, 21, .2); }
.si-defs { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; transition: filter .2s; }
.si-ipa { color: #92a0a8; font-size: 14px; font-family: Georgia, serif; margin-right: 4px; }
.si-pos { color: var(--brand); font-weight: 800; font-size: 14px; font-style: italic; }
.si-trans { color: #41525c; font-size: 16px; line-height: 1.5; }
.si-defs.masked { filter: blur(7px); cursor: pointer; user-select: none; }
.si-defs.masked.revealed { filter: none; }

.summary-challenges { margin: 26px clamp(12px,4vw,22px) 0; }
.sc-title { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0 4px 12px; display: flex; align-items: baseline; gap: 10px; }
.sc-title span { font-size: 12px; font-weight: 600; color: var(--muted); }
.summary-challenges .challenge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.summary-challenges .challenge-card {
  text-align: left; border: 1px solid #e7eae6; border-radius: 18px; padding: 15px 16px; cursor: pointer;
  background: linear-gradient(160deg, #ffffff, #f5faf8); transition: transform .15s, box-shadow .15s;
}
.summary-challenges .challenge-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(51, 163, 21, .12); }
.summary-challenges .challenge-card strong { display: block; font-size: 15px; color: #16242b; margin-bottom: 4px; }
.summary-challenges .challenge-card p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; }

.summary-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8;
  display: flex; align-items: center; gap: 14px;
  padding: 12px clamp(16px,5vw,28px) calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255,255,255,0), #ffffff 38%);
}
.btn-text.subtle { color: var(--muted); background: none; border: none; font-size: 13px; cursor: pointer; white-space: nowrap; }
.btn-summary-done {
  flex: 1; border: none; cursor: pointer; border-radius: 999px; padding: 16px;
  font-size: 17px; font-weight: 800; color: #fff; letter-spacing: 2px;
  background: linear-gradient(135deg, #5dcd1b, #33a315);
  box-shadow: 0 12px 26px rgba(51, 163, 21, .34);
}
.btn-summary-done:active { transform: translateY(1px); }

/* ——— Good Job ——— */
.goodjob-shell {
  min-height: 100vh; display: flex; flex-direction: column;
  padding: 0 clamp(18px,5vw,30px) calc(30px + env(safe-area-inset-bottom));
  color: #fff;
  background:
    radial-gradient(130% 80% at 50% -10%, #7cd241 0%, #5bc61c 34%, #33a315 70%, #2d8d10 100%);
  position: relative; overflow: hidden;
}
.goodjob-shell::before, .goodjob-shell::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
}
.goodjob-shell::before { width: 320px; height: 320px; top: -80px; right: -90px; }
.goodjob-shell::after  { width: 260px; height: 260px; bottom: 40px; left: -110px; background: radial-gradient(circle, rgba(255,225,150,.22), transparent 70%); }
.gj-top { padding-top: calc(12px + env(safe-area-inset-top)); }
.gj-hero { text-align: center; margin-top: 12px; position: relative; z-index: 1; }
.gj-badge {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
  padding: 5px 14px; border-radius: 999px; color: #f4ffea;
}
.gj-title {
  margin: 16px 0 6px; font-size: clamp(54px, 16vw, 88px); line-height: .95;
  font-family: "Brush Script MT", "Segoe Script", cursive, Georgia; font-weight: 800;
  background: linear-gradient(180deg, #ffffff, #eaffd8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 8px 30px rgba(0,0,0,.12); transform: rotate(-3deg);
  animation: gj-pop .6s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes gj-pop { from { opacity: 0; transform: rotate(-3deg) scale(.7); } to { opacity: 1; transform: rotate(-3deg) scale(1); } }
.gj-praise { font-size: 18px; font-weight: 600; color: #f4ffea; margin: 6px 0 0; }
.gj-praise b { font-size: 22px; color: #fff; }

.gj-card {
  position: relative; z-index: 1; margin: 26px auto 0; width: 100%; max-width: 460px;
  background: rgba(255,255,255,.96); border-radius: 28px; padding: 24px;
  display: flex; align-items: center; gap: 22px; color: #16242b;
  box-shadow: 0 22px 50px rgba(28, 86, 9, .28);
  animation: si-rise .5s .15s cubic-bezier(.2,.8,.25,1) backwards;
}
.gj-ring { position: relative; width: 124px; height: 124px; flex: none; }
.gj-ring svg { width: 124px; height: 124px; transform: rotate(-90deg); }
.gj-ring-bg { fill: none; stroke: #eaefe6; stroke-width: 11; }
.gj-ring-fg { fill: none; stroke: url(#gjgrad); stroke: #5dcd1b; stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.3,1,.4,1); animation: gj-ring-in 1.1s .2s both; }
@keyframes gj-ring-in { from { stroke-dashoffset: 327; } }
.gj-ring-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.gj-ring-num b { font-size: 38px; font-weight: 800; color: var(--brand-ink); }
.gj-ring-num span { font-size: 13px; color: var(--muted); }
.gj-lines { flex: 1; min-width: 0; }
.gj-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px; font-size: 15px; color: #44555d; }
.gj-line b { font-size: 18px; font-weight: 800; color: #16242b; }
.gj-line.muted { font-size: 13px; color: #8a979e; justify-content: flex-start; }
.gj-review-chip {
  margin: 6px 0 0; display: inline-block; font-size: 13px; font-weight: 700; color: var(--brand-ink);
  background: rgba(51, 163, 21, .10); border-radius: 10px; padding: 7px 12px;
}
.gj-review-chip b { color: var(--brand); }

.goodjob-shell .sub-progress { position: relative; z-index: 1; max-width: 460px; margin: 16px auto 0; }
.goodjob-shell .sub-progress-text { color: #f4ffea; }
.gj-footer { position: relative; z-index: 1; margin-top: auto; padding-top: 26px; text-align: center; }
.btn-checkin {
  width: 100%; max-width: 460px; border: none; cursor: pointer; border-radius: 999px; padding: 17px;
  font-size: 17px; font-weight: 800; letter-spacing: 1px; color: var(--brand-ink);
  background: linear-gradient(135deg, #fff6d8, #ffe9a8);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}
.btn-checkin:active { transform: translateY(1px); }
.btn-text.light { color: rgba(255,255,255,.85); background: none; border: none; cursor: pointer; font-size: 14px; margin-top: 14px; }

/* ——— 打卡分享卡片 ——— */
.punch-shell {
  min-height: 100vh; display: flex; flex-direction: column; position: relative;
  padding: 0 clamp(12px,4vw,24px) calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #2d4422 0%, #394a30 60%, #3e4f34 100%);
  color: #fff;
}
.punch-top {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center;
  padding: 12px 4px; padding-top: calc(12px + env(safe-area-inset-top));
}
.punch-title { text-align: center; font-size: 17px; font-weight: 800; letter-spacing: 1px; }
.punch-coins-top { font-size: 14px; font-weight: 700; color: #ffe9a8; }
.punch-stage { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 0; }
.punch-arrow {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; font-size: 24px; line-height: 1; display: grid; place-items: center;
}
.punch-arrow:active { transform: scale(.92); background: rgba(255,255,255,.22); }
.punch-card-wrap {
  position: relative; width: min(74vw, 340px); aspect-ratio: 2/3; border-radius: 24px; overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.45); background: #223; touch-action: pan-y;
  animation: card-fade .35s ease;
}
@keyframes card-fade { from { opacity: .35; transform: scale(.97); } to { opacity: 1; transform: none; } }
.punch-canvas { display: block; width: 100%; height: 100%; }
.punch-loading {
  position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px;
  color: rgba(255,255,255,.7); background: rgba(47, 61, 40, .4);
}
.punch-dots { display: flex; justify-content: center; gap: 8px; margin: 16px 0 4px; }
.punch-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.28); cursor: pointer; transition: all .2s; }
.punch-dots span.on { width: 22px; border-radius: 4px; background: #ffe9a8; }
.punch-theme-name { text-align: center; font-size: 13px; color: rgba(255,255,255,.6); margin: 0 0 14px; }
.punch-footer { text-align: center; }
.btn-share {
  width: 100%; max-width: 420px; border: none; cursor: pointer; border-radius: 999px; padding: 16px;
  font-size: 16px; font-weight: 800; color: #304227; letter-spacing: .5px;
  background: linear-gradient(135deg, #ffe9a8, #ffd45e);
  box-shadow: 0 14px 30px rgba(255,200,80,.28);
}
.btn-share:active { transform: translateY(1px); }
.punch-coins-line { margin: 12px 0 0; font-size: 13px; color: rgba(255,255,255,.7); }
.punch-coins-line b { color: #ffe9a8; font-size: 15px; }
.pc-eq { color: rgba(255,255,255,.45); }
.punch-toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translate(-50%, 16px);
  background: rgba(47, 61, 40, .94); color: #fff; padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 700;
  opacity: 0; pointer-events: none; transition: all .3s; z-index: 30; box-shadow: 0 10px 24px rgba(0,0,0,.3);
}
.punch-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   对话练习 · 复读机 (sceneShadowing)  +  交流实战 AI 电话
   ============================================================ */
.vy-shadow { --sc: var(--brand, #33a315); --sc-lite: #58d42d; }
/* 对话列表 / 句子列表折叠开关（默认收起，省屏幕空间） */
.vy-shadow-collapse { margin: 6px 0 10px; }
.vy-shadow-coll-head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  border: 1.5px solid #e7e2d8; background: #fff; color: #4a4034; border-radius: 14px;
  padding: 11px 16px; font-size: 14.5px; font-weight: 750; cursor: pointer; transition: border-color .15s;
}
.vy-shadow-coll-head:hover { border-color: var(--sc, #0f766e); }
.vy-shadow-coll-caret { font-size: 12px; color: #9b948a; transition: transform .2s; }
.vy-shadow-coll-head.open .vy-shadow-coll-caret { transform: rotate(180deg); }
.vy-shadow-coll-body { margin: 8px 0 0 !important; }
/* hidden 属性要能压过下面 .vy-shadow-tabs/.vy-shadow-lines 的 display 设定 */
.vy-shadow-tabs[hidden], .vy-shadow-lines[hidden] { display: none !important; }
.vy-shadow-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; }
.vy-shadow-tab {
  border: 1.5px solid #e7e2d8; background: #fff; color: #5a5347; border-radius: 999px;
  padding: 8px 16px; font-size: 13.5px; font-weight: 650; cursor: pointer; transition: all .15s;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vy-shadow-tab:hover { border-color: var(--sc); }
.vy-shadow-tab.on { background: var(--sc); border-color: var(--sc); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--sc) 30%, transparent); }
.vy-shadow-lines {
  max-height: 230px; overflow-y: auto; border: 1px solid #ece7dd; border-radius: 16px;
  background: #fbfaf7; padding: 6px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 4px;
}
.vy-shadow-lineitem {
  display: flex; gap: 11px; align-items: flex-start; text-align: left; width: 100%;
  background: transparent; border: 0; border-radius: 12px; padding: 10px 12px; cursor: pointer; transition: background .12s;
}
.vy-shadow-lineitem:hover { background: #fff; }
.vy-shadow-lineitem.on { background: color-mix(in srgb, var(--sc) 12%, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sc) 40%, transparent); }
.vy-shadow-lnum {
  flex: 0 0 24px; height: 24px; border-radius: 50%; background: #ece7dd; color: #8a8170;
  font-size: 12px; font-weight: 800; display: grid; place-items: center; margin-top: 1px;
}
.vy-shadow-lineitem.on .vy-shadow-lnum { background: var(--sc); color: #fff; }
.vy-shadow-lbody { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vy-shadow-lspk { font-size: 11px; font-weight: 800; color: var(--sc); letter-spacing: .04em; }
.vy-shadow-ltext { font-size: 15px; font-weight: 600; color: #2b2722; line-height: 1.4; }
.vy-shadow-lzh { font-size: 12.5px; color: #9a9384; }
.vy-shadow-player {
  border-radius: 22px; padding: 22px 20px 20px; background: linear-gradient(180deg,#ffffff,#fbf8f3);
  box-shadow: 0 10px 30px rgba(40,30,20,.07), inset 0 0 0 1px #efeae0;
}
.vy-shadow-now { font-size: 14px; color: #6a6253; }
.vy-shadow-now strong { color: #211d18; font-weight: 750; }
.vy-shadow-now-zh { font-size: 12.5px; color: #a39b8c; margin: 2px 0 12px; }
.vy-shadow-statline { font-size: 12.5px; color: #8d8676; margin-bottom: 8px; }
.vy-shadow-statline b { color: var(--sc); font-weight: 800; }
.vy-shadow-track {
  position: relative; height: 56px; border-radius: 14px; cursor: pointer; touch-action: none;
  background: linear-gradient(90deg, #2f6df0 0%, #5b8af5 38%, #f0a48f 70%, var(--sc) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); margin: 4px 0 6px; overflow: visible;
}
.vy-shadow-region { position: absolute; top: 0; bottom: 0; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.vy-shadow-played { position: absolute; top: 0; bottom: 0; left: 0; background: rgba(255,255,255,.22); width: 0; }
.vy-shadow-handle { position: absolute; top: -4px; bottom: -4px; width: 16px; transform: translateX(-50%); cursor: ew-resize; z-index: 3; display: grid; place-items: center; }
.vy-shadow-handle span { display: block; width: 16px; height: calc(100% + 0px); border-radius: 6px; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.22); border: 1.5px solid rgba(0,0,0,.06); }
.vy-shadow-handle.ah span { background: #f59e0b; }
.vy-shadow-handle.bh span { background: var(--sc); }
.vy-shadow-head { position: absolute; top: -3px; bottom: -3px; width: 3px; background: #fff; transform: translateX(-50%); box-shadow: 0 0 6px rgba(0,0,0,.3); z-index: 2; pointer-events: none; }
.vy-shadow-times { display: flex; justify-content: space-between; font-size: 12px; color: #9a9384; font-variant-numeric: tabular-nums; margin-bottom: 16px; }
.vy-shadow-ctl { display: flex; align-items: center; justify-content: center; gap: 28px; margin-bottom: 18px; }
.vy-shadow-mark {
  width: 62px; height: 62px; border-radius: 50%; border: 1.5px solid #e7e2d8; background: #fff;
  font-size: 15px; font-weight: 800; color: #4a4438; cursor: pointer; transition: all .15s; box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.vy-shadow-mark:active { transform: scale(.94); }
.vy-shadow-mark:hover { border-color: var(--sc); color: var(--sc); }
.vy-shadow-play {
  width: 78px; height: 78px; border-radius: 50%; border: 0; cursor: pointer; font-size: 30px; color: #fff;
  background: linear-gradient(135deg, var(--sc), var(--sc-lite, #58d42d));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--sc) 38%, transparent); display: grid; place-items: center; transition: transform .12s;
}
.vy-shadow-play:active { transform: scale(.93); }
.vy-shadow-label { font-size: 12.5px; font-weight: 700; color: #8d8676; margin: 4px 0 8px; }
.vy-shadow-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.vy-shadow-pill {
  flex: 1 1 0; min-width: 52px; border: 1.5px solid #e7e2d8; background: #fff; color: #5a5347;
  border-radius: 999px; padding: 9px 4px; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: all .15s;
}
.vy-shadow-pill:hover { border-color: var(--sc); }
.vy-shadow-pill.on { background: var(--sc); border-color: var(--sc); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--sc) 28%, transparent); }
.vy-shadow-foot { display: flex; gap: 10px; margin-top: 6px; }
.vy-shadow-nav {
  flex: 1; border: 1.5px solid #e7e2d8; background: #fff; color: #3a352c; border-radius: 14px;
  padding: 13px 8px; font-size: 14px; font-weight: 750; cursor: pointer; transition: all .15s;
}
.vy-shadow-nav:hover { border-color: var(--sc); }
.vy-shadow-snow {
  flex: 1.3; border: 0; border-radius: 14px; padding: 13px 8px; font-size: 14.5px; font-weight: 800; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, var(--sc), var(--sc-lite, #58d42d));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--sc) 30%, transparent);
}
.vy-shadow-snow:active { transform: scale(.97); }

/* —— 交流实战 hero —— */
.vy-speak-hero {
  display: flex; gap: 16px; align-items: flex-start; padding: 18px 18px; border-radius: 18px; margin-bottom: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent,#e8542f) 13%, #fff), color-mix(in srgb, var(--accent,#e8542f) 5%, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent,#e8542f) 22%, transparent);
}
.vy-speak-hero-ic { font-size: 34px; line-height: 1; }
.vy-speak-hero h2 { margin: 0 0 6px; font-size: 17px; color: #25201a; }
.vy-speak-hero p { margin: 0; font-size: 13.5px; color: #6a6253; line-height: 1.6; }
.vy-speak-start { background: linear-gradient(135deg, var(--brand,#33a315), #58d42d) !important; }
.vy-speak-start .hand-phone, .vy-ft-call .hand-phone { vertical-align: -3px; }

/* —— AI 电话 modal —— */
.vy-phone-modal {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(120% 120% at 50% 0%, #20303a 0%, #121a20 60%, #0b1014 100%);
  animation: vyPhoneIn .25s ease;
}
@keyframes vyPhoneIn { from { opacity: 0; } to { opacity: 1; } }
.vy-phone-card { width: 100%; max-width: 460px; max-height: 92vh; display: flex; flex-direction: column; }
.vy-phone-stage { display: flex; flex-direction: column; align-items: center; text-align: center; color: #eef3f5; min-height: 0; }
.vy-phone-avatar {
  width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font-size: 44px; margin: 8px 0 14px;
  background: linear-gradient(135deg, #2f6df0, #6aa0ff); box-shadow: 0 16px 40px rgba(47,109,240,.45);
  animation: vyPhonePulse 2.2s ease-in-out infinite;
}
@keyframes vyPhonePulse { 0%,100% { box-shadow: 0 16px 40px rgba(47,109,240,.4); } 50% { box-shadow: 0 16px 60px rgba(47,109,240,.7); } }
.vy-phone-stage h2 { margin: 0 0 4px; font-size: 21px; color: #fff; }
.vy-phone-sub { margin: 0 0 12px; font-size: 13.5px; color: #9fb3bd; }
.vy-phone-task { font-size: 13px; color: #cfe0e8; background: rgba(255,255,255,.08); border-radius: 999px; padding: 7px 16px; margin-bottom: 14px; max-width: 100%; }
.vy-phone-transcript {
  width: 100%; flex: 1; min-height: 180px; max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
  padding: 8px 4px 4px; margin-bottom: 14px;
}
.vy-phone-line { display: flex; flex-direction: column; gap: 3px; max-width: 88%; }
.vy-phone-line.ai { align-self: flex-start; align-items: flex-start; }
.vy-phone-line.user { align-self: flex-end; align-items: flex-end; }
.vy-phone-who { font-size: 11px; font-weight: 800; letter-spacing: .03em; color: #8fa6b1; padding: 0 4px; }
.vy-phone-bubble { font-size: 15px; line-height: 1.5; padding: 10px 14px; border-radius: 16px; text-align: left; }
.vy-phone-line.ai .vy-phone-bubble { background: #2b3a44; color: #eaf2f6; border-bottom-left-radius: 5px; }
.vy-phone-line.user .vy-phone-bubble { background: linear-gradient(135deg, #2f6df0, #4f86ff); color: #fff; border-bottom-right-radius: 5px; }
.vy-phone-mic { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #8fa6b1; margin-bottom: 14px; }
.vy-phone-mic-dot { width: 9px; height: 9px; border-radius: 50%; background: #4b5a64; }
.vy-phone-mic.live .vy-phone-mic-dot { background: #36d399; box-shadow: 0 0 0 0 rgba(54,211,153,.7); animation: vyMic 1.4s infinite; }
@keyframes vyMic { 0% { box-shadow: 0 0 0 0 rgba(54,211,153,.6); } 70% { box-shadow: 0 0 0 9px rgba(54,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(54,211,153,0); } }
.vy-phone-hangup {
  width: 66px; height: 66px; border-radius: 50%; border: 0; background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff;
  font-size: 22px; cursor: pointer; box-shadow: 0 12px 30px rgba(239,68,68,.5); transition: transform .12s;
}
.vy-phone-hangup:active { transform: scale(.92); }
.vy-phone-fineprint { font-size: 11px; color: #6b7e88; margin-top: 12px; }
/* review + feedback */
.vy-phone-review { width: 100%; display: flex; flex-direction: column; color: #eef3f5; max-height: 92vh; }
.vy-phone-review h2 { margin: 4px 0 12px; font-size: 19px; color: #fff; text-align: center; }
.vy-phone-reviewlog { flex: 0 1 auto; overflow-y: auto; max-height: 34vh; display: flex; flex-direction: column; gap: 8px; padding: 4px; margin-bottom: 12px; }
.vy-phone-fb { background: rgba(255,255,255,.06); border-radius: 16px; padding: 16px; margin-bottom: 14px; overflow-y: auto; max-height: 38vh; }
.vy-phone-fb h3 { margin: 0 0 8px; font-size: 16px; color: #ffd9a0; }
.vy-phone-fb-sum { font-size: 14px; line-height: 1.6; color: #e6eef2; margin: 0 0 12px; }
.vy-phone-fb-block { margin-bottom: 12px; }
.vy-phone-fb-block b { display: block; font-size: 13px; color: #9fc7e0; margin-bottom: 5px; }
.vy-phone-fb-block ul { margin: 0; padding-left: 18px; }
.vy-phone-fb-block li { font-size: 13.5px; line-height: 1.55; color: #d9e4ea; margin-bottom: 4px; }
.vy-phone-fb-block s { color: #ff9b9b; }
.vy-phone-fb-block strong { color: #8ff0c0; }
.vy-phone-fb-loading, .vy-phone-fb-skip { font-size: 13.5px; color: #9fb3bd; text-align: center; }
.vy-phone-review-actions { display: flex; gap: 10px; }
.vy-phone-review-actions .btn-ghost { flex: 1; color: #cfe0e8; border-color: rgba(255,255,255,.2); }
.vy-phone-review-actions .btn-primary { flex: 1.4; }

/* 小结页"再来一组"按钮 (fix113) */
.btn-new-round {
  display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 14px; cursor: pointer;
  border: 1.5px solid rgba(51, 163, 21, .28); border-radius: 18px; padding: 15px 18px; text-align: left;
  background: linear-gradient(135deg, #effff9 0%, #e7f7f1 100%);
  box-shadow: 0 8px 20px rgba(51, 163, 21, .10); transition: transform .15s, box-shadow .15s;
}
.btn-new-round:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(51, 163, 21, .18); }
.btn-new-round:active { transform: translateY(0); }
.btn-new-round .bnr-ic {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px;
  background: linear-gradient(135deg, #5fd61c, #33a315); box-shadow: 0 6px 14px rgba(51, 163, 21, .32);
}
.btn-new-round .bnr-txt { display: flex; flex-direction: column; line-height: 1.3; }
.btn-new-round .bnr-txt strong { font-size: 16px; font-weight: 800; color: var(--brand-ink); }
.btn-new-round .bnr-txt em { font-size: 12px; font-style: normal; color: var(--muted); }
.vy-shadow-hint { font-size: 12px; color: #a39b8c; line-height: 1.6; margin: 12px 2px 0; }

/* ============================================================================
   2026-06-12 UI polish — home card / 复读机 play / grammar / 生词本 / AI 对练
   ========================================================================== */

/* #1 首页打卡卡片：更紧凑、占用更少高度 */
.profile-welcome { margin: 0 0 8px; }
.today-strip { gap: 12px; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; flex-wrap: nowrap; }
.today-streak { gap: 8px; padding-right: 12px; }
.today-streak .ts-flame { font-size: 23px; }
.today-streak .ts-body strong { font-size: 21px; }
.today-goal { width: 50px; height: 50px; }
.today-goal .goal-ring { width: 50px; height: 50px; }
.today-goal-cap { gap: 2px; }
.today-goal-cap .tgc-title { font-size: 13.5px; }
.today-goal-cap .tgc-sub { font-size: 11.5px; line-height: 1.35; }

/* #2 复读机播放键：更圆润现代，▶ 光学居中 */
.vy-shadow-play {
  width: 76px; height: 76px; font-size: 30px; line-height: 1; padding-left: 3px; color: #fff;
  background: linear-gradient(150deg, color-mix(in srgb, var(--sc) 92%, #fff), var(--sc) 58%, color-mix(in srgb, var(--sc) 74%, #ff8a3c));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--sc) 40%, transparent), inset 0 2px 5px rgba(255,255,255,.4);
}
.vy-shadow-play:hover { filter: brightness(1.05); }
.vy-shadow-mark { border-radius: 999px; padding: 9px 16px; font-weight: 700; }

/* #3 语法讲解：更清爽，修复句型条目背景重叠 */
.vy-grammar-block { margin-bottom: 18px; }
.vy-grammar-block .vy-card { border-radius: 16px; padding: 16px; }
.vy-grammar-block h3 { font-size: 12.5px; color: var(--sc); margin: 0 0 9px; letter-spacing: .4px; font-weight: 800; text-transform: uppercase; }
.vy-explain { line-height: 1.75; }
.vy-patterns { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0; }
/* 句型用和正文一致的字体(不再用 <code> 的等宽字体),保持全页字体统一 */
.vy-patterns li {
  display: block; white-space: normal; line-height: 1.55;
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  background: color-mix(in srgb, var(--sc) 8%, #fff); color: var(--brand-ink);
  border: 1px solid color-mix(in srgb, var(--sc) 16%, transparent);
  padding: 9px 13px; border-radius: 11px;
}
.vy-grammar-example { gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--sc) 6%, #fff); }
.vy-grammar-example p { line-height: 1.6; margin: 0; }
.vy-grammar-example .vy-line-play { flex: none; }

/* 语法讲解 2026-06-20：精简顶栏 + 标题 + 讲解可折叠 + 子块间距 */
.vy-grammar-section { padding-top: 6px; }
.vy-grammar-head { margin: 4px 0 10px; }
.vy-grammar-head .vy-tag { display: inline-block; margin-bottom: 8px; }
.vy-grammar-head h2 { font-size: 19px; line-height: 1.35; margin: 0; font-weight: 800; }
.vy-grammar-head .vy-name-zh { display: block; font-size: 14px; font-weight: 500; color: var(--muted); margin: 3px 0 0; }
.vy-grammar-card { display: flex; flex-direction: column; gap: 16px; }
.vy-grammar-sub { display: flex; flex-direction: column; }
.vy-grammar-explain { border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.02); overflow: hidden; }
.vy-grammar-explain > summary { list-style: none; cursor: pointer; padding: 11px 14px; font-size: 13px; font-weight: 800; color: var(--sc); display: flex; align-items: center; justify-content: space-between; }
.vy-grammar-explain > summary::-webkit-details-marker { display: none; }
.vy-grammar-explain > summary::after { content: "展开 ▾"; font-size: 12px; font-weight: 600; color: var(--muted); }
.vy-grammar-explain[open] > summary::after { content: "收起 ▴"; }
.vy-grammar-explain .vy-explain { margin: 0; border-radius: 0; background: transparent; padding: 0 14px 14px; }

/* 练习册：单句答题框默认 1 行(更矮)；阅读译文先锁,提交后解锁 */
.vy-wb-free-1 { min-height: 0; }
.vy-wbx-zh-locknote { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.04); color: var(--muted); font-size: 13px; text-align: center; }

/* #6 生词本：按时间分组、可展开/收起、点词查典 */
.wb-top { display: flex; align-items: center; justify-content: flex-end; margin: 2px 0 14px; }
.wb-top h3 { margin: 0; }
.wb-total { font-size: 13px; color: var(--muted); font-weight: 600; }
.wb-total b { color: var(--brand); font-weight: 800; font-size: 15px; margin: 0 2px; }
/* 生词本：去掉重复标题（顶部已有「生词本」）+ 更干净的空态 */
.wb-section { padding-top: 2px; }
.wb-empty { text-align: center; padding: 54px 24px 40px; }
.wb-empty-icon { font-size: 46px; line-height: 1; margin-bottom: 12px; }
.wb-empty-t { font-size: 17px; font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.wb-empty .ob-sub { max-width: 300px; margin: 0 auto; line-height: 1.65; }
.wb-group { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: var(--panel); }
.wb-group-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; cursor: pointer; color: var(--brand-ink); list-style: none; user-select: none; }
.wb-group-head::-webkit-details-marker { display: none; }
.wb-group-head::after { content: "⌄"; margin-left: 8px; color: var(--muted); transition: transform .2s; }
.wb-group[open] .wb-group-head::after { transform: rotate(180deg); }
.wb-group-range { font-size: 14px; font-weight: 700; }
.wb-group-count { font-size: 12px; color: var(--muted); font-weight: 600; background: var(--panel-soft); border-radius: 999px; padding: 2px 9px; }
.wb-list { list-style: none; margin: 0; padding: 0; display: block; }
.wb-item { display: block; border-top: 1px solid var(--line); }
.wb-item:first-child { border-top: 0; }
.wb-item strong { flex: none; }
.wb-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.wb-audio { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--brand, #0f766e); cursor: pointer; }
.wb-audio:active { transform: scale(.92); }
.wb-word-btn { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; background: none; border: 0; text-align: left; cursor: pointer; padding: 0; }
.wb-word { font-size: 16px; font-weight: 700; color: var(--brand-ink); }
.wb-ipa { font-size: 12px; color: #7c8aa0; }
.wb-zh { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wb-x { flex: none; width: 30px; height: 30px; border: 0; background: none; color: var(--muted); font-size: 15px; cursor: pointer; border-radius: 8px; }
.wb-x:hover { background: rgba(255,80,80,.1); color: #e0533e; }
.wb-dict { padding: 0 14px 12px 58px; }
.wb-dict-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.wb-dict-ipa { font-size: 12.5px; color: #7c8aa0; }
.wb-dict-pos { font-size: 11px; color: var(--sc); background: color-mix(in srgb, var(--sc) 12%, #fff); padding: 1px 7px; border-radius: 6px; }
.wb-dict-zh { font-size: 13.5px; color: var(--ink); margin: 2px 0; }
.wb-dict-en { font-size: 12.5px; color: var(--muted); margin: 2px 0; }
.wb-dict-eg { font-size: 12.5px; color: #6b7a8d; font-style: italic; margin: 4px 0 0; }
.wb-dict-loading { font-size: 12.5px; color: var(--muted); }

/* #8 AI 对练：复读机底部按钮 + 角色扮演电话 + Azure 报告（深色弹层） */
.vy-shadow-actions { display: flex; flex-direction: column; gap: 10px; }
.vy-ai-spar-btn { background: linear-gradient(135deg, #6d5efc, #8b7bff) !important; }
.vy-phone-swap { display: block; margin: 0 auto 8px; background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.vy-phone-scores { width: 100%; background: rgba(255,255,255,.06); border-radius: 16px; padding: 14px 16px; margin-bottom: 14px; color: #eef3f5; }
.vy-phone-scores h3 { margin: 0 0 12px; font-size: 15px; color: #ffd9a0; }
.vy-pron-metrics { display: flex; flex-direction: column; gap: 9px; }
.vy-pron-metric { display: grid; grid-template-columns: 22px 62px 1fr 32px; align-items: center; gap: 8px; font-size: 13px; }
.vy-pron-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; }
.vy-pron-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #83d334, #77e814); }
.vy-pron-metric b { text-align: right; font-weight: 800; }
.vy-pron-words { margin-top: 14px; }
.vy-pron-words > b { font-size: 13px; display: block; margin-bottom: 8px; }
.vy-pron-word { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.1); }
.vy-pron-w { font-weight: 700; font-size: 15px; flex: none; min-width: 84px; }
.vy-pron-w-acc { font-size: 12px; opacity: .85; flex: 1; }
.vy-pron-w-acc.bad { color: #fca5a5; }
.vy-pron-word .vy-line-play { background: rgba(255,255,255,.16); border: 0; color: #fff; border-radius: 999px; padding: 5px 13px; font-size: 12px; cursor: pointer; flex: none; }
.vy-pron-good { font-size: 13px; opacity: .9; }
.vy-phone-fb-next { border-left: 3px solid #8b7bff; padding-left: 10px; }
.vy-phone-fb-method { font-size: 12.5px; opacity: .85; margin: 4px 0 0; }
.vy-phone-logwrap { margin: 6px 0 12px; }
.vy-phone-logwrap summary { font-size: 12.5px; color: rgba(255,255,255,.7); cursor: pointer; }
.vy-phone-logwrap .vy-phone-reviewlog { margin-top: 8px; }

/* ============================================================================
   2026-06-12 (batch 2) — wordbook borderless / grammar border-off / play button
   ========================================================================== */

/* #7 生词本：去掉边框、占满宽度，整词行可点 */
.wb-group { border: 0 !important; border-radius: 0 !important; background: transparent !important; margin-bottom: 2px; overflow: visible; }
.wb-group-head { padding: 13px 2px; border-bottom: 1px solid var(--line); }
.wb-list { border: 0; }
.wb-item { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.wb-row { padding: 11px 2px; gap: 12px; }
.wb-word-btn { cursor: pointer; }
.wb-word-btn:active .wb-word { opacity: .6; }
.wb-zh { color: var(--sc); }
.wb-dict { padding: 2px 2px 14px 46px; }
.wb-item.open { background: color-mix(in srgb, var(--sc) 4%, transparent); border-radius: 12px; }
.me-section:has(.wb-group) { padding-left: 8px; padding-right: 8px; }

/* #4 语法讲解：去掉外框，字体/层次更美观 */
.vy-grammar-block { margin-bottom: 22px; }
.vy-grammar-block .vy-card,
.vy-section .vy-card { border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; }
.vy-grammar-block .vy-section-head { margin-bottom: 12px; }
.vy-grammar-block h2 { font-size: 20px; line-height: 1.35; letter-spacing: .2px; }
.vy-name-zh { color: var(--muted); font-weight: 600; font-size: 15px; }
.vy-grammar-block h3 { font-size: 12.5px; font-weight: 800; color: var(--sc); text-transform: none; margin: 18px 0 8px; opacity: .9; }
.vy-grammar-block .vy-card > h3:first-child { margin-top: 4px; }
.vy-explain {
  line-height: 1.85; font-size: 14.5px; color: var(--ink);
  background: color-mix(in srgb, var(--sc) 5%, #fff); border-radius: 14px; padding: 14px 16px;
}
.vy-grammar-example { background: color-mix(in srgb, var(--sc) 5%, #fff); border: 0; }
.vy-grammar-block .vy-drills { padding-left: 20px; }
.vy-grammar-block .vy-drills li { margin-bottom: 12px; line-height: 1.6; }
.vy-drill-input { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 14px; margin-top: 6px; width: 100%; box-sizing: border-box; }

/* #1 复读机播放键：更醒目的现代圆钮 + 干净三角图标 */
.vy-shadow-ctl { gap: 18px; }
.vy-shadow-play {
  width: 84px; height: 84px; font-size: 0 !important; position: relative;
  background: radial-gradient(circle at 35% 28%, #7dd938 0%, var(--sc) 52%, #499814 100%);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--sc) 45%, transparent), inset 0 3px 7px rgba(255,255,255,.45), inset 0 -4px 10px rgba(0,0,0,.18);
  border: 3px solid rgba(255,255,255,.5);
}
/* play ▶ triangle (default) */
.vy-shadow-play::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 16px 0 16px 26px; border-color: transparent transparent transparent #fff;
}
/* pause ⏸ — when JS sets text to ⏸ we can't detect; use a data flag instead */
.vy-shadow-play[data-playing="1"]::after {
  border: 0; width: 22px; height: 26px; left: 50%;
  background: linear-gradient(#fff,#fff) left/8px 100% no-repeat, linear-gradient(#fff,#fff) right/8px 100% no-repeat;
}
.vy-shadow-play:active { transform: scale(.94); }
.vy-shadow-mark { background: var(--panel-soft); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; font-weight: 700; color: var(--brand-ink); }

/* ============================================================================
   2026-06-12 (batch 3) — 复读机纯色 / In Use 溢出 / 阅读字号 / 阅读按钮一行
   ========================================================================== */

/* #1b 复读机：进度条 + 播放键改纯色淡色系（去渐变） */
.vy-shadow-track { background: #eef1f4 !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05) !important; }
.vy-shadow-region { background: color-mix(in srgb, var(--sc) 13%, transparent) !important; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sc) 35%, transparent) !important; }
.vy-shadow-played { background: color-mix(in srgb, var(--sc) 26%, transparent) !important; }
.vy-shadow-handle.ah span { background: var(--sc); }
.vy-shadow-head { background: var(--sc); box-shadow: 0 0 4px color-mix(in srgb, var(--sc) 50%, transparent); }
.vy-shadow-play {
  background: var(--sc) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--sc) 32%, transparent) !important;
  border: 3px solid rgba(255,255,255,.7) !important;
}
.vy-shadow-play::after { border-left-color: #fff; }

/* 2026-06-20 复读机瘦身：进度条高度 + A/B/播放键略缩小 */
.vy-shadow-track { height: 44px; }
.vy-shadow-play { width: 68px !important; height: 68px !important; }
.vy-shadow-play::after { border-width: 13px 0 13px 21px; }
.vy-shadow-play[data-playing="1"]::after { width: 19px; height: 22px; }
.vy-shadow-mark { width: 54px; height: 54px; padding: 0; font-size: 14px; border-radius: 50%; }
.vy-shadow-ctl { gap: 22px; }

/* #3 In Use 系列教材卡片：手机上不再被裁切（允许列收缩 + 文本换行） */
.prof-series-books { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.prof-book-card { min-width: 0; overflow: hidden; }
.prof-book-main { min-width: 0; }
.prof-book-main strong, .prof-book-main em { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.prof-book-tag { flex: none; white-space: nowrap; }

/* #5a 阅读底部操作按钮：4 个一行平铺 */
.rd-actions, .rd-act-row, .rd-view-actions { display: flex; gap: 8px; }
.rd-actions .rd-act-btn, .rd-act-row .rd-act-btn, .rd-view-actions .rd-act-btn { flex: 1 1 0; min-width: 0; white-space: nowrap; padding-left: 6px; padding-right: 6px; font-size: 13px; }

/* #5b 阅读字号：覆盖中英两种段落，确保切换有反应 */
.rd-rd-size-small  .rd-para-en, .rd-rd-size-small  .rd-para-zh { font-size: 14.5px !important; }
.rd-rd-size-medium .rd-para-en, .rd-rd-size-medium .rd-para-zh { font-size: 16.5px !important; }
.rd-rd-size-large  .rd-para-en, .rd-rd-size-large  .rd-para-zh { font-size: 19px !important; }
.rd-rd-size-xlarge .rd-para-en, .rd-rd-size-xlarge .rd-para-zh { font-size: 22px !important; }
.rd-rd-size-xxlarge .rd-para-en, .rd-rd-size-xxlarge .rd-para-zh { font-size: 25px !important; }

/* ════════ 阅读页 chrome 重构 2026-06-17（顶部图标 + 底部三键 + 浮动翻译）════════ */
.rd-view-header.rd-view-header-icons { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; gap:8px; }
.rd-rd-back { width:38px; height:38px; border:0; background:transparent; cursor:pointer; color:inherit; display:grid; place-items:center; border-radius:50%; }
.rd-rd-back svg { width:24px; height:24px; }
.rd-view-header-icons .rd-rd-toolbar { display:flex; gap:2px; }
.rd-rd-icon { width:40px; height:40px; border:0; background:transparent; cursor:pointer; color:inherit; opacity:.82; display:grid; place-items:center; border-radius:10px; }
.rd-rd-icon svg { width:22px; height:22px; }
.rd-rd-icon:active { background:rgba(127,127,127,.14); }
.rd-rd-icon.rd-rd-fav-btn.on { color:#f5b301; opacity:1; }

/* 底部三按钮栏（背景 / 标注 / AI 精讲） */
.rd-bottombar { position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; gap:4px;
  padding:6px 10px calc(6px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95); backdrop-filter:blur(14px); border-top:1px solid rgba(0,0,0,.07); }
.rd-bb-btn { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; border:0; background:transparent; cursor:pointer; color:#46514d; padding:7px 4px; border-radius:12px; font-size:11.5px; font-weight:600; }
.rd-bb-btn svg { width:23px; height:23px; }
.rd-bb-btn.on { color:var(--brand,#33a315); background:rgba(51, 163, 21, .08); }
.rd-bb-ai, .rd-bb-ai svg { color:#6d5efc; }
.rd-view-article { padding-bottom:88px; }

/* 浮动翻译键 */
.rd-translate-fab { position:fixed; right:14px; bottom:92px; z-index:58; width:50px; height:50px; border:0; border-radius:50%; cursor:pointer;
  background:#fff; color:var(--brand,#33a315); box-shadow:0 6px 18px rgba(50, 98, 33, .2); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.rd-translate-fab svg { width:21px; height:21px; }
.rd-translate-fab span { font-size:8.5px; font-weight:800; margin-top:-2px; }
.rd-translate-fab.on { background:var(--brand,#33a315); color:#fff; }

/* 背景 / 标注 面板（底部上滑卡片） */
.rd-rd-prefs-display, .rd-rd-prefs-annotate { position:fixed; left:0; right:0; bottom:calc(60px + env(safe-area-inset-bottom)); z-index:59; margin:0;
  background:#fff; border-top:1px solid rgba(0,0,0,.06); border-radius:18px 18px 0 0; box-shadow:0 -8px 26px rgba(0,0,0,.12); padding:16px 16px 18px; animation:rd-sheet-up .24s cubic-bezier(.2,.9,.3,1.05); }
@keyframes rd-sheet-up { from { transform:translateY(20px); opacity:0; } to { transform:none; opacity:1; } }
.rd-rd-prefs-display .rd-rd-pref-row, .rd-rd-prefs-annotate .rd-rd-pref-row { display:flex; align-items:center; gap:12px; margin:0 0 16px; }
.rd-rd-prefs-display .rd-rd-pref-row:last-child { margin-bottom:0; }
.rd-rd-prefs-display .rd-rd-pref-row > span { flex:none; width:34px; font-size:13px; font-weight:700; color:#6b7975; }
.rd-rd-prefs-display .rd-rd-pref-row-stack { flex-direction:column; align-items:stretch; }
.rd-rd-prefs-display .rd-rd-pref-row-stack > span { width:auto; margin-bottom:9px; }
.rd-theme-swatches { display:flex; gap:12px; }
.rd-theme-sw { width:42px; height:42px; border-radius:50%; border:2px solid transparent; cursor:pointer; font-size:17px; display:grid; place-items:center; }
.rd-theme-sw.sw-light { background:#fff; box-shadow:inset 0 0 0 1px #e2e6e4; }
.rd-theme-sw.sw-sepia { background:#f3eddc; }
.rd-theme-sw.sw-dark { background:#22242b; }
.rd-theme-sw.active { border-color:var(--brand,#33a315); }
.rd-theme-sw .rd-ic { width:20px; height:20px; }
.rd-theme-sw.sw-light .rd-ic { stroke:#f0a500; }
.rd-theme-sw.sw-sepia .rd-ic { stroke:#a87f3e; }
.rd-theme-sw.sw-dark .rd-ic { stroke:#cdd2dc; }
.rd-rd-font5 { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.rd-rd-font5 button { padding:11px 3px; border:1px solid #e6eae8; border-radius:11px; background:#fff; cursor:pointer; font-size:13px; color:#33403c; white-space:nowrap; }
.rd-rd-font5 button.active { border-color:var(--brand,#33a315); color:var(--brand,#33a315); background:rgba(51, 163, 21, .06); font-weight:700; }
.rd-size-slider-wrap { flex:1; display:flex; align-items:center; gap:12px; }
.rd-size-min { font-size:14px; color:#94a09b; font-weight:700; }
.rd-size-max { font-size:23px; color:#94a09b; font-weight:700; line-height:1; }
.rd-size-slider { flex:1; -webkit-appearance:none; appearance:none; height:5px; border-radius:999px; background:#e4e9e7; outline:none; }
.rd-size-slider::-webkit-slider-thumb { -webkit-appearance:none; width:23px; height:23px; border-radius:50%; background:var(--brand,#33a315); cursor:pointer; box-shadow:0 2px 6px rgba(51, 163, 21, .4); }
.rd-size-slider::-moz-range-thumb { width:23px; height:23px; border:0; border-radius:50%; background:var(--brand,#33a315); cursor:pointer; }
.rd-annot-row { display:flex; align-items:center; gap:13px; width:100%; text-align:left; border:0; background:transparent; cursor:pointer; padding:13px 4px; }
.rd-annot-row + .rd-annot-row { border-top:1px solid rgba(0,0,0,.05); }
.rd-annot-ic { flex:none; width:40px; height:40px; border-radius:11px; background:#f3f5f2; display:grid; place-items:center; font-size:19px; }
.rd-annot-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.rd-annot-txt b { font-size:15px; color:#3c4b34; }
.rd-annot-txt i { font-style:normal; font-size:12px; color:#8a9590; line-height:1.4; }
.rd-annot-switch { flex:none; width:44px; height:26px; border-radius:999px; background:#d6dcd9; position:relative; transition:background .2s; }
.rd-annot-switch::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .2s; }
.rd-annot-row.on .rd-annot-switch { background:var(--brand,#33a315); }
.rd-annot-row.on .rd-annot-switch::after { transform:translateX(18px); }
/* dark / sepia 适配 */
.rd-rd-theme-dark .rd-bottombar { background:rgba(20,21,26,.96); border-top-color:rgba(255,255,255,.08); }
.rd-rd-theme-dark .rd-bb-btn { color:#aeb6c2; }
.rd-rd-theme-dark .rd-rd-prefs-display, .rd-rd-theme-dark .rd-rd-prefs-annotate { background:#1c1e25; border-top-color:rgba(255,255,255,.08); }
.rd-rd-theme-dark .rd-rd-font5 button { background:#262a33; border-color:#363b45; color:#cfd4dd; }
.rd-rd-theme-dark .rd-annot-txt b { color:#e9eaef; }
.rd-rd-theme-dark .rd-annot-ic { background:#262a33; }
.rd-rd-theme-dark .rd-translate-fab { background:#262a33; color:#9be37f; }
.rd-rd-theme-sepia .rd-bottombar { background:rgba(243,237,220,.97); }
.rd-rd-theme-sepia .rd-rd-prefs-display, .rd-rd-theme-sepia .rd-rd-prefs-annotate { background:#f3eddc; }

/* ════════ AI 精讲：全屏单滚动讲义 (2026-06-17) ════════ */
.rd-brief-overlay.rd-brief-fullscreen { position:fixed; inset:0; z-index:9000; background:#f5f7f7; animation:rd-brief-in .26s ease; }
@keyframes rd-brief-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.rd-brief-full { height:100%; display:flex; flex-direction:column; }
.rd-brief-top { flex:none; display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:#fff; border-bottom:1px solid rgba(0,0,0,.06); }
.rd-brief-top > span:nth-child(2) { font-size:16px; font-weight:800; color:#3c4b34; }
.rd-brief-top > span:last-child { width:38px; }
.rd-brief-back { width:38px; height:38px; border:0; background:transparent; cursor:pointer; color:#36433f; display:grid; place-items:center; border-radius:50%; }
.rd-brief-back svg { width:24px; height:24px; }
.rd-brief-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
/* hero */
.rd-brief-hero { min-height:172px; display:flex; align-items:flex-end; background-size:cover; background-position:center; padding:18px 18px 18px; }
.rd-brief-hero.no-cover { background:linear-gradient(135deg,#33a315,#46d01b 60%,#6d5efc); min-height:130px; }
.rd-brief-hero-txt h1 { margin:0; color:#fff; font-size:25px; font-weight:800; line-height:1.25; text-shadow:0 2px 10px rgba(0,0,0,.4); }
.rd-brief-hero-txt p { margin:7px 0 0; color:rgba(255,255,255,.92); font-size:13.5px; text-shadow:0 1px 6px rgba(0,0,0,.4); }
/* loading */
.rd-brief-loading2 { text-align:center; padding:60px 24px; color:#7b8884; }
.rd-brief-spin { display:inline-block; width:34px; height:34px; border:3px solid #e2e8e6; border-top-color:#33a315; border-radius:50%; animation:rds-spin .8s linear infinite; }
.rd-brief-loading2 p { margin:14px 0 0; font-size:14px; }
.rd-brief-error { margin:20px; padding:14px; background:#fdeee7; color:#c2562f; border-radius:12px; font-size:14px; }
/* sections */
.rd-brief-sec { padding:20px 16px 4px; }
.rd-brief-h { display:flex; align-items:center; gap:8px; margin:0 0 14px; font-size:19px; font-weight:800; color:#38482f; }
.rd-brief-h i { font-style:normal; font-size:19px; }
.rd-brief-h b { position:relative; z-index:1; }
.rd-brief-h b::after { content:""; position:absolute; left:-2px; right:-2px; bottom:1px; height:9px; background:rgba(51, 163, 21, .18); border-radius:3px; z-index:-1; }
/* core points */
.rd-brief-point { display:flex; gap:12px; padding:14px; background:#fff; border-radius:14px; margin-bottom:11px; box-shadow:0 3px 14px rgba(50, 98, 33, .05); }
.rd-brief-num { flex:none; width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#33a315,#4be619); color:#fff; font-size:14px; font-weight:800; display:grid; place-items:center; }
.rd-brief-point-body { flex:1; min-width:0; }
.rd-brief-en { margin:2px 0 0; font-size:14px; font-weight:600; color:#46503d; line-height:1.5; }
.rd-brief-zh { margin:7px 0 0; font-size:14px; color:#5d6b66; line-height:1.65; }
.rd-brief-point.has-zh { cursor:pointer; }
.rd-brief-tapzh { display:inline-block; margin-top:7px; font-size:12px; color:#3ecc13; font-weight:600; }
/* term cards */
.rd-brief-card { padding:14px; background:#fff; border-radius:14px; margin-bottom:11px; box-shadow:0 3px 14px rgba(50, 98, 33, .05); }
.rd-brief-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rd-brief-term { font-size:16.5px; font-weight:800; color:#33a315; }
.rd-brief-dict { flex:none; border:0; background:rgba(51, 163, 21, .09); color:#33a315; font-size:12.5px; font-weight:700; padding:5px 11px; border-radius:999px; cursor:pointer; }
.rd-brief-ex { margin-top:10px; padding-left:11px; border-left:3px solid #e1efd8; }
.rd-brief-ex-en { margin:0; font-size:14.5px; color:#47503e; line-height:1.55; }
.rd-brief-ex-zh { margin:4px 0 0; font-size:13px; color:#8a9590; line-height:1.5; }
.rd-brief-muted { color:#9aa5a0; font-size:14px; padding:6px 2px; }
.rd-brief-end { text-align:center; color:#aeb6b2; font-size:12.5px; padding:26px 20px 40px; }
/* 卡片练习：中译英 / 造句（语音 + AI 反馈） */
.rd-brief-practice { display:flex; gap:8px; margin-top:11px; }
.rd-brief-pbtn { display:inline-flex; align-items:center; gap:5px; border:1px solid #d8e8cf; background:#f5faf1; color:#33a315; cursor:pointer; font-size:13px; font-weight:700; padding:7px 13px; border-radius:999px; }
.rd-brief-pbtn .hand-mic { width:17px; height:17px; }
.rd-brief-pbtn.solid { background:#33a315; color:#fff; border-color:#33a315; }
.rd-brief-pbody { margin-top:11px; }
.rd-brief-ptask { font-size:13.5px; color:#46524e; line-height:1.6; margin-bottom:10px; }
.rd-brief-ptask b { color:#33a315; }
.rd-brief-mic { display:flex; flex-direction:column; align-items:center; gap:4px; margin:0 auto; width:74px; padding:11px 0; border:0; border-radius:16px; cursor:pointer; color:#fff; background:linear-gradient(140deg,#33a315,#4be619); box-shadow:0 6px 16px rgba(51, 163, 21, .32); }
.rd-brief-mic .hand-mic { width:24px; height:24px; }
.rd-brief-mic span { font-size:11.5px; font-weight:700; }
.rd-brief-mic.rec-active { background:linear-gradient(140deg,#e0683c,#ef4444); animation:rd-brief-pulse 1.1s ease-in-out infinite; }
.rd-brief-mic.rec-busy { background:linear-gradient(140deg,#94a3a0,#6b7975); }
@keyframes rd-brief-pulse { 0%,100%{ box-shadow:0 6px 16px rgba(239,68,68,.3);} 50%{ box-shadow:0 6px 26px rgba(239,68,68,.6);} }
.rd-brief-presult { margin-top:11px; }
.rd-brief-said { font-size:14px; color:#47503e; background:#fff; border:1px solid #eef1f0; border-radius:12px; padding:10px 13px; }
.rd-brief-said em { font-style:normal; font-weight:600; }
.rd-brief-fb { margin-top:9px; background:#eafaf3; border-radius:12px; padding:11px 13px; }
.rd-brief-fb-praise { margin:0 0 5px; font-size:13.5px; font-weight:700; color:#33a315; }
.rd-brief-fb-notes { margin:0; font-size:13.5px; color:#3b4945; line-height:1.6; }
.rd-brief-fb-polish { margin:7px 0 0; font-size:13.5px; color:#3b4945; }
.rd-brief-fb-polish b { color:#33a315; }
.rd-brief-spin.small { display:inline-block; width:14px; height:14px; border-width:2px; vertical-align:-2px; }
/* dark */
.rd-rd-theme-dark .rd-brief-pbtn { background:#1f2730; border-color:#2f3a44; color:#9be37f; }
.rd-rd-theme-dark .rd-brief-said { background:#1c1e25; border-color:#2f3a44; color:#e9eaef; }
.rd-rd-theme-dark .rd-brief-fb { background:#355326; }

/* ════════ 举一反三 (exploration / mastery) ════════ */
.exp-shell { min-height:100vh; background:#f5f7f7; padding-bottom:40px; }
.exp-head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:#fff; border-bottom:1px solid rgba(0,0,0,.06); position:sticky; top:0; z-index:5; }
.exp-head h1 { margin:0; font-size:18px; font-weight:800; color:#38482f; }
.exp-head > span:last-child { width:36px; }
.exp-back { width:36px; height:36px; border:0; background:transparent; cursor:pointer; color:#36433f; display:grid; place-items:center; border-radius:50%; }
.exp-intro { font-size:13px; color:#6b7975; line-height:1.6; padding:14px 18px 4px; }
.exp-intro b { color:#33a315; }
.exp-tabs { display:flex; gap:8px; padding:12px 16px 4px; }
.exp-tab { flex:1; padding:11px; border:0; border-radius:13px; cursor:pointer; font-size:14.5px; font-weight:700; background:#ebeee9; color:#5d6b67; display:flex; align-items:center; justify-content:center; gap:7px; }
.exp-tab i { font-style:normal; font-size:12px; font-weight:800; background:rgba(0,0,0,.08); color:#46524e; padding:1px 8px; border-radius:999px; }
.exp-tab.on { background:#33a315; color:#fff; box-shadow:0 4px 14px rgba(51, 163, 21, .26); }
.exp-tab.on i { background:rgba(255,255,255,.25); color:#fff; }
.exp-summary { font-size:13px; color:#7b8884; padding:12px 18px 4px; }
.exp-summary b { color:#3c4b34; font-size:15px; }
.exp-list { padding:8px 14px 10px; }
.exp-group { margin-bottom:6px; }
.exp-group-h { font-size:13px; font-weight:800; color:#9aa5a0; padding:10px 4px 6px; }
.exp-item { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left; cursor:pointer; padding:14px; border:1px solid #eef1f0; border-radius:14px; background:#fff; margin-bottom:8px; box-shadow:0 2px 10px rgba(50, 98, 33, .04); }
.exp-item:active { transform:scale(.99); }
.exp-item-name { font-size:15.5px; font-weight:650; color:#3c4b34; }
.exp-item-meta { flex:none; font-size:12.5px; color:#b6c0bc; font-weight:600; display:inline-flex; align-items:center; gap:5px; }
.exp-item-count { font-style:normal; font-size:12.5px; font-weight:800; color:#fff; background:linear-gradient(135deg,#33a315,#4be619); border-radius:999px; padding:2px 9px; }
.exp-empty { text-align:center; padding:48px 28px; color:#8a9893; }
.exp-empty-ic { font-size:38px; margin-bottom:8px; }
.exp-empty p { margin:0 0 8px; font-size:15px; font-weight:700; color:#6b7975; }
.exp-empty span { font-size:13px; line-height:1.7; }
.exp-swipe-tip { text-align:center; font-size:11.5px; color:#b6c0bc; padding:6px 0 0; }
/* detail */
.exp-detail-hero { margin:16px 16px 10px; padding:22px 18px; border-radius:18px; color:#fff; background:linear-gradient(135deg,#33a315,#44d619 60%,#33a315); box-shadow:0 10px 26px rgba(51, 163, 21, .26); }
.exp-detail-hero.pattern { background:linear-gradient(135deg,#5b53d6,#6d5efc 60%,#8b7bff); box-shadow:0 10px 26px rgba(109,94,252,.26); }
.exp-detail-term { font-size:22px; font-weight:800; line-height:1.3; }
.exp-detail-sub { margin-top:7px; font-size:13px; opacity:.92; }
.exp-detail-sub b { font-size:15px; }
.exp-sent-list { padding:4px 16px 30px; }
.exp-sent { background:#fff; border:1px solid #eef1f0; border-radius:14px; padding:13px 15px; margin-bottom:10px; box-shadow:0 2px 10px rgba(50, 98, 33, .04); }
.exp-sent-en { margin:0; font-size:15px; color:#46503d; line-height:1.55; font-weight:550; }
.exp-sent-zh { margin:5px 0 0; font-size:13px; color:#8a9590; line-height:1.5; }
.exp-sent-ref { margin:5px 0 0; font-size:14px; color:#46503d; line-height:1.5; }
.exp-sent-fb { margin:7px 0 0; font-size:13px; color:#5a8a3a; line-height:1.5; background:color-mix(in srgb, var(--brand) 7%, #fff); border-radius:8px; padding:6px 9px; }
.exp-sent-lab { display:inline-block; font-size:10.5px; font-weight:800; color:var(--brand); background:color-mix(in srgb, var(--brand) 12%, #fff); border-radius:5px; padding:1px 6px; margin-right:7px; vertical-align:1px; }
.exp-sent-foot { display:flex; align-items:center; gap:8px; margin-top:9px; }
.exp-sent-src { font-size:11px; font-weight:700; color:#33a315; background:rgba(51, 163, 21, .09); padding:2px 8px; border-radius:999px; }
.exp-sent-tag { font-size:11px; font-weight:700; color:#6d5efc; background:rgba(109,94,252,.1); padding:2px 8px; border-radius:999px; }
.exp-sent-time { margin-left:auto; font-size:11.5px; color:#b6c0bc; }

/* ============================================================================
   2026-06-12 (batch 4) — 阅读文章界面整体视觉升级 + AI 精讲面板
   ========================================================================== */

/* ── 文章正文排版：更舒适的阅读节奏 ── */
.rd-view-shell .rd-para-en { line-height: 1.85; letter-spacing: .1px; color: #1b2430; }
/* Dark/sepia must beat the line above (same specificity → later wins). Words live in
   .rd-word spans that inherit this, so the previous dark-text was near-invisible. */
.rd-view-shell.rd-rd-theme-dark .rd-para-en,
.rd-view-shell.rd-rd-theme-dark .rd-para-en .rd-word { color: #e9eaef; }
.rd-view-shell.rd-rd-theme-sepia .rd-para-en,
.rd-view-shell.rd-rd-theme-sepia .rd-para-en .rd-word { color: #43321d; }
.rd-view-shell .rd-para-zh { line-height: 1.8; color: #5a6675; margin-top: 4px; }
.rd-view-shell .rd-para { margin-bottom: 22px; }

/* ── 底部操作栏：干净的悬浮胶囊条，4 键平铺 ── */
.rd-view-actions {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--panel) 86%, transparent); backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line); margin: 0 -16px -16px;
}
.rd-view-actions .rd-act-btn {
  flex: 1 1 0; min-width: 0; white-space: nowrap; padding: 11px 4px; font-size: 13px; font-weight: 700;
  border-radius: 13px; border: 1px solid var(--line); background: var(--panel-soft); color: var(--brand-ink);
  display: flex; align-items: center; justify-content: center; gap: 3px; transition: transform .1s, background .15s;
}
.rd-view-actions .rd-act-btn:active { transform: scale(.95); }
.rd-view-actions .rd-act-btn[data-act="ai-explain"] { background: linear-gradient(135deg,#6d5efc,#8b7bff); color:#fff; border:0; }
.rd-view-actions .rd-act-btn[data-act="read-aloud"].playing { background: var(--sc); color:#fff; border:0; }

/* ── 顶部工具条：更精致 ── */
.rd-rd-toolbar { gap: 6px; }
.rd-rd-tool-btn { border-radius: 11px; }
.rd-rd-tool-btn.active { background: color-mix(in srgb, var(--sc) 14%, #fff); color: var(--sc); }

/* ── AI 精讲面板：升级版 ── */
.article-brief-sheet { border-radius: 22px 22px 0 0; }
.article-brief-sheet .sheet-head .pill { background: linear-gradient(135deg,#6d5efc,#8b7bff); color:#fff; border:0; font-weight:700; }
.article-brief-sheet .sheet-head h3 { font-size: 18px; line-height: 1.35; margin-top: 6px; }
.article-brief-sheet .sheet-block { margin-top: 18px; }
.article-brief-sheet .sheet-block > h4 {
  font-size: 13px; font-weight: 800; color: var(--brand-ink); margin: 0 0 12px; padding-left: 12px;
  border-left: 4px solid #8b7bff; line-height: 1.3;
}
.article-brief-sheet .example-stack { display: flex; flex-direction: column; gap: 12px; }
.article-brief-sheet .example-card {
  background: var(--panel-soft); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
}
.article-brief-sheet .sheet-block:nth-child(2) .example-card { border-left: 3px solid #83d334; }
.article-brief-sheet .example-card > strong { display: block; font-size: 15.5px; line-height: 1.5; color: #16202c; font-weight: 700; }
.article-brief-sheet .example-card .small-zh,
.article-brief-sheet .example-card > p { font-size: 13.5px; line-height: 1.7; color: #5a6675; margin: 8px 0 0; }
.article-brief-sheet .example-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.article-brief-sheet .example-head > strong { color: var(--sc); font-size: 15px; }
.article-brief-sheet .dict-jump-btn {
  flex: none; font-size: 11px; font-weight: 700; color: var(--sc); background: color-mix(in srgb, var(--sc) 10%, #fff);
  border: 0; border-radius: 999px; padding: 4px 10px; cursor: pointer;
}
.article-brief-sheet .pattern-example-stack { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.article-brief-sheet .pattern-example-item { background: color-mix(in srgb, var(--sc) 5%, #fff); border-radius: 10px; padding: 9px 12px; }
.article-brief-sheet .pattern-example-en { font-size: 14px; color: #16202c; margin: 0; line-height: 1.55; }
.article-brief-sheet .pattern-example-zh { font-size: 12.5px; color: #6b7889; margin: 4px 0 0; }

/* ============================================================================
   2026-06-12 (batch 5) — FIX In Use 卡片回归(改竖排卡片,标题正常换行)
   ========================================================================== */
.prof-book-card { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; min-height: 0; }
.prof-book-emoji { font-size: 30px; }
.prof-book-main { width: 100%; flex: none !important; }
.prof-book-main strong { white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; line-height: 1.35; font-size: 14.5px; }
.prof-book-main em { white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; line-height: 1.4; }
.prof-book-tag { align-self: flex-start; }

/* ── #4 全屏词典页 ── */
.wb-dict-fs { position: fixed; inset: 0; z-index: 3000; background: var(--bg, #fff); transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column; }
.wb-dict-fs.show { transform: none; }
.wb-dict-fs-head { display: flex; align-items: center; gap: 10px; padding: max(14px, env(safe-area-inset-top)) 16px 14px; border-bottom: 1px solid var(--line); }
.wb-dict-fs-back { font-size: 22px; background: none; border: 0; cursor: pointer; color: var(--brand-ink); width: 40px; height: 40px; }
.wb-dict-fs-htitle { font-weight: 700; font-size: 16px; }
.wb-dict-fs-body { flex: 1; overflow-y: auto; padding: 26px 20px 48px; }
.wb-dict-fs-word { font-size: 32px; font-weight: 800; color: var(--brand-ink); display: flex; align-items: center; gap: 12px; }
.wb-dict-fs-play { background: var(--panel-soft); border: 1px solid var(--line); border-radius: 50%; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; color: var(--brand, #0f766e); cursor: pointer; }
.wb-dict-fs-play .hand-say { width: 20px; height: 20px; }
.wb-dict-fs-meta { display: flex; gap: 10px; align-items: center; margin: 12px 0 20px; }
.wb-dict-fs-ipa { font-size: 16px; color: #7c8aa0; }
.wb-dict-fs-pos { font-size: 13px; color: var(--sc); background: color-mix(in srgb, var(--sc) 12%, #fff); padding: 3px 10px; border-radius: 8px; }
.wb-dict-fs-sec { margin-bottom: 24px; }
.wb-dict-fs-sec h4 { font-size: 13px; font-weight: 800; color: var(--sc); margin: 0 0 8px; padding-left: 10px; border-left: 3px solid var(--sc); }
.wb-dict-fs-zh { font-size: 18px; line-height: 1.6; color: var(--ink); margin: 0; }
.wb-dict-fs-en { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 8px 0 0; }
.wb-dict-fs-eg { font-size: 15.5px; line-height: 1.7; color: #5a6675; font-style: italic; margin: 0; }

/* ── #3 复读机练习计时 ── */
.vy-shadow-timer { text-align: center; font-size: 13px; color: var(--muted); margin: 6px 0 10px; }
.vy-shadow-timer b { color: var(--sc); font-size: 15px; }
.vy-shadow-timer.done { color: var(--sc); font-weight: 700; }

/* ── 杂志风手帐：长图自适应显示(下载得到完整长图) ── */
.rd-share-card-poster .rd-share-poster-wrap { max-height: 64vh; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; background: #fdfbf5; }
.rd-share-card-poster .rd-share-canvas { width: 100%; max-width: none; height: auto; aspect-ratio: auto !important; display: block; border-radius: 12px; }

/* ── 富词典页（生词本点词进入，欧路/扇贝 风格）── */
.wb-dict-fs-body { padding-bottom: 64px; }
.wb-d-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 12px 0 22px; }
.wb-d-ph { font-size: 15px; color: #5a6675; display: inline-flex; align-items: center; gap: 5px; }
.wb-d-ph b { font-size: 11px; font-weight: 700; color: #fff; background: #9aa6b6; border-radius: 4px; padding: 1px 5px; }
.wb-d-say { background: none; border: 0; cursor: pointer; padding: 0 2px; line-height: 1; display: inline-flex; align-items: center; vertical-align: middle; color: var(--brand, #0f766e); opacity: .9; }
.wb-d-say:active { opacity: .5; }
.wb-d-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.wb-d-tag { font-size: 11px; font-weight: 700; color: #c2740b; background: #fdf2cf; border-radius: 6px; padding: 2px 8px; }
.wb-d-sec { margin-bottom: 22px; }
.wb-d-h { font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: var(--brand); margin: 0 0 11px; padding-left: 9px; border-left: 3px solid var(--brand); }
.wb-d-sense { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed color-mix(in srgb, var(--line) 70%, transparent); }
.wb-d-sense:last-child { border-bottom: 0; }
.wb-d-pos { flex: 0 0 auto; font-size: 12px; font-weight: 700; font-style: italic; color: #fff; background: var(--brand); border-radius: 6px; padding: 2px 8px; min-width: 34px; text-align: center; }
.wb-d-sense-body { flex: 1; min-width: 0; }
.wb-d-zh { font-size: 17px; line-height: 1.55; color: var(--ink); margin: 0; font-weight: 600; }
.wb-d-en { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 4px 0 0; }
.wb-d-colloc { display: flex; flex-direction: column; gap: 2px; }
.wb-d-colloc-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 8px 12px; border-radius: 10px; background: var(--panel-soft); margin-bottom: 6px; }
.wb-d-colloc-en { font-size: 15px; font-weight: 700; color: var(--brand-ink); }
.wb-d-colloc-zh { font-size: 13.5px; color: var(--muted); }
.wb-d-colloc-exp { display: block; cursor: pointer; }
.wb-d-colloc-exp > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; list-style: none; }
.wb-d-colloc-exp > summary::-webkit-details-marker { display: none; }
.wb-d-colloc-caret { margin-left: auto; color: var(--muted); font-weight: 700; transition: transform .18s ease; }
.wb-d-colloc-exp[open] > summary .wb-d-colloc-caret { transform: rotate(90deg); }
.wb-d-colloc-eg { padding: 8px 0 2px; }
.wb-d-colloc-eg:first-of-type { margin-top: 8px; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); padding-top: 10px; }
.wb-d-eg { padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.wb-d-eg:last-child { border-bottom: 0; }
.wb-d-eg-en { font-size: 15.5px; line-height: 1.65; color: var(--ink); margin: 0; }
.wb-d-eg-zh { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 5px 0 0; }
.wb-d-chiprow { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; }
.wb-d-chiplabel { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #fff; background: #9aa6b6; border-radius: 6px; padding: 2px 7px; }
.wb-d-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wb-d-chip { font-size: 13.5px; color: var(--brand-ink); background: var(--panel-soft); border: 1px solid var(--line); border-radius: 14px; padding: 3px 12px; }
.wb-d-pair { padding: 7px 0; }
.wb-d-pair-w { font-size: 15px; color: var(--brand); margin-right: 9px; }
.wb-d-pair-note { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.wb-d-mnem { font-size: 15px; line-height: 1.65; color: var(--ink); margin: 0; background: #fdf8ec; border-radius: 10px; padding: 11px 14px; }

/* ── 背单词 词典页重设计：更紧凑、更美、一屏显示更多 ── */
/* 词典页极简头部：只留返回 + 细进度条 */
.study-header.study-header-dict { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; border: 0; grid-template-columns: none; }
.study-bar.slim { flex: 1; height: 4px; background: var(--line); border-radius: 999px; overflow: hidden; }
.study-bar.slim > span { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width .3s ease; }
/* 单词标题缩小 + 整体行距收紧 */
.dict-card { gap: 15px; }
.dict-head { padding-bottom: 12px; align-items: center; }
.dict-word { font-size: 27px !important; line-height: 1.15; }
.dict-ipa { font-size: 15px; }
.dict-section h3 { margin: 0 0 8px; }
.pos-list { gap: 6px; }
/* 听/朗读按钮：纯色实心，无渐变无重阴影 */
.btn-listen.small.solid { padding: 8px 13px; font-size: 16px; border-radius: 12px; box-shadow: none; line-height: 1; min-width: 42px; }
.btn-listen.small.solid:active { transform: scale(.95); }
/* 加入生词本：只留五角星图标，无文字 */
.btn-star.icon-only { padding: 0; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; border-radius: 12px; line-height: 1; }
.btn-star.icon-only.on { color: #f5a623; border-color: #f5a623; background: rgba(245,166,35,.1); }
/* 之前的翻译 / 造句：直接内嵌，干净卡片（取代折叠的"历史痕迹"） */
.prior-block { margin-top: 4px; }
.prior-sentences { margin-top: 14px; }
.prior-sub { font-size: 13px; font-weight: 700; color: var(--muted); margin: 0 0 8px; }
.prior-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.prior-item { background: var(--panel-soft); border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px; line-height: 1.5; }
.prior-item.ok { border-left: 3px solid var(--brand); }
.prior-item.fail { border-left: 3px solid #e0a32e; }
.prior-zh, .prior-original { margin: 0 0 3px; color: var(--ink); font-weight: 600; font-size: 14.5px; }
.prior-heard, .prior-ref, .prior-corrected, .prior-polished, .prior-notes { margin: 2px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.prior-corrected em, .prior-polished em { color: var(--brand-ink); font-style: normal; }
/* 所有"听/播放"按钮统一纯色实心（含例句/搭配里的 ▶） */
.dict-card .btn-listen.tiny, .dict-section .btn-listen.tiny { background: var(--brand); color: #fff; border: none; box-shadow: none; }
.dict-card .btn-listen.tiny:active, .dict-section .btn-listen.tiny:active { transform: scale(.95); }

/* #1 固定搭配字体与例句统一（去掉等宽 code 字体，正常无衬线、更好看） */
.colloc-list.bigger .colloc, .dict-section .colloc {
  font-family: -apple-system, "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 15.5px; font-weight: 700; letter-spacing: 0; color: var(--brand-ink);
}
.colloc-list.bigger li.colloc-row { background: var(--panel-soft); border: 1px solid var(--line); border-radius: 12px; }
.colloc-list.bigger li.colloc-row.open { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.colloc-zh { font-size: 14px; color: var(--muted); font-weight: 500; }
.colloc-row .colloc-toggle .chev { color: var(--brand); }
.colloc-examples .ex-en { font-size: 15px; }
.colloc-examples .ex-zh { font-size: 13.5px; }

/* #2 翻译练习 / 造句 区域美化 + 录音按钮统一纯色（去蓝色渐变） */
.sentence-row.card.voice-mode .voice-mic-big { background: var(--brand); box-shadow: none; }
.sentence-row.card.voice-mode .voice-mic-big:hover { background: var(--brand-ink); box-shadow: none; }
.sentence-row.card.voice-mode .voice-mic-big.rec { background: var(--danger); box-shadow: 0 0 0 6px rgba(180,35,24,.16); }
.voice-mic-big { box-shadow: none; }
.pron-btn.primary { box-shadow: none; }
/* 翻译任务卡：更干净的留白与层次 */
.translate-section .trans-task { background: var(--panel-soft); border-left: 3px solid var(--brand); border-radius: 0 14px 14px 0; padding: 16px 18px; }
.translate-section .trans-task .big-line.zh { font-size: 20px; font-weight: 700; line-height: 1.5; }
.trans-dots { gap: 8px; }
.trans-dot { width: 30px; height: 30px; border-radius: 50%; }
.translate-section .trans-input-row { gap: 10px; align-items: center; margin-top: 12px; }
/* 造句输入卡：与翻译卡风格一致 */
.sentence-row.card { background: var(--panel-soft); border: 1px solid var(--line); border-radius: 14px; }
.sentence-row.card:focus-within { border-color: var(--brand); }

.me-podcast-item.me-clickable { cursor: pointer; }
.me-podcast-item.me-clickable:active { background: var(--panel-soft); }

/* #6 收藏文章五角星按钮 */
.rd-rd-fav-btn { font-size: 18px; line-height: 1; }
.rd-rd-fav-btn.on { color: #f5a623; }

/* #5 标准写作题排版：清晰大标题 + 更小的分行要求 */
.vy-writing-head { margin-bottom: 14px; }
.vy-writing-title { font-size: 20px; font-weight: 800; line-height: 1.4; color: var(--ink); margin: 8px 0 10px; }
.vy-writing-reqs { margin: 0 0 8px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.vy-writing-reqs li { font-size: 14px; line-height: 1.55; color: var(--muted); padding-left: 16px; position: relative; }
.vy-writing-reqs li::before { content: "·"; position: absolute; left: 3px; color: var(--brand); font-weight: 800; }
.vy-writing-en { margin-top: 10px; }
.vy-writing-en summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.vy-writing-en-title { font-size: 13.5px; color: var(--muted); margin: 6px 0 4px; font-weight: 600; }
.vy-writing-en ul { margin: 0; padding-left: 18px; }
.vy-writing-en li { font-size: 12.5px; color: #9aa0a8; line-height: 1.5; }

/* #13 翻译/造句重设计 + 手绘麦克风（无提交按钮，录音/回车后自动提交） */
.mic-hand { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: #fff; border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(51, 163, 21, .28); transition: transform .12s; flex: 0 0 auto; }
.mic-hand:active { transform: scale(.93); }
.mic-hand[disabled], .mic-hand.done { background: #cbd5d3; box-shadow: none; cursor: default; }
.mic-hand.rec, .mic-hand.recording { background: var(--danger); box-shadow: 0 0 0 6px rgba(180,35,24,.16); animation: micPulse 1.3s infinite; }
.mic-hand .hand-mic { width: 26px; height: 26px; }
.mic-hand-lg { width: 72px; height: 72px; }
.mic-hand-lg .hand-mic { width: 34px; height: 34px; }
.mic-hint { text-align: center; font-size: 12.5px; color: var(--muted); margin: 9px 0 0; }

/* 手绘风功能按钮：语音 / 打字（替代原 语音/打字 toggle + 单独的🎤按钮） */
.io-btn-row { display: flex; gap: 10px; justify-content: center; align-items: stretch; margin: 12px 0 4px; }
.io-btn-row-sm { gap: 10px; }
.io-fn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 66px; padding: 8px 14px; border-radius: 14px; border: 2px solid #dae2d7; background: #fff; color: #6b7c79; cursor: pointer; transition: transform .12s, border-color .16s, color .16s, background .16s, box-shadow .16s; }
.io-fn:active { transform: scale(.95); }
.io-fn .hand-mic, .io-fn .hand-kbd { width: 20px; height: 20px; }
.io-fn .io-fn-label { font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }
/* 选中态：白底 + 手绘描边图标（用户不要绿色填充、更不要 🎤） */
.io-fn.on { border-color: var(--brand); color: var(--brand); background: #fff; box-shadow: 0 4px 14px rgba(51, 163, 21, .12); }
.io-fn.mic.on { color: var(--brand); background: #fff; border-color: var(--brand); }
.io-fn.done, .io-fn[disabled].kbd { color: #aab6b4; border-color: #e5e9e2; cursor: default; background: #f5f7f4; box-shadow: none; }
.io-fn.mic.on[disabled].done { background: #f5f7f4; border-color: #e5e9e2; color: #aab6b4; }
.io-fn.mic.rec, .io-fn.mic.recording,
.io-fn.mic.rec-active { background: var(--danger); border-color: var(--danger); color: #fff; box-shadow: 0 0 0 6px rgba(180,35,24,.14); animation: micPulse 1.3s infinite; }
/* ASR 录音状态（asr-client 加的 rec-* class），保留手绘麦克风、只换底色 */
.io-fn.mic.rec-busy { color: #aab6b4; border-color: #e5e9e2; background: #f5f7f4; }
.io-fn.mic.rec-error { background: var(--danger); border-color: var(--danger); color: #fff; }
.sentences-section .io-btn-row.sentence-mode-toggle { margin: 4px 0 14px; }
.trans2 .trans2-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.trans2 .trans2-head h3 { margin: 0; }
.trans2-count { font-size: 13px; color: var(--muted); font-weight: 700; }
.trans-hint { font-size: 13.5px; color: var(--muted); margin: 10px 0 0; line-height: 1.55; }
.trans-hint-reuse { color: var(--brand-ink); }
.trans-hint-reuse b { color: var(--brand); font-weight: 800; }
.translate-section.trans2 .trans-input-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* #3 对练报告：浅色卡片 + 亮点/提升点左对齐（取代暗黑风） */
.vy-phone-review { background: #fff; color: var(--ink); border-radius: 20px; padding: 24px 20px; text-align: left; max-width: 460px; margin: 8vh auto 0; box-shadow: 0 16px 48px rgba(0,0,0,.35); }
.vy-phone-review h2 { color: var(--ink); text-align: center; margin: 0 0 16px; font-size: 20px; }
.vy-phone-review .vy-phone-fb-sum { color: var(--muted); font-size: 14.5px; line-height: 1.6; text-align: left; background: var(--panel-soft); border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; }
.vy-phone-review .vy-phone-fb-block { text-align: left; margin-bottom: 16px; }
.vy-phone-review .vy-phone-fb-block b { display: block; font-size: 14px; color: var(--brand); margin-bottom: 8px; font-weight: 800; }
.vy-phone-review .vy-phone-fb-block ul { margin: 0; padding-left: 20px; list-style: none; }
.vy-phone-review .vy-phone-fb-block li { font-size: 14.5px; line-height: 1.6; color: var(--ink); margin-bottom: 7px; text-align: left; padding-left: 14px; position: relative; }
.vy-phone-review .vy-phone-fb-block li::before { content: "•"; position: absolute; left: 0; color: var(--brand); }
.vy-phone-review .vy-phone-scores { background: var(--panel-soft); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; color: var(--ink); }
.vy-phone-review .vy-phone-fb-loading, .vy-phone-review .vy-phone-fb-skip { color: var(--muted); }
.vy-phone-review .vy-phone-logwrap summary { color: var(--muted); font-size: 13px; cursor: pointer; }
.vy-phone-review .vy-phone-reviewlog { margin-top: 10px; max-height: 30vh; overflow-y: auto; }
.vy-phone-review .vy-phone-review-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.vy-phone-review .vy-phone-review-actions .btn-ghost { background: var(--panel-soft); color: var(--ink); border: 1px solid var(--line); }

/* 2026-06-20 交流实战报告：全屏 + 顶部返回/手绘分享 + 美化 */
.vy-phone-modal.vy-phone-report-mode { padding: 0 !important; place-items: stretch; }
.vy-phone-report-mode .vy-phone-card { max-width: none; max-height: none; width: 100%; height: 100%; }
.vy-phone-report-mode .vy-phone-stage { height: 100%; }
.vy-phone-report-mode .vy-phone-review {
  background: linear-gradient(180deg, #fff 0%, #f7f9fb 100%);
  border-radius: 0; margin: 0; max-width: none; max-height: none; width: 100%; height: 100%;
  box-shadow: none; padding: 0; display: flex; flex-direction: column;
}
.vy-phone-review-top {
  display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 2;
  padding: calc(13px + env(safe-area-inset-top, 0px)) 14px 12px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.vy-phone-review-top h2 { flex: 1; text-align: center; margin: 0 !important; font-size: 17px; color: var(--ink); }
.vy-phone-review-back, .vy-phone-review-share { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.vy-phone-review-back:active, .vy-phone-review-share:active { transform: scale(.94); }
.vy-phone-review-share { color: var(--brand-ink); }
.vy-phone-review-share.is-busy { opacity: .45; pointer-events: none; }
.vy-phone-review-pad { width: 40px; flex: none; }
.vy-phone-report-mode .vy-phone-review-body { flex: 1; overflow-y: auto; padding: 18px 18px 10px; -webkit-overflow-scrolling: touch; }
.vy-phone-report-mode .vy-phone-fb, .vy-phone-report-mode .vy-phone-scores, .vy-phone-report-mode .vy-phone-reviewlog { max-height: none; }
.vy-phone-report-mode .vy-phone-fb { background: var(--panel-soft); border-radius: 16px; padding: 16px; }
.vy-phone-report-mode .vy-phone-review-actions {
  position: sticky; bottom: 0; margin-top: 0; flex-wrap: nowrap;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.95); backdrop-filter: blur(8px); border-top: 1px solid var(--line);
}
.vy-phone-report-mode .vy-phone-review-actions .btn-primary { flex: 1; }
.vy-phone-report-mode .vy-phone-review-actions .btn-ghost { flex: 0 0 auto; }
/* 手绘小图标 + 报告标题加深(原 #ffd9a0 在白底太淡,看着不舒服) */
.vy-ric { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.16em; flex: none; }
.vy-pron-ic .vy-ric { width: 18px; height: 18px; vertical-align: middle; }
.vy-phone-report-mode .vy-phone-scores h3, .vy-phone-report-mode .vy-phone-fb h3 { color: #b8690a !important; font-weight: 800; }
.vy-phone-report-mode .vy-phone-fb-loading { color: var(--muted); }

/* #3 写作题标题：覆盖 .vy-section-head h1 的默认大字号 */
.vy-writing-head .vy-writing-title, .vy-section-head.vy-writing-head h1 { font-size: 20px !important; font-weight: 800; line-height: 1.4; color: var(--ink); margin: 8px 0 10px; text-align: left; }
.vy-writing-head .vy-writing-reqs { text-align: left; }

/* #3 AI对练通话页：深色 → 浅色（图3 风格，柔和渐变背景 + 深色文字） */
.vy-phone-modal { background: linear-gradient(165deg, #fbeef2 0%, #eef1f8 45%, #e9f6ea 100%) !important; }
.vy-phone-stage { color: var(--ink); }
.vy-phone-stage h2, .vy-phone-stage [data-phone-title] { color: var(--ink) !important; }
.vy-phone-sub { color: var(--muted) !important; }
.vy-phone-task { color: var(--brand-ink) !important; background: rgba(51, 163, 21, .10) !important; }
.vy-phone-swap { background: #fff !important; color: var(--brand-ink) !important; border: 1px solid var(--line) !important; }
.vy-phone-who { color: #8a97a0 !important; }
.vy-phone-line.ai .vy-phone-bubble { background: #fff !important; color: var(--ink) !important; box-shadow: 0 2px 10px rgba(0,0,0,.06); border-bottom-left-radius: 5px; }
.vy-phone-line.user .vy-phone-bubble { background: var(--brand) !important; color: #fff !important; }
.vy-phone-mic { color: var(--muted) !important; }
.vy-phone-mic-dot { background: #c3ccd2 !important; }
.vy-phone-fineprint { color: #9aa7af !important; }

/* #6 Free Talk 自由对话（交流实战页底部） */
.vy-freetalk { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--line); }
.vy-ft-list { display: flex; flex-direction: column; gap: 10px; }
.vy-ft-loading { color: var(--muted); font-size: 14px; }
.vy-ft-row { display: flex; align-items: center; gap: 12px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.vy-ft-q { flex: 1; margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.vy-ft-call { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--brand); color: #fff; font-size: 20px; cursor: pointer; box-shadow: 0 4px 12px rgba(51, 163, 21, .28); }
.vy-ft-call:active { transform: scale(.93); }

/* #1 真人外教头像 + 手绘挂断键 */
.vy-phone-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.vy-phone-avatar { overflow: hidden; }
.vy-phone-hangup { display: inline-grid; place-items: center; }
.vy-phone-hangup svg { width: 28px; height: 28px; }

/* #4 播客 (Podcast) — 华为播客风 */
.pod-shell { padding: 14px 16px 90px; }
.pod-cats { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pod-cats::-webkit-scrollbar { display: none; }
.pod-cat { flex: 0 0 auto; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; font-size: 14px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.pod-cat.on { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
.pod-cover { position: relative; overflow: hidden; border-radius: 14px; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0,0,0,.16); flex: 0 0 auto; }
.pod-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pod-cover i { font-size: 30px; font-style: normal; }
.pod-cover.sm { width: 60px; height: 60px; border-radius: 12px; }
.pod-cover.sm i { font-size: 26px; }
.pod-cover.hero { width: 132px; height: 132px; border-radius: 18px; margin: 0 auto 14px; box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.pod-cover.hero i { font-size: 52px; }
.pod-cover.np { width: 200px; height: 200px; max-width: 62vw; border-radius: 20px; margin: 8px auto 18px; box-shadow: 0 18px 44px rgba(0,0,0,.24); }
.pod-cover.np i { font-size: 84px; }
.pod-toplist { background: #fff; border-radius: 16px; padding: 18px 16px; box-shadow: 0 4px 18px rgba(0,0,0,.05); }
.pod-toplist-tag { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #f08c00; }
.pod-toplist h2 { font-size: 23px; font-weight: 800; margin: 2px 0 14px; }
.pod-rank { list-style: none; margin: 0; padding: 0; }
.pod-rank li { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.pod-rank li:last-child { border-bottom: 0; }
.pod-rank-n { flex: 0 0 22px; font-size: 20px; font-weight: 700; color: var(--ink); text-align: center; }
.pod-rank-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pod-rank-body b { font-size: 16px; color: var(--ink); }
.pod-rank-body em { font-size: 13px; color: var(--muted); font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-prog-hero { position: relative; text-align: center; color: #fff; border-radius: 0 0 24px 24px; padding: 18px 18px 22px; margin: -14px -16px 16px; }
.pod-prog-hero h2 { font-size: 22px; font-weight: 800; margin: 0; }
.pod-prog-host { font-size: 13px; opacity: .85; margin: 5px 0 0; }
.pod-prog-desc { font-size: 13.5px; opacity: .92; margin: 8px 0 0; line-height: 1.5; }
.pod-latest { margin-top: 16px; background: #fff; color: var(--ink); border: none; border-radius: 999px; padding: 11px 28px; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.pod-back { display: inline-flex; align-items: center; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 999px; height: 36px; padding: 0 14px; font-size: 15px; cursor: pointer; color: var(--ink); margin-bottom: 12px; }
.pod-back.light { position: absolute; left: 14px; top: 12px; background: rgba(255,255,255,.22); border: none; color: #fff; width: 36px; padding: 0; justify-content: center; margin: 0; }
.pod-eplist { display: flex; flex-direction: column; }
.pod-ep { display: flex; align-items: center; gap: 12px; padding: 14px 2px; border: none; border-bottom: 1px solid var(--line); background: none; cursor: pointer; text-align: left; width: 100%; }
.pod-ep-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.pod-ep-body b { font-size: 15.5px; color: var(--ink); }
.pod-ep-body em { font-size: 13px; color: var(--muted); font-style: normal; line-height: 1.45; }
.pod-ep-meta { font-size: 11.5px; color: #9aa7af; margin-top: 2px; }
.pod-ep-play { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--panel-soft); color: var(--brand); display: grid; place-items: center; font-size: 13px; border: 1px solid var(--line); }
.pod-empty, .pod-loading { color: var(--muted); font-size: 14px; padding: 28px 0; text-align: center; }
.pod-player { text-align: center; }
.pod-np-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pod-np-top .pod-back { margin-bottom: 0; }
.pod-fav-star { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-soft); color: #f59e0b; font-size: 22px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .12s; }
.pod-fav-star.on { color: #f59e0b; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.4); }
.pod-fav-star:active { transform: scale(.9); }
.pod-np-t { font-size: 21px; font-weight: 800; margin: 0 0 3px; }
.pod-np-s { font-size: 14px; color: var(--muted); margin: 0; }
.pod-np-sum { font-size: 13.5px; color: var(--ink); background: var(--panel-soft); border-radius: 12px; padding: 10px 14px; margin: 14px auto; max-width: 440px; line-height: 1.55; }
.pod-progress { height: 4px; background: var(--line); border-radius: 999px; margin: 18px auto 6px; max-width: 480px; overflow: hidden; }
.pod-progress-fill { height: 100%; width: 0; background: var(--pod-accent, var(--brand)); border-radius: 999px; transition: width .25s linear; }
.pod-progress-time { display: flex; justify-content: space-between; max-width: 480px; margin: 0 auto; font-size: 11.5px; color: var(--muted); }
.pod-np-seg { color: #9aa7af; }
.pod-np-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 16px 0 8px; }
.pod-np-controls > button { background: none; border: none; font-size: 22px; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.pod-rate { font-size: 14px !important; font-weight: 700; min-width: 38px; }
.pod-skip { position: relative; font-size: 26px; line-height: 1; }
.pod-skip small { position: absolute; left: 0; right: 0; top: 54%; transform: translateY(-50%); font-size: 9px; font-weight: 700; }
.pod-np-play { width: 64px; height: 64px; border-radius: 50%; background: var(--pod-accent, var(--brand)); color: #fff; font-size: 24px; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
/* 「开口说」按钮：与 ±15 同等大小、用节目主题色突出 */
.pod-np-controls > button.pod-speak-btn { color: var(--pod-accent, var(--brand)); }
.pod-speak-btn .hand-speak { width: 27px; height: 27px; }
.pod-transcript { text-align: left; max-width: 560px; margin: 18px auto 0; }
.pod-line { font-size: 15.5px; line-height: 1.7; color: #9aa7af; margin: 0 0 10px; cursor: pointer; transition: color .2s; }
.pod-line.cur { color: var(--ink); font-weight: 600; }

/* 对话课 手绘线性图标（替换所有 emoji）：随文字大小缩放、垂直居中、不被压缩 */
.dc-ic { display: inline-block; width: 1.06em; height: 1.06em; vertical-align: -0.17em; flex: 0 0 auto; margin-right: 2px; }
h3 .dc-ic, h4 .dc-ic { width: 1.12em; height: 1.12em; vertical-align: -0.18em; margin-right: 5px; }
.dc-progress-text .dc-ic { vertical-align: -0.2em; margin-right: 4px; }
.dc-teacher-feedback .dc-ic, .dc-explain-bubble .dc-ic, .dc-rec-fb .dc-ic, .dc-usage-head .dc-ic { vertical-align: -0.2em; }
.btn-primary .dc-ic, .dc-rec-btn .dc-ic, .dc-word-chip .dc-ic { vertical-align: -0.2em; }

/* 听说 polish: 手绘播放图标对齐 + 重音节奏口令 */
.hand-play { vertical-align: -2px; margin-right: 3px; }
.hand-pause { vertical-align: -2px; }
/* 纯图标播放按钮：把手绘三角居中，去掉文字按钮才需要的右间距 */
.pod-ep-play .hand-play, .rd-dict-play .hand-play, .vy-line-play .hand-play, .vy-shadow-play .hand-play,
.btn-listen.tiny .hand-play, .pod-np-play .hand-play, .pod-np-play .hand-pause, .si-audio .hand-play { margin-right: 0; }
.btn-listen.tiny, .vy-line-play, .pod-ep-play, .rd-dict-play { display: inline-flex; align-items: center; justify-content: center; }
.dc-stress-cue { margin-top: 14px; min-height: 30px; }
.dc-stress-cue-tip { font-size: 18px; font-weight: 700; color: var(--brand-ink); margin: 0; }

/* ════════════════════════════════════════════════════════════════
   会员体系 membership — 我的页 VIP 头像/横幅 + 会员页
   ════════════════════════════════════════════════════════════════ */
.me3-avatar { position: relative; overflow: visible; }
.me3-avatar.vip-basic { box-shadow: 0 0 0 2.5px #6ec827; }
.me3-avatar.vip-premium { box-shadow: 0 0 0 2.5px #d8af52; }
.me3-vip-badge { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 800; color: #fff; padding: 1px 6px; border-radius: 999px; line-height: 1.35; border: 1.5px solid #fff; white-space: nowrap; }
.me3-vip-badge.basic { background: #6ec827; }
.me3-vip-badge.premium { background: linear-gradient(135deg, #e0bd63, #b8862f); color: #4a3608; }
/* 今日开口打卡入口（放在会员横幅上方） */
.me3-checkin-card { display: flex; align-items: center; gap: 12px; width: 100%; border: 1.5px solid color-mix(in srgb, var(--brand) 24%, transparent); border-radius: 16px; padding: 13px 16px; margin: 0 0 12px; cursor: pointer; text-align: left; background: color-mix(in srgb, var(--brand) 7%, #fff); color: var(--ink); }
.me3-checkin-card:active { transform: translateY(-1px); }
.me3-checkin-ic { flex-shrink: 0; display: inline-flex; align-items: center; color: var(--brand); }
.me3-checkin-ic svg { width: 24px; height: 24px; }
.me3-checkin-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.me3-checkin-text b { font-size: 16px; font-weight: 800; color: var(--brand-ink); }
.me3-checkin-text em { font-style: normal; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me3-checkin-text em strong { color: var(--brand); font-weight: 800; }
.me3-checkin-go { font-size: 20px; font-weight: 800; color: var(--brand); flex-shrink: 0; }
.me3-vip-banner { display: flex; align-items: center; gap: 12px; width: 100%; border: none; border-radius: 16px; padding: 13px 16px; margin: 0 0 14px; cursor: pointer; text-align: left; background: linear-gradient(110deg, #385f25, #49972a 60%, #5bb636); color: #fff; box-shadow: 0 6px 18px rgba(52, 123, 23, .20); }
.me3-vip-banner.basic, .me3-vip-banner.premium { background: linear-gradient(110deg, #2a2316, #5b4a23 52%, #caa24a); }
.me3-vip-crown { font-size: 24px; flex-shrink: 0; }
.me3-vip-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.me3-vip-text b { font-size: 16px; font-weight: 800; }
.me3-vip-text em { font-style: normal; font-size: 12px; opacity: .86; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me3-vip-cta { font-size: 13px; font-weight: 800; background: rgba(255,255,255,.92); color: #49972a; padding: 6px 13px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.me3-vip-banner.basic .me3-vip-cta, .me3-vip-banner.premium .me3-vip-cta { color: #8a6a1e; }

/* 会员页 */
.mem-shell { max-width: 560px; margin: 0 auto; padding: 0; background: #f5f8f5; min-height: 100vh; }
.mem-top { position: sticky; top: 0; z-index: 6; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; background: #317a17; color: #fff; padding: 10px 6px; }
.mem-back { border: none; background: transparent; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.mem-top-title { text-align: center; font-size: 17px; font-weight: 700; }
.mem-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #317a17, #49972a 52%, #caa24a); color: #fff; padding: 20px 18px 24px; }
.mem-hero-glow { position: absolute; top: -40%; right: -20%; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); }
.mem-hero-row { display: flex; align-items: center; gap: 14px; position: relative; }
.mem-avatar-wrap { position: relative; flex-shrink: 0; display: inline-flex; }
.mem-avatar { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.22); display: grid; place-items: center; font-size: 26px; font-weight: 800; }
.mem-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.mem-avatar-wrap.vip .mem-avatar { box-shadow: 0 0 0 2.5px #ffd66b; }
.mem-vip-chip { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 9px; font-weight: 800; background: #ffd66b; color: #5a4410; padding: 1px 7px; border-radius: 999px; font-style: normal; white-space: nowrap; }
.mem-hero-info { min-width: 0; }
.mem-hero-info h1 { margin: 0; font-size: 20px; }
.mem-hero-info p { margin: 4px 0 0; font-size: 13px; opacity: .92; }
.mem-hero-pitch { margin: 14px 0 0; font-size: 13px; line-height: 1.6; opacity: .92; position: relative; }
.mem-plan-toggle { display: flex; gap: 6px; margin: 16px 16px 0; background: #e8f0e9; border-radius: 999px; padding: 4px; }
.mem-plan-toggle button { flex: 1; border: none; background: transparent; padding: 9px 6px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #6a7680; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.mem-plan-toggle button.on { background: #fff; color: #49972a; box-shadow: 0 1px 5px rgba(0,0,0,.1); }
.mem-plan-toggle em { font-style: normal; font-size: 11px; font-weight: 700; color: #c79a3e; }
.mem-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 16px 0; }
.mem-tier { position: relative; text-align: left; border: 2px solid #e3e8eb; background: #fff; border-radius: 16px; padding: 14px 14px 16px; cursor: pointer; transition: border-color .15s, transform .1s; }
.mem-tier.sel { border-color: #49972a; }
.mem-tier.premium.sel { border-color: #c79a3e; box-shadow: 0 6px 18px rgba(199,154,62,.18); }
.mem-tier:active { transform: scale(.99); }
.mem-tier-flag { position: absolute; top: -10px; right: 12px; background: linear-gradient(135deg, #e0bd63, #c79a3e); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 10px; border-radius: 999px; }
.mem-tier-name { font-size: 16px; font-weight: 800; color: #16202c; }
.mem-tier-tag { display: block; font-size: 11px; color: #8a97a4; margin-top: 2px; }
.mem-tier-price { margin: 12px 0 0; color: #16202c; }
.mem-tier-price b { font-size: 26px; }
.mem-tier-price em { font-style: normal; font-size: 13px; color: #8a97a4; margin-left: 1px; }
.mem-tier-per { font-size: 11px; color: #c79a3e; font-weight: 700; margin-top: 1px; }
.mem-tier-list { list-style: none; margin: 11px 0 0; padding: 0; display: grid; gap: 5px; }
.mem-tier-list li { font-size: 12px; color: #3a4856; padding-left: 17px; position: relative; line-height: 1.45; }
.mem-tier-list li::before { content: "✓"; position: absolute; left: 0; color: #6ec827; font-weight: 800; }
.mem-tier.premium .mem-tier-list li::before { color: #c79a3e; }
.mem-h2 { font-size: 16px; font-weight: 800; color: #16202c; margin: 0 0 12px; }
.mem-compare { margin: 22px 16px 0; background: #fff; border-radius: 16px; padding: 16px; }
.mem-compare table { width: 100%; border-collapse: collapse; }
.mem-compare th, .mem-compare td { padding: 9px 4px; text-align: center; font-size: 13px; }
.mem-compare th:first-child, .mem-compare td:first-child { text-align: left; color: #3a4856; font-weight: 600; }
.mem-compare thead th { color: #8a97a4; font-weight: 700; border-bottom: 1px solid #eef2f5; }
.mem-compare th.hl, .mem-compare td.hl { color: #c79a3e; font-weight: 800; background: #fffaf0; }
.mem-compare tbody td { color: #6ec827; font-weight: 700; }
.mem-compare tbody td:first-child { color: #3a4856; font-weight: 600; }
.mem-compare tbody tr + tr td { border-top: 1px solid #f2f5f7; }
.mem-perks { margin: 22px 16px 0; background: #fff; border-radius: 16px; padding: 16px; }
.mem-perk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 6px; }
.mem-perk { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.mem-perk span { width: 46px; height: 46px; border-radius: 14px; background: #f3f8f6; display: grid; place-items: center; font-size: 22px; }
.mem-perk em { font-style: normal; font-size: 11px; color: #5a6472; }
.mem-note { margin: 18px 16px 0; font-size: 11px; color: #9aa3b0; line-height: 1.5; text-align: center; }
.mem-buy-spacer { height: 86px; }
.mem-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 12px; max-width: 560px; margin: 0 auto; background: #fff; border-top: 1px solid #eef2f5; padding: 11px 16px calc(11px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
.mem-buybar-price { flex: 1; min-width: 0; }
.mem-buybar-price b { font-size: 22px; color: #16202c; }
.mem-buybar-price span { font-size: 12px; color: #8a97a4; margin-left: 4px; }
.mem-buy-btn { border: none; background: linear-gradient(135deg, #49972a, #5dc930); color: #fff; font-size: 16px; font-weight: 800; padding: 13px 28px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.mem-buy-btn.owned, .mem-buy-btn:disabled { background: #e3e8eb; color: #8a97a4; }
.mem-toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); background: rgba(20,28,40,.93); color: #fff; font-size: 14px; font-weight: 600; padding: 11px 20px; border-radius: 999px; z-index: 6000; opacity: 0; transition: opacity .25s; pointer-events: none; max-width: 82vw; text-align: center; }
.mem-toast.on { opacity: 1; }

/* ── 会员门槛升级提示（整页 .feat-gate-shell + 弹窗 .feat-gate-modal）─────────── */
.feat-gate-shell { display: flex; align-items: center; justify-content: center; min-height: 78vh; padding: 28px 20px 60px; }
.feat-gate-card { --gate-ac: #6ec827; position: relative; width: 100%; max-width: 360px; background: #fff; border-radius: 22px; padding: 30px 24px 24px; box-shadow: 0 18px 50px rgba(49, 122, 23, .16); border: 1px solid rgba(49, 122, 23, .08); text-align: center; }
.feat-gate-badge { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 30px; background: linear-gradient(140deg, color-mix(in srgb, var(--gate-ac) 18%, #fff), color-mix(in srgb, var(--gate-ac) 4%, #fff)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gate-ac) 22%, transparent); }
.feat-gate-title { margin: 0 0 6px; font-size: 21px; font-weight: 800; color: #335326; }
.feat-gate-sub { margin: 0 0 18px; font-size: 14px; color: #5b6b66; }
.feat-gate-sub b { color: var(--gate-ac); }
.feat-gate-list { list-style: none; margin: 0 0 22px; padding: 0; text-align: left; display: grid; gap: 10px; }
.feat-gate-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #4b5742; font-weight: 600; }
.feat-gate-list li i { flex: none; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--gate-ac) 14%, #fff); color: var(--gate-ac); font-style: normal; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.feat-gate-cta { width: 100%; border: 0; cursor: pointer; padding: 14px; border-radius: 14px; font-size: 15.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--gate-ac), color-mix(in srgb, var(--gate-ac) 70%, #c79a3e)); box-shadow: 0 10px 22px color-mix(in srgb, var(--gate-ac) 32%, transparent); }
.feat-gate-cta:active { transform: translateY(1px); }
.feat-gate-skip { width: 100%; margin-top: 10px; border: 0; background: transparent; cursor: pointer; padding: 8px; font-size: 13.5px; color: #8a9893; font-weight: 600; }
.feat-gate-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(0,0,0,.05); color: #6b7975; font-size: 19px; line-height: 1; cursor: pointer; }
.feat-gate-modal { position: fixed; inset: 0; z-index: 7000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(38, 55, 30, .5); opacity: 0; transition: opacity .2s; backdrop-filter: blur(2px); }
.feat-gate-modal.on { opacity: 1; }
.feat-gate-modal .feat-gate-card { transform: translateY(14px) scale(.98); transition: transform .24s cubic-bezier(.2,.9,.3,1.1); }
.feat-gate-modal.on .feat-gate-card { transform: none; }

/* ============================================================
   对话课课堂 · Apple 级 UI 精修（2026-06-19，仅样式不改功能）
   统一品牌青绿 #33a315 + 柔和层次阴影 + SF 字体 + 毛玻璃 chrome。
   全部限定在 .dc-immersive 内（提高优先级 + 置于文件末尾，覆盖旧 .dc-* 规则）。
   ============================================================ */
.dc-immersive { max-width: 640px; margin: 0 auto; padding: 66px 18px 40px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif; }
.dc-immersive .dc-exit-min, .dc-immersive .dc-records-btn {
  background: rgba(255,255,255,.72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border: .5px solid rgba(0,0,0,.08); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.dc-immersive .dc-exit-min { width: 38px; height: 38px; font-size: 19px; top: 16px; left: 16px; color: #1d1d1f; }
.dc-immersive .dc-exit-min:hover { background: rgba(255,255,255,.92); color: #1d1d1f; }
.dc-immersive .dc-records-btn { top: 16px; right: 16px; color: #33a315; font-weight: 600; padding: 9px 15px; }
.dc-immersive .dc-records-btn:hover { background: rgba(255,255,255,.92); }
.dc-immersive .dc-stage { min-height: auto; margin-bottom: 0; }
/* 无边框：内容直接平铺在页面上（去掉外层白卡框），视觉层次交给内部的小卡 */
.dc-immersive .dc-stage-block { background: transparent; border: 0; border-radius: 0;
  padding: 6px 0 0; box-shadow: none; }
.dc-immersive .dc-stage-block + .dc-stage-block { margin-top: 10px; }
.dc-immersive .dc-stage-block h3 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: #1d1d1f; margin: 0 0 10px; }
.dc-immersive .dc-drill-mode-tag { display: inline-flex; align-items: center; gap: 6px; background: rgba(51, 163, 21, .08);
  border: 0; color: #6e6e73; border-radius: 999px; padding: 7px 14px; font-size: 12.5px; margin: 0 0 16px; }
.dc-immersive .dc-drill-mode-tag strong { color: #33a315; font-weight: 700; }

/* ── 在线游戏化操练 (dialogue-drills.js) ─────────────────────────────── */
.dcg-wrap { text-align: center; }
.dcg-head { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin: 2px 0 14px; }
.dcg-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(51,163,21,.10); color:#2a7d12;
  font-weight:700; font-size:14px; border-radius:999px; padding:7px 16px; }
.dcg-sub { font-size:12.5px; color:#8a8a8e; }
.dcg-line { font-size:21px; line-height:1.5; font-weight:600; color:#1d1d1f; margin:6px 0 16px; }
.dcg-zh { font-size:14px; color:#8a8a8e; margin:-8px 0 14px; }
.dcg-loading { color:#8a8a8e; font-size:14px; padding:24px; }
.dcg-mic { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:54px; border:0; border-radius:16px; padding:15px 16px; font-size:16px; font-weight:700;
  color:#fff; background:linear-gradient(180deg,#34c759,#28a745); cursor:pointer; margin-top:6px; box-shadow:0 6px 16px rgba(40,167,69,.28); transition:transform .1s; }
.dcg-mic:active { transform:scale(.98); }
.dcg-mic.rec { background:linear-gradient(180deg,#ff5b5b,#e03131); animation:dcgPulse 1s infinite; box-shadow:0 6px 16px rgba(224,49,49,.32); }
@keyframes dcgPulse { 0%,100%{opacity:1} 50%{opacity:.78} }
.dcg-row { display:flex; gap:10px; margin-top:6px; align-items:stretch; }
.dcg-row .dcg-mic { flex:1; margin-top:0; }
.dcg-hint { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:54px; border:1.5px solid #ffd29a; background:#fff8ee; color:#c47a1a; font-weight:700; border-radius:16px; padding:14px 18px; font-size:15px; cursor:pointer; white-space:nowrap; }
.dcg-ico { flex:none; vertical-align:-3px; }
.dcg-recdot { width:11px; height:11px; border-radius:50%; background:#fff; display:inline-block; animation:dcgPulse .9s infinite; }
.dcg-fb { margin-top:14px; min-height:8px; }
.dcg-fb-ok { color:#1f9d4d; font-weight:700; font-size:15px; }
.dcg-fb-no { color:#c2683a; font-size:14px; line-height:1.55; background:#fff6f0; border-radius:12px; padding:10px 14px; }
.dcg-pass { background:linear-gradient(180deg,#eafff1,#ddfbe8); border:1px solid #b7ecc6; border-radius:16px; padding:18px; }
.dcg-pass-ico { color:#15803d; display:inline-flex; vertical-align:-5px; margin-right:5px; }
.dcg-pass strong { font-size:16px; color:#15803d; }
.dcg-stars { color:#f2b736; display:inline-flex; align-items:center; gap:1px; vertical-align:-3px; }
.dcg-vol-name .dcg-ico, .dcg-speed-round .dcg-ico, .dcg-fb-ok .dcg-ico { vertical-align:-3px; }
.dcg-pass-sub { font-size:13px; color:#2f8a4d; margin-top:5px; }
.dcg-pass-hint { font-size:12.5px; color:#5a8c6a; margin-top:6px; }
.dcg-scoring { color:#6e6e73; font-size:14px; padding:10px; }
/* 影子跟读 起读提示 */
.dcg-shadow-cue { font-size:15px; font-weight:700; color:#6e6e73; margin-bottom:8px; transition:color .15s; }
.dcg-shadow-cue.hot { color:#28a745; font-size:18px; animation:dcgPulse .5s infinite; }
/* 一口气:练习阶段 + 挑战阶段 */
.dcg-practice { margin:8px 0 16px; }
.dcg-practice-t { font-size:34px; font-weight:800; color:#34c759; font-variant-numeric:tabular-nums; }
.dcg-practice-tip { font-size:13px; color:#6e6e73; margin-top:6px; line-height:1.5; }
.dcg-breath-big { font-size:30px; font-weight:800; color:#1d1d1f; margin:10px 0; }
/* 跟读K歌:音准打分 */
.dcg-line-sm { font-size:17px; line-height:1.45; margin:4px 0 12px; }
/* ── Boss 战 ── */
.dcg-boss-stage { position:relative; width:100%; height:212px; border-radius:18px; overflow:hidden; box-shadow:0 8px 22px rgba(6,23,26,.3); margin:2px 0 14px; }
.dcg-boss-stage canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.dcg-boss-hpwrap { position:absolute; top:9px; left:11px; right:11px; z-index:2; display:flex; align-items:center; gap:8px; }
.dcg-boss-hplab { font-size:11px; font-weight:800; color:#ffaec6; display:inline-flex; align-items:center; gap:4px; letter-spacing:.5px; }
.dcg-boss-hplab .dcg-ico { color:#ff7aa6; }
.dcg-boss-hp { flex:1; height:9px; background:rgba(0,0,0,.42); border-radius:6px; overflow:hidden; border:1px solid rgba(255,255,255,.18); }
.dcg-boss-hp i { display:block; height:100%; width:100%; background:linear-gradient(90deg,#ff5b5b,#ffae3d); border-radius:6px; transition:width .1s linear; }
.dcg-pad { position:absolute; right:11px; bottom:11px; z-index:2; display:flex; flex-direction:column; gap:9px; }
.dcg-padb { width:48px; height:42px; border-radius:13px; border:0; background:rgba(255,255,255,.16); color:#fff; display:grid; place-items:center; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); cursor:pointer; transition:transform .08s,background .1s; }
.dcg-padb.on { background:rgba(70,216,134,.62); transform:scale(.92); }
/* ── 变声复述 ── */
.dcg-voice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:8px 0 12px; }
.dcg-voice-chip { position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 6px; border:1.5px solid #e4e9f0; border-radius:15px; background:#fff; font-size:12px; font-weight:600; color:#444; cursor:pointer; transition:all .12s; }
.dcg-voice-chip .dcg-ico { width:24px; height:24px; color:#5a6470; }
.dcg-voice-chip.on { border-color:var(--brand,#0f9d6b); background:rgba(15,157,107,.06); color:#0f9d6b; }
.dcg-voice-chip.on .dcg-ico { color:#0f9d6b; }
.dcg-voice-chip.done { border-color:#ffd34d; background:#fffbf0; }
.dcg-voice-sc { position:absolute; top:-8px; right:-8px; min-width:23px; height:23px; line-height:23px; border-radius:12px; background:#ffd34d; color:#7a5200; font-size:12px; font-weight:800; box-shadow:0 2px 6px rgba(0,0,0,.16); padding:0 4px; }
.dcg-voice-tip { font-size:13px; color:#6e6e73; margin:0 0 14px; display:flex; align-items:center; justify-content:center; gap:6px; }
.dcg-ghost2 { background:#eef1f4 !important; color:#1d6b4a !important; box-shadow:none !important; }
.dcg-voice-result { display:flex; align-items:center; gap:14px; justify-content:center; padding:8px 0; }
.dcg-voice-ring { --p:0; width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--brand,#0f9d6b) calc(var(--p)*1%), #eceff3 0); flex:0 0 auto; }
.dcg-voice-ring span { width:50px; height:50px; border-radius:50%; background:#fff; display:grid; place-items:center; font-size:19px; font-weight:800; color:#0f9d6b; }
.dcg-voice-rtxt { text-align:left; }
.dcg-voice-note { font-size:12.5px; color:#6e6e73; margin-top:3px; }
.dcg-ks-intro { font-size:14px; line-height:1.7; color:#444; background:#f6f8fb; border-radius:14px; padding:14px 16px; margin:6px 0 16px; }
.dcg-ks-intro b { color:#2a7d12; }
.dcg-ks-totalchip { display:inline-block; background:rgba(255,213,74,.16); color:#b8860b; font-size:13px; font-weight:700; border-radius:999px; padding:7px 16px; margin:0 0 14px; }
.dcg-ks-totalchip b { font-size:16px; color:#c47a1a; }
/* 左右全屏:抵消 .dc-container 的 20px 横向 padding,胶囊面板贴边显示 */
.dcg-ks { background:linear-gradient(160deg,#103a33 0%,#0b2733 100%); border-radius:0; padding:14px 10px 12px; margin:6px -20px 14px; box-shadow:0 10px 30px rgba(11,39,51,.28); }
.dcg-ks-top { display:flex; justify-content:space-between; align-items:center; padding:0 6px; }
.dcg-ks-rep { color:rgba(255,255,255,.82); font-size:13px; font-weight:600; background:rgba(255,255,255,.1); border-radius:999px; padding:4px 12px; }
.dcg-ks-total { display:inline-flex; align-items:center; gap:4px; color:#ffd54a; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
.dcg-ks-scorebig { text-align:center; color:#fff; font-size:54px; font-weight:900; line-height:1; letter-spacing:-1px; font-variant-numeric:tabular-nums; margin:2px 0 2px; text-shadow:0 2px 18px rgba(52,199,89,.55); }
.dcg-ks-stage { position:relative; }
.dcg-ks-canvas { width:100%; height:196px; display:block; }
.dcg-ks-flash { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; font-weight:900; font-style:italic; font-size:46px; letter-spacing:1px; color:#fff; opacity:0; text-shadow:0 3px 18px rgba(0,0,0,.4); }
.dcg-ks-flash.on { animation:dcgFlash .9s ease-out; }
@keyframes dcgFlash { 0%{opacity:0;transform:scale(.55)} 22%{opacity:1;transform:scale(1.12)} 60%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1)} }
.dcg-ks-cue { text-align:center; color:#fff; font-size:17px; font-weight:800; margin-top:4px; min-height:24px; opacity:.95; display:flex; align-items:center; justify-content:center; gap:6px; }
.dcg-ks-cue.hot { color:#3ddc84; font-size:22px; animation:dcgPulse .5s infinite; }
.dcg-ks-end { display:flex; margin:0 auto; min-height:0; padding:9px 18px; }
.dcg-ks-scoreline { font-size:14px; color:#444; margin:8px 0 2px; }
.dcg-ks-scoreline b { color:#0f766e; font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; }
.dc-rd-theme-dark .dcg-ks-scoreline { color:#cfd4dd; } .dc-rd-theme-dark .dcg-ks-scoreline b { color:#5fd0a8; }
/* 五维雷达评分 */
.dcg-radar-wrap { text-align:center; position:relative; padding-top:4px; }
.dcg-radar-grade { font-size:60px; font-weight:900; line-height:1; letter-spacing:-2px; margin:4px 0; }
.dcg-grade-SSS,.dcg-grade-SS { color:#ff3b6b; text-shadow:0 2px 12px rgba(255,59,107,.4); }
.dcg-grade-S { color:#ff9500; } .dcg-grade-A { color:#34c759; } .dcg-grade-B { color:#0a84ff; } .dcg-grade-C { color:#8a8a8e; }
.dcg-radar-overall { font-size:30px; font-weight:800; color:#1d1d1f; }
.dcg-radar-overall span { font-size:13px; color:#8a8a8e; font-weight:500; margin-left:4px; }
.dcg-radar-svg { width:280px; max-width:100%; height:auto; margin:2px auto; display:block; }
.dcg-radar-web { fill:rgba(120,130,150,.05); stroke:rgba(120,130,150,.28); stroke-width:1; }
.dcg-radar-poly { fill:rgba(52,199,89,.28); stroke:#34c759; stroke-width:2; }
.dcg-radar-lbl { font-size:12px; fill:#444; font-weight:600; }
.dcg-radar-sub { font-size:13px; color:#6e6e73; margin:6px 0 14px; }
.dc-rd-theme-dark .dcg-ks-intro { background:#262a33; color:#cfd4dd; }
.dc-rd-theme-dark .dcg-radar-overall { color:#f0f0f2; } .dc-rd-theme-dark .dcg-radar-lbl { fill:#cfd4dd; }
.dcg-dots { display:flex; gap:6px; justify-content:center; margin-top:10px; }
.dcg-dots i { width:8px; height:8px; border-radius:50%; background:#d8dde4; }
.dcg-dots i.on { background:#34c759; }
.dcg-stage-dots, .dcg-ini-meta, .dcg-speed-goal { font-size:13px; color:#8a8a8e; margin:8px 0 14px; }
.dcg-glow { animation:dcgGlow 1.1s ease-in-out infinite; }
@keyframes dcgGlow { 0%,100%{box-shadow:0 0 0 0 rgba(52,199,89,.5)} 50%{box-shadow:0 0 0 8px rgba(52,199,89,0)} }
/* 音量靶心 */
.dcg-vol { display:flex; gap:18px; align-items:stretch; justify-content:center; margin:10px 0 16px; }
.dcg-vol-bar { position:relative; width:54px; height:180px; background:#f0f2f5; border-radius:14px; overflow:hidden; }
.dcg-vol-zone { position:absolute; left:0; right:0; background:rgba(52,199,89,.18); border-top:2px dashed #34c759; border-bottom:2px dashed #34c759; }
.dcg-vol-fill { position:absolute; left:0; right:0; bottom:0; height:0; background:#2bb673; transition:height .05s linear; }
.dcg-vol-needle { position:absolute; left:-3px; right:-3px; height:3px; bottom:0; background:#1d1d1f; }
.dcg-vol-side { display:flex; flex-direction:column; justify-content:center; text-align:left; min-width:120px; }
.dcg-vol-round { font-size:12px; color:#8a8a8e; }
.dcg-vol-name { font-size:20px; font-weight:800; color:#1d1d1f; margin:2px 0; }
.dcg-vol-tip { font-size:13px; color:#6e6e73; }
/* 语速 / 一口气 */
.dcg-speed { margin:6px 0 14px; }
.dcg-speed-round { font-size:15px; font-weight:700; color:#1d1d1f; }
/* Sound-change reminder shown in the 语速挑战 drill (apply linking/plosion). */
.dcg-rules-tip { font-size:13px; line-height:1.55; color:#4b5c41; background:rgba(51,163,21,.07); border-radius:12px; padding:9px 13px; margin:0 0 14px; }
.dcg-rules-tip b { color:#33a315; font-weight:700; }
.dcg-timer { font-size:46px; font-weight:800; color:#34c759; font-variant-numeric:tabular-nums; line-height:1.1; margin:4px 0; }
.dcg-breath { margin:14px 0; }
.dcg-lung { height:26px; background:#eef1f4; border-radius:999px; overflow:hidden; }
.dcg-lung-fill { width:100%; height:100%; background:#2bb673; transition:width .06s linear; }
.dcg-breath-tip { font-size:13px; color:#6e6e73; margin-top:10px; line-height:1.5; }
/* 影子跟读 */
.dcg-shadow { margin:8px 0 14px; }
.dcg-canvas { width:100%; height:120px; background:#f7f9fb; border-radius:14px; }
.dcg-shadow-meta { font-size:13px; color:#6e6e73; margin-top:8px; font-weight:600; }
/* 逐词消失 / 首字母 */
.dcg-vanish-line { font-size:22px; line-height:1.7; font-weight:600; color:#1d1d1f; margin:8px 0; }
.dcg-blank { color:#c9ccd1; letter-spacing:1px; }
.dcg-initials { font-size:24px; letter-spacing:2px; font-weight:700; color:#1d1d1f; margin:8px 0; font-family:"VP Oswald",ui-monospace,monospace; }
.dcg-ini-w { margin:0 4px; }
/* 暗色适配 */
.dc-rd-theme-dark .dcg-line, .dc-rd-theme-dark .dcg-vanish-line, .dc-rd-theme-dark .dcg-initials { color:#f0f0f2; }

.dc-immersive .dc-instruction { font-size: 15px; line-height: 1.6; color: #6e6e73; margin: 0 0 18px; }
.dc-immersive .dc-instruction strong { color: #1d1d1f; font-weight: 600; }
.dc-immersive .dc-stage-text { font-size: 17px; line-height: 1.65; color: #1d1d1f; }
.dc-immersive .dc-stage-text-zh { font-size: 14px; color: #8a8a8e; }
.dc-immersive .dc-drill-card { background: linear-gradient(180deg, #fafafa, #f5f5f7); border: .5px solid rgba(0,0,0,.05);
  border-radius: 20px; padding: 22px 20px; margin: 0 0 18px; text-align: center; }
.dc-immersive .dc-drill-card .btn-ghost, .dc-immersive .dc-intensive .btn-ghost {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 16px; background: #fff; border: .5px solid rgba(0,0,0,.08);
  color: #33a315; border-radius: 999px; padding: 9px 18px; font-size: 14px; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.05); cursor: pointer; }
.dc-immersive .dc-line-en-big { background: transparent; padding: 0; border: 0; box-shadow: none;
  font-size: clamp(22px, 5.4vw, 28px); font-weight: 700; letter-spacing: -.02em; line-height: 1.34; color: #1d1d1f; margin: 0; text-align: center; }
.dc-immersive .dc-stress-hl { color: #e2553e; font-weight: 800; }
.dc-immersive .dc-callee { display: block; text-align: center; font-size: 14px; color: #6e6e73; border: 0; box-shadow: none; background: none; padding: 0; }
.dc-immersive .dc-callee > strong { color: #1d1d1f; }
/* Unified record icon = a clean circular hand-drawn-mic button, no text label. */
.dc-immersive .dc-mic-btn { margin: 16px auto 0; border: 0; cursor: pointer; color: #fff;
  width: 66px; height: 66px; padding: 0; border-radius: 50%; background: linear-gradient(180deg, #4be619, #33a315);
  box-shadow: 0 6px 18px rgba(51, 163, 21, .32), inset 0 1px 0 rgba(255,255,255,.2); transition: transform .12s; }
.dc-immersive .dc-mic-btn:active { transform: scale(.94); }
.dc-immersive .dc-mic-result { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.dc-immersive .dc-az-score { background: rgba(51, 163, 21, .07); border: 0; border-left: 0; border-radius: 14px; padding: 12px 16px; font-size: 14px; color: #3a4856; text-align: center; }
.dc-immersive .dc-az-score strong { color: #33a315; font-size: 16px; }
.dc-immersive .dc-az-score.pass strong { color: #0f9d5b; }
.dc-immersive .dc-az-score.fail strong { color: #e08a3c; }
.dc-immersive .dc-az-err { background: rgba(224,90,60,.08); color: #c0492f; border: 0; border-radius: 14px; padding: 12px 16px; font-size: 13.5px; text-align: center; }
.dc-immersive .dc-mic-transcript { background: #f5f5f7; border: 0; border-left: 0; border-radius: 14px; padding: 12px 16px; font-size: 14px; color: #6e6e73; }
.dc-immersive .dc-mic-transcript em { color: #1d1d1f; font-style: normal; font-weight: 500; }
.dc-immersive .dc-teacher-bubble { margin: 18px 0 4px; }
.dc-immersive .dc-teacher-msg { align-items: flex-start; gap: 12px; padding: 16px 18px;
  background: linear-gradient(180deg, #f3faf0, #f9fbf7); border: .5px solid rgba(51, 163, 21, .12); border-radius: 20px; }
.dc-immersive .dc-teacher-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; box-shadow: 0 2px 8px rgba(51, 163, 21, .14); font-size: 22px; flex-shrink: 0; }
.dc-immersive .dc-teacher-msg p { font-size: 15px; line-height: 1.6; color: #4b5c41; margin: 0; }
.dc-immersive .dc-teacher-feedback { font-size: 15px; line-height: 1.6; color: #4b5c41; }
.dc-immersive .dc-warmup-q { background: rgba(51, 163, 21, .05); border-radius: 14px; padding: 14px 16px; }
.dc-immersive .dc-q-en { color: #1d1d1f; font-weight: 600; }
.dc-immersive .dc-q-zh { color: #8a8a8e; }
.dc-immersive .dc-word-chip { background: rgba(51, 163, 21, .08); border: 0; color: #33a315; border-radius: 999px; padding: 7px 14px; font-weight: 600; }
.dc-immersive .dc-word-chip:hover { background: rgba(51, 163, 21, .14); }
.dc-immersive .dc-pron-tip { background: rgba(51, 163, 21, .06); border-left: 0; border-radius: 12px; color: #3a4856; padding: 12px 14px; }
.dc-immersive .dc-mini-review { background: rgba(51, 163, 21, .06); border-left: 0; border-radius: 12px; color: #4b5c41; }
.dc-immersive .dc-pk-banner { background: linear-gradient(180deg, #f3faf0, #fff); border: .5px solid rgba(51, 163, 21, .16); border-radius: 14px; color: #33a315; }
.dc-immersive .dc-pk-best { background: rgba(51, 163, 21, .06); color: #33a315; border-radius: 10px; }
.dc-immersive .dc-line.cur { background: rgba(51, 163, 21, .06); border: .5px solid rgba(51, 163, 21, .18); }
.dc-immersive .dc-line-speaker { color: #33a315; }
.dc-immersive .dc-rec-btn { border: .5px solid rgba(0,0,0,.1); border-radius: 999px; }
.dc-immersive .dc-rec-btn.primary { border-color: rgba(51, 163, 21, .4); color: #33a315; background: rgba(51, 163, 21, .06); }
/* margin-top:auto pushes the rail + progress-text + 上一步/下一步 controls to the
   very bottom of the 100dvh flex column (the stage above absorbs the slack). The
   earlier .dc-immersive .dc-progress-rail{margin-top:auto} was being clobbered by
   this later block's margin shorthand — keep the auto here so it actually pins. */
.dc-immersive .dc-progress-rail { height: 5px; background: rgba(0,0,0,.06); margin: auto 0 10px; }
.dc-immersive .dc-progress-fill { background: linear-gradient(90deg, #4be619, #33a315); }
.dc-immersive .dc-progress-text { font-size: 12.5px; color: #8a8a8e; }
.dc-immersive .dc-progress-text strong { color: #1d1d1f; }
/* 2-equal-column grid → 上一步/下一步 are ALWAYS the same width, even though the
   primary button has more side-padding (a flexbox flex:1 left them 12px apart
   because content-box adds padding on top of the equal basis). */
.dc-immersive .dc-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.dc-immersive .dc-controls > button { box-sizing: border-box; width: 100%; text-align: center; }
.dc-immersive .dc-controls .btn-ghost { background: rgba(0,0,0,.05); border: 0; color: #1d1d1f; border-radius: 999px; padding: 14px 22px; font-size: 15px; font-weight: 600; cursor: pointer; }
.dc-immersive .dc-controls .btn-ghost:disabled { opacity: .4; }
.dc-immersive .dc-controls .btn-primary { background: linear-gradient(180deg, #4be619, #33a315); border: 0; color: #fff; border-radius: 999px; padding: 14px 28px; font-size: 15px; font-weight: 600; box-shadow: 0 6px 18px rgba(51, 163, 21, .3); cursor: pointer; }
.dc-immersive .dc-controls .btn-primary:active { transform: scale(.98); }

/* ── 对话课：手绘录音按钮 + 录音波浪动效 + 译按钮 + 思考倒计时（2026-06-19）── */
.dc-immersive .dc-mic-btn { display: flex; align-items: center; justify-content: center; min-width: 0; }
.dc-immersive .dc-mic-btn .dc-hand-mic { width: 30px; height: 30px; }
.dc-immersive .dc-mic-btn .dc-rec-wave { height: 26px; }
.dc-immersive .dc-mic-btn .dc-mic-label { font-size: 16px; font-weight: 600; }
.dc-immersive .dc-mic-btn.recording { background: linear-gradient(180deg, #ff7a66, #e2553e);
  box-shadow: 0 6px 18px rgba(226,85,62,.34), inset 0 1px 0 rgba(255,255,255,.2); animation: dcRecPulse 1.6s ease-in-out infinite; }
@keyframes dcRecPulse { 0%,100% { box-shadow: 0 6px 18px rgba(226,85,62,.34); } 50% { box-shadow: 0 8px 28px rgba(226,85,62,.6); } }
.dc-immersive .dc-rec-wave { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.dc-immersive .dc-rec-wave i { width: 3px; height: 8px; background: rgba(255,255,255,.95); border-radius: 2px; animation: dcWave .9s ease-in-out infinite; }
.dc-immersive .dc-rec-wave i:nth-child(1){animation-delay:0s}
.dc-immersive .dc-rec-wave i:nth-child(2){animation-delay:.08s}
.dc-immersive .dc-rec-wave i:nth-child(3){animation-delay:.16s}
.dc-immersive .dc-rec-wave i:nth-child(4){animation-delay:.24s}
.dc-immersive .dc-rec-wave i:nth-child(5){animation-delay:.16s}
.dc-immersive .dc-rec-wave i:nth-child(6){animation-delay:.08s}
.dc-immersive .dc-rec-wave i:nth-child(7){animation-delay:0s}
@keyframes dcWave { 0%,100% { height: 7px; } 50% { height: 21px; } }
/* 译按钮 + 引入中文默认隐藏 */
.dc-immersive .dc-intro-text { position: relative; }
.dc-immersive .dc-zh-toggle { position: absolute; top: -2px; right: 0; width: 30px; height: 30px; border-radius: 50%;
  border: .5px solid rgba(51, 163, 21, .3); background: rgba(51, 163, 21, .06); color: #33a315; font-size: 13px; font-weight: 700; cursor: pointer; line-height: 1; z-index: 2; }
.dc-immersive .dc-zh-toggle.on { background: #33a315; color: #fff; border-color: #33a315; }
.dc-immersive .dc-intro-text .dc-stage-text { padding-right: 40px; }
.dc-immersive .dc-stage-text-zh[hidden] { display: none; }
.dc-immersive .dc-stage-text-zh { margin-top: 8px; }
/* 思考倒计时圆环 */
.dc-immersive .dc-think { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 6px 0; }
.dc-immersive .dc-think-ring { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#33a315 calc(var(--p,0)*1%), rgba(51, 163, 21, .12) 0); position: relative; transition: background .4s linear; }
.dc-immersive .dc-think-ring::before { content: ""; position: absolute; inset: 5px; background: #fff; border-radius: 50%; }
.dc-immersive .dc-think-ring span { position: relative; font-size: 23px; font-weight: 800; color: #33a315; }
.dc-immersive .dc-think-tip { font-size: 13.5px; color: #6e6e73; margin: 0; text-align: center; }

/* ── 听说课程 列表页 Apple 级精修（2026-06-19）── */
/* 顶栏：1 个返回(左) + 标题(中) + 主页「切换教材」(右) */
.vy-topbar { display: flex; align-items: center; gap: 12px; padding: 8px 2px 18px; }
.vy-back { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: .5px solid rgba(0,0,0,.08);
  background: #fff; color: #1d1d1f; display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: background .15s; }
.vy-back:hover { background: #f2f3f5; }
.vy-topbar-title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: #33a315; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.vy-switch { flex: 0 0 auto; border: 0; background: rgba(51, 163, 21, .08); color: #33a315; font-size: 13px; font-weight: 600; padding: 9px 15px; border-radius: 999px; cursor: pointer; }
.vy-switch:hover { background: rgba(51, 163, 21, .14); }
.vy-topbar-pad { flex: 0 0 40px; }
/* 模块图标：手绘线性，装进柔色圆 */
.vy-mod-svg { width: 24px; height: 24px; color: #33a315; }
.vy-mod-card-icon { font-size: 24px; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(51, 163, 21, .08); }
.vy-mod-card { grid-template-columns: 28px 46px 1fr; gap: 14px; padding: 18px 20px; border: .5px solid rgba(0,0,0,.06);
  border-radius: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 10px 26px rgba(20,30,40,.05); transition: transform .15s, box-shadow .2s, border-color .2s; }
.vy-mod-card:hover { transform: translateY(-2px); border-color: rgba(51, 163, 21, .25); box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 16px 34px rgba(51, 163, 21, .1); }
.vy-mod-card.done { background: rgba(51, 163, 21, .04); border-color: rgba(51, 163, 21, .3); }
.vy-mod-card-num { font-family: Georgia, serif; font-size: 17px; font-weight: 800; color: #cbd0d4; }
.vy-mod-card-body h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; color: #1d1d1f; }
.vy-mod-card-body p { font-size: 13px; color: #8a8a8e; }
.vy-mod-card-cta { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; color: #33a315; }
.vy-mod-card.done .vy-mod-card-cta { color: #0f9d5b; }
/* 单元 banner 柔化 */
.vy-unit-banner { border-radius: 22px; }
/* 对话列表标题 + 卡片 */
.vy-section-title-icon { display: inline-flex; align-items: center; gap: 10px; color: #1d1d1f; }
.vy-section-title-icon .vy-mod-svg { width: 26px; height: 26px; }
.vy-dlg-card { border-radius: 22px; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 12px 30px rgba(53, 102, 22, .06); }
.vy-dlg-cta svg { display: block; }

/* ============================================================================
   听说教材首页 · 书卡重构 (2026-06-19)
   左列：封面 + 「进入这本」按钮（按钮移到封面下方）
   右列：只显示五维教学目标（发音 / 听力 / 表达 / 词汇 / 话题），逐级递进
   —— 不再显示书名 / 副标题 / 简介 / 单元统计。覆盖所有旧断点。
   ============================================================================ */
/* 去掉四周边框/阴影/圆角，课程之间用一条分割线 */
.vy-library { gap: 0 !important; }
.vy-library .vy-book-card {
  grid-template-columns: 140px minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: stretch !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 20px 4px !important;
}
.vy-library .vy-book-card:last-child { border-bottom: none !important; }
.vy-library .vy-book-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  border-bottom-color: var(--line) !important;
}
.vy-book-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  align-self: start;
}
/* 封面强制收进左列宽度（高优先级，压过旧断点里 width:124px/96px 的 !important） */
.vy-shell .vy-library .vy-book-card .vy-book-left .vy-typo-cover,
.vy-shell .vy-library .vy-book-card .vy-book-left .vy-image-cover {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 3 / 4 !important;
}
.vy-shell .vy-library .vy-book-card .vy-book-left .vy-cover {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.vy-library .vy-book-card .vy-book-left .vy-enter {
  width: 100% !important;
  align-self: stretch !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap !important;
  border-radius: 999px;
  height: 40px !important;
  padding: 0 8px !important;
  font-size: 14px !important;
}
.vy-cert-link {
  display: block;
  text-align: center;
  font-size: 12px;
  color: var(--brand);
  text-decoration: underline;
  cursor: pointer;
}
/* 右列：仅五维目标，垂直居中对齐封面 */
.vy-book-card .vy-book-info {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 0 !important;
  min-width: 0;
  padding: 2px 2px 2px 0 !important;
}
.vy-library .vy-book-card .vy-book-info .vy-goals-5 {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 11px !important;
  margin: 0 !important;
  width: 100%;
}
.vy-library .vy-book-card .vy-book-info .vy-goals-5 li {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.vy-goals-5 .vy-goal-icon { font-size: 14px; line-height: 1.5; }
.vy-goals-5 .vy-goal-label {
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brand);
  background: rgba(20, 122, 77, 0.09);
  border-radius: 5px;
  padding: 2px 0 !important;
  text-align: center;
  width: 100%;
  height: fit-content;
  margin-top: 1px;
}
.vy-goals-5 .vy-goal-text { color: var(--ink); }

@media (max-width: 1024px) {
  .vy-library .vy-book-card {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 18px !important;
    padding: 16px 6px !important;
    align-items: stretch !important;
  }
  /* 让旧的 vy-goals 隐藏规则失效：本卡片用的是 .vy-goals-5，强制显示 */
  .vy-library .vy-book-card .vy-book-info .vy-goals-5 { display: flex !important; gap: 10px !important; }
  .vy-library .vy-book-card .vy-book-info .vy-goals-5 li {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 9px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
  .vy-goals-5 .vy-goal-label { font-size: 10px !important; }
  .vy-library .vy-book-card .vy-book-left .vy-enter { height: 38px !important; font-size: 13px !important; }
}
@media (max-width: 480px) {
  .vy-library .vy-book-card {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 16px !important;
    padding: 16px 4px !important;
  }
  .vy-library .vy-book-card .vy-book-info .vy-goals-5 li {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    font-size: 11.5px !important;
  }
  .vy-library .vy-book-card .vy-book-left .vy-enter { height: 36px !important; font-size: 12.5px !important; }
}

/* ===== 学习数据 · 开口打卡日历（周/月/年，果绿主题） ===== */
.sp-cal-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 14px 14px 16px; margin: 0 0 16px; box-shadow: 0 8px 24px rgba(40,80,20,.05); }
.sp-cal-tabs { display: flex; gap: 6px; background: color-mix(in srgb, var(--brand) 8%, #f4f6f4); border-radius: 12px; padding: 4px; margin-bottom: 14px; }
.sp-cal-tabs button { flex: 1; border: none; background: transparent; border-radius: 9px; padding: 8px 0; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; transition: all .15s; }
.sp-cal-tabs button.on { background: var(--brand); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 30%, transparent); }
.sp-cal-hero { display: flex; align-items: flex-end; justify-content: space-between; padding: 4px 6px 14px; }
.sp-hero-main b { font-size: 52px; font-weight: 800; color: var(--brand); line-height: 1; }
.sp-hero-main span, .sp-hero-side span { display: block; font-size: 12px; color: var(--muted); margin-top: 5px; }
.sp-hero-side { text-align: right; }
.sp-hero-side b { font-size: 30px; font-weight: 800; color: var(--brand-ink); line-height: 1; }
/* 周视图 */
.sp-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.sp-day { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; border-radius: 12px; background: #f6f8f5; }
.sp-day .sp-dow { font-size: 12px; color: var(--muted); }
.sp-day .sp-dnum { font-size: 17px; font-weight: 800; color: #c2cabc; min-height: 20px; }
.sp-day.on { background: color-mix(in srgb, var(--brand) 12%, #fff); }
.sp-day.on .sp-dnum { color: var(--brand); }
.sp-day.today { box-shadow: inset 0 0 0 2px var(--brand); }
/* 月视图 */
.sp-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; }
.sp-cal-week span { text-align: center; font-size: 12px; color: var(--muted); }
.sp-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sp-cell { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #6b7568; border-radius: 11px; }
.sp-cell.empty { background: transparent; }
.sp-cell.on { background: color-mix(in srgb, var(--brand) 14%, #fff); color: var(--brand-ink); font-weight: 700; }
.sp-cell.on i { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 9px; font-weight: 800; color: var(--brand); }
.sp-cell.today { box-shadow: inset 0 0 0 2px var(--brand); }
/* 年视图 */
.sp-year { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; height: 120px; }
.sp-bar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.sp-bar-wrap { width: 70%; flex: 1; display: flex; align-items: flex-end; }
.sp-bar { width: 100%; min-height: 3px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 60%, #fff)); }
.sp-bar-col span { font-size: 10px; color: var(--muted); }
/* 日历下方数据格 */
.sp-cal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.sp-tile { background: #f6f8f5; border-radius: 12px; padding: 10px 8px; text-align: center; }
.sp-tile-l { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.sp-tile-l svg { color: var(--brand); vertical-align: -2px; margin-right: 1px; }
.sp-tile-v { font-size: 16px; font-weight: 800; color: var(--brand-ink); }

/* ===== 个人主页 · 笔记（想法/下划线）+ 动态（学习圈） ===== */
.pp-notes2 { display: flex; flex-direction: column; gap: 10px; }
.pp-note2 { background: #f7f9f5; border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; position: relative; }
.pp-note2-from { display: inline-block; font-size: 10.5px; font-weight: 800; color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, #fff); border-radius: 5px; padding: 2px 7px; margin-bottom: 6px; }
.pp-note2-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.pp-note2-idea { margin: 7px 0 0; font-size: 13.5px; line-height: 1.5; color: #5a8a3a; background: color-mix(in srgb, var(--brand) 7%, #fff); border-radius: 9px; padding: 7px 10px; }
.pp-feed-meta { display: flex; gap: 10px; margin-top: 7px; }
.pp-feed-topic { font-size: 12px; color: var(--brand); font-weight: 700; }
.pp-feed-like { font-size: 12px; color: #e2553e; }

/* ===== 听书·解读文稿 长按工具栏（复制/下划线/翻译） ===== */
#podcast-hl-popup.podcast-hl-popup { z-index: 10400; max-width: 300px; }
.pc-hl-bar { display: inline-flex; gap: 2px; background: #2b2f36; border-radius: 14px; padding: 5px; box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.pc-hl-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; border: none; background: transparent; color: #fff; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.pc-hl-btn b { font-size: 16px; font-weight: 700; line-height: 1; }
.pc-hl-btn:active { background: rgba(255,255,255,.14); }
.pc-hl-trans { margin-top: 6px; background: #fff; border-radius: 12px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2); max-width: 300px; }
.pc-hl-zh { margin: 0; font-size: 14px; line-height: 1.55; color: #1f2a22; }
.pc-hl-loading { font-size: 13px; color: #8a9099; }

/* ============================================================================
   测评中心 (assessment.js) + 我的页两个测评入口 + 听说课程顶栏精简 (2026-06-20)
   ========================================================================== */
.vy-lib-toppad { height: 14px; }
.me3-profile-top { margin-top: 12px; }

/* 我的页：词汇量测评 / 听说测评 两入口(学习总时长卡下方) */
.me3-assess-duo { display: flex; gap: 12px; margin: 0 0 14px; }
.me3-assess-card { flex: 1; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 13px 13px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; text-align: left; transition: transform .1s, box-shadow .15s; }
.me3-assess-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.me3-assess-card:active { transform: scale(.98); }
.me3-assess-card.vocab { background: linear-gradient(135deg, #eafaf0, #f4fbf6); border-color: #cdedd8; }
.me3-assess-card.listen { background: linear-gradient(135deg, #eef3fe, #f5f8ff); border-color: #d4e0fb; }
.me3-assess-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #fff; }
.me3-assess-card.vocab .me3-assess-ic { color: #16a34a; }
.me3-assess-card.listen .me3-assess-ic { color: #2f6df0; }
.me3-assess-tt { font-size: 15px; font-weight: 800; color: var(--ink); }
.me3-assess-sub { font-size: 11.5px; color: var(--muted); }

/* 测评页 */
.as-shell { min-height: 100%; background: linear-gradient(180deg, #fff 0%, #f6f8fb 100%); display: flex; flex-direction: column; }
.as-ic { display: inline-block; width: 1em; height: 1em; vertical-align: -.14em; }
.as-top { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 3; padding: calc(12px + env(safe-area-inset-top,0px)) 14px 11px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.as-top-title { flex: 1; text-align: center; font-size: 16px; font-weight: 800; color: var(--ink); }
.as-back, .as-top-pad { width: 40px; height: 40px; flex: none; }
.as-back { display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.as-back .as-ic { width: 22px; height: 22px; }

/* intro */
.as-intro { padding: 22px 18px 30px; max-width: 460px; margin: 0 auto; width: 100%; box-sizing: border-box; text-align: center; }
.as-hero-ic { width: 72px; height: 72px; margin: 8px auto 14px; border-radius: 22px; display: grid; place-items: center; }
.as-hero-ic .as-ic { width: 38px; height: 38px; }
.as-hero-ic.v { background: linear-gradient(135deg, #16a34a, #36c46b); color: #fff; box-shadow: 0 14px 30px rgba(22,163,74,.32); }
.as-hero-ic.l { background: linear-gradient(135deg, #2f6df0, #5b8af5); color: #fff; box-shadow: 0 14px 30px rgba(47,109,240,.32); }
.as-intro h1 { font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 10px; }
.as-intro-sub { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin: 0 0 16px; }
.as-intro-sub b { color: var(--ink); }
.as-meta { display: flex; justify-content: center; gap: 18px; font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.as-meta span { display: inline-flex; align-items: center; gap: 5px; }
.as-start { width: 100%; padding: 15px; border: 0; border-radius: 999px; background: var(--brand, #16a34a); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 24px color-mix(in srgb, var(--brand, #16a34a) 32%, transparent); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.as-start:active { transform: scale(.99); }

/* progress */
.as-prog { display: flex; align-items: center; gap: 12px; padding: 16px 18px 6px; max-width: 460px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.as-prog-bar { flex: 1; height: 7px; border-radius: 999px; background: #e7ebf0; overflow: hidden; }
.as-prog-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #16a34a, #36c46b); transition: width .25s; }
.as-prog span { font-size: 12.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

/* question */
.as-q { padding: 14px 18px 30px; max-width: 460px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.as-q-kicker { font-size: 12.5px; font-weight: 700; color: var(--brand, #16a34a); margin: 8px 0 4px; }
.as-q-kicker2 { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.as-word { font-size: 30px; font-weight: 800; color: var(--ink); margin: 4px 0 22px; display: flex; align-items: center; gap: 12px; }
.as-q-text { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.5; margin: 16px 0 16px; }
.as-wplay { width: 36px; height: 36px; flex: none; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--brand, #16a34a); display: grid; place-items: center; cursor: pointer; }
.as-wplay .as-ic { width: 18px; height: 18px; }
.as-opts { display: flex; flex-direction: column; gap: 11px; }
.as-opt { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font-size: 15.5px; color: var(--ink); cursor: pointer; text-align: left; transition: border-color .12s, background .12s, transform .08s; }
.as-opt:active { transform: scale(.99); }
.as-opt:hover { border-color: var(--brand, #16a34a); }
.as-opt-k { flex: none; width: 26px; height: 26px; border-radius: 999px; background: #eef1f4; color: #6b7280; font-weight: 800; font-size: 13px; display: grid; place-items: center; }
/* per-question reveal (词汇量测评即时对错反馈) */
.as-opt.locked { pointer-events: none; }
.as-opt.correct { border-color: #16a34a; background: #ecfdf3; color: #15803d; }
.as-opt.correct .as-opt-k { background: #16a34a; color: #fff; }
.as-opt.wrong { border-color: #ef4444; background: #fef2f2; color: #b91c1c; }
.as-opt.wrong .as-opt-k { background: #ef4444; color: #fff; }
.as-skip { display: block; margin: 16px auto 0; padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: 13.5px; cursor: pointer; }
.as-listen-btn { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px; border-radius: 16px; border: 1.5px dashed #c8d4e8; background: #f3f7ff; color: #2f6df0; font-size: 16px; font-weight: 800; cursor: pointer; margin-bottom: 6px; }
.as-listen-btn .as-ic { width: 30px; height: 30px; }
.as-listen-hint { font-size: 12px; font-weight: 500; color: var(--muted); }
.as-speak-sentence { font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.5; margin: 6px 0 20px; display: flex; align-items: flex-start; gap: 10px; }
/* adaptive vocab: level tag + ipa */
.as-lvl-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--brand,#16a34a) 12%, #fff); color: var(--brand,#16a34a); font-size: 11px; font-weight: 700; vertical-align: middle; }
.as-part-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #eef2ff; color: #4f46e5; font-size: 11px; font-weight: 700; vertical-align: middle; }
.as-free-prompt { background: #f6f8fb; border: 1px solid #e6ebf2; border-radius: 14px; padding: 14px 16px; margin: 4px 0 14px; }
.as-free-prompt .as-free-en { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--ink,#15384f); }
.as-free-prompt .as-free-zh { margin: 8px 0 0; font-size: 13px; color: var(--muted,#6b7d8f); line-height: 1.5; }
.as-ipa { font-size: 14px; color: var(--muted); margin: -14px 0 20px; letter-spacing: .2px; }
/* cloze (听写填空) */
.as-blank { display: inline-block; min-width: 76px; border-bottom: 2px solid var(--brand,#16a34a); margin: 0 4px; vertical-align: bottom; }
.as-cloze { display: flex; gap: 10px; margin-top: 6px; }
.as-cloze-input { flex: 1; min-width: 0; padding: 13px 15px; border-radius: 13px; border: 1.5px solid var(--line); background: #fff; font-size: 16px; color: var(--ink); outline: none; }
.as-cloze-input:focus { border-color: var(--brand,#16a34a); }
.as-cloze-submit { flex: none; padding: 0 20px; border-radius: 13px; border: 0; background: var(--brand,#16a34a); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; }
.as-cloze-submit:active { transform: scale(.98); }
/* vocab result extra lines */
.as-vstat { font-size: 13.5px; font-weight: 700; color: var(--ink); margin: 2px 0 10px; }
.as-vnote { font-size: 11.5px; color: var(--muted); margin-top: 12px; }

/* speak recorder */
.as-rec-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 8px 0; }
.as-rec { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; width: 96px; height: 96px; border-radius: 50%; border: 0; background: var(--brand, #16a34a); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 12px 28px color-mix(in srgb, var(--brand,#16a34a) 36%, transparent); }
.as-rec .as-ic { width: 30px; height: 30px; }
.as-rec.recording { background: #ef4444; animation: asRecPulse 1.3s infinite; }
@keyframes asRecPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.5); } 70% { box-shadow: 0 0 0 16px rgba(239,68,68,0); } }
.as-rec-status { min-height: 20px; font-size: 13px; color: var(--muted); text-align: center; }
.as-rec-live { color: #ef4444; font-weight: 700; }
.as-rec-skip { color: var(--muted); }

/* result */
.as-result { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px 18px; margin: 0 0 18px; box-shadow: 0 8px 24px rgba(0,0,0,.05); text-align: center; }
.as-result.compact { padding: 16px; margin: 18px 0 8px; background: var(--panel-soft, #f4f6f8); box-shadow: none; }
.as-result-when { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.as-result-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; padding: 5px 12px; border-radius: 999px; margin-bottom: 10px; }
.as-result-badge .as-ic { width: 15px; height: 15px; }
.as-result-badge.v { background: rgba(22,163,74,.12); color: #16a34a; }
.as-result-badge.l { background: rgba(47,109,240,.12); color: #2f6df0; }
.as-bignum { font-size: 44px; font-weight: 800; color: var(--ink); line-height: 1.05; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.as-bignum span { font-size: 13px; font-weight: 600; color: var(--muted); }
.as-cefr { font-size: 14px; color: var(--muted); margin-top: 10px; }
.as-cefr b { color: var(--brand, #16a34a); font-size: 17px; }
.as-bands { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; text-align: left; }
.as-band { display: grid; grid-template-columns: 30px 1fr 42px; align-items: center; gap: 10px; font-size: 12.5px; }
.as-band-l { font-weight: 800; color: var(--muted); }
.as-band-bar { height: 7px; border-radius: 999px; background: #e7ebf0; overflow: hidden; }
.as-band-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #16a34a, #36c46b); }
.as-band b { text-align: right; font-weight: 800; color: var(--ink); }
.as-subscores { display: flex; gap: 10px; margin-top: 16px; }
.as-subscore { flex: 1; background: var(--panel-soft, #f4f6f8); border-radius: 14px; padding: 12px 8px; }
.as-subscore b { display: block; font-size: 19px; font-weight: 800; color: var(--ink); }
.as-subscore span { font-size: 11.5px; color: var(--muted); }