@keyframes i18n-reveal-fallback {
  to {
    visibility: visible
  }
}

html.i18n-pending body {
  visibility: hidden;
  animation: i18n-reveal-fallback 0s 3s forwards
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

:root {
  --paper: #FAF9F6;
  --card: #FFFFFF;
  --ink: #1A2333;
  --body: #3A4358;
  --mute: #6B7180;
  --line: #E5E2D9;
  --indigo: #2847C4;
  --verm: #BA3B1D;
  --jade: #0C7A61;
  --amber: #8F630B
}

/* ── task21 (2026-07-27) Apple-ify token layer: material / shadow / radius / motion ──
   Every glass surface used to carry its own hand-rolled recipe (five different fills, two saturate
   units, six unrelated shadows), so nothing shared an elevation language. These tokens are the one
   place those values live now. Named by ROLE, not by looks, so a dark scheme can re-point them later.
   Material has two tiers, which is the whole point of the HIG's two-layer model:
     --glass-*  Liquid Glass, FUNCTIONAL layer only (composer, thinking capsule, palette). Gets the
                specular top edge, the darkened rim and the lift.
     --mat-*    standard material, CONTENT layer (report cards, file/answer cards). Same translucency
                the product already reads as its own, but no specular dynamics — so the composer stays
                the most "glass" thing on screen and the elevation reads at a glance.
   Fill floors are not taste: on the warm paper (#FAF9F6) a .55 fill drops --mute text under AA. The
   composer's .62 is the measured floor (see the placeholder note at the .mform rule); content cards
   sit more opaque still at .78. */
:root {
  color-scheme: light;
  /* light-only product: keep UA controls light */
  /* ── foreground: a fourth, watermark-weight step under --ink/--body/--mute ── */
  --faint: rgba(26, 35, 51, .30);
  --bg-elevated: #FFFFFF;
  /* popover background: = card in light, lighter in dark */
  /* ── neutral interaction fills. Semi-transparent so one token works over paper AND over a card.
    The alphas are SOLVED against the base these fills actually sit on — a WHITE card, which is where
    the dominant consumers live (the competitor bar-chart tracks and the citation index badges); the
    transient hovers on the paper-toned sidebar are the minority and shift by ~7/255, which is under
    the noise floor of a screenshot diff. Solving against the paper instead was measured wrong: it
    left 110k px of the competitors table visibly lighter. Not taken from the HIG's systemFill —
    its .16/.24 would have darkened every hover by ~11 levels, and that is a design decision that
    does not belong in the batch whose whole job is to change nothing. (The HIG's own .16/.24 would have darkened every hover by ~11 levels — that is a
    design decision, and it does not belong in the batch whose whole job is to change nothing.) ── */
  --fill: rgba(120, 116, 102, .12);
  /* hover      ≡ #F1EFEA on a white card */
  --fill-2: rgba(120, 116, 102, .185);
  /* pressed    ≡ #E9E6DE on a white card */
  --fill-3: rgba(120, 116, 102, .195);
  /* track/rail ≡ #E9E5DA on a white card */
  --fill-4: rgba(120, 116, 102, .04);
  /* faintest   ≡ #FBFAF7 on card */
  --separator: rgba(26, 35, 51, .10);
  /* hairline INSIDE a card. Control borders keep --line. */
  /* ── ink micro-fills. A COLD-neutral family, deliberately not the warm --fill group above: these sit
    on chrome (composer, palette, scrollbars) where the warm cast reads as a stain. Kept out of the
    earlier batches for exactly that reason; they are collected here now because in dark they were
    invisible — .06 of #1A2333 over the dark card #1C1F26 lands within 1/255 of the card itself, so
    every one of these hovers had NO feedback in dark mode. The dark re-point below is the point of
    tokenising them; the light values are the ones already shipped (.035/.045 absorbed into .05 and
    .09 into .10 — a ≤3.4/255 shift on paper, under a screenshot diff's noise floor). ── */
  --ink-wash: rgba(26, 35, 51, .05);
  /* static micro-fill: palette button, palette icon, sibling tag */
  --ink-hover: rgba(26, 35, 51, .06);
  /* neutral hover on a close/dismiss control */
  --ink-track: rgba(26, 35, 51, .10);
  /* progress track, scrollbar thumb */
  --ink-track-hover: rgba(26, 35, 51, .20);
  /* scrollbar thumb, pointer over the scroller */
  /* ── accent on two rails. Identical in light (so this is a no-op now), they diverge in dark: text
    and border indigo must lighten to stay legible, a solid fill must NOT (white on a lightened blue
    fails AA). Splitting them here is what makes the dark batch a mapping instead of a rewrite. ── */
  --accent: var(--indigo);
  /* text / border / icon indigo */
  --accent-fill: var(--indigo);
  /* solid fills: user bubble, primary CTA */
  --accent-press: #1F3AA8;
  /* pressed / hover one step down */
  --accent-on-dark: #8FB0FF;
  /* indigo that survives on an --ink surface (toast links) */
  --tint: rgba(40, 71, 196, .08);
  /* indigo wash: chips, badges, selected row */
  --tint-weak: rgba(40, 71, 196, .04);
  --tint-strong: rgba(40, 71, 196, .13);
  --tint-line: rgba(40, 71, 196, .28);
  /* faint indigo hairline */
  --tint-wash: #EEF1FB;
  /* OPAQUE wash — used where a card must not show through */
  /* ── semantic pairs: fill + hairline, text keeps --jade/--amber/--verm ── */
  /* Two fill steps per semantic, not one: the existing values were bimodal (~.07 for a quiet row
    wash, ~.13 for a status pill), so collapsing them to a single alpha would have visibly moved one
    group or the other. Same shape as --tint / --tint-strong. Greens also unify onto --jade's RGB —
    two different greens were in use for the same meaning. */
  --ok-bg: rgba(12, 122, 97, .07);
  --ok-fill: rgba(12, 122, 97, .13);
  --ok-line: rgba(12, 122, 97, .22);
  --warn-bg: rgba(143, 99, 11, .09);
  --warn-fill: rgba(143, 99, 11, .13);
  --warn-line: rgba(143, 99, 11, .25);
  --bad-bg: rgba(186, 59, 29, .07);
  --bad-fill: rgba(186, 59, 29, .10);
  --bad-line: rgba(186, 59, 29, .22);
  /* ── material / elevation / radius / motion ──
    task23 "明显版": the elevation ladder is now load-bearing. Batch 22 kept every card's hairline and
    let the shadow whisper underneath it, which is why the whole pass measured 0.3-5% pixel change and
    read as "nothing happened". Here the hairline goes (down to a 6% whisper, see --card-edge) and the
    shadow has to do the separating on its own — so both rungs get a wider, softer far-shadow and a
    slightly stronger contact shadow. Values are the prototype's, which is the version that was signed
    off against a side-by-side. */
  --shadow-1: 0 1px 3px rgba(26, 35, 51, .05), 0 12px 32px -16px rgba(26, 35, 51, .16);
  /* resting card */
  --shadow-2: 0 2px 8px rgba(26, 35, 51, .06), 0 22px 48px -18px rgba(26, 35, 51, .24);
  /* hover / lifted */
  --shadow-3: 0 24px 60px -20px rgba(26, 35, 51, .38);
  /* popover / drawer */
  /* Not border:none as the prototype had it. On the warm paper two white cards that touch (the grid's
    gap is only 22px) lose their edge entirely when the shadow is this soft — they read as one mushy
    slab. A 6% edge is invisible as a LINE and still resolves the boundary. This is the one place the
    prototype was overruled; it is a deviation, not a miss. */
  --card-edge: rgba(26, 35, 51, .06);
  /* The report card's footer strip is full-bleed: it cancels the card's padding with negative margins.
    Those numbers were literal 20s matching the old padding:20px, so opening the padding to 26/28 left
    the divider floating 8px short of each edge — the same "two copies of one predicate drift apart"
    failure that has bitten this file before. The padding now lives in a token that BOTH rules read,
    so the footer cannot fall out of step with the card again. */
  --card-pad-y: 26px;
  --card-pad-x: 28px;
  --glass-bg: rgba(255, 255, 255, .62);
  --glass-edge: rgba(255, 255, 255, .6);
  /* specular top edge */
  --glass-rim: rgba(26, 35, 51, .08);
  /* darkened edge */
  --glass-blur: blur(20px) saturate(180%);
  --glass-heavy: rgba(255, 255, 255, .92);
  /* big popovers stay more opaque, per HIG */
  --mat-bg: rgba(255, 255, 255, .78);
  --mat-blur: blur(14px) saturate(140%);
  /* ── scrims. Four full-screen dimmers were carrying three literal alphas of the same ink. The three
    steps are kept exactly as shipped (a modal dims hardest, the mobile nav backdrop less, a bottom
    drawer least) — this is a rename in light. In dark it is a repair: #1A2333 is LIGHTER than the
    dark paper #101216, so every one of these was lightening the page it was supposed to be dimming.
    Dark re-points them onto true black, where a scrim is the one surface that must not be a tint. ── */
  --scrim: rgba(26, 35, 51, .5);
  /* modal, publish overlay */
  --scrim-nav: rgba(26, 35, 51, .42);
  /* mobile sidebar backdrop */
  --scrim-soft: rgba(26, 35, 51, .28);
  /* bottom-sheet drawer */
  /* task23: chrome material — the rail and the top bar. Tinted toward PAPER, not card, so the rail
    stops reading as "a white panel with a border" and starts reading as the page showing through it.
    Blur is heavier than --glass-blur because chrome sits still while content moves under it. */
  --chrome-bg: rgba(250, 249, 246, .72);
  --chrome-blur: blur(24px) saturate(160%);
  --bar-bg: rgba(255, 255, 255, .72);
  /* top bar: content scrolls under it, so it stays lighter */
  --ease-out: cubic-bezier(.2, .9, .3, 1);
  /* ~critically damped */
  --dur-press: 120ms;
  --dur: 220ms;
  --dur-slow: 350ms;
  /* task23 radius ladder, one notch taller across the board, and --r-btn goes fully capsule. 16px on a
    340px-wide card is the radius of a 2015 web app; 22px is the radius Apple gives a container that
    size. The controls rung moves too (8→12) or the inputs read hard-edged next to a 22px card. */
  --r-ctl: 12px;
  --r-btn: 999px;
  --r-card-s: 16px;
  --r-card: 22px;
  --r-card-l: 26px;
  --r-pill: 999px;
  /* task25: every font-size in the app is now a rem, so the whole product follows the reader's
    browser font-size preference (the web's Dynamic Type). What is NOT rem: hairlines, radii, icon
    boxes, the 44px touch targets, the iframe's simulated 1440x1900 viewport, and the layout skeleton
    — those are physical, not typographic.
    The display numerals (score/senbig/mc-sbn/mc-big) and the glyph boxes (close x, avatar initial)
    stay OUT of the 11-step ramp — they are sized to look right as marks, not as type — but they do
    scale: they carry their own literal rem. "Exempt from the ramp" never meant "exempt from
    scaling", and the earlier wording here said they "keep their literal px", which by then was
    already untrue of .modal .close and .avatar. Do not put px back.
    Anything a caller sizes in px must be a container that HOLDS type, in which case rem it too:
    .barrow .bt (19px, clips .tiechip) and .mc-seal (88px, its whole content is text) were both
    found that way. */
  --fs-eyebrow: 0.625rem;
  /* mono uppercase eyebrows */
  --fs-caption2: 0.6875rem;
  --fs-caption: 0.75rem;
  --fs-footnote: 0.8125rem;
  --fs-subhead: 0.875rem;
  --fs-body: 0.9375rem;
  /* conversation and reading copy */
  --fs-title3: 1.0625rem;
  --fs-title2: 1.25rem;
  --fs-title1: 1.375rem;
  --fs-large: 1.75rem;
  /* task23: a real DISPLAY rung above the ramp. --fs-large is shared with .auth h1 and the Maya intro,
    where 34px would overflow a 440px card, so page titles get their own rung instead of the token
    being bumped underneath three other consumers. */
  --fs-display: 2.125rem;
  /* tracking: small type opens up, mid/large type tightens — the eye wants the opposite of what
    uniform tracking gives it. Eyebrow tracking is already set per-rule and stays. */
  --ls-body: -.01em;
  /* 13-15px */
  --ls-title: -.02em;
  /* 17-22px */
  --ls-display: -.028em;
  /* 28px+ — at display sizes the default tracking reads loose */
}

/* ── dark scheme: a re-point of the same tokens, not a second stylesheet ──
   Two things make this a mapping rather than a rewrite. First, backgrounds get LIGHTER as they come
   forward (paper → card → elevated); in dark, elevation is carried by luminance, and shadow only
   tidies the edge. Second, the accent split from batch 1 pays off here: text/border indigo has to
   lighten to stay legible on a dark ground, while a SOLID indigo fill must not — white on a
   lightened blue drops under AA. Same reason iMessage keeps its blue bubble dark in dark mode. */
@media(prefers-color-scheme:dark) {
  :root {
    color-scheme: dark;
    --paper: #101216;
    --card: #1C1F26;
    --bg-elevated: #262A33;
    --ink: #F2F3F7;
    --body: #C9CDD8;
    --mute: #9AA0AD;
    --faint: rgba(235, 235, 245, .28);
    --line: #33363E;
    --separator: rgba(235, 235, 245, .10);
    --indigo: #7C93F0;
    /* anything still reading --indigo directly lightens too */
    --accent: #7C93F0;
    --accent-fill: #3350CC;
    --accent-press: #4E68E8;
    --accent-on-dark: #8FB0FF;
    --tint: rgba(124, 147, 240, .14);
    --tint-weak: rgba(124, 147, 240, .08);
    --tint-strong: rgba(124, 147, 240, .22);
    --tint-line: rgba(124, 147, 240, .35);
    --tint-wash: #232A44;
    --fill: rgba(120, 125, 140, .20);
    --fill-2: rgba(120, 125, 140, .30);
    --fill-3: rgba(120, 125, 140, .14);
    --fill-4: rgba(120, 125, 140, .08);
    --ok-bg: rgba(52, 199, 140, .12);
    --ok-line: rgba(52, 199, 140, .3);
    --warn-bg: rgba(214, 164, 60, .12);
    --warn-line: rgba(214, 164, 60, .3);
    --bad-bg: rgba(233, 92, 60, .12);
    --bad-line: rgba(233, 92, 60, .3);
    --jade: #3ECF9A;
    --amber: #D6A43C;
    --verm: #E9705A;
    --glass-bg: rgba(38, 42, 51, .62);
    --glass-edge: rgba(255, 255, 255, .16);
    --glass-rim: rgba(255, 255, 255, .06);
    --glass-heavy: rgba(32, 35, 43, .92);
    --mat-bg: rgba(35, 38, 46, .78);
    /* task23 chrome: same idea inverted — the rail tints toward the dark PAPER so content shows through
    it. --card-edge flips polarity: on a dark ground an edge has to be LIGHT to resolve, and it needs
    more of it (.06 black on white ≈ .09 white on near-black, perceptually). */
    --chrome-bg: rgba(16, 18, 22, .72);
    --bar-bg: rgba(28, 31, 38, .72);
    --card-edge: rgba(255, 255, 255, .09);
    --shadow-1: 0 1px 3px rgba(0, 0, 0, .4), 0 12px 32px -16px rgba(0, 0, 0, .6);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, .45), 0 22px 48px -18px rgba(0, 0, 0, .65);
    --shadow-3: 0 24px 60px -20px rgba(0, 0, 0, .7);
    /* Ink flips to the same cool near-white the rest of the dark scheme uses, and it needs MORE of it:
    a .05 dark wash on white paper and a .05 light wash on a near-black card are not perceptually
    equal steps. .14/.26 are not new numbers — they are what the dark scrollbar rules below were
    already hard-coding by hand, so those rules now collapse into these two tokens. */
    --ink-wash: rgba(235, 235, 245, .06);
    --ink-hover: rgba(235, 235, 245, .10);
    --ink-track: rgba(235, 235, 245, .14);
    --ink-track-hover: rgba(235, 235, 245, .26);
    /* True black, not the ink: a scrim's only job is to remove luminance from what is behind it. */
    --scrim: rgba(0, 0, 0, .6);
    --scrim-nav: rgba(0, 0, 0, .52);
    --scrim-soft: rgba(0, 0, 0, .42);
  }
}

html,
body {
  background: var(--paper);
  color: var(--body);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased
}

body {
  overflow-x: hidden
}

h1,
h2,
h3,
.serif {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink)
}

h1,
h2,
h3 {
  line-height: 1.25;
  letter-spacing: -.01em
}

a {
  color: var(--indigo);
  text-decoration: none
}

:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px
}

/* task21 4B: form focus was a border colour change, which on a warm paper reads as almost nothing.
   Apple's text-field focus is a soft ring OUTSIDE the control, so the field keeps its own geometry and
   the state is unmistakable. The outline is still suppressed (the ring replaces it), and the ring is
   painted with box-shadow so it never affects layout. */
.dev input,
.addform input,
.addform select,
.mc-onb-field,
.baliases .alin,
.insbar select,
.prof-in,
.bp-in,
.art-topic,
.ws-pin {
  transition: border-color var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out)
}

.dev input:focus-visible,
.addform input:focus-visible,
.addform select:focus-visible,
.mc-onb-field:focus-visible,
.maya-input textarea:focus-visible,
.baliases .alin:focus-visible,
.insbar select:focus-visible {
  outline: none
}

.dev input:focus,
.addform input:focus,
.addform select:focus,
.mc-onb-field:focus,
.baliases .alin:focus,
.insbar select:focus,
.prof-in:focus,
.bp-in:focus,
.art-topic:focus,
.ws-pin:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px rgba(40, 71, 196, .18)
}

.mono {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 24px;
  border-bottom: 2px solid var(--ink)
}

.top .brand img {
  height: 30px;
  display: block
}

.top .who {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-footnote);
  color: var(--mute)
}

.top .who a {
  color: var(--mute)
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 24px 80px
}

/* task23 card family: the hairline stops being the thing that separates a card from the page, and the
   shadow takes over. Every flat card that had no elevation at all gets --shadow-1, otherwise dropping
   its border would leave it floating with nothing holding it. Radius and padding move up one rung. */
.card {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--r-card);
  padding: 26px 28px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-1)
}

.auth {
  max-width: 440px;
  margin: 60px auto;
  text-align: center;
  padding: 38px 34px
}

.auth h1 {
  font-size: var(--fs-large);
  margin-bottom: 10px;
  letter-spacing: var(--ls-title)
}

.auth .sub {
  font-size: var(--fs-subhead);
  color: var(--mute);
  margin-bottom: 26px
}

.onbctx {
  font-size: var(--fs-subhead);
  color: var(--ink);
  background: var(--tint-wash);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 14px;
  margin: -6px auto 22px;
  max-width: 340px;
  line-height: 1.5
}

.gwrap {
  display: flex;
  justify-content: center;
  min-height: 44px
}

.dev {
  margin-top: 22px
}

.dev .or {
  color: var(--mute);
  font-size: var(--fs-caption);
  margin: 14px 0;
  position: relative
}

.dev input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: var(--fs-body);
  font-family: inherit;
  margin-bottom: 10px;
  background: var(--paper)
}

.dev input:focus {
  outline: none;
  border-color: var(--indigo)
}

.dev button,
.btn {
  background: var(--accent-fill);
  color: #fff;
  border: none;
  border-radius: var(--r-btn);
  padding: 12px 18px;
  font-size: var(--fs-subhead);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit
}

.dev button {
  width: 100%
}

.btn:hover,
.dev button:hover {
  background: var(--accent-press)
}

/* pointer-down feedback: press response is instant, on the down-stroke */
.btn:active,
.dev button:active,
.rnew:active,
.mc-cta:active,
.pl-go:active,
.mup-cta:active,
.mc-onb-go:active,
  .maya-launcher:active,
.mc-chbtn:active,
.bstall-a button:active,
.maya-input .mc-sendbtn:active,
.maya-input .mc-palbtn:active,
.pw-btn:active,
.ws-btn:active,
.bp-go:active,
.bp-skip:active,
.pl-rev:active,
.prof-add:active,
.ws-pub:active,
.ws-keep:active,
.pw-primary:active {
  transform: scale(.97)
}

.hint {
  font-size: var(--fs-caption);
  color: var(--mute);
  margin-top: 12px
}

.msg {
  font-size: var(--fs-footnote);
  margin-top: 12px;
  line-height: 1.5
}

.msg .ok {
  color: var(--jade)
}

.msg .err {
  color: var(--verm)
}

.pagehead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px
}

/* task23: page titles move to the display rung. 28px next to a 20px card title was a 1.4x step — not
   enough for the eye to read a hierarchy; 34px is 1.7x and the page finally has a top note. */
.pagehead h1 {
  font-size: var(--fs-display);
  letter-spacing: var(--ls-display);
  font-weight: 700
}

.pagehead .sub {
  font-size: var(--fs-subhead);
  color: var(--mute)
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 22px
}

/* task21: report cards are CONTENT, so they take standard material, not Liquid Glass — same see-through
   feel, one tier below the composer. The old hover was a jelly bounce (-5px with the shadow area
   doubling); Apple lifts a card 1-2px and lets the shadow do the talking. Geometry untouched. */
.bcard {
  background: var(--mat-bg);
  -webkit-backdrop-filter: var(--mat-blur);
  backdrop-filter: var(--mat-blur);
  border: 1px solid var(--card-edge);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, .7);
  border-radius: var(--r-card);
  padding: var(--card-pad-y) var(--card-pad-x);
  position: relative;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  cursor: default
}

.bcard.click {
  cursor: pointer
}

.bcard:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, .7)
}

.bcard .bx {
  position: absolute;
  top: 14px;
  right: 16px;
  /* task23: follows the card's new 26/28 padding — at 8px it now floated in the corner whitespace */
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--mute);
  font-size: var(--fs-body);
  line-height: 1;
  cursor: pointer;
  opacity: .35;
  transition: opacity var(--dur-press) var(--ease-out), background var(--dur-press) var(--ease-out);
  font-family: inherit;
  z-index: 2
}

.bcard .bx::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%
}

.bcard:hover .bx {
  opacity: 1
}

.bcard .bx:hover {
  background: var(--bad-fill);
  color: var(--verm)
}

.undo-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(26, 35, 51, .82);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: #fff;
  border-radius: var(--r-pill);
  padding: 10px 18px;
  font-size: var(--fs-subhead);
  display: flex;
  gap: 14px;
  align-items: center;
  z-index: 130;
  box-shadow: 0 10px 30px -8px rgba(26, 35, 51, .5)
}

.undo-toast button {
  background: none;
  border: none;
  color: var(--accent-on-dark);
  font-weight: 700;
  cursor: pointer;
  font-size: var(--fs-subhead);
  font-family: inherit;
  padding: 8px 6px;
  margin: -8px -2px
}

.soa-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  background: rgba(26, 35, 51, .82);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: #fff;
  border-radius: var(--r-card);
  padding: 12px 18px;
  font-size: var(--fs-subhead);
  line-height: 1.45;
  max-width: min(420px, 90vw);
  z-index: 140;
  box-shadow: 0 14px 40px -10px rgba(26, 35, 51, .55);
  display: flex;
  gap: 11px;
  align-items: flex-start;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out)
}

.soa-toast.on {
  opacity: 1;
  transform: translateX(-50%) translateY(0)
}

.soa-toast .st-ic {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 1px
}

.soa-toast.ok .st-ic {
  color: #5FD08A
}

.soa-toast.info .st-ic {
  color: var(--accent-on-dark)
}

.soa-toast.warn .st-ic {
  color: #FFC24B
}

.soa-toast b {
  font-weight: 700
}

.soa-toast .st-sub {
  display: block;
  color: rgba(255, 255, 255, .72);
  font-size: var(--fs-footnote);
  margin-top: 2px
}

.bcard .bh {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  padding-right: 30px
}

/* 右侧留出 ✕ 的位置,未读徽标不再贴着它 */
.bcard .bn {
  font-size: var(--fs-title2);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: var(--ls-title)
}

.bcard .bc {
  font-size: var(--fs-caption);
  color: var(--mute);
  margin-bottom: 14px
}

.bcard .score {
  font-family: Georgia, serif;
  font-size: 2.75rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1;
  letter-spacing: var(--ls-display)
}

.bcard .score small {
  font-size: var(--fs-body);
  color: var(--mute);
  font-weight: 400
}

.band {
  display: inline-block;
  font-size: var(--fs-caption2);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 100px;
  border: 1px solid;
  margin-left: 8px;
  vertical-align: middle
}

.nband {
  display: inline-block;
  font-size: var(--fs-caption);
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  color: var(--mute);
  margin-left: 8px;
  vertical-align: middle;
  cursor: help
}

.band.leader,
.band.darkhorse {
  color: var(--jade);
  border-color: var(--jade)
}

.band.challenger,
.band.rising {
  color: var(--amber);
  border-color: var(--amber)
}

.band.emerging,
.band.invisible {
  color: var(--verm);
  border-color: var(--verm)
}

.spark {
  margin: 14px 0 12px;
  height: 44px
}

.bmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: var(--fs-caption);
  color: var(--mute);
  margin-bottom: 12px
}

.bmeta b {
  color: var(--body);
  font-family: ui-monospace, monospace
}

/* pt-ui 排版修:统计改 2×2 定义式网格,标签+值成对,永不折出孤儿(旧 .bmeta 保留给扫描中态) */
.bstats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin: 0 0 12px
}

.bstat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0
}

.bsl {
  font-size: var(--fs-caption2);
  letter-spacing: .05em;
  color: var(--mute)
}

.bsv {
  font-size: var(--fs-subhead);
  font-weight: 600;
  color: var(--body);
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.sparkghost {
  position: relative;
  margin: 14px 0 12px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center
}

.sparkghost svg {
  position: absolute;
  inset: 0;
  height: 100%;
  color: var(--mute);
  opacity: .3
}

.sparkghost span {
  position: relative;
  font-size: var(--fs-caption2);
  color: var(--mute);
  background: var(--card);
  border-radius: var(--r-ctl);
  padding: 1px 8px
}

.aladd {
  display: inline-block;
  position: relative;
  color: var(--mute);
  opacity: .65;
  text-decoration: none;
  border: 1px dashed var(--line);
  border-radius: 99px;
  padding: 1px 10px;
  font-size: var(--fs-caption2);
  transition: color var(--dur-press) var(--ease-out), border-color var(--dur-press) var(--ease-out), opacity var(--dur-press) var(--ease-out)
}

.aladd::after {
  content: "";
  position: absolute;
  inset: -11px
}

.aladd:hover {
  color: var(--indigo);
  border-color: var(--indigo);
  opacity: 1
}

.bfoot {
  display: flex;
  border-top: none;
  margin: 18px calc(-1 * var(--card-pad-x)) calc(-1 * var(--card-pad-y));
  border-radius: 0 0 var(--r-card) var(--r-card);
  overflow: hidden
}

.bfoot button {
  flex: 1;
  background: none;
  border: none;
  padding: 13px 8px;
  min-height: 44px;
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--mute);
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background var(--dur-press) var(--ease-out), color var(--dur-press) var(--ease-out)
}

.bfoot button:hover {
  background: var(--tint);
  color: var(--indigo)
}

.bfoot button:active {
  background: var(--tint-strong)
}

.bfoot button+button {
  border-left: 1px solid var(--separator)
}

.bfoot svg {
  width: 14px;
  height: 14px
}

.mc-obview {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--indigo);
  text-decoration: none;
  margin: 0 8px;
  align-self: center
}

.mup-cta {
  display: inline-block;
  margin-top: 10px;
  background: var(--accent-fill);
  color: #fff;
  font-size: var(--fs-footnote);
  font-weight: 700;
  border-radius: 100px;
  padding: 8px 16px;
  text-decoration: none
}

.mup-cta:hover {
  filter: brightness(1.07)
}

.mc-obsave {
  background: none;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 12px;
  font-size: var(--fs-caption);
  cursor: pointer;
  font-family: inherit;
  color: var(--body)
}

.machip-primary {
  background: var(--accent-fill) !important;
  color: #fff !important;
  border-color: var(--accent-fill) !important
}

/* PT 2026-07-25: a real secondary, not the primary at opacity .7 — one clear primary, the alternative
   recedes (quiet border + muted label) so the pair reads as "do this / or not now" at a glance. */
.machip-quiet {
  background: transparent !important;
  border-color: var(--line) !important;
  color: var(--mute) !important;
  font-weight: 500 !important
}

.machip-quiet:hover {
  background: var(--fill-4) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important
}

.askmaya-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 7px 15px;
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--dur-press) var(--ease-out)
}

.askmaya-chip:hover {
  border-color: var(--indigo)
}

.askmaya-chip img {
  width: 20px;
  height: 20px;
  border-radius: 50%
}

.pl-sec {
  margin-bottom: 26px
}

.pl-bhead {
  font-size: var(--fs-footnote);
  font-weight: 700;
  color: var(--ink);
  margin: 14px 0 8px;
  padding-left: 2px;
  display: flex;
  align-items: center;
  gap: 7px
}

.pl-bhead:before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--indigo)
}

.pl-h {
  font-size: var(--fs-caption);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 700;
  margin-bottom: 10px
}

.pl-h.pl-warn {
  color: var(--verm)
}

.pl-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px 17px;
  margin-bottom: 10px
}

.pl-card.isdone {
  opacity: .55
}

.pl-top {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: var(--fs-subhead)
}

.pl-wk {
  font-size: var(--fs-caption2);
  font-weight: 700;
  color: var(--indigo);
  background: var(--tint);
  border-radius: 5px;
  padding: 2px 6px
}

.pl-chip {
  font-size: var(--fs-caption2);
  font-weight: 700;
  border-radius: 100px;
  padding: 2px 8px
}

.pl-m {
  background: var(--tint);
  color: var(--indigo)
}

.pl-c {
  background: var(--bad-fill);
  color: var(--verm)
}

.pl-brand {
  margin-left: auto;
  font-size: var(--fs-caption);
  color: var(--mute)
}

.pl-why {
  font-size: var(--fs-footnote);
  color: var(--mute);
  margin: 7px 0 10px;
  line-height: 1.55
}

/* ⑤ what comes out of this task — quiet, one line, sits between the why and the actions */
.pl-out {
  font: 600 var(--fs-caption)/1.5 ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace;
  color: var(--indigo);
  background: var(--tint-weak);
  border-left: 2px solid rgba(40, 71, 196, .32);
  border-radius: 0 6px 6px 0;
  padding: 6px 9px;
  margin: 0 0 10px
}

.pl-acts {
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap
}

/* qualitative "which metric this moves" tag — never a number (expected_gain is internal) */
.pl-metric {
  font-size: var(--fs-caption2);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--indigo);
  background: var(--tint);
  border: 1px solid rgba(40, 71, 196, .16);
  border-radius: 100px;
  padding: 2px 8px;
  white-space: nowrap
}

.pl-metric i {
  font-style: normal;
  opacity: .8;
  margin-right: 3px
}

.pl-drop {
  display: none;
  position: relative;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  color: var(--mute);
  border-radius: 8px;
  padding: 6px 11px;
  font-size: var(--fs-caption);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer
}

.pl-drop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px
}

.pl-drop:hover {
  border-color: var(--verm);
  color: var(--verm)
}

.p90-edit .pl-drop {
  display: inline-block
}

.pl-card.p90-off {
  opacity: .42
}

.pl-card.p90-off .pl-top b {
  text-decoration: line-through
}

.pl-card.p90-off .pl-drop {
  border-color: var(--verm);
  color: var(--verm);
  display: inline-block
}

.pl-go {
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 13px;
  font-size: var(--fs-footnote);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit
}

.pl-go.ghost {
  background: transparent;
  color: var(--indigo);
  border: 1px solid var(--line);
  text-decoration: none;
  display: inline-flex;
  align-items: center
}

/* IMP-Z: the site build as the plan's hero — the product's headline feature, not one row among many */
.plbwrap {
  margin-bottom: 22px
}

.plbhero {
  background: linear-gradient(180deg, rgba(40, 71, 196, .06), rgba(40, 71, 196, .02));
  border: 1px solid rgba(40, 71, 196, .22);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 12px
}

.plb-eye {
  font-size: var(--fs-caption2);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--indigo);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.plb-pill {
  font-size: var(--fs-caption2);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 100px
}

.plb-pill.pub {
  background: var(--ok-fill);
  color: var(--jade)
}

.plb-pill.draft {
  background: rgba(183, 121, 31, .09);
  color: var(--amber)
}

/* 填充从 .15 降到 .09:11px 粗体药丸原为 4.29:1,差 AA 一线。改填充而不动 --amber——那是全站语义色,动它牵连十几处 */
.plb-h {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--fs-title2);
  font-weight: 600;
  color: var(--ink);
  margin: 7px 0 6px;
  line-height: 1.25;
  letter-spacing: var(--ls-title)
}

.plb-why {
  font-size: var(--fs-subhead);
  color: var(--ink);
  opacity: .82;
  line-height: 1.55;
  margin: 0 0 12px
}

.plb-inside {
  margin-bottom: 14px
}

.plb-inside>summary {
  cursor: pointer;
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--indigo);
  list-style: none;
  user-select: none
}

.plb-inside>summary::-webkit-details-marker {
  display: none
}

.plb-inside>summary::before {
  content: '▸ ';
  font-size: var(--fs-caption2)
}

.plb-inside[open]>summary::before {
  content: '▾ '
}

.plb-inside ul {
  margin: 9px 0 0;
  padding-left: 20px
}

.plb-inside li {
  font-size: var(--fs-footnote);
  color: var(--ink);
  opacity: .85;
  line-height: 1.5;
  margin-bottom: 5px
}

.plb-acts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center
}

.mlink {
  color: var(--indigo);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all
}

/* an old bare deliverable URL, defused into a button that opens it on the workbench */
.mlink-wb {
  font: 600 var(--fs-footnote)/1 inherit;
  font-family: inherit;
  text-decoration: none;
  background: var(--tint);
  border: 1px solid rgba(40, 71, 196, .22);
  border-radius: 8px;
  padding: 5px 11px;
  cursor: pointer;
  word-break: normal
}

.mlink-wb:hover {
  background: var(--tint-strong)
}

.pl-eta {
  font-size: var(--fs-caption);
  color: var(--mute);
  margin-right: 4px;
  align-self: center
}

.pl-donebadge {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--jade)
}

/* same badge, now clickable (workbench only — the plan page never renders this variant) */
.pl-rev {
  background: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 13px;
  min-height: 44px;
  font-family: inherit;
  cursor: pointer;
  text-align: left
}

.pl-rev:hover {
  border-color: var(--jade);
  background: var(--ok-bg)
}

.pl-working {
  font-size: var(--fs-caption);
  color: var(--amber);
  font-weight: 600
}

.pl-verify {
  font-size: var(--fs-caption);
  color: var(--amber);
  font-weight: 700
}

.abadge {
  position: absolute;
  top: 12px;
  right: 42px;
  background: var(--verm);
  color: #fff;
  font-size: var(--fs-caption2);
  font-weight: 700;
  border-radius: 100px;
  padding: 2px 9px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.5;
  box-shadow: 0 2px 8px -2px rgba(186, 59, 29, .5);
  transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out)
}

.abadge:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px -2px rgba(186, 59, 29, .65)
}

.abadge::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 100px
}

.pending {
  font-size: var(--fs-footnote);
  color: var(--amber);
  padding: 14px 0
}

.bcard.pend {
  align-self: flex-start
}

.brun {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0 4px
}

.brun-h {
  font-size: var(--fs-subhead);
  font-weight: 600;
  color: var(--ink)
}

.brun-t {
  font-size: var(--fs-caption);
  color: var(--mute);
  margin-top: 3px
}

.bspin {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2.5px solid rgba(40, 71, 196, .18);
  border-top-color: var(--indigo);
  animation: bspin .8s linear infinite
}

@keyframes bspin {
  to {
    transform: rotate(360deg)
  }
}

.bstall {
  padding: 10px 0 2px
}

.bstall-h {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-subhead);
  font-weight: 700;
  color: var(--verm)
}

.bstall-h svg {
  width: 17px;
  height: 17px;
  flex: none
}

.bstall-t {
  font-size: var(--fs-caption);
  color: var(--mute);
  margin: 6px 0 10px;
  line-height: 1.5
}

.bstall-a button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--verm);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 7px 13px;
  font-size: var(--fs-footnote);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit
}

.bstall-a button svg {
  width: 14px;
  height: 14px
}

.bstall-a button:hover {
  filter: brightness(.94)
}

.addform {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.addform .full {
  grid-column: 1/-1
}

.addform label {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 5px
}

.addform input,
.addform select {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--line);
  border-radius: 7px;
  font-size: var(--fs-subhead);
  font-family: inherit;
  background: var(--paper)
}

.addform input:focus,
.addform select:focus {
  outline: none;
  border-color: var(--indigo)
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  background: var(--tint-wash);
  border-radius: var(--r-pill);
  padding: 7px 14px;
  font-size: var(--fs-footnote);
  cursor: pointer;
  user-select: none
}

.chip.off {
  border-color: var(--line);
  color: var(--mute);
  background: var(--paper);
  text-decoration: line-through
}

.chip .ck {
  font-weight: 700
}

.baliases {
  font-size: var(--fs-caption);
  color: var(--mute);
  margin: -8px 0 12px;
  line-height: 1.6
}

.baliases .alab {
  font-weight: 600
}

.baliases .albad {
  color: var(--mute);
  text-decoration: line-through
}

/* Codex r4: a non-http(s) legacy url is shown, never linked */
.baliases .aled {
  color: var(--mute);
  margin-left: 4px;
  text-decoration: none
}

.baliases .aled:hover {
  color: var(--indigo)
}

.baliases .alin {
  width: 64%;
  padding: 5px 8px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  font-size: var(--fs-caption);
  font-family: inherit;
  background: var(--paper)
}

.baliases .alin:focus {
  outline: none;
  border-color: var(--indigo)
}

.baliases .albtn {
  font-size: var(--fs-caption);
  border: 1px solid var(--line);
  background: none;
  border-radius: 6px;
  padding: 6px 11px;
  cursor: pointer;
  font-family: inherit;
  color: var(--body)
}

.baliases .albtn:hover {
  border-color: var(--indigo);
  color: var(--indigo)
}

.alist {
  list-style: none
}

.alist li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 0;
  min-height: 44px;
  border-bottom: 1px solid var(--separator);
  font-size: var(--fs-subhead)
}

.alist li:last-child {
  border-bottom: none
}

/* BUG-033: the dot now carries read state only — solid indigo = unread, empty = read (source/severity moved to a text chip) */
.adot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
  background: transparent;
  border: 1px solid transparent
}

.alist li.unread .adot {
  background: var(--indigo)
}

.alist li:not(.unread) .adot {
  border-color: var(--line)
}

.alist li:not(.unread) .amsgrow {
  color: var(--mute)
}

.alist li:not(.unread) .ab {
  color: var(--mute)
}

.alist li.unread {
  background: var(--tint-weak)
}

.alist li.unread .amsgrow {
  font-weight: 500
}

.asrc {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--mute);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  margin-right: 7px;
  vertical-align: 1px
}

.asrc.warn {
  color: var(--verm);
  border-color: var(--verm)
}

.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.atoolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap
}

.atbtn {
  position: relative;
  font-size: var(--fs-footnote);
  font-family: inherit;
  border: 1.5px solid var(--line);
  background: none;
  color: var(--body);
  border-radius: 99px;
  padding: 7px 14px;
  cursor: pointer
}

.atbtn:hover {
  border-color: var(--indigo);
  color: var(--indigo)
}

.atbtn.on {
  border-color: var(--accent-fill);
  background: var(--accent-fill);
  color: #fff;
  font-weight: 600
}

.atbtn:active {
  transform: scale(.97)
}

.alist .adact {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap
}

.alist .aunread {
  font-size: var(--fs-footnote);
  font-family: inherit;
  color: var(--mute);
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer
}

.alist .aunread:hover {
  border-color: var(--indigo);
  color: var(--indigo)
}

.alist .aunread:active {
  transform: scale(.97)
}

.alist li.aclk {
  cursor: pointer;
  flex-direction: column;
  align-items: stretch;
  gap: 0
}

.alist li.aclk:hover {
  background: var(--tint-weak)
}

.alist .arow {
  display: flex;
  gap: 12px;
  align-items: flex-start
}

.alist li.aclk:not(.open) .amsgrow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.alist .amsgrow {
  flex: 1;
  min-width: 0
}

.alist .achev {
  color: var(--mute);
  font-size: var(--fs-body);
  line-height: 1.2;
  transition: transform var(--dur-press) var(--ease-out);
  flex-shrink: 0
}

.alist li.aclk.open .achev {
  transform: rotate(90deg)
}

.alist .adetail {
  display: none;
  margin: 9px 0 3px 21px;
  padding: 11px 13px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 9px
}

.alist li.aclk.open .adetail {
  display: block
}

.alist .asev {
  display: inline-block;
  font-size: var(--fs-caption2);
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid var(--line);
  color: var(--mute);
  margin-bottom: 7px
}

.alist .asev.warn {
  color: var(--verm);
  border-color: var(--verm)
}

.alist .asev.good {
  color: var(--jade);
  border-color: var(--jade)
}

.alist .asev.maya {
  color: var(--indigo);
  border-color: var(--indigo)
}

.alist .amsg {
  font-size: var(--fs-subhead);
  line-height: 1.55;
  color: var(--body);
  margin-bottom: 10px
}

.alist .amaya {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-footnote);
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--accent-fill);
  border: none;
  border-radius: 8px;
  padding: 10px 15px;
  cursor: pointer
}

.alist .amaya:hover {
  opacity: .9
}

.alist .amaya:active {
  transform: scale(.97)
}

/* BUG-031/032 re-fix: structured expand detail (real numbers + task list, lazy-loaded) */
.alist .adbody {
  margin-bottom: 10px
}

.alist .adload {
  font-size: var(--fs-footnote);
  color: var(--mute);
  padding: 2px 0
}

.alist .admeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 9px
}

.alist .adkind {
  display: inline-block;
  font-size: var(--fs-caption2);
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid var(--line);
  color: var(--mute)
}

.alist .adkind.warn {
  color: var(--verm);
  border-color: var(--verm)
}

.alist .adkind.good {
  color: var(--jade);
  border-color: var(--jade)
}

.alist .adkind.maya {
  color: var(--indigo);
  border-color: var(--indigo)
}

.alist .adwhen {
  font-size: var(--fs-caption2);
  color: var(--mute);
  font-variant-numeric: tabular-nums
}

.alist .adbrand {
  font-size: var(--fs-caption);
  color: var(--body);
  font-weight: 600
}

.alist .addelta {
  font-size: var(--fs-footnote);
  color: var(--body);
  margin-bottom: 9px;
  font-variant-numeric: tabular-nums
}

.alist .addelta .adup {
  color: var(--jade);
  font-weight: 600
}

.alist .addelta .addn {
  color: var(--verm);
  font-weight: 600
}

.alist .addelta .addot {
  color: var(--mute);
  margin: 0 3px
}

.alist .adexplain {
  font-size: var(--fs-footnote);
  line-height: 1.55;
  color: var(--body);
  margin-bottom: 8px
}

.alist .adaction {
  font-size: var(--fs-footnote);
  line-height: 1.5;
  color: var(--mute);
  margin-bottom: 2px
}

.alist .adtasks {
  margin-top: 10px;
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 7px
}

.alist .adtask {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--card)
}

.alist .adtrow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap
}

.alist .adtt {
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--body);
  flex: 1;
  min-width: 0
}

.alist .adtown {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--indigo);
  border: 1px solid var(--indigo);
  border-radius: 5px;
  padding: 1px 5px
}

.alist .adtown.cli {
  color: var(--verm);
  border-color: var(--verm)
}

.alist .adtmeta {
  font-size: var(--fs-caption2);
  color: var(--mute);
  margin-top: 3px
}

.alist .adtwhy {
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--mute);
  margin-top: 4px
}

/* Legacy full-width date rules (no longer emitted); keep hidden if any residual nodes exist. */
.mdatesep {
  display: none !important
}

/* Per-bubble timestamp: small mute text under the bubble, aligned with user/maya side. */
.mmsg .msgtime {
  font-size: var(--fs-caption2);
  color: var(--mute);
  margin-top: 4px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: .01em
}

.mmsg.user .msgtime {
  text-align: right;
  align-self: flex-end
}

.mmsg.maya .msgtime {
  text-align: left;
  align-self: flex-start
}

.ftabs {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 14px
}

.ftab {
  position: relative;
  font-size: var(--fs-footnote);
  font-family: inherit;
  border: 1.5px solid var(--line);
  background: none;
  color: var(--body);
  border-radius: 99px;
  padding: 7px 14px;
  cursor: pointer
}

.ftab.on {
  border-color: var(--indigo);
  color: var(--indigo);
  font-weight: 600
}

.ftab::after,
.mayatab::after,
.chip::after,
.machip::after,
.mbb-chip::after,
.mc-fpc::after,
.mc-cpk::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit
}

.ftab:active,
.mayatab:active,
.chip:active,
.machip:active,
.mbb-chip:active,
.mc-fpc:active,
.mc-cpk:active,
.askmaya-chip:active,
.mc-pk:active,
.obtn:active,
.mc-ghost:active,
.mc-obsave:active,
.cwcopy:active,
.obhead button:active,
.mc-obhead button:active {
  transform: scale(.97)
}

.mayatabs {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  max-width: 740px;
  margin: 0 auto 10px;
  width: 100%
}

.mayatab {
  position: relative;
  font-size: var(--fs-footnote);
  font-family: inherit;
  border: 1.5px solid var(--line);
  background: none;
  color: var(--body);
  border-radius: 99px;
  padding: 7px 14px;
  cursor: pointer
}

.mayatab.on {
  border-color: var(--accent-fill);
  background: var(--accent-fill);
  color: #fff;
  font-weight: 600
}

.pl-chip.pl-bx {
  background: var(--tint);
  color: var(--indigo)
}

.pl-chip.pl-b0 {
  background: none;
  border: 1px dashed var(--line);
  color: var(--mute)
}

.alist .ab {
  font-weight: 600;
  color: var(--ink);
  margin-right: 6px
}

.alist .at {
  font-size: var(--fs-caption2);
  color: var(--mute);
  white-space: nowrap
}

.empty {
  text-align: center;
  color: var(--mute);
  font-size: var(--fs-subhead);
  padding: 40px 20px
}

.grid .empty {
  grid-column: 1/-1
}

/* empty state inside the brand-card grid must span all columns, not squeeze into column 1 */
.modal {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  z-index: 50;
  overflow-y: auto
}

.modal.on {
  display: flex
}

.modal.brand-cap-modal {
  align-items: center;
  padding-block: 16px
}

.modal .inner {
  background: var(--glass-heavy);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--r-card);
  max-width: 640px;
  width: 100%;
  padding: 26px 28px;
  box-shadow: var(--shadow-3)
}

.modal h2 {
  font-size: var(--fs-title2);
  margin-bottom: 4px;
  letter-spacing: var(--ls-title)
}

.modal .close {
  float: right;
  cursor: pointer;
  color: var(--mute);
  font-size: var(--fs-title1);
  line-height: 1;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -6px -8px 0 0;
  border-radius: 8px
}

.modal .close:hover {
  background: var(--ink-hover);
  color: var(--ink)
}

.brand-cap-alert {
  padding: 8px 2px 2px
}

.brand-cap-eyebrow {
  margin: 0 0 8px;
  color: var(--verm);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase
}

.brand-cap-copy {
  max-width: 520px;
  margin: 12px 0 0;
  color: var(--mute);
  font-size: var(--fs-body);
  line-height: 1.65
}

.brand-cap-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px
}

.brand-cap-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none
}

.brand-cap-manage {
  min-height: 43px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-subhead);
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer
}

.brand-cap-manage:hover {
  background: var(--ink-hover)
}

.htable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-footnote);
  margin-top: 14px
}

.htable th {
  text-align: left;
  font-size: var(--fs-caption2);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mute);
  padding: 8px 8px;
  border-bottom: 2px solid var(--ink)
}

.htable td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--separator)
}

.tag {
  font-size: var(--fs-caption2);
  letter-spacing: .2em;
  color: var(--mute);
  text-transform: uppercase
}

@media(max-width:560px) {
  .addform {
    grid-template-columns: 1fr
  }

  .wrap {
    padding: 22px 16px 70px
  }

  .top {
    padding: 16px
  }
}

/* app shell: left sidebar + main */
.appshell {
  display: flex;
  min-height: 100vh
}

/* task23 ⑤: the rail was an opaque WHITE panel divided from a warm paper page by a hard 1px line —
   the single most "web app, 2018" surface in the product. It becomes chrome: paper-tinted, blurred,
   and bounded by a 1px shadow instead of a border (a shadow can be sub-pixel soft, a border can't).
   It stays position:sticky, i.e. the layout is unchanged — nothing here reflows, which is why this
   is still a one-line `cp` rollback. */
.sidebar {
  width: 228px;
  flex-shrink: 0;
  border-right: none;
  box-shadow: 1px 0 0 var(--card-edge);
  padding: 14px 14px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--chrome-bg);
  -webkit-backdrop-filter: var(--chrome-blur);
  backdrop-filter: var(--chrome-blur);
  z-index: 20
}

.sidebar .slogo {
  margin: 4px 8px 22px;
  display: block
}

.sidebar .slogo img {
  height: 32px;
  display: block
}

.snav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto
}

.sgroup {
  font-size: var(--fs-caption2);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 16px 12px 6px;
  font-weight: 700
}

.snav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: var(--r-ctl);
  color: var(--body);
  font-size: var(--fs-subhead);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none
}

.snav a:hover {
  background: var(--fill)
}

.snav a:active {
  background: var(--fill-2)
}

/* task23: the selected row has to be TRANSLUCENT now — --tint-wash is opaque by contract, and on a
   blurred rail an opaque chip punches a flat hole straight through the material. */
.snav a.active {
  background: var(--tint-strong);
  color: var(--indigo)
}

.snav a.active svg {
  color: var(--indigo)
}

.snav a svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--mute)
}

.snav a.soon {
  color: var(--mute);
  cursor: default
}

.snav a.soon:hover {
  background: none
}

.snav a .soonchip {
  margin-left: auto;
  font-size: var(--fs-eyebrow);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mute);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0 6px
}

.snav a .nbadge {
  margin-left: auto;
  background: var(--verm);
  color: #fff;
  font-size: var(--fs-caption2);
  border-radius: 100px;
  padding: 0 7px;
  font-weight: 700
}

.mainwrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column
}

/* task23 ⑥: the top bar becomes a floating translucent strip and content scrolls UNDER it. This is
   the one change in the batch you can see without a second screenshot to compare against — the blur
   only exists while something is moving beneath it. sticky (not fixed) so it keeps its place in the
   flex column and nothing needs a compensating offset. z-index 20 puts it over .main's content and
   under every overlay (.acctmenu 60 lives inside this bar; toasts 130/140; mobile rail 120). */
.topbar2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 30px;
  border-bottom: none;
  box-shadow: 0 1px 0 var(--card-edge);
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bar-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur)
}

.crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-subhead);
  color: var(--mute);
  min-width: 0
}

.crumb .root {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-weight: 600
}

.crumb .root .dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--verm)
}

.crumb .sep {
  color: var(--line)
}

.crumb .cur {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.tbright {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.brand-context {
  position: relative;
  width: 220px;
  min-width: 0
}

.global-brand-picker {
  position: relative;
  width: 100%
}

.global-brand-trigger,
#global-brand-add {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-footnote);
  font-weight: 600
}

.global-brand-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px 0 7px;
  cursor: pointer;
  text-align: left
}

#global-brand-add {
  padding: 0 12px;
  cursor: pointer;
  color: var(--indigo)
}

.global-brand-trigger:hover,
#global-brand-add:hover {
  border-color: var(--faint);
  background: var(--fill)
}

.global-brand-trigger:focus-visible,
#global-brand-add:focus-visible,
.global-brand-menu [role="option"]:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px
}

.global-brand-mark,
.global-brand-option-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--fill);
  color: var(--indigo);
  font-size: 11px;
  font-weight: 750
}

.global-brand-name,
.global-brand-option-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.global-brand-name {
  flex: 1
}

.global-brand-chevron {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--mute);
  transition: transform .16s ease
}

.brand-context.open .global-brand-chevron {
  transform: rotate(180deg)
}

.global-brand-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 90;
  width: max(100%, 260px);
  max-height: min(340px, calc(100vh - 80px));
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 16px 38px -14px rgba(26, 35, 51, .34)
}

.global-brand-menu[hidden] {
  display: none
}

.global-brand-menu [role="option"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  padding: 5px 9px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-footnote);
  font-weight: 600;
  text-align: left;
  cursor: pointer
}

.global-brand-option-main {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0
}

.global-brand-menu [role="option"]:hover,
.global-brand-menu [role="option"]:focus-visible {
  background: var(--fill)
}

.global-brand-menu [role="option"][aria-selected="true"] {
  color: var(--indigo)
}

.global-brand-check {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--indigo);
  opacity: 0
}

.global-brand-menu [role="option"][aria-selected="true"] .global-brand-check {
  opacity: 1
}

@media(prefers-reduced-motion:reduce) {
  .global-brand-chevron {
    transition: none
  }
}

.bellbtn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mute);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 8px;
  line-height: 0
}

.bellbtn:hover {
  background: var(--fill);
  color: var(--ink)
}

.bellbtn:active {
  background: var(--fill-2)
}

.bellbtn svg {
  width: 19px;
  height: 19px
}

.bellbtn .dot {
  position: absolute;
  top: 9px;
  right: 11px;
  width: 8px;
  height: 8px;
  background: var(--verm);
  border-radius: 50%;
  border: 2px solid var(--card)
}

.acctwrap {
  position: relative
}

.avatar {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--accent-fill);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-subhead);
  font-weight: 700;
  user-select: none
}

.avatar::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%
}

.acctmenu {
  position: absolute;
  top: 46px;
  right: 0;
  width: 248px;
  background: var(--glass-heavy);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-3);
  padding: 6px;
  display: none;
  z-index: 60
}

.acctmenu.on {
  display: block;
  transform-origin: top right;
  animation: menuin var(--dur) var(--ease-out)
}

@keyframes menuin {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(.98);
    filter: blur(4px)
  }

  to {
    opacity: 1;
    transform: none;
    filter: none
  }
}

.acctmenu .head {
  padding: 12px;
  border-bottom: 1px solid var(--separator);
  margin-bottom: 6px
}

.acctmenu .head .nm {
  font-weight: 700;
  color: var(--ink);
  font-size: var(--fs-body)
}

.acctmenu .head .em {
  font-size: var(--fs-footnote);
  color: var(--mute);
  word-break: break-all
}

.acctmenu button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 44px;
  background: none;
  border: none;
  text-align: left;
  padding: 10px 12px;
  border-radius: 7px;
  font-size: var(--fs-subhead);
  color: var(--body);
  cursor: pointer;
  font-family: inherit
}

.acctmenu button:hover {
  background: var(--fill)
}

.acctmenu button:active {
  background: var(--fill-2)
}

.acctmenu button svg {
  width: 16px;
  height: 16px;
  color: var(--mute);
  flex-shrink: 0
}

.acctmenu .soonchip {
  margin-left: auto;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0 6px
}

.acctmenu .sep {
  height: 1px;
  background: var(--separator);
  margin: 6px 4px
}

.acctmenu .logout {
  color: var(--verm)
}

.acctmenu .logout svg {
  color: var(--verm)
}

.main {
  flex: 1;
  padding: 30px 30px 80px;
  max-width: 1060px;
  width: 100%;
  margin: 0 auto;
  transition: opacity var(--dur-press) var(--ease-out)
}

.main.lang-fading {
  opacity: 0
}

.main:has(#v-maya.on) {
  max-width: none
}

.view {
  display: none
}

.view.on {
  display: block
}

.scanov {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(250, 249, 246, .98);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center
}

.scanov.on {
  display: flex
}

.scaninner {
  max-width: 420px
}

.radar2 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid var(--line);
  position: relative;
  margin: 0 auto 28px
}

.radar2::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--indigo);
  border-right-color: var(--indigo);
  animation: spin2 1s linear infinite
}

@keyframes spin2 {
  to {
    transform: rotate(360deg)
  }
}

@media(prefers-reduced-motion:reduce) {
  .radar2::before {
    animation: none
  }
}

.scanav {
  width: 88px;
  height: 88px;
  margin: 0 auto 26px;
  position: relative
}

.scanav img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 6px 22px rgba(40, 71, 196, .20)
}

.scanav .scanav-ring {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: var(--indigo);
  border-right-color: var(--indigo);
  animation: spin2 1s linear infinite
}

@media(prefers-reduced-motion:reduce) {
  .scanav .scanav-ring {
    animation: none
  }
}

.scanov h2 {
  font-size: var(--fs-title2);
  margin-bottom: 22px;
  letter-spacing: var(--ls-title)
}

.scansteps {
  text-align: left;
  max-width: 320px;
  margin: 0 auto 20px
}

.scansteps .ss {
  font-size: var(--fs-subhead);
  color: var(--mute);
  padding: 7px 0;
  transition: color .3s
}

.scansteps .ss.active {
  color: var(--ink);
  font-weight: 600
}

.scansteps .ss.done {
  color: var(--jade)
}

.scannote {
  font-size: var(--fs-footnote);
  color: var(--mute);
  max-width: 380px;
  margin: 0 auto;
  line-height: 1.5
}

.rtable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-subhead);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden
}

.rtable th {
  text-align: left;
  font-size: var(--fs-caption2);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 11px 14px;
  border-bottom: 2px solid var(--ink)
}

.rtable td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--separator)
}

.rtable tr:last-child td {
  border-bottom: none
}

.navtoggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0
}

.navtoggle svg {
  width: 20px;
  height: 20px;
  color: var(--ink)
}

.navbackdrop {
  display: none
}

@media(max-width:760px) {
  .appshell {
    flex-direction: column
  }

  .navtoggle {
    display: flex
  }

  /* task23: as a drawer the rail goes back to opaque. It sits OVER a scrim-darkened page, so the .72
    chrome fill would put nav labels on top of dimmed content — the one place the glass costs legibility. */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: min(82vw, 286px);
    z-index: 120;
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease-out);
    box-shadow: 0 18px 50px -12px rgba(26, 35, 51, .4);
    background: var(--card);
    -webkit-backdrop-filter: none;
    backdrop-filter: none
  }

  .sidebar.open {
    transform: translateX(0)
  }

  .navbackdrop {
    position: fixed;
    inset: 0;
    background: var(--scrim-nav);
    z-index: 110
  }

  .navbackdrop.open {
    display: block
  }

  .topbar2 {
    padding: 10px 14px
  }

  .brand-context {
    width: 168px
  }

  .crumb .root span {
    display: none
  }

  .main {
    padding: 20px 16px 60px
  }
}

@media(max-width:560px) {
  .topbar2 {
    gap: 8px
  }

  .topbar2>.crumb {
    display: none
  }

  .tbright {
    gap: 6px;
    margin-left: auto
  }

  .brand-context {
    width: 148px
  }

  .global-brand-trigger,
  #global-brand-add {
    height: 36px
  }

  .global-brand-menu {
    width: min(260px, calc(100vw - 28px))
  }

  .bellbtn {
    width: 40px;
    height: 40px
  }
}

@media(max-width:380px) {
  .brand-context {
    width: 126px
  }
}

.addform input.urlgrey {
  color: var(--mute)
}

/* insights views */
.insbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: var(--fs-footnote);
  color: var(--mute)
}

.insbar label {
  font-weight: 600;
  color: var(--ink)
}

.insbar select {
  padding: 8px 11px;
  border: 1.5px solid var(--line);
  border-radius: 7px;
  font-size: var(--fs-subhead);
  font-family: inherit;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer
}

.insbar select:focus {
  outline: none;
  border-color: var(--indigo)
}

.inscard {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--r-card);
  padding: 26px 28px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-1)
}

.inscard h3 {
  font-size: var(--fs-body);
  margin-bottom: 14px
}

.inscard .csub {
  font-size: var(--fs-caption);
  color: var(--mute);
  margin: -8px 0 14px
}

.barrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 8px 0;
  font-size: var(--fs-footnote)
}

.barrow .bl {
  width: 10.625rem;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--body)
}

.barrow.you .bl {
  font-weight: 700;
  color: var(--ink)
}

.barrow .bt {
  flex: 1;
  background: var(--fill);
  border-radius: 5px;
  height: 1.1875rem;
  overflow: hidden
}

.barrow .bf {
  height: 100%;
  background: var(--indigo);
  border-radius: 5px;
  min-width: 2px
}

.barrow.you .bf {
  background: var(--verm)
}

.barrow .bv {
  width: 3.25rem;
  text-align: right;
  font-family: ui-monospace, monospace;
  color: var(--body)
}

.youchip {
  font-size: var(--fs-eyebrow);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--verm);
  border: 1px solid var(--verm);
  border-radius: 100px;
  padding: 0 6px;
  margin-left: 6px
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  font-size: var(--fs-caption);
  color: var(--mute)
}

.legend .lg {
  display: flex;
  align-items: center;
  gap: 6px
}

.legend .lg i {
  width: 13px;
  height: 3px;
  border-radius: 2px;
  display: inline-block
}

.legend .lg b {
  color: var(--body);
  font-family: ui-monospace, monospace;
  font-weight: 600
}

.chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px
}

.chips .cl {
  font-size: var(--fs-caption2);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mute);
  margin-right: 2px
}

#v-citations .chip,
#v-prompts .chip {
  position: relative;
  font-size: var(--fs-caption);
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--body);
  cursor: pointer;
  font-family: inherit
}

.chip:hover {
  border-color: var(--indigo)
}

.chip.on {
  background: var(--accent-fill);
  color: #fff;
  border-color: var(--accent-fill)
}

.wl {
  list-style: none
}

.wl li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 13px 2px;
  border-bottom: 1px solid var(--separator)
}

.wl li:last-child {
  border-bottom: none
}

.wl .wn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--r-ctl);
  background: var(--fill);
  color: var(--body);
  font-size: var(--fs-caption2);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px
}

.wl li.hi .wn {
  background: var(--bad-bg);
  color: var(--verm)
}

.wl .wmain {
  flex: 1;
  min-width: 0
}

.wl .wd {
  font-weight: 700;
  color: var(--ink);
  font-size: var(--fs-subhead)
}

.wl .wa {
  font-size: var(--fs-footnote);
  color: var(--mute);
  margin-top: 3px;
  line-height: 1.5
}

.wl .wmeta {
  flex-shrink: 0;
  text-align: right;
  font-size: var(--fs-caption);
  color: var(--mute)
}

.wl .wmeta .wc {
  font-family: ui-monospace, monospace;
  font-weight: 700;
  color: var(--body);
  font-size: var(--fs-subhead)
}

.kpill {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--mute)
}

.kpill.cited {
  color: var(--indigo);
  border-color: var(--indigo)
}

.kpill.opp {
  color: var(--amber);
  border-color: var(--amber)
}

/* outreach card: per-source rows + inline draft panel */
.mc-channels {
  margin: 2px 0 10px
}

.mc-chrow {
  border-top: 1px solid var(--separator);
  padding: 10px 0
}

.mc-chrow:first-child {
  border-top: none;
  padding-top: 2px
}

.mc-chtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px
}

.mc-chd {
  font-size: var(--fs-subhead);
  font-weight: 600;
  color: var(--ink);
  word-break: break-word;
  min-width: 0
}

.mc-chn {
  font-size: var(--fs-caption);
  color: var(--mute);
  font-weight: 400;
  margin-left: 8px;
  white-space: nowrap
}

.mc-chbtn {
  flex-shrink: 0;
  background: var(--accent-fill);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 13px;
  font-size: var(--fs-footnote);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit
}

.mc-chbtn:disabled {
  opacity: .5;
  cursor: default
}

.mc-obpanel {
  margin-top: 9px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
  font-size: var(--fs-subhead)
}

.mc-obhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px
}

.mc-obl {
  font-size: var(--fs-caption2);
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-right: auto
}

.mc-obhead {
  flex-wrap: wrap
}

.mc-obhead button {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 12px;
  font-size: var(--fs-caption);
  cursor: pointer;
  font-family: inherit;
  color: var(--ink)
}

.mc-obtarget {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--body);
  letter-spacing: .01em;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.mc-obarr {
  color: var(--mute);
  font-weight: 400
}

.mc-obmail,
a.obmail {
  font-size: var(--fs-caption);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 11px;
  cursor: pointer;
  font-family: inherit;
  color: var(--indigo);
  text-decoration: none;
  font-weight: 600
}

.mc-obmail:hover,
a.obmail:hover {
  border-color: var(--indigo)
}

/* ready-to-send outreach body (BUG-034): subject + finished message up top, strategy folded away */
.ob-subj {
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 9px;
  line-height: 1.4
}

.ob-msg {
  white-space: pre-wrap;
  line-height: 1.62;
  color: var(--body)
}

.ob-why {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 9px
}

.ob-why summary {
  cursor: pointer;
  font-size: var(--fs-caption);
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: .05em;
  list-style: none;
  user-select: none
}

.ob-why summary::-webkit-details-marker {
  display: none
}

.ob-why summary::before {
  content: '▸ ';
  color: var(--mute)
}

.ob-why[open] summary::before {
  content: '▾ '
}

.ob-whyp {
  margin-top: 8px;
  font-size: var(--fs-footnote);
  line-height: 1.55;
  color: var(--body);
  white-space: pre-wrap
}

.mc-obbody {
  white-space: pre-wrap;
  line-height: 1.62;
  color: var(--body)
}

.mc-obbody .ob-msg,
.mc-obbody .ob-whyp {
  white-space: pre-wrap
}

/* skill-card brand switcher (multi-brand users pick which brand a skill runs on) */
.maya-brandbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 4px 0 4px var(--mgut);
  max-width: 760px
}

.maya-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--mute);
  font-size: var(--fs-caption)
}

.maya-divider::before,
.maya-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line)
}

.maya-divider b {
  color: var(--ink)
}

.maya-brandbar .mbb-l {
  font-size: var(--fs-caption);
  color: var(--mute);
  margin-right: 2px
}

.mbb-chip {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 6px 13px;
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--body);
  cursor: pointer;
  font-family: inherit
}

.mbb-chip.on {
  background: var(--accent-fill);
  color: #fff;
  border-color: var(--accent-fill);
  cursor: default
}

.mbb-chip:not(.on):hover {
  border-color: var(--indigo);
  color: var(--indigo)
}

.mc-freqpick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 10px 0 4px
}

.mc-fpl {
  font-size: var(--fs-caption2);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 700;
  margin-right: 2px
}

.mc-fpc {
  position: relative;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 100px;
  padding: 7px 14px;
  font-size: var(--fs-footnote);
  cursor: pointer;
  font-family: inherit;
  color: var(--body);
  transition: border-color var(--dur-press) var(--ease-out), background var(--dur-press) var(--ease-out)
}

.mc-fpc:hover {
  border-color: var(--indigo)
}

.mc-fpc.on {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: #fff;
  font-weight: 600
}

.mc-fpc:disabled {
  opacity: .55;
  cursor: default
}

.mc-fpnote {
  font-size: var(--fs-caption);
  color: var(--jade);
  flex-basis: 100%
}

.mc-contentpick {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 2px 0 8px
}

.mc-cpk {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 15px;
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--body);
  cursor: pointer;
  font-family: inherit
}

.mc-cpk.on {
  background: var(--accent-fill);
  color: #fff;
  border-color: var(--accent-fill)
}

.mc-cpk:not(.on):hover {
  border-color: var(--indigo);
  color: var(--indigo)
}

/* batch 3 §2d: the format buttons carry a second line — where the piece ends up. Two-line pills,
   so the destination is read at the same moment the choice is made (44pt tall, not colour-coded). */
.mc-cpkf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 44px;
  border-radius: 12px;
  padding: 8px 14px;
  text-align: left
}

.mc-cpkl {
  font-size: var(--fs-footnote);
  font-weight: 600;
  line-height: 1.25
}

.mc-cpkd {
  font-size: var(--fs-caption2);
  font-weight: 400;
  line-height: 1.3;
  color: var(--mute);
  letter-spacing: .005em
}

.mc-cpkf.on .mc-cpkd {
  color: rgba(255, 255, 255, .82)
}

.mc-cpanel {
  margin-top: 4px
}

/* the state-aware panels (§2b already-have-it / §2c off-site / §2a merge-into-FAQ) */
.mc-cdnote {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 4px;
  background: var(--card)
}

.mc-cdh {
  font-size: var(--fs-footnote);
  font-weight: 700;
  color: var(--body);
  margin-bottom: 5px
}

.mc-cdb {
  font-size: var(--fs-footnote);
  line-height: 1.55;
  color: var(--body)
}

.mc-cdlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px
}

.mc-cdlk {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--indigo);
  text-decoration: none;
  background: var(--paper);
  font-family: inherit;
  cursor: pointer
}

.mc-cdlk:hover {
  border-color: var(--indigo)
}

.mc-cdplace {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--mute);
  margin-top: 9px
}

.pill {
  display: inline-block;
  font-size: var(--fs-caption2);
  padding: 1px 7px;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--mute);
  margin: 1px 3px 1px 0;
  white-space: nowrap
}

.pill.src {
  color: var(--indigo);
  border-color: var(--tint-line)
}

.pill.int {
  color: var(--amber);
  border-color: #E6D3A6
}

.pill.trk {
  color: var(--jade);
  border-color: var(--jade)
}

.pq {
  font-weight: 600;
  color: var(--ink);
  font-size: var(--fs-footnote)
}

.pcn {
  font-size: var(--fs-caption);
  color: var(--mute)
}

.pr-write {
  margin-top: 7px;
  background: none;
  border: 1px solid var(--indigo);
  color: var(--indigo);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: var(--fs-caption);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  min-height: 28px;
  transition: background var(--dur-press) var(--ease-out), color var(--dur-press) var(--ease-out)
}

.pr-write:hover {
  background: var(--accent-fill);
  color: #fff
}

.art-plan {
  width: 100%;
  min-height: 200px;
  box-sizing: border-box;
  font: var(--fs-footnote)/1.6 ui-monospace, Menlo, monospace;
  color: var(--body);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 4px 0 12px;
  resize: vertical
}

.mc-blogtopic {
  margin: 2px 0 6px
}

.mc-blogtopic .mc-obl {
  margin-bottom: 6px;
  font-weight: 600
}

.art-topic {
  width: 100%;
  box-sizing: border-box;
  font: var(--fs-subhead)/1.5 inherit;
  color: var(--body);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 2px 0 8px
}

.mc-topicchips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 8px
}

.mc-topicchips .mc-topic-chip {
  font-weight: 500
}

.art-body {
  max-height: 360px;
  overflow: auto;
  font-size: var(--fs-subhead);
  line-height: 1.65;
  color: var(--body);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 4px 0 12px;
  background: var(--card)
}

.art-body h1,
.art-body h2,
.art-body h3 {
  font-family: Georgia, serif;
  margin: 14px 0 6px;
  color: var(--ink)
}

.art-publine {
  font-size: var(--fs-caption);
  color: var(--mute);
  margin-top: 8px
}

.art-pubbadge {
  display: inline-block;
  color: var(--jade);
  font-weight: 700
}

/* P0-1 publish gate: a warning card, not a toast — it has to carry the evidence and two real choices */
.art-unconf {
  width: 100%;
  border: 1px solid #E2B24A;
  border-radius: 10px;
  background: var(--warn-bg);
  padding: 12px 14px;
  margin-top: 8px;
  text-align: left
}

.art-unconf .au-h {
  font-weight: 700;
  color: var(--ink);
  font-size: var(--fs-subhead);
  line-height: 1.4
}

.art-unconf .au-s {
  font-size: var(--fs-footnote);
  color: var(--mute);
  margin-top: 6px
}

.art-unconf .au-l {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: var(--fs-footnote);
  color: var(--body);
  line-height: 1.6
}

.art-unconf .au-l li {
  margin: 2px 0;
  word-break: break-word
}

.art-unconf .au-a {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px
}

.art-unconf .au-a button {
  min-height: 36px
}

.art-unconf .au-force {
  font-size: var(--fs-caption);
  text-align: left
}

@media(prefers-color-scheme:dark) {
  .art-unconf {
    background: var(--warn-fill)
  }
}

.senbig {
  font-family: Georgia, serif;
  font-size: 3.625rem;
  font-weight: 900;
  line-height: 1
}

.sentone {
  font-size: var(--fs-subhead);
  font-weight: 700;
  margin-top: 2px
}

.senrow {
  display: flex;
  gap: 26px;
  align-items: center;
  flex-wrap: wrap
}

.notebox {
  background: var(--paper);
  border-left: 3px solid var(--indigo);
  border-radius: 8px;
  padding: 12px 15px;
  font-size: var(--fs-subhead);
  color: var(--body);
  line-height: 1.6
}

@media(max-width:560px) {
  .barrow .bl {
    width: 6.875rem
  }

  .wl .wmeta {
    display: none
  }
}

/* competitor Wilson CI + parent-brand merge */
.barrow .bt {
  position: relative
}

.barrow .cib {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(26, 35, 51, .16);
  border-radius: 5px;
  pointer-events: none
}

.barrow .bv {
  width: 4.125rem
}

.bvci {
  display: block;
  font-size: var(--fs-eyebrow);
  color: var(--mute);
  line-height: 1.2
}

.tiechip {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-eyebrow);
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--mute);
  border-radius: 100px;
  padding: 0 7px;
  line-height: 1.4;
  cursor: help;
  white-space: nowrap
}

.mergenote {
  font-size: var(--fs-caption2);
  color: var(--mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.cifoot {
  font-size: var(--fs-caption);
  color: var(--mute);
  margin-top: 12px;
  line-height: 1.5
}

/* citation-gap outreach briefs */
.obtn {
  margin-top: 9px;
  font-size: var(--fs-caption);
  background: none;
  border: 1px solid var(--indigo);
  color: var(--indigo);
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600
}

.obtn:hover {
  background: var(--tint-wash)
}

.obtn:disabled {
  opacity: .5;
  cursor: default
}

.obpanel {
  margin-top: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px
}

.obhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap
}

.obhead .obl {
  font-size: var(--fs-caption2);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 700;
  margin-right: auto
}

.obhead button {
  font-size: var(--fs-caption);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--body)
}

.obhead button:hover {
  border-color: var(--indigo);
  color: var(--indigo)
}

.obbody {
  font-size: var(--fs-footnote);
  line-height: 1.6;
  color: var(--body);
  white-space: pre-wrap;
  word-wrap: break-word
}

.obbody b {
  color: var(--ink)
}

.obload {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-footnote);
  color: var(--indigo)
}

.obload .radar2 {
  width: 18px;
  height: 18px;
  margin: 0;
  border-width: 2px;
  flex-shrink: 0
}

.oberr {
  font-size: var(--fs-footnote);
  color: var(--verm)
}

/* crawlers view (AI crawler analytics) */
.cwtiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 16px
}

.cwtile {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--r-card-s);
  padding: 17px 19px;
  box-shadow: var(--shadow-1)
}

.cwtile .ct {
  font-size: var(--fs-caption2);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 700;
  margin-bottom: 5px
}

.cwtile .cn2 {
  font-family: Georgia, serif;
  font-size: 1.8125rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.15
}

.cwtile .cs {
  font-size: var(--fs-caption);
  color: var(--mute);
  margin-top: 3px
}

.cwtok {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-footnote);
  margin: 0 0 12px;
  flex-wrap: wrap
}

.cwtok .cl {
  font-size: var(--fs-caption2);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 700
}

.cwtok code {
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-footnote);
  word-break: break-all
}

.cwcode {
  position: relative;
  margin: 0 0 10px
}

.cwsnip {
  display: block;
  background: #141B2B;
  color: #D5DCEC;
  border-radius: 8px;
  padding: 14px 15px;
  padding-right: 92px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--fs-caption);
  line-height: 1.55;
  word-break: break-all;
  margin: 0
}

.cwcopy {
  position: absolute;
  top: 9px;
  right: 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, .11);
  color: #EAEFFA;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 7px;
  padding: 7px 12px;
  font-size: var(--fs-caption);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur-press) var(--ease-out), border-color var(--dur-press) var(--ease-out)
}

.cwcopy:hover {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, .35)
}

.cwcopy svg {
  width: 13px;
  height: 13px;
  flex: none
}

/* Maya AI CMO chat */
.snav a.maya {
  font-weight: 700
}

.snav a.maya.active {
  background: var(--tint-strong)
}

.snav a.maya .navav {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0
}

.snav a.maya .navlbl {
  display: flex;
  flex-direction: column;
  line-height: 1.18
}

.snav a.maya .navlbl .nr {
  font-size: var(--fs-caption2);
  font-weight: 600;
  color: var(--mute)
}

.snav a.maya.active .navlbl .nr {
  color: var(--indigo)
}

.snav a.maya .mdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jade);
  margin-left: auto;
  flex-shrink: 0
}

.snav a.maya {
  margin-bottom: 4px
}

.sgtoggle {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  margin: 7px 12px 0;
  padding: 9px 0;
  font-size: var(--fs-caption2);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 700
}

.sgtoggle:hover {
  color: var(--body)
}

.sgtoggle .sgchev {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur) var(--ease-out);
  margin-left: 1px;
  opacity: .8
}

.sgtoggle.open .sgchev {
  transform: rotate(180deg)
}

.sdeep {
  display: none;
  flex-direction: column;
  gap: 2px
}

.sdeep.open {
  display: flex
}

.snav-sp {
  flex: 1 1 auto;
  min-height: 16px
}

.snav a.snav-add {
  color: var(--mute)
}

.snav a.snav-add svg {
  color: var(--mute)
}

.snav a.snav-add:hover {
  color: var(--indigo)
}

.snav a.snav-add:hover svg {
  color: var(--indigo)
}

.mhead {
  display: flex;
  align-items: center;
  gap: 14px
}

.mhead .mheadav {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0
}

.pagehead h1 .mtag {
  font-family: system-ui, sans-serif;
  font-size: var(--fs-caption2);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--indigo);
  border: 1px solid var(--tint-line);
  border-radius: 100px;
  padding: 2px 9px;
  vertical-align: middle;
  margin-left: 10px
}

.maya-intro {
  text-align: center;
  padding: 44px 20px;
  max-width: 470px;
  margin: 12px auto
}

.maya-intro .mintroav {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 34px rgba(40, 71, 196, .20);
  margin-bottom: 22px
}

.maya-intro h2 {
  font-size: var(--fs-large);
  margin-bottom: 12px;
  letter-spacing: var(--ls-title)
}

.maya-intro .mintrobio {
  font-size: var(--fs-body);
  color: var(--body);
  line-height: 1.62;
  margin-bottom: 26px
}

.maya-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--accent-fill);
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 8px 20px 8px 8px;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(40, 71, 196, .32);
  font-family: inherit;
  font-size: var(--fs-subhead);
  font-weight: 700
}

.maya-launcher:hover {
  background: var(--accent-press)
}

.maya-launcher img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, .55)
}

.mayawrap {
  max-width: 740px;
  margin: 0 auto;
  width: 100%
}

#v-maya .pagehead {
  max-width: 740px;
  margin: 0 auto;
  width: 100%
}

.maya-thread {
  padding: 6px 2px 128px;
  display: flex;
  flex-direction: column;
  gap: 14px
}

/* Elastic top spacer (task10): pure height; margin cancels flex gap so S=0 adds no extra blank. */
#maya_topspacer {
  flex: 0 0 auto;
  width: 100%;
  height: 0;
  margin: 0 0 -14px;
  padding: 0;
  border: 0;
  pointer-events: none;
  overflow: hidden
}

/* Turn wrappers: the unit the focus anchor is computed against. Nothing is hidden (task12). */
.mturn {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.mturn[hidden] {
  display: none !important
}

.scan-orb-host {
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center
}

.scan-orb-host.has-dots {
  width: 72px;
  height: 72px
}

.scanov.has-orb .scanav {
  display: none
}

.scanov.has-orb .scan-orb-host {
  display: flex
}

.maya-hint {
  font-size: var(--fs-caption);
  color: var(--mute);
  text-align: center;
  padding: 2px 0 8px
}

/* ── Maya view = a real chat: top bar + persona header pinned, only the middle thread scrolls, input pinned bottom ── */
.appshell:has(#v-maya.on) {
  height: 100vh;
  height: 100dvh;
  height: var(--vvh, 100dvh);
  min-height: 0;
  overflow: hidden
}

/* --vvh = visualViewport height (JS), so the on-screen keyboard shrinks the shell instead of hiding the last message */
.mainwrap:has(#v-maya.on) {
  min-height: 0;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column
}

.mainwrap:has(#v-maya.on) .topbar2 {
  flex-shrink: 0
}

.main:has(#v-maya.on) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 14px 30px 0
}

#v-maya.on {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column
}

#v-maya .pagehead {
  flex-shrink: 0
}

#v-maya #maya_chat {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column
}

/* task12: the right padding is scrollbar clearance. Overlay scrollbars (macOS, and any OS with
   'always show' off) float ON TOP of content, and the user avatar sat 2px from the edge — the bar
   drew straight through it. Kept symmetric so the message column stays centred, and the composer
   below carries the same inset so the two columns still line up. */
#v-maya .maya-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px var(--mlane) 16px;
  overflow-anchor: none
}

/* task17: the scrollbar was a dark slab sitting right next to the user's avatar, and the owner's words
   were "别是灰的…尽量让它跟背景色贴近，这样我的焦点就不会被它吸引". So: a thin capsule tinted barely off the
   paper, an invisible track, and it only firms up while the pointer is actually in the lane. Both
   engines covered — WebKit needs the pseudo-elements, Firefox only understands scrollbar-color.
   The 22px side padding above is the other half: it is what puts real distance between bar and avatar
   (14px was still "too close" to the owner). It costs no readable width — .mmsg caps at 680px and the
   lane's content box is 696px, so the bubbles never even reach the padding. */
#v-maya .maya-thread {
  scrollbar-width: thin;
  scrollbar-color: var(--ink-track) transparent
}

#v-maya .maya-thread:hover {
  scrollbar-color: var(--ink-track-hover) transparent
}

#v-maya .maya-thread::-webkit-scrollbar {
  width: 7px
}

#v-maya .maya-thread::-webkit-scrollbar-track {
  background: transparent
}

#v-maya .maya-thread::-webkit-scrollbar-thumb {
  background: var(--ink-track);
  border-radius: 99px
}

#v-maya .maya-thread:hover::-webkit-scrollbar-thumb {
  background: var(--ink-track-hover)
}

/* task14: give the conversation the 70-80% of the screen the owner asked for. Measured budget at
   1280x900 BEFORE (real logged-in state, tabs + hint + report bar all present): topbar 71 + pagehead 56
   + tabs 43 + hint 29 + rbar 65 + composer 90 + 14 main padding = 368, leaving the thread 531 = 59%.
   Every trim is scoped to #v-maya so no other view shifts, and nothing carrying a control is touched —
   the brand tabs and the report bar's "open" button both stay exactly as they were. */
.main:has(#v-maya.on) {
  padding-top: 6px
}

/* The persona header is a THIRD copy of the same identity: the intro card has its own big avatar +
   name + bio, every Maya bubble carries her avatar, and the report bar names the brand. 56px for that. */
#v-maya .pagehead {
  display: none
}

/* The hint line repeats what that header's subtitle said, so it goes with it. */
#v-maya .maya-hint {
  display: none
}

/* The rest is pure tightening — same elements, same affordances, less air. */
#v-maya .mayatabs {
  margin: 0 auto 7px;
  padding: 0 var(--mlane);
  box-sizing: border-box
}

#v-maya .mayatab {
  padding: 5px 12px
}

#v-maya .rbar {
  margin: 0 var(--mlane) 7px;
  padding: 7px 13px
}

/* task19: on a phone the report bar cannot spare 44px — losing it wraps its row in two and costs
   more screen (measured 56px -> 87px) than the alignment is worth. It is top chrome, not one of
   Maya's content blocks, so it keeps the full lane width down there. */
@media(max-width:560px) {
  #v-maya .rbar {
    margin-left: 0;
    margin-right: 0
  }
}

#v-maya .rbar .rb-s {
  font-size: 1.4375rem
}

#v-maya #maya_chat {
  position: relative
}

/* task14: the 24px used to be padding INSIDE the form, so the form box still ran to the very bottom
   edge (composerBottomGap=0). As an outer margin the whole composer lifts off the edge instead. It stays
   an in-flow flex item, so the --vvh keyboard adaptation is untouched: when the on-screen keyboard
   shrinks the shell the composer still rides up with it and cannot be pushed off screen.
   task18: 30px (was 20) — the owner still read 20 as "贴底". Side padding matches the lane's 22px so the
   capsule lines up with the message column. */
#v-maya .maya-input {
  position: static;
  left: auto;
  right: auto;
  flex-shrink: 0;
  padding: 10px var(--mlane) 0;
  margin-bottom: 30px;
  background: var(--paper)
}

@media(max-width:760px) {
  #v-maya .maya-input {
    margin-bottom: 18px
  }
}

/* ── task18: Liquid Glass composer (regular variant) ──────────────────────────────────────────────
   Per Apple's Liquid Glass guidance: the composer is a CONTROL, i.e. the functional layer, which is
   exactly where glass belongs — the conversation itself stays opaque (content layer never gets glass).
   regular, not clear: clear is only for controls floating over media-rich backgrounds.
   Values follow the 2026 calibration, which walked transparency BACK (more solid fill, darkened edge,
   brighter specular). The recipe's starting fill is .55; this sits at .62 because our backdrop is warm
   paper rather than a photo — at .55 the placeholder grey lost contrast against it, and readability
   outranks spectacle. blur(20px) saturate(180%) is the reference value, kept as-is.
   Honest note: the composer is in normal flow (the --vvh keyboard handling and the 70-80% height budget
   both depend on that), so nothing scrolls underneath it — the blur has flat paper behind it and the
   glass reads through the translucent fill, the specular top edge, the darkened rim and the lift. */
#v-maya .mform {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 999px;
  padding: 6px 6px 6px 20px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 .5px var(--glass-rim), 0 8px 24px rgba(26, 35, 51, .12);
  transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out)
}

#v-maya .mform:focus-within {
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 .5px var(--glass-rim), 0 10px 28px rgba(26, 35, 51, .16)
}

/* Specular streak: a highlight travelling along the shell when the control wakes up. Clipped by the
   capsule, never eats a click. */
#v-maya .mform:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 55%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: translateX(0);
  transition: transform .65s cubic-bezier(.16, 1, .3, 1)
}

#v-maya .mform:focus-within:before,
#v-maya .mform:hover:before {
  transform: translateX(220%)
}

/* Concentricity: inside a capsule the children are circles, sharing the shell's 6px inset. No glass on
   glass — the buttons keep a plain fill and a solid tint, never their own backdrop-filter. */
#v-maya .mform .mc-palbtn,
#v-maya .mform .mc-sendbtn {
  border-radius: 50%
}

#v-maya .mform .mc-sendbtn:active {
  transform: scale(.97)
}

/* The browser default placeholder (#757575) lands at 4.53:1 on this fill — the AA floor to two
   decimals. Pin it to --mute so the glass never costs legibility. opacity:1 because Firefox dims
   placeholders by default. */
#v-maya .maya-input textarea::placeholder {
  color: var(--mute);
  opacity: 1
}

/* Three fallbacks strip the glass; all three must land on the SAME token as the glass would resolve
   to, or the composer stops following the theme. The @supports leg got that right from the start —
   the other two hard-coded white and were never given a dark leg, so in dark they turned the
   composer into a white slab under near-white text: measured 1.00:1 under prefers-contrast:more
   (the text is #FFF there) and 1.08:1 under reduced-transparency. Both are accessibility settings,
   so turning one ON was what broke the input. Note the (1,1,0) specificity: a plain `.mform` rule in
   the dark block cannot override these, which is why the fix has to be here, not there. */
@supports not (backdrop-filter:blur(1px)) {
  #v-maya .mform {
    background: var(--bg-elevated)
  }
}

@media(prefers-reduced-transparency:reduce) {
  #v-maya .mform {
    background: var(--bg-elevated);
    -webkit-backdrop-filter: none;
    backdrop-filter: none
  }
}

@media(prefers-contrast:more) {
  #v-maya .mform {
    background: var(--bg-elevated);
    border: 1px solid var(--ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none
  }
}

@media(prefers-reduced-motion:reduce) {
  #v-maya .mform {
    transition: opacity 150ms ease
  }

  #v-maya .mform:before {
    display: none
  }

  #v-maya .mform .mc-sendbtn:active {
    transform: none
  }
}

/* the float sits above the taller capsule now */
#v-maya .maya-tolatest {
  bottom: 7rem
}

@media(max-width:760px) {
  #v-maya .maya-tolatest {
    bottom: 6rem
  }
}

#v-maya .maya-input:before {
  display: none
}

@media(max-width:760px) {
  .main:has(#v-maya.on) {
    padding: 10px 14px 0
  }
}

/* task19: ONE source of truth for the conversation's left rail. Everything Maya puts in the lane —
   bubbles, cards, tool rows, brand bars — has to start on the same vertical line, and that line is
   "lane padding + avatar column". Deriving --mgut from the avatar's own size and gap means the two can
   never drift apart again: resize the avatar and every card follows it. Measured before this: bubbles
   at 66px but .bp-card and .mc-cardwrap at 22px — a 44px ledge sticking out to their left, which is
   what the owner circled. */
:root {
  --mlane: 22px;
  --mav: 32px;
  --mavgap: 12px;
  --mgut: calc(var(--mav) + var(--mavgap))
}

.mtoolev {
  margin-left: var(--mgut);
  padding: 2px 12px;
  font-size: var(--fs-caption);
  color: var(--mute);
  opacity: .9;
  line-height: 1.5
}

.mmsg {
  display: flex;
  gap: var(--mavgap);
  max-width: 680px
}

.mmsg .mav {
  width: var(--mav);
  height: var(--mav);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-footnote);
  font-weight: 700;
  font-family: Georgia, serif;
  overflow: hidden
}

.mmsg.maya .mav {
  background: var(--accent-fill);
  color: #fff
}

.mmsg .mav .mavimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.mmsg.user {
  align-self: flex-end;
  flex-direction: row-reverse
}

.mmsg.user .mav {
  background: var(--tint-wash);
  color: var(--indigo);
  border: 1px solid var(--tint-line)
}

.mmsg .mbub {
  padding: 12px 16px;
  border-radius: var(--r-card-s);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--body);
  white-space: pre-wrap;
  word-wrap: break-word
}

.mmsg.maya .mbub {
  background: var(--card);
  border: 1px solid var(--separator);
  border-top-left-radius: 3px;
  box-shadow: 0 1px 2px rgba(26, 35, 51, .04)
}

.mmsg.user .mbub {
  background: var(--accent-fill);
  color: #fff;
  border-top-right-radius: 3px
}

.mmsg .mbub b,
.mmsg .mbub strong {
  color: var(--ink);
  font-weight: 700
}

.mmsg.user .mbub b {
  color: #fff
}

/* ── mdLite structured render: paragraphs, GFM tables, lists, streaming-safe raw block ── */
.mmsg .mbub p {
  margin: 0
}

.mmsg .mbub p+p {
  margin-top: 10px
}

.mmsg .mbub .mdh {
  display: block;
  margin: 12px 0 4px;
  color: var(--ink);
  font-weight: 700
}

.mmsg .mbub .mdh:first-child {
  margin-top: 0
}

.mmsg .mbub ul,
.mmsg .mbub ol {
  margin: 8px 0 8px 2px;
  padding: 0
}

.mmsg .mbub li {
  margin: 3px 0 3px 18px;
  line-height: 1.55
}

.mmsg .mbub .mdtblwrap {
  margin: 10px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch
}

.mmsg .mbub table.mdtbl {
  border-collapse: collapse;
  font-size: var(--fs-footnote);
  white-space: normal;
  font-variant-numeric: tabular-nums;
  min-width: 100%
}

.mmsg .mbub table.mdtbl th {
  text-align: left;
  font-weight: 700;
  color: var(--ink);
  background: var(--tint-weak);
  border-bottom: 1.5px solid var(--indigo);
  padding: 7px 10px
}

.mmsg .mbub table.mdtbl td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--body)
}

.mmsg .mbub table.mdtbl tbody tr:last-child td,
.mmsg .mbub table.mdtbl tbody tr:last-child td {
  border-bottom: none
}

.mmsg .mbub pre.mdraw {
  margin: 10px 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-caption);
  color: var(--mute);
  white-space: pre;
  overflow-x: auto;
  border: none;
  background: none;
  padding: 0;
  line-height: 1.5
}

.mmsg.user .mbub .mdh,
.mmsg.user .mbub table.mdtbl th {
  color: #fff
}

.mmsg.user .mbub pre.mdraw {
  color: rgba(255, 255, 255, .75)
}

/* ── ↓ back-to-latest floating chip ── */
.maya-tolatest {
  position: absolute;
  left: 50%;
  bottom: 5.125rem;
  transform: translateX(-50%);
  z-index: 26;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-fill);
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 8px 16px;
  font-size: var(--fs-footnote);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 20px -4px rgba(40, 71, 196, .5);
  white-space: nowrap
}

.maya-tolatest:hover {
  background: var(--accent-press)
}

.maya-tolatest::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
  min-height: 44px
}

@media(max-width:760px) {
  .maya-tolatest {
    bottom: 4.625rem
  }
}

/* task13: Maya's thinking state — a frosted pill holding a small Grid Dots indicator and a label. It
   REPLACES the old three-dot .mtyping bubble outright. Monochrome on purpose (owner's call): greys only,
   no brand indigo. The bubble chrome behind it is dropped with :has(), so the pill is the only surface;
   the moment the first token replaces the capsule the chrome comes back on its own, with no class
   bookkeeping to forget. Reduced motion is handled by the .gdots rule below. */
/* task21: the thinking capsule is a FUNCTIONAL-layer surface like the composer, so it takes the same
   Liquid Glass recipe instead of a fifth hand-rolled one — .55 also sat under the fill floor the warm
   paper needs. The 1px solid border becomes a .5px rim inset: a hairline compressed edge reads as glass,
   a full border reads as a drawn box. Grid Dots inside are untouched. */
.mthink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 15px 6px 7px;
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  border: none;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 .5px var(--glass-rim), 0 6px 18px -12px rgba(26, 35, 51, .35)
}

/* task16: Grid Dots — 3x3, a diagonal wave sweeping across on opacity alone. ONE component, two sizes:
   the small one rides in Maya's thinking capsule, the large one is the full-screen diagnosis indicator.
   Both states are kept — only their animation changed from the canvas particle orb to this. Pure CSS:
   no canvas, no JS, nothing to mount or tear down, so swapping the capsule for the first token is just
   an innerHTML write. Greyscale by construction (a single --ink at low alpha), which is what keeps it
   black-and-white and lets it sit on the frosted pill without competing with it. Everything scales off
   --gd, so a size variant is one line. The 5 delays are the grid's 5 anti-diagonals, which is what makes
   the light travel corner to corner instead of the dots just blinking. */
.gdots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: calc(var(--gd, 20px)*.15);
  width: var(--gd, 20px);
  height: var(--gd, 20px);
  flex-shrink: 0
}

.gdots i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--ink);
  opacity: .16;
  animation: mgriddot var(--gdur, 1.8s) ease-in-out infinite
}

.gdots i:nth-child(2),
.gdots i:nth-child(4) {
  animation-delay: calc(var(--gdur, 1.8s)*.09)
}

.gdots i:nth-child(3),
.gdots i:nth-child(5),
.gdots i:nth-child(7) {
  animation-delay: calc(var(--gdur, 1.8s)*.18)
}

.gdots i:nth-child(6),
.gdots i:nth-child(8) {
  animation-delay: calc(var(--gdur, 1.8s)*.27)
}

.gdots i:nth-child(9) {
  animation-delay: calc(var(--gdur, 1.8s)*.36)
}

.gdots-sm {
  --gd: 20px
}

/* Working (full-screen diagnosis): bigger, a touch quicker, and a firmer floor so it stays legible on
   the near-white overlay from across the room. */
.gdots-lg {
  --gd: 64px;
  --gdur: 1.4s
}

.gdots-lg i {
  opacity: .2
}

@keyframes mgriddot {

  0%,
  70%,
  100% {
    opacity: .16
  }

  35% {
    opacity: .92
  }
}

@media(prefers-reduced-motion:reduce) {
  .gdots i {
    animation: none;
    opacity: .38
  }
}

.mthink-t {
  font-size: var(--fs-subhead);
  font-weight: 600;
  color: var(--mute);
  white-space: nowrap;
  letter-spacing: .01em
}

.mmsg .mbub:has(.mthink) {
  background: none;
  border: none;
  padding: 0;
  box-shadow: none
}

.maya-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-subhead);
  color: var(--indigo);
  padding: 14px 2px
}

.maya-status .radar2 {
  width: 22px;
  height: 22px;
  margin: 0;
  border-width: 2px
}

.maya-input {
  position: fixed;
  left: 228px;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  background: var(--paper);
  padding: 12px 0 18px
}

.mform {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  width: 100%;
  max-width: 740px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  padding: 5px 6px 5px 16px
}

.mform:focus-within {
  border-color: var(--indigo)
}

@media(max-width:760px) {
  .maya-input {
    left: 0
  }
}

.maya-input:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -28px;
  height: 28px;
  background: linear-gradient(to bottom, rgba(250, 249, 246, 0), var(--paper));
  pointer-events: none
}

.maya-input textarea {
  flex: 1;
  resize: none;
  max-height: 140px;
  padding: 9px 0;
  border: none;
  font-size: var(--fs-body);
  font-family: inherit;
  background: transparent;
  line-height: 1.5;
  outline: none
}

.maya-input textarea:focus {
  outline: none;
  border-color: var(--indigo)
}

.maya-input button {
  background: var(--accent-fill);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 9px 18px;
  font-size: var(--fs-subhead);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0
}

.maya-input button:disabled {
  opacity: .5;
  cursor: default
}

.maya-noreport {
  text-align: center;
  padding: 50px 20px
}

.maya-noreport .btn {
  margin-top: 16px
}

/* proactive Maya: unread badge + quick-action chips */
.maya-launcher .mldot {
  position: absolute;
  top: 1px;
  right: 3px;
  width: 13px;
  height: 13px;
  background: var(--verm);
  border-radius: 50%;
  border: 2.5px solid #fff
}

.mmsg .mcol {
  display: flex;
  flex-direction: column;
  min-width: 0
}

.mmsg.user .mcol {
  align-items: flex-end
}

.machips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px
}

.machip {
  position: relative;
  font-size: var(--fs-caption);
  background: var(--card);
  border: 1px solid var(--indigo);
  color: var(--indigo);
  border-radius: 6px;
  padding: 8px 13px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  text-decoration: none
}

.machip:hover {
  background: var(--tint-wash)
}

.machip:disabled {
  opacity: .5;
  cursor: default
}

.machip-fine {
  width: 100%;
  margin-top: 9px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-caption2);
  letter-spacing: .03em;
  color: var(--mute);
  opacity: .75;
  line-height: 1.5
}

.machip-fine span {
  display: block
}

.mmsg .obpanel {
  margin-top: 8px
}

.obhead a.obmail {
  font-size: var(--fs-caption);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 10px;
  color: var(--body);
  text-decoration: none
}

.obhead a.obmail:hover {
  border-color: var(--indigo);
  color: var(--indigo)
}

@media(max-width:560px) {
  .mmsg {
    max-width: 100%
  }

  .maya-launcher .mll {
    display: none
  }

  .maya-launcher {
    padding: 6px;
    right: 16px;
    bottom: 16px
  }
}

/* ═══ Maya Skill cards: folded file → expanded deliverable + ⚡ palette drawer ═══ */
.mc-ico {
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block
}

@keyframes mc-hand {
  to {
    opacity: 1;
    transform: none
  }
}

/* Animation budget: static by default; .mc-enter only on LIVE append path (not history replay). */
.mc-enter {
  opacity: 0;
  transform: translateY(4px);
  animation: mc-hand .2s ease-out forwards
}

.mc-file {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 2px 0 2px var(--mgut);
  max-width: 440px;
  position: relative;
  background: var(--mat-bg);
  -webkit-backdrop-filter: var(--mat-blur);
  backdrop-filter: var(--mat-blur);
  border: 1px solid var(--card-edge);
  border-radius: var(--r-card-s);
  padding: 12px 15px 12px 16px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out)
}

.mc-file:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--fc, var(--indigo)) 55%, var(--line));
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, .9)
}

.mc-file:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--fc, var(--indigo))
}

.mc-fico {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fc, var(--indigo));
  background: color-mix(in srgb, var(--fc, var(--indigo)) 11%, transparent)
}

.mc-fico svg {
  width: 20px;
  height: 20px
}

.mc-fico svg,
.mc-fixchip svg,
.mc-cta svg,
.mc-verdict svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round
}

.mc-fmeta {
  min-width: 0;
  flex: 1
}

.mc-ft {
  font-size: var(--fs-subhead);
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px
}

.mc-kind {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fc, var(--indigo));
  border: 1px solid color-mix(in srgb, var(--fc, var(--indigo)) 35%, transparent);
  border-radius: 4px;
  padding: 1px 5px
}

.mc-fs {
  font-size: var(--fs-caption);
  color: var(--mute);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

/* BUG-9: the progress card's reassurance line reuses .mc-fs, whose nowrap+ellipsis is right for a
   one-line file caption and wrong for a full sentence — it was cut mid-word. Only .mc-eta wraps. */
.mc-eta {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.45
}

.mc-fopen {
  margin-left: auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-eyebrow);
  letter-spacing: .05em;
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  text-transform: uppercase
}

.mc-fopen svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s
}

.mc-file.mc-open .mc-fopen svg {
  transform: rotate(90deg)
}

.mc-card {
  position: relative;
  margin: 2px 0 2px var(--mgut);
  max-width: 520px;
  background: var(--mat-bg);
  -webkit-backdrop-filter: var(--mat-blur);
  backdrop-filter: var(--mat-blur);
  border: 1px solid var(--card-edge);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, .9)
}

.mc-spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(var(--fc, var(--indigo)), color-mix(in srgb, var(--fc, var(--indigo)) 70%, #fff))
}

.mc-attr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px 0 26px;
  font-size: var(--fs-caption);
  color: var(--mute)
}

.mc-attrav {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 1px 4px -1px rgba(26, 35, 51, .35)
}

.mc-who {
  font-weight: 600;
  color: var(--ink)
}

.mc-who span {
  font-weight: 400;
  color: var(--mute)
}

.mc-t {
  margin-left: auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-eyebrow);
  letter-spacing: .04em
}

.mc-pad {
  padding: 6px 22px 34px 26px
}

.mc-eye {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fc, var(--indigo));
  margin: 10px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px
}

.mc-eye .mc-dt {
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: currentColor
}

.mc-eye .mc-obj {
  color: var(--mute)
}

.mc-stamp {
  position: absolute;
  right: 16px;
  bottom: 13px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
  opacity: .55;
  display: flex;
  align-items: center;
  gap: 5px
}

.mc-stamp .mc-s {
  display: inline-flex;
  width: 16px;
  height: 16px;
  border: 1.2px solid var(--mute);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  opacity: .7
}

.mc-verdict {
  font-size: var(--fs-title3);
  line-height: 1.42;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -.01em;
  margin: 2px 0 15px
}

.mc-verdict .mc-big {
  font-family: Georgia, serif;
  font-size: 3.125rem;
  font-weight: 700;
  line-height: .9;
  color: var(--fc, var(--indigo));
  letter-spacing: -.02em;
  display: inline-block;
  vertical-align: -7px;
  margin: 0 3px
}

.mc-ladder {
  display: flex;
  gap: 3px;
  margin: 0 0 5px
}

.mc-ladder i {
  flex: 1;
  height: 5px;
  border-radius: 2px;
  background: var(--fill-3)
}

.mc-ladder i.on {
  background: var(--fc, var(--indigo))
}

.mc-ladder i.cur {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--fc, var(--indigo))
}

.mc-ladder-l {
  display: flex;
  justify-content: space-between;
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-eyebrow);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 15px
}

.mc-reads {
  display: flex;
  border-top: 1px solid var(--separator);
  border-bottom: 1px solid var(--separator);
  margin: 0 0 15px
}

.mc-reads div {
  flex: 1;
  padding: 11px 4px;
  text-align: center
}

.mc-reads div+div {
  border-left: 1px solid var(--separator)
}

.mc-reads .mc-n {
  font-family: Georgia, serif;
  font-size: var(--fs-title1);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  letter-spacing: var(--ls-title)
}

.mc-reads .mc-n small {
  font-size: var(--fs-caption);
  color: var(--mute);
  font-weight: 400
}

.mc-reads .mc-l {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-eyebrow);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 5px
}

.mc-rank {
  margin: 2px 0 15px;
  border-top: 1px solid var(--separator)
}

.mc-rk {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--separator);
  font-size: var(--fs-subhead)
}

.mc-rk .mc-rkn {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-caption2);
  color: var(--mute);
  width: 0.9375rem;
  flex-shrink: 0;
  text-align: right
}

.mc-rk .mc-rkname {
  color: var(--ink);
  font-weight: 500;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.mc-rk .mc-you {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--indigo);
  background: var(--tint-wash);
  border-radius: 4px;
  padding: 1px 5px;
  font-style: normal;
  margin-left: 5px;
  vertical-align: 1px
}

.mc-rk .mc-rp {
  font-family: Georgia, serif;
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0
}

.mc-rk.me {
  background: color-mix(in srgb, var(--fc, var(--indigo)) 8%, transparent);
  margin: 0 -10px;
  padding-left: 12px;
  padding-right: 12px
}

.mc-zh .mc-rk .mc-you {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  letter-spacing: .02em;
  text-transform: none;
  font-size: var(--fs-eyebrow)
}

/* onboarding input card (single field — no empty chat box) */
.mc-onb {
  position: relative;
  margin: 2px 0 2px var(--mgut);
  max-width: 440px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-1)
}

.mc-onb-spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--indigo)
}

.mc-onb-in {
  padding: 15px 18px 15px 20px
}

.mc-onb-lab {
  font-size: var(--fs-subhead);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 11px
}

.mc-onb-row {
  display: flex;
  gap: 8px
}

.mc-onb-field {
  flex: 1;
  min-width: 0;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 10px 13px;
  font-size: var(--fs-subhead);
  font-family: inherit;
  background: var(--paper);
  color: var(--ink);
  outline: none
}

.mc-onb-field:focus {
  border-color: var(--indigo)
}

.mc-onb-go {
  flex-shrink: 0;
  background: var(--accent-fill);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: var(--fs-subhead);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--dur-press) var(--ease-out)
}

.mc-onb-f {
  margin-bottom: 10px
}

.mc-onb-l {
  display: block;
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 5px
}

.mc-onb-l em {
  font-style: normal;
  font-weight: 400;
  color: var(--mute);
  font-size: var(--fs-caption);
  margin-left: 5px
}

.mc-onb .mc-onb-field {
  width: 100%;
  box-sizing: border-box
}

.mc-onb-gofull {
  width: 100%;
  margin-top: 4px;
  padding: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.mc-onb-go:hover {
  background: var(--accent-press)
}

/* W2 confirm card — reuses .mc-onb shell; compact recap rows before the scan */
.mc-cfm-hd {
  font-size: var(--fs-subhead);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px
}

.mc-cfm-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  font-size: var(--fs-subhead);
  border-top: 1px solid var(--separator)
}

.mc-cfm-row:first-of-type {
  border-top: none
}

.mc-cfm-l {
  flex: none;
  width: 5.125rem;
  color: var(--mute);
  font-weight: 600;
  font-size: var(--fs-footnote)
}

.mc-cfm-v {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  word-break: break-word
}

.mc-cfm-v a {
  color: var(--indigo);
  text-decoration: none
}

.mc-cfm-src {
  font-style: normal;
  color: var(--mute);
  font-size: var(--fs-caption);
  margin-left: 6px
}

.mc-cfm-site {
  flex-wrap: wrap
}

.mc-cfm-site .mc-cfm-url {
  flex-basis: 100%;
  margin-top: 8px
}

.mc-cfm-note {
  flex-basis: 100%;
  color: var(--mute);
  font-size: var(--fs-caption);
  margin-top: 6px;
  line-height: 1.45
}

.mc-cfm-edit,
.mc-cfm-editsite,
.mc-cfm-editbuyer,
.mc-cfm-editcat,
.mc-cfm-editcomp {
  background: none;
  border: none;
  color: var(--indigo);
  font-size: var(--fs-caption);
  font-family: inherit;
  cursor: pointer;
  padding: 0 2px;
  text-decoration: underline;
  opacity: .7
}

.mc-cfm-edit:hover,
.mc-cfm-editsite:hover,
.mc-cfm-editbuyer:hover,
.mc-cfm-editcat:hover,
.mc-cfm-editcomp:hover {
  opacity: 1
}

.mc-cfm-brand {
  font-size: var(--fs-subhead);
  padding: 3px 7px;
  min-width: 180px
}

.mc-cfm-go {
  margin-top: 13px
}

/* building skeleton card — "she's making it" waiting state */
/* 运行中的进度卡吸顶(PT 2026-07-18):诊断要跑 2-4 分钟,用户边等边聊,卡片被新消息推出视野就看不到进度了。
   选择器挂在 .mc-build 状态上而非用 JS 加类:done() 保留该类(庆祝态继续吸顶,随后自行移除整张卡),
   fail() 会把 className 重置掉 → 自动解除吸顶。零 JS 配合,也不会有"失败卡永远钉在顶上"的死角。 */
/* 报告栏吸顶:只有被 mayaPinReport 选中的那一张(最新)才钉;z-index 低于运行卡,诊断在跑时让位 */
/* task19: the wrapper carries the indent; the cards inside it therefore must not add a second one.
   Scoped with > so a .mc-file/.mc-card used outside a wrapper keeps its own margin and does not move. */
.mc-cardwrap {
  margin-left: var(--mgut)
}

.mc-cardwrap>.mc-file,
.mc-cardwrap>.mc-card,
.mc-cardwrap>.mc-onb,
.mc-cardwrap>.bp-card {
  margin-left: 0
}

.mc-cardwrap.mc-pin {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
  padding: 6px 0 8px;
  box-shadow: 0 12px 16px -14px rgba(26, 35, 51, .4)
}

.mc-cardwrap.mc-pin .mc-file {
  background: var(--card);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--line)
}

.mc-prog {
  margin: 2px 0 14px
}

.mc-progr {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: var(--fs-caption);
  color: var(--mute);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums
}

.mc-progr .mc-pw {
  font-weight: 700;
  color: var(--body)
}

.mc-progr .mc-py.on {
  color: var(--verm);
  font-weight: 600
}

.mc-progbar {
  height: 4px;
  border-radius: 99px;
  background: var(--ink-track);
  overflow: hidden
}

.mc-progbar i {
  display: block;
  height: 100%;
  background: var(--indigo);
  border-radius: 99px
}

.rbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card-s);
  box-shadow: var(--shadow-1);
  flex-shrink: 0
}

.rbar .rb-s {
  font-family: Georgia, serif;
  font-size: 1.625rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums
}

.rbar .rb-u {
  font-size: var(--fs-caption);
  color: var(--mute);
  margin-left: -6px
}

.rbar .rb-b {
  font-size: var(--fs-caption2);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--verm);
  border: 1px solid var(--verm);
  border-radius: 99px;
  padding: 2px 9px
}

.rbar .rb-m {
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--ink)
}

.rbar .rb-d {
  font-size: var(--fs-caption);
  color: var(--mute);
  font-variant-numeric: tabular-nums
}

.rbar .rb-open,
.rbar .rb-go {
  margin-left: auto;
  position: relative;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 13px;
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--indigo);
  cursor: pointer;
  font-family: inherit;
  min-height: 32px
}

.rbar .rb-open::after,
.rbar .rb-go::after {
  content: "";
  position: absolute;
  inset: -6px
}

.rbar .rb-open:hover,
.rbar .rb-go:hover {
  border-color: var(--indigo);
  background: var(--tint-weak)
}

.rbar.rbar-cta .rb-t {
  font-size: var(--fs-footnote);
  color: var(--body)
}

@media(max-width:560px) {
  .rbar {
    gap: 7px;
    padding: 9px 11px
  }

  .rbar .rb-d {
    display: none
  }
}

.mc-cardwrap:has(.mc-build) {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--paper);
  padding: 6px 0 8px;
  box-shadow: 0 12px 16px -14px rgba(26, 35, 51, .4)
}

/* 吸顶时必须不透明:卡片默认是半透明毛玻璃,钉住后下面的消息会透过来显字(截图才看得出,DOM 断言看不见) */
.mc-cardwrap:has(.mc-build) .mc-file {
  background: var(--card);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--line);
  box-shadow: 0 6px 16px -12px rgba(26, 35, 51, .3)
}

.mc-file.mc-build {
  cursor: default;
  position: relative;
  overflow: hidden
}

.mc-file.mc-build:before {
  background: var(--indigo)
}

.mc-build .mc-fico {
  background: var(--tint)
}

.mc-spin {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.2px solid rgba(40, 71, 196, .22);
  border-top-color: var(--indigo);
  display: block;
  animation: mc-rot .7s linear infinite
}

@keyframes mc-rot {
  to {
    transform: rotate(360deg)
  }
}

.mc-buildbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5px;
  background: var(--tint);
  overflow: hidden
}

.mc-buildbar i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 38%;
  background: var(--indigo);
  border-radius: 2px;
  animation: mc-slide 1.25s ease-in-out infinite
}

@keyframes mc-slide {
  0% {
    left: -40%
  }

  100% {
    left: 100%
  }
}

.mc-build .mc-fs {
  color: var(--indigo);
  font-weight: 600
}

.mc-build-done {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .32s, transform .32s
}

.mc-build-ok {
  animation: mc-pop .45s cubic-bezier(.2, .8, .2, 1)
}

.mc-build-ok:before {
  background: var(--jade)
}

@keyframes mc-pop {
  0% {
    transform: scale(1)
  }

  45% {
    transform: scale(1.04)
  }

  100% {
    transform: scale(1)
  }
}

.mc-okchk {
  width: 22px;
  height: 22px;
  stroke: var(--jade);
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: mc-draw .5s .08s ease forwards
}

@keyframes mc-draw {
  to {
    stroke-dashoffset: 0
  }
}

.mc-confetti {
  position: fixed;
  z-index: 9999;
  pointer-events: none
}

.mc-confetti i {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 1.5px;
  opacity: 0;
  animation: mc-conf 1.5s cubic-bezier(.15, .6, .3, 1) forwards
}

@keyframes mc-conf {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0)
  }

  12% {
    opacity: 1
  }

  100% {
    opacity: 0;
    transform: translate(var(--dx), calc(var(--dy) + 240px)) rotate(var(--r))
  }
}

.maya-launcher.mayaback {
  animation: mayaback-pulse 1.4s ease 2
}

@keyframes mayaback-pulse {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-4px)
  }
}

@media(prefers-reduced-motion:reduce) {

  .mc-spin,
  .mc-buildbar i {
    animation: none
  }

  .mc-spin {
    border-top-color: var(--indigo)
  }

  .mc-enter,
  .mc-file.mc-enter,
  .mc-card.mc-enter,
  .mc-onb.mc-enter,
  .mmsg.mc-enter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important
  }
}

@media(max-width:560px) {
  .mc-onb {
    max-width: none
  }
}

/* task19: the 6px ledge is gone — same rail as the bubbles */
.mc-onb.mc-onb-flash {
  animation: mc-onb-flash 1s ease
}

@keyframes mc-onb-flash {

  0%,
  100% {
    box-shadow: 0 10px 30px -18px rgba(26, 35, 51, .3)
  }

  30% {
    box-shadow: 0 0 0 3px rgba(40, 71, 196, .35), 0 12px 32px -14px rgba(40, 71, 196, .4)
  }
}

/* Reports view — brand report cards (replaces the bare table) */
.rtophd {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 18px
}

.rnew {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-fill);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: var(--fs-subhead);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 14px -6px rgba(40, 71, 196, .5);
  transition: background var(--dur-press) var(--ease-out), transform var(--dur-press) var(--ease-out)
}

.rnew:hover {
  background: var(--accent-press);
  transform: translateY(-1px)
}

.rnew svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.rsub {
  font-size: var(--fs-footnote);
  color: var(--mute);
  margin-bottom: 14px
}

.rlog {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-1)
}

.list-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  color: var(--mute);
  font-size: var(--fs-caption)
}

.list-pager button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--card-edge);
  border-radius: var(--r-ctl);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer
}

.list-pager button:hover:not(:disabled) {
  background: var(--fill-4);
  border-color: var(--accent)
}

.list-pager button:disabled {
  opacity: .35;
  cursor: default
}

.list-pager-item {
  border: 0 !important;
  padding: 0 0 18px !important
}

.rrow {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--separator);
  position: relative
}

.rrow:last-child {
  border-bottom: none
}

.rrow:hover {
  background: var(--fill-4)
}

.rrow:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--fc, var(--indigo))
}

.rr-date {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-caption);
  color: var(--mute);
  width: 6rem;
  flex-shrink: 0;
  letter-spacing: .01em
}

.rr-main {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 1
}

.rr-brand {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.rr-band {
  flex-shrink: 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-eyebrow);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fc, var(--indigo));
  border: 1px solid color-mix(in srgb, var(--fc, var(--indigo)) 35%, transparent);
  border-radius: 5px;
  padding: 2px 6px
}

.rr-nums {
  display: flex;
  gap: 20px;
  flex-shrink: 0
}

.rr-nums span {
  font-size: var(--fs-caption);
  color: var(--mute)
}

.rr-nums b {
  font-family: Georgia, serif;
  font-size: var(--fs-title3);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: var(--ls-title)
}

.rr-nums i {
  font-style: normal;
  font-size: var(--fs-caption2);
  color: var(--mute)
}

.rr-acts {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0
}

.rr-open {
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--indigo);
  text-decoration: none;
  white-space: nowrap;
  padding: 11px 0;
  display: inline-block
}

.rr-open:hover {
  text-decoration: underline
}

.rr-maya {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--dur-press) var(--ease-out), transform var(--dur-press) var(--ease-out)
}

.rr-maya::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%
}

.rr-maya:hover {
  border-color: var(--indigo);
  transform: translateY(-1px)
}

.rr-maya img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%
}

@media(max-width:620px) {
  .rrow {
    flex-wrap: wrap;
    gap: 8px 14px
  }

  .rr-date {
    width: auto;
    order: 1
  }

  .rr-main {
    order: 2;
    flex: 1 0 100%
  }

  .rr-nums {
    order: 3
  }

  .rr-acts {
    order: 4;
    margin-left: auto
  }
}

/* My Sites — one GEO site per brand (nav-sites) */
.sitecard {
  position: relative;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden
}

/* #24: overlay project card — thumbnail background + scrim + content on top */
.sitecard.sc-ov {
  position: relative;
  height: 18.75rem;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  gap: 0
}

.sitecard.sc-ov::before {
  display: none
}

.sc-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--paper)
}

.sc-bg iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 1900px;
  border: 0;
  transform: scale(.36);
  transform-origin: top left;
  pointer-events: none
}

/* #27: zoomed out more (whole page reads smaller, not just the hero); 1440×.36≈518px */
/* ── The thumbnail behind this card is the customer's own live site, so its brightness is not ours
   to control — a minimalist all-white site is a legitimate input. A gradient scrim cannot answer
   that: to guarantee legibility at the TOP of the text block it would have to be dark enough to
   bury the thumbnail everywhere below. The old one didn't try, and text-shadow was quietly holding
   the whole thing together — with shadows forced off, the brand name measured 2.58:1 over a white
   site and the status pill 2.45:1. A shadow is also unmeasurable: no contrast probe can score it,
   which is why this card was the one surface on the whole product that could only be judged by eye.

   So the readable region becomes a TRAY of its own: one flat alpha behind .sc-body, fading in over
   its top 28px so there is no hard seam. Flat alpha is what makes it provable — the worst case is a
   pure-white thumbnail, and white-on-rgba(18,20,32,.65)-over-white is a closed-form 5.71:1. Nothing
   is sampled, nothing depends on what the customer's site happens to look like.
   Half-transparent rather than opaque on purpose: the thumbnail still reads through the tray, which
   is the point of an overlay card. .65 is the chosen step — .60 is the AA floor (4.79:1) and leaves
   no margin, .70 starts to read as a black bar.

   The scrim is NOT purely decorative afterwards, and this is the part worth reading before touching
   it. The 5.71:1 above holds for elements that put nothing of their own behind the text — .sc-brand
   and .sc-meta. But .sc-pill and .sc-acts .btn.ghost each lay their own rgba(255,255,255,.11)
   frost ON TOP of the tray, which gives back some of the luminance the tray just removed. Measured,
   at the 192px reference body height, the scrim and tray bring both controls to 4.91:1. So the
   .18–.22 tail and the .11 frost ceiling are load-bearing and must not be weakened; the vignette
   is the only part of the old scrim that is now decorative.
   (Verified by variant: deleting the frost fills instead puts all four back at the closed-form 5.71,
   which is the other way out if the frosted chip ever stops being wanted.)
   test_contrast_invariants.py is the guard, and it is in this repo: it recomputes the numbers above
   from these very declarations (worst case = a pure-white thumbnail) and fails under 4.5, so
   weakening either layer shows up as red rather than as a judgement call. Pure Python, no browser —
   the closed form is what makes that possible. It was itself red-checked: dropping the tray to .45
   or the scrim's foot to .04 both fail it, as does putting text-shadow back. ── */
.sc-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(18, 20, 32, .02) 0%, rgba(18, 20, 32, .10) 40%, rgba(18, 20, 32, .18) 72%, rgba(18, 20, 32, .22) 100%)
}

/* The fade is 28px, not the 12px I first tried, and the top padding grows 18→30 to match. At 12px the
   tray announced itself as a horizontal seam — worst over a checkerboard thumbnail, where the hard
   edges underneath make the step read as a drawn line. 28px dissolves it. The padding has to clear
   the fade or the brand name would sit inside the ramp and lose the contrast this is all for; 30>28
   is that clearance. Longer ramps (40px) do look softer still, but they eat the thumbnail — which is
   the one thing this card exists to show. */
.sc-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: linear-gradient(to bottom, rgba(18, 20, 32, 0) 0, rgba(18, 20, 32, .65) 28px)
}

/* No text-shadow on any of these any more: the tray carries the contrast, and a shadow would only
   put back the unmeasurable crutch this change exists to remove. */
.sitecard.sc-ov .sc-brand {
  color: #fff
}

.sitecard.sc-ov .sc-pill {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .11);
  opacity: 1
}

.sitecard.sc-ov .sc-meta {
  color: rgba(255, 255, 255, .95)
}

.sitecard.sc-ov .sc-acts .btn.ghost {
  background: rgba(255, 255, 255, .11);
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25)
}

.sitecard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--fc, var(--mute))
}

.sc-top {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between
}

.sc-brand {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--fs-title3);
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: var(--ls-title)
}

.sc-pill {
  flex: none;
  font-size: var(--fs-caption2);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fc, var(--mute));
  border: 1px solid var(--fc, var(--line));
  border-radius: 999px;
  padding: 2px 9px;
  opacity: .9
}

.sc-meta {
  font-size: var(--fs-footnote);
  color: var(--mute);
  min-height: 16px
}

.sc-acts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px
}

.sc-acts .btn {
  padding: 7px 14px;
  font-size: var(--fs-footnote)
}

.sc-acts .btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line)
}

.sites-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 56px 24px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--card)
}

.sites-empty .se-ttl {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: var(--fs-title2);
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: var(--ls-title)
}

.sites-empty .se-sub {
  font-size: var(--fs-subhead);
  color: var(--mute);
  max-width: 460px;
  margin: 0 auto 18px;
  line-height: 1.6
}

/* the diagnosis card as a condensed WHOLE report: four measures + one risk row (PT 2026-07-18) */
.mc-grid4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  margin: 0 0 14px
}

.mc-g4c {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 11px 12px 10px;
  min-height: 74px
}

.mc-g4l {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-eyebrow);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute)
}

.mc-g4n {
  font-family: Georgia, serif;
  font-size: var(--fs-title1);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  margin-top: 4px;
  font-variant-numeric: tabular-nums
}

.mc-g4n small {
  font-size: 0.71875rem;
  color: var(--mute);
  font-weight: 400
}

.mc-g4s {
  font-size: var(--fs-caption2);
  color: var(--mute);
  margin-top: 3px;
  line-height: 1.4
}

.mc-riskrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 15px
}

.mc-rrk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-caption);
  color: var(--body);
  background: var(--ok-bg);
  border: 1px solid var(--ok-line);
  border-radius: 9px;
  padding: 6px 11px
}

.mc-rrk i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jade);
  flex-shrink: 0
}

.mc-rrk b {
  color: var(--ink);
  font-weight: 700
}

.mc-rrk.bad {
  background: var(--bad-bg);
  border-color: var(--bad-line)
}

.mc-rrk.bad i {
  background: var(--verm)
}

.mc-zh .mc-g4l {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  letter-spacing: .02em;
  text-transform: none;
  font-size: var(--fs-caption2)
}

/* ── executive summary: score + seal + six components (report chapter 1), PT 2026-07-19 ── */
.mc-sb {
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0 15px;
  margin: 0 0 15px
}

.mc-sbl {
  min-width: 0;
  flex: 1
}

.mc-sbk {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-eyebrow);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mute)
}

.mc-sbn {
  font-family: Georgia, serif;
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  margin: 5px 0 0
}

.mc-sb.big .mc-sbn {
  font-size: 4.125rem
}

.mc-sbn small {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-subhead);
  font-weight: 400;
  color: var(--mute);
  letter-spacing: 0;
  margin-left: 3px
}

.mc-sbg {
  font-size: var(--fs-footnote);
  color: var(--mute);
  margin-top: 7px;
  line-height: 1.45
}

.mc-seal {
  flex-shrink: 0;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  border: 2px solid var(--verm);
  color: var(--verm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  padding: 4px;
  transform: rotate(-6deg);
  opacity: .92
}

.mc-sb.big .mc-seal {
  width: 6.25rem;
  height: 6.25rem
}

.mc-sealb {
  font-family: Georgia, serif;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .01em
}

.mc-sb.big .mc-sealb {
  font-size: var(--fs-title3);
  letter-spacing: var(--ls-title)
}

.mc-sealen {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.46875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .8
}

.mc-bd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  margin: 0 0 12px
}

.mc-bdc {
  min-width: 0
}

.mc-bdl {
  font-size: var(--fs-caption);
  color: var(--mute);
  line-height: 1.3
}

.mc-bdv {
  font-family: Georgia, serif;
  font-size: var(--fs-title3);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  margin-top: 1px;
  letter-spacing: var(--ls-title)
}

.mc-bdv small {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-caption2);
  font-weight: 400;
  color: var(--mute)
}

.mc-bdbar {
  height: 3px;
  border-radius: 2px;
  background: var(--fill-3);
  margin-top: 5px;
  overflow: hidden
}

.mc-bdbar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--fc, var(--indigo));
  opacity: .55
}

.mc-bdc.na .mc-bdv,
.mc-bdc.na .mc-bdl {
  opacity: .5
}

.mc-bdnote {
  font-size: var(--fs-caption);
  color: var(--mute);
  margin: 0 0 14px;
  line-height: 1.45
}

.mc-sihead {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-eyebrow);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 4px 0 8px
}

.mc-si {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--separator);
  margin: 0 0 14px
}

.mc-sirow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--separator);
  padding: 9px 4px;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-press) var(--ease-out), padding-left var(--dur-press) var(--ease-out)
}

.mc-sirow:hover {
  background: var(--tint-weak);
  padding-left: 9px
}

.mc-sirow.dis {
  cursor: default;
  opacity: .45
}

.mc-sirow.dis:hover {
  background: none;
  padding-left: 4px
}

.mc-sit {
  font-size: var(--fs-subhead);
  font-weight: 600;
  flex-shrink: 0
}

.mc-sid {
  font-size: var(--fs-caption);
  color: var(--mute);
  flex: 1;
  min-width: 0;
  line-height: 1.4
}

.mc-sib {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-eyebrow);
  color: var(--mute);
  background: var(--ink-wash);
  border-radius: 6px;
  padding: 3px 7px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums
}

.mc-siar {
  color: var(--mute);
  font-size: var(--fs-body);
  flex-shrink: 0
}

/* play preview (overview → winning strategy). Reads as three moves, not as a chapter summary. */
.mc-plays {
  border-left: 2px solid var(--verm);
  padding: 2px 0 2px 12px;
  margin: 0 0 16px
}

.mc-plr {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 7px 0
}

.mc-plr+.mc-plr {
  border-top: 1px solid var(--line)
}

.mc-pln {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--verm);
  flex-shrink: 0;
  margin-top: 7px
}

.mc-plt {
  min-width: 0
}

.mc-plt b {
  display: block;
  font-size: var(--fs-subhead);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35
}

.mc-plt i {
  display: block;
  font-style: normal;
  font-size: var(--fs-caption);
  color: var(--mute);
  line-height: 1.45;
  margin-top: 2px
}

.mc-plmore {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  margin-top: 2px;
  font-family: inherit;
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--indigo);
  cursor: pointer
}

.mc-plmore:hover {
  text-decoration: underline
}

.wb-body table.mdtbl tr.hl td,
.mmsg .mbub table.mdtbl tr.hl td {
  background: var(--bad-bg);
  color: var(--ink);
  font-weight: 600
}

.wb-body table.mdtbl tr.hl td:first-child {
  box-shadow: inset 2px 0 0 var(--verm)
}

.wb-body table.mdtbl.ladder td:first-child,
.wb-body table.mdtbl.ladder td:nth-child(2) {
  white-space: nowrap;
  font-variant-numeric: tabular-nums
}

.mc-zh .mc-sbk,
.mc-zh .mc-sihead {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  letter-spacing: .02em;
  text-transform: none;
  font-size: var(--fs-caption2)
}

.mc-zh .mc-sealb {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: var(--fs-subhead);
  letter-spacing: .04em
}

@media(max-width:560px) {
  .mc-bd {
    grid-template-columns: 1fr
  }

  .mc-sb {
    gap: 12px
  }

  .mc-seal {
    width: 4.625rem;
    height: 4.625rem
  }

  .mc-sb.big .mc-seal {
    width: 5rem;
    height: 5rem
  }

  .mc-sbn {
    font-size: 2.75rem
  }

  .mc-sb.big .mc-sbn {
    font-size: 3.125rem
  }

  .mc-sirow {
    flex-wrap: wrap;
    gap: 3px 10px
  }

  .mc-sid {
    flex: 1 0 100%;
    order: 3
  }

  .mc-sib {
    order: 2;
    margin-left: auto
  }
}

@media(prefers-reduced-motion:reduce) {
  .mc-sirow {
    transition: none
  }
}

.mc-fixchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--fc, var(--indigo)) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--fc, var(--indigo)) 22%, transparent);
  color: var(--fc, var(--indigo));
  font-size: var(--fs-footnote);
  font-weight: 600;
  border-radius: 9px;
  padding: 8px 13px;
  margin-bottom: 16px
}

.mc-fixchip svg {
  width: 17px;
  height: 17px
}

.mc-sitediff {
  margin: 0 0 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden
}

.mc-sitediff .sd-row {
  padding: 10px 13px;
  border-top: 1px solid var(--separator)
}

.mc-sitediff .sd-row:first-child {
  border-top: none
}

.mc-sitediff .sd-h {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px
}

.mc-sitediff .sd-field {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .01em
}

.mc-sitediff .sd-loc {
  font-size: var(--fs-caption2);
  color: var(--mute);
  font-family: ui-monospace, Menlo, Consolas, monospace
}

.mc-sitediff .sd-ba {
  font-size: var(--fs-footnote);
  line-height: 1.5;
  word-break: break-word
}

.mc-sitediff .sd-before {
  color: var(--verm);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: .85
}

.mc-sitediff .sd-arrow {
  color: var(--mute);
  margin: 0 7px
}

.mc-sitediff .sd-after {
  color: var(--jade);
  font-weight: 600
}

.mc-senote {
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--mute);
  display: inline-flex;
  align-items: center
}

.mc-senote.mc-se-applied {
  color: var(--jade)
}

.mc-senote.mc-se-stale {
  color: var(--verm)
}

.mc-card.mc-se-resolved {
  opacity: .72
}

.mc-acts {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  border-top: 1px solid var(--separator);
  padding-top: 15px
}

.mc-cta {
  background: var(--fc, var(--indigo));
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 17px;
  font-size: var(--fs-subhead);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: filter var(--dur-press) var(--ease-out), transform var(--dur-press) var(--ease-out);
  box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--fc, var(--indigo)) 55%, transparent)
}

.mc-cta:hover {
  filter: brightness(.9);
  transform: translateY(-1px)
}

.mc-cta svg {
  width: 16px;
  height: 16px
}

.mc-ghost {
  background: none;
  border: 1px solid var(--line);
  color: var(--body);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: var(--fs-footnote);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--dur-press) var(--ease-out), color var(--dur-press) var(--ease-out)
}

.mc-ghost:hover {
  border-color: var(--indigo);
  color: var(--indigo)
}

.mc-next {
  margin-left: auto;
  font-size: var(--fs-footnote);
  color: var(--indigo);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  font-family: inherit
}

.mc-next:hover {
  gap: 7px
}

/* ⚡ palette drawer */
.maya-input .mc-palbtn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--ink-wash);
  color: var(--mute);
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-press) var(--ease-out), background var(--dur-press) var(--ease-out), color var(--dur-press) var(--ease-out)
}

.maya-input .mc-palbtn:hover {
  border-color: var(--indigo);
  background: var(--tint-wash);
  color: var(--indigo)
}

.maya-input .mc-palbtn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round
}

.maya-input .mc-sendbtn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: none;
  background: var(--accent-fill);
  color: #fff;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 13px -5px rgba(40, 71, 196, .55);
  transition: background var(--dur-press) var(--ease-out), transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), opacity var(--dur-press) var(--ease-out)
}

.maya-input .mc-sendbtn:hover {
  background: var(--accent-press);
  transform: translateY(-1px);
  box-shadow: 0 7px 17px -6px rgba(40, 71, 196, .65)
}

.maya-input .mc-sendbtn:disabled {
  opacity: .38;
  cursor: default;
  box-shadow: none;
  transform: none
}

.maya-input .mc-sendbtn svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round
}

.mc-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: var(--scrim-soft);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px)
}

.mc-drawer.on {
  display: flex;
  animation: mc-fade var(--dur-press) var(--ease-out)
}

@keyframes mc-fade {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.mc-palette {
  width: 100%;
  max-width: 640px;
  margin: 0 14px 14px;
  background: var(--glass-heavy);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 20px;
  padding: 18px 18px 20px;
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-3);
  max-height: 82vh;
  overflow: auto;
  animation: mc-up var(--dur) var(--ease-out)
}

@keyframes mc-up {
  from {
    transform: translateY(24px) scale(.97);
    opacity: 0;
    filter: blur(6px)
  }

  to {
    transform: none;
    opacity: 1;
    filter: none
  }
}

.mc-phead {
  font-size: var(--fs-subhead);
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px
}

.mc-pdot {
  display: inline-flex;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--tint);
  color: var(--indigo);
  align-items: center;
  justify-content: center
}

.mc-pdot svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round
}

.mc-pclose {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--mute);
  cursor: pointer;
  font-size: var(--fs-title2);
  line-height: 1;
  font-family: inherit;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 8px
}

.mc-pclose:hover {
  background: var(--ink-hover);
  color: var(--ink)
}

.mc-pgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px
}

.mc-pghd {
  font-size: var(--fs-caption2);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 16px 2px 8px
}

.mc-pghd:first-of-type {
  margin-top: 4px
}

.mc-pk {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: var(--fill-4);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--dur-press) var(--ease-out), transform var(--dur-press) var(--ease-out), background var(--dur-press) var(--ease-out), color var(--dur-press) var(--ease-out);
  color: var(--ink)
}

.mc-pk:hover {
  border-color: var(--indigo);
  transform: translateY(-2px);
  background: var(--card);
  color: var(--indigo)
}

.mc-pi {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ink-wash);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
  transition: background var(--dur-press) var(--ease-out)
}

.mc-pk:hover .mc-pi {
  background: var(--tint)
}

.mc-pi svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  stroke-width: 1.55;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round
}

.mc-pt {
  min-width: 0
}

.mc-pt b {
  font-size: var(--fs-footnote);
  color: var(--ink);
  font-weight: 600;
  display: block
}

.mc-pt i {
  font-size: var(--fs-caption2);
  color: var(--mute);
  font-style: normal;
  display: block;
  margin-top: 1px
}

/* CJK overrides — Chinese cards drop Latin uppercase/wide-tracking, use CJK sans */
.mc-zh .mc-kind,
.mc-zh .mc-fopen,
.mc-zh .mc-t,
.mc-zh .mc-eye,
.mc-zh .mc-ladder-l,
.mc-zh .mc-reads .mc-l,
.mc-zh .mc-stamp {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  letter-spacing: .02em;
  text-transform: none;
  font-size: var(--fs-caption2)
}

.mc-zh .mc-eye {
  font-weight: 600
}

.mc-zh .mc-verdict {
  line-height: 1.5
}

.mc-zh.mc-file .mc-kind,
.mc-zh .mc-reads .mc-l,
.mc-zh.mc-file .mc-fopen {
  font-size: var(--fs-eyebrow)
}

@media(max-width:560px) {

  .mc-file,
  .mc-card {
    max-width: none
  }

  .mc-pgrid {
    grid-template-columns: 1fr
  }

  .mc-next {
    margin-left: 0
  }
}

/* task19: ditto */
@media(prefers-reduced-motion:reduce) {

  .mc-file,
  .mc-card,
  .mc-onb,
  .mc-enter {
    animation: none;
    opacity: 1;
    transform: none
  }
}

/* ── CJK (zh/ja): native font stacks; drop Latin display tracking — negative/wide tracking hurts CJK ── */
html[lang=zh] body {
  font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif
}

html[lang=ja] body {
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans JP", sans-serif
}

html[lang=zh] h1,
html[lang=zh] h2,
html[lang=zh] h3,
html[lang=zh] .serif {
  font-family: Georgia, "Songti SC", "STSong", "Noto Serif SC", serif;
  letter-spacing: 0
}

html[lang=ja] h1,
html[lang=ja] h2,
html[lang=ja] h3,
html[lang=ja] .serif {
  font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  letter-spacing: 0
}

html[lang=zh] .sgroup,
html[lang=zh] .sgtoggle,
html[lang=zh] .tag,
html[lang=zh] .band,
html[lang=zh] .pl-h,
html[lang=zh] .rtable th,
html[lang=zh] .htable th,
html[lang=zh] .cwtile .ct,
html[lang=zh] .cwtok .cl,
html[lang=zh] .chips .cl,
html[lang=zh] .obhead .obl,
html[lang=zh] .mc-fpl,
html[lang=zh] .kpill,
html[lang=zh] .youchip,
html[lang=zh] .soonchip,
html[lang=zh] .mtag,
html[lang=zh] .asev,
html[lang=ja] .sgroup,
html[lang=ja] .sgtoggle,
html[lang=ja] .tag,
html[lang=ja] .band,
html[lang=ja] .pl-h,
html[lang=ja] .rtable th,
html[lang=ja] .htable th,
html[lang=ja] .cwtile .ct,
html[lang=ja] .cwtok .cl,
html[lang=ja] .chips .cl,
html[lang=ja] .obhead .obl,
html[lang=ja] .mc-fpl,
html[lang=ja] .kpill,
html[lang=ja] .youchip,
html[lang=ja] .soonchip,
html[lang=ja] .mtag,
html[lang=ja] .asev {
  letter-spacing: .02em
}

/* ═══ Workbench drawer (PT 2026-07-18) ═══
   Maya's workbench, not a destination: it does not exist until long-form content needs it, it slides
   in from the right at a fixed 480px (chat compresses to a 680px measure), and opening/closing never
   moves the reader — see wbReflowKeep() for the scroll/stick preservation. */
.wb {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 44px -26px rgba(26, 35, 51, .34);
  visibility: hidden;
  opacity: 0;
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-press) var(--ease-out), visibility 0s linear var(--dur) var(--ease-out)
}

.wb.on {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-press) var(--ease-out), visibility 0s
}

.wb.wb-wide {
  width: min(66vw, 940px)
}

@media(max-width:820px) {
  .wb.wb-wide {
    width: 100%
  }
}

/* #14a site workbench: canvas + controls in the wide drawer (Maya conversation stays on the left) */
.ws-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap
}

.ws-pl {
  font-size: var(--fs-caption);
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: 6px
}

.ws-page {
  font-family: inherit;
  font-size: var(--fs-footnote);
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  max-width: 200px
}

.ws-sp {
  flex: 1
}

.ws-btn {
  font-family: inherit;
  font-size: var(--fs-footnote);
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none
}

.ws-btn:hover {
  border-color: var(--indigo);
  color: var(--indigo)
}

.ws-btn.ws-pub {
  background: var(--accent-fill);
  color: #fff;
  border-color: var(--accent-fill)
}

.ws-modes {
  flex-shrink: 0;
  display: flex;
  gap: 4px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line)
}

.ws-m {
  font-family: inherit;
  font-size: var(--fs-caption);
  padding: 6px 12px;
  border-radius: 8px;
  border: 0;
  background: var(--fill);
  color: var(--mute);
  cursor: pointer
}

.ws-m.on {
  background: var(--accent-fill);
  color: #fff
}

.ws-hint {
  font-size: var(--fs-caption);
  color: var(--mute);
  line-height: 1.4
}

.ws-modes .ws-askmaya {
  background: var(--accent-fill);
  color: #fff;
  flex-shrink: 0
}

.ws-canvaswrap {
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
  background: var(--paper)
}

.ws-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block
}

/* #14b Lovable-style skin gallery: real rendered thumbnails, click to re-skin (data-theme, no rebuild) */
.ws-split {
  flex: 1;
  min-height: 0;
  display: flex
}

.ws-gallery {
  flex: 0 0 212px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--card);
  border-right: 1px solid var(--line);
  padding: 11px 10px;
  scrollbar-width: thin
}

.ws-gh {
  font-size: var(--fs-caption2);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 600;
  margin: 2px 2px 10px
}

.ws-gtpls {
  display: grid;
  gap: 10px
}

.ws-gt {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--paper);
  padding: 0;
  font-family: inherit;
  text-align: left;
  box-shadow: 0 1px 3px rgba(26, 35, 51, .05);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease
}

.ws-gt:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(26, 35, 51, .14)
}

.ws-gt.sel {
  border-color: var(--indigo);
  box-shadow: 0 0 0 2px var(--indigo)
}

.ws-gthumb {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: top;
  display: block;
  background: var(--fill);
  border-bottom: 1px solid var(--line)
}

.ws-gn {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--ink);
  padding: 6px 8px;
  line-height: 1.2
}

.ws-gck {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-fill);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-eyebrow);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25)
}

.ws-gt.sel .ws-gck {
  display: flex
}

/* THREE-AXIS D: family view — 8 family cards, expand to member skins + colour row + structure row */
.ws-gtpls .ws-fam {
  margin: 0
}

.ws-fam {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(26, 35, 51, .05)
}

.ws-fam.sel {
  border-color: var(--indigo)
}

.ws-famh {
  display: flex;
  align-items: center;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left
}

.ws-fthumb {
  width: 56px;
  height: 42px;
  object-fit: cover;
  object-position: top;
  background: var(--fill);
  flex: 0 0 auto
}

.ws-fn {
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--ink);
  padding: 7px 8px;
  flex: 1;
  line-height: 1.2
}

.ws-fck {
  display: none;
  margin-right: 9px;
  color: var(--indigo);
  font-weight: 700
}

.ws-fam.sel .ws-fck {
  display: inline
}

.ws-fam.open .ws-famh {
  border-bottom: 1px solid var(--line)
}

.ws-fbody {
  padding: 10px 9px 12px;
  background: var(--card)
}

.ws-frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}

.ws-slabel {
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 700;
  margin: 11px 2px 6px
}

.ws-colrow {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center
}

.ws-cs {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid rgba(0, 0, 0, .08);
  cursor: pointer;
  padding: 0;
  transition: transform .1s ease
}

.ws-cs:hover {
  transform: scale(1.12)
}

.ws-cs.sel {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--indigo)
}

.ws-cpick {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--mute);
  font-size: var(--fs-body);
  line-height: 1
}

.ws-cinput {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0
}

.ws-strow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 5px
}

.ws-stbtn {
  font-size: var(--fs-caption2);
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  transition: background .1s ease, color .1s ease, border-color .1s ease
}

.ws-stbtn:hover {
  border-color: var(--indigo)
}

.ws-stbtn.sel {
  background: var(--accent-fill);
  color: #fff;
  border-color: var(--accent-fill)
}

@media(max-width:820px) {
  .ws-gallery {
    flex-basis: 160px
  }
}

/* P2a page CMS: the left column is now Pages | Design (the page list lives where the skin gallery was) */
.ws-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 11px
}

.ws-tab {
  flex: 1;
  font-family: inherit;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: .02em;
  padding: 7px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--mute);
  cursor: pointer;
  min-height: 32px
}

.ws-tab.on {
  background: var(--accent-fill);
  color: #fff;
  border-color: var(--accent-fill)
}

.ws-plist {
  display: grid;
  gap: 7px
}

.ws-prow {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  padding: 8px 9px;
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease
}

.ws-prow:hover {
  border-color: var(--indigo)
}

.ws-prow.cur {
  border-color: var(--indigo);
  box-shadow: inset 3px 0 0 var(--indigo)
}

.ws-pnm {
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  word-break: break-word
}

.ws-pmeta {
  font-size: var(--fs-caption2);
  color: var(--mute);
  margin-top: 2px;
  font-family: ui-monospace, Menlo, Consolas, monospace
}

.ws-pbadges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px
}

.ws-pb {
  font-size: var(--fs-eyebrow);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--fill);
  color: var(--mute)
}

.ws-pb.live {
  background: var(--ok-fill);
  color: var(--jade)
}

.ws-pb.dft {
  background: var(--warn-fill);
  color: var(--amber, #8F630B)
}

.ws-pacts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px
}

.ws-pact {
  font-family: inherit;
  font-size: var(--fs-caption2);
  padding: 4px 8px;
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  color: var(--body);
  cursor: pointer
}

.ws-pact:hover {
  border-color: var(--indigo);
  color: var(--indigo)
}

.ws-pact[disabled] {
  opacity: .45;
  cursor: not-allowed
}

.ws-pact.del:hover {
  border-color: var(--verm);
  color: var(--verm)
}

.ws-pin {
  font-family: inherit;
  font-size: var(--fs-footnote);
  width: 100%;
  padding: 5px 7px;
  border: 1px solid var(--indigo);
  border-radius: 7px;
  background: var(--card);
  color: var(--ink)
}

.ws-pconf {
  margin-top: 8px;
  border-top: 1px dashed var(--line);
  padding-top: 8px;
  font-size: var(--fs-caption);
  color: var(--body);
  line-height: 1.45
}

.ws-pconf b {
  color: var(--ink)
}

.ws-pconf ul {
  margin: 5px 0 0;
  padding-left: 16px
}

.ws-pconf li {
  margin: 2px 0
}

.ws-pwarn {
  color: var(--verm)
}

.ws-padd {
  margin-top: 11px;
  border-top: 1px solid var(--line);
  padding-top: 11px
}

.ws-pnew {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-caption);
  font-weight: 600;
  padding: 8px 10px;
  min-height: 34px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--indigo);
  cursor: pointer
}

.ws-pnew:hover {
  border-color: var(--indigo);
  border-style: solid
}

.ws-pform {
  display: grid;
  gap: 7px
}

.ws-plab {
  font-size: var(--fs-eyebrow);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 700
}

.ws-psel {
  font-family: inherit;
  font-size: var(--fs-footnote);
  width: 100%;
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  color: var(--ink)
}

.ws-pnote {
  font-size: var(--fs-caption2);
  color: var(--mute);
  line-height: 1.45;
  margin-top: 9px
}

/* Sections are a lighter, nested level beneath Pages. */
.ws-blh {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--line)
}

.ws-blist {
  display: grid;
  gap: 6px
}

.ws-brow {
  border: 1px solid var(--line);
  border-color: color-mix(in srgb, var(--indigo) 24%, var(--line));
  border-radius: 8px;
  background: var(--tint);
  padding: 7px 8px
}

.ws-bnm {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--body);
  line-height: 1.3;
  word-break: break-word
}

.ws-bmeta {
  margin-top: 1px;
  color: var(--mute);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--fs-eyebrow);
  line-height: 1.35
}

.ws-brow .ws-pacts {
  margin-top: 6px
}

.ws-brow .ws-pact {
  min-height: 24px;
  padding: 3px 7px;
  font-size: var(--fs-eyebrow)
}

.ws-badd {
  padding-top: 4px
}

.ws-bpick {
  display: flex;
  flex-wrap: wrap;
  gap: 5px
}

.ws-bpick .ws-plab {
  flex-basis: 100%
}

@media(prefers-reduced-motion:reduce) {
  .ws-prow {
    transition: none
  }
}

/* P2b blog view: the SAME drawer switches to the article list (breadcrumb back to the pages) —
   the studio panes are only hidden, so the canvas iframe + Pages|Design state survive intact */
.ws-blogmode .ws-bar,
.ws-blogmode .ws-modes,
.ws-blogmode .ws-split {
  display: none
}

.ws-blogv {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 13px 16px 24px;
  background: var(--paper)
}

.ws-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 11px
}

.ws-cbtn {
  font-family: inherit;
  font-size: var(--fs-caption);
  padding: 5px 10px;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--indigo);
  cursor: pointer
}

.ws-cbtn:hover {
  border-color: var(--indigo)
}

.ws-ch {
  font-family: Georgia, serif;
  font-size: var(--fs-body);
  color: var(--ink);
  font-weight: 700
}

.ws-bnote {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--body);
  background: var(--bad-bg);
  border-left: 3px solid var(--verm);
  border-radius: 0 8px 8px 0;
  padding: 8px 11px;
  margin: 0 0 13px
}

.ws-arow {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card);
  padding: 11px 13px;
  margin-bottom: 9px
}

.ws-atitle {
  font-size: var(--fs-subhead);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3
}

.ws-ameta {
  font-size: var(--fs-caption2);
  color: var(--mute);
  margin-top: 3px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  word-break: break-all
}

.ws-abadges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px
}

.ws-aacts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px
}

.ws-agroup {
  font-size: var(--fs-eyebrow);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 700;
  margin: 14px 2px 8px
}

.ws-adoc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 14px 16px;
  margin-top: 11px
}

.ws-adoc h1,
.ws-adoc h2,
.ws-adoc h3 {
  font-size: var(--fs-body);
  margin: 14px 0 6px
}

.ws-adoc p {
  font-size: var(--fs-footnote);
  line-height: 1.65;
  margin: 0 0 9px
}

.ws-abar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 12px
}

.ws-abar .art-publine {
  font-size: var(--fs-caption);
  color: var(--jade);
  width: 100%
}

@media(prefers-reduced-motion:reduce) {
  .ws-gt {
    transition: none
  }

  .ws-gt:hover {
    transform: none
  }

  .ws-cs,
  .ws-stbtn {
    transition: none
  }

  .ws-cs:hover {
    transform: none
  }
}

/* D2 (IMP-N): build-prep card — a quick, all-optional setup form before the site build */
.bp-card {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--r-card);
  padding: 20px 22px;
  box-shadow: var(--shadow-1);
  max-width: 520px
}

.bp-hd {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px
}

.bp-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: 0 0 auto
}

.bp-h {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25
}

.bp-sub {
  font-size: var(--fs-footnote);
  color: var(--mute);
  margin-top: 2px;
  line-height: 1.4
}

.bp-sec {
  margin-top: 13px
}

.bp-lb {
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 700;
  margin-bottom: 7px
}

.bp-lbnote {
  font-size: var(--fs-caption);
  color: var(--mute);
  font-weight: 400;
  line-height: 1.4;
  margin-top: -3px;
  margin-bottom: 8px
}

/* batch 3 §1: the button as the SITE will really render it — a preview, not a control, so it is
   never focusable and never looks like one of the option pills above it. */
.bp-ctaprev {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 9px 0 5px
}

.bp-cpl {
  font-size: var(--fs-caption);
  color: var(--mute)
}

.bp-cpb {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 15px;
  border-radius: 8px;
  background: var(--accent-fill);
  color: #fff;
  font-size: var(--fs-footnote);
  font-weight: 600;
  letter-spacing: .01em;
  cursor: default;
  user-select: none
}

.bp-colrow {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center
}

.bp-auto {
  font-size: var(--fs-caption);
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-family: inherit
}

.bp-auto.on {
  background: var(--accent-fill);
  color: #fff;
  border-color: var(--accent-fill)
}

.bp-cs {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 2px solid rgba(0, 0, 0, .08);
  cursor: pointer;
  padding: 0;
  transition: transform .1s ease
}

.bp-cs:hover {
  transform: scale(1.1)
}

.bp-cs.on {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--indigo)
}

.bp-cpick {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--mute);
  font-size: var(--fs-title3);
  line-height: 1;
  letter-spacing: var(--ls-title)
}

.bp-cinput {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0
}

.bp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px
}

.bp-pill {
  font-size: var(--fs-caption);
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  transition: background .1s ease, color .1s ease, border-color .1s ease
}

.bp-pill:hover {
  border-color: var(--indigo)
}

.bp-pill.on {
  background: var(--accent-fill);
  color: #fff;
  border-color: var(--accent-fill)
}

.bp-inrow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.bp-in {
  flex: 1 1 150px;
  min-width: 0;
  font-size: var(--fs-footnote);
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit
}

.bp-in:focus {
  outline: none;
  border-color: var(--indigo)
}

.bp-acts {
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  margin-top: 16px
}

/* F-F: these are two equal choices, not "do the work" vs "skip". The grey, smaller secondary was
   read as "this step doesn't matter" — same size, same weight, full-contrast label on both. */
.bp-skip {
  font-size: var(--fs-footnote);
  font-weight: 600;
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid var(--indigo);
  border-radius: 9px;
  background: var(--paper);
  color: var(--indigo);
  cursor: pointer;
  font-family: inherit
}

.bp-go {
  font-size: var(--fs-footnote);
  font-weight: 600;
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid var(--accent-fill);
  border-radius: 9px;
  background: var(--accent-fill);
  color: #fff;
  cursor: pointer;
  font-family: inherit
}

@media(prefers-reduced-motion:reduce) {

  .bp-cs,
  .bp-pill {
    transition: none
  }

  .bp-cs:hover {
    transform: none
  }
}

/* ④ build intake — reuses the .mc-onb card shell */
.bi-recap {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 12px
}

.bi-recapr {
  font-size: var(--fs-footnote);
  color: var(--ink);
  padding: 3px 0;
  line-height: 1.4
}

.bi-recapr+.bi-recapr {
  border-top: 1px dashed var(--line)
}

.bi-acts {
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px
}

.bi-acts .mc-onb-go {
  flex: 0 0 auto
}

.bi-choice {
  display: flex;
  gap: 8px;
  margin-bottom: 4px
}

.bi-card .mc-onb-f {
  margin-bottom: 9px
}

.bi-card.bi-saving {
  opacity: .6
}

.bi-card button:disabled {
  opacity: .55;
  cursor: default
}

/* ⑤ brand profile view */
.prof-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px
}

.prof-brand-context {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--ink)
}

.prof-brand-label {
  color: var(--mute);
  font-size: var(--fs-footnote)
}

.prof-brand-context strong {
  font-size: var(--fs-subhead);
  font-weight: 700
}

.prof-meter {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0
}

.prof-bar {
  width: 180px;
  max-width: 46vw;
  height: 8px;
  border-radius: 5px;
  background: var(--line);
  overflow: hidden
}

.prof-bar i {
  display: block;
  height: 100%;
  background: var(--indigo);
  border-radius: 5px;
  transition: width .3s ease
}

.prof-pct {
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap
}

.prof-savebtn {
  flex: 0 0 auto
}

.prof-grp {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 14px
}

.prof-grp-h {
  font-size: var(--fs-caption2);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 700;
  margin-bottom: 13px
}

.prof-f {
  margin-bottom: 15px
}

.prof-f:last-child {
  margin-bottom: 0
}

.prof-l {
  display: block;
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px
}

.prof-req {
  font-style: normal;
  font-weight: 500;
  color: var(--verm);
  font-size: var(--fs-caption2);
  margin-left: 6px
}

.prof-in {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: var(--fs-subhead);
  font-family: inherit;
  background: var(--paper);
  color: var(--ink);
  outline: none
}

.prof-in:focus {
  border-color: var(--indigo)
}

.prof-slug-control {
  display: flex;
  align-items: center;
  min-width: 0;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  color: var(--mute);
  overflow: hidden
}

.prof-slug-control:focus-within {
  border-color: var(--indigo)
}

.prof-slug-control.is-locked {
  background: var(--wash, var(--line));
  border-color: var(--line)
}

.prof-slug-control .prof-locked {
  color: var(--mute);
  cursor: not-allowed
}

.prof-slug-control .prof-in {
  flex: 0 1 16ch;
  width: 16ch;
  max-width: 16ch;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent
}

.prof-slug-prefix,
.prof-slug-suffix {
  flex: 0 0 auto;
  padding: 0 10px;
  font-size: var(--fs-footnote);
  white-space: nowrap
}

.prof-slug-prefix {
  padding-right: 0
}

.prof-slug-suffix {
  padding-left: 0
}

.prof-slug-hint {
  margin-top: 6px;
  color: var(--mute);
  font-size: var(--fs-caption2);
  line-height: 1.4
}

.prof-bool {
  display: flex;
  gap: 8px
}

.prof-list {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.prof-row {
  display: flex;
  gap: 8px;
  align-items: center
}

.prof-row .prof-in {
  flex: 1 1 auto;
  min-width: 0
}

.prof-2 .prof-in {
  flex: 1 1 0
}

.prof-2 .prof-in:first-child {
  flex: 2 1 0
}

.prof-rm {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--mute);
  cursor: pointer;
  font-size: var(--fs-title3);
  line-height: 1;
  letter-spacing: var(--ls-title)
}

.prof-rm:hover {
  border-color: var(--verm);
  color: var(--verm)
}

.prof-add {
  align-self: flex-start;
  font-size: var(--fs-caption);
  font-weight: 600;
  padding: 6px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--indigo);
  cursor: pointer;
  font-family: inherit
}

.prof-add:hover {
  border-color: var(--indigo);
  border-style: solid
}

@media(max-width:560px) {
  .prof-2 {
    flex-wrap: wrap
  }

  .prof-2 .prof-in {
    flex-basis: 100%
  }

  .prof-2 .prof-rm {
    order: 3
  }
}

.ws-msg {
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: var(--fs-caption);
  color: var(--mute);
  border-top: 1px solid var(--line);
  min-height: 16px
}

.ws-pick {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 30, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9
}

.ws-pkbox {
  background: var(--card);
  border-radius: 14px;
  padding: 20px 22px;
  max-width: 340px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .4)
}

.ws-pkt {
  font-size: var(--fs-subhead);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px
}

.ws-sw {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 14px
}

.ws-c {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  border: 2px solid rgba(0, 0, 0, .08);
  cursor: pointer;
  padding: 0
}

.ws-c:hover {
  transform: scale(1.1)
}

.ws-keep {
  display: block;
  width: 100%;
  background: var(--accent-fill);
  color: #fff;
  border: 0;
  padding: 9px;
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--fs-footnote);
  margin-bottom: 7px
}

.ws-cancel {
  display: block;
  width: 100%;
  background: #eef;
  color: #556;
  border: 0;
  padding: 7px;
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--fs-caption)
}

/* ── IMP-G: publish wizard (3-step modal — URL → site info → review & publish) ── */
.pw-ov {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: var(--scrim);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 16px;
  overflow-y: auto
}

.pw-box {
  background: var(--glass-heavy);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--r-card);
  width: 100%;
  max-width: 560px;
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  overflow: hidden
}

.pw-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line)
}

.pw-head h3 {
  flex: 1;
  font-family: Georgia, serif;
  font-size: var(--fs-title3);
  color: var(--ink);
  font-weight: 700;
  margin: 0;
  letter-spacing: var(--ls-title)
}

.pw-dots {
  display: flex;
  gap: 6px
}

.pw-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line)
}

.pw-dot.on {
  background: var(--indigo)
}

.pw-close {
  background: none;
  border: none;
  font-size: var(--fs-title1);
  line-height: 1;
  color: var(--mute);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px
}

.pw-close:hover {
  background: var(--ink-hover);
  color: var(--ink)
}

.pw-body {
  padding: 22px;
  min-height: 172px
}

.pw-step-l {
  font-size: var(--fs-caption2);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 700;
  margin-bottom: 14px
}

.pw-urlbig {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-title3);
  color: var(--ink);
  word-break: break-all;
  line-height: 1.4;
  background: var(--fill);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  letter-spacing: var(--ls-title)
}

.pw-urlbig b {
  color: var(--indigo)
}

.pw-note {
  font-size: var(--fs-footnote);
  color: var(--mute);
  line-height: 1.5;
  margin-top: 12px
}

.pw-slugrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap
}

.pw-slugrow input {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-subhead);
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  width: 13.125rem
}

.pw-pencil {
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: var(--fs-footnote);
  color: var(--indigo);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600
}

.pw-err {
  color: var(--verm);
  font-size: var(--fs-footnote);
  margin-top: 8px
}

.pw-warn {
  color: var(--amber);
  font-size: var(--fs-footnote);
  margin-top: 8px
}

.pw-lock {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--mute);
  cursor: pointer;
  background: none
}

.pw-lock:hover {
  border-color: var(--indigo)
}

.pw-lock .pw-lockt {
  flex: 1;
  font-size: var(--fs-footnote);
  text-align: left
}

.pw-lock .pw-tag {
  font-size: var(--fs-eyebrow);
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 2px 8px;
  color: var(--mute)
}

.pw-fld {
  margin-bottom: 16px
}

.pw-fld label {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-footnote);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px
}

.pw-fld label .pw-ct {
  color: var(--mute);
  font-weight: 400
}

.pw-fld label .pw-ct.over {
  color: var(--verm)
}

.pw-fld input,
.pw-fld textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-subhead);
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
  box-sizing: border-box
}

.pw-fld textarea {
  min-height: 62px;
  line-height: 1.5
}

.pw-serp {
  margin-top: 18px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 14px 16px;
  background: #fff
}

.pw-serp-l {
  font-size: var(--fs-caption2);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #888;
  font-weight: 700;
  margin-bottom: 10px
}

.pw-serp-t {
  color: #1a0dab;
  font-size: var(--fs-title3);
  line-height: 1.3;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: var(--ls-title)
}

.pw-serp-u {
  color: #0e7d3a;
  font-size: var(--fs-footnote);
  margin-bottom: 4px;
  word-break: break-all
}

.pw-serp-d {
  color: #4d5156;
  font-size: var(--fs-footnote);
  line-height: 1.5
}

.pw-sum {
  list-style: none;
  padding: 0;
  margin: 0
}

.pw-sum li {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--separator);
  font-size: var(--fs-subhead)
}

.pw-sum li:last-child {
  border-bottom: none
}

.pw-sum .pw-sk {
  flex: 0 0 84px;
  color: var(--mute);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding-top: 2px
}

.pw-sum .pw-sv {
  flex: 1;
  color: var(--ink);
  word-break: break-word
}

.pw-sum .pw-sv b {
  color: var(--indigo)
}

.pw-redbar {
  margin-top: 16px;
  border: 1px solid var(--warn-line);
  background: var(--warn-bg);
  border-radius: 10px;
  padding: 12px 14px
}

.pw-rb-h {
  color: var(--amber);
  font-weight: 600;
  font-size: var(--fs-subhead);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px
}

.pw-redbar ul {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: var(--fs-footnote);
  color: var(--body);
  max-height: 140px;
  overflow-y: auto
}

/* --mute on the warn wash is 4.33:1 — under AA for 13px. The sub-line inside the redbar is not a
   de-emphasised caption, it explains the warning, so it takes --body (8.77:1). Scoped, because
   .pw-note is shared with four other spots that sit on the plain card and are fine as --mute. */
.pw-redbar .pw-note {
  color: var(--body)
}

.pw-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--line)
}

.pw-foot .pw-sp {
  flex: 1
}

.pw-btn {
  font-family: inherit;
  font-size: var(--fs-subhead);
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer
}

.pw-btn:hover {
  border-color: var(--indigo);
  color: var(--indigo)
}

.pw-btn.pw-primary {
  background: var(--accent-fill);
  color: #fff;
  border-color: var(--accent-fill)
}

.pw-btn.pw-primary:hover {
  opacity: .92;
  color: #fff
}

.pw-btn:disabled {
  opacity: .5;
  cursor: default
}

.pw-done {
  text-align: center;
  padding: 10px 0
}

.pw-check {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--jade, var(--jade));
  color: #fff;
  font-size: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px
}

.pw-durl {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-body);
  color: var(--indigo);
  word-break: break-all;
  margin-bottom: 18px
}

.pw-donenote {
  text-align: left;
  margin-top: 0
}

@media(prefers-reduced-motion:no-preference) {
  .pw-box {
    animation: pwin var(--dur) var(--ease-out)
  }
}

@keyframes pwin {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.98);
    filter: blur(5px)
  }

  to {
    opacity: 1;
    transform: none;
    filter: none
  }
}

@media(max-width:560px) {
  .pw-box {
    max-width: 100%
  }

  .pw-sum .pw-sk {
    flex-basis: 64px
  }
}

.wb-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px 12px 20px;
  border-bottom: 1px solid var(--line)
}

.wb-ttl {
  min-width: 0;
  flex: 1
}

.wb-ttl b {
  display: block;
  font-family: Georgia, serif;
  font-size: var(--fs-title3);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: var(--ls-title)
}

.wb-kind {
  display: inline-block;
  margin-top: 4px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--indigo);
  border: 1px solid var(--tint-line);
  border-radius: 4px;
  padding: 1px 6px
}

.wb-x,
.wb-back {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mute);
  font-family: inherit;
  padding: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.wb-x {
  width: 32px;
  height: 32px;
  font-size: var(--fs-title1);
  line-height: 1;
  flex-shrink: 0
}

.wb-x::after,
.wb-back::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px
}

.wb-x:hover {
  background: var(--ink-hover);
  color: var(--ink)
}

.wb-back {
  display: none;
  gap: 7px;
  min-height: 2rem;
  padding: 0 8px;
  font-size: var(--fs-subhead);
  font-weight: 600;
  color: var(--indigo)
}

.wb-back:hover {
  background: var(--tint-wash)
}

.wb-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 20px 26px;
  --fc: var(--indigo)
}

.wb-wide .wb-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden
}

/* #26: site workbench fills height so the canvas (flex:1) isn't 0-height/blank */
.wb-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding: 12px 20px;
  background: var(--card);
  --fc: var(--indigo)
}

.wb-doc {
  font-size: var(--fs-body);
  line-height: 1.72;
  color: var(--body)
}

/* mdLite output is styled only inside chat bubbles — give the drawer its own (unclamped) typography */
.wb-body .mdh {
  display: block;
  margin: 17px 0 6px;
  color: var(--ink);
  font-weight: 700;
  font-family: Georgia, serif;
  font-size: var(--fs-body)
}

.wb-body .mdh:first-child {
  margin-top: 0
}

.wb-body p+p {
  margin-top: 11px
}

.wb-body ul,
.wb-body ol {
  margin: 9px 0 9px 2px;
  padding: 0
}

.wb-body li {
  margin: 4px 0 4px 19px;
  line-height: 1.62
}

.wb-body .mdtblwrap {
  margin: 12px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch
}

.wb-body table.mdtbl {
  border-collapse: collapse;
  font-size: var(--fs-footnote);
  min-width: 100%;
  font-variant-numeric: tabular-nums
}

/* 4+ column tables: let the wrapper scroll instead of crushing short columns one glyph per line */
.wb-body table.mdtbl.wide {
  min-width: 600px
}

.wb-body table.mdtbl.wide th:not(:first-child),
.wb-body table.mdtbl.wide td:not(:first-child) {
  white-space: nowrap
}

.wb-body table.mdtbl th {
  text-align: left;
  font-weight: 700;
  color: var(--ink);
  background: var(--tint-weak);
  border-bottom: 1.5px solid var(--indigo);
  padding: 7px 9px
}

.wb-body table.mdtbl td {
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
  color: var(--body);
  vertical-align: top
}

.wb-body pre.mdraw {
  margin: 10px 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-caption);
  color: var(--mute);
  white-space: pre;
  overflow-x: auto
}

.wb-load {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: var(--fs-footnote);
  color: var(--indigo);
  padding: 28px 4px
}

.wb-load .radar2 {
  width: 20px;
  height: 20px;
  margin: 0;
  border-width: 2px;
  flex-shrink: 0
}

.wb-empty {
  text-align: center;
  color: var(--mute);
  font-size: var(--fs-subhead);
  line-height: 1.7;
  padding: 32px 16px;
  border: 1px dashed var(--line);
  border-radius: 12px
}

.wb-empty b {
  display: block;
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: var(--fs-title3);
  margin-bottom: 7px;
  letter-spacing: var(--ls-title)
}

.wb-empty .mc-cta {
  margin-top: 16px
}

.wb-chips {
  position: sticky;
  top: -18px;
  z-index: 2;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: -18px -20px 15px;
  padding: 14px 20px 10px;
  background: var(--card);
  border-bottom: 1px solid var(--line)
}

.wb-chip {
  position: relative;
  font-size: var(--fs-caption);
  font-weight: 600;
  font-family: inherit;
  background: none;
  border: 1px solid var(--line);
  color: var(--body);
  border-radius: 100px;
  padding: 6px 12px;
  cursor: pointer
}

.wb-chip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px
}

.wb-chip:hover {
  border-color: var(--indigo);
  color: var(--indigo)
}

.wb-chip.on {
  background: var(--tint-wash);
  border-color: var(--tint-line);
  color: var(--indigo)
}

.wb-url {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--fs-caption2);
  color: var(--mute);
  margin-bottom: 10px;
  word-break: break-all
}

.wb-url a {
  flex-shrink: 0;
  font-family: inherit
}

.wb-frame {
  display: block;
  width: 100%;
  height: calc(100vh - 200px);
  min-height: 320px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff
}

.wb-stats {
  font-size: var(--fs-footnote);
  color: var(--mute);
  border-bottom: 1px solid var(--line);
  padding-bottom: 11px;
  margin-bottom: 15px
}

.wb-stats b {
  color: var(--ink)
}

.wb-sec {
  margin-bottom: 22px
}

.wb-sech {
  font-size: var(--fs-caption);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 700;
  margin-bottom: 9px
}

.wb-sech.warn {
  color: var(--verm)
}

/* ── "How do I use this?" — the first thing on every deliverable (PT 2026-07-19). Three rows:
      what it is / who takes the next step / what happens after. The middle row is the answer to
      the complaint, so it carries the badge and the destinations. ── */
.wb-use {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--card);
  padding: 14px 16px;
  margin-bottom: 16px
}

.wb-use-r {
  padding: 9px 0;
  border-top: 1px solid var(--line)
}

.wb-use-r:first-child {
  padding-top: 0;
  border-top: none
}

.wb-use-r>h5 {
  margin: 0 0 4px;
  font: 700 var(--fs-caption2)/1 ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mute)
}

.wb-use-r>p {
  margin: 0;
  font-size: var(--fs-subhead);
  line-height: 1.68;
  color: var(--body)
}

.wb-use-r.who>h5 {
  color: var(--indigo)
}

.wb-use-bg {
  display: inline-block;
  margin-left: 8px;
  border-radius: 100px;
  padding: 2px 9px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: none;
  vertical-align: 1px
}

.wb-use-r.mine .wb-use-bg {
  background: rgba(35, 120, 90, .11);
  color: var(--jade, #237a5a)
}

.wb-use-r.yours .wb-use-bg {
  background: rgba(195, 64, 43, .1);
  color: var(--verm)
}

.wb-use-pl {
  list-style: none;
  margin: 9px 0 0;
  padding: 0
}

.wb-use-pl li {
  position: relative;
  padding: 3px 0 3px 17px;
  font-size: var(--fs-footnote);
  line-height: 1.6;
  color: var(--body)
}

.wb-use-pl li:before {
  content: "→";
  position: absolute;
  left: 0;
  top: 3px;
  color: var(--indigo);
  font-size: var(--fs-caption)
}

.wb-use-pw {
  margin: 10px 0 0;
  font: 700 var(--fs-caption2)/1 ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mute)
}

.wb-use-url {
  margin-top: 9px;
  font-size: var(--fs-footnote);
  line-height: 1.6;
  word-break: break-all
}

.wb-use-url a {
  color: var(--indigo);
  text-decoration: underline
}

.wb-use-go {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 10px;
  background: none;
  border: 1px solid var(--indigo);
  color: var(--indigo);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: var(--fs-footnote);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer
}

.wb-use-go:hover {
  background: rgba(40, 71, 196, .06)
}

.wb-use-note {
  margin: 10px 0 0;
  font-size: var(--fs-footnote);
  line-height: 1.62;
  color: var(--mute)
}

.wb-use-note b {
  color: var(--body);
  font-weight: 600
}

/* look-back view of a verified task: no checkboxes, no paste box — just what happened */
.wbr-row {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--card);
  padding: 14px 16px;
  margin-bottom: 12px
}

.wbr-row>h5 {
  margin: 0 0 5px;
  font: 700 var(--fs-caption2)/1 ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mute)
}

.wbr-row>p {
  margin: 0;
  font-size: var(--fs-subhead);
  line-height: 1.68;
  color: var(--body)
}

.wbr-row>p.big {
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: var(--fs-title3);
  line-height: 1.5;
  margin-bottom: 5px;
  letter-spacing: var(--ls-title)
}

.wbr-d {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  padding: 10px 12px;
  margin-top: 9px
}

.wbr-d b {
  font-size: var(--fs-subhead);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45
}

.wbr-d span {
  display: block;
  font-size: var(--fs-caption2);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 2px
}

.wbr-go {
  flex: none;
  min-height: 44px;
  background: none;
  border: 1px solid var(--indigo);
  color: var(--indigo);
  border-radius: 9px;
  padding: 9px 14px;
  font-size: var(--fs-footnote);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer
}

.wbr-go:hover {
  background: rgba(40, 71, 196, .06)
}

.wbr-hint {
  margin: 9px 0 0;
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--mute)
}

/* ── Workbench task view: the guided steps, in the drawer (2026-07-19). Only .wbt-go opens a tab. ── */
.wbt-intro {
  font-size: var(--fs-subhead);
  line-height: 1.7;
  color: var(--body);
  margin-bottom: 12px
}

/* ⑤ "what you'll get" — three lines, above the steps, quiet card */
.wbt-out {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 13px;
  margin-bottom: 14px;
  background: var(--tint-weak)
}

.wbt-out>b {
  display: block;
  font: 700 var(--fs-caption2)/1 ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: 8px
}

.wbt-out>div {
  font-size: var(--fs-footnote);
  line-height: 1.65;
  color: var(--body);
  margin-top: 4px
}

.wbt-out>div>span {
  color: var(--mute);
  margin-right: 6px
}

.wbt-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-caption2);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums
}

.wbt-prog {
  color: var(--indigo);
  font-weight: 700
}

.wbt-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--card);
  padding: 14px 16px;
  margin-bottom: 12px
}

.wbt-n {
  display: block;
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.4
}

.wbt-why {
  display: block;
  font-size: var(--fs-footnote);
  color: var(--mute);
  line-height: 1.6;
  margin-top: 3px
}

.wbt-steps {
  list-style: none;
  margin: 11px 0 0;
  padding: 0
}

.wbt-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 6px 4px;
  border-radius: 9px;
  cursor: pointer;
  transition: background var(--dur-press) var(--ease-out)
}

.wbt-step:hover {
  background: var(--tint-weak)
}

.wbt-step input {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  accent-color: var(--indigo);
  cursor: pointer
}

.wbt-step span {
  font-size: var(--fs-subhead);
  line-height: 1.62;
  color: var(--body)
}

.wbt-step.on span {
  color: var(--mute);
  text-decoration: line-through;
  text-decoration-color: var(--line)
}

.wbt-slip {
  position: relative;
  margin: 11px 0 2px;
  background: #FCFAF4;
  border: 1px dashed #D8CFBF;
  border-radius: 4px;
  padding: 11px 13px 44px
}

.wbt-sl {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-caption2);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 6px
}

.wbt-pt {
  font-size: var(--fs-footnote);
  line-height: 1.66;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word
}

.wbt-cpy {
  position: absolute;
  right: 10px;
  bottom: 8px;
  min-height: 32px;
  background: none;
  border: 1px solid var(--line);
  color: var(--body);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: var(--fs-caption);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer
}

.wbt-cpy:hover {
  border-color: var(--indigo);
  color: var(--indigo)
}

.wbt-acts {
  margin-top: 11px
}

.wbt-go {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: none;
  border: 1px solid var(--indigo);
  color: var(--indigo);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: var(--fs-footnote);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none
}

.wbt-go:hover {
  background: rgba(40, 71, 196, .06)
}

.wbt-after {
  display: block;
  font-size: var(--fs-caption);
  color: var(--mute);
  margin-top: 6px;
  line-height: 1.55
}

.wbt-stamp {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-caption2);
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--verm);
  border: 2px solid var(--verm);
  border-radius: 5px;
  padding: 3px 8px;
  transform: rotate(-7deg);
  opacity: .9;
  pointer-events: none
}

.wbt-hero {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(195, 64, 43, .05);
  padding: 16px 18px;
  margin-bottom: 14px
}

.wbt-hero b {
  display: block;
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: var(--fs-title3);
  margin-bottom: 5px;
  letter-spacing: var(--ls-title)
}

.wbt-hero span {
  font-size: var(--fs-footnote);
  color: var(--body);
  line-height: 1.65
}

.wbt-box {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--card);
  padding: 14px 16px;
  margin-top: 16px
}

.wbt-box h4 {
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: var(--fs-body);
  font-weight: 700;
  margin: 0 0 8px
}

.wbt-box textarea {
  width: 100%;
  min-height: 120px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  padding: 11px 13px;
  font-family: inherit;
  font-size: var(--fs-subhead);
  line-height: 1.65;
  color: var(--ink);
  resize: vertical
}

.wbt-box textarea:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--tint)
}

.wbt-boxact {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px
}

.wbt-note {
  font-size: var(--fs-caption);
  color: var(--mute)
}

.wbt-note.warn {
  color: var(--verm)
}

/* ── 90-day plan in the drawer: four phases, proposal → live ── */
.wb-ph {
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 10px;
  background: var(--card);
  overflow: hidden
}

.wb-ph>summary {
  list-style: none;
  cursor: pointer;
  padding: 13px 15px;
  position: relative
}

.wb-ph>summary::-webkit-details-marker {
  display: none
}

.wb-ph>summary::after {
  content: "\203A";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  color: var(--mute);
  font-size: var(--fs-title3);
  transition: transform .16s ease;
  letter-spacing: var(--ls-title)
}

.wb-ph[open]>summary::after {
  transform: translateY(-50%) rotate(-90deg)
}

.wb-pht {
  font-family: Georgia, serif;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
  padding-right: 22px
}

.wb-phn {
  font-size: var(--fs-caption2);
  font-weight: 700;
  color: var(--indigo);
  background: var(--tint);
  border-radius: 100px;
  padding: 1px 7px;
  margin-left: 7px;
  vertical-align: 2px
}

.wb-phs {
  font-size: var(--fs-caption);
  color: var(--mute);
  margin-top: 3px;
  line-height: 1.5
}

.wb-phb {
  padding: 2px 13px 13px
}

.wb-phbar {
  height: 4px;
  border-radius: 3px;
  background: var(--line);
  margin-top: 9px;
  overflow: hidden
}

.wb-phbar i {
  display: block;
  height: 100%;
  background: var(--indigo);
  border-radius: 3px
}

.wb-p90you {
  font-size: var(--fs-footnote);
  line-height: 1.55;
  color: var(--mute);
  margin: -2px 0 12px;
  padding: 9px 12px;
  background: rgba(40, 71, 196, .045);
  border-radius: 9px
}

.wb-p90hint {
  font-size: var(--fs-footnote);
  color: var(--mute);
  line-height: 1.6;
  margin: -4px 0 14px
}

.wb-p90 .pl-card {
  background: transparent
}

@media(max-width:760px) {
  .wb-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none
  }

  .wb-chips::-webkit-scrollbar {
    display: none
  }

  .wb-chip {
    flex-shrink: 0
  }
}

/* B5 side-by-side → stacked: 480px split in two leaves ~240px per column, under the readable
   minimum for both Latin and CJK, so the two sides stack with sticky labels instead. */
.wb-cmp {
  scroll-margin-top: 56px;
  margin-bottom: 6px
}

.wb-cmpl {
  position: sticky;
  top: -18px;
  z-index: 1;
  background: var(--card);
  padding: 9px 0 8px;
  font-size: var(--fs-caption2);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--indigo);
  border-bottom: 1px solid var(--line)
}

.wb-cmp.b .wb-cmpl {
  color: var(--mute)
}

.wb-cmpb {
  font-size: var(--fs-subhead);
  line-height: 1.7;
  color: var(--body);
  padding: 12px 0 4px
}

.wb-cmpsep {
  height: 2px;
  background: var(--ink);
  opacity: .16;
  border-radius: 2px;
  margin: 22px 0 4px
}

/* open state: chat gives up the right side and left-aligns at its 680 measure */
/* 抽屉打开时对话**尽量不动**(PT 2026-07-18):右侧留白够放下抽屉就一寸不移,不够才左移最小必要量,
   且始终保持 740 的量度不变——改量度会让全部文字重排,那才是最刺眼的跳动。--wb-shift 由 wbFit() 实时算。 */
#v-maya.wb-on .mayawrap,
#v-maya.wb-on .pagehead {
  margin-left: var(--wb-shift, auto);
  margin-right: auto
}

.main:has(#v-maya.on.wb-on) {
  padding-right: 0
}

/* ── BUG-F (PT 2026-07-24): Lovable-style two-column canvas for the SITE workbench ──
   When the wide (sitewb) drawer opens, the left nav collapses to an icon rail, the Maya
   conversation compresses to a narrow column hugging the rail, and the workbench takes the
   rest of the width. Only the wide drawer (body class wb-two-col, added in wbOpen), only
   above 820px (below that the wide drawer already goes full-screen). wbFit() steps aside. */
.sidebar {
  transition: width var(--dur) var(--ease-out), padding var(--dur) var(--ease-out)
}

@media(min-width:821px) {
  .appshell.wb-two-col {
    --rail: 58px;
    --mayacol: 420px
  }

  .appshell.wb-two-col .sidebar {
    width: var(--rail);
    padding: 16px 7px;
    overflow: hidden
  }

  .appshell.wb-two-col .sidebar .slogo {
    display: none
  }

  /* the wide lockup can't crop cleanly to a rail — hide it; the Maya avatar anchors the rail */
  .appshell.wb-two-col .snav a,
  .appshell.wb-two-col .snav-add {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    gap: 0
  }

  .appshell.wb-two-col .snav a .navlbl,
  .appshell.wb-two-col .snav a>span:not(.mdot),
  .appshell.wb-two-col .snav-add>span,
  .appshell.wb-two-col .sgroup,
  .appshell.wb-two-col .sgtoggle,
  .appshell.wb-two-col .snav a .nbadge,
  .appshell.wb-two-col .snav a .soonchip {
    display: none
  }

  .appshell.wb-two-col #v-maya.wb-on .mayawrap,
  .appshell.wb-two-col #v-maya.wb-on .pagehead {
    max-width: var(--mayacol);
    margin-left: 0;
    margin-right: auto;
    transition: max-width var(--dur) var(--ease-out)
  }

  .appshell.wb-two-col .main:has(#v-maya.on.wb-on) {
    padding-left: 22px;
    padding-right: 0
  }

  .appshell.wb-two-col .wb.wb-wide {
    width: calc(100vw - var(--rail) - var(--mayacol) - 60px)
  }
}

@media(prefers-reduced-motion:reduce) {

  .appshell.wb-two-col #v-maya.wb-on .mayawrap,
  .appshell.wb-two-col #v-maya.wb-on .pagehead {
    transition: none
  }
}

@media(max-width:760px) {
  .wb {
    width: 100%;
    border-left: none;
    box-shadow: none
  }

  .wb-x {
    display: none
  }

  .wb-back {
    display: inline-flex
  }

  .wb-head {
    padding: 11px 12px
  }

  .main:has(#v-maya.on.wb-on) {
    padding-right: 14px
  }

  #v-maya.wb-on .mayawrap,
  #v-maya.wb-on .pagehead {
    max-width: 100%;
    margin: 0 auto
  }

  .wb-frame {
    height: calc(100vh - 215px)
  }
}

/* ── task23 ②: geometry sweep, applied here at the END on purpose ──
   Every one of these buttons declares its own literal radius (8/9/10/100px, five different values)
   next to its own colours, and those declarations are scattered across 1200 lines. Re-editing each
   one would have been 20 edits to review and 20 places for the next person to miss; one late rule at
   matching specificity is a single source for "what shape is a button here". Only TEXT buttons are
   in the sweep — the square icon buttons (.mc-palbtn / .mc-sendbtn) keep their own shape, which the
   composer already forces to a circle, so a capsule there would be a no-op or a regression.
   The inputs list is the SAME list the focus ring uses, deliberately: whatever counts as a field for
   the focus ring counts as a field for the radius. */
.btn,
.dev button,
.rnew,
.mc-cta,
.pl-go,
.mup-cta,
.mc-onb-go,
.mc-chbtn,
.bstall-a button,
.pw-btn,
.pw-primary,
.ws-btn,
.bp-go,
.bp-skip,
.pl-rev,
.prof-add,
.ws-pub,
.ws-keep,
.maya-launcher {
  border-radius: var(--r-btn)
}

/* a capsule needs its horizontal padding opened up or the label crowds the round ends */
.btn,
.dev button,
.rnew,
.mc-cta,
.mc-onb-go {
  padding-left: 22px;
  padding-right: 22px
}

.dev input,
.addform input,
.addform select,
.mc-onb-field,
.baliases .alin,
.insbar select,
.prof-in,
.bp-in,
.art-topic,
.ws-pin {
  border-radius: var(--r-ctl)
}

/* ── accessibility signals: reduced motion / transparency / contrast ──
   One block for all three signals. Every translucent surface in the product must appear here: a
   glass rule without a fallback is a rule that fails silently on the machines that need it most.
   .mform keeps its own four fallbacks next to its rule; the selector sets do not intersect. */
@media(prefers-reduced-motion:reduce) {

  .wb,
  .wb.on {
    transition: none
  }

  .mc-confetti {
    display: none
  }

  .maya-launcher.mayaback {
    animation: none
  }

  .mc-onb,
  .mc-palette,
  .mc-build-ok {
    animation: none
  }

  .mc-onb {
    opacity: 1;
    transform: none
  }

  .mc-drawer.on {
    animation: none
  }

  .mc-onb.mc-onb-flash {
    animation: none
  }

  .sidebar {
    transition: none
  }

  .bcard,
  .bcard:hover {
    transform: none;
    transition: none
  }

  .soa-toast,
  .soa-toast.on {
    transition: none;
    transform: translateX(-50%)
  }

  .mc-file,
  .mc-file:hover,
  .mc-card {
    transform: none;
    transition: none
  }

  .modal .inner,
  .pw-box,
  .acctmenu {
    animation: none
  }
}

@supports not (backdrop-filter:blur(1px)) {

  .bcard,
  .mc-file,
  .mc-card,
  .rlog {
    background: var(--card)
  }

  .mthink,
  .mc-palette,
  .acctmenu,
  .modal .inner,
  .pw-box {
    background: var(--bg-elevated)
  }

  .undo-toast,
  .soa-toast {
    background: rgba(26, 35, 51, .96)
  }

  /* task23: without a blur the rail and the bar are just washed-out translucent panels over whatever
    scrolls beneath — text on text. They go opaque and take their hairline back. */
  .sidebar {
    background: var(--card);
    border-right: 1px solid var(--line);
    box-shadow: none
  }

  .topbar2 {
    background: var(--card);
    border-bottom: 1px solid var(--line);
    box-shadow: none
  }
}

@media(prefers-reduced-transparency:reduce) {

  .bcard,
  .mc-file,
  .mc-card,
  .rlog {
    background: var(--card);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--line)
  }

  .sidebar {
    background: var(--card);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-right: 1px solid var(--line);
    box-shadow: none
  }

  .topbar2 {
    background: var(--card);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid var(--line);
    box-shadow: none
  }

  .mthink {
    background: var(--card);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 6px 18px -12px rgba(26, 35, 51, .35)
  }

  .mc-palette,
  .acctmenu,
  .modal .inner,
  .pw-box {
    background: var(--bg-elevated);
    -webkit-backdrop-filter: none;
    backdrop-filter: none
  }

  .mc-drawer,
  .modal {
    -webkit-backdrop-filter: none;
    backdrop-filter: none
  }

  .undo-toast,
  .soa-toast {
    background: var(--ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none
  }

  .mc-pk {
    background: var(--card)
  }

  .wb,
  .wb-chips,
  .wb-cmpl,
  .wb-foot {
    background: var(--card)
  }
}

@media(prefers-color-scheme:dark) {

  /* hard-coded white inner highlights would glare on a dark card; and a dark toast must go LIGHTER
    than the page, not darker, or it sinks into it. */
  .bcard,
  .mc-file,
  .mc-card,
  .rlog {
    border-color: var(--card-edge);
    box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, .07)
  }

  .bcard:hover,
  .mc-file:hover {
    box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, .07)
  }

  .undo-toast,
  .soa-toast {
    background: rgba(52, 57, 68, .85)
  }

  /* the three hand-written dark scrollbar rules that used to sit here are gone: their .14/.26 are now
    --ink-track/--ink-track-hover, so the light rules carry dark on their own. This also restores the
    hover step for scrollbar-color (Firefox), which the hand-written block only had for -webkit-. */
  .maya-launcher img {
    border-color: rgba(255, 255, 255, .3)
  }

  /* deliberate light islands: a simulated Google result and the customer's own site preview are
    CONTENT models, not chrome — inverting them would misrepresent what they depict. */
  .pw-serp {
    background: #fff;
    color: #202124
  }

  /* ── task23 hotfix: three surfaces that hard-code a LIGHT fill while their text comes from tokens.
    In dark the text flips to near-white and the fill does not, so each is light-on-light. None of
    them is a deliberate light island like .pw-serp above — they are chrome, they were simply missed
    when the dark scheme landed. Found by an independent pre-ship review, then reproduced. ── */
  .scanov {
    background: rgba(16, 18, 22, .98)
  }

  /* full-screen diagnosis waiting overlay */
  .wbt-slip {
    background: #1F232B;
    border-color: #3D424D
  }

  /* a 90%-white hairline is a specular edge on a light ground and a glare line on a dark one */
  .modal .inner,
  .acctmenu,
  .pw-box,
  .mc-palette {
    border-color: rgba(255, 255, 255, .12)
  }

  /* the wordmark is dark-ink artwork and there is no reversed asset yet; invert it optically so it
    is legible now. Replace with a real reversed asset when one exists — this is a stopgap. */
  .sidebar .slogo img,
  .top .brand img,
  .login-shell .login-logo img {
    filter: invert(1) hue-rotate(180deg) brightness(.92) saturate(2)
  }
}

@media(prefers-contrast:more) {
  :root {
    --mute: #4E5566;
    --body: #2A3348;
    --line: #B9B4A5;
    --separator: rgba(26, 35, 51, .35);
    --faint: rgba(26, 35, 51, .5)
  }

  .bcard,
  .mc-file,
  .mc-card,
  .rlog,
  .mthink,
  .mc-palette,
  .acctmenu,
  .modal .inner,
  .pw-box {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #fff;
    border: 1px solid var(--ink)
  }

  .sidebar {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-right: 1px solid var(--ink);
    box-shadow: none
  }

  .topbar2 {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid var(--ink);
    box-shadow: none
  }

  .undo-toast,
  .soa-toast {
    background: var(--ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid #fff
  }
}

/* the high-contrast values above are light-scheme values; on a dark ground they would LOWER
   contrast, so the dark+contrast combination needs its own leg. */
@media(prefers-contrast:more) and (prefers-color-scheme:dark) {
  :root {
    --mute: #C4C9D6;
    --body: #E4E7EF;
    --line: #6B7180;
    --separator: rgba(235, 235, 245, .35);
    --faint: rgba(235, 235, 245, .5)
  }

  .bcard,
  .mc-file,
  .mc-card,
  .rlog,
  .mthink,
  .mc-palette,
  .acctmenu,
  .modal .inner,
  .pw-box {
    background: #000;
    border: 1px solid var(--ink)
  }

  .sidebar {
    background: #000;
    border-right: 1px solid var(--ink)
  }

  .topbar2 {
    background: #000;
    border-bottom: 1px solid var(--ink)
  }

  .undo-toast,
  .soa-toast {
    background: #000;
    border: 1px solid #fff
  }
}