/* ═══════════════════════════════════════════════════════════════════════════
   SURF-PUBLIC — the public / SEO / editorial register.
   Source: legacy Web Public (§4 W.I, W.P) — CANONICAL for this domain.
   Register: spacious, brand-led. Section rhythm is the product: a public page
   is a sequence of bands, and the band ORDER is the composition contract.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── B1 · Hero ───────────────────────────────────────────────────────────── */
.pub-hero { position: relative; overflow: hidden; background: var(--grad-hero); }
.pub-hero .ph-inner { position: relative; z-index: 1; padding: var(--sp-16) 0 var(--sp-12); }
.pub-hero h1 { font-size: clamp(30px, 4.2vw, 52px); font-weight: var(--fw-bold);
  color: var(--c-ink); line-height: 1.14; letter-spacing: -0.02em; }
.pub-hero .ph-lead { font-size: var(--fs-lg); color: var(--c-text); line-height: 1.7;
  margin-top: var(--sp-5); max-width: 560px; }
.pub-hero .ph-eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.8); border: 1px solid #fff;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-primary-700);
  box-shadow: var(--sh-xs); }
.hero-cta-row { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; }
.hero-tags { display: flex; gap: var(--sp-2); margin-top: var(--sp-6); flex-wrap: wrap; align-items: center; }
.hero-tags .ht-label { font-size: var(--fs-sm); color: var(--c-mute); }
.hero-tags .tag { background: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.9); }
.hero-tags .tag:hover { background: #fff; color: var(--c-primary-600); border-color: var(--c-primary-200); }

/* ── B2 · Trust band ────────────────────────────────────────────────────── */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.trust-item { text-align: center; }
.trust-item .ti-label { font-size: var(--fs-sm); color: var(--c-mute); margin-top: 6px; }
@container (max-width: 720px) 

/* ── B3 · Subject grid ──────────────────────────────────────────────────── */
.subject-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); }
@container (max-width: 1100px) { .subject-grid { grid-template-columns: repeat(4, 1fr); } }
@container (max-width: 720px) { .subject-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── B4/B5 · Cards row ──────────────────────────────────────────────────── */
.card-row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.card-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@container (max-width: 1100px) { .card-row-4 { grid-template-columns: repeat(2, 1fr); } .card-row-3 { grid-template-columns: repeat(2, 1fr); } }
@container (max-width: 720px) { .card-row-4, .card-row-3 { grid-template-columns: minmax(0, 1fr); } }
.section-warm { background: var(--c-bg-warm); }

/* ── B6 · Steps ─────────────────────────────────────────────────────────── */
.step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
@container (max-width: 900px) { .step-grid { grid-template-columns: repeat(2, 1fr); } }
@container (max-width: 520px) { .step-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── B7 · AI band — the dark differentiated section. Must not be degraded. ─ */
.ai-band { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--sp-10);
  padding: var(--sp-10); align-items: center; }
@container (max-width: 1000px) { .ai-band { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); padding: var(--sp-8); } }
.ai-report { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg); padding: var(--sp-5); }
.ai-report .arp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.ai-report h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: #fff; line-height: 1.4; }
.ai-report .arp-metrics { display: flex; flex-direction: column; gap: 11px; margin-top: var(--sp-5); }
.ai-report .arp-advice { margin-top: var(--sp-5); padding: 11px 13px; border-radius: var(--r-sm);
  background: rgba(155, 109, 245, 0.18); font-size: var(--fs-sm); color: #d9c8fb; line-height: 1.6; }

/* ── B8 · Stories ───────────────────────────────────────────────────────── */
.story-head { display: flex; align-items: center; gap: 11px; margin-top: var(--sp-5); }

/* ── B9/B10 · CTA bands ─────────────────────────────────────────────────── */
.cta-band h2 { font-size: clamp(20px, 2.4vw, 30px); font-weight: var(--fw-bold); color: #fff; line-height: 1.25; }
.cta-band p { color: rgba(255, 255, 255, 0.9); margin-top: var(--sp-3); font-size: var(--fs-md); line-height: 1.7; max-width: 620px; }
.cta-band .cb-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; }

/* ── B11 · Social tiles ─────────────────────────────────────────────────── */
.social-tile { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  transition: all var(--dur) var(--ease); }
.social-tile:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.social-tile .st-ico { width: 48px; height: 48px; border-radius: var(--r-md); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-lg);
  font-weight: var(--fw-bold); flex: none; }
.social-tile .st-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink); }
.social-tile .st-desc { font-size: var(--fs-xs); color: var(--c-mute); margin-top: 3px; }

/* ── B12 · SEO internal links ───────────────────────────────────────────── */
.seo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
@container (max-width: 900px) { .seo-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } }
@container (max-width: 560px) { .seo-grid { grid-template-columns: minmax(0, 1fr); } }
.seo-col h4 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); margin-bottom: var(--sp-3); }
.seo-col a { display: block; padding: 6px 0; font-size: var(--fs-sm); color: var(--c-mute); }
.seo-col a:hover { color: var(--c-primary-600); }

/* ── B13 · Final CTA ────────────────────────────────────────────────────── */
.final-cta { background: var(--grad-hero); border-radius: var(--r-xl); padding: var(--sp-12) var(--sp-8);
  text-align: center; }

/* ── Tutor detail (PUB-TUTOR) — the Public Detail Core, mother version ──── */
.tutor-hero { background: var(--grad-hero); position: relative; overflow: hidden; }
.tutor-hero .th-inner { padding: var(--sp-10) 0 var(--sp-8); }
.t-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-8); align-items: start; }
@container (max-width: 1000px) { .t-hero-grid { grid-template-columns: minmax(0, 1fr); } }
.t-hero-identity { display: flex; gap: var(--sp-5); align-items: flex-start; flex-wrap: wrap; }
.t-hero-identity h1 { font-size: clamp(24px, 2.6vw, 34px); font-weight: var(--fw-bold); color: var(--c-ink);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.t-hero-identity .th-sub { font-size: var(--fs-lg); color: var(--c-text); margin-top: var(--sp-2); }
.t-hero-meta { display: flex; gap: var(--sp-5); margin-top: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-sm); }
.t-verify-line { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }
.t-side-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  padding: var(--sp-5); box-shadow: var(--sh-md); }
.t-side-card .tsc-price { display: flex; align-items: baseline; gap: 8px; }
.t-side-card .tsc-price .num { font-size: 32px; font-weight: var(--fw-bold); color: var(--c-accent-600); }
.t-side-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-5); }
.t-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-8); align-items: start; }
@container (max-width: 1000px) { .t-layout { grid-template-columns: minmax(0, 1fr); } }
.stat-card-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.stat-card-row .sc-num { font-size: var(--fs-h1); font-weight: var(--fw-bold); color: var(--c-primary-600); }
.stat-card-row .sc-label { font-size: var(--fs-xs); color: var(--c-mute); margin-top: 3px; }
.skill-list { display: flex; flex-direction: column; gap: var(--sp-4); }
/* The conversion bar is parked in the FRAME (see app.js parkConvBar), not left in
   the scroll flow. Left in the flow the public footer follows it, so at
   end-of-scroll it floated mid-frame instead of sitting at the bottom — an
   adversarial pass measured it at top 137 of a 902px frame. */
.conv-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(14px); border-top: 1px solid var(--c-line);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-bottom)); }
/* The frame reserves room, or the last content row hides under the parked bar. */
.dq-frame.has-conv .dq-scroll { padding-bottom: 84px; }
.conv-bar .cb-inner { display: flex; align-items: center; gap: var(--sp-4); }
.conv-bar .cb-actions { display: flex; gap: var(--sp-2); margin-left: auto; }

/* ── Course detail (PUB-COURSE) ─────────────────────────────────────────── */
.cd-hero { background: var(--grad-hero); }
.cd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-8); align-items: start; }
@container (max-width: 1000px) { .cd-grid { grid-template-columns: minmax(0, 1fr); } }
.cd-cover { height: 220px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--c-line);
  display: flex; align-items: center; justify-content: center; color: var(--c-primary-200); }
.cd-side { position: sticky; top: calc(var(--nav-h) + var(--sp-5)); background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-md); }
.value-item { display: flex; gap: 11px; align-items: flex-start; padding: var(--sp-3) 0; }
.value-item + .value-item { border-top: 1px solid var(--c-line-soft); }
.chapter { border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.chapter .ch-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4);
  cursor: pointer; background: var(--c-surface); }
.chapter .ch-body { display: none; padding: 0 var(--sp-4) var(--sp-4); }
.chapter.is-open .ch-body { display: block; }
.chapter.is-open .ch-head { border-bottom: 1px solid var(--c-line-soft); }
.ch-item { display: flex; gap: 11px; align-items: flex-start; padding: 10px 0; }
.ch-item + .ch-item { border-top: 1px dashed var(--c-line-soft); }

/* ── Editorial detail (article / guide) ─────────────────────────────────── */
.art-hero { background: var(--c-bg-warm); border-bottom: 1px solid var(--c-line); }
.art-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-8); align-items: start; }
@container (max-width: 1000px) { .art-layout { grid-template-columns: minmax(0, 1fr); } }
.art-layout.is-guide { grid-template-columns: 220px minmax(0, 1fr) 280px; }
@container (max-width: 1100px) { .art-layout.is-guide { grid-template-columns: minmax(0, 1fr); } }
.art-body { font-size: var(--fs-lg); line-height: 1.85; color: var(--c-text); }
.art-body h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); color: var(--c-ink);
  margin: var(--sp-8) 0 var(--sp-3); }
.art-body h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--c-ink);
  margin: var(--sp-6) 0 var(--sp-2); }
.art-body p { margin-bottom: var(--sp-4); }
.art-body ul { margin: var(--sp-3) 0 var(--sp-5); }
.art-body li { position: relative; padding-left: 20px; margin-bottom: 9px; font-size: var(--fs-md); }
.art-body li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--c-primary-300); }
.toc { position: sticky; top: calc(var(--nav-h) + var(--sp-5)); }
.toc a { display: block; padding: 6px 0; font-size: var(--fs-sm); color: var(--c-mute); }
.toc a:hover { color: var(--c-primary-600); }
.toc a.is-on { color: var(--c-primary-600); font-weight: var(--fw-semibold); }
.art-fig { height: 240px; border-radius: var(--r-lg); background: var(--grad-hero);
  display: flex; align-items: center; justify-content: center; color: var(--c-primary-200); margin: var(--sp-6) 0; }

/* ── FAQ accordion ──────────────────────────────────────────────────────── */
.faq-item { border-bottom: 1px solid var(--c-line); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) 0; cursor: pointer; font-size: var(--fs-md); font-weight: var(--fw-semibold);
  color: var(--c-ink); text-align: left; width: 100%; }
.faq-a { display: none; padding: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--c-mute);
  line-height: 1.75; max-width: 760px; }
.faq-item.is-open .faq-a { display: block; }
.faq-item.is-open .faq-q { color: var(--c-primary-600); }

/* ── SEO landing (subject / city / subject×city / keyword) ──────────────── */
.lk-hero { background: var(--grad-hero); padding: var(--sp-10) 0 var(--sp-8); }
.lk-hero h1 { font-size: clamp(26px, 3vw, 40px); font-weight: var(--fw-bold); color: var(--c-ink); line-height: 1.2; }
.subj-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--c-line); font-size: var(--fs-sm); color: var(--c-ink-soft); }
.subj-pill:hover { border-color: var(--c-primary-300); color: var(--c-primary-600); }
.point-card { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-5);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.point-card .pc-num { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--c-primary-50);
  color: var(--c-primary-600); display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold); flex: none; }
.path-step { display: flex; gap: var(--sp-4); align-items: flex-start; padding-bottom: var(--sp-5);
  position: relative; padding-left: 40px; }
.path-step::before { content: attr(data-n); position: absolute; left: 0; top: 0; width: 28px; height: 28px;
  border-radius: 50%; background: var(--c-primary-500); color: #fff; display: flex; align-items: center;
  justify-content: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.path-step:not(:last-child)::after { content: ''; position: absolute; left: 13.5px; top: 32px; bottom: 4px;
  width: 1.5px; background: var(--c-primary-100); }
.online-band { background: var(--grad-primary); border-radius: var(--r-lg); padding: var(--sp-6); color: #fff; }
.compare-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
@container (max-width: 720px) { .compare-grid { grid-template-columns: minmax(0, 1fr); } }
.link-band { background: var(--c-bg-warm); border-radius: var(--r-lg); padding: var(--sp-6); }
.listing-hero { background: var(--grad-hero); padding: var(--sp-10) 0 var(--sp-8); }
.listing-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
@container (max-width: 1000px) { .listing-layout { grid-template-columns: minmax(0, 1fr); } }
.filter-rail { position: sticky; top: calc(var(--nav-h) + var(--sp-5)); }
.filter-group { padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-line-soft); }
.filter-group h4 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); margin-bottom: var(--sp-3); }
.filter-opt { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.city-card { border-radius: var(--r-lg); overflow: hidden; position: relative; height: 160px;
  display: flex; align-items: flex-end; padding: var(--sp-5); color: #fff; }
.city-card .cc-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(26, 28, 46, 0.72)); }
.city-card .cc-body { position: relative; z-index: 1; }
.plan-card { display: flex; gap: var(--sp-4); align-items: center; padding: var(--sp-4);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.plan-rank { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--c-primary-50);
  color: var(--c-primary-600); display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold); flex: none; }
.article-cover { height: 168px; background: var(--grad-hero); display: flex; align-items: center;
  justify-content: center; color: var(--c-primary-200); }
.feat-card { display: grid; grid-template-columns: 340px minmax(0, 1fr); }
@container (max-width: 720px) { .feat-card { grid-template-columns: minmax(0, 1fr); } }
.feat-card .fcv { background: var(--grad-hero); min-height: 180px; display: flex; align-items: center;
  justify-content: center; color: var(--c-primary-200); }
.value-card { padding: var(--sp-5); }
.kpi-grid-pub { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
@container (max-width: 720px) { .kpi-grid-pub { grid-template-columns: repeat(2, 1fr); } }
.timeline-pub { position: relative; padding-left: 28px; }
.timeline-pub::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px;
  background: var(--c-primary-100); }
.timeline-pub .tp-item { position: relative; padding-bottom: var(--sp-6); }
.timeline-pub .tp-item::before { content: ''; position: absolute; left: -28px; top: 5px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--c-primary-500); border: 2.5px solid #fff; box-shadow: 0 0 0 1px var(--c-primary-200); }
.protect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@container (max-width: 820px) { .protect-grid { grid-template-columns: minmax(0, 1fr); } }
.protect-item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.dl-card { display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; text-align: center;
  padding: var(--sp-6); }

/* Lane A: pinned TT web discovery family; scoped, not global tokens or shell. */
.tt-discovery {

  /* ---- Brand / Primary (教育科技靛蓝) ---- */
  --color-primary-50:  #eef1ff;
  --color-primary-100: #dde2ff;
  --color-primary-200: #c0c8ff;
  --color-primary-300: #99a4ff;
  --color-primary-400: #7079f8;
  --color-primary-500: #5b54ec;   /* 主色 */
  --color-primary-600: #4c3fd6;
  --color-primary-700: #4133b3;
  --color-primary-800: #362d90;
  --color-primary-900: #2f2b73;

  /* ---- Accent / 增长暖橙 ---- */
  --color-accent-50:  #fff4ed;
  --color-accent-100: #ffe6d4;
  --color-accent-300: #ffb27a;
  --color-accent-500: #ff7a3d;   /* 行动/增长 */
  --color-accent-600: #f15f1f;
  --color-accent-700: #c84a15;

  /* ---- Secondary / 青绿 ---- */
  --color-teal-50:  #e8fbf6;
  --color-teal-300: #6fe3c8;
  --color-teal-500: #16b896;
  --color-teal-600: #0f9a7e;

  /* ---- AI 紫蓝渐变 ---- */
  --gradient-ai: linear-gradient(135deg, #6a5cf0 0%, #9b6df5 50%, #c66ff0 100%);
  --gradient-hero: linear-gradient(160deg, #eef1ff 0%, #f6f4ff 45%, #fff4ed 100%);
  --gradient-primary: linear-gradient(135deg, #5b54ec 0%, #7079f8 100%);
  --gradient-accent: linear-gradient(135deg, #ff7a3d 0%, #f15f1f 100%);
  --gradient-soft: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);

  /* ---- Neutral / Gray ---- */
  --color-ink:       #1a1c2e;
  --color-ink-soft:  #3d4159;
  --color-text:      #4a4d63;
  --color-text-mute: #8b8fa3;
  --color-text-faint:#aeb1c4;
  --color-line:      #e9eaf2;
  --color-line-soft: #f1f2f8;
  --color-bg:        #f7f8fc;
  --color-bg-warm:   #fbfaf7;
  --color-surface:   #ffffff;
  --color-surface-2: #f9fafe;

  /* ---- Status ---- */
  --color-success:   #16b896;
  --color-success-bg:#e8fbf6;
  --color-warning:   #f5a623;
  --color-warning-bg:#fff5e3;
  --color-danger:    #ef4d6a;
  --color-danger-bg: #ffecef;
  --color-info:      #5b54ec;
  --color-info-bg:   #eef1ff;
  --color-ai:        #9b6df5;
  --color-ai-bg:     #f3eefe;

  /* ---- Typography ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
               "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --fs-display: 44px;
  --fs-h1: 32px;
  --fs-h2: 24px;
  --fs-h3: 19px;
  --fs-lg: 17px;
  --fs-md: 15px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  /* ---- Spacing (4px scale) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---- Radius ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-xs: 0 1px 2px rgba(26,28,46,.05);
  --shadow-sm: 0 2px 8px rgba(26,28,46,.06);
  --shadow-md: 0 6px 20px rgba(26,28,46,.08);
  --shadow-lg: 0 14px 40px rgba(26,28,46,.12);
  --shadow-primary: 0 8px 24px rgba(91,84,236,.28);
  --shadow-accent: 0 8px 24px rgba(255,122,61,.28);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 960px;
  --nav-h: 68px;
  --mobile-nav-h: 54px;
  --mobile-tab-h: 64px;

  /* ---- Z-index ---- */
  --z-nav: 100;
  --z-sticky: 90;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: .15s;
  --dur: .25s;
  --dur-slow: .4s;
}
.tt-discovery .container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.tt-discovery .container-narrow{ max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }
.tt-discovery .section{ padding: var(--sp-20) 0; }
.tt-discovery .section-sm{ padding: var(--sp-12) 0; }
.tt-discovery .section-tint{ background: var(--color-surface); }
.tt-discovery .section-warm{ background: var(--color-bg-warm); }
.tt-discovery .section-grad{ background: var(--gradient-hero); }
.tt-discovery .stack{ display: flex; flex-direction: column; }
.tt-discovery .row{ display: flex; align-items: center; }
.tt-discovery .row-between{ display: flex; align-items: center; justify-content: space-between; }
.tt-discovery .wrap{ flex-wrap: wrap; }
.tt-discovery .grid{ display: grid; gap: 20px; }
.tt-discovery .grid > *{ min-width: 0; }
.tt-discovery .grid-2{ grid-template-columns: repeat(2,1fr); }
.tt-discovery .grid-3{ grid-template-columns: repeat(3,1fr); }
.tt-discovery .grid-4{ grid-template-columns: repeat(4,1fr); }
.tt-discovery .gap-1{gap:4px}
.tt-discovery .gap-2{gap:8px}
.tt-discovery .gap-3{gap:12px}
.tt-discovery .gap-4{gap:16px}
.tt-discovery .gap-6{gap:24px}
.tt-discovery .gap-8{gap:32px}
.tt-discovery .mt-2{margin-top:8px}
.tt-discovery .mt-4{margin-top:16px}
.tt-discovery .mt-6{margin-top:24px}
.tt-discovery .mt-8{margin-top:32px}
.tt-discovery .flex-1{flex:1}
.tt-discovery .eyebrow{ font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing:.06em;
  text-transform: uppercase; color: var(--color-primary-500); }
.tt-discovery .h-display{ font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--color-ink); }
.tt-discovery .h1{ font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--color-ink); }
.tt-discovery .h2{ font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--color-ink); }
.tt-discovery .h3{ font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--color-ink); }
.tt-discovery .lead{ font-size: var(--fs-lg); color: var(--color-text); line-height: var(--lh-loose); }
.tt-discovery .muted{ color: var(--color-text-mute); }
.tt-discovery .faint{ color: var(--color-text-faint); }
.tt-discovery .small{ font-size: var(--fs-sm); }
.tt-discovery .xs{ font-size: var(--fs-xs); }
.tt-discovery .text-grad{ background: var(--gradient-primary); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.tt-discovery .section-head{ text-align: center; max-width: 640px; margin: 0 auto var(--sp-10); }
.tt-discovery .section-head .h2{ margin-top: 8px; }
.tt-discovery .section-head p{ margin-top: 10px; color: var(--color-text-mute); }
.tt-discovery .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size: var(--fs-md); font-weight: var(--fw-semibold); border-radius: var(--radius-pill);
  padding: 12px 24px; transition: all var(--dur) var(--ease); white-space: nowrap;
  border: 1.5px solid transparent; }
.tt-discovery .btn:active{ transform: scale(.97); }
.tt-discovery .btn-primary{ background: var(--gradient-primary); color:#fff; box-shadow: var(--shadow-primary); }
.tt-discovery .btn-primary:hover{ filter: brightness(1.06); box-shadow: 0 12px 30px rgba(91,84,236,.36); }
.tt-discovery .btn-accent{ background: var(--gradient-accent); color:#fff; box-shadow: var(--shadow-accent); }
.tt-discovery .btn-accent:hover{ filter: brightness(1.06); }
.tt-discovery .btn-ghost{ background: var(--color-surface); color: var(--color-ink); border-color: var(--color-line); }
.tt-discovery .btn-ghost:hover{ border-color: var(--color-primary-300); color: var(--color-primary-600); }
.tt-discovery .btn-soft{ background: var(--color-primary-50); color: var(--color-primary-600); }
.tt-discovery .btn-soft:hover{ background: var(--color-primary-100); }
.tt-discovery .btn-ai{ background: var(--gradient-ai); color:#fff; }
.tt-discovery .btn-lg{ padding: 15px 32px; font-size: var(--fs-lg); }
.tt-discovery .btn-sm{ padding: 8px 16px; font-size: var(--fs-sm); }
.tt-discovery .btn-block{ width: 100%; }
.tt-discovery .btn:disabled, .tt-discovery .btn.is-disabled{ opacity:.45; cursor: not-allowed; pointer-events:none; }
.tt-discovery .btn.is-loading{ color: transparent; position: relative; pointer-events:none; }
.tt-discovery .btn.is-loading::after{ content:""; position:absolute; width:16px; height:16px;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%;
  animation: spin .6s linear infinite; }
.tt-discovery .btn-ghost.is-loading::after{ border-color: rgba(91,84,236,.3); border-top-color: var(--color-primary-500); }
.tt-discovery .card{ background: var(--color-surface); border-radius: var(--radius-lg);
  border: 1px solid var(--color-line); box-shadow: var(--shadow-sm); }
.tt-discovery .card-pad{ padding: var(--sp-6); }
.tt-discovery .card-hover{ transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); cursor: pointer; }
.tt-discovery .card-hover:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tt-discovery .tutor-card{ background:var(--color-surface); border-radius:var(--radius-lg);
  border:1px solid var(--color-line); overflow:hidden; }
.tt-discovery .tutor-card-top{ padding:20px; display:flex; gap:14px; }
.tt-discovery .tutor-card-meta{ display:flex; gap:16px; padding:0 20px 12px; font-size:var(--fs-sm); color:var(--color-text-mute); }
.tt-discovery .tutor-card-foot{ padding:14px 20px; border-top:1px solid var(--color-line-soft);
  display:flex; align-items:center; justify-content:space-between; }
.tt-discovery .avatar{ border-radius:50%; object-fit:cover; background:var(--color-primary-100);
  display:flex; align-items:center; justify-content:center; font-weight:var(--fw-semibold);
  color:var(--color-primary-600); flex-shrink:0; }
.tt-discovery .avatar-xs{width:28px;height:28px;font-size:11px}
.tt-discovery .avatar-sm{width:40px;height:40px;font-size:14px}
.tt-discovery .avatar-md{width:56px;height:56px;font-size:18px}
.tt-discovery .avatar-lg{width:80px;height:80px;font-size:26px}
.tt-discovery .avatar-xl{width:112px;height:112px;font-size:34px}
.tt-discovery .avatar-ring{border:3px solid #fff;box-shadow:var(--shadow-sm)}
.tt-discovery .badge{ display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs);
  font-weight:var(--fw-semibold); padding:3px 9px; border-radius:var(--radius-pill); }
.tt-discovery .badge-primary{background:var(--color-info-bg);color:var(--color-primary-600)}
.tt-discovery .badge-success{background:var(--color-success-bg);color:var(--color-success)}
.tt-discovery .badge-warning{background:var(--color-warning-bg);color:var(--color-warning)}
.tt-discovery .badge-danger{background:var(--color-danger-bg);color:var(--color-danger)}
.tt-discovery .badge-ai{background:var(--color-ai-bg);color:var(--color-ai)}
.tt-discovery .badge-neutral{background:var(--color-line-soft);color:var(--color-text-mute)}
.tt-discovery .badge-verified{background:var(--color-info-bg);color:var(--color-primary-600)}
.tt-discovery .chip{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm);
  padding:7px 14px; border-radius:var(--radius-pill); background:var(--color-surface);
  border:1px solid var(--color-line); color:var(--color-text); cursor:pointer;
  transition:all var(--dur) var(--ease); }
.tt-discovery .chip:hover{border-color:var(--color-primary-300);color:var(--color-primary-600)}
.tt-discovery .chip.is-active{background:var(--color-primary-500);color:#fff;border-color:var(--color-primary-500)}
.tt-discovery .tag{ font-size:var(--fs-xs); padding:3px 8px; border-radius:var(--radius-xs);
  background:var(--color-line-soft); color:var(--color-text-mute); }
.tt-discovery .price{ display:inline-flex; align-items:baseline; gap:2px; color:var(--color-accent-600); font-weight:var(--fw-bold); }
.tt-discovery .price-cur{font-size:var(--fs-sm)}
.tt-discovery .price-num{font-size:var(--fs-h3)}
.tt-discovery .price-unit{font-size:var(--fs-xs);color:var(--color-text-mute);font-weight:var(--fw-regular)}
.tt-discovery .price-old{font-size:var(--fs-sm);color:var(--color-text-faint);text-decoration:line-through}
.tt-discovery .stars{display:inline-flex;gap:2px;color:var(--color-warning)}
.tt-discovery .stars svg{width:14px;height:14px}
.tt-discovery .status{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:var(--fw-medium); }
.tt-discovery .status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.tt-discovery .status-live{color:var(--color-danger)}
.tt-discovery .status-live::before{animation:pulse 1.4s infinite}
.tt-discovery .status-ok{color:var(--color-success)}
.tt-discovery .status-pending{color:var(--color-warning)}
.tt-discovery .status-muted{color:var(--color-text-mute)}
.tt-discovery .field{margin-bottom:18px}
.tt-discovery .field label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-medium);
  color:var(--color-ink-soft);margin-bottom:7px}
.tt-discovery .input, .tt-discovery .textarea, .tt-discovery .select{width:100%;padding:12px 14px;font-size:var(--fs-md);
  border:1.5px solid var(--color-line);border-radius:var(--radius-sm);
  background:var(--color-surface);color:var(--color-ink);transition:all var(--dur)}
.tt-discovery .input:focus, .tt-discovery .textarea:focus, .tt-discovery .select:focus{outline:none;border-color:var(--color-primary-400);
  box-shadow:0 0 0 3px var(--color-primary-100)}
.tt-discovery .input::placeholder{color:var(--color-text-faint)}
.tt-discovery .input-group{display:flex;gap:8px}
.tt-discovery .field-hint{font-size:var(--fs-xs);color:var(--color-text-mute);margin-top:5px}
.tt-discovery .field-error{font-size:var(--fs-xs);color:var(--color-danger);margin-top:5px}
.tt-discovery .checkbox{display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-sm);color:var(--color-text)}
.tt-discovery .checkbox input{margin-top:2px;width:16px;height:16px;accent-color:var(--color-primary-500)}
.tt-discovery .tabs{display:flex;gap:4px;border-bottom:1px solid var(--color-line)}
.tt-discovery .tab{padding:11px 16px;font-size:var(--fs-md);font-weight:var(--fw-medium);
  color:var(--color-text-mute);border-bottom:2px solid transparent;cursor:pointer;
  transition:all var(--dur);margin-bottom:-1px}
.tt-discovery .tab:hover{color:var(--color-ink)}
.tt-discovery .tab.is-active{color:var(--color-primary-600);border-bottom-color:var(--color-primary-500)}
.tt-discovery .tabs-pill{display:flex;gap:8px;flex-wrap:wrap}
.tt-discovery .tab-pill{padding:8px 16px;border-radius:var(--radius-pill);font-size:var(--fs-sm);
  font-weight:var(--fw-medium);background:var(--color-surface-2);color:var(--color-text-mute);
  cursor:pointer;transition:all var(--dur)}
.tt-discovery .tab-pill.is-active{background:var(--color-primary-500);color:#fff}
.tt-discovery .divider{height:1px;background:var(--color-line);margin:20px 0}
.tt-discovery .notice{display:flex;gap:10px;padding:13px 16px;border-radius:var(--radius-md);font-size:var(--fs-sm)}
.tt-discovery .notice-info{background:var(--color-info-bg);color:var(--color-primary-700)}
.tt-discovery .notice-warn{background:var(--color-warning-bg);color:#8a5a00}
.tt-discovery .notice-danger{background:var(--color-danger-bg);color:#a31f38}
.tt-discovery .notice-ai{background:var(--color-ai-bg);color:#6b3fb8}
.tt-discovery .ai-card{background:var(--gradient-ai);color:#fff;border-radius:var(--radius-lg);padding:var(--sp-6)}
.tt-discovery .stat-card{background:#fff;border-radius:var(--radius-lg);border:1px solid var(--color-line);
  padding:18px 20px}
.tt-discovery .stat-num{font-size:var(--fs-h1);font-weight:var(--fw-bold);color:var(--color-ink)}
.tt-discovery .stat-label{font-size:var(--fs-sm);color:var(--color-text-mute);margin-top:2px}
.tt-discovery .breadcrumb{display:flex;gap:8px;font-size:var(--fs-sm);color:var(--color-text-mute);
  padding:16px 0;flex-wrap:wrap}
.tt-discovery .breadcrumb a:hover{color:var(--color-primary-600)}
.tt-discovery .progress-bar{height:8px;background:var(--color-line-soft);border-radius:var(--radius-pill);overflow:hidden}
.tt-discovery .progress-fill{height:100%;background:var(--gradient-primary);border-radius:var(--radius-pill)}
.tt-discovery .kbd{font-size:11px;padding:2px 6px;border-radius:5px;background:var(--color-surface-2);
  border:1px solid var(--color-line);color:var(--color-text-mute)}
@container (max-width:980px){.tt-discovery .grid-4{grid-template-columns:repeat(2,1fr)}
.tt-discovery .grid-3{grid-template-columns:repeat(2,1fr)}
.tt-discovery .kpi-grid.grid-3{grid-template-columns:repeat(3,1fr)}
.tt-discovery .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
.tt-discovery .nav-links, .tt-discovery .app-nav-links{display:none}
.tt-discovery .h-display{font-size:34px}
}
@container (max-width:640px){.tt-discovery .grid-2, .tt-discovery .grid-3, .tt-discovery .grid-4{grid-template-columns:1fr}
.tt-discovery .kpi-grid.grid-3{grid-template-columns:repeat(3,1fr);gap:8px}
.tt-discovery .kpi-grid.grid-4{grid-template-columns:repeat(2,1fr);gap:8px}
.tt-discovery .kpi-grid .stat-card{padding:12px 10px}
.tt-discovery .kpi-grid .stat-num{font-size:20px}
.tt-discovery .kpi-grid .stat-label{font-size:12px;margin-top:2px}
.tt-discovery .container, .tt-discovery .container-narrow{padding:0 16px}
.tt-discovery .section{padding:var(--sp-12) 0}
}
.tt-discovery :focus-visible{
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}
.tt-discovery .hero{ background: var(--gradient-hero); padding: var(--sp-20) 0 var(--sp-16); position: relative; overflow: hidden; }
.tt-discovery .hero-blob{ position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; }
.tt-discovery .hero-blob.b1{ width: 340px; height: 340px; background: #c0c8ff; top: -80px; right: -60px; }
.tt-discovery .hero-blob.b2{ width: 280px; height: 280px; background: #ffd4b8; bottom: -100px; left: -40px; }
.tt-discovery .hero-inner{ position: relative; max-width: 760px; }
.tt-discovery .hero h1{ margin: 14px 0 16px; }
.tt-discovery .hero .lead{ max-width: 560px; }
.tt-discovery .search-box{ margin-top: 28px; background: #fff; border-radius: var(--radius-xl); padding: 8px;
  box-shadow: var(--shadow-lg); display: flex; gap: 8px; align-items: center; max-width: 620px; }
.tt-discovery .search-box .seg{ display: flex; align-items: center; gap: 8px; padding: 10px 14px; flex: 1; color: var(--color-text-mute); }
.tt-discovery .search-box .seg + .seg{ border-left: 1px solid var(--color-line); }
.tt-discovery .search-box input{ border: none; background: none; outline: none; font-size: var(--fs-md); width: 100%; color: var(--color-ink); }
.tt-discovery .hero-cta{ display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.tt-discovery .hero-tags{ display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; align-items: center; }
.tt-discovery .hero-tags span{ font-size: var(--fs-sm); color: var(--color-text-mute); }
.tt-discovery .hero-tags a{ font-size: var(--fs-sm); padding: 5px 12px; border-radius: var(--radius-pill);
  background: #fff; border: 1px solid var(--color-line); color: var(--color-ink-soft); transition: all var(--dur); }
.tt-discovery .hero-tags a:hover{ border-color: var(--color-primary-300); color: var(--color-primary-600); }
/* Source: apps/web/app/pages/index.vue:56–64,296–297. The outer band
   is a full-width block, not the shared shell's four-column grid. */
.tt-discovery.tt-home .trust-band{ display: block; width: 100%; padding: 0; }
.tt-discovery.tt-home .trust-band > .container{ width: 100%; }
.tt-discovery .trust-band{ background: #fff; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.tt-discovery .trust-grid{ display: grid; grid-template-columns: repeat(4, 1fr); padding: var(--sp-10) 0; gap: 24px; }
.tt-discovery .trust-item{ text-align: center; }
.tt-discovery .trust-num{ font-size: 36px; font-weight: var(--fw-bold); color: var(--color-ink); }
.tt-discovery .trust-num .text-grad{ font-size: 36px; }
.tt-discovery .subj-tile{ display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--radius-lg);
  background: #fff; border: 1px solid var(--color-line); transition: all var(--dur) var(--ease); cursor: pointer; }
.tt-discovery .subj-tile:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-primary-200); }
.tt-discovery .subj-ico{ width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #fff; }
.tt-discovery .grid-6{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tt-discovery .step-card{ position: relative; padding: 24px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--color-line); }
.tt-discovery .step-num{ width: 38px; height: 38px; border-radius: 11px; background: var(--color-primary-50);
  color: var(--color-primary-600); font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.tt-discovery .ai-section{ background: var(--color-ink); color: #fff; border-radius: var(--radius-xl); overflow: hidden; }
.tt-discovery .ai-section .h2, .tt-discovery .ai-section .h3{ color: #fff; }
.tt-discovery .ai-feature{ display: flex; gap: 14px; padding: 16px; border-radius: var(--radius-md); background: rgba(255, 255, 255, .05); }
.tt-discovery .ai-feature .ico{ width: 42px; height: 42px; border-radius: 12px; background: var(--gradient-ai);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tt-discovery .story-card{ padding: 24px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--color-line); }
.tt-discovery .quote-mark{ font-size: 48px; line-height: .5; color: var(--color-primary-200); font-weight: var(--fw-bold); }
.tt-discovery .recruit-band{ background: var(--gradient-accent); border-radius: var(--radius-xl); color: #fff; overflow: hidden; position: relative; }
.tt-discovery .inst-band{ background: var(--gradient-primary); border-radius: var(--radius-xl); color: #fff; overflow: hidden; }
.tt-discovery .social-tile{ display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--radius-lg);
  background: #fff; border: 1px solid var(--color-line); transition: all var(--dur); cursor: pointer; }
.tt-discovery .social-tile:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tt-discovery .social-ico{ width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: var(--fw-bold); flex-shrink: 0; }
.tt-discovery .seo-col h4{ font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--color-ink); margin-bottom: 12px; }
.tt-discovery .seo-col a{ display: inline-block; font-size: var(--fs-sm); color: var(--color-text-mute); padding: 4px 0; margin-right: 14px; }
.tt-discovery .seo-col a:hover{ color: var(--color-primary-600); }
.tt-discovery .final-cta{ background: var(--gradient-hero); text-align: center; border-radius: var(--radius-xl); padding: var(--sp-16); }
@container (max-width: 980px){.tt-discovery .trust-grid, .tt-discovery .grid-6{ grid-template-columns: repeat(3, 1fr); }
.tt-discovery .hero h1{ font-size: 32px; }
}
@container (max-width: 640px){.tt-discovery .trust-grid, .tt-discovery .grid-6{ grid-template-columns: repeat(2, 1fr); }
.tt-discovery .search-box{ flex-direction: column; align-items: stretch; }
.tt-discovery .search-box .seg + .seg{ border-left: none; border-top: 1px solid var(--color-line); }
}
.tt-discovery .listing-hero{ background: var(--gradient-hero); padding: var(--sp-12) 0; }
.tt-discovery.tt-tutors .filter-bar{ background: #fff; border-bottom: 1px solid var(--color-line); padding: 16px 0; position: sticky; top: var(--nav-h); z-index: var(--z-sticky); }
.tt-discovery .filter-chips{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tt-discovery .layout{ display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
.tt-discovery .sidebar{ position: sticky; top: calc(var(--nav-h) + 80px); }
.tt-discovery .filter-group{ padding: 18px 0; border-bottom: 1px solid var(--color-line); }
.tt-discovery .filter-group:last-child{ border-bottom: none; }
.tt-discovery .filter-group h4{ font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--color-ink); margin-bottom: 12px; }
.tt-discovery .filter-opt{ display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: var(--fs-sm); color: var(--color-text); cursor: pointer; }
.tt-discovery .filter-opt input{ width: 15px; height: 15px; accent-color: var(--color-primary-500); }
.tt-discovery .seo-link-band{ display: flex; gap: 10px; flex-wrap: wrap; }
.tt-discovery .seo-link-band a{ font-size: var(--fs-sm); padding: 7px 14px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--color-line); color: var(--color-ink-soft); transition: all var(--dur); }
.tt-discovery .seo-link-band a:hover{ border-color: var(--color-primary-300); color: var(--color-primary-600); }
.tt-discovery .faq-item{ border: 1px solid var(--color-line); border-radius: var(--radius-md); margin-bottom: 10px; background: #fff; overflow: hidden; }
.tt-discovery .faq-q{ padding: 16px 20px; font-weight: var(--fw-medium); color: var(--color-ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.tt-discovery .faq-a{ padding: 0 20px; max-height: 0; overflow: hidden; transition: all var(--dur); color: var(--color-text-mute); font-size: var(--fs-sm); }
.tt-discovery .faq-item.open .faq-a{ max-height: 200px; padding: 0 20px 18px; }
.tt-discovery .faq-item.open .faq-q svg{ transform: rotate(180deg); }
.tt-discovery .faq-q svg{ transition: transform var(--dur); }
.tt-discovery .search-mini{ box-shadow: none; border: 1.5px solid var(--color-line); max-width: 320px; margin: 0; padding: 4px 4px 4px 12px; display: flex; align-items: center; gap: 8px; border-radius: var(--radius-pill); background: #fff; }
.tt-discovery .search-mini input{ border: none; background: none; outline: none; font-size: var(--fs-sm); width: 100%; }
@container (max-width: 980px){.tt-discovery .layout{ grid-template-columns: 1fr; }
.tt-discovery .sidebar{ display: none; }
}
.tt-discovery .c-hero{ background: var(--gradient-hero); padding: var(--sp-12) 0; }
.tt-discovery .type-tabs{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.tt-discovery.tt-courses .filter-bar{ background: #fff; border-bottom: 1px solid var(--color-line); padding: 14px 0; position: sticky; top: var(--nav-h); z-index: var(--z-sticky); }
.tt-discovery .course-cover{ height: 148px; display: flex; align-items: flex-start; justify-content: space-between; padding: 14px; }
.tt-discovery .plan-card{ display: flex; gap: 20px; padding: 24px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--color-line); }
.tt-discovery .plan-rank{ width: 48px; height: 48px; border-radius: 14px; background: var(--gradient-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: 20px; flex-shrink: 0; }
@container (max-width: 640px){.tt-discovery .plan-card{ flex-direction: column; }
}
.tt-discovery .u-001{ color:var(--color-ink) !important }
.tt-discovery .u-004{ color:#fff !important }
.tt-discovery .u-008{ margin-bottom:14px !important }
.tt-discovery .u-014{ margin-bottom:18px !important }
.tt-discovery .u-019{ margin-bottom:24px !important }
.tt-discovery .u-020{ overflow:hidden !important }
.tt-discovery .u-022{ text-align:center !important; background:var(--gradient-hero) !important; border:none !important; padding:var(--sp-12) !important }
.tt-discovery .u-025{ margin-top:8px !important }
.tt-discovery .u-026{ background:#fff !important; color:var(--color-primary-600) !important }
.tt-discovery .u-029{ flex:1 !important }
.tt-discovery .u-032{ font-size:var(--fs-md) !important }
.tt-discovery .u-050{ background:var(--color-accent-100) !important; color:var(--color-accent-600) !important }
.tt-discovery .u-053{ background:#fff !important; color:var(--color-accent-600) !important }
.tt-discovery .u-054{ color:#a0a3b8 !important }
.tt-discovery .u-065{ justify-content:center !important }
.tt-discovery .u-067{ text-align:center !important; margin-top:36px !important }
.tt-discovery .u-069{ font-size:18px !important }
.tt-discovery .u-070{ color:#c4c6d6 !important; margin-bottom:6px !important }
.tt-discovery .u-099{ width:auto !important; padding:9px 12px !important }
.tt-discovery .u-108{ color:var(--color-ai) !important }
.tt-discovery .u-109{ background:var(--color-teal-50) !important; color:var(--color-teal-600) !important }
.tt-discovery .u-110{ max-width:560px !important }
.tt-discovery .u-111{ color:#fff !important; opacity:.85 !important }
.tt-discovery .u-112{ color:#fff !important; opacity:.92 !important; margin-top:10px !important }
.tt-discovery .u-196{ align-items:flex-end !important; gap:8px !important }
.tt-discovery .u-223{ background:var(--color-primary-100) !important; color:var(--color-primary-600) !important }
.tt-discovery .u-224{ margin-bottom:32px !important; align-items:flex-end !important }
.tt-discovery .u-225{ text-align:center !important; margin-top:32px !important }
.tt-discovery .u-226{ align-items:center !important; gap:0 !important }
.tt-discovery .u-227{ padding:56px !important }
.tt-discovery .u-228{ color:#c4c6d6 !important }
.tt-discovery .u-229{ padding:40px 56px 40px 0 !important }
.tt-discovery .u-230{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.12) !important }
.tt-discovery .u-233{ background:rgba(155,109,245,.18) !important; color:#d9c9fb !important }
.tt-discovery .u-234{ padding:48px 56px !important; flex-wrap:wrap !important; gap:24px !important }
.tt-discovery .u-235{ background:rgba(255,255,255,.15) !important; color:#fff !important; border-color:rgba(255,255,255,.4) !important }
.tt-discovery .u-236{ padding:44px 56px !important; flex-wrap:wrap !important; gap:24px !important }
.tt-discovery .u-237{ background:#ff2442 !important }
.tt-discovery .u-238{ background:#1a1c2e !important }
.tt-discovery .u-239{ background:#00aeec !important }
.tt-discovery .u-240{ margin:14px auto 28px !important; max-width:520px !important }

.tt-discovery { font-family: var(--font-sans);font-size:15px;line-height:1.5;color:var(--color-text);background:var(--color-bg); }
.tt-discovery * {box-sizing:border-box;}
.tt-discovery h1,.tt-discovery h2,.tt-discovery h3,.tt-discovery h4,.tt-discovery p {margin:0;}
.tt-discovery a {color:inherit;text-decoration:none;cursor:pointer;}
.tt-discovery button {font:inherit;cursor:pointer;}
.tt-discovery .chip.is-on,.tt-discovery .tab-pill.is-on {background:var(--color-primary-500);color:#fff;border-color:var(--color-primary-500);}
.tt-discovery .faq-q {width:100%;border:0;background:none;text-align:left;gap:12px;}
.tt-discovery .faq-item.is-open .faq-a {max-height:200px;padding:0 20px 18px;}
.tt-discovery .course-cover {height:148px;}
.tt-discovery .tutor-card-meta {gap:16px;flex-wrap:nowrap;}
.tt-discovery .tutor-card-top .row {flex-wrap:nowrap;}
.tt-discovery .tutor-card-top > div {min-width:0;}
.tt-discovery .type-tabs button {border:0;}
@container (max-width:980px) {.tt-discovery .grid-3,.tt-discovery .grid-4 {grid-template-columns:repeat(2,minmax(0,1fr));}.tt-discovery .h-display {font-size:34px;}}
@container (max-width:640px) {.tt-discovery .grid-2,.tt-discovery .grid-3,.tt-discovery .grid-4 {grid-template-columns:minmax(0,1fr);}.tt-discovery .u-227,.tt-discovery .u-229 {padding:24px !important;}.tt-discovery .u-234,.tt-discovery .u-236 {padding:32px 24px !important;}.tt-discovery .final-cta {padding:40px 24px;}.tt-discovery .row-between {gap:12px;flex-wrap:wrap;}}

.tt-discovery .mt-2 {margin-top:8px;}
.tt-discovery .mt-4 {margin-top:16px;}
.tt-discovery .mt-6 {margin-top:24px;}
.tt-discovery .mt-8 {margin-top:32px;}
.tt-discovery .hero h1 {margin:14px 0 16px;}
.tt-discovery .section-head .h2 {margin-top:8px;}
.tt-discovery .section-head p {margin-top:10px;}

/* Discovery cascade isolation; source body line-height is 1.5. */
.tt-discovery .search-box .seg {background:transparent;border-radius:0;}
.tt-discovery .btn,.tt-discovery .h3 {line-height:1.5;}
.tt-discovery .faq-item.is-open .faq-q svg {transform:rotate(180deg);}
.tt-discovery [hidden] {display:none !important;}
@container (max-width:640px) {
  /* Narrow-only protection for long localized badge/metadata rows. */
  .tt-discovery .tutor-card-meta,.tt-discovery .tutor-card-top .row {flex-wrap:wrap;}
}

/* Source cascade isolation; explicit u-020 cover clipping remains authoritative. */
.tt-discovery .badge {line-height:1.5;}
.tt-discovery .card {overflow:visible;}
.tt-discovery .faq-q svg {flex-shrink:0;}
.drawer-reference-web .tt-filter-drawer {background:#fff;}

/* Full source detail family: TT 2c0998cd. Scoped; no global body mutation. */
.public-detail .t-hero { background: var(--gradient-hero); padding: var(--sp-10) 0 var(--sp-12); }
.public-detail .t-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.public-detail .t-id { display: flex; gap: 22px; }
.public-detail .t-meta-row { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; font-size: var(--fs-sm); color: var(--color-text); }
.public-detail .t-meta-row b { color: var(--color-ink); }
.public-detail .verify-line { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.public-detail .t-side-card { position: sticky; top: calc(var(--nav-h) + 16px); }
.public-detail .sticky-nav { position: sticky; top: var(--nav-h); z-index: var(--z-sticky); background: #fff; border-bottom: 1px solid var(--color-line); }
.public-detail .sticky-nav .container { display: flex; gap: 6px; overflow-x: auto; }
.public-detail .sticky-nav a { padding: 14px 16px; font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--color-text-mute); border-bottom: 2px solid transparent; white-space: nowrap; }
.public-detail .sticky-nav a:hover { color: var(--color-ink); }
.public-detail .sticky-nav a.is-active { color: var(--color-primary-600); border-bottom-color: var(--color-primary-500); }
.public-detail .skill-bar { margin-bottom: 14px; }
.public-detail .avail-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }

@container (max-width: 640px) {.public-detail .avail-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.public-detail .slot { padding: 7px 2px; font-size: 11px; }
}
.public-detail .avail-day { text-align: center; }
.public-detail .avail-day .dname { font-size: var(--fs-xs); color: var(--color-text-mute); margin-bottom: 8px; }
.public-detail .slot { padding: 8px 4px; border-radius: var(--radius-sm); font-size: var(--fs-xs); margin-bottom: 6px; cursor: pointer; transition: all var(--dur); }
.public-detail .slot.free { background: var(--color-primary-50); color: var(--color-primary-600); }
.public-detail .slot.free:hover { background: var(--color-primary-100); }
.public-detail .slot.busy { background: var(--color-line-soft); color: var(--color-text-faint); cursor: not-allowed; }
.public-detail .feed-card { border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; }
.public-detail .feed-img { height: 140px; background: var(--gradient-hero); }
.public-detail .review-card { padding: 20px; border-bottom: 1px solid var(--color-line-soft); }
.public-detail .conv-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--color-line); padding: 12px 0; z-index: var(--z-sticky); box-shadow: 0 -4px 20px rgba(26,28,46,.08); }
.public-detail .protect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.public-detail .protect-item { display: flex; gap: 12px; padding: 18px; border-radius: var(--radius-md); background: var(--color-surface-2); }
.public-detail .protect-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--color-success-bg); color: var(--color-success); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

@container (max-width: 980px) {.public-detail .t-hero-grid { grid-template-columns: 1fr; }
.public-detail .protect-grid { grid-template-columns: 1fr; }
.public-detail .layout { grid-template-columns: minmax(0, 1fr) !important; }
.public-detail .t-side-card { position: static; }
}

.course-detail .cd-hero { background: var(--gradient-hero); padding: var(--sp-10) 0; }
.course-detail .cd-grid { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.course-detail .cd-cover { height: 240px; border-radius: var(--radius-lg); background: var(--gradient-primary); display: flex; align-items: flex-end; padding: 24px; }
.course-detail .cd-side { position: sticky; top: calc(var(--nav-h) + 16px); }
.course-detail .tutor-avatar { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.course-detail .value-item { display: flex; gap: 12px; padding: 14px 0; }
.course-detail .value-ico { width: 38px; height: 38px; border-radius: 11px; background: var(--color-primary-50); color: var(--color-primary-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.course-detail .chapter { display: block; padding: 0; gap: 0; border: 1px solid var(--color-line); border-radius: var(--radius-md); margin-bottom: 8px; overflow: hidden; }
.course-detail .chapter-h { padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: var(--fw-medium); color: var(--color-ink); }
.course-detail .chapter-b { max-height: 0; overflow: hidden; transition: all var(--dur); }
.course-detail .chapter.open .chapter-b { max-height: 300px; }
.course-detail .chapter.open .chapter-h svg { transform: rotate(180deg); }
.course-detail .chapter-h svg { transition: transform var(--dur); }
.course-detail .lesson-row { padding: 11px 18px; border-top: 1px solid var(--color-line-soft); border-bottom: 0; display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--color-text); }
.course-detail .faq-item { border: 1px solid var(--color-line); border-radius: var(--radius-md); margin-bottom: 10px; background: #fff; overflow: hidden; }
.course-detail .faq-q { padding: 15px 18px; font-weight: var(--fw-medium); color: var(--color-ink); cursor: pointer; display: flex; justify-content: space-between; }
.course-detail .faq-a { padding: 0 18px; max-height: 0; overflow: hidden; transition: all var(--dur); color: var(--color-text-mute); font-size: var(--fs-sm); }
.course-detail .faq-item.open .faq-a { max-height: 200px; padding: 0 18px 16px; }
.course-detail .conv-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--color-line); padding: 12px 0; z-index: var(--z-sticky); box-shadow: 0 -4px 20px rgba(26,28,46,.08); }

@container (max-width: 980px) {.course-detail .cd-grid { grid-template-columns: 1fr; } }

.public-editorial .art-hero { background: var(--gradient-hero); padding: var(--sp-10) 0; }
.public-editorial .art-layout { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; }
.public-editorial .art-body { font-size: var(--fs-lg); line-height: var(--lh-loose); color: var(--color-text); }
.public-editorial .art-body h2 { font-size: var(--fs-h2); color: var(--color-ink); font-weight: var(--fw-bold); margin: 32px 0 14px; scroll-margin-top: 100px; }
.public-editorial .art-body h3 { font-size: var(--fs-h3); color: var(--color-ink); font-weight: var(--fw-semibold); margin: 24px 0 10px; }
.public-editorial .art-body p { margin-bottom: 16px; }
.public-editorial .art-body img, .public-editorial .art-fig { display: block; width: 100%; height: 240px; border-radius: var(--radius-md); margin: 20px 0; background: var(--gradient-primary); }
.public-editorial .art-body ul { margin: 0 0 16px; padding-left: 4px; }
.public-editorial .art-body ul li { position: relative; padding-left: 22px; margin-bottom: 10px; font-size: var(--fs-md); }
.public-editorial .art-body ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary-500); }
.public-editorial .art-side { position: sticky; top: calc(var(--nav-h) + 16px); }
.public-editorial .g-layout { grid-template-columns: 240px 1fr 280px; gap: 36px; }
.public-editorial .g-toc { position: sticky; top: calc(var(--nav-h) + 16px); }
.public-editorial .g-toc a { display: block; padding: 8px 12px; border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--color-text-mute); transition: all var(--dur); }
.public-editorial .g-toc a:hover, .public-editorial .g-toc a.is-active { background: var(--color-primary-50); color: var(--color-primary-600); }
@container (max-width: 1100px) {.public-editorial .g-layout { grid-template-columns: 1fr 280px; }
.public-editorial .g-toc { display: none; } }
@container (max-width: 980px) {.public-editorial .art-layout { grid-template-columns: 1fr; }
.public-editorial .art-side { position: static; } }


.tt-discovery.public-detail { padding-bottom:100px; }
.public-detail .detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:40px; align-items:start; }
.public-detail .detail-rail { position:sticky; top:calc(var(--nav-h) + 16px); }
.public-detail .detail-section { margin-bottom:24px; scroll-margin-top:140px; }
.public-detail .detail-related, .public-editorial .editorial-related { display:block; padding:10px 0; border-bottom:1px solid var(--color-line-soft); }
.public-detail .detail-related.row { display:flex; }
.public-detail .detail-course-card { overflow:hidden; }
.public-detail .detail-course-cover { height:110px; display:flex; align-items:center; justify-content:center; }
.public-detail .detail-actions { display:flex; flex-direction:column; gap:8px; }
.public-detail .slot { display:block; width:100%; border:0; }
.public-detail .conv-bar { position:fixed; bottom:0; margin-top:0; }
.public-detail .detail-faq { margin:48px auto 0; }
.public-detail .detail-faq-answer, .public-editorial .detail-faq-answer { padding:0 18px 16px; color:var(--color-text-mute); }
.public-detail .detail-nav-link, .public-editorial .detail-nav-link { padding:14px 16px; background:transparent; border:0; white-space:nowrap; cursor:pointer; }
.public-detail .detail-nav-link:hover, .public-detail .detail-nav-link:focus-visible { color:var(--color-primary-600); border-bottom:2px solid var(--color-primary-500); }
.public-editorial .g-toc .detail-nav-link { display:block; white-space:normal; text-align:left; }
.public-editorial .editorial-cta { background:var(--gradient-hero); text-align:center; border:none; }
.public-editorial [aria-disabled], .seo-col [aria-disabled] { display:block; color:var(--c-mute); font-size:var(--fs-sm); padding:8px 0; }
@container (max-width:1100px) { .public-editorial .g-layout { grid-template-columns:minmax(0,1fr) 280px; } .public-editorial .g-toc { display:none; } }
@container (max-width:980px) {
 .public-detail .t-hero-grid, .public-detail .cd-grid, .public-detail .detail-layout, .public-editorial .art-layout { grid-template-columns:minmax(0,1fr); }
 .public-detail .t-side-card, .public-detail .cd-side, .public-detail .detail-rail, .public-editorial .art-side { position:static; }
 .public-detail .protect-grid { grid-template-columns:minmax(0,1fr); }
}
@container (max-width:640px) {
 .public-detail .avail-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
 .public-detail .slot { padding:7px 2px; font-size:11px; }
 .public-detail .t-id { gap:12px; flex-wrap:wrap; }
 .public-detail .grid-2, .public-detail .grid-3, .public-editorial .grid-2 { grid-template-columns:minmax(0,1fr); }
 .public-detail .conv-bar .container { flex-direction:column; align-items:stretch; gap:8px; }
 .public-detail .conv-bar .btn { flex:1; min-width:0; font-size:12px; padding:10px 8px; }
 .public-detail .detail-conv-label { font-size:12px; }
 .public-detail .detail-conv-label .avatar { display:none; }
 .public-detail .cd-cover { height:200px; padding:18px; }
}

.public-detail .detail-nav-link.is-active { color:var(--color-primary-600); border-bottom:2px solid var(--color-primary-500); }

/* Exact source utility equivalents, confined to the repaired family. */
.public-detail .detail-tutor-lead { margin-top:6px; font-size:var(--fs-md); }
.public-detail .detail-tutor-price { font-size:28px; }
.public-detail .detail-tutor-price .price-cur, .public-detail .detail-course-price .price-cur { font-size:16px; }
.public-detail .detail-tutor-price .price-num { font-size:34px; }
.public-detail .detail-course-price { font-size:30px; }
.public-detail .detail-course-price .price-num { font-size:38px; }
.public-detail .detail-course-price .price-old { font-size:15px; }
.tt-discovery.course-detail .detail-cover-title { color:#fff; margin-top:10px; }
.public-detail .cd-cover .badge { background:#fff; color:var(--color-primary-600); }
.public-detail .skill-bar .row-between { margin-bottom:6px; }
.public-detail [data-detail-section="courses"] > h2, .public-detail [data-detail-section="feed"] > h2, .public-detail [data-detail-section="protection"] > h2 { margin-bottom:18px; }
.public-detail [data-detail-section="courses"] > .grid, .public-detail [data-detail-section="feed"] > .grid { margin-top:0; }
.public-detail .feed-card .card-pad { padding:14px; }
.public-detail .detail-reviews { overflow:hidden; }
.public-detail .detail-review-header { padding-bottom:0; }
.public-detail .detail-rating { font-size:22px; color:var(--color-ink); }
.public-detail .detail-reviews .review-card:nth-last-child(2) { border-bottom:none; }
.public-detail .detail-review-footer { text-align:center; }
.public-detail .detail-related:last-child, .public-editorial .editorial-related:last-child { border-bottom:none; }
.public-detail .detail-related-course { padding:8px 0; }
.public-detail .detail-rail h3, .public-editorial .art-side h3 { margin-bottom:10px; }
.public-detail .detail-rail .card:first-child h3 { margin-bottom:14px; }
.public-editorial .editorial-lead { margin-top:8px; }
.public-editorial .editorial-toc-title { display:block; font-weight:var(--fw-semibold); color:var(--color-ink); padding:8px 12px; }
.public-editorial .g-toc .detail-nav-link { width:100%; padding:8px 12px; border-radius:var(--radius-sm); font-size:13px; color:var(--color-text-mute); transition:all var(--dur); border:0; }
.public-editorial .g-toc .detail-nav-link:hover, .public-editorial .g-toc .detail-nav-link.is-active { background:var(--color-primary-50); color:var(--color-primary-600); border:0; }
.public-detail summary, .public-editorial summary { list-style:none; }
.public-detail summary::-webkit-details-marker, .public-editorial summary::-webkit-details-marker { display:none; }
.public-detail details[open] > summary svg, .public-editorial details[open] > summary svg { transform:rotate(180deg); }
.public-detail summary svg, .public-editorial summary svg { transition:transform var(--dur); flex-shrink:0; }
.public-detail .detail-faq-answer, .public-editorial .detail-faq-answer { font-size:var(--fs-sm); }

.public-detail .detail-bottom-price { margin-left:10px; }
.public-detail [data-detail-section="curriculum"] > h2 { margin-bottom:16px; }
.public-editorial article > section > h2 { margin-bottom:16px; }

/* PM marketing family — source-scoped append; no frozen public selector changes. */
.pm-family {

  --color-primary-50:  #eef1ff;
  --color-primary-100: #dde2ff;
  --color-primary-200: #c0c8ff;
  --color-primary-300: #99a4ff;
  --color-primary-400: #7079f8;
  --color-primary-500: #5b54ec;
  --color-primary-600: #4c3fd6;
  --color-primary-700: #4133b3;
  --color-primary-800: #362d90;
  --color-primary-900: #2f2b73;


  --color-accent-50:  #fff4ed;
  --color-accent-100: #ffe6d4;
  --color-accent-300: #ffb27a;
  --color-accent-500: #ff7a3d;
  --color-accent-600: #f15f1f;
  --color-accent-700: #c84a15;


  --color-teal-50:  #e8fbf6;
  --color-teal-300: #6fe3c8;
  --color-teal-500: #16b896;
  --color-teal-600: #0f9a7e;


  --gradient-ai: linear-gradient(135deg, #6a5cf0 0%, #9b6df5 50%, #c66ff0 100%);
  --gradient-hero: linear-gradient(160deg, #eef1ff 0%, #f6f4ff 45%, #fff4ed 100%);
  --gradient-primary: linear-gradient(135deg, #5b54ec 0%, #7079f8 100%);
  --gradient-accent: linear-gradient(135deg, #ff7a3d 0%, #f15f1f 100%);
  --gradient-soft: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);


  --color-ink:       #1a1c2e;
  --color-ink-soft:  #3d4159;
  --color-text:      #4a4d63;
  --color-text-mute: #8b8fa3;
  --color-text-faint:#aeb1c4;
  --color-line:      #e9eaf2;
  --color-line-soft: #f1f2f8;
  --color-bg:        #f7f8fc;
  --color-bg-warm:   #fbfaf7;
  --color-surface:   #ffffff;
  --color-surface-2: #f9fafe;


  --color-success:   #16b896;
  --color-success-bg:#e8fbf6;
  --color-warning:   #f5a623;
  --color-warning-bg:#fff5e3;
  --color-danger:    #ef4d6a;
  --color-danger-bg: #ffecef;
  --color-info:      #5b54ec;
  --color-info-bg:   #eef1ff;
  --color-ai:        #9b6df5;
  --color-ai-bg:     #f3eefe;


  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
               "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --fs-display: 44px;
  --fs-h1: 32px;
  --fs-h2: 24px;
  --fs-h3: 19px;
  --fs-lg: 17px;
  --fs-md: 15px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-loose: 1.7;


  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;


  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;


  --shadow-xs: 0 1px 2px rgba(26,28,46,.05);
  --shadow-sm: 0 2px 8px rgba(26,28,46,.06);
  --shadow-md: 0 6px 20px rgba(26,28,46,.08);
  --shadow-lg: 0 14px 40px rgba(26,28,46,.12);
  --shadow-primary: 0 8px 24px rgba(91,84,236,.28);
  --shadow-accent: 0 8px 24px rgba(255,122,61,.28);


  --container: 1200px;
  --container-narrow: 960px;
  --nav-h: 68px;
  --mobile-nav-h: 54px;
  --mobile-tab-h: 64px;


  --z-nav: 100;
  --z-sticky: 90;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;


  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: .15s;
  --dur: .25s;
  --dur-slow: .4s;
}
.pm-family * { box-sizing: border-box; margin: 0; padding: 0; }
.pm-family {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pm-family a { color: inherit; text-decoration: none; }
.pm-family button { font-family: inherit; cursor: pointer; border: none; background: none; }
.pm-family img { display: block; max-width: 100%; }
.pm-family ul, .pm-family ol { list-style: none; }
.pm-family input, .pm-family textarea, .pm-family select { font-family: inherit; }
.pm-family ::selection { background: var(--color-primary-200); }
.pm-family .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.pm-family .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }
.pm-family .section { padding: var(--sp-20) 0; }
.pm-family .section-sm { padding: var(--sp-12) 0; }
.pm-family .section-warm { background: var(--color-bg-warm); }
.pm-family .stack { display: flex; flex-direction: column; }
.pm-family .row { display: flex; align-items: center; }
.pm-family .row-between { display: flex; align-items: center; justify-content: space-between; }
.pm-family .wrap { flex-wrap: wrap; }
.pm-family .grid { display: grid; gap: 20px; }
.pm-family .grid > * { min-width: 0; }
.pm-family .grid-2 { grid-template-columns: repeat(2,1fr); }
.pm-family .grid-3 { grid-template-columns: repeat(3,1fr); }
.pm-family .grid-4 { grid-template-columns: repeat(4,1fr); }
.pm-family .gap-2 {gap:8px}
.pm-family .gap-3 {gap:12px}
.pm-family .gap-4 {gap:16px}
.pm-family .gap-6 {gap:24px}
.pm-family .mt-2 {margin-top:8px}
.pm-family .mt-4 {margin-top:16px}
.pm-family .mt-6 {margin-top:24px}
.pm-family .mt-8 {margin-top:32px}
.pm-family .eyebrow { font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing:.06em;
  text-transform: uppercase; color: var(--color-primary-500); }
.pm-family .h-display { font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--color-ink); }
.pm-family .h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--color-ink); }
.pm-family .h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--color-ink); }
.pm-family .h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--color-ink); }
.pm-family .lead { font-size: var(--fs-lg); color: var(--color-text); line-height: var(--lh-loose); }
.pm-family .muted { color: var(--color-text-mute); }
.pm-family .small { font-size: var(--fs-sm); }
.pm-family .xs { font-size: var(--fs-xs); }
.pm-family .text-grad { background: var(--gradient-primary); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.pm-family .section-head { display: block; text-align: center; max-width: 640px; margin: 0 auto var(--sp-10); }
.pm-family .section-head .h2 { margin-top: 8px; }
.pm-family .section-head p { margin-top: 10px; color: var(--color-text-mute); }
.pm-family .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size: var(--fs-md); font-weight: var(--fw-semibold); border-radius: var(--radius-pill);
  padding: 12px 24px; transition: all var(--dur) var(--ease); white-space: nowrap;
  border: 1.5px solid transparent; }
.pm-family .btn:active { transform: scale(.97); }
.pm-family .btn-primary { background: var(--gradient-primary); color:#fff; box-shadow: var(--shadow-primary); }
.pm-family .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 12px 30px rgba(91,84,236,.36); }
.pm-family .btn-accent { background: var(--gradient-accent); color:#fff; box-shadow: var(--shadow-accent); }
.pm-family .btn-accent:hover { filter: brightness(1.06); }
.pm-family .btn-ghost { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-line); }
.pm-family .btn-ghost:hover { border-color: var(--color-primary-300); color: var(--color-primary-600); }
.pm-family .btn-soft { background: var(--color-primary-50); color: var(--color-primary-600); }
.pm-family .btn-soft:hover { background: var(--color-primary-100); }
.pm-family .btn-ai { background: var(--gradient-ai); color:#fff; }
.pm-family .btn-lg { padding: 15px 32px; font-size: var(--fs-lg); }
.pm-family .btn-sm { padding: 8px 16px; font-size: var(--fs-sm); }
.pm-family .btn-block { width: 100%; }
.pm-family .btn:disabled { opacity:.45; cursor: not-allowed; pointer-events:none; }
.pm-family .card { background: var(--color-surface); border-radius: var(--radius-lg);
  border: 1px solid var(--color-line); box-shadow: var(--shadow-sm); }
.pm-family .card-pad { padding: var(--sp-6); }
.pm-family .card-hover { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); cursor: pointer; }
.pm-family .card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pm-family .tutor-card { background:var(--color-surface); border-radius:var(--radius-lg);
  border:1px solid var(--color-line); overflow:hidden; }
.pm-family .tutor-card-top { padding:20px; display:flex; gap:14px; }
.pm-family .tutor-card-meta { display:flex; gap:16px; padding:0 20px 12px; font-size:var(--fs-sm); color:var(--color-text-mute); }
.pm-family .tutor-card-foot { padding:14px 20px; border-top:1px solid var(--color-line-soft);
  display:flex; align-items:center; justify-content:space-between; }
.pm-family .avatar { border-radius:50%; object-fit:cover; background:var(--color-primary-100);
  display:flex; align-items:center; justify-content:center; font-weight:var(--fw-semibold);
  color:var(--color-primary-600); flex-shrink:0; }
.pm-family .avatar-sm {width:40px;height:40px;font-size:14px}
.pm-family .avatar-md {width:56px;height:56px;font-size:18px}
.pm-family .avatar-ring {border:3px solid #fff;box-shadow:var(--shadow-sm)}
.pm-family .badge { display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs);
  font-weight:var(--fw-semibold); padding:3px 9px; border-radius:var(--radius-pill); }
.pm-family .badge-primary {background:var(--color-info-bg);color:var(--color-primary-600)}
.pm-family .badge-success {background:var(--color-success-bg);color:var(--color-success)}
.pm-family .badge-warning {background:var(--color-warning-bg);color:var(--color-warning)}
.pm-family .badge-danger {background:var(--color-danger-bg);color:var(--color-danger)}
.pm-family .badge-ai {background:var(--color-ai-bg);color:var(--color-ai)}
.pm-family .price { display:inline-flex; align-items:baseline; gap:2px; color:var(--color-accent-600); font-weight:var(--fw-bold); }
.pm-family .price-cur {font-size:var(--fs-sm)}
.pm-family .price-num {font-size:var(--fs-h3)}
.pm-family .price-unit {font-size:var(--fs-xs);color:var(--color-text-mute);font-weight:var(--fw-regular)}
.pm-family .stars {display:inline-flex;gap:2px;color:var(--color-warning)}
.pm-family .stars svg {width:14px;height:14px}
.pm-family .field {margin-bottom:18px}
.pm-family .field label {display:block;font-size:var(--fs-sm);font-weight:var(--fw-medium);
  color:var(--color-ink-soft);margin-bottom:7px}
.pm-family .input, .pm-family .textarea, .pm-family .select {width:100%;padding:12px 14px;font-size:var(--fs-md);
  border:1.5px solid var(--color-line);border-radius:var(--radius-sm);
  background:var(--color-surface);color:var(--color-ink);transition:all var(--dur)}
.pm-family .input:focus, .pm-family .textarea:focus, .pm-family .select:focus {outline:none;border-color:var(--color-primary-400);
  box-shadow:0 0 0 3px var(--color-primary-100)}
.pm-family .input::placeholder {color:var(--color-text-faint)}
.pm-family .checkbox {display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-sm);color:var(--color-text)}
.pm-family .checkbox input {margin-top:2px;width:16px;height:16px;accent-color:var(--color-primary-500)}
.pm-family .divider {height:1px;background:var(--color-line);margin:20px 0}
.pm-family .notice {display:flex;gap:10px;padding:13px 16px;border-radius:var(--radius-md);font-size:var(--fs-sm)}
.pm-family .notice-info {background:var(--color-info-bg);color:var(--color-primary-700)}
.pm-family .notice-warn {background:var(--color-warning-bg);color:#8a5a00}
.pm-family .notice-danger {background:var(--color-danger-bg);color:#a31f38}
.pm-family .ai-card {background:var(--gradient-ai);color:#fff;border-radius:var(--radius-lg);padding:var(--sp-6)}
.pm-family .stat-num {font-size:var(--fs-h1);font-weight:var(--fw-bold);color:var(--color-ink)}
.pm-family .stat-label {font-size:var(--fs-sm);color:var(--color-text-mute);margin-top:2px}
.pm-family .progress-bar {height:8px;background:var(--color-line-soft);border-radius:var(--radius-pill);overflow:hidden}
.pm-family .progress-fill {height:100%;background:var(--gradient-primary);border-radius:var(--radius-pill)}
@container (max-width:980px){.pm-family .grid-4 {grid-template-columns:repeat(2,1fr)}
.pm-family .grid-3 {grid-template-columns:repeat(2,1fr)}
.pm-family .h-display {font-size:34px}
}
@container (max-width:640px){.pm-family .grid-2, .pm-family .grid-3, .pm-family .grid-4 {grid-template-columns:1fr}
.pm-family .container, .pm-family .container-narrow {padding:0 16px}
.pm-family .section {padding:var(--sp-12) 0}
}
.pm-family .u-001 { color:var(--color-ink) !important }
.pm-family .u-004 { color:#fff !important }
.pm-family .u-005 { text-align:center !important }
.pm-family .u-010 { margin-bottom:16px !important }
.pm-family .u-011 { margin-bottom:10px !important }
.pm-family .u-012 { margin-bottom:20px !important }
.pm-family .u-013 { color:var(--color-primary-600) !important }
.pm-family .u-021 { background:rgba(255,255,255,.2) !important; color:#fff !important }
.pm-family .u-022 { text-align:center !important; background:var(--gradient-hero) !important; border:none !important; padding:var(--sp-12) !important }
.pm-family .u-032 { font-size:var(--fs-md) !important }
.pm-family .u-036 { background:rgba(255,255,255,.2) !important }
.pm-family .u-039 { flex-wrap:wrap !important }
.pm-family .u-042 { font-size:34px !important }
.pm-family .u-043 { background:var(--color-info-bg) !important; color:var(--color-primary-600) !important }
.pm-family .u-050 { background:var(--color-accent-100) !important; color:var(--color-accent-600) !important }
.pm-family .u-051 { margin-top:12px !important }
.pm-family .u-052 { color:var(--color-accent-600) !important }
.pm-family .u-053 { background:#fff !important; color:var(--color-accent-600) !important }
.pm-family .u-069 { font-size:18px !important }
.pm-family .u-092 { color:rgba(255,255,255,.92) !important }
.pm-family .u-095 { width:78% !important; background:#fff !important }
.pm-family .u-105 { padding:24px !important }
.pm-family .u-106 { color:#fff !important; margin:14px 0 6px !important }
.pm-family .u-107 { background:rgba(255,255,255,.12) !important; color:#fff !important }
.pm-family .u-108 { color:var(--color-ai) !important }
.pm-family .u-109 { background:var(--color-teal-50) !important; color:var(--color-teal-600) !important }
.pm-family .u-206 { max-width:660px !important }
.pm-family .u-207 { background:linear-gradient(135deg,#5b54ec,#7079f8) !important }
.pm-family .u-208 { background:linear-gradient(135deg,#ff7a3d,#f15f1f) !important }
.pm-family .u-209 { background:linear-gradient(135deg,#16b896,#0f9a7e) !important }
.pm-family .u-210 { background:linear-gradient(135deg,#9b6df5,#c66ff0) !important }
.pm-family .u-211 { background:linear-gradient(135deg,#f5a623,#e08900) !important }
.pm-family .u-212 { background:linear-gradient(135deg,#ef4d6a,#c8324d) !important }
.pm-family .u-213 { gap:0 16px !important }
.pm-family .u-214 { font-size:40px !important }
.pm-family .u-215 { border-color:var(--color-warning) !important }
.pm-family .u-216 { width:44px !important; height:44px !important; border-radius:12px !important; background:var(--color-warning-bg) !important; color:var(--color-warning) !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important }
.pm-family .u-217 { text-align:center !important; background:var(--gradient-accent) !important; border:none !important; padding:var(--sp-12) !important; color:#fff !important }
.pm-family .u-218 { color:rgba(255,255,255,.92) !important; margin:14px auto 28px !important; max-width:480px !important }
.pm-family .u-219 { width:66% !important; background:#fff !important }
.pm-family .u-220 { background:var(--gradient-ai) !important; border:none !important; color:#fff !important }
.pm-family .u-221 { margin:14px auto 28px !important; max-width:480px !important }
.pm-for-students .fs-hero { background: var(--gradient-hero); padding: var(--sp-16) 0; }
.pm-for-students .ps-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pm-for-students .ps-card { padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--color-line); }
.pm-for-students .ps-problem { background: var(--color-danger-bg); }
.pm-for-students .ps-solution { background: var(--color-success-bg); }
.pm-for-students .step-card { text-align: left; padding: 24px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--color-line); }
.pm-for-students .step-num { width: 38px; height: 38px; border-radius: 11px; background: var(--color-primary-50); color: var(--color-primary-600); font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.pm-for-students .feat-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.pm-for-students .protect-item { display: flex; gap: 12px; padding: 18px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--color-line); }
.pm-for-students .protect-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--color-success-bg); color: var(--color-success); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
@container (max-width: 640px){.pm-for-students .ps-row, .pm-for-students .feat-split { grid-template-columns: 1fr; }
}
.pm-for-mentors .fm-hero {background:linear-gradient(160deg,#fff4ed 0%,#eef1ff 60%,#f6f4ff 100%);padding:var(--sp-16) 0}
.pm-for-mentors .fm-split {display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.pm-for-mentors .why-card {padding:24px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--color-line)}
.pm-for-mentors .why-ico {width:46px;height:46px;border-radius:13px;background:var(--color-accent-50);color:var(--color-accent-600);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.pm-for-mentors .tool-card {display:flex;gap:14px;padding:20px;border-radius:var(--radius-md);background:#fff;border:1px solid var(--color-line)}
.pm-for-mentors .tool-ico {width:42px;height:42px;border-radius:12px;background:var(--color-primary-50);color:var(--color-primary-600);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pm-for-mentors .step-card {text-align:left;padding:24px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--color-line)}
.pm-for-mentors .step-num {width:38px;height:38px;border-radius:11px;background:var(--color-accent-50);color:var(--color-accent-600);font-weight:var(--fw-bold);display:flex;align-items:center;justify-content:center;font-size:17px}
.pm-for-mentors .faq-item {border:1px solid var(--color-line);border-radius:var(--radius-md);margin-bottom:10px;background:#fff;overflow:hidden}
.pm-for-mentors .faq-q {padding:15px 18px;font-weight:var(--fw-medium);color:var(--color-ink);cursor:pointer;display:flex;justify-content:space-between}
.pm-for-mentors .faq-a {padding:0 18px;max-height:0;overflow:hidden;transition:all var(--dur);color:var(--color-text-mute);font-size:var(--fs-sm)}
.pm-for-mentors .faq-item.open .faq-a {display:block;max-height:220px;padding:0 18px 16px}
@container(max-width:640px){.pm-for-mentors .fm-split {grid-template-columns:1fr}
}
.pm-for-institutions .fi-hero {background:linear-gradient(160deg,#eef1ff 0%,#f6f4ff 60%,#fff4ed 100%);padding:var(--sp-16) 0}
.pm-for-institutions .use-card {padding:24px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--color-line);transition:all var(--dur);cursor:pointer}
.pm-for-institutions .use-card:hover {transform:translateY(-4px);box-shadow:var(--shadow-md)}
.pm-for-institutions .use-ico {width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:14px}
.pm-for-institutions .cap-card {display:flex;gap:14px;padding:20px;border-radius:var(--radius-md);background:#fff;border:1px solid var(--color-line)}
.pm-for-institutions .cap-ico {width:42px;height:42px;border-radius:12px;background:var(--color-primary-50);color:var(--color-primary-600);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pm-for-institutions .lead-form {display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--color-line)}
.pm-for-institutions .form-info {background:var(--gradient-primary);color:#fff;padding:44px}
.pm-for-institutions .form-body {background:#fff;padding:44px}
.pm-for-institutions .faq-item {border:1px solid var(--color-line);border-radius:var(--radius-md);margin-bottom:10px;background:#fff;overflow:hidden}
.pm-for-institutions .faq-q {padding:15px 18px;font-weight:var(--fw-medium);color:var(--color-ink);cursor:pointer;display:flex;justify-content:space-between}
.pm-for-institutions .faq-a {padding:0 18px;max-height:0;overflow:hidden;transition:all var(--dur);color:var(--color-text-mute);font-size:var(--fs-sm)}
.pm-for-institutions .faq-item.open .faq-a {display:block;max-height:220px;padding:0 18px 16px}
@container(max-width:640px){.pm-for-institutions .lead-form {grid-template-columns:1fr}
}
.pm-trust .tr-hero { background: var(--gradient-hero); padding: var(--sp-12) 0; text-align: center; }
.pm-trust .tr-lead { margin-top: 8px; }
.pm-trust .tr-layout { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; }
.pm-trust .tr-nav { position: sticky; top: calc(var(--nav-h) + 16px); }
.pm-trust .tr-nav-title { font-weight: var(--fw-semibold); color: var(--color-ink); padding: 9px 14px; font-size: var(--fs-sm); }
.pm-trust .tr-nav a { display: block; padding: 9px 14px; border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--color-text-mute); transition: all var(--dur); }
.pm-trust .tr-nav a:hover, .pm-trust .tr-nav a.is-active { background: var(--color-primary-50); color: var(--color-primary-600); }
.pm-trust .tr-block { scroll-margin-top: 100px; margin-bottom: 36px; }
.pm-trust .tr-block-last { margin-bottom: 0; }
.pm-trust .tr-h2 { font-size: var(--fs-h2); color: var(--color-ink); font-weight: var(--fw-bold); margin: 10px 0 14px; }
.pm-trust .tr-block p { margin-bottom: 12px; color: var(--color-text); }
.pm-trust .tr-block ul li { position: relative; padding-left: 22px; margin-bottom: 10px; font-size: var(--fs-md); color: var(--color-text); }
.pm-trust .tr-block ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary-500); }
.pm-trust .tr-cta { text-align: center; background: var(--gradient-hero); border: none; padding: var(--sp-12); }
@container (max-width: 980px){.pm-trust .tr-layout { grid-template-columns: 1fr; }
.pm-trust .tr-nav { display: none; }
}

.pm-family [hidden] { display:none !important; }
.pm-family .faq-q { width:100%; background:transparent; border:0; text-align:left; font:inherit; }
.pm-family :focus-visible { outline:3px solid var(--color-primary-400); outline-offset:3px; }
.pm-family [id] { scroll-margin-top:100px; }
.pm-family [data-pm-lead-preview] { margin-top:24px; overflow-wrap:anywhere; }
.pm-family [data-pm-lead-preview] dt { font-weight:600; margin-top:12px; }
@container(max-width:640px) { .pm-family .grid-2, .pm-family .grid-3, .pm-family .grid-4 { grid-template-columns:1fr; } .pm-family .form-info, .pm-family .form-body { padding:24px; } .pm-family .h-display { font-size:32px; } .pm-family .container { padding:0 16px; } }

/* PM source exception: institution use cases have no action/destination.
   Keep the six source divs, icons and copy; remove only misleading affordance. */
.pm-for-institutions .use-card { cursor: default; }
.pm-for-institutions .use-card:hover { transform: none; }

/* TASK28 taxonomy SOURCE scoped append — TT 2c0998cd; original prefix immutable */
.tx-source { container-type:inline-size; container-name:taxonomy; color:var(--color-text); background:#fff; }
.tx-source {
  /* ---- Brand / Primary (教育科技靛蓝) ---- */
  --color-primary-50:  #eef1ff;
  --color-primary-100: #dde2ff;
  --color-primary-200: #c0c8ff;
  --color-primary-300: #99a4ff;
  --color-primary-400: #7079f8;
  --color-primary-500: #5b54ec;   /* 主色 */
  --color-primary-600: #4c3fd6;
  --color-primary-700: #4133b3;
  --color-primary-800: #362d90;
  --color-primary-900: #2f2b73;

  /* ---- Accent / 增长暖橙 ---- */
  --color-accent-50:  #fff4ed;
  --color-accent-100: #ffe6d4;
  --color-accent-300: #ffb27a;
  --color-accent-500: #ff7a3d;   /* 行动/增长 */
  --color-accent-600: #f15f1f;
  --color-accent-700: #c84a15;

  /* ---- Secondary / 青绿 ---- */
  --color-teal-50:  #e8fbf6;
  --color-teal-300: #6fe3c8;
  --color-teal-500: #16b896;
  --color-teal-600: #0f9a7e;

  /* ---- AI 紫蓝渐变 ---- */
  --gradient-ai: linear-gradient(135deg, #6a5cf0 0%, #9b6df5 50%, #c66ff0 100%);
  --gradient-hero: linear-gradient(160deg, #eef1ff 0%, #f6f4ff 45%, #fff4ed 100%);
  --gradient-primary: linear-gradient(135deg, #5b54ec 0%, #7079f8 100%);
  --gradient-accent: linear-gradient(135deg, #ff7a3d 0%, #f15f1f 100%);
  --gradient-soft: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);

  /* ---- Neutral / Gray ---- */
  --color-ink:       #1a1c2e;
  --color-ink-soft:  #3d4159;
  --color-text:      #4a4d63;
  --color-text-mute: #8b8fa3;
  --color-text-faint:#aeb1c4;
  --color-line:      #e9eaf2;
  --color-line-soft: #f1f2f8;
  --color-bg:        #f7f8fc;
  --color-bg-warm:   #fbfaf7;
  --color-surface:   #ffffff;
  --color-surface-2: #f9fafe;

  /* ---- Status ---- */
  --color-success:   #16b896;
  --color-success-bg:#e8fbf6;
  --color-warning:   #f5a623;
  --color-warning-bg:#fff5e3;
  --color-danger:    #ef4d6a;
  --color-danger-bg: #ffecef;
  --color-info:      #5b54ec;
  --color-info-bg:   #eef1ff;
  --color-ai:        #9b6df5;
  --color-ai-bg:     #f3eefe;

  /* ---- Typography ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
               "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --fs-display: 44px;
  --fs-h1: 32px;
  --fs-h2: 24px;
  --fs-h3: 19px;
  --fs-lg: 17px;
  --fs-md: 15px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  /* ---- Spacing (4px scale) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---- Radius ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-xs: 0 1px 2px rgba(26,28,46,.05);
  --shadow-sm: 0 2px 8px rgba(26,28,46,.06);
  --shadow-md: 0 6px 20px rgba(26,28,46,.08);
  --shadow-lg: 0 14px 40px rgba(26,28,46,.12);
  --shadow-primary: 0 8px 24px rgba(91,84,236,.28);
  --shadow-accent: 0 8px 24px rgba(255,122,61,.28);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 960px;
  --nav-h: 68px;
  --mobile-nav-h: 54px;
  --mobile-tab-h: 64px;

  /* ---- Z-index ---- */
  --z-nav: 100;
  --z-sticky: 90;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: .15s;
  --dur: .25s;
  --dur-slow: .4s;
}
 .tx-source /* ---------- Layout ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } .tx-source .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; } .tx-source .section { padding: var(--sp-20) 0; } .tx-source .section-sm { padding: var(--sp-12) 0; } .tx-source .section-tint { background: var(--color-surface); } .tx-source .section-warm { background: var(--color-bg-warm); } .tx-source .section-grad { background: var(--gradient-hero); } .tx-source .stack { display: flex; flex-direction: column; } .tx-source .row { display: flex; align-items: center; } .tx-source .row-between { display: flex; align-items: center; justify-content: space-between; } .tx-source .wrap { flex-wrap: wrap; } .tx-source .grid { display: grid; gap: 20px; } .tx-source .grid > * { min-width: 0; } .tx-source /* intentional-adaptation: 防止 grid item 以 min-content 撑破容器(design public/tutor-detail.html mobile 自身溢出 371px) */
.grid-2 { grid-template-columns: repeat(2,1fr); } .tx-source .grid-3 { grid-template-columns: repeat(3,1fr); } .tx-source .grid-4 { grid-template-columns: repeat(4,1fr); } .tx-source .gap-1 {gap:4px} .tx-source .gap-2 {gap:8px} .tx-source .gap-3 {gap:12px} .tx-source .gap-4 {gap:16px} .tx-source .gap-6 {gap:24px} .tx-source .gap-8 {gap:32px} .tx-source .mt-2 {margin-top:8px} .tx-source .mt-4 {margin-top:16px} .tx-source .mt-6 {margin-top:24px} .tx-source .mt-8 {margin-top:32px} .tx-source .flex-1 {flex:1} .tx-source /* ---------- Typography helpers ---------- */
.eyebrow { font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing:.06em;
  text-transform: uppercase; color: var(--color-primary-500); } .tx-source .h-display { font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--color-ink); } .tx-source .h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--color-ink); } .tx-source .h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--color-ink); } .tx-source .h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--color-ink); } .tx-source .lead { font-size: var(--fs-lg); color: var(--color-text); line-height: var(--lh-loose); } .tx-source .muted { color: var(--color-text-mute); } .tx-source .faint { color: var(--color-text-faint); } .tx-source .small { font-size: var(--fs-sm); } .tx-source .xs { font-size: var(--fs-xs); } .tx-source .text-grad { background: var(--gradient-primary); -webkit-background-clip: text;
  background-clip: text; color: transparent; } .tx-source .section-head { text-align: center; max-width: 640px; margin: 0 auto var(--sp-10); } .tx-source .section-head .h2 { margin-top: 8px; } .tx-source .section-head p { margin-top: 10px; color: var(--color-text-mute); } .tx-source /* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size: var(--fs-md); font-weight: var(--fw-semibold); border-radius: var(--radius-pill);
  padding: 12px 24px; transition: all var(--dur) var(--ease); white-space: nowrap;
  border: 1.5px solid transparent; } .tx-source .btn:active { transform: scale(.97); } .tx-source .btn-primary { background: var(--gradient-primary); color:#fff; box-shadow: var(--shadow-primary); } .tx-source .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 12px 30px rgba(91,84,236,.36); } .tx-source .btn-accent { background: var(--gradient-accent); color:#fff; box-shadow: var(--shadow-accent); } .tx-source .btn-accent:hover { filter: brightness(1.06); } .tx-source .btn-ghost { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-line); } .tx-source .btn-ghost:hover { border-color: var(--color-primary-300); color: var(--color-primary-600); } .tx-source .btn-soft { background: var(--color-primary-50); color: var(--color-primary-600); } .tx-source .btn-soft:hover { background: var(--color-primary-100); } .tx-source .btn-ai { background: var(--gradient-ai); color:#fff; } .tx-source .btn-lg { padding: 15px 32px; font-size: var(--fs-lg); } .tx-source .btn-sm { padding: 8px 16px; font-size: var(--fs-sm); } .tx-source .btn-block { width: 100%; } .tx-source .btn:disabled, .tx-source .btn.is-disabled { opacity:.45; cursor: not-allowed; pointer-events:none; } .tx-source .btn.is-loading { color: transparent; position: relative; pointer-events:none; } .tx-source .btn.is-loading::after { content:""; position:absolute; width:16px; height:16px;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%;
  animation: spin .6s linear infinite; } .tx-source .btn-ghost.is-loading::after { border-color: rgba(91,84,236,.3); border-top-color: var(--color-primary-500); }
@keyframes spin { .tx-source to { transform: rotate(360deg); } } .tx-source /* ---------- Cards ---------- */
.card { background: var(--color-surface); border-radius: var(--radius-lg);
  border: 1px solid var(--color-line); box-shadow: var(--shadow-sm); } .tx-source .card-pad { padding: var(--sp-6); } .tx-source .card-hover { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); cursor: pointer; } .tx-source .card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .tx-source /* ---------- Tutor Card ---------- */
.tutor-card { background:var(--color-surface); border-radius:var(--radius-lg);
  border:1px solid var(--color-line); overflow:hidden; } .tx-source .tutor-card-top { padding:20px; display:flex; gap:14px; } .tx-source .tutor-card-meta { display:flex; gap:16px; padding:0 20px 12px; font-size:var(--fs-sm); color:var(--color-text-mute); } .tx-source .tutor-card-foot { padding:14px 20px; border-top:1px solid var(--color-line-soft);
  display:flex; align-items:center; justify-content:space-between; } .tx-source /* ---------- Avatar ---------- */
.avatar { border-radius:50%; object-fit:cover; background:var(--color-primary-100);
  display:flex; align-items:center; justify-content:center; font-weight:var(--fw-semibold);
  color:var(--color-primary-600); flex-shrink:0; } .tx-source .avatar-xs {width:28px;height:28px;font-size:11px} .tx-source .avatar-sm {width:40px;height:40px;font-size:14px} .tx-source .avatar-md {width:56px;height:56px;font-size:18px} .tx-source .avatar-lg {width:80px;height:80px;font-size:26px} .tx-source .avatar-xl {width:112px;height:112px;font-size:34px} .tx-source .avatar-ring {border:3px solid #fff;box-shadow:var(--shadow-sm)} .tx-source /* ---------- Badge / Chip / Tag ---------- */
.badge { display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs);
  font-weight:var(--fw-semibold); padding:3px 9px; border-radius:var(--radius-pill); } .tx-source .badge-primary {background:var(--color-info-bg);color:var(--color-primary-600)} .tx-source .badge-success {background:var(--color-success-bg);color:var(--color-success)} .tx-source .badge-warning {background:var(--color-warning-bg);color:var(--color-warning)} .tx-source .badge-danger {background:var(--color-danger-bg);color:var(--color-danger)} .tx-source .badge-ai {background:var(--color-ai-bg);color:var(--color-ai)} .tx-source .badge-neutral {background:var(--color-line-soft);color:var(--color-text-mute)} .tx-source .badge-verified {background:var(--color-info-bg);color:var(--color-primary-600)} .tx-source .chip { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm);
  padding:7px 14px; border-radius:var(--radius-pill); background:var(--color-surface);
  border:1px solid var(--color-line); color:var(--color-text); cursor:pointer;
  transition:all var(--dur) var(--ease); } .tx-source .chip:hover {border-color:var(--color-primary-300);color:var(--color-primary-600)} .tx-source .chip.is-active {background:var(--color-primary-500);color:#fff;border-color:var(--color-primary-500)} .tx-source .tag { font-size:var(--fs-xs); padding:3px 8px; border-radius:var(--radius-xs);
  background:var(--color-line-soft); color:var(--color-text-mute); } .tx-source /* ---------- Price ---------- */
.price { display:inline-flex; align-items:baseline; gap:2px; color:var(--color-accent-600); font-weight:var(--fw-bold); } .tx-source .price-cur {font-size:var(--fs-sm)} .tx-source .price-num {font-size:var(--fs-h3)} .tx-source .price-unit {font-size:var(--fs-xs);color:var(--color-text-mute);font-weight:var(--fw-regular)} .tx-source .price-old {font-size:var(--fs-sm);color:var(--color-text-faint);text-decoration:line-through} .tx-source /* ---------- Rating ---------- */
.stars {display:inline-flex;gap:2px;color:var(--color-warning)} .tx-source .stars svg {width:14px;height:14px}

 .tx-source /* ===== 对应 subject-detail / city-detail / subject-city / learn-keyword 内联样式 ===== */
.lk-hero { background: var(--gradient-hero); padding: var(--sp-12) 0; } .tx-source .hero-lead { max-width: 620px; margin-top: 12px; } .tx-source .hero-cta-row { flex-wrap: wrap; } .tx-source .hero-stat-num { color: var(--color-ink); font-size: 18px; } .tx-source .lk-search { background: #fff; border-radius: var(--radius-xl); padding: 8px; box-shadow: var(--shadow-md); display: flex; gap: 8px; align-items: center; max-width: 560px; margin-top: 22px; } .tx-source .lk-search input { border: none; background: none; outline: none; flex: 1; padding: 10px 14px; font-size: var(--fs-md); min-width: 0; } .tx-source .sec-title { margin-bottom: 20px; } .tx-source .sec-title-row { margin-bottom: 20px; } .tx-source .subj-pill-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .tx-source .subj-pill { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--color-line); text-align: center; transition: all var(--dur); cursor: pointer; } .tx-source .subj-pill:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-primary-200); } .tx-source .preview-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 14px 16px; } .tx-source .preview-spacer { flex: 1; } .tx-source .point-card { display: flex; gap: 14px; padding: 20px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--color-line); } .tx-source .point-num { width: 30px; height: 30px; border-radius: 9px; background: var(--color-primary-50); color: var(--color-primary-600); font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tx-source .online-band { background: var(--gradient-primary); color: #fff; border: none; } .tx-source .online-band-sub { margin-top: 4px; color: rgba(255,255,255,.9); } .tx-source .online-band .btn-soft { background: #fff; color: var(--color-primary-600); } .tx-source .course-card { overflow: hidden; } .tx-source .course-cover { height: 110px; display: flex; align-items: center; justify-content: center; } .tx-source .path-step { display: flex; gap: 16px; } .tx-source .path-line { display: flex; flex-direction: column; align-items: center; } .tx-source .path-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--gradient-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: 14px; flex-shrink: 0; } .tx-source .path-bar { width: 2px; flex: 1; background: var(--color-line); margin: 4px 0; } .tx-source .path-body { padding-bottom: 24px; } .tx-source .ai-card { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding: 48px; background: var(--gradient-ai); border-radius: var(--radius-lg); } .tx-source .ai-badge { background: rgba(255,255,255,.2); color: #fff; } .tx-source .ai-title { color: #fff; } .tx-source .ai-lead { color: rgba(255,255,255,.92); } .tx-source .ai-btn { background: #fff; color: var(--color-ai); } .tx-source .ai-progress-card { background: rgba(255,255,255,.12); border: none; } .tx-source .ai-row { color: #fff; margin: 14px 0 8px; } .tx-source .ai-row:first-of-type { margin-top: 0; } .tx-source .ai-bar { background: rgba(255,255,255,.2); } .tx-source .ai-fill { width: 86%; background: #fff; } .tx-source .story-avatar { background: var(--color-primary-100); color: var(--color-primary-600); } .tx-source .guide-lead { font-size: var(--fs-md); } .tx-source .compare-card { padding: 24px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--color-line); } .tx-source .price-row { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--color-line-soft); } .tx-source .link-title { margin-bottom: 14px; } .tx-source .link-band { display: flex; gap: 10px; flex-wrap: wrap; } .tx-source .link-band a { font-size: var(--fs-sm); padding: 7px 14px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--color-line); color: var(--color-ink-soft); transition: all var(--dur); } .tx-source .link-band a:hover { border-color: var(--color-primary-300); color: var(--color-primary-600); } .tx-source .link-band + .link-band, .tx-source .link-title + .link-band { margin-top: 14px; } .tx-source .cta-card { text-align: center; background: var(--gradient-hero); border: none; padding: var(--sp-12); }
@container taxonomy (max-width: 980px) { .tx-source .subj-pill-grid { grid-template-columns: repeat(3, 1fr); }
}
@container taxonomy (max-width: 640px) { .tx-source .subj-pill-grid { grid-template-columns: repeat(2, 1fr); } .tx-source .ai-card { grid-template-columns: 1fr; padding: 28px 20px; } .tx-source .lk-hero { padding: var(--sp-10) 0; }
}
 .tx-source /* ===== 对应 public/subjects.html 内联样式 ===== */
.s-hero { background: var(--gradient-hero); padding: var(--sp-12) 0; text-align: center; } .tx-source .cat-block { margin-bottom: var(--sp-12); } .tx-source .cat-title { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .tx-source .cat-dot { width: 8px; height: 24px; border-radius: 4px; background: var(--gradient-primary); } .tx-source .subj-card { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--color-line); transition: all var(--dur) var(--ease); cursor: pointer; } .tx-source .subj-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-primary-200); } .tx-source .subj-ico { width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
 .tx-source /* ===== 对应 public/cities.html 内联样式 ===== */
.c-hero { background: var(--gradient-hero); padding: var(--sp-12) 0; text-align: center; } .tx-source .c-lead { margin-top: 8px; } .tx-source .city-sec-title { margin-bottom: 20px; } .tx-source .city-sec-title + .grid { margin-bottom: 40px; } .tx-source .city-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; height: 160px; cursor: pointer; transition: all var(--dur) var(--ease); display: flex; align-items: flex-end; padding: 20px; color: #fff; } .tx-source .city-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .tx-source .city-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,28,46,0) 30%, rgba(26,28,46,.7)); } .tx-source .city-card > * { position: relative; z-index: 1; } .tx-source .city-name { font-size: 22px; } .tx-source .city-sub { opacity: .9; } .tx-source .cta-card { text-align: center; background: var(--gradient-hero); border: none; padding: var(--sp-12); }
 .tx-source /* ===== 对应 tutors.html FAQ 手风琴(原样式在页面 scoped, .tx-source 内层 .faq-q/.faq-a 传不进子组件 → 无 padding/不折叠) ===== */
.faq-item { border: 1px solid var(--color-line); border-radius: var(--radius-md); margin-bottom: 10px; background: #fff; overflow: hidden; } .tx-source .faq-q { padding: 16px 20px; font-weight: var(--fw-medium); color: var(--color-ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .tx-source .faq-a { padding: 0 20px; max-height: 0; overflow: hidden; transition: all var(--dur); color: var(--color-text-mute); font-size: var(--fs-sm); } .tx-source .faq-item.is-open .faq-a { max-height: 200px; padding: 0 20px 18px; } .tx-source .faq-item.is-open .faq-q svg { transform: rotate(180deg); } .tx-source .faq-q svg { transition: transform var(--dur); flex-shrink: 0; }

.tx-source .tutor-card {display:block;} .tx-source .city-card {display:flex;} .tx-source .subj-card {display:flex;} .tx-source .lk-search svg {flex-shrink:0;} .tx-source .faq-q {width:100%;text-align:left;background:#fff;} .tx-source .cat-block:last-child {margin-bottom:0;}
.tx-source :focus-visible {outline:2px solid var(--color-primary-500);outline-offset:2px;}
@container taxonomy (max-width:980px) { .tx-source .grid-4,.tx-source .grid-3 {grid-template-columns:repeat(2,minmax(0,1fr));} .tx-source .h-display {font-size:34px;} }
@container taxonomy (max-width:640px) { .tx-source .grid-2,.tx-source .grid-3,.tx-source .grid-4 {grid-template-columns:1fr;} .tx-source .container,.tx-source .container-narrow {padding:0 16px;} .tx-source .section {padding:var(--sp-12) 0;} .tx-source .price-row {gap:12px;} .tx-source .preview-spacer {display:none;} .tx-source .tutor-card-meta {flex-wrap:wrap;gap:8px;} }

/* Task28 finite independent SOURCE repair S1/S2/S3 — append only */
.tx-source .progress-bar {height:8px;background:var(--color-line-soft);border-radius:var(--radius-pill);overflow:hidden;}
.tx-source .progress-fill {height:100%;background:var(--gradient-primary);border-radius:var(--radius-pill);}
.tx-source .ai-bar {background:rgba(255,255,255,.2);}
.tx-source .ai-fill {background:#fff;}
.tx-source .section-head {text-align:center;max-width:640px;margin:0 auto var(--sp-10);}
.tx-source .section-head .h2 {margin-top:8px;}
.tx-source .section-head p {margin-top:10px;color:var(--color-text-mute);}
.tx-source .s-hero .lead {margin-top:8px;}
.tx-source .faq-a[hidden] {display:none;}

/* Task28 finite Native NO source paint/affordance repair */
.tx-source .section-head {display:block;}
.tx-source .points-grid.stack > * + * {margin-top:0;}
.tx-source .tx-unavailable-note {display:block;padding:8px 20px 14px;font-size:var(--fs-xs);line-height:1.5;color:var(--color-text-mute);}
.tx-source [data-disabled-code] .btn.is-disabled {opacity:.65;cursor:not-allowed;}

/* Task28 finite guide-note descendant clipping repair; same source card */
.tx-source .tx-source-disabled {display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;max-width:100%;white-space:normal;}
.tx-source .tx-source-disabled > .btn {min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;}
.tx-source .tx-unavailable-note {min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;}
.tx-source .tx-source-disabled > .tx-unavailable-note {padding:0;}

/* Public marketing6 released coherent wave: PM-only source styles and overrides. */
.pm-family {container-type:inline-size;container-name:marketing;}


.pm-about .ab-hero { background: var(--gradient-hero); padding: var(--sp-16) 0; text-align: center; }
.pm-about .ab-lead { max-width: 600px; margin: 14px auto 0; }
.pm-about .value-card { padding: 24px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--color-line); }
.pm-about .value-ico { width: 46px; height: 46px; border-radius: 13px; background: var(--color-primary-50); color: var(--color-primary-600); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.pm-about .timeline-item { display: flex; gap: 18px; }
.pm-about .tl-year { font-weight: var(--fw-bold); color: var(--color-primary-600); font-size: var(--fs-h3); flex-shrink: 0; width: 64px; }
.pm-about .tl-line { display: flex; flex-direction: column; align-items: center; }
.pm-about .tl-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--gradient-primary); flex-shrink: 0; margin-top: 5px; }
.pm-about .tl-bar { width: 2px; flex: 1; background: var(--color-line); margin: 4px 0; }
.pm-about .tl-body { padding-bottom: 24px; }
.pm-about .stat-card { text-align: center; }
.pm-about .cta-card { text-align: center; background: var(--gradient-hero); border: none; padding: var(--sp-12); }
.pm-about .cta-row { justify-content: center; }
@container marketing (max-width: 640px) {
  .pm-about .ab-hero { padding: var(--sp-12) 0; }
}



.pm-download .dl-hero {background:var(--gradient-hero);padding:var(--sp-16) 0}
.pm-download .dl-split {display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.pm-download .qr-box {width:160px;height:160px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--color-line);display:flex;align-items:center;justify-content:center;padding:14px}
.pm-download .dl-card {padding:24px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--color-line);text-align:center}
.pm-download .store-btn {display:inline-flex;align-items:center;gap:10px;background:var(--color-ink);color:#fff;padding:12px 20px;border-radius:var(--radius-md);transition:all var(--dur)}
.pm-download .store-btn:hover {filter:brightness(1.15)}
.pm-download .phone-mock {width:240px;height:480px;border-radius:36px;background:var(--color-ink);padding:10px;margin:0 auto;box-shadow:var(--shadow-lg)}
.pm-download .phone-screen {width:100%;height:100%;border-radius:28px;background:var(--gradient-hero);overflow:hidden;display:flex;flex-direction:column}
.pm-download .feat-row {display:flex;gap:12px;align-items:center;padding:12px 0}
.pm-download .feat-ico {width:38px;height:38px;border-radius:11px;background:var(--color-primary-50);color:var(--color-primary-600);display:flex;align-items:center;justify-content:center;flex-shrink:0}
@container marketing (max-width:640px){.pm-download .dl-split{grid-template-columns:1fr}}

.pm-family .u-027 { margin:0 auto !important }
.pm-family .u-049 { margin:8px 0 !important }
.pm-family .u-068 { padding:12px !important }
.pm-family .u-100 { text-align:left !important }
.pm-family .u-101 { font-size:10px !important; opacity:.7 !important }
.pm-family .u-102 { font-size:14px !important }
.pm-family .u-103 { padding:12px !important; margin-bottom:10px !important }
.pm-family .u-104 { font-size:10px !important; color:var(--color-text-mute) !important }
.pm-family .u-197 { align-items:center !important; gap:10px !important }
.pm-family .u-198 { padding:24px 18px !important; background:var(--gradient-primary) !important }
.pm-family .u-199 { color:#fff !important; font-size:var(--fs-md) !important }
.pm-family .u-200 { width:26px !important; height:26px !important; font-size:13px !important }
.pm-family .u-201 { color:#fff !important; margin-top:14px !important; font-size:18px !important }
.pm-family .u-202 { padding:14px !important; flex:1 !important }
.pm-family .u-203 { font-size:10px !important; color:#fff !important; opacity:.85 !important }
.pm-family .u-204 { color:#fff !important; font-size:13px !important }
.pm-family .u-205 { margin:0 auto !important; border-color:var(--color-success) !important }

.pm-family .mt-1 {margin-top:4px;}
.pm-family .gap-8 {gap:32px;}
.pm-family .tutor-card {display:block;}
.pm-family .feat-split > *, .pm-family .fm-split > *, .pm-family .dl-split > *, .pm-family .lead-form > * {min-width:0;}
.pm-family .faq-item.open .faq-a {max-height:none;}
.pm-family .pm-source-note {max-width:1152px;margin:20px auto 0;padding:0 24px;font-size:12px;line-height:1.6;color:var(--color-text-mute);}
.pm-for-mentors .u-217 .pm-source-note {color:#fff;}
.pm-download .store-btn:disabled {opacity:.75;cursor:not-allowed;flex-wrap:wrap;}
.pm-download .pm-distribution-note {display:block;flex-basis:100%;font-size:12px;}
.pm-download .pm-qr-unavailable {font-size:13px;line-height:1.6;color:var(--color-text-mute);}
.pm-download .qr-box {border-style:dashed;}
.pm-download .phone-mock {max-width:100%;}
.pm-download .u-205 {border-color:var(--color-success);}
@container (max-width:980px) {
  .pm-trust .tr-nav {display:flex;position:static;flex-wrap:wrap;gap:4px;}
  .pm-trust .tr-nav-title {flex-basis:100%;}
  .pm-trust .tr-nav a {display:block;}
}
@container (max-width:640px) {
  .pm-family .pm-source-note {padding:0 16px;}
  .pm-family .tutor-card-meta {flex-wrap:wrap;gap:8px;}
  .pm-family .btn-lg {max-width:100%;white-space:normal;}
}

/* Public3 coherent source-scoped reconstruction. */
.p3-family {

  --color-primary-50:  #eef1ff;
  --color-primary-100: #dde2ff;
  --color-primary-200: #c0c8ff;
  --color-primary-300: #99a4ff;
  --color-primary-400: #7079f8;
  --color-primary-500: #5b54ec;
  --color-primary-600: #4c3fd6;
  --color-primary-700: #4133b3;
  --color-primary-800: #362d90;
  --color-primary-900: #2f2b73;


  --color-accent-50:  #fff4ed;
  --color-accent-100: #ffe6d4;
  --color-accent-300: #ffb27a;
  --color-accent-500: #ff7a3d;
  --color-accent-600: #f15f1f;
  --color-accent-700: #c84a15;


  --color-teal-50:  #e8fbf6;
  --color-teal-300: #6fe3c8;
  --color-teal-500: #16b896;
  --color-teal-600: #0f9a7e;


  --gradient-ai: linear-gradient(135deg, #6a5cf0 0%, #9b6df5 50%, #c66ff0 100%);
  --gradient-hero: linear-gradient(160deg, #eef1ff 0%, #f6f4ff 45%, #fff4ed 100%);
  --gradient-primary: linear-gradient(135deg, #5b54ec 0%, #7079f8 100%);
  --gradient-accent: linear-gradient(135deg, #ff7a3d 0%, #f15f1f 100%);
  --gradient-soft: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);


  --color-ink:       #1a1c2e;
  --color-ink-soft:  #3d4159;
  --color-text:      #4a4d63;
  --color-text-mute: #8b8fa3;
  --color-text-faint:#aeb1c4;
  --color-line:      #e9eaf2;
  --color-line-soft: #f1f2f8;
  --color-bg:        #f7f8fc;
  --color-bg-warm:   #fbfaf7;
  --color-surface:   #ffffff;
  --color-surface-2: #f9fafe;


  --color-success:   #16b896;
  --color-success-bg:#e8fbf6;
  --color-warning:   #f5a623;
  --color-warning-bg:#fff5e3;
  --color-danger:    #ef4d6a;
  --color-danger-bg: #ffecef;
  --color-info:      #5b54ec;
  --color-info-bg:   #eef1ff;
  --color-ai:        #9b6df5;
  --color-ai-bg:     #f3eefe;


  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
               "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --fs-display: 44px;
  --fs-h1: 32px;
  --fs-h2: 24px;
  --fs-h3: 19px;
  --fs-lg: 17px;
  --fs-md: 15px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-loose: 1.7;


  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;


  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;


  --shadow-xs: 0 1px 2px rgba(26,28,46,.05);
  --shadow-sm: 0 2px 8px rgba(26,28,46,.06);
  --shadow-md: 0 6px 20px rgba(26,28,46,.08);
  --shadow-lg: 0 14px 40px rgba(26,28,46,.12);
  --shadow-primary: 0 8px 24px rgba(91,84,236,.28);
  --shadow-accent: 0 8px 24px rgba(255,122,61,.28);


  --container: 1200px;
  --container-narrow: 960px;
  --nav-h: 68px;
  --mobile-nav-h: 54px;
  --mobile-tab-h: 64px;


  --z-nav: 100;
  --z-sticky: 90;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;


  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: .15s;
  --dur: .25s;
  --dur-slow: .4s;
}
.p3-family * { box-sizing: border-box; margin: 0; padding: 0; }
.p3-family {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.p3-family a { color: inherit; text-decoration: none; }
.p3-family button { font-family: inherit; cursor: pointer; border: none; background: none; }
.p3-family img { display: block; max-width: 100%; }
.p3-family ul, .p3-family ol { list-style: none; }
.p3-family input, .p3-family textarea, .p3-family select { font-family: inherit; }
.p3-family ::selection { background: var(--color-primary-200); }
.p3-family .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.p3-family .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }
.p3-family .section { padding: var(--sp-20) 0; }
.p3-family .section-sm { padding: var(--sp-12) 0; }
.p3-family .section-warm { background: var(--color-bg-warm); }
.p3-family .stack { display: flex; flex-direction: column; }
.p3-family .row { display: flex; align-items: center; }
.p3-family .row-between { display: flex; align-items: center; justify-content: space-between; }
.p3-family .wrap { flex-wrap: wrap; }
.p3-family .grid { display: grid; gap: 20px; }
.p3-family .grid > * { min-width: 0; }
.p3-family .grid-2 { grid-template-columns: repeat(2,1fr); }
.p3-family .grid-3 { grid-template-columns: repeat(3,1fr); }
.p3-family .grid-4 { grid-template-columns: repeat(4,1fr); }
.p3-family .gap-2 {gap:8px}
.p3-family .gap-3 {gap:12px}
.p3-family .gap-4 {gap:16px}
.p3-family .gap-6 {gap:24px}
.p3-family .mt-2 {margin-top:8px}
.p3-family .mt-4 {margin-top:16px}
.p3-family .mt-6 {margin-top:24px}
.p3-family .mt-8 {margin-top:32px}
.p3-family .eyebrow { font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing:.06em;
  text-transform: uppercase; color: var(--color-primary-500); }
.p3-family .h-display { font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--color-ink); }
.p3-family .h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--color-ink); }
.p3-family .h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--color-ink); }
.p3-family .h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--color-ink); }
.p3-family .lead { font-size: var(--fs-lg); color: var(--color-text); line-height: var(--lh-loose); }
.p3-family .muted { color: var(--color-text-mute); }
.p3-family .small { font-size: var(--fs-sm); }
.p3-family .xs { font-size: var(--fs-xs); }
.p3-family .text-grad { background: var(--gradient-primary); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.p3-family .section-head { display: block; text-align: center; max-width: 640px; margin: 0 auto var(--sp-10); }
.p3-family .section-head .h2 { margin-top: 8px; }
.p3-family .section-head p { margin-top: 10px; color: var(--color-text-mute); }
.p3-family .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size: var(--fs-md); font-weight: var(--fw-semibold); border-radius: var(--radius-pill);
  padding: 12px 24px; transition: all var(--dur) var(--ease); white-space: nowrap;
  border: 1.5px solid transparent; }
.p3-family .btn:active { transform: scale(.97); }
.p3-family .btn-primary { background: var(--gradient-primary); color:#fff; box-shadow: var(--shadow-primary); }
.p3-family .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 12px 30px rgba(91,84,236,.36); }
.p3-family .btn-accent { background: var(--gradient-accent); color:#fff; box-shadow: var(--shadow-accent); }
.p3-family .btn-accent:hover { filter: brightness(1.06); }
.p3-family .btn-ghost { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-line); }
.p3-family .btn-ghost:hover { border-color: var(--color-primary-300); color: var(--color-primary-600); }
.p3-family .btn-soft { background: var(--color-primary-50); color: var(--color-primary-600); }
.p3-family .btn-soft:hover { background: var(--color-primary-100); }
.p3-family .btn-ai { background: var(--gradient-ai); color:#fff; }
.p3-family .btn-lg { padding: 15px 32px; font-size: var(--fs-lg); }
.p3-family .btn-sm { padding: 8px 16px; font-size: var(--fs-sm); }
.p3-family .btn-block { width: 100%; }
.p3-family .btn:disabled { opacity:.45; cursor: not-allowed; pointer-events:none; }
.p3-family .card { background: var(--color-surface); border-radius: var(--radius-lg);
  border: 1px solid var(--color-line); box-shadow: var(--shadow-sm); }
.p3-family .card-pad { padding: var(--sp-6); }
.p3-family .card-hover { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); cursor: pointer; }
.p3-family .card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.p3-family .tutor-card { background:var(--color-surface); border-radius:var(--radius-lg);
  border:1px solid var(--color-line); overflow:hidden; }
.p3-family .tutor-card-top { padding:20px; display:flex; gap:14px; }
.p3-family .tutor-card-meta { display:flex; gap:16px; padding:0 20px 12px; font-size:var(--fs-sm); color:var(--color-text-mute); }
.p3-family .tutor-card-foot { padding:14px 20px; border-top:1px solid var(--color-line-soft);
  display:flex; align-items:center; justify-content:space-between; }
.p3-family .avatar { border-radius:50%; object-fit:cover; background:var(--color-primary-100);
  display:flex; align-items:center; justify-content:center; font-weight:var(--fw-semibold);
  color:var(--color-primary-600); flex-shrink:0; }
.p3-family .avatar-sm {width:40px;height:40px;font-size:14px}
.p3-family .avatar-md {width:56px;height:56px;font-size:18px}
.p3-family .avatar-ring {border:3px solid #fff;box-shadow:var(--shadow-sm)}
.p3-family .badge { display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs);
  font-weight:var(--fw-semibold); padding:3px 9px; border-radius:var(--radius-pill); }
.p3-family .badge-primary {background:var(--color-info-bg);color:var(--color-primary-600)}
.p3-family .badge-success {background:var(--color-success-bg);color:var(--color-success)}
.p3-family .badge-warning {background:var(--color-warning-bg);color:var(--color-warning)}
.p3-family .badge-danger {background:var(--color-danger-bg);color:var(--color-danger)}
.p3-family .badge-ai {background:var(--color-ai-bg);color:var(--color-ai)}
.p3-family .price { display:inline-flex; align-items:baseline; gap:2px; color:var(--color-accent-600); font-weight:var(--fw-bold); }
.p3-family .price-cur {font-size:var(--fs-sm)}
.p3-family .price-num {font-size:var(--fs-h3)}
.p3-family .price-unit {font-size:var(--fs-xs);color:var(--color-text-mute);font-weight:var(--fw-regular)}
.p3-family .stars {display:inline-flex;gap:2px;color:var(--color-warning)}
.p3-family .stars svg {width:14px;height:14px}
.p3-family .field {margin-bottom:18px}
.p3-family .field label {display:block;font-size:var(--fs-sm);font-weight:var(--fw-medium);
  color:var(--color-ink-soft);margin-bottom:7px}
.p3-family .input, .p3-family .textarea, .p3-family .select {width:100%;padding:12px 14px;font-size:var(--fs-md);
  border:1.5px solid var(--color-line);border-radius:var(--radius-sm);
  background:var(--color-surface);color:var(--color-ink);transition:all var(--dur)}
.p3-family .input:focus, .p3-family .textarea:focus, .p3-family .select:focus {outline:none;border-color:var(--color-primary-400);
  box-shadow:0 0 0 3px var(--color-primary-100)}
.p3-family .input::placeholder {color:var(--color-text-faint)}
.p3-family .checkbox {display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-sm);color:var(--color-text)}
.p3-family .checkbox input {margin-top:2px;width:16px;height:16px;accent-color:var(--color-primary-500)}
.p3-family .divider {height:1px;background:var(--color-line);margin:20px 0}
.p3-family .notice {display:flex;gap:10px;padding:13px 16px;border-radius:var(--radius-md);font-size:var(--fs-sm)}
.p3-family .notice-info {background:var(--color-info-bg);color:var(--color-primary-700)}
.p3-family .notice-warn {background:var(--color-warning-bg);color:#8a5a00}
.p3-family .notice-danger {background:var(--color-danger-bg);color:#a31f38}
.p3-family .ai-card {background:var(--gradient-ai);color:#fff;border-radius:var(--radius-lg);padding:var(--sp-6)}
.p3-family .stat-num {font-size:var(--fs-h1);font-weight:var(--fw-bold);color:var(--color-ink)}
.p3-family .stat-label {font-size:var(--fs-sm);color:var(--color-text-mute);margin-top:2px}
.p3-family .progress-bar {height:8px;background:var(--color-line-soft);border-radius:var(--radius-pill);overflow:hidden}
.p3-family .progress-fill {height:100%;background:var(--gradient-primary);border-radius:var(--radius-pill)}
@container (max-width:980px){.p3-family .grid-4 {grid-template-columns:repeat(2,1fr)}
.p3-family .grid-3 {grid-template-columns:repeat(2,1fr)}
.p3-family .h-display {font-size:34px}
}
@container (max-width:640px){.p3-family .grid-2, .p3-family .grid-3, .p3-family .grid-4 {grid-template-columns:1fr}
.p3-family .container, .p3-family .container-narrow {padding:0 16px}
.p3-family .section {padding:var(--sp-12) 0}
}
.p3-family .u-001 { color:var(--color-ink) !important }
.p3-family .u-004 { color:#fff !important }
.p3-family .u-005 { text-align:center !important }
.p3-family .u-010 { margin-bottom:16px !important }
.p3-family .u-011 { margin-bottom:10px !important }
.p3-family .u-012 { margin-bottom:20px !important }
.p3-family .u-013 { color:var(--color-primary-600) !important }
.p3-family .u-021 { background:rgba(255,255,255,.2) !important; color:#fff !important }
.p3-family .u-022 { text-align:center !important; background:var(--gradient-hero) !important; border:none !important; padding:var(--sp-12) !important }
.p3-family .u-032 { font-size:var(--fs-md) !important }
.p3-family .u-036 { background:rgba(255,255,255,.2) !important }
.p3-family .u-039 { flex-wrap:wrap !important }
.p3-family .u-042 { font-size:34px !important }
.p3-family .u-043 { background:var(--color-info-bg) !important; color:var(--color-primary-600) !important }
.p3-family .u-050 { background:var(--color-accent-100) !important; color:var(--color-accent-600) !important }
.p3-family .u-051 { margin-top:12px !important }
.p3-family .u-052 { color:var(--color-accent-600) !important }
.p3-family .u-053 { background:#fff !important; color:var(--color-accent-600) !important }
.p3-family .u-069 { font-size:18px !important }
.p3-family .u-092 { color:rgba(255,255,255,.92) !important }
.p3-family .u-095 { width:78% !important; background:#fff !important }
.p3-family .u-105 { padding:24px !important }
.p3-family .u-106 { color:#fff !important; margin:14px 0 6px !important }
.p3-family .u-107 { background:rgba(255,255,255,.12) !important; color:#fff !important }
.p3-family .u-108 { color:var(--color-ai) !important }
.p3-family .u-109 { background:var(--color-teal-50) !important; color:var(--color-teal-600) !important }
.p3-family .u-206 { max-width:660px !important }
.p3-family .u-207 { background:linear-gradient(135deg,#5b54ec,#7079f8) !important }
.p3-family .u-208 { background:linear-gradient(135deg,#ff7a3d,#f15f1f) !important }
.p3-family .u-209 { background:linear-gradient(135deg,#16b896,#0f9a7e) !important }
.p3-family .u-210 { background:linear-gradient(135deg,#9b6df5,#c66ff0) !important }
.p3-family .u-211 { background:linear-gradient(135deg,#f5a623,#e08900) !important }
.p3-family .u-212 { background:linear-gradient(135deg,#ef4d6a,#c8324d) !important }
.p3-family .u-213 { gap:0 16px !important }
.p3-family .u-214 { font-size:40px !important }
.p3-family .u-215 { border-color:var(--color-warning) !important }
.p3-family .u-216 { width:44px !important; height:44px !important; border-radius:12px !important; background:var(--color-warning-bg) !important; color:var(--color-warning) !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important }
.p3-family .u-217 { text-align:center !important; background:var(--gradient-accent) !important; border:none !important; padding:var(--sp-12) !important; color:#fff !important }
.p3-family .u-218 { color:rgba(255,255,255,.92) !important; margin:14px auto 28px !important; max-width:480px !important }
.p3-family .u-219 { width:66% !important; background:#fff !important }
.p3-family .u-220 { background:var(--gradient-ai) !important; border:none !important; color:#fff !important }
.p3-family .u-221 { margin:14px auto 28px !important; max-width:480px !important }

.p3-family {container-type:inline-size;container-name:publicthree;}


.p3-family .ct-hero { background: var(--gradient-hero); padding: var(--sp-12) 0; }
.p3-family .feat-card { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-line); background: #fff; }
.p3-family .feat-cover { background: var(--gradient-primary); min-height: 280px; }
.p3-family .article-cover { height: 150px; display: flex; align-items: flex-start; padding: 14px; }
@container publicthree (max-width: 640px) { .p3-family .feat-card { grid-template-columns: 1fr; } }



.p3-family .hp-hero { background: var(--gradient-hero); padding: var(--sp-12) 0; text-align: center; }
.p3-family .hp-search { background: #fff; border-radius: var(--radius-pill); padding: 6px 6px 6px 16px; box-shadow: var(--shadow-md); display: flex; gap: 8px; align-items: center; max-width: 480px; margin: 22px auto 0; }
.p3-family .hp-search input { border: none; background: none; outline: none; flex: 1; padding: 8px; font-size: var(--fs-md); min-width: 0; }
.p3-family .cat-tile { padding: 22px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--color-line); text-align: center; transition: all var(--dur); cursor: pointer; }
.p3-family .cat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.p3-family .cat-ico { width: 48px; height: 48px; border-radius: 13px; background: var(--color-primary-50); color: var(--color-primary-600); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.p3-family .faq-item { border: 1px solid var(--color-line); border-radius: var(--radius-md); margin-bottom: 10px; background: #fff; overflow: hidden; }
.p3-family .faq-q { padding: 16px 20px; font-weight: var(--fw-medium); color: var(--color-ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.p3-family .faq-a { padding: 0 20px; max-height: 0; overflow: hidden; transition: all var(--dur); color: var(--color-text-mute); font-size: var(--fs-sm); }
.p3-family .faq-item.open .faq-a { max-height: 240px; padding: 0 20px 18px; }
.p3-family .faq-item.open .faq-q svg { transform: rotate(180deg); }
.p3-family .faq-q svg { transition: transform var(--dur); flex-shrink: 0; }
.p3-family .faq-group h3 { font-size: var(--fs-h3); color: var(--color-ink); font-weight: var(--fw-semibold); margin: 28px 0 12px; }
.p3-family .help-cta { text-align: center; padding: var(--sp-12); }
@container publicthree (max-width: 640px) {
  .p3-family .faq-q { padding: 14px 16px; }
}



.p3-family .xhs-hero { background: linear-gradient(160deg, #fff0f2 0%, #fff4ed 60%, #f6f4ff 100%); padding: var(--sp-16) 0; }
.p3-family .xhs-tag { display: inline-flex; align-items: center; gap: 6px; background: #ff2442; color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-semibold); padding: 6px 14px; border-radius: var(--radius-pill); }
.p3-family .scene-card { padding: 22px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--color-line); transition: all var(--dur); cursor: pointer; }
.p3-family .scene-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.p3-family .scene-ico { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 12px; }
.p3-family .note-card { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-line); background: #fff; }
.p3-family .note-img { height: 180px; background: var(--gradient-accent); }
.p3-family .case-card { padding: 22px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--color-line); }
.p3-family .video-card { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-line); background: #fff; }
.p3-family .video-thumb { position: relative; display: flex; align-items: flex-end; padding: 10px; }
.p3-family .thumb-ep { height: 150px; }
.p3-family .thumb-play { height: 200px; align-items: center; justify-content: center; }
.p3-family .ep-tag { background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 5px; }
.p3-family .play-btn { width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: flex; align-items: center; justify-content: center; }


.p3-family a {display:block;}
.p3-family .row a, .p3-family .btn, .p3-family .breadcrumb a {display:inline-flex;}
.p3-family [hidden] {display:none!important;}
.p3-family :focus-visible {outline:3px solid var(--color-primary-400);outline-offset:3px;}
.p3-family .faq-q {width:100%;text-align:left;gap:12px;}
.p3-family .faq-item.open .faq-a {max-height:none;}
.p3-family .p3-chips {margin-bottom:28px;}
.p3-content [data-p3-content-card]:first-of-type {margin-bottom:32px;}
.p3-family .p3-band-title {margin-bottom:20px;}
.p3-family .p3-cta {text-align:center;padding:48px;}
.p3-family .p3-load {text-align:center;margin-top:36px;}
.p3-family .p3-unavailable, .p3-family .p3-source-note {font-size:12px;line-height:1.6;color:var(--color-text-mute);margin-top:12px;}
.p3-family .p3-course-cover {height:120px;display:flex;align-items:center;justify-content:center;}
.p3-family .p3-dark h1, .p3-family .p3-dark h2, .p3-family .p3-dark .lead, .p3-family .p3-dark .muted {color:#fff;}
.p3-family .p3-dark {color:#fff;}
.p3-family .p3-sr {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.p3-family [id] {scroll-margin-top:100px;}
@container publicthree (max-width:640px) {.p3-help .p3-help-tiles {grid-template-columns:repeat(2,minmax(0,1fr));}.p3-family .p3-cta {padding:24px;}.p3-family .btn {white-space:normal;}.p3-family .row {flex-wrap:wrap;}}

/* Task28 ONE consolidated source/visual collision wave — taxonomy only.
   Authored numbered path, card inner spacing and honest disabled identities remain. */
.tx-source .subj-card {height:auto;min-height:0;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;padding:18px;color:var(--color-text);text-align:left;}
.tx-source .subj-card > div {min-width:0;}
.tx-source .subj-card strong {color:var(--color-ink);}
.tx-source .subj-card .subj-ico {flex-shrink:0;}
.tx-source .tutor-card {padding:0;}
.tx-source .tutor-card-top {padding:20px;}
.tx-source .tutor-card-meta {padding:0 20px 12px;}
.tx-source .tutor-card-foot {padding:14px 20px;gap:8px;flex-wrap:wrap;}
.tx-source .tutor-card-foot .price {white-space:nowrap;flex-shrink:0;}
.tx-source .tutor-card-foot .price-unit {white-space:nowrap;}
.tx-source .tutor-card-foot > .btn {max-width:100%;white-space:normal;overflow-wrap:anywhere;}
.tx-source .tx-rating-ink {color:var(--color-ink);}
.tx-source .path-step {padding:0;position:static;align-items:stretch;}
.tx-source .path-step::before, .tx-source .path-step::after {content:none;display:none;}
.tx-source .path-dot {width:32px;height:32px;}
.tx-source .stack > * + * {margin-top:0;}
.tx-source .compare-card > .row.gap-2 {gap:8px;}
.tx-source .link-band {padding:0;background:transparent;border-radius:0;border:0;box-shadow:none;}
.tx-source .online-band .h3 {color:#fff;}
.tx-source .breadcrumb {display:flex;gap:8px;flex-wrap:wrap;font-size:13px;padding:16px 0;margin-bottom:0;}

/* Marketing6 ONE consolidated copy/structure/native remediation — PM only. */
.pm-download .logo {display:flex;align-items:center;gap:9px;font-weight:var(--fw-bold);font-size:var(--fs-h3);color:var(--color-ink);}
.pm-download .logo-mark {display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--gradient-primary);color:#fff;font-weight:var(--fw-bold);flex-shrink:0;}
@container marketing (max-width:640px) {
 .pm-about .kpi-grid.grid-4 {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
 .pm-about .kpi-grid .stat-card {padding:12px 10px;}
 .pm-about .kpi-grid .stat-num {font-size:20px;}
 .pm-about .kpi-grid .stat-label {font-size:12px;}
 .pm-about .cta-row {flex-direction:column;align-items:center;}
 .pm-about .cta-row .btn {white-space:nowrap;min-width:150px;max-width:100%;}
}

/* Public3 coherent source hierarchy and empty/reset repair — P3 only. */
.p3-content .p3-feature-cover {display:flex;align-items:flex-end;padding:24px;}
.p3-content .p3-feature-text {display:flex;flex-direction:column;justify-content:center;}
.p3-content .p3-feature-badge {align-self:flex-start;}
.p3-family .avatar-xs {width:28px;height:28px;font-size:11px;}
.p3-family .faint {color:var(--color-text-faint);}
.p3-content .card {overflow:hidden;}
.p3-content .p3-cta {background:var(--gradient-hero);border:none;}
.p3-social .p3-hero-lead {max-width:580px;margin-top:12px;}
.p3-social .p3-preview-pad {padding:14px;}
.p3-social .badge-verified {background:var(--color-info-bg);color:var(--color-primary-600);}
.p3-social .p3-rating {color:var(--color-ink);}
.p3-social .tutor-card {padding:0;}
.p3-social .p3-cta {border:none;}
.p3-social .p3-dark .p3-cta .muted, .p3-social .p3-cta.p3-dark .muted {color:rgba(255,255,255,.8);}
.p3-social .u-048 {color:var(--color-accent-500);}
.p3-social .p3-dark .p3-ghost {background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.4);}

/* Public3 FIRSTnative18 consolidated scoped paint repair N01-N04. */
.p3-help .faq-item.open .faq-a:not([hidden]) {display:block;max-height:none;padding:0 20px 18px;}
.p3-help .faq-a[hidden] {display:none!important;}
.p3-family .p3-denial-pad {padding:0 20px 14px;min-width:0;max-width:100%;}
.p3-family .p3-denial-pad .p3-unavailable {margin:0;white-space:normal;overflow-wrap:anywhere;max-width:100%;}
.p3-content .p3-chips .chip {display:inline-flex;align-items:center;justify-content:center;min-height:36px;gap:6px;font-size:13px;padding:7px 14px;border-radius:var(--radius-pill);background:var(--color-surface);border:1px solid var(--color-line);color:var(--color-text);cursor:pointer;}
.p3-content .p3-chips .chip.is-active, .p3-content .p3-chips .chip[aria-pressed="true"] {background:var(--color-primary-500);color:#fff;border-color:var(--color-primary-500);}
.p3-notfound > .section > .container {width:100%;max-width:1200px;margin:0 auto;padding:0 24px;}
.p3-notfound .btn {margin-top:24px;}
@container publicthree (max-width:640px) {.p3-notfound > .section > .container {padding:0 16px;}.p3-help .faq-item.open .faq-a:not([hidden]) {padding:0 16px 18px;}}