@import url("play_focus.css?v=1");
:root {
      --bg: #f5f7fa; --card-bg: #fff; --card-bg-solid: #fff; --text: #1d1d1f;
      --text-secondary: #515154; --border: #e5e7eb; --primary: #1d4ed8; --primary-ink: #1d4ed8; --reg-ink: #4c1d95; --radius: 12px;
      --yihang-h: 2.75rem; --yihang-gap: 1.25rem;
      --lessons-max: max(8rem, calc(100dvh - 72px - var(--yihang-h) - var(--yihang-gap) - var(--m2m-tabbar-space, 0px) - env(safe-area-inset-bottom, 0px)));
    }
    html.dark, html[data-theme="dark"] {
      --bg: #070b16; --card-bg: #121a2c; --card-bg-solid: #121a2c; --text: #e2e8f0;
      --text-secondary: #a8b8cc; --border: #243044; --primary-ink: #60a5fa; --reg-ink: #c4b5fd;
    }
    html, body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text);
      font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
    body { display: flex; flex-direction: column; min-height: 100dvh; }
    :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
    button, select, input { font: inherit; color: inherit; }
    .chrome {
      position: sticky; top: 0; z-index: 12;
      background: color-mix(in srgb, var(--card-bg) 82%, transparent);
      backdrop-filter: saturate(1.45) blur(18px);
      border-bottom: 1px solid var(--border);
    }
    .top { display: flex; align-items: center; gap: 12px; padding: 10px var(--site-gutter, 20px) 8px; max-width: var(--site-wide, 1600px); width: 100%; box-sizing: border-box; margin: 0 auto; min-width: 0; }
    .site-home {
      display: inline-flex; align-items: center; justify-content: center;
      width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0;
      color: var(--text-secondary); text-decoration: none; font-size: 16px; line-height: 1; opacity: .78;
    }
    .site-home:hover { opacity: 1; color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
    .brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 700; }
    .brand b { font-family: "Source Serif 4", serif; letter-spacing: -.03em; }
    .pills { display: flex; gap: 4px; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .pills button {
      flex: 0 0 auto; border: 0; background: transparent; color: var(--text-secondary);
      padding: 7px 10px; border-radius: 999px; cursor: pointer; font-weight: 600;
    }
    .pills button[aria-current="true"] { background: var(--primary); color: #fff; }
    .rail { display: flex; align-items: center; gap: 8px; padding: 0 var(--site-gutter, 20px) 8px; max-width: var(--site-wide, 1600px); width: 100%; box-sizing: border-box; margin: 0 auto; }
    .units { display: flex; gap: 4px; }
    .rail { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .units-global {
      margin-left: auto;
      padding-left: 10px;
      border-left: 1px solid var(--border);
    }

    .units button {
      border: 1px solid var(--border); background: transparent; color: var(--text-secondary);
      border-radius: 999px; padding: 5px 12px; cursor: pointer; font-weight: 700; font-size: .86rem;
    }
    .units button[aria-current="true"] { border-color: var(--primary); color: #fff; background: var(--primary); }
    .find-wrap { position: relative; flex: 0 1 14rem; min-width: 6rem; max-width: 16rem; }
    .find { width: 100%; box-sizing: border-box; border: 1px solid var(--border); background: var(--bg);
      border-radius: 999px; padding: 6px 12px; }
    .find-hits {
      position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(22rem, 72vw);
      max-height: min(50vh, 360px); overflow: auto; border: 1px solid var(--border);
      border-radius: 10px; background: var(--card-bg-solid, var(--card-bg)); box-shadow: 0 8px 28px rgba(0,0,0,.16);
    }
    .find-hits button {
      display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--border);
      background: transparent; color: var(--text); padding: 8px 10px; cursor: pointer; font: inherit;
    }
    .find-hits button:last-child { border-bottom: 0; }
    .find-hits small { display: block; color: var(--text-secondary); font-size: .78rem; }
    .wrap { max-width: var(--site-wide, 1600px); margin: 0 auto; padding: 12px var(--site-gutter, 20px) var(--yihang-gap);
      width: 100%; box-sizing: border-box; flex: 1 1 auto;
      display: grid; grid-template-columns: 13rem minmax(0, 1fr) minmax(14rem, 18rem); gap: 16px; align-items: start; }
    .lessons {
      display: flex; flex-direction: column; gap: 4px; min-height: 0;
      position: sticky; top: 72px;
      max-height: var(--lessons-max); overflow: auto;
      padding-bottom: var(--yihang-gap);
      overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
    }
    .lessons::-webkit-scrollbar, .cat-pack::-webkit-scrollbar { width: 6px; }
    .lessons::-webkit-scrollbar-thumb, .cat-pack::-webkit-scrollbar-thumb {
      background: color-mix(in srgb, var(--text-secondary) 50%, transparent); border-radius: 99px;
    }
    .lessons button {
      text-align: left; border: 1px solid var(--border); background: var(--card-bg); color: var(--text);
      border-radius: 10px; padding: 8px 10px; cursor: pointer;
    }
    .lessons button[aria-current="true"] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--card-bg)); }
    .lessons button.cul-cat { font-weight: 700; }
    .lessons button.cul-cat.is-on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--card-bg)); }
    .lessons button.cul-item { padding-left: 1.5rem; font-size: .9rem; color: var(--text-secondary); }
    .lessons button.cul-item[aria-current="true"] { color: var(--text); }
    .board {
      background: var(--card-bg-solid); border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
      border-radius: 24px; padding: 24px 24px 22px; min-width: 0; overflow-x: hidden;
      box-shadow:
        0 1px 0 color-mix(in srgb, #fff 55%, transparent) inset,
        0 22px 48px -28px color-mix(in srgb, #000 32%, transparent);
    }
    html.dark .board, html[data-theme="dark"] .board {
      box-shadow:
        0 1px 0 color-mix(in srgb, #fff 8%, transparent) inset,
        0 22px 48px -24px color-mix(in srgb, #000 55%, transparent);
    }
    .lesson-head { margin: 0 0 14px; }
    .lesson-head .lesson-title { margin: 0; font-size: 1.35rem; letter-spacing: -.03em; font-weight: 800; }
    .lesson-head p { margin: 6px 0 0; color: var(--text-secondary); font-size: .95rem; }
    .who-lab { margin: 0 0 6px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; color: var(--text-secondary); }
    .who-lab:empty { display: none; }
    /* 对话模式角色色块：对方=冷色，你=暖色；仅补色/形状，不改原有加粗与字号 */
    .who-lab .cat-who-dot { display: inline-block; width: .62em; height: .62em; margin-right: 6px; border-radius: 50%; vertical-align: 1px; background: var(--border); }
    .who-lab.who-other .cat-who-dot { background: #2f6fed; }
    .who-lab.who-you .cat-who-dot { background: #d97706; }
    .cat-pack button[data-who] > span::before { content: ""; display: inline-block; width: .42em; height: .42em; margin-right: 5px; border-radius: 50%; vertical-align: 1px; background: var(--border); }
    .cat-pack button[data-who="对方"] > span::before { background: #2f6fed; }
    .cat-pack button[data-who="你"] > span::before { background: #d97706; }
    .listen-tools { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 8px; }
    .rate-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0; }
    .rate-lab { font-size: 12px; color: var(--text-secondary); font-weight: 700; margin-right: 2px; }
    .rate-bar button {
      border: 1px solid var(--border); background: transparent; color: var(--text-secondary);
      border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer;
    }
    .rate-bar button[aria-current="true"] { border-color: var(--primary); color: var(--primary-ink,var(--primary)); font-weight: 700; }
    .step { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .icon-btn {
      width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--border);
      background: var(--bg); color: var(--text); cursor: pointer; display: grid; place-items: center;
    }
    .icon-btn svg { width: 18px; height: 18px; display: block; }
    .icon-btn:hover { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--bg)); }
    .prog { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 4.2rem; }
    .meter { width: 76px; height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; }
    .meter i { display: block; height: 100%; width: 0; background: var(--primary); border-radius: inherit; }
    .count { font-variant-numeric: tabular-nums; font-size: .72rem; color: var(--text-secondary); }
    .acts {
      display: flex; gap: 6px; flex-shrink: 0; align-items: center; flex-wrap: wrap;
      box-sizing: border-box;
      margin-left: 0; padding: 6px 10px 6px 6px;
      border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
      border-radius: 999px;
      background: color-mix(in srgb, var(--card-bg-solid) 58%, transparent);
      backdrop-filter: saturate(1.5) blur(22px);
      -webkit-backdrop-filter: saturate(1.5) blur(22px);
    }
    .acts .step { padding: 0 10px 0 2px; margin-right: 2px; border-right: 1px solid color-mix(in srgb, var(--border) 75%, transparent); }
    .acts button { border: 0; border-radius: 9px; padding: 9px 12px; cursor: pointer; font-weight: 700; }
    .go { background: var(--primary); color: #fff; }
    .icon-read {
      --pct: 4; width: 52px; height: 52px; padding: 0; border-radius: 50%;
      display: grid; place-items: center; position: relative; flex-shrink: 0;
      box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--primary) 72%, transparent);
    }
    .play-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
    .play-ring-bg { fill: none; stroke: color-mix(in srgb, #fff 28%, transparent); stroke-width: 2.6; }
    .play-ring-fg {
      fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round;
      stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--pct));
    }
    .play-ico { width: 20px; height: 20px; display: block; position: relative; z-index: 1; margin-left: 2px; }
    .play-ico .play-face { fill: #fff; }
    .acts .sec {
      border-radius: 999px; padding: 8px 13px; font-size: .82rem;
      background: color-mix(in srgb, var(--bg) 40%, transparent);
    }
    .sec { background: var(--bg); color: var(--text); border: 1px solid var(--border) !important; }
    #autoRead.on { background: var(--primary); color: #fff; border-color: var(--primary) !important; }
    .dots { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
    .dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--border); cursor: pointer; }
    .dots button[aria-current="true"] { background: var(--primary); transform: scale(1.25); }
    .row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
    .chunks { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
    .chunks button {
      font-family: "Source Serif 4", serif; font-size: clamp(1.15rem, 1.6vw, 1.7rem); font-weight: 600;
      padding: 8px 13px; border: 1px solid var(--border); border-radius: 16px;
      background: var(--bg); cursor: pointer; line-height: 1.2; color: inherit;
    }
    .chunks button[aria-current="true"] { border-color: var(--primary); color: var(--primary-ink,var(--primary)); }
    .chunks button.is-weak,.chunks button.is-stress{color:var(--primary-ink,var(--primary));}
    .ui-line { margin: 8px 0 0; font-size: 1.05rem; color: var(--text-secondary); }
    /* Prosody on IPA / orthographic units (aligned like nihongo mora pitch) */
    .ipa-block { margin: 6px 0 0; text-align: left; }

    .pitch-lab { margin: 0 0 8px; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
    .ipa-block .pitch-lab { color: var(--text); }

    .ipa { margin: 0; font-family: ui-monospace, Menlo, monospace; color: var(--text-secondary); font-size: .92rem; overflow-wrap: anywhere; }
    .ipa-prosody { position: relative; display: block; width: 100%; max-width: 100%; }
    .ipa-words { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; position: relative; z-index: 1; }
    .ipa-word { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 1.6em; max-width: 100%; }
    .ipa-word .ipa-dot { display: block; color: var(--primary); width: 28px; height: 30px; margin: 0; }
    .ipa-word.is-stress .ipa-lab { color: var(--text); font-weight: 650; }
    .ipa-word.is-weak .ipa-lab { opacity: .82; }
    .ipa-lab { display: block; font-family: ui-monospace, Menlo, monospace; font-size: .88rem; line-height: 1.25; text-align: center; white-space: nowrap; }
    .ipa-lab-ortho { font-family: "Source Serif 4", "Noto Serif SC", serif; font-size: .95rem; }
    .ipa-mark { color: var(--primary); font-weight: 700; }
    .ipa-nuc { color: inherit; }
    .ipa-plain { display: block; }
    .ipa-line-wrap { display: none; } /* per-word dots carry the contour; line optional */
    .contour[hidden] { display: none !important; }
    .note { margin: 8px 0 0; color: var(--text-secondary); }
    .quiz { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
    .quiz p { flex: 1 0 100%; margin: 0 0 4px; color: var(--text-secondary); }
    .quiz button {
      border: 1px solid var(--border); background: var(--bg); color: var(--text);
      border-radius: 10px; padding: 8px 12px; font: inherit; cursor: pointer;
    }
    .quiz button[data-ok="1"] { border-color: #3d9a6a; }
    .quiz button[data-ok="0"] { border-color: #c45c5c; }
    /* IPA rooms: short SVG contour. JA #contour holds .pitch-stack — must stay height:auto (t202). */
    .contour { display: block; width: auto; max-width: 100%; margin: 4px 0 0; height: auto; }
    svg.contour { height: 36px; }
    .contour:not(:has(.pitch-stack)) { height: 36px; }
    .contour path { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; }
    .contour circle { fill: var(--primary); }
    .pitch-block #contour,
    #contour:has(.pitch-stack) { height: auto !important; min-height: 0; overflow: visible; }
    .rel { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
    .rel button {
      border: 1px solid var(--border); background: var(--bg); color: var(--text);
      border-radius: 10px; padding: 8px 12px; cursor: pointer; font: inherit;
    }
    .rel button.playing { border-color: var(--primary); color: var(--primary); }
    .fb { min-height: 1.2em; color: var(--text-secondary); }
    .cat-pack {
      position: sticky; top: 72px;
      max-height: var(--lessons-max); overflow: auto;
      overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
      margin: 0; padding: 12px 12px calc(14px + var(--yihang-gap));
      border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
      border-radius: 18px; background: var(--card-bg-solid);
    }
    .cat-pack h3 { margin: 0 0 8px; font-size: .82rem; font-weight: 700; color: var(--text-secondary); }
    .cat-pack .cat-list { display: flex; flex-direction: column; gap: 6px; }
    .cat-pack button {
      text-align: left; border: 1px solid var(--border); background: var(--bg); color: var(--text);
      border-radius: 10px; padding: 8px 12px; cursor: pointer; font: inherit;
    }
    .cat-pack button small { display: block; margin-top: 2px; color: var(--text-secondary); font-size: .82rem; }
    .cat-pack button[aria-current="true"] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--bg)); }
    .cat-pack button.playing { border-color: var(--primary); color: var(--primary); }
    .cat-pack.alpha-grid h3 { margin-bottom: 10px; }
    .cat-pack.alpha-grid .cat-list {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); gap: 6px;
    }
    .cat-pack.alpha-grid button {
      text-align: center; min-height: 3.4rem; padding: 6px 4px;
      font-family: "Source Serif 4", "Noto Serif", serif; font-size: 1.35rem; font-weight: 700;
      overflow-wrap: anywhere;
    }
    .cat-pack.alpha-grid button small { font-size: .68rem; line-height: 1.2; font-weight: 500; font-family: "Noto Sans SC", sans-serif; overflow-wrap: anywhere; }

    /* ---- 字母表三块版式：主区全表 / 表下例词 / 右栏联动 ---- */

    /* t240: 日语五十音 — 平假名/片假名同页双栏；点格读本字 */
    .kana-dual {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px 18px;
      align-items: start;
    }
    .kana-panel { min-width: 0; }
    .kana-gojuon { display: grid; gap: 6px; }
    .kana-line {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 6px;
    }
    .kana-empty {
      min-height: 4.4rem;
      border-radius: 12px;
      background: transparent;
    }
    body.kana-dual-layout .alpha-board .alpha-cell {
      min-height: 4.2rem;
      padding: 8px 4px;
    }
    body.kana-dual-layout .alpha-board .alpha-glyph {
      font-size: 1.45rem;
    }
    @media (max-width: 767.98px) {
      .kana-dual { grid-template-columns: 1fr; gap: 18px; }
      .kana-empty { min-height: 3.8rem; }
      body.kana-dual-layout .alpha-board .alpha-cell {
        min-height: 3.8rem;
        padding: 10px 4px; /* 触控更大 */
      }
      body.kana-dual-layout .alpha-board .alpha-glyph { font-size: 1.35rem; }
    }
    .alpha-board { margin-top: 14px; }
    .alpha-table-h { margin: 0 0 8px; font-size: .82rem; font-weight: 700; color: var(--text-secondary); }
    .alpha-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr)); gap: 6px; }
    .alpha-cell {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
      min-width: 0; min-height: 4.4rem; padding: 8px 6px; border: 1px solid var(--border);
      border-radius: 12px; background: var(--card-bg-solid); color: var(--text); cursor: pointer; font: inherit;
    }
    .alpha-cell .alpha-glyph { font-family: "Source Serif 4", "Noto Serif", serif; font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
    .alpha-cell .alpha-say { font-size: .72rem; line-height: 1.2; color: var(--text-secondary); font-family: ui-monospace, Menlo, monospace; overflow-wrap: anywhere; text-align: center; }
    .alpha-cell:hover { border-color: var(--primary); }
    .alpha-cell.is-sel {
      border-color: var(--primary);
      background: color-mix(in srgb, var(--primary) 12%, var(--card-bg-solid));
      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 42%, transparent);
    }
    .alpha-cell.is-sel .alpha-glyph { color: var(--primary-ink, var(--primary)); }
    .alpha-cell:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
    html.dark .alpha-cell:focus-visible, html[data-theme="dark"] .alpha-cell:focus-visible { outline-color: var(--primary-ink); }
    .alpha-examples { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
    .alpha-ex-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; }
    .alpha-ex-glyph { font-family: "Source Serif 4", "Noto Serif", serif; font-size: 1.85rem; font-weight: 700; line-height: 1; }
    .alpha-ex-say { font-family: ui-monospace, Menlo, monospace; font-size: .9rem; color: var(--text-secondary); }
    .alpha-variant { margin: 0 0 8px; font-size: .8rem; color: var(--text-secondary); }
    .alpha-groups { display: flex; flex-direction: column; gap: 12px; }
    .alpha-group-lab { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; }
    .alpha-group-lab b { font-family: ui-monospace, Menlo, monospace; font-size: 1rem; color: var(--primary-ink, var(--primary)); }
    .alpha-group-note { font-size: .78rem; color: var(--text-secondary); }
    .alpha-words { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; padding: 0; list-style: none; }
    .alpha-words li { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
    .alpha-word {
      border: 1px solid var(--border); background: var(--bg); color: var(--text);
      border-radius: 8px; padding: 4px 10px; cursor: pointer; font: inherit;
      font-family: "Source Serif 4", "Noto Serif", serif; font-size: 1rem;
    }
    .alpha-word:hover { border-color: var(--primary); }
    .alpha-word.playing { border-color: var(--primary); color: var(--primary-ink, var(--primary)); }
    .alpha-word-zh { font-size: .8rem; color: var(--text-secondary); }
    .alpha-empty { margin: 0; color: var(--text-secondary); font-size: .85rem; }
    .cat-pack.alpha-rail-pack .alpha-rail-glyph { margin: 2px 0 0; font-family: "Source Serif 4", "Noto Serif", serif; font-size: 2.2rem; font-weight: 700; line-height: 1.05; }
    .cat-pack.alpha-rail-pack .alpha-rail-say { margin: 2px 0 8px; font-family: ui-monospace, Menlo, monospace; font-size: .9rem; color: var(--text-secondary); }
    .cat-pack.alpha-rail-pack .alpha-rail-play { width: 100%; margin: 0 0 10px; }
    .cat-pack.alpha-rail-pack .alpha-words { gap: 6px 8px; }
    .cat-pack.alpha-rail-pack .alpha-word { font-size: .92rem; padding: 3px 8px; }
    .cat-pack.alpha-rail-pack .alpha-group + .alpha-group { margin-top: 10px; }
    .board.alpha-mode > .who-lab,
    .board.alpha-mode > .row,
    .board.alpha-mode > .ui-line,
    .board.alpha-mode > .ipa-block,
    .board.alpha-mode > .note,
    .board.alpha-mode > .dict,
    .board.alpha-mode > .rel,
    .board.alpha-mode > .variants { display: none !important; }
    .board.alpha-mode #itemDots { display: none !important; }
    html body .board.alpha-mode #quiz.quiz:not([hidden]) { display: none !important; }
    @media (max-width: 767.98px) {
      .alpha-table { grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); }
      .alpha-cell { min-height: 4rem; padding: 6px 4px; }
      .alpha-cell .alpha-glyph { font-size: 1.3rem; }
      .alpha-ex-glyph { font-size: 1.6rem; }
    }
    /* 800×480 这类矮屏：三栏挤不下，字母表页收成单列并隐藏左栏课表（改由上方 unit 切换），
       取舍：牺牲左侧目录常驻与逐字圆点，换主表 40 格全宽；顶部导航仍占高，需向下滚动一屏。 */
    @media (min-width: 768px) and (max-height: 560px) {
      body.alpha-layout .wrap { grid-template-columns: minmax(0, 1fr); }
      body.alpha-layout .lessons { display: none; }
      body.alpha-layout .alpha-table { grid-template-columns: repeat(auto-fill, minmax(2.9rem, 1fr)); }
      body.alpha-layout .alpha-cell { min-height: 3.6rem; }
    }

    .dict { width: 100%; box-sizing: border-box; border: 1px solid var(--border); background: var(--bg); border-radius: 10px; padding: 8px 10px; margin-top: 8px; }
    @media (max-width: 1023.98px) {
      .wrap { grid-template-columns: 13rem minmax(0, 1fr); }
      .cat-pack { grid-column: 1 / -1; position: static; max-height: min(50vh, 360px); overflow: auto; }
    }
    @media (max-width: 767.98px) {
      .top, .rail, .wrap { padding-left: 12px; padding-right: 12px; }
      .wrap { grid-template-columns: 1fr; }
      .lessons { position: static; max-height: min(42vh, 280px); overflow: auto; }
      .cat-pack { position: static; max-height: min(50vh, 360px); overflow: auto; grid-column: auto; }
      .board { padding: 14px 12px; border-radius: 12px; }
      .icon-btn { width: 44px; height: 44px; }
      .acts { width: 100%; justify-content: flex-start; flex-wrap: wrap; border-radius: 18px; }
      .icon-read { width: 48px; height: 48px; }
      .chunks button { min-height: 44px; font-size: 1.4rem; }
    }
    html.m2m-phone .wrap { grid-template-columns: 1fr; }
    html.m2m-phone .lessons { position: static; max-height: min(42vh, 280px); overflow: auto; padding-bottom: var(--yihang-gap); }
    html.m2m-phone .cat-pack { position: static; max-height: min(50vh, 360px); overflow: auto; padding-bottom: var(--yihang-gap); }

    /* 2026-11-05 C 档：字母表页重复信息 3 处 → 2 处
       现状同一字母渲染 3 次：左栏 26 字母列表（.lessons）/ 主表 38 格（.alpha-table）/ 右侧详情（.cat-pack）。
       左栏与主表是同一组入口（点选同一字母、同一发音），隐藏左栏；主表每格仍可点选发音，入口不减。
       版式：≥1024 桌面改「主表 1fr + 右侧详情 14–18rem」两列，主表实测宽度 +208px；
       ≤1023 原本就是 13rem + 主列两列，这里收成单列主表，详情仍接在下方。 */
    @media (min-width: 1024px) {
      body.alpha-layout .wrap { grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); }
    }
    @media (max-width: 1023.98px) {
      body.alpha-layout .wrap { grid-template-columns: minmax(0, 1fr); }
      body.alpha-layout .cat-pack { grid-column: auto; }
    }
    body.alpha-layout .lessons { display: none; }
    .yihang-footer {
      display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .75rem;
      min-height: var(--yihang-h); padding: 0 max(var(--site-gutter, 20px), calc((100% - var(--site-wide, 1600px)) / 2 + var(--site-gutter, 20px))); margin-top: auto;
      border-top: 1px solid var(--border); background: var(--card-bg); color: var(--text-secondary);
      font-size: 13px; line-height: 1.25; box-sizing: border-box; width: 100%;
    }
    .yihang-footer { color: var(--text-secondary); }
    .yihang-footer a, .yihang-footer a:visited { color: inherit !important; text-decoration: none; }
    .yihang-footer a:hover { color: var(--text) !important; text-decoration: underline; }
    html.m2m-phone .listen-tools { width: 100%; }
    html.m2m-phone .acts { width: 100%; justify-content: flex-start; flex-wrap: wrap; margin-left: 0; border-radius: 18px; }
  
    /* peer-phone-chrome-1 */
    .site-home { position: relative; z-index: 3; flex: 0 0 44px; }
    .site-home .bi { display: block; width: 1em; height: 1em; line-height: 1; font-size: 16px; }
    .site-home-fallback { display: none !important; }
    button.m2m-tab { border: 0; background: transparent; font: inherit; color: inherit; appearance: none; -webkit-appearance: none; cursor: pointer; }
    .m2m-tabbar {
      display: none !important;
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 1080;
      height: calc(56px + env(safe-area-inset-bottom, 0px));
      min-height: calc(56px + env(safe-area-inset-bottom, 0px));
      padding: 2px max(2px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(2px, env(safe-area-inset-left, 0px));
      box-sizing: border-box; width: 100%; max-width: 100vw; overflow: visible !important;
      flex-direction: row; flex-wrap: nowrap !important; align-items: stretch; justify-content: space-between;
      background: #121826; border-top: 1px solid rgba(255,255,255,.1);
      box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
      transform: translate3d(0, calc(-1 * var(--vv-gap, 0px)), 0);
    }
    html.light-theme .m2m-tabbar, html.light-theme[data-theme="light"] .m2m-tabbar {
      background: #fff; border-top-color: rgba(15,23,42,.08); box-shadow: 0 1px 0 #fff inset;
    }
    .m2m-tabbar > .m2m-tab {
      flex: 1 1 0 !important; min-width: 0 !important; display: flex !important;
      flex-direction: column; align-items: center; justify-content: center;
      gap: 1px; padding: 2px 1px; box-sizing: border-box; overflow: visible !important;
    }
    .m2m-tabbar .m2m-tab-ico {
      width: 22px !important; height: 22px !important; max-width: 22px !important;
      flex: 0 0 22px !important; display: inline-flex !important; align-items: center; justify-content: center;
      overflow: visible !important; line-height: 1;
    }
    .m2m-tabbar .m2m-tab-ico .bi { font-size: 18px; line-height: 1; }
    .m2m-tabbar .m2m-tab-lab {
      display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important;
      text-align: center; font-size: 9px; line-height: 1.1;
    }
    @media (max-width: 767.98px) { .m2m-tabbar { display: flex !important; } }
    html.m2m-phone .m2m-tabbar { display: flex !important; }
    @media (min-width: 768px) {
      html:not(.m2m-phone) .m2m-tabbar {
        display: none !important; visibility: hidden !important; pointer-events: none !important;
        height: 0 !important; overflow: hidden !important; padding: 0 !important; border: 0 !important;
      }
    }
    html.m2m-phone body { padding-bottom: calc(var(--m2m-tabbar-space, 56px) + env(safe-area-inset-bottom, 0px)) !important; }
    html.m2m-phone .yihang-footer { display: none !important; }

    .m2m-scrim {
      display: none; position: fixed; inset: 0; z-index: 1090;
      background: rgba(8, 12, 24, .46);
      backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    }
    .m2m-side-panel, .m2m-top-sheet {
      display: none; position: fixed; z-index: 1095;
      background: var(--card-bg-solid); color: var(--text);
      box-sizing: border-box; -webkit-overflow-scrolling: touch;
    }
    .m2m-side-panel {
      left: 0; top: 0;
      bottom: calc(var(--m2m-tabbar-space, 56px) + env(safe-area-inset-bottom, 0px));
      width: min(88vw, 320px); max-width: 100%;
      padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 14px;
      border-right: 1px solid var(--border);
      box-shadow: 8px 0 28px rgba(0,0,0,.22);
      overflow: auto; transform: translateX(-104%);
      transition: transform .22s ease;
    }
    .m2m-top-sheet {
      left: 0; right: 0; top: 0; max-height: min(72vh, 520px);
      padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 14px;
      border-bottom: 1px solid var(--border); border-radius: 0 0 18px 18px;
      box-shadow: 0 12px 32px rgba(0,0,0,.2);
      overflow: auto; transform: translateY(-108%);
      transition: transform .22s ease;
    }
    .m2m-panel-h {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      margin: 0 0 10px; font-size: .92rem; font-weight: 800;
    }
    .m2m-panel-h button {
      border: 1px solid var(--border); background: var(--bg); color: var(--text-secondary);
      border-radius: 999px; padding: 4px 10px; font-size: .78rem; font-weight: 700; cursor: pointer;
    }
    .m2m-side-host, .m2m-top-host { min-height: 0; }
    .m2m-side-panel .lessons {
      display: flex !important; flex-direction: column; gap: 4px; width: 100%; max-height: none !important;
      overflow: visible !important; position: static !important;
    }
    .m2m-side-panel .lessons button { width: 100%; text-align: left; border-radius: 10px; white-space: normal; }
    .m2m-top-sheet .pills, .m2m-top-sheet .units, .m2m-top-sheet .rail, .m2m-top-sheet .find-wrap {
      display: flex !important; flex-wrap: wrap; gap: 6px; width: 100%; margin: 0 0 10px; overflow: visible !important;
    }
    .m2m-top-sheet .find-wrap { display: block !important; }
    .m2m-edge-l, .m2m-edge-t {
      display: none; position: fixed; z-index: 1075; pointer-events: auto;
      color: color-mix(in srgb, var(--text-secondary) 75%, transparent);
      font-size: 11px; font-weight: 700; letter-spacing: .04em; opacity: .6;
    }
    .m2m-edge-l {
      left: 0; top: 40%; writing-mode: vertical-rl; text-orientation: mixed;
      padding: 12px 4px; border-radius: 0 10px 10px 0;
      background: color-mix(in srgb, var(--card-bg-solid) 88%, transparent);
      border: 1px solid var(--border); border-left: 0;
    }
    .m2m-edge-t {
      /* #S-2026-11-03 手机班次入口：原 top:4 + 居中会压住站名与朗读键，且 63×26 触控过小；
         改为顶栏右侧独立胶囊，保证可见可点 */
      top: calc(env(safe-area-inset-top, 0px) + 12px); left: auto; right: 10px; transform: none;
      min-width: 84px; min-height: 32px; padding: 6px 14px;
      border-radius: 999px; text-align: center;
      background: var(--card-bg-solid); border: 1px solid var(--border);
      color: var(--text-secondary); font-size: 12px; opacity: .95;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
    }
    html.m2m-phone.m2m-compact .chrome .top .pills,
    html.m2m-phone.m2m-compact .chrome .top .find-wrap,
    html.m2m-phone.m2m-compact .chrome .rail,
    html.m2m-phone.m2m-compact .wrap > .lessons {
      display: none !important;
    }
    html.m2m-phone.m2m-compact .m2m-edge-l,
    html.m2m-phone.m2m-compact .m2m-edge-t { display: block; }
    html.m2m-phone.m2m-side-open .m2m-scrim,
    html.m2m-phone.m2m-top-open .m2m-scrim { display: block; }
    html.m2m-phone.m2m-side-open .m2m-side-panel { display: block; transform: translateX(0); }
    html.m2m-phone.m2m-top-open .m2m-top-sheet { display: block; transform: translateY(0); }
    html.m2m-phone.m2m-side-open .m2m-edge-l,
    html.m2m-phone.m2m-top-open .m2m-edge-t { opacity: 0; }


/* 本课全部 · 全课连播 */
.cat-pack .cat-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.cat-pack .cat-h h3 { margin: 0; font-size: .92rem; }
.cat-pack #catPlay {
  padding: 3px 10px; border-radius: 999px; font-size: .76rem; line-height: 1.5; white-space: nowrap;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--card-bg) 88%, transparent); color: var(--text); cursor: pointer;
}
.cat-pack #catPlay.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.cat-pack button.playing { outline: 2px solid var(--primary); outline-offset: 1px; }

    .chunks button.is-stress { box-shadow: inset 0 -2px 0 var(--primary); }
    .chunks button.is-weak { opacity: .92; }
    .ipa[data-mode="ortho"] .ipa-words { gap: 4px; }
    .ipa[data-mode="ortho"] .ipa-lab-ortho { min-height: 0; height: 0; overflow: hidden; }



    .pills .pill-culture {
      margin-left: 6px;
      border-style: dashed;
    }


    html.m2m-culture .cul-article {
      display: flex; flex-direction: column; gap: 0;
      width: 100%;
    }
    html.m2m-culture .cul-block {
      padding: 1.1rem 0 1.15rem;
      border-bottom: 1px solid var(--border);
    }
    html.m2m-culture .cul-block:last-child { border-bottom: 0; }
    html.m2m-culture .cul-en {
      margin: 0 0 .45rem;
      font-size: 1.18rem;
      line-height: 1.8;
      font-weight: 550;
      cursor: pointer;
    }
    html.m2m-culture .cul-zh {
      margin: 0;
      font-size: 1.02rem;
      line-height: 1.75;
      color: var(--text-secondary);
    }
    html.m2m-culture .board .row { display: block; }
    html.m2m-culture .board .chunks { display: block; white-space: normal; }



    html:not(.m2m-culture) .culture-aside { display: none !important; }
    .culture-aside .cul-aside-now,
    .culture-aside .cul-aside-toc {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 12px;
    }
    .culture-aside h3 {
      margin: 0 0 8px;
      font-size: .78rem;
      letter-spacing: .04em;
      color: var(--text-secondary);
      font-weight: 800;
    }
    .culture-aside .cul-aside-en {
      margin: 0 0 6px;
      font-size: .92rem;
      line-height: 1.55;
      font-weight: 650;
    }
    .culture-aside .cul-aside-zh {
      margin: 0;
      font-size: .86rem;
      line-height: 1.55;
      color: var(--text-secondary);
    }
    .culture-aside .cul-aside-toc {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .culture-aside .cul-aside-toc button {
      text-align: left;
      border: 1px solid transparent;
      background: transparent;
      color: var(--text);
      border-radius: 8px;
      padding: 7px 8px;
      cursor: pointer;
      font-size: .8rem;
      line-height: 1.35;
    }
    .culture-aside .cul-aside-toc button[aria-current="true"],
    .culture-aside .cul-aside-toc button.playing {
      border-color: var(--primary);
      background: color-mix(in srgb, var(--primary) 12%, var(--card-bg));
    }
    html.m2m-culture .cul-block.is-current {
      background: color-mix(in srgb, var(--primary) 11%, var(--card-bg));
      border-radius: 12px;
      padding-left: .85rem;
      padding-right: .85rem;
      box-shadow: inset 3px 0 0 var(--primary);
    }
    html.m2m-culture .cul-block.is-playing .cul-en {
      color: var(--primary);
    }
    html.m2m-culture .cul-block:not(.is-current) {
      opacity: .72;
    }
    html.m2m-culture .cul-block.is-current {
      opacity: 1;
    }



    html.m2m-culture .cul-one {
      display: block;
      width: 100%;
    }
    html.m2m-culture .cul-one .cul-en {
      margin: 0;
      font-size: 1.35rem;
      line-height: 1.85;
      font-weight: 600;
      cursor: pointer;
    }
    html.m2m-culture .cul-block {
      padding: 0.4rem 0 0.2rem;
      border: 0;
      opacity: 1;
      background: transparent;
      box-shadow: none;
    }
    html.m2m-culture .cul-block.is-playing .cul-en {
      color: var(--primary);
    }
    html.m2m-culture #zh {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      overflow: hidden !important;
    }
    html.m2m-culture #note {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      overflow: hidden !important;
    }
    .culture-aside .cul-aside-ops {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 12px;
    }
    .culture-aside .cul-auto {
      width: 100%;
      border: 1px solid var(--primary);
      background: var(--primary);
      color: #fff;
      border-radius: 10px;
      padding: 10px 12px;
      font-weight: 800;
      cursor: pointer;
    }
    .culture-aside .cul-auto.on {
      background: transparent;
      color: var(--primary);
    }
    .culture-aside .cul-aside-hint {
      margin: 8px 0 0;
      font-size: .75rem;
      color: var(--text-secondary);
      line-height: 1.4;
    }

/* culture IA: 文化类别只在 #culMenu；文化态不再显示 场景/单词/语法 这一行 */
.m2m-culture #units {
  display: none !important;
}
.m2m-culture #units button[aria-current="true"] {
  background: var(--primary);
  color: #fff;
}
.m2m-culture #lessons button {
  text-align: left;
  white-space: normal;
  line-height: 1.35;
}
.m2m-culture .cul-aside-status {
  margin: 0;
  font-size: .92rem;
  color: var(--text-secondary);
}
.m2m-culture .cul-aside-hint2 {
  margin: 0;
  font-size: .85rem;
  color: var(--text-secondary);
  opacity: .9;
}
    html.m2m-culture .culture-aside {
      display: none !important; /* locked off — was flex, stole grid track */
      flex-direction: column;
      gap: 12px;
      position: sticky;
      top: 72px;
      max-height: var(--lessons-max);
      overflow: auto;
      min-width: 0;
    }
    html.m2m-culture .cul-item-title {
      margin: 0 0 .6rem;
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--primary);
    }
    html.m2m-culture .cul-zh-inline {
      margin: .75rem 0 0;
      font-size: 1.05rem;
      line-height: 1.75;
      color: var(--text-secondary);
    }
    html.m2m-culture .cul-note-inline {
      margin: .55rem 0 0;
      font-size: .92rem;
      line-height: 1.6;
      color: var(--text-secondary);
    }
    html.m2m-culture .cul-deep {
      margin-top: 1.1rem;
      padding: .9rem 1rem;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--primary) 5%, var(--card-bg));
    }
    html.m2m-culture .cul-deep-h {
      margin: 0 0 .45rem;
      font-size: .78rem;
      letter-spacing: .06em;
      text-transform: none;
      color: var(--primary);
      font-weight: 800;
    }
    html.m2m-culture .cul-deep-p {
      margin: 0;
      font-size: .98rem;
      line-height: 1.75;
    }
    html.m2m-culture .cul-aside-nav,
    html.m2m-culture .cul-aside-meta,
    html.m2m-culture .cul-aside-ops {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 12px;
    }
    html.m2m-culture .cul-aside-jumps {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }
    html.m2m-culture .cul-aside-jumps a {
      display: inline-block;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      text-decoration: none;
      color: var(--text);
      font-size: .8rem;
      font-weight: 650;
    }
    html.m2m-culture .cul-aside-meta p {
      margin: 0 0 6px;
      font-size: .82rem;
      line-height: 1.45;
    }


html.m2m-culture .cul-pack-points {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
}
html.m2m-culture .cul-pack-points h3 {
  margin: 0 0 8px;
  font-size: .82rem;
  font-weight: 800;
  color: var(--text-secondary);
}
html.m2m-culture .cul-pack-points p {
  margin: 0 0 8px;
  font-size: .86rem;
  line-height: 1.55;
}
html.m2m-culture .cul-pack-points p:last-child { margin-bottom: 0; }

/* culture right-rail title line: label left, 朗读本条 right-aligned (JA form) */
html.m2m-culture .cul-pack-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
}
html.m2m-culture .cul-pack-head h3 {
  margin: 0;
  font-size: .82rem;
  font-weight: 800;
  color: var(--text-secondary);
}
html.m2m-culture .cul-pack-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex: 0 0 auto;
}
html.m2m-culture .cul-pack-head #catPlay {
  margin-left: 0;
  flex: 0 0 auto;
}
html.m2m-culture .cul-pack-now { color: var(--primary); }
html.m2m-culture .cul-pack-hint {
  font-size: .75rem !important;
  color: var(--text-secondary) !important;
  opacity: .9;
}
html.m2m-culture .cul-pack-tag {
  display: inline-block;
  margin: 0 0 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: .72rem;
  font-weight: 700;
  color: var(--primary);
}
html.m2m-culture .cul-pack-list button {
  text-align: left;
  white-space: normal;
  line-height: 1.4;
  scroll-margin-top: 80px;
}

html.m2m-culture .cul-pack-body {
  margin: 0 0 8px;
  font-size: .86rem;
  line-height: 1.65;
}
html.m2m-culture .cul-pack-body > strong {
  display: block;
  margin-bottom: 6px;
  font-size: .78rem;
  color: var(--text-secondary);
}
html.m2m-culture .cul-pack-body-text {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  font-weight: 500;
  max-height: min(56vh, 460px);
  overflow: auto;
  line-height: 1.7;
}

html.m2m-culture .cul-pack-list button span:not(.cul-pack-tag) {
  display: block;
  font-size: .88rem;
  font-weight: 600;
}
html.m2m-culture .culture-aside { display: none !important; }

html.m2m-culture .cul-longform {
  max-height: none;
}
html.m2m-culture .cul-longform .cul-en,
html.m2m-culture .cul-longform .cul-zh-inline,
html.m2m-culture .cul-longform .cul-deep-p {
  margin: 0 0 0.85rem;
  font-size: 1.05rem;
  line-height: 1.85;
}
html.m2m-culture .cul-longform .cul-en:first-child {
  font-size: 1.2rem;
  font-weight: 600;
}
html.m2m-culture .cul-zh-wrap,
html.m2m-culture .cul-en-wrap {
  margin-top: 0.4rem;
}
html.m2m-culture .cul-end-hint {
  margin: 1.4rem 0 0.4rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--primary);
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.55;
}
html.m2m-culture .board {
  overflow: auto;
  max-height: calc(100vh - 140px);
}

/* === CULTURE LAYOUT LOCK: 左目录(#lessons) | 中正文(.board) | 右要点(#catPack) === */
html.m2m-culture .wrap {
  display: grid !important;
  grid-template-columns: minmax(7.5rem, 9.5rem) minmax(0, 1fr) minmax(13rem, 18rem) !important;
  grid-template-rows: auto !important;
  grid-template-areas: none !important; /* use explicit columns; avoid area+auto fights */
  gap: 14px !important;
  align-items: start !important;
}
/* MUST be column 1 — titles / 目录 */
html.m2m-culture .wrap > .lessons,
html.m2m-culture .wrap > #lessons {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: stretch !important;
  width: auto !important;
  max-width: none !important;
  order: 1 !important;
}
/* MUST be column 2 — body / 正文 */
html.m2m-culture .wrap > .board {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  order: 2 !important;
}
/* MUST be column 3 — points / 连播 */
html.m2m-culture .wrap > .cat-pack,
html.m2m-culture .wrap > #catPack {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: stretch !important;
  position: sticky !important;
  top: 72px;
  max-height: var(--lessons-max);
  overflow: auto;
  width: auto !important;
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  align-self: start;
  order: 3 !important;
}
/* never occupy a track */
html.m2m-culture .wrap > .culture-aside,
html.m2m-culture .wrap > #cultureAside {
  display: none !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}
@media (max-width: 1023.98px) {
  html.m2m-culture .wrap {
    grid-template-columns: minmax(6.5rem, 8.5rem) minmax(0, 1fr) minmax(12rem, 16rem) !important;
  }
  html.m2m-culture .wrap > .lessons,
  html.m2m-culture .wrap > #lessons { grid-column: 1 !important; grid-row: 1 !important; }
  html.m2m-culture .wrap > .board { grid-column: 2 !important; grid-row: 1 !important; }
  html.m2m-culture .wrap > .cat-pack,
  html.m2m-culture .wrap > #catPack { grid-column: 3 !important; grid-row: 1 !important; }
}
/* phone: still 左目录 / 中正文 / 右要点 as vertical stack in that order (not pack beside lessons) */
@media (max-width: 767.98px) {
  html.m2m-culture .wrap {
    grid-template-columns: 1fr !important;
  }
  html.m2m-culture .wrap > .lessons,
  html.m2m-culture .wrap > #lessons {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: static !important;
    max-height: min(32vh, 240px);
  }
  html.m2m-culture .wrap > .board {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  html.m2m-culture .wrap > .cat-pack,
  html.m2m-culture .wrap > #catPack {
    grid-column: 1 !important;
    grid-row: 3 !important;
    position: static !important;
    max-height: min(40vh, 320px);
  }
}
html.m2m-phone.m2m-culture .wrap {
  grid-template-columns: 1fr !important;
}
html.m2m-phone.m2m-culture .wrap > .lessons,
html.m2m-phone.m2m-culture .wrap > #lessons { grid-column: 1 !important; grid-row: 1 !important; }
html.m2m-phone.m2m-culture .wrap > .board { grid-column: 1 !important; grid-row: 2 !important; }
html.m2m-phone.m2m-culture .wrap > .cat-pack,
html.m2m-phone.m2m-culture .wrap > #catPack { grid-column: 1 !important; grid-row: 3 !important; }



/* culture song lyrics */
html.m2m-culture .cul-song-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1.1rem 0 0.4rem;
}
html.m2m-culture .cul-song-bar .cul-deep-h { margin: 0; }
html.m2m-culture .cul-song-play {
  flex: 0 0 auto;
  border: 1px solid var(--line, #c9c2b4);
  background: var(--panel, #f7f3ea);
  color: inherit;
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  font: inherit;
}
html.m2m-culture .cul-song-play.on {
  background: #1f3b2c;
  color: #f5f0e6;
  border-color: #1f3b2c;
}
html.m2m-culture .cul-lyrics {
  white-space: pre-wrap;
  font: inherit;
  line-height: 1.7;
  margin: 0.4rem 0 0.8rem;
  padding: 0.85rem 1rem;
  background: rgba(0,0,0,0.03);
  border-radius: 10px;
  border: 1px solid var(--line, #ddd4c4);
}
html.m2m-culture .cul-lyrics-zh { margin-top: 0.6rem; }
html.m2m-culture .cul-end-hint { display: none !important; }


/* culture: board chrome from grammar/scenes must never show under culture article */
html.m2m-culture #zh,
html.m2m-culture #note,
html.m2m-culture #rel,
html.m2m-culture #quiz,
html.m2m-culture #dict,
html.m2m-culture #fb,
html.m2m-culture #ipa,
html.m2m-culture #contour,
html.m2m-culture #whoLab,
html.m2m-culture #due,
html.m2m-culture .ipa-block,
html.m2m-culture .rel,
html.m2m-culture .quiz,
html.m2m-culture .dict,
html.m2m-culture .fb,
html.m2m-culture .note,
html.m2m-culture .ui-line#zh,
html.m2m-culture .who-lab {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}


/* culture body Play: ordinary website-style control (▶ + label) */
html.m2m-culture #tts.cul-tts-play,
html.m2m-culture #tts.cul-tts-play.go,
html.m2m-culture #tts.cul-tts-text,
html.m2m-culture #tts.cul-tts-text.go {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 36px !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--primary) 70%, transparent) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
  cursor: pointer !important;
}
html.m2m-culture #tts.cul-tts-play.on,
html.m2m-culture #tts.cul-tts-text.on {
  background: color-mix(in srgb, var(--primary) 82%, #000) !important;
}
html.m2m-culture #tts.cul-tts-play .play-ring,
html.m2m-culture #tts.cul-tts-play .play-ico,
html.m2m-culture #tts.cul-tts-text .play-ring,
html.m2m-culture #tts.cul-tts-text .play-ico {
  display: none !important;
}
html.m2m-culture #tts.cul-tts-play::before,
html.m2m-culture #tts.cul-tts-play::after,
html.m2m-culture #tts.cul-tts-text::before,
html.m2m-culture #tts.cul-tts-text::after {
  content: none !important;
  display: none !important;
}
.cul-body-play {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.55rem;
  vertical-align: middle;
  border: 0;
  border-radius: 999px;
  padding: 4px 11px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
.cul-body-play.on {
  background: color-mix(in srgb, var(--primary) 82%, #000);
}
.cul-item-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
}
html.m2m-culture #autoRead,
html.m2m-culture #culAutoRead {
  display: none !important;
}


/* vocab headword + category list — layout by language (twoline EN/JP; inline EU) */
.chunks button.vocab-head {
  display: inline-flex !important;
  text-align: left;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.25;
  vertical-align: top;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
}
.chunks button.vocab-head.playing {
  border-color: var(--primary, #667eea);
  color: var(--primary, #667eea);
  outline: 2px solid var(--primary, #667eea);
  outline-offset: 1px;
}
/* default / EU inline: L2 + 中文 on one line */
.chunks button.vocab-head.vocab-head-inline {
  flex-direction: row;
  flex-wrap: wrap;
}
.chunks button.vocab-head.vocab-head-inline .vocab-head-en,
.chunks button.vocab-head.vocab-head-inline > span {
  display: inline !important;
  line-height: 1.25;
}
.chunks button.vocab-head.vocab-head-inline .vocab-head-zh,
.chunks button.vocab-head.vocab-head-inline > small {
  display: inline !important;
  margin-top: 0;
  font-size: .95rem !important;
  font-weight: 600;
  color: var(--text-secondary, #515154);
  line-height: 1.35;
}
.chunks button.vocab-head.vocab-head-inline .vocab-head-zh::before,
.chunks button.vocab-head.vocab-head-inline > small::before {
  content: "· ";
  color: var(--text-secondary, #515154);
  font-weight: 500;
}
/* EN/JP twoline: L2 on top, 中文 under */
.chunks button.vocab-head.vocab-head-twoline {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.chunks button.vocab-head.vocab-head-twoline .vocab-head-en,
.chunks button.vocab-head.vocab-head-twoline > span {
  display: block !important;
  line-height: 1.25;
}
.chunks button.vocab-head.vocab-head-twoline .vocab-head-zh,
.chunks button.vocab-head.vocab-head-twoline > small {
  display: block !important;
  margin-top: 0;
  font-size: .95rem !important;
  font-weight: 600;
  color: var(--text-secondary, #515154);
  line-height: 1.35;
}
.cat-pack button span { display: block !important; }
.cat-pack button small { display: block !important; margin-top: 2px; color: var(--text-secondary); font-size: .82rem; }

/* vocab example sentence under word chips */
.vocab-ex {
  flex: 0 0 100%;
  width: 100%;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #e5e7eb);
}
.vocab-ex-line {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text, #1d1d1f);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.45;
  padding: 4px 0;
  cursor: pointer;
}
.vocab-ex-line:hover { color: var(--primary, #667eea); }
.vocab-ex-zh {
  margin: 4px 0 0;
  color: var(--text-secondary, #515154);
  font-size: .92rem;
  line-height: 1.45;
}


/* vocab category word list under current word (same-category; layout by lang) */
.rel.vocab-cat { display: block; margin-top: 14px; }
.rel .vocab-cat-lab {
  margin: 0 0 8px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-secondary, #515154);
}
.rel .vocab-cat-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rel.vocab-cat button {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  vertical-align: top;
}
/* EU / default: inline L2 · 中文 */
.rel.vocab-cat.vocab-inline button,
.rel.vocab-cat:not(.vocab-twoline) button {
  flex-direction: row;
  flex-wrap: wrap;
}
.rel.vocab-cat.vocab-inline button > span,
.rel.vocab-cat:not(.vocab-twoline) button > span {
  display: inline;
  line-height: 1.25;
}
.rel.vocab-cat.vocab-inline button > small,
.rel.vocab-cat:not(.vocab-twoline) button > small {
  display: inline;
  margin-top: 0;
  color: var(--text-secondary);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.3;
}
/* EN/JP: two-line chips */
.rel.vocab-cat.vocab-twoline button {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.rel.vocab-cat.vocab-twoline button > span {
  display: block;
  line-height: 1.25;
}
.rel.vocab-cat.vocab-twoline button > small {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.3;
}
.rel.vocab-cat button[aria-current="true"] {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--bg));
}
.rel.vocab-cat button.playing {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--bg));
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* 本课单词表：正文下部·静态双行（九站统一）
   第一行 L2 原文 + 读音/重音/音调/词性/性数；第二行中文译文。
   长列表分栏 + 区内滚动，避免撑爆页面或挤掉后续内容。 */
.rel .vocab-list-lab {
  margin: 0 0 8px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-secondary, #515154);
}
.rel .vocab-list-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  max-height: min(42vh, 480px);
  overflow: auto;
  overscroll-behavior: contain;
}
.rel .vocab-list-row {
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--bg, #fff);
}
.rel .vocab-list-main {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 8px;
}
.rel .vocab-list-l2 {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text, #1d1d1f);
  overflow-wrap: anywhere;
}
.rel .vocab-list-read {
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-secondary, #515154);
  overflow-wrap: anywhere;
}
.rel .vocab-list-zh {
  margin: 2px 0 0;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--text-secondary, #515154);
  overflow-wrap: anywhere;
}
.rel .vocab-list-row.is-current {
  border-color: var(--primary, #667eea);
  background: color-mix(in srgb, var(--primary) 10%, var(--bg, #fff));
}
@media (max-width: 640px) {
  .rel .vocab-list-grid {
    grid-template-columns: minmax(0, 1fr);
    max-height: min(46vh, 400px);
  }
}
@media (max-height: 520px) {
  .rel .vocab-list-grid { max-height: 40vh; }
}


/* 换个说法 — under body (non-culture) */
.variants { margin: 12px 0 8px; }
.variants[hidden] { display: none !important; }
html.m2m-culture .variants { display: none !important; }
.variants h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 800; color: var(--text); }
.variant-list { display: flex; flex-direction: column; gap: 8px; }
.variant-list button {
  text-align: left; width: 100%;
  border: 1px solid var(--border); background: var(--card-bg-solid, var(--card)); color: var(--text);
  border-radius: 10px; padding: 10px 12px; cursor: pointer; font: inherit; line-height: 1.45;
  display: flex; flex-direction: column; gap: 4px;
}
.variant-list button:hover, .variant-list button:focus-visible {
  border-color: #4c1d95; background: color-mix(in srgb, #4c1d95 10%, var(--card-bg-solid, var(--card)));
}
.variant-list button.playing {
  border-color: #4c1d95; background: color-mix(in srgb, #4c1d95 18%, var(--card-bg-solid, var(--card)));
}
.variant-list .var-en, .variant-list .var-jp {
  font-size: 1.05rem; font-weight: 700; line-height: 1.45;
}
.variant-list .var-zh, .variant-list .var-gloss {
  font-size: .9rem; color: var(--text-secondary); line-height: 1.45;
}
.variant-list .var-zh:empty, .variant-list .var-gloss:empty { display: none; }


/* t129u: body always hide trunk note + distractor quiz (all langs/units) */
#note,
.note,
#quiz,
.board > .quiz,
.board .quiz#quiz {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* culture left rail click shield */
html.m2m-culture .wrap > .lessons,
html.m2m-culture .wrap > #lessons {
  position: sticky !important;
  top: 72px;
  z-index: 6 !important;
  isolation: isolate;
}
html.m2m-culture .wrap > .board {
  position: relative;
  z-index: 1;
  overflow-x: auto;
}

/* === t144u extras === */
#m2mRec.on, #m2mShadow.on, #m2mQuiz.on, #m2mStar.on { outline: 2px solid var(--ok, #b45309); }
#m2mRecPlay:disabled { opacity: .45; }
.quiz .quiz-q { margin: .4rem 0; font-weight: 600; }
.quiz .quiz-opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.quiz .quiz-opt { border: 1px solid var(--border,#ddd); border-radius: 10px; padding: .35rem .7rem; background: #fff; cursor: pointer; }
.quiz .quiz-opt.ok { border-color: #15803d; background: #ecfdf5; }
.quiz .quiz-opt.bad { border-color: #b91c1c; background: #fef2f2; }
.m2m-progress-panel { margin: 1rem 0; padding: 12px 14px; border: 1px solid var(--border,#e5e7eb); border-radius: 14px; }
.m2m-progress-panel h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.m2m-progress-panel table { width: 100%; border-collapse: collapse; font-size: 13px; }
.m2m-progress-panel th, .m2m-progress-panel td { text-align: left; padding: .35rem .4rem; border-bottom: 1px solid var(--border,#eee); }


/* register badges (口语/书面语/法律文书/古典) */
.var-reg {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 2px 8px;
  border-radius: 999px;
  margin: 0 8px 4px 0;
  vertical-align: middle;
  color: var(--reg-ink,#4c1d95);
  background: color-mix(in srgb, var(--reg-ink,#4c1d95) 12%, var(--card-bg-solid, var(--card)));
  border: 1px solid color-mix(in srgb, var(--reg-ink,#4c1d95) 28%, var(--border));
}
.var-reg-line { margin: 6px 0 8px; line-height: 1.3; }
.variant-list button .var-reg { display: block; margin: 0 0 4px; width: fit-content; }
.vocab-ex .var-reg-line { margin: 4px 0 0; }

.var-reg-when {
  font-size: .7rem;
  font-weight: 600;
  opacity: .78;
  color: color-mix(in srgb, #4c1d95 70%, var(--text));
  margin-left: 2px;
}


/* === t247 practicalization: kill 主干旁注/干扰项 shells; keep culture 3-col from LAYOUT LOCK === */
#note,
#quiz,
.note#note,
.quiz#quiz {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* culture secondary cats stay in header #units (left of board flow) */
html.m2m-culture .rail .units {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
html.m2m-culture .rail .units button[data-culture="1"] {
  font-weight: 700;
}


/* t255: SRS due-review chrome (lemma/ex/register) */
.srs-card{margin:8px 0 0;padding:8px 10px;border:1px solid var(--line,#e2e8f0);border-radius:12px;background:color-mix(in srgb, #fff 88%, #dbeafe);font-size:.86rem;line-height:1.45}
.srs-card[hidden]{display:none!important}
.srs-card-meta{color:#334155;font-weight:650;margin:0 0 4px}
.srs-reg{color:#9a3412}
.srs-card-ex{margin:0;color:#0f172a}
.srs-card-zh{margin:2px 0 0;color:#64748b}

/* ---- nav5: bottom bar at most 5 primary items; overflow in 更多 ---- */
.units button, .units a.units-global-link {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.units button .bi, .units a.units-global-link .bi { font-size: .92rem; line-height: 1; }
.units a.units-global-link {
  border: 1px dashed color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--text-secondary); border-radius: 999px; padding: 5px 12px;
  font-weight: 700; font-size: .86rem; text-decoration: none;
}
.units a.units-global-link:hover { color: var(--primary); border-color: var(--primary); }
.units a.units-global-link.is-global { margin-left: 2px; }
.units-more {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 6px;
  border: 1px dashed var(--border); background: transparent; color: var(--text-secondary);
  border-radius: 999px; padding: 5px 12px; cursor: pointer; font-weight: 700; font-size: .86rem;
}
.units-more:hover, .units-more[aria-expanded="true"] { color: var(--primary); border-color: var(--primary); }
.units-more .bi { font-size: .92rem; }

.m2m-more-fab {
  display: none; position: fixed; z-index: 1082;
  right: max(8px, env(safe-area-inset-right, 0px));
  bottom: calc(62px + env(safe-area-inset-bottom, 0px));
  align-items: center; gap: 4px; border: 1px solid var(--border);
  background: var(--card-bg-solid); color: var(--text-secondary);
  border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,.18); cursor: pointer;
}
.m2m-more-fab[hidden] { display: none !important; }
.m2m-more-fab .bi { font-size: 13px; }
@media (max-width: 767.98px) { .m2m-more-fab { display: inline-flex; } .units-more { display: none; } }
html.m2m-phone .m2m-more-fab { display: inline-flex; }
html.m2m-phone .units-more { display: none; }

.m2m-more-panel {
  position: fixed; z-index: 1200; left: 50%; transform: translateX(-50%);
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  width: min(22rem, calc(100vw - 16px)); max-width: calc(100vw - 16px); box-sizing: border-box;
  padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--card-bg-solid); color: var(--text);
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
}
.m2m-more-panel[hidden] { display: none !important; }
.m2m-more-h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; font-size: .9rem; }
.m2m-more-close { border: 1px solid var(--border); background: transparent; color: var(--text-secondary); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.m2m-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.m2m-more-grid button {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  border: 1px solid var(--border); background: transparent; color: var(--text);
  border-radius: 10px; padding: 8px 10px; font-size: .9rem; font-weight: 650; cursor: pointer;
}
.m2m-more-grid button:hover { border-color: var(--primary); color: var(--primary); }
.m2m-more-grid button .bi { font-size: 1rem; flex: 0 0 auto; }
.m2m-more-grid button span { min-width: 0; overflow-wrap: anywhere; }

/* ---- band coverage notice: keep the chosen band, offer direct switch ---- */
.band-notice {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 0 0 14px; padding: 10px 12px; box-sizing: border-box;
  border: 1px dashed color-mix(in srgb, var(--primary) 45%, var(--border));
  border-radius: 12px; background: color-mix(in srgb, var(--primary) 8%, var(--card-bg-solid));
}
.band-notice[hidden] { display: none !important; }
.band-notice-txt {
  margin: 0; flex: 1 1 14rem; min-width: 0; font-size: .9rem; line-height: 1.5;
  color: var(--text-secondary); overflow-wrap: anywhere;
}
.band-notice-txt b { color: var(--text); }
.band-notice-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.band-notice-acts button {
  border: 1px solid var(--primary); background: transparent; color: var(--primary);
  border-radius: 999px; padding: 4px 12px; font-size: .84rem; font-weight: 700; cursor: pointer;
}
.band-notice-acts button:hover { background: var(--primary); color: #fff; }

/* mobile tabbar: 5 slots, labels never ellipsized, global entries separated */
.m2m-tabbar > a.m2m-tab { text-decoration: none; color: inherit; }
.m2m-tabbar .m2m-tab-lab { text-overflow: clip; font-size: 10px; }
.m2m-tabbar .m2m-tab.is-global { border-left: 1px solid rgba(255,255,255,.14); }
html.light-theme .m2m-tabbar .m2m-tab.is-global,
html.light-theme[data-theme="light"] .m2m-tabbar .m2m-tab.is-global { border-left-color: rgba(15,23,42,.12); }
.m2m-tabbar .m2m-tab.is-global .m2m-tab-ico { color: #60a5fa; }
html.light-theme .m2m-tabbar .m2m-tab.is-global .m2m-tab-ico,
html.light-theme[data-theme="light"] .m2m-tabbar .m2m-tab.is-global .m2m-tab-ico { color: #2563eb; }

/* ---- account entry: desktop-only (>=1024px); phone/tablet keep the 5-slot tabbar ---- */
.m2m-acct { display: none; position: relative; flex: 0 0 auto; }
@media (min-width: 1024px) { .m2m-acct { display: block; } }
.m2m-acct-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; box-sizing: border-box;
  padding: 0 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card-bg-solid, var(--card-bg)); color: var(--text);
  font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.m2m-acct-btn:hover, .m2m-acct-btn:focus-visible { border-color: var(--primary); color: var(--primary); }
.m2m-acct-btn .bi { font-size: 1rem; }
.m2m-acct-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: .8rem; font-weight: 800;
}
.m2m-acct-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
.m2m-acct-caret { font-size: .7rem; opacity: .7; }
.m2m-acct-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 10rem; padding: 6px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--card-bg-solid, var(--card-bg)); box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.m2m-acct-menu[hidden] { display: none !important; }
.m2m-acct-menu a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 8px;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: .92rem;
}
.m2m-acct-menu a:hover, .m2m-acct-menu a:focus-visible {
  background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary);
}
.m2m-acct-menu a .bi { font-size: 1rem; }

/* 文化子目录（仅 classroom.js 的 10 个 LE 页；g-science 有自己的 #tn-cul-menu 样式，
   故一律用 html.m2m-culmenu-js 限定，避免影响 nihongo）：
   桌面/车机 = pills 下一整行，flex-wrap 换行、不靠横滑；手机收起（类别走 #lessons 侧栏）。 */
html.m2m-culmenu-js.m2m-culture .chrome .top { flex-wrap: wrap; }
html.m2m-culmenu-js.m2m-culture .chrome .top .pills { flex-wrap: wrap; overflow-x: visible; }
html.m2m-culmenu-js .cul-menu { display: none; order: 9; flex: 1 0 100%; flex-wrap: wrap; gap: 6px; padding: 2px 0 4px; min-width: 0; }
html.m2m-culmenu-js .cul-menu.is-open { display: flex; }
html.m2m-culmenu-js .cul-menu button {
  flex: 0 0 auto; border: 1px solid var(--border); background: transparent;
  color: var(--text-secondary); border-radius: 999px; padding: 5px 12px;
  cursor: pointer; font-weight: 700; font-size: .86rem; white-space: nowrap;
}
html.m2m-culmenu-js .cul-menu button[aria-current="true"] { border-color: var(--primary); color: #fff; background: var(--primary); }
html.m2m-culmenu-js.m2m-phone .cul-menu, html.m2m-culmenu-js.m2m-compact .cul-menu { display: none !important; }
/* 深色主题：主色只做底色时保持品牌蓝，作为文字时切到亮蓝 ink，避免深字压深底 */
html.dark .rate-bar button[aria-current="true"],
html.dark .chunks button.is-weak,
html.dark .chunks button.is-stress { color: #60a5fa !important; }
html.light-theme .rate-bar button[aria-current="true"],
html.light-theme .chunks button.is-weak,
html.light-theme .chunks button.is-stress { color: #1d4ed8 !important; }