:root{
  --nav-pop-overshoot:4; /* edge/restore spring bounce overshoot in % (tune via ?navpop= or console) */
  --bg:#171006; --bg2:#221a0b; --card:rgba(255,255,255,0.04); --card-h:rgba(255,255,255,0.08);
  --border:rgba(212,175,55,0.15); --border-a:rgba(212,175,55,0.35);
  --text:#f0f0f5; --text-d:#9a9aa5; --text-m:#6a6a75;
  --gold:#d4af37; --gold2:#f5d76e; --red:#e63946; --green:#06d6a0;
  --shadow:0 8px 32px rgba(0,0,0,0.4);
  --r:12px; --r-lg:20px;
  --rating-fade-dur:0.18s;  /* rating panel fade/slide duration */
  --rating-hide-delay:0.35s; /* rating panel hide delay after mouse leaves — tune here */
}
:root{
  --chat-bot:rgba(255,255,255,0.05); --chat-bot-border:rgba(255,255,255,0.08); --chat-bot-color:#f0f0f5;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h, 74px) + 8px)}
body{
  background:linear-gradient(180deg,#1c1407 0%,#271d0b 35%,#171006 100%); color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','微软雅黑',Roboto,'Helvetica Neue',Arial,sans-serif;
  line-height:1.6; min-height:100vh; overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
body::before{
  content:''; position:fixed; inset:0; z-index:-1;
  background:radial-gradient(ellipse at 20% 0%,rgba(212,175,55,0.14) 0%,transparent 50%),
             radial-gradient(ellipse at 80% 100%,rgba(245,215,110,0.07) 0%,transparent 50%),
             linear-gradient(180deg,rgba(12,8,1,0.72) 0%,rgba(16,10,2,0.85) 100%),
             url('../images/bg_theme_warm2.jpg') center/cover no-repeat fixed;
  pointer-events:none;
}

/* ===== THEME FADE: tint wash that crossfades on theme switch =====
   The image/gradient layers can't animate; this fixed overlay's
   opacity transitions instead, so the background appears to fade
   smoothly between themes. Dark = transparent wash, light = warm
   light wash, high-contrast light = stronger white wash. */
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:#0a0601; opacity:0; transition:opacity .5s ease;
}
:root[data-theme="light"] body::after{
  background:#f6f1e7; opacity:.4;
}
/* ===== THEME FADE: universal transition while switching =====
   theme.js adds html.theme-switching right before the data-theme
   attribute changes and removes it after ~500ms, so theme-driven
   colors/borders/backgrounds interpolate instead of snapping.
   The class is temporary, so everyday hover/active transitions
   keep their own timings the rest of the time. */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after{
  transition: background-color .5s ease, color .5s ease,
              border-color .5s ease, box-shadow .5s ease,
              fill .5s ease, stroke .5s ease !important;
}
html.theme-switching body::after{transition:opacity .5s ease !important}
@media (prefers-reduced-motion: reduce){
  html.theme-switching,
  html.theme-switching *,
  html.theme-switching *::before,
  html.theme-switching *::after{
    transition:none !important;
  }
}
:root[data-theme="light"][data-hc="on"] body::after{
  background:#ffffff; opacity:.62;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ===== NAV ===== */
/* iOS-style frosted glass: translucent tint + backdrop blur + saturation.
   Depth-adaptive: nav-hide.js drives --nav-glass-alpha / --nav-glass-blur /
   --nav-glass-sat on the .nav element from scroll depth — airy & see-through
   at the top of the page, heavy frost after scrolling (address-bar effect).
   --nav-glass-base stays theme-owned in CSS, so JS never needs theme logic. */
:root{
  --nav-glass-blur:22px; --nav-glass-sat:170%;
  --nav-glass-tint:rgba(16,12,7,0.55);
  --nav-glass-base:16,12,7;   /* rgb triplet (no alpha) — theme-owned */
  --nav-glass-alpha:0.55;     /* tint alpha 0..1 — JS-driven with depth */
  /* film-grain layer: SVG fractal noise over the frosted blur. Crisp on top
     of the backdrop (backdrop-filter never touches the element's own layers),
     so large blurred panes read as tactile material instead of flat glass. */
  --nav-noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --nav-noise-opacity:0.5;    /* dark theme grain strength */
  --nav-noise-blend:soft-light;
}
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(var(--nav-glass-base), var(--nav-glass-alpha));
  -webkit-backdrop-filter:blur(var(--nav-glass-blur)) saturate(var(--nav-glass-sat));
  backdrop-filter:blur(var(--nav-glass-blur)) saturate(var(--nav-glass-sat));
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 32px rgba(0,0,0,0.18);
}
/* film grain sits above the glass tint but below the nav content: the nav's
   own stacking context (sticky + z-index) keeps the negative-z child inside. */
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--nav-noise);
  background-size:140px 140px;
  opacity:var(--nav-noise-opacity);
  mix-blend-mode:var(--nav-noise-blend);
}
/* while hidden the glass fades out so the page underneath reads clean */
.nav.nav-hidden{
  transform:translateY(-102%);
  opacity:.35;
  -webkit-backdrop-filter:blur(4px) saturate(100%);
  backdrop-filter:blur(4px) saturate(100%);
  background:var(--nav-glass-tint);
  box-shadow:none;
}
/* light theme: warm paper glass, dark ink stays readable via --text vars */
:root[data-theme="light"]{
  --nav-glass-tint:rgba(250,246,236,0.62);
  --nav-glass-base:250,246,236;
  --nav-noise-opacity:0.32;   /* lighter grain so the warm paper stays clean */
}
:root[data-theme="light"] .nav{
  box-shadow:0 1px 0 rgba(255,255,255,0.7) inset, 0 8px 32px rgba(120,90,20,0.12);
}
/* high-contrast light: more opaque so borders/text stay crisp */
:root[data-theme="light"][data-hc="on"]{
  --nav-glass-tint:rgba(250,246,236,0.88);
  --nav-glass-alpha:0.88;
}
/* fallback: no backdrop-filter support -> near-opaque solid */
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .nav{background:rgba(16,12,7,0.96)}
  :root[data-theme="light"] .nav{background:rgba(250,246,236,0.97)}
}
.nav-inner{max-width:1280px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-0.02em;margin-right:auto}
.logo-badge{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--gold),var(--red));
  display:grid;place-items:center;font-size:20px;color:#1a1a1a;font-weight:900;
}
.logo-text{background:linear-gradient(135deg,var(--gold2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap}
.nav-links a{padding:8px 12px;border-radius:8px;color:var(--text-d);font-size:13px;font-weight:500;transition:all 0.2s}
.nav-links a:hover{color:var(--text);background:var(--card-h)}
.nav-cta{padding:10px 20px !important;background:linear-gradient(135deg,var(--gold),var(--gold2)) !important;color:#1a1a1a !important;font-weight:700 !important}
.nav-cta.nav-bold{font-weight:900 !important;text-shadow:0 0 1px rgba(0,0,0,.25),0 1px 1px rgba(255,255,255,.35);letter-spacing:.02em;background:linear-gradient(135deg,var(--gold),var(--gold2)) !important}
/* language select + theme buttons live in one row alongside the menu */
.nav-tools{display:flex;align-items:center;gap:6px;margin-left:8px;flex-shrink:0}
.nav-tools #langSelect{
  background:var(--card);color:var(--text);border:1px solid var(--border-a);
  border-radius:8px;padding:7px 8px;font-size:13px;cursor:pointer;height:38px;
}
.nav-tools #langSelect:hover{border-color:var(--gold2)}
.nav-tools button{
  display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  border:1px solid var(--border-a);background:var(--card);color:var(--text);
  cursor:pointer;font-size:15px;line-height:1;transition:all .2s;flex-shrink:0;
}
.nav-tools button:hover{background:var(--card-h)}

/* ===== LANGUAGE PICKER =====
   i18n.js renders a button + panel on top of the native <select id="langSelect">.
   The select stays in the DOM (hidden) as the single behavioural source of
   truth: picking an option sets its value and dispatches "change", so the
   existing navigate/remember logic -- and its tests -- are untouched. */
.lang-picker{position:relative;flex-shrink:0}
.lang-picker #langSelect{display:none}
.lang-btn{
  display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 10px;
  border-radius:10px;border:1px solid var(--border-a);background:var(--card);color:var(--text);
  cursor:pointer;font:inherit;font-size:13px;font-weight:600;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.lang-btn:hover{background:var(--card-h);border-color:var(--gold2)}
.lang-picker.open .lang-btn{border-color:var(--gold2);box-shadow:0 0 0 3px rgba(212,175,55,.18)}
.lang-code{color:var(--gold2);font-weight:800;font-size:12px;letter-spacing:.04em}
.lang-caret{
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--text-d);transition:transform .2s;
}
.lang-picker.open .lang-caret{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:120;min-width:200px;
  max-height:min(70vh,420px);overflow:auto;padding:6px;
  background:rgba(var(--nav-glass-base),0.96);
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  border:1px solid var(--border-a);border-radius:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.lang-menu[hidden]{display:none}
.lang-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;
  border:0;border-radius:8px;background:transparent;color:var(--text);
  font:inherit;font-size:13px;text-align:start;cursor:pointer;
}
.lang-item:hover,.lang-item:focus-visible{background:var(--card-h);outline:none}
.nav-links .lang-menu .lang-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;
  border-radius:8px;color:var(--text);font-size:13.5px;font-weight:600;
}
.nav-links .lang-menu .lang-item:hover{color:var(--text);background:var(--card-h)}
/* the current language: gold fill, dark text, visible tick */
.lang-item[aria-selected="true"]{
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1a1a;font-weight:700;
}
.nav-links .lang-menu .lang-item[aria-selected="true"]{
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1a1a;font-weight:700;
}
.lang-item[aria-selected="true"]:hover{filter:brightness(1.06)}
.lang-name{flex:1;white-space:nowrap}
.lang-check{opacity:0;font-weight:900}
.lang-item[aria-selected="true"] .lang-check{opacity:1}
/* Both popups are anchored with physical `right:0`, which in an RTL document
   anchors their RIGHT edge and lets them grow leftward -- off the viewport
   (measured: .nav-chapters-drop reached x=-38 in Hebrew). Mirroring the
   anchor keeps them on screen. */
html[dir="rtl"] .lang-menu{left:0;right:auto}
html[dir="rtl"] .nav-chapters-drop{left:0;right:auto}

/* Two more physical-direction bugs of the same kind, but these encode *state*
   rather than just an anchor, so getting them wrong is visible:

   * the mobile side drawers (#tocDrawer / #navDrawer) are anchored `right:0`
     and hidden with `translateX(105%)`. Mirroring only the anchor would leave
     them sliding in from the right — the side the RTL reader's eye does not
     start from. The hidden transform has to be mirrored too (-105%), which is
     also why this cannot be a one-line `left:0;right:auto`.
   * the "expand all tables by default" switch knob is `left:2px` and moves
     `translateX(13px)` when on. In RTL that reads backwards: "on" would slide
     the knob toward the off side. Both the resting side and the travel flip.

   Corner decorations (.tbl-copy, SUMMARY badges, .ch-fav …) are deliberately
   left alone: a top-right action chip is a normal choice in RTL, not a defect. */
@media(max-width:640px){
  html[dir="rtl"] #tocDrawer,
  html[dir="rtl"] #navDrawer{
    left:0;right:auto;
    border-left:none;border-right:1px solid var(--border-a);
    box-shadow:12px 0 40px rgba(0,0,0,0.5);
    transform:translateX(-105%);
  }
  html[dir="rtl"] #tocDrawer.open,
  html[dir="rtl"] #navDrawer.open{transform:translateX(0)}
}
html[dir="rtl"] .m2m-expand-default-thumb{left:auto;right:2px}
html[dir="rtl"] .m2m-expand-default.on .m2m-expand-default-thumb{transform:translateX(-13px)}

/* --- flag chips: drawn with gradients/SVG, NOT emoji. Windows has no flag
   glyphs in Segoe UI Emoji, so 🇯🇵 would render as the letters "JP". --- */
.lang-flag{
  display:block;width:18px;height:13px;border-radius:2.5px;flex-shrink:0;
  background-size:100% 100%;background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 0 0 1px rgba(0,0,0,.4);
}
.lang-flag[data-lang="de"]{background-image:linear-gradient(to bottom,#000 0 33.34%,#dd0000 33.34% 66.67%,#ffce00 66.67% 100%)}
.lang-flag[data-lang="fr"]{background-image:linear-gradient(to right,#002395 0 33.34%,#fff 33.34% 66.67%,#ed2939 66.67% 100%)}
.lang-flag[data-lang="it"]{background-image:linear-gradient(to right,#008c45 0 33.34%,#f4f5f0 33.34% 66.67%,#cd212a 66.67% 100%)}
.lang-flag[data-lang="nl"]{background-image:linear-gradient(to bottom,#ae1c28 0 33.34%,#fff 33.34% 66.67%,#21468b 66.67% 100%)}
.lang-flag[data-lang="ru"]{background-image:linear-gradient(to bottom,#fff 0 33.34%,#0039a6 33.34% 66.67%,#d52b1e 66.67% 100%)}
.lang-flag[data-lang="fa"]{background-image:linear-gradient(to bottom,#239f40 0 33.34%,#fff 33.34% 66.67%,#da0000 66.67% 100%)}
.lang-flag[data-lang="es"]{background-image:linear-gradient(to bottom,#aa151b 0 25%,#f1bf00 25% 75%,#aa151b 75% 100%)}
.lang-flag[data-lang="ja"]{background-image:radial-gradient(circle at 50% 50%,#bc002d 0 30%,#fff 30% 100%)}
.lang-flag[data-lang="pt"]{background-image:radial-gradient(circle at 40% 50%,#ffd700 0 13%,transparent 13%),linear-gradient(to right,#046a38 0 40%,#da291c 40% 100%)}
.lang-flag[data-lang="en"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%23fff'/%3E%3Cg fill='%23b22234'%3E%3Crect width='20' height='1.08'/%3E%3Crect y='2.15' width='20' height='1.08'/%3E%3Crect y='4.31' width='20' height='1.08'/%3E%3Crect y='6.46' width='20' height='1.08'/%3E%3Crect y='8.62' width='20' height='1.08'/%3E%3Crect y='10.77' width='20' height='1.08'/%3E%3Crect y='12.92' width='20' height='1.08'/%3E%3C/g%3E%3Crect width='8' height='7.54' fill='%233c3b6e'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='1.6' cy='1.5' r='.5'/%3E%3Ccircle cx='4' cy='1.5' r='.5'/%3E%3Ccircle cx='6.4' cy='1.5' r='.5'/%3E%3Ccircle cx='2.8' cy='3.1' r='.5'/%3E%3Ccircle cx='5.2' cy='3.1' r='.5'/%3E%3Ccircle cx='1.6' cy='4.7' r='.5'/%3E%3Ccircle cx='4' cy='4.7' r='.5'/%3E%3Ccircle cx='6.4' cy='4.7' r='.5'/%3E%3Ccircle cx='2.8' cy='6.3' r='.5'/%3E%3Ccircle cx='5.2' cy='6.3' r='.5'/%3E%3C/g%3E%3C/svg%3E")}
.lang-flag[data-lang="zh"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%23de2910'/%3E%3Cg fill='%23ffde00'%3E%3Cpolygon points='4,2.6 4.5,4.1 6.1,4.1 4.8,5 5.2,6.5 4,5.6 2.8,6.5 3.2,5 1.9,4.1 3.5,4.1'/%3E%3Ccircle cx='7.2' cy='1.9' r='.6'/%3E%3Ccircle cx='8.5' cy='3.2' r='.6'/%3E%3Ccircle cx='8.5' cy='4.9' r='.6'/%3E%3Ccircle cx='7.2' cy='6.2' r='.6'/%3E%3C/g%3E%3C/svg%3E")}
.lang-flag[data-lang="ko"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%23fff'/%3E%3Ccircle cx='10' cy='7' r='3.4' fill='%23cd2e3a'/%3E%3Cpath d='M10 3.6a3.4 3.4 0 0 0 0 6.8 1.7 1.7 0 0 1 0-3.4 1.7 1.7 0 0 0 0-3.4z' fill='%230046a0'/%3E%3Cg fill='%23000'%3E%3Crect x='2' y='2.4' width='3' height='.7'/%3E%3Crect x='2' y='3.7' width='3' height='.7'/%3E%3Crect x='15' y='2.4' width='3' height='.7'/%3E%3Crect x='15' y='3.7' width='3' height='.7'/%3E%3Crect x='2' y='9.6' width='3' height='.7'/%3E%3Crect x='2' y='10.9' width='3' height='.7'/%3E%3Crect x='15' y='9.6' width='3' height='.7'/%3E%3Crect x='15' y='10.9' width='3' height='.7'/%3E%3C/g%3E%3C/svg%3E")}
.lang-flag[data-lang="tr"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%23e30a17'/%3E%3Ccircle cx='7.6' cy='7' r='3' fill='%23fff'/%3E%3Ccircle cx='8.9' cy='7' r='2.4' fill='%23e30a17'/%3E%3Cpolygon fill='%23fff' points='12.4,7 11.35,7.76 11.75,6.54 10.76,5.79 12.03,5.79 12.4,4.58 12.77,5.79 14.04,5.79 13.05,6.54 13.45,7.76'/%3E%3C/svg%3E")}
.lang-flag[data-lang="he"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%23fff'/%3E%3Crect y='1.7' width='20' height='1.5' fill='%230038b8'/%3E%3Crect y='10.8' width='20' height='1.5' fill='%230038b8'/%3E%3Cg fill='none' stroke='%230038b8' stroke-width='.75'%3E%3Cpath d='M10 4.3l2.4 4.2H7.6z'/%3E%3Cpath d='M10 9.7l-2.4-4.2h4.8z'/%3E%3C/g%3E%3C/svg%3E")}
.lang-flag[data-lang="ar"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%2300663a'/%3E%3Cg fill='%23fff'%3E%3Crect x='3.2' y='4.2' width='13.6' height='1.1' rx='.55'/%3E%3Crect x='4.2' y='6.2' width='11.6' height='.9' rx='.45'/%3E%3Crect x='3.4' y='9.3' width='10.4' height='.9' rx='.45'/%3E%3Crect x='3.2' y='10.9' width='2.6' height='.8' rx='.4'/%3E%3C/g%3E%3C/svg%3E")}

/* ===== TESTIMONIALS ===== */
.testimonial{padding:22px;gap:10px}
.t-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.t-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.t-name{font-size:15px;font-weight:700;color:var(--text)}
.t-meta{font-size:12px;color:var(--text-m)}
.testimonial p{font-size:14px;color:var(--text-d);line-height:1.6;margin:6px 0}
.t-rating{color:var(--gold2);font-size:14px;letter-spacing:1px}
/* --- homepage social-proof section (hero -> proof -> courses) --- */
.hero .hero-what{
  text-align:start;max-width:780px;margin:0 auto 24px;padding:12px 18px;
  border:1px solid rgba(212,175,55,0.4);border-radius:12px;
  background:rgba(0,0,0,0.28);font-size:clamp(14px,1.9vw,16px);line-height:1.7;
}
.proof-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.proof-stories{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:26px}
.t-avatar.t-mono{
  display:grid;place-items:center;flex:0 0 48px;line-height:1;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#1a1a1a;font-weight:800;font-size:20px;
}
.t-proof{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 2px}.t-proof span{padding:3px 7px;border:1px solid var(--border-a);border-radius:999px;color:var(--text-m);font-size:10px;line-height:1.2}

/* ===== RATING SUMMARY (hover / focus detail panel) ===== */
.rating-summary{position:relative}
.rating-summary .rs-cue{color:var(--text-m);cursor:help;margin-left:2px}
.rating-detail{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-4px);width:min(92vw,400px);background:var(--card-h);border:1px solid var(--border-a);border-radius:12px;padding:14px 16px;box-shadow:0 12px 32px rgba(0,0,0,.45);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--rating-fade-dur) ease var(--rating-hide-delay),transform var(--rating-fade-dur) ease var(--rating-hide-delay),visibility var(--rating-fade-dur) ease var(--rating-hide-delay);z-index:60}
.rating-summary:hover .rating-detail,.rating-summary:focus-within .rating-detail{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-delay:0s}
.rating-detail h4{margin:0 0 10px;font-size:13px;color:var(--gold2);font-weight:800;letter-spacing:.4px}
.rd-row{display:flex;align-items:center;gap:8px;font-size:12px;margin:4px 0;color:var(--text-d)}
.rd-label{width:66px;flex:none}
.rd-bar{flex:1;height:6px;background:var(--border-a);border-radius:99px;overflow:hidden}
.rd-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2))}
.rd-num{width:56px;flex:none;text-align:right;color:var(--text-m);font-variant-numeric:tabular-nums}
.rd-foot{margin:10px 0 0;padding-top:8px;border-top:1px solid var(--border);font-size:11px;color:var(--text-m)}

/* ===== CHAPTER RESOURCES ===== */
.resource-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:24px 0 30px}.resource-card{overflow:hidden;background:var(--card);border:1px solid var(--border-a);border-radius:var(--r-lg);box-shadow:0 8px 24px rgba(0,0,0,.16)}.resource-card:not(.resource-figure){padding:18px}.resource-figure{margin:0}.resource-figure img{width:100%;height:230px;display:block;object-fit:cover}.resource-figure figcaption{padding:10px 14px;color:var(--text-d);font-size:12px;line-height:1.5}.resource-figure a,.source-link{color:var(--gold2)}.resource-label{font-size:11px;letter-spacing:.12em;color:var(--gold2);font-weight:800;margin-bottom:8px}.video-frame{aspect-ratio:16/9;background:#050507;border-radius:10px;overflow:hidden;margin:12px 0}.video-frame iframe{width:100%;height:100%;border:0}.source-link{font-size:13px}.source-note{margin:20px 0;padding:16px 18px;border-left:3px solid var(--gold);border-radius:0 var(--r) var(--r) 0;background:rgba(212,175,55,.07);color:var(--text-d);font-size:13px;line-height:1.7}.source-note a{color:var(--gold2);margin-left:6px;white-space:nowrap}
.auth-tabs{display:flex;gap:8px;margin:2px 0 8px}.auth-tab{flex:1;padding:9px 12px;border:1px solid var(--border-a);border-radius:8px;background:transparent;color:var(--text-d);cursor:pointer;font-family:inherit}.auth-tab.active{background:rgba(212,175,55,.16);border-color:var(--gold);color:var(--gold2)}.auth-label{display:block;margin:10px 0 5px;color:var(--text-d);font-size:12px}.auth-box input{width:100%;box-sizing:border-box}.auth-error{min-height:20px;margin:8px 0;color:#ff8f8f;font-size:12px;line-height:1.4}.auth-forgot{display:block;width:100%;margin:8px 0 2px;padding:6px;border:0;background:transparent;color:var(--text-m);font-size:11px;cursor:pointer;text-decoration:underline}.auth-footer{display:flex;justify-content:space-between;gap:10px;align-items:center}.auth-small{font-size:11px!important;color:var(--text-m)!important;margin:4px 0 0}

/* ===== LEAD MAGNET ===== */
.lead-box{
  background:linear-gradient(135deg,rgba(212,175,55,0.08),rgba(18,18,26,0.9));
  border:2px dashed var(--gold);border-radius:var(--r-lg);
  padding:28px 24px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:10px;
}
.lead-icon{font-size:40px}
.lead-title{font-size:clamp(20px,3vw,24px);font-weight:800;color:var(--gold2)}
.lead-sub{color:var(--text-d);font-size:14px;max-width:520px;line-height:1.6}
.lead-form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px;width:100%;max-width:520px}
.lead-form input{
  flex:1;min-width:200px;padding:12px 16px;border-radius:var(--r);
  border:1px solid var(--border-a);background:var(--card);color:var(--text);
  font-size:14px;font-family:inherit;
}
.lead-form input:focus{outline:none;border-color:var(--gold)}
.lead-note{font-size:12px;color:var(--text-m);margin-top:4px;line-height:1.5}

/* ===== HERO ===== */
.hero{max-width:1280px;margin:24px auto;padding:100px 24px 80px;text-align:center;min-height:520px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;background-color:var(--card);background-repeat:no-repeat;background-size:cover;background-position:center;border-radius:16px;overflow:hidden;border:1px solid var(--border-a);box-shadow:0 8px 32px rgba(0,0,0,0.18);filter:brightness(0.95)}
.hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,0.15);z-index:0}
.hero > *{position:relative;z-index:1}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 18px;border-radius:999px;
  background:rgba(255,255,255,0.95);border:1px solid var(--border-a);
  font-size:13px;color:var(--gold2);font-weight:600;margin-bottom:24px;
}
.hero h1{
  font-size:clamp(34px,5.5vw,56px); font-weight:900; line-height:1.15; letter-spacing:-0.03em;
  margin-bottom:18px; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,0.6);
}
.hero h1 .accent{color:var(--gold2);text-shadow:0 2px 14px rgba(0,0,0,0.85),0 1px 3px rgba(0,0,0,0.9)}
.hero p{font-size:clamp(15px,2.2vw,18px);color:rgba(255,255,255,0.92);max-width:720px;margin:0 auto 28px;text-shadow:0 2px 8px rgba(0,0,0,0.6)}
/* --- hero body structured copy (zh highlights/list) --- */
.hero .hl-lead{color:var(--gold2);font-weight:700}
.hero .hl-gold{color:var(--gold2);font-weight:700}
.hero .hl-point{color:var(--text);font-weight:600}
/* --- demoted pain hook: the old headline, now a quiet line above the value copy --- */
.hero .hero-pain{display:block;margin:0 0 14px;color:rgba(255,255,255,0.72);font-style:italic;font-weight:600;font-size:clamp(14px,2vw,16px)}
.hero .hl-cta{color:var(--gold2);font-weight:900;letter-spacing:.04em;font-size:clamp(16px,2.4vw,20px)}

/* ===== QUIET-LUXURY — copy-value cards (no photos) ===== */
#gallery .gallery-story{max-width:none;width:100%;box-sizing:border-box;margin:8px auto 22px;padding:24px 26px;font-size:16.5px;line-height:1.85;color:var(--text);font-weight:500;background:linear-gradient(135deg,rgba(212,175,55,0.06),rgba(18,18,26,0.4));border:1px solid rgba(212,175,55,0.35);border-radius:16px}
#gallery .gallery-story p{max-width:920px;margin:0 auto}
.gallery{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:16px;
  align-items:stretch;
}
.gallery .gl-card{
  margin:0;border-radius:16px;padding:26px 24px 28px;
  background:linear-gradient(160deg,var(--card),rgba(212,175,55,.06));
  border:1px solid rgba(212,175,55,.30);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
  display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;
}
.gallery .gl-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#d4af37,#f5d76e);opacity:.85;
}
.gallery .gl-card:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(0,0,0,.38);border-color:#d4af37}
.gallery .gl-num{
  color:#d4af37;font-family:Georgia,"Times New Roman",serif;
  font-size:13px;letter-spacing:.18em;font-weight:700;
}
.gallery .gl-cap{font-size:21px;font-weight:800;color:var(--text);letter-spacing:.01em;line-height:1.35;margin:0}
.gallery .gl-en{font-size:14px;color:var(--text-d);line-height:1.75;letter-spacing:.01em}
@media(max-width:900px){.gallery{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.gallery{grid-template-columns:1fr}}
/* --- hard-sell unlock strip --- */
.gl-unlock{
  margin-top:34px;border-radius:18px;padding:34px 30px 32px;text-align:center;
  background:linear-gradient(160deg,rgba(212,175,55,.14),rgba(230,57,70,.08));
  border:1px solid rgba(212,175,55,.45);position:relative;overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,.30);
}
.gl-unlock::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#e63946,#d4af37);
}
.gl-unlock-badge{
  display:inline-block;padding:6px 16px;border-radius:999px;margin-bottom:16px;
  background:linear-gradient(90deg,var(--gold),var(--gold2));color:#1a1a1a;
  font-size:12px;font-weight:800;letter-spacing:.06em;
}
.gl-unlock-title{
  font-size:clamp(20px,3vw,26px);font-weight:800;color:var(--text);
  margin:0 auto 12px;max-width:640px;line-height:1.4;
}
.gl-unlock-body{font-size:15px;color:var(--text-d);line-height:1.8;max-width:680px;margin:0 auto 22px}
.gl-unlock-body strong{color:#d4af37}
.btn-cta-gold{
  display:inline-block;padding:15px 36px;border-radius:999px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1a1a;
  font-weight:800;font-size:16px;cursor:pointer;box-shadow:0 10px 28px rgba(212,175,55,.35);
  transition:transform .2s ease,box-shadow .2s ease;
}
.btn-cta-gold:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(212,175,55,.5)}
.gl-unlock-small{font-size:12px;color:var(--text-m);margin-top:16px;line-height:1.6}
.promote-hero-unlock .gl-unlock{margin-top:0}
/* --- invite-20-unlock-VIP panel --- */
.invite-panel{
  max-width:640px;margin:26px auto 0;text-align:start;
  background:rgba(0,0,0,.22);border:1px solid rgba(212,175,55,.35);
  border-radius:14px;padding:22px 24px;
}
.invite-step-label{font-size:13px;color:var(--text-d);margin:0 0 10px;font-weight:600}
.invite-step-label:not(:first-child){margin-top:18px}
.invite-link-row{display:flex;gap:10px;align-items:center}
.invite-link-row input{
  flex:1;min-width:0;padding:11px 14px;border-radius:10px;
  border:1px solid rgba(212,175,55,.5);background:rgba(0,0,0,.35);
  color:var(--text);font-size:13px;font-family:inherit;
}
.invite-link-row .btn-cta-gold{padding:11px 22px;font-size:14px;white-space:nowrap}
.invite-progress{margin-top:14px}
.invite-progress-track{
  height:12px;border-radius:999px;overflow:hidden;position:relative;
  background:rgba(0,0,0,.4);border:1px solid rgba(212,175,55,.35);
}
.invite-progress-fill{
  display:block;height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  transition:width .5s ease;
}
.invite-progress-text{
  margin:8px 0 0;font-size:14px;font-weight:800;color:var(--gold2);text-align:center;
}
.invite-status{font-size:13px;color:var(--text-m);margin:8px 0 0;text-align:center;line-height:1.6}
.invite-unlocked{margin-top:16px;text-align:center;padding-top:14px;border-top:1px dashed rgba(212,175,55,.4)}
.invite-unlocked-title{font-size:20px;font-weight:800;color:var(--gold2);margin:0 0 6px}
.invite-code-label{font-size:13px;color:var(--text-d);margin:0 0 6px}
.invite-code{
  display:inline-block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;
  background:rgba(212,175,55,.12);border:1px dashed rgba(212,175,55,.6);color:var(--gold2);
  padding:8px 16px;border-radius:8px;margin:0 0 12px;letter-spacing:.04em;
}
.invite-unlocked .btn{margin-top:4px}
@media(max-width:560px){
  .invite-link-row{flex-direction:column;align-items:stretch}
  .invite-link-row .btn-cta-gold{text-align:center}
}

/* ===== GRID ===== */
.section{max-width:1280px;margin:0 auto;padding:40px 24px;text-align:start}@media (min-width:1400px){.section{padding:40px 48px}}
.section-title{font-size:clamp(22px,3vw,28px);font-weight:800;margin-bottom:8px;text-align:center}
.section-sub{color:var(--text-d);text-align:center;max-width:640px;margin:0 auto 36px;font-size:15px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.module{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:24px;display:flex;flex-direction:column;gap:12px;transition:all 0.2s;
}
.module:hover{background:var(--card-h);border-color:var(--border-a);transform:translateY(-2px)}
.module-num{font-size:12px;color:var(--gold2);font-weight:700;letter-spacing:0.1em}
.module-icon{font-size:30px}
.module h3{font-size:18px;font-weight:800}
.module .sub{font-size:13px;color:var(--text-m)}
.module p{font-size:14px;color:var(--text-d);line-height:1.6}
.module .btn{align-self:flex-start;margin-top:8px}
/* FAQ cards: gold hover highlight echoing the rating-summary bar */
#faq .module:hover{
  background:linear-gradient(135deg,rgba(212,175,55,0.16),rgba(230,57,70,0.06));
  border-color:var(--gold);
  box-shadow:0 10px 28px rgba(212,175,55,0.22);
  transform:translateY(-2px);
}
#faq .module:hover .module-num,#faq .module:hover h3{color:var(--gold2)}
#faq .module:hover .module-icon{transform:scale(1.08)}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:var(--r);font-weight:700;font-size:14px;cursor:pointer;transition:all 0.2s;border:none;font-family:inherit}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1a1a}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(212,175,55,0.35)}
.btn-ghost{background:var(--card);color:var(--text);border:1px solid var(--border-a)}
.btn-ghost:hover{background:var(--card-h)}

/* ===== CHAPTER PAGE ===== */
.chapter{max-width:880px;margin:0 auto;padding:60px 24px 80px;text-align:start}
@media(min-width:1400px){.chapter{padding:60px 48px 80px}}
.chapter-nav{display:flex;justify-content:space-between;gap:12px;margin-bottom:32px;font-size:13px}
.chapter-nav a{color:var(--text-d);padding:6px 12px;border-radius:8px;background:var(--card)}
.chapter-nav a:hover{background:var(--card-h);color:var(--text)}
.chapter-head{margin-bottom:40px;border-bottom:1px solid var(--border);padding-bottom:24px}
.chapter-num{font-size:13px;color:var(--gold2);letter-spacing:0.15em;font-weight:700;text-transform:uppercase}
.chapter-head h1{font-size:clamp(28px,4vw,42px);font-weight:900;line-height:1.2;margin:8px 0 12px}
.chapter-head p{color:var(--text-d);font-size:16px;max-width:680px}

.chapter h2{font-size:clamp(22px,3vw,26px);font-weight:800;margin:36px 0 14px;color:var(--gold2)}
.chapter h3{font-size:18px;font-weight:700;margin:22px 0 10px;color:var(--text)}
.chapter p{color:var(--text-d);margin-bottom:14px;font-size:15px}
.chapter ul{margin:0 0 18px 0;padding-left:22px;color:var(--text-d)}
.chapter ul li{margin-bottom:6px;font-size:15px}
.chapter strong{color:var(--text);font-weight:600}
.chapter em{color:var(--gold2);font-style:normal}
.chapter blockquote{
  border-left:3px solid var(--gold);padding:14px 18px;background:rgba(212,175,55,0.05);
  margin:18px 0;color:var(--text-d);font-style:italic;border-radius:0 8px 8px 0;
}
.chapter .tip{
  background:rgba(6,214,160,0.06);border:1px solid rgba(6,214,160,0.2);
  padding:14px 18px;border-radius:8px;margin:18px 0;color:var(--text-d);
}
.chapter .warn{
  background:rgba(230,57,70,0.06);border:1px solid rgba(230,57,70,0.2);
  padding:14px 18px;border-radius:8px;margin:18px 0;color:var(--text-d);
}
.chapter .key{
  background:var(--card);border:1px solid var(--border-a);
  padding:16px 20px;border-radius:12px;margin:20px 0;
}
.chapter .key h4{color:var(--gold2);font-size:14px;margin-bottom:8px;font-weight:700}

/* ===== FOOTER ===== */
.footer{background:linear-gradient(160deg,#000 0%,#0a0906 55%,#14100a 100%);border-top:1px solid var(--222);padding:40px 24px calc(30px + env(safe-area-inset-bottom,0px));text-align:center;color:var(--text-m);font-size:12px;line-height:1.7;position:relative;width:100%;max-width:none;margin:0;border-radius:0;overflow:hidden}
.footer::before{content:"";position:absolute;inset:0;background:url('../images/bg_theme_warm2.jpg') center 40%/cover no-repeat;opacity:.55;z-index:0;pointer-events:none}
.footer::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.82) 0%,rgba(0,0,0,0.72) 45%,rgba(0,0,0,0.88) 100%);z-index:0;pointer-events:none}
.footer > *{position:relative;z-index:1}
.footer a{color:var(--text-d)}
.legal-footer-links{margin-top:12px}.legal-footer-links a{color:var(--gold2);text-decoration:underline}.legal-footer-note{font-size:11px;color:var(--text-m)}
.footer-social{margin-top:14px;display:flex;justify-content:center;flex-wrap:wrap;column-gap:14px;row-gap:10px}.footer-social a{color:var(--gold2);display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(212,175,55,.10);border:1px solid rgba(212,175,55,.28);transition:background .2s ease,border-color .2s ease,color .2s ease}.footer-social a:hover{color:var(--gold);background:rgba(212,175,55,.22);border-color:var(--gold)}.footer-social svg{width:22px;height:22px;display:block}.footer-copy{margin-top:10px;font-size:11px;color:var(--text-m)}
.legal-page{max-width:860px;margin:0 auto;min-height:70vh;padding:40px 24px}
@media(min-width:1400px){.legal-page{padding:40px 48px}}.legal-page h1{color:var(--gold2);margin-bottom:8px}.legal-page h2{margin-top:28px;color:var(--gold2);font-size:20px}.legal-page p,.legal-page li{color:var(--text-d);line-height:1.75}.legal-page .warn{margin:18px 0}.admin-page{max-width:1200px;margin:0 auto;min-height:75vh}.admin-head,.admin-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.admin-login{max-width:460px;margin:30px auto}.admin-login label,.admin-page label{display:block;margin:10px 0 5px;color:var(--text-d);font-size:13px}.admin-login input,.admin-page input,.admin-page select{width:100%;box-sizing:border-box;padding:10px 12px;background:var(--card);border:1px solid var(--border-a);border-radius:8px;color:var(--text);font:inherit}.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:24px 0}.admin-output{min-height:70px;white-space:pre-wrap;word-break:break-all;background:#09090d;border:1px solid var(--border-a);border-radius:8px;padding:12px;color:var(--gold2);font-size:12px;margin-top:14px}.admin-section{margin:30px 0}.admin-section .table-wrap{overflow:auto}.admin-page table{min-width:760px}.admin-actions{display:flex;gap:6px;flex-wrap:wrap}.admin-actions .btn{font-size:11px;padding:6px 8px}.btn-danger{border:1px solid rgba(230,57,70,.65);background:rgba(230,57,70,.12);color:#ff9ca4;cursor:pointer}.btn-danger:hover{background:rgba(230,57,70,.22)}

/* ===== TABLES ===== */
table{width:100%;border-collapse:collapse;color:var(--text-d);font-size:14px}
table th,table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:start;vertical-align:top}
table th{color:var(--gold2);font-weight:700}
table tbody tr:hover{background:var(--card-h)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0}
.table-wrap table{margin:0;min-width:0}
.table-wrap::-webkit-scrollbar{height:6px}
.table-wrap::-webkit-scrollbar-thumb{background:var(--border-a);border-radius:3px}




/* ===== COACH CHAT: mobile fixed input bar ===== */
@media(max-width:640px){
  #chatBox{height:52vh !important;min-height:240px !important;margin-bottom:0;border-radius:12px 12px 0 0}
  #chatBar{
    position:sticky;bottom:0;z-index:30;
    padding:8px 12px 10px;
    margin:0 -12px -14px;
    background:linear-gradient(180deg,rgba(23,16,6,0) 0%,rgba(23,16,6,0.92) 26%);
    backdrop-filter:blur(6px);
  }
  #chatBar .btn{white-space:nowrap}
  #chatBar > div{flex-wrap:wrap}
  #chatBar #chatInput{flex:1 1 100% !important;order:-1 !important}
  #chatInput{min-height:44px}
  #ask .key{overflow:visible;padding:16px 12px 0}
}
/* ===== COACH CHAT ===== */
#chatInput{min-width:0;flex:1 1 auto}
/* ===== MOBILE: TABLET (<=900px) ===== */
@media(max-width:900px){
  .nav-inner{padding:12px 16px;gap:12px}
  .nav-links{gap:4px}
  .nav-links a{font-size:12px;padding:6px 8px}
  .logo{font-size:17px}
  .logo-badge{width:32px;height:32px;font-size:16px}
  .section{padding:32px 16px}
  .chapter{padding:40px 16px 60px}
  .hero{padding:60px 16px 48px;min-height:auto}
  .lead-box{padding:22px 16px}
  .lead-form input{min-width:160px}
  .chapter-share{flex-direction:column}
}

/* ===== NAV: NARROW TABLET (641-720px) — keep logo+tools on one row and the centered link row unbroken ===== */
@media(max-width:720px){
  .nav-inner{padding:10px 12px;gap:8px}
  .logo{font-size:14px;gap:6px}
  .logo-text{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #themeShareBtn{display:none}
  #langSelect{max-width:80px;font-size:10px;padding:2px 4px}
  .nav-links a{font-size:11px;padding:5px 6px}
  .nav-cta{padding:7px 10px;font-size:11px}
}

/* ===== MOBILE: PHONE (<=640px) ===== */
@media(max-width:640px){
  body{font-size:15px}
  /* nav: keep one row, shrink */
  .nav-inner{flex-wrap:nowrap;padding:10px 12px;gap:4px}
  .logo{font-size:14px;gap:6px}
  .logo-text{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* secondary share-link button hides on phones to make room for the language switcher */
  #themeShareBtn{display:none !important}
  /* language switcher: compact so the nav row never overflows */
  #langSelect{max-width:80px;font-size:10px !important;padding:2px 4px !important}
  .nav-links a{font-size:11px;padding:5px 6px}
  .nav-cta{padding:7px 10px !important;font-size:11px !important}
  /* home hero + gallery story boxes: tighten padding on phones */
  .hero .hero-box{padding:28px 18px !important;border-radius:14px}
  #gallery .gallery-story{padding:18px 16px}
  /* chapter nav: stack vertically for thumb reach */
  .chapter-nav{flex-direction:column;gap:8px;font-size:13px}
  .chapter-nav a{display:block;text-align:center;padding:10px 12px}
  /* share block: full-width buttons */
  .chapter-share .btn{flex:1 1 100%;justify-content:center;padding:11px 14px}
  .chapter-share h4{font-size:13px}
  /* headings */
  .section-title{font-size:20px}
  .section-sub{font-size:13px;margin-bottom:24px}
  .hero h1{font-size:30px}
  .hero p{font-size:15px}
  .chapter-head h1{font-size:26px}
  .chapter h2{font-size:20px;margin:28px 0 12px}
  /* 正文：手机不该比桌面小 —— 桌面基准 16px，这里保持同档
     （原为 14px，实测把 .chapter ul li 压到 14px，比段落还小） */
  .chapter p,.chapter ul li{font-size:16px}
  /* 模块卡描述（原 14px，手机上偏小） */
  .module p{font-size:15px}
  /* tables: smaller, still scrollable */
  table{font-size:12.5px}
  table th,table td{padding:8px 9px}
  /* cards & quotes */
  .module{padding:18px}
  .chapter blockquote,.chapter .tip,.chapter .warn{padding:12px 14px}
  .chapter .key{padding:14px 14px}
  /* vip modal fits any phone */
  .vip-modal{padding:16px}
  .vip-modal-box{padding:24px 18px}
  .vip-lock{padding:26px 18px}
  /* lead form full width */
  .lead-form{flex-direction:column}
  .lead-form input{min-width:0;width:100%}
  .lead-form .btn{width:100%;justify-content:center}
  /* footer */
  .footer{padding:30px 16px 24px}
  .legal-footer-links{display:flex;flex-wrap:wrap;justify-content:center;column-gap:12px;row-gap:4px;margin-top:12px}
  .legal-footer-links .lf-sep{display:none}
}

/* ===== MOBILE: TINY (<=380px) ===== */
@media(max-width:380px){
  .logo-text{max-width:110px}
  .nav-links a{font-size:10px;padding:4px 5px}
  .nav-cta{padding:6px 8px !important}
  .hero h1{font-size:26px}
  .chapter-head h1{font-size:23px}
}


/* ===== VIP GATE ===== */
.vip-only{position:relative}
/* 视图层门禁：本站是纯静态站（无服务端渲染），正文仍在 HTML 里。
   非会员看到的是「标题清晰 + 正文模糊 + 顶部预览/底部 CTA」；
   正文不是安全边界，只是销售动线。 */
body:not(.is-vip) .vip-only{max-height:none;overflow:visible}
body:not(.is-vip) .vip-only::after{display:none}
body:not(.is-vip) .vip-only > *{
  filter:blur(7px);opacity:0.5;user-select:none;pointer-events:none;
}
body:not(.is-vip) .vip-only h1,
body:not(.is-vip) .vip-only h2,
body:not(.is-vip) .vip-only h3,
body:not(.is-vip) .vip-only h4{
  filter:none;opacity:1;user-select:auto;pointer-events:auto;
}
/* 锁图标只出现在门禁页（第 67 轮）：以前这条规则作用在 .chapter 上，导致
   所有课程页/地方玩法页的标题前都挂着 🔒，看起来像整站都要付费。 */
body:not(.is-vip) .chapter.is-gated .vip-body > h2::before,
body:not(.is-vip) .chapter.is-gated .vip-body > h3::before{content:"🔒 ";font-size:.82em;vertical-align:.08em}

/* Top lock banner shown to non-VIP visitors (mirrors the course preview UX). */
.vip-toplock{
  position:relative;z-index:1;
  border:2px solid var(--gold);border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(212,175,55,0.10),rgba(18,18,26,0.92));
  padding:26px 28px;margin:8px 0 26px;text-align:center;color:var(--text);
}
body.is-vip .vip-toplock{display:none}
.vip-toplock h3{margin:0 0 8px;font-size:20px;color:var(--gold2);font-weight:800}
.vip-toplock-desc{color:var(--text-d);font-size:14px;max-width:520px;margin:0 auto 10px;line-height:1.7}
.vip-toplock-plan{color:var(--text-m);font-size:13px;margin:0 0 16px}
.vip-toplock-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* Free preview block shown to everyone above the locked content. */
.vip-preview{
  border:1px solid var(--border-a);border-radius:var(--r-lg);
  background:var(--card);padding:24px 26px;margin:6px 0 26px;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
}
.vip-preview > h2:first-of-type{margin-top:0}
.vip-preview-lead{color:var(--text-d);font-size:15px;line-height:1.7;margin:0 0 16px}
.vip-preview h4{color:var(--gold2);font-size:14px;font-weight:800;letter-spacing:.04em;margin:0 0 12px}
.vip-preview ul{margin:0 0 18px;padding-left:20px;display:grid;gap:8px}
.vip-preview li{color:var(--text-d);font-size:14px;line-height:1.6}
.vip-preview-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.vip-preview-actions .btn{font-size:13px}
body.is-vip .vip-preview [data-vip="open"]{display:none}

/* Chapter-page bottom: "what's included" + student results (mirrors course UX) */
.vip-included{text-align:center}
.vip-included .section-sub{max-width:640px;margin:0 auto 6px}
.vip-included-stats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:22px 0}
.vip-included-stats > div{min-width:126px;padding:18px 12px;border:1px solid var(--border-a);border-radius:var(--r);background:var(--card)}
.vip-included-stats b{display:block;font-size:26px;color:var(--gold2);font-weight:900;line-height:1.1}
.vip-included-stats span{font-size:12px;color:var(--text-m)}
.vip-included-note{color:var(--text-m);font-size:12px;margin-top:14px}
.t-letter{width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1a1a;font-weight:900;font-size:20px;border:2px solid rgba(212,175,55,.35)}

/* Lock-card the server injects after each locked section heading.
   Mirrors the module-lock UX: big chapter title on top, this lock card under it. */
/* Lock-card the server injects after each locked section heading.
   Mirrors the module-lock template: chapter title -> full lock card
   (lock glyph, promo copy, CTA button, refund note). */
.vip-sect-lock{
  cursor:pointer;margin:6px 0 22px;padding:24px 24px 20px;
  border:1px solid var(--border-a);border-radius:16px;
  background:linear-gradient(135deg,rgba(212,175,55,0.08),rgba(18,18,26,0.88));
  color:var(--text-d);font-size:13px;transition:all .18s;
  text-align:start;display:flex;flex-direction:column;align-items:center;gap:8px;
}
.vip-sect-lock:hover{border-color:var(--gold);transform:translateY(-1px)}
.vsl-lock-line{font-size:30px;line-height:1;margin-bottom:2px}
.vsl-lock{font-size:30px;line-height:1;flex:none}
.vsl-body{width:100%;max-width:520px;text-align:center}
.vsl-title{font-size:15px;font-weight:800;color:var(--gold2)}
.vsl-title strong{color:var(--gold2)}
.vsl-desc{font-size:13px;color:var(--text-m);margin-top:6px;line-height:1.6}
.vip-sect-lock .vsl-btn.semi{
  margin-top:6px;padding:12px 30px;border-radius:10px;font-weight:800;font-size:14px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1a1a;
  border:none;cursor:pointer;white-space:nowrap;letter-spacing:.02em;
  border-top:1px solid rgba(255,255,255,.35);border-bottom:1px solid rgba(0,0,0,.3);
}
.vip-sect-lock:hover .vsl-btn.semi{transform:translateY(-1px);box-shadow:0 6px 16px rgba(212,175,55,.3)}
.vsl-note{font-size:11.5px;color:var(--text-m);margin-top:2px}
@media(max-width:560px){
  .vip-sect-lock{padding:20px 16px}
  .vip-sect-lock .vsl-btn.semi{width:100%;text-align:center}
}

.vip-lock{
  position:relative;z-index:10;
  border:2px dashed var(--gold);border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(212,175,55,0.08),rgba(18,18,26,0.9));
  padding:36px 28px;margin:24px 0;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
/* 章末的整块付费墙。`.vip-toplock` 和 `.vip-preview [data-vip]` 都为已付费用户
   隐藏了，这一块漏了，于是买了终身档的人滚到章节末尾仍然看到「本章仅限
   VIP / 立即解锁」—— 页面自己一边显示完整正文一边推销自己的墙。 */
body.is-vip .vip-lock{display:none}
.vip-lock-title{
  font-size:18px;font-weight:800;color:var(--gold2);letter-spacing:0.02em;
}
.vip-lock-desc{font-size:14px;color:var(--text-d);max-width:460px;line-height:1.6}
body:not(.is-vip) .vip-server-lock{filter:none;opacity:1;pointer-events:auto;position:relative;z-index:2}
.vip-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 26px;border-radius:var(--r);font-weight:700;font-size:14px;
  cursor:pointer;transition:all 0.2s;border:none;font-family:inherit;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1a1a;
}
.vip-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(212,175,55,0.35)}
.vip-btn.alt{
  background:transparent;color:var(--gold2);
  border:1px solid var(--border-a);
}
.vip-btn.alt:hover{background:var(--card-h);box-shadow:none}

.vip-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px;border-radius:999px;font-size:12px;font-weight:700;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1a1a;
  letter-spacing:0.05em;
}
.coach-vip-note{
  margin:16px 0 0;padding:12px 14px;
  border:1px dashed var(--gold);border-radius:10px;
  background:rgba(212,175,55,0.06);
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
}
.coach-vip-note-txt{
  font-size:13px;color:var(--text-d);line-height:1.6;margin:0;text-align:start;
}

.vip-modal{
  position:fixed;inset:0;z-index:9999;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(0,0,0,0.72);backdrop-filter:blur(6px);
}
.vip-modal.open{display:flex}
.vip-modal-box{
  background:var(--bg2);border:1px solid var(--border-a);border-radius:var(--r-lg);
  padding:32px 28px;width:100%;max-width:420px;
  display:flex;flex-direction:column;gap:16px;
  box-shadow:var(--shadow);
}
.vip-modal-box h3{font-size:20px;font-weight:800;color:var(--gold2)}
.vip-plans{margin:0;padding:12px 16px;background:var(--card);border:1px solid var(--border-a);border-radius:10px;color:var(--text-d);font-size:13px;line-height:1.9}.vip-plans strong{color:var(--gold2);font-size:16px}.vip-plan-actions{display:grid;gap:7px}.vip-plan-btn{padding:9px 12px;border:1px solid var(--border-a);border-radius:8px;background:rgba(212,175,55,.08);color:var(--gold2);cursor:pointer;font:inherit;font-size:12px}.vip-plan-btn:hover{background:rgba(212,175,55,.18)}
.vip-modal-box p{font-size:14px;color:var(--text-d);line-height:1.6}
.vip-modal-box input{
  padding:12px 16px;border-radius:var(--r);border:1px solid var(--border-a);
  background:var(--card);color:var(--text);font-size:14px;font-family:inherit;
}
.vip-modal-box input:focus{outline:none;border-color:var(--gold)}
.vip-modal-actions{display:flex;gap:10px;flex-wrap:wrap}
.vip-modal-note{font-size:12px;color:var(--text-m)}
.vip-modal-note a{color:var(--gold2);text-decoration:underline;cursor:pointer}


/* ===== TOC DRAWER (mobile chapter contents) ===== */
@media(max-width:640px){
  #tocBtn{
    position:fixed;right:14px;bottom:18px;z-index:400;
    width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
    background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1a1a;
    display:grid;place-items:center;box-shadow:0 8px 24px rgba(212,175,55,0.4);
  }
  #tocBtn:active{transform:scale(0.94)}
  #drawerOverlay{
    position:fixed;inset:0;z-index:395;background:rgba(0,0,0,0.55);
    opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;
  }
  #drawerOverlay.open{opacity:1;visibility:visible}
  #tocDrawer{
    position:fixed;top:0;right:0;bottom:0;z-index:396;width:min(82vw,320px);
    background:var(--bg2);border-left:1px solid var(--border-a);
    box-shadow:-12px 0 40px rgba(0,0,0,0.5);
    transform:translateX(105%);transition:transform .32s cubic-bezier(0.34, 1.56, 0.64, 1);
    display:flex;flex-direction:column;
  }
  #tocDrawer.open{transform:translateX(0);transition:transform .32s cubic-bezier(0.34, 1.56, 0.64, 1)}
  body.drawer-locked{overflow:hidden}

  .ds-front{z-index:1000}
  .toc-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 18px 14px;border-bottom:1px solid var(--border);
  }
  .toc-head span{font-size:15px;font-weight:800;color:var(--gold2)}
  #tocClose{
    width:32px;height:32px;border-radius:50%;border:1px solid var(--border-a);
    background:var(--card);color:var(--text);font-size:20px;line-height:1;
    cursor:pointer;display:grid;place-items:center;
  }
  .toc-list{flex:1;overflow-y:auto;padding:12px 10px;-webkit-overflow-scrolling:touch}
  .toc-list a{
    display:block;padding:10px 12px;margin-bottom:2px;border-radius:10px;
    font-size:13px;line-height:1.45;color:var(--text-d);
    transition:all .15s;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .toc-list a:active{background:var(--card-h)}
  .toc-list a.active{background:linear-gradient(135deg,rgba(212,175,55,0.16),rgba(212,175,55,0.05));color:var(--gold2);font-weight:700}
  /* offset for sticky nav when jumping to a section */
  article.chapter h2{scroll-margin-top:70px}
}


/* ===== NAV HAMBURGER MENU (mobile) ===== */
#navHamburger{display:none}
#navDrawer{display:none}
@media(max-width:640px){
  .nav-inner .nav-links{display:none}
  #navHamburger{
    display:grid;place-items:center;
    width:40px;height:40px;border-radius:10px;border:1px solid var(--border-a);
    background:var(--card);color:var(--text);cursor:pointer;margin-left:auto;
  }
  #navHamburger:active{background:var(--card-h)}
  #navDrawer{
    position:fixed;top:0;right:0;bottom:0;z-index:441;width:min(84vw,340px);
    background:var(--bg2);border-left:1px solid var(--border-a);
    box-shadow:-12px 0 40px rgba(0,0,0,0.5);
    transform:translateX(105%);transition:transform .32s cubic-bezier(0.34, 1.56, 0.64, 1);
    display:flex;flex-direction:column;
  }
  #navDrawer.open{transform:translateX(0);transition:transform .32s cubic-bezier(0.34, 1.56, 0.64, 1)}

  .nav-drawer-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 18px 14px;border-bottom:1px solid var(--border);
  }
  .nav-drawer-head span{font-size:15px;font-weight:800;color:var(--gold2)}
  #navDrawerClose{
    width:32px;height:32px;border-radius:50%;border:1px solid var(--border-a);
    background:var(--card);color:var(--text);font-size:20px;line-height:1;
    cursor:pointer;display:grid;place-items:center;
  }
  /* links moved in from .nav-links */
  #navDrawer .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:4px;
    padding:14px 12px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  #navDrawer .nav-links a{
    display:block;padding:13px 14px;border-radius:10px;
    font-size:15px;font-weight:500;color:var(--text);
  }
  #navDrawer .nav-links a:active{background:var(--card-h)}
  #navDrawer .nav-links .nav-cta{
    text-align:center;font-weight:700;
    background:linear-gradient(135deg,var(--gold),var(--gold2)) !important;
    color:#1a1a1a !important;
  }
}


/* ===== TABLES: card layout on phones (3+ columns) ===== */
.tbl-head-hide{display:none}
@media(max-width:640px){
  .tbl-cards,.tbl-cards tbody{display:block;width:100%}
  .tbl-cards tr{
    display:block;margin:0 0 10px;padding:0;
    background:var(--card);border:1px solid var(--border);
    border-radius:12px;overflow:hidden;
  }
  .tbl-cards td{
    display:block;width:100%;
    border-bottom:1px solid var(--border) !important;
    padding:9px 12px !important;
  }
  .tbl-cards td:last-child{border-bottom:none !important}
  .tbl-cards td::before{
    content:attr(data-label);
    display:block;font-size:11px;font-weight:700;
    color:var(--gold2);text-transform:uppercase;letter-spacing:.05em;
    margin-bottom:3px;
  }
  /* 表格右上角「全部展开/收起」一键切换: 仅当该表格折叠时显示.
   position:relative 只加在确实有角标按钮的 table-wrap 上(host class),
   避免影响其它 table-wrap 里绝对定位的子元素(如 tier grid 测试/布局). */
.table-wrap.tbl-corner-host{position:relative}
.tbl-corner-all{
  position:absolute;top:6px;right:8px;z-index:6;
  display:none;align-items:center;justify-content:center;
  padding:5px 12px;border-radius:999px;
  border:1px solid rgba(212,175,55,.55);
  background:rgba(26,20,5,.78);color:#f5d76e;
  font-size:11px;font-weight:800;letter-spacing:.03em;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.28);
  transition:background .15s,color .15s,border-color .15s,transform .15s}
.tbl-corner-all.tbl-corner-show{display:inline-flex}
.tbl-corner-all:hover{background:var(--gold);color:#1a1405;border-color:var(--gold)}
.tbl-corner-all:active{transform:scale(.96)}
@media(min-width:641px){.tbl-corner-all{display:none}}
/* 折叠态首行 = 摘要行: 浅金底纹 + SUMMARY 角标 (仅折叠时存在) */
  .tbl-cards tr.tbl-row-summary{position:relative;
    background:linear-gradient(135deg,rgba(212,175,55,.13),rgba(212,175,55,.04));
    border-color:rgba(212,175,55,.5)}
  .tbl-cards tr.tbl-row-summary::after{
    content:"SUMMARY";position:absolute;top:7px;right:9px;
    padding:2px 8px;border-radius:999px;
    background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;
    font-size:9.5px;font-weight:800;letter-spacing:.06em;line-height:1.4;
    box-shadow:0 1px 3px rgba(0,0,0,.22);pointer-events:none}
}

/* 桌面完整表格右上角悬浮「复制」入口 — 沿用 ch-act 统一响应式规则:
   Mobile 常驻可见(折叠角标显示时下移避让); Desktop 默认隐藏, 悬停/聚焦宿主浮现 */
.tbl-corner-copy{
  position:absolute;top:8px;right:8px;z-index:6;
  display:inline-flex;align-items:center;justify-content:center;
  padding:5px 12px;border-radius:999px;
  border:1px solid rgba(212,175,55,.55);
  background:rgba(26,20,5,.78);color:#f5d76e;
  font-size:11px;font-weight:800;letter-spacing:.03em;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.28);
  transition:background .15s,color .15s,border-color .15s,transform .15s}
.tbl-corner-copy:hover{background:var(--gold);color:#1a1405;border-color:var(--gold)}
.tbl-corner-copy:active{transform:scale(.96)}
/* 折叠角标显示时(移动端折叠态)复制按钮下移避让 */
.tbl-corner-host .tbl-corner-all.tbl-corner-show ~ .tbl-corner-copy{top:38px}
@media(min-width:641px){
  .tbl-corner-copy{opacity:0;visibility:hidden}
  .tbl-corner-host:hover .tbl-corner-copy,
  .tbl-corner-host:focus-within .tbl-corner-copy,
  .tbl-corner-copy:focus-visible{opacity:1;visibility:visible}
}
:root[data-theme="light"] .tbl-corner-copy{
  background:rgba(255,255,255,.92);color:#8a6d1a;border-color:rgba(138,109,26,.5)
}

/* 桌面完整表格行数徽标: 未卡片化的完整表格(如 2 列表)在 >=641px 显示
   "N of N" 金色实心徽标, 与折叠态徽标共用同一套状态色; 移动端隐藏
   (那里 2 列表会转卡片, 徽标由折叠开关提供)。 */
.tbl-full-count{
  position:absolute;top:8px;left:8px;z-index:6;
  display:none;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  pointer-events:none}
@media(min-width:641px){.tbl-full-count{display:inline-flex}}
html.m2m-sim-desktop .tbl-full-count{display:inline-flex}
:root[data-theme="light"] .tbl-full-count{border-color:rgba(120,90,20,.35)}



/* ===== COACH VOICE INPUT ===== */
#micBtn{transition:all .2s;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#micBtn.mic-arm{transform:scale(1.12);background:var(--gold2)!important;color:#fff!important;border-color:var(--gold2)!important;box-shadow:0 0 0 4px rgba(212,175,55,0.25)}
#micBtn.mic-hold{
  background:var(--gold2)!important;color:#fff!important;border-color:var(--gold2)!important;
  animation:micHoldPulse 1.2s ease-in-out infinite;
}
@keyframes micHoldPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,0.5)}
  50%{box-shadow:0 0 0 9px rgba(212,175,55,0)}
}
#micBtn.mic-on{
  background:var(--red) !important;color:#fff !important;border-color:var(--red) !important;
  animation:micPulse 1.2s ease-in-out infinite;
}
@keyframes micPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(230,57,70,0.45)}
  50%{box-shadow:0 0 0 8px rgba(230,57,70,0)}
}

/* ===== COACH: read-aloud button (speechSynthesis) ===== */
.coach-tts{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;margin:4px 0 0 8px;padding:0;border-radius:999px;
  border:1px solid var(--chat-bot-border);background:var(--card);color:var(--text-d);
  cursor:pointer;font-size:13px;line-height:1;transition:all .2s;vertical-align:middle;
  flex-shrink:0;
}
.coach-tts:hover{background:var(--card-h);color:var(--gold2)}
.coach-tts.speaking{
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1a1a;
  border-color:var(--gold2);animation:ttsPulse 1.1s ease-in-out infinite;
}
@keyframes ttsPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,0.45)}
  50%{box-shadow:0 0 0 6px rgba(212,175,55,0)}
}
:root[data-theme="light"] .coach-tts{color:var(--text-d);border-color:rgba(180,140,50,0.4)}
:root[data-theme="light"] .coach-tts:hover{color:var(--gold2)}
:root[data-theme="light"][data-hc="on"] .coach-tts{border-color:rgba(120,90,20,0.65)}

/* ===== COACH: add-analysis confirm preview ===== */
.coach-confirm-mask{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(2px);padding:16px;
  animation:confirmFade .18s ease-out;
}
@keyframes confirmFade{from{opacity:0}to{opacity:1}}
.coach-confirm-panel{
  width:min(560px,100%);max-height:78vh;overflow:auto;border-radius:16px;
  background:var(--card);border:1px solid var(--border);box-shadow:0 18px 60px rgba(0,0,0,.4);
  padding:18px 18px 14px;animation:confirmPop .22s ease-out;
}
@keyframes confirmPop{from{transform:translateY(10px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.coach-confirm-title{font-size:15px;font-weight:900;color:var(--gold2);margin-bottom:6px}
.coach-confirm-sub{font-size:12px;color:var(--text-m);line-height:1.5;margin-bottom:12px}
.coach-confirm-bubble{
  display:flex;flex-direction:column;max-width:100%;background:var(--chat-bot);
  border:1px solid var(--chat-bot-border);color:var(--chat-bot-color);border-radius:12px;
  padding:10px 14px;margin-bottom:14px;white-space:pre-wrap;word-break:break-word;
  font-size:14px;line-height:1.55;
}
.coach-confirm-actions{display:flex;justify-content:flex-end;gap:10px}
.coach-confirm-ok{
  padding:9px 16px;border:none;border-radius:9px;cursor:pointer;font-size:13px;font-weight:800;
  background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1a1a;transition:all .2s;
}
.coach-confirm-ok:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(212,175,55,.4)}
.coach-confirm-no{
  padding:9px 16px;border:1px solid var(--border);border-radius:9px;cursor:pointer;font-size:13px;
  background:transparent;color:var(--text-d);transition:all .2s;
}
.coach-confirm-no:hover{background:var(--card-h);color:var(--text)}
@media(max-width:480px){
  .coach-confirm-panel{padding:14px 12px 12px}
  .coach-confirm-actions{flex-wrap:wrap}
  .coach-confirm-ok,.coach-confirm-no{flex:1;text-align:center}
}

/* ===== COACH: screenshot analysis history archive ===== */
.shot-archive{
  margin-top:12px;padding:12px 14px;border:1px dashed var(--border-a);border-radius:10px;
  background:var(--card);max-height:280px;overflow:auto;
}
.shot-log-title{
  font-size:11px;font-weight:900;color:var(--gold2);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border);
}
.shot-log-item{
  font-size:12.5px;line-height:1.55;padding:7px 9px;border-radius:8px;margin-top:6px;
  white-space:pre-wrap;word-break:break-word;
}
.shot-log-q{background:var(--card-h);color:var(--text)}
.shot-log-a{background:linear-gradient(135deg,rgba(212,175,55,.10),rgba(245,215,110,.05));
  color:var(--text-d)}
.shot-log-who{font-weight:900;color:var(--gold2)}
.shot-log-q .shot-log-who{color:var(--text-m)}

/* ===== COACH: voice language detection badge ===== */
.voice-lang-badge{
  align-self:center;padding:5px 10px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--border-a);background:var(--card);color:var(--gold2);
  font-size:12px;font-weight:700;opacity:0;transform:translateY(4px);
  transition:opacity .25s ease,transform .25s ease;pointer-events:none;
}
.voice-lang-badge.show{opacity:1;transform:translateY(0)}
:root[data-theme="light"] .voice-lang-badge{color:var(--gold2)}
@media(max-width:640px){
  .voice-lang-badge{font-size:11px;padding:4px 8px}
}


/* ===== THEME: LIGHT ===== */
:root[data-theme="light"]{
  --bg:#f6f1e7; --bg2:#efe7d6; --card:rgba(23,16,6,0.05); --card-h:rgba(23,16,6,0.09);
  --border:rgba(180,140,50,0.25); --border-a:rgba(180,140,50,0.45);
  --text:#241d10; --text-d:#5a523f; --text-m:#8a826e;
  --gold:#a8842a; --gold2:#8a6c1c;
  --shadow:0 8px 32px rgba(120,90,20,0.18);
  --chat-bot:rgba(23,16,6,0.06); --chat-bot-border:rgba(23,16,6,0.12); --chat-bot-color:#241d10;
}
:root[data-theme="light"] body{
  background:linear-gradient(180deg,#faf6ec 0%,#f1e8d4 35%,#f6f1e7 100%);
}


/* ===== LIGHT THEME: HIGH-CONTRAST MODE (data-hc="on") =====
   Readability-first: near-black text, clearly darker secondary text,
   stronger borders and cards. Toggled by the Aa button (js/theme.js,
   preference m2m_hc). Only meaningful for the light theme. */
:root[data-theme="light"][data-hc="on"]{
  --bg:#fbf8f1; --bg2:#f2ecdf; --card:rgba(23,16,6,0.10); --card-h:rgba(23,16,6,0.16);
  --border:rgba(120,90,20,0.55); --border-a:rgba(120,90,20,0.75);
  --text:#16110a; --text-d:#2e2719; --text-m:#4a4230;
  --gold:#8a6c1c; --gold2:#6f5410;
  --shadow:0 8px 32px rgba(90,60,10,0.28);
  --chat-bot:rgba(23,16,6,0.10); --chat-bot-border:rgba(23,16,6,0.25); --chat-bot-color:#16110a;
}
:root[data-theme="light"][data-hc="on"] body{
  background:linear-gradient(180deg,#ffffff 0%,#f6efe0 40%,#fbf8f1 100%);
}
:root[data-theme="light"][data-hc="on"] body::before{
  background:linear-gradient(180deg,rgba(255,255,255,0.85) 0%,rgba(251,248,241,0.92) 100%),
             url('../images/bg_theme_warm2.jpg') center/cover no-repeat fixed;
}
:root[data-theme="light"][data-hc="on"] .nav{background:rgba(255,252,244,0.97);border-bottom-color:rgba(120,90,20,0.55)}
:root[data-theme="light"][data-hc="on"] .footer{background:#efe6d2;color:var(--text-d)}
:root[data-theme="light"][data-hc="on"] .nav-links a{color:var(--text-d)}
:root[data-theme="light"][data-hc="on"] .nav-links a:hover{color:var(--text);background:var(--card-h)}
:root[data-theme="light"][data-hc="on"] #chatBox{background:#fff !important;border-color:rgba(120,90,20,0.6) !important}
:root[data-theme="light"][data-hc="on"] #chatInput{background:rgba(23,16,6,0.06) !important;color:var(--text) !important;border-color:rgba(120,90,20,0.65) !important}
:root[data-theme="light"][data-hc="on"] #chatBar{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.95) 26%)}
:root[data-theme="light"][data-hc="on"] .toc-list a{color:var(--text-d)}
:root[data-theme="light"][data-hc="on"] .toc-list a.active{color:var(--gold2);font-weight:800}
:root[data-theme="light"][data-hc="on"] #tocSide{background:rgba(255,252,244,0.96);border-color:rgba(120,90,20,0.55)}
:root[data-theme="light"][data-hc="on"] .toc-search input{background:rgba(23,16,6,0.06);color:var(--text)}
:root[data-theme="light"][data-hc="on"] .toc-search input::placeholder{color:var(--text-m)}
:root[data-theme="light"][data-hc="on"] .toc-group{border-bottom-color:rgba(120,90,20,0.25)}
:root[data-theme="light"][data-hc="on"] #navDrawer{background:var(--bg2)}
:root[data-theme="light"][data-hc="on"] #navHamburger{background:var(--card);color:var(--text);border-color:var(--border-a)}
:root[data-theme="light"][data-hc="on"] .tbl-copy,
:root[data-theme="light"][data-hc="on"] .tier-copy,
:root[data-theme="light"][data-hc="on"] .card-copy{color:var(--text-d)}

/* high-contrast toggle button itself */
#hcToggle{
  display:grid;place-items:center;width:40px;height:40px;border-radius:10px;
  border:1px solid var(--border-a);background:var(--card);color:var(--text-d);
  cursor:pointer;font-size:14px;font-weight:800;line-height:1;transition:all .2s;flex-shrink:0;
  font-family:Georgia,"Times New Roman",serif;letter-spacing:.02em;
}
#hcToggle:hover{background:var(--card-h)}
#hcToggle[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#fff;
  border-color:var(--gold2);box-shadow:0 0 0 2px rgba(120,90,20,0.35);
}
:root[data-theme="light"][data-hc="on"] #hcToggle[aria-pressed="true"]{color:#fff;background:linear-gradient(135deg,#8a6c1c,#6f5410)}
@media(max-width:640px){
  #hcToggle{width:38px;height:38px;font-size:13px}
}

/* ===== THEME SHARE-LINK BUTTON ===== */
#themeShareBtn{
  display:grid;place-items:center;width:40px;height:40px;border-radius:10px;
  border:1px solid var(--border-a);background:var(--card);color:var(--text-d);
  cursor:pointer;font-size:15px;line-height:1;transition:all .2s;flex-shrink:0;
}
#themeShareBtn:hover{background:var(--card-h)}
#themeShareBtn:active{transform:scale(0.95)}
@media(max-width:640px){
  #themeShareBtn{width:38px;height:38px;font-size:14px}
}
:root[data-theme="light"] body::before{
  background:radial-gradient(ellipse at 20% 0%,rgba(180,140,50,0.18) 0%,transparent 50%),
             radial-gradient(ellipse at 80% 100%,rgba(160,120,30,0.10) 0%,transparent 50%),
             linear-gradient(180deg,rgba(250,246,236,0.72) 0%,rgba(246,241,231,0.85) 100%),
             url('../images/bg_theme_warm2.jpg') center/cover no-repeat fixed;
}
:root[data-theme="light"] .nav{
  background:rgba(250,246,236,0.88);
}
:root[data-theme="light"] .footer{background:transparent}
:root[data-theme="light"] .footer-copy{color:var(--text-d)}
:root[data-theme="light"] .footer-social a{background:rgba(138,108,28,.08);border-color:rgba(138,108,28,.38)}
:root[data-theme="light"] .footer-social a:hover{color:#6f5410;background:rgba(138,108,28,.16);border-color:var(--gold2)}
:root[data-theme="light"][data-hc="on"] .footer-social a{background:rgba(111,84,16,.10);border-color:rgba(111,84,16,.5)}
:root[data-theme="light"][data-hc="on"] .footer-social a:hover{color:#4a3a0c;background:rgba(111,84,16,.18);border-color:var(--gold2)}
:root[data-theme="light"] .hero-badge{background:rgba(255,255,255,0.9);color:var(--gold)}
:root[data-theme="light"] #chatBox{background:#fff !important;border-color:rgba(180,140,50,0.3) !important}
:root[data-theme="light"] #chatInput{background:rgba(23,16,6,0.04) !important;color:var(--text) !important;border-color:rgba(180,140,50,0.4) !important}
:root[data-theme="light"] #chatBar{background:linear-gradient(180deg,rgba(246,241,231,0) 0%,rgba(246,241,231,0.94) 26%)}
:root[data-theme="light"] .toc-list a{color:var(--text-d)}
:root[data-theme="light"] #navDrawer{background:var(--bg2)}
:root[data-theme="light"] #navHamburger{background:var(--card);color:var(--text)}

/* ===== THEME TOGGLE BUTTON ===== */
#themeToggle{
  display:grid;place-items:center;width:40px;height:40px;border-radius:10px;
  border:1px solid var(--border-a);background:var(--card);color:var(--text);
  cursor:pointer;font-size:17px;line-height:1;transition:all .2s;flex-shrink:0;
}
#themeToggle:hover{background:var(--card-h)}
@media(max-width:640px){
  #themeToggle{width:38px;height:38px}
  .nav-inner{flex-wrap:nowrap}
}


/* ===== TOC: back-to-top button ===== */
#tocTopBtn{
  margin-left:auto;
  padding:6px 12px;border-radius:999px;border:1px solid var(--border-a);
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1a1a;
  font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;
}
#tocTopBtn:active{transform:scale(0.95)}
#tocClose{margin-left:0}
.toc-head{gap:8px}

/* ===== TOC: bottom back-to-top button (rides inside .toc-list) ===== */
.toc-btop{
  display:block;width:100%;margin:10px 0 4px;padding:8px 12px;
  border-radius:10px;border:1px solid var(--border-a);
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1a1a;
  font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;
}
.toc-btop:hover{filter:brightness(1.08)}
.toc-btop:active{transform:scale(0.97)}


/* ===== TOC: DESKTOP SIDEBAR (>=1024px) ===== */
@media(min-width:1024px){
  #tocSide{
    position:fixed;top:84px;right:20px;bottom:24px;z-index:300;
    width:var(--toc-w,280px);display:flex;flex-direction:column;
    background:rgba(18,18,26,0.82);backdrop-filter:blur(14px);
    border:1px solid var(--border-a);border-radius:16px;
    box-shadow:0 8px 32px rgba(0,0,0,0.35);
    transition:transform .32s cubic-bezier(0.34, 1.56, 0.64, 1),width .28s;
  }
  #tocSide.dragging{transition:none}
  #tocSide.collapsed{
    width:52px;
  }
  #tocSide.collapsed .toc-list,
  #tocSide.collapsed #tocTopBtn,
  #tocSide.collapsed #tocClose,
  #tocSide.collapsed .toc-head span,
  #tocSide.collapsed .toc-search{display:none}
  #tocSide.collapsed .toc-head{justify-content:center}
  #tocSide .toc-head{
    display:flex;align-items:center;gap:8px;
    padding:14px 16px 12px;border-bottom:1px solid var(--border);
  }
  #tocSide .toc-head span{font-size:14px;font-weight:800;color:var(--gold2);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #tocSide .toc-list{
    flex:1;overflow-y:auto;padding:10px 8px;-webkit-overflow-scrolling:touch;
  }
  #tocSide .toc-list a{
    display:block;padding:8px 10px;margin-bottom:1px;border-radius:8px;
    font-size:13px;line-height:1.4;color:var(--text-d);
    transition:all .15s;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  #tocSide .toc-list a:hover{background:var(--card-h);color:var(--text)}
  #tocSide .toc-list a.active{background:linear-gradient(135deg,rgba(212,175,55,0.16),rgba(212,175,55,0.05));color:var(--gold2);font-weight:700}
  /* The sidebar floats over the article's right edge; the article keeps its
     base max-width:880px;margin:0 auto so the content stays centered on the
     page regardless of the sidebar (user choice: content centered, sidebar
     does not take layout space). */

  /* drag handle on the left edge of the sidebar */
  #tocResize{position:absolute;left:-5px;top:0;bottom:0;width:10px;cursor:col-resize;z-index:5}
  #tocSide.collapsed #tocResize{display:none}
  #tocResize::after{
    content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:3px;height:38px;border-radius:2px;background:rgba(212,175,55,.5);
    opacity:0;transition:opacity .15s;pointer-events:none
  }
  #tocSide:hover #tocResize::after,#tocResize:hover::after{opacity:1}
  body.toc-resizing{user-select:none;cursor:col-resize}

}
:root[data-theme="light"] #tocSide{background:rgba(246,241,231,0.9)}

  /* hover preview card for TOC links (appended to body, fixed) */
  #tocPreview{
    position:fixed;z-index:1200;max-width:300px;width:max-content;
    background:rgba(16,16,24,0.95);backdrop-filter:blur(10px);
    border:1px solid var(--border-a);border-radius:12px;
    box-shadow:0 12px 32px rgba(0,0,0,0.45);
    padding:10px 12px;display:none;pointer-events:none;
    font-size:12.5px;line-height:1.5;color:var(--text);
    transition:opacity .12s ease;
  }
  .toc-pv-title{font-weight:800;color:var(--gold2);margin-bottom:6px;font-size:13px}
  .toc-pv-body{color:var(--text-d)}
  .toc-pv-locked{color:var(--text-d);font-style:italic;display:flex;align-items:center;gap:6px}
  .toc-pv-vipbadge{display:inline-block;border:1px solid var(--gold);color:var(--gold2);
    border-radius:4px;padding:0 5px;font-size:10px;font-weight:800;letter-spacing:.5px}
  :root[data-theme="light"] #tocPreview{background:rgba(255,252,244,0.97)}

  /* TOC search filter (drawer + sidebar) */
  .toc-search{display:flex;align-items:center;gap:6px;padding:8px 10px 2px}
  .toc-search input{
    flex:1;min-width:0;box-sizing:border-box;padding:7px 10px;border-radius:8px;
    border:1px solid var(--border);background:rgba(255,255,255,0.06);
    color:var(--text);font-size:12.5px;outline:none;transition:border-color .15s;
  }
  .toc-search input:focus{border-color:var(--gold)}
  .toc-search input::placeholder{color:var(--text-d);opacity:.7}
  .toc-mark{background:var(--gold);color:#1a1a1a;border-radius:3px;padding:0 1px;font-weight:700}
  .toc-search-empty{display:none;padding:12px 10px;text-align:center;color:var(--text-d);font-size:12.5px;font-style:italic}
  :root[data-theme="light"] .toc-search input{background:rgba(0,0,0,0.05)}
  /* per-section read checkmarks */
  .toc-done{display:none;color:var(--gold2);font-weight:800;margin-right:6px}
  .toc-list a.done .toc-done{display:inline}
  .toc-star{display:none;color:var(--gold);font-size:12px;margin-right:5px;vertical-align:1px}
  .toc-list a.faved .toc-star{display:inline}
  .toc-list a:not(.faved) .toc-star{color:var(--text-d);opacity:.45}
  .toc-favbtn{display:inline-flex;align-items:center;gap:3px;flex:none;
    padding:3px 7px;border:1px solid var(--border,#3a3a42);border-radius:6px;
    background:transparent;color:var(--text-m,#c8c8cf);font-size:12px;cursor:pointer;
    transition:border-color .15s,color .15s,background .15s}
  .toc-favbtn:hover{border-color:var(--gold);color:var(--gold2)}
  .toc-favbtn.on{border-color:var(--gold);color:var(--gold2);background:rgba(212,175,55,.12)}
  .toc-favcount{font-size:11px;opacity:.85}

  /* two-level tree */
  .toc-group .toc-row{display:flex;align-items:center;gap:2px}
  .toc-group .toc-row .toc-l1{flex:1;min-width:0}
  .toc-exp{
    flex:none;width:20px;height:20px;margin-right:2px;border-radius:6px;
    border:1px solid var(--border);background:transparent;color:var(--text-d);
    cursor:pointer;font-size:11px;line-height:1;display:flex;align-items:center;
    justify-content:center;transition:transform .18s ease,border-color .15s;
  }
  .toc-exp:hover{border-color:var(--gold);color:var(--gold2)}
  .toc-group.open .toc-exp{transform:rotate(90deg)}
  .toc-l2{display:none;padding:2px 8px 6px 16px}
  .toc-group.open .toc-l2{display:block}
  .toc-l2 a{
    display:block;padding:5px 8px;margin-bottom:1px;border-radius:6px;
    font-size:12px;line-height:1.35;color:var(--text-d);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .toc-l2 a::before{content:"\2013  ";color:var(--gold);font-weight:800}
  .toc-l2 a:hover{background:var(--card-h);color:var(--text)}
  .toc-l2 a.active{color:var(--gold2);font-weight:600}
  .toc-expall{
    flex:none;font-size:10.5px;padding:5px 8px;white-space:nowrap;
    border:1px solid var(--border);border-radius:6px;background:transparent;
    color:var(--text-d);cursor:pointer;transition:border-color .15s,color .15s;
  }
  .toc-expall:hover{border-color:var(--gold);color:var(--gold2)}
/* hide mobile-only pieces on desktop */
@media(min-width:1024px){
  #tocBtn{display:none !important}
}


/* ===== READING PROGRESS BAR ===== */
#readingBar{
  position:fixed;top:0;left:0;right:0;height:14px;z-index:500;
  cursor:pointer;
}
.reading-fill{
  position:absolute;top:0;left:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  box-shadow:0 0 8px rgba(212,175,55,0.5);
  transition:width .08s linear,height .15s ease;
  border-radius:0 2px 2px 0;
}
#readingBar:hover .reading-fill{height:6px}
.reading-ticks{
  position:absolute;top:0;left:0;right:0;height:100%;pointer-events:none;
}
.reading-tick{
  position:absolute;top:0;width:2px;height:8px;transform:translateX(-1px);
  background:rgba(255,255,255,0.9);border-radius:1px;
  box-shadow:0 0 3px rgba(0,0,0,0.5);
}

.reading-pct{
  position:absolute;right:0;top:-14px;transform:translateX(50%);
  font-size:10px;font-weight:800;letter-spacing:.3px;
  color:var(--gold2);background:rgba(10,10,14,0.72);
  border:1px solid var(--border-a);border-radius:7px;
  padding:1px 6px;white-space:nowrap;pointer-events:none;
}
:root[data-theme="light"] .reading-pct{background:rgba(255,252,244,0.9)}


/* ===== NAV: desktop current page highlight ===== */
@media(min-width:641px){
  .nav-inner .nav-links a.active{
    background:linear-gradient(135deg,rgba(212,175,55,0.22),rgba(212,175,55,0.08));
    color:var(--gold2) !important;font-weight:700;
    box-shadow:inset 0 -2px 0 var(--gold2);}
  .nav-chapters-toggle.active{
    color:var(--gold2) !important;font-weight:700;
    box-shadow:inset 0 -2px 0 var(--gold2);}
}

/* ===== NAV: current page highlight ===== */
/* ===== NAV: current page highlight ===== */
#navDrawer .nav-links a.active{
  background:linear-gradient(135deg,rgba(212,175,55,0.2),rgba(212,175,55,0.08)) !important;
  color:var(--gold2) !important;font-weight:700;
  border-left:3px solid var(--gold2);
  padding-left:11px;
}


/* ===== NAV: recent chapter history ===== */
.nav-recent{padding:2px 12px 10px}
.nav-recent-title{
  font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:var(--text-d);margin:4px 2px 6px;}
.nav-recent-list{display:flex;flex-direction:column;gap:5px}
.nav-ch-recent{
  display:block;padding:8px 10px;border-radius:9px;
  background:var(--card);border:1px solid var(--border);
  color:var(--text);font-size:12px;font-weight:600;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nav-ch-recent:hover{background:var(--card-h);color:var(--text)}

/* ===== NAV: prev/next quick buttons (drawer bottom) ===== */
/* ===== NAV: prev/next quick buttons (drawer bottom) ===== */
.nav-ch-prevnext{
  display:flex;gap:8px;padding:10px 12px 14px;
  border-top:1px solid var(--border);}
.nav-ch-prevnext a{
  flex:1;text-align:center;padding:10px 8px;border-radius:10px;
  background:var(--card);border:1px solid var(--border-a);
  color:var(--text);font-size:13px;font-weight:700;text-decoration:none;}
.nav-ch-prevnext a:hover{background:var(--card-h)}
.nav-ch-prevnext a.nav-ch-next{color:var(--gold2);border-color:var(--gold2)}

/* ===== NAV: current chapter badge ===== */
/* ===== NAV: current chapter badge ===== */
#navCurrentChapter{
  margin:10px 12px 2px;padding:9px 12px;border-radius:10px;
  background:linear-gradient(135deg,rgba(212,175,55,0.22),rgba(212,175,55,0.08));
  border:1px solid var(--border-a);
  color:var(--gold2);font-size:13px;font-weight:700;text-align:center;
  cursor:pointer;user-select:none;
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
}
#navCurrentChapter:hover{border-color:var(--gold2)}
.nav-cur-arrow{font-size:10px;color:var(--gold2);transition:transform .2s}
.nav-ch-switcher{width:100%;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border-a)}


/* ===== NAV: quick actions (back-to-top + chapter chips) ===== */
.nav-quick{padding:12px 12px 6px;border-bottom:1px solid var(--border)}
#navTopBtn{
  display:block;width:100%;padding:10px 12px;margin-bottom:10px;
  border-radius:10px;border:1px solid var(--border-a);
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1a1a;
  font-size:13px;font-weight:700;cursor:pointer;
}
#navTopBtn:active{transform:scale(0.98)}
.nav-chapter-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.nav-chapter-chip{
  display:flex;flex-direction:column;gap:2px;text-align:start;text-decoration:none;
  padding:9px 10px;border-radius:10px;min-width:0;
  background:var(--card);border:1px solid var(--border);
}
.nav-chapter-chip:hover{background:var(--card-h)}
.nav-ch-chip-tag{font-size:10px;font-weight:800;color:var(--gold2);letter-spacing:.5px}
.nav-ch-chip-title{font-size:12px;font-weight:700;color:var(--text-d);line-height:1.35;overflow-wrap:break-word}
.nav-chapter-chip:hover .nav-ch-chip-title{color:var(--text)}



.nav-chapter-chip.active{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#1a1a1a;border-color:var(--gold2);font-weight:700;
}
.nav-chapter-chip.active .nav-ch-chip-title{color:#1a1a1a}
.nav-chapter-chip.active .nav-ch-chip-tag{color:#8a6c1c}
/* ===== NAV: chapter search ===== */
.nav-ch-search-wrap{padding:0 12px 8px}
.nav-ch-search{
  width:100%;box-sizing:border-box;padding:8px 10px;border-radius:8px;
  border:1px solid var(--border-a);background:var(--card);color:var(--text);
  font-size:12px;font-weight:600;outline:none;}
.nav-ch-search:focus{border-color:var(--gold2)}
.nav-ch-search-empty{padding:8px 4px 2px;font-size:11px;color:var(--text-d);text-align:center}
.nav-chapters-drop .nav-ch-search-wrap{padding:0 0 8px}

/* ===== NAV: desktop Chapters dropdown ===== */
/* ===== NAV: desktop Chapters dropdown ===== */
@media(min-width:641px){
  .nav-chapters-wrap{position:relative;margin-left:2px}
  .nav-chapters-toggle{
    background:none;border:none;cursor:pointer;font:inherit;
    color:var(--text-d);font-weight:600;font-size:14px;
    padding:8px 6px;border-radius:8px;}
  .nav-chapters-toggle:hover{color:var(--text)}
  .nav-chapters-caret{font-size:10px;margin-left:2px;color:var(--gold2)}
  /* ★ 2026-10-11 修：这里原来只有 min-width，而下拉里 27 个 <a> 全是 inline ⇒
     它们在 280px 的绝对定位盒里横向流动、还会从词中间断开
     （实测「段位冲阶路线」被断成「段位冲阶 / 路线」）。
     这个下拉必须点开才现，收起时是 opacity:0;visibility:hidden，
     会被可见性闸门正确排除 ⇒ 前 17 轮的全站静态扫描一次都没看到它。
     第 18 轮做学习中心时点击截图才发现（新旧两版渲染同为 280x304，确认是既有问题）。
     改成 grid 三列 + 每个链接 block：27 项排成 9 行，总高约 300px，不会顶出视口。 */
  .nav-chapters-drop{
    position:absolute;top:calc(100% + 10px);right:0;z-index:20;
    min-width:460px;max-width:min(620px,calc(100vw - 20px));
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;
    background:var(--bg2);border:1px solid var(--border-a);border-radius:12px;
    box-shadow:0 14px 40px rgba(0,0,0,0.35);padding:10px;
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s;}
  .nav-chapters-drop > a{
    display:block;padding:8px 10px;font-size:13.5px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav-chapters-drop > .nav-ch-search-wrap{grid-column:1 / -1}
  .nav-chapters-wrap.open .nav-chapters-drop{
    opacity:1;visibility:visible;transform:translateY(0)}
}
@media(max-width:640px){.nav-chapters-wrap{display:none}}

/* ===== NAV: bottom ↑Top capsule ===== */
.nav-top-cap{
  position:fixed;top:14px;right:16px;z-index:95;
  display:flex;align-items:center;gap:5px;
  padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,0.18);
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1a1a;
  font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,0.28);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s,box-shadow .22s;
}
.nav-top-cap.show{
  opacity:1;visibility:visible;transform:translateY(0);
  /* keyframes entry: opacity + translate two-channel. Plays from the 0%
     hidden frame no matter what the browser committed, so a freshly-
     created capsule can never hard-cut in (no reflow hack needed).
     backwards fill holds the hidden frame at start; no forwards fill so
     hover/active transforms keep working after the entry finishes. */
  animation:navCapIn .24s ease-out backwards;
}
@keyframes navCapIn{
  0%{opacity:0;visibility:hidden;transform:translateY(-10px)}
  100%{opacity:1;visibility:visible;transform:translateY(0)}
}
.nav-top-cap:hover{transform:translateY(-1px);box-shadow:0 8px 26px rgba(0,0,0,0.34)}
.nav-top-cap:active{transform:translateY(0) scale(0.97)}
/* Return-mode: after clicking ↑Top the capsule slides to the bottom-center
   and becomes a live progress indicator - a conic ring fills around the pill
   (--cap-progress 0..100) and the label shows the remaining distance %. Ends
   and fades out when the top is reached. */
.nav-top-cap .cap-ring{
  position:absolute;inset:-3px;border-radius:999px;pointer-events:none;opacity:0;
  background:conic-gradient(var(--gold2) calc(var(--cap-progress,0) * 1%), rgba(255,255,255,0.18) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  transition:opacity .22s ease;
}
.nav-top-cap.returning .cap-ring{opacity:1}
.nav-top-cap.returning{
  top:auto;right:auto;bottom:16px;left:50%;transform:translateX(-50%);
  z-index:110;   /* above the sticky nav (100), below drawers */
}
.nav-top-cap.returning:hover{transform:translateX(-50%) translateY(-1px)}
.nav-top-cap.returning:active{transform:translateX(-50%) scale(0.97)}
/* Keyboard accessibility: a clear gold focus ring on the capsule, and the
   visually-hidden live region that announces scroll context on focus. */
.nav-top-cap:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.cap-live{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
/* js/a11y-live.js 的状态播报容器（WCAG 4.1.3 Status Messages）。
   与上面的 .cap-live 是**同一套视觉隐藏技术** —— 关键点是
   **绝不能用 display:none / visibility:hidden**，那样屏幕阅读器也读不到。 */
.a11y-live{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
:root[data-theme="light"] .nav-top-cap{
  box-shadow:0 6px 20px rgba(120,90,20,0.25);
}
@media (prefers-reduced-motion: reduce){
  .nav-top-cap{transition:none !important;animation:none !important}
}

/* ===== NAV: scroll hide/show ===== */
/* ===== NAV: scroll hide/show ===== */
.nav{transition:transform .38s cubic-bezier(0.34, 1.56, 0.64, 1),
  opacity .3s ease, box-shadow .3s ease,
  background .3s ease, -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease}
.nav.nav-hidden{transform:translateY(-102%)}
/* edge-triggered reveal gets a springy pop: overshoot past the rest position
   then settle, distinct from the calmer scroll-restore transition. */
.nav.nav-edge-pop{
  animation:navEdgePop .48s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes navEdgePop{
  0%{transform:translateY(-102%); opacity:0; animation-timing-function:ease-out}
  55%{opacity:1}
  62%{transform:translateY(calc(var(--nav-pop-overshoot) * 1%))}
  100%{transform:translateY(0); opacity:1}
}
/* iOS-style spring restore: scroll-restore from -102% overshoots past the rest
   position, dips back, then settles — classic double-oscillation settle. */
.nav.nav-restore-pop{
  animation:navRestorePop .45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes navRestorePop{
  0%{transform:translateY(-102%); opacity:0; animation-timing-function:ease-out}
  55%{opacity:1}
  68%{transform:translateY(calc(var(--nav-pop-overshoot) * 1%))}
  84%{transform:translateY(calc(var(--nav-pop-overshoot) * -0.375%))}
  100%{transform:translateY(0); opacity:1}
}
/* edge-hold countdown bar: fills over EDGE_HOLD_MS at the held edge so

   the user knows the nav is about to slide out. Gold fill, follows the

   pointer, duration driven by --edge-hold-ms (runtime-tuned via navzone). */

.nav-edge-progress{

  position:fixed; width:104px; height:3px; border-radius:3px;

  transform:translateX(-50%);

  background:rgba(255,255,255,0.16);

  overflow:hidden;

  opacity:0; visibility:hidden;

  pointer-events:none;

  z-index:1500;

  transition:opacity .12s ease;

}

.nav-edge-progress::before{

  content:""; display:block; width:100%; height:100%;

  background:linear-gradient(90deg, rgba(212,175,55,0.9), rgba(255,214,102,1));

  transform-origin:left;

  transform:scaleX(0);

}

.nav-edge-progress.on{ opacity:1; visibility:visible; }

.nav-edge-progress.on::before{

  animation:edgeHoldFill var(--edge-hold-ms, 200ms) linear forwards;

}

@keyframes edgeHoldFill{

  from{transform:scaleX(0)}

  to{transform:scaleX(1)}

}

@media (prefers-reduced-motion: reduce){
  .nav.nav-edge-pop{animation:none !important}
  .nav.nav-restore-pop{animation:none !important}
  #tocDrawer,#navDrawer,#tocSide{transition:none !important}
}
/* scrolled: deeper drop shadow once the page moves under the nav */
.nav.nav-scrolled{
  box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 14px 44px rgba(0,0,0,0.34);
  border-bottom-color:rgba(255,255,255,0.10);
}
:root[data-theme="light"] .nav.nav-scrolled{
  box-shadow:0 1px 0 rgba(255,255,255,0.7) inset, 0 16px 48px rgba(120,90,20,0.20);
  border-bottom-color:rgba(120,90,20,0.30);
}
/* navshadow=light/strong presets (A/B feel tuning): lighter or deeper

   scrolled drop shadows, each with its own light-theme variant. */

.nav.nav-scrolled-light{

  box-shadow:0 1px 0 rgba(255,255,255,0.05) inset, 0 10px 28px rgba(0,0,0,0.22);

  border-bottom-color:rgba(255,255,255,0.07);

}

.nav.nav-scrolled-strong{

  box-shadow:0 1px 0 rgba(255,255,255,0.08) inset, 0 18px 60px rgba(0,0,0,0.46);

  border-bottom-color:rgba(255,255,255,0.14);

}

:root[data-theme="light"] .nav.nav-scrolled-light{

  box-shadow:0 1px 0 rgba(255,255,255,0.65) inset, 0 12px 34px rgba(120,90,20,0.14);

  border-bottom-color:rgba(120,90,20,0.22);

}

:root[data-theme="light"] .nav.nav-scrolled-strong{

  box-shadow:0 1px 0 rgba(255,255,255,0.75) inset, 0 20px 60px rgba(120,90,20,0.30);

  border-bottom-color:rgba(120,90,20,0.40);

}

/* iOS-style glass reveal: blur + saturation ease back in on restore, so the
   nav "condenses out of the frosted background" instead of popping. */
@media (prefers-reduced-motion: reduce){
  .nav{transition:none !important}
}


/* ===== CARD TABLE: copy-row button ===== */
.tbl-copy{
  position:absolute;top:6px;right:6px;z-index:2;
  min-width:28px;height:26px;padding:0 8px;
  border:1px solid var(--border-a);border-radius:7px;
  background:var(--card);color:var(--gold2);
  font-size:14px;line-height:24px;cursor:pointer;
  transition:all .2s;
}
.tbl-copy:hover{background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;border-color:var(--gold)}
@media(max-width:640px){
  .tbl-cards tr{position:relative}
  .tbl-copy{top:8px;right:8px}
}


/* ===== CHAPTER ACTIONS: favorite + highlight =====
   Unified responsive rules — same convention as the copy buttons:
   - Mobile (<=640px): actions are ALWAYS visible & tappable.
   - Desktop (>=641px): actions are hidden by default and revealed on
     hover / focus of their host element; they float absolutely so they
     never take inline space. Keyboard users get focus-visible. */
.ch-act-host{position:relative}
.ch-act{
  position:absolute;z-index:4;display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:26px;padding:0 6px;
  border:1px solid var(--border-a);border-radius:8px;
  background:var(--card);color:var(--gold2);
  font-size:13px;line-height:1;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.22);
  transition:all .2s;
}
.ch-act:hover{background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;border-color:var(--gold)}
.ch-fav{top:50%;right:10px;transform:translateY(-50%)}
.ch-fav[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#1a1405;border-color:var(--gold2);
}
h2.ch-act-host{padding-right:38px}
:root[data-theme="light"] .ch-act{box-shadow:0 2px 10px rgba(120,90,20,.18)}
.ch-hl{
  background:rgba(245,215,110,.34);color:inherit;border-radius:3px;
  padding:0 2px;box-shadow:inset 0 -2px 0 rgba(212,175,55,.45);
  cursor:pointer;transition:background .15s;
}
.ch-hl:hover{background:rgba(245,215,110,.55)}
:root[data-theme="light"] .ch-hl{background:rgba(212,175,55,.28)}
:root[data-theme="light"] .ch-hl:hover{background:rgba(212,175,55,.45)}
/* highlight color variants: pink / blue (gold stays the base) */
.ch-hl-pink{background:rgba(255,105,180,.30);box-shadow:inset 0 -2px 0 rgba(255,105,180,.5)}
.ch-hl-pink:hover{background:rgba(255,105,180,.5)}
:root[data-theme="light"] .ch-hl-pink{background:rgba(255,105,180,.26)}
:root[data-theme="light"] .ch-hl-pink:hover{background:rgba(255,105,180,.42)}
.ch-hl-blue{background:rgba(100,165,255,.30);box-shadow:inset 0 -2px 0 rgba(100,165,255,.5)}
.ch-hl-blue:hover{background:rgba(100,165,255,.5)}
:root[data-theme="light"] .ch-hl-blue{background:rgba(100,165,255,.26)}
:root[data-theme="light"] .ch-hl-blue:hover{background:rgba(100,165,255,.42)}
.ch-hl-dim{opacity:.16}
/* filter-by-color chips row (js/chapter-actions.js) */
.hl-filter{position:fixed;top:74px;right:14px;z-index:900;display:none;align-items:center;gap:6px;
  padding:7px 10px;border:1px solid var(--border-a,rgba(212,175,55,.35));border-radius:999px;
  background:var(--bg2,#221a0b);box-shadow:0 8px 26px rgba(0,0,0,.35);
  flex-wrap:wrap;max-width:min(92vw,440px);justify-content:flex-end}
.hl-filter.show{display:inline-flex}
/* 原 10.5px —— 比本站字号阶梯最低档（11.5px，页脚/署名级）还低，不在阶梯内。
   它承担的是筛选条的行首标签，按 11.5px 落回阶梯地板。
   原 opacity:.75 必须去掉：audit.js/probe_el.js 都只用 opacity 做可见性过滤、
   不参与对比度合成，所以「0 违规」的基线看不见它 —— 手算合成后
   浅色 3.60:1 / 深色 4.05:1，双双低于 AA 的 4.5:1。
   去掉后 --text-d 满强度：浅色 6.29:1 / 深色 6.18:1。 */
.hl-filter-label{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-d,#cfc6ae);margin-right:2px}
.hl-chip{border:1px solid var(--border,#3a3122);background:transparent;color:var(--text-d,#cfc6ae);
  border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
  transition:border-color .15s,background .15s,color .15s}
.hl-chip.active{border-color:var(--gold,#d4af37);color:var(--gold2,#e6c96a);background:rgba(212,175,55,.12)}
.hl-chip:hover,.hl-chip:focus-visible{border-color:var(--gold,#d4af37);outline:none}
.hl-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.hl-dot-gold{background:rgba(245,215,110,.95)}
.hl-dot-pink{background:rgba(255,105,180,.95)}
.hl-dot-blue{background:rgba(100,165,255,.95)}
@media(max-width:640px){.hl-filter{top:64px;right:8px;left:8px;justify-content:center}}
.ch-hlbar{
  position:fixed;z-index:1200;display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px 6px 13px;border:1px solid var(--gold);border-radius:999px;
  background:var(--card);color:var(--gold2);font-size:12.5px;cursor:default;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
}
.ch-hlbar-label{font-weight:800;color:var(--gold2);font-size:12.5px;margin-right:2px}
.ch-hl-swatch{width:19px;height:19px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;padding:0;flex:none;transition:transform .12s}
.ch-hl-swatch:hover{transform:scale(1.12)}
.ch-hl-swatch:focus-visible{outline:none;border-color:#fff}
.ch-hl-swatch-active{border-color:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.ch-hl-swatch-gold{background:rgba(245,215,110,.95)}
.ch-hl-swatch-pink{background:rgba(255,105,180,.95)}
.ch-hl-swatch-blue{background:rgba(100,165,255,.95)}
@media(max-width:640px){
  /* 触摸目标对齐本站 44px 基线：原 30×30 比其余控件低一档。
     按钮 26→44 且右缘由 right:10 移到 6，横向多占 18px，所以 h2 的预留
     必须同步 38→54（见本块下一条 h2.ch-act-host），否则末字会钻到按钮底下。
     代价（40 页实测）：246 个标题里多折行 22 个、总高 +668px（约 0.2%），
     13/40 页受影响，最差 course-endgame +116px（占该页 8353px 的 1.4%）。
     这是「标题右侧常驻 44px 按钮」的固有代价 —— 任何右预留都会让接近满行
     的标题折行，除非把触摸区压到文字上（更糟）。 */
  .ch-act{opacity:1;visibility:visible;min-width:44px;height:44px;font-size:17px}
  .ch-fav{right:6px}
  h2.ch-act-host{padding-right:54px}
  .ch-hlbar{font-size:12px;padding:8px 13px}
  /* 取色圆点同样是触摸目标：19×19 → 44×44。整条随之变宽（约 179 → 250px），
     所以浮动条定位不能再靠 placeBar() 里写死的 44/130/36 常量，
     已改为读 offsetWidth/offsetHeight —— 见 js/chapter-actions.js 同名注释。 */
  .ch-hl-swatch{width:44px;height:44px}
  /* 筛选条的色片按钮实测只有 22px 高（宽 37~79px）—— 低于 44px 基线。
     它是 fixed 定位、左右各留 8px 的居中条，加高加宽不会挤到别的东西。
     min-width 是给「All」这种短标签用的（实测只 37px 宽）。 */
  .hl-chip{min-height:44px;min-width:44px}
}
@media(min-width:641px){
  .ch-act{opacity:0;visibility:hidden}
  .ch-act-host:hover .ch-act,
  .ch-act-host:focus-within .ch-act,
  .ch-act:focus-visible{opacity:1;visibility:visible}
}
@media(prefers-reduced-motion:reduce){
  .ch-act,.ch-hlbar{transition:none}
}

/* ===== PAGE-LEVEL EXPAND/COLLAPSE-ALL PILL ===== */
.m2m-expand-all{position:fixed;left:14px;bottom:18px;z-index:390;
  display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--border-a);background:var(--card);color:var(--gold2);
  font-size:12.5px;font-weight:800;cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.25);transition:background .15s,color .15s,transform .15s}
.m2m-expand-all:hover{background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;border-color:var(--gold);transform:translateY(-1px)}
.m2m-expand-all:active{transform:translateY(0) scale(.97)}
/* 页面级「默认展开所有表格」开关 (localStorage 持久化) */
.m2m-expand-default{position:fixed;left:14px;bottom:66px;z-index:390;
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--border-a);background:var(--card);color:var(--gold2);
  font-size:11.5px;font-weight:800;cursor:pointer;line-height:1;
  box-shadow:0 6px 20px rgba(0,0,0,.25);transition:background .15s,color .15s,border-color .15s}
.m2m-expand-default:hover{border-color:var(--gold)}
.m2m-expand-default-track{width:30px;height:17px;border-radius:999px;background:var(--border-a);
  position:relative;transition:background .2s;flex:none}
.m2m-expand-default-thumb{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:#fff;transition:transform .2s}
.m2m-expand-default.on .m2m-expand-default-track{background:linear-gradient(135deg,#d4af37,#f5d76e)}
.m2m-expand-default.on .m2m-expand-default-thumb{transform:translateX(13px)}
.m2m-expand-default.on{color:#f5d76e;border-color:var(--gold)}
@media(min-width:641px){.m2m-expand-default{display:none}}
@media(max-width:380px){.m2m-expand-default{font-size:10.5px;padding:6px 11px;bottom:58px;left:10px}}

/* ===== CARD TABLE: expand/collapse ===== */
.tbl-more-toggle{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin:4px 0 14px;padding:9px;
  border:1px dashed var(--border-a);border-radius:9px;
  background:var(--card);color:var(--gold2);
  font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;
}
.tbl-count{display:inline-block;background:var(--border-a);color:var(--text);border-radius:999px;padding:2px 9px;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.5}
.tbl-more-toggle:hover .tbl-count{background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;border-color:rgba(255,255,255,.28)}
/* 行数徽标状态色: X of X 全部可见 -> 金色实心 (未看全保持上方灰色) */
.tbl-count.tbl-count-all{background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;border:1px solid rgba(255,255,255,.28);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.tbl-more-toggle:hover .tbl-count.tbl-count-all{background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405}
/* 浅色主题行数徽标对比度: --border-a 叠浅底成暗金底
+深字(1.69:1 不达标),
   换浅金底(实测 ~10:1); 金色实心徽标(.tbl-count-all)不受影响保持渐变;
   悬停仍用金色渐变+深字(8.7:1+)。高对比变体加深边框。 */
:root[data-theme="light"] .tbl-count:not(.tbl-count-all){background:rgba(180,140,50,0.20)}
:root[data-theme="light"][data-hc="on"] .tbl-count:not(.tbl-count-all){background:rgba(120,90,20,0.18);border:1px solid rgba(90,65,10,0.55)}
:root[data-theme="light"] .tbl-more-toggle:hover .tbl-count:not(.tbl-count-all),
:root[data-theme="light"] .tier-details-toggle:hover .tbl-count:not(.tbl-count-all){background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;border-color:rgba(255,255,255,.28)}

/* 浅色主题: 条款/折叠按钮默认文字用更深金 (gold2 #8a6c1c 在卡片上 ~4:1 不足 4.5:1,
   换 #7a5c14 ~5:1; 悬停态已是金色渐变+深字 8.7:1+) */
:root[data-theme="light"] .tbl-more-toggle,
:root[data-theme="light"] .tier-details-toggle,
:root[data-theme="light"] .dc-toggle,
:root[data-theme="light"] .coach-fold-toggle{color:#7a5c14}
:root[data-theme="light"] .coach-fold-toggle:hover .tbl-count:not(.tbl-count-all){background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;border-color:rgba(255,255,255,.28)}
.tbl-more-toggle:hover{background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;border-color:var(--gold)}

/* 展开按钮箭头: 固定 ▾ 字形, 展开态旋转 180°(平滑过渡). 覆盖主折叠开关、
   tier Details / dc Details(经 aria-expanded) 与全部展开 pill/角标(经 m2m-all-open) */
.tbl-arrow{display:inline-block;font-style:normal;line-height:1;
  transition:transform .3s cubic-bezier(.4,0,.2,1)}
.tbl-more-toggle.tbl-open .tbl-arrow,
.tier-details-toggle[aria-expanded="true"] .tbl-arrow,
.dc-toggle[aria-expanded="true"] .tbl-arrow,
.m2m-expand-all.m2m-all-open .tbl-arrow,
.tbl-corner-all.m2m-all-open .tbl-arrow{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.tbl-arrow{transition:none}}
@media(max-width:640px){
  /* smooth expand/collapse: animate height + fade + spacing instead of display:none */
  .tbl-cards tr{
    max-height:400px;
    transition:max-height .38s cubic-bezier(.4,0,.2,1), opacity .3s ease,
      border-width .3s ease, margin .3s ease, padding .3s ease;
  }
  .tbl-cards.tbl-collapsed .tbl-row-hidden{
    max-height:0;opacity:0;overflow:hidden;
    border-top-width:0;border-bottom-width:0;
    margin-top:0;margin-bottom:0;
    padding-top:0;padding-bottom:0;
  }
}
@media(prefers-reduced-motion:reduce){
  .tbl-cards tr{transition:none}
  html.m2m-force-cards .tbl-cards tr{transition:none}
}
@media(min-width:641px){
  /* 桌面端折叠体验与移动端一致: 显示折叠开关 + 同样的平滑过渡动画.
     复制按钮保持隐藏(桌面表格纯净); 旧浏览器不支持 :has 时保持原样(display:none 兜底). */
  .tbl-actions{display:none}
  .tbl-actions:has(.tbl-more-toggle){display:flex}
  .tbl-actions:has(.tbl-more-toggle) > *:not(.tbl-more-toggle):not(.tbl-dl-tbl){display:none}
  .tbl-more-toggle{display:flex}
  .tbl-dl-tbl{display:inline-flex}
  /* 与移动端一致的行过渡: 淡出 + 行高收敛. 原生表格行无法动画 max-height,
     用 line-height/padding/border 收缩到 0 实现平滑折叠(内容被 overflow 裁剪). */
  .tbl-cards tr{
    transition:max-height .38s cubic-bezier(.4,0,.2,1), opacity .3s ease,
      border-width .3s ease, margin .3s ease, padding .3s ease,
      line-height .3s ease;
  }
  .tbl-cards.tbl-collapsed .tbl-row-hidden{
    max-height:0;opacity:0;overflow:hidden;
    border-top-width:0;border-bottom-width:0;
    margin-top:0;margin-bottom:0;
    padding-top:0;padding-bottom:0;
    line-height:0;
  }
  .tbl-cards.tbl-collapsed .tbl-row-hidden td{
    overflow:hidden;vertical-align:top;
    padding-top:0 !important;padding-bottom:0 !important;
    line-height:0 !important;
    border-top-width:0;border-bottom-width:0;
  }
  /* 折叠态首行 = 摘要行 (与移动端一致): 浅金底纹 + SUMMARY 角标 */
  .tbl-cards tr.tbl-row-summary{position:relative;
    background:linear-gradient(135deg,rgba(212,175,55,.13),rgba(212,175,55,.04));
    border-color:rgba(212,175,55,.5)}
  .tbl-cards tr.tbl-row-summary::after{
    content:"SUMMARY";position:absolute;top:7px;right:9px;
    padding:2px 8px;border-radius:999px;
    background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;
    font-size:9.5px;font-weight:800;letter-spacing:.06em;line-height:1.4;
    box-shadow:0 1px 3px rgba(0,0,0,.22);pointer-events:none}
  .tbl-copy{display:none}
  /* desktop matrix: ⎘ hidden by default, revealed on card hover / focus */
  .tier-copy{opacity:0;visibility:hidden}
  .tier-card:hover .tier-copy,
  .tier-card:focus-within .tier-copy,
  .tier-copy:focus-visible{opacity:1;visibility:visible}
}
/* 桌面折叠样式镜像: html.m2m-sim-desktop 在任意视口模拟 ≥641px 桌面折叠
   (与 m2m-sim-mobile/m2m-sim-tiny 同一套站点约定, 供夹具/预览使用) */
html.m2m-sim-desktop .tbl-actions{display:none}
html.m2m-sim-desktop .tbl-actions:has(.tbl-more-toggle){display:flex}
html.m2m-sim-desktop .tbl-actions:has(.tbl-more-toggle) > *:not(.tbl-more-toggle):not(.tbl-dl-tbl){display:none}
html.m2m-sim-desktop .tbl-more-toggle{display:flex}
html.m2m-sim-desktop .tbl-dl-tbl{display:inline-flex}
html.m2m-sim-desktop .tbl-cards tr{
  transition:max-height .38s cubic-bezier(.4,0,.2,1), opacity .3s ease,
    border-width .3s ease, margin .3s ease, padding .3s ease,
    line-height .3s ease;
}
html.m2m-sim-desktop .tbl-cards.tbl-collapsed .tbl-row-hidden{
  max-height:0;opacity:0;overflow:hidden;
  border-top-width:0;border-bottom-width:0;
  margin-top:0;margin-bottom:0;
  padding-top:0;padding-bottom:0;
  line-height:0;
}
html.m2m-sim-desktop .tbl-cards.tbl-collapsed .tbl-row-hidden td{
  overflow:hidden;vertical-align:top;
  padding-top:0 !important;padding-bottom:0 !important;
  line-height:0 !important;
  border-top-width:0;border-bottom-width:0;
}
html.m2m-sim-desktop .tbl-cards tr.tbl-row-summary{position:relative;
  background:linear-gradient(135deg,rgba(212,175,55,.13),rgba(212,175,55,.04));
  border-color:rgba(212,175,55,.5)}
html.m2m-sim-desktop .tbl-cards tr.tbl-row-summary::after{
  content:"SUMMARY";position:absolute;top:7px;right:9px;
  padding:2px 8px;border-radius:999px;
  background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;
  font-size:9.5px;font-weight:800;letter-spacing:.06em;line-height:1.4;
  box-shadow:0 1px 3px rgba(0,0,0,.22);pointer-events:none}


/* ===== A/B RECOMMENDED-TIER TOGGLE BAR ===== */
.rec-tier-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;
  padding:10px 12px;border:1px dashed var(--border-a);border-radius:10px;background:var(--card)}
.rec-tier-bar-label{font-size:12px;font-weight:800;color:var(--gold2);letter-spacing:.03em}
.rec-tier-btn{padding:6px 14px;border:1px solid var(--border-a);border-radius:999px;
  background:var(--card);color:var(--text-d);font-size:12px;font-weight:700;cursor:pointer;transition:all .2s}
.rec-tier-btn:hover{border-color:var(--gold);color:var(--gold2)}
.rec-tier-btn-on{background:linear-gradient(135deg,#d4af37,#f5d76e)!important;color:#1a1405!important;
  border-color:var(--gold)!important;box-shadow:0 2px 10px rgba(212,175,55,.3)}
.rec-tier-bar-hint{flex-basis:100%;font-size:11px;color:var(--text-m)}
@media(max-width:380px){
  .rec-tier-btn{padding:6px 10px;font-size:11px}
}

/* ===== AFFILIATE TIER COMPARE CARDS ===== */
.tier-grid{display:none;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:0 0 14px}
/* sample monthly income calculator bar (top of the tier grid) */
.tier-calc{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:10px 12px;border:1px dashed var(--border-a);border-radius:10px;background:var(--card)}
.tier-calc-label{font-size:11px;font-weight:800;color:var(--gold2);text-transform:uppercase;letter-spacing:.05em}
.tier-calc input{width:64px;padding:6px 8px;border:1px solid var(--border-a);border-radius:8px;
  background:var(--card);color:var(--text);font-size:13px;font-weight:700;text-align:center}
.tier-calc input:focus{outline:none;border-color:var(--gold)}
.tier-calc-unit{font-size:11px;color:var(--text-m);white-space:nowrap}
.tier-calc-hint{flex-basis:100%;font-size:10.5px;color:var(--text-m)}
/* per-tier sample income line */
.tier-income{margin-top:8px;padding-top:8px;border-top:1px dashed var(--border-a);
  font-size:12px;font-weight:800;color:var(--gold2);white-space:nowrap}
.tier-income.tier-income-zero{color:var(--text-m)}
.tier-card.tier-rec .tier-income{font-size:13px;font-weight:900;
  background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;
  padding:6px 8px;border-radius:8px;border-top:none;margin-top:8px;text-align:center}
/* Apply Now button on the recommended tier card */
.tier-apply{display:block;width:100%;margin-top:8px;padding:9px 10px;border:none;border-radius:9px;
  background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;font-size:12.5px;font-weight:900;
  cursor:pointer;transition:all .2s;text-align:center;letter-spacing:.03em}
.tier-apply:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(212,175,55,.4)}
.tier-apply:active{transform:translateY(0)}
@media(max-width:380px){
  .tier-apply{font-size:11.5px;padding:8px 8px}
}
.tier-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 10px 10px;overflow:hidden}
.tier-name{font-size:14px;font-weight:800;color:var(--gold2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;padding-right:22px}
.tier-field{margin-top:6px}
.tier-label{display:block;font-size:10px;font-weight:700;color:var(--text-m);text-transform:uppercase;letter-spacing:.04em}
.tier-value{display:block;font-size:12.5px;font-weight:700;color:var(--text);margin-top:2px}
.tier-copy{position:absolute;top:6px;right:6px;min-width:26px;height:24px;padding:0 6px;border:1px solid var(--border-a);border-radius:7px;background:var(--card);color:var(--gold2);font-size:13px;line-height:22px;cursor:pointer;transition:all .2s}
.tier-copy:hover{background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;border-color:var(--gold)}
@media(max-width:640px){
  .tier-grid{display:grid;grid-template-columns:repeat(3,1fr)}
  .tier-card{padding:10px 8px 8px}
  .tier-name{font-size:12.5px}
  .tier-value{font-size:11.5px}
  .tbl-compare{display:none}
}
@media(min-width:641px){
  .tbl-compare thead{display:table-header-group !important}
}


/* ===== COACH COMPARE PANEL (5 personas side by side) ===== */
#comparePanel{margin:0 0 12px;padding:12px;background:var(--card);border:1px solid var(--border);border-radius:12px}
.cmp-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.cmp-head strong{color:var(--gold2);font-size:13px}
.cmp-q{flex:1;min-width:0;font-size:12px;color:var(--text-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-close{border:1px solid var(--border-a);border-radius:7px;background:var(--card);color:var(--text);cursor:pointer;padding:2px 9px;font-size:13px;line-height:1.4}
.cmp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.cmp-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;min-width:0}
.cmp-name{font-size:12px;font-weight:800;color:var(--gold2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.cmp-body{font-size:13px;line-height:1.55;color:var(--text);white-space:normal;word-break:break-word}
.cmp-meta{margin-top:8px}
.cmp-time{display:inline-block;font-size:11px;font-weight:700;color:var(--text-m);
  background:var(--card-h);border:1px solid var(--border-a);border-radius:999px;
  padding:1px 8px;line-height:1.6}
.cmp-time.cmp-time-fast{color:#0a0;border-color:rgba(0,150,0,.45);background:rgba(0,150,0,.10)}
.cmp-time.cmp-time-slow{color:#c0392b;border-color:rgba(192,57,43,.5);background:rgba(192,57,43,.10)}
.cmp-card.cmp-fast{border-color:rgba(0,150,0,.55);box-shadow:0 0 0 1px rgba(0,150,0,.25),0 4px 14px rgba(0,150,0,.12)}
.cmp-card.cmp-slow{border-color:rgba(192,57,43,.55);box-shadow:0 0 0 1px rgba(192,57,43,.22)}
:root[data-theme="light"] .cmp-time{color:#6b5b2e;background:rgba(120,90,20,.08);border-color:rgba(120,90,20,.22)}
:root[data-theme="light"] .cmp-time.cmp-time-fast{color:#0a0;border-color:rgba(0,150,0,.45);background:rgba(0,150,0,.10)}
:root[data-theme="light"] .cmp-time.cmp-time-slow{color:#c0392b;border-color:rgba(192,57,43,.5);background:rgba(192,57,43,.10)}
:root[data-theme="light"] .cmp-card.cmp-fast{border-color:rgba(0,150,0,.55);box-shadow:0 0 0 1px rgba(0,150,0,.25),0 4px 14px rgba(0,150,0,.12)}
:root[data-theme="light"] .cmp-card.cmp-slow{border-color:rgba(192,57,43,.55);box-shadow:0 0 0 1px rgba(192,57,43,.22)}
/* saved-result chip: reopen the last 5-persona compare after a reload */
.cmp-restore-chip{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0;
  padding:7px 12px;border:1px dashed rgba(212,175,55,.5);border-radius:999px;
  background:rgba(212,175,55,.08);color:var(--text);font-size:12px;font-weight:600;
}
.cmp-restore-chip button{
  border:1px solid rgba(212,175,55,.55);border-radius:999px;background:transparent;
  color:var(--gold2);font-size:11px;font-weight:700;cursor:pointer;padding:2px 10px;line-height:1.5;
}
.cmp-restore-chip .cmp-restore-clear{color:var(--text-m);border-color:var(--border-a);padding:2px 8px}
.cmp-restore-chip button:hover{background:rgba(212,175,55,.14)}
#compareBtn.cmp-on{background:var(--gold) !important;color:#fff !important;border-color:var(--gold) !important}
/* ===== COACH: 回答/分析折叠 + 条款计数徽标 (复用全站 .tbl-count 语言) ===== */
.coach-fold-rest{display:none}
.coach-fold-open .coach-fold-rest{display:inline}
.coach-fold-toggle{display:inline-flex;align-items:center;gap:4px;margin:6px 0 0;padding:2px 9px;
  border:1px dashed var(--gold);border-radius:7px;background:transparent;color:var(--gold2);
  font-size:11px;font-weight:700;cursor:pointer;transition:all .2s}
.coach-fold-toggle:hover{background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;border-color:var(--gold)}
.coach-fold-toggle:hover .tbl-count{background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;border-color:rgba(255,255,255,.28)}
.coach-fold-toggle .tbl-count{margin-left:3px;vertical-align:1px}
.coach-fold-toggle[aria-expanded="true"] .tbl-arrow{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.coach-fold-toggle .tbl-arrow{transition:none}}
html.m2m-anim-off .coach-fold-toggle .tbl-arrow{transition:none}

@media(max-width:640px){
  .cmp-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:380px){
  .cmp-grid{grid-template-columns:1fr}
}

/* Adopt / Copy-all on compare cards */
.cmp-actions{margin-top:10px;padding-top:8px;border-top:1px dashed var(--border-a);display:flex;gap:6px;flex-wrap:wrap}
.cmp-adopt{border:1px solid var(--gold);background:linear-gradient(135deg,rgba(212,175,55,.18),rgba(245,215,110,.12));color:var(--gold2);border-radius:7px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s}
.cmp-adopt:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(212,175,55,.25)}
.cmp-adopt:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.cmp-copyall{margin-left:auto}
.cmp-copyall:hover{border-color:var(--gold);color:var(--gold2)}
@media(max-width:380px){
  .cmp-adopt{flex:1;text-align:center}
}

/* Re-ask buttons (archive + chat action bar) */
.shot-reask{border:1px solid var(--border-a);background:var(--card);color:var(--text-d);border-radius:6px;padding:2px 9px;font-size:11px;cursor:pointer;margin-left:6px;vertical-align:middle;transition:border-color .15s,color .15s}
.shot-reask:hover{border-color:var(--gold);color:var(--gold2)}
.coach-reask{margin:-4px 0 10px;padding-left:14px}
.coach-reask .shot-reask{padding:3px 10px;font-size:12px}


/* ===== COACH SCREENSHOT CONTEXT CHIP ===== */
.shot-ctx{display:inline-flex;align-items:center;gap:8px;margin:8px 0;padding:6px 10px;border:1px dashed var(--border-a);border-radius:9px;background:var(--card);font-size:12px;color:var(--text-d)}
.shot-ctx .cmp-close{padding:1px 8px}

/* tier card expandable details (affiliate comparison cards) */
.tier-card{cursor:pointer}
.tier-details-toggle{display:block;width:100%;margin-top:10px;padding:7px 10px;border:1px dashed var(--gold);border-radius:8px;background:transparent;color:var(--gold2);font-size:12px;font-weight:700;cursor:pointer;text-align:center;transition:all .2s}
.tier-details-toggle:hover{background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;border-color:var(--gold)}
.tier-details-toggle .tbl-count{margin-left:7px;vertical-align:1px}
.tier-details-toggle:hover .tbl-count{background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;border-color:rgba(255,255,255,.28)}
.tier-details-toggle:hover .tbl-count.tbl-count-all{background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405}
.tier-details{overflow:hidden;max-height:0;opacity:0;margin-top:0;padding:10px 12px;border-top:1px solid var(--border);background:var(--card);border-radius:8px;color:var(--text-d);font-size:12px;line-height:1.6;white-space:pre-line;text-align:start;transition:max-height .38s cubic-bezier(.4,0,.2,1),opacity .3s ease,margin .3s ease,padding .3s ease,border-width .3s ease}
.tier-details .hl-key,.dc-details .hl-key{color:var(--gold2);font-weight:800;background:linear-gradient(transparent 58%,rgba(212,175,55,.25) 58%);border-radius:2px;padding:0 1px}
.tier-card.tier-open .tier-details{max-height:600px;opacity:1;margin-top:10px}
@media (max-width:380px){
  .tier-details{font-size:11px;padding:8px 9px}
  .tier-details-toggle{font-size:11px;padding:6px 8px}
}

/* ===== UNIFIED TIER CARDS ON DESKTOP (>=1024px) ===== */
@media(min-width:1024px){
  .tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 20px}
  .tbl-compare{display:none}
  .tier-card{padding:20px 18px 16px;border-radius:16px;box-shadow:0 4px 18px rgba(0,0,0,.08)}
  .tier-card.tier-rec{box-shadow:0 0 0 2px var(--gold),0 6px 24px rgba(212,175,55,.25)}
  .tier-name{font-size:17px;margin-bottom:12px}
  .tier-field{margin-top:8px}
  .tier-label{font-size:11px}
  .tier-value{font-size:15px;margin-top:3px}
  .tier-income{font-size:14px;margin-top:10px;padding-top:10px}
  .tier-card.tier-rec .tier-income{font-size:15px;padding:8px 10px}
  .tier-apply{margin-top:10px;padding:11px 14px;font-size:14px}
  .tier-calc{padding:12px 16px;gap:10px}
  .tier-calc-label{font-size:12px}
  .tier-calc input{width:76px;padding:7px 10px;font-size:14px}
  .tier-calc-hint{font-size:11.5px}
  .tier-details{font-size:13px;line-height:1.7}
  .tier-details-toggle{font-size:13px;padding:9px 12px}
  .tier-copy{min-width:30px;height:28px;line-height:26px;font-size:14px}
  .tbl-actions-compare{justify-content:center;gap:10px}
}

/* ===== DESKTOP TIER COMPARE MATRIX (>=1024px) ===== */
@media(min-width:1024px){
  .tbl-compare.tbl-dcompare-hide{display:none}
  .dcompare{display:grid;grid-template-columns:minmax(170px,230px) repeat(3,1fr);gap:12px;margin:0 0 18px}
  .dc-row{display:contents}
  .dc-label{display:flex;align-items:center;padding:12px 6px;font-size:12px;font-weight:800;color:var(--text-m);text-transform:uppercase;letter-spacing:.05em}
  .dc-cell{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 14px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;font-size:16px;font-weight:700;color:var(--text);min-height:58px}
  .dc-income{font-size:15px;font-weight:900;color:var(--gold2);white-space:nowrap}
  .dc-income.tier-income-zero{color:var(--text-m);font-weight:700}
  .dc-income-cell.dc-income-rec .dc-income{font-size:17px;background:linear-gradient(135deg,#d4af37,#f5d76e);
    padding:7px 12px;border-radius:9px;color:#1a1405;box-shadow:0 2px 10px rgba(212,175,55,.35)}
  .dc-income-cell.dc-income-rec{border:1.5px solid var(--gold)}
  .dc-apply{margin-top:10px;padding:10px 14px;font-size:14px}
  /* column + row hover highlight */
  .dcompare .dc-cell{transition:background-color .18s ease,filter .18s ease,opacity .18s ease,box-shadow .18s ease}
  .dcompare .dc-cell.dc-col-h{background:linear-gradient(135deg,rgba(212,175,55,.20),rgba(245,215,110,.08))!important;
    box-shadow:inset 0 0 0 1px rgba(212,175,55,.45)}
  .dcompare.dc-col-active .dc-cell:not(.dc-col-h){filter:saturate(.5);opacity:.55}
  .dcompare .dc-row.dc-row-h .dc-cell{background:linear-gradient(135deg,rgba(212,175,55,.14),rgba(245,215,110,.05))!important}
  .dcompare.dc-row-active .dc-row:not(.dc-row-h) .dc-cell:not(.dc-col-h){filter:saturate(.5);opacity:.55}
  .dcompare.dc-col-active .dc-head-cell.dc-col-h{border-color:var(--gold)}
  .dcompare.dc-col-active .dc-label{filter:none;opacity:1}
  .dc-actions{justify-content:center;margin:0 0 18px}
  .dc-actions .tbl-copy-tbl{min-width:64px}
  .dc-head-cell{position:relative;border:1.5px solid var(--gold);background:linear-gradient(135deg,rgba(212,175,55,.16),rgba(245,215,110,.07))}
  .dc-tier-name{font-size:18px;font-weight:900;color:var(--gold2);text-transform:uppercase;letter-spacing:.07em}
  .dc-copy{position:absolute;top:8px;right:8px;min-width:28px;height:26px;padding:0 7px;border:1px solid var(--border-a);border-radius:8px;background:var(--card);color:var(--gold2);font-size:14px;line-height:24px;cursor:pointer;transition:all .2s}
  .dc-copy:hover{background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;border-color:var(--gold)}
  .dc-det-cell{justify-content:flex-start;min-height:0;padding:10px}
  .dc-toggle{display:block;width:100%;padding:8px 10px;border:1px dashed var(--gold);border-radius:8px;background:transparent;color:var(--gold2);font-size:13px;font-weight:700;cursor:pointer;transition:all .2s}
  .dc-toggle:hover{background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;border-color:var(--gold)}
  .dc-details{overflow:hidden;max-height:0;opacity:0;margin-top:0;padding:10px 12px;border-top:1px solid var(--border);background:var(--card);border-radius:8px;color:var(--text-d);font-size:13px;line-height:1.65;white-space:pre-line;text-align:start;max-width:100%;transition:max-height .38s cubic-bezier(.4,0,.2,1),opacity .3s ease,margin .3s ease,padding .3s ease,border-width .3s ease}
  .dc-cell.dc-open .dc-details{max-height:600px;opacity:1;margin-top:10px}
}

/* ===== RECOMMENDED TIER HIGHLIGHT ===== */
.tier-card.tier-rec{border:2px solid var(--gold);box-shadow:0 0 0 1px var(--gold),0 6px 18px rgba(212,175,55,.28)}
.tier-rec-badge{display:inline-block;margin:0 auto 6px;background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;font-size:11px;font-weight:900;padding:2px 8px;border-radius:999px;line-height:1.3;text-align:center;letter-spacing:.03em}
@media(min-width:1024px){
  .dc-head-cell.dc-rec{border:2px solid var(--gold);box-shadow:0 6px 20px rgba(212,175,55,.25)}
  .dc-rec-badge{display:inline-block;align-self:center;margin-bottom:6px;background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;font-size:11px;font-weight:900;padding:3px 10px;border-radius:999px;letter-spacing:.03em}
}

/* ===== CARD TABLE: whole-table copy actions ===== */
.tbl-actions{display:flex;align-items:stretch;gap:8px;margin:4px 0 14px}
.tbl-actions .tbl-more-toggle{flex:1;width:auto;margin:0}
/* ---- 多表折叠动画的合成性能 ---- */
/* 屏外表格跳过渲染(滚入视口自动恢复); contain-intrinsic-size:auto 记住上次
   真实尺寸, 避免滚动条跳动. 放在表格自身而非 .table-wrap 上: wrap 若含
   layout 会变成绝对定位后代的包含块, 干扰网格/角标等定位. 代价: 外层光晕
   会被 paint 裁剪, 故闪光用内阴影. */
.tbl-cards{content-visibility:auto;contain-intrinsic-size:auto 200px;contain:layout}
/* 动画窗口内(JS .tbl-animating 类)预提升行图层, 淡出走合成器; 结束后释放 */
.tbl-animating.tbl-cards tr{will-change:opacity}
.tbl-animating .tier-details,.tbl-animating .dc-details{will-change:max-height,opacity}
/* 表格作为滚动目标时让开固定导航 (与 article.chapter h2 同一 70px 约定) */
.table-wrap table{scroll-margin-top:70px}
.tbl-copy-tbl{min-width:54px;padding:0 12px;border:1px dashed var(--border-a);border-radius:9px;
  background:var(--card);color:var(--gold2);font-size:12px;font-weight:800;cursor:pointer;
  transition:all .2s}
.tbl-copy-tbl:hover{background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;border-color:var(--gold)}
.tbl-dl-tbl{border-style:solid;border-color:rgba(212,175,55,.45)}
.tbl-dl-tbl:hover{background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;border-color:var(--gold)}
.tbl-actions-compare{justify-content:center}

/* Apply Now: brief golden flash when the visitor lands on the form */
form.apply-flash{animation:applyFlash 1.6s ease}
@keyframes applyFlash{
  0%,60%{box-shadow:0 0 0 3px rgba(212,175,55,.55)}
  100%{box-shadow:0 0 0 0 rgba(212,175,55,0)}
}

/* 点击「Show all」展开后: 金色光环脉冲焦点提示 */
.tbl-expand-flash{animation:tblExpandFlash 1.6s ease}
@keyframes tblExpandFlash{
  0%,60%{box-shadow:inset 0 0 0 3px rgba(212,175,55,.55), inset 0 0 20px rgba(212,175,55,.22)}
  100%{box-shadow:inset 0 0 0 0 rgba(212,175,55,0)}
}
@media (prefers-reduced-motion: reduce){
  .tbl-expand-flash{animation:none !important}
  .tbl-animating.tbl-cards tr{will-change:auto}
  .tier-details,.dc-details{transition:none}
  .tbl-animating .tier-details,.tbl-animating .dc-details{will-change:auto}
}

/* ?anim=off (html.m2m-anim-off): 关闭全部折叠/详情动画 — 无障碍/低配环境.
   JS 侧已关级联延迟、不预提升图层、无平滑滚动、无展开闪光, 这里兜底关掉 CSS 过渡 */
html.m2m-anim-off .tbl-cards tr{transition:none !important}
html.m2m-anim-off .tier-details,html.m2m-anim-off .dc-details{transition:none !important}
html.m2m-anim-off .tbl-arrow{transition:none}
html.m2m-anim-off .tbl-expand-flash{animation:none !important}
html.m2m-anim-off .tbl-animating.tbl-cards tr{will-change:auto}
html.m2m-anim-off .tbl-animating .tier-details,html.m2m-anim-off .tbl-animating .dc-details{will-change:auto}
/* ===== 错峰淡入动画: tier-details 条款 & 双栏卡入场 (与表格行级联同一 CASCADE_MS 语言) ===== */
/* tier-details 展开时条款逐条淡入: JS 按 i*CASCADE_MS 设 transition-delay; 收起无延迟一起淡出 */
.tier-details .tier-clause{display:inline;opacity:0;transition:opacity .3s ease}
.tier-card.tier-open .tier-details .tier-clause,
.dc-cell.dc-open .dc-details .tier-clause{opacity:1}
/* 双栏卡入场: 卡片与条目级联淡入 (animation-delay 由 JS 按行序设置; backwards 填充延迟期初始态) */
.dual-grid.dual-in .dual-card{animation:m2mDualIn .35s cubic-bezier(.4,0,.2,1) backwards}
.dual-grid.dual-in .dual-item{animation:m2mDualIn .3s cubic-bezier(.4,0,.2,1) backwards}
@keyframes m2mDualIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .tier-details .tier-clause{transition:none}
  .dual-grid.dual-in .dual-card,.dual-grid.dual-in .dual-item{animation:none}
}
html.m2m-anim-off .tier-details .tier-clause{transition:none}
html.m2m-anim-off .dual-grid.dual-in .dual-card,html.m2m-anim-off .dual-grid.dual-in .dual-item{animation:none}


/* ===== COPY TOAST (check/cross icon + click to dismiss) ===== */
.m2m-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px) scale(.94);
  max-width:86%;padding:10px 18px;border-radius:10px;font-size:13px;font-weight:700;color:#fff;
  background:rgba(22,20,12,.94);border:1px solid var(--gold);box-shadow:0 8px 24px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .28s cubic-bezier(.2,.9,.3,1.25);
  z-index:9999;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px}
.m2m-toast-show{opacity:1;transform:translateX(-50%) translateY(0) scale(1);pointer-events:auto;cursor:pointer}
.m2m-toast-ico{font-weight:900;font-size:14px;line-height:1;flex:0 0 auto}
.m2m-toast-ok .m2m-toast-ico{color:#4ade80}
.m2m-toast-err .m2m-toast-ico{color:#ff7b81}
.m2m-toast-ok{border-color:rgba(74,222,128,.55)}
.m2m-toast-err{border-color:#e5484d;background:rgba(64,16,20,.94)}
/* coach 等页面顶部提示: 同一套视觉, 位置置顶避开底部输入栏/导航 */
.m2m-toast-top{bottom:auto;top:76px;transform:translateX(-50%) translateY(-16px) scale(.94)}

/* 自适应固定提示横幅: 同一卡片反复被自动收起 -> 提供固定/忽略选择 */
.m2m-pin-banner{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(10px) scale(.97);z-index:940;width:min(88vw,420px);padding:14px 16px;border:1px solid rgba(212,175,55,.45);border-radius:12px;background:rgba(24,18,8,.96);backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s cubic-bezier(.4,0,.2,1);text-align:start}
.m2m-pin-banner.m2m-pin-show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1)}
:root[data-theme=light] .m2m-pin-banner{background:rgba(255,252,244,.97);border-color:rgba(138,108,28,.5)}
.m2m-pin-title{font-weight:800;color:#f5d76e;font-size:14px}
:root[data-theme=light] .m2m-pin-title{color:#7a5c14}
.m2m-pin-sub{font-size:12px;color:#a89a7a;margin:4px 0 10px;line-height:1.5}
:root[data-theme=light] .m2m-pin-sub{color:#6b5b3a}
.m2m-pin-actions{display:flex;gap:8px;justify-content:flex-end}
.m2m-pin-yes{background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;font-weight:700;padding:6px 14px;border:none;border-radius:8px;cursor:pointer;font-size:13px}
.m2m-pin-yes:hover,.m2m-pin-yes:focus-visible{filter:brightness(1.08)}
.m2m-pin-no{background:rgba(255,255,255,.08);color:#efe6d2;border:1px solid rgba(255,255,255,.18);padding:6px 14px;border-radius:8px;cursor:pointer;font-size:13px}
.m2m-pin-no:hover,.m2m-pin-no:focus-visible{background:rgba(255,255,255,.14)}
:root[data-theme=light] .m2m-pin-no{background:rgba(0,0,0,.05);color:#3a3220;border-color:rgba(0,0,0,.15)}
.m2m-toast-top.m2m-toast-show{transform:translateX(-50%) translateY(0) scale(1)}

/* ===== TOAST 历史回看 (右下角) ===== */
.m2m-toast-hist-btn{position:fixed;right:14px;bottom:56px;z-index:950;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--border-a,rgba(212,175,55,.35));
  background:var(--bg2,#221a0b);color:var(--gold2,#e6c96a);font-size:15px;line-height:1;
  cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.28);display:flex;align-items:center;
  justify-content:center;transition:transform .15s,background .15s,border-color .15s}
.m2m-toast-hist-btn:hover,.m2m-toast-hist-btn:focus-visible{background:var(--gold,#d4af37);
  color:#1a1405;border-color:var(--gold);outline:none}
.m2m-toast-hist-btn:active{transform:scale(.94)}
.m2m-toast-hist{position:fixed;right:14px;bottom:96px;z-index:960;width:min(88vw,340px);
  max-height:min(60vh,420px);display:flex;flex-direction:column;
  background:var(--bg2,#221a0b);border:1px solid var(--border-a,rgba(212,175,55,.35));
  border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transform:translateY(6px) scale(.98);
  transition:opacity .16s ease,transform .16s ease,visibility .16s}
.m2m-toast-hist.open{opacity:1;visibility:visible;transform:none}
.m2m-hist-head{padding:11px 14px 9px;font-size:12px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold2,#e6c96a);border-bottom:1px solid var(--border,#3a3122);
  display:flex;align-items:center;gap:6px}
.m2m-hist-count{color:var(--text-d,#cfc6ae);opacity:.8;font-size:11px}
.m2m-hist-body{overflow-y:auto;padding:6px 8px;flex:1}
.m2m-hist-item{display:flex;align-items:flex-start;gap:8px;padding:7px 8px;border-radius:10px;
  color:var(--text,#e8e2d2);font-size:13px;line-height:1.45}
.m2m-hist-item:hover{background:rgba(212,175,55,.08)}
.m2m-hist-ico{font-weight:900;font-size:12px;flex:none;margin-top:1px}
.m2m-hist-item.m2m-hist-ok .m2m-hist-ico{color:#4ade80}
.m2m-hist-item.m2m-hist-err .m2m-hist-ico{color:#ff7b81}
.m2m-hist-text{flex:1;min-width:0;overflow-wrap:break-word}
.m2m-hist-time{flex:none;font-size:10.5px;color:var(--text-d,#9a9aa5);opacity:.75;margin-left:6px}
.m2m-hist-empty{padding:22px 14px;text-align:center;color:#999;font-size:12.5px}
.m2m-hist-foot{padding:9px 12px;border-top:1px solid var(--border,#3a3122);display:flex;justify-content:flex-end}
.m2m-hist-clear{border:1px solid rgba(220,90,90,.45);background:rgba(220,90,90,.1);color:#ff9b9b;
  border-radius:999px;padding:5px 14px;font-size:12px;font-weight:700;cursor:pointer}
.m2m-hist-clear:hover,.m2m-hist-clear:focus-visible{background:rgba(220,90,90,.22);outline:none}
@media(prefers-reduced-motion:reduce){
  .m2m-toast-hist,.m2m-toast-hist-btn{transition:none}
}
@media(max-width:640px){
  .m2m-toast-hist{right:10px;bottom:92px;width:calc(100vw - 20px)}
  .m2m-toast-hist-btn{right:10px;bottom:56px}
  .coach-page .m2m-toast-hist-btn{bottom:118px}
  .coach-page .m2m-toast-hist{bottom:158px}
}
@media(prefers-reduced-motion:reduce){
  .m2m-toast{transform:translateX(-50%) translateY(16px);transition:opacity .15s linear}
  .m2m-pin-banner{transition:none}
  .m2m-toast-show{transform:translateX(-50%) translateY(0)}
  .m2m-toast-top{transform:translateX(-50%) translateY(-16px)}
  .m2m-toast-top.m2m-toast-show{transform:translateX(-50%) translateY(0)}
}

/* ===== DUAL-COLUMN CARDS (2-col tables, ultra-narrow <=380px) ===== */
.dual-grid{display:none;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 6px}
.dual-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:10px 10px 8px;overflow:hidden}
.dual-title{font-size:12.5px;font-weight:800;color:var(--gold2);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:4px;padding-right:24px}
.dual-item{font-size:12px;line-height:1.5;color:var(--text-d);padding:6px 0;border-top:1px solid var(--border)}
.dual-card .dual-item:first-of-type{border-top:none;padding-top:4px}
/* wrong/right opposition: left card red, right card gold */
.dual-card.dual-wrong{
  background:linear-gradient(180deg,rgba(229,72,77,.10),rgba(229,72,77,.03));
  border-color:rgba(229,72,77,.38);
}
.dual-card.dual-wrong .dual-title{color:#ff7b81}
.dual-card.dual-wrong .dual-title::before{content:"❌ ";font-size:1.1em}
.dual-card.dual-right .dual-title::before{content:"✅ ";font-size:1.1em}
.dual-card.dual-wrong::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#ff6b70,rgba(229,72,77,.25));
}
.dual-card.dual-wrong .dual-item{border-top-color:rgba(229,72,77,.22)}
.dual-card.dual-right{
  background:linear-gradient(180deg,rgba(212,175,55,.12),rgba(212,175,55,.03));
  border-color:var(--border-a,rgba(212,175,55,.35));
}
.dual-card.dual-right .dual-title{color:var(--gold2,#e6c96a)}
.dual-card.dual-right::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#f0d47a,rgba(212,175,55,.25));
}
.dual-card.dual-right .dual-item{border-top-color:rgba(212,175,55,.22)}
/* swap left/right comparison button on dual-card grids */
/* ===== DUAL-CARD 折叠: 截断首条 + X of N 徽标 (与表格折叠同一语言) ===== */
.dual-item-rest{display:none}
.dual-card.dual-open .dual-item-rest{display:block}
.dual-fold-toggle{display:inline-flex;align-items:center;gap:4px;margin:8px 0 2px;padding:2px 9px;
  border:1px dashed var(--gold);border-radius:7px;background:transparent;color:var(--gold2);
  font-size:11px;font-weight:700;cursor:pointer;transition:all .2s}
.dual-fold-toggle:hover{background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;border-color:var(--gold)}
.dual-fold-toggle .tbl-count{margin-left:3px;vertical-align:1px}
.dual-fold-toggle[aria-expanded="true"] .tbl-arrow{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.dual-fold-toggle .tbl-arrow{transition:none}}
html.m2m-anim-off .dual-fold-toggle .tbl-arrow{transition:none}
:root[data-theme="light"] .dual-fold-toggle{color:#7a5c14}
:root[data-theme="light"] .dual-fold-toggle:hover .tbl-count:not(.tbl-count-all){
  background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;border-color:rgba(255,255,255,.28)}

.dual-grid{position:relative}
.dual-swap{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);z-index:3;
  min-width:32px;height:26px;padding:0 7px;
  border:1px solid var(--border-a,rgba(212,175,55,.35));border-radius:999px;
  background:var(--bg2,#221a0b);color:var(--gold2,#e6c96a);
  font-size:14px;line-height:24px;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:all .2s ease;
}
.dual-swap:hover,.dual-swap:focus-visible{
  background:var(--gold,#d4af37);color:#1a1405;border-color:var(--gold,#d4af37);
}
.dual-swap[aria-pressed="true"]{transform:translateX(-50%) rotate(180deg)}
@media(prefers-reduced-motion:reduce){.dual-swap{transition:none}}
.tbl-actions-dual{display:none}
@media(max-width:380px){
  .tbl-dual{display:none}
  .dual-grid{display:grid}
  .tbl-actions-dual{display:flex}
}
/* 381-640px phones: 2-column tables keep the original table AND get a
   side-by-side dual-card preview above it (<=380px replaces instead).
   .dual-grid-preview is the grid element itself (inserted as a sibling of
   the table), so the band rules target it directly. */
@media(min-width:381px) and (max-width:640px){
  .dual-grid-preview{display:grid}
  .tbl-actions-dual{display:flex}
}
.dual-grid-preview .dual-preview-label{
  grid-column:1/-1;font-size:10.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold2,#e6c96a);opacity:.9;margin:0 0 -2px;
}
html.m2m-sim-mobile:not(.m2m-sim-tiny) .dual-grid-preview{display:grid}
html.m2m-sim-mobile:not(.m2m-sim-tiny) .tbl-actions-dual{display:flex}
html.m2m-force-cards .tbl-dual-preview{display:table !important}
@media(min-width:641px){
  .tbl-dual thead{display:table-header-group !important}
  .tbl-dual tr:first-child{display:table-row !important}
}

.tbl-actions-copyonly{justify-content:center}

/* ===== FAVORITES OVERVIEW PANEL (nav star, js/favorites-panel.js) ===== */
#favToggle{position:relative;background:none;border:none;cursor:pointer;font-size:17px;
  color:var(--gold2,#e6c96a);padding:6px 8px;border-radius:8px;line-height:1}
#favToggle:hover,#favToggle:focus-visible{background:rgba(212,175,55,.12);outline:none}
#favToggle[data-count]::after{
  content:attr(data-count);position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;
  padding:0 4px;border-radius:999px;background:linear-gradient(135deg,#d4af37,#f5d76e);
  color:#1a1405;font-size:9.5px;font-weight:800;line-height:16px;text-align:center;
  box-shadow:0 1px 4px rgba(0,0,0,.3)}
.fav-panel{
  position:fixed;z-index:980;max-height:min(70vh,480px);display:flex;flex-direction:column;
  background:var(--bg2,#221a0b);border:1px solid var(--border-a,rgba(212,175,55,.35));
  border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transform:translateY(6px) scale(.98);
  transition:opacity .16s ease,transform .16s ease,visibility .16s}
.fav-panel.fav-open{opacity:1;visibility:visible;transform:none}
.fav-head{padding:11px 14px 9px;font-size:12px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold2,#e6c96a);border-bottom:1px solid var(--border,#3a3122);
  display:flex;align-items:center;gap:6px}
.fav-total{color:var(--text-d,#cfc6ae);opacity:.8}
.fav-body{overflow-y:auto;padding:6px 8px;flex:1}
.fav-group{margin:2px 0 10px}
.fav-group-name{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-d,#cfc6ae);opacity:.75;padding:6px 6px 3px}
.fav-item{display:flex;align-items:flex-start;gap:8px;padding:7px 8px;border-radius:10px;
  text-decoration:none;color:var(--text,#e8e2d2);font-size:13px;line-height:1.45}
.fav-item:hover,.fav-item:focus-visible{background:rgba(212,175,55,.1);outline:none}
.fav-item-star{color:var(--gold,#d4af37);font-size:12px;margin-top:1px;flex:none}
.fav-item-title{flex:1;min-width:0;overflow-wrap:break-word}
.fav-empty{padding:22px 14px;text-align:center;color:#999;font-size:12.5px;line-height:1.6}
.fav-foot{padding:9px 12px;border-top:1px solid var(--border,#3a3122);display:flex;justify-content:flex-end}
.fav-clear{border:1px solid rgba(220,90,90,.45);background:rgba(220,90,90,.1);color:#ff9b9b;
  border-radius:999px;padding:5px 14px;font-size:12px;font-weight:700;cursor:pointer}
.fav-clear:hover,.fav-clear:focus-visible{background:rgba(220,90,90,.22);outline:none}
@media(prefers-reduced-motion:reduce){.fav-panel{transition:none}}
@keyframes chFavJump{0%{background:rgba(212,175,55,.45)}100%{background:transparent}}
.ch-fav-jump{border-radius:8px;animation:chFavJump 1.6s ease-out}

/* ===== PREVIEW-MODE FLOATING BANNER (?tblcards=force / ?tblw=<px>) ===== */
.m2m-preview-bar{position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:8px 14px;min-height:38px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1405;
  font-size:12.5px;font-weight:800;letter-spacing:.03em;text-align:center;
  box-shadow:0 3px 16px rgba(0,0,0,.25)}
.m2m-preview-bar-txt{text-transform:uppercase}
.m2m-preview-bar-exit{display:inline-flex;align-items:center;gap:4px;
  padding:4px 13px;border-radius:999px;border:1px solid rgba(26,20,5,.45);
  background:rgba(26,20,5,.12);color:#1a1405;font-size:11.5px;font-weight:800;
  text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.m2m-preview-bar-exit:hover{background:#1a1405;color:var(--gold2)}
.m2m-preview-bar-exit::before{content:"\u00d7";font-size:13px;font-weight:900}
/* ?previewbar= A/B color variants (default = gold gradient above) */
.m2m-bar-dark{background:linear-gradient(135deg,#262626,#111);color:#f2f2f2;
  box-shadow:0 3px 16px rgba(0,0,0,.4)}
.m2m-bar-dark .m2m-preview-bar-exit{border-color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.1);color:#f2f2f2}
.m2m-bar-dark .m2m-preview-bar-exit:hover{background:#f2f2f2;color:#111}
.m2m-bar-light{background:linear-gradient(135deg,#fff,#e8e8e8);color:#1a1a1a;
  box-shadow:0 3px 16px rgba(0,0,0,.18)}
.m2m-bar-light .m2m-preview-bar-exit{border-color:rgba(0,0,0,.3);
  background:rgba(0,0,0,.06);color:#1a1a1a}
.m2m-bar-light .m2m-preview-bar-exit:hover{background:#1a1a1a;color:#fff}
.m2m-bar-red{background:linear-gradient(135deg,#d64545,#a11);color:#fff;
  box-shadow:0 3px 16px rgba(160,20,20,.35)}
.m2m-bar-red .m2m-preview-bar-exit{border-color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.14);color:#fff}
.m2m-bar-red .m2m-preview-bar-exit:hover{background:#fff;color:#a11}
.m2m-bar-blue{background:linear-gradient(135deg,#2f6fce,#16427f);color:#fff;
  box-shadow:0 3px 16px rgba(20,70,150,.35)}
.m2m-bar-blue .m2m-preview-bar-exit{border-color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.14);color:#fff}
.m2m-bar-blue .m2m-preview-bar-exit:hover{background:#fff;color:#16427f}
.m2m-bar-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1405}
/* auto-minimize: after 15s (?pbfade=<ms>) the banner fades up/away, leaving a
   small top-right restore badge; hover pauses the countdown */
.m2m-preview-bar{transition:opacity .3s ease,transform .3s ease}
.m2m-preview-bar.m2m-min{opacity:0;transform:translateY(-110%);pointer-events:none}
.m2m-preview-restore{position:fixed;top:6px;right:10px;z-index:122;display:none;
  align-items:center;gap:5px;padding:5px 12px;border-radius:999px;
  border:1px solid rgba(26,20,5,.35);
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1405;
  font-size:11px;font-weight:800;letter-spacing:.03em;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.22);
  transition:transform .15s ease,box-shadow .15s ease}
.m2m-preview-restore.m2m-show{display:inline-flex}
.m2m-preview-restore::before{content:"\2605";font-size:12px}
.m2m-preview-restore:hover{transform:translateY(-1px);box-shadow:0 3px 14px rgba(0,0,0,.3)}
/* keep the sticky nav + top capsule below the banner while previewing */
html.m2m-has-preview .nav{top:38px}
html.m2m-has-preview .nav-top-cap{top:52px}
@media(max-width:640px){
  .m2m-preview-bar{font-size:11.5px;padding:7px 10px;gap:8px}
  .m2m-preview-bar-exit{padding:3px 10px;font-size:11px}
  .m2m-preview-restore{top:5px;right:8px;padding:4px 9px;font-size:10px}
  html.m2m-has-preview .nav{top:36px}
  html.m2m-has-preview .nav-top-cap{top:50px}
}
@media(prefers-reduced-motion:no-preference){
  .m2m-preview-bar{animation:m2mBarIn .28s ease}
  @keyframes m2mBarIn{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}
}
@media(prefers-reduced-motion:reduce){
  .m2m-preview-bar{transition:none}
  .m2m-preview-restore{transition:none}
}

/* ===== SIMULATED BREAKPOINT (?tblw=<px> - preview/testing without resizing) ===== */
/* mirrors the real @media(max-width:640px) / @media(max-width:380px) table rules
   under html classes so a simulated width renders identically to a real resize. */
html.m2m-sim-mobile .tbl-cards,html.m2m-sim-mobile .tbl-cards tbody{display:block;width:100%}
html.m2m-sim-mobile .tbl-cards tr{display:block;margin:0 0 10px;padding:0;
  background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
html.m2m-sim-mobile .tbl-cards td{display:block;width:100%;
  border-bottom:1px solid var(--border) !important;padding:9px 12px !important}
html.m2m-sim-mobile .tbl-cards td:last-child{border-bottom:none !important}
html.m2m-sim-mobile .tbl-cards td::before{content:attr(data-label);display:block;
  font-size:11px;font-weight:700;color:var(--gold2);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:3px}
/* sim-mobile 同样启用展开/收起动画(与真实移动端一致, 预览 ?tblw= 时也顺滑) */
html.m2m-sim-mobile .tbl-cards tr{
  transition:max-height .38s cubic-bezier(.4,0,.2,1), opacity .3s ease,
    border-width .3s ease, margin .3s ease, padding .3s ease;
}
html.m2m-sim-mobile .tbl-cards.tbl-collapsed .tbl-row-hidden{
  max-height:0;opacity:0;overflow:hidden;
  border-width:0;margin-bottom:0;padding:0;
}
html.m2m-sim-mobile .tbl-cards tr.tbl-row-summary{position:relative;
  background:linear-gradient(135deg,rgba(212,175,55,.13),rgba(212,175,55,.04));
  border-color:rgba(212,175,55,.5)}
html.m2m-sim-mobile .tbl-cards tr.tbl-row-summary::after{
  content:"SUMMARY";position:absolute;top:7px;right:9px;
  padding:2px 8px;border-radius:999px;
  background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;
  font-size:9.5px;font-weight:800;letter-spacing:.06em;line-height:1.4;
  box-shadow:0 1px 3px rgba(0,0,0,.22);pointer-events:none}
html.m2m-sim-mobile .tier-grid{display:grid;grid-template-columns:repeat(3,1fr)}
html.m2m-sim-mobile .tier-card{padding:10px 8px 8px}
html.m2m-sim-mobile .tier-name{font-size:12.5px}
html.m2m-sim-mobile .tier-value{font-size:11.5px}
html.m2m-sim-mobile .tbl-compare{display:none}
html.m2m-sim-tiny .tbl-dual{display:none}
html.m2m-sim-tiny .dual-grid{display:grid}
html.m2m-sim-tiny .tbl-actions-dual{display:flex}
html.m2m-sim-tiny .cmp-grid{grid-template-columns:1fr}
html.m2m-sim-tiny .cmp-adopt{flex:1;text-align:center}
html.m2m-sim-tiny .tier-apply{font-size:11.5px;padding:8px 8px}
html.m2m-sim-tiny .rec-tier-btn{padding:6px 10px;font-size:11px}
html.m2m-sim-tiny .tier-details{font-size:11px;padding:8px 9px}
html.m2m-sim-tiny .tier-details-toggle{font-size:11px;padding:6px 8px}

/* ===== copy format menu (long-press / double-click) ===== */
.m2m-copy-menu{
  position:fixed;z-index:1500;min-width:132px;
  background:var(--bg2,#221a0b);border:1px solid var(--border-a,rgba(212,175,55,.35));
  border-radius:10px;padding:6px;box-shadow:0 10px 28px rgba(0,0,0,.45);
  opacity:0;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease;
  display:flex;flex-direction:column;gap:2px;
}
.m2m-copy-menu-open{opacity:1;transform:translateY(0)}
.m2m-copy-menu-item{
  display:block;width:100%;text-align:start;background:transparent;border:none;
  color:var(--text,#f0e9da);font-size:13px;font-weight:700;letter-spacing:.02em;
  padding:9px 12px;border-radius:7px;cursor:pointer;white-space:nowrap;
}
.m2m-copy-menu-item[data-dl="1"]{
  border-top:1px solid var(--border-a,rgba(212,175,55,.35));margin-top:4px;padding-top:10px;
  color:var(--gold2,#e6c96a);
}
.m2m-copy-menu-item:hover,.m2m-copy-menu-item:focus-visible{
  background:var(--gold,#d4af37);color:#1a1408;outline:none;
}
@media(prefers-reduced-motion:reduce){.m2m-copy-menu{transition:none}}

/* ===== FORCE CARDS MODE (?tblcards=force — preview/testing) ===== */
html.m2m-force-cards .tbl-cards,html.m2m-force-cards .tbl-cards tbody{display:block;width:100%}
html.m2m-force-cards .tbl-cards tr{display:block;margin:0 0 10px;padding:0;position:relative;
  background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;
  transition:max-height .38s cubic-bezier(.4,0,.2,1), opacity .3s ease,
    border-width .3s ease, margin .3s ease, padding .3s ease}
html.m2m-force-cards .tbl-cards td{display:block;width:100%;
  border-bottom:1px solid var(--border) !important;padding:9px 12px !important}
html.m2m-force-cards .tbl-cards td:last-child{border-bottom:none !important}
html.m2m-force-cards .tbl-cards td::before{content:attr(data-label);display:block;
  font-size:11px;font-weight:700;color:var(--gold2);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:3px}
html.m2m-force-cards .tbl-cards.tbl-collapsed .tbl-row-hidden{
  max-height:0;opacity:0;overflow:hidden;
  border-width:0;margin-bottom:0;padding:0}
html.m2m-force-cards .tbl-cards tr.tbl-row-summary{
  background:linear-gradient(135deg,rgba(212,175,55,.13),rgba(212,175,55,.04));
  border-color:rgba(212,175,55,.5)}
html.m2m-force-cards .tbl-cards tr.tbl-row-summary::after{
  content:"SUMMARY";position:absolute;top:7px;right:9px;
  padding:2px 8px;border-radius:999px;
  background:linear-gradient(135deg,#d4af37,#f5d76e);color:#1a1405;
  font-size:9.5px;font-weight:800;letter-spacing:.06em;line-height:1.4;
  box-shadow:0 1px 3px rgba(0,0,0,.22);pointer-events:none}
html.m2m-force-cards .tbl-head-hide,html.m2m-force-cards .tbl-compare,html.m2m-force-cards .tbl-dual{display:none}
html.m2m-force-cards .tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 14px}
html.m2m-force-cards .dual-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 6px}
html.m2m-force-cards .tbl-actions,html.m2m-force-cards .tbl-actions-dual{display:flex}
html.m2m-force-cards .tbl-more-toggle{display:flex}
html.m2m-force-cards .tbl-copy,html.m2m-force-cards .tier-copy{display:block;opacity:1;visibility:visible}

/* ===== TABLES: ?tblcards=off keeps plain layouts ===== */
html.m2m-force-plain .tbl-cards,html.m2m-force-plain .tbl-cards tbody,
html.m2m-force-plain .tbl-dual,html.m2m-force-plain .tbl-dual tbody,
html.m2m-force-plain .tbl-compare,html.m2m-force-plain .tbl-compare thead,
html.m2m-force-plain .tbl-compare tr,html.m2m-force-plain .tbl-compare th,
html.m2m-force-plain .tbl-compare td{display:table !important;width:auto}
html.m2m-force-plain .tbl-cards tr,html.m2m-force-plain .tbl-dual tr{
  display:table-row !important;margin:0;padding:0;background:none;
  border:none;border-radius:0;overflow:visible;
}
html.m2m-force-plain .tbl-cards td,html.m2m-force-plain .tbl-dual td{
  display:table-cell !important;width:auto;
  border-bottom:1px solid var(--border) !important;
  padding:8px 10px !important;
}
html.m2m-force-plain .tbl-cards td:last-child{border-bottom:1px solid var(--border) !important}
html.m2m-force-plain .tbl-cards td::before{content:none}
html.m2m-force-plain .tbl-head-hide{display:table-header-group !important}
html.m2m-force-plain .tier-grid,html.m2m-force-plain .dual-grid,
html.m2m-force-plain .dcompare,html.m2m-force-plain .tier-card,
html.m2m-force-plain .dual-card{display:none !important}
html.m2m-force-plain .tbl-actions,html.m2m-force-plain .tbl-actions-dual,
html.m2m-force-plain .tbl-actions-compare,html.m2m-force-plain .tbl-more-toggle,
html.m2m-force-plain .tbl-copy,html.m2m-force-plain .tier-copy,
html.m2m-force-plain .dc-actions{display:none !important}
/* ?tblcards=off keeps a pure table reading state: the ONLY thing kept from
   the card UI is the full-table copy bar (MD / TXT) above the table. Every
   other card-ification decoration (tier cards, recommended gold border +
   star badge, income calculator, Apply Now, expand/collapse bars, row-copy
   buttons) stays hidden by the rules above. */
html.m2m-force-plain .tbl-copy-plain{
  display:flex !important;align-items:center;justify-content:center;
  gap:10px;margin:0 0 14px;flex-wrap:wrap;
}
html.m2m-force-plain .tbl-copy-plain .tbl-copy-tbl{display:inline-block}

/* ===== IN-PAGE TABLE LAYOUT SWITCHER (?tblcards force/off/auto) ===== */
.m2m-layout-switch{
  position:fixed;right:14px;bottom:14px;z-index:150;
  display:flex;align-items:center;gap:4px;padding:5px 6px;
  background:var(--bg2);border:1px solid var(--border-a);border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.28);font-family:inherit;
}
.m2m-layout-switch-label{
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-m);margin:0 4px 0 2px;
}
.m2m-layout-btn{
  border:1px solid transparent;background:none;color:var(--text-m);
  font:inherit;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;
  cursor:pointer;transition:all .18s;
}
.m2m-layout-btn:hover{color:var(--text)}
.m2m-layout-btn.active{background:var(--gold);border-color:var(--gold);color:#1a1a1a}
@media(max-width:640px){
  .m2m-layout-switch{bottom:auto;top:60px;right:10px;padding:4px 5px}
  .m2m-layout-switch-label{display:none}
  .m2m-layout-btn{padding:3px 8px;font-size:10px}
}

/* ---- batch export overlay (multi-table zip) ---- */
.m2m-batch{position:fixed;inset:0;z-index:9990;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);padding:16px}
.m2m-batch-card{width:min(440px,94vw);max-height:74vh;display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--border-a);border-radius:var(--r-lg);box-shadow:0 18px 50px rgba(0,0,0,.55)}
.m2m-batch-title{padding:14px 18px;font-weight:700;color:var(--text);border-bottom:1px solid var(--border)}
.m2m-batch-list{overflow-y:auto;padding:6px 0}
.m2m-batch-item{display:flex;align-items:center;gap:10px;padding:10px 18px;cursor:pointer;color:var(--text)}
.m2m-batch-item:hover{background:var(--card-h)}
.m2m-batch-item input{accent-color:var(--gold);width:17px;height:17px;flex:none}
.m2m-batch-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m2m-batch-meta{color:var(--text-m);font-size:12px;flex:none}
.m2m-batch-footer{display:flex;gap:8px;justify-content:flex-end;align-items:center;padding:12px 18px;border-top:1px solid var(--border)}
.m2m-batch-btn{background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:var(--r);padding:8px 14px;font-size:13px;cursor:pointer}
.m2m-batch-btn:hover{background:var(--card-h)}
.m2m-batch-export{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1a1a;font-weight:700;border:none}
.m2m-batch-export:disabled{opacity:.45;cursor:not-allowed}
.m2m-batch-cancel{color:var(--text-d)}
@media (prefers-reduced-motion:reduce){.m2m-batch{transition:none}}
/* ---------- Per-module AI coach floating widget (chapter-coach.js) ---------- */
.chapter-coach{position:fixed;left:22px;bottom:22px;z-index:1200;font-size:14px}
.chapter-coach .cc-fab{width:56px;height:56px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1a1a;font-size:26px;cursor:pointer;box-shadow:0 6px 18px var(--shadow);display:grid;place-items:center;transition:transform .15s ease}
.chapter-coach .cc-fab:hover{transform:translateY(-2px) scale(1.04)}
.chapter-coach .cc-panel{position:absolute;left:0;bottom:66px;width:340px;max-width:calc(100vw - 32px);background:var(--card);border:1px solid var(--border-a);border-radius:var(--r-lg);box-shadow:0 18px 50px var(--shadow);display:none;flex-direction:column;overflow:hidden}
.chapter-coach .cc-panel.open{display:flex}
.chapter-coach .cc-head{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1a1a;padding:12px 14px;position:relative}
.chapter-coach .cc-head-t{font-weight:800;font-size:15px}
.chapter-coach .cc-head-s{font-size:12px;opacity:.85;margin-top:2px}
.chapter-coach .cc-close{position:absolute;right:10px;top:10px;border:none;background:rgba(0,0,0,.15);color:#1a1a1a;width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:13px;line-height:1}
.chapter-coach .cc-msg{height:260px;overflow-y:auto;padding:14px;background:var(--bg);display:flex;flex-direction:column;gap:8px}
.chapter-coach .cc-bubble{max-width:88%;padding:9px 11px;border-radius:12px;line-height:1.5;font-size:13.5px;white-space:pre-wrap;word-break:break-word}
.chapter-coach .cc-user{align-self:flex-end;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1a1a;border-top-right-radius:3px}
.chapter-coach .cc-bot{align-self:flex-start;background:var(--chat-bot);border:1px solid var(--chat-bot-border);color:var(--chat-bot-color);border-top-left-radius:3px}
.chapter-coach .cc-lock{background:var(--bg2);border:1px dashed var(--gold);border-radius:12px;padding:12px;text-align:center}
.chapter-coach .cc-lock-t{font-weight:800;color:var(--gold2);margin-bottom:6px}
.chapter-coach .cc-lock-d{font-size:12.5px;color:var(--text-m);margin-bottom:10px}
.chapter-coach .cc-chips{display:flex;gap:8px;flex-direction:column;padding:10px 14px 4px;background:var(--card)}
.chapter-coach .cc-chip{text-align:start;background:var(--bg2);color:var(--text);border:1px solid var(--border-a);border-radius:999px;padding:7px 12px;font-size:12.5px;cursor:pointer}
.chapter-coach .cc-chip:hover{border-color:var(--gold);color:var(--gold2)}
.chapter-coach .cc-input{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--border-a);background:var(--card)}
.chapter-coach .cc-text{flex:1;padding:10px 12px;border-radius:8px;border:1px solid var(--border-a);background:var(--bg);color:var(--text);font-family:inherit;font-size:13.5px}
.chapter-coach .cc-send{border:none;border-radius:8px;padding:0 14px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1a1a;font-weight:700;cursor:pointer}

/* ---------- Module-page template treatment (mirrors the reference course) ---------- */
.ch-leads{display:grid;gap:12px;margin:0 0 22px}
.ch-lead{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--border-a);border-radius:12px;padding:14px 16px}
.ch-lead .ch-lead-ico{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:18px;background:linear-gradient(135deg,rgba(212,175,55,.16),rgba(230,57,70,.10));border:1px solid var(--border-a)}
.ch-lead .ch-lead-t{font-size:14px;font-weight:800;color:var(--gold2);margin-bottom:3px}
.ch-lead .ch-lead-d{font-size:13.5px;color:var(--text-d);line-height:1.65}
.ch-stats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:0 0 26px}
.ch-stats > div{min-width:120px;flex:1;text-align:center;padding:18px 12px;background:var(--card);border:1px solid var(--border-a);border-radius:14px}
.ch-stats b{display:block;font-size:30px;font-weight:900;color:var(--gold2);line-height:1.1}
.ch-stats span{font-size:12px;color:var(--text-m);text-transform:uppercase;letter-spacing:.03em}

/* ===== Homepage: "what you'll learn" (#learn) ===== */
/* logical text-align + RTL-mirrored arrow, per the site-wide RTL convention */
.learn-index-title{font-size:15px;font-weight:800;color:var(--gold2);letter-spacing:0.08em;text-transform:uppercase;text-align:start;margin:34px 0 14px}
.learn-chapters{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.learn-ch{display:flex;flex-direction:column;gap:4px;padding:13px 15px;background:var(--card);border:1px solid var(--border);border-radius:12px;text-align:start;transition:all 0.2s}
.learn-ch:hover{background:var(--card-h);border-color:var(--border-a);transform:translateY(-2px)}
.learn-ch-num{font-size:11px;color:var(--gold2);font-weight:700;letter-spacing:0.1em}
.learn-ch-title{font-size:15px;font-weight:800;color:var(--text)}
.learn-ch-sub{font-size:12px;color:var(--text-m);line-height:1.5}
.learn-cta::after{content:" \2192"}
html[dir="rtl"] .learn-cta::after{content:" \2190"}


/* ---------- i18n boot guard ---------- */
/* js/i18n.js rewrites the English source markup after the page loads; hide
   the body until it has run so non-English visitors never see a flash of
   English. The class is set by an inline <head> script and cleared by
   i18n.js, with a bounded safety timeout, so JS-off visitors are never
   left with a hidden page. */
html.i18n-pending body{visibility:hidden}

/* ===== 继续上次 / 最近学习 (js/resume.js, 第 18 轮) =====
   容器 [data-resume] 由页面提供，脚本负责填充；没有记录时给容器加 hidden，
   所以空状态不会留下一块空卡片。
   配色只用已在别处验证过的变量：--gold2 做小标题（深色卡片上 6.78:1）、
   --text 做标题、--text-d 做次要文字（6.11:1）。**故意不用 --text-m**，
   它在深色卡片上只有 3.14:1，低于 1.4.3 的 4.5:1。 */
[data-resume][hidden]{display:none}
.resume-inner{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin:22px 0 0;background:var(--card);border:1px solid var(--border-a);border-radius:var(--r-lg);padding:14px 18px}
.resume-kicker{font-size:13px;font-weight:700;color:var(--gold2);letter-spacing:.05em;white-space:nowrap;padding-top:13px}
.resume-list{list-style:none;margin:0;padding:0;flex:1 1 260px;min-width:0;display:grid;gap:8px}
.resume-row{display:flex;align-items:center;gap:12px}
.resume-link{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;justify-content:center;text-decoration:none;padding:8px 10px;border-radius:10px;min-height:44px}
.resume-link:hover{background:var(--card-h)}
.resume-t{font-size:15px;font-weight:700;color:var(--text);line-height:1.4}
.resume-s{font-size:13px;color:var(--text-d);line-height:1.5}
.resume-time{font-size:12.5px;color:var(--text-d);white-space:nowrap}
@media (max-width:640px){
  .resume-inner{padding:12px 14px;gap:10px}
  .resume-kicker{padding-top:0;width:100%}
  .resume-time{display:none}
}


/* ===== VIP GATE v2（第 67 轮）：主线卡锁定 / 预览卡 / 页尾套餐块 ===== */
/* 首页「学习主线」：保留标题与简介（这是卖点），只锁行动按钮 */
body:not(.is-vip) .vip-cards-locked .module .btn{display:none}
/* 阶段 1 永久免费：同一张卡网格里单独放行按钮，不靠 JS。 */
body:not(.is-vip) .vip-cards-locked .module.is-free .btn{display:inline-flex}
/* 注意：.module::after 已被 beautify.css 用作卡片顶部 1px 金线，
   这里不能用伪元素，锁标是真实 DOM（apply_vip_gate.py 写入）。 */
.vip-card-lock,.vip-card-free{
  display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;
  margin-top:8px;padding:8px 16px;border-radius:999px;font-size:13px;font-weight:800;
  letter-spacing:.02em;
}
.vip-card-lock{
  color:var(--gold2);border:1px dashed var(--gold);background:rgba(212,175,55,.07);
}
.vip-card-free{
  color:var(--green);border:1px solid var(--green);background:rgba(76,175,80,.08);
}
body.is-vip .vip-card-lock{display:none}
.vip-free-note{
  display:inline-flex;align-items:center;gap:6px;margin:0 0 18px;padding:7px 14px;
  border:1px solid var(--green);border-radius:999px;color:var(--green);
  background:rgba(76,175,80,.08);font-size:13px;font-weight:800;
}

.vip-chip-line{margin:-10px 0 22px;text-align:center}
.vip-chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;
  font-size:12.5px;font-weight:800;color:var(--gold2);
  border:1px solid var(--gold);background:rgba(212,175,55,.08);
}

.vip-gate-bar{
  display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin:24px 0 0;padding:18px 22px;border:1px solid var(--gold);border-radius:14px;
  background:linear-gradient(135deg,rgba(212,175,55,.10),rgba(18,18,26,.9));
}
.vip-gate-copy b{display:block;color:var(--gold2);font-size:15px}
.vip-gate-copy span{display:block;color:var(--text-m);font-size:13px;line-height:1.7;margin-top:5px;max-width:640px}
.vip-gate-actions{display:flex;gap:10px;flex-wrap:wrap}
body.is-vip .vip-gate-bar{display:none}

/* 会员看到完整正文，预览卡与横幅就不再出现 */
body.is-vip .vip-preview{display:none}
.vip-preview-free{font-size:12.5px;color:var(--text-m);margin:0}

/* 页尾：本页包含 / 学完能做到 / 内容依据 / 解锁 CTA */
.vip-included-title{font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--gold2);margin:0}
.vip-takeaways,.vip-sources{
  margin:22px 0;padding:22px 24px;border:1px solid var(--border-a);border-radius:14px;background:var(--card);
}
.vip-takeaways h3,.vip-sources h3{margin:0 0 12px;font-size:16px;color:var(--gold2)}
.vip-takeaways ul{margin:0;padding-left:20px;display:grid;gap:8px}
.vip-takeaways li{color:var(--text-d);font-size:14px;line-height:1.7}
.vip-sources p{margin:0;color:var(--text-d);font-size:13.5px;line-height:1.85}
.vip-lock-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
@media(max-width:560px){
  .vip-gate-bar{padding:16px}
  .vip-gate-actions{width:100%}
  .vip-gate-actions .btn{flex:1 1 100%;justify-content:center}
}

/* 逐讲拆解：第 1 讲免费、其余锁卡（对应案例的「分类深度拆解」） */
.vip-modules{
  margin:22px 0;padding:22px 24px;border:1px solid var(--border-a);border-radius:14px;background:var(--card);
}
.vip-modules h3{margin:0 0 8px;font-size:16px;color:var(--gold2)}
.vip-modules-lead{margin:0 0 16px;color:var(--text-m);font-size:13.5px;line-height:1.8}
.vip-module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.vip-module{
  display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:12px;
  border:1px solid var(--border-a);background:var(--bg-soft);text-decoration:none;color:inherit;
}
.vip-module-kicker{font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--text-m)}
.vip-module h4{margin:0;font-size:14.5px;line-height:1.55;color:var(--text-d)}
.vip-module-lock{font-size:12.5px;font-weight:700;color:var(--gold2)}
.vip-module-state{font-size:12.5px;font-weight:800;color:var(--accent);margin-top:auto}
/* 会员视角：卡仍显示「第 N 讲」，但不能再出现「解锁全部」——不然买了会员
   的人滚到页尾还在被推销，等于页面自己否认了购买结果。 */
.vip-module-state-ok{display:none;font-size:12.5px;font-weight:800;color:var(--accent);margin-top:auto}
.vip-module.locked{border-style:dashed;cursor:pointer;transition:border-color .2s,transform .2s}
.vip-module.locked:hover{border-color:var(--gold);transform:translateY(-1px)}
.vip-module.free{border-color:var(--accent-line)}
.vip-module.free .vip-module-kicker{color:var(--accent)}
body.is-vip .vip-module.locked{border-style:solid}
body.is-vip .vip-module.locked .vip-module-lock{display:none}
body.is-vip .vip-module.locked{pointer-events:none;cursor:default}
body.is-vip .vip-module.locked .vip-module-state{display:none}
body.is-vip .vip-module.locked .vip-module-state-ok{display:block}
/* 「一次付费，终身访问」是销售话术，对已付费用户不再重复 */
body.is-vip .vip-included-note{display:none}
@media(max-width:820px){.vip-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.vip-module-grid{grid-template-columns:1fr}}