:root {
  /* neutral near-black (Higgsfield) — the old set leaned blue; these are clean greys */
  --bg: #0a0a0b;
  --bg-2: #101011;
  --surface: #151516;
  --surface-1: #15160f;       /* faint lime-tinted surface for glow/ghost tiles — was referenced (.ghost-card.glow, .fp-tabs) but never defined, so the fallback hard-coded a dark value that broke in light mode */
  --surface-2: #1b1b1d;
  --border: #242429;          /* softer hairlines (Higgsfield-style subtle edges, not harsh lines) */
  --border-2: #34343b;
  --text: #f5f5f6;
  --muted: #9d9da3;
  --faint: #8a8a92;          /* bumped from #6e6e75 — the old value failed WCAG AA (~3.4:1) for the body/hint/fine-print copy that uses it */
  --accent: #D85C42;          /* Coral — Hermoso "Full Bloom" primary (was gold) */
  --accent-2: #C0392B;        /* deeper coral */
  --accent-ink: #FAF7F2;       /* cream text on coral */
  --accent-text: #E07A5F;      /* coral as TEXT on dark — overridden darker in light mode */
  --accent-glow: rgba(216, 92, 66, 0.35);
  --good: #4ade80;
  --warn: #fbbf24;
  --danger: #fb6a8a;
  --danger-ink: var(--danger); /* danger used as TEXT/outline (ghost-danger buttons): pink reads fine on dark; light mode overrides to a true crimson for AA */
  --radius: 14px;
  --radius-sm: 10px;
  --font-display: 'Newsreader', ui-serif, Georgia, 'Times New Roman', serif; /* warm editorial serif (replaces the spindly Cormorant) — display, headings, wordmark, hero numeral */
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* neutral system sans (Higgsfield's move) — UI chrome recedes; replaces Space Grotesk */
  --font-prose: 'Source Serif 4', Georgia, 'Times New Roman', serif; /* long-form assistant prose (kept) */
  --font-num: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* aligned data columns — pair with font-variant-numeric: tabular-nums */
  /* ── Full-app audit shared tokens (Claude Design) — radius/elevation/focus/meta/motion ── */
  --r-chip: 10px; --r-tile: 9px; --r-card: 14px; --r-modal: 18px; --r-pill: 999px;
  --el-card: 0 1px 2px rgba(0,0,0,0.28);                 /* dark-tuned card lift */
  --el-raised: 0 8px 24px rgba(0,0,0,0.42);
  --el-glow: 0 6px 16px rgba(216,92,66,0.32);            /* coral primary glow */
  --focus-ring: 0 0 0 3px rgba(216,92,66,0.30);
  --meta: #8a8a92;                                        /* faint meta (dark) */
  --hairline: rgba(255,255,255,0.07);                    /* hairline divider (dark) */
  --chip-border: var(--border);                          /* quiet chip border */
  --tap: #1b1b1d;                                         /* ghost-hover wash (dark) */
  --t-micro: 160ms ease-out;
  --t-panel: 240ms cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  min-height: 100vh; position: relative; overflow-x: hidden;
}
/* ambient cinematic glow + signature fine dot-grid (Higgsfield-style depth/atmosphere) */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(rgba(255, 255, 255, 0.028) 1.1px, transparent 1.6px) 0 0 / 22px 22px,
    radial-gradient(78% 52% at 50% 0%, rgba(216, 92, 66, 0.10), transparent 60%),
    radial-gradient(52% 52% at 6% 2%, rgba(124, 108, 255, 0.08), transparent 60%),
    radial-gradient(72% 60% at 50% 116%, rgba(255, 110, 80, 0.06), transparent 60%);
}
/* fine film grain */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* LIGHT MODE: white dots + glow vanish on a light bg → use dark dots + a soft lime top-glow so the texture/atmosphere still reads */
body.light::before {
  background:
    radial-gradient(rgba(15, 22, 3, 0.06) 1.4px, transparent 1.9px) 0 0 / 21px 21px,
    radial-gradient(78% 52% at 50% 0%, rgba(200, 90, 66, 0.10), transparent 60%),
    radial-gradient(72% 60% at 50% 116%, rgba(255, 120, 80, 0.05), transparent 60%);
}
body.light::after { opacity: 0.02; }
button { font: inherit; cursor: pointer; color: inherit; }
input, select { font: inherit; }
a { color: var(--accent-text); text-decoration: none; }
hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
::selection { background: var(--accent); color: var(--accent-ink); }

h1, h3, h4 { font-family: var(--font-display); }
/* Typographic polish — even out multi-line display headings (kills the lonely last-line
   word) and prevent orphans/rivers in prose. Progressive enhancement: silently ignored
   where text-wrap is unsupported, and it only moves line breaks — never affects sizing. */
h1, h2, h3, h4,
.cc-greet, .cosmos-h, .cosmos-reveal .cr-name, .cosmos-about .ca-h,
.ex-cta-h, .onb-plans-h, .authgate-h, .ic-title, .swipe-empty-cta h3,
.plan-name, .sc-pname { text-wrap: balance; }
p, .hint, .cc-msg, .assistant, .lib-concept, .gen-modelnote, .lead { text-wrap: pretty; }
h3 { margin: 0 0 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
h4 { margin: 18px 0 8px; font-size: 12px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.14em; font-family: var(--font-body); font-weight: 600; }
.hint { color: var(--faint); font-size: 12.5px; margin: 6px 0 0; }
.hint code, .loading-block code { background: var(--surface-2); padding: 2px 6px; border-radius: 5px; color: var(--accent-text); font-size: 0.92em; }
.hidden { display: none !important; }

/* header */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 28px; position: sticky; top: 0; z-index: 50;
  background: rgba(8, 8, 10, 0.72); backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.logo { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 11px; box-shadow: 0 0 26px var(--accent-glow); }
.credits { display: flex; align-items: center; gap: 10px; }
.pill { background: var(--surface); border: 1px solid var(--border); padding: 7px 13px; border-radius: 999px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pill b { color: var(--text); font-weight: 700; }
button.ghost { background: transparent; border: 1px solid var(--border-2); color: var(--muted); padding: 7px 14px; border-radius: var(--radius-sm); font-size: 12px; transition: .18s; } /* one radius across ghost/primary/mini — pill-vs-rect pairs read as inconsistent */
button.ghost:hover { color: var(--text); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* nav */
.tabs { display: flex; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--border); }
.tab { background: transparent; border: 0; color: var(--muted); padding: 15px 16px; font-size: 13.5px; font-weight: 500; position: relative; transition: color .18s; letter-spacing: -0.005em; }
.tab::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; transform: scaleX(0); transition: transform .22s cubic-bezier(.2,.7,.2,1); box-shadow: 0 0 12px var(--accent-glow); }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); }
.tab.active::after { transform: scaleX(1); }
.tag-count { font-size: 11px; color: var(--meta); font-variant-numeric: tabular-nums; margin-left: 1px; } /* audit: counts go muted, not coral — coral is rationed to active states */

.tab-panel { display: none; padding: 14px 24px 90px; max-width: 1320px; margin: 0 auto; }
.tab-panel.active { display: block; animation: rise .32s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* hero (Inspire) */
.hero { padding: 46px 0 30px; max-width: 780px; }
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 1.0; font-weight: 800; letter-spacing: -0.035em; margin: 0 0 18px; }
.hero h1 em { font-style: italic; color: var(--accent-text); text-shadow: 0 0 44px var(--accent-glow); }
.hero-sub { color: var(--muted); font-size: 16px; line-height: 1.5; margin: 0 0 26px; max-width: 580px; }
.hero-search { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-search input { flex: 1 1 320px; min-width: 240px; background: var(--surface); border: 1px solid var(--border-2); color: var(--text); border-radius: 12px; padding: 15px 18px; font-size: 16px; outline: none; transition: .2s; }
.hero-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 13%, transparent); }
.hero-search input::placeholder { color: var(--faint); }
.hero-search .primary { padding: 0 26px; font-size: 15px; }
.mode-toggle { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; margin-bottom: 18px; }
.mode-pill { background: transparent; border: 0; color: var(--muted); padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; transition: .16s; }
.mode-pill:hover { color: var(--text); }
.mode-pill.active { background: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 12px -4px var(--accent-glow); }

/* cards / surfaces */
.card { background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 28px -22px rgba(0,0,0,0.8); }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 0 0 auto; }
.row > input { flex: 1 1 200px; min-width: 200px; }
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 7px; font-weight: 500; }
.form { margin-top: 18px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }

input[type=text], input:not([type]), select {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 10px 12px; outline: none; transition: .16s;
}
input::placeholder { color: var(--faint); }
input[type=text]:hover, input:not([type]):hover, select:hover { border-color: var(--border-2); }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 13%, transparent); }
select[multiple] { padding: 5px; }
select[multiple] option { padding: 6px 9px; border-radius: 6px; }

button.primary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 90%, #fff), var(--accent)); color: var(--accent-ink); border: 0; padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 700; letter-spacing: -0.01em; transition: .18s; box-shadow: 0 6px 24px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.35); }
/* hover stays a GRADIENT (not a solid) and keeps BOTH shadow layers (incl. the inset highlight) so background +
   box-shadow interpolate smoothly — a gradient→solid or 2-layer→1-layer shadow change snaps mid-transition (a "flash") */
button.primary:hover { background: linear-gradient(180deg, color-mix(in oklab, var(--accent-2) 88%, #fff), var(--accent-2)); transform: translateY(-1px); box-shadow: 0 12px 32px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.35); }
button.primary:active { transform: translateY(0); }
button.primary:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
/* Send button flips to a Stop control while a chat turn streams (#254) — neutral/dark, no coral pull, with a subtle pulse */
button.primary.is-stop { background: linear-gradient(180deg, #33373d, #24272c); color: #f4f5f7; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); animation: stopPulse 1.6s ease-in-out infinite; }
button.primary.is-stop:hover { background: linear-gradient(180deg, #3c4046, #2a2d33); transform: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
@keyframes stopPulse { 0%,100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); } 50% { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28); } }
button.seg { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); padding: 9px 16px; border-radius: 999px; transition: .16s; }
button.seg:hover { color: var(--text); border-color: var(--border-2); }
button.seg.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; box-shadow: 0 2px 12px -4px var(--accent-glow); }
button.mini { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 6px 11px; border-radius: var(--radius-sm); font-size: 12px; transition: .16s; }
button.mini:hover { border-color: var(--accent); color: var(--accent-text); }
.chk { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-size: 13px; margin: 0; }
.chk input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }
.chk select { width: auto; padding: 6px 10px; }
.chk small { color: var(--faint); }

/* suggested competitor chips */
.suggested { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.sg-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 13px; max-width: 320px; display: flex; flex-direction: column; gap: 5px; transition: .18s; box-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.sg-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.sg-card a { color: var(--accent-text); font-size: 12px; word-break: break-all; }
.sg-card .title { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 7px; font-family: var(--font-display); }
.sg-card .desc { color: var(--muted); font-size: 12.5px; }
.sg-card .actions { display: flex; gap: 6px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.sg-card.seed { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 26px -10px var(--accent-glow); }
.seed-tag { background: rgba(216, 92, 66, 0.14); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }

#queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: 8px; }
.q-item { display: flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--border); padding: 9px 12px; border-radius: 11px; transition: border-color .16s; }
.q-item:hover { border-color: var(--border-2); }
.q-item.seed { border-color: color-mix(in oklab, var(--accent) 32%, var(--border)); background: color-mix(in oklab, var(--accent) 5%, var(--surface)); }
.q-fav { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; object-fit: cover; background: var(--bg-2); }
.q-fav-ph { display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--accent-text); border: 1px solid var(--border); }
.q-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.q-name { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.q-dom { color: var(--muted); font-size: 12px; text-decoration: none; }
a.q-dom:hover { color: var(--accent-text); }
.q-resolving { color: var(--faint); font-style: italic; }
.q-nodom { color: var(--faint); }
.q-nodom a { color: var(--accent-text); }
.q-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; font-weight: 600; }
.q-tag-seed { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.q-rm { background: transparent; border: 0; color: var(--faint); font-size: 18px; line-height: 1; padding: 2px 6px; cursor: pointer; transition: color .15s; flex: 0 0 auto; }
.q-rm:hover { color: var(--danger); }

/* results grid */
.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 360px)); gap: 16px; align-items: start; justify-content: start; }
.results .section-head { grid-column: 1 / -1; margin: 28px 0 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.results .section-head h3 { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.platform-tag { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-weight: 500; }
/* Panel-heading descriptor pill: whenever a .platform-tag is a DIRECT child of an h3 (the Workspace/Settings panel
   headings — Brand, Memory, Skills, Employees, Connectors, Playbooks, Margins…), lay the heading out as a
   baseline-aligned flex row so the pill sits on the serif title's baseline with a consistent ~11px gap. Was a bare
   space character: cramped and vertically off. The .section-head/.wp-head/.brand-card-head layouts keep the pill as
   an h3 SIBLING (or carry their own higher-specificity h3 rule), so they're untouched. One shared fix, no per-panel hacks. */
h3:has(> .platform-tag) { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 11px; }

/* ad card */
.ad { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: visible; position: relative; display: flex; flex-direction: column; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.ad .media { border-radius: var(--radius) var(--radius) 0 0; } /* keep top corners rounded now the card no longer clips — lets action tooltips escape instead of getting cut off */
.ad:hover, .ad:focus-within { z-index: 6; }
.ad:hover { transform: translateY(-3px); border-color: var(--border-2); box-shadow: 0 20px 44px -24px rgba(0, 0, 0, 0.95); }
.ad .media { background: #000; min-height: 120px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; transform: translateZ(0); } /* own layer keeps the rounded corners from flickering square while the parent card animates on hover */
.ad .media img, .ad .media video { width: 100%; height: auto; max-height: 600px; object-fit: contain; display: block; border-radius: var(--radius) var(--radius) 0 0; } /* radius on the media ITSELF: the parent's rounded clip flickers square while the card's hover transform animates (Chrome compositing), and bare <video> corners stayed square */
.ad .media .carousel-frame { width: 100%; display: flex; align-items: center; justify-content: center; }
.ad .media .ph { color: var(--faint); font-size: 12.5px; padding: 28px; text-align: center; }
.ad .media.media-empty::after { content: 'no preview'; color: var(--faint); font-size: 12px; }
/* Google video ads: the API gives no video file/thumbnail — offer a "watch on Google" link instead */
.ad .media .g-vlink { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 150px; width: 100%; color: var(--muted); font-size: 12.5px; text-decoration: none; padding: 24px 18px; text-align: center; }
.ad .media .g-vlink:hover { color: var(--accent-text); }
.ad .media .g-vplay { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid var(--border-2); font-size: 15px; color: #fff; transition: .15s; }
.ad .media .g-vlink:hover .g-vplay { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* type-chip (Claude Design): blurred dark + cream glyph, top-left of the thumbnail */
.ad .vbadge { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; background: rgba(27, 26, 24, 0.42); color: #FAF7F2; font-size: 9.5px; padding: 3px 7px 3px 6px; border-radius: 7px; letter-spacing: .09em; font-weight: 700; backdrop-filter: blur(5px); }
.ad .vbadge::before { content: ''; width: 9px; height: 9px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ad .cbadge { position: absolute; bottom: 8px; left: 8px; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 10px; padding: 3px 8px; border-radius: 999px; letter-spacing: .04em; font-variant-numeric: tabular-nums; backdrop-filter: blur(4px); white-space: nowrap; }
.ad .cnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .18s, background .15s, color .15s; backdrop-filter: blur(4px); padding-bottom: 2px; }
.ad:hover .cnav { opacity: .9; }
.ad .cnav:hover { background: var(--accent); color: var(--accent-ink); opacity: 1; border-color: var(--accent); }
.ad .cnav.prev { left: 8px; }
.ad .cnav.next { right: 8px; }
.ad .body { padding: 14px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.ad .who { display: flex; align-items: center; gap: 9px; }
.ad .who img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.ad .who .nm { font-weight: 600; font-size: 13px; line-height: 1.3; }
.ad .who .nm small { color: var(--faint); font-weight: 400; font-size: 11px; }
.ad .txt { color: var(--text); font-size: 13px; white-space: pre-wrap; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; opacity: .92; }
.ad .cta { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding-top: 10px; border-top: 1px solid var(--border); margin-top: auto; }
.ad .cta .ctaText { background: rgba(216, 92, 66, 0.12); padding: 4px 9px; border-radius: 6px; font-size: 11px; color: var(--accent-text); font-weight: 600; }
.ad .meta { font-size: 11px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.ad .meta .badge { background: var(--surface-2); padding: 3px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.ad .open { color: var(--accent-text); font-size: 12px; font-weight: 600; }
.ad .open:hover { text-decoration: underline; }
.ad.error { color: var(--danger); padding: 14px; font-size: 13px; }
.move-sel { width: auto; padding: 3px 7px; font-size: 11px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); border-radius: 6px; }

/* fav (heart) button */
.fav-btn { position: absolute; top: 8px; right: 8px; z-index: 4; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; opacity: .85; transition: transform .12s, background .16s, opacity .16s; backdrop-filter: blur(4px); }
.fav-btn:hover { opacity: 1; transform: scale(1.12); }
.fav-btn.saved { background: var(--danger); border-color: var(--danger); color: #fff; opacity: 1; box-shadow: 0 0 16px -2px rgba(251, 106, 138, 0.6); }

/* swipefile collections */
.coll-chip { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 500; transition: .16s; }
.coll-chip:hover { border-color: var(--border-2); }
.coll-chip.active { border-color: var(--accent); background: rgba(216, 92, 66, 0.10); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }

/* load more / show more */
.results .load-more { grid-column: 1 / -1; justify-self: center; margin: 12px 0 22px; padding: 11px 28px; border-radius: 999px; font-weight: 600; }

/* usage table */
.usage { width: 100%; border-collapse: collapse; }
.usage th, .usage td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; }
.usage th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.usage td.cost { font-variant-numeric: tabular-nums; color: var(--accent-text); font-weight: 600; }

/* misc */
.spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid var(--border-2); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -3px; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-block { padding: 22px; text-align: center; color: var(--muted); grid-column: 1 / -1; font-size: 13px; }
/* empty-state CTA (swipefile / library) — guides users to where they FIND ads to save */
.swipe-empty-cta { grid-column: 1 / -1; text-align: center; max-width: 480px; margin: 44px auto; display: flex; flex-direction: column; align-items: center; }
.swipe-empty-cta .sec-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; background: color-mix(in oklab, var(--accent) 13%, var(--surface)); color: var(--accent-text); font-size: 22px; margin-bottom: 14px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent); }
.swipe-empty-cta h3 { margin: 0 0 7px; font-size: 17px; font-family: var(--font-display); }
.swipe-empty-cta p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.swipe-empty-cta a { color: var(--accent-text); font-weight: 600; }
.swipe-empty-acts { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }

/* Solid ink pill — the old var(--surface-2) washed out against the light theme (Dave: "hard to read with no
   background color"); a snackbar must carry its own contrast wherever it lands. */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: #2A241D; color: #FAF8F3; border: 1px solid rgba(255,255,255,.08); padding: 12px 18px; border-radius: 12px; opacity: 0; transition: all .25s cubic-bezier(.2,.7,.2,1); pointer-events: none; z-index: 100; font-size: 13px; font-weight: 500; box-shadow: 0 12px 40px -8px rgba(20, 15, 10, 0.55); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { color: #FFB4AB; border-color: rgba(255, 180, 171, .35); }
.toast.err.show { pointer-events: auto; } /* err toasts are tap-to-dismiss — the base pointer-events:none made them untappable (stuck-forever toast on mobile) */
.toast.ok { color: #D9E7B6; border-color: rgba(217, 231, 182, .35); }
/* #250 off-session failure banner — top-center, dismissible, danger-tinted (clears the sticky topbar; distinct from the bottom toast) */
.away-banner { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 120; display: inline-flex; align-items: center; gap: 12px;
  max-width: min(92vw, 620px); background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--danger); color: var(--text); padding: 10px 12px 10px 14px;
  border-radius: 12px; font-size: 13px; font-weight: 500; box-shadow: 0 20px 50px -20px rgba(0,0,0,0.55); animation: awayIn .28s cubic-bezier(.2,.7,.2,1); }
.away-banner.leaving { opacity: 0; transform: translateX(-50%) translateY(-10px); transition: opacity .3s, transform .3s; }
.away-banner[data-go] { cursor: pointer; }
@keyframes awayIn { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.away-banner-msg { color: var(--text); } /* body ink, not danger-pink — the red edge carries the severity (Dave: hard to read) */
.away-banner-act { background: var(--accent); color: var(--accent-ink); border: none; border-radius: 8px; padding: 5px 11px; font-size: 12px; font-weight: 700; cursor: pointer; transition: filter .15s; }
.away-banner-act:hover { filter: brightness(1.08); }
.away-banner-x { background: none; border: none; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; padding: 2px 4px; transition: color .15s; }
.away-banner-x:hover { color: var(--text); }
/* dunning (payment-failed) banner — same chrome as away-banner; sits just below it if both are up */
.dunning-banner { top: 70px; }
.away-banner + .dunning-banner, .dunning-banner ~ #awayBanner { top: 118px; }
/* red dot on the Billing nav item + the Billing-tab notice card */
.nav-dot { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--danger); vertical-align: middle; flex: 0 0 auto; box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 22%, transparent); }
.nav-dot[hidden] { display: none; }
.bill-issue-card { border: 1px solid var(--danger); margin-bottom: 14px; }
.bill-issue-h { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; color: var(--danger); margin-bottom: 6px; }
.bill-issue-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex: 0 0 auto; box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 22%, transparent); }
.bill-issue-p { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; line-height: 1.55; max-width: 60ch; }
/* scheduled cancel/downgrade notice — a deferred plan change is informational (amber), not an error */
.bill-pend-card { border: 1px solid color-mix(in oklab, var(--warn) 55%, var(--border-2)); margin-bottom: 14px; }
.bill-pend-h { font-weight: 700; font-size: 15px; color: var(--warn); margin-bottom: 6px; }
.bill-pend-p { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; line-height: 1.55; max-width: 62ch; }
.plan-badge.plan-badge-pend { background: color-mix(in oklab, var(--warn) 24%, var(--surface-2)); color: var(--warn); border: 1px solid color-mix(in oklab, var(--warn) 45%, transparent); }
/* render-queue chip — a quiet persistent badge while renders wait in line (bottom-right, clear of the centered toast) */
.render-queue-chip { position: fixed; bottom: 24px; right: 24px; z-index: 99; display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); padding: 9px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: -0.01em; box-shadow: 0 16px 40px -18px rgba(0,0,0,0.8); }
.render-queue-chip .rq-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: rqPulse 1.6s ease-out infinite; }
@keyframes rqPulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* explore chat */
#tab-explore { padding-bottom: 16px; }
/* Muse composer — one cohesive rounded box (modern LLM): input on top, actions row beneath */
.chat-input-row { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 18px; padding: 12px 14px 10px; transition: border-color .15s, box-shadow .15s; box-shadow: 0 12px 34px -22px rgba(0,0,0,.7); }
.chat-input-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 13%, transparent); }
.chat-msg, .chat-results { scroll-margin-top: 86px; }
.chat-input-row input { width: 100%; background: none; border: 0; color: var(--text); padding: 6px 6px 2px; font-size: 15px; outline: none; }
.chat-input-row input::placeholder { color: var(--faint); }
.chat-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.chat-input-row .primary { padding: 0 22px; height: 40px; border-radius: 12px; }
#chatLog { max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.chat-msg { max-width: 740px; padding: 12px 16px; border-radius: 14px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.chat-msg.user { align-self: flex-end; background: var(--surface-2); color: var(--text); border: 1px solid var(--border-2); font-weight: 500; border-bottom-right-radius: 5px; }
.chat-msg.assistant { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: 5px; }
.chat-results { margin: 2px 0 8px; }

/* raw JSON viewer (Manual > More platforms) */
.json-view { grid-column: 1 / -1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-break: break-word; max-height: 72vh; overflow: auto; margin-top: 4px; }

/* ===== Manual ▸ More platforms — rendered cards ===== */
.req { color: var(--accent-text); }

.sc-profile { grid-column: 1 / -1; display: flex; gap: 16px; align-items: center; background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin: 6px 0 4px; }
.sc-ava { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--border-2); background: var(--surface-2); }
.sc-ava.ph { display: grid; place-items: center; color: var(--faint); font-weight: 700; font-size: 26px; font-family: var(--font-display); }
.sc-pmeta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; } /* flex column → no phantom whitespace gaps between rows; card hugs its content */
.sc-pname { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; }
.sc-verif { color: var(--accent-ink); background: var(--accent); width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 900; }
.sc-phandle { color: var(--muted); font-size: 14px; margin-top: 2px; }
.sc-pbio { color: var(--text); font-size: 14px; line-height: 1.55; margin: 12px 0 0; max-width: 640px; opacity: .92; }
.sc-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sc-stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--muted); }
.sc-stat b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 3px; }
.sc-plink { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--accent-text); }
/* bio links rendered as buttons inside the profile card (Instagram link-in-bio) */
.sc-biolinks { margin-top: 12px; }
.sc-biolinks-h { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: 8px; font-weight: 700; }
.sc-biolinks-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-biolink { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; color: var(--text); transition: .15s; }
a.sc-biolink:hover { border-color: var(--accent); color: var(--accent-text); }
.sc-biolink svg { opacity: .7; flex: 0 0 auto; }

.sc-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 6px 0; }
.sc-item { display: flex; flex-direction: column; background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; transition: .18s; color: var(--text); }
/* image-less item (link-in-bio etc.) → compact link card, no giant empty 1:1 thumb */
.sc-item-noimg { align-self: start; }
.sc-item-noimg .sc-ibody { padding: 13px 15px; flex-direction: row; align-items: center; gap: 9px; }
.sc-item-noimg .sc-ibody::before { content: ''; flex: 0 0 auto; width: 16px; height: 16px; background: currentColor; opacity: .55; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 15l6-6'/%3E%3Cpath d='M11 7l1-1a3.5 3.5 0 0 1 5 5l-1 1'/%3E%3Cpath d='M13 17l-1 1a3.5 3.5 0 0 1-5-5l1-1'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 15l6-6'/%3E%3Cpath d='M11 7l1-1a3.5 3.5 0 0 1 5 5l-1 1'/%3E%3Cpath d='M13 17l-1 1a3.5 3.5 0 0 1-5-5l1-1'/%3E%3C/svg%3E") center/contain no-repeat; }
.sc-item-noimg .sc-icap { -webkit-line-clamp: 2; font-weight: 600; opacity: 1; }
/* RETROACTIVE: collapse any image-less thumb (a .ph placeholder = no image loaded) so OLD cached research renders
   stop showing giant empty boxes too — :has() applies to the frozen HTML on reload, no re-fetch needed */
.sc-thumb:has(.ph) { aspect-ratio: auto; min-height: 0; background: transparent; }
.sc-thumb .ph { display: none; } /* the body caption already shows the title — drop the redundant in-thumb copy */
.sc-item:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -18px rgba(0,0,0,.8); }
a.sc-item:hover { border-color: var(--accent); }
.sc-thumb { aspect-ratio: 1 / 1; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.sc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-thumb .ph { color: var(--faint); font-size: 12px; padding: 16px; text-align: center; line-height: 1.4; }
.sc-ibody { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 6px; }
.sc-iauthor { font-size: 12px; font-weight: 600; color: var(--accent-text); }
.sc-icap { font-size: 13px; line-height: 1.45; margin: 0; color: var(--text); opacity: .92; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sc-istats { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 2px; }

.sc-kv { grid-column: 1 / -1; background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 20px; margin: 6px 0; }
.sc-kvrow { display: flex; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.sc-kvrow:last-child { border-bottom: 0; }
.sc-kvk { flex: 0 0 200px; color: var(--muted); font-weight: 500; word-break: break-word; }
.sc-kvv { flex: 1; min-width: 0; color: var(--text); word-break: break-word; }
.sc-kvimg { max-width: 120px; max-height: 120px; border-radius: 8px; border: 1px solid var(--border-2); }

.sc-raw { grid-column: 1 / -1; margin-top: 6px; }
.sc-raw summary { cursor: pointer; color: var(--muted); font-size: 12px; padding: 6px 0; list-style: none; user-select: none; }
.sc-raw summary::-webkit-details-marker { display: none; }
.sc-raw summary::before { content: '▸ '; color: var(--faint); }
.sc-raw[open] summary::before { content: '▾ '; }
.sc-raw summary:hover { color: var(--accent-text); }

/* Explore starter suggestion chips */
.chat-suggest { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.suggest-chip { background: var(--surface); border: 1px solid var(--chip-border); color: var(--text); padding: 9px 15px; border-radius: 8px; font-size: 13px; font-weight: 500; transition: .16s; } /* audit: quiet squared chip, not a pill */
.suggest-chip:hover { border-color: var(--accent); color: var(--accent-text); transform: translateY(-1px); box-shadow: 0 8px 22px -12px var(--accent-glow); }

/* ===================== design polish pass ===================== */
/* card action cluster (Copy · Save) — always visible, brighter on hover */
.ad-actions { position: absolute; top: 8px; right: 8px; z-index: 4; display: flex; gap: 6px; opacity: .82; transition: opacity .16s; }
.ad:hover .ad-actions { opacity: 1; }
.act-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16); background: rgba(8,8,10,0.6); color: #fff; font-size: 14px; display: grid; place-items: center; cursor: pointer; transition: transform .12s, background .16s, color .16s, border-color .16s; backdrop-filter: blur(6px); }
/* shared centered "×" close/remove icon — a real SVG (the × text glyph sits optically high in the font box). Sizes to the
   button's font-size; any button holding one centers it perfectly, fixing the off-center close glyph across every icon button. */
.x-ic { width: 1em; height: 1em; display: block; }
button:has(> .x-ic), a[role="button"]:has(> .x-ic) { display: grid; place-items: center; line-height: 0; }
.act-btn:hover { transform: scale(1.12); background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.act-btn.fav.saved { background: var(--danger); border-color: var(--danger); color: #fff; opacity: 1; box-shadow: 0 0 16px -2px rgba(251,106,138,0.6); }
.act-btn.fav.saved:hover { background: var(--danger); color: #fff; transform: scale(1.12); }
.act-btn.done { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* outline heart (replaced the ♥ emoji) fills when saved. inline-block so icon + label sit on ONE line in labeled buttons (the round icon-only .act-btn still centers it via its grid place-items) */
.ic-heart { fill: none; display: inline-block; vertical-align: -2px; }
.act-btn.fav.saved .ic-heart, button.saved .ic-heart, .gen-mi.saved .ic-heart, .mini.saved .ic-heart { fill: currentColor; }
.dl-ic { display: inline-block; vertical-align: -2px; }
@media (hover: none) { .ad-actions { opacity: 1; transform: none; } }

/* subtle media zoom on hover */
.ad .media img { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.ad:hover .media img { transform: scale(1.035); }

/* skeleton loaders */
.skel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.skel-media { aspect-ratio: 4 / 5; width: 100%; }
.skel-txt { padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.skel-txt span { height: 11px; border-radius: 5px; display: block; }
.skel-txt span.w60 { width: 60%; }
.skel-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; padding: 2px 2px 8px; }
/* gentle gleam sweep over the surface — a soft translucent highlight reads well on BOTH themes (the old hardcoded
   #21212b was a harsh near-black band sweeping across light-mode tiles), and slower so it isn't jittery to watch */
.shimmer { background-color: var(--surface-2); background-image: linear-gradient(100deg, transparent 32%, rgba(255,255,255,.35) 50%, transparent 68%); background-size: 220% 100%; background-repeat: no-repeat; animation: shimmer 2.3s infinite linear; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* quick-start chips on the Inspire hero */
.quick-starts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.qs-label { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .16em; font-weight: 600; }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--border-2) 70%, transparent); border-radius: 999px; border: 2px solid var(--bg); transition: background .15s; }
::-webkit-scrollbar-thumb:hover { background: var(--border-2); }

/* focus rings — visible for keyboard, quiet for mouse */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible), input:focus:not(:focus-visible), select:focus:not(:focus-visible) { outline: none; }

/* friendly param fields (Manual ▸ More platforms cascade) */
.field-help { display: block; color: var(--faint); font-size: 11px; font-weight: 400; margin-top: 6px; line-height: 1.45; }
.bool-field { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; color: var(--text); font-size: 13px; font-weight: 500; }
.bool-field input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; }
.bool-field .field-help { flex-basis: 100%; margin-top: 2px; }
.adv-params { grid-column: 1 / -1; margin-top: 2px; }
.adv-params summary { cursor: pointer; color: var(--muted); font-size: 12px; padding: 6px 0; list-style: none; user-select: none; }
.adv-params summary::-webkit-details-marker { display: none; }
.adv-params summary::before { content: '▸ '; color: var(--faint); }
.adv-params[open] summary::before { content: '▾ '; }
.adv-params summary:hover { color: var(--accent-text); }
.adv-params .grid2 { margin-top: 10px; }

/* Ad Search intent cards (Competitor ads · A specific company · Best ads to copy) */
.intent-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0 24px; max-width: 760px; }
.intent-card { position: relative; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px; display: flex; flex-direction: column; gap: 6px; transition: transform .16s, border-color .16s, background .16s, box-shadow .16s; cursor: pointer; }
.intent-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.ic-ico { color: var(--meta); margin-bottom: 2px; display: block; line-height: 0; }
.intent-card.active { border: 1.5px solid var(--accent); background: color-mix(in oklab, var(--accent) 6%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 12%, transparent), 0 14px 32px -22px var(--accent-glow); }
.intent-card.active .ic-ico { color: var(--accent-text); }
/* coral check top-right on the selected card */
.intent-card.active::after { content: ''; position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4 10-10'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4 10-10'/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--text); }
.intent-card.active .ic-title { color: var(--accent-text); }
.ic-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }
.search-label { display: block; font-size: 12px; color: var(--muted); margin: 0 0 8px; font-weight: 600; }
@media (max-width: 680px) { .intent-cards { grid-template-columns: 1fr; } }

/* "+ Add" brand button in the Brands-to-search row (was unstyled = white-on-white) */
.add-btn { flex: 0 0 auto; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); padding: 10px 22px; border-radius: var(--radius-sm); font-weight: 600; transition: .16s; }
.add-btn:hover { border-color: var(--accent); color: var(--accent-text); background: var(--surface); }

/* Heist keyhole logo mark */
.logo svg { width: 17px; height: 17px; display: block; }

/* Swipefile toolbar — collections (left) vs actions for the selected one (right) */
.swipe-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px 20px; flex-wrap: wrap; margin-top: 16px; }
.coll-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.coll-actions { display: flex; align-items: center; gap: 8px; }
.coll-actions-label { color: var(--faint); font-size: 12px; margin-right: 2px; }
.coll-add { background: transparent; border: 1px dashed var(--border-2); color: var(--muted); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; transition: .16s; }
.coll-add:hover { border-color: var(--accent); color: var(--accent-text); border-style: solid; }

/* ad card — separate THE AD (copy + CTA) from METADATA (where/when it ran) */
.ad .ad-content { display: flex; flex-direction: column; gap: 9px; }
.ad .ad-cta { display: flex; }
.ad .ad-cta .ctaText { display: inline-flex; align-items: center; background: rgba(216, 92, 66, 0.12); border: 1px solid rgba(216, 92, 66, 0.28); padding: 6px 12px; border-radius: 8px; font-size: 12px; color: var(--accent-text); font-weight: 600; }
.ad .ad-cta a.cta-link { text-decoration: none; cursor: pointer; transition: .15s; }
.ad .ad-cta a.cta-link:hover { background: rgba(216, 92, 66, 0.22); border-color: var(--accent); }
.ad .ad-meta { margin-top: auto; border-top: 1px solid var(--border); padding-top: 11px; display: flex; flex-direction: column; gap: 5px; }
.ad .meta-row { display: flex; gap: 10px; align-items: baseline; font-size: 12px; line-height: 1.4; }
.ad .meta-k { flex: 0 0 60px; color: var(--faint); text-transform: uppercase; font-size: 9px; letter-spacing: .08em; font-weight: 700; }
.ad .meta-v { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 0; word-break: break-word; }
.ad .meta-foot { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.ad .meta-foot .open { font-size: 12px; font-weight: 600; }
.ad .meta-foot .move-sel { margin-left: auto; }

/* ===================== brand profile ===================== */
.brand-chip { cursor: pointer; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: .16s; }
.brand-chip:not(.set) { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; box-shadow: 0 0 20px -7px var(--accent-glow); }
.brand-chip:not(.set):hover { background: var(--accent-2); }
.brand-chip.set { color: var(--text); }
.brand-chip.set:hover { border-color: var(--accent); color: var(--accent-text); }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(4,4,6,0.72); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 24px; animation: fadein .18s ease; }
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
.modal { position: relative; width: 100%; max-width: 580px; max-height: 88vh; overflow: auto; background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--border-2); border-radius: 18px; padding: 28px; box-shadow: 0 40px 120px -30px rgba(0,0,0,.9); }
.modal h3 { font-size: 22px; margin-bottom: 6px; }
.modal-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: 19px; line-height: 1; transition: .15s; }
.modal-close:hover { color: var(--text); border-color: var(--accent); background: var(--surface-1); }
.modal-actions { display: flex; gap: 10px; margin-top: 22px; }
.brand-draft-row { display: flex; gap: 10px; margin: 16px 0 20px; flex-wrap: wrap; }
.brand-draft-row input { flex: 1 1 220px; }
.brand-form { display: flex; flex-direction: column; gap: 14px; padding-bottom: 72px; } /* clearance so the sticky floating Save/Clear buttons rest over empty space, not the last field */
.brand-form textarea { width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 10px 12px; outline: none; transition: .16s; font-family: inherit; font-size: 14px; resize: vertical; }
.brand-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(216,92,66,0.10); }
.brand-notes { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
/* Brand-page sub-tabs (Profile | Memory) — memory is one click, no scroll */
/* Audit C: primary view switch → underline tabs (no filled pills) */
.brand-subnav { display: flex; gap: 22px; margin: 4px 0 20px; border-bottom: 1px solid var(--hairline); }
.bsub { background: none; border: 0; color: var(--muted); padding: 8px 0; border-radius: 0; font-size: 14px; font-weight: 600; cursor: pointer; position: relative; box-shadow: none; transition: color var(--t-micro); }
.bsub:hover { color: var(--text); border-color: transparent; }
.bsub.active { color: var(--text); background: none; border: 0; box-shadow: none; }
.bsub.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; }
.bsub .tag-count { opacity: .6; font-weight: 500; margin-left: 4px; }
.bsub-panel.hidden { display: none; }
/* Brand logo upload (real logo → composited into finished ads) */
.brand-logo-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
/* checkerboard backing so a logo of ANY colour shows — white-on-transparent logos (e.g. poppi's "Logo-White") vanished on the old solid-white backing */
.brand-logo-prev { height: 44px; min-width: 64px; max-width: 160px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px;
  background-color: #c8c8ce;
  background-image: linear-gradient(45deg, #a9a9b1 25%, transparent 25%), linear-gradient(-45deg, #a9a9b1 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #a9a9b1 75%), linear-gradient(-45deg, transparent 75%, #a9a9b1 75%);
  background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0; }
.brand-product-nudge { margin-top: 9px; font-size: 12px; line-height: 1.45; color: var(--accent-text, #D85C42); background: color-mix(in oklab, var(--accent) 10%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border)); border-radius: 9px; padding: 8px 11px; }
.brand-product-grid { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 8px; }
.brand-product-grid .bp-cell { position: relative; width: 64px; height: 64px; border-radius: 9px; overflow: visible; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; transition: transform .12s ease, border-color .12s, box-shadow .12s; }
.brand-product-grid .bp-cell img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 9px; }
/* hover = highlight + enlarge THIS product (a peek), so it's clear which one you're on + which becomes default on click */
.brand-product-grid .bp-cell:hover { border-color: var(--accent); transform: scale(1.85); z-index: 6; box-shadow: 0 10px 28px -8px rgba(0,0,0,.7); }
.brand-product-grid .bp-cell.is-default { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.brand-product-grid .bp-cell.is-default:hover { box-shadow: 0 0 0 2px var(--accent) inset, 0 10px 28px -8px rgba(0,0,0,.7); }
.brand-product-grid .bp-x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border-2); background: var(--bg); color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; z-index: 2; }
.brand-product-grid .bp-x:hover { color: var(--text); border-color: var(--accent); }
.brand-product-grid .bp-tag { position: absolute; left: 4px; bottom: 4px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-ink); background: var(--accent); padding: 1px 5px; border-radius: 5px; }
.brand-product-grid .bp-add { width: 64px; height: 64px; border-radius: 9px; border: 1px dashed var(--border-2); background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; align-content: center; gap: 1px; font-size: 18px; line-height: 1; }
.brand-product-grid .bp-add span { font-size: 10px; }
.brand-product-grid .bp-add:hover { border-color: var(--accent); color: var(--accent-text); }
.bn-h { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); font-weight: 700; margin-bottom: 8px; }
.bn-item { font-size: 13px; color: var(--muted); line-height: 1.55; }

/* ===================== Playbook (strategy layer) ===================== */
.pb-cta { margin-bottom: 20px; }
.playbook { background: linear-gradient(180deg, rgba(216,92,66,0.06), var(--bg-2)); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 22px; }
.pb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.pb-badge { background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 11px; padding: 4px 10px; border-radius: 999px; }
.pb-head h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.pb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 720px) { .pb-cols { grid-template-columns: 1fr; gap: 16px; } }
.pb-col h4 { margin: 0 0 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-text); }
.pb-item { margin-bottom: 14px; }
.pb-item b { display: block; font-size: 14px; color: var(--text); margin-bottom: 3px; }
.pb-item p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.pb-actions { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 14px; }

/* Saved playbooks list */
.pb-list { display: flex; flex-direction: column; gap: 18px; max-width: 920px; }
.pb-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.pb-actions-inline { display: flex; gap: 8px; }

/* brand modal: progressive onboarding + sticky right-aligned actions */
.link-btn { background: none; border: 0; color: var(--muted); font-size: 12.5px; padding: 0; margin: 12px 0 2px; text-decoration: underline; cursor: pointer; }
.link-btn:hover { color: var(--accent-text); }
.modal { padding-bottom: 0; }
.modal-actions { justify-content: flex-end; position: sticky; bottom: 0; background: var(--bg-2); border-top: 1px solid var(--border); padding: 16px 0; margin-top: 20px; }

/* ===================== app shell (left sidebar + main) ===================== */
.app { display: flex; min-height: 100vh; }
.sidebar { flex: 0 0 226px; width: 226px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 3px; padding: 20px 14px; border-right: 1px solid var(--border); background: rgba(8,8,10,0.5); transition: flex-basis .22s cubic-bezier(.2,.7,.2,1), width .22s cubic-bezier(.2,.7,.2,1), padding .22s, opacity .18s; }
/* collapsible sidebar (Higgsfield-style) — hide it off-canvas to a floating reopen button */
.nav-collapse { margin-left: auto; background: transparent; border: 0; color: var(--faint); padding: 4px; border-radius: 7px; display: grid; place-items: center; transition: .15s; }
.nav-collapse:hover { color: var(--text); background: var(--surface-2); }
.app.nav-collapsed .sidebar { flex-basis: 0; width: 0; min-width: 0; padding-left: 0; padding-right: 0; border-right: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.nav-expand { position: fixed; top: 14px; left: 14px; z-index: 60; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text); display: none; place-items: center; box-shadow: 0 8px 22px -12px rgba(0,0,0,.55); transition: .15s; }
.nav-expand:hover { border-color: var(--accent); color: var(--accent-text); }
.app.nav-collapsed .nav-expand { display: grid; animation: rise .25s ease both; }
.sidebar .brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 17px; padding: 4px 8px 18px; }
/* menu + chip icons (SVG) align with their label */
.recent-menu button { display: flex; align-items: center; gap: 9px; }
.recent-menu button svg { flex: 0 0 auto; opacity: .85; }
.bs-ic { display: inline-flex; align-items: center; vertical-align: middle; }
.bs-ic svg { display: block; }
.cc-plusmenu .pm-ic { vertical-align: -3px; margin-right: 9px; opacity: .8; }
/* Hermoso "Full Bloom" lockup: coral flower mark + lowercase Cormorant wordmark + italic coral .ai */
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; }
.brand-mk { width: 26px; height: 26px; display: block; flex: 0 0 auto; }
.brand-wd { font-family: var(--font-display); font-weight: 600; font-size: 25px; line-height: 1; letter-spacing: -0.01em; color: #FAF7F2; }
body.light .brand-wd { color: #1B1A18; }
/* .ai reads as a domain suffix sitting on the baseline (hermoso.ai), NOT a superscript ™ — italic coral, ~0.4× the wordmark, no vertical offset */
.brand-ai { font-style: italic; font-weight: 500; font-size: .4em; color: var(--accent); margin-left: 2px; }
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 3px; padding-top: 12px; border-top: 1px solid var(--border); }
.nav-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: 0; color: var(--muted); padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; transition: .15s; }
.nav-item:hover { background: var(--surface); color: var(--text); }
/* audit: active = coral left-rail + 10% tint + ink/600 (coral rationed to the indicator, not the whole label) */
.nav-item.active { background: color-mix(in oklab, var(--accent) 9%, transparent); color: var(--text); font-weight: 600; box-shadow: inset 2.5px 0 0 var(--accent); }
.nav-item .tag-count { margin-left: auto; }
/* nav icons: same 1.7-stroke grammar as the Rewards trophy; recede with the label, sharpen on hover/active */
.nav-item .nav-ic { flex: 0 0 auto; opacity: .72; transition: opacity .15s; }
.nav-item:hover .nav-ic, .nav-item.active .nav-ic { opacity: 1; }
/* audit: two-tier hierarchy — secondary nav (Brand/Billing/MCP·CLI/Settings + Rewards) recedes behind the primary nav */
.nav-bottom .nav-item { font-size: 12.5px; color: var(--faint); padding: 8px 12px; font-weight: 500; }
.nav-bottom .nav-item:hover { color: var(--text); }
.nav-bottom .nav-item.active { color: var(--text); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topstrip { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 13px 26px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; background: rgba(8,8,10,0.72); backdrop-filter: blur(16px) saturate(140%); }
.panels { flex: 1; }

/* brand chip lives in the sidebar bottom now (full-width, not a pill) */
.brand-chip { cursor: pointer; width: 100%; text-align: left; border: 1px solid var(--border); background: var(--surface); color: var(--muted); padding: 9px 12px; border-radius: 10px; font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: .15s; margin-top: 6px; }
.brand-chip:not(.set) { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; box-shadow: 0 0 20px -8px var(--accent-glow); }
.brand-chip:not(.set):hover { background: var(--accent-2); }
.brand-chip.set { color: var(--text); }
.brand-chip.set:hover { border-color: var(--accent); color: var(--accent-text); }

/* MOBILE/NARROW (≤820px): the sidebar becomes ONE horizontal SCROLLING strip — every item full-size and reachable by
   swipe, nothing wraps or clips. This treatment used to apply only ≤560px, with a flex-WRAP bar in between (561-820)
   that crammed items into a tall broken block with a dead zone below it — real phones (embedded Shopify iframe
   viewports especially) land in that band, so the strip now owns the whole range. */
@media (max-width: 820px) {
  .app { flex-direction: column; }
  .sidebar { position: static; width: auto; height: auto; flex: 0 0 auto; flex-direction: row; flex-wrap: nowrap; align-items: center; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 4px; border-right: 0; border-bottom: 1px solid var(--border); padding: 9px 12px; } /* flex-basis reset is load-bearing: the desktop 226px basis becomes HEIGHT in the column layout = a giant dead zone under the strip */
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar .brand { padding: 0 12px 0 4px; }
  .nav, .nav-bottom { flex-direction: row; flex-wrap: nowrap; }
  .nav-item, .sidebar .brand, .nav-bottom .nav-item, .brand-chip { flex: 0 0 auto; white-space: nowrap; width: auto; }
  .nav-item, .nav-bottom .nav-item { padding: 8px 13px; }
  .nav-item .tag-count { margin-left: 4px; }
  .nav-item-wrap { flex: 0 0 auto; }
  .nav-item-wrap .nav-item { width: auto; padding-right: 38px; } /* room for the absolute ＋ so 'Studio' isn't clipped to 'Stu' */
  .nav-recent { display: none; } /* declutter the horizontal strip — recent chats live under Library */
  .nav-bottom { margin-top: 0; margin-left: 6px; border-top: 0; padding-top: 0; gap: 4px; }
  .nav-collapse { display: none; } /* collapsing to a 0-width column is meaningless in the horizontal mobile strip */
  .brand-chip { margin-top: 0; }
  .sidebar .sidebar-foot { flex: 0 0 auto; padding-top: 0; border-top: 0; margin-top: 0; } /* its desktop border-top reads as a stray hairline mid-strip (extra .sidebar outranks the later base rule — media queries don't add specificity) */
  .main { padding-left: 14px; padding-right: 14px; }
}

/* ===================== AI Ad Studio (Create) ===================== */
.create-form { max-width: 760px; }
.creative { background: linear-gradient(180deg, rgba(216,92,66,0.05), var(--bg-2)); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 24px; margin-top: 22px; }
.cr-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cr-head h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.cr-rationale { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0 0 18px; max-width: 780px; }
.cr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 760px) { .cr-cols { grid-template-columns: 1fr; } }
.cr-col h4, .cr-block h4 { margin: 0 0 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-text); }
.cr-copy { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.cr-copy-h { display: flex; justify-content: space-between; align-items: center; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: 8px; }
.cr-field { display: flex; gap: 10px; margin-bottom: 6px; font-size: 13px; }
.cr-k { flex: 0 0 76px; color: var(--faint); text-transform: uppercase; font-size: 9px; letter-spacing: .07em; font-weight: 700; padding-top: 3px; }
.cr-v { color: var(--text); line-height: 1.5; min-width: 0; }
.cr-role { display: inline-block; margin-right: 7px; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--accent-text); background: color-mix(in oklab, var(--accent) 14%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border)); border-radius: 5px; padding: 1px 6px; vertical-align: middle; font-style: normal; }
.cr-block { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.cr-dir { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0 0 12px; }
.cr-prompt { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.cr-prompt p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text); font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.cr-actions { display: flex; gap: 8px; margin-top: 12px; }
.primary-mini { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
button.mini.primary-mini:hover, .primary-mini:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-ink); } /* keep dark text — must OUTRANK button.mini:hover (element+class+pseudo) or hover goes lime-on-lime */
.cr-scenes { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.cr-scene { display: flex; gap: 10px; }
.cr-scene-n { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--muted); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.cr-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.cr-tips { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; font-size: 13px; color: var(--muted); line-height: 1.55; }

/* Create — example ads to remix */
#createExamples { margin-top: 24px; }
.ex-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ex-head h4 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.ex-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ex-card { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; transition: .16s; display: flex; flex-direction: column; padding: 0; position: relative; }
.ex-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 12px 30px -18px var(--accent-glow); }
.ex-media { aspect-ratio: 1 / 1; background: var(--surface-2); overflow: hidden; display: grid; place-items: center; }
.ex-media img, .ex-media video { width: 100%; height: 100%; object-fit: cover; }
.ex-media .ph { color: var(--faint); font-size: 12px; padding: 12px; text-align: center; }
.ex-meta { padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ex-meta b { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-meta span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-remix { position: absolute; top: 8px; right: 8px; background: rgba(8,8,10,.7); backdrop-filter: blur(6px); border: 1px solid var(--border-2); color: var(--accent-text); font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 999px; opacity: 0; transition: .16s; }
.ex-card:hover .ex-remix { opacity: 1; }
.ex-empty { color: var(--muted); font-size: 13.5px; padding: 16px; background: var(--surface); border: 1px dashed var(--border-2); border-radius: 12px; }

/* Create gallery — masonry, inspiration-feed style */
.ex-count { color: var(--accent-text); font-variant-numeric: tabular-nums; font-weight: 700; margin-left: 4px; }
.pull-cta { white-space: nowrap; }
.ex-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; align-items: start; } /* 1fr columns ALWAYS stretch to fill the full width — no right-side gap at any width/zoom */
@media (max-width: 760px) { .ex-gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.ex-gallery .ex-card { display: block; padding: 0; position: relative; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s; animation: exrise .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0s); }
.ex-gallery .ex-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 18px 44px -22px var(--accent-glow); }
.ex-gallery .ex-card img, .ex-gallery .ex-card video { display: block; width: 100%; height: auto; }
.ex-gallery .ex-card .ph { min-height: 130px; display: grid; place-items: center; padding: 26px 16px; color: var(--faint); font-size: 12.5px; text-align: center; line-height: 1.45; }
.ex-vbadge { position: absolute; top: 10px; left: 10px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; font-size: 10px; backdrop-filter: blur(4px); z-index: 2; transition: opacity .15s; }
.ex-card.is-video { cursor: pointer; }
.ex-card.playing .ex-vbadge { opacity: 0; }
.ex-card.playing .ex-overlay { opacity: 0; } /* don't cover the clip while it plays (hover still reveals Remix once paused) */
.ex-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px; background: linear-gradient(180deg, transparent 45%, rgba(6,6,8,.85)); opacity: 0; transition: opacity .18s; }
.ex-card:hover .ex-overlay { opacity: 1; }
.ex-overlay .ex-adv { color: #fff; font-weight: 600; font-size: 13px; }
.ex-overlay .ex-remix { position: static; opacity: 1; align-self: flex-start; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: 999px; }
.ex-skel { width: 100%; aspect-ratio: 4 / 5; border-radius: 14px; }
.ex-cta { padding: 40px 30px; background: linear-gradient(180deg, rgba(216,92,66,0.05), var(--bg-2)); border: 1px dashed var(--border-2); border-radius: var(--radius); text-align: center; }
.ex-cta-in { max-width: 460px; margin: 0 auto; }
.ex-cta-h { font-family: var(--font-display); font-size: 21px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
.ex-cta p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0 0 18px; }
.ex-cta-alt { display: inline-block; margin-left: 14px; font-size: 13px; }
@keyframes exrise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Studio refine bar */
.cr-refine { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 16px; }
.cr-refine-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cr-chip { padding: 6px 12px; font-size: 12px; }
.cr-refine-row { display: flex; gap: 10px; }
.cr-refine-row input { flex: 1; }

/* masonry treatment for Swipefile + Ad Search results (gallery feel, full cards) */
.masonry { display: block; columns: 300px 4; column-gap: 16px; }
.masonry > * { break-inside: avoid; }
.masonry .ad, .masonry .skel { margin: 0 0 16px; }
.masonry .section-head, .masonry .load-more, .masonry .loading-block, .masonry .skel-note, .masonry .swipe-empty-cta { column-span: all; } /* empty state must span the columns, not sit in column 1 */
/* Inspire results: one BRAND card with platform TABS (Meta/Google/LinkedIn) + a multi-column grid of the
   selected platform's ads — switch platforms via tabs instead of scrolling past a pile. */
.brand-list { display: block; scroll-margin-top: 92px; } /* clear the sticky .topbar so scrollIntoView leaves the first brand's title visible */
#queueHeading { margin-top: 0; } /* the global h4 margin added dead space above "Your competitors" inside the card */
.brand-card { border: 1px solid var(--border); border-radius: 16px; background: color-mix(in oklab, var(--surface) 35%, var(--bg)); padding: 14px 16px 10px; margin: 0 0 18px; }
.brand-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; cursor: pointer; user-select: none; }
.brand-card-head h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.bc-toggle { width: 26px; height: 26px; display: grid; place-items: center; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; color: var(--muted); cursor: pointer; padding: 0; transition: transform .18s, color .15s, border-color .15s; flex: 0 0 auto; }
.bc-toggle svg { display: block; }
.brand-card-head:hover .bc-toggle { color: var(--text); border-color: var(--border-2); }
.bc-total { margin-left: auto; color: var(--faint); font-size: 12px; flex: 0 0 auto; }
.brand-card.collapsed .bc-toggle { transform: rotate(-90deg); }
.brand-card.collapsed .brand-card-head { margin-bottom: 0; }
.brand-card.collapsed .brand-pane { display: none; }
.brand-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.bt-tab { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-2); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 5px 13px; font-size: 13px; font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.bt-tab:hover { color: var(--text); border-color: var(--border-2); }
.bt-tab.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.bt-count { font-size: 11px; opacity: .75; font-variant-numeric: tabular-nums; }
.bt-tab.on .bt-count { opacity: .9; }
.bt-count.err { color: var(--danger); }
.bt-tab.on .bt-count.err { color: var(--accent-ink); }
.bp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; align-items: start; }
.bp-grid .ad { width: 100%; margin: 0; }
.brand-card .load-more { display: block; margin: 16px auto 6px; }
.brand-card .bb-empty { color: var(--faint); font-size: 13px; padding: 22px 4px; text-align: center; }
.brand-card .bb-note { color: var(--warn); font-size: 12.5px; padding: 0 2px 12px; }
.bb-skel .bp-grid .skel { margin: 0; }
/* searchable country picker (fetch bar) */
.ctry-wrap { position: relative; display: inline-block; }
.ctry-btn { background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.ctry-btn:hover { border-color: var(--border-2); }
.ctry-cv { color: var(--faint); font-size: 10px; }
.ctry-pop { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 50; width: 244px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; box-shadow: 0 18px 50px -16px rgba(0,0,0,.7); padding: 8px; }
.ctry-search { width: 100%; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 8px 10px; font-size: 13px; margin-bottom: 6px; box-sizing: border-box; }
.ctry-search:focus { outline: none; border-color: var(--accent); }
.ctry-list { max-height: 250px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.ctry-opt { text-align: left; background: none; border: 0; color: var(--text); padding: 7px 10px; border-radius: 7px; font-size: 13px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.ctry-opt:hover { background: var(--bg-2); }
.ctry-opt.on { color: var(--accent-text); }
.ctry-none { color: var(--faint); font-size: 12.5px; padding: 12px; text-align: center; }

/* Library (your creations) */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
/* Library ▸ Assets gallery — every generated image/video, independent of chats */
.asset-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.asset-tile { position: relative; border-radius: 12px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--border); aspect-ratio: 4 / 5; }
.asset-media { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.asset-acts { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; opacity: 0; transition: .15s; }
.asset-tile:hover .asset-acts { opacity: 1; }
.asset-acts .act-btn { background: rgba(8, 8, 10, .72); backdrop-filter: blur(4px); }
.asset-acts .act-btn:hover { background: var(--accent); } /* this rule outranks .act-btn:hover (same specificity, later in file) — without it the hover keeps the dark bg while the icon goes accent-ink: invisible */
.asset-acts .act-btn.saved { color: var(--accent); }
.asset-cap { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); font-size: 11px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .5); padding: 3px 8px; border-radius: 999px; backdrop-filter: blur(4px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* first-class carousel (slideshows / IG carousels) — swipeable multi-slide output */
.carousel { position: relative; background: var(--bg-2, #0d0d10); border: 1px solid var(--border, #222); border-radius: 16px; overflow: hidden; }
.carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 4 / 5; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center; background: #000; }
.carousel-edit { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-2, rgba(255,255,255,.18)); background: rgba(8,8,10,.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 14px; cursor: pointer; display: grid; place-items: center; z-index: 4; opacity: 0; transition: .15s; }
.carousel:hover .carousel-edit { opacity: .85; }
.carousel-edit:hover { border-color: var(--accent, #D85C42); color: var(--accent, #D85C42); opacity: 1; }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-2, rgba(255,255,255,.18)); background: rgba(8,8,10,.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; cursor: pointer; display: grid; place-items: center; z-index: 3; transition: .15s; opacity: .85; }
.carousel-nav svg { width: 20px; height: 20px; display: block; } /* SVG chevron centers exactly via place-items (the ‹/› glyphs sat off-center) */
.carousel-nav:hover { border-color: var(--accent, #D85C42); color: var(--accent, #D85C42); opacity: 1; }
.carousel-prev { left: 12px; }
.carousel-next { right: 12px; }
/* RTL (Arabic/Hebrew/Urdu): dir=rtl on <html> flips text + default flow; these handle the explicitly-positioned bits */
[dir="rtl"] { text-align: right; }
[dir="rtl"] .carousel-prev { left: auto; right: 12px; }
[dir="rtl"] .carousel-next { right: auto; left: 12px; }
[dir="rtl"] .carousel-prev svg, [dir="rtl"] .carousel-next svg { transform: scaleX(-1); }
.carousel-dots { position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }
.carousel-dot { width: 7px; height: 7px; border-radius: 50%; border: 0; background: rgba(255,255,255,.4); cursor: pointer; padding: 0; transition: .18s; }
.carousel-dot.on { background: var(--accent, #D85C42); width: 20px; border-radius: 4px; }
.cc-gallery .carousel { grid-column: 1 / -1; max-width: 340px; } /* the carousel is its own full-width row at a sane size — NOT squished into a 168px gallery cell next to other tiles (which crammed the action bar) */
.carousel-bar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 8px; padding: 9px 10px; background: linear-gradient(transparent, rgba(8,8,10,.92)); z-index: 3; }
.carousel-count { font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .02em; }
.carousel-acts { display: flex; gap: 6px; align-items: center; }
.carousel-acts .act-btn:disabled { opacity: 1; cursor: default; }
/* (the carousel act-btn tooltip flip-above hack is gone — the .app-tip engine floats above the icon on its own, never clipped) */

.lib-card { background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; transition: border-color .16s, transform .16s; }
.lib-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.lib-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.lib-fmt { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; }
.lib-prod { font-size: 12px; color: var(--muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-meta .mini { padding: 4px 9px; }
.lib-concept { font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.35; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lib-copy { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lib-copy b { color: var(--text); }

/* Library v2 — toolbar + run meta */
.lib-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.lib-toolbar input { flex: 1 1 260px; }
.lib-toolbar select { max-width: 170px; }
.lib-brand { font-size: 11px; color: var(--text); font-weight: 600; }
.lib-date { font-size: 11px; color: var(--faint); margin-left: auto; }
.lib-prod { font-size: 13px; color: var(--muted); margin: 0 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
.lib-vers { font-size: 11px; color: var(--muted); }

/* saved Muse chats (resume bar) */
.chat-history { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 1320px; margin: 0 auto 14px; }
.ch-label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin-right: 2px; }
.ch-chip { background: var(--surface); border: 1px solid var(--border); color: var(--muted); padding: 6px 12px; border-radius: 999px; font-size: 12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: .15s; }
.ch-chip:hover { border-color: var(--border-2); color: var(--text); }
.ch-chip.active { border-color: var(--accent); color: var(--accent-text); }
.ch-new { color: var(--accent-text); border-style: dashed; }

/* Studio version browser + Library brand grouping */
.cr-versions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.cr-vlabel { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-right: 4px; }
.cr-vchip { background: var(--surface); border: 1px solid var(--border); color: var(--muted); padding: 4px 11px; border-radius: 999px; font-size: 12px; font-variant-numeric: tabular-nums; transition: .15s; }
.cr-vchip:hover { border-color: var(--border-2); color: var(--text); }
.cr-vchip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.lib-brands { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.lib-bchip { background: var(--surface); border: 1px solid var(--border); color: var(--muted); padding: 6px 12px; border-radius: 999px; font-size: 12px; transition: .15s; }
.lib-bchip:hover { border-color: var(--border-2); color: var(--text); }
.lib-bchip.active { border-color: var(--accent); color: var(--accent-text); }

/* AI-generated media (Studio: ✦ Generate image / video) */
.cr-gen { margin-top: 14px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: #07070a; animation: genIn .45s cubic-bezier(.2,.7,.2,1); }
@keyframes genIn { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
.cr-genmedia { display: block; width: 100%; max-height: 600px; object-fit: contain; background: #000; }
.cr-gen-actions { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface); }
.cr-gen.loading { border-color: var(--border-2); }
.cr-genload { display: flex; align-items: center; gap: 12px; padding: 40px 22px; color: var(--muted); font-size: 14px; background: radial-gradient(120% 120% at 50% 0%, color-mix(in oklab, var(--accent) 7%, transparent), transparent 70%); }
.cr-genhint { margin: 10px 0 0; font-size: 12px; color: var(--faint); line-height: 1.5; }
.cr-genhint code { background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; font-size: 11px; color: var(--muted); }

/* Generation toggles (size / length / model tier) */
.gen-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.gen-ctl { display: flex; align-items: center; gap: 9px; }
.gen-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.gen-seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px; gap: 2px; }
.gen-pill { border: 0; background: transparent; color: var(--muted); padding: 4px 11px; border-radius: 999px; font-size: 12px; cursor: pointer; transition: .15s; font-variant-numeric: tabular-nums; }
.gen-pill:hover { color: var(--text); }
.gen-pill.active { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.gen-est { margin-left: auto; font-size: 12px; color: var(--accent-text); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Settings ▸ Credits & costs reference */
.cost-ref { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.cost-grp { padding: 9px 14px; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--faint); background: var(--bg-2); border-top: 1px solid var(--border); }
.cost-grp:first-child { border-top: 0; }
.cost-note { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 600; margin-left: 6px; }
.cost-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px; border-top: 1px solid var(--border); }
.cost-act { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text); }
.cost-sub { font-size: 11px; color: var(--faint); }
.cost-val { font-size: 13px; font-weight: 700; color: var(--accent-text); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Product-photo (compositing) control */
.gen-ref { display: flex; align-items: center; gap: 12px; margin: 14px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.gen-ref-empty { gap: 14px; }
.gen-ref-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-2); }
.gen-ref-txt { display: flex; flex-direction: column; gap: 1px; font-size: 12px; margin-right: auto; }
.gen-ref-txt b { color: var(--text); font-size: 13px; }
.gen-ref-txt span { color: var(--faint); }
.gen-ref-hint { font-size: 12px; color: var(--faint); }

/* Usage ▸ internal margins panel */
.analytics { margin-top: 12px; }
.an-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.an-stat { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); min-width: 96px; }
.an-k { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.an-v { font-size: 17px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.an-sub { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--faint); margin: 14px 0 6px; }
.an-head { display: none; }
.an-table { width: 100%; }
.an-table td { padding: 7px 8px; font-size: 13px; font-variant-numeric: tabular-nums; border-top: 1px solid var(--border); }
.an-table td:first-child { color: var(--text); }
.an-table td:not(:first-child) { color: var(--muted); text-align: right; width: 64px; }
.an-table .an-m { color: var(--accent-text); font-weight: 600; }
.an-table .an-m.an-neg { color: var(--danger); } /* negative margin = a money-losing op */
.an-stat.an-leak { border-color: var(--danger); } /* margin leak / untracked vendor spend */
.an-stat.an-leak .an-v { color: var(--danger); }

/* Library thumbnails — the actual rendered ad on each card */
.lib-thumb-wrap { position: relative; margin: -4px -4px 12px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; overflow: hidden; cursor: pointer; background: #000; aspect-ratio: 4 / 3; }
.lib-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.lib-thumb-wrap:hover .lib-thumb { transform: scale(1.05); }
.lib-thumb-tag { position: absolute; left: 8px; bottom: 8px; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: #fff; background: rgba(0,0,0,.55); padding: 2px 8px; border-radius: 999px; backdrop-filter: blur(4px); }
.cr-gen-saved { margin-left: auto; font-size: 11px; color: var(--good); font-weight: 600; align-self: center; }
/* FAQ */
.faq-item { border-top: 1px solid var(--border); padding: 13px 0; }
.faq-item:first-of-type { border-top: 0; }
.faq-q { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 5px; }
.faq-a { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0; }

/* ============== Billing ============== */
.bill-mgr-note { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--line, rgba(127,127,127,.2)); border-radius: 12px; background: color-mix(in srgb, var(--accent) 5%, transparent); }
.bill-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.bill-head.low { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent), 0 0 40px -16px var(--accent-glow); }
.bill-head-stats { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; flex: 1 1 auto; }
.bill-head-stat { display: flex; flex-direction: column; gap: 3px; }
.bill-head-k { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.bill-head-v { font-size: 18px; font-weight: 700; color: var(--text); }
.bill-head-v.low { color: var(--accent-text); }
.bill-head-acts { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.bill-head-acts #billAddCredits { padding: 10px 18px; border-radius: 11px; font-size: 14px; }
.bill-h { font-size: 1.05rem; margin: 30px 0 14px; }
.bill-sub { font-size: 12px; color: var(--faint); font-weight: 500; margin-left: 6px; }
.plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* never split the 4 plans 3+1 onto a lonely row — drop to a clean 2×2, then 1-up on phones */
/* upsell view (paid sub, only their tier + higher) — center the fewer cards at a sane width instead of stretching across 4 columns */
.plan-grid-upsell { grid-template-columns: repeat(var(--ncols, 4), minmax(0, 300px)); justify-content: center; }
.bill-toggleplans { margin-top: 14px; }
@media (max-width: 980px) { .plan-grid, .plan-grid-upsell { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .plan-grid { grid-template-columns: 1fr; } }
.plan-card { position: relative; display: flex; flex-direction: column; padding: 22px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: .2s; }
.plan-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.plan-card.popular { border-color: color-mix(in oklab, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent), 0 18px 50px -28px var(--accent-glow); }
.plan-card.current { border-color: var(--accent); }
.plan-badge { position: absolute; top: -10px; left: 20px; background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.plan-name { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
.plan-price { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--text); margin: 8px 0 2px; line-height: 1; }
.plan-price span { font-size: .9rem; font-weight: 500; color: var(--faint); }
.plan-billed { font-size: 11.5px; color: var(--muted); margin: 3px 0 2px; }
.plan-billed b { color: var(--accent-text); font-weight: 700; }
.plan-save { position: absolute; top: 14px; right: 14px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 3px 9px; border-radius: 999px; }
/* first-run onboarding plan step (modal over the freshly set-up Studio) */
.onb-plans { width: 100%; max-width: 1080px; max-height: 90vh; overflow: auto; background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--border-2); border-radius: 22px; padding: 36px 32px 30px; box-shadow: 0 40px 120px -30px rgba(0,0,0,.9); text-align: center; }
.onb-plans-h { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; }
.onb-plans-h em { font-style: italic; color: var(--accent-text); }
.onb-plans-sub { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 auto 26px; max-width: 580px; }
.onb-plans-grid { text-align: left; margin-bottom: 20px; }
.onb-plans-skip { background: none; border: 0; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 10px; text-decoration: underline; text-underline-offset: 3px; transition: color .15s; }
.onb-plans-skip:hover { color: var(--text); }
/* monthly/annual toggle */
.bill-h-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.bill-period { display: inline-flex; gap: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.bill-period .bp-opt { background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: .15s; }
.bill-period .bp-opt.on { background: var(--accent); color: var(--accent-ink); }
.bill-period .bp-save { font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; background: color-mix(in oklab, var(--accent) 22%, var(--surface)); color: var(--accent-text); padding: 2px 7px; border-radius: 999px; }
.bill-period .bp-opt.on .bp-save { background: var(--accent-ink); color: var(--accent); }
.plan-credits { font-size: 13px; color: var(--accent-text); font-weight: 600; }
.plan-ads { font-size: 12px; color: var(--muted, #9a8f80); font-weight: 500; margin-top: 3px; letter-spacing: .1px; }
.plan-blurb { font-size: 12px; color: var(--faint); margin: 4px 0 14px; }
.plan-feats { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.plan-feats li { font-size: 13px; color: var(--muted); padding-left: 20px; position: relative; line-height: 1.35; }
.plan-feats li::before { content: '✓'; position: absolute; left: 0; color: var(--accent-text); font-weight: 800; }
.plan-cta { width: 100%; }
.pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.pack-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: .2s; }
.pack-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.pack-credits { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; color: var(--text); line-height: 1; }
.pack-sub { font-size: 11px; color: var(--faint); margin: 4px 0 10px; }
.pack-price { font-size: 1.1rem; font-weight: 700; color: var(--accent-text); margin-bottom: 14px; }
.pack-cta { width: 100%; }
/* Coral is rationed: only the Most-popular plan + the modal's single Buy stay coral-filled. Secondary plan/pack
   CTAs are ghosts (neutral border, coral only on hover) — sized to match the primary so the button row stays even. */
.plan-cta.ghost, .pack-cta.ghost { padding: 10px 18px; font-size: 13px; font-weight: 700; border-radius: var(--radius-sm); }
.bill-sets { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; }
@media (max-width: 720px) { .bill-sets { grid-template-columns: 1fr; } }
.bill-set-head { display: flex; align-items: flex-start; gap: 16px; }
.bill-set-head > div:first-child { flex: 1; }
.bill-set-head h3 { margin: 0 0 4px; }
.bill-set-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; font-size: 13px; color: var(--muted); transition: opacity .2s; }
.bill-set-body.off { opacity: .4; pointer-events: none; }
.bill-field { display: inline-flex; align-items: center; gap: 8px; }
.bill-field input, .bill-field select { background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; }
.bill-field input[type=number] { width: 80px; }
/* Spend-alerts email row: the "Email me at" label was wrapping to two lines while the email input truncated — the
   field got squeezed even with room to spare. Give this field its own full-width row, keep the label on one line,
   and let the input flex to fill the remaining width so a full address is always readable at normal widths. */
.bill-field:has(> #alEmail) { flex: 1 1 100%; min-width: 0; white-space: nowrap; }
.bill-field > #alEmail { flex: 1 1 auto; min-width: 0; width: auto; max-width: 380px; }
/* toggle switch */
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; cursor: pointer; background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; transition: .2s; }
.slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: var(--muted); border-radius: 50%; transition: .2s; }
.switch input:checked + .slider { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(18px); background: var(--accent-ink); }

/* Generated results grid (batch variations) */
.cr-gen { margin-top: 14px; border: 0; background: none; overflow: visible; }
.cr-gen-grid { display: grid; gap: 10px; }
.cr-gen-grid.cols-1 { grid-template-columns: 1fr; }
.cr-gen-grid.cols-2, .cr-gen-grid.cols-4 { grid-template-columns: 1fr 1fr; }
.cr-gen-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: #07070a; min-height: 120px; animation: genIn .4s cubic-bezier(.2,.7,.2,1); }
.cr-gen-grid.cols-1 .cr-genmedia { object-fit: contain; max-height: 560px; }
.cr-gen-grid:not(.cols-1) .cr-genmedia { object-fit: cover; aspect-ratio: 1 / 1; max-height: 340px; }
.cr-gen-load { display: flex; align-items: center; justify-content: center; min-height: 170px; background: radial-gradient(120% 120% at 50% 0%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 70%); }
.cr-gen-err { display: flex; align-items: center; justify-content: center; min-height: 110px; padding: 16px; font-size: 12px; color: var(--danger); text-align: center; }
.cr-gen-foot { display: flex; align-items: center; margin-top: 10px; }
.cr-gen-actions .saved { color: var(--good); }

.bill-fine { font-size: 12px; color: var(--faint); margin: 12px 0 0; line-height: 1.5; }

.bill-trial { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 12px 16px; border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--border)); border-radius: var(--radius-sm); background: color-mix(in oklab, var(--accent) 8%, transparent); color: var(--text); font-size: 13px; }
.bill-trial b { color: var(--accent-text); }
.bill-once { font-size: 11px; font-weight: 500; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }

/* Create paywall + product-image upload */
.create-gate { display: flex; justify-content: center; padding: 16px 0 8px; }
.create-gate-in { max-width: 540px; text-align: center; padding: 44px 34px; border: 1px solid var(--border); border-radius: var(--radius); background: radial-gradient(140% 100% at 50% 0%, color-mix(in oklab, var(--accent) 9%, transparent), var(--surface) 70%); }
.create-gate-lock { font-size: 28px; margin-bottom: 10px; }
.create-gate-in h3 { font-size: 1.5rem; margin: 0 0 10px; }
.create-gate-in > p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0 0 20px; }
.create-gate-in a { color: var(--accent-text); }
.create-upload > .hint { font-weight: 400; }
.create-upload-box { margin-top: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 18px; border: 1px dashed var(--border-2); border-radius: var(--radius-sm); background: var(--bg-2); cursor: pointer; transition: .15s; text-align: center; color: var(--muted); }
.create-upload-box:hover { border-color: var(--accent); color: var(--text); }
.create-upload-box.has-img { padding: 0; overflow: hidden; border-style: solid; position: relative; }
.create-upload-box.has-img img { width: 100%; max-height: 220px; object-fit: contain; background: #000; display: block; }
.create-upload-box .ci-clear { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.6); color: #fff; border: 0; border-radius: 999px; width: 26px; height: 26px; cursor: pointer; backdrop-filter: blur(4px); }
.create-upload-box .hint { font-size: 11px; }

/* Ad run status label */
.meta-k.st-active { color: var(--good); }
.meta-k.st-inactive { color: var(--faint); }

/* ============== Create chat-canvas ============== */
/* chat | divider | gallery — the split ratio is DRAGGABLE (--cc-l / --cc-r fr vars, persisted); the 18px gap moved into the divider column */
.cc { display: grid; grid-template-columns: minmax(300px, var(--cc-l, 1fr)) 18px minmax(0, var(--cc-r, 1.45fr)); gap: 0; }
.cc-split { align-self: stretch; cursor: col-resize; position: relative; touch-action: none; }
.cc-split::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 4px; height: 46px; border-radius: 3px; background: var(--border); transition: background .15s, height .15s; }
.cc-split:hover::before, .cc-split.dragging::before { background: var(--accent); height: 64px; }
body.cc-resizing { cursor: col-resize; user-select: none; }
/* While a creative is WORKING but nothing is in the gallery yet: full-width chat, no empty gallery column, no divider
   (the split + divider only make sense once there are generated ads to resize against). has-gallery is set on first render. */
#tab-create.creating:not(.has-gallery) .cc { grid-template-columns: 1fr; }
#tab-create.creating:not(.has-gallery) .cc-right, #tab-create.creating:not(.has-gallery) .cc-split { display: none; }
@media (max-width: 900px) { .cc { grid-template-columns: 1fr; } .cc-split { display: none; } }
.cc-left { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; min-height: 520px; } /* containerless (Higgsfield): messages sit directly on the page, no card around the chat */
.cc-thread { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; min-height: 300px; max-height: 58vh; }
.cc-hello { color: var(--muted); font-size: 14px; line-height: 1.55; }
.cc-msg { max-width: 90%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; animation: ccMsgIn .34s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ccMsgIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
/* word-by-word reveal for the agent's reply (Higgsfield-style "streams in" instead of popping in at once) */
.cc-word { opacity: 0; animation: ccWordIn .26s ease forwards; }
@keyframes ccWordIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cc-msg, .cc-word { animation: none; opacity: 1; } }
.cc-msg.user { align-self: flex-end; background: var(--surface-2); color: var(--text); border: 1px solid var(--border-2); border-bottom-right-radius: 4px; font-weight: 500; }
.cc-msg.assistant { align-self: flex-start; background: var(--bg-2); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
/* reference thumbnail inside a chat bubble (the ad being remixed) */
.cc-ref-thumb { margin-top: 9px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.cc-ref-thumb img { max-width: 150px; max-height: 210px; border-radius: 10px; border: 1px solid var(--border-2); display: block; object-fit: cover; }
.cc-ref-thumb span { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.cc-composer { border-top: 0; padding: 10px 14px 12px; background: transparent; } /* containerless chat → the textarea's own rounded field is the visible input. 14px side padding (was 2px) so the circular send button + its glow clear .cc-left's overflow:hidden clip instead of being shaved / sliced into a vertical "ring" line at the right edge */
.cc-imgchip { display: none; align-items: center; gap: 8px; margin-bottom: 10px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-2); font-size: 12px; color: var(--muted); }
.cc-imgchip img, .cc-imgchip .ci-thumb video { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; background: #000; }
.cc-imgchip .ci-clear { margin-left: auto; background: none; border: 0; color: var(--faint); font-size: 18px; cursor: pointer; line-height: 1; }
/* multi-reference: up to 3 attached thumbnails, each removable */
.cc-imgchip .ci-thumb { position: relative; display: inline-flex; flex: 0 0 auto; }
.cc-imgchip .ci-x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border-2); background: var(--bg); color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.cc-imgchip .ci-x:hover { color: var(--text); border-color: var(--accent); }
.cc-imgchip .ci-add { width: 32px; height: 32px; border-radius: 6px; border: 1px dashed var(--border-2); background: none; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; flex: 0 0 auto; }
.cc-imgchip .ci-add:hover { border-color: var(--accent); color: var(--accent-text); }
.cc-imgchip .ci-lbl { margin-left: auto; }
/* referenced-clip chip: show the captured first frame a bit larger, with a ▶ marker, so you remember what you're referencing */
.cc-imgchip .ci-thumb-vid { width: 40px; height: 40px; }
.cc-imgchip .ci-thumb-vid img, .cc-imgchip .ci-thumb-vid video { width: 40px; height: 40px; object-fit: cover; border-radius: 7px; background: #000; }
.cc-imgchip .ci-thumb-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 11px; text-shadow: 0 1px 5px rgba(0,0,0,.9); pointer-events: none; }
.cc-ctrls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.cc-pillsel, .cc-attach { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 6px 12px; font-size: 12px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03); transition: border-color .15s, background .15s; }
.cc-pillsel:hover, .cc-attach:hover { border-color: var(--border-2); }
.cc-attach.on { border-color: var(--accent); color: var(--accent-text); }
.cc-ref { max-width: 190px; }
.cc-brandnote { margin-left: auto; font-size: 11px; }
.cc-inrow { display: flex; gap: 8px; align-items: flex-end; }
.cc-inrow textarea { flex: 1; resize: none; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 14px; line-height: 1.4; min-height: 46px; max-height: 140px; }
.cc-inrow textarea:focus { border-color: var(--accent); outline: none; }
.cc-inrow .primary { white-space: nowrap; }
.cc-right { background: var(--bg); padding: 0 20px 0; overflow-y: auto; max-height: 80vh; } /* Higgsfield-style: no boxed outline, solid dark region (covers the dot-grid) so the opaque sticky filter bar blends seamlessly and tiles scroll cleanly UNDER it; stretches top→bottom with an even horizontal inset */
.cc-right .cr-cols { grid-template-columns: 1fr; }
.cc-right .cr-cols .cr-col:nth-child(2) { order: -1; } /* visual first in the canvas */
.cc-canvas-empty { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 420px; }
.cc-canvas-emptyin { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--faint); font-size: 30px; }
.cc-canvas-emptyin span { font-size: 14px; }

/* Create composer v2 — centered prompt-first, segmented format, drag-drop */
.cc-start { max-width: 720px; margin: 0 auto; text-align: center; padding: 10px 6px 12px; }
.cc-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.cc-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px 1px var(--accent-glow); }
.cc-greet { font-family: var(--font-display); font-size: clamp(1.4rem, 2.3vw, 1.9rem); font-weight: 800; letter-spacing: -.022em; color: var(--text); line-height: 1.05; margin-top: 5px; }
.cc-greet #ccBrand .cc-brandname { color: var(--accent-text); text-shadow: 0 0 38px var(--accent-glow); }
.cc-substart { color: var(--muted); font-size: 12.5px; line-height: 1.4; margin: 6px auto 0; max-width: 460px; }
/* starter prompts for the active lane */
/* Category → compact prompt rows (Claude Design: replaced the bulky 2×2 card wall) */
.cc-examples { display: block; margin-top: 10px; text-align: left; }
.cc-ex-head { display: flex; align-items: center; justify-content: space-between; margin: 8px 2px 9px; }
.cc-ex-lbl { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--meta); }
.cc-ex-shuffle { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; color: var(--muted); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 4px 7px; border-radius: 7px; transition: .15s; }
.cc-ex-shuffle:hover { color: var(--accent-text); background: var(--tap); }
.cc-ex-list { display: flex; flex-direction: column; gap: 7px; }
.cc-ex { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--chip-border); color: var(--text); border-radius: 10px; padding: 11px 13px; font-size: 12px; line-height: 1.3; text-align: left; cursor: pointer; transition: transform .16s, border-color .16s, background .16s; }
.cc-ex::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.cc-ex:hover { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 5%, var(--surface)); transform: translateY(-1px); }
.cc-ex-tag { margin-left: auto; color: var(--meta); font-weight: 600; font-size: 13px; flex: 0 0 auto; }
.cc-ex:hover .cc-ex-tag { color: var(--accent-text); }
.cc-composer { transition: background .15s, border-color .15s; }
.cc-composer.drag { background: color-mix(in oklab, var(--accent) 9%, var(--bg)); }
.cc-composer #createProduct { width: 100%; resize: none; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 14px; line-height: 1.45; min-height: 72px; max-height: 160px; }
.cc-composer #createProduct:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 13%, transparent); }
.cc-ctrls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 0; }
.cc-seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px; gap: 2px; }
.cc-segbtn { border: 0; background: transparent; color: var(--muted); padding: 6px 13px; border-radius: 999px; font-size: 12px; cursor: pointer; transition: .15s; }
.cc-segbtn.active { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.cc-attachbtn, .cc-newbtn { background: var(--bg-2); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 6px 12px; font-size: 12px; cursor: pointer; transition: .15s; }
.cc-attachbtn:hover, .cc-newbtn:hover { color: var(--text); border-color: var(--border-2); }
.cc-attachbtn.on { border-color: var(--accent); color: var(--accent-text); }
.cc-go { margin-left: 0; } /* spacing between mic + Create now comes from .cc-send's gap */

/* Tighter heroes — recover the wasted vertical space that persists on every tab */
.hero { padding: 24px 0 12px; }
.hero h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 0 0 9px; }
.hero-sub { font-size: 15px; margin: 0 0 14px; line-height: 1.5; }

.gen-modelnote { width: 100%; font-size: 11px; color: var(--faint); margin: 2px 0 0; line-height: 1.4; }

/* Generation render progress — bar + live phase + elapsed + ETA (image AND video) */
.cr-gen-load { flex-direction: column; gap: 10px; padding: 26px 20px; text-align: center; }
.cr-gen-load.video { padding: 30px 20px; min-height: 200px; }
.cr-gen-bar { width: 72%; max-width: 230px; height: 4px; background: var(--bg-2); border-radius: 999px; overflow: hidden; position: relative; }
.cr-gen-bar span { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: var(--accent); border-radius: 999px; animation: barslide 1.3s ease-in-out infinite; }
@keyframes barslide { 0% { left: -40%; } 100% { left: 100%; } }
/* the render tile is always dark (even in light mode) → fix the progress text light so it stays legible */
.cr-gen-phase { font-size: 13px; color: rgba(255,255,255,.92); }
.cr-gen-meta { font-size: 11px; color: rgba(255,255,255,.55); }
.cr-gen-meta .cr-gen-elapsed { font-variant-numeric: tabular-nums; color: rgba(255,255,255,.75); }

/* ♥ collection picker popover */
.coll-picker { position: fixed; z-index: 300; min-width: 210px; max-height: 320px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; padding: 6px; box-shadow: 0 24px 60px -22px rgba(0,0,0,.75); animation: genIn .12s ease; }
.coll-picker-h { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); padding: 6px 10px 5px; }
.coll-picker-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 9px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.coll-picker-item:hover { background: var(--bg-2); }
.coll-picker-item span { color: var(--faint); font-size: 11px; }
.coll-picker-new { color: var(--accent-text); border-top: 1px solid var(--border); margin-top: 4px; border-radius: 0 0 8px 8px; }

/* Image-first video steps */
.cr-vsteps { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.cr-vstep { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cr-vstephint { font-size: 11px; color: var(--faint); }

/* Swap-into-ad mode */
.cc-swap { text-align: center; padding: 18px; }
.cc-swap-h { font-size: 13px; color: var(--accent-text); font-weight: 600; margin-bottom: 12px; }
.cc-swap-img { max-width: 100%; max-height: 58vh; border-radius: var(--radius-sm); border: 1px solid var(--border); display: block; margin: 0 auto 14px; }

/* Click-to-Ad site image picker */
.site-picker { min-width: 280px; max-width: 320px; }
.site-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 4px; max-height: 280px; overflow-y: auto; }
.site-thumb { padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--bg-2); aspect-ratio: 1; }
.site-thumb:hover { border-color: var(--accent); }
.site-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Visual remix picker modal */
.ref-modal { max-width: 760px; }
.ref-search { width: 100%; margin: 10px 0 16px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 11px 14px; font: inherit; font-size: 14px; }
.ref-search:focus { border-color: var(--accent); outline: none; }
.ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; max-height: 60vh; overflow-y: auto; }
.ref-cell { position: relative; padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--bg-2); aspect-ratio: 4/5; display: flex; flex-direction: column; transition: .15s; }
.ref-cell:hover { border-color: var(--accent); transform: translateY(-2px); }
.ref-cell img { width: 100%; flex: 1; object-fit: cover; display: block; min-height: 0; }
.ref-ph { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px; font-size: 12px; color: var(--muted); text-align: center; }
.ref-adv { font-size: 11px; color: var(--text); padding: 7px 9px; text-align: left; background: var(--surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-vid { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.6); color: #fff; border-radius: 999px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.ref-empty { grid-column: 1/-1; text-align: center; color: var(--faint); padding: 40px 20px; font-size: 14px; }
.ref-scope-sub { color: var(--faint); }
.ref-fresh { position: absolute; top: 8px; right: 8px; background: var(--accent); color: #06120a; font-size: 10px; font-weight: 700; letter-spacing: .02em; padding: 2px 7px; border-radius: 999px; z-index: 1; }
/* Live-search escalation row — clearly separated from the local matches; its own surface, not the grid */
.ref-escalate { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 11px 14px; background: var(--bg-2); border: 1px dashed var(--border); border-radius: 12px; }
.ref-escalate.hidden { display: none; }
.ref-esc-lead { font-size: 13px; color: var(--text); min-width: 0; }
.ref-esc-done { font-size: 13px; color: var(--muted); min-width: 0; }
.ref-esc-btn { flex: 0 0 auto; white-space: nowrap; }
.ref-esc-btn:disabled { opacity: .6; cursor: default; }
.ref-esc-adspy { flex: 1 0 100%; font-size: 12px; color: var(--muted); } /* secondary escape hatch — wraps to its own line under the primary CTA */
.ref-esc-adspy:hover { color: var(--accent-text); }

/* ============== Create canvas: action-first + model picker (logos, More dropdown) ============== */
/* lead with the generate controls; tuck the writeup into a collapsible */
.cr-head h3 { font-size: 1.08rem; line-height: 1.32; margin: 6px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cr-genwrap { margin-top: 4px; }
.cr-details { margin-top: 16px; border-top: 1px solid var(--border); }
.cr-details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 2px 4px; color: var(--muted); font-weight: 600; font-size: 13px; }
.cr-details > summary::-webkit-details-marker { display: none; }
.cr-details > summary:hover { color: var(--text); }
.cr-det-x { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-2); color: var(--muted); transition: transform .18s, color .15s, border-color .15s; }
.cr-det-x svg { display: block; }
.cr-details > summary:hover .cr-det-x { color: var(--text); border-color: var(--border-2); }
.cr-details:not([open]) .cr-det-x { transform: rotate(-90deg); }
.cr-det-body { padding: 6px 0 2px; }
.cr-refine { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 16px; }
.cr-refine-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }

/* provider logos on model pills */
.gen-logo { width: 13px; height: 13px; flex: 0 0 auto; }
.gen-ctl:has(.gen-models) { flex-basis: 100%; }
.gen-models { flex-wrap: wrap; max-width: 100%; }
.gen-mpill { display: inline-flex; align-items: center; gap: 6px; }
.gen-best { font-style: normal; color: var(--accent-text); }
.gen-mpill.active .gen-best { color: var(--accent-ink); }

/* "More models ▾" dropdown */
.gen-morewrap { position: relative; display: inline-flex; }
.gen-more { color: var(--faint); }
.gen-more:hover { color: var(--text); }
.gen-morepop { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; min-width: 320px; max-width: 380px; max-height: 360px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-2); border-radius: 14px; padding: 7px; box-shadow: 0 26px 64px -24px rgba(0,0,0,.8); animation: genIn .12s ease; }
.gen-morepop[hidden] { display: none; }
.gen-mp-grp { padding: 2px; }
.gen-mp-grp + .gen-mp-grp { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 6px; }
.gen-mp-h { display: flex; align-items: center; gap: 7px; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); padding: 6px 9px 5px; }
.gen-mp-it { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 8px 10px; border-radius: 9px; cursor: pointer; }
.gen-mp-it:hover { background: var(--bg-2); }
.gen-mp-it.active { background: color-mix(in oklab, var(--accent) 12%, transparent); }
.gen-mp-l { font-size: 13px; font-weight: 600; }
.gen-mp-c { font-size: 11px; color: var(--accent-text); font-weight: 700; font-variant-numeric: tabular-nums; align-self: center; }
.gen-mp-n { grid-column: 1 / -1; font-size: 11.5px; color: var(--faint); margin-top: 1px; }

/* clearer "what am I making" format label + example format tags */
.cc-fmt-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.cc-ex-tag { margin-right: 8px; opacity: .9; }

/* ============== Ad Search: sticky "Get ads" bar + compact hero after a search ============== */
/* the platform/sort controls + Get ads stay pinned so the user never has to scroll to find them */
.fetch-bar { position: sticky; bottom: 14px; z-index: 25; margin-top: 18px; padding: 12px 14px; border: 1px solid var(--border-2); border-radius: 14px; background: color-mix(in oklab, var(--surface-2) 92%, transparent); backdrop-filter: blur(12px); box-shadow: 0 16px 40px -18px rgba(0,0,0,.75); }
.fetch-bar #fetchAllBtn { margin-left: auto; }
/* once a search has run, drop the marketing copy + quick-starts and shrink the mode cards so results sit high */
.searched .hero-sub, .searched #searchHelp, .searched #quickStarts { display: none; }
.searched .hero { padding-bottom: 8px; }
.searched .hero h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 6px; }
/* ── Audit B: header type tiers (hero / marketing / utility) ── */
/* Utility (Library, Swipefile): smaller, calm, left */
#tab-library .hero h1, #tab-swipe .hero h1 { font-size: 28px; letter-spacing: -0.02em; margin-bottom: 6px; }
/* Every hero accents its key word in coral italic — uniform pattern across Ad Radar / Library / Swipefile / Explore */
/* Marketing (Ad Radar): 32px, coral italic stays on "stealing" */
#tab-inspire .hero h1 { font-size: 32px; letter-spacing: -0.025em; }
.searched .intent-card .ic-desc { display: none; }
.searched .intent-cards { margin-bottom: 12px; }

/* ============== Fixed-viewport chat tabs (Create + Muse) — Higgsfield / LLM-chat style ============== */
/* the whole page no longer scrolls on these tabs; the message area scrolls internally and the composer is pinned */
body.chat-mode { overflow: hidden; }
body.chat-mode .app { height: 100vh; }
body.chat-mode .main { height: 100vh; min-height: 0; overflow: hidden; }
body.chat-mode .panels { flex: 1; min-height: 0; display: flex; }
body.chat-mode .tab-panel.active { width: 100%; max-width: none; height: 100%; min-height: 0; margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; animation: none; }

/* ---- Create ---- */
/* EMPTY (landing): a normal scrolling page — one wide composer (greeting + examples), then the
   "inspiration to remix" gallery below. NOT chat-mode, so the page scrolls like before. */
#tab-create:not(.creating) { padding: 12px 16px 80px; }
#tab-create:not(.creating) .cc { grid-template-columns: 1fr; max-width: none; margin: 0; min-height: 0; }
#tab-create:not(.creating) .cc .cc-right, #tab-create:not(.creating) .cc-split { display: none; } /* single-column start screen → no divider */
#tab-create:not(.creating) .cc-left { min-height: 0; }
#tab-create:not(.creating) .cc-thread { min-height: 0; max-height: none; flex: 0 0 auto; padding: 10px 16px; }
#tab-create:not(.creating) #createExamples { display: block; max-width: none; margin: 18px 0 0; }
/* Higgsfield-style CONTAINED hero panel: the dot-grid + a STRONG lime field live INSIDE the studio panel (clipped to
   its rounded border), NOT spilling across the whole page. Green pools toward the bottom, behind the composer. */
/* Hero field (Claude Design): ONE direction in both themes — a soft coral pool anchored bottom-center,
   behind the composer, pointing at the primary action. Dots are texture INSIDE that pool, masked to fade out except near the bottom. */
#tab-create:not(.creating) .cc { position: relative; padding: 20px 34px 22px; border: 0; background: none; }
/* The coral glow lives on its OWN layer (not the panel background) so we can fade its TOP edge — a background
   radial gets clipped at the panel's top edge and the faint top cut off into a hard line. The mask fades the
   glow in over the top ~90px so it dissolves into the page instead of stopping abruptly. Anchored up top (~32%),
   transparent so the body grid shows through; content sits above via z-index. */
#tab-create:not(.creating) .cc::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(85% 62% at 50% 32%, rgba(216, 92, 66, 0.16), rgba(216, 92, 66, 0.03) 48%, transparent 70%);
  -webkit-mask: linear-gradient(to bottom, transparent 0, #000 90px);
          mask: linear-gradient(to bottom, transparent 0, #000 90px);
}
#tab-create:not(.creating) .cc > * { position: relative; z-index: 1; }
body.light #tab-create:not(.creating) .cc::before {
  background: radial-gradient(85% 62% at 50% 32%, rgba(216, 92, 66, 0.07), transparent 70%);
}
/* warm taupe help text (AA on cream), not the cool grey --muted */
body.light .cc-substart { color: #6F635C; }
body.light .cc-finehint { color: #A89E96; } /* legal microcopy recedes — quieter than the readable subtitle (Claude Design) */
/* elevate the landing composer into a premium FLOATING card (Higgsfield-style depth) — soft drop shadow + faint
   accent glow beneath, lifting it off the page; brighter accent ring on focus. Scoped to the landing only. */
#tab-create:not(.creating) .cc-composer { border-radius: 18px; box-shadow: 0 18px 44px -30px rgba(0,0,0,.55); transition: box-shadow .2s, border-color .2s; } /* soft dark float only — no coral glow-beneath (was highlighting the disclaimer) */
#tab-create:not(.creating) .cc-composer:focus-within { border-color: color-mix(in oklab, var(--accent) 30%, var(--border)); box-shadow: 0 18px 44px -28px rgba(0,0,0,.6), 0 0 0 3px color-mix(in oklab, var(--accent) 9%, transparent); }
/* CREATING (active): fullscreen fixed two-pane — thread (scrolls) + canvas (scrolls), composer pinned; inspiration gone */
body.chat-mode #tab-create.creating #createMain { flex: 1; min-height: 0; display: flex; overflow: hidden; }
body.chat-mode #tab-create.creating #createExamples { display: none; }
/* default = single centered conversation column */
body.chat-mode #tab-create.creating .cc { flex: 1; min-height: 0; height: 100%; display: flex; justify-content: center; gap: 0; padding: 0 24px; max-width: none; margin: 0; }
body.chat-mode #tab-create.creating .cc-left { height: 100%; min-height: 0; width: 100%; max-width: 860px; }
body.chat-mode #tab-create.creating .cc-thread { flex: 1; min-height: 0; max-height: none; }
body.chat-mode #tab-create.creating:not(.has-gallery) .cc-right { display: none; }
/* only SPLIT once a generation exists — chat narrows left, gallery appears right */
/* THREE columns: chat | split | gallery. The middle 16px column HOLDS the drag-divider (.cc-split) so it has its own
   track instead of stealing the gallery's column and wrapping it to row 2 (the "gallery below / right pane blank" bug),
   AND uses the resizable --cc-l/--cc-r custom props the split's drag handler sets, so you can drag to resize chat vs
   gallery (double-click resets). gap:0 — the 16px split track IS the gutter. */
body.chat-mode #tab-create.creating.has-gallery .cc { display: grid; grid-template-columns: minmax(320px, var(--cc-l, 1fr)) 16px minmax(0, var(--cc-r, 1.35fr)); gap: 0; padding: 0 16px 0; }
body.chat-mode #tab-create.creating.has-gallery .cc-left { max-width: none; }
body.chat-mode #tab-create.creating.has-gallery .cc-right { display: block; height: 100%; min-height: 0; max-height: none; }
/* Resilience: keep the two-pane split even if body.chat-mode ever desyncs from has-gallery (async gallery render, tab churn).
   Without this, .cc fell back to the base 3-col grid — or, at ≤900px, the media-query single column — so the gallery (#createResult,
   still display:block) stacked UNDER the composer with the right pane blank. Keyed without body.chat-mode + a higher-specificity
   id selector so it wins over the @media (max-width:900px) single-column rule. */
#tab-create.creating.has-gallery .cc { display: grid; grid-template-columns: minmax(320px, var(--cc-l, 1fr)) 16px minmax(0, var(--cc-r, 1.35fr)); gap: 0; padding: 0 16px 0; }
#tab-create.creating.has-gallery .cc-left { max-width: none; }
#tab-create.creating.has-gallery .cc-right { display: block; min-height: 0; }
/* PHONE: the has-gallery rules above force the 3-col desktop grid (min 320px chat + 16px split + gallery) even on a
   narrow screen — on a ~375px phone that starves the gallery to a ~40px sliver, so a user's freshly-generated ad (the
   whole point) is invisible after they paid to make it. Below 700px, stack vertically: chat, then the gallery FULL-WIDTH
   and tall. Placed after (and matching the specificity of) the rules it overrides so it wins without !important juggling. */
@media (max-width: 700px) {
  #tab-create.creating.has-gallery .cc,
  body.chat-mode #tab-create.creating.has-gallery .cc { display: flex; flex-direction: column; gap: 0; padding: 0 12px; }
  #tab-create.creating.has-gallery .cc-left,
  body.chat-mode #tab-create.creating.has-gallery .cc-left { width: 100%; max-width: none; height: auto; min-height: 0; }
  #tab-create.creating.has-gallery .cc-right,
  body.chat-mode #tab-create.creating.has-gallery .cc-right { display: block; width: 100%; height: auto; min-height: 70vh; }
  #tab-create.creating.has-gallery .cc-split { display: none; } /* no side-by-side to drag when stacked */
}

/* drop an image anywhere on the chat column */
.cc-left { position: relative; }
.cc-left.drag::after { content: '⬇  Drop image to attach'; position: absolute; inset: 6px; z-index: 5; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: var(--accent-text); background: color-mix(in oklab, var(--accent) 13%, rgba(8,8,10,.84)); border: 2px dashed var(--accent); border-radius: 14px; backdrop-filter: blur(3px); pointer-events: none; }

/* ---- Muse ---- */
body.chat-mode #tab-explore .chat-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 24px 10px; max-width: 900px; width: 100%; margin: 0 auto; }
body.chat-mode #tab-explore #chatBar { flex: 0 0 auto; position: static; max-width: 820px; width: calc(100% - 48px); margin: 0 auto 18px; }
body.chat-mode #tab-explore.cm-empty .chat-scroll { display: flex; flex-direction: column; justify-content: center; padding-bottom: 24px; }
body.chat-mode #tab-explore.cm-empty .hero { padding: 0 0 16px; }
/* remix modal: search + pull share a toolbar row */
.ref-toolbar { display: flex; gap: 10px; align-items: center; margin: 10px 0 16px; }
.ref-toolbar .ref-search { margin: 0; flex: 1; }
.ref-pull { white-space: nowrap; flex: 0 0 auto; }

/* Card action-icon tooltips float via the body-appended, never-clipped .app-tip engine (initTooltips reads their
   aria-label) — the old :hover::after lived INSIDE .ad .media { overflow:hidden } and got clipped at the card edge /
   drawn over the artwork (Bug 4). position:relative stays for the .saved heart + any badges. */
.act-btn { position: relative; }

/* Ad Search: suggested card shows when it's already in the search queue */
.sg-card.queued { border-color: color-mix(in oklab, var(--accent) 42%, var(--border)); }
.sg-added { background: color-mix(in oklab, var(--accent) 16%, transparent); border-color: color-mix(in oklab, var(--accent) 45%, var(--border)) !important; color: var(--accent-text) !important; font-weight: 700; }

/* compact "Ask first / Auto-run" pill (Higgsfield-style inline dropdown, not a full-width bar) */
.cc-mode { width: auto; flex: 0 0 auto; -webkit-appearance: none; appearance: none; padding: 6px 28px 6px 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%238a8a8a' d='M0 0h10L5 6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 9px; }

/* voice dictation — a clean, minimal inline mic icon (modern LLM composer style) */
.voice-btn { cursor: pointer; transition: .15s; display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.voice-btn svg { display: block; }
/* Muse composer: bare icon, no chrome */
.voice-btn:not(.cc-attachbtn) { background: none; border: 0; color: var(--faint); padding: 8px; border-radius: 10px; align-self: center; flex: 0 0 auto; }
.voice-btn:not(.cc-attachbtn):hover { color: var(--text); background: var(--bg-2); }
/* Create composer: keep the pill chrome (sits among the other composer pills), center the icon */
.voice-btn.cc-attachbtn { padding: 7px 11px; }
.voice-btn.listening { color: var(--accent-text); }
.voice-btn.listening:not(.cc-attachbtn) { background: color-mix(in oklab, var(--accent) 12%, transparent); }
.voice-btn.listening.cc-attachbtn { border-color: var(--accent); }
.voice-btn.listening svg { animation: voicePulse 1.2s ease-in-out infinite; }
@keyframes voicePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.9); } }

/* ad copy / storyboard posted into the chat — full-width single card, not a normal bubble.
   .cc-msg.assistant has 2-class specificity, so we match it (.cc-msg.cc-copymsg) to actually strip the bubble chrome;
   the card border comes from .cr-details alone, and the inner .cr-block must NOT add a second nested border. */
.cc-msg.cc-copymsg { max-width: 100%; width: 100%; background: none; border: 0; padding: 0; }
.cc-copymsg .cr-details { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 2px 14px 12px; margin: 0; }
.cc-copymsg .cr-details > summary { padding: 11px 2px 8px; }
.cc-copymsg .cr-block { border: 0; background: none; padding: 0; }

/* research result cards posted into the chat — break out of the 90% bubble and lay them out 3–4 across (desktop),
   so a fetch of many ads is a dense grid, not a long vertical scroll. */
.cc-msg.cc-results { max-width: 100%; width: 100%; background: none; border: 0; padding: 0; }
/* frame the pulled-ads gallery as ONE inset result block (Claude Design) — reads as a deliberate result attached to the message, not loose cards */
.cc-results .results, .cc-results .sc-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); background: color-mix(in oklab, var(--surface) 45%, transparent); border: 1px solid var(--hairline); border-radius: 14px; padding: 12px; box-shadow: var(--el-card); }

/* ============== Create rebuilt: right = pure gallery; controls live in the composer ============== */
/* gallery — generated media accumulates, newest on top.
   ONE shared dense grid (Higgsfield-style): every batch is display:contents so its tiles flow into
   the same multi-column grid — a single image/video no longer spans the whole pane. */
.cc-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 8px; align-content: start; } /* auto-FIT (not fill): items stretch to fill the row so they're not packed left with empty space on the right; 8px gutter per Claude Design */
.cc-gallery .cr-gen-grid { display: contents; margin: 0; }
/* UNIFORM tiles = a clean grid (CSS grid isn't masonry, so mixed heights look chaotic). Tiles are 9:16
   to match the vertical ad content; contain (not cover) keeps the full creative visible — no cropping. */
.cc-gallery .cr-gen-item { aspect-ratio: 9 / 16; min-height: 0; }
.cc-gallery .cr-gen-item:not(.sheet) { max-width: 280px; justify-self: start; } /* a lone item (e.g. the only video) shouldn't balloon to the full gallery width — cap it to a normal tile size, left-aligned */
/* 0,3,0 specificity so it beats the per-batch cols-N media rules (which force square cover / 560px) */
.cc-gallery .cr-gen-item .cr-genmedia { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: contain; background: var(--bg); } /* letterbox (contain leaves bars on off-ratio media) matches the gallery bg in BOTH themes — was hard #000, which showed as dark bars in light mode */
.cc-gallery .cr-gen-item > .cr-gen-load, .cc-gallery .cr-gen-item > .cr-gen-err { height: 100%; min-height: 0; }
.cc-gallery .cr-gen-item img.cr-genmedia { cursor: zoom-in; }
/* action-button tooltips were clipped by the tile's overflow + stacked under neighbor tiles.
   Let them escape: round the media itself (so corners stay clean without clipping the tile),
   make the tile overflow-visible, and lift the hovered tile above its siblings. */
.cc-gallery .cr-gen-item { overflow: visible; }
.cc-gallery .cr-gen-item .cr-genmedia, .cc-gallery .cr-gen-item > .cr-gen-load, .cc-gallery .cr-gen-item > .cr-gen-err { border-radius: var(--radius); } /* match the app's standard card radius (was the smaller --radius-sm, which read as inconsistent next to other cards) */
.cc-gallery .cr-gen-item:hover, .cc-gallery .cr-gen-item:focus-within { z-index: 30; }
/* the storyboard SHEET is a wide multi-panel board — span the full gallery width at its native 16:9, not a tiny 9:16 crop */
.cc-gallery .cr-gen-item.sheet { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.cc-gallery .cr-gen-item.sheet .cr-genmedia { object-fit: contain; }
/* full-size viewer (click a tile or ⛶) */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.86); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 40px; animation: lbIn .15s ease; }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox-inner { display: flex; max-width: 92vw; max-height: 92vh; }
.lightbox img, .lightbox video { max-width: 92vw; max-height: 92vh; border-radius: 12px; box-shadow: 0 30px 90px -20px rgba(0,0,0,.85); object-fit: contain; }
.lightbox-x { position: absolute; top: 18px; right: 22px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-2); background: var(--surface); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.lightbox-x:hover { border-color: var(--accent); color: var(--accent-text); }
/* prev/next nav in the expanded viewer (also ← / → keys) */
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border-2); background: var(--surface); color: var(--text); font-size: 28px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: .16s; z-index: 2; }
.lightbox-nav:hover { border-color: var(--accent); color: var(--accent-text); background: var(--surface-2); }
.lightbox-prev { left: 22px; } .lightbox-next { right: 22px; }
.lightbox-count { position: absolute; top: 18px; right: 72px; height: 40px; display: grid; place-items: center; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .04em; background: var(--surface); border: 1px solid var(--border-2); border-radius: 999px; padding: 0 16px; } /* same height + baseline as the ✕ beside it */
@media (max-width: 640px) { .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } }
/* product picker (confirm which product before a product-led generation) */
.cc-prodpick .prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0 9px; max-height: 46vh; overflow-y: auto; padding-right: 2px; } /* scroll when a site has many products — the footer (upload/skip) stays put below */
.cc-prodpick .prod-cell { position: relative; padding: 0; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; cursor: pointer; aspect-ratio: 1 / 1; background: var(--bg-2); transition: border-color .15s, transform .1s; }
.cc-prodpick .prod-cell-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 7px 5px; font-size: 10.5px; line-height: 1.25; font-weight: 600; color: #fff; text-align: left; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.55) 60%, transparent); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; pointer-events: none; }
/* talking-avatar / creator picker: section labels + voice chips that carry a tone descriptor (so the names mean something) */
.cc-prodpick .av-voice-l { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 4px 0 7px; }
.cc-prodpick .av-voice { display: inline-flex; align-items: center; gap: 7px; }
.cc-prodpick .av-voice .av-voice-d { font-size: 11px; font-weight: 400; color: var(--muted); }
.cc-prodpick .av-voice.on .av-voice-d { color: var(--accent-ink); opacity: .82; }
/* ▶ audition button inside a voice chip — a real, obviously-clickable affordance */
.cc-prodpick .av-voice-play { display: inline-grid; place-items: center; width: 19px; height: 19px; flex: none; border-radius: 50%; background: color-mix(in oklab, currentColor 14%, transparent); color: inherit; font-size: 8.5px; line-height: 1; cursor: pointer; transition: transform .12s, background .12s; }
.cc-prodpick .av-voice-play:hover { background: color-mix(in oklab, currentColor 26%, transparent); transform: scale(1.12); }
.cc-prodpick .av-voice.on .av-voice-play { background: color-mix(in oklab, var(--accent-ink) 20%, transparent); }
.cc-prodpick .av-voice-play.loading { animation: avVoicePulse .8s ease-in-out infinite; }
.cc-prodpick .av-voice-play.playing { background: currentColor; color: var(--surface); }
@keyframes avVoicePulse { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
.cc-prodpick .prod-cell:hover { border-color: var(--accent); transform: translateY(-1px); }
.cc-prodpick .prod-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-prodpick .prod-cell.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; position: relative; }
.cc-prodpick.multi .prod-cell.sel::after { content: '✓'; position: absolute; top: 5px; right: 7px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 13px; font-weight: 800; color: #06210f; background: var(--accent); border-radius: 50%; }
.cc-prodpick .prod-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
/* dynamic clarifying question chips */
.cc-clarify-opts { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.cc-clarify .cc-chip-skip { opacity: .85; }
/* Skills "credits" — which playbooks shaped the ad + an optional lean-into nudge (makes the library feel alive) */
.cc-msg.cc-credits { max-width: 100%; width: 100%; background: none; border: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cc-shaped { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.cc-shaped-l { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); font-weight: 700; }
.cc-skillchip { background: var(--surface); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; }
.cc-skillchip:hover { border-color: var(--accent); color: var(--accent-text); }
.chip-ic { display: inline-flex; align-items: center; margin-right: 5px; vertical-align: -2px; }
.chip-ic svg { width: 13px; height: 13px; opacity: .9; }
/* generic inline label icon — inherits color, sits on the text baseline */
.lic { display: inline-flex; align-items: center; vertical-align: -2px; }
.lic svg { width: 14px; height: 14px; opacity: .9; }
.cc-skillsug { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: color-mix(in oklab, var(--accent) 7%, var(--surface)); border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--border)); border-radius: 12px; padding: 10px 12px; }
.cc-skillsug-tx { font-size: 13px; color: var(--text); flex: 1; min-width: 180px; line-height: 1.4; }
.cc-skillsug-go { flex: 0 0 auto; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: filter .15s; }
.cc-skillsug-go:hover { filter: brightness(1.06); }
.cc-skillsug-go:disabled { opacity: .6; cursor: default; }
/* avatar thumbs (delete on hover) */
.cc-prodpick .prod-cell-wrap { position: relative; }
.cc-prodpick .av-del { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.7); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: .12s; display: grid; place-items: center; }
.cc-prodpick .prod-cell-wrap:hover .av-del { opacity: 1; }
.cc-prodpick .av-del:hover { background: var(--danger); }
/* "✦ Generate" prompt that drops into the chat (ask-first mode) */
.cc-genmsg { max-width: 100%; width: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: none; border: 0; padding: 2px 0; color: var(--muted); font-size: 14px; }
.cc-genmsg .primary-mini { flex: 0 0 auto; }
/* inline credit estimate in the composer */
.cc-est-inline { font-size: 11px; color: var(--accent-text); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-est-inline:empty { display: none; }
/* composer ⚙ Model & size popover (the generation controls, off the canvas) */
.cc-optwrap { position: relative; display: inline-flex; }
.cc-optpop { position: absolute; z-index: 70; bottom: calc(100% + 8px); left: 0; width: 340px; max-width: 86vw; max-height: 60vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-2); border-radius: 14px; padding: 12px 14px; box-shadow: 0 26px 64px -24px rgba(0,0,0,.8); animation: genIn .12s ease; }
.cc-optpop[hidden] { display: none; }
.cc-optpop .gen-controls { margin: 0; border: 0; padding: 0; background: none; flex-direction: column; align-items: stretch; gap: 13px; }
.cc-optpop .gen-est { margin-left: 0; }
.cc-optpop .gen-ctl { flex-wrap: wrap; }

/* ============== Create: pinned action bar + simplified composer ============== */
/* the next step (Generate) stays pinned above the composer — always obvious + reachable while scrolling */
.cc-action { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; padding: 10px 14px; border: 1px solid color-mix(in oklab, var(--accent) 42%, var(--border)); border-radius: 14px; background: color-mix(in oklab, var(--accent) 9%, var(--surface)); animation: genIn .14s ease; }
.cc-action[hidden] { display: none; }
/* BUG-9: while a plan-replacing turn runs, the pinned Generate card is greyed + non-interactive ("Updating the plan…") so a stale render can't be fired mid-reauthor */
.cc-action.cc-action-updating { opacity: .5; pointer-events: none; position: relative; filter: saturate(.5); }
.cc-action.cc-action-updating::after { content: 'Updating the plan…'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--muted); background: color-mix(in oklab, var(--surface) 72%, transparent); border-radius: inherit; }
.cc-act-lbl { font-size: 13px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 7px; }
.cc-act-lbl::before { content: '✦'; } /* monochrome ✦ inherits the label's own colour in both themes (the ✋ emoji rendered full-colour + washed out on the pale-lime approval bar) */
.cc-act-spacer { flex: 1 1 auto; }
/* keep Auto-run · Not now · Generate together and pinned right — they wrap as a unit, never drop to the left */
.cc-act-actions { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.cc-act-chips { display: inline-flex; gap: 3px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
.cc-chip { border: 0; background: none; color: var(--muted); padding: 4px 10px; border-radius: 999px; font-size: 12px; cursor: pointer; font-variant-numeric: tabular-nums; }
.cc-chip.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.cc-act-allow { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 7px 13px; font-size: 12px; cursor: pointer; transition: .15s; }
.cc-act-allow:hover { color: var(--text); border-color: var(--border-2); }
/* "Not now" → quiet ghost link, so the coral primary action stands alone (Claude Design: rank the actions) */
.cc-act-cancel { background: none; border: 0; color: var(--muted); border-radius: 8px; padding: 7px 11px; font-size: 12px; cursor: pointer; transition: .15s; }
.cc-act-cancel:hover { color: var(--text); background: var(--tap); }
.cc-act-go.primary { padding: 9px 17px; border-radius: 11px; font-size: 13px; white-space: nowrap; background: var(--accent); box-shadow: var(--el-glow); transition: background var(--t-micro), transform var(--t-micro); }
/* no expanding-glow flash on hover (the .primary base pumps the box-shadow) — flat fill, constant shadow, tiny lift */
.cc-act-go.primary:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: var(--el-glow); }
.cc-act-go.primary:active { transform: translateY(0); }
/* secondary agent-offered buttons (non-primary) — a clear, readable pill, not a faded default */
.cc-act-go:not(.primary) { padding: 9px 15px; border-radius: 11px; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); transition: .15s; }
.cc-act-go:not(.primary):hover { border-color: var(--accent); color: var(--accent-text); background: color-mix(in oklab, var(--accent) 12%, var(--surface-2)); }

/* composer "+" menu (upload / remix / new) */
.cc-pluswrap { position: relative; display: inline-flex; }
.cc-plus { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 18px; line-height: 0; cursor: pointer; transition: .15s; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03); }
.cc-plus:hover { border-color: var(--border-2); }
.cc-plus:hover { border-color: var(--accent); color: var(--accent-text); }
.cc-plusmenu { position: absolute; z-index: 70; bottom: calc(100% + 8px); left: 0; min-width: 220px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; padding: 6px; box-shadow: 0 22px 56px -22px rgba(0,0,0,.8); animation: genIn .12s ease; }
.cc-plusmenu[hidden] { display: none; }
.cc-plusmenu button { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 9px 11px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.cc-plusmenu button:hover { background: var(--bg-2); }
/* nested "Import from…" flyout in the + menu (Higgsfield-style) — opens to the right on hover or click, so
   connectors/imports can grow without lengthening the top menu. */
.cc-subwrap { position: relative; }
.cc-plusmenu .cc-hassub { display: flex; align-items: center; }
.cc-plusmenu .cc-hassub .cc-caret { margin-left: auto; padding-left: 10px; color: var(--faint); font-size: 15px; line-height: 1; }
.cc-submenu { position: absolute; left: calc(100% + 5px); top: -6px; min-width: 208px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; padding: 6px; box-shadow: 0 22px 56px -22px rgba(0,0,0,.8); display: none; animation: genIn .12s ease; z-index: 71; }
.cc-submenu-wide { min-width: 288px; } /* the "Make a standalone video" flyout carries per-item descriptions */
/* a capability-gated menu item (#pmClip / #pmExplain) is toggled via the `hidden` attr — but `.cc-plusmenu button { display:block }`
   is an AUTHOR rule that beats the UA `[hidden]` rule, so without this the gated items would show even when their capability is off */
.cc-plusmenu button[hidden] { display: none; }
.cc-subwrap:has(> .cc-submenu > button:not([hidden])) { display: block; } /* keep the group visible as long as ≥1 child is available (Talking-head always is) */
.cc-subwrap:hover > .cc-submenu, .cc-subwrap.open > .cc-submenu { display: block; }
.cc-subwrap.open > .cc-hassub, .cc-plusmenu .cc-hassub:hover { background: var(--bg-2); }
@media (max-width: 720px) { .cc-submenu { left: auto; right: calc(100% + 5px); } } /* flip left on narrow screens so it never runs off-edge */

/* Google Picker: force viewport-fixed + centered so opening it never scrolls the page (its default absolute
   positioning made the whole page jump to the dialog on open). */
.picker-dialog-bg { position: fixed !important; z-index: 100000 !important; }
.picker-dialog { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; z-index: 100001 !important; }

/* Connectors sub-tabs — "Your tools" | "Use Hermoso in any AI" (MCP & CLI merged into one tab); mirrors .bsub */
.conn-subtabs { display: flex; gap: 24px; border-bottom: 1px solid var(--hairline); margin: 4px 0 0; }
.conn-subtab { background: none; border: 0; color: var(--muted); padding: 12px 0; font-size: 14px; font-weight: 600; cursor: pointer; position: relative; box-shadow: none; transition: color var(--t-micro); }
.conn-subtab:hover { color: var(--text); }
.conn-subtab.active { color: var(--text); }
.conn-subtab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; }

/* clipper (#288) — source-pick modal + ranked clip board */
.clip-modal { max-width: 560px; width: min(560px, 94vw); }
.clip-modal.clip-results { max-width: 740px; width: min(740px, 96vw); }
.clip-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; max-height: 172px; overflow-y: auto; margin: 5px 0 0; padding: 2px; }
.clip-pick { padding: 0; border: 2px solid transparent; border-radius: 9px; overflow: hidden; cursor: pointer; background: var(--bg-2); aspect-ratio: 9 / 16; }
.clip-pick video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.clip-pick.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
.clip-or { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin: 12px 0 6px; }
.clip-or::before, .clip-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.clip-opts { display: flex; gap: 26px; margin-top: 12px; flex-wrap: wrap; }
.clip-chips { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.clip-loading { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 26px 14px 20px; }
.clip-count { font-size: 13px; color: var(--accent-text); font-weight: 700; margin-left: 3px; }
.clip-board { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-height: 62vh; overflow-y: auto; margin: 4px 0; padding: 2px; }
@media (max-width: 560px) { .clip-board { grid-template-columns: 1fr; } }
.clip-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface-2); display: flex; flex-direction: column; }
.clip-vid { position: relative; aspect-ratio: 9 / 16; background: #000; max-height: 300px; }
.clip-vid video { width: 100%; height: 100%; object-fit: contain; display: block; }
.clip-rank { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.clip-score { position: absolute; top: 8px; right: 8px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; box-shadow: 0 0 12px var(--accent-glow); }
.clip-info { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 5px; }
.clip-title { font-weight: 650; font-size: 13.5px; display: flex; align-items: baseline; gap: 7px; }
.clip-dur { color: var(--faint); font-size: 11px; font-weight: 500; margin-left: auto; white-space: nowrap; }
.clip-reason { color: var(--muted); font-size: 12px; line-height: 1.4; }
.clip-cap { color: var(--text); font-size: 11.5px; line-height: 1.4; background: var(--bg-2); border-radius: 7px; padding: 6px 8px; }
.clip-acts { display: flex; gap: 8px; margin-top: 3px; }
.clip-acts .mini { text-decoration: none; }
/* orchestrator picker — modes + Claude model list, with a selected (✓) state */
.cc-orchwrap { position: relative; display: inline-flex; }
.cc-orchbtn { display: inline-flex; align-items: center; gap: 5px; }
.cc-orchmenu { min-width: 252px; }
.cc-orchmenu button { display: flex; flex-direction: column; gap: 1px; padding: 8px 11px; }
.cc-orchmenu button b { font-weight: 650; font-size: 13px; display: flex; align-items: center; } /* flex row so the ✓ badge centers vertically against the label text */
.cc-orchmenu button small { color: var(--muted); font-size: 11.5px; }
.orch-brand { width: 14px; height: 14px; flex: 0 0 auto; color: var(--text); } /* the Claude logo beside the section header */
.cc-orchmenu button.on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
/* selected check: a FILLED lime badge with dark ink (the app's standard selection pairing) — a bare lime ✓ on the
   pale-lime .on row washed out. Reads clearly + matches the product-picker / sel-dot affordances. */
.cc-orchmenu button.on b::after { content: '✓'; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 7px; font-size: 9.5px; font-weight: 900; line-height: 1; color: var(--accent-ink); background: var(--accent); border-radius: 50%; box-shadow: 0 0 10px var(--accent-glow); }
.cc-orch-sep { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 700; padding: 8px 11px 4px; border-top: 1px solid var(--border); margin-top: 4px; }

/* composer model pill */
.cc-modelpill { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 6px 12px; font-size: 12px; cursor: pointer; transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03); }
.cc-modelpill:hover { border-color: var(--border-2); }
.cc-mp-spark { color: var(--accent-text); }
.cc-mp-caret { color: var(--faint); font-size: 10px; }

/* always-visible "Buy credits" in the top bar */
.topstrip { align-items: center; }
.buy-credits { order: -1; margin-right: auto; background: color-mix(in oklab, var(--accent) 14%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--border)); color: var(--accent-text); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer; transition: .15s; }
.buy-credits:hover { background: var(--accent); color: var(--accent-ink); }

/* sequential agent "skill" steps in the chat (active = spinner, done = ✓) — plain rows, no bubble chrome.
   Match .cc-msg's 2-class specificity so the borderless style wins over .cc-msg.assistant. */
/* Loading = a vertical TIMELINE rail (Claude Design): the rail fills coral as steps complete; current step is a
   hollow coral ring with a breathing halo (not a spinner); done = coral dot + check + muted; pending = faint. */
.cc-msg.cc-steps { background: none !important; border: 0; padding: 4px 2px; display: flex; flex-direction: column; gap: 0; max-width: 100%; box-shadow: none; }
.cc-steps-head { font-weight: 600; }
.cc-step { display: flex; align-items: center; gap: 11px; font-size: 13px; color: var(--faint); position: relative; padding: 5px 0; transition: color .2s; }
.cc-step:not(:last-child)::before { content: ''; position: absolute; left: 6.5px; top: 18px; bottom: -5px; width: 2px; background: var(--border-2); border-radius: 2px; transition: background .3s; }
.cc-step.done:not(:last-child)::before { background: var(--accent); }
.cc-step-ic { width: 15px; height: 15px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid var(--border-2); position: relative; box-sizing: border-box; z-index: 1; background: var(--bg); }
.cc-step.active { color: var(--text); font-weight: 600; }
.cc-step.active .cc-step-ic { border-color: var(--accent); border-width: 2px; animation: ccHalo 1.7s ease-in-out infinite; }
@keyframes ccHalo { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 7%, transparent); } }
@media (prefers-reduced-motion: reduce) { .cc-step.active .cc-step-ic { animation: none; box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 14%, transparent); } }
.cc-step.done { color: var(--muted); }
.cc-step.done .cc-step-ic { border-color: var(--accent); background: var(--accent); animation: none; }
.cc-step.done .cc-step-ic::after { content: '✓'; position: absolute; inset: -1px; display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--accent-ink); font-weight: 900; }
@keyframes ccspin { to { transform: rotate(360deg); } }

/* editable param chips on the action bar + their pickers (model · aspect) */
.cc-pchip { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 5px 10px; font-size: 12px; cursor: pointer; transition: .15s; white-space: nowrap; }
.cc-pchip:hover { border-color: var(--accent); }
.cc-pchip .gen-logo, .cc-pchip .gen-lm { width: 13px; height: 13px; }
.cc-pcaret { width: 12px; height: 12px; color: var(--faint); opacity: .8; flex: none; transition: transform .15s; }
/* Advanced reveal: render knobs are smart-auto by default, tucked behind this toggle (Higgsfield-style) */
.cc-adv-toggle { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; color: var(--muted); border-radius: 999px; padding: 5px 8px; font-size: 12px; cursor: pointer; transition: .15s; white-space: nowrap; }
.cc-adv-toggle:hover { color: var(--text); }
.cc-adv-toggle.open { color: var(--text); }
.cc-adv-toggle.open .cc-pcaret { transform: rotate(180deg); }
.cc-adv { display: inline-flex; align-items: center; gap: 6px; }
.cc-adv[hidden] { display: none; }
.cc-chippop { position: fixed; z-index: 200; min-width: 150px; max-height: 300px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; padding: 6px; box-shadow: 0 22px 56px -22px rgba(0,0,0,.8); animation: genIn .12s ease; }
.cc-chippop-it { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 8px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.cc-chippop-it:hover { background: var(--bg-2); }
.cc-chippop-it.on { background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent-text); font-weight: 700; }
.cc-chippop-it .gen-lm { width: 14px; height: 14px; }

/* gallery tile hover actions (download · save · use-as-reference · more-like) */
.cr-gen-item { position: relative; }
.gen-acts { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; opacity: 0; transform: translateY(-3px); transition: opacity .15s, transform .15s; z-index: 4; }
.cr-gen-item:hover .gen-acts, .cr-gen-item:focus-within .gen-acts { opacity: 1; transform: none; }
.gen-acts:has(.gen-morepop:not([hidden])) { z-index: 40; } /* an OPEN actions menu must outrank the hover CTA bar (gen-acts z:4 trapped the menu's z:60 in a low stacking context) */
.cr-gen-item:has(.gen-morepop:not([hidden])) .gen-addchat { opacity: 0; pointer-events: none; } /* and the lime bar gets out of the way entirely while a menu is open */
.gen-acts .act-btn { background: rgba(0,0,0,.62); backdrop-filter: blur(6px); border: 0; color: #fff; width: 27px; height: 27px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; text-decoration: none; transition: background .15s; }
/* Higgsfield-style tile chrome: select checkbox (top-left), ⋯ more-menu, prominent bottom "Add to chat", bulk-select bar */
.gen-sel { position: absolute; top: 8px; left: 8px; z-index: 6; margin: 0; opacity: 0; transition: opacity .15s; cursor: pointer; }
.cr-gen-item:hover .gen-sel, .cr-gen-item.sel .gen-sel { opacity: 1; }
.gen-sel input { width: 19px; height: 19px; accent-color: var(--accent); cursor: pointer; display: block; }
.cr-gen-item.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
.gen-more-wrap { position: relative; display: inline-flex; }
.gen-morepop-acts { min-width: 248px; max-width: 340px; left: auto; right: 0; }
.gen-morepop-acts .gen-mi { display: flex; width: 100%; gap: 9px; align-items: flex-start; background: none; border: 0; color: var(--text); padding: 9px 10px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 13px; text-align: left; text-decoration: none; white-space: normal; overflow-wrap: anywhere; } /* labels WRAP to two lines (icon top-aligned) — a long item like "Reframe for placements (9:16 · 1:1 · 16:9)" must not spill past the menu and force the gallery to scroll horizontally */
.gen-morepop-acts .gen-mi span, .gen-morepop-acts .gen-mi { line-height: 1.25; }
.gen-morepop-acts .gen-mi:hover { background: var(--bg-2); }
.gen-morepop-acts .gen-mi svg { flex: 0 0 18px; width: 18px; height: 18px; opacity: .85; } /* fixed slot so every label starts at the same x (icons have different intrinsic widths) */
/* vision-review warning badge on a tile */
.gen-review { position: absolute; top: 8px; left: 8px; z-index: 7; border: 0; border-radius: 999px; padding: 4px 10px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px -6px rgba(0,0,0,.7); animation: genIn .2s ease; }
.gen-review:hover { filter: brightness(1.08); }
/* auto-fix in progress on a tile (the closed review→fix loop) */
.gen-fixing { position: relative; }
.gen-fixing::after { content: '✦ fixing…'; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8,8,10,.55); backdrop-filter: blur(2px); color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .03em; border-radius: inherit; z-index: 6; animation: genIn .2s ease; }
/* Skills: create-your-own form — bigger "what it does" field (skills are larger than a one-liner) */
.skill-add { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.skill-add input, .skill-add textarea { width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--border-2); background: var(--bg-2); color: var(--text); font: inherit; font-size: 13.5px; }
.skill-add textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.skill-add input:focus, .skill-add textarea:focus { outline: none; border-color: var(--accent); }
.skill-add .primary { align-self: flex-start; }
.rev-issues { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--muted); display: flex; flex-direction: column; gap: 5px; }
.gen-addchat { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 4; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; border: 0; border-radius: 9px; padding: 8px 10px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 12.5px; cursor: pointer; backdrop-filter: blur(6px); box-shadow: 0 8px 22px -10px rgba(0,0,0,.7); }
.cr-gen-item:hover .gen-addchat, .cr-gen-item:focus-within .gen-addchat { opacity: 1; transform: none; }
.gen-addchat:hover { filter: brightness(1.06); }
/* video tiles: the top-row "Add to chat" gets the same lime as the photo button, so it reads as the same action */
.gen-acts button.gen-addchat-top { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 800; font-size: 16px; } /* icon-only ＋ (leftmost), standard act-btn size — keeps the lime accent so it reads as the primary action */
.gen-acts button.gen-addchat-top:hover { background: var(--accent); color: var(--accent-ink); filter: brightness(1.06); transform: scale(1.1); }
#genSelBar { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 600; display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 999px; padding: 7px 9px 7px 18px; box-shadow: 0 20px 54px -18px rgba(0,0,0,.82); animation: genIn .15s ease; }
#genSelBar span { font-weight: 600; font-size: 13px; white-space: nowrap; }
#genSelBar .primary { border: 0; border-radius: 999px; padding: 9px 17px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 13px; cursor: pointer; }
#genSelBar .gen-selx { border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 4px 6px; }
#genSelBar .gen-selx:hover { color: var(--text); }

/* ===== Memory panel ===== */
.mem-add { display: flex; gap: 10px; margin-top: 14px; }
.mem-add input, .mem-add textarea { flex: 1; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--border-2); background: var(--bg-2); color: var(--text); font: inherit; font-size: 13.5px; }
.mem-add textarea { resize: vertical; min-height: 46px; line-height: 1.5; }
.mem-add input:focus, .mem-add textarea:focus { outline: none; border-color: var(--accent); }
/* in-app edit modal (replaces native prompt()) */
.edit-modal-ov { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.62); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: lbIn .15s ease; }
.edit-modal { background: var(--surface); border: 1px solid var(--border-2); border-radius: 16px; padding: 20px 20px 18px; width: 100%; max-width: 540px; box-shadow: 0 30px 80px -24px rgba(0,0,0,.85); }
.edit-modal h4 { margin: 0 0 12px; font-size: 16px; }
.edit-modal .em-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin: 12px 0 5px; }
.edit-modal .em-field { width: 100%; box-sizing: border-box; background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 10px; color: var(--text); font: inherit; font-size: 14px; line-height: 1.5; padding: 11px 13px; resize: vertical; }
.edit-modal .em-field:focus { outline: none; border-color: var(--accent); }
.edit-modal-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.edit-modal .em-msg { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.edit-modal-acts .em-danger { background: var(--danger); border-color: transparent; color: #fff; }
.edit-modal-acts .em-danger:hover { filter: brightness(1.08); }
/* BUG 1 (H2H-19) brand-identity confirm gate — reuses .edit-modal; adds the little identity card */
.brand-id-modal .bic-card { display: flex; align-items: center; gap: 13px; margin: 4px 0 14px; padding: 13px 14px; border: 1px solid var(--border-2); border-radius: 12px; background: var(--bg-2); }
.brand-id-modal .bic-logo { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--border-2); }
.brand-id-modal .bic-logo-mono { display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--text); font-weight: 700; font-size: 20px; }
.brand-id-modal .bic-t { min-width: 0; }
.brand-id-modal .bic-name { font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.brand-id-modal .bic-sum { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mem-list { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.mem-grp-h { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin: 0 0 8px 2px; }
.mem-item { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px; margin-bottom: 8px; transition: border-color .15s; }
.mem-item:hover { border-color: var(--border-2); }
.mem-text { flex: 1; font-size: 13.5px; line-height: 1.45; color: var(--text); cursor: text; }
.mem-text:hover { color: var(--accent-text); }
.mem-auto { font-size: 12px; color: var(--accent-text); flex: 0 0 auto; }
.mem-x { flex: 0 0 auto; background: none; border: 0; color: var(--faint); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 7px; border-radius: 7px; }
.mem-x:hover { color: var(--danger); background: var(--bg-2); }

/* ===== Skills panel ===== */
.skill-add input:first-of-type { min-width: 360px; max-width: 440px; flex: 0 0 auto; }
.skills-list { display: flex; flex-direction: column; gap: 22px; margin-top: 8px; }
.skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.skill-card { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 14px; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s; }
.skill-card:hover { border-color: var(--border-2); }
.skill-card.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.skill-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.skill-h b { font-size: 14px; }
.skill-kind { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; }
.skill-mine { font-size: 10px; font-weight: 700; color: var(--accent-text); }
.skill-desc { font-size: 12.5px; line-height: 1.5; color: var(--muted); flex: 1; }
.skill-acts { display: flex; gap: 7px; }
.skill-ic { font-size: 16px; line-height: 1; display: inline-flex; align-items: center; color: var(--accent-text); }
.skill-ic svg { width: 15px; height: 15px; }
.skill-grp-sub { text-transform: none; letter-spacing: 0; color: var(--faint); font-weight: 400; font-size: 11px; margin-left: 6px; }
.skill-discover { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.skill-discover .hint { margin: 0; font-size: 12px; color: var(--faint); }
#skillScoutBtn { display: inline-flex; align-items: center; gap: 6px; }
.skill-card.disc { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.skill-why { font-size: 12px; line-height: 1.45; color: var(--accent-text); font-style: italic; }

/* ---- AI Employees (#286): hireable persona cards ---- */
.emp-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.emp-grp { margin-top: 18px; }
.emp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 13px; margin-top: 10px; }
.emp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 15px; padding: 16px; display: flex; flex-direction: column; gap: 9px; transition: border-color .15s, box-shadow .15s; }
.emp-card:hover { border-color: var(--border-2); }
.emp-card.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.emp-top { display: flex; align-items: center; gap: 11px; }
.emp-emoji { font-size: 25px; line-height: 1; width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px solid var(--border); }
.emp-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.emp-id b { font-size: 15px; line-height: 1.2; }
.emp-title { font-size: 11.5px; color: var(--accent-text); font-weight: 600; }
.emp-mine { font-size: 10px; font-weight: 700; color: var(--accent-text); margin-left: auto; }
.emp-on { font-size: 11px; font-weight: 700; color: var(--accent); margin-left: auto; white-space: nowrap; }
.emp-pitch { font-size: 13px; line-height: 1.45; color: var(--text); font-weight: 500; }
.emp-dir { font-size: 12px; line-height: 1.5; color: var(--muted); flex: 1; }
.emp-acts { margin-top: 4px; gap: 7px; }
.mini.ghost { background: none; border: 1px solid var(--border); color: var(--muted); }
.mini.ghost:hover { color: var(--text); border-color: var(--border-2); }
.gen-acts .act-btn:hover { background: rgba(0,0,0,.85); }
.gen-acts .act-btn.saved { color: var(--accent-text); }

/* sidebar "Recent" conversations — jump back into any creation */
.nav-recent { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 8px 0; padding: 0 2px; }
.nav-recent-h { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--faint); padding: 6px 10px 4px; }
.nav-recent-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; color: var(--muted); padding: 7px 10px; border-radius: 8px; font-size: 12.5px; cursor: pointer; transition: .12s; }
.nav-recent-item:hover { background: var(--surface); color: var(--text); }
.nav-recent-item .nr-ic { flex: 0 0 auto; font-size: 12px; }
.nav-recent-item .nr-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* rename / pin / delete on recents */
.nav-recent-row { display: flex; align-items: center; }
.nav-recent-row .nav-recent-item { flex: 1 1 auto; min-width: 0; width: auto; }
.nr-menu { opacity: 0; flex: 0 0 auto; background: none; border: 0; color: var(--faint); cursor: pointer; padding: 2px 7px; border-radius: 6px; font-size: 16px; line-height: 1; transition: .12s; }
.nav-recent-row:hover .nr-menu, .nr-menu:focus { opacity: 1; }
.nr-menu:hover { color: var(--text); background: var(--bg-2); }
.nav-recent-search { padding: 2px 8px 6px; }
.nav-recent-search input { width: 100%; box-sizing: border-box; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: 8px; font-size: 12px; font-family: var(--font-body); transition: border-color .14s; }
.nav-recent-search input::placeholder { color: var(--faint); }
.nav-recent-search input:focus { outline: none; border-color: var(--accent); }
.nav-recent-empty { color: var(--faint); font-size: 12px; padding: 8px 10px; }
.recent-menu { position: fixed; z-index: 200; background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; padding: 5px; box-shadow: 0 14px 32px -8px rgba(0,0,0,.6); display: flex; flex-direction: column; min-width: 144px; }
.recent-menu button { text-align: left; background: none; border: 0; color: var(--text); padding: 8px 11px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.recent-menu button:hover { background: var(--bg-2); }
.recent-menu .rm-del { color: var(--danger); }
/* keep the bottom nav pinned below the scrollable recents */
.sidebar .nav-bottom { flex: 0 0 auto; margin-top: auto; }

/* "+" on the active Muse / Create nav item → start a fresh conversation */
.nav-item-wrap { position: relative; }
.nav-item-wrap .nav-item { width: 100%; }
.nav-plus { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; border: 0; background: color-mix(in oklab, var(--accent) 20%, var(--bg-2)); color: var(--accent-text); cursor: pointer; display: none; align-items: center; justify-content: center; font-size: 14px; line-height: 0; transition: .15s; }
.nav-item-wrap:has(.nav-item.active) .nav-plus { display: inline-flex; }
.nav-plus:hover { color: var(--accent-ink); background: var(--accent); }
/* no hover tooltip on the ＋ — it read as clutter; aria-label stays for screen readers */

/* one-line composer — spacer + .cc-send's margin-left:auto keep mic + Create grouped on the right,
   even when the control row wraps to a second line (mic must always sit beside Create on the right). */
.cc-spacer { flex: 1 1 auto; }
.cc-send { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.cc-foot { display: flex; align-items: center; gap: 12px; margin-top: 7px; min-height: 13px; flex-wrap: wrap; }
.cc-foot .cc-brandnote { margin: 0; }
.cc-foot .cc-est-inline { margin-left: 0; }

/* Create landing: starter categories (pick one → its starter prompts show) */
/* Studio start "lanes" — rich visual tiles (per-lane hue glow, icon chip, lift-on-hover).
   FIXED column count (not auto-fit) so the grid never reflows / changes width when you switch lanes. */
.cc-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 4px; }
@media (max-width: 760px) { .cc-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cc-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 9px 11px 10px; border-radius: 13px; border: 1px solid var(--border); cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04); /* subtle lift + top highlight → reads as a confident raised control, not a flat ghost */
  background: radial-gradient(125% 100% at 0% 0%, hsl(var(--hue) 72% 56% / .14), transparent 58%), var(--surface-2);
  transition: transform .18s cubic-bezier(.2,.7,.3,1), border-color .18s, box-shadow .25s, background .2s; }
.cc-tile-bg { position: absolute; right: -8px; bottom: -12px; font-size: 48px; line-height: 1; opacity: .055; filter: grayscale(1); pointer-events: none; transition: opacity .22s, transform .28s; }
.cc-tile:hover { transform: translateY(-2px); border-color: color-mix(in oklab, hsl(var(--hue) 72% 56%) 55%, var(--border-2)); box-shadow: 0 10px 24px -14px hsl(var(--hue) 72% 50% / .42), inset 0 1px 0 rgba(255,255,255,.045); }
.cc-tile:hover .cc-tile-bg { opacity: .1; transform: scale(1.1) rotate(-4deg); }
.cc-tile.on { border-color: var(--accent); background: radial-gradient(125% 100% at 0% 0%, var(--accent-glow), transparent 60%), var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent), 0 10px 24px -16px var(--accent-glow); }
.cc-tile-ic { font-size: 15px; line-height: 1; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; margin-bottom: 5px; background: hsl(var(--hue) 60% 55% / .15); box-shadow: inset 0 0 0 1px hsl(var(--hue) 62% 62% / .2); }
.cc-tile.on .cc-tile-ic { background: var(--accent-glow); box-shadow: inset 0 0 0 1px var(--accent); }
.cc-tile-l { font-weight: 700; font-size: 12.5px; color: var(--text); position: relative; }
.cc-tile-s { font-size: 10.5px; line-height: 1.28; color: var(--muted); position: relative; }
/* Personalized "Recommended for you" — brand-kind-aware creation cards (organic posts for creators, ads for brands) */
.cc-recs { margin: 6px 0 16px; text-align: left; }
.cc-recs-h { font-size: 12px; letter-spacing: .01em; color: var(--muted); margin: 0 0 10px; font-weight: 600; }
.cc-recs-h .rec-spark { color: var(--accent-text); }
/* custom Auto-run menu (styled like the orchestrator) */
.cc-modewrap { position: relative; }
/* gen-mode toggle switch (Auto-run on/off) — a boolean, so a switch not a pill */
.cc-autotoggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; padding: 5px 4px; border-radius: 8px; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 500; transition: color .15s; }
.cc-autotoggle:hover { color: var(--text); }
.cc-autotoggle.on { color: var(--text); }
.cc-autotoggle-sw { width: 30px; height: 18px; border-radius: 999px; background: var(--border-2); position: relative; flex: 0 0 auto; transition: background .18s; }
.cc-autotoggle.on .cc-autotoggle-sw { background: var(--accent); }
.cc-autotoggle-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .18s; }
.cc-autotoggle.on .cc-autotoggle-thumb { transform: translateX(12px); }
#ccModeBtn { display: inline-flex; align-items: center; gap: 4px; }
.ccmode-cv { opacity: .55; flex: 0 0 auto; }
.cc-orchmenu .ccmode-mic { width: 15px; height: 15px; vertical-align: -3px; margin-right: 8px; flex: 0 0 auto; }
.cc-recs-h b { color: var(--text); }
.cc-recs-h span { color: var(--faint); font-weight: 500; }
.cc-recs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.cc-rec { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 11px; row-gap: 2px; align-items: center; text-align: left; min-height: 62px; box-sizing: border-box; background: linear-gradient(180deg, var(--surface-2), var(--bg-2)); border: 1px solid var(--border); border-radius: 13px; padding: 11px 13px; cursor: pointer; transition: transform .16s, border-color .16s, box-shadow .16s; }
.cc-rec:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 14px 34px -18px var(--accent-glow), inset 0 0 0 1px color-mix(in oklab, var(--accent) 28%, transparent); }
.cc-rec-ic { grid-row: 1 / span 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; font-size: 15px; background: var(--accent-glow); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent); }
.cc-rec-l { font-weight: 700; font-size: 13.5px; color: var(--text); letter-spacing: -.01em; }
.cc-rec-w { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.cc-rec.skel { pointer-events: none; background: var(--bg-2); border-color: var(--border); }
.cc-rec.skel:hover { transform: none; box-shadow: none; border-color: var(--border); }
.cc-rec.skel .cc-rec-ic { background: color-mix(in oklab, var(--muted) 16%, transparent); box-shadow: none; animation: ccSkel 1.3s ease-in-out infinite; }
.cc-rec.skel .sk-l { grid-row: 1; height: 11px; width: 52%; border-radius: 5px; background: color-mix(in oklab, var(--muted) 22%, transparent); animation: ccSkel 1.3s ease-in-out infinite; }
.cc-rec.skel .sk-w { grid-row: 2; height: 9px; width: 84%; border-radius: 5px; background: color-mix(in oklab, var(--muted) 13%, transparent); animation: ccSkel 1.3s ease-in-out .18s infinite; }
@keyframes ccSkel { 0%, 100% { opacity: .4; } 50% { opacity: .85; } }
@media (max-width: 720px) { .cc-recs-grid { grid-template-columns: 1fr; } }

/* model-maker badge (brand-coloured) */
.gen-lm { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 4px; font-size: 7.5px; font-weight: 800; line-height: 1; letter-spacing: -.02em; flex: 0 0 auto; text-transform: none; }

/* ============== Light mode ============== */
body.light {
  /* near-white neutrals (Higgsfield light) — barely-grey page, pure white surfaces */
  --bg: #f8f8f9; --bg-2: #f0f0f2; --surface: #ffffff; --surface-1: #eef0e6; --surface-2: #f2f2f4;
  --border: #ececf0; --border-2: #dcdce3; --text: #141417; --muted: #5a5a63; --faint: #6c6c75; /* softer hairlines (subtle edges, not harsh lines) */
  --accent-2: #C0392B; --accent-glow: rgba(200,90,66,0.18);
  --accent-text: #C0392B; /* dark gold — accent text stays readable on light surfaces */
  --danger-ink: #C81E3C; /* true crimson (~5.7:1 on white) — the base pink #fb6a8a fails AA (~2.8:1) for ghost-danger button TEXT on light surfaces */
  /* audit shared tokens — light values */
  --el-card: 0 1px 2px rgba(27,26,24,0.04);
  --el-raised: 0 8px 24px rgba(27,26,24,0.10);
  --meta: #A8978D;                 /* faint meta (light) */
  --hairline: #F1EBE4;             /* warm hairline divider */
  --chip-border: #EAE0D8;          /* warm chip border */
  --tap: #F4ECE6;                  /* ghost-hover wash (light) */
  --muted: #6F635C;                /* warm taupe body/help (AA on cream) */
  --faint: #7A6E64;                /* was #A8978D — failed contrast on cream; hints were genuinely hard to read (Dave) */
}
body.light::before { opacity: .3; }
body.light::after { opacity: .025; }
body.light .sidebar, body.light .topstrip .pill { background: var(--surface); } /* assistant messages stay chromeless in light mode too — same containerless chat as dark */
/* the topstrip is a hardcoded dark glass bar — make it light too so its text (pills, "reset session") stays readable on a light page */
body.light .topstrip { background: rgba(245,246,248,0.82); }
body.light .cc-msg.user, body.light .chat-msg.user { background: var(--surface-2); border-color: var(--border-2); }

/* ── UX polish: clearer states + light-mode legibility (audit findings) ── */
/* the CURRENT plan reads as a settled state, not a near-invisible ghost competing with the lime CTAs */
.plan-cur { width: 100%; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--muted); padding: 9px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; cursor: default; }
body.light .plan-cur { background: color-mix(in oklab, var(--accent) 12%, var(--surface)); border-color: color-mix(in oklab, var(--accent) 42%, var(--border-2)); color: var(--accent-text); }
/* selected lime pills/chips wash out on white — give them a defining edge + the more-saturated accent-2 fill */
body.light .cc-chip.on, body.light .cvh-filter .cc-chip.on { background: var(--accent-2); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 60%, transparent); }
body.light .swipe-subtab.on { box-shadow: inset 0 0 0 1px var(--border-2); }
/* feature-list checkmarks legible on white */
body.light .plan-feats li::before { color: var(--accent-text); }
/* sidebar RECENT chat items: thin grey on near-white → a touch more contrast */
body.light .nav-recent-item { color: var(--text); opacity: .8; }
/* the inspiration-to-remix strip sat right on the fold and got sliced mid-card — give it breathing room */
#createExamples { padding-bottom: 30px; }
/* the 'Finding your logo…' working state gets an inline spinner so it doesn't read as a hung static label */
.bf-logo-spin { display: inline-block; width: 11px; height: 11px; margin-right: 6px; border: 2px solid color-mix(in oklab, var(--accent) 40%, transparent); border-top-color: var(--accent); border-radius: 50%; vertical-align: -1px; animation: spin .7s linear infinite; }

/* theme toggle (sidebar bottom corner, Higgsfield-style) */
.theme-toggle { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-2); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: .15s; flex: 0 0 auto; }
.theme-toggle:hover { color: var(--text); border-color: var(--border-2); }
.sidebar-foot { display: flex; align-items: center; gap: 8px; }
.sidebar-foot .brand-chip { flex: 1 1 auto; margin-top: 0; }

/* Swipefile ⇄ Playbooks segmented sub-tabs (merged into one section) */
.swipe-subtabs { display: inline-flex; gap: 4px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px; margin: 0 0 16px; }
.swipe-subtab { background: none; border: 0; color: var(--muted); padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; transition: .15s; }
.swipe-subtab.on { background: var(--surface); color: var(--text); }
.swipe-subtab:hover:not(.on) { color: var(--text); }

/* Studio send button — a clean circular arrow (the agent may research OR create) */
/* box-shadow is a TIGHTER coral glow (12px blur, was var(--el-glow)'s 16px) so it stays within the composer's 14px side
   padding and can't be sliced by .cc-left's overflow:hidden into a hard vertical "ring" line beside the circle. */
#createGo.cc-go-arrow { width: 44px; height: 44px; min-width: 0; padding: 0; border-radius: 50%; font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--accent); box-shadow: 0 4px 12px rgba(216,92,66,0.30); transition: background var(--t-micro), transform var(--t-micro); }
/* round send button: hover = a touch deeper coral + a 1px lift. NO box-shadow change (the expanding glow was the "flash") and a FLAT fill base→hover (no gradient→solid brightness pop). */
#createGo.cc-go-arrow:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(216,92,66,0.30); }
#createGo.cc-go-arrow:active { transform: translateY(0); }
/* Stop state (#254): the circular ↑ becomes a neutral ◼ while a turn streams — needs the id-level specificity to beat the coral fill above */
#createGo.cc-go-arrow.is-stop { background: #2b2e33; color: #f4f5f7; font-size: 15px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); animation: stopPulse 1.6s ease-in-out infinite; }
#createGo.cc-go-arrow.is-stop:hover { background: #3a3e45; transform: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24); }

/* ── Creative playbook (Brand tab): learned from top-performing ads, fed into every gen ── */
.playbook-card { background: linear-gradient(180deg, rgba(216,92,66,0.05), var(--bg-2)); border: 1px solid var(--border-2); }
.pb-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.pb-card-head h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
#bf_playbookBtn { white-space: nowrap; }
.pb-card-acts { display: inline-flex; gap: 8px; align-items: center; }
.el-sec { margin-top: 16px; }
.el-h { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--accent-text); font-weight: 700; margin-bottom: 8px; }
.pb-body { margin-top: 14px; }
/* Playbook inline editor */
.pbe { display: flex; flex-direction: column; gap: 6px; }
.pbe-lbl { display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--accent-text); font-weight: 700; margin: 12px 0 2px; }
.pbe-hint { text-transform: none; letter-spacing: 0; color: var(--faint); font-weight: 400; }
.pbe-add { margin-left: auto; background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 2px 9px; font-size: 11px; cursor: pointer; letter-spacing: 0; text-transform: none; }
.pbe-add:hover { border-color: var(--accent); color: var(--text); }
.pbe-f { width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13.5px; }
.pbe-f:focus { outline: none; border-color: var(--accent); }
.pbe-list { display: flex; flex-direction: column; gap: 8px; }
.pbe-row { display: flex; gap: 8px; align-items: flex-start; }
.pbe-fields { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.pbe-del { flex: none; background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 8px; width: 28px; height: 28px; cursor: pointer; font-size: 16px; line-height: 1; }
.pbe-del:hover { border-color: #e0564b; color: #e0564b; }
.pbe-foot { display: flex; gap: 8px; margin-top: 16px; }
.pb-empty { color: var(--muted); font-size: 14px; padding: 4px 0; }
.pb-headline { font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--text); padding: 12px 16px; margin-bottom: 18px; border-left: 3px solid var(--accent); background: rgba(216,92,66,0.06); border-radius: 0 10px 10px 0; }
.pb-sec { margin-bottom: 18px; }
.pb-sec:last-child { margin-bottom: 0; }
.pb-sec-h { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-text); font-weight: 700; margin-bottom: 10px; }
.pb-hooks { display: flex; flex-direction: column; gap: 8px; }
.pb-hook { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.pb-hook-t { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--text); }
.pb-why { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.pb-why::before { content: '— '; }
.pb-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.pb-list li { font-size: 14px; line-height: 1.45; color: var(--text); }
.pb-list li b { font-weight: 650; }
.pb-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.pb-tag { font-size: 12.5px; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.pb-foot { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }

/* Voice guide (read-only, Brand tab): six tone dims + words-they-love / words-to-avoid chips + verbatim sample lines. */
.vg-dims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vg-dim { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; }
.vg-dim-k { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.vg-dim-v { display: block; font-size: 13.5px; line-height: 1.35; color: var(--text); font-weight: 550; }
.pb-tag.vg-avoid { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--danger); text-decoration-thickness: 1.5px; border-style: dashed; }
.vg-sample { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; padding: 9px 13px; font-size: 14px; line-height: 1.4; color: var(--text); font-style: italic; }
.vg-samples { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 560px) { .vg-dims { grid-template-columns: 1fr; } }

/* All gen-tile status badges (⚠ review, ✦ auto-correcting, ✓ auto-corrected, ★ Best) live in ONE top-left flex box:
   side-by-side, width-capped so they never overlap each other OR the right-aligned action buttons (✎ edit / ⬇ / ⋯). */
.gen-badges { position: absolute; top: 44px; left: 8px; z-index: 7; display: flex; flex-wrap: wrap; gap: 5px; max-width: calc(100% - 16px); pointer-events: none; } /* sit JUST BELOW the top button row (select dot + ⋯ at top:8px, ~32px tall) so badges never cover the buttons — was top:8px and overlapped them on hover */
.gen-badge { pointer-events: auto; border: 0; border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 700; line-height: 1.15; white-space: nowrap; box-shadow: 0 6px 18px -6px rgba(0,0,0,.7); animation: genIn .2s ease; }
.gen-badge.gb-warn { background: var(--danger); color: #fff; cursor: pointer; }
.gen-badge.gb-warn:hover { filter: brightness(1.08); }
.gen-badge.gb-fixing { background: rgba(20,20,24,.86); color: var(--accent); backdrop-filter: blur(4px); }
.gen-badge.gb-ok { background: var(--accent); color: var(--accent-ink); }
.gen-badge.gb-fix { background: #0c0c10; color: var(--accent); border: 1px solid var(--accent); cursor: pointer; } /* manual one-click paid Auto-fix chip (auto-fix pref OFF) */
.gen-badge.gb-fix:hover { background: var(--accent); color: var(--accent-ink); }
.gen-badge.gb-best { background: #0c0c10; color: var(--accent); border: 1px solid var(--accent); }

/* Start-fresh (destructive) button in Settings */
/* Danger-outline buttons (Start fresh / Delete account / Revoke). Colour + edge come from --danger-ink so each theme
   stays legible: dark keeps the pink (already ~5:1 on charcoal); light mode's crimson token gives real AA contrast
   plus a stronger border and a faint danger wash so the action reads clearly destructive on white. One shared rule. */
.ghost.danger { color: var(--danger-ink); border-color: color-mix(in oklab, var(--danger-ink) 45%, var(--border-2)); }
.ghost.danger:hover { border-color: var(--danger-ink); background: color-mix(in oklab, var(--danger-ink) 10%, transparent); }
body.light .ghost.danger { border-color: color-mix(in oklab, var(--danger-ink) 60%, var(--border-2)); background: color-mix(in oklab, var(--danger-ink) 6%, transparent); }
body.light .ghost.danger:hover { background: color-mix(in oklab, var(--danger-ink) 13%, transparent); }

/* ===================== Magical onboarding — cosmic single-field intro ===================== */
body.cosmos-open { overflow: hidden; }
.cosmos[hidden] { display: none !important; } /* CRITICAL: the class rule below sets display:grid, which beats the [hidden] attribute — without this the invisible overlay stays on top and eats every click */
.cosmos { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(125% 95% at 50% 36%, #0a0a17 0%, #06060d 46%, #030305 100%);
  opacity: 0; transition: opacity .9s ease, transform 1.15s cubic-bezier(.6,.05,.2,1); }
.cosmos.in { opacity: 1; }
.cosmos.done { opacity: 0; transform: scale(1.2); pointer-events: none; }
/* drifting nebula */
.cosmos-sky { position: absolute; inset: -25%; pointer-events: none; filter: blur(22px);
  background:
    radial-gradient(36% 30% at 27% 33%, rgba(216,92,66,.20), transparent 60%),
    radial-gradient(42% 34% at 73% 61%, rgba(124,108,255,.22), transparent 62%),
    radial-gradient(34% 30% at 60% 20%, rgba(255,110,80,.11), transparent 60%);
  animation: cosmosNeb 24s ease-in-out infinite alternate; }
@keyframes cosmosNeb { from { transform: translate3d(-2%,-1%,0) scale(1); } to { transform: translate3d(3%,2%,0) scale(1.14); } }
/* two parallax star layers */
.cosmos-stars, .cosmos-stars::after { content: ''; position: absolute; inset: -60%; pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 32% 44%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.5px 1.5px at 56% 12%, #fff, transparent), radial-gradient(1px 1px at 72% 66%, rgba(255,255,255,.7), transparent),
    radial-gradient(2px 2px at 86% 30%, #fff, transparent), radial-gradient(1px 1px at 44% 84%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.3px 1.3px at 8% 70%, #fff, transparent), radial-gradient(1px 1px at 94% 78%, rgba(255,255,255,.6), transparent);
  background-repeat: repeat; background-size: 340px 340px; }
.cosmos-stars { animation: cosmosDrift 90s linear infinite, cosmosTwinkle 6s ease-in-out infinite; }
.cosmos-stars::after { background-size: 560px 560px; opacity: .5; animation: cosmosDrift 160s linear infinite reverse; }
@keyframes cosmosDrift { to { transform: translateY(-340px); } }
@keyframes cosmosTwinkle { 50% { opacity: .7; } }
/* warp on submit */
/* a BIG centered square (bigger than the viewport diagonal) so the rotating rays always cover the screen corners — inset:0 left corners uncovered mid-spin. Centered via margins so the rotate() transform doesn't fight positioning. */
.cosmos-warp { position: absolute; top: 50%; left: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 2deg, rgba(255,255,255,.05) 2.3deg 2.6deg, transparent 3deg 6deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 6%, #000 46%); mask-image: radial-gradient(closest-side, transparent 6%, #000 46%); }
.cosmos.warp .cosmos-warp { opacity: 1; animation: cosmosSpin 9s linear infinite; }
.cosmos.warp .cosmos-stars { animation: cosmosWarp 1.5s cubic-bezier(.5,0,.3,1) forwards, cosmosTwinkle 6s ease-in-out infinite; }
@keyframes cosmosSpin { to { transform: rotate(360deg); } }
@keyframes cosmosWarp { to { transform: scale(2.7); opacity: .35; } }
.cosmos-grain { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 92% at 50% 44%, transparent 54%, rgba(0,0,0,.6) 100%); }
/* stage */
.cosmos-stage { position: relative; z-index: 2; width: min(640px, 90vw); text-align: center; padding: 0 18px;
  opacity: 0; transform: translateY(10px); animation: cosmosRise 1.1s .25s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes cosmosRise { to { opacity: 1; transform: none; } }
.cosmos-badge { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 19px; letter-spacing: .01em; font-weight: 600; color: #f2efe9; margin-bottom: 26px; opacity: .95; }
.cosmos-tld { font-size: .62em; opacity: .5; margin-left: .12em; letter-spacing: .04em; } /* small muted .ai, matching the sidebar wordmark */
.cosmos-mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--accent); box-shadow: 0 0 22px -4px var(--accent-glow); }
.cosmos-mark svg { width: 15px; height: 15px; color: var(--accent-ink); }
.cosmos-h { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 5.4vw, 56px); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 36px; color: #fff; }
.cosmos-h span { color: var(--accent); }
.cosmos.warp .cosmos-h, .cosmos.warp .cosmos-form, .cosmos.warp .cosmos-skip { opacity: 0; transform: translateY(-12px); transition: opacity .5s, transform .5s; pointer-events: none; }
.cosmos-form { transition: opacity .4s, transform .4s; }
.cosmos-field { display: flex; align-items: center; gap: 8px; max-width: 470px; margin: 0 auto; padding: 6px 6px 6px 24px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; backdrop-filter: blur(8px);
  transition: border-color .2s, box-shadow .3s, background .2s; }
.cosmos-field:focus-within { border-color: var(--accent); background: rgba(255,255,255,.07); box-shadow: 0 0 48px -6px var(--accent-glow); }
#cosmosInput { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; box-shadow: none; -webkit-appearance: none; appearance: none; border-radius: 0; color: #fff; font-size: 17px; font-weight: 500; padding: 14px 0; letter-spacing: .01em; }
#cosmosInput:focus, #cosmosInput:focus-visible { outline: none; box-shadow: none; border: 0; } /* the pill (.cosmos-field:focus-within) carries the focus glow — kill the global input focus ring */
#cosmosInput::placeholder { color: rgba(255,255,255,.55); }
.cosmos-go { width: 46px; height: 46px; flex: none; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 20px; font-weight: 800; cursor: pointer; display: grid; place-items: center; transition: transform .15s, filter .15s, box-shadow .3s; }
.cosmos-go:hover { transform: scale(1.08); filter: brightness(1.05); }
.cosmos-go.ready { animation: cosmosPulse 1.9s ease-in-out infinite; }
@keyframes cosmosPulse { 0%,100% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 30px 4px var(--accent-glow); } }
.cosmos-hint { margin-top: 16px; font-size: 13px; color: rgba(255,255,255,.62); }
.cosmos-hint:empty { display: none; } /* no default tagline; element stays for the email-prefill confirmation */
.cosmos-creator-hint { margin-top: 18px; font-size: 13px; color: rgba(255,255,255,.5); max-width: 30em; margin-left: auto; margin-right: auto; line-height: 1.5; }
.cosmos-creator-hint b { color: rgba(255,255,255,.82); font-weight: 600; }
/* once the draft is running (warp), the user has already chosen — hide the alternative-path hints */
.cosmos.warp .cosmos-creator-hint, .cosmos.warp .cosmos-corner { display: none; }
.cosmos-status { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); font-size: 17px; color: rgba(255,255,255,.85); font-weight: 500; opacity: 0; transition: opacity .5s; pointer-events: none; }
.cosmos-status.show { opacity: 1; }
.cosmos-status.err { color: #ff8a8a; position: static; transform: none; margin-top: 18px; }
.cosmos-status.confirm { position: static; transform: none; margin-top: 18px; pointer-events: auto; }
.cosmos-status.confirm::before { content: none; }
.cosmos-status::before { content: '✦'; display: inline-block; margin-right: 10px; color: var(--accent); animation: cosmosSpinMark 2.2s linear infinite; }
/* Shopify embedded AUTO-SETUP: reuse the cosmos "warp" transition (shopifyAutoSetup adds .warp + .autosetup) so the
   setting-up state matches the drafting flow exactly — the hero headline + URL field FADE OUT (warp, opacity), the
   brand mark stays, the warp rays animate as the progress indicator, and the centered ✦-spinner status owns the space
   (never absolutely stacked over the headline — that overlap was the bug). .autosetup only hides the alt-path links
   warp doesn't touch. revealManual()/finishShopifyAuto() drop both classes to fall back to the normal URL screen. */
.cosmos.autosetup .cosmos-describe-link,
.cosmos.autosetup #cosmosDescribe { display: none !important; }
.cosmos-status.err::before { content: ''; margin: 0; }
@keyframes cosmosSpinMark { to { transform: rotate(360deg); } }
.cosmos-reveal { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.96); pointer-events: none; }
.cosmos.reveal .cosmos-reveal { opacity: 1; transform: none; transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.cosmos.reveal .cosmos-status { opacity: 0; }
.cosmos-reveal .cr-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 6vw, 64px); color: #fff; letter-spacing: -.02em; text-shadow: 0 0 60px var(--accent-glow); }
.cosmos-reveal .cr-tag { margin-top: 14px; color: var(--accent); font-size: 15px; letter-spacing: .04em; }
/* "about you" onboarding step (shown after the brand reveals) */
.cosmos-about { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 24px; opacity: 0; }
.cosmos.about .cosmos-about { display: flex; opacity: 1; transition: opacity .5s ease .38s; z-index: 3; } /* fade in only AFTER the hero/form have faded out (delay > their .3s) — no overlap/collision */
.cosmos.about .cosmos-reveal, .cosmos.about .cosmos-form, .cosmos.about .cosmos-h, .cosmos.about .cosmos-status, .cosmos.about .cosmos-badge, .cosmos.about .cosmos-describe-link, .cosmos.about .cosmos-describe { opacity: 0; pointer-events: none; transition: opacity .3s; }
.cosmos-about .ca-h { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 4vw, 38px); color: #fff; text-shadow: 0 0 50px var(--accent-glow); margin-bottom: 14px; }
/* established account (has other profiles / already onboarded) → skip the first-time "about you" questions; just draft the new brand */
.cosmos.about-skip .ca-q, .cosmos.about-skip .ca-opts, .cosmos.about-skip .ca-heard, .cosmos.about-skip .cosmos-start { display: none; } /* nothing to answer → no premature button; the draft auto-advances when it lands */
/* Answered mid-setup: fade the survey + button out (they then collapse via about-skip a beat later) so only the ✦ loader remains, centered. */
.cosmos.about-finishing .ca-q, .cosmos.about-finishing .ca-opts, .cosmos.about-finishing .ca-heard, .cosmos.about-finishing .cosmos-start { opacity: 0; pointer-events: none; transition: opacity .32s ease; }
/* corner controls: Back (top-left) + Skip (top-right) — escape hatches pulled out of the centered stack so the
   hero is just the input + the creator hint. The Back wrapper's visibility is JS-gated (only when there are brands). */
.cosmos-corner { position: absolute; top: 22px; z-index: 4; margin: 0; }
.cosmos-back { left: 22px; }
.cosmos-skipbtn { right: 22px; } /* NOT .cosmos-skip — that's a pre-existing class with a stray margin-top:30px */
.cosmos-corner > a, a.cosmos-corner { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; letter-spacing: -.01em;
  color: rgba(255,255,255,.6); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); padding: 8px 15px;
  border-radius: 999px; cursor: pointer; text-decoration: none; transition: .16s; backdrop-filter: blur(6px); }
.cosmos-corner > a:hover, a.cosmos-corner:hover { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.26); }
/* inline progress line while the brand drafts in the BACKGROUND — the about questions are answered during this wait */
.cosmos-about .ca-progress { color: var(--accent); font-size: 13.5px; letter-spacing: .03em; margin: 0 0 26px; min-height: 18px; transition: opacity .4s; }
.cosmos-about .ca-progress:empty { display: none; }
.cosmos-about .ca-progress::before { content: '✦'; margin-right: 8px; display: inline-block; animation: cosmosSpinMark 2.2s linear infinite; }
.cosmos-about .ca-progress.done::before { animation: none; }
.cosmos-about .ca-progress.err { color: #ff8a8a; }
.cosmos-about .ca-progress.err::before { content: ''; margin: 0; }
.cosmos-about .ca-q { color: rgba(255,255,255,.92); font-size: 16px; font-weight: 600; margin-bottom: 13px; }
.cosmos-about .ca-q2 { margin-top: 24px; }
.cosmos-about .ca-opt-hint { color: rgba(255,255,255,.6); font-weight: 400; font-size: 13px; }
.cosmos-about .ca-opts { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; max-width: 500px; }
.cosmos-about .ca-opt { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #fff; padding: 10px 18px; border-radius: 999px; font: inherit; font-size: 14px; cursor: pointer; transition: .15s; }
.cosmos-about .ca-opt:hover { border-color: var(--accent); }
.cosmos-about .ca-opt.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.cosmos-about .ca-heard { margin-top: 12px; min-width: 250px; background-color: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.18); } /* background-COLOR, not the `background` shorthand — the shorthand was resetting cc-pillsel's chevron background-image/-repeat longhands, rendering a tiled-arrow glitch */
.cosmos-about .ca-heard option { color: #111; }
.cosmos-about .cosmos-start { margin-top: 32px; background: var(--accent); color: var(--accent-ink); border: 0; padding: 13px 32px; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 40px -10px var(--accent-glow); transition: .18s; }
.cosmos-about .cosmos-start:hover { transform: translateY(-1px); background: var(--accent-2); }
.cosmos-skip { margin-top: 30px; background: none; border: 0; color: rgba(255,255,255,.58); font-size: 13px; cursor: pointer; transition: color .15s; }
.cosmos-skip:hover { color: rgba(255,255,255,.72); }
.cosmos.shake .cosmos-field { animation: cosmosShake .45s; border-color: #ff6a6a; }
@keyframes cosmosShake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-8px); } 40%,80% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .cosmos-stars, .cosmos-stars::after, .cosmos-sky, .cosmos-warp, .cosmos-status::before, .cosmos-go.ready { animation: none !important; } }

/* Brand chip: real favicon + name (personalized) */
#brandChip { display: flex; align-items: center; gap: 8px; }
#brandChip .brand-chip-mark { flex: none; }
/* credit ring around the brand favicon (Higgsfield-style): the lime arc depletes as credits run down */
#brandChip .brand-chip-avatar { position: relative; width: 30px; height: 30px; flex: none; display: grid; place-items: center; }
#brandChip .brand-chip-ring { position: absolute; inset: 0; width: 30px; height: 30px; transform: rotate(-90deg); pointer-events: none; }
#brandChip .bcr-track { fill: none; stroke: var(--hairline); stroke-width: 2; }
#brandChip .bcr-fill { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset .55s cubic-bezier(.2,.7,.2,1), stroke .4s, opacity .3s; }
#brandChip .brand-chip-avatar .brand-chip-mark { font-size: 13px; line-height: 1; }
#brandChip .brand-chip-avatar .brand-chip-fav { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.06); }
#brandChip .brand-chip-fav { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; flex: none; background: rgba(255,255,255,.06); }
/* no-logo fallback: brand-initial monogram (replaces the Google default-globe favicon Dave caught) */
#brandChip .brand-chip-mono { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: #fff; background: var(--accent, #d96f4e); flex: none; letter-spacing: 0; }
#brandChip .brand-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Cosmos mouse parallax — bg layers drift slightly TOWARD the cursor (via --px/--py set on #cosmos).
   Uses the `translate` property (the drift/warp animations use `transform`), so they compose, no conflict. */
.cosmos-sky { translate: calc(var(--px, 0px) * 0.45) calc(var(--py, 0px) * 0.45); transition: translate .45s cubic-bezier(.2,.7,.2,1); will-change: transform, translate; }
.cosmos-stars { translate: var(--px, 0px) var(--py, 0px); transition: translate .35s cubic-bezier(.2,.7,.2,1); will-change: transform, translate; }
@media (prefers-reduced-motion: reduce) { .cosmos-sky, .cosmos-stars { translate: none !important; transition: none !important; } }

/* ───────── in-feed preview (pure CSS platform chrome) ───────── */
.feedprev{position:fixed;inset:0;z-index:240;background:rgba(5,6,4,.82);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;animation:fadeIn .18s ease}
.feedprev-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;max-height:94vh}
.feedprev .lightbox-x{position:absolute;top:-4px;right:-46px}
.fp-tabs{display:flex;gap:6px;background:var(--surface-1,#16170f);border:1px solid var(--border);border-radius:99px;padding:4px}
.fp-tab{border:0;background:transparent;color:var(--muted,#9aa08a);font:600 12.5px/1 var(--font-body,'Hanken Grotesk',sans-serif);padding:8px 14px;border-radius:99px;cursor:pointer}
.fp-tab.on{background:var(--accent);color:var(--accent-ink,#10120a)}
.fp-stage{display:flex;align-items:center;justify-content:center}
.fp-phone{width:300px;max-height:78vh;background:#000;border-radius:26px;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden;position:relative;color:#fff;font-family:-apple-system,'Helvetica Neue',sans-serif}
.fp-ig{background:#000}
.fp-head{display:flex;align-items:center;gap:9px;padding:10px 12px}
.fp-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#D85C42,#46b96d);color:#10120a;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:none}
.fp-name{display:flex;flex-direction:column;font-size:13px;font-weight:600;line-height:1.15}
.fp-name small{font-weight:400;font-size:11px;color:#bbb}
.fp-dots{margin-left:auto;color:#ddd}
.fp-media img,.fp-media video{display:block;width:100%;max-height:46vh;object-fit:cover}
.fp-cta{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;font-size:13.5px;font-weight:600;background:#1a1a1a;border-top:1px solid #222;border-bottom:1px solid #222}
.fp-icons{display:flex;gap:14px;padding:10px 12px 4px;font-size:18px}
.fp-icons .fp-save{margin-left:auto}
.fp-cap{padding:4px 12px 14px;font-size:12.5px;color:#e8e8e8;line-height:1.4}
.fp-cap .fp-more{color:#999}
.fp-story,.fp-tt{aspect-ratio:9/16;max-height:74vh}
.fp-media.fp-full,.fp-media.fp-full img,.fp-media.fp-full video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-height:none}
.fp-storybar{position:absolute;top:8px;left:8px;right:8px;height:2.5px;border-radius:2px;background:rgba(255,255,255,.3);z-index:2}
.fp-storybar span{display:block;width:55%;height:100%;border-radius:2px;background:#fff}
.fp-head.fp-overlay{position:absolute;top:10px;left:0;right:0;z-index:2;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.fp-swipe{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:2;background:rgba(255,255,255,.92);color:#111;font-size:13px;font-weight:700;padding:9px 18px;border-radius:99px;white-space:nowrap}
.fp-ttside{position:absolute;right:8px;bottom:86px;z-index:2;display:flex;flex-direction:column;gap:14px;align-items:center;font-size:20px;text-align:center;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.fp-ttside small{display:block;font-size:10px;font-weight:600}
.fp-ttcap{position:absolute;left:10px;right:64px;bottom:12px;z-index:2;font-size:12.5px;line-height:1.4;text-shadow:0 1px 6px rgba(0,0,0,.65)}
.fp-spons{font-size:10px;background:rgba(255,255,255,.25);border-radius:3px;padding:1px 5px;margin-left:4px;vertical-align:1px}
.fp-ttcta{margin-top:8px;background:rgba(80,80,80,.72);border-radius:6px;padding:8px 10px;font-weight:700;font-size:13px}

/* ⚡ hook matrix */
.cc-hooks{display:flex;flex-direction:column;gap:8px}
.cc-hook{display:flex;flex-direction:column;gap:3px;text-align:left;border:1px solid var(--border);background:var(--surface);border-radius:12px;padding:10px 12px;cursor:pointer;color:var(--text,#e9ecdf);transition:border-color .15s}
.cc-hook:hover{border-color:var(--accent)}
.cc-hook.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.cc-hook b{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--accent-text)}
.cc-hook-h{font-weight:700;font-size:14px}
.cc-hook-o{font-size:12.5px;color:var(--muted,#9aa08a)}
/* 🏆 outcome loop — clearly-clickable pills (filled + bordered) so they don't read as passive tags */
.lib-outcome{display:flex;align-items:center;gap:5px;margin:10px 0 2px;flex-wrap:nowrap;min-width:0} /* one line always (Dave): the label + 3 chips shrink instead of wrapping */
.lib-outcome-l{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:700;margin-right:1px;cursor:help;white-space:nowrap;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
.oc-chip{border:1px solid var(--border-2);background:var(--surface-2);color:var(--muted);font-size:11px;font-weight:600;border-radius:99px;padding:5px 9px;cursor:pointer;white-space:nowrap;flex:0 0 auto;transition:border-color .15s,color .15s,background .15s,transform .1s,box-shadow .15s}
.oc-chip:hover{border-color:var(--text);color:var(--text);background:var(--surface);transform:translateY(-1px);box-shadow:0 2px 8px -3px rgba(0,0,0,.35)}
.oc-chip:active{transform:translateY(0)}
.oc-chip.on.launched{background:#2c3550;border-color:#4a5b8f;color:#cdd9ff}
.oc-chip.on.winner{background:#233a22;border-color:#3f7a3a;color:#bdf0b5}
.oc-chip.on.loser{background:#3a2323;border-color:#7a3a3a;color:#f0b5b5}
.oc-chip.on{box-shadow:0 0 0 1px currentColor inset} /* the chosen verdict reads as a pressed/active toggle */
/* 🎯 campaign angles */
.cc-campaign{display:flex;flex-direction:column;gap:10px}
.cc-angle{border:1px solid var(--border);background:var(--surface);border-radius:12px;padding:11px 13px;display:flex;flex-direction:column;gap:4px}
.cc-buildall{margin-top:4px;align-self:flex-start;border:1px solid var(--accent);background:transparent;color:var(--accent-text);font-weight:700} /* campaign-employee: build every angle as a set */
button.mini.cc-buildall:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} /* must OUTRANK button.mini:hover (element+class+pseudo) or hover reads accent-on-accent — Dave caught it live */
.cc-angle-top{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.cc-angle-fmt{font-size:11px;color:var(--muted,#9aa08a)}
.cc-angle-a{font-size:13px}
.cc-angle-h{font-size:12.5px;color:var(--accent-text)}
.cc-angle-stack{display:inline-block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--bg-2);border:1px solid var(--border);border-radius:6px;padding:2px 7px;margin:1px 0} /* the execution recipe this angle builds as — stack-aware campaign angles */
.cc-angle-w{font-size:12px;color:var(--muted,#9aa08a)}
.cc-angle .mini{align-self:flex-start;margin-top:5px}
/* ⚡ competitor teardown card — reuses .mini/.pill/.mem-grp chrome; this is just the layout shell */
.brand-card-head .td-btn{flex:0 0 auto}
.td-card{border:1px solid color-mix(in oklab,var(--accent) 30%,var(--border));background:color-mix(in oklab,var(--accent) 4%,var(--surface));border-radius:14px;padding:14px 15px;margin:8px 0 18px;display:flex;flex-direction:column;gap:13px}
.td-head{display:flex;align-items:center;gap:8px;font-size:15px}
.td-head b{font-weight:700}
.td-head .td-sub{margin-left:auto;color:var(--faint);font-size:12px}
.td-hooks{display:flex;flex-wrap:wrap;gap:6px}
.td-hook{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.td-hook .td-eg{color:var(--muted);font-size:11.5px}
.td-camp{padding:7px 0;border-top:1px solid var(--border)}
.td-camp:first-of-type{border-top:0;padding-top:0}
.td-camp-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13.5px}
.td-days{color:var(--faint);font-size:11.5px;font-variant-numeric:tabular-nums;flex:0 0 auto}
.td-land{font-size:12.5px;color:var(--muted);margin-top:2px}
.td-ws{font-size:12.5px;margin:3px 0}
.td-ws b{color:var(--accent-text)}
.td-plays{display:flex;flex-wrap:wrap;gap:8px}
.td-play{display:inline-flex;align-items:center;gap:7px}
.td-play .td-play-fmt{font-size:10px;text-transform:uppercase;letter-spacing:.05em;opacity:.7}
.td-never{font-size:12.5px;color:var(--muted);padding:2px 0}
.td-never::before{content:"⊘ ";color:var(--warn)}
/* ✦ ad angle miner card — reuses the .td-card shell; per-angle proof quotes + score + "use this angle" */
.angle-item{padding-top:11px;border-top:1px solid var(--border)}
.angle-item:first-of-type{border-top:0;padding-top:0}
.angle-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.angle-h .angle-line{font-weight:700;font-size:13.5px;flex:1 1 220px;min-width:0}
.angle-cat{flex:0 0 auto;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.angle-score{flex:0 0 auto;margin-left:auto;font-variant-numeric:tabular-nums;font-weight:800;font-size:14px;color:var(--accent-text);cursor:help}
.angle-quotes{margin:8px 0 9px;display:flex;flex-direction:column;gap:6px}
.angle-quote{font-size:12.5px;color:var(--muted);line-height:1.5;padding:5px 10px;border-left:2px solid color-mix(in oklab,var(--accent) 45%,var(--border));background:color-mix(in oklab,var(--accent) 4%,transparent);border-radius:0 7px 7px 0}
.angle-quote::before{content:"“"}.angle-quote::after{content:"”"}
.angle-hookrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.angle-hook{flex:1 1 200px;font-size:13px;font-weight:600;color:var(--accent-text);min-width:0}
.angle-use{flex:0 0 auto}
/* 👁 competitor watch strip */
.watch-strip{margin:14px 0;border:1px solid color-mix(in oklab,var(--accent) 28%,transparent);border-radius:14px;padding:12px;background:color-mix(in oklab,var(--accent) 5%,transparent)}
.watch-strip .results{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))} /* fluid 3–4 columns, no dead lane on the right (the global 360px track cap left one) */
.watch-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13.5px}
.watch-head .mini{margin-left:auto}
/* keycap chips (Higgsfield-style keyboard affordance) */
.kbd{display:inline-grid;place-items:center;min-width:18px;padding:1px 5px;border-radius:5px;background:color-mix(in oklab,var(--text) 7%,transparent);border:1px solid var(--border-2);border-bottom-width:2px;font-size:10px;line-height:1.4;color:inherit;opacity:.75;font-variant-numeric:tabular-nums;vertical-align:1px}
.cc-act-go .kbd{background:rgba(0,0,0,.18);border-color:rgba(0,0,0,.35)}
/* the approval gate visibly "asks" */
#ccAction:not([hidden]){box-shadow:0 0 30px -14px var(--accent-glow)}

/* ── canvas activation hero (cold-start Studio canvas) ── */
.cc-canvas-hero{display:flex;align-items:center;justify-content:center;min-height:340px}
.canvas-hero{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;max-width:380px;padding:34px 20px}
.canvas-hero-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:20px;color:var(--accent-text);background:color-mix(in oklab,var(--accent) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--accent) 30%,transparent)}
.canvas-hero-h{font-family:var(--font-display,'Bricolage Grotesque',sans-serif);font-size:19px;font-weight:700}
.canvas-hero p{font-size:13px;color:var(--muted,#9aa08a);margin:0 0 6px}
.ex-mini{display:flex;justify-content:flex-end;padding:4px 0}
/* ── ghost-card skeleton empty states ── */
.ghost-wrap{position:relative;padding:8px 0 4px}
.ghost-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;opacity:.5;pointer-events:none}
.ghost-card{border:1px dashed var(--border-2);border-radius:14px;background:var(--surface)}
.ghost-card.g0{aspect-ratio:1/1}.ghost-card.g1{aspect-ratio:9/13}.ghost-card.g2{aspect-ratio:16/10}
.ghost-card.glow{background:radial-gradient(120% 90% at 50% 0%,rgba(216,92,66,.07),var(--surface-1,#15160f) 55%)}
.ghost-copy{position:relative;margin-top:14px;text-align:center;font-size:13px;color:var(--muted,#9aa08a)}
.ghost-copy a{color:var(--accent-text)}
/* ── Studio worklog ── */
.cc-msg.cc-worklog{background:none;border:0;padding:6px 2px} /* chromeless like the steps — progress sits on the page */
.wl-head{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px}
.wl-time{color:var(--accent-text);font-variant-numeric:tabular-nums;font-weight:600}
.wl-chev{margin-left:auto;flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);opacity:.7;cursor:pointer;transition:transform .15s,opacity .15s,color .15s} /* clean borderless caret — matches the brand-chip caret, not a boxed button */
.wl-chev svg{display:block}
.wl-head:hover .wl-chev{opacity:1;color:var(--text)}
.wl-done{color:var(--accent-text);font-weight:700;margin-right:9px} /* match the loadmark's gap so the ✓ isn't jammed against the text */
.wl-steps{display:flex;flex-direction:column;gap:5px;margin:8px 0 2px 7px;padding-left:12px;border-left:1px solid var(--border)}
.wl-step{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted,#9aa08a);min-height:18px}
.wl-step .wl-step-l{min-width:0}
.wl-step.on{color:var(--text,#e9ecdf)}
.wl-step.on .wl-step-l::after{content:'…'}
.wl-step.did::before{content:'✓';color:var(--accent-text);font-weight:700;font-size:11px;flex:none} /* finished-asset milestone */
.wl-thumb{width:30px;height:30px;border-radius:6px;object-fit:cover;border:1px solid var(--border);flex:none;margin-left:auto} /* the asset this step produced, right-aligned (Higgsfield-style) */
.cc-worklog:not(.open) .wl-steps{display:none} /* the caret toggles .open on BOTH active + done worklogs (was .done-only, so the caret did nothing on a live one) */
.cc-worklog.open .wl-chev{transform:rotate(180deg)}

/* ── lime rationing: lime = "advances or costs something"; actives use quieter states ── */
.nav-item.active{background:var(--surface-2);color:var(--text);box-shadow:inset 2px 0 0 0 var(--accent)} /* soft fill + slim accent edge only — no harsh border ring */
.buy-credits{background:transparent;color:var(--accent-text,var(--accent));box-shadow:inset 0 0 0 1px var(--accent);}
.buy-credits:hover{background:rgba(216,92,66,.1)}
.cc-segbtn.active,.mode-pill.active{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--accent);font-weight:700}
.coll-chip.active{box-shadow:inset 0 0 0 1px var(--accent);background:transparent}
/* sidebar recents: live activity + needs-reply states */
.nr-dot{width:10px;height:10px;border-radius:50%;border:1.6px solid color-mix(in srgb, var(--accent) 30%, transparent);border-top-color:var(--accent);animation:nrspin .8s linear infinite;flex:none;box-sizing:border-box} /* tiny spinner ring — "this chat is rendering right now" at a glance from anywhere in the app */
@keyframes nrspin{to{transform:rotate(360deg)}}
/* audit: the repeating coral-outline REPLY pills were the loudest offender — quiet coral text, no border/pill */
.nr-chip{font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--accent-text,var(--accent));border:0;background:none;border-radius:0;padding:0;flex:none}
/* quiet "Model" tag on a saved Models-playground session row — distinguishes it from chats/ads without shouting */
.nr-tag{margin-left:auto;font-size:8.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);border:1px solid var(--border);border-radius:5px;padding:1px 4px;flex:none}
/* ── clarify wizard ── */
.cc-wizard{display:flex;flex-direction:column;gap:10px;border:1px solid color-mix(in oklab,var(--accent) 25%,transparent);box-shadow:0 0 26px -16px var(--accent-glow)}
.cw-q{font-family:var(--font-body);font-size:15px;font-weight:600;line-height:1.4} /* body font — the display serif read thin/hard at this size */
.cw-opts{display:flex;flex-direction:column;gap:6px}
.cw-opt{display:flex;align-items:center;gap:10px;text-align:left;width:100%;border:1px solid var(--border);background:var(--surface);border-radius:11px;padding:10px 12px;color:var(--text,#e9ecdf);font-size:13.5px;cursor:pointer}
.cw-opt:hover{border-color:rgba(255,255,255,.28)}
.cw-opt.sel{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--accent)}
.cw-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding-top:9px}
/* video approval gate */
.vg-recap{font-size:11.5px;color:var(--muted,#9aa08a);letter-spacing:.2px;margin:-4px 0 2px}
.cw-body{display:flex;flex-direction:column;gap:1px}
.cw-body small{font-size:11.5px;color:var(--muted,#9aa08a)}

/* ── UX queue: composer horizon glow + compact category chips (#11) ── */
/* ════ PREMIUM EMPTY STATE — air, type, one hero input. No box-in-box. ════ */
.cc.empty .cc-left{border:0;background:transparent;box-shadow:none;overflow:visible}
.cc.empty .cc-start{max-width:860px;padding:1.6vh 10px 0}
.cc.empty .cc-eyebrow{margin-bottom:8px}
.cc.empty .cc-greet{font-size:clamp(30px,3.6vw,46px);line-height:1.02;letter-spacing:-.03em;margin-bottom:8px}
.cc.empty .cc-substart{font-size:14px;margin-bottom:26px;max-width:none;white-space:nowrap}
@media (max-width:680px){.cc.empty .cc-substart{white-space:normal;max-width:460px}}
/* categories: one quiet centered row — text-first chips, theme-aware materials */
.cc.empty #ccCats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:860px;margin:0 auto 14px}
.cc.empty #ccCats .cc-tile{flex-direction:row;align-items:center;gap:8px;height:36px;padding:0 15px 0 12px;border-radius:10px;width:auto;overflow:visible;background:var(--surface);border:1px solid var(--border);transition:background .15s,border-color .15s}
.cc.empty #ccCats .cc-tile:hover{transform:none;background:var(--surface-2);border-color:var(--border-2);box-shadow:none}
.cc.empty #ccCats .cc-tile-bg{display:none}
.cc.empty #ccCats .cc-tile-ic{width:auto;height:auto;margin:0;background:none;box-shadow:none;font-size:14px;filter:saturate(.85)}
.cc.empty #ccCats .cc-tile-l{font-size:13px;font-weight:600;letter-spacing:.1px;white-space:nowrap}
.cc.empty #ccCats .cc-tile-s{display:none}
.cc.empty #ccCats .cc-tile.on{background:color-mix(in oklab,var(--accent) 9%,transparent);border-color:transparent;box-shadow:inset 0 0 0 1px var(--accent)}
.cc.empty #ccCats .cc-tile.on .cc-tile-l{color:var(--accent-text,var(--accent))}
/* example prompts: a centered compact list (the .cc-ex-list inside owns the row layout) */
.cc.empty .cc-examples{display:block;max-width:560px;margin:0 auto 16px}
/* SOLID fill so the cards read clearly on the bright green panel (transparent let the grid/green bleed through and killed contrast) */
.cc.empty .cc-ex{display:flex;align-items:center;gap:11px;text-align:left;border:1px solid var(--border-2);background:var(--surface);border-radius:13px;padding:14px 17px;font-size:13.5px;color:var(--text);cursor:pointer;box-shadow:0 6px 20px -14px rgba(0,0,0,.5);transition:background .15s,border-color .15s,transform .15s}
.cc.empty .cc-ex:hover{background:var(--surface-2);border-color:var(--accent);transform:translateY(-1px)}
.cc.empty .cc-ex .cc-ex-tag{color:var(--accent-text,var(--accent));font-weight:700}
/* the composer is the centerpiece: bigger type, elevated, horizon glow */
.cc.empty .cc-composer{position:relative;max-width:860px;width:100%;margin:0 auto 18px;padding:14px 16px 16px;border-radius:20px;border:1px solid var(--hairline);background:var(--surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)} /* hairline (not a hard outline "bubble"); soft float comes from the scoped shadow above */
/* (removed the coral glow-beneath the composer — it pooled onto the "Hermoso can make mistakes" disclaimer below it; the dark drop-shadow alone gives the float) */
.cc.empty .cc-composer textarea{font-size:16.5px;min-height:84px;padding-top:4px}
/* the CARD is the input on the landing — no second grey field nested inside it */
.cc.empty .cc-composer #createProduct{background:transparent;border:0;box-shadow:none}
.cc.empty .cc-composer #createProduct:focus{border:0;box-shadow:none;outline:none}

/* ── FORMAT GALLERY — looping video previews of every ad format (Studio landing only) ── */
#ccFormats{display:none}
.cc.empty #ccFormats{display:block;max-width:1040px;width:100%;margin:20px auto 6px;padding-top:24px;border-top:1px solid var(--border);text-align:left}
.cc-fmt-head{margin:0 2px 4px}
.cc-fmt-eyebrow{display:block;font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.cc-fmt-sub{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.cc-fmt-group{margin-top:18px}
.cc-fmt-grouph{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 2px 11px}
.cc-fmt-grouph b{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-text)}
.cc-fmt-grouph span{font-size:11.5px;color:var(--faint)}
/* one-row horizontal rail per group (Dave 2026-07-14: the wrap-grid pushed the inspiration-to-remix section too far down) — same idiom as .carousel-track */
.cc-fmt-grid{display:flex;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px 2px 6px}
.cc-fmt-grid::-webkit-scrollbar{display:none}
.cc-fmt-grid > .cc-fmt{flex:0 0 152px;scroll-snap-align:start}
/* stacked text-chip columns riding the same rail as the video example cards (2 chips ≈ one card height) */
.cc-fmt-stack{flex:0 0 176px;display:flex;flex-direction:column;gap:12px;scroll-snap-align:start}
.cc-fmt-chip{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;text-align:left;padding:14px 16px;border:1px solid var(--border-2);border-radius:14px;background:var(--surface);color:var(--text);font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.cc-fmt-chip:hover{border-color:var(--accent);background:var(--surface-2)}
.cc-fmt-chip .cc-fmt-what{white-space:normal}
.cc-fmt-chip.is-new::before{content:'NEW';font-size:9px;font-weight:700;letter-spacing:.08em;color:#fff;background:var(--accent);border-radius:99px;padding:2px 7px}
@media (max-width:640px){.cc-fmt-grid{gap:9px}.cc-fmt-grid > .cc-fmt{flex-basis:132px}.cc-fmt-stack{flex-basis:152px;gap:9px}}
.cc-fmt{position:relative;display:flex;flex-direction:column;padding:0;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;transition:transform .18s cubic-bezier(.2,.7,.2,1),border-color .18s,box-shadow .18s}
.cc-fmt:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 18px 40px -22px var(--accent-glow),inset 0 0 0 1px color-mix(in oklab,var(--accent) 24%,transparent)}
.cc-fmt:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 20%,transparent)}
.cc-fmt-media{position:relative;display:block;width:100%;aspect-ratio:9/16;background:#0a0a0c;overflow:hidden}
.cc-fmt-poster,.cc-fmt-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cc-fmt-vid{opacity:0;transition:opacity .3s ease}
.cc-fmt.previewing .cc-fmt-vid{opacity:1}
.cc-fmt-play{position:absolute;left:7px;bottom:7px;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;color:#fff;background:rgba(10,10,12,.5);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);transition:opacity .2s;pointer-events:none}
.cc-fmt-play svg{margin-left:1px}
.cc-fmt.previewing .cc-fmt-play{opacity:0}
.cc-fmt-cap{padding:9px 11px 11px;display:flex;flex-direction:column;gap:2px}
.cc-fmt-name{font-size:12.5px;font-weight:700;color:var(--text);letter-spacing:-.01em;line-height:1.18}
.cc-fmt-what{font-size:10.5px;line-height:1.32;color:var(--muted)}
.cc-fmt-go{position:absolute;top:7px;right:7px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;font-size:13px;font-weight:800;line-height:1;color:var(--accent-ink);background:var(--accent);opacity:0;transform:translateY(-3px) scale(.82);transition:opacity .18s,transform .18s;box-shadow:0 5px 14px -5px var(--accent-glow)}
.cc-fmt:hover .cc-fmt-go,.cc-fmt:focus-visible .cc-fmt-go{opacity:1;transform:none}
@media (hover:none){.cc-fmt-go{opacity:.92;transform:none}}
@media (prefers-reduced-motion:reduce){.cc-fmt,.cc-fmt-go,.cc-fmt-vid,.cc-fmt-play{transition:none}}
/* "See all formats" expander — desktop shows the whole gallery, so the toggle is mobile-only (revealed in the ≤640px block) */
.cc-fmt-more{display:none;align-items:center;justify-content:center;gap:6px;width:100%;margin:12px auto 0;padding:11px 14px;border:1px solid var(--border-2);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}
.cc-fmt-more:hover{background:var(--surface-2);border-color:var(--accent)}
.cc-fmt-more-cv{transition:transform .2s}
#ccFormats.fmts-open .cc-fmt-more-cv{transform:rotate(180deg)}
/* ═══ STUDIO EMPTY STATE — MOBILE (≤640px) ═══
   The desktop 34px side-padding ate 68px of a phone screen, so the 151px category chips
   couldn't pair and stacked into a full-width vertical tower. Reclaim the width, shrink the
   chips into a wrapped cloud (2–3/row), and collapse the tall format gallery behind a toggle. */
@media (max-width:640px){
  #tab-create:not(.creating) .cc{padding:6px 12px 18px} /* was 20px 34px 22px — reclaim horizontal room + trim the top dead space */
  #tab-create:not(.creating) .cc-thread{padding:6px 8px 12px} /* was 18px all round — the 18px sides also squeezed the chip row */
  /* tighten the run-up so the composer sits near the fold, not pushed off by the async recs */
  .cc.empty .cc-substart{margin-bottom:16px}
  .cc.empty .cc-greet{margin-bottom:6px}
  /* "Recommended for you" cards → compact 2-up (they collapse to a tall 1-col tower ≤720px otherwise) */
  .cc.empty .cc-recs-grid{grid-template-columns:1fr 1fr;gap:8px}
  .cc.empty .cc-rec{padding:9px 10px;column-gap:9px;border-radius:11px}
  .cc.empty .cc-rec-ic{width:28px;height:28px}
  .cc.empty .cc-rec-l{font-size:12.5px}
  .cc.empty .cc-rec-w{font-size:10.5px}
  /* category chips → compact wrapped cloud instead of one-per-row tower */
  .cc.empty .cc-start{padding:2px 4px 0}
  .cc.empty #ccCats{gap:8px;margin:2px auto 12px;max-width:none}
  .cc.empty #ccCats .cc-tile{height:30px;padding:0 9px;gap:6px;border-radius:9px}
  .cc.empty #ccCats .cc-tile-ic{font-size:12px}
  .cc.empty #ccCats .cc-tile-ic svg{width:12px;height:12px}
  .cc.empty #ccCats .cc-tile-l{font-size:11px;letter-spacing:0}
  /* composer: a touch tighter, textarea stays ≥16px so iOS never zoom-on-focuses */
  .cc.empty .cc-composer{padding:12px 13px 14px;border-radius:18px}
  .cc.empty .cc-composer textarea{font-size:16px;min-height:72px}
  /* format gallery: less top air (the old max-height collapse + "See all" expander retired — the groups are one-row rails now, so the section stays short by construction) */
  .cc.empty #ccFormats{margin-top:14px;padding-top:18px}
  .cc-fmt-group:first-child{margin-top:0}
  .cc-fmt-eyebrow{font-size:18px}
  .cc-fmt-grouph{margin-bottom:9px}
  .cc-fmt-name{font-size:12px}
  .cc-fmt-what{font-size:10px;line-height:1.3}
}
/* ── editorial voice for creative deliverables (#10) — the work reads differently than the chrome ── */
/* storyboard beat descriptions are BODY copy — use the readable sans, not italic display serif (italic Cormorant at paragraph length is hard to read) */
.cr-block .cr-v{font-family:var(--font-body);font-style:normal;font-size:13.5px;line-height:1.6;color:var(--text)}
.cr-block .cr-sub{font-size:12.5px}
.cr-scene{border-left:2px solid color-mix(in oklab,var(--accent) 40%,transparent);padding-left:10px}
.cr-scene-n{font-variant-numeric:tabular-nums}
/* ── wait-state banner (#14) ── */
#genBanner{display:flex;align-items:center;gap:9px;margin:0 0 8px;padding:9px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);font-size:12.5px;color:var(--muted,#9aa08a)}
#genBanner .gb-x{margin-left:auto;background:none;border:0;color:var(--muted,#9aa08a);font-size:15px;cursor:pointer}
/* autonomy micro-label */
.cc-fmt-lbl{font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted,#9aa08a);margin-right:-2px}
/* canvas header: type filter + tile size */
.cc-canvas-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;position:sticky;top:0;z-index:40;padding:12px 0 12px;background:var(--bg)} /* Higgsfield-style: opaque, SAME color as the gallery region (no distinct bar), pinned at the top so the filters ALWAYS show and tiles scroll cleanly UNDER it. z-index ABOVE the hovered-tile z-index (30) so a hovered tile never pops over the filter bar */
.cvh-filter,.cvh-zoom{display:flex;gap:5px}
.cv-hide{display:none!important}
/* 📱 organic caption card */
.cc-organic{display:flex;flex-direction:column;gap:8px}
.og-head{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted,#9aa08a)}
.og-head .mini{margin-left:auto}
.og-caption{white-space:pre-wrap;font-size:14px;line-height:1.55;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:11px 13px}
.og-tags{font-size:12.5px;color:#7fb3ff;line-height:1.5}

/* ── multi-select for generated assets ── */
.sel-dot{position:absolute;top:8px;left:8px;width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);background:rgba(0,0,0,.35);cursor:pointer;opacity:0;transition:opacity .12s,background .12s;z-index:4;padding:0}
.cr-gen-item{position:relative}
.cr-gen-item:hover .sel-dot,.asset-tile:hover .sel-dot,.sel-dot.on{opacity:1}
.sel-dot.on{background:var(--accent);border-color:var(--accent)}
.sel-dot.on::after{content:'✓';display:grid;place-items:center;width:100%;height:100%;font-size:12px;font-weight:800;color:var(--accent-ink,#10120a)}
#selTray{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:230;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:16px;background:var(--surface);border:1px solid var(--border-2);box-shadow:0 18px 50px -18px rgba(0,0,0,.55);animation:fadeIn .15s ease}
#selTray b{font-size:13px;margin-right:2px}
.st-thumb{width:28px;height:28px;border-radius:8px;object-fit:cover}
.st-x{background:none;border:0;color:var(--muted);font-size:17px;cursor:pointer;padding:0 2px}
.cc-finehint{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);font-size:11px;color:var(--faint);opacity:.8;white-space:nowrap;pointer-events:none} /* recedes; the glow no longer pools behind it */
/* 📄 print sheet (swipefile PDF export) */
#printSheet{display:none}
@media print{
  body>*:not(#printSheet){display:none!important}
  #printSheet{display:block;color:#000;background:#fff;font-family:var(--font-body)}
  #printSheet h1{font-size:20px;margin:0 0 14px}
  #printSheet h1 small{font-weight:400;color:#666;font-size:12px}
  .ps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .ps-card{border:1px solid #ddd;border-radius:8px;padding:8px;page-break-inside:avoid}
  .ps-card img{width:100%;border-radius:6px}
  .ps-meta{display:flex;justify-content:space-between;font-size:11px;margin-top:6px}
  .ps-card p{font-size:10.5px;color:#333;margin:4px 0 0;line-height:1.35}
  .ps-tags{font-size:9.5px;color:#777;margin-top:3px}
}
.cc-tile-ic svg{display:block;opacity:.85}
.cc-tile.on .cc-tile-ic svg{color:var(--accent-text)}
/* billing sub-tabs breathing room */
.bsub-tabs{display:flex;gap:7px;margin:2px 0 20px}
/* Audit C: Ad Radar Search/Watching → underline tabs (primary view switch, no filled pill) */
#tab-inspire .bsub-tabs{gap:22px;border-bottom:1px solid var(--hairline);margin:4px 0 18px}
#tab-inspire .bsub-tabs .seg{background:none;border:0;color:var(--muted);padding:8px 0;border-radius:0;box-shadow:none;position:relative;font-weight:600}
#tab-inspire .bsub-tabs .seg:hover{color:var(--text);border-color:transparent}
#tab-inspire .bsub-tabs .seg.active{background:none;color:var(--text);box-shadow:none;border:0}
#tab-inspire .bsub-tabs .seg.active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);border-radius:2px}
/* Audit C: Library asset filters → inset segmented track (active = raised pill), no coral fill */
#assetToolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
#assetToolbar .cvh-filter{display:inline-flex;gap:2px;background:var(--bg-2);border:1px solid var(--border);border-radius:9px;padding:3px}
#assetToolbar .cvh-filter .cc-chip{background:none;border:0;color:var(--muted);padding:5px 13px;border-radius:7px;font-size:12.5px;font-weight:600;box-shadow:none}
#assetToolbar .cvh-filter .cc-chip:hover{color:var(--text);background:none}
#assetToolbar .cvh-filter .cc-chip.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.18)}
#bsub-usage table.usage td,#bsub-usage table.usage th{padding-top:11px;padding-bottom:11px}
#bsub-costs .card{margin-bottom:16px}

/* topstrip removed — give the main column its space back */
.main{padding-top:18px}
.main:has(#tab-create.creating.has-gallery){padding-top:0} /* in the gallery split-view, let BOTH the chat and gallery reach the very top of the browser (Higgsfield-style); the chat thread keeps its own internal padding so text doesn't jam the edge */
/* brand save bar: a real bar, not a floating strip */
/* brand save: just floating buttons (no bar) — right padding keeps them clear of the fixed jobs widget */
#brandActions.modal-actions{background:none;border:0;padding:0 170px 0 0;margin:18px 0 22px;position:sticky;bottom:16px;display:flex;justify-content:flex-end;gap:10px;pointer-events:none}
#brandActions.modal-actions button{pointer-events:auto;box-shadow:0 10px 26px -12px rgba(0,0,0,.5)}
#brandActions.modal-actions .ghost{background:var(--surface)}
/* sidebar foot alignment */
/* ── Audit A: footer = one quiet hairline cluster (no filled blocks) ── */
.sidebar-foot{display:flex;align-items:center;gap:6px;position:relative;padding-top:8px;border-top:1px solid var(--hairline);margin-top:4px}
.sidebar-foot .brand-chip{flex:1 1 auto;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* profile chip → ghost (no border / no fill); hover = faint wash */
.sidebar-foot .brand-chip.set{border:0;background:transparent;box-shadow:none;padding:6px 8px;border-radius:10px}
.sidebar-foot .brand-chip.set:hover{background:var(--tap);color:var(--text)}
/* theme toggle → borderless 28px ghost icon button */
.sidebar-foot .theme-toggle{width:28px;height:28px;aspect-ratio:auto;align-self:center;border:0;background:transparent;color:var(--meta);border-radius:8px;display:grid;place-items:center}
.sidebar-foot .theme-toggle:hover{background:var(--tap);color:var(--text);border-color:transparent}
#brandChip .brand-chip-caret{flex:none;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);opacity:.7;transition:.15s}
#brandChip .brand-chip-caret svg{display:block}
#brandChip:hover .brand-chip-caret{opacity:1;color:var(--text)}

/* Profile switcher menu (opens upward from the brand chip). Fixed-positioned (left/bottom/min-width set in
   JS from the chip's rect) so it escapes the sidebar's clipping. It is also re-parented to <body>
   on open (see toggleProfileMenu) so it escapes the sidebar's STICKY stacking context — otherwise
   position:fixed only frees the geometry, not the paint order, and positioned page content (e.g.
   .plan-card on Billing) paints over the trapped menu. z-index sits above page content + pickers,
   below the full-screen modals (cosmos 9000, lightbox/edit-modal 1000). */
/* Flex column: credits header pinned top, account actions pinned bottom, ONLY the brand list scrolls between
   them (see .pm-header/.pm-scroll/.pm-footer). max-height here is a fallback — toggleProfileMenu sets a
   viewport-safe inline max-height from the chip anchor so the menu never runs past the viewport edge. */
.profile-menu{position:fixed;z-index:650;min-width:240px;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:6px;box-shadow:0 18px 50px -16px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.02);max-height:min(80vh,600px);overflow:hidden;animation:pmIn .14s cubic-bezier(.2,.7,.2,1)}
/* CRITICAL: the rule above sets display:flex (added with the flex-column rework), which — as an AUTHOR rule — beats
   the UA `[hidden]{display:none}` at equal specificity, so `m.hidden=true` NO LONGER hid the menu: it stayed open and
   NO close path (outside-click / Esc / chip re-click) could dismiss it, AND the empty `hidden` menu painted its surface
   capsule over the brand chip on load until the first hover reparented it. Restore the hide (same guard pattern as
   `.cosmos[hidden]` / `.mt-opt[hidden]`). */
.profile-menu[hidden]{display:none !important}
@keyframes pmIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.profile-menu .pm-head{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:7px 10px 4px}
.profile-menu .pm-list{display:flex;flex-direction:column;gap:1px}
.profile-menu .pm-header,.profile-menu .pm-footer{flex:none}
/* ONLY the brand list scrolls; credits header + account footer stay pinned regardless of brand count. Hairline
   top/bottom edges (via the --pm-up/--pm-dn toggles set on scroll) appear only when list is hidden that way. */
.profile-menu .pm-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;--pm-up:transparent;--pm-dn:transparent;box-shadow:inset 0 1px 0 0 var(--pm-up),inset 0 -1px 0 0 var(--pm-dn)}
.profile-menu .pm-scroll.pm-more-up{--pm-up:var(--border)}
.profile-menu .pm-scroll.pm-more-down{--pm-dn:var(--border)}
/* Brand filter (shown only at ≥10 profiles) — pinned in the header; mirrors the sidebar .nav-recent-search field */
.profile-menu .pm-search{flex:none;padding:2px 4px 4px}
.profile-menu .pm-search input{width:100%;box-sizing:border-box;background:var(--bg-2);border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:8px;font-size:12px;font-family:var(--font-body);transition:border-color .14s}
.profile-menu .pm-search input::placeholder{color:var(--faint)}
.profile-menu .pm-search input:focus{outline:none;border-color:var(--accent)}
.profile-menu .pm-empty{color:var(--faint);font-size:12px;padding:8px 10px}
.profile-menu .pm-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;color:var(--text);padding:8px 10px;border-radius:9px;font:inherit;font-size:13px;cursor:pointer;transition:.12s}
.profile-menu .pm-row:hover{background:var(--surface-2)}
.profile-menu .pm-row.on{background:color-mix(in oklab,var(--accent) 9%,var(--surface))}
.profile-menu .pm-ava{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:800;background:color-mix(in oklab,var(--accent) 18%,var(--surface-2));color:var(--accent-text)}
.profile-menu .pm-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-menu .pm-check{flex:none;color:var(--accent-text);font-weight:800}
.profile-menu .pm-rowwrap{display:flex;align-items:center;gap:2px}
.profile-menu .pm-rowwrap .pm-row{flex:1 1 auto;min-width:0}
/* Always faintly visible so deleting a profile is discoverable (was opacity:0 / hover-only → users couldn't find it). */
.profile-menu .pm-del{flex:none;background:none;border:0;font:inherit;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;opacity:.32;transition:.12s;border-radius:6px;width:24px;height:24px;display:grid;place-items:center}
.profile-menu .pm-rowwrap:hover .pm-del{opacity:.7}
.profile-menu .pm-del:hover,.profile-menu .pm-del:focus-visible{opacity:1;color:var(--text);background:var(--surface-2);outline:none}
.profile-menu .pm-div{height:1px;background:var(--border);margin:5px 4px}
.profile-menu .pm-add{color:var(--accent-text);font-weight:600}
.profile-menu .pm-add.pm-locked{color:var(--muted);font-weight:500}
.profile-menu .pm-plan{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);padding:2px 7px;border-radius:999px}

/* Team & access modal (invite scaffold) */
.team-modal{max-width:480px;width:min(94vw,480px)}
.team-modal .tm-list{display:flex;flex-direction:column;gap:4px;margin:12px 0;max-height:230px;overflow:auto}
.team-modal .tm-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);font-size:13px}
.team-modal .tm-ava{flex:none;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:800;background:color-mix(in oklab,var(--accent) 16%,var(--surface));color:var(--accent-text)}
.team-modal .tm-ava.owner{background:var(--accent);color:var(--accent-ink)}
.team-modal .tm-email{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-modal .tm-role{flex:none;font-size:11px;color:var(--muted);background:var(--surface);border:1px solid var(--border);padding:2px 8px;border-radius:999px}
.team-modal .tm-role.owner{color:var(--accent-text);border-color:color-mix(in oklab,var(--accent) 40%,var(--border))}
.team-modal .tm-status{flex:none;font-size:11px;color:var(--muted)}
.team-modal .tm-role-sel{flex:0 0 auto;width:auto;font-size:11.5px;padding:3px 22px 3px 10px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path d='M0 0l4 5 4-5z' fill='%23999'/></svg>");background-repeat:no-repeat;background-position:right 8px center} /* room for the caret — it rendered on top of the label */
.team-modal .tm-rolehint{font-size:11px;color:var(--faint);margin:10px 0 0;line-height:1.5}
.team-modal .tm-x{flex:none;background:none;border:0;color:var(--muted);font-size:17px;line-height:1;cursor:pointer;padding:0 2px}
.team-modal .tm-x:hover{color:var(--text)}
.team-modal .tm-invite{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.team-modal .tm-invite .em-field{flex:1 1 auto;width:auto;min-width:0;margin:0}
.team-modal .tm-invite .cc-pillsel{flex:0 0 auto;width:auto}
.team-modal .tm-invite .primary{flex:0 0 auto}
.team-modal .tm-note{font-size:11.5px;color:var(--muted);margin:11px 0 2px;line-height:1.5}
.team-modal .tm-scopehint{font-size:11.5px;color:var(--faint);margin:2px 0 12px;line-height:1.5}
.team-modal .tm-sso{font-size:12px;line-height:1.55;color:var(--muted);margin:12px 0 2px;padding:12px 14px;border:1px solid var(--line,rgba(127,127,127,.2));border-radius:12px;background:var(--bg-soft,rgba(127,127,127,.04))}
.team-modal .tm-sso b{color:var(--ink,inherit)}
.team-modal .tm-sso a{color:var(--accent,#D85C42);font-weight:600;text-decoration:none;white-space:nowrap}
.team-modal .tm-sso a:hover{text-decoration:underline}
.team-modal .tm-sso.off{opacity:.85}

/* Profile-menu CREDITS row (Higgsfield-style account popover entry) */
.profile-menu .pm-credits{align-items:center}
.profile-menu .pm-credits-ava{background:var(--accent);color:var(--accent-ink);font-weight:800}
.profile-menu .pm-credits-n{color:var(--muted);font-weight:500;font-size:12px;margin-left:2px}
.profile-menu .pm-credits-get{flex:none;margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);padding:3px 11px;border-radius:999px}
.profile-menu .pm-credits:hover .pm-credits-get{background:var(--accent-2)}

/* Add-credits modal — one-click top-up (no Stripe redirect) */
.credits-modal{max-width:720px;width:min(94vw,720px);position:relative}
.credits-modal .cm-close{position:absolute;top:14px;right:14px;background:none;border:0;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;width:30px;height:30px;border-radius:50%;display:grid;place-items:center}
.credits-modal .cm-close:hover{color:var(--text);background:var(--surface-2)}
.credits-modal .cm-bal{color:var(--muted);font-size:13px;margin:2px 0 14px}
.credits-modal .cm-packs{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.credits-modal .cm-pack{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--surface-2);border:1.5px solid var(--border);border-radius:13px;padding:14px 16px;cursor:pointer;font:inherit;transition:.14s}
.credits-modal .cm-pack:hover{border-color:color-mix(in oklab,var(--accent) 40%,var(--border))}
.credits-modal .cm-pack.sel{border-color:var(--accent);background:color-mix(in oklab,var(--accent) 8%,var(--surface-2));box-shadow:0 0 0 1px var(--accent)}
.credits-modal .cm-pack-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.credits-modal .cm-pack-cr{font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.credits-modal .cm-pack-sub{font-size:12px;color:var(--muted)}
.credits-modal .cm-pack-price{flex:none;font-size:18px;font-weight:800;color:var(--text)}
.credits-modal .cm-buy{width:100%;justify-content:center;padding:13px;font-size:15px;border-radius:12px}
.credits-modal .cm-method{text-align:center;margin:11px 0 0;font-size:12.5px;color:var(--muted)}
.credits-modal .cm-method .cm-card{color:var(--text)}
/* two-column layout: pay (packs + buy) on the left, recharge settings on the right */
.credits-modal .cm-cols{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:start;margin-top:4px}
.credits-modal .cm-pay{min-width:0}
.credits-modal .cm-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.credits-modal .cm-buy{width:100%}
/* Auto-reload + Monthly-limit cards — surface the recharge settings right where you top up */
.credits-modal .cm-set{border:1.5px solid var(--border);border-radius:13px;background:var(--surface-2);overflow:hidden;transition:border-color .15s}
.credits-modal .cm-set.on{border-color:color-mix(in oklab,var(--accent) 42%,var(--border))}
.credits-modal .cm-set-head{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;cursor:pointer}
.credits-modal .cm-set-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.credits-modal .cm-set-t b{font-size:13.5px;color:var(--text);font-weight:700;letter-spacing:-.01em}
.credits-modal .cm-set-sub{font-size:11.5px;color:var(--muted);line-height:1.4}
.credits-modal .cm-set-head .switch{margin-top:1px}
.credits-modal .cm-set-body{padding:2px 14px 13px;display:flex;flex-direction:column;gap:8px}
.credits-modal .cm-set-body.off{display:none}
.credits-modal .cm-field{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:12.5px;color:var(--muted)}
.credits-modal .cm-field-lbl{font-size:12px;color:var(--muted)}
.credits-modal .cm-field-ctl{display:flex;align-items:center;gap:8px}
.credits-modal .cm-field input,.credits-modal .cm-field select{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:9px;padding:6px 9px;font:inherit;font-size:12.5px}
.credits-modal .cm-field input[type=number]{width:64px;-moz-appearance:textfield;appearance:textfield}
.credits-modal .cm-field input[type=number]::-webkit-outer-spin-button,.credits-modal .cm-field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.credits-modal .cm-field select{width:100%;min-width:0;cursor:pointer}
.credits-modal .cm-field>label,.credits-modal .cm-field{width:100%}
.credits-modal .cm-field input:focus,.credits-modal .cm-field select:focus{outline:none;border-color:var(--accent)}
.credits-modal .cm-field .cm-dollar{display:inline-flex;align-items:center;gap:2px;color:var(--text)}
.credits-modal .cm-field .cm-dollar input{width:56px}
.credits-modal .cm-field .cm-unit{color:var(--faint)}
@media (max-width:620px){.credits-modal .cm-cols{grid-template-columns:1fr}}
.credits-modal .cm-fine{font-size:11.5px;color:var(--faint);text-align:center;margin:14px 0 2px;line-height:1.5}
.credits-modal .cm-done{text-align:center;padding:8px 4px 4px;max-width:400px;margin:0 auto}
.credits-modal .cm-done-mark{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:26px;font-weight:800;color:var(--accent-ink);background:var(--accent);box-shadow:0 0 30px -6px var(--accent-glow)}
.credits-modal .cm-done h4{margin:0 0 6px}
/* ＋ menu two-line entries */
[data-plus] small{display:block;font-size:10.5px;color:var(--muted);font-weight:400;margin-top:1px}
/* low-credits nudge in the sidebar */
.low-credits{display:block;width:100%;margin:6px 0 2px;padding:9px 12px;border-radius:12px;border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border));background:color-mix(in srgb, var(--accent) 12%, var(--surface));color:var(--accent-text);font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-align:center;transition:filter .15s}
.low-credits:hover{filter:brightness(1.1)}
.low-credits[hidden]{display:none}
/* out-of-credits gate — a guided moment, not an error */
.credits-gate{text-align:center;max-width:430px}
.credits-gate .cg-spark{width:46px;height:46px;margin:2px auto 10px;display:grid;place-items:center;border-radius:14px;font-size:20px;color:var(--accent-text);background:color-mix(in srgb, var(--accent) 14%, var(--surface));border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border))}
.credits-gate h4{margin:0 0 6px;font-size:17px}
.credits-gate .em-msg{margin:0 0 16px;line-height:1.5}
.credits-gate .em-msg b{color:var(--accent-text)}
/* the gate can carry up to 4 actions (Not now · Raise cap/Upgrade · Draft now · Add credits) — never squish them into
   one 5-across row at 430px. Secondary ghosts WRAP centered; the primary "Add credits" drops to its own full-width row
   so it reads as the obvious next step (app modal convention: prominent primary, readable secondaries). */
.credits-gate .edit-modal-acts{justify-content:center;flex-wrap:wrap;gap:8px}
.credits-gate .edit-modal-acts .mini{flex:0 1 auto}
.credits-gate .edit-modal-acts .primary{order:9;flex:1 0 100%;margin-top:2px}
/* watch manager rows */
.watch-modal{max-width:440px}
.watch-list{display:flex;flex-direction:column;gap:6px;margin:4px 0 14px}
.watch-row{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:11px;background:var(--bg-2);border:1px solid var(--border)}
.watch-row .watch-nm{font-weight:700;font-size:13.5px}
.watch-row .watch-dom{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.watch-row .mem-x{margin-left:auto}
/* Ad Radar ▸ watching-weekly panel */
.watch-panel{margin:6px 0 18px}
.watch-panel .wp-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.watch-panel .wp-head h3{margin:0}
.wp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.wp-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 7px 7px 13px;border-radius:11px;background:var(--bg-2);border:1px solid var(--border-2);font-size:13px;font-weight:600}
.wp-x{background:none;border:0;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;padding:2px 5px;border-radius:6px}
.wp-x:hover{color:var(--danger);background:var(--surface)}
.wp-chip .wp-nm{font-weight:700}
.wp-chip .wp-dom{color:var(--muted);font-weight:400;font-size:12px}
#tab-inspire .bsub-tabs{margin:4px 0 18px}
.wp-warn{margin:2px 0 8px;padding:9px 12px;border-radius:10px;font-size:13px;background:color-mix(in srgb, #ff9f43 12%, var(--surface));border:1px solid color-mix(in srgb, #ff9f43 40%, var(--border));color:var(--text)}
.wp-warn a{color:var(--accent-text);font-weight:700}
/* uniform ad-card header: brand + platform at the same spot on EVERY card — scannable masonry */
.ad-head{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--border);background:var(--surface);border-radius:var(--radius) var(--radius) 0 0;min-width:0}
.ah-pic{width:20px;height:20px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.ah-ph{display:grid;place-items:center;background:color-mix(in oklab,var(--accent) 18%,var(--bg-2));color:var(--accent-text);font-size:11px;font-weight:800}
.ah-nm{font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ah-plat{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);flex:0 0 auto}
.ah-plat i{width:7px;height:7px;border-radius:50%;display:inline-block}
/* the header owns the top corners now — square off the media beneath it */
.ad .ad-head ~ .media, .ad .ad-head ~ .media img, .ad .ad-head ~ .media video{border-radius:0}
.cc-steps{position:relative}
.cc-steps-time{position:absolute;top:10px;right:14px;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.cc-msg .wl-time{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;margin-left:4px}
/* animated Heist mark — the brand "works" while you wait (replaces the generic ring spinner) */
.cc-loadmark{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--accent);color:var(--accent-ink);margin-right:9px;vertical-align:-7px;box-shadow:0 0 14px -2px var(--accent-glow)}
/* the bloom SPINS while MORPHING 4-petal ↔ full 8-petal flower — the extra 4 petals bloom in/out from the center */
.cc-loadmark svg{width:14px;height:14px;animation:loadmarkSpin 2s linear infinite;transform-origin:50% 50%}
.cc-loadmark .bloom-extra{transform-box:view-box;transform-origin:50px 50px;animation:loadmarkMorph 2.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes loadmarkSpin{to{transform:rotate(360deg)}}
@keyframes loadmarkMorph{0%,100%{transform:scale(.12);opacity:0}50%{transform:scale(1);opacity:.95}}
@media (prefers-reduced-motion: reduce){.cc-loadmark svg,.cc-loadmark .bloom-extra{animation:none}.cc-loadmark .bloom-extra{transform:scale(1);opacity:.95}}
.wl-head .cc-loadmark{margin-right:6px}
/* always-visible credits balance — top right, every tab; click → Billing */
.credits-pill{position:fixed;top:14px;right:18px;z-index:120;padding:7px 13px;border-radius:999px;border:1px solid var(--border-2);background:color-mix(in srgb, var(--surface) 88%, transparent);backdrop-filter:blur(8px);color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer;transition:.15s}
.credits-pill b{color:var(--text);font-variant-numeric:tabular-nums}
.credits-pill:hover{border-color:var(--accent);color:var(--text)}
.credits-pill.low{border-color:color-mix(in srgb, var(--accent) 55%, var(--border));background:color-mix(in srgb, var(--accent) 14%, var(--surface))}
.credits-pill.low b{color:var(--accent-text)}
.credits-pill[hidden]{display:none}
/* staged-steps header: animated mark + label + elapsed (the absolute-positioned time overlapped step text) */
.cc-steps .cc-steps-time{position:static}
.cc-steps-head{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-size:13px}
.cc-steps-head b{font-weight:700}
.cc-steps-head .wl-done{color:var(--accent-text);font-weight:800;margin-right:6px}
/* fine print only before the conversation starts — once you're creating it's just noise */
#tab-create.creating .cc-finehint{display:none}
.cvh-filter .cv-n{opacity:.6;font-size:11px;margin-left:3px;font-variant-numeric:tabular-nums}
.ic-fmt{width:13px;height:13px;display:inline-block;vertical-align:-2px;opacity:.85}
.nr-ic .ic-fmt{width:14px;height:14px;vertical-align:-3px}
.cc-angle-fmt .ic-fmt{margin-right:2px}
.cr-gen-item.failed{position:relative}
.cr-gen-errx{position:absolute;top:8px;right:8px;width:24px;height:24px;padding:0;box-sizing:border-box;display:grid;place-items:center;line-height:0;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:13px;cursor:pointer} /* padding:0 — UA button padding was shifting the content box → the × sat off-center in its circle (Dave) */
.cr-gen-errx:hover{color:var(--text);border-color:var(--accent)}
/* Higgsfield-style ask panel: the question takes over the composer; the rest of the chat dims */
.cc-ask{margin:0 0 10px;padding:16px;border-radius:18px;background:var(--surface);border:1px solid var(--border-2);box-shadow:0 18px 50px -20px rgba(0,0,0,.55);animation:fadeIn .18s ease;position:relative;z-index:40}
.cc-ask .cw-q{font-weight:700;font-size:14px;margin-bottom:12px}
.cc-ask .cw-opts{display:flex;flex-direction:column;gap:7px}
.cc-ask .cw-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 13px;border-radius:12px;border:1px solid var(--border);background:var(--bg-2);color:var(--text);font:inherit;font-size:13.5px;cursor:pointer;transition:.13s}
.cc-ask .cw-opt:hover{border-color:var(--border-2)}
.cc-ask .cw-opt.sel{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 9%, var(--bg-2))}
.cc-ask .ca-foot{display:flex;align-items:center;gap:10px;margin-top:13px}
.cc-ask .ca-free{flex:1;min-width:0;padding:9px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg-2);color:var(--text);font:inherit;font-size:13px}
.cc-ask .ca-free:focus{outline:none;border-color:var(--accent)}
.cc-ask .ca-acts{display:flex;gap:8px;align-items:center;flex:0 0 auto}
#tab-create.asking #ccThread, #tab-create.asking #createResult{opacity:.3;pointer-events:none;transition:opacity .25s}
#tab-create.asking #ccComposer{opacity:.45;pointer-events:none}
/* soft takeover (render gates): only the chat thread dims — the gallery being judged stays bright + interactive */
#tab-create.asking-soft #ccThread{opacity:.3;pointer-events:none;transition:opacity .25s}
#tab-create.asking-soft #ccComposer{opacity:.45;pointer-events:none}
.cc-ask .prod-grid{margin:4px 0 4px}
.cc-ask .vg-recap{font-size:12px;color:var(--muted);margin:-6px 0 10px}
/* ── clarify question panel (Feature 2): pager + option label/subtitle + a "do it differently" escape ── */
.cc-ask .cw-qhead{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.cc-ask .cw-qhead .cw-q{margin-bottom:0}
.cc-ask .cw-pager{flex:0 0 auto;font-size:11px;font-weight:800;color:var(--accent-text);background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:999px;padding:2px 9px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.cc-ask .cw-opt-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.cc-ask .cw-opt-t b{font-weight:700;font-size:13.5px;line-height:1.35}
.cc-ask .cw-opt-t small{font-size:12px;color:var(--muted);line-height:1.4}
.cc-ask .cw-opt .kbd{flex:0 0 auto;align-self:flex-start;margin-top:1px}
.cc-ask .cw-diff{margin-top:11px;background:none;border:0;padding:2px 0;color:var(--faint);font:inherit;font-size:12.5px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--border-2)}
.cc-ask .cw-diff:hover{color:var(--text);text-decoration-color:var(--accent)}
/* ── live create progress (Feature 1): streamed concept/rationale prose fills in under the working header ── */
.cc-live .cl-rows:empty{display:none}
.cc-live .cl-prose{margin-top:9px;display:flex;flex-direction:column;gap:8px}
.cc-live .cl-prose:empty{display:none}
.cc-live .cl-line{margin:0;font-family:'Source Serif 4',Georgia,'Times New Roman',serif;font-size:14px;line-height:1.6;color:var(--muted);animation:fadeIn .25s ease;max-width:44em}
.cc-live .cl-line[data-k="concept"]{color:var(--text);font-size:15px}
.cc-live .cl-line[data-k="rationale"]{font-style:italic;color:var(--faint)}
/* ── storyboard reveals scene-by-scene as it "types in" rather than one slam (Feature 3) ── */
.cr-stagger .cr-scene{animation:crSceneIn .34s ease both;animation-delay:calc(var(--si,0)*90ms)}
@keyframes crSceneIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.cr-stagger .cr-scene{animation:none}}
/* ── Higgsfield-grade chat typography: assistant replies read as a DOCUMENT (serif, structured, no bubble);
   only user messages keep the pill. Card-type assistant blocks keep their chrome. ── */
.cc-msg.assistant:not(.cc-worklog):not(.cc-steps):not(.cc-credits):not(.cc-copymsg):not(.cc-campaign):not(.cc-hooks):not(.cc-organic):not(.cc-results):not(.cc-score){background:none;border:0;border-radius:0;padding:6px 2px;max-width:46em;font-family:'Source Serif 4',Georgia,'Times New Roman',serif;font-size:15.8px;line-height:1.7;letter-spacing:.001em}
/* Virality / "will it land?" score card */
.cc-score{--sc-track:rgba(255,255,255,0.13);background:var(--surface);border:1px solid var(--hairline);border-radius:16px;padding:20px 22px;max-width:30em;display:flex;flex-direction:column;gap:15px} /* more air + hairline (not heavy border) — Claude Design "add air / flatten" */
body.light .cc-score{--sc-track:#EFE6DD}
.cc-score .sc-head{display:flex;align-items:center;gap:14px}
/* score dial: coral arc (set inline at render via conic-gradient) on a subtle track, big Cormorant numeral (Claude Design) */
.cc-score .sc-ring{flex:none;width:66px;height:66px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--accent) calc(var(--arc,0)*1%),var(--sc-track) 0);animation:scRingIn .5s ease both} /* fresh cards override `background` inline with the real % (the @property/--arc path silently stuck at 0); this stays as the fallback so older saved cards still show a track ring + numeral instead of an empty circle */
@keyframes scRingIn{from{opacity:0;transform:scale(.84)}to{opacity:1;transform:scale(1)}}
.cc-score .sc-ring::before{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--surface)}
.cc-score .sc-ring-num{position:relative;font-family:var(--font-display);font-weight:600;font-size:31px;line-height:1;color:var(--text);letter-spacing:-.01em} /* score centered alone in the dial (no "out of 100" sub-label) */
.cc-score .sc-h{min-width:0}
.cc-score .sc-tier{display:inline-block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;padding:3px 10px;border-radius:999px;margin-bottom:6px;background:color-mix(in oklab,var(--accent) 12%,transparent);color:var(--accent-text)}
.cc-score .sc-hook{font-size:13px;color:var(--muted);font-style:italic}
.cc-score .scd{display:flex;flex-direction:column;gap:9px}
.cc-score .scd-row{display:grid;grid-template-columns:88px 1fr 26px;align-items:center;gap:9px;font-size:12.5px}
.cc-score .scd-n{color:var(--muted)}.cc-score .scd-v{text-align:right;font-variant-numeric:tabular-nums;color:var(--text);font-weight:600}
.cc-score .scd-bar{height:7px;background:var(--hairline);border-radius:999px;overflow:hidden}.cc-score .scd-bar i{display:block;height:100%;border-radius:999px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
/* warm score ramp keyed to each metric's VALUE — no green; weak recedes to a desaturated CLAY (doubles as the "needs work" cue, per Claude Design — no red) */
.cc-score i.scd-strong{background:var(--accent)}
.cc-score i.scd-ok{background:#EBA48F}
.cc-score i.scd-weak{background:#8C6A52}
.cc-score .scd-v-weak{color:#A8845F}
/* strengths as flat, fill-less chips — let spacing separate, not borders (Claude Design "flatten the boxes") */
.cc-score .sc-str{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:1px}
.cc-score .sc-chip{font-size:11.5px;color:var(--muted);background:transparent;border:0;border-radius:0;padding:0;line-height:1.4;display:inline-flex;align-items:center;gap:6px}
.cc-score .sc-chip::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.55;flex:none} /* a tiny coral tick reads "strength" without a heavy boxed pill */
/* biggest-lever callout: clean inset with a coral left-accent */
.cc-score .sc-fix{font-size:13px;line-height:1.55;background:transparent;border-left:2.5px solid var(--accent);border-radius:0;padding:3px 0 3px 14px} /* flattened — no panel fill, just the coral left-tick + spacing (Claude Design) */
.cc-score .sc-fix-k{font-weight:700;color:var(--accent-text);margin-right:3px}
.cc-score [data-scorefix]{align-self:flex-start}
.cc-score .sc-improve{box-shadow:var(--el-glow)}
/* tier colours (ring border + tier pill + bars) */
/* (old lime/green tier ramp removed — the dial/chip/bars are now the coral value-keyed system above) */
/* ── Batch / variations ranked board: per-tile score + angle badge, rank pill, winner highlight ── */
.cr-gen-item .batch-badge{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:7px 8px;background:linear-gradient(to top,rgba(5,5,8,.92),rgba(5,5,8,.55) 70%,transparent);font-family:var(--font-body);pointer-events:none;z-index:4}
.batch-badge .batch-score{flex:none;font-weight:800;font-size:.82rem;min-width:1.9em;text-align:center;border-radius:6px;padding:1px 5px;color:#10130a;background:var(--accent)}
.batch-badge .batch-score.sc-strong{background:#7bd88f}.batch-badge .batch-score.sc-solid{background:#cbe86b}.batch-badge .batch-score.sc-okay{background:#e6b450}.batch-badge .batch-score.sc-past{background:#e07a6b;color:#2a0f0a}
.batch-badge .batch-angle{flex:1;min-width:0;color:#fff;font-size:.74rem;font-weight:600;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.7);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.batch-badge .batch-rank{flex:none;font-weight:800;font-size:.72rem;color:var(--muted)}
.batch-badge .batch-rank.win{color:#10130a;background:var(--accent);border-radius:6px;padding:1px 5px}
.cr-gen-item.batch-winner{outline:2px solid var(--accent);outline-offset:1px;box-shadow:0 0 0 1px var(--accent),0 8px 30px -6px rgba(216,92,66,.45);z-index:5}
.cc-msg.assistant .md-h{display:block;font-family:var(--font-display);font-weight:600;font-size:1.16em;line-height:1.3;margin:14px 0 4px;letter-spacing:-0.01em}
.cc-msg .md-b{color:var(--accent-text);font-weight:700;font-family:var(--font-body);font-size:.92em}
.cc-msg.assistant b{font-weight:600}
.cc-msg.user{font-size:13.5px}
/* the gallery type filter: a proper segmented pill (the square band behind round chips read as a mistake) */
.cvh-filter{background:color-mix(in srgb, var(--surface) 84%, transparent);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:999px;padding:4px;gap:2px}
.cvh-filter .cc-chip{border:0;background:transparent;border-radius:999px}
.cvh-filter .cc-chip.on{background:var(--accent);color:var(--accent-ink);font-weight:700}
.cvh-filter .cc-chip.on .cv-n{opacity:.75}
/* circular icon buttons: svg glyphs center optically (text ×/› sat off-center) */
.lightbox-x svg,.lightbox-nav svg,.cnav svg{display:block}
.ad .cnav{padding:0}
/* Studio gallery tiles: media at its natural ratio, borderless — no letterbox ring (Higgsfield-style clean tiles) */
.cc-gallery .cr-genmedia{object-fit:unset;height:auto;max-height:none;background:transparent}
.cc-gallery .cr-gen-item{background:transparent;border:0}
.cc-gallery .cr-gen-item.failed,.cc-gallery .cr-gen-item:has(.cr-gen-load){background:#0b0b0e;border:1px solid var(--border)}

/* onboarding alt-paths (no website → social / describe) */
.brand-alt-onboard { display: flex; align-items: center; gap: 8px; margin: 10px 0 18px; flex-wrap: wrap; font-size: 13px; }
.brand-alt-onboard .link-btn { font-size: 13px; }
/* linked / auto-discovered social accounts (chips) */
.brand-socials { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 2px; }
.brand-socials .bs-lbl { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.bs-chip { display: inline-flex; align-items: center; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 0 4px 0 0; font-size: 12.5px; }
.bs-chip a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; padding: 5px 4px 5px 11px; border-radius: 999px; }
.bs-chip a:hover { color: var(--accent-text); }
.bs-chip .bs-ic { display: grid; place-items: center; width: 16px; height: 16px; font-size: 12px; font-weight: 700; color: var(--accent-text); }
.bs-chip .bs-x { background: none; border: 0; color: var(--faint); font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 5px; border-radius: 50%; opacity: .6; }
.bs-chip .bs-x:hover { opacity: 1; color: var(--text); background: var(--surface); }
#brandSocialBox select { max-width: 130px; }

/* First-time language-switch indicator (translation is a one-time per-language LLM pass, then cached) */
.i18n-busy { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(8px); z-index: 9999;
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 999px;
  background: var(--surface, #14160f); color: var(--text, #f4f4ef); border: 1px solid var(--border, #2a2d22);
  box-shadow: 0 8px 30px rgba(0,0,0,.35); font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; }
.i18n-busy.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.i18n-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--accent, #D85C42);
  border-top-color: transparent; animation: i18nspin .7s linear infinite; }
@keyframes i18nspin { to { transform: rotate(360deg); } }

/* ── Settings ▸ "Use Heist from your AI" (MCP / CLI / Skills) ── */
#devConnectCard .mcp-tabs .cc-chip { font-size: 13px; }
.mcp-steps { margin: 14px 0 6px; padding-left: 20px; display: flex; flex-direction: column; gap: 13px; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.mcp-steps > li { padding-left: 4px; }
.mcp-steps b { font-weight: 700; }
.mcp-steps code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; color: var(--accent-text); }
.mcp-code { display: flex; align-items: center; gap: 8px; margin-top: 8px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; cursor: pointer; transition: border-color .12s; }
.mcp-code:hover { border-color: var(--border-2); }
.mcp-code:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* wrap long commands so nothing is hidden (was overflow-x:auto white-space:pre → text got clipped in the narrow step columns) */
.mcp-code code { flex: 1; min-width: 0; background: none; border: 0; padding: 0; color: var(--text); font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.mcp-copy { flex: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); border-radius: 6px; width: 28px; height: 26px; cursor: pointer; font-size: 13px; line-height: 1; transition: color .12s, border-color .12s; }
.mcp-copy:hover { color: var(--text); border-color: var(--border-2); }
.mcp-copy.ok { color: var(--accent-text); border-color: var(--accent); }
.mcp-defer { margin-top: 15px; font-size: 12.5px; color: var(--muted); background: color-mix(in oklab, var(--accent) 7%, var(--surface)); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; line-height: 1.55; }
.mcp-defer code { font-size: 11.5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 4px; }

/* ── App tooltips: one styled, instant tooltip for every [title]/[data-tip] (replaces the slow native bubble) ── */
.app-tip { position: fixed; z-index: 2147483000; left: 0; top: 0; max-width: 250px; padding: 6px 9px; border-radius: 8px; background: #1f1f23; color: #f3f3f5; font-size: 11.5px; line-height: 1.4; font-weight: 500; box-shadow: 0 10px 26px -10px rgba(0,0,0,.55); opacity: 0; transform: translateY(3px); transition: opacity .12s ease, transform .12s ease; pointer-events: none; white-space: normal; } /* full text — no mid-line clamp/clip (tooltips are kept short instead) */
body.light .app-tip { background: #26262b; }
.app-tip.show { opacity: 1; transform: none; }

/* ── Consistent dropdown caret: every pill-select uses the SAME thin chevron as the brand-chip caret (was the heavier native ▼) ── */
select.cc-pillsel { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12'%3E%3Cpath d='M3 4.75 6 7.75 9 4.75' fill='none' stroke='%239d9da3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px; }
body.light select.cc-pillsel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12'%3E%3Cpath d='M3 4.75 6 7.75 9 4.75' fill='none' stroke='%235a5a63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ── Brand profile ▸ Competitors (editable chips) ── */
.bf-comp-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.bf-comp-list:empty { display: none; }
.bf-comp { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 13px; }
.bf-comp-n { font-weight: 600; color: var(--text); }
.bf-comp-d { font-size: 11px; color: var(--faint); }
.bf-comp-x { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--bg-2); color: var(--muted); font-size: 13px; line-height: 1; cursor: pointer; transition: .12s; }
.bf-comp-x:hover { background: var(--danger, #b3261e); color: #fff; }
.bf-comp-add { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.bf-comp-add input { flex: 1; min-width: 0; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-radius: 9px; padding: 9px 12px; font: inherit; font-size: 13px; }
.bf-comp-add input:focus { outline: none; border-color: var(--accent); }

/* ===== onboarding achievements — "getting started" progress on the Studio landing ===== */
.cc-achv { width: 100%; max-width: 760px; margin: 16px auto 2px; }
.cc-achv:empty { display: none; }
.achv-card { border: 1px solid var(--border); border-radius: 14px; background: color-mix(in oklab, var(--surface) 55%, transparent); padding: 12px 15px; }
.achv-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; text-align: left; }
.achv-head:hover .achv-h { color: var(--accent); }
.achv-chev { color: var(--muted); font-size: 11px; margin-left: 4px; }
.achv-h { font-weight: 700; font-size: 14px; color: var(--text); }
.achv-prog { font-size: 12px; color: var(--accent); font-weight: 600; white-space: nowrap; margin-left: auto; }
.achv-bar { height: 5px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: 10px 0 16px; }
.achv-card .achv-chips, .achv-card .achv-tracks { margin-top: 12px; }
.achv-chip, .achv-track { font: inherit; color: inherit; cursor: pointer; text-align: left; width: 100%; }
.achv-chip[disabled] { cursor: default; }
.achv-chip:not([disabled]):hover, .achv-track:hover { border-color: color-mix(in oklab, var(--accent) 55%, var(--border)); transform: translateY(-1px); }
.achv-chip:not([disabled]):hover .achv-t, .achv-track:hover .achv-t { color: var(--accent); }
.achv-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #1CB0F6); border-radius: 99px; transition: width .55s cubic-bezier(.2,.8,.2,1); }
.achv-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.achv-chip { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); transition: .16s; }
.achv-chip.got { border-color: color-mix(in oklab, var(--accent) 50%, var(--border)); background: color-mix(in oklab, var(--accent) 9%, var(--surface)); }
.achv-ic { font-size: 16px; width: 22px; text-align: center; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.achv-ic svg { width: 16px; height: 16px; }
.achv-chip.got .achv-ic { color: var(--accent); font-weight: 800; }
.achv-t svg, .achv-d svg { width: 14px; height: 14px; vertical-align: -2px; opacity: .85; }
.achv-tx { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.achv-t { font-size: 12.5px; font-weight: 650; color: var(--text); line-height: 1.2; }
.achv-d { font-size: 10.5px; color: var(--muted); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.achv-chip.got .achv-d { text-decoration: line-through; opacity: .65; }
.achv-r { font-size: 11px; font-weight: 700; color: var(--accent); flex: 0 0 auto; }
.achv-cr { display: inline-block; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft, rgba(216,92,66,.12)); color: var(--accent); font-size: 11px; font-weight: 700; white-space: nowrap; } /* free-credit reward pill */
.achv-alldone { text-align: center; font-size: 13px; color: var(--text); padding: 11px 14px; border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--border)); border-radius: 12px; background: color-mix(in oklab, var(--accent) 9%, var(--surface)); }
.achv-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.achv-track { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.achv-track .achv-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.achv-track .achv-r { margin-left: auto; align-self: flex-start; }
.achv-track .achv-t { font-size: 12.5px; font-weight: 650; color: var(--text); }
.achv-track .achv-d { font-size: 10.5px; color: var(--muted); }
.achv-mini { height: 4px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 5px; }
.achv-mini > i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
@media (max-width: 560px) { .achv-tracks { grid-template-columns: 1fr; } }
/* rewards: sidebar button + badge + popover */
.achv-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); }
.achv-nav .achv-l svg { color: var(--meta); } /* outline gift icon = faint meta, not accent */
.achv-l { display: inline-flex; align-items: center; gap: 8px; }
/* Rewards count → plain coral number, no filled badge pill */
.achv-badge { min-width: 0; height: auto; padding: 0; border-radius: 0; background: transparent; color: var(--accent-text); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; line-height: 1; }
.achv-menu { position: fixed; left: 232px; bottom: 16px; width: 416px; max-width: calc(100vw - 252px); max-height: none; overflow: visible; z-index: 200; padding: 16px 18px; border: 1px solid var(--border-2); border-radius: 16px; background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 24px 60px -20px rgba(0,0,0,.7); }
.achv-menu.hidden { display: none; }
.achv-menu-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.achv-menu .achv-chips { grid-template-columns: 1fr; }
.achv-menu .achv-tracks { grid-template-columns: 1fr 1fr; }
.achv-foot { font-size: 10.5px; color: var(--muted); margin: 12px 2px 0; text-align: center; }


/* ── GDPR cookie-consent banner (GA4 / Consent Mode v2 — built + localized in /consent.js).
   Bottom-centered pill; adapts to light/dark via theme vars; slides up. */
.cookie-consent { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 170%); z-index: 10050; /* above the full-screen cosmos onboarding (9000) so a first-time visitor can always consent */
  display: flex; align-items: center; justify-content: center; gap: 14px 18px; flex-wrap: wrap;
  width: max-content; max-width: min(640px, calc(100vw - 28px)); padding: 14px 18px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border-2); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45); font-size: 14px; opacity: 0;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s; }
body.light .cookie-consent { box-shadow: 0 18px 44px -16px rgba(26,20,16,.28); }
.cookie-consent.show { transform: translate(-50%, 0); opacity: 1; }
.cookie-consent .cc-msg { margin: 0; line-height: 1.45; flex: 1 1 260px; }
.cookie-consent .cc-msg a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.cookie-consent .cc-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.cookie-consent .cc-btn { font: inherit; font-weight: 600; line-height: 1; padding: 9px 16px;
  border-radius: 9px; cursor: pointer; border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s; }
.cookie-consent .cc-decline { background: transparent; color: var(--muted); border-color: var(--border-2); }
.cookie-consent .cc-decline:hover { color: var(--text); border-color: var(--text); }
.cookie-consent .cc-accept { background: var(--accent); color: var(--accent-ink); }
.cookie-consent .cc-accept:hover { background: var(--accent-2); }
@media (max-width: 520px) {
  .cookie-consent { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; transform: translateY(180%); }
  .cookie-consent.show { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .cookie-consent { transition: opacity .3s; } }

/* ── Login gate (cloud auth only — never shown in local dev) ───────────────────────── */
.authgate { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; padding: 24px; overflow: auto;
  background: radial-gradient(130% 100% at 50% -10%, var(--surface, #151516) 0%, var(--bg, #0a0a0b) 72%); }
.authgate[hidden] { display: none; }
.authgate-grain { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 60% at 50% 30%, transparent 40%, rgba(0,0,0,.28) 100%); }
.authgate-card { position: relative; width: 100%; max-width: 384px; text-align: center;
  background: var(--surface, #fff); border: 1px solid var(--line, rgba(127,127,127,.18)); border-radius: 22px;
  padding: 38px 34px; box-shadow: 0 30px 90px rgba(0,0,0,.38); }
.authgate-badge { display: inline-flex; align-items: center; gap: 0; margin-bottom: 22px;
  font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; font-size: 18px; color: var(--text, var(--ink, #1c1c1c)); }
.authgate-mark { width: 22px; height: 22px; color: var(--accent, #D85C42); display: inline-flex; margin-right: 8px; }
.authgate-mark svg { width: 100%; height: 100%; }
.authgate-tld { color: var(--accent-text, #C0392B); font-size: .62em; opacity: .6; margin-left: 2px; }
.authgate-h { font-family: var(--font-display); font-size: 27px; line-height: 1.12; margin: 0 0 8px; color: var(--text, var(--ink, #1c1c1c)); }
.authgate-sub { font-family: var(--font-body); color: var(--muted, #6F635C); font-size: 14px; line-height: 1.5; margin: 0 0 26px; }
.authgate-google { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: #1f1f1f; border: 1px solid #dadce0; border-radius: 12px; padding: 12px 16px;
  font-family: var(--font-body); font-weight: 600; font-size: 14.5px; cursor: pointer; transition: box-shadow .15s, transform .05s; }
.authgate-google:hover { box-shadow: 0 2px 12px rgba(0,0,0,.16); }
.authgate-google:active { transform: translateY(1px); }
.authgate-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted, #6F635C); font-size: 12px; font-family: var(--font-body); }
.authgate-or::before, .authgate-or::after { content: ""; flex: 1; height: 1px; background: var(--line, rgba(127,127,127,.2)); }
.authgate-email { display: flex; flex-direction: column; gap: 10px; }
.authgate-email input { width: 100%; box-sizing: border-box; background: var(--bg, #fff); border: 1px solid var(--line, rgba(127,127,127,.25));
  border-radius: 12px; padding: 12px 14px; color: var(--text, var(--ink, #1c1c1c)); font-family: var(--font-body); font-size: 14.5px; }
.authgate-email input:focus { outline: none; border-color: var(--accent, #D85C42); box-shadow: 0 0 0 3px var(--accent-glow, rgba(216,92,66,.25)); }
.authgate-email button { width: 100%; background: var(--accent, #D85C42); color: var(--accent-ink, #FAF7F2); border: none; border-radius: 12px;
  padding: 12px 16px; font-family: var(--font-body); font-weight: 600; font-size: 14.5px; cursor: pointer; transition: filter .15s, transform .05s; }
.authgate-email button:hover { filter: brightness(1.06); }
.authgate-email button:active { transform: translateY(1px); }
.authgate-email button:disabled { opacity: .6; cursor: default; }
.authgate-sso { width: 100%; margin-top: 12px; background: transparent; border: 1px solid var(--line, rgba(127,127,127,.25));
  border-radius: 12px; padding: 11px 16px; font-family: var(--font-body); font-weight: 600; font-size: 13.5px;
  color: var(--muted, #6F635C); cursor: pointer; transition: border-color .15s, color .15s, transform .05s; }
.authgate-sso:hover { border-color: var(--accent, #D85C42); color: var(--accent, #D85C42); }
.authgate-sso:active { transform: translateY(1px); }
.authgate-sso:disabled { opacity: .55; cursor: default; }
.authgate-msg { min-height: 18px; margin: 14px 0 0; font-family: var(--font-body); font-size: 13px; color: var(--accent-text, #C0392B); }
.authgate-fine { margin: 18px 0 0; font-family: var(--font-body); font-size: 11.5px; color: var(--muted, #6F635C); }
.authgate-fine a { color: inherit; text-decoration: underline; }
body.auth-gating { overflow: hidden; }
@media (max-width: 480px) { .authgate-card { padding: 30px 22px; } .authgate-h { font-size: 24px; } }

/* ── Touch affordances + phantom-click guard (UX audit, critical) ─────────────────────────────────────────────
   Hover-revealed action layers were opacity:0 but STILL CLICKABLE — invisible buttons intercepted taps/clicks
   (the "could not read the image" phantom). Hidden layers now drop pointer-events until revealed; on touch
   devices (hover:none) they're simply always visible — a phone user must be able to Download/Save/Edit. */
.gen-acts, .asset-acts, .ex-overlay, .av-del, .gen-addchat { pointer-events: none; }
.cr-gen-item:hover .gen-acts, .cr-gen-item:focus-within .gen-acts,
.cr-gen-item:hover .gen-addchat, .cr-gen-item:focus-within .gen-addchat,
.asset-tile:hover .asset-acts, .asset-tile:focus-within .asset-acts,
.ex-card:hover .ex-overlay,
.prod-cell-wrap:hover .av-del { pointer-events: auto; }
@media (hover: none) {
  .gen-acts, .asset-acts, .gen-addchat, .av-del { opacity: 1 !important; pointer-events: auto !important; }
  .ex-overlay { opacity: 1 !important; pointer-events: auto !important; background: linear-gradient(transparent 55%, rgba(0,0,0,.45)); }
  .cr-gen-item .sel-dot { opacity: .95 !important; }
  .ad .cnav { opacity: .9 !important; }
  /* Rewards "Getting started" popover was pinned to desktop sidebar coords (left:232px) — a crushed sliver on phones */
  .achv-menu { left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; bottom: 76px !important; max-height: 70vh; overflow: auto; }
}

/* ── First-paint ghost fix + first-success plan invite + Help modal ── */
body.cosmos-open .app { visibility: hidden; } /* the cosmos fades 0→1: without this the Studio bled through the transparent overlay as garbled double-exposure on the very first load (dismissCosmos removes the class at fade-out start so the reveal still works) */
.onb-plans-skip { text-decoration: none; border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 9px 18px; font-size: 13px; } /* a real button — "Continue on Free" was a footnote link under four Choose buttons */
.help-modal .help-qa p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.help-modal .help-qa b { color: var(--text); }
.help-modal .link-btn { background: none; border: 0; padding: 0; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font: inherit; }
.help-modal .em-lbl { display: block; margin: 14px 0 6px; font-size: 12.5px; font-weight: 650; color: var(--text); }
.lightbox-acts { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(18px, env(safe-area-inset-bottom)); display: flex; gap: 10px; z-index: 3; }
.lb-act { display: inline-flex; align-items: center; gap: 6px; background: rgba(20,18,16,.82); color: #f4f1ec; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 650; cursor: pointer; text-decoration: none; backdrop-filter: blur(8px); }
.lb-act:hover { background: rgba(38,34,30,.92); }
.lb-act.saved { opacity: .55; }
/* founder path: describe-your-brand in the cosmos (no website / no handle yet) */
.cosmos-describe-link { background: none; border: 0; margin-top: 14px; color: rgba(235,230,222,.55); font-size: 13px; cursor: pointer; font-family: inherit; }
.cosmos-describe-link b { color: rgba(235,230,222,.85); font-weight: 650; }
.cosmos-describe-link:hover b { color: #fff; }
.cosmos-describe { display: block; margin: 14px auto 0; max-width: 520px; }
.cosmos-describe[hidden] { display: none !important; } /* an authored display beats the hidden attribute — this restores it */
.cosmos-describe-label { font-size: 13px; color: rgba(235,230,222,.62); margin-bottom: 8px; text-align: left; }
.cosmos-describe-row { display: flex; gap: 10px; align-items: flex-end; }
.cosmos-describe textarea { flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; color: #f2efe9; padding: 12px 14px; font: inherit; font-size: 14px; resize: none; outline: none; }
.cosmos-describe textarea:focus { border-color: rgba(255,255,255,.34); }
.cosmos-describe .cosmos-describe-go { flex: none; }

.cc-ess-lbl { font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 2px 0 6px; align-self: center; }

/* cosmos: creator-handle confirm card */
.cosmos-social-confirm { display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 12px 16px; max-width: 640px; margin: 0 auto; }
.csc-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.csc-t { display: flex; flex-direction: column; text-align: left; gap: 2px; }
.csc-t b { color: #f2efe9; font-size: 14px; } .csc-t span { color: rgba(235,230,222,.6); font-size: 12px; }
.csc-plats { display: flex; gap: 6px; }
.csc-plat { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: rgba(235,230,222,.75); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.csc-plat.on { border-color: var(--accent); color: #fff; }
.csc-yes { position: static; width: auto; height: auto; border-radius: 999px; padding: 8px 16px; font-size: 13px; }

.pm-signout-mail { color: var(--muted); font-size: 11px; margin-left: 6px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; }

/* ── MCP & CLI setup widget (surface tabs × provider pills → numbered steps) ── */
.mcpw-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.mcpw-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mcpw-surfaces .cc-chip { font-weight: 700; }
/* provider chips: one line, never wrapped — horizontal-scroll safety valve on narrow windows (scrollbar hidden) */
.mcpw-providers { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.mcpw-providers::-webkit-scrollbar { display: none; }
.mcpw-providers .cc-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; }
.mcpw-providers .cc-chip .prov-logo { width: 15px; height: 15px; flex: none; opacity: .85; }
.mcpw-providers .cc-chip.on .prov-logo { opacity: 1; }
.mcpw-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 980px) { .mcpw-steps { grid-template-columns: 1fr; } }
.mcpw-step { display: flex; gap: 12px; min-width: 0; }
.mcpw-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border); display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--faint); background: var(--surface-2); }
.mcpw-b { min-width: 0; }
.mcpw-b h4 { margin: 3px 0 4px; font-size: 14px; font-weight: 700; color: var(--text); }
.mcpw-b .hint { font-size: 12.5px; line-height: 1.5; }
.mcpw-b .mcp-code { margin-top: 8px; }

/* ── Models playground ── */
.models-h { margin: 26px 0 12px; font-size: 15px; font-weight: 700; color: var(--text); }
.models-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.model-card { position: relative; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.model-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 26px -18px rgba(40,25,15,.35); }
.model-card.best { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.mc-top { display: flex; align-items: center; gap: 8px; }
.mc-name { font-weight: 700; font-size: 14.5px; color: var(--text); }
/* the badge floats in the card corner so the model NAME owns the full row (a chip in the flex row squished names into wraps) */
/* .mc-badge "Best" pill removed (Dave: it forced the model title onto 2 lines). The subtle .best border stays as the
   recommended-model highlight. No padding-right reservation anymore → the name row owns the full card width. */
.mc-brand { margin-top: 2px; font-size: 11.5px; color: var(--faint); }
.mc-note { margin-top: 7px; font-size: 12px; line-height: 1.45; color: var(--muted, var(--faint)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mc-price { margin-top: 10px; font-size: 12px; font-weight: 650; color: var(--accent-text); }
.mc-price .mc-dur { white-space: nowrap; } /* a duration+price pair ("6s 62cr") never breaks mid-pair — commas separate pairs */
#modelsTry textarea { width: 100%; margin-top: 12px; resize: vertical; }
.mt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 12px; }
.mt-opt { display: flex; align-items: center; gap: 8px; }
.mt-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.mt-row .primary { margin-left: auto; }
.mt-out { margin-top: 16px; }

/* Models try-panel polish */
.mt-opt[hidden] { display: none !important; }  /* .mt-opt's flex beats the [hidden] UA rule otherwise (the phantom "Length" label on image models) */
#modelsTry { border: 0; background: transparent; box-shadow: none; } /* the playground is a full-bleed Studio surface, not a boxed panel (Dave: "weird edges of the box") */
.mt-sub { margin-top: 1px; font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mtPrompt { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.5; background: var(--bg-2); color: var(--text); }
#mtPrompt:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.mt-out video, .mt-out img { box-shadow: 0 20px 50px -28px rgba(40,25,15,.4); }
.mt-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; }
.mt-text { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; font-size: 14px; line-height: 1.6; color: var(--text); max-height: 420px; overflow: auto; }

/* Connectors card */
.conn-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.conn-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 11px; padding: 9px 12px; background: var(--surface-2); }
.conn-name { font-weight: 700; font-size: 13px; text-transform: capitalize; }
.conn-sub { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }

/* Connectors tab: integration tiles */
.conn-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.conn-tile { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--surface); }
.conn-ico { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--muted); }
.conn-ico img { display: block; border-radius: 4px; }
.conn-tile-t { flex: 1; min-width: 0; }
.conn-tile-t h4 { margin: 0 0 4px; font-size: 14px; }
.conn-tile-t .hint { margin: 0; font-size: 12.5px; line-height: 1.45; }
.conn-tile .mini { flex: none; margin-top: 2px; }
.conn-ok { color: var(--good); font-size: 12px; font-weight: 600; }
.conn-soon { opacity: .6; }

/* Spend-alert level chips */
.al-levels-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.al-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.al-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border-2); background: var(--surface-2); border-radius: 999px; padding: 4px 6px 4px 11px; font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.al-chip-x { border: 0; background: none; color: var(--faint); font-size: 14px; line-height: 1; cursor: pointer; padding: 2px 5px; border-radius: 999px; }
.al-chip-x:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.al-add { display: inline-flex; align-items: center; gap: 6px; }
.al-add input { width: 74px; }

/* Team modal: per-brand share picker */
.tm-brands { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 4px 0 12px; }
.tm-brands-lbl { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-right: 2px; }
.tm-brand-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; background: var(--surface-2); }
.tm-brand-chip:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface-2)); }
.tm-brand-chip input { accent-color: var(--accent); margin: 0; }

/* Models: vendor monogram + humanist prompt font (the mono placeholder read like a terminal) */
.mc-namewrap { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.mc-mark { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 800; font-family: 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: 0; }
#mtPrompt, #mtPrompt::placeholder { font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; letter-spacing: 0; }

/* ── Models playground v5: STUDIO layout (Dave) — chat-style feed of prompt+render turns, composer pinned
   at the bottom, session gallery rail on the right. Append-only: switching models never wipes the feed. ── */
#tab-models.playing .mt-cats, #tab-models.playing [data-msec], #tab-models.playing > .hint:last-of-type, #tab-models.playing > .hero { display: none; } /* playing = FULL Studio mode: the catalog hero goes too, the session owns the viewport */
/* FIXED-VIEWPORT studio (Dave: no page scrolling around, no gap under the composer): the PANEL itself is a flex column
   pinned to the viewport (from just under the top chrome to the very bottom), #modelsTry flexes to fill it, and ONLY the
   feed scrolls. Filling to the real bottom (not a magic 100dvh−124 that left a ~90px dead gap) is what closes the gap. */
#tab-models.playing.active { display: flex; flex-direction: column; box-sizing: border-box; height: calc(100dvh - 18px); padding-top: 0; padding-bottom: 12px; overflow: hidden; } /* .active — the fullscreen playground overlay must NEVER resurrect on another tab. It's a .tab-panel: navigating away drops .active (base .tab-panel{display:none} hides it, session DOM intact), returning re-adds .active → the open model restores. The old :not([hidden]) guard didn't help — panels toggle .active, not [hidden] — so #tab-models kept display:flex pinned over every other tab until "← All models" was clicked. */
#tab-models.playing #modelsTry { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* centre the conversation column (Dave: bubbles hugged the edges of an over-wide column). Entries + composer align in a
   centred ~800px column; the feed's own scrollbar stays at the panel edge, ChatGPT-style. */
#tab-models.playing .mt-main > .mt-composer,
#tab-models.playing .mt-feed > .mt-entry,
#tab-models.playing .mt-feed > .mt-empty { width: 100%; max-width: 800px; margin-inline: auto; }
.mt-topbar { flex: none; display: flex; align-items: center; gap: 14px; margin: 2px 0 14px; }
.mt-back { margin: 0; flex: none; background: var(--surface); border: 1.5px solid var(--border); color: var(--text); font-weight: 650; font-size: 13px; padding: 8px 16px; border-radius: 999px; box-shadow: 0 6px 18px -10px rgba(40,25,15,.35); }
.mt-back:hover { border-color: var(--accent); color: var(--accent-text); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.mt-studio { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: stretch; flex: 1; min-height: 0; }
.mt-rail { width: 148px; }
@media (max-width: 900px) { .mt-studio { grid-template-columns: 1fr; } .mt-rail { display: none; } }
.mt-main { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.mt-feed { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 22px; padding: 4px 10px 8px 2px; scrollbar-width: thin; }
.mt-empty { color: var(--faint); font-size: 13.5px; text-align: center; padding: 48px 20px; }
.mt-entry { display: flex; flex-direction: column; gap: 10px; scroll-margin: 90px; border-radius: 16px; }
.mt-entry.flash { animation: mtFlash 1.1s ease; }
@keyframes mtFlash { 0%, 60% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); } 100% { box-shadow: none; } }
.mt-e-prompt { align-self: flex-end; max-width: 78%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px 16px 4px 16px; padding: 10px 14px; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.mt-e-result { align-self: flex-start; max-width: min(560px, 92%); }
.mt-e-result img, .mt-e-result video { max-width: 100%; max-height: min(46vh, 460px); width: auto; border-radius: 14px; box-shadow: 0 22px 54px -30px rgba(40,25,15,.45); display: block; }
.mt-e-result img[data-mtzoom] { cursor: zoom-in; }
.mt-e-result audio { width: min(480px, 90vw); }
.mt-e-result .mt-text { max-width: 640px; }
.mt-e-wait { display: inline-flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; color: var(--faint); font-size: 13px; }
.mt-e-err { display: inline-block; background: color-mix(in srgb, #c0392b 8%, var(--surface)); border: 1px solid color-mix(in srgb, #c0392b 35%, var(--border)); border-radius: 12px; padding: 10px 14px; font-size: 13px; color: var(--text); }
.mt-e-acts { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.mt-e-acts .mini { background: var(--surface); border: 1.5px solid var(--border); color: var(--text); font-weight: 650; font-size: 12.5px; padding: 6px 13px; border-radius: 999px; box-shadow: 0 5px 14px -9px rgba(40,25,15,.35); text-decoration: none; }
.mt-e-acts .mini:hover { border-color: var(--accent); color: var(--accent-text); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.mt-e-meta { font-size: 11.5px; color: var(--faint); }
.mt-e-meta a { color: inherit; }
/* composer pinned at the bottom of the column, Studio-style — tighter than .card (22px) so a 1:1 result fits above it without scrolling */
.mt-composer { flex: none; display: flex; flex-direction: column; gap: 9px; padding: 13px 15px; margin-bottom: 0; box-shadow: 0 18px 48px -22px rgba(40,25,15,.4); border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); }
.mt-composer textarea { width: 100%; resize: vertical; margin: 0; }
.mt-comp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.mt-comp-row .primary { margin-left: auto; }
/* model identity lives in the top bar (.mt-topbar) — content-width, ellipsised description so it stays a single compact row */
.mt-id { display: flex; align-items: center; gap: 11px; min-width: 0; cursor: pointer; border-radius: 12px; padding: 5px 9px; transition: background .15s; }
.mt-id:hover { background: var(--surface-2); }
.mt-id:hover .mt-id-chev { color: var(--accent-text); }
.mt-id-chev { margin-left: auto; color: var(--faint); display: inline-flex; align-items: center; } /* push the caret to the right end of the button, not floating right after the text */
.mt-logo img, .mt-logo .mc-mark { width: 32px; height: 32px; border-radius: 9px; }
.mt-logo img { object-fit: contain; background: var(--surface-2); padding: 4px; border: 1px solid var(--border); }
.mt-idtext { min-width: 0; max-width: min(52vw, 560px); }
.mt-idtext h3 { margin: 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* session gallery rail (right) */
.mt-rail { overflow-y: auto; min-height: 0; scrollbar-width: none; }
.mt-rail[hidden] { display: none !important; }
.mt-rail-h { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin: 2px 0 10px; }
#mtRailList { display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 150px); overflow-y: auto; padding-right: 2px; }
.mt-hthumb { position: relative; width: 100%; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1.5px solid var(--border); background: var(--surface-2); cursor: pointer; padding: 0; transition: border-color .15s, transform .15s; }
.mt-hthumb:hover { border-color: var(--accent); transform: translateY(-1px); }
.mt-hthumb img, .mt-hthumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-hplay { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 15px; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.mt-haudio { display: grid; place-items: center; width: 100%; height: 100%; font-size: 20px; color: var(--faint); }
.mc-mark-img { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; object-fit: contain; background: #fff; border: 1px solid var(--border); padding: 2px; }
/* reference attachments strip — reuses the Studio composer's .ci-thumb/.ci-x/.ci-add chrome (ui-chrome-consistency);
   the combined class just un-hides .cc-imgchip (which defaults display:none) and drops its bottom margin. */
.mt-attach[hidden] { display: none !important; }
.mt-attach-strip { display: flex !important; flex-wrap: wrap; margin-bottom: 0; }
.mt-attach-btn { flex: none; }
.mt-attach-btn[hidden] { display: none !important; }
.mt-noref { flex: none; font-size: 11.5px; color: var(--faint); font-style: italic; }
.mt-noref[hidden] { display: none !important; }
.mt-composer.mt-dragging { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), 0 18px 48px -22px rgba(40,25,15,.4); }

/* switcher rows carry a kind tag on the right (the popover now spans all kinds) */
.mt-sw-kind { margin-left: auto; padding-left: 14px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
/* model switcher popover: a search box + category chips sit above a scrolling model list (the flat list had grown long) */
.mt-switchpop { width: 320px; max-width: calc(100vw - 16px); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.mt-sw-top { flex: none; padding: 9px 9px 7px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; }
.mt-sw-search { width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; font-size: 13px; background: var(--bg-2); color: var(--text); font-family: 'Hanken Grotesk', system-ui, sans-serif; }
.mt-sw-search:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.mt-sw-cats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.mt-sw-cats .cc-chip { font-size: 11.5px; padding: 3px 9px; }
.mt-sw-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; scrollbar-width: thin; }
.mt-sw-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-sw-empty { padding: 18px 12px; text-align: center; color: var(--faint); font-size: 12.5px; }
@media (max-width: 640px) { .mt-comp-row .primary { margin-left: 0; width: 100%; } } /* phones: the Render button rode the flex row off-screen — give it its own full-width line */

/* playground polish: designed audio card, labeled rail tiles, hero empty state */
.mt-audio-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 18px; box-shadow: 0 14px 34px -22px rgba(40,25,15,.35); min-width: min(480px, 88vw); }
.mt-audio-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 17px; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.mt-audio-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mt-audio-body b { font-size: 13px; }
.mt-audio-body audio { width: 100%; height: 36px; }
.mt-haudio { flex-direction: column; gap: 3px; background: color-mix(in srgb, var(--accent) 6%, var(--surface-2)); }
.mt-haudio i { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.mt-hcopy { background: var(--surface-2); }
.mt-empty-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 72px 24px; }
.mt-empty-hero .mt-empty-spark { font-size: 26px; color: var(--accent-text); }
.mt-empty-hero b { font-family: 'Newsreader', serif; font-size: 19px; color: var(--text); }
.mt-empty-hero span:last-child { max-width: 430px; line-height: 1.55; }

/* ── Meta ad-policy pre-flight card + "Policy-checked" badge ─────────────────── */
.cc-policymsg { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 14px 16px; max-width: 100%; }
.cc-policymsg.pol-pass { border-color: color-mix(in oklab, var(--good) 45%, var(--border)); }
.cc-policymsg.pol-fix { border-color: color-mix(in oklab, var(--warn) 45%, var(--border)); }
.cc-policymsg.pol-block { border-color: color-mix(in oklab, var(--danger) 50%, var(--border)); }
.pol-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.pol-head .pol-ic { flex: none; }
.pol-head.pol-pass { color: var(--good); }
.pol-head.pol-fix { color: var(--warn); }
.pol-head.pol-block { color: var(--danger); }
.pol-sum { margin: 8px 0 2px; color: var(--text); font-size: 13px; line-height: 1.5; }
.pol-finding { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.pol-f-issue { font-weight: 600; font-size: 13px; color: var(--text); margin-bottom: 8px; }
.pol-quote { margin: 0 0 8px; padding: 9px 12px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.pol-q-tx { font-style: italic; }
.pol-q-tx::before { content: '\201C'; } .pol-q-tx::after { content: '\201D'; }
.pol-quote cite { display: block; margin-top: 6px; font-style: normal; font-size: 11px; color: var(--muted); opacity: .82; }
.pol-f-line { font-size: 12.5px; line-height: 1.5; margin-top: 5px; color: var(--text); }
.pol-k { display: inline-block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin-right: 6px; }
.pol-f-fix { color: var(--good); }
.pol-f-fix .pol-k { color: color-mix(in oklab, var(--good) 70%, var(--muted)); }
.pol-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pol-actnote { font-size: 11px; color: var(--muted); }
.pol-anchors { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); line-height: 1.65; }
.pol-anchors a { color: var(--accent-text); }
.cc-policy-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; vertical-align: middle; background: color-mix(in oklab, var(--good) 18%, transparent); color: var(--good); border: 1px solid color-mix(in oklab, var(--good) 40%, transparent); font-weight: 700; font-size: 10.5px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }