/* ============================================================
   Agora IM Home — Mock v2 (2026-05-20)
   v2 changes from v1 (research-driven):
     - rail #F4F0E7 (was #EDE7DA): same warm hue as paper, ~1.5 L step
     - default avatar neutral; tints only on .is-pinned / .is-unread
     - drop 3px left accent bar on active row
     - section header flush-left at 16px (was 24px)
     - 0px row gap (was 2px)
     - 36px avatar (was 40px), 60px row (was 68px)
     - 288px sidebar (was 264px)
     - add bottom user strip
   Reports in /tmp/agora-design/im-v2-*.md
   ============================================================ */

/* -------- design tokens -------- */
:root {
  --paper:           #FBF9F4;
  --bone:            #F4F1EA;
  --bone-2:          #ECE7DC;
  --ink:             #14141A;
  --ink-80:          rgba(20, 20, 26, 0.82);
  --ink-60:          rgba(20, 20, 26, 0.60);
  --ink-40:          rgba(20, 20, 26, 0.40);
  --ink-30:          rgba(20, 20, 26, 0.30);
  --ink-08:          rgba(20, 20, 26, 0.08);
  --ink-05:          rgba(20, 20, 26, 0.055);
  --ink-04:          rgba(20, 20, 26, 0.04);
  --ink-03:          rgba(20, 20, 26, 0.03);
  --accent:          #D14A24;
  --accent-soft:     rgba(209, 74, 36, 0.10);
  --sea:             #1F5673;
  --sea-soft:        rgba(31, 86, 115, 0.10);
  --ok:              #11A574;
  --ok-soft:         rgba(17, 165, 116, 0.10);
  /* v5.7 P1.3 — Tint 9→4 收口: iris/gold/rose/moss alias 到 4 核心 */
  /* iris (decision/system) → ink   |  gold/rose (warm creative) → accent  |  moss (cool tool) → sea */
  --iris:            var(--ink);
  --iris-soft:       var(--ink-08);
  --gold:            var(--accent);
  --gold-soft:       var(--accent-soft);
  --rose:            var(--accent);
  --rose-soft:       var(--accent-soft);
  --moss:            var(--sea);
  --moss-soft:       var(--sea-soft);

  /* default neutral avatar — 70%+ of sidebar rows now use this for calm */
  --av-bg:           rgba(20, 20, 26, 0.055);
  --av-fg:           rgba(20, 20, 26, 0.72);

  /* shell-only new tokens */
  --surface-desk:    #E5DFD0;
  --bone-rail:       #F4F0E7;          /* v2: same hue as paper, ~1.5 L darker (cohesion fix) */
  --seam:            rgba(20, 20, 26, 0.06);
  --seam-strong:     rgba(20, 20, 26, 0.10);
  --row-hover:       rgba(20, 20, 26, 0.03);
  --row-active:      rgba(20, 20, 26, 0.055);
  --surface-night:   #14141A;
  --surface-night-2: #2A1F4A;

  --font-display:    'Instrument Serif', 'Noto Serif SC', 'Source Han Serif SC', serif;
  --font-ui:         'Geist', 'Inter', system-ui, -apple-system, 'Helvetica Neue',
                     'PingFang SC', 'Noto Sans SC', 'Source Han Sans SC', sans-serif;
  --font-mono:       'Geist Mono', 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  --ease:            cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur:             220ms;
}

/* v5.7 P1.4 — Global .num utility (mono + tabular-nums for all numbers) */
/* explicit class + passive promotion for known number-display classes */
.num, [data-num],
.bs-score-num, .bs-ppt-num, .bs-control-value,
.as-news-i-num,
.dr-kpi-val, .dr-kpi-delta,
.ds-current-num, .ds-jtbd-count, .ds-quote-count, .ds-sm-state-count,
.bignum, .lh-step-num,
.ps-num, .rl-num, .wfc-day-num,
.ma-h-stat, .rec-score, .score, .rk-metric,
.al-metric, .fm-stat {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* v5.7 P1.2 — Unified .badge with [data-tone] color variants */
.badge-u {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bone);
  color: var(--ink-60);
  text-transform: uppercase;
  line-height: 1.4;
}
.badge-u[data-tone="accent"] { background: var(--accent); color: var(--paper); }
.badge-u[data-tone="ink"]    { background: var(--ink); color: var(--paper); }
.badge-u[data-tone="ok"]     { background: rgba(30,138,94,0.13); color: var(--ok); }
.badge-u[data-tone="ghost"]  { background: var(--ink-04); color: var(--ink-60); border: 1px solid var(--ink-08); }

/* v5.7 P1.1 — Demoji: tone down decorative emoji in UI chrome (grayscale + dim) */
/* applies to known emoji-bearing classes — preserves user-content emoji (chat bubbles, reactions) */
.bg-icon,
.wf-tpl-emoji,
.wfc-meta-item,
.wf-run-eye .emoji,
.cb-ic,
.ac-audience-tab,
.brand-emoji,
.nav-emoji,
.tab-emoji {
  filter: grayscale(1) opacity(0.72);
}

/* -------- reset + base -------- */
* { box-sizing: border-box; }
/* v3.0: fuller canvas — less bezel around the app for the "v18 spacious" feel */
html, body { margin: 0; padding: 0; height: 100vh; overflow: hidden; }
body {
  background: var(--surface-desk);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;                                    /* v3.0: even tighter — match v18 fuller-screen feel */
}
@media (min-width: 1441px) { body { padding: 8px; } }
@media (max-width: 600px)  { body { padding: 0; } }

a { color: inherit; text-decoration: none; }

/* -------- app container (the "window") -------- */
.app {
  width: 100%;
  height: 100%;
  max-width: 1920px;                               /* v3.0: full canvas on standard displays */
  background: var(--paper);
  border-radius: 8px;                              /* v3.0: less rounded for fuller feel */
  overflow: hidden;
  display: grid;
  grid-template-rows: 40px 1fr;
  box-shadow:
    inset 0 0 0 0.5px var(--seam-strong),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(20, 20, 26, 0.04),
    0 24px 60px rgba(20, 20, 26, 0.16);
}

/* v2.1: Phone-mode — title-bar toggle morphs window into iPhone silhouette */
body.is-phone {
  background: #2a2520;                             /* darker desk for phone mode */
  padding: 40px;
}
body.is-phone .app {
  width: 390px;
  height: min(844px, calc(100vh - 80px));
  max-width: 390px;
  border-radius: 38px;                             /* iPhone radius */
  box-shadow:
    inset 0 0 0 8px #000,                          /* iPhone bezel */
    inset 0 0 0 9px #333,
    0 30px 80px rgba(0,0,0,0.5);
}
body.is-phone .titlebar {
  height: 30px;
  background: var(--ink);
  color: var(--paper);
  border-bottom: none;
  padding: 0 16px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
}
body.is-phone .titlebar .tb-traffic,
body.is-phone .titlebar .tb-right { display: none; }
body.is-phone .titlebar .tb-burger { display: inline-flex; color: var(--paper); }
body.is-phone .titlebar::before {
  content: "9:41";
  font-family: var(--font-ui);
  color: var(--paper);
}
body.is-phone .titlebar::after {
  content: "";
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 28px;
  background: #000;
  border-radius: 0 0 16px 16px;
  z-index: 100;
}
body.is-phone .tb-title {
  position: static;
  transform: none;
  margin-left: auto;
  color: var(--paper);
}
body.is-phone .frame {
  grid-template-columns: 1fr !important;
}
body.is-phone .sidebar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 280px;
  z-index: 30;
  transform: translateX(-100%);
  transition: transform 220ms var(--ease);
  box-shadow: 0 0 48px -12px rgba(0,0,0,0.4);
}
body.is-phone.drawer-open .sidebar { transform: translateX(0); }
body.is-phone .artifact { display: none !important; }
body.is-phone .frame[data-view="chat"] .main { width: 100%; }
body.is-phone .main { padding-bottom: 56px; }     /* room for bottom tab bar */
body.is-phone .mobile-tabbar { display: flex; }

/* device toggle in title bar */
.device-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  background: var(--ink-05);
  border-radius: 6px;
  padding: 2px;
  cursor: pointer;
  user-select: none;
}
.device-toggle .dt-opt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  color: var(--ink-60);
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.device-toggle .dt-opt.is-active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(20,20,26,0.06);
}
.device-toggle .dt-opt:hover:not(.is-active) { color: var(--ink); }
body.is-phone .device-toggle { display: none; }   /* hide once in phone, toggle exits via tap on chrome */

/* -------- title bar (44px) -------- */
.titlebar {
  background: var(--bone-rail);                    /* H3: rail-tone, recessed */
  border-bottom: 1px solid var(--seam);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 14px;
  position: relative;
}
.tb-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-60);
  padding: 4px 6px;
  border-radius: 6px;
}
.tb-burger:hover { background: var(--row-hover); color: var(--ink); }
@media (max-width: 880px) {
  .tb-burger { display: inline-flex; align-items: center; }
  .tb-traffic { display: none; }
  /* L3: title left-aligned so burger doesn't push it off-center */
  .tb-title { position: static; left: auto; transform: none; margin-left: 4px; }
}
.tb-traffic {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tb-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.18), inset 0 -1px 1px rgba(0,0,0,0.20), inset 0 1px 1px rgba(255,255,255,0.36);
}
.tb-dot.red    { background: radial-gradient(circle at 30% 30%, #FF8579, #FF5F57); }
.tb-dot.yellow { background: radial-gradient(circle at 30% 30%, #FFCB52, #FEBC2E); }
.tb-dot.green  { background: radial-gradient(circle at 30% 30%, #5DDD6E, #28C840); }
.tb-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ui);                     /* H4: system font, not mono */
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-60);
  letter-spacing: 0;
}

/* -------- Frame: SINGLE-column for home/marketplace, TWO-column for chat -------- */
/* v17: 双栏只在对话层 (data-view="chat") 启用，其它视图单栏 */
/* v2: sidebar 264 → 288 for breathing room (research says 260-300 sweet spot) */
.frame {
  display: grid;
  grid-template-columns: 288px 1fr;
  height: 100%;
  min-height: 0;
  position: relative;
}
.frame[data-view="chat"] {
  grid-template-columns: 288px minmax(420px, 1fr) minmax(420px, 1.15fr);
}
@media (max-width: 1280px) {
  /* Below 1280px even chat view drops artifact (mobile-tablet space) */
  .frame[data-view="chat"] {
    grid-template-columns: 288px 1fr;
  }
  .frame[data-view="chat"] .artifact { display: none !important; }
}
/* For non-chat views, artifact column is hidden entirely */
.frame:not([data-view="chat"]) .artifact { display: none !important; }
.frame:not([data-view="chat"]) .main { width: 100%; }
@media (max-width: 880px) {
  /* Mobile: rail becomes a drawer */
  .frame {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 280px;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 240ms var(--ease);
    box-shadow: 0 0 48px -12px rgba(20,20,26,0.32);
  }
  body.drawer-open .sidebar {
    transform: translateX(0);
  }
  body.drawer-open .frame::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(20,20,26,0.36);
    z-index: 25;
  }
}
@media (max-width: 600px) {
  body {
    padding: 8px;
  }
  .app {
    border-radius: 10px;
  }
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  background: var(--bone-rail);                    /* H3: pushed darker, recedes from paper canvas */
  border-right: 1px solid var(--seam);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* identity strip */
.sb-identity {
  height: 64px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--seam);
}
.sb-identity .id-avatar {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}
.sb-identity .id-text { flex: 1; min-width: 0; line-height: 1.25; }
.sb-identity .id-name {
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.sb-identity .id-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-40);
  letter-spacing: 0.04em;
  margin-top: 1px;
}
.sb-identity .id-action {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--ink-60);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.sb-identity .id-action:hover {
  background: var(--row-hover);
  color: var(--ink);
}

/* search */
.sb-search {
  padding: 10px 16px 8px;
  border-bottom: 1px solid transparent;
}
.sb-search .sb-input {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  background: var(--bone-2);
  border-radius: 999px;
  color: var(--ink-40);
  font-size: 13px;
  cursor: text;
  transition: background 160ms var(--ease);
}
.sb-search .sb-input:hover { background: rgba(20, 20, 26, 0.06); }
.sb-search .sb-input svg { width: 14px; height: 14px; flex-shrink: 0; }
.sb-search .sb-input span { flex: 1; }
.sb-search .sb-input .kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-40);
  background: rgba(20,20,26,0.05);
  border: 1px solid var(--seam);
  padding: 1px 5px;
  border-radius: 4px;
}

/* scroll container */
.sb-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(20,20,26,0.10) transparent;
}
.sb-scroll::-webkit-scrollbar { width: 4px; }
.sb-scroll::-webkit-scrollbar-thumb { background: rgba(20,20,26,0.10); border-radius: 4px; }

/* section header — v2: flush-left at 16px (was 24px), tighter mono caps */
.sb-section-h {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-40);
  padding: 16px 16px 6px 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.sb-section-h .count {
  font-size: 9.5px;
  color: var(--ink-30);
  font-weight: 400;
  letter-spacing: 0.08em;
}

/* IM row — v2: smaller (60px), tighter avatar (36px), 0 row gap, no left bar */
.im-row {
  position: relative;
  height: 60px;
  margin: 0 8px;                     /* v2: removed 2px bottom gap to stop fragmentation */
  padding: 10px 10px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  column-gap: 12px;
  align-items: center;
  border-radius: 10px;
  cursor: pointer;
  transition: background 140ms var(--ease);
}
.im-row:hover {
  background: var(--row-hover);
}
.im-row.is-active {
  background: var(--row-active);
}
/* v2: no left accent bar — Telegram/Claude/new-WeChat all drop it.
   Active is just a soft inset tint pill. */

/* avatar — v2: default neutral 36px squircle; tints only for pinned/unread/active emphasis */
.im-avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--av-bg);
  color: var(--av-fg);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  user-select: none;
  flex-shrink: 0;
}
/* per-agent tints — only applied when row carries emphasis (.is-pinned / .is-unread / .is-active) */
.im-row.is-pinned .im-avatar.tint-accent,
.im-row.is-unread .im-avatar.tint-accent,
.im-row.is-active .im-avatar.tint-accent  { background: var(--accent-soft);  color: var(--accent); }
.im-row.is-pinned .im-avatar.tint-iris,
.im-row.is-unread .im-avatar.tint-iris,
.im-row.is-active .im-avatar.tint-iris    { background: var(--iris-soft);    color: var(--iris); }
.im-row.is-pinned .im-avatar.tint-sea,
.im-row.is-unread .im-avatar.tint-sea,
.im-row.is-active .im-avatar.tint-sea     { background: var(--sea-soft);     color: var(--sea); }
.im-row.is-pinned .im-avatar.tint-gold,
.im-row.is-unread .im-avatar.tint-gold,
.im-row.is-active .im-avatar.tint-gold    { background: var(--gold-soft);    color: var(--gold); }
.im-row.is-pinned .im-avatar.tint-rose,
.im-row.is-unread .im-avatar.tint-rose,
.im-row.is-active .im-avatar.tint-rose    { background: var(--rose-soft);    color: var(--rose); }
.im-row.is-pinned .im-avatar.tint-moss,
.im-row.is-unread .im-avatar.tint-moss,
.im-row.is-active .im-avatar.tint-moss    { background: var(--moss-soft);    color: var(--moss); }
.im-row.is-pinned .im-avatar.tint-ok,
.im-row.is-unread .im-avatar.tint-ok,
.im-row.is-active .im-avatar.tint-ok      { background: var(--ok-soft);      color: var(--ok); }
.im-row.is-pinned .im-avatar.tint-ink,
.im-row.is-unread .im-avatar.tint-ink,
.im-row.is-active .im-avatar.tint-ink     { background: rgba(20,20,26,0.08); color: var(--ink); }

/* unscoped tints still available for places that need them (chat header, home view, market) */
.tint-accent  { background: var(--accent-soft);  color: var(--accent); }
.tint-iris    { background: var(--iris-soft);    color: var(--iris); }
.tint-sea     { background: var(--sea-soft);     color: var(--sea); }
.tint-gold    { background: var(--gold-soft);    color: var(--gold); }
.tint-rose    { background: var(--rose-soft);    color: var(--rose); }
.tint-moss    { background: var(--moss-soft);    color: var(--moss); }
.tint-ok      { background: var(--ok-soft);      color: var(--ok); }
.tint-ink     { background: rgba(20,20,26,0.08); color: var(--ink); }

/* IM row scope: override the unscoped tints when the row is NOT pinned/unread/active */
.im-row:not(.is-pinned):not(.is-unread):not(.is-active) .im-avatar {
  background: var(--av-bg) !important;
  color: var(--av-fg) !important;
}

/* middle column */
.im-body { min-width: 0; line-height: 1.3; }
.im-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
  letter-spacing: -0.003em;
}
.row-pin {
  width: 10px; height: 10px;
  color: var(--ink-30);
  flex-shrink: 0;
}
.im-preview {
  font-size: 12px;
  color: var(--ink-60);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0;
}
.im-row.is-unread .im-preview { color: var(--ink-80); }

/* right column */
.im-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
  height: 100%;
  padding: 4px 0 4px;
}
.im-time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-40);
  letter-spacing: 0.02em;
}
.im-unread {
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  display: grid;
  place-items: center;
  padding: 0 5px;
  letter-spacing: 0;
}
.im-unread.empty { background: transparent; }
.im-unread.dot {
  min-width: 8px; width: 8px; height: 8px;
  border-radius: 50%;
  padding: 0;
  font-size: 0;
}

/* M7: small breathing online status dot on avatars — shared livePulse keyframe */
.im-avatar { position: relative; }
.im-row.is-live .im-avatar::after {
  content: "";
  position: absolute;
  bottom: -2px; right: -2px;
  width: 10px; height: 10px;
  background: var(--ok);
  border-radius: 50%;
  border: 2px solid var(--bone-rail);
  animation: livePulse 1800ms ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.78; transform: scale(1.08); }
}

/* v2.1: Top-level nav rows (Linear-style icon + label) */
.sb-topnav {
  padding: 8px 0 4px;
}
.nav-row {
  height: 34px;
  margin: 0 8px 1px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink-80);
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.nav-row:hover { background: var(--row-hover); color: var(--ink); }
.nav-row.is-active { background: var(--row-active); color: var(--ink); }
.nav-row svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--ink-60); }
.nav-row.is-active svg { color: var(--ink); }
.nav-row .lbl {
  font-size: 13px;
  font-weight: 500;
  flex: 1;
  letter-spacing: -0.003em;
}
.nav-row .badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-40);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ink-04);
  padding: 1px 5px;
  border-radius: 4px;
}

.sb-divider {
  margin: 8px 16px 0;
  height: 1px;
  background: var(--seam);
}

/* phone-mode back-to-desktop exit button — only visible in phone mode */
.phone-exit {
  display: none;
  position: fixed;
  top: 14px; right: 14px;
  z-index: 1000;
  padding: 8px 14px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--seam-strong);
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
body.is-phone .phone-exit { display: block; }

/* mobile bottom tab bar — only shown in phone mode */
.mobile-tabbar {
  display: none;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 56px;
  background: var(--paper);
  border-top: 1px solid var(--seam);
  z-index: 20;
  align-items: center;
  justify-content: space-around;
  padding: 4px 0;
}
.mobile-tabbar .mtab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0;
  color: var(--ink-40);
  cursor: pointer;
}
.mobile-tabbar .mtab.is-active { color: var(--accent); }
.mobile-tabbar .mtab svg { width: 20px; height: 20px; }
.mobile-tabbar .mtab .mlbl {
  font-size: 10px;
  font-weight: 500;
}

/* v2: user strip — completes the "windowed app" frame (Telegram/Lark pattern).
   Without this the sidebar reads "half-page that ran out". */
.sb-userstrip {
  height: 52px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--seam);
  cursor: pointer;
  transition: background 140ms var(--ease);
  flex-shrink: 0;
}
.sb-userstrip:hover { background: var(--row-hover); }
.sb-userstrip .us-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  letter-spacing: -0.02em;
  position: relative;
  flex-shrink: 0;
}
.sb-userstrip .us-avatar::after {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 10px; height: 10px;
  background: var(--ok);
  border-radius: 50%;
  border: 2px solid var(--bone-rail);
}
.sb-userstrip .us-text { flex: 1; min-width: 0; line-height: 1.2; }
.sb-userstrip .us-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.sb-userstrip .us-status {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-40);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-top: 1px;
}
.sb-userstrip .us-more {
  width: 26px; height: 26px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--ink-40);
}
.sb-userstrip:hover .us-more { color: var(--ink-80); background: var(--ink-04); }
.sb-userstrip .us-more svg { width: 14px; height: 14px; }

/* system rows (footer) */
.sb-footer {
  border-top: 1px solid var(--seam);
  padding: 8px 8px 14px;
  flex-shrink: 0;
}
.sys-row {
  height: 40px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink-60);
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.sys-row:hover {
  background: var(--row-hover);
  color: var(--ink);
}
.sys-row svg { width: 14px; height: 14px; flex-shrink: 0; }
.sys-row .label {
  font-size: 13px;
  font-weight: 500;
}
.sys-row .badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-40);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   MAIN CHAT COLUMN
   ============================================================ */
.main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--paper);
  position: relative;
}

/* chat header */
.chat-h {
  height: 64px;
  padding: 0 20px;
  border-bottom: 1px solid var(--seam);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.chat-h .ch-back {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--ink-60);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease);
  margin-right: -4px;
}
.chat-h .ch-back:hover {
  background: var(--row-hover);
  color: var(--ink);
}
.chat-h .ch-back svg { width: 16px; height: 16px; }
.chat-h .ch-avatar {
  width: 32px; height: 32px;
  border-radius: 8px;
}
.chat-h .ch-info { flex: 1; min-width: 0; line-height: 1.25; }
.chat-h .ch-name {
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.chat-h .ch-sub {
  font-size: 12px;
  color: var(--ink-60);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}
.chat-h .ch-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-soft);
}
.chat-h .ch-actions {
  display: flex;
  gap: 4px;
}
.chat-h .ch-action {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--ink-60);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.chat-h .ch-action:hover {
  background: var(--row-hover);
  color: var(--ink);
}
/* v5.9.1: 详情按钮带文字标签 (pill 形态, 与 Studio .h-detail 风格一致) */
.chat-h .ch-action.ch-action-pill {
  width: auto;
  height: 28px;
  padding: 0 10px 0 8px;
  border-radius: 6px;
  border: 1px solid var(--ink-08);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-60);
}
.chat-h .ch-action.ch-action-pill:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* feed */
.feed {
  flex: 1;
  overflow-y: auto;
  padding: 24px 24px 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(20,20,26,0.10) transparent;
}
.feed::-webkit-scrollbar { width: 6px; }
.feed::-webkit-scrollbar-thumb { background: rgba(20,20,26,0.10); border-radius: 6px; }

/* day separator */
.day-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-40);
  letter-spacing: 0.06em;
  margin: 4px 0;
}
.day-sep::before, .day-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--seam-strong);                   /* L2: 0.10 instead of 0.06 so hairline shows on paper */
}

/* message row */
.msg {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  max-width: 100%;
}
.msg.outgoing {
  flex-direction: row-reverse;
}
.msg-avatar {
  width: 28px; height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  line-height: 1;
}
.msg.indented .msg-avatar {
  visibility: hidden;   /* keep alignment for subsequent messages of same sender */
}

/* bubble */
.bubble {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 14px 14px 14px 4px;
  padding: 12px 16px;
  max-width: 560px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.msg.outgoing .bubble {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
  border-radius: 14px 14px 4px 14px;
}
.bubble p { margin: 0; }
.bubble p + p { margin-top: 6px; }
.bubble strong { font-weight: 600; }
.bubble em { font-style: italic; color: var(--ink); }                    /* M3: emphasis monochrome, not orange */
.msg.outgoing .bubble em { color: #FFB088; font-style: italic; }         /* keep light orange on dark for legibility */

/* mini-app card bubble */
.bubble.card-bubble {
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 14px 14px 14px 4px;
  overflow: hidden;
  max-width: 380px;
}
.card-bubble .cb-top {
  padding: 14px 16px 12px;
  border-bottom: 1px dashed var(--seam);
}
.card-bubble .cb-eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
}
.card-bubble .cb-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  margin-top: 2px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.card-bubble .cb-sub {
  font-size: 12px;
  color: var(--ink-60);
  margin-top: 4px;
  line-height: 1.45;
}
.card-bubble .cb-pack {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.card-bubble .cb-chip {
  background: var(--bone-2);
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--ink-80);
}
.card-bubble .cb-bottom {
  padding: 10px 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-bubble .cb-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-40);
  letter-spacing: 0.04em;
}
.card-bubble .cb-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 160ms var(--ease);
}
.card-bubble .cb-cta:hover { color: var(--ink); }

/* typing indicator */
.typing {
  display: flex;
  gap: 4px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--seam);
  padding: 12px 14px;
  border-radius: 14px 14px 14px 4px;
  width: fit-content;
}
.typing .d {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-40);
  animation: bounce 1100ms ease-in-out infinite;
}
.typing .d:nth-child(2) { animation-delay: 150ms; }
.typing .d:nth-child(3) { animation-delay: 300ms; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* composer */
.composer {
  border-top: 1px solid var(--seam);
  padding: 12px 24px 16px;
  background: var(--paper);
  flex-shrink: 0;
}
/* M5: composer chips become icon-buttons INSIDE the input wrap (Slack-style) */
.composer-chips { display: none; }                  /* hide the old above-input row */

.composer-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 12px;                              /* L1: nest better with 9r send button */
  padding: 6px 6px 6px 6px;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.composer-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--ink-40);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
}
.composer-icon:hover {
  background: var(--row-hover);
  color: var(--ink);
}
.composer-icon svg { width: 14px; height: 14px; }
.composer-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.composer-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink);
  padding: 9px 8px;
}
.composer-input::placeholder { color: var(--ink-40); }
.composer-send {
  width: 36px; height: 36px;
  border-radius: 9px;
  border: none;
  background: var(--ink);                                                  /* M2: ink CTA, not orange */
  color: var(--bone);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 160ms var(--ease), transform 80ms var(--ease);
}
.composer-send:hover { background: var(--accent); }                        /* hover reveals accent */
.composer-send:active { transform: scale(0.96); }

/* ============================================================
   ARTIFACT PANE (right column — the visible UI that mini-apps produce)
   ============================================================ */
.artifact {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--paper);                        /* H3: drop gradient — one rail/paper seam, not two */
  border-left: 1px solid var(--seam);
  position: relative;
}

/* artifact header — tabs + status + actions */
.art-h {
  height: 64px;
  padding: 0 20px;
  border-bottom: 1px solid var(--seam);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.art-tabs {
  display: flex;
  gap: 2px;
  background: var(--bone-2);
  padding: 3px;
  border-radius: 8px;
}
.art-tab {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-60);
  background: transparent;
  border: none;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.art-tab:hover { color: var(--ink); }
.art-tab.is-active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(20,20,26,0.05);
}
.art-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.art-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.art-status .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: livePulse 1800ms ease-in-out infinite;     /* M7: unified to livePulse */
}
.art-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.art-btn {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-60);
  background: transparent;
  border: 1px solid var(--seam);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.art-btn:hover { background: var(--row-hover); color: var(--ink); }
.art-btn.is-primary {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.art-btn.is-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/* artifact body — the actual product visualization */
.art-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(20,20,26,0.10) transparent;
}
.art-body::-webkit-scrollbar { width: 5px; }
.art-body::-webkit-scrollbar-thumb { background: rgba(20,20,26,0.10); border-radius: 5px; }

.art-stat-bar {
  display: flex;
  gap: 14px;
  padding: 0 2px 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.art-stat-bar strong {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  text-transform: none;
  letter-spacing: -0.01em;
  margin-right: 6px;
}

/* persona card — the visual product */
.pcard {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 14px;
  padding: 18px 20px 16px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(20,20,26,0.02), 0 8px 24px -16px rgba(20,20,26,0.08);
  animation: cardDropIn 480ms var(--ease) both;
}
.pcard:nth-child(2) { animation-delay: 80ms; }
.pcard:nth-child(3) { animation-delay: 160ms; }
@keyframes cardDropIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.pcard.is-generating {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent-soft), 0 2px 4px rgba(20,20,26,0.02), 0 8px 24px -16px rgba(20,20,26,0.08);
}
.pcard .pc-idx {
  position: absolute;
  top: 16px; right: 18px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--ink-40);
  text-transform: uppercase;
}
.pcard.is-generating .pc-idx { color: var(--accent); }

.pcard .pc-avatar {
  width: 56px; height: 56px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
}

.pcard .pc-body { min-width: 0; }
.pcard .pc-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pcard .pc-role {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-60);
  margin-top: 3px;
  line-height: 1.35;
}
.pcard .pc-meta-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.pcard .pc-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-60);
  background: var(--bone-2);
  padding: 2px 8px;
  border-radius: 999px;
}
.pcard .pc-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-80);
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--accent);
}

.pcard .pc-block { margin-top: 14px; }
.pcard .pc-block-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 6px;
}

.pcard .pc-axis {
  display: grid;
  grid-template-columns: 64px 1fr 28px;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--ink-80);
  margin-bottom: 4px;
}
.pcard .pc-axis-label {
  font-family: var(--font-ui);
  font-weight: 500;
}
.pcard .pc-axis-track {
  height: 5px;
  background: var(--bone-2);
  border-radius: 999px;
  overflow: hidden;
}
.pcard .pc-axis-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  width: 0;
  animation: axisFill 800ms var(--ease) forwards;
  animation-delay: 380ms;
}
/* M12: stagger axis fills so they don't all fill simultaneously */
.pcard .pc-axis:nth-child(2) .pc-axis-fill { animation-delay: 460ms; }
.pcard .pc-axis:nth-child(3) .pc-axis-fill { animation-delay: 540ms; }
@keyframes axisFill { to { width: var(--w, 50%); } }
.pcard .pc-axis-val {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-60);
  text-align: right;
}

.pcard .pc-obj {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-60);
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.pcard .pc-obj::before {
  content: "·";
  color: var(--accent);
  flex-shrink: 0;
}

.pcard .pc-generating-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin-top: 12px;
}
.pcard .pc-generating-line .d {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: bounce 1100ms ease-in-out infinite;
}
.pcard .pc-generating-line .d:nth-child(2) { animation-delay: 150ms; }
.pcard .pc-generating-line .d:nth-child(3) { animation-delay: 300ms; }

/* ============================================================
   ARTIFACT TEMPLATES (different mini-app products)
   Each template lives inside .art-body; only one is visible at a time.
   ============================================================ */
.art-template {
  display: none;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  animation: artFadeIn 280ms var(--ease) forwards;
}
.art-template.is-active { display: flex; }
@keyframes artFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Brand Kit artifact ---- */
.bk-hero {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 14px;
  padding: 22px 22px 18px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 2px 4px rgba(20,20,26,0.02), 0 8px 24px -16px rgba(20,20,26,0.08);
}
.bk-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 36px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.bk-slogan {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-60);
}
.bk-row { display: flex; gap: 10px; flex-wrap: wrap; }
.bk-swatch {
  flex: 1;
  min-width: 64px;
  height: 64px;
  border-radius: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8px;
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  box-shadow: 0 1px 0 var(--seam);
}
.bk-swatch.light { color: var(--ink); }
.bk-card {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 12px;
  padding: 14px 16px;
}
.bk-card .bk-block-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 8px;
}
.bk-typography { display: grid; grid-template-columns: 80px 1fr; gap: 8px 12px; align-items: baseline; }
.bk-typography .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-40);
  text-transform: uppercase;
}
.bk-typography .display { font-family: var(--font-display); font-style: italic; font-size: 18px; }
.bk-typography .body { font-family: var(--font-ui); font-size: 14px; }
.bk-typography .mono { font-family: var(--font-mono); font-size: 13px; }

/* ---- Mag Cover artifact ---- */
.mc-canvas {
  background: var(--accent);
  color: #FBF9F4;
  border-radius: 12px;
  padding: 28px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 12px 32px -10px rgba(184, 56, 23, 0.42);
  container-type: inline-size;                    /* M8: enable cqi for inner headline */
}
.mc-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' /%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' /%3E%3C/svg%3E");
  opacity: 0.20;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.mc-top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }
.mc-mast {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 0.9;
}
.mc-issue {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: right;
  opacity: 0.72;
}
.mc-issue strong {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.01em;
  display: block;
  margin-top: 3px;
}
.mc-headline {
  position: relative; z-index: 1;
  margin-top: auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28px, 5.5cqi, 40px);
  line-height: 1.0;
  letter-spacing: -0.025em;
}
.mc-headline em { color: #FFB088; font-style: italic; }
.mc-meta {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 16px;
  border-top: 1px dashed rgba(255,255,255,0.22);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.78;
}

/* ---- Stack Architect artifact (spatial canvas) ---- */
.sa-canvas {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 14px;
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  position: relative;
  box-shadow: 0 2px 4px rgba(20,20,26,0.02), 0 8px 24px -16px rgba(20,20,26,0.08);
}
.sa-layer-h {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sa-layer-h::before, .sa-layer-h::after {
  content: ""; flex: 1; height: 1px; background: var(--seam);
}
.sa-layer { display: flex; gap: 8px; flex-wrap: wrap; }
.sa-node {
  flex: 1;
  min-width: 80px;
  background: var(--paper);
  border: 1.5px solid;
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  position: relative;
  transition: transform 200ms var(--ease);
  cursor: default;
}
.sa-node:hover { transform: translateY(-1px); }
.sa-node.layer-frontend { border-color: var(--iris); color: var(--iris); background: var(--iris-soft); }
.sa-node.layer-backend { border-color: var(--sea); color: var(--sea); background: var(--sea-soft); }
.sa-node.layer-data { border-color: var(--moss); color: var(--moss); background: var(--moss-soft); }
.sa-node.layer-infra { border-color: var(--ink-60); color: var(--ink); background: var(--bone-2); }
.sa-node .tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.06em;
  opacity: 0.65;
  margin-top: 2px;
  text-transform: uppercase;
}
.sa-connector {
  height: 1px;
  background: var(--seam);
  margin: -4px 24px;
}

/* ---- Therapist artifact (mood orb + axes) ---- */
.ther-orb-host {
  background: linear-gradient(180deg, var(--surface-night) 0%, var(--surface-night-2) 100%);
  border-radius: 14px;
  padding: 26px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 12px 32px -10px rgba(26, 20, 48, 0.42);
}
.ther-orb-host::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 176, 136, 0.32) 0%, transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(124, 92, 255, 0.20) 0%, transparent 60%);
  pointer-events: none;
}
.ther-orb-eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.62);
}
.ther-orb {
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFD8B5, #D14A24 60%, #6B2114 100%);
  margin: 30px auto;
  box-shadow: 0 0 30px rgba(255, 176, 136, 0.35), 0 0 60px rgba(209, 74, 36, 0.22) inset;
  position: relative;
  z-index: 1;
  animation: orbBreathe 4s ease-in-out infinite;
}
@keyframes orbBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
.ther-orb-stage {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: #FBF9F4;
  letter-spacing: -0.01em;
  position: relative; z-index: 1;
}
.ther-orb-sub {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(245, 241, 234, 0.55);
  margin-top: 4px;
  text-transform: uppercase;
  position: relative; z-index: 1;
}
.ther-axes-card {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 12px;
  padding: 16px 18px;
}
.ther-axes-card .ther-axes-h {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--ink-40);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ther-axis {
  display: grid;
  grid-template-columns: 56px 1fr 28px;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
  font-size: 11.5px;
}
.ther-axis-lbl { font-weight: 500; color: var(--ink-80); }
.ther-axis-track { height: 5px; background: var(--bone-2); border-radius: 999px; overflow: hidden; }
.ther-axis-fill {
  height: 100%;
  background: var(--iris, #7C5CFF);
  border-radius: 999px;
}
.ther-axis-val { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-60); text-align: right; }

/* ---- Pitch Score artifact (radar + 5 axes) ---- */
.ps-card {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ps-total {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--seam);
}
.ps-total .ps-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.ps-total .ps-suffix {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-60);
  letter-spacing: 0.1em;
}
.ps-total .ps-tier {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--accent);
  padding: 6px 12px;
  border-radius: 999px;
}
.ps-radar {
  position: relative;
  aspect-ratio: 1/1;
  max-width: 360px;
  margin: 0 auto;
}
.ps-radar svg { width: 100%; height: 100%; }
.ps-axes-list { display: flex; flex-direction: column; gap: 8px; }
.ps-axis-item {
  display: grid;
  grid-template-columns: 70px 1fr 36px;
  gap: 12px;
  align-items: center;
  font-size: 12px;
}
.ps-axis-item .lbl { color: var(--ink-80); font-weight: 500; }
.ps-axis-item .track {
  height: 6px;
  background: var(--bone-2);
  border-radius: 999px;
  overflow: hidden;
}
.ps-axis-item .fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}
.ps-axis-item .val {
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: right;
  color: var(--ink-60);
}
.ps-fix {
  background: rgba(193, 54, 22, 0.06);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 12px 14px;
}
.ps-fix .ps-fix-h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.ps-fix .ps-fix-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}

/* ---- Writer artifact (manuscript with provenance shading) ---- */
.wr-host {
  background: #FBF7EE;
  border: 1px solid var(--seam);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wr-h {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
  display: flex;
  align-items: center;
  gap: 8px;
}
.wr-h::before, .wr-h::after { content: ""; flex: 1; height: 1px; background: var(--seam); }
.wr-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.wr-para {
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Instrument Serif', serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  padding-left: 12px;
  border-left: 2px solid var(--ok);
}
.wr-para.ai {
  color: var(--ink-60);
  font-style: italic;
  border-left: 2px dashed var(--accent);
}

/* ---- Deck artifact (slide thumbnails) ---- */
.dk-host {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dk-active {
  background: linear-gradient(135deg, #14141A 0%, #1F1F2A 100%);
  color: #FBF9F4;
  border-radius: 10px;
  aspect-ratio: 16/9;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  container-type: inline-size;                   /* M8: enable cqi for slide headline */
}
.dk-active .dk-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.5);
}
.dk-active .dk-head {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 4.5cqi, 36px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.dk-active .dk-head em { color: #FFB088; font-style: italic; }
.dk-active .dk-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.55);
}
.dk-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 8px;
  padding: 8px 0;
}
.dk-thumb {
  aspect-ratio: 16/9;
  background: var(--bone-2);
  border: 1.5px solid transparent;
  border-radius: 4px;
  display: flex;
  align-items: flex-end;
  padding: 4px 6px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--ink-60);
  letter-spacing: 0.06em;
  position: relative;
  cursor: pointer;
  transition: all 140ms var(--ease);
}
.dk-thumb:hover { background: var(--paper); border-color: var(--seam); }
.dk-thumb.is-active {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.dk-thumb::before {
  content: "";
  position: absolute;
  top: 6px; left: 6px; right: 6px;
  height: 8px;
  background: rgba(20,20,26,0.18);
  border-radius: 2px;
}
.dk-thumb.is-active::before { background: rgba(255,255,255,0.25); }

/* ---- Discovery Sprint artifact (timeline) ---- */
.ds-host {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ds-hypo {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
  padding: 12px 14px;
  background: var(--ok-soft);
  border-left: 3px solid var(--ok);
  border-radius: 0 10px 10px 0;
}
.ds-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--seam);
  align-items: flex-start;
}
.ds-row:first-of-type { border-top: 0; }
.ds-day {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--ok);
  font-weight: 600;
  padding-top: 2px;
}
.ds-task {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-80);
  margin-bottom: 4px;
}
.ds-task .check {
  width: 14px; height: 14px;
  border: 1.5px solid var(--seam);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
}
.ds-task.done .check {
  background: var(--ok);
  border-color: var(--ok);
}
.ds-task.done .check::after {
  content: "✓";
  color: var(--paper);
  font-size: 10px;
  display: block;
  text-align: center;
  line-height: 1;
}
.ds-task.done span { color: var(--ink-40); text-decoration: line-through; }

/* ---- Wander Plan artifact (multi-day cards) ---- */
.wd-host {
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F1E5 100%);
  border: 1px solid var(--seam);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wd-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.wd-city {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
}
.wd-budget {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-60);
  letter-spacing: 0.04em;
}
.wd-day {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 10px;
  padding: 12px 14px;
}
.wd-day-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.wd-day-no {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-weight: 600;
}
.wd-day-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink);
  flex: 1;
}
.wd-day-stops {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: 4px;
}
.wd-stop {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-80);
  display: flex;
  gap: 6px;
}
.wd-stop .emj { font-size: 12.5px; line-height: 1.3; }

/* ---- Financial Model artifact (table) ---- */
.fm-host {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fm-h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.fm-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.fm-stat {
  padding: 12px 14px;
  background: var(--bone-2);
  border-radius: 10px;
}
.fm-stat .lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.fm-stat .val {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 4px;
}
.fm-stat.is-accent .val { color: var(--accent); }
.fm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.fm-table th {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
  font-weight: 500;
  text-align: right;
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--seam);
}
.fm-table th:first-child { text-align: left; }
.fm-table td {
  padding: 7px 0;
  border-bottom: 1px solid var(--seam);
  text-align: right;
  font-family: var(--font-mono);
  color: var(--ink-80);
}
.fm-table td:first-child {
  text-align: left;
  font-family: var(--font-ui);
  font-weight: 500;
}
.fm-table tr:last-child td { border-bottom: 0; padding-top: 10px; font-weight: 600; }
.fm-table tr:last-child td:not(:first-child) { color: var(--accent); }

/* ---- Mystic Tarot artifact ---- */
.tt-host {
  background: linear-gradient(180deg, var(--surface-night) 0%, var(--surface-night-2) 100%);
  border-radius: 14px;
  padding: 22px 20px;
  color: #FBF9F4;
  position: relative;
  overflow: hidden;
}
.tt-host::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 200, 100, 0.10) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(124, 92, 255, 0.15) 0%, transparent 60%);
  pointer-events: none;
}
.tt-eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 200, 100, 0.65);
  text-align: center;
  position: relative;
  z-index: 1;
}
.tt-spread {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
  position: relative;
  z-index: 1;
}
.tt-card {
  aspect-ratio: 2/3;
  background: linear-gradient(165deg, #2A1F4A 0%, #14141A 100%);
  border: 1px solid rgba(255, 200, 100, 0.20);
  border-radius: 8px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  position: relative;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.tt-card .tt-no {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(255, 200, 100, 0.55);
}
.tt-card .tt-glyph {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 36px;
  color: rgba(255, 200, 100, 0.92);
  line-height: 1;
}
.tt-card .tt-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: #FBF9F4;
}
.tt-meaning {
  margin-top: 18px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(245, 241, 234, 0.86);
  text-align: center;
  padding: 0 12px;
  position: relative;
  z-index: 1;
}

/* ---- Term Sheet artifact (contract excerpt with red-lines) ---- */
.ts-host {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 14px;
  padding: 20px 24px;
  font-family: 'Noto Serif SC', 'Source Han Serif SC', serif;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink);
}
.ts-h {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--seam);
}
.ts-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.ts-row {
  margin-bottom: 10px;
}
.ts-row b {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--ink);
}
.ts-red {
  background: rgba(193, 54, 22, 0.10);
  color: var(--accent);
  padding: 0 4px;
  text-decoration: line-through;
  text-decoration-color: var(--accent);
}
.ts-add {
  background: rgba(17, 165, 116, 0.13);
  color: var(--ok);
  padding: 0 4px;
}
.ts-note {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(193, 54, 22, 0.06);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-family: var(--font-ui);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-80);
}

/* ---- Redliner artifact (risk markers) ---- */
.rl-host {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rl-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bone-2);
}
.rl-row.severity-high { background: rgba(193, 54, 22, 0.08); border-left: 3px solid var(--accent); }
.rl-row.severity-mid { background: rgba(184, 137, 58, 0.10); border-left: 3px solid var(--gold); }
.rl-row.severity-low { background: rgba(17, 165, 116, 0.08); border-left: 3px solid var(--ok); }
.rl-row .rl-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-60);
}
.rl-row .rl-text {
  font-size: 12.5px;
  line-height: 1.45;
}
.rl-row .rl-text strong {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14.5px;
  margin-bottom: 4px;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-weight: 400;
}
.rl-row .rl-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(20,20,26,0.06);
  color: var(--ink-60);
  align-self: flex-start;
  white-space: nowrap;
}
.rl-row.severity-high .rl-tag { background: var(--accent); color: var(--paper); }
.rl-row.severity-mid .rl-tag { background: var(--gold); color: var(--paper); }
.rl-row.severity-low .rl-tag { background: var(--ok); color: var(--paper); }

/* ---- Inkpage artifact (HTML editor preview) ---- */
.ip-host {
  background: var(--surface-night);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 32px 1fr;
}
.ip-tabs {
  background: #0E0E14;
  display: flex;
  padding: 0 12px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  gap: 4px;
}
.ip-tab {
  height: 24px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(245, 241, 234, 0.55);
  border-radius: 6px 6px 0 0;
  background: transparent;
}
.ip-tab.is-active {
  background: var(--ink);
  color: #FBF9F4;
}
.ip-canvas {
  background: var(--paper);
  padding: 28px 24px;
  font-family: 'Inter', 'Helvetica Neue', sans-serif;
  color: #14141A;
}
.ip-canvas h2 {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 32px;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.ip-canvas h2 em { color: #D14A24; font-style: italic; }
.ip-canvas p { font-size: 13.5px; line-height: 1.65; margin: 0 0 12px; color: rgba(20,20,26,0.78); }
.ip-canvas .ip-quote {
  border-left: 3px solid #D14A24;
  padding: 8px 14px;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 16px;
  color: rgba(20,20,26,0.86);
  margin: 16px 0;
}

/* ============================================================
   HOME / INBOX DASHBOARD VIEW (full-bleed, replaces chat+artifact)
   ============================================================ */
.home-view {
  flex: 1;
  overflow-y: auto;
  padding: 32px 40px 60px;
  background: var(--paper);
}
.home-view::-webkit-scrollbar { width: 6px; }
.home-view::-webkit-scrollbar-thumb { background: rgba(20,20,26,0.10); border-radius: 6px; }

.home-h {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--seam);
}
.home-h-left h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 36px;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--ink);
  line-height: 1.05;
  font-weight: 400;
}
.home-h-left .home-greeting {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-60);
  letter-spacing: -0.01em;
}
.home-h-right {
  text-align: right;
}
.home-h-right .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.home-h-right .v {
  font-family: var(--font-ui);                       /* M4: roman not italic */
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.home-row-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 28px 0 14px;
}
.home-row-h .h-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.home-row-h .h-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.home-row-h .h-more {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--accent);
  cursor: pointer;
}
.home-row-h .h-more:hover { color: var(--ink); }

.home-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 720px) {
  .home-grid { grid-template-columns: 1fr; }
}

.home-tile {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 14px;
  padding: 18px 20px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
  position: relative;
  overflow: hidden;
}
.home-tile:hover {
  transform: translateY(-2px);
  border-color: var(--ink-08);
  box-shadow: 0 2px 4px rgba(20,20,26,0.02), 0 12px 32px -12px rgba(20,20,26,0.18);
}
.home-tile-h {
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-tile-h .home-tile-avatar {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  flex-shrink: 0;
}
.home-tile-h .home-tile-name {
  flex: 1;
  min-width: 0;
}
.home-tile-h .home-tile-name strong {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: block;
  line-height: 1.25;
}
.home-tile-h .home-tile-name small {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.home-tile-h .home-tile-time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-40);
  letter-spacing: 0.04em;
  align-self: flex-start;
}
.home-tile-preview {
  font-family: var(--font-ui);                       /* M4: drop italic display from tile previews */
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-80);
  padding: 10px 12px;
  background: var(--bone-2);
  border-radius: 10px;
  border-left: 3px solid var(--seam);                /* M6: neutral border — avatar carries identity */
  min-height: 60px;
  display: flex;
  align-items: center;
}
.home-tile-preview em { color: var(--ink); font-style: normal; font-weight: 600; }   /* M3: bold instead of orange italic */
.home-tile-foot {
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-tile-foot .tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-60);
  background: var(--bone-2);
  padding: 2px 8px;
  border-radius: 999px;
}
.home-tile-foot .open {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--accent);
  letter-spacing: 0.04em;
}

/* v17 view toggle: show/hide per data-view */
.view {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  opacity: 0;
  animation: viewIn 260ms var(--ease) forwards;
}
.frame[data-view="home"]    .view-home    { display: flex; }
.frame[data-view="market"]  .view-market  { display: flex; }
.frame[data-view="chat"]    .view-chat    { display: flex; }
.frame[data-view="myapps"]  .view-myapps  { display: flex; }
.frame[data-view="creator"] .view-creator { display: flex; }
.frame[data-view="academy"] .view-academy { display: flex; }
/* v3.0 — new views */
.frame[data-view="plaza"]           .view-plaza           { display: flex; }
.frame[data-view="appDetail"]       .view-app-detail      { display: flex; }
.frame[data-view="creatorProfile"]  .view-creator-profile { display: flex; }
/* v4.0 — new views (workflows / rankings / onboard / dataroom / changelog) */
.frame[data-view="workflows"]   .view-workflows   { display: flex; }
.frame[data-view="rankings"]    .view-rankings    { display: flex; }
.frame[data-view="onboard"]     .view-onboard     { display: flex; }
.frame[data-view="dataroom"]    .view-dataroom    { display: flex; }
.frame[data-view="workflow-case"] .view-workflow-case { display: flex; }
/* v5.4 删 changelog */
/* v5.0 — deep studios (brand / architecture / discovery) */
.frame[data-view="brand-studio"]   .view-brand-studio   { display: flex; }
.frame[data-view="arch-studio"]    .view-arch-studio    { display: flex; }
.frame[data-view="discovery-os"]   .view-discovery-os   { display: flex; }
/* v5.3 — Stage 2 chat views (左 chat + 右选定 artifact) */
.frame[data-view="brand-chat"]      .view-brand-chat      { display: flex; }
.frame[data-view="arch-chat"]       .view-arch-chat       { display: flex; }
.frame[data-view="discovery-chat"]  .view-discovery-chat  { display: flex; }
/* v6.0 — DeepMini + dataflow network + Why now timeline views */
.frame[data-view="deepMini"]        .view-deep-mini       { display: flex; }
.frame[data-view="dataflow"]        .view-dataflow        { display: flex; }
.frame[data-view="whyNow"]          .view-why-now         { display: flex; }
.view-deep-mini, .view-dataflow, .view-why-now {
  flex-direction: column;
  overflow-y: auto;
  background: var(--paper);
  position: relative;
}
/* studios are scrollable single-column */
.view-brand-studio, .view-arch-studio, .view-discovery-os {
  flex-direction: column;
  overflow-y: auto;
  background: var(--paper);
}
.view-brand-studio .bs-view-root,
.view-arch-studio .as-view,
.view-discovery-os .studio-discovery-os {
  flex: 1; min-height: 0; width: 100%;
}
.view-plaza, .view-app-detail, .view-creator-profile {
  flex-direction: column;
  overflow-y: auto;
  padding: 24px 32px;
}
@keyframes viewIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* legacy home-view (existing class) kept for backward compat — used inside view-home */
.home-view { padding: 32px 40px 60px; }

/* ---- Alpha artifact (market intel daily card) ---- */
.al-host {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.al-h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
  display: flex;
  justify-content: space-between;
}
.al-headline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.al-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.al-metric {
  padding: 12px 14px;
  background: var(--bone-2);
  border-radius: 10px;
}
.al-metric .l {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.al-metric .v {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  margin-top: 4px;
  letter-spacing: -0.01em;
}
.al-metric .d {
  font-family: var(--font-mono);
  font-size: 10.5px;
  margin-top: 4px;
}
.al-metric.up .d { color: var(--ok); }
.al-metric.down .d { color: var(--accent); }
.al-bullets {
  display: flex; flex-direction: column; gap: 8px;
}
.al-bullet {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-80);
}
.al-bullet .b-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-40);
  padding-top: 4px;
}

/* ---- Style Mirror artifact (before/after comparison) ---- */
.sm-host {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sm-col {
  background: var(--bone-2);
  border-radius: 10px;
  padding: 14px;
}
.sm-col .lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 6px;
}
.sm-col.is-after {
  background: rgba(17, 165, 116, 0.08);
  border: 1px solid rgba(17, 165, 116, 0.20);
}
.sm-col.is-after .lbl { color: var(--ok); }
.sm-text {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-80);
}
.sm-text.serif {
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Instrument Serif', serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}
.sm-axis-row {
  display: grid;
  grid-template-columns: 90px repeat(3, 1fr);
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
  padding: 6px 0;
  border-top: 1px solid var(--seam);
}
.sm-axis-row:first-of-type { border-top: 0; }
.sm-axis-row .lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--ink-40);
  text-transform: uppercase;
}
.sm-pill {
  font-family: var(--font-ui);
  font-size: 11.5px;
  text-align: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bone-2);
  color: var(--ink-60);
}
.sm-pill.is-match {
  background: var(--ok-soft);
  color: var(--ok);
  font-weight: 600;
}

/* ---- Page Builder artifact (mobile preview frame) ---- */
.pb-host {
  background: var(--paper);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  border: 1px solid var(--seam);
}
.pb-phone {
  width: 210px;
  background: var(--ink);
  border-radius: 24px;
  padding: 8px;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(20,20,26,0.18);
}
.pb-screen {
  background: var(--paper);
  border-radius: 16px;
  aspect-ratio: 9/19;
  overflow: hidden;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.pb-screen::before {
  content: "";
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 4px;
  background: rgba(20,20,26,0.18);
  border-radius: 4px;
}
.pb-block {
  background: var(--bone-2);
  border-radius: 6px;
}
.pb-block.h { height: 32px; margin-top: 16px; background: var(--ink); }
.pb-block.t { height: 12px; }
.pb-block.t.short { width: 60%; }
.pb-block.img { aspect-ratio: 16/9; }
.pb-cta {
  height: 28px;
  background: var(--accent);
  border-radius: 6px;
  margin-top: 4px;
}
.pb-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pb-meta-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
}
.pb-meta-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-60);
}
.pb-meta-stats {
  display: flex; flex-direction: column; gap: 6px;
}
.pb-meta-row {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-60);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--seam);
}
.pb-meta-row strong { color: var(--ink); font-family: var(--font-display); font-style: italic; font-size: 14px; font-weight: 400; }

/* ---- Dossier artifact (company profile card) ---- */
.ds2-host {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ds2-h {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--seam);
}
.ds2-logo {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--moss), #6b8b5f);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
}
.ds2-name {
  flex: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ds2-name small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-40);
  letter-spacing: 0.14em;
  font-style: normal;
  text-transform: uppercase;
  margin-top: 2px;
}
.ds2-meta {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-60);
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.ds2-section h5 {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin: 0 0 8px;
  font-weight: 500;
}
.ds2-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-80);
}
.ds2-text em {
  font-style: italic;
  color: var(--ink);
  font-weight: 600;
}
.ds2-people {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.ds2-person {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px;
  background: var(--bone-2);
  border-radius: 999px;
  font-size: 11.5px;
}
.ds2-person .av {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bone);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11px;
}
.ds2-person strong { font-weight: 600; color: var(--ink); }
.ds2-person em { color: var(--ink-60); font-style: normal; font-size: 11px; margin-left: 4px; }

/* ---- Generic placeholder artifact ---- */
.ph-host {
  background: var(--paper);
  border: 1px dashed var(--seam);
  border-radius: 14px;
  padding: 36px 28px;
  text-align: center;
  color: var(--ink-60);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.ph-host .ph-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
}
.ph-host .ph-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ph-host .ph-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ph-host .ph-desc {
  font-size: 13px;
  line-height: 1.55;
  max-width: 320px;
}
.ph-host .ph-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  margin-top: 4px;
}

/* ============================================================
   COMMAND PALETTE (Cmd+K)
   ============================================================ */
.cmdk-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 26, 0.32);
  backdrop-filter: blur(6px);
  z-index: 999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  animation: fadeIn 180ms var(--ease);
}
.cmdk-backdrop.is-open { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.cmdk {
  width: min(560px, 90vw);
  background: var(--paper);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20,20,26,0.04), 0 32px 80px rgba(20,20,26,0.32);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--seam);
  animation: slideUp 240ms var(--ease);
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.cmdk-input-wrap {
  padding: 14px 18px;
  border-bottom: 1px solid var(--seam);
  display: flex;
  gap: 10px;
  align-items: center;
}
.cmdk-input-wrap svg {
  width: 14px; height: 14px;                          /* L9: match sidebar's search icon size */
  color: var(--ink-40);
}
.cmdk-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--ink);
  padding: 4px 0;
}
.cmdk-input::placeholder { color: var(--ink-40); }
.cmdk-input-wrap .esc {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-40);
  background: var(--bone-2);
  border: 1px solid var(--seam);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.06em;
}
.cmdk-list {
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px 6px 12px;
}
.cmdk-section {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
  padding: 10px 16px 4px;
}
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 100ms var(--ease);
}
.cmdk-item:hover, .cmdk-item.is-focused {
  background: var(--row-hover);
}
.cmdk-item .im-avatar {
  width: 28px; height: 28px;
  font-size: 14px;
}
.cmdk-item .ci-name {
  flex: 1;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.cmdk-item .ci-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-40);
  letter-spacing: 0.06em;
}

/* ============================================================
   ARTIFACT SPEC + MEMORY tab content
   ============================================================ */
.art-spec-card {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 12px;
  padding: 16px 18px;
}
.art-spec-card .label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 6px;
}
.art-spec-card h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--ink);
}
.art-spec-card .row {
  display: grid;
  grid-template-columns: 80px 1fr;
  padding: 6px 0;
  border-top: 1px solid var(--seam);
  font-size: 12.5px;
  line-height: 1.5;
}
.art-spec-card .row:first-of-type { border-top: 0; }
.art-spec-card .row .k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-40);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 1px;
}
.art-spec-card .row .v { color: var(--ink-80); }

.mem-fact {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 10px;
}
.mem-fact + .mem-fact { margin-top: 6px; }
/* M11: elevate "always" pinned facts at the top */
.mem-fact.is-pinned {
  background: linear-gradient(155deg, var(--bone) 0%, var(--bone-rail) 100%);
  border-color: var(--seam-strong);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.mem-fact.is-pinned .mem-icon {
  width: 28px; height: 28px;
  background: var(--accent);
  color: var(--paper);
  font-size: 13px;
}
.mem-fact.is-pinned .mem-text { font-size: 13.5px; }
.mem-fact.is-pinned .mem-text strong { font-size: 14.5px; font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.mem-fact.is-pinned .mem-time {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
}
.mem-fact .mem-icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--ok-soft);
  color: var(--ok);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}
.mem-fact .mem-text {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-80);
}
.mem-fact .mem-text strong { font-weight: 600; color: var(--ink); }
.mem-fact .mem-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-40);
}

/* ============================================================
   RAIL CONTEXT MENU (right-click)
   ============================================================ */
.ctx-menu {
  position: fixed;
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(20,20,26,0.04), 0 12px 32px rgba(20,20,26,0.18);
  padding: 6px;
  min-width: 200px;
  z-index: 200;
  display: none;
  animation: ctxFade 140ms var(--ease);
}
.ctx-menu.is-open { display: block; }
@keyframes ctxFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: background 100ms var(--ease);
}
.ctx-item:hover {
  background: var(--row-hover);
}
.ctx-item.danger { color: var(--accent); }
.ctx-item .ctx-icon {
  width: 14px; height: 14px;
  flex-shrink: 0;
  opacity: 0.65;
}
.ctx-item .ctx-kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-40);
  background: var(--bone-2);
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.ctx-divider {
  height: 1px;
  background: var(--seam);
  margin: 4px 4px;
}

/* "you just sent" message styling — slightly elevated */
.msg.outgoing.just-sent .bubble {
  animation: sentBounce 280ms var(--ease);
}
@keyframes sentBounce {
  0% { transform: scale(0.96); opacity: 0; }
  60% { transform: scale(1.01); opacity: 1; }
  100% { transform: scale(1); }
}

/* ============================================================
   v17 HOME LANDING VIEW (single column, marketing-style)
   ============================================================ */
.view-home {
  overflow-y: auto;
}
.lh {
  max-width: 1100px;                              /* v3.0: wider canvas */
  margin: 0 auto;
  padding: 24px 48px 56px;                        /* v6.16: 屏效比合理化 */
}
@media (max-width: 720px) { .lh { padding: 28px 24px 60px; } }
@media (max-width: 1200px) { .lh { padding: 36px 40px 60px; } }

/* v3.0: App-Dashboard prelude — warmer paper card with subtle gradient + accent rim */
.h-dash {
  margin-bottom: 36px;
  padding: 22px 28px 18px;
  border-radius: 16px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(209,74,36,0.06), transparent 70%),
    radial-gradient(80% 60% at 100% 100%, rgba(184,137,58,0.05), transparent 70%),
    var(--paper);
  border: 1px solid var(--seam);
  box-shadow: 0 1px 0 rgba(20,20,26,0.04), 0 12px 30px -8px rgba(20,20,26,0.10);
  position: relative;
  overflow: hidden;
}
.h-dash::before {
  /* warm accent stripe top-left for visual interest */
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 60%;
  background: linear-gradient(180deg, var(--accent), transparent);
  border-radius: 4px 0 0 0;
}
.h-dash-eye {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 18px;
}
.h-dash-eye .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.h-dash-eye .sep { color: var(--ink-30); }
.h-dash-greet {
  font-family: var(--font-display);
  font-size: 28px;                              /* v6.16: 字号合理化 */
  line-height: 1.18;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin: 0 0 18px;
  font-weight: 400;
}
.h-dash-greet em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.h-dash-today {
  background: var(--bone-2);
  border-radius: 12px;
  border: 1px solid var(--seam);
  padding: 4px 14px;
  margin-top: 8px;
}
.h-dash-today.is-wrapper {
  display: flex;
  flex-direction: column;
  background: transparent;
}
.h-td {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  column-gap: 14px;
  align-items: center;
  padding: 14px 6px;
  border-bottom: 1px solid var(--seam);
  cursor: pointer;
  text-decoration: none;
  transition: background 140ms var(--ease);
}
.h-td:last-child { border-bottom: none; }
.h-td:hover { background: var(--ink-03); }
.h-td-av {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.h-td-body { min-width: 0; line-height: 1.35; }
.h-td-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
  letter-spacing: -0.005em;
}
.h-td-preview {
  font-size: 13px;
  color: var(--ink-60);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 540px;
}
.h-td-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.h-td-time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-40);
  letter-spacing: 0.04em;
}
.h-td-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
}
/* v5: 深度版 inline tag */
.h-td-tag-v5 {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 500;
  background: var(--accent);
  color: var(--paper);
  border-radius: 4px;
  vertical-align: middle;
  letter-spacing: 0;
  font-family: var(--font-mono);
  text-transform: none;
}

.lh-hero {
  display: grid;
  gap: 12px;
  margin-bottom: 32px;
}
.lh-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-40);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lh-eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.lh-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  font-weight: 400;
}
.lh-title em {
  font-style: italic;
  color: var(--accent);
}
.lh-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.5;
  color: var(--ink-60);
  max-width: 620px;
}
.lh-cta {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.lh-btn {
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--bone);
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 160ms var(--ease), transform 80ms var(--ease);
}
.lh-btn:hover { background: var(--accent); }
.lh-btn:active { transform: scale(0.98); }
.lh-btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--seam-strong);
}
.lh-btn.ghost:hover { background: var(--row-hover); }

/* Trust strip */
.lh-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 20px 0;
  margin: 32px 0;
  border-top: 1px solid var(--seam);
  border-bottom: 1px solid var(--seam);
}
@media (max-width: 640px) {
  .lh-trust { grid-template-columns: 1fr; gap: 20px; padding: 24px 0; }
}
.lh-trust-cell {
  padding: 0 20px;
  border-left: 1px solid var(--seam);
}
.lh-trust-cell:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 640px) {
  .lh-trust-cell { border-left: 0; padding-left: 0; }
}
.lh-trust-cell .l {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 6px;
}
.lh-trust-cell .v {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lh-trust-cell .v small {
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0;
  color: var(--ink-60);
  display: block;
  margin-top: 3px;
}

/* 4-piece anatomy */
.lh-section-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 32px 0 14px;
}
.lh-section-h h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  font-weight: 400;
}
.lh-section-h .h-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
}

/* v17.5: ChatGPT vs Agora compare (signature production element) */
.lh-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px) { .lh-compare { grid-template-columns: 1fr; } }
.lh-compare-col {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
}
.lh-compare-col.is-them { background: #F4F1EA; }
.lh-compare-col.is-us { border-color: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-soft); }
.lh-compare-h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
  display: flex;
  align-items: center;
  gap: 8px;
}
.lh-compare-col.is-us .lh-compare-h { color: var(--accent); }
.lh-compare-q {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink);
  padding-left: 10px;
  border-left: 2px solid var(--ink-08);
  line-height: 1.4;
}
.lh-compare-col.is-us .lh-compare-q { border-left-color: var(--accent); }
.lh-compare-output {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-60);
  font-family: var(--font-mono);
  flex: 1;
}
.lh-compare-col.is-us .lh-compare-output {
  font-family: var(--font-ui);
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  border-color: var(--accent-soft);
}
.lh-compare-ui {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lh-compare-ui .ui-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  background: var(--accent);
  color: var(--paper);
  padding: 2px 8px;
  border-radius: 999px;
  align-self: flex-start;
}
.lh-compare-ui .ui-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 4px 0 2px;
}
.lh-compare-ui .ui-bars {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  padding: 4px 0 2px;
}
.lh-compare-ui .bar {
  width: 14px;
  border-radius: 2px;
  background: var(--accent);
}
.lh-compare-ui .bar.b1 { height: 10px; background: #D97757; }
.lh-compare-ui .bar.b2 { height: 16px; background: #5C3F2C; }
.lh-compare-ui .bar.b3 { height: 24px; background: #A8B89A; }
.lh-compare-ui .bar.b4 { height: 18px; background: #F5E6D3; border:1px solid var(--seam); }
.lh-compare-ui .bar.b5 { height: 22px; background: #F9F4ED; border:1px solid var(--seam); }
.lh-compare-ui .ui-foot {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--ink-40);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--seam);
}
.lh-compare-verdict {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-60);
  margin-top: 2px;
}
.lh-compare-col.is-us .lh-compare-verdict { color: var(--accent); font-weight: 500; }

.lh-anatomy {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 720px) { .lh-anatomy { grid-template-columns: repeat(2, 1fr); } }
.lh-piece {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 12px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lh-piece .n {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
}
.lh-piece .t {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.lh-piece .d {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-60);
}

/* Featured mini-apps showcase */
.lh-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 880px) { .lh-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .lh-features { grid-template-columns: 1fr; } }
.lh-feature {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 12px;
  padding: 18px 18px 16px;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lh-feature:hover {
  transform: translateY(-2px);
  border-color: var(--ink-08);
  box-shadow: 0 12px 28px -16px rgba(20,20,26,0.18);
}
.lh-feature-h {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lh-feature-avatar {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
}
.lh-feature-name { flex: 1; min-width: 0; }
.lh-feature-name strong {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: block;
}
.lh-feature-name small {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.lh-feature .lh-feature-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-80);
  padding: 8px 10px;
  background: var(--bone-2);
  border-radius: 8px;
  flex: 1;
}

/* Team strip */
.lh-team-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 640px) { .lh-team-row { grid-template-columns: repeat(2, 1fr); } }
.lh-team-cell {
  padding: 14px 16px;
  background: var(--bone-2);
  border-radius: 10px;
}
.lh-team-cell .av {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  margin-bottom: 8px;
}
.lh-team-cell .nm {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lh-team-cell .rl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-top: 2px;
}

/* Pre-Seed strip */
.lh-investor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  background: linear-gradient(135deg, var(--ink) 0%, #1F1F2A 100%);
  color: var(--bone);
  padding: 28px 24px;
  border-radius: 14px;
}
@media (max-width: 640px) { .lh-investor { grid-template-columns: 1fr; gap: 18px; } }
.lh-investor-cell .l {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,241,234,0.55);
  margin-bottom: 6px;
}
.lh-investor-cell .v {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.lh-investor-cell .v sup {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  color: rgba(255, 176, 136, 1);
  margin-left: 2px;
}
.lh-investor-cell .d {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(245,241,234,0.7);
  margin-top: 6px;
}

/* ============================================================
   v17 MARKETPLACE VIEW (single column, search + categorized browse)
   ============================================================ */
.view-market {
  overflow-y: auto;
}
.mk {
  max-width: 1180px;                              /* v3.0: wider */
  margin: 0 auto;
  padding: 40px 48px 80px;
}
@media (max-width: 720px) { .mk { padding: 32px 24px 60px; } }

.mk-hero {
  margin-bottom: 36px;
}
.mk-h-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 10px;
}
.mk-h-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 12px;
  font-weight: 400;
}
.mk-h-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-60);
  margin-bottom: 24px;
  max-width: 640px;
}

/* Demand box - section 1 */
.mk-demand {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(20,20,26,0.02), 0 12px 32px -16px rgba(20,20,26,0.12);
}
.mk-demand-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.mk-demand-h .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.mk-demand-h .ai {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ok);
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mk-demand-h .ai::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
  animation: livePulse 1800ms ease-in-out infinite;
}
.mk-demand-input-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--seam-strong);
  border-radius: 12px;
  padding: 10px 14px;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
  background: var(--paper);
}
.mk-demand-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.mk-demand-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  padding: 4px 0;
}
.mk-demand-input::placeholder { color: var(--ink-40); }
.mk-demand-go {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  background: var(--ink);
  color: var(--bone);
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  text-transform: uppercase;
}
.mk-demand-go:hover { background: var(--accent); }
.mk-demand-hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-40);
  margin-top: 8px;
  letter-spacing: 0.04em;
}
.mk-demand-hint .q-chip {
  display: inline-block;
  padding: 2px 8px;
  background: var(--bone-2);
  border-radius: 999px;
  color: var(--ink-60);
  cursor: pointer;
  margin: 0 4px 4px 0;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-ui);
}
.mk-demand-hint .q-chip:hover { background: var(--row-hover); color: var(--ink); }

/* Recommend stream */
.mk-rec {
  background: var(--bone);
  border: 1px solid var(--seam);
  border-radius: 14px;
  padding: 20px 22px 18px;
  margin-bottom: 40px;
}
.mk-rec-h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 4px;
}
.mk-rec-h .based-on {
  color: var(--ink-80);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
.mk-rec-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mk-rec-item {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 200ms var(--ease), transform 120ms var(--ease);
  text-decoration: none;
  color: var(--ink);
}
.mk-rec-item:hover {
  border-color: var(--ink-08);
  transform: translateX(2px);
}
.mk-rec-item .rk {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--ink-40);
  letter-spacing: -0.01em;
}
.mk-rec-item .rec-body { min-width: 0; }
.mk-rec-item .rec-name {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mk-rec-item .rec-name .av {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
}
.mk-rec-item .rec-why {
  font-size: 12.5px;
  color: var(--ink-60);
  line-height: 1.45;
  margin-top: 2px;
}
.mk-rec-item .rec-score {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: var(--ok-soft);
  color: var(--ok);
  padding: 4px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.mk-rec-item .rec-score.s-mid { background: var(--gold-soft); color: var(--gold); }
.mk-rec-item .rec-score.s-low { background: var(--bone-2); color: var(--ink-60); }
.mk-rec-empty {
  padding: 18px 16px;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-60);
  line-height: 1.5;
}
.mk-rec-empty .e-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  margin-top: 6px;
  display: block;
  cursor: pointer;
}
.mk-rec-empty .e-cta:hover { color: var(--ink); }
.rec-keyword-marker {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 500;
}
.mk-rec-item .rec-arrow {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-40);
}

/* Browse / categories */
.mk-cat-h {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 32px 0 14px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-weight: 400;
}
.mk-cat-h .cn {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.mk-cat-h .ct {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-40);
  margin-left: auto;
}
.mk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 880px) { .mk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .mk-grid { grid-template-columns: 1fr; } }
.mk-card {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 12px;
  padding: 16px 18px 14px;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mk-card:hover {
  transform: translateY(-2px);
  border-color: var(--ink-08);
  box-shadow: 0 8px 24px -16px rgba(20,20,26,0.18);
}
.mk-card-h {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mk-card-h .av {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
}
.mk-card-h .nm {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.mk-card-h .tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.mk-card .desc {
  font-size: 12.5px;
  color: var(--ink-60);
  line-height: 1.5;
}

/* ============================================================
   TOAST (small bottom-center notification)
   ============================================================ */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--bone);
  padding: 10px 16px;
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.3;
  box-shadow: 0 12px 32px rgba(20,20,26,0.32);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease), transform 240ms var(--ease);
  display: flex;
  align-items: center;
  gap: 8px;
}
.toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast .check {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ok);
  display: grid;
  place-items: center;
  color: var(--paper);
  font-size: 10px;
  font-weight: 700;
}

/* L4: preview banner moved to top-right so it doesn't overlap composer */

/* preview banner (for the demo / pre-launch context) — bottom-right so it doesn't block titlebar */
.preview-banner {
  position: fixed;
  bottom: 14px;
  right: 14px;
  background: var(--ink);
  color: var(--bone);
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  box-shadow: 0 8px 22px rgba(20,20,26,0.18);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.is-phone .preview-banner { display: none; }
.preview-banner .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(209, 74, 36, 0.30);
}
.preview-banner a {
  color: #FFB088;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
   v2.1 — My Apps / Creator / Academy view styles
   ============================================================ */

/* shared eyebrow/section helpers across new views */
.ma .eyebrow,
.cv .eyebrow,
.ac .eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ma .eyebrow .dot,
.cv .eyebrow .dot,
.ac .eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* shared big-num strip */
.ma-stats, .cv-stats, .ac-stats {
  display: flex; gap: 36px; flex-wrap: wrap;
}
.ma .bignum, .cv .bignum, .ac .bignum,
.ma-stat {
  display: flex; flex-direction: column; gap: 4px;
}
.ma .bignum > strong, .cv .bignum > strong, .ac .bignum > strong,
.ma-stat > strong {
  font-family: var(--font-display); font-style: normal;
  font-size: 32px; font-weight: 400; letter-spacing: -0.015em;
  color: var(--ink); line-height: 1;
}
.ma .bignum > strong em, .cv .bignum > strong em, .ac .bignum > strong em {
  font-style: italic; color: var(--accent);
}
.ma .bignum > span, .cv .bignum > span, .ac .bignum > span,
.ma-stat > span {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-40);
}

/* shared section heading rhythm */
.ma-sec-h, .cv-sec-h, .ac-sec-h {
  display: flex; align-items: baseline; gap: 12px;
  padding: 32px 0 14px;
  margin-top: 32px;
  border-top: 1px solid var(--seam);
}
.ma-sec-h .num, .cv-sec-h .num, .ac-sec-h .num {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; color: var(--ink-30);
}
.ma-sec-h h2, .cv-sec-h h2, .ac-sec-h h2 {
  font-family: var(--font-display); font-style: italic;
  font-size: 24px; letter-spacing: -0.01em;
  font-weight: 400; color: var(--ink); margin: 0;
}
.ma-sec-h h2 em, .cv-sec-h h2 em, .ac-sec-h h2 em {
  color: var(--accent); font-style: italic;
}
.ma-sec-h .meta, .cv-sec-h .meta, .ac-sec-h .meta {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-40);
}

/* =========== MY APPS view =========== */
.view-myapps { overflow-y: auto; }
.ma {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 48px 96px;
}
.ma-h h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 38px; line-height: 1.1; letter-spacing: -0.018em;
  margin: 16px 0 14px;
}
.ma-h .lede {
  font-size: 15px; color: var(--ink-60); line-height: 1.55;
  max-width: 640px; margin: 0 0 28px;
}
.ma-stats { margin-bottom: 8px; }

.ma-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ma-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 12px;
  padding: 14px;
  border: 1px solid var(--seam);
  border-radius: 12px;
  background: var(--paper);
  transition: border-color 140ms var(--ease), transform 140ms var(--ease);
  cursor: pointer;
  position: relative;
}
.ma-card:hover {
  border-color: var(--ink-08);
  transform: translateY(-1px);
}
.ma-card.is-unread { border-color: var(--accent-soft); }
.ma-card.is-unread::after {
  content: ""; position: absolute; top: 12px; right: 12px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.ma-av {
  grid-row: span 4;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-style: italic;
  font-size: 21px; letter-spacing: -0.02em;
}
.ma-info { min-width: 0; }
.ma-name {
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  margin-bottom: 3px; letter-spacing: -0.003em;
  display: flex; align-items: center; gap: 6px;
}
.ma-pin {
  font-size: 9px; color: var(--accent);
}
.ma-sub {
  font-size: 12.5px; color: var(--ink-60);
  margin-bottom: 8px;
}
.ma-tags { display: flex; gap: 4px; }
.ma-tags span {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-40); background: var(--ink-04);
  padding: 2px 5px; border-radius: 4px;
}
.ma-bar {
  grid-column: 1 / -1;
  height: 3px; background: var(--ink-04);
  border-radius: 2px; overflow: hidden;
  margin-top: 12px;
}
.ma-bar span {
  display: block; height: 100%; background: var(--accent);
  border-radius: 2px;
}
.ma-status {
  grid-column: 1 / -1;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-50); letter-spacing: 0.04em;
  margin-top: 6px;
  display: flex; align-items: center; gap: 6px;
}
.ma-status .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  animation: livePulse 1800ms ease-in-out infinite;
}

/* Requests block */
.ma-requests {
  display: flex; flex-direction: column;
  border: 1px solid var(--seam);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}
.ma-req {
  padding: 16px 18px;
  border-bottom: 1px solid var(--seam);
  cursor: pointer;
  transition: background 140ms var(--ease);
}
.ma-req:last-child { border-bottom: none; }
.ma-req:hover { background: var(--ink-03); }
.ma-req-q {
  font-family: var(--font-display); font-style: italic;
  font-size: 17px; line-height: 1.4; color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 10px;
}
.ma-req-q em { color: var(--ink); font-style: italic; }
.ma-req-meta {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.ma-req-time { color: var(--ink-40); }
.ma-req-status.status-matching { color: var(--iris); }
.ma-req-status.status-pending  { color: var(--gold); }
.ma-req-status.status-shipped  { color: var(--ok); }
.ma-req-new {
  display: flex; align-items: center; gap: 10px;
  background: var(--ink-03);
  font-family: var(--font-ui); font-size: 13.5px;
  color: var(--ink-60);
}
.ma-req-new .ma-plus {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--paper); border: 1px solid var(--seam-strong);
  display: grid; place-items: center; color: var(--ink-80);
  font-size: 16px;
}

/* =========== CREATOR view =========== */
.view-creator { overflow-y: auto; }
.cv {
  max-width: 1280px;                              /* v3.0: wider for chat-builder 2-col layout */
  margin: 0 auto;
  padding: 36px 48px 96px;
}
.cv-hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 44px; line-height: 1.05; letter-spacing: -0.022em;
  margin: 16px 0 16px;
}
.cv-hero h1 em { font-style: italic; color: var(--accent); }
.cv-hero .lede {
  font-size: 15.5px; color: var(--ink-80); line-height: 1.6;
  max-width: 680px; margin: 0 0 28px;
}
.cv-hero .lede strong { color: var(--ink); font-weight: 600; }
.cv-stats { margin-bottom: 24px; }
.cv-cta {
  display: flex; gap: 12px; margin-top: 4px;
}
.cv-btn {
  padding: 12px 20px; border-radius: 10px;
  background: var(--accent); color: var(--paper);
  border: 1px solid var(--accent);
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.cv-btn.ghost {
  background: transparent; color: var(--ink);
  border-color: var(--seam-strong);
}
.cv-btn:hover { transform: translateY(-1px); }

.cv-reasons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.cv-reason {
  padding: 18px 16px 18px;
  border: 1px solid var(--seam);
  border-radius: 12px;
  background: var(--paper);
}
.cv-reason .rn {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; color: var(--accent);
  margin-bottom: 10px;
}
.cv-reason h3 {
  font-family: var(--font-display); font-style: italic;
  font-size: 19px; letter-spacing: -0.01em;
  font-weight: 400; color: var(--ink); margin: 0 0 8px;
}
.cv-reason p {
  font-size: 12.5px; color: var(--ink-60); line-height: 1.55;
  margin: 0;
}

.cv-ladder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.cv-rung {
  padding: 20px 18px;
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--seam);
}
.cv-rung-1 { background: rgba(17, 165, 116, 0.06); border-color: var(--ok-soft); }
.cv-rung-2 { background: rgba(124, 92, 255, 0.05); border-color: var(--iris-soft); }
.cv-rung-3 { background: rgba(184, 137, 58, 0.06); border-color: var(--gold-soft); }
.cv-rung-4 { background: rgba(209, 74, 36, 0.06); border-color: var(--accent-soft); }
.cv-rung .band {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-50);
}
.cv-rung .rate {
  font-family: var(--font-display); font-style: normal;
  font-size: 44px; letter-spacing: -0.022em; line-height: 1;
  color: var(--ink); font-weight: 400;
}
.cv-rung-1 .rate { color: var(--ok); }
.cv-rung-2 .rate { color: var(--iris); }
.cv-rung-3 .rate { color: var(--gold); }
.cv-rung-4 .rate { color: var(--accent); }
.cv-rung .desc {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-60); line-height: 1.5;
  letter-spacing: 0.02em;
}
.cv-rung em { color: var(--accent); font-style: italic; }

/* WIZARD */
.cv-wizard {
  border: 1px solid var(--seam);
  border-radius: 14px;
  background: var(--paper);
  overflow: hidden;
}
.cv-wiz-steps {
  display: flex;
  border-bottom: 1px solid var(--seam);
  background: rgba(20,20,26,0.025);
}
.cv-wiz-step {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 14px 8px;
  font-size: 12.5px;
  color: var(--ink-40);
  position: relative;
  cursor: pointer;
}
.cv-wiz-step .num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ink-04);
  color: var(--ink-40);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  display: grid; place-items: center;
}
.cv-wiz-step .lbl {
  font-family: var(--font-ui); font-size: 12.5px;
  font-weight: 500; letter-spacing: -0.003em;
}
.cv-wiz-step.is-active { color: var(--ink); }
.cv-wiz-step.is-active .num { background: var(--accent); color: var(--paper); }
.cv-wiz-step.is-done .num { background: var(--ok); color: var(--paper); }
.cv-wiz-step.is-done .num::before { content: "✓"; }
.cv-wiz-step.is-done .num > * { display: none; }
.cv-wiz-step + .cv-wiz-step::before {
  content: "";
  position: absolute;
  top: 50%; left: -50%;
  width: 100%; height: 1px;
  background: var(--seam);
  z-index: 0;
}

.cv-wiz-pane {
  display: none;
  grid-template-columns: 1fr 1fr;
  min-height: 380px;
}
.cv-wiz-pane.is-active { display: grid; }
.cv-wiz-pane .cv-wiz-form { padding: 24px 28px; }
.cv-wiz-pane .cv-wiz-form.full { grid-column: 1 / -1; }
.cv-wiz-pane .cv-wiz-preview {
  padding: 24px 28px;
  background: rgba(20,20,26,0.02);
  border-left: 1px solid var(--seam);
}
.cv-wiz-q {
  font-family: var(--font-display); font-style: italic;
  font-size: 18px; letter-spacing: -0.005em;
  color: var(--ink); margin-bottom: 18px;
}
.cv-wiz-preview-h {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; color: var(--ink-40);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.cv-tpls { display: flex; flex-direction: column; gap: 8px; }
.cv-tpl {
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--seam);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.cv-tpl input { display: none; }
.cv-tpl:hover { background: var(--ink-03); }
.cv-tpl.is-active { border-color: var(--accent); background: var(--accent-soft); }
.cv-tpl .ic {
  grid-row: span 2;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-display); font-style: italic; font-size: 16px;
}
.cv-tpl .ttl { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cv-tpl .dsc { font-size: 12px; color: var(--ink-60); }

.cv-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.cv-field label {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-40);
}
.cv-field input, .cv-field select, .cv-field textarea {
  font-family: var(--font-ui); font-size: 13.5px;
  padding: 10px 12px;
  border: 1px solid var(--seam-strong);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.cv-field textarea { resize: vertical; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; }
.cv-field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.cv-val {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--ink); padding: 8px 0;
}

.cv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-chip {
  padding: 4px 10px; border-radius: 999px;
  background: var(--ink-04);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-60); cursor: pointer;
  transition: background 140ms var(--ease);
}
.cv-chip:hover { background: var(--ink-08); }
.cv-chip.is-on { background: var(--accent-soft); color: var(--accent); }

.cv-pricing-opts { display: flex; gap: 8px; }
.cv-popt {
  flex: 1;
  padding: 12px;
  border: 1px solid var(--seam);
  border-radius: 10px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
}
.cv-popt input { display: none; }
.cv-popt.is-active { border-color: var(--accent); background: var(--accent-soft); }
.cv-popt strong { font-size: 14px; color: var(--ink); }
.cv-popt span { font-size: 11.5px; color: var(--ink-60); }

.cv-submit {
  margin-top: 8px;
  padding: 14px 20px;
  background: var(--accent); color: var(--paper);
  border: none; border-radius: 10px;
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  cursor: pointer;
  width: 100%;
}
.cv-submit:hover { transform: translateY(-1px); }

/* preview cards */
.cv-prev-card {
  padding: 18px;
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 12px;
}
.cv-prev-chip {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 3px 7px; border-radius: 4px;
  display: inline-block;
  margin-bottom: 10px;
}
.cv-prev-title {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.cv-prev-anatomy {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px; color: var(--ink-60);
}
.cv-prev-mini { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.cv-prev-av {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-style: italic; font-size: 17px;
}
.cv-prev-meta { display: flex; flex-direction: column; }
.cv-prev-meta strong { font-size: 13.5px; color: var(--ink); }
.cv-prev-meta small {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.10em; color: var(--ink-40);
}
.cv-prev-desc { font-size: 12.5px; color: var(--ink-60); margin-bottom: 8px; }
.cv-prev-stats {
  display: flex; gap: 12px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.08em; color: var(--ink-50);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--seam);
}
.cv-prev-card-final { border-color: var(--accent); }

.cv-rt-list { display: flex; flex-direction: column; gap: 8px; }
.cv-rt {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-80);
}
.cv-rt .dot { width: 7px; height: 7px; border-radius: 50%; }
.cv-rt .dot.ok { background: var(--ok); }
.cv-rt .dot.warn { background: var(--gold); }
.cv-rt-note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--seam);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-40);
}

.cv-sandbox {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 14px;
  margin-top: 8px;
}
.cv-sandbox-chat {
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 10px;
  max-height: 420px; overflow-y: auto;
}
.cv-sandbox-chat .msg { display: flex; gap: 8px; }
.cv-sandbox-chat .msg.user-msg { justify-content: flex-end; }
.cv-sandbox-chat .av {
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-style: italic; font-size: 14px;
}
.cv-sandbox-chat .bub {
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13px; line-height: 1.5;
  max-width: 80%;
}
.cv-sandbox-chat .ai-msg .bub {
  background: var(--paper); border: 1px solid var(--seam);
}
.cv-sandbox-chat .user-msg .bub {
  background: var(--ink); color: var(--paper);
}
.cv-sandbox-artifact .cv-sa-card {
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--gold-soft);
  border-radius: 12px;
}
.cv-sa-chip {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 8px;
}
.cv-sa-title {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; color: var(--ink);
  margin-bottom: 14px;
}
.cv-sa-row {
  display: flex; justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--seam);
  font-size: 13px;
}
.cv-sa-row:last-of-type { border-bottom: none; }
.cv-sa-row span { color: var(--ink-60); }
.cv-sa-row strong { color: var(--ink); font-weight: 600; }
.cv-sa-foot {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--seam);
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-40); letter-spacing: 0.04em;
}

.cv-wiz-nav {
  display: flex; align-items: center;
  padding: 14px 24px;
  background: rgba(20,20,26,0.025);
  border-top: 1px solid var(--seam);
}
.cv-wiz-back, .cv-wiz-next {
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid var(--seam-strong);
  font-family: var(--font-ui); font-size: 13px;
  color: var(--ink); cursor: pointer;
}
.cv-wiz-next {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  margin-left: auto;
}
.cv-wiz-back:hover { background: var(--ink-04); }
.cv-wiz-next:hover { background: #2A2A33; }
.cv-wiz-back:disabled, .cv-wiz-next:disabled { opacity: 0.4; cursor: not-allowed; }
.cv-wiz-progress {
  margin-left: 16px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-40); letter-spacing: 0.08em;
}

/* Dashboard */
.cv-dash {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.cv-dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.cv-kpi {
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.cv-kpi .l {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-40);
}
.cv-kpi strong {
  font-family: var(--font-display); font-style: normal;
  font-size: 28px; letter-spacing: -0.015em;
  font-weight: 400; color: var(--ink);
}
.cv-kpi .d {
  font-size: 11.5px; color: var(--ink-60);
}

.cv-dash-chart {
  padding: 18px;
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 12px;
}
.cv-chart-h {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-40); margin-bottom: 12px;
}
.cv-dash-chart svg {
  width: 100%; height: 160px;
}
.cv-chart-meta {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-40); letter-spacing: 0.06em;
  margin-top: 8px;
}

.cv-dash-list {
  padding: 10px 0;
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 12px;
}
.cv-dash-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-80); line-height: 1.4;
}
.cv-dash-row + .cv-dash-row { border-top: 1px solid var(--seam); }
.cv-dash-row .dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.cv-dash-row .dot.ok { background: var(--ok); }
.cv-dash-row .dot.warn { background: var(--gold); }
.cv-dash-row .dot.star { background: var(--accent); }

/* =========== ACADEMY view =========== */
.view-academy { overflow-y: auto; }
.ac {
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 48px 96px;
}
.ac-hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 42px; line-height: 1.05; letter-spacing: -0.022em;
  margin: 16px 0 16px;
}
.ac-hero h1 em { font-style: italic; color: var(--accent); }
.ac-hero .lede {
  font-size: 15.5px; color: var(--ink-60); line-height: 1.6;
  max-width: 680px; margin: 0 0 28px;
}
.ac-hero .lede strong { color: var(--ink); font-weight: 600; }
.ac-stats { margin-bottom: 16px; }

.ac-tracks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ac-track {
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 14px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 140ms var(--ease), transform 140ms var(--ease);
}
.ac-track:hover { border-color: var(--ink-08); transform: translateY(-1px); }
.ac-track-ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 22px;
  margin-bottom: 4px;
}
.ic-starter { background: var(--ok-soft); color: var(--ok); }
.ic-craft   { background: var(--iris-soft); color: var(--iris); }
.ic-growth  { background: var(--accent-soft); color: var(--accent); }
.ac-track-meta {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; color: var(--ink-40);
}
.ac-track h3 {
  font-family: var(--font-display); font-style: italic;
  font-size: 28px; letter-spacing: -0.015em;
  margin: 0; color: var(--ink); font-weight: 400;
}
.ac-track p {
  font-size: 13.5px; color: var(--ink-60); line-height: 1.55;
  margin: 0; flex: 1;
}
.ac-track-foot {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-40);
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--seam);
}
.ac-track-foot strong { color: var(--ink); }

.ac-method {
  list-style: none; counter-reset: m;
  padding: 0; margin: 0;
}
.ac-method li {
  counter-increment: m;
  position: relative;
  padding: 24px 0 24px 60px;
  border-top: 1px solid var(--seam);
}
.ac-method li:last-child { border-bottom: 1px solid var(--seam); }
.ac-method li::before {
  content: counter(m, decimal-leading-zero);
  position: absolute; left: 0; top: 26px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; color: var(--accent);
}
.ac-method h4 {
  font-family: var(--font-display); font-weight: 400;
  font-style: normal;
  font-size: 22px; letter-spacing: -0.012em;
  margin: 0 0 8px;
}
.ac-method h4 em { color: var(--accent); font-style: italic; }
.ac-method p {
  font-size: 14px; color: var(--ink-80); line-height: 1.6;
  margin: 0; max-width: 720px;
}
.ac-method strong { color: var(--ink); font-weight: 600; }

.ac-tpl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ac-tpl {
  padding: 14px;
  border: 1px solid var(--seam);
  border-radius: 10px;
  background: var(--paper);
  display: flex; flex-direction: column; gap: 4px;
}
.ac-tpl strong {
  font-family: var(--font-display); font-style: italic;
  font-size: 17px; letter-spacing: -0.005em;
  color: var(--ink); font-weight: 400;
}
.ac-tpl span {
  font-size: 12px; color: var(--ink-60);
}

@media (max-width: 1100px) {
  .cv-reasons { grid-template-columns: repeat(2, 1fr); }
  .cv-ladder { grid-template-columns: repeat(2, 1fr); }
  .cv-dash-kpis { grid-template-columns: repeat(2, 1fr); }
  .ac-tracks { grid-template-columns: 1fr; }
  .ac-tpl-grid { grid-template-columns: repeat(2, 1fr); }
  .ma-grid { grid-template-columns: repeat(2, 1fr); }
  .cv-wiz-pane { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ma, .cv, .ac { padding: 28px 20px 60px; }
  .ma-h h1, .cv-hero h1, .ac-hero h1 { font-size: 30px; }
  .ma-grid, .cv-reasons, .cv-ladder, .cv-dash-kpis,
  .ac-tracks, .ac-tpl-grid { grid-template-columns: 1fr; }
  .cv-sandbox { grid-template-columns: 1fr; }
}

/* ============================================================
   v2.1 — Marketplace 3-tab styles
   ============================================================ */

/* Hero refinements */
.mk-hero .mk-h-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-40);
}
.mk-hero .mk-h-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.mk-hero .mk-h-title em { color: var(--accent); font-style: italic; }

/* Tab bar */
.mk-tabs {
  display: flex; gap: 4px;
  margin: 12px 0 28px;
  padding: 4px;
  background: var(--ink-04);
  border-radius: 12px;
  width: fit-content;
}
.mk-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border: none; background: transparent; cursor: pointer;
  color: var(--ink-60);
  font-family: var(--font-ui); font-size: 13.5px;
  font-weight: 500; letter-spacing: -0.003em;
  border-radius: 8px;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.mk-tab:hover { color: var(--ink); }
.mk-tab.is-active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(20,20,26,0.06);
}
.mk-tab svg { flex-shrink: 0; }
.mk-tab .tab-meta {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-40);
  margin-left: 4px;
}
.mk-tab.is-active .tab-meta { color: var(--accent); }

.mk-tab-pane { display: none; }
.mk-tab-pane.is-active { display: block; animation: viewIn 200ms var(--ease) forwards; }

/* Chip rail for feed filtering */
.mk-chiprail {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.mk-cr-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.mk-fchip {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--ink-04);
  border: none;
  font-family: var(--font-ui); font-size: 12.5px;
  font-weight: 500; color: var(--ink-60);
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.mk-fchip:hover { background: var(--ink-08); color: var(--ink); }
.mk-fchip.is-active { background: var(--ink); color: var(--paper); }
.mk-fchip .ct {
  font-family: var(--font-mono); font-size: 10px;
  margin-left: 4px; opacity: 0.6;
}
.mk-cr-foryou {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.06em; color: var(--ink-40);
}
.mk-cr-foryou em { color: var(--accent); font-style: normal; }

/* Trending hero carousel */
.mk-trending { margin-bottom: 32px; }
.mk-trending-h {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 12px;
}
.mk-trending-h strong {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--accent);
}
.mk-trending-h span {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-40);
}
.mk-trending-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.mk-hero-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--seam);
  background: var(--paper);
  transition: transform 140ms var(--ease), border-color 140ms var(--ease);
  cursor: pointer;
}
.mk-hero-card:hover { border-color: var(--ink-08); transform: translateY(-2px); }
.mhc-cover {
  aspect-ratio: 16/9;
  padding: 20px;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
.mhc-cover.tint-iris   { background: linear-gradient(155deg, var(--iris-soft), rgba(124,92,255,0.04)); color: var(--iris); }
.mhc-cover.tint-accent { background: linear-gradient(155deg, var(--accent-soft), rgba(209,74,36,0.04)); color: var(--accent); }
.mhc-cover.tint-sea    { background: linear-gradient(155deg, var(--sea-soft), rgba(31,86,115,0.04)); color: var(--sea); }
.mhc-cover-inner {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
}
.mhc-mini {
  position: absolute; top: 0; left: 0;
  width: 32px; height: 32px; border-radius: 10px;
  background: currentColor; color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-display); font-style: italic; font-size: 16px;
  opacity: 0.9;
}
.mhc-h {
  font-family: var(--font-display); font-style: italic;
  font-size: 18px; line-height: 1.3;
  color: var(--ink); letter-spacing: -0.005em;
}
.mhc-foot {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; color: currentColor; opacity: 0.7;
}
.mhc-magcover {
  align-items: center; justify-content: center; text-align: center;
}
.mhc-magbar {
  font-family: var(--font-display); font-style: italic;
  font-size: 24px; color: var(--accent);
  border-bottom: 4px solid var(--accent);
  padding-bottom: 4px; margin-bottom: 12px;
}
.mhc-magtitle {
  font-family: var(--font-display); font-style: italic;
  font-size: 18px; color: var(--ink); line-height: 1.2;
  margin-bottom: 4px;
}
.mhc-magsub {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; color: var(--ink-50);
}
.mhc-architect { justify-content: center; }
.mhc-architect .arc-row {
  display: flex; gap: 6px; margin-bottom: 6px;
}
.mhc-architect .arc-row span {
  flex: 1; height: 12px; background: currentColor; opacity: 0.4; border-radius: 3px;
}
.mhc-architect .arc-row:nth-child(2) span { opacity: 0.6; }
.mhc-architect .arc-row:nth-child(3) span { opacity: 0.3; }
.mhc-meta {
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--paper);
}
.mhc-meta strong {
  font-size: 14.5px; font-weight: 600; color: var(--ink);
}
.mhc-meta small {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.08em; color: var(--ink-40);
}

/* Feed masonry grid */
.mk-feed-grid {
  column-count: 3;
  column-gap: 14px;
  margin-bottom: 32px;
}
@media (max-width: 1100px) { .mk-feed-grid { column-count: 2; } }
@media (max-width: 720px)  { .mk-feed-grid { column-count: 1; } }

.mk-fcard {
  display: block;
  break-inside: avoid;
  margin-bottom: 14px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--seam);
  background: var(--paper);
  cursor: pointer;
  transition: transform 140ms var(--ease), border-color 140ms var(--ease);
}
.mk-fcard:hover { border-color: var(--ink-08); transform: translateY(-2px); }

.mfc-cover {
  position: relative;
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 200px;
}
.h-short .mfc-cover { min-height: 180px; }
.h-mid   .mfc-cover { min-height: 240px; }
.h-tall  .mfc-cover { min-height: 320px; }

.mfc-cover.tint-iris   { background: linear-gradient(155deg, rgba(124,92,255,0.16), rgba(124,92,255,0.04)); color: var(--iris); }
.mfc-cover.tint-accent { background: linear-gradient(155deg, rgba(209,74,36,0.18), rgba(209,74,36,0.04)); color: var(--accent); }
.mfc-cover.tint-sea    { background: linear-gradient(155deg, rgba(31,86,115,0.16), rgba(31,86,115,0.04)); color: var(--sea); }
.mfc-cover.tint-gold   { background: linear-gradient(155deg, rgba(184,137,58,0.16), rgba(184,137,58,0.03)); color: var(--gold); }
.mfc-cover.tint-rose   { background: linear-gradient(155deg, rgba(193,61,95,0.16), rgba(193,61,95,0.03)); color: var(--rose); }
.mfc-cover.tint-moss   { background: linear-gradient(155deg, rgba(74,103,65,0.16), rgba(74,103,65,0.03)); color: var(--moss); }
.mfc-cover.tint-ok     { background: linear-gradient(155deg, rgba(17,165,116,0.14), rgba(17,165,116,0.03)); color: var(--ok); }
.mfc-cover.tint-ink    { background: linear-gradient(155deg, #1a1a22, #2a2a33); color: var(--paper); }

.mfc-chip {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.14em;
  background: var(--paper);
  color: currentColor;
  padding: 3px 7px; border-radius: 5px;
  border: 1px solid var(--seam);
}
.mfc-badge {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.14em;
  background: var(--accent); color: var(--paper);
  padding: 3px 7px; border-radius: 5px;
}
.mfc-badge.editor { background: var(--ink); }
.mfc-cover-body {
  margin-top: 32px;
  display: flex; flex-direction: column; gap: 10px;
}

.mfc-brand {
  font-family: var(--font-display); font-style: italic;
  font-size: 28px; letter-spacing: -0.015em;
  color: var(--ink);
}
.mfc-bars { display: flex; gap: 4px; }
.mfc-bars span {
  flex: 1; height: 18px; border-radius: 3px;
}
.mfc-bars span:nth-child(1) { background: #F5E6D3; }
.mfc-bars span:nth-child(2) { background: #D97757; }
.mfc-bars span:nth-child(3) { background: #3F362B; }
.mfc-bars span:nth-child(4) { background: #A8B89A; }
.mfc-bars span:nth-child(5) { background: #F9F4ED; border: 1px solid var(--seam); }
.mfc-voice {
  font-family: var(--font-display); font-style: italic;
  font-size: 13.5px; color: var(--ink-80);
}

.mfc-bignum {
  font-family: var(--font-display);
  font-size: 56px; letter-spacing: -0.02em;
  color: var(--ink); line-height: 1;
}
.mfc-bignum small {
  font-family: var(--font-mono); font-size: 18px;
  color: var(--ink-40); margin-left: 4px;
}
.mfc-tier {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; color: currentColor;
  font-weight: 600;
}
.mfc-meta-lite {
  font-size: 12.5px; color: var(--ink-60);
  line-height: 1.45;
}

.mfc-orb svg { width: 80px; height: 80px; }

.mfc-deck { display: flex; gap: 6px; align-items: flex-end; height: 80px; }
.mfc-deck .dck {
  flex: 1; background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 4px;
  padding: 6px 4px;
  display: flex; flex-direction: column; gap: 2px;
}
.mfc-deck .dck span { background: currentColor; height: 3px; border-radius: 2px; opacity: 0.5; }

.mfc-writer { font-family: var(--font-display); font-size: 14px; line-height: 1.5; }
.mfc-writer .mfc-wline { display: flex; gap: 4px; flex-wrap: wrap; }
.mfc-writer .ink { color: var(--ink); }
.mfc-writer .ghost { color: var(--ink-30); font-style: italic; }

.mfc-termsheet { font-family: var(--font-mono); }
.mfc-termsheet .ts-line {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; font-size: 11px; color: var(--ink-80);
}
.mfc-termsheet .ts-clause { flex: 1; }
.mfc-termsheet .ts-light { width: 8px; height: 8px; border-radius: 50%; }
.ts-light.ts-red    { background: #DC2626; }
.ts-light.ts-yellow { background: #EAB308; }
.ts-light.ts-green  { background: #10B981; }

.mfc-wander .wn-day {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; color: currentColor;
  margin-bottom: 6px;
}
.mfc-wander .wn-stops {
  font-size: 12.5px; color: var(--ink-80);
  margin-bottom: 10px;
}
.mfc-wander .wn-bar {
  height: 4px; background: var(--ink-04); border-radius: 2px;
}
.mfc-wander .wn-bar span {
  display: block; height: 100%; background: currentColor; border-radius: 2px;
}

.mfc-finmodel { font-family: var(--font-mono); font-size: 11px; }
.mfc-finmodel .fm-row {
  display: flex; justify-content: space-between;
  padding: 4px 0; color: var(--ink-60);
  border-bottom: 1px solid var(--seam);
}
.mfc-finmodel .fm-row:last-child { border-bottom: none; }
.mfc-finmodel .fm-row.hl strong { color: var(--moss); font-size: 13px; }
.mfc-finmodel .fm-row strong { color: var(--ink); }

.mfc-mystic .my-cards {
  display: flex; gap: 8px; justify-content: center;
}
.mfc-mystic .my-card {
  width: 40px; height: 56px;
  background: var(--ink); color: var(--paper);
  border-radius: 6px;
  display: grid; place-items: center;
  font-size: 22px;
}

.mfc-stylemirror .sm-row {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-60); margin-bottom: 6px;
}
.mfc-stylemirror .sm-lbl { width: 50px; letter-spacing: 0.10em; }
.mfc-stylemirror .sm-bar {
  flex: 1; height: 6px;
  background: var(--ink-04); border-radius: 3px;
}
.mfc-stylemirror .sm-bar span {
  display: block; height: 100%; background: currentColor; border-radius: 3px;
}
.mfc-stylemirror .sm-platforms {
  margin-top: 8px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--ink-60);
}

.mfc-discovery .dc-h {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.16em; color: currentColor;
  margin-bottom: 8px;
}
.mfc-discovery .dc-tasks { display: flex; flex-direction: column; gap: 4px; }
.mfc-discovery .dc-task {
  font-size: 12px; color: var(--ink-60);
  font-family: var(--font-mono);
}
.mfc-discovery .dc-task.done { color: var(--ink); }

.mfc-redliner .rl-line {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px;
  padding: 3px 0; color: var(--ink-80);
}
.mfc-redliner .rl-tag {
  padding: 2px 5px; border-radius: 3px; color: var(--paper);
  font-size: 9px; letter-spacing: 0.10em;
}
.rl-tag.rl-high { background: #DC2626; }
.rl-tag.rl-mid  { background: #EAB308; color: var(--ink); }
.rl-tag.rl-low  { background: var(--ink-08); color: var(--ink); }

.mfc-alpha .al-row {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  padding: 4px 0; color: var(--ink-60);
}
.mfc-alpha .al-row strong { color: var(--ink); font-weight: 600; }

.mfc-dossier .ds-h {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; color: currentColor;
  margin-bottom: 8px;
}
.mfc-dossier .ds-stat {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  padding: 3px 0;
  border-bottom: 1px solid var(--seam);
  color: var(--ink-60);
}
.mfc-dossier .ds-stat:last-of-type { border-bottom: none; }
.mfc-dossier .ds-stat strong { color: var(--ink); font-size: 13px; font-weight: 600; }
.mfc-dossier .ds-cite {
  font-family: var(--font-mono); font-size: 9.5px;
  color: var(--ink-40); letter-spacing: 0.06em;
  margin-top: 8px;
}

.mfc-pagebuilder .pb-frame {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 6px;
  overflow: hidden;
}
.mfc-pagebuilder .pb-h {
  background: var(--ink-04);
  font-family: var(--font-mono); font-size: 9px;
  padding: 3px 6px; color: var(--ink-40);
}
.mfc-pagebuilder .pb-hero {
  height: 24px; background: currentColor; opacity: 0.5;
  margin: 6px;
}
.mfc-pagebuilder .pb-row {
  display: flex; gap: 6px; margin: 6px;
}
.mfc-pagebuilder .pb-row span {
  flex: 1; height: 12px; background: var(--ink-08); border-radius: 3px;
}

.mfc-inkpage .ik-h {
  font-family: var(--font-display); font-style: italic;
  font-size: 14px; color: currentColor; margin-bottom: 8px;
}
.mfc-inkpage .ik-row {
  height: 5px; background: var(--paper); opacity: 0.3;
  border-radius: 2px; margin-bottom: 5px;
  width: 100%;
}

.mfc-meta {
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.mfc-meta strong {
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.mfc-meta small {
  font-size: 12px; color: var(--ink-60); line-height: 1.4;
}
.mfc-foot {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; color: var(--ink-40);
  padding-top: 8px;
  border-top: 1px solid var(--seam);
  margin-top: 6px;
}
.mfc-stats { font-weight: 600; color: var(--ink-60); }

.mk-feed-foot {
  text-align: center;
  padding: 20px 0;
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--ink-40); letter-spacing: 0.08em;
}
.mk-load-more {
  background: none; border: none; cursor: pointer;
  color: var(--accent); font-weight: 600;
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* SEARCH tab — Search-help block */
.mk-search-help {
  margin-top: 32px;
  padding: 20px 22px;
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 12px;
}
.mk-search-help .mh-h {
  font-family: var(--font-display); font-style: italic;
  font-size: 19px; color: var(--ink);
  margin-bottom: 6px;
}
.mk-search-help p {
  font-size: 13.5px; color: var(--ink-60); line-height: 1.5;
  margin: 0;
}
.mk-search-help a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* SHELF tab */
.mk-shelf-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px; flex-wrap: wrap;
}
.mk-shelf-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.mk-shelf-actions {
  display: flex; align-items: center; gap: 10px;
}
.mk-sort {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--seam-strong);
  border-radius: 8px; padding: 4px 4px 4px 10px;
}
.mk-sort-lbl {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.14em; color: var(--ink-40);
}
.mk-sort-sel {
  border: none; background: transparent;
  font-family: var(--font-ui); font-size: 12.5px;
  color: var(--ink); cursor: pointer;
  padding: 4px 4px;
}
.mk-filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--seam-strong);
  background: var(--paper);
  border-radius: 8px;
  font-family: var(--font-ui); font-size: 12.5px;
  font-weight: 500; color: var(--ink);
  cursor: pointer;
}
.mk-filter-btn:hover { background: var(--ink-04); }

.mk-shelf-block { margin-bottom: 28px; }
.mk-shelf-h {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 12px;
}
.mk-shelf-h .num {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.16em; color: var(--accent);
  font-weight: 600;
}
.mk-shelf-h strong {
  font-family: var(--font-display); font-style: italic;
  font-size: 20px; letter-spacing: -0.008em;
  color: var(--ink); font-weight: 400;
}
.mk-shelf-h .meta {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.10em; color: var(--ink-40);
}
.mk-shelf-scroll {
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  margin: 0 -8px;
  padding-left: 8px; padding-right: 8px;
  scrollbar-width: thin;
}
.mk-shelf-scroll::-webkit-scrollbar { height: 6px; }
.mk-shelf-scroll::-webkit-scrollbar-thumb { background: rgba(20,20,26,0.10); border-radius: 4px; }

.mk-scard {
  flex: 0 0 220px;
  scroll-snap-align: start;
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 12px;
  transition: border-color 140ms var(--ease), transform 140ms var(--ease);
  text-decoration: none;
}
.mk-scard:hover { border-color: var(--ink-08); transform: translateY(-2px); }
.mk-scard .av {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-style: italic;
  font-size: 19px; letter-spacing: -0.02em;
}
.mk-scard .info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-scard .info strong {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  letter-spacing: -0.003em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-scard .info small {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.10em; color: var(--ink-40);
}
.mk-scard .info .uses {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-60); margin-top: 4px;
}
.mk-scard .try {
  grid-column: 1 / -1;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.10em; color: var(--accent);
  font-weight: 600;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--seam);
}

@media (max-width: 720px) {
  .mk-trending-row { grid-template-columns: 1fr; }
  .mk-tabs { width: 100%; flex-wrap: wrap; }
  .mk-tab { flex: 1; justify-content: center; padding: 8px 10px; }
  .mk-tab .tab-meta { display: none; }
}

/* ============================================================
   v2.1 — Home view enriched blocks
   ============================================================ */
.lh-bignums {
  display: flex; gap: 36px; flex-wrap: wrap;
  margin: 28px 0 28px;
}
.lh-bn {
  display: flex; flex-direction: column; gap: 4px;
}
.lh-bn strong {
  font-family: var(--font-display); font-style: normal;
  font-size: 32px; letter-spacing: -0.015em;
  color: var(--ink); font-weight: 400; line-height: 1;
}
.lh-bn strong em { font-style: italic; color: var(--accent); }
.lh-bn span {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-40);
}

/* 4-step journey */
.lh-journey {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 8px;
}
.lh-step {
  padding: 22px 20px 18px;
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.lh-step-num {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; color: var(--accent);
  font-weight: 600;
}
.lh-step h3 {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; letter-spacing: -0.01em;
  margin: 0; color: var(--ink); font-weight: 400;
}
.lh-step h3 em { color: var(--accent); font-style: italic; }
.lh-step p {
  font-size: 13px; color: var(--ink-60); line-height: 1.5;
  margin: 0 0 6px;
}
.lh-step-vis {
  margin-top: auto;
  padding-top: 14px;
  min-height: 80px;
  display: flex; align-items: center;
  border-top: 1px solid var(--seam);
}
.lh-vis-discover {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%;
}
.lh-vis-discover > div {
  aspect-ratio: 1/1.2;
  border-radius: 6px;
}
.lh-vis-discover > div:nth-child(1) { background: linear-gradient(155deg, var(--accent), #c43d12); }
.lh-vis-discover > div:nth-child(2) { background: linear-gradient(155deg, var(--iris), #4a2fc7); }
.lh-vis-discover > div:nth-child(3) { background: linear-gradient(155deg, var(--ok), #0a8a66); }
.lh-vis-install {
  display: flex; flex-direction: column; gap: 6px; width: 100%;
}
.lh-vi-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 9px;
  background: var(--ink-04);
  border-radius: 7px;
  font-size: 12px;
}
.lh-vi-row .d {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
}
.lh-vi-row strong {
  flex: 1; color: var(--ink); font-size: 12px; font-weight: 600;
}
.lh-vi-row .m {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.10em; color: var(--ink-40);
}
.lh-vis-use {
  flex-wrap: wrap; gap: 8px;
}
.lh-pill {
  padding: 5px 11px; border-radius: 999px;
  background: var(--ink-04);
  font-size: 11.5px; color: var(--ink-80);
}
.lh-pill.act { background: var(--accent-soft); color: var(--accent); }
.lh-vis-use .arr {
  font-family: var(--font-mono); color: var(--ink-40); font-size: 12px;
}
.lh-vis-keep { gap: 8px; position: relative; }
.lh-cardstk {
  width: 56px; height: 70px; border-radius: 6px;
  background: linear-gradient(155deg, var(--accent), #c43d12);
  transform: rotate(-3deg);
}
.lh-cardstk.c2 {
  background: var(--ink); border: 2px solid var(--rose); transform: rotate(2deg);
}
.lh-cardshare {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.10em; color: var(--ink-40);
}

/* Manifesto excerpt */
.lh-manifesto {
  list-style: none; padding: 0; margin: 0;
  counter-reset: lm;
}
.lh-manifesto li {
  counter-increment: lm;
  position: relative;
  padding: 22px 0 22px 56px;
  border-top: 1px solid var(--seam);
}
.lh-manifesto li:last-child { border-bottom: 1px solid var(--seam); }
.lh-manifesto li::before {
  content: counter(lm, decimal-leading-zero);
  position: absolute; left: 0; top: 24px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; color: var(--accent);
}
.lh-manifesto h4 {
  font-family: var(--font-display); font-style: normal;
  font-weight: 400; font-size: 22px;
  letter-spacing: -0.012em; margin: 0 0 8px;
  color: var(--ink);
}
.lh-manifesto h4 em { color: var(--accent); font-style: italic; }
.lh-manifesto p {
  font-size: 13.5px; color: var(--ink-80); line-height: 1.6;
  margin: 0; max-width: 680px;
}
.lh-manifesto strong { color: var(--ink); font-weight: 600; }
.lh-manifesto em { color: var(--accent); font-style: italic; }

/* Creator economics teaser */
.lh-creator-econ {
  padding: 24px 22px 22px;
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 14px;
}
.lh-econ-lede {
  font-size: 14px; color: var(--ink-80); line-height: 1.55;
  margin: 0 0 18px;
}
.lh-econ-lede strong { color: var(--ink); }
.lh-econ-rungs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: 16px;
}
.lh-rung {
  padding: 14px 12px;
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.lh-rung-1 { background: rgba(17,165,116,0.08); }
.lh-rung-2 { background: rgba(124,92,255,0.08); }
.lh-rung-3 { background: rgba(184,137,58,0.08); }
.lh-rung-4 { background: rgba(209,74,36,0.08); }
.lh-rung .band {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.12em; color: var(--ink-50);
}
.lh-rung .rate {
  font-family: var(--font-display); font-size: 32px;
  letter-spacing: -0.018em; line-height: 1;
  color: var(--ink); font-weight: 400;
}
.lh-rung-1 .rate { color: var(--ok); }
.lh-rung-2 .rate { color: var(--iris); }
.lh-rung-3 .rate { color: var(--gold); }
.lh-rung-4 .rate { color: var(--accent); }
.lh-rung .desc {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-60); letter-spacing: 0.04em;
}
.lh-rung em { font-style: italic; color: var(--accent); }
.lh-econ-cta {
  display: inline-flex; align-items: center;
  text-decoration: none;
}

@media (max-width: 1100px) {
  .lh-journey { grid-template-columns: repeat(2, 1fr); }
  .lh-econ-rungs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .lh-journey, .lh-econ-rungs { grid-template-columns: 1fr; }
  .lh-bignums { gap: 24px; }
}

/* ============================================================
   v2.1 — Phone-mode responsive overrides
   (active when body.is-phone — the 390px frame demo)
   ============================================================ */
body.is-phone .home,
body.is-phone .lh,
body.is-phone .mk,
body.is-phone .ma,
body.is-phone .cv,
body.is-phone .ac {
  padding: 20px 18px 80px;
  max-width: 100%;
}
body.is-phone .h-dash-greet,
body.is-phone .lh-title,
body.is-phone .mk-h-title,
body.is-phone .ma-h h1,
body.is-phone .cv-hero h1,
body.is-phone .ac-hero h1 {
  font-size: 26px;
  line-height: 1.15;
}
body.is-phone .h-dash-eye,
body.is-phone .lh-eyebrow,
body.is-phone .eyebrow {
  font-size: 9.5px;
}
body.is-phone .lh-sub,
body.is-phone .mk-h-sub,
body.is-phone .ma-h .lede,
body.is-phone .cv-hero .lede,
body.is-phone .ac-hero .lede {
  font-size: 13.5px;
  margin-bottom: 18px;
}
body.is-phone .h-td-name { font-size: 13.5px; }
body.is-phone .h-td-preview { font-size: 12px; max-width: 240px; }
body.is-phone .h-td-av { width: 36px; height: 36px; font-size: 17px; }
body.is-phone .h-td { padding: 12px 4px; }
body.is-phone .lh-section-h h2 { font-size: 22px; }
body.is-phone .lh-bignums { gap: 16px; }
body.is-phone .lh-bn strong { font-size: 24px; }
body.is-phone .lh-journey,
body.is-phone .lh-econ-rungs,
body.is-phone .lh-anatomy,
body.is-phone .lh-team-row,
body.is-phone .lh-investor,
body.is-phone .lh-features,
body.is-phone .lh-trust,
body.is-phone .ma-grid,
body.is-phone .ma-stats,
body.is-phone .cv-stats,
body.is-phone .ac-stats,
body.is-phone .cv-reasons,
body.is-phone .cv-ladder,
body.is-phone .cv-dash-kpis,
body.is-phone .ac-tracks,
body.is-phone .ac-tpl-grid,
body.is-phone .mk-trending-row {
  grid-template-columns: 1fr !important;
  flex-direction: column;
  display: grid;
  gap: 10px;
}
body.is-phone .lh-compare { grid-template-columns: 1fr; gap: 10px; }
body.is-phone .mk-feed-grid { column-count: 1; }
body.is-phone .mk-tabs { width: 100%; }
body.is-phone .mk-tab { flex: 1; padding: 8px 8px; font-size: 12px; }
body.is-phone .mk-tab .tab-meta { display: none; }
body.is-phone .cv-wiz-pane { grid-template-columns: 1fr; min-height: 0; }
body.is-phone .cv-sandbox { grid-template-columns: 1fr; }
body.is-phone .mk-shelf-scroll { gap: 8px; padding-bottom: 8px; }
body.is-phone .mk-scard { flex: 0 0 180px; }
body.is-phone .lh-rung .rate { font-size: 24px; }
body.is-phone .lh-manifesto li { padding: 16px 0 16px 40px; }
body.is-phone .lh-manifesto h4 { font-size: 18px; }
body.is-phone .lh-manifesto p { font-size: 13px; }
/* sidebar should not overlap content when closed (drawer off) */
body.is-phone .sb-userstrip { padding: 0 14px; }

/* ============================================================
   v2.2 — Graft from v18: Featured-shelf artifact previews
   + Mine sticky tray + Mobile bottom tabbar
   ============================================================ */

/* Featured shelf thumbnail (lhf-preview): rendered SVG per anatomy */
.lhf-preview {
  height: 84px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  padding: 8px;
  margin: 2px 0 4px;
  border: 1px solid var(--seam);
  overflow: hidden;
  position: relative;
}
.lhf-preview svg {
  width: 88%;
  height: auto;
  max-height: 64px;
  display: block;
}
.lhf-preview.tint-iris   { background: linear-gradient(135deg, var(--iris-soft),   rgba(124,92,255,0.04)); }
.lhf-preview.tint-gold   { background: linear-gradient(135deg, var(--gold-soft),   rgba(184,137,58,0.04)); }
.lhf-preview.tint-accent { background: linear-gradient(135deg, var(--accent-soft), rgba(209,74,36,0.04)); }
.lhf-preview.tint-rose   { background: linear-gradient(135deg, var(--rose-soft),   rgba(193,61,95,0.04)); }
.lhf-preview.tint-sea    { background: linear-gradient(135deg, var(--sea-soft),    rgba(31,86,115,0.04)); }
.lhf-preview.tint-moss   { background: linear-gradient(135deg, var(--moss-soft),   rgba(74,103,65,0.04)); }
.lhf-preview.tint-ok     { background: linear-gradient(135deg, var(--ok-soft),     rgba(17,165,116,0.04)); }
.lhf-preview.tint-ink    { background: linear-gradient(135deg, rgba(20,20,26,0.10), rgba(20,20,26,0.02)); }

/* Mine sticky tray — bottom bar with demand count, fixed bottom of viewport
   Scoped to view-myapps via JS body class so it doesn't appear in other views */
.ma-tray {
  position: fixed;
  /* sits above preview-banner (which is at bottom: 14px ~ ~30px tall) */
  bottom: 58px;
  right: 14px;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 14px 10px 16px;
  border-radius: 999px;
  display: none;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  z-index: 101;
  box-shadow: 0 12px 28px rgba(20,20,26,0.22);
}
body.in-myapps .ma-tray { display: inline-flex; }
.ma-tray .mt-l { display: inline-flex; align-items: center; gap: 8px; }
.ma-tray .mt-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(209,74,36,0.20);
}
.ma-tray .mt-label { color: rgba(255,255,255,0.72); }
.ma-tray .mt-n {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--paper);
}
.ma-tray .mt-go {
  background: rgba(255,255,255,0.10);
  color: var(--paper);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background 140ms var(--ease);
}
.ma-tray .mt-go:hover { background: rgba(255,255,255,0.18); }
.ma-tray.is-flash { animation: trayFlash 1.2s var(--ease); }
@keyframes trayFlash {
  0%   { background: var(--accent); }
  100% { background: var(--ink); }
}

/* Flash on newly inserted demand item in .ma-requests */
.ma-req.is-fresh {
  animation: reqFresh 1.4s var(--ease);
}
@keyframes reqFresh {
  0%   { background: rgba(209,74,36,0.18); transform: translateY(-4px); }
  100% { background: transparent; transform: translateY(0); }
}

/* Mobile bottom tabbar — only on REAL mobile (≤760px), not phone-toggle */
.mobile-tabbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  background: rgba(251,249,244,0.96);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--seam);
  height: 64px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  align-items: center;
  justify-content: space-around;
  gap: 4px;
}
.mtb-item {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink-60);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 0;
  border-radius: 8px;
  position: relative;
  transition: color 140ms var(--ease);
}
.mtb-item svg { width: 22px; height: 22px; }
.mtb-item span { font-size: 10.5px; font-weight: 500; letter-spacing: 0; }
.mtb-item.is-active { color: var(--accent); }
.mtb-item:hover { color: var(--ink); }
.mtb-item .mtb-dot {
  position: absolute;
  top: 4px;
  right: calc(50% - 18px);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  font-size: 0;
}
.mtb-fab {
  flex: 0 0 auto;
  width: 56px;
  margin-top: -22px;
}
.mtb-fab .mtb-fab-inner {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px -2px rgba(209,74,36,0.40);
  font-size: 0;
}
.mtb-fab .mtb-fab-inner svg { width: 22px; height: 22px; color: var(--paper); }
.mtb-fab span { display: none; }
.mtb-fab.is-active .mtb-fab-inner { background: var(--ink); }

@media (max-width: 760px) {
  .mobile-tabbar { display: flex; }
  .frame { padding-bottom: 64px; }
  /* Don't show device-toggle on real mobile — phone is already in phone */
  .device-toggle { display: none !important; }
  /* Hide preview-banner on real mobile so it doesn't collide with tabbar */
  .preview-banner { display: none; }
  /* Make ma-tray sit above tabbar (preview-banner hidden on mobile) */
  .ma-tray { bottom: 78px; right: 14px; }
}

/* ============================================================
   v3.0 — Sub-nav (Marketplace 3 sub-tabs + Plaza), ⌘K chip,
   phone-toggle pulse, visitor mode, home "bet" section,
   detail page, intent finder, plaza, creator profile,
   chat-first builder, creator dashboard, share card animations.
   ============================================================ */

/* Sub-nav under Marketplace (in sidebar) */
.sb-subnav {
  display: flex;
  flex-direction: column;
  padding: 2px 0 6px 28px;     /* indent under .nav-row icon */
  gap: 1px;
  border-left: 1px solid var(--seam);
  margin: 0 16px 6px 26px;
}
.nav-subrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--ink-60);
  border-radius: 6px;
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 120ms var(--ease), color 120ms var(--ease);
  position: relative;
}
.nav-subrow .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink-30);
}
.nav-subrow:hover { color: var(--ink); background: var(--ink-04); }
.nav-subrow.is-active { color: var(--accent); }
.nav-subrow.is-active .dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(209,74,36,0.18); }
.nav-subrow .badge.sub-new {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);
}

/* ⌘K chip in titlebar */
.tb-cmdk-chip {
  position: absolute;
  right: 280px;   /* sits left of device-toggle */
  top: 8px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: rgba(20,20,26,0.06);
  border: 1px solid rgba(20,20,26,0.10);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--ink-60);
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.tb-cmdk-chip:hover { background: rgba(20,20,26,0.10); color: var(--ink); }
.tb-cmdk-chip .kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: rgba(255,255,255,0.6);
  padding: 0px 5px;
  border-radius: 4px;
  border: 1px solid rgba(20,20,26,0.10);
}
@media (max-width: 1100px) {
  .tb-cmdk-chip { display: none; }   /* hide on narrow; user can still use keyboard */
}

/* device-toggle pulse + first-time tooltip */
.device-toggle.is-pulse {
  animation: dtPulse 1.6s ease-in-out 3;
  position: relative;
}
@keyframes dtPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(209,74,36,0.30); }
  50%      { box-shadow: 0 0 0 9px rgba(209,74,36,0.00); }
}
.dt-pulse-tip {
  display: none;
  position: absolute;
  top: 30px;
  right: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 6px 10px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 200;
  pointer-events: none;
}
.dt-pulse-tip::before {
  content: '';
  position: absolute;
  top: -4px; right: 14px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid var(--ink);
}
.device-toggle.is-pulse .dt-pulse-tip { display: block; animation: tipFade 4.5s ease-in 1 forwards; }
@keyframes tipFade {
  0% { opacity: 0; transform: translateY(-4px); }
  10% { opacity: 1; transform: translateY(0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-2px); }
}

/* Visitor mode strip (when not Wayne) */
.visitor-strip {
  display: none;
  background: linear-gradient(90deg, rgba(209,74,36,0.06), rgba(209,74,36,0.02));
  border-bottom: 1px solid var(--seam);
  padding: 8px 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-60);
  letter-spacing: 0.02em;
}
body.is-visitor .visitor-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.is-visitor .h-dash-greet .greet-prefix { display: none; }
body.is-visitor .h-dash-greet .greet-name::before { content: "你好，欢迎来到 "; font-style: normal; font-weight: 400; color: var(--ink); }
body.is-visitor .h-dash-greet .greet-name { font-style: normal; }
body.is-visitor .h-dash-greet .greet-name::after { content: " 的 Agora"; font-style: normal; color: var(--ink); }
.visitor-strip .vs-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  margin-right: 6px;
}
.visitor-strip .vs-r { color: var(--ink-40); }

/* Home: "我们押的是什么" bet section (replaces 5-point manifesto) */
.lh-bet {
  padding: 32px 0;
  border-top: 1px solid var(--seam);
  border-bottom: 1px solid var(--seam);
}
.lh-bet-lede {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.32;
  color: var(--ink);
  margin: 0 0 14px 0;
}
.lh-bet-lede em { color: var(--accent); font-style: italic; }
.lh-bet-body {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-80);
  margin: 0;
  max-width: 720px;
}
.lh-bet-body em { font-style: italic; color: var(--accent); }
.lh-bet-body strong { color: var(--ink); }

/* ============ FEED redesign — 5 card formats (Standard / Story / Testimonial / Hero / Collection) ============ */

.mk-feed-v3 {
  column-count: 2;
  column-gap: 20px;
  margin: 16px 0 32px;
}
@media (max-width: 1100px) { .mk-feed-v3 { column-count: 1; } }
.mk-feed-v3 > .ff3 {
  display: block;
  break-inside: avoid;
  margin: 0 0 20px 0;
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.ff3:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(20,20,26,0.10);
  border-color: var(--ink-40);
}

/* Card 1: Standard */
.ff3-standard .ff3-cover {
  height: 168px;
  background: linear-gradient(135deg, var(--bone-2), var(--paper));
  position: relative;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--seam);
}
.ff3-standard .ff3-cover svg { width: 70%; max-height: 130px; }
.ff3-meta { padding: 14px 16px 12px; }
.ff3-h {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  margin-bottom: 6px;
}
.ff3-h-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ff3-av {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
  flex: 0 0 28px;
}
.ff3-av.tint-iris   { background: var(--iris-soft); }
.ff3-av.tint-gold   { background: var(--gold-soft); }
.ff3-av.tint-accent { background: var(--accent-soft); }
.ff3-av.tint-rose   { background: var(--rose-soft); }
.ff3-av.tint-sea    { background: var(--sea-soft); }
.ff3-av.tint-moss   { background: var(--moss-soft); }
.ff3-av.tint-ok     { background: var(--ok-soft); }
.ff3-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
  min-width: 0;
}
.ff3-title small {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--ink-40);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Agora Rating module — the signature pill */
.ff3-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(20,20,26,0.04);
  border: 1px solid var(--seam);
  border-radius: 999px;
  padding: 3px 8px 3px 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--ink-60);
  flex: 0 0 auto;
}
.ff3-rating .grade {
  background: var(--ink);
  color: var(--paper);
  padding: 1.5px 6px;
  border-radius: 999px;
  font-weight: 600;
}
.ff3-rating .grade.is-s   { background: var(--accent); }
.ff3-rating .grade.is-aplus  { background: var(--accent); }
.ff3-rating .grade.is-a   { background: var(--ink); color: var(--paper); }
.ff3-rating .grade.is-bplus  { background: rgba(20,20,26,0.6); }
.ff3-rating .score { color: var(--ink); font-weight: 600; }
.ff3-rating .recommend { color: var(--ink-40); }

.ff3-intro {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-80);
  margin: 4px 0 10px;
}
.ff3-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.ff3-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  background: rgba(20,20,26,0.05);
  border-radius: 999px;
  color: var(--ink-60);
}
.ff3-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px dashed var(--seam);
}
.ff3-usage {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-60);
}
.ff3-usage strong { color: var(--ink); font-weight: 600; }
.ff3-usage .trend {
  display: inline-block;
  color: var(--ok);
  margin-left: 6px;
}
.ff3-cta {
  background: var(--ink);
  color: var(--paper);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-family: var(--font-sans);
  font-weight: 500;
  transition: background 140ms var(--ease);
}
.ff3-cta:hover { background: var(--accent); }

/* Card 2: User Story */
.ff3-story { padding: 16px 18px 14px; }
.ff3-story .ff3-story-h {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-60);
}
.ff3-story-h .av-sm {
  width: 22px; height: 22px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px;
  font-family: var(--font-sans);
}
.ff3-story-h .handle { color: var(--ink); font-weight: 500; }
.ff3-story-h .sep { color: var(--ink-30); }
.ff3-story-headline {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.36;
  color: var(--ink);
  margin: 4px 0 10px;
}
.ff3-story-excerpt {
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink-80);
  margin: 0 0 14px;
  font-style: italic;
}
.ff3-story-attach {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bone-2);
  border: 1px solid var(--seam);
  border-radius: 10px;
}
.ff3-story-attach .att-preview {
  width: 64px; height: 48px;
  border-radius: 6px;
  display: grid; place-items: center;
  background: var(--paper);
  flex: 0 0 64px;
}
.ff3-story-attach .att-preview svg { width: 90%; max-height: 40px; }
.ff3-story-attach .att-meta { flex: 1; min-width: 0; }
.ff3-story-attach .att-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.ff3-story-attach .att-tag { font-family: var(--font-mono); font-size: 10px; color: var(--ink-40); margin-top: 2px; }
.ff3-story-attach .att-cta {
  background: var(--accent);
  color: var(--paper);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  flex: 0 0 auto;
}

/* Card 3: Testimonial Stack */
.ff3-testimony { padding: 16px 18px 12px; }
.ff3-testimony .ff3-app-strip {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.ff3-testimony .ff3-app-strip .av-sm {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-style: italic;
}
.ff3-testimony .ff3-app-strip .app-id {
  flex: 1;
}
.ff3-testimony .ff3-app-strip .app-id .nm { font-size: 14px; font-weight: 600; color: var(--ink); }
.ff3-testimony .ff3-app-strip .app-id .by { font-family: var(--font-mono); font-size: 10px; color: var(--ink-40); margin-top: 2px; }
.ff3-testimony-list {
  display: flex; flex-direction: column;
  gap: 10px;
}
.ff3-testimony-quote {
  display: flex; gap: 10px;
  padding: 10px 12px;
  background: var(--bone-2);
  border-radius: 8px;
}
.ff3-testimony-quote .av-sm {
  width: 24px; height: 24px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px;
  flex: 0 0 24px;
}
.ff3-testimony-quote .q-text {
  flex: 1;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-80);
}
.ff3-testimony-quote .q-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-40);
  margin-top: 4px;
}

/* Card 4: Editor's Pick Hero (spans both columns) */
.ff3-hero { padding: 0; column-span: all; -moz-column-span: all; }
.ff3-hero .ff3-cover {
  height: 280px;
  background: linear-gradient(135deg, var(--ink), #2A2530);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 28px;
  position: relative;
}
.ff3-hero .ff3-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
}
.ff3-hero .ff3-tagline {
  font-family: var(--font-display);
  font-size: 38px;
  font-style: italic;
  line-height: 1.18;
  color: var(--paper);
}
.ff3-hero .ff3-tagline em { font-style: italic; color: var(--accent); }
.ff3-hero .ff3-hero-body {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(245,241,234,0.78);
  max-width: 540px;
  margin-top: 8px;
}
.ff3-hero .ff3-hero-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.ff3-hero .ff3-hero-name {
  font-size: 16px;
  color: var(--paper);
  font-weight: 600;
}
.ff3-hero .ff3-hero-name small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(245,241,234,0.55);
  margin-top: 4px;
}
.ff3-hero .ff3-cta {
  background: var(--accent);
  color: var(--paper);
}

/* Card 5: Collection ("5 apps for...") */
.ff3-collection { padding: 16px 18px 14px; }
.ff3-collection .ff3-col-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.ff3-collection .ff3-col-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  line-height: 1.32;
  color: var(--ink);
  margin: 0 0 12px 0;
}
.ff3-col-list {
  display: flex; flex-direction: column;
  gap: 6px;
  margin: 8px 0 12px;
}
.ff3-col-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 120ms var(--ease);
}
.ff3-col-item:hover { background: var(--bone-2); }
.ff3-col-item .av-sm {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11px;
  flex: 0 0 24px;
}
.ff3-col-item .nm { font-size: 13px; color: var(--ink); flex: 1; }
.ff3-col-item .meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-40); }
.ff3-col-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 8px;
  border-top: 1px dashed var(--seam);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-60);
}

/* ============ Intent Finder (Search sub-tool) ============ */
.intent-finder {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 14px;
  padding: 28px 28px 24px;
  margin: 16px 0 28px;
  position: relative;
}
.intent-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.intent-h .progress {
  display: flex; gap: 8px;
}
.intent-h .progress .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-08);
}
.intent-h .progress .dot.is-active { background: var(--accent); }
.intent-h .progress .dot.is-done { background: var(--ink); }
.intent-h .skip {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-40);
  text-decoration: underline;
  cursor: pointer;
}
.intent-question {
  font-family: var(--font-display);
  font-size: 26px;
  font-style: italic;
  line-height: 1.32;
  color: var(--ink);
  margin: 8px 0 18px;
  text-align: center;
}
.intent-chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
  margin-bottom: 8px;
}
.intent-chip {
  background: var(--bone-2);
  border: 1px solid var(--seam);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
  transition: all 140ms var(--ease);
  font-family: var(--font-sans);
  color: var(--ink);
}
.intent-chip:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.intent-chip.is-active {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.intent-result {
  display: none;
  padding-top: 6px;
}
.intent-result.is-active { display: block; animation: fadeUp 320ms var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.intent-result-hero {
  background: linear-gradient(135deg, var(--ink), #2A2530);
  color: var(--paper);
  padding: 22px 24px;
  border-radius: 12px;
  margin-bottom: 16px;
}
.intent-result-hero .ir-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  color: var(--accent);
  text-transform: uppercase;
}
.intent-result-hero .ir-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-style: italic;
  margin: 6px 0 10px;
}
.intent-result-hero .ir-why {
  list-style: none;
  padding: 0; margin: 0 0 16px;
}
.intent-result-hero .ir-why li {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(245,241,234,0.75);
  padding: 2px 0 2px 14px;
  position: relative;
}
.intent-result-hero .ir-why li::before {
  content: '·';
  position: absolute; left: 0; top: 0;
  color: var(--accent);
}
.intent-result-hero .ir-cta {
  background: var(--accent);
  color: var(--paper);
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  display: inline-block;
}
.intent-result-alts {
  display: flex; gap: 12px;
  font-size: 12.5px;
  color: var(--ink-60);
  align-items: center;
}
.intent-result-alts strong { color: var(--ink); font-weight: 500; }
.intent-result-alts .alt {
  padding: 6px 14px;
  background: var(--bone-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms var(--ease);
  color: var(--ink-80);
}
.intent-result-alts .alt:hover { background: var(--accent-soft); }

/* ============ Mini-app Detail Page ============ */
.app-detail {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 0 60px;
}
.ad-breadcrumb {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-40);
  margin-bottom: 18px;
}
.ad-breadcrumb a { color: var(--accent); text-decoration: underline; cursor: pointer; }
.ad-breadcrumb .sep { padding: 0 8px; color: var(--ink-30); }
.ad-hero {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: center;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--seam);
  margin-bottom: 32px;
}
.ad-hero-l .ad-eyebrow {
  display: inline-block;
  padding: 4px 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
}
.ad-hero-l h1 {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1.1;
  font-style: italic;
  margin: 16px 0 12px;
  color: var(--ink);
}
.ad-hero-l h1 em { font-style: italic; color: var(--accent); }
.ad-hero-l .sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-80);
  margin: 0 0 14px;
}
.ad-stats {
  display: flex; gap: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-60);
  margin: 14px 0 20px;
}
.ad-stats strong { color: var(--ink); font-weight: 600; }
.ad-cta-row { display: flex; gap: 10px; }
.ad-cta {
  background: var(--accent);
  color: var(--paper);
  padding: 12px 26px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ad-cta.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink-08);
}
/* v6.3: highlighted "▶ 30s 演示" — accent outline + accent text + pulse dot.
   次强 — 比 ghost 突出, 但不夺走主 CTA "立即运行" 的视觉重心。 */
.ad-cta.ad-cta-demo {
  background: rgba(209,74,36,0.06);
  color: var(--accent);
  border: 1.5px solid var(--accent);
  position: relative;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ad-cta.ad-cta-demo:hover {
  background: var(--accent);
  color: var(--paper);
  transform: translateY(-1px);
}
.ad-cta.ad-cta-demo:hover .ad-cta-dot { background: var(--paper); }
.ad-cta-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(209,74,36,0.5);
  animation: ad-cta-dot-pulse 1.6s infinite;
  margin-right: 2px;
}
@keyframes ad-cta-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(209,74,36,0.55); transform: scale(1); }
  60%  { box-shadow: 0 0 0 8px rgba(209,74,36,0);  transform: scale(1.1); }
  100% { box-shadow: 0 0 0 0 rgba(209,74,36,0);    transform: scale(1); }
}
.ad-hero-r .sample-card {
  background: var(--bone-2);
  border-radius: 14px;
  border: 1px solid var(--seam);
  padding: 18px;
  aspect-ratio: 4/5;
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0 20px 40px -10px rgba(20,20,26,0.18);
}
.ad-hero-r .sample-card svg { width: 80%; max-height: 70%; }
/* v5.10.1: 看示例 按钮点击后, sample-card 闪一下吸引视线 */
.sample-card.is-flash {
  animation: sampleFlash 1.4s var(--ease);
}
@keyframes sampleFlash {
  0%   { box-shadow: 0 20px 40px -10px rgba(20,20,26,0.18), 0 0 0 0 rgba(209,74,36,0); }
  25%  { box-shadow: 0 20px 40px -10px rgba(20,20,26,0.18), 0 0 0 12px rgba(209,74,36,0.18); transform: scale(1.012); }
  60%  { box-shadow: 0 20px 40px -10px rgba(20,20,26,0.18), 0 0 0 6px  rgba(209,74,36,0.08); transform: scale(1.005); }
  100% { box-shadow: 0 20px 40px -10px rgba(20,20,26,0.18), 0 0 0 0   rgba(209,74,36,0); transform: scale(1); }
}
.ad-hero-r .sample-card .corner-mark {
  position: absolute; top: 12px; right: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--ink-40);
}
.ad-section { padding: 28px 0; border-bottom: 1px solid var(--seam); }
.ad-section h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  margin: 0 0 18px;
  color: var(--ink);
}
.ad-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ad-gallery-card {
  background: var(--bone-2);
  border: 1px solid var(--seam);
  border-radius: 10px;
  padding: 14px;
  display: grid; place-items: center;
  min-height: 160px;
}
.ad-gallery-card svg { width: 85%; max-height: 130px; }
.ad-gallery-card .cap {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-60);
  text-align: center;
}
.ad-steps {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ad-step {
  flex: 1;
  min-width: 140px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 10px;
}
.ad-step .n {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 6px;
}
.ad-step .t {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.ad-step .d {
  font-size: 12px;
  color: var(--ink-60);
  margin-top: 4px;
  line-height: 1.5;
}
.ad-step-arrow { color: var(--ink-30); }
.ad-reviews-strip {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--bone-2);
  border-radius: 8px;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-80);
}
.ad-reviews-strip strong { color: var(--ink); font-weight: 600; font-family: var(--font-display); font-style: italic; font-size: 14px; }
.ad-reviews {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.ad-review {
  padding: 14px 16px;
  background: var(--paper);
  border-radius: 10px;
  border: 1px solid var(--seam);
}
.ad-review .q {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-80);
  font-style: italic;
  margin: 0 0 10px;
}
.ad-review .who {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-40);
}
.ad-review .who strong { color: var(--ink); }
.ad-review .stars { color: var(--accent); }
.ad-creator {
  display: flex; gap: 18px;
  padding: 18px;
  background: var(--bone-2);
  border-radius: 10px;
}
.ad-creator .av-big {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  flex: 0 0 64px;
}
.ad-creator .info { flex: 1; }
.ad-creator .info .nm {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.ad-creator .info .bio {
  font-size: 13px;
  color: var(--ink-60);
  margin: 6px 0;
  line-height: 1.55;
}
.ad-creator .info .pf-stats {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-40);
}
.ad-creator .info .pf-stats strong { color: var(--ink); }
.ad-creator .follow {
  background: var(--accent);
  color: var(--paper);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  border: none;
  flex: 0 0 auto;
  height: 32px;
}
.ad-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ad-related-card {
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: all 180ms var(--ease);
}
.ad-related-card:hover {
  transform: translateY(-2px);
  border-color: var(--ink-40);
  box-shadow: 0 8px 20px rgba(20,20,26,0.08);
}
.ad-related-card .av-sm {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-style: italic;
}
.ad-related-card .nm { font-size: 13px; font-weight: 600; color: var(--ink); }
.ad-related-card .tag { font-family: var(--font-mono); font-size: 10px; color: var(--ink-40); margin-top: 2px; }
.ad-faq dt {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 16px;
  cursor: pointer;
}
.ad-faq dt::before { content: '+ '; color: var(--accent); }
.ad-faq dd {
  font-size: 13px;
  color: var(--ink-60);
  margin: 6px 0 0 14px;
  line-height: 1.6;
}
.ad-final {
  text-align: center;
  padding: 36px 0;
}
.ad-final .ad-cta { font-size: 16px; padding: 14px 32px; }

/* ============ Plaza (Creator community feed) ============ */
.plaza {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 0 60px;
}
.plaza-h {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 18px;
}
.plaza-h h1 {
  font-family: var(--font-display);
  font-size: 38px;
  font-style: italic;
  line-height: 1.16;
  margin: 0;
  color: var(--ink);
}
.plaza-h h1 em { color: var(--accent); }
.plaza-h .lede {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-40);
  text-align: right;
}
.plaza-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--seam);
  margin-bottom: 8px;
}
.plaza-tab {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-60);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 140ms var(--ease);
  background: transparent;
  border-top: none; border-left: none; border-right: none;
}
.plaza-tab:hover { color: var(--ink); }
.plaza-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.plaza-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 10px 0 16px;
  font-family: var(--font-mono);
}
.plaza-chip {
  padding: 4px 10px;
  font-size: 10.5px;
  color: var(--ink-60);
  background: var(--bone-2);
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.plaza-chip:hover, .plaza-chip.is-active { color: var(--accent); background: var(--accent-soft); }
.plaza-composer {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 24px;
  display: flex;
  gap: 12px;
}
.plaza-composer .av-sm {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid; place-items: center;
  flex: 0 0 32px;
  font-family: var(--font-display);
  font-style: italic;
}
.plaza-composer .composer-body { flex: 1; }
.plaza-composer textarea {
  width: 100%;
  border: none;
  background: transparent;
  resize: none;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.55;
  padding: 6px 0;
  min-height: 32px;
  outline: none;
}
.plaza-composer .composer-foot {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--seam);
  padding-top: 8px;
  margin-top: 6px;
}
.plaza-composer .composer-foot .chips {
  display: flex; gap: 4px;
}
.plaza-composer .composer-foot .chip-mini {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 7px;
  background: var(--bone-2);
  border-radius: 999px;
  color: var(--ink-60);
  cursor: pointer;
}
.plaza-composer .composer-foot .ship {
  background: var(--ink);
  color: var(--paper);
  font-size: 11.5px;
  padding: 5px 14px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
}
.plaza-post {
  border-bottom: 1px solid var(--seam);
  padding: 18px 0;
  display: flex; gap: 12px;
}
.plaza-post .av-sm {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex: 0 0 32px;
  font-family: var(--font-display);
  font-style: italic;
}
.plaza-post .pp-body { flex: 1; min-width: 0; }
.plaza-post .pp-head {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-40);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.plaza-post .pp-head .nm { color: var(--ink); font-weight: 500; font-family: var(--font-sans); font-size: 12.5px; }
.plaza-post .pp-head .maker-dot {
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
}
.plaza-post .pp-head .chan {
  padding: 1px 7px;
  background: var(--bone-2);
  border-radius: 999px;
  color: var(--ink-60);
  letter-spacing: 0.04em;
}
.plaza-post .pp-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-80);
  margin: 0;
}
.plaza-post .pp-attach {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  margin-top: 10px;
  background: var(--bone-2);
  border-radius: 8px;
  cursor: pointer;
  transition: background 140ms var(--ease);
}
.plaza-post .pp-attach:hover { background: var(--accent-soft); }
.plaza-post .pp-attach .icon {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  flex: 0 0 24px;
}
.plaza-post .pp-attach .label {
  flex: 1;
  font-size: 12.5px;
  color: var(--ink-80);
}
.plaza-post .pp-attach .open-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
}
.plaza-post .pp-react {
  display: flex; gap: 18px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-40);
}
.plaza-post .pp-react .react-item {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
  transition: color 140ms var(--ease);
}
.plaza-post .pp-react .react-item:hover { color: var(--accent); }
.plaza-post.is-milestone {
  border-left: 3px solid var(--accent);
  padding-left: 14px;
}
.plaza-post.is-milestone .pp-milestone-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  background: var(--accent);
  color: var(--paper);
  padding: 1px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* ============ Creator Profile page ============ */
.cprofile { max-width: 900px; margin: 0 auto; padding: 0 0 48px; }
.cp-cover {
  height: 180px;
  background: linear-gradient(135deg, var(--accent-soft), var(--gold-soft));
  margin: 0 0 0 0;
  position: relative;
  border-radius: 10px 10px 0 0;
}
.cp-identity {
  display: flex; align-items: flex-end; gap: 22px;
  padding: 0 24px;
  margin-top: -42px;
  position: relative;
}
.cp-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 40px;
  border: 4px solid var(--paper);
  flex: 0 0 96px;
}
.cp-text { flex: 1; padding-bottom: 8px; }
.cp-text h1 {
  font-family: var(--font-display);
  font-size: 32px;
  font-style: italic;
  margin: 0 0 4px;
  color: var(--ink);
}
.cp-text .handle { font-family: var(--font-mono); font-size: 12px; color: var(--ink-40); }
.cp-text .bio { font-size: 14px; color: var(--ink-60); margin-top: 8px; line-height: 1.5; max-width: 540px; }
.cp-text .elsewhere {
  display: flex; gap: 14px; margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-40);
}
.cp-text .elsewhere a { color: var(--ink-60); }
.cp-follow {
  background: var(--accent);
  color: var(--paper);
  padding: 9px 22px;
  border-radius: 999px;
  font-size: 13px;
  border: none;
  cursor: pointer;
  height: 36px;
  flex: 0 0 auto;
}
.cp-stats {
  display: flex; gap: 24px;
  padding: 18px 24px 12px;
  border-bottom: 1px solid var(--seam);
}
.cp-stat {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-40);
  letter-spacing: 0.04em;
}
.cp-stat strong {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 2px;
}
.cp-tabs {
  display: flex; gap: 4px;
  padding: 6px 16px 0;
  border-bottom: 1px solid var(--seam);
  position: sticky;
  background: var(--paper);
  top: 0;
  z-index: 4;
}
.cp-tab {
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--ink-60);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  background: transparent; border-top: none; border-left: none; border-right: none;
}
.cp-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.cp-section { padding: 24px; }
.cp-section h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-style: italic;
  margin: 0 0 16px;
  color: var(--ink-60);
}
.cp-pinned { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 28px; }
.cp-pin {
  padding: 16px;
  background: var(--bone-2);
  border-radius: 10px;
  cursor: pointer;
  transition: all 180ms var(--ease);
  text-decoration: none;
  color: inherit;
}
.cp-pin:hover { background: var(--accent-soft); transform: translateY(-2px); }
.cp-pin .av-sm {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-style: italic;
}
.cp-pin .nm { font-size: 15px; font-weight: 600; color: var(--ink); }
.cp-pin .tagline { font-size: 12.5px; color: var(--ink-60); margin-top: 4px; line-height: 1.5; }
.cp-pin .meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-40); margin-top: 8px; }

/* Ship cadence heatmap (GitHub-style) */
.cp-heatmap { padding: 14px 0; }
.cp-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(26, 1fr);
  gap: 3px;
  margin-bottom: 8px;
}
.cp-heatmap-cell {
  aspect-ratio: 1;
  background: var(--ink-04);
  border-radius: 2px;
}
.cp-heatmap-cell.l1 { background: rgba(209,74,36,0.15); }
.cp-heatmap-cell.l2 { background: rgba(209,74,36,0.35); }
.cp-heatmap-cell.l3 { background: rgba(209,74,36,0.55); }
.cp-heatmap-cell.l4 { background: rgba(209,74,36,0.85); }
.cp-heatmap-cap {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-40);
  display: flex; justify-content: space-between;
}

/* ============ Chat-first builder (Creator wizard rebuild) ============ */
.cb3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 20px;
  /* v3.0 fix: height: calc(100% - 40px) was ballooning to 2635px in scrollable
     parent. Use fixed cap; inner chat-stream handles its own scroll. */
  margin: 20px 0 36px;
}
@media (max-width: 1100px) { .cb3 { grid-template-columns: 1fr; } }
.cb3-l, .cb3-r {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 580px;
}
.cb3-stream { flex: 1; overflow-y: auto; }
.cb3-preview { flex: 1; overflow-y: auto; }
.cb3-h {
  padding: 14px 18px;
  border-bottom: 1px solid var(--seam);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-40);
  background: var(--bone-2);
  display: flex; align-items: center; justify-content: space-between;
}
.cb3-h strong { color: var(--ink); font-family: var(--font-display); font-style: italic; font-size: 13px; }
.cb3-stream {
  padding: 18px;
  flex: 1;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 14px;
}
.cb3-msg {
  display: flex; gap: 10px;
}
.cb3-msg.is-user { flex-direction: row-reverse; }
.cb3-msg .av {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  flex: 0 0 28px;
}
.cb3-msg.is-user .av { background: var(--accent); }
.cb3-msg .body { background: var(--bone-2); padding: 10px 14px; border-radius: 14px; flex: 1; }
.cb3-msg.is-user .body { background: var(--accent); color: var(--paper); }
.cb3-msg .body .who { font-family: var(--font-mono); font-size: 10px; color: var(--ink-40); margin-bottom: 4px; }
.cb3-msg.is-user .body .who { color: rgba(255,255,255,0.7); }
.cb3-msg .body .text { font-size: 13.5px; line-height: 1.55; }
.cb3-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 10px;
}
.cb3-qa {
  background: var(--paper);
  border: 1px solid var(--seam);
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  cursor: pointer;
  color: var(--ink-80);
  font-family: var(--font-sans);
}
.cb3-qa:hover { background: var(--accent-soft); border-color: var(--accent); }
.cb3-qa.is-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cb3-input {
  display: flex; gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--seam);
}
.cb3-input textarea {
  flex: 1;
  border: 1px solid var(--seam);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  resize: none;
  font-family: var(--font-sans);
  outline: none;
  background: var(--paper);
}
.cb3-input button {
  background: var(--accent);
  color: var(--paper);
  border: none;
  padding: 0 18px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
}

/* Right preview panel */
.cb3-preview {
  padding: 18px;
  flex: 1;
  overflow-y: auto;
}
.cb3-card {
  background: var(--bone-2);
  border-radius: 14px;
  padding: 22px;
  border: 1px dashed var(--ink-30);
  transition: border-color 220ms var(--ease);
}
.cb3-card.is-filled { border-style: solid; border-color: var(--seam); }
.cb3-card .cb-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  color: var(--ink-30);
  margin-bottom: 6px;
}
.cb3-card.is-filled .cb-name { color: var(--ink); }
.cb3-card .cb-tagline { font-size: 13.5px; color: var(--ink-60); margin-bottom: 16px; }
.cb3-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.cb3-field { display: flex; flex-direction: column; gap: 4px; }
.cb3-field label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--ink-40); text-transform: uppercase; }
.cb3-field input, .cb3-field select {
  background: var(--paper);
  border: 1px solid var(--seam);
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  outline: none;
  font-family: var(--font-sans);
}
.cb3-field input:focus, .cb3-field select:focus { border-color: var(--accent); }
.cb3-field input.is-just-edited {
  background: rgba(184,137,58,0.15);
  transition: background 1.8s ease-out;
}
.cb3-steps {
  display: flex; gap: 4px;
  margin-bottom: 14px;
}
.cb3-step {
  flex: 1; height: 4px;
  background: var(--ink-08);
  border-radius: 2px;
}
.cb3-step.is-done { background: var(--accent); }
.cb3-step.is-active { background: var(--ink); }

/* ============ Creator dashboard ============ */
.cdash {
  background: var(--ink);
  color: var(--paper);
  border-radius: 14px;
  padding: 24px;
  margin: 16px 0 24px;
}
.cdash-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.cdash-h .l { display: flex; align-items: center; gap: 10px; color: rgba(245,241,234,0.7); }
.cdash-h .l strong { color: var(--paper); }
.cdash-h .l .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(209,74,36,0.20);
  animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot { 0%, 100% { box-shadow: 0 0 0 4px rgba(209,74,36,0.20); } 50% { box-shadow: 0 0 0 6px rgba(209,74,36,0.05); } }
.cdash-h .r { color: rgba(245,241,234,0.5); }
.cdash-tabs {
  display: inline-flex;
  background: rgba(245,241,234,0.06);
  border-radius: 999px;
  padding: 3px;
}
.cdash-tab {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  color: rgba(245,241,234,0.6);
  background: transparent;
  border: none;
  letter-spacing: 0.04em;
}
.cdash-tab.is-active { background: var(--paper); color: var(--ink); }
.cdash-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  align-items: end;
  padding: 18px 0 22px;
  border-bottom: 1px solid rgba(245,241,234,0.10);
  margin-bottom: 18px;
}
.cdash-hero .big {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 64px;
  line-height: 1.0;
  color: var(--paper);
}
.cdash-hero .big em { color: var(--accent); font-style: italic; }
.cdash-hero .sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(245,241,234,0.5);
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.cdash-spark {
  width: 100%;
  height: 50px;
}
.cdash-spark path { stroke: var(--accent); stroke-width: 2; fill: none; }
.cdash-spark .area { fill: rgba(209,74,36,0.20); }
.cdash-breakdown {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(245,241,234,0.6);
  margin-bottom: 22px;
}
.cdash-breakdown strong { color: var(--paper); }
.cdash-breakdown .sep { color: rgba(245,241,234,0.3); padding: 0 6px; }
.cdash-pulse {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.cdash-pulse-cell {
  padding: 14px;
  background: rgba(245,241,234,0.05);
  border: 1px solid rgba(245,241,234,0.10);
  border-radius: 10px;
}
.cdash-pulse-cell .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(245,241,234,0.5);
  letter-spacing: 0.06em;
}
.cdash-pulse-cell .val {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  color: var(--paper);
  margin: 4px 0;
}
.cdash-pulse-cell .bars {
  display: flex; gap: 3px;
  align-items: flex-end;
  height: 22px;
}
.cdash-pulse-cell .bars span {
  flex: 1;
  background: rgba(209,74,36,0.6);
  border-radius: 1px;
}
.cdash-pulse-cell .delta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  margin-top: 6px;
}
.cdash-pulse-cell .delta.up { color: var(--accent); }
.cdash-pulse-cell .delta.flat { color: rgba(245,241,234,0.5); }
.cdash-apps {
  margin-bottom: 22px;
}
.cdash-apps h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(245,241,234,0.5);
  text-transform: uppercase;
  margin: 0 0 12px;
}
.cdash-app-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(245,241,234,0.04);
  border-radius: 8px;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(245,241,234,0.7);
}
.cdash-app-row .av {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--ink);
}
.cdash-app-row .nm { color: var(--paper); font-family: var(--font-sans); }
.cdash-app-row .earnings { color: var(--accent); font-weight: 600; }
.cdash-next h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(245,241,234,0.5);
  text-transform: uppercase;
  margin: 0 0 10px;
}
.cdash-next-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(245,241,234,0.05);
  border-left: 2px solid var(--accent);
  border-radius: 6px;
  margin-bottom: 6px;
}
.cdash-next-card .msg { font-size: 12.5px; color: rgba(245,241,234,0.85); line-height: 1.45; }
.cdash-next-card .chip-do {
  background: var(--paper);
  color: var(--ink);
  border: none;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}

/* ============ Pricing calculator (graft from v1) ============ */
.pricing-calc {
  background: var(--paper);
  border-radius: 14px;
  border: 1px solid var(--seam);
  padding: 22px 24px;
  margin: 18px 0;
}
.pc-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.pc-h h3 { font-family: var(--font-display); font-style: italic; font-size: 20px; margin: 0; }
.pc-h .meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-40); letter-spacing: 0.04em; }
.pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 760px) { .pc-grid { grid-template-columns: 1fr; } }
.pc-input label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-40);
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}
.pc-input .val-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.pc-input .val {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 34px;
  color: var(--ink);
}
.pc-input .hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-40);
}
.pc-input input[type=range] {
  width: 100%;
  accent-color: var(--accent);
}
.pc-out {
  background: var(--ink);
  color: var(--paper);
  border-radius: 10px;
  padding: 18px 20px;
  position: relative;
}
.pc-out .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(245,241,234,0.55);
  text-transform: uppercase;
}
.pc-out .keep {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 44px;
  line-height: 1.1;
  color: var(--paper);
  margin: 6px 0 4px;
}
.pc-out .keep em { color: var(--accent); }
.pc-out .band {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(209,74,36,0.20);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  border-radius: 999px;
  margin-bottom: 10px;
}
.pc-out .breakdown {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(245,241,234,0.72);
  padding-top: 10px;
  border-top: 1px solid rgba(245,241,234,0.10);
}
.pc-out .breakdown strong { color: var(--paper); font-weight: 500; }

/* ============ Share Card Completion Modal (sheet style) ============ */
.share-sheet-overlay {
  position: fixed; inset: 0;
  background: rgba(20,20,26,0.55);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 500;
  animation: ovFade 280ms var(--ease);
}
@keyframes ovFade { from { opacity: 0; } to { opacity: 1; } }
.share-sheet-overlay.is-open { display: flex; }
.share-sheet {
  background: var(--paper);
  border-radius: 18px 18px 0 0;
  width: 100%;
  max-width: 540px;
  padding: 28px 26px 32px;
  position: relative;
  animation: sheetUp 360ms cubic-bezier(.16,.84,.36,1);
}
@keyframes sheetUp { from { transform: translateY(40%); opacity: 0.7; } to { transform: translateY(0); opacity: 1; } }
.share-sheet-close {
  position: absolute;
  top: 14px; right: 14px;
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--ink-40);
}
.share-sheet-h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-40);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.share-sheet-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 30px;
  color: var(--ink);
  margin: 0 0 14px;
}
.share-sheet-title em { color: var(--accent); }
.share-sheet-stats {
  display: flex; gap: 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-60);
  padding: 10px 0;
  border-top: 1px dashed var(--seam);
  border-bottom: 1px dashed var(--seam);
  margin-bottom: 18px;
}
.share-sheet-stats strong { color: var(--ink); }
.share-sheet-buttons {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
.share-sheet-buttons button {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--seam);
  background: var(--paper);
  cursor: pointer;
  font-size: 12.5px;
  font-family: var(--font-sans);
  color: var(--ink);
}
.share-sheet-buttons button.is-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.share-sheet-buttons button:hover { background: var(--accent-soft); }
.share-sheet-buttons button.is-primary:hover { background: var(--accent); border-color: var(--accent); }

/* Confetti flecks */
.confetti-fleck {
  position: fixed;
  width: 6px; height: 8px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 600;
  animation: confettiFall 1100ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(280px) rotate(720deg); opacity: 0; }
}

/* Toast (for inline confirmations) */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--ink);
  color: var(--paper);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  z-index: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  font-family: var(--font-sans);
  box-shadow: 0 12px 28px rgba(20,20,26,0.22);
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; margin-right: 8px; vertical-align: middle; }

/* ============================================================
   v3.0 — My Apps v3 (rebuilt with user-dashboard pattern)
   + Mobile responsive deep pass
   ============================================================ */
.ma {
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 48px 96px;
}
.ma-h {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px;
  align-items: end;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--seam);
  margin-bottom: 24px;
}
.ma-h-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 14px;
}
.ma-h-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ma-h-title {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.018em;
  margin: 0 0 10px;
  color: var(--ink);
}
.ma-h-title em { color: var(--accent); font-style: italic; }
.ma-h-sub { font-size: 14px; color: var(--ink-60); margin: 0; }
.ma-h-r { display: flex; gap: 18px; }
.ma-h-stat {
  text-align: right;
  padding: 12px 16px;
  background: var(--bone-2);
  border-radius: 10px;
  min-width: 100px;
}
.ma-h-stat .lbl { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-40); letter-spacing: 0.04em; text-transform: uppercase; }
.ma-h-stat .val { font-family: var(--font-display); font-style: italic; font-size: 28px; color: var(--ink); margin-top: 2px; line-height: 1; }

.ma-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--seam);
  margin-bottom: 24px;
  overflow-x: auto;
}
.ma-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-60);
  cursor: pointer;
  white-space: nowrap;
  transition: all 140ms var(--ease);
  font-family: var(--font-sans);
}
.ma-tab:hover { color: var(--ink); }
.ma-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.ma-tab .ct {
  display: inline-block;
  margin-left: 4px;
  background: var(--ink-08);
  color: var(--ink-60);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
}
.ma-tab.is-active .ct { background: var(--accent); color: var(--paper); }
.ma-pane { display: none; }
.ma-pane.is-active { display: block; animation: fadeUp 280ms var(--ease); }

.ma-grid-v3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.ma-grid-v3.is-installed { grid-template-columns: repeat(3, 1fr); }

.ma-card-v3 {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 12px;
  padding: 16px 18px;
  cursor: pointer;
  transition: all 180ms var(--ease);
}
.ma-card-v3:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,20,26,0.08); border-color: var(--ink-40); }
.ma-card-v3.is-unread { border-left: 3px solid var(--accent); }
.ma-card-v3 .mc-h {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.ma-card-v3 .mc-av {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  flex: 0 0 36px;
}
.ma-card-v3 .mc-id { flex: 1; min-width: 0; }
.ma-card-v3 .mc-nm { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.ma-card-v3 .mc-meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-40); letter-spacing: 0.04em; margin-top: 2px; }
.ma-card-v3 .mc-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--accent);
  color: var(--paper);
  padding: 2px 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.ma-card-v3 .mc-preview { font-size: 13px; color: var(--ink-80); line-height: 1.5; margin: 6px 0 10px; }
.ma-card-v3 .mc-bar {
  height: 4px;
  background: var(--ink-04);
  border-radius: 2px;
  overflow: hidden;
  margin: 8px 0 10px;
}
.ma-card-v3 .mc-bar span {
  display: block; height: 100%;
  background: var(--accent);
}
.ma-card-v3 .mc-foot {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  padding-top: 8px;
  border-top: 1px dashed var(--seam);
}
.ma-card-v3 .mc-status { color: var(--ink-60); display: inline-flex; align-items: center; gap: 6px; }
.ma-card-v3 .mc-status .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.ma-card-v3 .mc-go { color: var(--accent); font-weight: 500; }

.ma-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
  font-family: var(--font-mono);
}
.ma-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ma-fchip {
  background: var(--bone-2);
  border: 1px solid var(--seam);
  padding: 4px 10px;
  font-size: 11.5px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-60);
}
.ma-fchip.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ma-fchip .ct { margin-left: 4px; opacity: 0.6; }
.ma-fchip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: inline-block; margin-left: 4px; vertical-align: middle; }
.ma-sort { font-size: 12px; color: var(--ink-40); }
.ma-sort strong { color: var(--ink); font-weight: 500; }

.ma-req-h {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
}
.ma-req-new-btn {
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  cursor: pointer;
  font-family: var(--font-sans);
  flex: 0 0 auto;
  white-space: nowrap;
}
.ma-req-new-btn:hover { background: var(--accent); }

/* ============================================================
   v3.0 — Mobile responsive deep pass (≤760px)
   Adapt all v3 new modules to phone layout
   ============================================================ */
@media (max-width: 760px) {
  /* visitor strip stays compact */
  .visitor-strip { padding: 6px 12px; font-size: 10px; flex-wrap: wrap; }
  .visitor-strip .vs-r { display: none; }

  /* Sidebar drawer behavior — already in place via body classes */

  /* Container paddings */
  .lh, .mk, .cv, .ma { padding: 20px 16px 80px; max-width: 100%; }
  .plaza { padding: 16px 12px 80px; max-width: 100%; }
  .app-detail, .cprofile { padding: 16px 14px 80px; max-width: 100%; }

  /* Home dashboard hero */
  .h-dash { padding: 22px 18px 16px; margin-bottom: 32px; }
  .h-dash::before { display: none; }
  .h-dash-greet { font-size: 30px; }
  .h-dash-eye { font-size: 9.5px; gap: 6px; flex-wrap: wrap; }

  /* My Apps */
  .ma-h { grid-template-columns: 1fr; gap: 18px; }
  .ma-h-title { font-size: 28px; }
  .ma-h-r { gap: 10px; }
  .ma-h-stat { min-width: 0; flex: 1; padding: 10px 12px; }
  .ma-h-stat .val { font-size: 22px; }
  .ma-grid-v3, .ma-grid-v3.is-installed { grid-template-columns: 1fr; gap: 12px; }
  .ma-card-v3 { padding: 14px; }
  .ma-tabs { gap: 0; }
  .ma-tab { padding: 10px 12px; font-size: 13px; }
  .ma-toolbar { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Chat-first Builder: stack columns */
  .cb3 { grid-template-columns: 1fr; gap: 14px; height: auto; }
  .cb3-l, .cb3-r { min-height: 360px; }
  .cb3-preview { padding: 14px; }
  .cb3-fields { grid-template-columns: 1fr; }

  /* Creator dashboard: 1-col + smaller hero */
  .cdash { padding: 18px; }
  .cdash-hero { grid-template-columns: 1fr; gap: 14px; }
  .cdash-hero .big { font-size: 44px; }
  .cdash-pulse { grid-template-columns: 1fr; gap: 10px; }
  .cdash-app-row { grid-template-columns: 28px 1fr; gap: 8px; padding: 10px 12px; }
  .cdash-app-row .earnings, .cdash-app-row span:nth-child(4), .cdash-app-row span:nth-child(5) {
    grid-column: 2;
    font-size: 10.5px;
    color: rgba(245,241,234,0.55);
  }
  .cdash-tabs { padding: 2px; }
  .cdash-tab { font-size: 9.5px; padding: 3px 7px; }

  /* Pricing calc: stack 1-col */
  .pc-grid { grid-template-columns: 1fr; gap: 16px; }
  .pc-input .val { font-size: 26px; }
  .pc-out .keep { font-size: 32px; }

  /* App detail: stack hero + smaller h1 + 1-col gallery + 2-col related */
  .ad-hero { grid-template-columns: 1fr; gap: 16px; }
  .ad-hero-l h1 { font-size: 36px; }
  .ad-hero-r .sample-card { aspect-ratio: 4/3; }
  .ad-gallery { grid-template-columns: 1fr; }
  .ad-reviews, .ad-related-grid { grid-template-columns: 1fr; }
  .ad-steps { flex-direction: column; align-items: stretch; gap: 6px; }
  .ad-step-arrow { display: none; }
  .ad-step { min-width: 0; }
  .ad-creator { flex-direction: column; }

  /* Plaza */
  .plaza-h h1 { font-size: 28px; }
  .plaza-h { flex-direction: column; align-items: flex-start; gap: 6px; }
  .plaza-h .lede { text-align: left; }
  .plaza-composer { padding: 12px; }
  .plaza-post .pp-text { font-size: 13px; }

  /* Creator Profile: stack identity, smaller cover */
  .cp-cover { height: 100px; border-radius: 8px; }
  .cp-identity { flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 14px; margin-top: -30px; }
  .cp-avatar { width: 64px; height: 64px; font-size: 28px; flex: 0 0 64px; }
  .cp-text h1 { font-size: 24px; }
  .cp-stats { gap: 14px; padding: 14px; flex-wrap: wrap; }
  .cp-stat strong { font-size: 18px; }
  .cp-pinned { grid-template-columns: 1fr; }
  .cp-heatmap-grid { grid-template-columns: repeat(26, 8px); overflow-x: auto; }
  .cp-section { padding: 16px 14px; }

  /* Feed v3 — 1 column (already in CSS at 1100px, but reinforce) */
  .mk-feed-v3 { column-count: 1; }
  .ff3-hero .ff3-cover { height: auto; padding: 18px 20px; }
  .ff3-hero .ff3-tagline { font-size: 26px; }

  /* Intent finder: smaller question + tighter chips */
  .intent-finder { padding: 20px 16px 18px; }
  .intent-question { font-size: 20px; }
  .intent-chip { padding: 8px 14px; font-size: 13px; }
  .intent-result-hero .ir-title { font-size: 24px; }

  /* Marketplace hero h1 + tab labels */
  .mk-hero h1 { font-size: 28px; }
  .mk-tab { padding: 8px 10px; font-size: 12px; }
  .mk-tab .tab-meta { display: none; }

  /* For Creators view */
  .cv-hero { padding: 0; }
  .cv-h-title { font-size: 30px; }
  .cv-h-ctas { flex-direction: column; gap: 8px; }
  .cv-btn { width: 100%; text-align: center; }

  /* ⌘K chip + visitor strip don't fit on mobile */
  .tb-cmdk-chip { display: none; }
}

/* ============================================================
   v3.0 — Intermediate breakpoint (760-1100): preserve layout but tighter
   ============================================================ */
@media (max-width: 1100px) and (min-width: 761px) {
  .lh, .mk, .cv, .ma { padding-left: 32px; padding-right: 32px; }
  .h-dash-greet { font-size: 36px; }
  .ad-hero { grid-template-columns: 1fr 240px; gap: 20px; }
  .ad-hero-l h1 { font-size: 44px; }
  .cb3 { grid-template-columns: 1fr 1.1fr; }
  .cdash-hero .big { font-size: 50px; }
  .ff3-hero .ff3-tagline { font-size: 30px; }
}

/* ============================================================
   v4.0 — Bucket 3 / 10. Recently Used (My Apps "最近" tab)
   ============================================================ */
.ma-recent-h {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 16px; gap: 16px;
}
.ma-recent-filter { display: flex; gap: 6px; }
.rf-chip {
  background: none; border: 1px solid var(--ink-12);
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; color: var(--ink-60); cursor: pointer;
  transition: all 160ms;
}
.rf-chip:hover { color: var(--ink); border-color: var(--ink-24); }
.rf-chip.is-active {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.ma-recent-list { display: flex; flex-direction: column; gap: 1px;
  background: var(--ink-08); border-radius: 12px; overflow: hidden;
  border: 1px solid var(--ink-08);
}
.ma-recent-row {
  display: grid; grid-template-columns: 64px 36px 1fr 80px;
  gap: 14px; align-items: center;
  padding: 14px 18px;
  background: var(--paper);
  text-decoration: none; color: var(--ink);
  transition: background 160ms;
  position: relative;
}
.ma-recent-row:hover { background: var(--bone); }
.ma-recent-row.is-active {
  background: linear-gradient(90deg, rgba(209,74,36,0.06), var(--paper) 40%);
}
.ma-recent-row.is-active::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent);
}
.rr-time {
  display: flex; flex-direction: column; align-items: flex-start;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-60); text-transform: uppercase;
  letter-spacing: 0.05em; line-height: 1.3;
}
.rr-time strong { font-size: 13px; color: var(--ink); font-weight: 600; }
.rr-av {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px; color: var(--paper);
}
.rr-body { min-width: 0; }
.rr-nm {
  font-size: 14px; font-weight: 600; color: var(--ink);
  margin-bottom: 3px; display: flex; align-items: center; gap: 8px;
}
.rr-tag {
  font-family: var(--font-mono); font-size: 9.5px;
  padding: 2px 7px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500;
}
.rr-tag-progress { background: rgba(209,74,36,0.12); color: var(--accent); }
.rr-tag-ready    { background: rgba(30,138,94,0.13);  color: var(--ok); }
.rr-tag-done     { background: var(--ink-08); color: var(--ink-60); }
.rr-tag-paused   { background: rgba(212,156,11,0.16); color: #B07E0A; }
.rr-prev {
  font-size: 12.5px; color: var(--ink-60);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 6px;
}
.rr-bar {
  height: 3px; background: var(--ink-08); border-radius: 999px;
  overflow: hidden; max-width: 360px;
}
.rr-bar span {
  display: block; height: 100%; background: var(--accent); border-radius: 999px;
  transition: width 400ms;
}
.rr-go {
  font-size: 12px; color: var(--accent); font-weight: 500;
  text-align: right; white-space: nowrap;
}
@media (max-width: 760px) {
  .ma-recent-h { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ma-recent-row {
    grid-template-columns: 36px 1fr;
    grid-template-areas: "av body" "time time";
    gap: 10px;
  }
  .rr-av { grid-area: av; }
  .rr-body { grid-area: body; }
  .rr-time { grid-area: time; flex-direction: row; gap: 8px; }
  .rr-go { display: none; }
}

/* ============================================================
   v4.0 — Bucket 3 / 11. Notification bell + drawer
   ============================================================ */
.tb-bell {
  position: relative;
  background: none; border: 1px solid var(--ink-12);
  color: var(--ink-60);
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 160ms;
  margin-right: 4px;
}
.tb-bell:hover { color: var(--ink); border-color: var(--ink-24); background: var(--bone); }
.tb-bell-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--accent); color: var(--paper);
  border-radius: 999px;
  font-size: 9.5px; font-weight: 700; line-height: 16px;
  text-align: center;
  border: 2px solid var(--paper);
  transition: opacity 200ms, transform 200ms;
}
.tb-bell-badge.is-empty { opacity: 0; transform: scale(0.5); }
.nx-backdrop {
  position: fixed; inset: 0;
  background: rgba(20,20,26,0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 240ms;
  z-index: 100;
}
.nx-backdrop.is-open { opacity: 1; pointer-events: auto; }
.nx-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 380px; max-width: 100vw;
  background: var(--paper);
  border-left: 1px solid var(--ink-12);
  box-shadow: -16px 0 48px rgba(20,20,26,0.12);
  z-index: 101;
  transform: translateX(110%);
  transition: transform 280ms var(--ease);
  display: flex; flex-direction: column;
}
.nx-drawer.is-open { transform: translateX(0); }
.nx-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--ink-08);
}
.nx-h h3 {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.nx-h-ct {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  background: var(--accent); color: var(--paper);
  padding: 2px 8px; border-radius: 999px;
  font-style: normal;
}
.nx-sub {
  font-size: 11.5px; color: var(--ink-60);
  margin-top: 2px;
}
.nx-h-r { display: flex; align-items: center; gap: 8px; }
.nx-mark-all {
  background: none; border: 1px solid var(--ink-12);
  padding: 5px 10px; border-radius: 6px;
  font-size: 11px; color: var(--ink-60); cursor: pointer;
  transition: all 160ms;
}
.nx-mark-all:hover { color: var(--ink); border-color: var(--ink-24); }
.nx-close {
  background: none; border: none; cursor: pointer;
  color: var(--ink-60);
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.nx-close:hover { background: var(--bone); color: var(--ink); }
.nx-tabs {
  display: flex; gap: 4px; padding: 10px 18px;
  border-bottom: 1px solid var(--ink-08);
  overflow-x: auto;
}
.nx-tabs::-webkit-scrollbar { display: none; }
.nx-tab {
  flex-shrink: 0;
  background: none; border: none;
  padding: 6px 10px; border-radius: 6px;
  font-size: 12px; color: var(--ink-60); cursor: pointer;
  white-space: nowrap;
  transition: all 160ms;
}
.nx-tab .ct {
  display: inline-block; margin-left: 4px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-60);
}
.nx-tab:hover { background: var(--bone); color: var(--ink); }
.nx-tab.is-active { background: var(--ink); color: var(--paper); }
.nx-tab.is-active .ct { color: rgba(255,255,255,0.6); }
.nx-list {
  flex: 1; overflow-y: auto;
  padding: 6px 0;
}
.nx-item {
  display: grid; grid-template-columns: 32px 1fr auto;
  gap: 12px;
  padding: 12px 22px;
  text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--ink-04);
  transition: background 160ms;
  cursor: pointer;
  position: relative;
}
.nx-item:hover { background: var(--bone); }
.nx-item.is-unread::before {
  content: ''; position: absolute; left: 10px; top: 18px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.nx-icon {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.nx-i-creator { background: rgba(124,92,255,0.13); color: #6645dd; }
.nx-i-app     { background: rgba(14,165,233,0.13); color: #0369A1; }
.nx-i-social  { background: rgba(17,212,155,0.13); color: var(--ok); }
.nx-i-earn    { background: rgba(209,74,36,0.13); color: var(--accent); }
.nx-i-rank    { background: rgba(212,156,11,0.18); color: #B07E0A; }
.nx-body { min-width: 0; }
.nx-t {
  font-size: 13px; line-height: 1.4; color: var(--ink);
  margin-bottom: 2px;
}
.nx-t em { font-style: italic; color: var(--ink-60); font-weight: normal; }
.nx-m {
  font-size: 11px; color: var(--ink-60);
}
.nx-tag {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 9.5px;
  padding: 2px 6px; border-radius: 4px;
  background: var(--ink-08); color: var(--ink-60);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.nx-tag-new   { background: var(--accent); color: var(--paper); }
.nx-tag-earn  { background: rgba(30,138,94,0.16); color: var(--ok); }
.nx-tag-rank  { background: rgba(212,156,11,0.2); color: #B07E0A; }
.nx-foot {
  padding: 12px 22px;
  border-top: 1px solid var(--ink-08);
  text-align: center;
}
.nx-foot a {
  font-size: 12px; color: var(--accent); text-decoration: none;
  font-weight: 500;
}
.nx-foot a:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .nx-drawer { width: 100vw; }
  .tb-bell { width: 30px; height: 30px; }
}

/* ============================================================
   v4.0 — Bucket 3 / 12. App Detail inline try-it
   ============================================================ */
.ad-try-sec { padding-top: 36px; padding-bottom: 36px; }
.ad-try-lede {
  font-size: 14px; color: var(--ink-60); line-height: 1.55;
  margin-bottom: 16px;
}
.ad-try-lede strong { color: var(--ink); }
.ad-try {
  background: var(--paper);
  border: 1px solid var(--ink-12);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 24px rgba(20,20,26,0.04);
}
.ad-try-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: var(--bone);
  border-bottom: 1px solid var(--ink-08);
}
.ad-try-h-l { display: flex; align-items: center; gap: 12px; }
.ad-try-av {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: var(--paper); font-size: 15px;
}
.ad-try-id { line-height: 1.3; }
.ad-try-nm { font-size: 14px; font-weight: 600; color: var(--ink); }
.ad-try-st {
  font-size: 11px; color: var(--ink-60);
  display: flex; align-items: center; gap: 5px;
}
.ad-try-st .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  animation: nx-pulse 2s infinite;
}
@keyframes nx-pulse {
  0%,100% { opacity: 1; } 50% { opacity: 0.4; }
}
.ad-try-full {
  background: none; border: 1px solid var(--ink-12);
  color: var(--ink); font-size: 12px;
  padding: 6px 12px; border-radius: 7px;
  cursor: pointer; transition: all 160ms;
}
.ad-try-full:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ad-try-stream {
  min-height: 200px; max-height: 360px; overflow-y: auto;
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.ad-try-msg {
  display: flex; gap: 10px; align-items: flex-end;
  max-width: 85%;
}
.ad-try-msg.is-u { align-self: flex-end; flex-direction: row-reverse; }
.ad-try-msg .av {
  width: 26px; height: 26px; border-radius: 6px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: var(--paper); font-size: 11px;
}
.ad-try-msg .av-u { background: var(--ink); color: var(--paper); }
.ad-try-msg .bubble {
  padding: 9px 13px;
  background: var(--bone-2);
  border-radius: 12px;
  font-size: 13.5px; line-height: 1.5; color: var(--ink);
  max-width: 100%;
}
.ad-try-msg.is-u .bubble {
  background: var(--ink); color: var(--paper);
}
.ad-try-msg.is-typing .bubble {
  display: inline-flex; gap: 4px; padding: 12px 14px;
}
.ad-try-msg.is-typing .d {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-60);
  animation: nx-typing 1.4s infinite;
}
.ad-try-msg.is-typing .d:nth-child(2) { animation-delay: 0.2s; }
.ad-try-msg.is-typing .d:nth-child(3) { animation-delay: 0.4s; }
@keyframes nx-typing {
  0%,80%,100% { opacity: 0.2; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}
.ad-try-suggest {
  padding: 0 16px 12px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ad-try-chip {
  background: var(--paper); border: 1px solid var(--ink-12);
  color: var(--ink); font-size: 12px;
  padding: 5px 11px; border-radius: 999px;
  cursor: pointer; transition: all 160ms;
}
.ad-try-chip:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.ad-try-input {
  display: flex; gap: 8px; align-items: center;
  padding: 12px 14px;
  border-top: 1px solid var(--ink-08);
  background: var(--bone);
}
.ad-try-input input {
  flex: 1; background: var(--paper);
  border: 1px solid var(--ink-12);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13.5px; color: var(--ink);
  font-family: inherit;
  outline: none;
}
.ad-try-input input:focus { border-color: var(--accent); }
.ad-try-send {
  width: 34px; height: 34px;
  border-radius: 8px; border: none;
  background: var(--ink); color: var(--paper);
  font-size: 15px; cursor: pointer;
  transition: background 160ms;
}
.ad-try-send:hover { background: var(--accent); }
.ad-try-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px;
  background: var(--ink);
  color: rgba(245,241,234,0.65);
  font-size: 10.5px; font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.ad-try-foot .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ok); display: inline-block; margin-right: 6px;
}
.ad-try-foot strong { color: var(--paper); }
@media (max-width: 760px) {
  .ad-try-h { padding: 12px; }
  .ad-try-full { font-size: 11px; padding: 5px 9px; }
  .ad-try-stream { min-height: 150px; max-height: 280px; padding: 14px 12px; }
}

/* ============================================================
   v4.0 — Bucket 2 / 9. Creator wallet + withdraw modal
   ============================================================ */
.wallet { display: flex; flex-direction: column; gap: 24px; margin-bottom: 32px; }
.wallet-hero {
  background: var(--ink);
  color: var(--paper);
  border-radius: 16px;
  padding: 28px 32px;
  display: grid; grid-template-columns: 1fr 240px;
  gap: 28px; align-items: stretch;
  position: relative; overflow: hidden;
}
.wallet-hero::before {
  content: ''; position: absolute; right: -120px; top: -120px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(209,74,36,0.22), transparent 60%);
  border-radius: 50%; pointer-events: none;
}
.wh-l { position: relative; z-index: 1; }
.wh-eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(245,241,234,0.6);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 14px;
}
.wh-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); animation: nx-pulse 2s infinite;
}
.wh-bal-lbl {
  font-family: var(--font-mono); font-size: 10.5px;
  color: rgba(245,241,234,0.55); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 6px;
}
.wh-bal-big {
  font-family: var(--font-display); font-size: 64px; font-weight: 600;
  line-height: 1; color: var(--paper);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.wh-bal-big em {
  font-style: normal;
}
.wh-bal-sub {
  font-size: 12px; color: rgba(245,241,234,0.65);
}
.wh-mini-row {
  display: flex; gap: 24px; margin-top: 20px;
  border-top: 1px solid rgba(245,241,234,0.12);
  padding-top: 16px;
}
.wh-mini .lbl {
  font-family: var(--font-mono); font-size: 9.5px;
  color: rgba(245,241,234,0.5); text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: 4px;
}
.wh-mini .val {
  font-size: 18px; font-weight: 600; color: var(--paper);
}
.wh-r {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 10px;
  align-items: stretch;
}
.wh-cta {
  background: var(--accent); color: var(--paper);
  border: none; border-radius: 10px;
  padding: 14px 20px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: all 200ms;
  box-shadow: 0 6px 16px rgba(209,74,36,0.35);
}
.wh-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(209,74,36,0.45); }
.wh-r-note {
  font-size: 11px; color: rgba(245,241,234,0.55);
  text-align: center; margin: 0;
}
.wh-spark { display: block; width: 100%; height: 50px; margin-top: 6px; }
.wh-r-meta {
  font-family: var(--font-mono); font-size: 9.5px;
  color: rgba(245,241,234,0.45); text-transform: uppercase;
  letter-spacing: 0.06em; text-align: center; margin: 0;
}
.wallet-bd {
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: 12px;
  padding: 20px 22px;
}
.wallet-bd h4 {
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-60); margin: 0 0 14px;
}
.wb-rows { display: flex; flex-direction: column; gap: 10px; }
.wb-row {
  display: grid; grid-template-columns: 28px 1fr 60px 90px 120px;
  gap: 12px; align-items: center;
  font-size: 13px;
}
.wb-row .av {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: var(--paper); font-size: 12px;
}
.wb-row .nm { color: var(--ink); font-weight: 500; }
.wb-row .ct {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-60);
}
.wb-row .amt {
  font-weight: 600; color: var(--ink); text-align: right;
}
.wb-row .bar {
  height: 6px; background: var(--ink-08); border-radius: 999px; overflow: hidden;
}
.wb-row .bar span {
  display: block; height: 100%; border-radius: 999px;
}
.wallet-tx {
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: 12px;
  padding: 20px 22px;
}
.wt-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.wt-h h4 {
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-60); margin: 0;
}
.wt-filter { display: flex; gap: 4px; }
.wt-fchip {
  background: none; border: 1px solid var(--ink-12);
  font-size: 11px; color: var(--ink-60);
  padding: 4px 10px; border-radius: 999px;
  cursor: pointer; transition: all 160ms;
}
.wt-fchip:hover { color: var(--ink); border-color: var(--ink-24); }
.wt-fchip.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.wt-list { display: flex; flex-direction: column; }
.wt-row {
  display: grid; grid-template-columns: 8px 78px 50px 1fr 100px 90px;
  gap: 12px; align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--ink-08);
  font-size: 13px;
}
.wt-row:last-child { border-bottom: none; }
.wt-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok);
}
.wt-out .wt-dot { background: var(--accent); }
.wt-pending .wt-dot { background: #B07E0A; animation: nx-pulse 1.5s infinite; }
.wt-when { font-family: var(--font-mono); font-size: 11px; color: var(--ink-60); }
.wt-when strong { color: var(--ink); font-size: 12px; }
.wt-typ {
  font-family: var(--font-mono); font-size: 10px;
  background: var(--ink-08); color: var(--ink-60);
  padding: 2px 7px; border-radius: 4px;
  text-align: center;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.wt-out .wt-typ { background: rgba(209,74,36,0.13); color: var(--accent); }
.wt-in .wt-typ { background: rgba(30,138,94,0.13); color: var(--ok); }
.wt-ch { color: var(--ink); font-size: 12.5px; }
.wt-amt {
  font-family: var(--font-mono); font-weight: 600;
  text-align: right; font-size: 13px;
}
.wt-out .wt-amt { color: var(--accent); }
.wt-in .wt-amt { color: var(--ok); }
.wt-st {
  font-size: 11px; text-align: right;
}
.st-done { color: var(--ok); }
.st-pending { color: #B07E0A; }

/* Withdraw modal */
.wmodal-backdrop {
  position: fixed; inset: 0;
  background: rgba(20,20,26,0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 240ms; z-index: 200;
  backdrop-filter: blur(4px);
}
.wmodal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.wmodal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -45%) scale(0.96);
  width: 480px; max-width: calc(100vw - 32px);
  max-height: 88vh; overflow-y: auto;
  background: var(--paper);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(20,20,26,0.4);
  z-index: 201;
  opacity: 0; pointer-events: none;
  transition: all 280ms var(--ease);
}
.wmodal.is-open {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.wm-h {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--ink-08);
}
.wm-eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-60); text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.wm-eyebrow .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.wm-h h3 {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; margin: 0; color: var(--ink);
}
.wm-close {
  background: none; border: none; cursor: pointer;
  color: var(--ink-60);
  width: 30px; height: 30px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wm-close:hover { background: var(--bone); color: var(--ink); }
.wm-step { padding: 22px 24px 24px; }
.wm-bal-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bone); padding: 14px 16px; border-radius: 10px;
  margin-bottom: 18px;
}
.wm-bal-lbl {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-60); letter-spacing: 0.06em;
  text-transform: uppercase; margin-bottom: 2px;
}
.wm-bal-big {
  font-family: var(--font-display); font-style: italic;
  font-size: 28px; color: var(--ink); font-weight: 600;
}
.wm-bal-big em { font-style: normal; color: var(--accent); }
.wm-allin {
  background: var(--ink); color: var(--paper);
  border: none; border-radius: 7px;
  padding: 8px 14px; font-size: 12px;
  cursor: pointer;
}
.wm-allin:hover { background: var(--accent); }
.wm-field { margin-bottom: 18px; }
.wm-field label {
  display: block; font-size: 12px; color: var(--ink-60);
  margin-bottom: 8px;
}
.wm-amt-row {
  display: flex; align-items: center;
  border: 1.5px solid var(--ink-12); border-radius: 10px;
  padding: 0 12px;
  transition: border-color 160ms;
}
.wm-amt-row:focus-within { border-color: var(--accent); }
.wm-amt-prefix {
  font-family: var(--font-display); font-size: 22px;
  color: var(--ink-60); padding-right: 4px;
}
.wm-amt-row input {
  flex: 1; border: none; outline: none;
  background: transparent;
  padding: 12px 0;
  font-family: var(--font-display); font-size: 26px; font-weight: 600;
  color: var(--ink);
}
.wm-quick { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.wm-qchip {
  background: var(--bone); border: 1px solid transparent;
  font-size: 11.5px; color: var(--ink-60);
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
  transition: all 160ms;
}
.wm-qchip:hover { background: var(--paper); border-color: var(--ink-12); color: var(--ink); }
.wm-ch-grid {
  display: grid; gap: 8px;
}
.wm-ch {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--ink-08);
  border-radius: 10px;
  cursor: pointer;
  transition: all 160ms;
}
.wm-ch:hover { border-color: var(--ink-24); background: var(--bone); }
.wm-ch.is-active { border-color: var(--accent); background: rgba(209,74,36,0.05); }
.wm-ch input { display: none; }
.wm-ch-icon { font-size: 20px; line-height: 1; }
.wm-ch-nm { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.wm-ch-sub { font-size: 11.5px; color: var(--ink-60); }
.wm-summary {
  padding: 12px 14px; background: var(--bone);
  border-radius: 8px; font-size: 12.5px; color: var(--ink-60);
  line-height: 1.6;
  margin-bottom: 16px;
}
.wm-summary strong { color: var(--ink); }
.wm-next {
  width: 100%;
  background: var(--accent); color: var(--paper);
  border: none; border-radius: 10px;
  padding: 14px; font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: all 180ms;
}
.wm-next:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(209,74,36,0.4); }
.wm-success {
  text-align: center; padding: 20px 0;
}
.wm-spinner svg { animation: wm-spin 1s linear infinite; }
@keyframes wm-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.wm-check svg { animation: wm-pop 400ms cubic-bezier(0.2, 0.9, 0.3, 1.4); }
@keyframes wm-pop { from { transform: scale(0); } to { transform: scale(1); } }
.wm-success h4 {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; color: var(--ink); margin: 14px 0 4px;
}
.wm-success p {
  font-size: 13px; color: var(--ink-60); margin: 0 0 16px;
}
.wm-receipt {
  text-align: left; background: var(--bone);
  border-radius: 10px; padding: 14px 16px;
  margin-bottom: 16px;
}
.wm-rcpt-row {
  display: flex; justify-content: space-between;
  padding: 6px 0; font-size: 12.5px;
  border-bottom: 1px dashed var(--ink-08);
}
.wm-rcpt-row:last-child { border-bottom: none; }
.wm-rcpt-row span { color: var(--ink-60); }
.wm-rcpt-row strong { color: var(--ink); font-family: var(--font-mono); font-size: 12px; }
.wm-done {
  background: var(--ink); color: var(--paper);
  border: none; border-radius: 10px;
  padding: 12px 28px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.wm-done:hover { background: var(--accent); }

@media (max-width: 760px) {
  .wallet-hero {
    grid-template-columns: 1fr; padding: 22px;
  }
  .wh-bal-big { font-size: 48px; }
  .wb-row {
    grid-template-columns: 24px 1fr 80px;
    grid-template-areas: "av nm amt" "ct ct ct" "bar bar bar";
    gap: 6px;
  }
  .wb-row .av { grid-area: av; }
  .wb-row .nm { grid-area: nm; }
  .wb-row .ct { grid-area: ct; }
  .wb-row .amt { grid-area: amt; }
  .wb-row .bar { grid-area: bar; }
  .wt-row {
    grid-template-columns: 8px 60px 1fr 90px;
    grid-template-areas: "dot when ch amt" ". typ st st";
    row-gap: 4px;
  }
  .wt-dot { grid-area: dot; }
  .wt-when { grid-area: when; }
  .wt-typ { grid-area: typ; justify-self: start; }
  .wt-ch { grid-area: ch; }
  .wt-amt { grid-area: amt; }
  .wt-st { grid-area: st; }
}

/* ============================================================
   v4.0 — Bucket 1 / 3. Workflows (工作台)
   ============================================================ */
.view-workflows { padding: 0; overflow-y: auto; }
.wf { max-width: 1080px; margin: 0 auto; padding: 36px 56px 80px; }
/* v5.10 audit fix M8: hero 紧凑化, 让 "你正在跑的" 上浮首屏 */
.wf-hero { margin-bottom: 24px; }
.wf-h-eye {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-60);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.wf-h-eye .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.wf-h-title {
  font-family: var(--font-display); font-style: italic;
  font-size: 38px; line-height: 1.1; font-weight: 600;
  letter-spacing: -0.022em; color: var(--ink);
  margin: 0 0 10px;
}
.wf-h-title em { font-style: italic; color: var(--accent); }
.wf-h-sub {
  font-size: 14.5px; line-height: 1.55; color: var(--ink-60);
  max-width: 640px; margin: 0;
}
.wf-running {
  background: var(--bone);
  border-radius: 16px; padding: 24px 28px;
  margin-bottom: 40px;
}
.wf-running-h {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 16px;
}
.wf-running-h h3 {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; color: var(--ink); margin: 0;
}
.wf-running-h h3 em { color: var(--accent); }
.wf-running-h span {
  font-size: 12px; color: var(--ink-60);
}
.wf-run-card {
  display: grid; grid-template-columns: 1fr 320px; gap: 24px;
  padding: 18px 20px;
  background: var(--paper);
  border-radius: 12px;
  margin-bottom: 10px;
  text-decoration: none; color: var(--ink);
  transition: transform 180ms, box-shadow 180ms;
  border: 1px solid var(--ink-08);
}
.wf-run-card:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(20,20,26,0.06); }
.wf-run-eye {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink); font-weight: 500;
  margin-bottom: 10px;
}
.wf-run-eye .emoji { font-size: 18px; }
.wf-run-prog {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
}
.wf-run-bar {
  flex: 1; height: 5px; background: var(--ink-08); border-radius: 999px; overflow: hidden;
}
.wf-run-bar span {
  display: block; height: 100%; background: var(--accent); border-radius: 999px;
}
.wf-run-pct {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-60);
  white-space: nowrap;
}
.wf-run-next {
  font-size: 12.5px; color: var(--ink-60);
}
.wf-run-r {
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
  justify-content: center;
}
.wf-run-chain {
  display: flex; align-items: center;
}
.wfc-dot {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-08);
}
.wfc-dot .ic {
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: var(--paper); font-size: 12px;
  filter: grayscale(80%); opacity: 0.5;
}
.wfc-dot.is-done .ic { filter: none; opacity: 1; }
.wfc-dot.is-active {
  background: rgba(209,74,36,0.15);
  box-shadow: 0 0 0 2px var(--accent);
}
.wfc-dot.is-active .ic { filter: none; opacity: 1; }
.wfc-line {
  width: 22px; height: 2px; background: var(--ink-08);
}
.wfc-line.is-done { background: var(--ok); }
.wf-run-go {
  font-size: 12.5px; color: var(--accent); font-weight: 500;
}
.wf-sec-h {
  display: flex; align-items: baseline; gap: 14px;
  margin: 40px 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-08);
}
.wf-sec-h .num {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-60); letter-spacing: 0.06em;
}
.wf-sec-h h2 {
  font-family: var(--font-display); font-style: italic;
  font-size: 28px; color: var(--ink); margin: 0; font-weight: 600;
}
.wf-sec-h h2 em { color: var(--accent); }
.wf-sec-h .meta {
  margin-left: auto; font-size: 12px; color: var(--ink-60);
}
.wf-tpls {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.wf-tpl {
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: 14px;
  padding: 24px;
  display: flex; flex-direction: column;
  transition: all 180ms;
}
.wf-tpl:hover {
  border-color: var(--ink-24);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(20,20,26,0.07);
}
.wf-tpl-h {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 18px;
}
.wf-tpl-emoji {
  font-size: 32px; line-height: 1;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bone); border-radius: 12px;
}
.wf-tpl-id { flex: 1; }
.wf-tpl-id h3 {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; color: var(--ink); margin: 0 0 4px;
}
.wf-tpl-sub {
  font-size: 13px; color: var(--ink-60); margin: 0; line-height: 1.5;
}
.wf-tpl-meta {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-60); background: var(--bone);
  padding: 4px 8px; border-radius: 5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.wf-tpl-steps {
  list-style: none; padding: 0; margin: 0 0 18px;
}
.wf-tpl-steps li {
  display: grid;
  grid-template-columns: 22px 26px 1fr 60px;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--ink-08);
  font-size: 12.5px;
}
.wf-tpl-steps li:last-child { border-bottom: none; }
.s-n {
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 600; color: var(--ink-60);
}
.s-av {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: var(--paper); font-size: 10px;
}
.s-nm { font-weight: 600; color: var(--ink); font-size: 13px; }
.s-d { grid-column: 3; color: var(--ink-60); font-size: 12px; margin-top: 2px; }
.s-est {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-60); text-align: right;
}
.wf-tpl-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-08);
}
.wf-tpl-out {
  font-size: 11.5px; color: var(--ink-60);
  line-height: 1.5;
  flex: 1;
}
.wf-tpl-cta {
  background: var(--ink); color: var(--paper);
  border: none; border-radius: 8px;
  padding: 10px 18px; font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all 180ms;
}
.wf-tpl-cta:hover { background: var(--accent); transform: translateY(-1px); }
.wf-foot {
  margin-top: 32px; padding: 20px; text-align: center;
  background: var(--bone); border-radius: 12px;
}
.wf-foot p { margin: 0; font-size: 13px; color: var(--ink-60); }
.wf-foot a { color: var(--accent); text-decoration: none; font-weight: 500; }
.wf-foot a:hover { text-decoration: underline; }
@media (max-width: 1100px) {
  .wf { padding: 40px 32px 60px; }
  .wf-h-title { font-size: 44px; }
  .wf-tpls { grid-template-columns: 1fr; }
  .wf-run-card { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .wf { padding: 28px 20px 40px; }
  .wf-h-title { font-size: 32px; }
  .wf-tpl-steps li { grid-template-columns: 18px 22px 1fr; }
  .wf-tpl-steps .s-d { grid-column: 1 / -1; }
  .wf-tpl-steps .s-est { display: none; }
}

/* ============================================================
   v4.0 — Bucket 1 / 2. Rankings (排行榜)
   ============================================================ */
.view-rankings { padding: 0; overflow-y: auto; }
.rk { max-width: 980px; margin: 0 auto; padding: 56px 56px 80px; }
.rk-hero { margin-bottom: 32px; }
.rk-h-eye {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-60);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 18px;
}
.rk-h-eye .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.rk-h-title {
  font-family: var(--font-display); font-style: italic;
  font-size: 56px; line-height: 1.05; font-weight: 600;
  letter-spacing: -0.025em; color: var(--ink);
  margin: 0 0 16px;
}
.rk-h-title em { color: var(--accent); }
.rk-h-sub {
  font-size: 15px; line-height: 1.6; color: var(--ink-60);
  margin: 0;
}
.rk-tabs {
  display: flex; gap: 4px;
  background: var(--bone); padding: 4px;
  border-radius: 10px;
  margin-bottom: 24px;
  overflow-x: auto;
}
.rk-tabs::-webkit-scrollbar { display: none; }
.rk-tab {
  flex: 1; min-width: 130px;
  background: none; border: none;
  padding: 10px 14px; border-radius: 7px;
  font-size: 13px; color: var(--ink-60);
  cursor: pointer; transition: all 180ms;
  white-space: nowrap;
}
.rk-tab:hover { color: var(--ink); }
.rk-tab.is-active {
  background: var(--paper); color: var(--ink); font-weight: 600;
  box-shadow: 0 2px 6px rgba(20,20,26,0.06);
}
.rk-pane { display: none; }
.rk-pane.is-active { display: block; }
.rk-list { display: flex; flex-direction: column; gap: 8px; }
.rk-row {
  display: grid; grid-template-columns: 56px 40px 1fr 110px 60px 80px;
  gap: 16px; align-items: center;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none; color: var(--ink);
  transition: all 180ms;
}
.rk-row:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(20,20,26,0.05); border-color: var(--ink-12); }
.rk-rank {
  font-family: var(--font-display); font-style: italic;
  font-size: 32px; font-weight: 700;
  color: var(--ink-60);
  text-align: center;
  line-height: 1;
}
.rk-row.rk-top1 .rk-rank { color: #C9A227; }
.rk-row.rk-top2 .rk-rank { color: #8A9099; }
.rk-row.rk-top3 .rk-rank { color: #B26B3D; }
.rk-row.rk-top1 { border-color: rgba(201,162,39,0.35); background: linear-gradient(90deg, rgba(201,162,39,0.05), var(--paper) 40%); }
.rk-row.rk-top2 { border-color: rgba(138,144,153,0.3); }
.rk-row.rk-top3 { border-color: rgba(178,107,61,0.3); }
.rk-av {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: var(--paper); font-size: 16px;
}
.rk-id { min-width: 0; }
.rk-nm { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.rk-cr { font-size: 11.5px; color: var(--ink-60); }
.rk-metric {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; font-weight: 600; color: var(--ink);
  text-align: right;
}
.rk-metric small {
  font-family: var(--font-mono); font-size: 9px; font-style: normal;
  color: var(--ink-60); display: block;
  text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 500;
  margin-top: 2px;
}
.rk-spark {
  width: 60px; height: 24px;
}
.rk-delta {
  font-family: var(--font-mono); font-size: 11px;
  text-align: right;
  white-space: nowrap;
}
.rk-delta.up { color: var(--ok); }
.rk-delta.down { color: var(--accent); }
.rk-delta.new {
  background: var(--accent); color: var(--paper);
  padding: 3px 7px; border-radius: 4px; font-size: 9.5px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.rk-delta.flat { color: var(--ink-60); }
.rk-foot {
  margin-top: 32px; padding: 20px; text-align: center;
  background: var(--bone); border-radius: 12px;
}
.rk-foot p { margin: 0; font-size: 13px; color: var(--ink-60); }
.rk-foot a { color: var(--accent); text-decoration: none; font-weight: 500; }
@media (max-width: 1100px) {
  .rk { padding: 40px 32px 60px; }
  .rk-h-title { font-size: 44px; }
}
@media (max-width: 760px) {
  .rk { padding: 28px 18px 40px; }
  .rk-h-title { font-size: 30px; }
  .rk-row { grid-template-columns: 40px 36px 1fr auto; }
  .rk-rank { font-size: 24px; }
  .rk-spark, .rk-delta { display: none; }
}

/* ============================================================
   v4.0 — Bucket 1 / 1. Onboarding (3-step intro)
   ============================================================ */
.view-onboard { padding: 0; overflow-y: auto; background: var(--ink); color: var(--paper); }
.frame[data-view="onboard"] { background: var(--ink); }
.frame[data-view="onboard"] .sidebar { opacity: 0.18; pointer-events: none; }
.ob {
  max-width: 880px; margin: 0 auto;
  padding: 60px 56px 80px;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.ob-progress {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 48px;
}
.ob-prog-bar {
  flex: 1; height: 4px;
  background: rgba(245,241,234,0.12);
  border-radius: 999px; overflow: hidden;
}
.ob-prog-bar span {
  display: block; height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 360ms var(--ease);
}
.ob-prog-lbl {
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(245,241,234,0.55);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.ob-prog-lbl strong { color: var(--paper); font-size: 12px; }
.ob-skip {
  background: none; border: 1px solid rgba(245,241,234,0.2);
  color: rgba(245,241,234,0.7);
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; cursor: pointer;
  transition: all 160ms;
}
.ob-skip:hover { border-color: rgba(245,241,234,0.5); color: var(--paper); }
.ob-step {
  display: none;
  flex-direction: column;
  animation: ob-rise 420ms var(--ease);
}
.ob-step.is-active { display: flex; }
@keyframes ob-rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.ob-eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 8px;
}
.ob-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); animation: nx-pulse 2s infinite;
}
.ob-title {
  font-family: var(--font-display); font-style: italic;
  font-size: 56px; line-height: 1.05;
  color: var(--paper); margin: 0 0 16px;
  font-weight: 600; letter-spacing: -0.02em;
}
.ob-title em { color: var(--accent); }
.ob-lede {
  font-size: 16px; line-height: 1.6;
  color: rgba(245,241,234,0.7);
  max-width: 620px; margin: 0 0 36px;
}
.ob-roles {
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
.ob-role {
  background: rgba(245,241,234,0.04);
  border: 1.5px solid rgba(245,241,234,0.1);
  border-radius: 14px;
  padding: 22px 24px;
  text-align: left;
  color: var(--paper);
  cursor: pointer;
  display: grid; grid-template-columns: 48px 1fr auto;
  gap: 18px; align-items: center;
  transition: all 200ms;
  font-family: inherit;
}
.ob-role:hover {
  border-color: var(--accent);
  background: rgba(209,74,36,0.08);
  transform: translateY(-2px);
}
.ob-role-emoji {
  font-size: 32px; line-height: 1;
}
/* v5.10: SVG role icon (替代 emoji, 避免 ZWJ 字符缺字形) */
.ob-role-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(209, 74, 36, 0.18);
  color: var(--accent);
  margin-bottom: 12px;
}
.ob-role-icon svg { width: 22px; height: 22px; }
.ob-role-nm {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; font-weight: 600; color: var(--paper);
  margin-bottom: 4px;
}
.ob-role-nm em { color: var(--accent); }
.ob-role-sub {
  font-size: 13px; color: rgba(245,241,234,0.7);
  line-height: 1.5;
}
.ob-role-pop {
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(245,241,234,0.55);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.ob-prefs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 36px;
}
.ob-pref {
  background: rgba(245,241,234,0.04);
  border: 1.5px solid rgba(245,241,234,0.1);
  border-radius: 12px;
  padding: 18px 14px;
  text-align: center;
  color: var(--paper);
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  transition: all 200ms;
}
.ob-pref:hover { border-color: rgba(245,241,234,0.3); }
.ob-pref.is-on {
  border-color: var(--accent);
  background: rgba(209,74,36,0.18);
}
.ob-next, .ob-finish, .ob-try-first {
  background: var(--accent); color: var(--paper);
  border: none; border-radius: 10px;
  padding: 14px 24px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: all 180ms;
  align-self: flex-start;
  font-family: inherit;
}
.ob-next:hover, .ob-finish:hover, .ob-try-first:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(209,74,36,0.4); }
.ob-next:disabled {
  opacity: 0.3; cursor: not-allowed; transform: none; box-shadow: none;
}
.ob-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.ob-try-first { background: rgba(245,241,234,0.1); }
.ob-try-first:hover { background: rgba(245,241,234,0.18); }
.ob-recs {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 36px;
}
.ob-rec {
  background: rgba(245,241,234,0.04);
  border: 1.5px solid rgba(245,241,234,0.1);
  border-radius: 12px;
  padding: 18px 22px;
  display: grid; grid-template-columns: 40px 32px 1fr auto;
  gap: 14px; align-items: center;
  color: var(--paper);
}
.ob-rec-n {
  font-family: var(--font-display); font-style: italic;
  font-size: 28px; font-weight: 700; color: var(--accent);
}
.ob-rec-av {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: var(--paper); font-size: 13px;
}
.ob-rec-nm { font-size: 15px; font-weight: 600; color: var(--paper); margin-bottom: 2px; }
.ob-rec-sub { font-size: 12px; color: rgba(245,241,234,0.65); line-height: 1.5; }
.ob-rec-go { font-size: 12px; color: var(--accent); font-weight: 500; }

@media (max-width: 760px) {
  .ob { padding: 36px 22px 60px; }
  .ob-title { font-size: 32px; }
  .ob-role { grid-template-columns: 40px 1fr; gap: 14px; }
  .ob-role-pop { grid-column: 1 / -1; }
  .ob-prefs { grid-template-columns: repeat(2, 1fr); }
  .ob-rec { grid-template-columns: 32px 1fr; gap: 10px; }
  .ob-rec-av, .ob-rec-go { display: none; }
}

/* ============================================================
   v4.0 — Bucket 1 / 4. VC Data Room (dark theme)
   ============================================================ */
.view-dataroom { padding: 0; overflow-y: auto; background: #0F1929; color: #E2E8F0; }
.frame[data-view="dataroom"] { background: #0F1929; }
.frame[data-view="dataroom"] .sidebar {
  background: #0A1220; border-color: rgba(255,255,255,0.06);
}
.frame[data-view="dataroom"] .sidebar * { color: rgba(226,232,240,0.7) !important; }
.frame[data-view="dataroom"] .nav-row.is-active { background: rgba(255,255,255,0.05); }
.frame[data-view="dataroom"] .titlebar { background: #0A1220; border-color: rgba(255,255,255,0.06); }
.frame[data-view="dataroom"] .tb-title { color: #E2E8F0; }
.dr { max-width: 1240px; margin: 0 auto; padding: 40px 48px 80px; }
.dr-h {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 22px;
}
.dr-eyebrow {
  font-family: var(--font-mono); font-size: 10.5px;
  color: rgba(226,232,240,0.55);
  letter-spacing: 0.08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.dr-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px rgba(209,74,36,0.18);
}
.dr-title {
  font-family: var(--font-display); font-style: italic;
  font-size: 38px; line-height: 1.1; font-weight: 600;
  color: #E2E8F0; margin: 0;
  letter-spacing: -0.02em;
}
.dr-title em { color: #38BDF8; }
.dr-exit {
  background: rgba(255,255,255,0.06); color: #E2E8F0;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 8px 14px; border-radius: 8px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; cursor: pointer;
  transition: all 160ms;
}
.dr-exit:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); }
.dr-kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 28px;
}
.dr-kpi {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 22px 24px;
}
.dr-kpi-lbl {
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(226,232,240,0.55);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 8px;
}
.dr-kpi-val {
  font-family: var(--font-display); font-style: italic;
  font-size: 36px; font-weight: 600;
  color: #E2E8F0;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  line-height: 1;
}
.dr-kpi-val em { font-style: normal; }
.dr-kpi-delta {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.04em;
}
.dr-kpi-delta.up { color: #34D399; }
.dr-kpi-delta.down { color: #F87171; }
.dr-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 24px 26px;
  margin-bottom: 20px;
}
.dr-card-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.dr-card-h h3 {
  font-size: 14px; font-weight: 600; color: #E2E8F0;
  margin: 0;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.dr-legend {
  display: flex; gap: 16px;
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(226,232,240,0.6);
}
.dr-legend .dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 2px; margin-right: 6px;
  vertical-align: middle;
}
.dr-legend .dot-gmv { background: #38BDF8; }
.dr-legend .dot-cr { background: #FBBF24; }
.dr-sub {
  font-family: var(--font-mono); font-size: 10.5px;
  color: rgba(226,232,240,0.5);
  letter-spacing: 0.05em;
}
.dr-chart {
  width: 100%; height: 220px; display: block;
}
.dr-chart .grid line { stroke: rgba(255,255,255,0.05); stroke-width: 1; }
.dr-chart .bars rect { fill: #38BDF8; opacity: 0.85; }
.dr-chart .line { fill: none; stroke: #FBBF24; stroke-width: 2.5; stroke-linejoin: round; }
.dr-chart .dots circle { fill: #FBBF24; stroke: #0F1929; stroke-width: 2; }
.dr-x-axis {
  display: grid; grid-template-columns: repeat(12, 1fr);
  text-align: center;
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(226,232,240,0.4);
  margin-top: 6px;
  letter-spacing: 0.04em;
}
.dr-2col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-bottom: 20px;
}
.dr-2col .dr-card { margin-bottom: 0; }
.dr-tbl {
  width: 100%; border-collapse: collapse;
  font-size: 12.5px;
}
.dr-tbl th {
  text-align: left; padding: 8px 8px;
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(226,232,240,0.5);
  letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dr-tbl th.r, .dr-tbl td.r { text-align: right; }
.dr-tbl td {
  padding: 9px 8px;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
  color: rgba(226,232,240,0.85);
}
.dr-tbl tbody tr:hover td { background: rgba(255,255,255,0.03); color: #E2E8F0; }
.dr-tbl td strong { color: #38BDF8; font-family: var(--font-mono); font-size: 11px; }
.dr-cohort td { font-family: var(--font-mono); font-size: 11.5px; }
.dr-cohort-note {
  margin-top: 12px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: #34D399; letter-spacing: 0.04em;
}
.dr-geo { display: flex; flex-direction: column; gap: 11px; }
.dr-geo-row {
  display: grid; grid-template-columns: 180px 1fr 50px;
  gap: 12px; align-items: center;
  font-size: 12px;
  color: rgba(226,232,240,0.85);
}
.dr-geo-row .bar {
  height: 8px; background: rgba(255,255,255,0.06);
  border-radius: 999px; overflow: hidden;
}
.dr-geo-row .bar span {
  display: block; height: 100%;
  background: var(--accent);
  border-radius: 999px;
}
.dr-geo-row strong {
  font-family: var(--font-mono); text-align: right;
  color: #E2E8F0; font-size: 12px;
}
.dr-roadmap { display: flex; flex-direction: column; gap: 14px; }
.dr-rd-item {
  display: grid; grid-template-columns: 100px 220px 1fr;
  gap: 18px; align-items: center;
  padding: 14px 18px;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid rgba(255,255,255,0.1);
  border-radius: 6px;
}
.dr-rd-item.done { border-left-color: #34D399; }
.dr-rd-item.active {
  border-left-color: #38BDF8;
  background: rgba(56,189,248,0.08);
}
.dr-rd-when {
  font-family: var(--font-mono); font-size: 12px;
  color: rgba(226,232,240,0.6); letter-spacing: 0.06em;
}
.dr-rd-what strong { color: #E2E8F0; font-size: 14px; }
.dr-rd-d {
  font-size: 12px; color: rgba(226,232,240,0.7);
}
.dr-foot {
  margin-top: 32px;
  padding: 18px 22px;
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10.5px;
  color: rgba(226,232,240,0.45);
  letter-spacing: 0.05em;
}
.dr-foot-sig { color: #38BDF8; }
@media (max-width: 1100px) {
  .dr { padding: 28px 32px 60px; }
  .dr-kpi-row { grid-template-columns: 1fr 1fr; }
  .dr-2col { grid-template-columns: 1fr; }
  .dr-title { font-size: 30px; }
}
@media (max-width: 760px) {
  .dr { padding: 22px 18px 40px; }
  .dr-kpi-row { grid-template-columns: 1fr; }
  .dr-kpi-val { font-size: 28px; }
  .dr-rd-item { grid-template-columns: 1fr; gap: 6px; }
  .dr-foot { flex-direction: column; gap: 6px; align-items: flex-start; }
  .dr-tbl { font-size: 11px; }
}

/* ============================================================
   v4.0 — Bucket 1 / 5. Changelog
   ============================================================ */
.view-changelog { padding: 0; overflow-y: auto; }
.cl { max-width: 820px; margin: 0 auto; padding: 56px 56px 80px; }
.cl-hero { margin-bottom: 40px; }
.cl-h-eye {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-60);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 18px;
}
.cl-h-eye .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.cl-h-title {
  font-family: var(--font-display); font-style: italic;
  font-size: 56px; line-height: 1.05; font-weight: 600;
  letter-spacing: -0.025em; color: var(--ink); margin: 0 0 14px;
}
.cl-h-title em { color: var(--accent); }
.cl-h-sub {
  font-size: 15px; line-height: 1.6; color: var(--ink-60);
  max-width: 560px; margin: 0;
}
.cl-timeline {
  position: relative;
  padding-left: 36px;
}
.cl-timeline::before {
  content: ''; position: absolute;
  left: 12px; top: 16px; bottom: 16px;
  width: 2px; background: var(--ink-08);
}
.cl-item {
  position: relative;
  padding-bottom: 28px;
}
.cl-item::before {
  content: ''; position: absolute;
  left: -29px; top: 22px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper);
  border: 2.5px solid var(--ink-24);
  z-index: 1;
}
.cl-item.is-now::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(209,74,36,0.18);
  animation: nx-pulse 2s infinite;
}
.cl-item.is-future::before {
  border-style: dashed;
  background: var(--bone);
}
.cl-when {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-60); letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.cl-card {
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: 12px;
  padding: 18px 22px;
  transition: all 180ms;
}
.cl-item:hover .cl-card { border-color: var(--ink-24); }
.cl-tags {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.cl-tags .tag {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 4px;
}
.cl-tags .tag-new { background: var(--accent); color: var(--paper); }
.cl-tags .tag-fix { background: rgba(30,138,94,0.13); color: var(--ok); }
.cl-tags .tag-polish { background: rgba(124,92,255,0.13); color: #6645dd; }
.cl-tags .tag-plan { background: var(--bone-2); color: var(--ink-60); }
.cl-ver {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-60);
}
.cl-card h3 {
  font-family: var(--font-display); font-style: italic;
  font-size: 19px; color: var(--ink); margin: 0 0 6px;
  font-weight: 600;
}
.cl-card p {
  font-size: 13px; line-height: 1.6; color: var(--ink-60);
  margin: 0;
}
.cl-item.is-future .cl-card {
  background: var(--bone); border-style: dashed;
}
.cl-item.is-future h3 { color: var(--ink-60); }
@media (max-width: 760px) {
  .cl { padding: 28px 20px 40px; }
  .cl-h-title { font-size: 32px; }
  .cl-timeline { padding-left: 28px; }
  .cl-item::before { left: -22px; width: 10px; height: 10px; }
}

/* ============================================================
   v4.0 — Bucket 2 / 6-7-8. Creator deep dashboard (5 sub-panes)
   ============================================================ */
.cdash-subtabs {
  display: flex; gap: 6px; margin-bottom: 16px;
  border-bottom: 1.5px solid var(--ink-08);
  overflow-x: auto;
}
.cdash-subtabs::-webkit-scrollbar { display: none; }
.cd-stab {
  flex-shrink: 0;
  background: none; border: none;
  padding: 10px 16px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  font-size: 13px; color: var(--ink-60);
  cursor: pointer;
  transition: all 160ms;
  font-family: inherit;
  white-space: nowrap;
}
.cd-stab:hover { color: var(--ink); }
.cd-stab.is-active {
  color: var(--ink); border-bottom-color: var(--accent);
  font-weight: 600;
}
.cd-pane { display: none; }
.cd-pane.is-active { display: block; }

/* Funnel pane */
.cd-funnel-h { margin-bottom: 16px; }
.cd-funnel-h h3 {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; color: var(--ink); margin: 0 0 4px;
}
.cd-funnel-h h3 em { color: var(--accent); }
.cd-funnel-h p {
  font-size: 13px; color: var(--ink-60); margin: 0;
}
.cd-funnel-app-tabs {
  display: flex; gap: 6px; margin-bottom: 20px;
}
.fa-tab {
  background: var(--bone); border: 1px solid transparent;
  padding: 6px 12px; border-radius: 8px;
  font-size: 12px; color: var(--ink-60); cursor: pointer;
  transition: all 160ms;
}
.fa-tab:hover { color: var(--ink); border-color: var(--ink-12); }
.fa-tab.is-active {
  background: var(--ink); color: var(--paper);
}
.cd-funnel { display: flex; flex-direction: column; gap: 10px; }
.funnel-stage {
  display: grid; grid-template-columns: 220px 1fr 130px; gap: 18px; align-items: center;
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: 10px;
  padding: 14px 18px;
}
.funnel-stage .fs-nm {
  font-size: 13px; font-weight: 600; color: var(--ink);
  margin-bottom: 3px;
}
.funnel-stage .fs-d { font-size: 11.5px; color: var(--ink-60); }
.funnel-stage .fs-bar {
  position: relative;
  height: 28px; background: var(--ink-08); border-radius: 6px;
  display: flex; align-items: center;
}
.funnel-stage .fs-bar span {
  display: block; height: 100%;
  width: var(--w); background: var(--c);
  border-radius: 6px;
  transition: width 600ms var(--ease);
}
.funnel-stage .fs-bar strong {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: var(--paper);
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.fs-conv {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-60); text-align: right;
}
.fs-conv .warn {
  display: block;
  font-size: 10.5px; color: var(--accent);
  letter-spacing: 0.04em;
}
.cd-funnel-insight {
  margin-top: 20px;
  padding: 16px 18px;
  background: rgba(209,74,36,0.06);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  font-size: 13px; color: var(--ink); line-height: 1.6;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.cd-funnel-insight strong { color: var(--accent); }

/* Users pane */
.cd-users-h h3 {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; color: var(--ink); margin: 0 0 4px;
}
.cd-users-h p { font-size: 13px; color: var(--ink-60); margin: 0 0 20px; }
.cd-users-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-bottom: 28px;
}
.usr-card {
  background: var(--paper); border: 1px solid var(--ink-08);
  border-radius: 10px; padding: 18px 20px;
}
.usr-card h4 {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-60);
  margin: 0 0 14px; font-weight: 500;
}
.pie {
  display: flex; justify-content: center;
  margin-bottom: 12px;
}
.pie svg { width: 120px; height: 120px; }
.usr-legend {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; color: var(--ink);
}
.usr-legend .dot {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 2px; margin-right: 8px;
  vertical-align: middle;
}
.usr-bars { display: flex; flex-direction: column; gap: 7px; }
.ub-row {
  display: grid; grid-template-columns: 60px 1fr 36px;
  gap: 10px; align-items: center;
  font-size: 12px;
}
.ub-row > span:first-child { color: var(--ink-60); font-family: var(--font-mono); font-size: 11px; }
.ub-bar {
  height: 6px; background: var(--ink-08);
  border-radius: 999px; overflow: hidden;
}
.ub-bar > span {
  display: block; height: 100%;
  background: #8B5CF6;
  border-radius: 999px;
}
.ub-row strong {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink);
  text-align: right;
}
.cd-heatmap-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.cd-heatmap-h h4 {
  font-family: var(--font-display); font-style: italic;
  font-size: 18px; color: var(--ink); margin: 0;
  font-weight: 600;
}
.cd-heatmap-h h4 em { color: var(--accent); }
.cd-heatmap-h .meta { font-size: 11.5px; color: var(--ink-60); }
.cd-heatmap {
  display: grid; grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(7, 12px);
  gap: 3px;
  background: var(--paper); padding: 14px;
  border: 1px solid var(--ink-08);
  border-radius: 10px;
}
.hm-cell {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 2px;
  background: var(--ink-08);
}
.hm-0 { background: var(--ink-08); }
.hm-1 { background: rgba(209,74,36,0.2); }
.hm-2 { background: rgba(209,74,36,0.4); }
.hm-3 { background: rgba(209,74,36,0.65); }
.hm-4 { background: rgba(209,74,36,0.9); }
.cd-heatmap-legend {
  margin-top: 10px;
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-60);
}
.cd-heatmap-legend .meta { margin-left: auto; }

/* Feedback pane */
.cd-fb-h h3 {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; color: var(--ink); margin: 0 0 4px;
}
.cd-fb-h p { font-size: 13px; color: var(--ink-60); margin: 0 0 20px; }
.cd-fb-top {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px;
  margin-bottom: 28px;
}
.cd-nps {
  background: var(--ink); color: var(--paper);
  border-radius: 12px; padding: 24px;
  position: relative; overflow: hidden;
}
.cd-nps::before {
  content: ''; position: absolute; right: -60px; top: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(30,138,94,0.3), transparent 65%);
  border-radius: 50%;
}
.cd-nps-big {
  font-family: var(--font-display); font-size: 64px; font-weight: 700;
  color: var(--paper); line-height: 1;
  margin-bottom: 4px;
  position: relative; z-index: 1;
}
.cd-nps-big em { font-style: italic; color: #34D399; }
.cd-nps-lbl {
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(245,241,234,0.55); letter-spacing: 0.06em;
  text-transform: uppercase; margin-bottom: 12px;
  position: relative; z-index: 1;
}
.cd-nps-meta { font-size: 12px; color: rgba(245,241,234,0.7); margin-bottom: 18px; position: relative; z-index: 1; }
.cd-nps-bars {
  display: flex; height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.06); margin-bottom: 8px;
  position: relative; z-index: 1;
}
.nps-seg { display: block; height: 100%; }
.nps-prom { background: #34D399; }
.nps-pas { background: #FBBF24; }
.nps-det { background: #F87171; }
.nps-seg i { display: none; }
.cd-nps-sub {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: rgba(245,241,234,0.7);
  position: relative; z-index: 1;
}
.cd-nps-sub strong { color: var(--paper); }
.cd-rating-dist {
  background: var(--paper); border: 1px solid var(--ink-08);
  border-radius: 12px; padding: 18px 22px;
}
.cd-rating-dist h4 {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-60); margin: 0 0 14px; font-weight: 500;
}
.rd-row {
  display: grid; grid-template-columns: 64px 1fr 36px;
  gap: 10px; align-items: center;
  font-size: 12px;
  padding: 5px 0;
}
.rd-row > span:first-child { color: #C9A227; font-family: var(--font-mono); font-size: 11px; }
.rd-bar { height: 7px; background: var(--ink-08); border-radius: 999px; overflow: hidden; }
.rd-bar > span { display: block; height: 100%; background: #C9A227; border-radius: 999px; }
.rd-row strong { font-family: var(--font-mono); font-size: 12px; color: var(--ink); text-align: right; }
.cd-pain {
  background: rgba(212,156,11,0.06);
  border-left: 3px solid #D49C0B;
  border-radius: 8px;
  padding: 18px 22px; margin-bottom: 28px;
}
.cd-pain h4 {
  font-family: var(--font-display); font-style: italic;
  font-size: 18px; color: var(--ink); margin: 0 0 12px;
  font-weight: 600;
}
.cd-pain-list { list-style: none; padding: 0; margin: 0; }
.cd-pain-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--ink-08);
  font-size: 13px;
  flex-wrap: wrap;
}
.cd-pain-list li:last-child { border-bottom: none; }
.cd-pain-list li strong { color: var(--ink); }
.cd-pain-list li > span { color: var(--ink-60); font-size: 12px; flex: 1; }
.cd-reviews h4 {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-60); margin: 0 0 14px; font-weight: 500;
}
.cdr-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cdr {
  background: var(--paper); border: 1px solid var(--ink-08);
  border-radius: 10px; padding: 14px 18px;
}
.cdr-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cdr-av {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--bone-2); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
}
.cdr-id { flex: 1; }
.cdr-nm { font-size: 13px; font-weight: 600; color: var(--ink); }
.cdr-meta { font-size: 11px; color: var(--ink-60); }
.cdr-app {
  font-family: var(--font-mono); font-size: 9.5px;
  background: var(--bone); color: var(--ink-60);
  padding: 2px 7px; border-radius: 4px;
  letter-spacing: 0.04em;
}
.cdr p {
  font-size: 13px; color: var(--ink); line-height: 1.6;
  margin: 0;
}
.cd-fb-more {
  margin-top: 14px;
  background: none; border: 1px solid var(--ink-12);
  padding: 10px 18px; border-radius: 8px;
  font-size: 12.5px; color: var(--ink-60); cursor: pointer;
  transition: all 160ms;
}
.cd-fb-more:hover { color: var(--ink); border-color: var(--ink-24); background: var(--bone); }

/* Levels pane */
.cd-lv-h h3 {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; color: var(--ink); margin: 0 0 4px;
}
.cd-lv-h p { font-size: 13px; color: var(--ink-60); margin: 0 0 20px; }
.cd-lv-current {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px;
  background: var(--ink); color: var(--paper);
  border-radius: 14px; padding: 24px 28px;
  margin-bottom: 24px;
  align-items: center;
  position: relative; overflow: hidden;
}
.cd-lv-current::before {
  content: ''; position: absolute; right: -80px; top: -80px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(251,191,36,0.18), transparent 60%);
  border-radius: 50%;
}
.lvc-l, .lvc-r { position: relative; z-index: 1; }
.lvc-l { display: flex; align-items: center; gap: 18px; }
.lvc-badge {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(251,191,36,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  box-shadow: 0 0 0 3px rgba(251,191,36,0.4);
}
.lvc-lbl { font-family: var(--font-mono); font-size: 10.5px; color: rgba(245,241,234,0.55); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.lvc-nm { font-family: var(--font-display); font-style: italic; font-size: 26px; font-weight: 600; color: var(--paper); margin-bottom: 4px; }
.lvc-nm em { color: #FBBF24; }
.lvc-meta { font-size: 12px; color: rgba(245,241,234,0.65); }
.lvc-progress-lbl { font-size: 12px; color: rgba(245,241,234,0.7); margin-bottom: 6px; }
.lvc-progress-lbl strong { color: var(--paper); }
.lvc-progress-bar {
  height: 8px; background: rgba(255,255,255,0.08);
  border-radius: 999px; overflow: hidden;
  margin-bottom: 6px;
}
.lvc-progress-bar > span {
  display: block; height: 100%;
  background: var(--accent);
  border-radius: 999px;
}
.lvc-progress-meta { font-family: var(--font-mono); font-size: 11px; color: rgba(245,241,234,0.55); }
.cd-lv-ladder {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--ink-08); border-radius: 12px; overflow: hidden;
  margin-bottom: 28px;
}
.lv-row {
  display: grid; grid-template-columns: 50px 100px 1fr 80px;
  gap: 12px; align-items: center;
  background: var(--paper);
  padding: 14px 18px;
  font-size: 13px;
}
.lv-row .n {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; color: var(--ink-60); font-weight: 700;
}
.lv-row .nm { font-weight: 600; color: var(--ink); font-size: 14px; }
.lv-row .d { color: var(--ink-60); font-size: 12.5px; }
.lv-row .st { font-family: var(--font-mono); font-size: 11px; color: var(--ink-60); text-align: right; }
.lv-row.lv-done .st { color: var(--ok); }
.lv-row.lv-current { background: linear-gradient(90deg, rgba(251,191,36,0.08), var(--paper) 40%); }
.lv-row.lv-current .n { color: #FBBF24; }
.lv-row.lv-current .st { color: #FBBF24; font-weight: 600; }
.cd-bg-h h4 {
  font-family: var(--font-display); font-style: italic;
  font-size: 20px; color: var(--ink); margin: 0 0 16px; font-weight: 600;
}
.cd-badges {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.bg {
  background: var(--paper); border: 1px solid var(--ink-08);
  border-radius: 12px; padding: 18px;
  text-align: center;
  transition: all 180ms;
}
.bg:hover { transform: translateY(-2px); }
.bg-unlocked { border-color: rgba(209,74,36,0.3); background: linear-gradient(180deg, rgba(209,74,36,0.04), var(--paper) 60%); }
.bg-icon { font-size: 30px; display: block; margin-bottom: 6px; }
.bg-locked .bg-icon { opacity: 0.3; filter: grayscale(100%); }
.bg-nm {
  font-family: var(--font-display); font-style: italic;
  font-size: 16px; color: var(--ink); font-weight: 600;
  margin-bottom: 4px;
}
.bg-locked .bg-nm { color: var(--ink-60); }
.bg-d { font-size: 11.5px; color: var(--ink-60); line-height: 1.4; margin-bottom: 8px; }
.bg-when {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-60); letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bg-unlocked .bg-when { color: var(--ok); }

@media (max-width: 1100px) {
  .cd-users-grid { grid-template-columns: 1fr; }
  .cd-fb-top { grid-template-columns: 1fr; }
  .cdr-list { grid-template-columns: 1fr; }
  .cd-lv-current { grid-template-columns: 1fr; }
  .cd-badges { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .funnel-stage { grid-template-columns: 1fr; gap: 8px; }
  .cd-badges { grid-template-columns: 1fr 1fr; }
  .lv-row { grid-template-columns: 32px 1fr; }
  .lv-row .d { grid-column: 1 / -1; font-size: 11.5px; }
  .lv-row .st { grid-column: 1 / -1; text-align: left; }
}

/* ============================================================
   v4.0 — Bucket 4 / 13. Empty / loading / error state component
   ============================================================ */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 60px 32px;
  background: var(--bone);
  border: 1px dashed var(--ink-12);
  border-radius: 14px;
}
.empty-illu {
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  color: var(--accent);
  opacity: 0.75;
}
.empty-illu svg { width: 100%; height: 100%; }
.empty-title {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; color: var(--ink);
  margin: 0 0 8px; font-weight: 600;
}
.empty-sub {
  font-size: 13.5px; color: var(--ink-60);
  margin: 0 0 24px; max-width: 380px;
  line-height: 1.55;
}
.empty-cta {
  background: var(--accent); color: var(--paper);
  border: none; border-radius: 8px;
  padding: 10px 20px; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 180ms;
  text-decoration: none;
  display: inline-block;
}
.empty-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(209,74,36,0.35); }
.empty-cta.ghost {
  background: none; color: var(--ink-60);
  border: 1px solid var(--ink-12); margin-left: 8px;
}
.empty-cta.ghost:hover { color: var(--ink); border-color: var(--ink-24); background: var(--bone-2); }

/* Apply empty-state to forced-empty mode */
body.force-empty .ma-pane[data-mpane="active"] .ma-grid-v3,
body.force-empty .ma-pane[data-mpane="installed"] .ma-grid-v3,
body.force-empty .ma-pane[data-mpane="recent"] .ma-recent-list,
body.force-empty .ma-pane[data-mpane="requests"] .ma-requests,
body.force-empty .nx-list,
body.force-empty .cd-reviews .cdr-list,
body.force-empty .cd-pain-list,
body.force-empty .rk-list,
body.force-empty .wf-tpls,
body.force-empty .wf-running { display: none; }
.empty-fallback { display: none; }
body.force-empty .empty-fallback { display: block; }

/* ============================================================
   v4.0 — Bucket 4 / 14. Mobile audit pass · finishing touches
   ============================================================ */
/* Immersive views (onboard / dataroom) hide mobile chrome */
.frame[data-view="onboard"] ~ .preview-banner,
.frame[data-view="dataroom"] ~ .preview-banner,
body:has(.frame[data-view="onboard"]) .preview-banner,
body:has(.frame[data-view="dataroom"]) .preview-banner { display: none !important; }

@media (max-width: 760px) {
  /* Visitor strip — too narrow on mobile, hide the right column */
  .visitor-strip .vs-r { display: none; }
  .visitor-strip { padding: 6px 14px; font-size: 11px; }

  /* New view paddings tighter */
  .wf, .rk, .cl { padding-left: 18px !important; padding-right: 18px !important; }

  /* Creator deep sub-tabs scrollable */
  .cdash-subtabs { padding: 0 2px; gap: 2px; }
  .cd-stab { padding: 9px 12px; font-size: 12px; }

  /* Funnel: stack bar info */
  .funnel-stage .fs-l { margin-bottom: 6px; }
  .funnel-stage .fs-bar { width: 100%; height: 24px; }

  /* Pricing calc range slider — make thumb easier to grab */
  .pc-grid { grid-template-columns: 1fr; }
  input[type="range"] { height: 28px; }

  /* Mobile tabbar — make touch targets meet 44px */
  .mtb-item { min-height: 56px; }

  /* Workflow run cards: stack chain below */
  .wf-run-r { align-items: flex-start; }
  .wf-run-chain { transform: scale(0.85); transform-origin: left; }

  /* Rankings: hide spark + delta to save space; rank stays */
  .rk-tab { min-width: 105px; padding: 8px 10px; font-size: 12px; }

  /* Dataroom chart — narrower viewbox, smaller text */
  .dr-chart { height: 180px; }
  .dr-x-axis { font-size: 8.5px; }

  /* Notification drawer drag handle indicator (mobile UX hint) */
  .nx-drawer::before {
    content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; background: var(--ink-12); border-radius: 999px;
  }

  /* Withdraw modal mobile padding */
  .wmodal { width: 100vw; max-width: 100vw; max-height: 92vh; border-radius: 16px 16px 0 0; top: auto; bottom: 0; left: 0; transform: translateY(110%) scale(1); }
  .wmodal.is-open { transform: translateY(0) scale(1); }
  .wm-step { padding: 18px 18px 24px; }

  /* App detail inline try-it — even smaller */
  .ad-try-stream { padding: 12px 10px; }

  /* My Apps recent row: better tap area */
  .ma-recent-row { padding: 14px 14px; }

  /* Touchable bell area */
  .tb-bell { min-width: 36px; min-height: 36px; }
}

/* Phone mode (iPhone frame) — same compactness rules */
body.is-phone .frame { font-size: 14px; }
body.is-phone .wf-h-title, body.is-phone .rk-h-title, body.is-phone .cl-h-title, body.is-phone .ob-title { font-size: 28px; }
body.is-phone .dr-kpi-row { grid-template-columns: 1fr 1fr; }
body.is-phone .ob-prefs { grid-template-columns: repeat(2, 1fr); }
body.is-phone .wf-tpls { grid-template-columns: 1fr; }
body.is-phone .cd-badges { grid-template-columns: repeat(2, 1fr); }
body.is-phone .cd-users-grid { grid-template-columns: 1fr; }
body.is-phone .cd-fb-top { grid-template-columns: 1fr; }
body.is-phone .cdr-list { grid-template-columns: 1fr; }
body.is-phone .funnel-stage { grid-template-columns: 1fr; }
body.is-phone .wf-run-card { grid-template-columns: 1fr; }
body.is-phone .visitor-strip { display: none; }

/* ============================================================
   v5.4 — T9: + 号 → 贡献 mini-menu
   ============================================================ */
.sb-identity { position: relative; }
.contribute-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 8px;
  width: 280px;
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(20,20,26,0.12);
  z-index: 150;
  padding: 8px;
  animation: cbFade 180ms var(--ease);
}
@keyframes cbFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.contribute-menu .cb-h {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-60);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 10px 6px;
}
.cb-item {
  width: 100%;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 10px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 160ms;
}
.cb-item:hover {
  background: var(--bone);
}
.cb-ic {
  font-size: 22px;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bone);
  border-radius: 8px;
}
.cb-item:hover .cb-ic {
  background: rgba(209,74,36,0.1);
}
.cb-body { min-width: 0; }
.cb-t {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.cb-d {
  font-size: 11.5px;
  color: var(--ink-60);
  line-height: 1.4;
}

/* ============================================================
   v5.4 — T2: My Apps collapsible (nav-parent caret + sb-subnav animation)
   ============================================================ */
.nav-row.nav-parent[data-toggle-mine] {
  position: relative;
}
.nav-row.nav-parent[data-toggle-mine] .nav-caret {
  margin-left: auto;
  transition: transform 180ms var(--ease);
  color: var(--ink-60);
}
.nav-row.nav-parent[data-toggle-mine].is-open .nav-caret {
  transform: rotate(180deg);
  color: var(--ink);
}
#sbMineSub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 260ms var(--ease);
}
#sbMineSub.is-open {
  max-height: 320px;
}
#sbMineSub .nav-subrow .dot.tint-gold { background: #F5B041; }
#sbMineSub .nav-subrow .dot.tint-sea  { background: #0EA5E9; }
#sbMineSub .nav-subrow .dot.tint-iris { background: #7C5CFF; }
#sbMineSub .nav-subrow .dot.tint-accent { background: #D14A24; }
#sbMineSub .nav-subrow .dot.tint-rose { background: #EF6C8A; }
#sbMineSub .nav-subrow .badge.sub-new {
  background: var(--accent);
  color: var(--paper);
  font-size: 9px;
  padding: 1px 5px;
  margin-left: auto;
}

/* v5.4 — T4 深度版 tag (Featured shelf + 任意位置) */
.v5-tag, .h-td-tag-v5 {
  display: inline-block;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  vertical-align: middle;
  letter-spacing: 0.04em;
  margin-left: 6px;
}
.mk-scard.is-deep {
  border: 1px solid rgba(209,74,36,0.25);
  background: linear-gradient(180deg, rgba(209,74,36,0.04), var(--paper) 60%);
}
.mk-scard.is-deep:hover {
  border-color: var(--accent);
}

/* ============================================================
   v5.4 T7 — Workflow Case Study (装修咖啡店 7 天)
   ============================================================ */
.view-workflow-case {
  flex-direction: column;
  overflow-y: auto;
  background: var(--paper);
}
.wfc {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 40px 80px;
}
.wfc-back {
  margin-bottom: 24px;
}
.wfc-back button {
  background: none;
  border: 1px solid var(--ink-12);
  color: var(--ink-60);
  padding: 7px 14px 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: all 160ms;
}
.wfc-back button:hover {
  color: var(--ink);
  border-color: var(--ink-24);
  background: var(--bone);
}
.wfc-hero {
  padding-bottom: 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--ink-08);
}
.wfc-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-60);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.wfc-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.wfc-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 38px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 12px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.wfc-title em { color: var(--accent); }
.wfc-lede {
  font-size: 15px;
  color: var(--ink-60);
  line-height: 1.55;
  margin: 0 0 20px;
}
.wfc-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-60);
}
.wfc-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wfc-timeline {
  position: relative;
  padding-left: 16px;
}
.wfc-day {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 28px;
  padding-bottom: 36px;
  position: relative;
}
.wfc-day:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 36px;
  bottom: 0;
  width: 1px;
  background: var(--ink-08);
}
.wfc-day::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 2px var(--ink-08);
}
.wfc-day-l {
  padding-left: 24px;
}
.wfc-day-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.wfc-day-date {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-60);
  margin-top: 4px;
}
.wfc-day-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
}
.wfc-day-title em { color: var(--accent); font-style: italic; }
.wfc-day-quote {
  background: var(--bone);
  border-left: 3px solid var(--accent);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 14px;
}
.wfc-day-action {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-60);
  padding: 10px 14px;
  background: rgba(209,74,36,0.05);
  border-radius: 8px;
}
.wfc-act-icon { font-size: 18px; }
.wfc-day-mock {
  background: var(--paper);
  border: 1px solid var(--ink-12);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.wfc-mock-h {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 12px;
}
.wfc-mock-out {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-60);
  border-top: 1px dashed var(--ink-08);
  padding-top: 10px;
  margin-top: 12px;
}
/* brand mock */
.wfc-mock-brands {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
.wfc-mock-brand-card {
  aspect-ratio: 1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-weight: 600;
  font-size: 12px;
  position: relative;
}
.wfc-mock-brand-card.is-picked {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
/* finance mock */
.wfc-mock-finance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.wfc-fcell {
  background: var(--bone);
  padding: 10px 12px;
  border-radius: 8px;
}
.wfc-fcell .lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-60);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.wfc-fcell .val {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  font-weight: 600;
}
.wfc-fcell-good .val { color: var(--ok); }
/* page mock */
.wfc-mock-browser {
  border: 1px solid var(--ink-12);
  border-radius: 8px;
  overflow: hidden;
}
.wfc-browser-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  background: var(--bone);
  border-bottom: 1px solid var(--ink-08);
}
.wfc-browser-bar > span:nth-child(1),
.wfc-browser-bar > span:nth-child(2),
.wfc-browser-bar > span:nth-child(3) {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-12);
}
.wfc-browser-bar > span:nth-child(1) { background: #ff5f57; }
.wfc-browser-bar > span:nth-child(2) { background: #ffbd2e; }
.wfc-browser-bar > span:nth-child(3) { background: #28c941; }
.wfc-browser-url {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-60);
  margin-left: auto;
  background: var(--paper);
  padding: 2px 12px;
  border-radius: 4px;
  flex: 1;
  max-width: 200px;
  text-align: center;
}
.wfc-browser-body {
  padding: 36px 28px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.wfc-page-title { font-size: 36px; }
.wfc-page-slogan { font-size: 14px; color: var(--ink-60); }
.wfc-page-cta {
  margin-top: 10px;
  font-size: 12px;
  color: var(--accent);
  padding: 6px 14px;
  border: 1px solid var(--accent);
  border-radius: 999px;
}
/* covers */
.wfc-mock-covers-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.wfc-cover {
  aspect-ratio: 1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-size: 11px;
  font-weight: 600;
}
/* plaza post mock */
.wfc-mock-post {
  background: var(--bone);
  padding: 14px 18px;
  border-radius: 10px;
}
.wfc-post-h {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-60);
  margin-bottom: 8px;
}
.wfc-post-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 8px;
}
.wfc-post-tags {
  display: flex;
  gap: 6px;
}
.wfc-post-tags span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--accent);
  background: rgba(209,74,36,0.08);
  padding: 2px 8px;
  border-radius: 4px;
}
/* data flow indicator */
.wfc-day-flow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(14, 165, 233, 0.05);
  border-radius: 6px;
  font-size: 11.5px;
  margin-top: 8px;
}
.wfc-flow-label { color: #0369A1; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; }
.wfc-flow-arrow { color: var(--ink-60); font-family: var(--font-mono); }
/* summary */
.wfc-day-summary {
  background: var(--ink);
  color: var(--paper);
  padding: 18px 22px;
  border-radius: 10px;
  margin-top: 8px;
}
.wfc-sum-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.wfc-sum-item .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  font-weight: 600;
  color: var(--paper);
}
.wfc-sum-item .lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(245,241,234,0.6);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* CTA */
.wfc-cta {
  margin-top: 32px;
  padding: 32px 36px;
  text-align: center;
  background: linear-gradient(180deg, rgba(209,74,36,0.05), var(--paper) 80%);
  border-radius: 16px;
  border: 1px solid rgba(209,74,36,0.15);
}
.wfc-cta h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}
.wfc-cta p {
  font-size: 14px;
  color: var(--ink-60);
  margin: 0 0 22px;
}
.wfc-cta-btn {
  background: var(--accent);
  color: var(--paper);
  border: none;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-right: 10px;
}
.wfc-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(209,74,36,0.3);
}
.wfc-cta-ghost {
  background: none;
  border: 1px solid var(--ink-12);
  color: var(--ink-60);
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.wfc-cta-ghost:hover { border-color: var(--ink-24); color: var(--ink); }

.wf-tpl-cta-ghost {
  background: none;
  border: 1px solid var(--ink-12);
  color: var(--ink-60);
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
  transition: all 160ms;
  margin-right: 6px;
}
.wf-tpl-cta-ghost:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(209,74,36,0.05);
}

@media (max-width: 760px) {
  .wfc { padding: 22px 16px 60px; }
  .wfc-title { font-size: 26px; }
  .wfc-day { grid-template-columns: 1fr; }
  .wfc-day-l { padding-left: 24px; }
  .wfc-mock-brands { grid-template-columns: repeat(3, 1fr); }
  .wfc-mock-covers-grid { grid-template-columns: repeat(3, 1fr); }
  .wfc-mock-finance-grid { grid-template-columns: 1fr 1fr; }
  .wfc-sum-grid { grid-template-columns: 1fr 1fr; }
}

/* v5.4 T8 — Academy audience tabs (For Users / For Creators) */
.ac-audience-tabs {
  display: flex;
  gap: 4px;
  background: var(--bone);
  padding: 4px;
  border-radius: 10px;
  margin-bottom: 28px;
}
.ac-audience-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 12px 18px;
  border-radius: 7px;
  font-size: 14px;
  color: var(--ink-60);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: all 180ms;
}
.ac-audience-tab:hover { color: var(--ink); }
.ac-audience-tab.is-active {
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(20,20,26,0.06);
}
.ac-pane { display: none; }
.ac-pane.is-active { display: block; animation: acFade 220ms var(--ease); }
@keyframes acFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.ac-hero-sub {
  margin-bottom: 28px;
}
.ac-hero-sub p {
  font-size: 14px;
  color: var(--ink-60);
  line-height: 1.55;
  margin: 0 0 18px;
}
.ac-lessons {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--ink-60);
  border-top: 1px dashed var(--ink-08);
  padding-top: 10px;
}
.ac-lessons li {
  padding: 5px 0;
  line-height: 1.4;
}
.ac-lessons a { color: var(--accent); text-decoration: none; }
.ac-lessons a:hover { text-decoration: underline; }

/* ============================================================
   v5.7 P2 — i18n language toggle (footer 注入)
   ============================================================ */
.lang-toggle {
  display: inline-flex;
  margin-left: auto;
  gap: 0;
  border: 1px solid var(--ink-08);
  border-radius: 5px;
  overflow: hidden;
  background: var(--paper);
  align-self: center;
}
.sb-footer .lang-toggle { margin-left: auto; }
.sb-userstrip .lang-toggle { margin-left: 10px; }
.lang-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-60);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  line-height: 1.3;
}
.lang-btn + .lang-btn { border-left: 1px solid var(--ink-08); }
.lang-btn:hover { background: var(--ink-04); color: var(--ink); }
.lang-btn.is-on  { background: var(--ink); color: var(--paper); }

/* Subtle EN-mode font adjustment: slightly relax letter-spacing on display */
body.lang-en .id-name,
body.lang-en .ac-title,
body.lang-en .hero-h1 { letter-spacing: -0.005em; }

/* ============================================================
   v5.8 — User menu popover (.us-more 三个点弹出菜单)
   + 钻石创作者 avatar 角标 (.us-avatar.is-diamond)
   ============================================================ */

/* avatar 角标: 钻石创作者覆盖默认 online dot */
.sb-userstrip .us-avatar.is-diamond::after {
  content: "";
  width: 12px; height: 12px;
  background: var(--accent);
  border-radius: 2px;
  transform: rotate(45deg);
  bottom: -2px; right: -2px;
  border: 1.5px solid var(--bone-rail);
  box-sizing: border-box;
}

/* us-more 改 button reset */
.sb-userstrip .us-more {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sb-userstrip .us-more[aria-expanded="true"] {
  color: var(--ink);
  background: var(--ink-08);
}

/* user-menu popover — 锚定到 .sb-userstrip, 上方弹出 */
.sb-userstrip { position: relative; }
.user-menu {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(100% + 6px);
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: 10px;
  box-shadow: 0 12px 32px -8px rgba(20,20,26,0.18),
              0 2px 8px -2px rgba(20,20,26,0.08);
  padding: 5px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 1px;
  animation: umIn var(--dur) var(--ease);
  transform-origin: bottom center;
}
.user-menu[hidden] { display: none; }
@keyframes umIn {
  from { opacity: 0; transform: translateY(4px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.um-item {
  appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink-80);
  font-family: var(--font-ui);
  font-size: 12.5px;
  text-align: left;
  line-height: 1.3;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.um-item:hover { background: var(--ink-04); color: var(--ink); }
.um-item .um-i {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  color: var(--ink-60);
  flex-shrink: 0;
}
.um-item:hover .um-i { color: var(--ink); }
.um-item .um-i svg { width: 16px; height: 16px; }
.um-item .um-t { flex: 1; }
.um-item .um-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-40);
  letter-spacing: 0.02em;
  background: var(--ink-04);
  padding: 2px 6px;
  border-radius: 3px;
}
.um-item.is-danger { color: var(--accent); }
.um-item.is-danger:hover { background: var(--accent-soft); }
.um-item.is-danger .um-i { color: var(--accent); }

.um-sep {
  height: 1px;
  background: var(--ink-08);
  margin: 3px 6px;
}

/* mini modal for notifs/help */
.um-mini-overlay {
  position: fixed; inset: 0;
  background: rgba(20,20,26,0.32);
  display: grid; place-items: center;
  z-index: 999;
  animation: umIn var(--dur) var(--ease);
}
.um-mini-card {
  background: var(--paper);
  border-radius: 12px;
  width: min(360px, 90vw);
  padding: 0;
  border: 1px solid var(--ink-08);
  box-shadow: 0 24px 48px -12px rgba(20,20,26,0.30);
  overflow: hidden;
}
.um-mini-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--ink-08);
  font-family: var(--font-display); font-style: italic;
  font-size: 17px;
  color: var(--ink);
}
.um-mini-x {
  appearance: none; border: 0; background: transparent;
  font-size: 22px; line-height: 1; padding: 2px 8px;
  color: var(--ink-40); cursor: pointer; border-radius: 5px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.um-mini-x:hover { background: var(--ink-04); color: var(--ink); }
.um-mini-body { padding: 12px 16px 16px; font-size: 13px; line-height: 1.5; color: var(--ink-80); }
.um-mini-row { padding: 7px 0; }
.um-mini-row label { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.um-mini-row input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--accent); }
.um-mini-link {
  display: block; padding: 9px 10px; margin: 4px 0;
  background: var(--ink-04); border-radius: 6px;
  color: var(--ink); text-decoration: none; font-size: 13px;
  transition: background var(--dur) var(--ease);
}
.um-mini-link:hover { background: var(--ink-08); }
.um-mini-foot {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--ink-08);
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-40); letter-spacing: 0.02em;
}

/* toast */
.um-toast {
  position: fixed; left: 50%; bottom: 32px;
  transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  box-shadow: 0 12px 28px -8px rgba(20,20,26,0.40);
  z-index: 1000;
  animation: umIn var(--dur) var(--ease);
}
.um-toast.is-out { animation: umOut var(--dur) var(--ease) forwards; }
@keyframes umOut {
  to { opacity: 0; transform: translateX(-50%) translateY(8px); }
}

/* ============================================================
   v5.9 — .view-back 浮动返回按钮 (auto-injected by setView)
   ============================================================ */
.view-back {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 40;
  appearance: none;
  border: 1px solid var(--ink-08);
  background: var(--paper);
  color: var(--ink-60);
  padding: 6px 11px 6px 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 2px 8px -2px rgba(20,20,26,0.08);
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.view-back:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateX(-2px); }
.view-back svg { width: 13px; height: 13px; stroke: currentColor; }
.view-back .vb-lbl { font-family: var(--font-mono); }
/* views that have their own native back/header — suppress auto-inject */
.view-chat .view-back { display: none; }
/* view container needs relative for absolute back */
.view-creator-profile, .view-app-detail, .view-onboard, .view-dataroom,
.view-workflow-case, .view-brand-studio, .view-arch-studio, .view-discovery-os,
.view-brand-chat, .view-arch-chat, .view-discovery-chat { position: relative; }

/* v5.9 — Studio header 详情按钮 (bs-/as-/ds-h-detail 共享样式) */
.bs-h-detail, .as-h-detail, .ds-h-detail {
  appearance: none;
  background: transparent;
  border: 1px solid var(--ink-08);
  color: var(--ink-60);
  padding: 4px 9px 4px 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.bs-h-detail svg, .as-h-detail svg, .ds-h-detail svg {
  width: 12px; height: 12px;
}
.bs-h-detail:hover, .as-h-detail:hover, .ds-h-detail:hover {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* ============================================================
   v5.10.2 — Sample card caption + "看示例" modal
   ============================================================ */
.sample-card-caption {
  position: absolute;
  bottom: 14px; left: 14px; right: 14px;
  display: flex; flex-direction: column; gap: 3px;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-80);
  background: rgba(251, 249, 244, 0.92);
  border-radius: 8px;
  padding: 8px 10px;
  backdrop-filter: blur(6px);
}
.sample-card-caption strong {
  font-family: var(--font-display); font-style: italic;
  font-weight: 600; font-size: 13px;
}
.sample-card-caption .dim {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-60);
  letter-spacing: 0.02em;
}

/* Sample modal — 弹出展示放大产物 + 元信息 + 立即运行 CTA */
.sample-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 20, 26, 0.45);
  display: grid; place-items: center;
  z-index: 1000;
  animation: umIn var(--dur) var(--ease);
  padding: 24px;
}
.sample-modal-card {
  background: var(--paper);
  border-radius: 16px;
  width: min(560px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  padding: 32px 32px 28px;
  position: relative;
  border: 1px solid var(--ink-08);
  box-shadow: 0 28px 60px -16px rgba(20,20,26,0.32);
}
.sample-modal-x {
  position: absolute; top: 14px; right: 16px;
  appearance: none; border: 0; background: transparent;
  font-size: 28px; line-height: 1; padding: 4px 10px;
  color: var(--ink-40); cursor: pointer; border-radius: 6px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sample-modal-x:hover { background: var(--ink-04); color: var(--ink); }
.sample-modal-eyebrow {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--accent); letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.sample-modal-h {
  font-family: var(--font-display); font-style: italic;
  font-size: 26px; line-height: 1.2; font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink);
  margin: 0 0 8px;
}
.sample-modal-sub {
  font-size: 13.5px; line-height: 1.55; color: var(--ink-60);
  margin: 0 0 22px;
}
.sample-modal-art {
  background: var(--bone-2);
  border-radius: 12px;
  padding: 24px;
  display: grid; place-items: center;
  border: 1px solid var(--seam);
  margin-bottom: 18px;
}
.sample-modal-art svg { width: 100%; max-height: 240px; }
.sample-modal-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
  font-size: 12.5px;
  border-top: 1px dashed var(--ink-08);
  padding-top: 14px;
  margin-bottom: 18px;
}
.sample-modal-meta .sm-meta-row {
  display: flex; justify-content: space-between; gap: 8px;
}
.sample-modal-meta .sm-k {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-40); letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sample-modal-meta .sm-v {
  font-weight: 600; color: var(--ink); text-align: right;
}
.sample-modal-cta {
  display: flex; gap: 10px;
}
.sample-modal-cta .ad-cta { flex: 1; }

/* ============================================================
   v5.10.3 — Real per-mini-app sample renderers
   每个 mini-app 真实样品 — 含真名/真数据/真内容, 不再是 wireframe
   ============================================================ */

/* container override — let sample fill the card (覆盖原 svg-only place-items center) */
.sample-card.has-real-sample {
  padding: 0;
  display: block;
  background: var(--paper);
  aspect-ratio: auto;
  min-height: 320px;
}
.sample-card.has-real-sample svg { width: auto; max-height: none; }
.sample-card.has-real-sample .corner-mark { z-index: 5; }
.sample-modal-art.has-real-sample {
  background: var(--paper);
  padding: 0;
  border: 1px solid var(--ink-08);
  max-height: 500px;
  overflow-y: auto;
}
.sample-modal-art.has-real-sample svg { max-height: none; }

/* base sample container */
.app-sample {
  padding: 18px 18px 56px;  /* bottom 56px reserves space for sample-card-caption */
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink);
  text-align: left;
}
.sample-modal-art .app-sample { padding: 22px 22px 18px; gap: 12px; font-size: 13px; }
.app-sample .as-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px dashed var(--ink-08);
  padding-bottom: 6px;
}
.app-sample .as-h {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 2px 0 0;
}
.app-sample .as-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-60);
  letter-spacing: 0.03em;
  margin-top: -4px;
}
.app-sample .as-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-80);
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 10px;
  margin: 4px 0;
}

/* axis bar (used by persona, therapist) */
.app-sample .as-axes, .app-sample .as-mood-axes {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bone);
  padding: 8px 10px;
  border-radius: 6px;
}
.app-sample .as-axis, .app-sample .amx {
  display: grid; grid-template-columns: 40px 1fr 26px; gap: 8px; align-items: center;
  font-size: 10.5px;
}
.app-sample .as-axis .al, .app-sample .amx .al {
  color: var(--ink-60); font-family: var(--font-mono); letter-spacing: 0.04em;
}
.app-sample .as-axis .ab, .app-sample .amx .ab {
  height: 5px; background: var(--ink-08); border-radius: 3px; overflow: hidden;
}
.app-sample .as-axis .ab > span, .app-sample .amx .ab > span {
  display: block; height: 100%; background: var(--accent); border-radius: 3px;
}
.app-sample .as-axis .an, .app-sample .amx .an {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-80); text-align: right; font-weight: 600;
}

/* persona objections */
.app-sample .as-objs { display: flex; flex-wrap: wrap; gap: 5px; }
.app-sample .ao {
  font-size: 10.5px;
  background: rgba(193,61,95,0.10);
  color: var(--rose);
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid rgba(193,61,95,0.20);
}

/* brand kit specific */
.sample-brandkit .as-bk-head {
  display: flex; align-items: center; gap: 12px;
}
.sample-brandkit .as-logo {
  width: 44px; height: 44px; border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 22px;
}
.sample-brandkit .bn { font-family: var(--font-display); font-style: italic; font-size: 18px; font-weight: 600; }
.sample-brandkit .bs { font-family: var(--font-display); font-style: italic; font-size: 12px; color: var(--ink-60); }
.sample-brandkit .as-palette {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  height: 38px;
}
.sample-brandkit .as-palette span {
  border-radius: 4px;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 3px;
  color: rgba(255,255,255,0.85);
}
.sample-brandkit .as-palette span i {
  font-family: var(--font-mono); font-size: 8px; font-style: normal;
  letter-spacing: 0.02em;
}
.sample-brandkit .as-fonts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  background: var(--bone); padding: 8px 10px; border-radius: 6px;
}
.sample-brandkit .af { display: flex; flex-direction: column; gap: 2px; }
.sample-brandkit .af .al { font-family: var(--font-mono); font-size: 9px; color: var(--ink-40); letter-spacing: 0.06em; }
.sample-brandkit .af .av { font-size: 14px; color: var(--ink); }
.sample-brandkit .as-voice { display: flex; flex-wrap: wrap; gap: 5px; }
.sample-brandkit .as-voice span {
  font-family: var(--font-mono); font-size: 10px;
  background: var(--accent-soft); color: var(--accent);
  padding: 2px 8px; border-radius: 3px; letter-spacing: 0.04em;
}

/* architect (stack) */
.sample-architect .as-stack {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
}
.sample-architect .asn {
  background: var(--bone); border: 1px solid var(--ink-08);
  padding: 6px 7px; border-radius: 5px;
  display: flex; flex-direction: column;
}
.sample-architect .asn strong { font-size: 11px; font-weight: 600; }
.sample-architect .asn small { font-family: var(--font-mono); font-size: 8.5px; color: var(--ink-40); letter-spacing: 0.04em; }
.sample-architect .asn-ai { background: var(--accent-soft); border-color: rgba(209,74,36,0.30); }
.sample-architect .asn-ai strong { color: var(--accent); }
.sample-architect .as-cost {
  display: flex; align-items: baseline; justify-content: space-between;
  background: var(--ink); color: var(--paper);
  padding: 8px 12px; border-radius: 6px;
}
.sample-architect .ac-l { font-family: var(--font-mono); font-size: 10px; opacity: 0.7; }
.sample-architect .ac-v { font-family: var(--font-mono); font-size: 18px; font-weight: 600; }
.sample-architect .as-flow {
  font-size: 11px; color: var(--ink-60);
  border-left: 2px solid var(--sea); padding-left: 8px;
}

/* pitch score */
.sample-pitchscore .as-score-row {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px;
  align-items: center;
}
.sample-pitchscore .as-score {
  display: flex; flex-direction: column; align-items: center;
  background: var(--ink); color: var(--paper);
  padding: 14px; border-radius: 8px;
}
.sample-pitchscore .as-score-num {
  font-family: var(--font-display); font-style: italic;
  font-size: 36px; font-weight: 600; line-height: 1;
}
.sample-pitchscore .as-score-num .ssn-d { font-size: 14px; opacity: 0.6; }
.sample-pitchscore .as-score-grade {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--accent); color: var(--paper);
  padding: 2px 8px; border-radius: 3px;
  margin-top: 6px;
}
.sample-pitchscore .as-radar { width: 100%; max-height: 140px; }
.sample-pitchscore .as-radar-legend {
  display: flex; flex-wrap: wrap; gap: 4px; font-family: var(--font-mono); font-size: 10px;
}
.sample-pitchscore .as-radar-legend span {
  background: var(--bone); padding: 2px 7px; border-radius: 3px;
  color: var(--ink-60);
}
.sample-pitchscore .as-onething {
  background: rgba(209,74,36,0.08); border: 1px solid rgba(209,74,36,0.25);
  padding: 8px 10px; border-radius: 5px;
  display: flex; flex-direction: column; gap: 2px;
}
.sample-pitchscore .ao-l { font-family: var(--font-mono); font-size: 10px; color: var(--accent); letter-spacing: 0.05em; }
.sample-pitchscore .ao-v { font-size: 11.5px; color: var(--ink); font-weight: 500; }

/* deck slide */
.sample-deck .as-slide {
  background: linear-gradient(135deg, #1F5673 0%, #14141A 100%);
  color: white;
  padding: 18px 18px 12px;
  border-radius: 8px;
  aspect-ratio: 16/9.5;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.sample-deck .as-slide-eye {
  font-family: var(--font-mono); font-size: 9px;
  color: rgba(255,255,255,0.55); letter-spacing: 0.10em; text-transform: uppercase;
}
.sample-deck .as-slide-h {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; font-weight: 600; line-height: 1.1;
  margin: 0; color: white;
}
.sample-deck .as-slide-h em { color: #D14A24; }
.sample-deck .as-slide-sub {
  font-size: 11px; line-height: 1.4; color: rgba(255,255,255,0.78);
  margin: 0;
}
.sample-deck .as-slide-icons {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.sample-deck .as-icon {
  background: rgba(255,255,255,0.08);
  padding: 6px 8px; border-radius: 4px;
  display: flex; flex-direction: column; gap: 1px;
}
.sample-deck .as-icon strong {
  font-family: var(--font-display); font-style: italic; font-size: 18px; color: #D14A24;
}
.sample-deck .as-icon small {
  font-family: var(--font-mono); font-size: 8.5px;
  color: rgba(255,255,255,0.55); letter-spacing: 0.04em;
}
.sample-deck .as-slide-foot {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 9px;
  color: rgba(255,255,255,0.50);
}

/* therapist orb */
.sample-therapist .as-orb-wrap {
  background: #14141A;
  border-radius: 8px;
  padding: 6px;
}
.sample-therapist .as-orb-wrap svg { width: 100%; height: auto; }
.sample-therapist .as-reflect {
  font-family: var(--font-display); font-style: italic;
  font-size: 12.5px; line-height: 1.45;
  color: var(--ink-80);
  border-left: 2px solid #7C5CFF; padding: 4px 0 4px 10px;
  margin: 0;
}

/* mag cover */
.sample-magcover .as-cover {
  background: #14141A;
  border: 3px solid #D14A24;
  border-radius: 4px;
  padding: 14px 16px;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 8px;
  aspect-ratio: 3/4;
  position: relative;
}
.sample-magcover .as-cover-eye {
  font-family: var(--font-mono); font-size: 9px;
  color: #D14A24; letter-spacing: 0.13em;
  text-align: center;
}
.sample-magcover .as-cover-photo {
  width: 80px; height: 80px;
  background: rgba(255,255,255,0.10);
  color: white;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-style: italic;
  font-size: 38px;
}
.sample-magcover .as-cover-name {
  font-family: var(--font-display); font-style: italic;
  font-size: 24px; color: white;
}
.sample-magcover .as-cover-sub {
  font-family: var(--font-display); font-style: italic;
  font-size: 11px; color: rgba(255,255,255,0.65);
  text-align: center;
}
.sample-magcover .as-cover-foot {
  font-family: var(--font-mono); font-size: 8px;
  color: rgba(255,255,255,0.45); letter-spacing: 0.10em;
  margin-top: auto;
}

/* ink page */
.sample-inkpage .as-page {
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.sample-inkpage .as-page-h {
  font-family: var(--font-mono); font-size: 9.5px;
  color: var(--ink-40); letter-spacing: 0.05em;
  padding-bottom: 6px; border-bottom: 1px dashed var(--ink-08);
}
.sample-inkpage .as-page-title {
  font-family: var(--font-display); font-style: italic;
  font-size: 18px; font-weight: 600; line-height: 1.2;
  margin: 0; color: var(--ink);
}
.sample-inkpage .as-page-meta {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-60); letter-spacing: 0.02em;
}
.sample-inkpage .as-page-body {
  font-size: 11.5px; line-height: 1.5; color: var(--ink-80);
}
.sample-inkpage .as-page-body p { margin: 0 0 6px; }
.sample-inkpage .as-page-body blockquote {
  font-family: var(--font-display); font-style: italic;
  font-size: 13px;
  border-left: 2px solid var(--accent);
  padding-left: 9px; margin: 6px 0;
  color: var(--ink);
}

/* style mirror */
.sample-stylemirror .as-mirror {
  display: grid;
  grid-template-columns: 1fr 18px 1fr;
  gap: 8px;
  align-items: stretch;
}
.sample-stylemirror .as-mirror-side {
  padding: 10px 11px;
  border-radius: 6px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px;
  line-height: 1.4;
}
.sample-stylemirror .as-before {
  background: var(--bone); color: var(--ink-60);
  border: 1px solid var(--ink-08);
}
.sample-stylemirror .as-after {
  background: rgba(193,61,95,0.06);
  border: 1px solid rgba(193,61,95,0.25);
  color: var(--ink-80);
}
.sample-stylemirror .ams-tag {
  font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: 0.08em; opacity: 0.7;
}
.sample-stylemirror .as-before .ams-tag { color: var(--ink-60); }
.sample-stylemirror .as-after .ams-tag { color: var(--rose); }
.sample-stylemirror .as-mirror-side p { margin: 0; }
.sample-stylemirror .as-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.sample-stylemirror .as-tags span {
  font-family: var(--font-mono); font-size: 9.5px;
  color: var(--rose);
}
.sample-stylemirror .as-mirror-arrow {
  display: grid; place-items: center;
  font-size: 18px; color: var(--ink-30);
}

/* dossier */
.sample-dossier .as-doc {
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: 6px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.sample-dossier .as-doc-h {
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px dashed var(--ink-08); padding-bottom: 8px;
}
.sample-dossier .as-doc-logo {
  width: 36px; height: 36px;
  background: var(--ink); color: var(--paper);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-style: italic;
  font-size: 18px; font-weight: 700;
}
.sample-dossier .as-doc h3 {
  margin: 0;
  font-family: var(--font-display); font-style: italic;
  font-size: 17px;
}
.sample-dossier .as-doc-meta {
  font-family: var(--font-mono); font-size: 9.5px;
  color: var(--ink-40); letter-spacing: 0.03em;
}
.sample-dossier .as-doc-toc {
  margin: 0; padding-left: 18px;
  font-size: 11px; line-height: 1.6;
  color: var(--ink-80);
}
.sample-dossier .as-doc-cite {
  font-family: var(--font-mono); font-size: 9.5px;
  color: var(--sea); letter-spacing: 0.03em;
  border-top: 1px dashed var(--ink-08); padding-top: 6px;
}

/* ============================================================
   v6.0 Hero strip + Why now + vs grid + Success strip
   ============================================================ */
.lh-hero6 {
  padding: 20px 0 10px;
  margin-bottom: 18px;
  border-bottom: 1px dashed var(--ink-08);
}
.lh-hero6-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: var(--accent);
  margin-bottom: 10px;
}
.lh-hero6-title {
  font-family: var(--font-display, "Instrument Serif", serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0 0 12px;
  color: var(--ink);
}
.lh-hero6-title em {
  font-style: italic;
  color: var(--accent);
}
.lh-hero6-sub {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-80);
  max-width: 620px;
  margin: 0 0 16px;
}
.lh-hero6-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--seam);
  border-bottom: 1px solid var(--seam);
  padding: 16px 0;
  margin-bottom: 22px;
}
.lh-hero6-stats .hs {
  padding: 0 22px;
  border-left: 1px solid var(--seam);
}
.lh-hero6-stats .hs:first-child { border-left: 0; padding-left: 0; }
.lh-hero6-stats strong {
  display: block;
  font-family: var(--font-display, "Instrument Serif", serif);
  font-style: italic;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1;
}
.lh-hero6-stats span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-40);
  letter-spacing: 0.06em;
  margin-top: 6px;
  text-transform: uppercase;
}
.lh-hero6-row { display: flex; gap: 12px; flex-wrap: wrap; }
.lh-hero6-cta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.lh-hero6-cta:hover { transform: translateY(-1px); }
.lh-hero6-cta.ghost { background: transparent; color: var(--ink); }
.lh-hero6-cta.ghost:hover { background: var(--ink-04); }
/* v6.12: status note under hero CTAs (replaces inflated stats block) */
.lh-hero6-note {
  margin-top: 14px;
  padding: 8px 12px;
  background: rgba(184,137,58,0.06);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  font: 12px/1.55 var(--font-mono);
  color: var(--ink-80);
  letter-spacing: 0.02em;
  max-width: 640px;
}
@media (max-width: 720px) {
  .lh-hero6-stats { grid-template-columns: repeat(2, 1fr); }
  .lh-hero6-stats .hs { padding: 12px; border-left: 1px solid var(--seam); border-top: 0; }
  .lh-hero6-stats .hs:nth-child(3) { border-left: 0; }
}

/* Why now timeline */
.lh-whynow {
  padding: 18px 0 0;
  margin-bottom: 32px;
}
.wn-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
}
.wn-step {
  background: var(--ink-04);
  border: 1px solid var(--seam);
  border-radius: 12px;
  padding: 18px 18px 20px;
  position: relative;
}
.wn-step.is-now {
  background: var(--paper);
  border: 1px solid var(--accent);
  box-shadow: 0 0 0 4px rgba(209,74,36,0.06);
}
.wn-step.is-now::after {
  content: "NOW";
  position: absolute;
  top: -10px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  background: var(--accent);
  color: var(--paper);
  padding: 3px 8px;
  border-radius: 999px;
}
.wn-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-40);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.wn-title {
  font-family: var(--font-display, "Instrument Serif", serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.wn-line {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-80);
}
.wn-arr {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--ink-40);
  align-self: center;
  padding: 0 4px;
}
.lh-whynow-foot {
  margin-top: 14px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-40);
  letter-spacing: 0.04em;
}
@media (max-width: 880px) {
  .wn-row { grid-template-columns: 1fr; }
  .wn-arr { display: none; }
}

/* vs grid */
.lh-vs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 32px;
}
.vs-card {
  background: var(--ink-04);
  border: 1px solid var(--seam);
  border-radius: 12px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vs-card.is-us {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}
.vs-card.is-us .vs-h,
.vs-card.is-us .vs-form,
.vs-card.is-us .vs-ship,
.vs-card.is-us .vs-creator,
.vs-card.is-us .vs-verdict { color: var(--paper); }
.vs-h {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--ink-40);
  text-transform: uppercase;
}
.vs-card.is-us .vs-h { color: var(--gold); opacity: 1; }
.vs-form {
  font-family: var(--font-display, "Instrument Serif", serif);
  font-style: italic;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.vs-ship,
.vs-creator {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-80);
  line-height: 1.45;
}
.vs-verdict {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding-top: 8px;
  border-top: 1px dashed var(--ink-08);
}
.vs-card.is-us .vs-verdict {
  color: var(--gold);
  border-top-color: rgba(251,249,244,0.15);
}
@media (max-width: 880px) {
  .lh-vs-grid { grid-template-columns: 1fr 1fr; }
}

/* Success strip */
.lh-success {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}
.lh-suc {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--seam);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lh-suc:hover { transform: translateY(-2px); border-color: var(--accent); }
.lh-suc-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display, "Instrument Serif", serif);
  font-style: italic;
  font-size: 22px;
  color: var(--paper);
}
.lh-suc-av.tint-gold { background: var(--gold); }
.lh-suc-av.tint-rose { background: var(--rose); }
.lh-suc-av.tint-sea  { background: var(--sea);  }
.lh-suc-name {
  font-family: var(--font-display, "Instrument Serif", serif);
  font-style: italic;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lh-suc-name .lh-suc-app {
  font-family: var(--font-mono);
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink-40);
  margin-left: 6px;
}
.lh-suc-line {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-80);
  margin-top: 2px;
}
.lh-suc-line em {
  font-family: var(--font-mono);
  font-style: normal;
  color: var(--accent);
  font-weight: 600;
}
.lh-suc-num {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--accent);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 880px) {
  .lh-success { grid-template-columns: 1fr; }
}

/* ============================================================
   v6.0 VC Tour overlay (press T to start)
   ============================================================ */
.vct-overlay {
  position: fixed; inset: 0;
  z-index: 10000;
  pointer-events: none;
}
body.vct-on { overflow: hidden; }
.vct-spot {
  position: absolute;
  border: 2px solid var(--accent);
  border-radius: 12px;
  box-shadow:
    0 0 0 9999px rgba(20,20,26,0.62),
    0 12px 36px rgba(209,74,36,0.30);
  transition: all 0.45s cubic-bezier(0.34, 1.16, 0.64, 1);
  opacity: 0;
  pointer-events: none;
}
.vct-panel {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  width: min(620px, calc(100vw - 48px));
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: 14px;
  padding: 22px 26px 18px;
  box-shadow: 0 24px 60px rgba(20,20,26,0.32);
  pointer-events: auto;
}
.vct-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.vct-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.vct-progress {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-40);
}
.vct-title {
  margin: 0 0 6px;
  font-family: var(--font-display, "Instrument Serif", serif);
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.vct-body {
  margin: 0 0 14px;
  font: 13.5px/1.6 var(--font-sans);
  color: var(--ink-80);
}
.vct-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.vct-btn {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  background: transparent;
  border: 1px solid var(--ink-08);
  color: var(--ink);
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.vct-btn:hover { background: var(--ink-04); }
.vct-btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.vct-btn.primary:hover { background: var(--ink); transform: translateY(-1px); }
.vct-btn.ghost { color: var(--ink-40); }

/* Tour-launch pill — clickable button (v6.11) */
.vct-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  background: rgba(209,74,36,0.10);
  color: var(--accent);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(209,74,36,0.30);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.vct-hint:hover {
  background: var(--accent);
  color: var(--paper);
  transform: translateY(-1px);
}
.vct-hint:hover kbd {
  background: var(--paper);
  color: var(--accent);
}
.vct-hint kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--accent);
  color: var(--paper);
  padding: 1px 5px;
  border-radius: 4px;
  transition: all var(--dur) var(--ease);
}

/* ============================================================
   v6.0 Dataroom additions (TAM / Unit econ / Cohort / Why now / vs)
   ============================================================ */
.dr-card-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-40);
  letter-spacing: 0.05em;
  margin-left: 12px;
}

/* TAM table */
.dr-tam-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--seam);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}
.dr-tam-row {
  display: grid;
  grid-template-columns: 2.4fr 1fr 1.6fr 1fr 1.2fr;
  gap: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--seam);
  font: 12.5px var(--font-sans);
  color: var(--ink-80);
  align-items: center;
}
.dr-tam-row:first-child { border-top: 0; }
.dr-tam-row .r { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.dr-tam-row.dr-tam-head {
  background: var(--ink-04);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-40);
  text-transform: uppercase;
}
.dr-tam-row.dr-tam-sum {
  background: rgba(209,74,36,0.06);
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent);
}
.dr-tam-row.dr-tam-sum .r { color: var(--accent); font-size: 14px; }
.dr-tam-note {
  font: 11.5px/1.6 var(--font-mono);
  color: var(--ink-40);
  margin: 4px 0 0;
  padding: 8px 12px;
  background: var(--ink-04);
  border-radius: 6px;
}

/* Unit economics grid */
.dr-ue-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.dr-ue {
  background: var(--ink-04);
  border: 1px solid var(--seam);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dr-ue-h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.dr-ue-stats {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font: 12.5px var(--font-mono);
  color: var(--ink-80);
}
.dr-ue-stats em {
  font-style: normal;
  color: var(--ink);
  font-weight: 600;
  margin-left: 6px;
  float: right;
  font-variant-numeric: tabular-nums;
}
.dr-ue-stats span { display: flex; justify-content: space-between; }
.dr-ue-note {
  font: 11.5px/1.5 var(--font-sans);
  color: var(--ink-40);
  margin: 4px 0 0;
}
@media (max-width: 880px) { .dr-ue-grid { grid-template-columns: 1fr 1fr; } }

/* Cohort SVG */
.dr-cohort-svg { width: 100%; height: 240px; display: block; }
.dr-cohort-svg .grid line { stroke: var(--ink-08); stroke-width: 1; }
.dr-cohort-svg .curve { fill: none; stroke-width: 2; }
.dr-cohort-svg .curve.c1 { stroke: var(--ink-40); opacity: 0.55; stroke-dasharray: 4,4; }
.dr-cohort-svg .curve.c2 { stroke: var(--ink-80); }
.dr-cohort-svg .curve.c3 { stroke: var(--accent); stroke-width: 2.5; }
.dr-cohort-legend {
  display: flex; gap: 22px; flex-wrap: wrap;
  font: 11.5px var(--font-mono); color: var(--ink-80);
  padding: 10px 0 0;
}
.dr-cohort-legend .d {
  display: inline-block; width: 14px; height: 2px; vertical-align: middle;
  margin-right: 6px;
}
.dr-cohort-legend .d.c1 { background: var(--ink-40); }
.dr-cohort-legend .d.c2 { background: var(--ink-80); }
.dr-cohort-legend .d.c3 { background: var(--accent); height: 3px; }
.dr-cohort-legend em { color: var(--accent); font-style: normal; font-weight: 700; }
.dr-cohort-note {
  font: 12px/1.55 var(--font-sans);
  color: var(--ink-80);
  margin: 12px 0 0;
}

/* Why invest blocks */
.dr-why { display: flex; flex-direction: column; gap: 14px; }
.dr-why-block {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  padding: 14px 16px;
  background: var(--ink-04);
  border-radius: 10px;
  border-left: 3px solid var(--accent);
}
.dr-why-num {
  font-family: var(--font-display, "Instrument Serif", serif);
  font-style: italic;
  font-size: 38px;
  color: var(--accent);
  line-height: 1;
}
.dr-why-block h4 {
  margin: 0 0 4px;
  font-family: var(--font-display, "Instrument Serif", serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
}
.dr-why-block p {
  margin: 0;
  font: 12.5px/1.6 var(--font-sans);
  color: var(--ink-80);
}

/* vs Lovable table */
.dr-vs-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--seam);
  border-radius: 10px;
  overflow: hidden;
}
.dr-vs-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr 1.4fr;
  gap: 0;
  border-top: 1px solid var(--seam);
  padding: 11px 14px;
  font: 12.5px/1.4 var(--font-sans);
  color: var(--ink-80);
  align-items: center;
}
.dr-vs-row:first-child { border-top: 0; }
.dr-vs-row.dr-vs-head {
  background: var(--ink-04);
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  color: var(--ink-40);
  letter-spacing: 0.08em;
}
.dr-vs-row > span:first-child {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-40);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dr-vs-row .us {
  background: rgba(209,74,36,0.06);
  color: var(--accent);
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  margin: -8px -12px;
}
.dr-vs-row.dr-vs-head .us { color: var(--accent); }
.dr-vs-row.dr-vs-verdict {
  background: rgba(209,74,36,0.04);
  font-family: var(--font-display, "Instrument Serif", serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
}
.dr-vs-row.dr-vs-verdict .us {
  font-style: italic;
  font-weight: 700;
}
@media (max-width: 940px) {
  .dr-vs-row { grid-template-columns: 1fr; }
  .dr-vs-row > span:first-child { padding: 4px 0; }
  .dr-vs-row .us { margin: 6px 0 0; }
  .dr-tam-row { grid-template-columns: 1fr; padding: 8px 12px; gap: 2px; }
  .dr-tam-row.dr-tam-head { display: none; }
  .dr-tam-row .r { text-align: left; font-weight: 600; color: var(--accent); }
}

/* ============================================================
   v6.0 Workflow case · RPG quest bar + per-day CTA
   ============================================================ */
.wfc-quest-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 24px;
  border-radius: 0 0 14px 14px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(20,20,26,0.18);
}
.wfc-qb-l { display: flex; gap: 12px; align-items: center; }
.wfc-qb-emoji { font-size: 18px; }
.wfc-qb-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.wfc-qb-progress {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--paper);
  opacity: 0.7;
  letter-spacing: 0.04em;
}
.wfc-qb-progress strong {
  color: var(--gold);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.wfc-qb-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  height: 44px;
}
.wfc-qb-rail {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 50%;
  height: 2px;
  background: rgba(251,249,244,0.18);
  transform: translateY(-50%);
}
.wfc-qb-fill {
  position: absolute;
  left: 30px;
  top: 50%;
  height: 2px;
  background: var(--gold);
  transform: translateY(-50%);
  transition: width 0.5s cubic-bezier(0.34, 1.16, 0.64, 1);
  max-width: calc(100% - 60px);
}
.wfc-qb-node {
  position: relative;
  z-index: 2;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font: 9.5px/1 var(--font-mono);
  color: rgba(251,249,244,0.45);
  letter-spacing: 0.06em;
}
.wfc-qb-node em {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(251,249,244,0.30);
  background: var(--ink);
  color: rgba(251,249,244,0.50);
  font: 700 10.5px var(--font-mono);
  font-style: normal;
  margin-bottom: 4px;
  transition: all var(--dur) var(--ease);
}
.wfc-qb-node:hover em { transform: scale(1.12); border-color: var(--gold); color: var(--gold); }
.wfc-qb-node.is-done em {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.wfc-qb-node.is-done { color: var(--gold); }
.wfc-qb-node.is-active em {
  border-color: var(--accent);
  color: var(--accent);
  animation: wfc-pulse 1.4s infinite;
}
.wfc-qb-node.is-active { color: var(--accent); }
@keyframes wfc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(209,74,36,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(209,74,36,0); }
}
.wfc-qb-reset {
  background: transparent;
  border: 1px solid rgba(251,249,244,0.25);
  color: var(--paper);
  font: 10.5px var(--font-mono);
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.7;
}
.wfc-qb-reset:hover { opacity: 1; border-color: var(--gold); color: var(--gold); }

/* Per-day click-into-mini-app CTA */
.wfc-day-cta {
  margin-top: 14px;
  font: 500 12px var(--font-mono);
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.wfc-day-cta:hover { transform: translateY(-1px); background: var(--accent); }

@media (max-width: 820px) {
  .wfc-quest-bar { grid-template-columns: 1fr; gap: 10px; }
  .wfc-qb-track { height: 38px; }
}

/* ============================================================
   v6.0 Data-flow network view
   ============================================================ */
.view-dataflow .df-root,
.view-why-now .wny {
  width: 100%;
  padding: 28px 40px 64px;
  max-width: 1180px;
  margin: 0 auto;
}
.df-h { display: grid; grid-template-columns: 1fr auto; gap: 24px; padding-bottom: 18px; margin-bottom: 16px; border-bottom: 1px dashed var(--ink-08); }
.df-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
}
.df-title {
  margin: 6px 0 4px;
  font-family: var(--font-display, "Instrument Serif", serif);
  font-style: italic;
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.01em;
}
.df-sub {
  margin: 0;
  font: 13px/1.55 var(--font-sans);
  color: var(--ink-80);
  max-width: 640px;
}
.df-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-self: end;
}
.df-lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 10.5px var(--font-mono);
  color: var(--ink-80);
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ink-04);
}
.df-lg i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-40);
}
.df-lg-strategy i { background: var(--iris); }
.df-lg-builder i  { background: var(--sea);  }
.df-lg-creator i  { background: var(--gold); }
.df-lg-life i     { background: var(--rose); }

.df-stage {
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 18px;
  min-height: 720px;
}
.df-svg {
  width: 100%;
  height: 720px;
  background: var(--ink-04);
  border-radius: 14px;
  border: 1px solid var(--seam);
}
.df-edges path, .df-edges-hl path {
  fill: none;
  stroke: rgba(20,20,26,0.18);
  stroke-width: 1.2;
  transition: stroke var(--dur) var(--ease), stroke-width var(--dur) var(--ease);
}
.df-edges path.is-hl { stroke: var(--accent); stroke-width: 2; opacity: 0.95; }
.df-edges-hl path { stroke: var(--accent); stroke-width: 2.4; opacity: 0.95; }
.df-node { cursor: pointer; transition: opacity var(--dur) var(--ease); }
.df-node circle.df-node-bg {
  fill: var(--paper);
  stroke: var(--ink-08);
  stroke-width: 1.5;
  transition: stroke var(--dur) var(--ease), fill var(--dur) var(--ease);
}
.df-node circle.df-node-ring {
  fill: none;
  stroke: transparent;
  stroke-width: 2;
  transition: stroke var(--dur) var(--ease), r var(--dur) var(--ease);
}
.df-node text.df-node-id {
  font: 700 11.5px var(--font-mono);
  fill: var(--ink);
  letter-spacing: 0.04em;
}
.df-node text.df-node-l {
  font: 500 10.5px var(--font-mono);
  fill: var(--ink-80);
  letter-spacing: 0.04em;
}
.df-cat-strategy circle.df-node-bg { fill: rgba(155,124,255,0.10); }
.df-cat-builder  circle.df-node-bg { fill: rgba(31,86,115,0.10); }
.df-cat-creator  circle.df-node-bg { fill: rgba(184,137,58,0.10); }
.df-cat-life     circle.df-node-bg { fill: rgba(193,61,95,0.10); }
.df-node:hover circle.df-node-bg,
.df-node.is-hl circle.df-node-bg {
  fill: var(--accent);
  stroke: var(--accent);
}
.df-node.is-hl circle.df-node-ring { stroke: var(--accent); }
.df-node:hover text.df-node-id,
.df-node.is-hl text.df-node-id { fill: var(--paper); }
.df-node.is-related circle.df-node-bg { stroke: var(--accent); }

/* Side panel */
.df-side {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 14px;
  padding: 18px 18px 22px;
  position: sticky;
  top: 24px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.df-side-empty {
  font: 12px var(--font-mono);
  color: var(--ink-40);
  text-align: center;
  padding: 60px 0;
  letter-spacing: 0.04em;
}
.df-side-h {
  font-family: var(--font-display, "Instrument Serif", serif);
  font-style: italic;
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.df-side-cat {
  font: 9.5px var(--font-mono);
  color: var(--accent);
  letter-spacing: 0.12em;
  font-style: normal;
}
.df-side-block h4 {
  margin: 0 0 6px;
  font: 500 10.5px var(--font-mono);
  color: var(--ink-40);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.df-side-block ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font: 12px/1.6 var(--font-sans);
  color: var(--ink-80);
}
.df-side-block li { padding: 3px 0; }
.df-side-block li strong { color: var(--ink); font-weight: 600; }
.df-side-block li em { color: var(--accent); font-style: normal; font-family: var(--font-mono); font-size: 11px; }
.df-side-block li.empty { color: var(--ink-40); font-style: italic; }
.df-side-cta {
  font: 500 12px var(--font-mono);
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  margin-top: 4px;
}
.df-side-cta:hover { background: var(--accent); }
.df-foot {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--ink-04);
  border-radius: 10px;
  font: 12px/1.6 var(--font-sans);
  color: var(--ink-80);
}
.df-foot a { color: var(--accent); text-decoration: none; font-family: var(--font-mono); font-size: 11.5px; margin-right: 14px; }
.df-foot code { font-family: var(--font-mono); font-size: 11.5px; background: var(--ink); color: var(--paper); padding: 1px 5px; border-radius: 3px; }
@media (max-width: 1080px) {
  .df-stage { grid-template-columns: 1fr; }
  .df-side { position: static; }
  .df-legend { justify-content: flex-start; }
}

/* ============================================================
   v6.0 Why-now standalone view
   ============================================================ */
.wny-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 14px;
}
.wny-eyebrow .dot { background: var(--accent); }
.wny-title {
  margin: 0 0 12px;
  font-family: var(--font-display, "Instrument Serif", serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.wny-title em { font-style: italic; color: var(--accent); }
.wny-lede {
  margin: 0 0 28px;
  font: 15.5px/1.55 var(--font-sans);
  color: var(--ink-80);
  max-width: 720px;
}
.wny-section { margin: 36px 0 16px; }
.wny-section h2 {
  font-family: var(--font-display, "Instrument Serif", serif);
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.wny-section h2 em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 13px;
  color: var(--ink-40);
  letter-spacing: 0.1em;
}
.wny-tl { display: flex; flex-direction: column; gap: 10px; }
.wny-tl-row {
  display: grid;
  grid-template-columns: 110px 200px 1fr;
  gap: 20px;
  padding: 14px 16px;
  background: var(--ink-04);
  border-radius: 10px;
  border-left: 3px solid var(--ink-08);
}
.wny-tl-row.is-now {
  background: rgba(209,74,36,0.06);
  border-left: 3px solid var(--accent);
}
.wny-tl-d { font: 11px var(--font-mono); color: var(--ink-40); letter-spacing: 0.08em; }
.wny-tl-t { font: italic 600 17px var(--font-display, serif); color: var(--ink); }
.wny-tl-b { font: 12.5px/1.6 var(--font-sans); color: var(--ink-80); }
.wny-tl-b em { color: var(--accent); font-style: italic; }

.wny-thesis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.wny-th {
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 12px;
}
.wny-th h4 {
  margin: 0 0 8px;
  font: italic 600 16px var(--font-display, serif);
  color: var(--ink);
}
.wny-th p { margin: 0; font: 12.5px/1.6 var(--font-sans); color: var(--ink-80); }

.wny-evidence {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.wny-ev {
  padding: 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 12px;
}
.wny-ev-n {
  font: italic 700 38px var(--font-display, serif);
  color: var(--gold);
  letter-spacing: -0.02em;
  line-height: 1;
}
.wny-ev-l {
  font: 500 11.5px var(--font-mono);
  color: rgba(251,249,244,0.95);
  letter-spacing: 0.04em;
  margin: 8px 0 6px;
}
.wny-ev-d { font: 11.5px/1.5 var(--font-sans); color: rgba(251,249,244,0.62); }

.wny-action {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wny-action li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--ink-04);
  border-radius: 10px;
}
.wny-action .num {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  font: 700 13px var(--font-mono);
}
.wny-action a {
  color: var(--ink);
  text-decoration: none;
  font: 13.5px/1.5 var(--font-sans);
}
.wny-action a:hover strong { color: var(--accent); }
.wny-action kbd { background: var(--ink); color: var(--paper); padding: 2px 6px; border-radius: 4px; font: 11px var(--font-mono); }

.wny-foot {
  margin-top: 36px;
  padding: 16px 20px;
  background: var(--ink-04);
  border-radius: 10px;
  font: 12px/1.6 var(--font-sans);
  color: var(--ink-80);
  text-align: center;
}
.wny-foot strong { color: var(--accent); }

@media (max-width: 900px) {
  .wny-tl-row { grid-template-columns: 1fr; gap: 6px; }
  .wny-thesis, .wny-evidence { grid-template-columns: 1fr; }
}

/* ============================================================
   v6.0 Plaza · trending + reply chain
   ============================================================ */
.plaza-trending {
  margin: 12px 0 18px;
  padding: 14px 16px;
  background: var(--ink-04);
  border-radius: 12px;
  border: 1px solid var(--seam);
}
.plaza-trending .pt-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--ink-08);
  margin-bottom: 10px;
}
.pt-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.pt-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-40);
}
.pt-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pt-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 10px;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--dur) var(--ease);
}
.pt-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.pt-tag {
  font: 9.5px var(--font-mono);
  letter-spacing: 0.12em;
  background: var(--accent);
  color: var(--paper);
  padding: 2px 8px;
  border-radius: 999px;
  align-self: flex-start;
}
.pt-card h4 {
  margin: 0;
  font: italic 600 14.5px/1.3 var(--font-display, serif);
  color: var(--ink);
}
.pt-card p {
  margin: 0;
  font: 12px/1.5 var(--font-sans);
  color: var(--ink-80);
}
.pt-foot {
  display: flex;
  gap: 6px;
  font: 10.5px var(--font-mono);
  color: var(--ink-40);
  letter-spacing: 0.04em;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--ink-08);
}
@media (max-width: 880px) { .pt-row { grid-template-columns: 1fr; } }

/* Reply chain */
.pp-replies {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--ink-08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pp-reply {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  padding: 8px 10px;
  background: var(--ink-04);
  border-radius: 8px;
}
.pp-reply.is-nested {
  margin-left: 32px;
  background: var(--paper);
  border-left: 2px solid var(--accent);
}
.pp-reply .av-sm {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font: 12px var(--font-mono);
  color: var(--ink);
}
.ppr-h {
  font: 11px var(--font-mono);
  color: var(--ink-40);
}
.ppr-h strong {
  color: var(--ink);
  font-weight: 600;
  font-family: var(--font-display, serif);
  font-style: italic;
  font-size: 13px;
  margin-right: 4px;
}
.ppr-h .ppr-time { margin-left: 4px; color: var(--ink-40); }
.ppr-body p {
  margin: 4px 0 0;
  font: 12.5px/1.55 var(--font-sans);
  color: var(--ink-80);
}
.pp-reply-more {
  align-self: flex-start;
  background: transparent;
  border: 1px dashed var(--ink-08);
  color: var(--ink-40);
  font: 11px var(--font-mono);
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  margin-top: 4px;
}
.pp-reply-more:hover { color: var(--accent); border-color: var(--accent); }

/* ============================================================
   v6.0 Creator A/B sub-section
   ============================================================ */
.cv-ab {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}
.cv-ab-card {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 12px;
  padding: 16px 18px;
}
.cv-ab-card.cv-ab-active {
  border-left: 3px solid var(--accent);
}
.cv-ab-card.cv-ab-done {
  background: var(--ink-04);
  opacity: 0.92;
}
.cv-ab-h {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--ink-08);
  margin-bottom: 10px;
}
.cv-ab-h h3 {
  margin: 0;
  font: italic 600 15px/1.3 var(--font-display, serif);
  color: var(--ink);
}
.cv-ab-tag {
  font: 9.5px var(--font-mono);
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 999px;
}
.cv-ab-tag.is-active { background: var(--accent); color: var(--paper); }
.cv-ab-tag.is-done { background: var(--ok); color: var(--paper); }
.cv-ab-tag.is-kill { background: var(--ink-40); }
.cv-ab-time {
  font: 11px var(--font-mono);
  color: var(--ink-40);
}
.cv-ab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cv-ab-col {
  padding: 12px 14px;
  background: var(--ink-04);
  border-radius: 8px;
}
.cv-ab-col.is-pick {
  background: rgba(209,74,36,0.06);
  border: 1px solid var(--accent);
}
.cv-ab-l {
  font: 500 11px var(--font-mono);
  color: var(--ink-40);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cv-ab-flag {
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 8px;
}
.cv-ab-stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px dashed var(--ink-08);
}
.cv-ab-stat:first-of-type { border-top: 0; }
.cv-ab-stat strong {
  font: 600 16px var(--font-mono);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cv-ab-stat span {
  font: 11px var(--font-mono);
  color: var(--ink-40);
}
.cv-ab-note {
  margin: 10px 0 0;
  font: 12px/1.6 var(--font-sans);
  color: var(--ink-80);
  padding: 8px 12px;
  background: var(--ink-04);
  border-radius: 6px;
}
.cv-ab-result {
  font: 12.5px/1.5 var(--font-sans);
  color: var(--ink-80);
  padding: 8px 0 0;
}
.cv-ab-result strong { color: var(--accent); }
.cv-ab-new {
  align-self: flex-start;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: 10px 18px;
  border-radius: 999px;
  font: 500 12px var(--font-mono);
  cursor: pointer;
}
.cv-ab-new:hover { background: var(--accent); }
@media (max-width: 880px) { .cv-ab-grid { grid-template-columns: 1fr; } }

/* ============================================================
   v6.0 Share Card modal
   ============================================================ */
.scm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20,20,26,0.62);
  backdrop-filter: blur(6px);
  z-index: 9700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.scm-backdrop.is-show { opacity: 1; pointer-events: auto; }
.scm-modal {
  background: var(--paper);
  border-radius: 16px;
  width: min(1080px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 22px 26px 18px;
  border: 1px solid var(--ink-08);
  box-shadow: 0 24px 64px rgba(20,20,26,0.32);
}
.scm-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--ink-08);
  margin-bottom: 16px;
}
.scm-eye {
  display: block;
  font: 10.5px var(--font-mono);
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.scm-title {
  margin: 0;
  font: italic 600 22px var(--font-display, serif);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.scm-title em { color: var(--accent); font-family: var(--font-mono); font-style: normal; font-size: 16px; letter-spacing: 0.06em; }
.scm-x {
  background: transparent;
  border: 1px solid var(--ink-08);
  font-size: 22px;
  color: var(--ink);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
}
.scm-x:hover { background: var(--ink-04); }

.scm-platforms {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.scm-pl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.scm-pl-h {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.scm-pl-h strong {
  font: italic 600 14px var(--font-display, serif);
  color: var(--ink);
}
.scm-pl-h span {
  font: 10.5px var(--font-mono);
  color: var(--ink-40);
}
.scm-card {
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(20,20,26,0.18);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.scm-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,20,26,0.24); }
.scm-card.is-pick {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.scm-card-eye {
  font: 9.5px var(--font-mono);
  letter-spacing: 0.16em;
  opacity: 0.7;
}
.scm-card-emoji {
  font-size: 60px;
  font-weight: 700;
  font-family: var(--font-display, "Instrument Serif", serif);
  font-style: italic;
  line-height: 1;
  text-align: center;
  letter-spacing: -0.04em;
  margin: 6px 0;
}
.scm-card-line {
  font: italic 600 13.5px/1.35 var(--font-display, serif);
  letter-spacing: -0.01em;
}
.scm-card-handle {
  font: 10px var(--font-mono);
  opacity: 0.7;
  letter-spacing: 0.04em;
}
.scm-card-wm {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font: 700 10px var(--font-mono);
  letter-spacing: 0.32em;
  opacity: 0.4;
}
.scm-pl-foot {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.scm-pl-hint {
  font: 10px var(--font-mono);
  color: var(--ink-40);
}
.scm-pl-pick {
  font: 10.5px var(--font-mono);
  background: transparent;
  border: 1px solid var(--ink-08);
  color: var(--ink);
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.scm-pl-pick:hover { background: var(--ink); color: var(--paper); }

.scm-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--ink-08);
  font: 11.5px var(--font-mono);
  color: var(--ink-40);
}
.scm-actions { display: flex; gap: 8px; }
.scm-act {
  font: 12px var(--font-mono);
  background: transparent;
  border: 1px solid var(--ink-08);
  color: var(--ink);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
}
.scm-act:hover { background: var(--ink-04); }
.scm-act.primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.scm-act.primary:hover { background: var(--accent); }

@media (max-width: 880px) {
  .scm-platforms { grid-template-columns: 1fr 1fr; }
  .scm-card { transform: scale(0.85); }
}

/* ============================================================
   v6.0 Marketplace · "刚上架" strip (Creator builder publish 流入)
   ============================================================ */
.mk-just-shipped {
  margin: 14px 0 20px;
  padding: 14px 18px;
  background: linear-gradient(0deg, rgba(184,137,58,0.06), rgba(184,137,58,0.10));
  border: 1px solid rgba(184,137,58,0.30);
  border-radius: 12px;
}
.mjs-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; gap: 12px; }
.mjs-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.mjs-sub { font: 11px var(--font-mono); color: var(--ink-40); }
.mjs-list { display: flex; flex-direction: column; gap: 8px; }
.mjs-card {
  background: var(--paper);
  border: 1px solid var(--seam);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mjs-card-h {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.mjs-card-name {
  font: italic 600 16px var(--font-display, serif);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.mjs-card-tag {
  font: 9.5px var(--font-mono);
  letter-spacing: 0.12em;
  background: var(--ink-04);
  color: var(--ink-80);
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}
.mjs-card-roll {
  font: 9.5px var(--font-mono);
  background: var(--gold);
  color: var(--paper);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.06em;
}
.mjs-card-meta {
  display: flex;
  gap: 4px;
  font: 11px var(--font-mono);
  color: var(--ink-40);
  letter-spacing: 0.04em;
}
.mjs-card-foot {
  display: flex;
  justify-content: space-between;
  font: 10.5px var(--font-mono);
  color: var(--ink-40);
}
.mjs-card-status {
  color: var(--accent);
}
@keyframes mjs-syncing {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.mjs-card-status { animation: mjs-syncing 1.6s infinite; }

/* ============================================================
   v6.0 Chat header · "↗ 喂给" feed-to popover
   ============================================================ */
.ch-feed-pop {
  position: absolute;
  top: 56px;
  right: 16px;
  width: 280px;
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(20,20,26,0.18);
  padding: 14px 14px 10px;
  z-index: 100;
}
.ch-fp-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--ink-08);
}
.ch-fp-h strong {
  font: 500 12.5px var(--font-sans);
  color: var(--ink);
}
.ch-fp-h em {
  color: var(--accent);
  font-style: italic;
  font-family: var(--font-display, serif);
  font-weight: 600;
  margin: 0 2px;
}
.ch-fp-x {
  background: transparent;
  border: 0;
  font-size: 18px;
  color: var(--ink-40);
  cursor: pointer;
  line-height: 1;
}
.ch-fp-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ch-fp-pick {
  text-align: left;
  font: 500 12px var(--font-mono);
  background: var(--ink-04);
  border: 0;
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.ch-fp-pick:hover {
  background: var(--accent);
  color: var(--paper);
}
.ch-fp-empty {
  font: 11.5px var(--font-mono);
  color: var(--ink-40);
  padding: 8px 0;
}
.ch-fp-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--ink-08);
  font: 10.5px var(--font-mono);
  color: var(--ink-40);
  letter-spacing: 0.04em;
}

/* ============================================================
   v6.8 VC Insights · per-view 内部运营 panel
   只在 body.mode-vc 时显示, 浮动右下角
   ============================================================ */
.vci-root {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 320px;
  max-height: 60vh;
  background: linear-gradient(180deg, #14141A 0%, #1c1c25 100%);
  color: var(--paper);
  border: 1px solid rgba(184,137,58,0.36);
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(20,20,26,0.42);
  z-index: 9600;
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-sans);
  animation: vci-in 0.36s cubic-bezier(0.34, 1.16, 0.64, 1);
}
@keyframes vci-in {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.vci-h {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(184,137,58,0.10);
  border-bottom: 1px solid rgba(184,137,58,0.22);
}
.vci-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(184,137,58,0.4);
  animation: vci-led-pulse 1.8s infinite;
}
@keyframes vci-led-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184,137,58,0.5); }
  60%      { box-shadow: 0 0 0 6px rgba(184,137,58,0); }
}
.vci-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 500;
}
.vci-min {
  background: transparent;
  border: 0;
  color: rgba(251,249,244,0.55);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.vci-min:hover { color: var(--gold); }
.vci-root.is-min .vci-body, .vci-root.is-min .vci-foot { display: none !important; }
.vci-root.is-min { max-height: 36px; }

.vci-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 6px 0;
  overflow-y: auto;
  flex: 1;
}
.vci-body::-webkit-scrollbar { width: 3px; }
.vci-body::-webkit-scrollbar-thumb { background: rgba(184,137,58,0.3); border-radius: 2px; }
.vci-stat {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px dashed rgba(251,249,244,0.06);
}
.vci-stat:last-child { border-bottom: 0; }
.vci-k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: rgba(251,249,244,0.55);
  grid-row: 1;
  align-self: baseline;
}
.vci-v {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-align: right;
  grid-row: 1;
  white-space: nowrap;
}
.vci-d {
  grid-column: 1 / 3;
  grid-row: 2;
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: rgba(251,249,244,0.42);
  line-height: 1.4;
  margin-top: 2px;
}
.vci-tone-ok .vci-v { color: #5BD083; }
.vci-tone-warn .vci-v { color: var(--accent); }

.vci-foot {
  padding: 9px 14px;
  background: rgba(251,249,244,0.02);
  border-top: 1px solid rgba(251,249,244,0.06);
}
.vci-note {
  font-family: var(--font-sans);
  font-size: 11px;
  color: rgba(251,249,244,0.65);
  line-height: 1.5;
}

/* Hide on small screens (no room) */
@media (max-width: 900px) {
  .vci-root { display: none !important; }
}

/* On dataroom view: do not show (dataroom 本身已是 VC 视图) */
.frame[data-view="dataroom"] ~ .vci-root,
body:has(.frame[data-view="dataroom"]) .vci-root { display: none !important; }

/* ============================================================
   v6.18 Mobile (body.real-mobile OR body.is-phone) — 系统性优化
   ============================================================ */=============== */

/* 1. 删 mobile 上没用的桌面 chrome */
body.real-mobile .vct-hint, body.is-phone .vct-hint,
body.real-mobile #vctHintBtn, body.is-phone #vctHintBtn,
body.real-mobile .dm-perf, body.is-phone .dm-perf,
body.real-mobile .preview-banner, body.is-phone .preview-banner,
body.real-mobile .device-toggle, body.is-phone .device-toggle,
body.real-mobile .lh-trust, body.is-phone .lh-trust,
body.real-mobile .lh-bignums, body.is-phone .lh-bignums,
body.real-mobile .lh-eyebrow, body.is-phone .lh-eyebrow {
  display: none !important;
}

/* visitor strip 在 mobile 上压成 1 行 */
body.real-mobile .visitor-strip, body.is-phone .visitor-strip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  padding: 4px 12px;
}
body.real-mobile .visitor-strip > *, body.is-phone .visitor-strip > * { display: none; }
body.real-mobile .visitor-strip >, body.is-phone .visitor-strip > :first-child { display: inline; }

/* 2. Hero 字号 mobile 进一步收紧 (从 clamp 上限 48px → 实际 mobile ~28px) */
body.real-mobile .lh-hero6-title, body.is-phone .lh-hero6-title { font-size: 28px !important; line-height: 1.08; margin-bottom: 8px; }
body.real-mobile .lh-hero6-sub, body.is-phone .lh-hero6-sub { font-size: 13.5px; margin-bottom: 12px; }
body.real-mobile .lh-hero6-eyebrow, body.is-phone .lh-hero6-eyebrow { font-size: 9.5px; letter-spacing: 0.2em; margin-bottom: 8px; }
body.real-mobile .lh-hero6-note, body.is-phone .lh-hero6-note { font-size: 10.5px; padding: 6px 10px; margin-top: 10px; }
body.real-mobile .lh-title, body.is-phone .lh-title { font-size: 22px !important; line-height: 1.18; }
body.real-mobile .lh-sub, body.is-phone .lh-sub { font-size: 13px; }
body.real-mobile .h-dash-greet, body.is-phone .h-dash-greet { font-size: 22px !important; margin-bottom: 14px; line-height: 1.2; }
body.real-mobile .h-dash-eye, body.is-phone .h-dash-eye { font-size: 10px; flex-wrap: wrap; gap: 6px; }
body.real-mobile .lh-section-h h2, body.is-phone .lh-section-h h2 { font-size: 18px; }
body.real-mobile .lh-section-h .h-meta, body.is-phone .lh-section-h .h-meta { font-size: 9.5px; }
body.real-mobile .lh, body.is-phone .lh { padding: 16px 16px 80px; }
body.real-mobile .h-dash, body.is-phone .h-dash { padding: 16px 16px 12px; margin-bottom: 20px; }

/* 3. Touch target ≥ 44×44 (Apple HIG / Material 48dp) */
body.real-mobile .ad-cta, body.is-phone .ad-cta,
body.real-mobile .lh-btn, body.is-phone .lh-btn,
body.real-mobile .lh-hero6-cta, body.is-phone .lh-hero6-cta,
body.real-mobile .nav-row, body.is-phone .nav-row,
body.real-mobile .um-item, body.is-phone .um-item,
body.real-mobile .vct-btn, body.is-phone .vct-btn,
body.real-mobile .scm-act, body.is-phone .scm-act,
body.real-mobile .pt-card, body.is-phone .pt-card,
body.real-mobile .lh-suc, body.is-phone .lh-suc,
body.real-mobile .mtb-item, body.is-phone .mtb-item,
body.real-mobile .mk-fchip, body.is-phone .mk-fchip,
body.real-mobile .plaza-tab, body.is-phone .plaza-tab,
body.real-mobile .wf-tpl-cta, body.is-phone .wf-tpl-cta,
body.real-mobile .ddp-ctl, body.is-phone .ddp-ctl,
body.real-mobile .ddp-tick, body.is-phone .ddp-tick,
body.real-mobile .ddp-sp, body.is-phone .ddp-sp,
body.real-mobile .ch-action, body.is-phone .ch-action,
body.real-mobile .ds-rb-btn, body.is-phone .ds-rb-btn,
body.real-mobile .as-rb-btn, body.is-phone .as-rb-btn,
body.real-mobile .bs-rb-btn, body.is-phone .bs-rb-btn,
body.real-mobile .dm-h-btn, body.is-phone .dm-h-btn,
body.real-mobile .dm-tab, body.is-phone .dm-tab,
body.real-mobile .dm-chip, body.is-phone .dm-chip,
body.real-mobile .dm-exit-btn, body.is-phone .dm-exit-btn {
  min-height: 44px;
  min-width: 44px;
}

/* 4. Min font 12px guarantee */
body.real-mobile p, body.is-phone p,
body.real-mobile span, body.is-phone span,
body.real-mobile li, body.is-phone li,
body.real-mobile .dim p, body.is-phone .dim p,
body.real-mobile .dm-card, body.is-phone .dm-card,
body.real-mobile .pt-foot, body.is-phone .pt-foot,
body.real-mobile .ddp-msg-text, body.is-phone .ddp-msg-text,
body.real-mobile .vci-d, body.is-phone .vci-d {
  font-size: max(12px, 1em);
}

/* 5. Deep mini-app header on mobile — 修裂开 */
body.real-mobile .dm-header, body.is-phone .dm-header {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding-bottom: 12px;
}
body.real-mobile .dm-h-l, body.is-phone .dm-h-l { gap: 4px; }
body.real-mobile .dm-title, body.is-phone .dm-title { font-size: 22px !important; }
body.real-mobile .dm-sub, body.is-phone .dm-sub { font-size: 12px; }
body.real-mobile .dm-eyebrow, body.is-phone .dm-eyebrow { font-size: 9.5px; }
body.real-mobile .dm-h-r, body.is-phone .dm-h-r { justify-content: flex-start; flex-wrap: wrap; }
body.real-mobile .dm-h-r .dm-perf, body.is-phone .dm-h-r .dm-perf { display: none; } /* perf chip hidden anyway */

/* Stage layout: 左右 → 上下 */
body.real-mobile .dm-stage, body.is-phone .dm-stage {
  grid-template-columns: 1fr;
  gap: 12px;
}
body.real-mobile .dm-controls, body.is-phone .dm-controls {
  position: relative;
  top: auto;
  padding: 12px;
}
body.real-mobile .dm-hero, body.is-phone .dm-hero {
  padding: 14px 14px;
  min-height: 220px;
}

/* 6. 30s demo player — 左右栏改上下栈 */
body.real-mobile .ddp-card, body.is-phone .ddp-card {
  width: 96vw;
  height: 90vh;
  grid-template-rows: 36px 1fr 48px;
}
body.real-mobile .ddp-body, body.is-phone .ddp-body {
  grid-template-columns: 1fr;
  grid-template-rows: 180px 1fr;
}
body.real-mobile .ddp-chat, body.is-phone .ddp-chat {
  border-right: 0;
  border-bottom: 1px solid rgba(20,20,26,0.08);
}
body.real-mobile .ddp-scrub, body.is-phone .ddp-scrub { display: none; }
body.real-mobile .ddp-bar, body.is-phone .ddp-bar { grid-template-columns: auto auto auto 1fr; padding: 0 10px; gap: 6px; }
body.real-mobile .ddp-url, body.is-phone .ddp-url { font-size: 10.5px; }
body.real-mobile .ddp-stage-h, body.is-phone .ddp-stage-h { padding: 8px 12px; }
body.real-mobile .ddp-hero, body.is-phone .ddp-hero { padding: 14px 16px; }

/* 7. Modal full-screen on mobile (Apple sheet pattern) */
body.real-mobile .scm-modal, body.is-phone .scm-modal {
  width: 100vw;
  max-height: 100vh;
  border-radius: 14px 14px 0 0;
  margin-top: auto;
}
body.real-mobile .scm-platforms, body.is-phone .scm-platforms { grid-template-columns: 1fr 1fr; gap: 10px; }
body.real-mobile .scm-card, body.is-phone .scm-card { transform: scale(0.78); transform-origin: top left; }

body.real-mobile .sample-modal-card, body.is-phone .sample-modal-card {
  width: 96vw;
  max-height: 92vh;
  margin: auto;
  border-radius: 14px;
}
body.real-mobile .sample-modal-cta, body.is-phone .sample-modal-cta { flex-wrap: wrap; gap: 8px; }
body.real-mobile .sample-modal-cta .ad-cta, body.is-phone .sample-modal-cta .ad-cta { flex: 1 1 calc(50% - 4px); min-width: 0; }

/* 8. Plaza / Workflow / Creator section mobile */
body.real-mobile .pt-row, body.is-phone .pt-row { grid-template-columns: 1fr; }
body.real-mobile .lh-vs-grid, body.is-phone .lh-vs-grid { grid-template-columns: 1fr; }
body.real-mobile .cv-ab-grid, body.is-phone .cv-ab-grid { grid-template-columns: 1fr; }
body.real-mobile .wfc-quest-bar, body.is-phone .wfc-quest-bar {
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px 16px;
}
body.real-mobile .wfc-day, body.is-phone .wfc-day {
  grid-template-columns: 1fr;
  gap: 10px;
}
body.real-mobile .wfc-day-l, body.is-phone .wfc-day-l {
  display: flex;
  flex-direction: row;
  gap: 10px;
  border-bottom: 1px solid var(--seam);
  padding-bottom: 6px;
}

/* 9. Mobile tabbar 增高 + 安全区 */
body.real-mobile .mobile-tabbar, body.is-phone .mobile-tabbar {
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  height: calc(56px + env(safe-area-inset-bottom));
}
body.real-mobile .mtb-item, body.is-phone .mtb-item {
  font-size: 10.5px;
  gap: 2px;
}

/* 10. Chat header & sheet */
body.real-mobile .chat-h, body.is-phone .chat-h {
  padding: 8px 12px;
  gap: 8px;
}
body.real-mobile .ch-name, body.is-phone .ch-name { font-size: 14px; }
body.real-mobile .ch-sub, body.is-phone .ch-sub { font-size: 11px; }

body.real-mobile .ch-feed-pop, body.is-phone .ch-feed-pop {
  position: fixed;
  inset: auto 8px 8px 8px;
  top: auto;
  right: 8px;
  width: auto;
  max-height: 60vh;
  overflow-y: auto;
}

/* 11. Tap highlight transparent (iOS gray bg removed) */
body.real-mobile *, body.is-phone *, body.real-mobile *, body.is-phone *::before, body.real-mobile *, body.is-phone *::after {
  -webkit-tap-highlight-color: transparent;
}
/* But preserve a subtle active state */
body.real-mobile .ad-cta, body.is-phone .ad-cta:active,
body.real-mobile .lh-hero6-cta, body.is-phone .lh-hero6-cta:active,
body.real-mobile .mtb-item, body.is-phone .mtb-item:active,
body.real-mobile .nav-row, body.is-phone .nav-row:active {
  opacity: 0.7;
  transform: scale(0.98);
  transition: opacity 0.1s, transform 0.1s;
}

/* 12. Hide editorial/v6 features that don't fit mobile */
body.real-mobile .lh-creator-econ .lh-econ-rungs, body.is-phone .lh-creator-econ .lh-econ-rungs {
  flex-direction: column;
  gap: 8px;
}
body.real-mobile .lh-journey, body.is-phone .lh-journey {
  grid-template-columns: 1fr;
  gap: 16px;
}
body.real-mobile .lh-anatomy, body.is-phone .lh-anatomy {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
body.real-mobile .lh-features, body.is-phone .lh-features {
  grid-template-columns: 1fr;
  gap: 12px;
}

/* 13. Smooth view transitions on mobile (slide-in) */
body.real-mobile .view, body.is-phone .view {
  animation: vw-slide-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: forwards;
  opacity: 1;
}
@keyframes vw-slide-in {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 14. Hide deep-page back button "Press T" hint that doesn't apply on touch */
body.real-mobile .view-back kbd, body.is-phone .view-back kbd { display: none; }

/* ============================================================
   v7 (2026-06-01) — Stripe + AppStore framing additions
   5 new sections on home: anchors / 7 pieces / 3 personas /
   anti-GPT-Store / unit economics. Pure CSS, no new JS hooks.
   ============================================================ */

/* --- v7-anchors: 5 数字常驻条 --- */
.v7-anchors {
  margin: 32px 0 24px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--seam);
  border-radius: 14px;
}
.v7a-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--ink-60); margin-bottom: 14px;
  text-transform: uppercase;
}
.v7a-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.v7a-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--seam);
  border-radius: 10px;
  overflow: hidden;
}
.v7a-cell {
  background: var(--bg);
  padding: 16px 14px 14px;
  min-height: 110px;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.v7a-cell.is-key {
  background: linear-gradient(180deg, rgba(209, 74, 36, 0.06), rgba(209, 74, 36, 0.02));
}
.v7a-num {
  font-family: 'Instrument Serif', serif;
  font-size: 28px; line-height: 1; color: var(--ink);
  margin-bottom: 6px;
  font-weight: 400;
}
.v7a-cell.is-key .v7a-num { color: var(--accent); }
.v7a-num span {
  font-family: var(--font-mono);
  font-size: 13px; color: var(--ink-60);
  margin-left: 2px; font-weight: 400;
}
.v7a-lbl {
  font-size: 12px; color: var(--ink); font-weight: 500;
  margin-bottom: 4px;
}
.v7a-sub {
  font-size: 10.5px; color: var(--ink-60); line-height: 1.45;
  font-family: var(--font-mono);
}
@media (max-width: 900px) {
  .v7a-grid { grid-template-columns: repeat(2, 1fr); }
  .v7a-cell:last-child { grid-column: 1 / -1; }
}

/* --- v7-pieces: 7 件套地图 (4 dev + 3 user) --- */
.v7-pieces {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px;
  margin: 8px 0 24px;
}
.v7p-col {
  background: var(--surface);
  border: 1px solid var(--seam);
  border-radius: 14px;
  padding: 18px 18px 14px;
}
.v7p-col.v7p-user {
  background: linear-gradient(180deg, rgba(209, 74, 36, 0.04), transparent 60%);
  border-color: var(--accent-soft, rgba(209, 74, 36, 0.18));
}
.v7p-h {
  display: flex; flex-direction: column; gap: 4px;
  padding-bottom: 12px; margin-bottom: 10px;
  border-bottom: 1px dashed var(--seam);
}
.v7p-badge {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.10em; color: var(--ink-60);
  text-transform: uppercase;
}
.v7p-col.v7p-user .v7p-badge { color: var(--accent); }
.v7p-title { font-size: 13px; color: var(--ink); }
.v7p-row {
  display: flex; gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dotted var(--seam);
}
.v7p-row:last-child { border-bottom: 0; }
.v7p-num {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-30); width: 24px; flex: 0 0 24px; padding-top: 3px;
}
.v7p-row strong {
  display: block; font-size: 14px; color: var(--ink); margin-bottom: 2px;
  font-weight: 500;
}
.v7p-row small {
  display: block; font-size: 11.5px; color: var(--ink-60); line-height: 1.45;
}
.v7p-row small em { color: var(--accent); font-style: normal; font-weight: 500; }
@media (max-width: 900px) {
  .v7-pieces { grid-template-columns: 1fr; }
}

/* --- v7-personas: 3 类用户 --- */
.v7-personas {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin: 8px 0 24px;
}
.v7pe-card {
  background: var(--surface);
  border: 1px solid var(--seam);
  border-radius: 14px;
  padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.v7pe-card.v7pe-mid {
  background: linear-gradient(180deg, rgba(209, 74, 36, 0.04), transparent 60%);
  border-color: var(--accent-soft, rgba(209, 74, 36, 0.2));
}
.v7pe-h { display: flex; align-items: center; gap: 8px; }
.v7pe-tag {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; color: var(--ink-30);
  background: var(--bg); border: 1px solid var(--seam);
  border-radius: 4px; padding: 2px 6px;
}
.v7pe-h strong { font-size: 14px; color: var(--ink); font-weight: 500; }
.v7pe-line {
  font-size: 13px; color: var(--ink); line-height: 1.5;
}
.v7pe-meta {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--ink-60); padding: 6px 0;
  border-top: 1px dashed var(--seam); border-bottom: 1px dashed var(--seam);
}
.v7pe-meta strong { color: var(--ink); }
.v7pe-card.v7pe-mid .v7pe-meta strong { color: var(--accent); }
.v7pe-sub {
  font-size: 11px; color: var(--ink-60); line-height: 1.45;
}
@media (max-width: 900px) {
  .v7-personas { grid-template-columns: 1fr; }
}

/* --- v7-anti: 反 GPT Store 对比 --- */
.v7-anti {
  display: flex; flex-direction: column; gap: 10px;
  margin: 8px 0 24px;
}
.v7n-row {
  border: 1px solid var(--seam);
  border-radius: 14px;
  padding: 16px 18px 14px;
}
.v7n-row.v7n-them { background: #F4F1EA; }
.v7n-row.v7n-us {
  background: linear-gradient(180deg, rgba(209, 74, 36, 0.06), rgba(209, 74, 36, 0.01));
  border-color: var(--accent-soft, rgba(209, 74, 36, 0.22));
}
.v7n-h {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.06em; color: var(--ink-60);
  text-transform: uppercase; margin-bottom: 12px;
}
.v7n-row.v7n-us .v7n-h { color: var(--accent); }
.v7n-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.v7n-it {
  background: var(--bg);
  border: 1px solid var(--seam);
  border-radius: 10px;
  padding: 11px 12px 10px;
  position: relative;
}
.v7n-row.v7n-us .v7n-it { background: rgba(255,255,255,0.7); }
.v7n-x, .v7n-y {
  display: inline-block; width: 18px; height: 18px;
  border-radius: 50%; text-align: center; line-height: 18px;
  font-size: 11px; font-weight: 600;
  margin-bottom: 6px;
}
.v7n-x { background: #E8DDD2; color: #8B7355; }
.v7n-y { background: var(--accent); color: #fff; }
.v7n-it strong { display: block; font-size: 13.5px; color: var(--ink); margin-bottom: 4px; font-weight: 500; }
.v7n-it small { display: block; font-size: 11px; color: var(--ink-60); line-height: 1.45; }
@media (max-width: 900px) {
  .v7n-list { grid-template-columns: 1fr; }
}

/* --- v7-econ: unit economics 拆解 --- */
.v7-econ {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: 14px; margin: 8px 0 24px;
}
.v7e-l, .v7e-r {
  background: var(--surface);
  border: 1px solid var(--seam);
  border-radius: 14px;
  padding: 18px 20px 16px;
}
.v7e-r {
  background: linear-gradient(180deg, rgba(209, 74, 36, 0.05), transparent 60%);
  border-color: var(--accent-soft, rgba(209, 74, 36, 0.2));
}
.v7e-rev, .v7e-mid, .v7e-final {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0;
}
.v7e-rev { border-bottom: 1px solid var(--seam); }
.v7e-mid {
  border-top: 1px dashed var(--seam); border-bottom: 1px dashed var(--seam);
  margin: 4px 0;
}
.v7e-final {
  background: rgba(209, 74, 36, 0.06);
  margin: 4px -20px -16px; padding: 12px 20px;
  border-top: 1px solid var(--accent-soft, rgba(209, 74, 36, 0.2));
  border-bottom-left-radius: 13px; border-bottom-right-radius: 13px;
}
.v7e-lbl { font-size: 13px; color: var(--ink); font-weight: 500; }
.v7e-val {
  font-family: 'Instrument Serif', serif;
  font-size: 22px; color: var(--ink); font-weight: 400;
}
.v7e-final .v7e-val { color: var(--accent); font-size: 26px; }
.v7e-val small {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-60); font-weight: 400; margin-left: 4px;
}
.v7e-cat { padding: 6px 0; }
.v7e-cat-h {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.05em; color: var(--ink-30);
  text-transform: uppercase;
  display: flex; justify-content: space-between;
  margin-bottom: 4px;
}
.v7e-cat-h span { color: var(--ink-60); }
.v7e-row {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--ink-60);
  padding: 2px 0;
  font-family: var(--font-mono);
}
.v7e-r-h {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--accent);
  text-transform: uppercase; margin-bottom: 12px;
}
.v7e-r-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-bottom: 1px dashed var(--seam);
}
.v7e-r-row:last-of-type { border-bottom: 0; }
.v7e-r-row span { font-size: 13px; color: var(--ink); }
.v7e-r-row strong {
  font-family: 'Instrument Serif', serif;
  font-size: 19px; color: var(--ink); font-weight: 400;
}
.v7e-r-foot {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--seam);
}
.v7e-r-foot strong {
  display: block; font-size: 12.5px; color: var(--ink);
  margin-bottom: 8px; font-weight: 500;
}
.v7e-r-foot ul {
  list-style: none; padding: 0; margin: 0 0 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.v7e-r-foot li {
  font-size: 11.5px; color: var(--ink-60); line-height: 1.5;
  padding-left: 12px; position: relative;
}
.v7e-r-foot li::before {
  content: '·'; color: var(--accent);
  position: absolute; left: 4px; top: -1px;
  font-weight: 600;
}
.v7e-r-cursor {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--accent); letter-spacing: 0.04em;
  padding: 8px 10px;
  background: rgba(209, 74, 36, 0.08);
  border-radius: 6px;
  text-align: center;
}
@media (max-width: 900px) {
  .v7-econ { grid-template-columns: 1fr; }
}

/* --- v7 take rate · lh-rung-flat 主轴样式 --- */
.lh-rung.lh-rung-flat {
  background: linear-gradient(180deg, rgba(209, 74, 36, 0.10), rgba(209, 74, 36, 0.02));
  border-color: var(--accent-soft, rgba(209, 74, 36, 0.25));
}
.lh-rung.lh-rung-flat .rate {
  color: var(--accent); font-weight: 500;
}
.lh-rung.lh-rung-flat .band {
  color: var(--accent);
}