.at-page { max-width: 1180px; margin: 0 auto; }
.at-title-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; }
.at-page-title { margin:0 !important; }
.at-shell { border:1px solid #d7dce2; border-radius:16px; background:#fff; overflow:hidden; box-shadow:0 6px 22px rgba(0,0,0,.06); }
.at-toolbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:14px 18px; border-bottom:1px solid #e3e7eb; background:#f8f9fb; flex-wrap:wrap; }
.at-mode-buttons { display:flex; gap:.5rem; }
.at-toggles { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; font-size:.95rem; }
.at-toggles label { margin:0; cursor:pointer; white-space:nowrap; }
.at-toggles input { margin-right:.3rem; }
.at-main-grid { display:grid; grid-template-columns:260px minmax(0,1fr); min-height:670px; }
.at-nav-panel { border-right:1px solid #e3e7eb; background:#fafbfc; padding:14px; overflow:auto; max-height:760px; }
.at-nav-title { font-size:.78rem; font-weight:700; letter-spacing:.08em; color:#59636e; margin:2px 4px 10px; }
.at-nav-list { display:flex; flex-direction:column; gap:6px; }
.at-nav-item { width:100%; text-align:left; border:1px solid transparent; border-radius:9px; background:transparent; padding:8px 10px; cursor:pointer; line-height:1.25; color:#28323c; }
.at-nav-item:hover { background:#eef2f6; }
.at-nav-item.active { background:#e7f0ff; border-color:#9abcf1; font-weight:600; }
.at-nav-item .at-nav-small { display:block; font-size:.78rem; color:#6d7680; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.at-stage { display:flex; flex-direction:column; align-items:center; padding:22px 28px 26px; min-width:0; }
.at-image-wrap { width:min(100%,760px); height:330px; background:#f0f2f4; border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.at-image-wrap img { width:100%; height:100%; object-fit:contain; display:none; }
.at-image-empty { color:#8a939c; }
.at-step-label { min-height:25px; font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#69737d; margin-top:2px; }
.at-main-text { width:100%; min-height:88px; display:flex; justify-content:center; align-items:center; text-align:center; font-size:2.15rem; line-height:1.35; font-weight:600; padding:8px 8px 2px; word-break:break-word; }
.at-pinyin-slot { width:100%; min-height:42px; text-align:center; font-size:1.15rem; line-height:1.45; color:#4c5967; padding:3px 8px; }
.at-translation-slot { width:100%; min-height:50px; text-align:center; font-size:1.05rem; line-height:1.45; color:#59636e; padding:3px 8px 8px; }
.at-status { width:100%; min-height:42px; display:flex; align-items:center; justify-content:center; text-align:center; border-top:1px solid #eef0f2; margin-top:5px; padding-top:12px; color:#39434d; font-weight:500; }
.at-controls { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:18px; }
.at-ai-note { border-top:1px solid #e6e9ed; background:#fafbfc; color:#727b85; padding:8px 16px; font-size:.78rem; text-align:right; }
.at-hidden-text { visibility:hidden; }
.at-mobile-navbar { display:none; }
.at-nav-toggle { width:100%; border:0; background:#f8f9fb; padding:10px 14px; display:flex; align-items:center; gap:8px; color:#28323c; font-weight:600; }
.at-current-pos { margin-right:auto; font-weight:700; }
.at-nav-chevron { transition:transform .18s ease; }
.at-nav-toggle[aria-expanded="true"] .at-nav-chevron { transform:rotate(180deg); }
.at-image-wrap { cursor:default; }
.at-control-icon { display:inline-block; }
.at-control-text { margin-left:4px; }

@media (max-width: 800px) {
  .at-page { max-width:none; }
  .at-title-row { margin-bottom:.55rem; gap:.5rem; }
  .at-page-title { font-size:1.35rem !important; }

  .at-shell { border-radius:12px; overflow:visible; }
  .at-toolbar { padding:8px 10px; gap:7px; }
  .at-mode-buttons { width:100%; gap:6px; }
  .at-mode-buttons .btn { flex:1 1 0; padding:7px 8px; font-size:.9rem; }
  .at-toggles { width:100%; justify-content:center; gap:10px; font-size:.86rem; }
  .at-toggles input { margin-right:.18rem; }

  .at-mobile-navbar { display:block; border-bottom:1px solid #e3e7eb; }
  .at-nav-panel {
    display:none;
    border-right:0;
    border-bottom:1px solid #e3e7eb;
    max-height:min(42vh,330px);
    padding:8px;
    overscroll-behavior:contain;
  }
  .at-nav-panel.at-nav-open { display:block; }
  .at-nav-title { margin:2px 4px 7px; }
  .at-nav-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
  .at-nav-item { padding:7px 8px; font-size:.9rem; }
  .at-nav-item .at-nav-small { font-size:.72rem; }

  .at-main-grid { display:block; min-height:0; }
  .at-stage { padding:10px 9px calc(76px + env(safe-area-inset-bottom)); }

  .at-image-wrap {
    width:100%;
    height:min(28vh,195px);
    min-height:120px;
    margin-bottom:8px;
    border-radius:10px;
    cursor:zoom-in;
  }
  .at-image-wrap.at-image-zoomed {
    position:fixed;
    inset:8px;
    z-index:1060;
    width:auto;
    height:auto;
    max-height:none;
    margin:0;
    padding:8px;
    border-radius:12px;
    background:rgba(15,18,22,.96);
    cursor:zoom-out;
    box-shadow:0 12px 45px rgba(0,0,0,.35);
  }
  .at-image-wrap.at-image-zoomed img {
    width:100%;
    height:100%;
    object-fit:contain;
  }

  .at-step-label { min-height:18px; margin-top:0; font-size:.72rem; }
  .at-main-text { font-size:1.65rem; line-height:1.27; min-height:56px; padding:4px 6px 1px; }
  .at-pinyin-slot { min-height:32px; font-size:1rem; line-height:1.3; padding:2px 6px; }
  .at-translation-slot { min-height:36px; font-size:.94rem; line-height:1.3; padding:2px 6px 4px; }
  .at-status { min-height:34px; margin-top:2px; padding:7px 4px 0; font-size:.9rem; line-height:1.25; }

  .at-controls {
    position:sticky;
    bottom:0;
    z-index:100;
    width:calc(100% + 18px);
    margin:8px -9px 0;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    display:grid;
    grid-template-columns:repeat(4,minmax(58px,72px));
    justify-content:center;
    gap:7px;
    background:rgba(255,255,255,.96);
    border-top:1px solid #dfe4e8;
    box-shadow:0 -5px 16px rgba(0,0,0,.08);
    backdrop-filter:blur(8px);
  }
  .at-control {
    width:auto;
    min-width:0;
    height:48px;
    padding:3px 4px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
  }
  .at-control-text {
    display:block;
    margin:0;
    font-size:.7rem;
    line-height:1;
    white-space:nowrap;
  }
  .at-control-icon { font-size:1.05rem; line-height:1.05; }
  #at-start, #at-stop { display:none; }

  .at-ai-note { padding:6px 10px; font-size:.7rem; text-align:center; }
}

@media (max-width: 420px) {
  .at-nav-list { grid-template-columns:1fr; }
  .at-image-wrap { height:min(26vh,180px); }
  .at-main-text { font-size:1.55rem; }
  .at-toolbar { padding-left:7px; padding-right:7px; }
  .at-toggles { gap:8px; }
}

@media (max-height: 700px) and (max-width: 800px) {
  .at-image-wrap { height:min(24vh,165px); min-height:105px; }
  .at-main-text { min-height:50px; font-size:1.5rem; }
  .at-pinyin-slot { min-height:29px; }
  .at-translation-slot { min-height:32px; }
}

.at-audio-engine { display:none; }


/* v0.17 vocabulary two-column learning view. */
.at-vocab-detail { width:100%; max-width:820px; align-self:stretch; padding:8px 4px 4px; }
.at-vocab-right-header { padding:8px 8px 18px; border-bottom:1px solid #e6e9ed; margin-bottom:14px; }
.at-vocab-right-pinyin { font-size:1.2rem; line-height:1.45; color:#4c5967; margin-bottom:4px; }
.at-vocab-right-translation { font-size:1.25rem; line-height:1.45; color:#2f3943; font-weight:600; }
.at-vocab-examples { display:flex; flex-direction:column; gap:10px; }
.at-vocab-example { width:100%; border:1px solid #dce2e8; border-radius:12px; background:#fff; padding:14px 16px; display:flex; align-items:flex-start; gap:14px; text-align:left; cursor:pointer; color:#28323c; font:inherit; -webkit-appearance:none; appearance:none; text-decoration:none; transition:background .12s ease,border-color .12s ease,box-shadow .12s ease; }
.at-vocab-example:hover { background:#f7f9fb; border-color:#aebdca; color:#28323c; text-decoration:none; }
.at-vocab-example:active, .at-vocab-example:focus { color:#28323c; text-decoration:none; }
.at-vocab-example:focus-visible { outline:3px solid rgba(13,110,253,.24); outline-offset:2px; }
.at-vocab-example.active { background:#eef5ff; border-color:#8bb5ef; box-shadow:0 0 0 1px rgba(13,110,253,.05); color:#28323c; }
.at-vocab-example-number { flex:0 0 30px; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#eef1f4; color:#5b6671; font-weight:700; font-size:.84rem; margin-top:2px; }
.at-vocab-example-body { min-width:0; display:flex; flex-direction:column; gap:4px; }
.at-vocab-example-hanzi { display:block; font-size:1.6rem; line-height:1.4; font-weight:600; word-break:break-word; color:#22303c; }
.at-vocab-example-pinyin { display:block; font-size:1.03rem; line-height:1.4; color:#4c5967; }
.at-vocab-example-translation { display:block; font-size:1rem; line-height:1.4; color:#69737d; }
.at-vocab-example:hover .at-vocab-example-hanzi,
.at-vocab-example:hover .at-vocab-example-pinyin,
.at-vocab-example:hover .at-vocab-example-translation,
.at-vocab-example.active .at-vocab-example-hanzi,
.at-vocab-example.active .at-vocab-example-pinyin,
.at-vocab-example.active .at-vocab-example-translation {
  -webkit-text-fill-color:currentColor;
}
.at-vocab-example:hover .at-vocab-example-hanzi,
.at-vocab-example.active .at-vocab-example-hanzi { color:#22303c; }
.at-vocab-example:hover .at-vocab-example-pinyin,
.at-vocab-example.active .at-vocab-example-pinyin { color:#43515f; }
.at-vocab-example:hover .at-vocab-example-translation,
.at-vocab-example.active .at-vocab-example-translation { color:#5f6b76; }
.at-vocab-example:hover .at-vocab-example-number { background:#e7edf2; color:#53606d; }
.at-vocab-example.active .at-vocab-example-number { background:#deebff; color:#456da4; }
.at-nav-item[data-v] strong { font-size:1.18rem; line-height:1.35; }

@media (max-width: 800px) {
  .at-vocab-detail { padding:4px 0 0; max-width:none; }
  .at-vocab-right-header { padding:5px 6px 12px; margin-bottom:10px; }
  .at-vocab-right-pinyin { font-size:1.05rem; }
  .at-vocab-right-translation { font-size:1.1rem; }
  .at-vocab-example { padding:11px 10px; gap:9px; border-radius:10px; }
  .at-vocab-example-number { flex-basis:26px; width:26px; height:26px; font-size:.75rem; }
  .at-vocab-example-hanzi { font-size:1.35rem; }
  .at-vocab-example-pinyin { font-size:.95rem; }
  .at-vocab-example-translation { font-size:.92rem; }
}


/* v0.19 vocabulary click/hover refinements. */
.at-nav-item,
.at-nav-item:hover,
.at-nav-item:focus,
.at-nav-item:active,
.at-nav-item.active {
  color:#28323c !important;
  -webkit-text-fill-color:#28323c !important;
  text-decoration:none !important;
}
.at-nav-item:hover {
  background:#eef2f6 !important;
  border-color:#d6dde4 !important;
}
.at-nav-item.active,
.at-nav-item.active:hover {
  background:#e7f0ff !important;
  border-color:#9abcf1 !important;
  color:#28323c !important;
}
.at-nav-item .at-nav-small,
.at-nav-item:hover .at-nav-small,
.at-nav-item:focus .at-nav-small,
.at-nav-item.active .at-nav-small {
  color:#66727e !important;
  -webkit-text-fill-color:#66727e !important;
}
.at-vocab-right-word {
  display:inline-block;
  margin:0 0 8px;
  padding:2px 7px 3px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#22303c;
  -webkit-text-fill-color:#22303c;
  font:inherit;
  font-size:2rem;
  line-height:1.3;
  font-weight:700;
  text-align:left;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.at-vocab-right-word:hover,
.at-vocab-right-word:focus,
.at-vocab-right-word:active {
  background:#eef2f6;
  color:#22303c !important;
  -webkit-text-fill-color:#22303c !important;
  text-decoration:none;
}
.at-vocab-right-word:focus-visible {
  outline:3px solid rgba(13,110,253,.24);
  outline-offset:2px;
}
.at-vocab-right-word.active {
  background:#e7f0ff;
  box-shadow:0 0 0 1px #9abcf1 inset;
  color:#22303c !important;
  -webkit-text-fill-color:#22303c !important;
}
@media (max-width:800px) {
  .at-vocab-right-word { font-size:1.65rem; }
}

/* v0.23 English -> Chinese active-production mode. */
.at-translation-sections {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:0 0 13px;
  margin:0 0 13px;
  border-bottom:1px solid #e2e6ea;
}
.at-translation-section {
  width:100%;
  border:1px solid #d7dde4;
  border-radius:9px;
  background:#fff;
  color:#2c3742;
  padding:9px 10px;
  text-align:left;
  font-weight:600;
  cursor:pointer;
  font:inherit;
  -webkit-appearance:none;
  appearance:none;
}
.at-translation-section:hover,
.at-translation-section:focus,
.at-translation-section:active {
  background:#f0f3f6;
  border-color:#aebac6;
  color:#202b35;
  text-decoration:none;
}
.at-translation-section.active {
  background:#e7f0ff;
  border-color:#9abcf1;
  color:#203c66;
}
.at-translation-detail {
  width:100%;
  max-width:850px;
  min-height:430px;
  padding:34px 24px 18px;
  text-align:center;
}
.at-translation-item-label {
  color:#6a7480;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:20px;
}
.at-translation-english {
  color:#25303b;
  font-size:2rem;
  line-height:1.4;
  font-weight:600;
  max-width:760px;
  margin:0 auto 14px;
}
.at-translation-instruction {
  color:#747e88;
  font-size:.96rem;
  margin:0 auto 24px;
}
.at-translation-reveal {
  min-width:150px;
  margin-bottom:25px;
}
.at-translation-answer {
  margin:10px auto 0;
  padding-top:22px;
  border-top:1px solid #e5e8ec;
  max-width:760px;
}
.at-translation-chinese {
  display:block;
  width:100%;
  border:0;
  border-radius:12px;
  background:#f7f9fb;
  color:#1f2d39;
  padding:16px 18px;
  font:inherit;
  font-size:2.1rem;
  line-height:1.4;
  font-weight:650;
  text-align:center;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.at-translation-chinese:hover,
.at-translation-chinese:focus,
.at-translation-chinese:active {
  background:#edf2f6;
  color:#1f2d39;
  text-decoration:none;
}
.at-translation-chinese:focus-visible {
  outline:3px solid rgba(13,110,253,.24);
  outline-offset:2px;
}
.at-translation-pinyin {
  color:#4d5966;
  font-size:1.12rem;
  line-height:1.5;
  margin-top:12px;
}
.at-translation-empty {
  color:#69737d;
  padding:40px 10px;
}
.at-nav-item[data-translation] .at-nav-small {
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.3;
}

@media (max-width:800px) {
  .at-translation-sections {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
    padding-bottom:9px;
    margin-bottom:9px;
  }
  .at-translation-section {
    padding:7px 5px;
    text-align:center;
    font-size:.78rem;
  }
  .at-translation-detail {
    min-height:330px;
    padding:22px 8px 12px;
  }
  .at-translation-item-label { margin-bottom:14px; font-size:.74rem; }
  .at-translation-english { font-size:1.55rem; line-height:1.34; margin-bottom:10px; }
  .at-translation-instruction { font-size:.88rem; margin-bottom:18px; }
  .at-translation-answer { padding-top:16px; }
  .at-translation-chinese { font-size:1.65rem; padding:13px 10px; }
  .at-translation-pinyin { font-size:1rem; margin-top:9px; }
}

@media (max-width:440px) {
  .at-translation-sections { grid-template-columns:1fr; }
}
.at-translation-sections[hidden],
.at-translation-detail[hidden],
.at-translation-answer[hidden] { display:none !important; }


/* v0.25: wider English -> Chinese navigator and number-free story navigation. */
@media (min-width:801px) {
  #audioteacher-player.at-is-translation .at-main-grid {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  #audioteacher-player.at-is-translation .at-nav-panel {
    padding:18px;
  }
}

/* In English -> Chinese, the English itself is the navigator item, not a bold code/number. */
.at-nav-item[data-translation] strong {
  display:block;
  font-weight:400;
  font-size:1rem;
  line-height:1.38;
  white-space:normal;
}
.at-nav-item[data-translation] .at-nav-small {
  margin-top:5px;
  font-size:.76rem;
  line-height:1.25;
  color:#7a838d;
}

/* Story navigator shows the sentence itself, without S1/S2 and without bold text. */
.at-nav-item[data-s]:not([data-q]) strong {
  font-weight:400;
  white-space:normal;
  line-height:1.38;
}


/* v0.26: English -> Chinese section choices stay horizontal and fixed
   at the top of the left scrolling navigator. */
#audioteacher-player.at-is-translation .at-translation-sections {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: -18px -18px 12px;
  padding: 14px 18px 12px;
  background: #fafbfc;
  border-bottom: 1px solid #dfe4e8;
}

#audioteacher-player.at-is-translation .at-translation-section {
  width: auto;
  min-width: 0;
  padding: 9px 8px;
  text-align: center;
  font-weight: 400;
  white-space: nowrap;
}

@media (max-width: 800px) {
  #audioteacher-player.at-is-translation .at-translation-sections {
    position: sticky;
    top: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: -8px -8px 9px;
    padding: 8px 8px 9px;
    gap: 5px;
  }

  #audioteacher-player.at-is-translation .at-translation-section {
    padding: 7px 4px;
    font-size: .76rem;
    white-space: normal;
    line-height: 1.15;
  }
}


/* v0.27: move the English -> Chinese section selector flush to the top
   of the left navigator, while keeping it horizontal and sticky. */
@media (min-width: 801px) {
  #audioteacher-player.at-is-translation .at-nav-panel {
    padding-top: 0;
  }

  #audioteacher-player.at-is-translation .at-translation-sections {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 6px;
    margin: 0 -18px 10px;
    padding: 6px 18px 8px;
    background: #fafbfc;
    border-bottom: 1px solid #dfe4e8;
  }

  #audioteacher-player.at-is-translation .at-translation-section {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    padding: 7px 6px;
    text-align: center;
    font-weight: 400;
    white-space: nowrap;
  }
}

@media (max-width: 800px) {
  #audioteacher-player.at-is-translation .at-nav-panel {
    padding-top: 0;
  }

  #audioteacher-player.at-is-translation .at-translation-sections {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 4px;
    margin: 0 -8px 8px;
    padding: 5px 8px 7px;
    background: #fafbfc;
    border-bottom: 1px solid #dfe4e8;
  }

  #audioteacher-player.at-is-translation .at-translation-section {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    padding: 6px 3px;
    font-size: .76rem;
    line-height: 1.15;
    text-align: center;
    font-weight: 400;
    white-space: normal;
  }
}


/* v0.28 English -> Chinese navigation cleanup.
   The selector is outside the scrollable item list, so text can never
   scroll behind or above it. Type labels are intentionally suppressed. */

.at-nav-scroll {
  min-width: 0;
}

#audioteacher-player.at-is-translation .at-nav-panel {
  padding: 0 !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}

#audioteacher-player.at-is-translation .at-translation-sections {
  position: relative !important;
  top: auto !important;
  z-index: 5;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 6px;
  margin: 0 !important;
  padding: 8px 18px 9px !important;
  background: #fafbfc !important;
  border-bottom: 1px solid #dfe4e8;
  box-shadow: 0 2px 3px rgba(0,0,0,.03);
}

#audioteacher-player.at-is-translation .at-translation-section {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  padding: 7px 6px;
  text-align: center;
  font-weight: 400;
  white-space: nowrap;
}

#audioteacher-player.at-is-translation .at-nav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 18px 18px;
  background: #fafbfc;
  overscroll-behavior: contain;
}

#audioteacher-player.at-is-translation .at-nav-title {
  display: none;
}

#audioteacher-player.at-is-translation .at-nav-item[data-translation] .at-nav-small {
  display: none !important;
}

#audioteacher-player.at-is-translation .at-nav-item[data-translation] {
  padding-top: 10px;
  padding-bottom: 10px;
}

.at-translation-item-label {
  display: none !important;
}

@media (max-width: 800px) {
  #audioteacher-player.at-is-translation .at-translation-sections {
    gap: 4px;
    padding: 6px 8px 7px !important;
  }

  #audioteacher-player.at-is-translation .at-translation-section {
    padding: 6px 3px;
    font-size: .76rem;
    line-height: 1.15;
    white-space: normal;
  }

  #audioteacher-player.at-is-translation .at-nav-scroll {
    padding: 8px;
  }
}


/* v0.31: Translate mode shows the Chinese answer immediately.
   Hanzi/Pinyin are controlled only by their top checkboxes. */
#audioteacher-player.at-is-translation .at-translation-answer {
  padding-top: 14px;
}
#audioteacher-player.at-is-translation .at-translation-english {
  margin-bottom: 4px;
}