:root {
      /* Black-and-white platform (owner 2026-07-23): high-contrast light —
         white surfaces, near-black ink, black accents. The pink→amber brand
         gradient survives ONLY on the landing chatbox, via --halo. */
      --bg: #ffffff;
      --panel: rgba(0, 0, 0, 0.04);          /* soft gray card on white */
      --panel-2: rgba(0, 0, 0, 0.07);        /* raised / active */
      --line: rgba(0, 0, 0, 0.11);           /* hairline rim */
      --line-2: rgba(0, 0, 0, 0.17);         /* stronger rim */
      --text: #0b0b0e;
      --muted: rgba(11, 11, 14, 0.56);
      --neon: #000000;        /* black accent */
      --neon-dim: #000000;    /* accent hover */
      --purple: #1e1e22;      /* charcoal — accent-gradient top stop */
      --purple-dim: #000000;  /* accent hover */
      /* accent fill — near-black gradient (was pink → amber) */
      --split: linear-gradient(120deg, var(--purple), var(--neon));
      --split-dim: linear-gradient(120deg, var(--purple-dim), var(--neon-dim));
      --on-accent: #ffffff;   /* ink on the black accent */
      --halo: linear-gradient(120deg, rgb(255,121,198), rgb(255,184,77)); /* kept brand gradient — chatbox only */
    }
    * { box-sizing: border-box; margin: 0; }
    html, body { height: 100%; }
    /* overflow:hidden clips the fixed `body::after` ambient glow (inset:-25%),
       which otherwise spills past the viewport and shows window scrollbars —
       body's own overflow:hidden can't clip a position:fixed pseudo-element. */
    html { background: var(--bg); overflow: hidden; }
    body {
      font-family: Inter, system-ui, sans-serif;
      color: var(--text);
      background: transparent;
      display: flex; flex-direction: column; overflow: hidden;
    }
    /* Slow-drifting yellow/purple glow that the glass panels catch. */
    body::after {
      content: ''; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
      background:
        radial-gradient(40% 36% at 22% 14%, rgba(0,0,0, .06), transparent 62%),
        radial-gradient(38% 34% at 84% 98%, rgba(0,0,0, .05), transparent 60%);
      animation: ambient-drift 26s ease-in-out infinite alternate;
      will-change: transform;
    }
    @keyframes ambient-drift {
      from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
      to { transform: translate3d(1.5%, 2%, 0) scale(1.07); }
    }
    button { font-family: inherit; }

    /* ── Micro-interactions (owner 2026-07-23): a gentle spring "press" on click
       for every control + smooth state transitions. Subtle; reduce-motion safe.
       Specificity (0,1,1)/(0,2,1) lets it ride over single-class rules while
       preserving their colour/shadow fades (all common props are included). ── */
    button:not([disabled]), [role="button"]:not([disabled]), a.st-publish, a.st-share, summary {
      transition: transform .17s cubic-bezier(.34, 1.5, .5, 1), box-shadow .18s ease,
        background-color .16s ease, border-color .16s ease, color .13s ease,
        filter .16s ease, opacity .18s ease;
    }
    button:not([disabled]):active, [role="button"]:not([disabled]):active,
    a.st-publish:active, a.st-share:active { transform: scale(.955); }
    /* icon-only / round controls press a touch deeper for a tactile feel */
    .st-icon:not([disabled]):active, .st-dev:not([disabled]):active,
    .st-plus:not([disabled]):active, .attach-btn:not([disabled]):active,
    .st-sendc:not([disabled]):active, .send:not([disabled]):active { transform: scale(.9); }
    @media (prefers-reduced-motion: reduce) {
      button:not([disabled]):active, [role="button"]:not([disabled]):active,
      a.st-publish:active, a.st-share:active,
      .st-icon:active, .st-dev:active, .st-plus:active, .st-sendc:active, .send:active { transform: none; }
    }

    /* ── More micro-interactions (owner 2026-07-24): view + builder-panel entrance
       transitions, a click ripple on primary buttons, and a spring pop on toasts.
       All reduce-motion safe. ── */
    @keyframes view-in { from { opacity: 0; transform: translateY(8px); } }
    .view.active { animation: view-in .26s cubic-bezier(.2, .7, .3, 1) both; }
    /* builder Preview/Code/More/Data panels re-render on switch → animate each in */
    .st-frame, .st-code, .st-more, .st-datawrap, .st-building {
      animation: view-in .22s cubic-bezier(.2, .7, .3, 1) both;
    }
    /* click ripple — a white ink expands from the tap point on primary dark buttons */
    .send, .st-sendc, .st-publish, .crt-chatbox-send, .st-data-add, .st-data-save {
      position: relative; overflow: hidden;
    }
    .ripple-ink {
      position: absolute; border-radius: 50%; pointer-events: none;
      background: rgba(255, 255, 255, .5); transform: scale(0); opacity: .6;
      animation: ripple-go .55s cubic-bezier(.25, .6, .3, 1) forwards;
    }
    @keyframes ripple-go { to { transform: scale(2.4); opacity: 0; } }
    /* toast: spring pop-in (it already slides in via .show) */
    .sb-toast.show { animation: toast-pop .34s cubic-bezier(.2, 1.45, .4, 1); }
    @keyframes toast-pop { from { transform: translate(-50%, 14px) scale(.94); opacity: 0; } }
    @media (prefers-reduced-motion: reduce) {
      .view.active, .st-frame, .st-code, .st-more, .st-datawrap, .st-building,
      .sb-toast.show { animation: none; }
      .ripple-ink { display: none; }
    }

    /* ── Top bar ─────────────────────────────── */
    .topbar {
      display: flex; align-items: center; gap: 1.6rem;
      padding: 0 1.25rem; height: 58px; flex-shrink: 0;
      border-bottom: 1px solid var(--line);
    }
    .logo { display: flex; align-items: center; gap: .6rem; font-weight: 900; font-size: 1.15rem; letter-spacing: -.02em; }
    .logo-mark {
      width: 34px; height: 34px; flex-shrink: 0;
      object-fit: contain; background: none;
    }
    /* ── Shell ───────────────────────────────── */
    .shell { display: flex; flex: 1; min-height: 0; overflow-x: clip; }

    /* Sidebar */
    .sidebar {
      width: 264px; flex-shrink: 0; padding: 1rem .85rem;
      border-right: 1px solid var(--line);
      display: flex; flex-direction: column; gap: .25rem;
      background: rgba(255, 255, 255, 0.035);
      backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    }
    .side-label {
      font-size: .7rem; font-weight: 700; letter-spacing: .12em;
      color: var(--muted); text-transform: uppercase;
      padding: .9rem .55rem .45rem;
    }
    .side-item {
      display: flex; align-items: center; gap: .7rem;
      padding: .5rem .55rem; border-radius: 12px;
      font-size: .95rem; font-weight: 500; color: var(--text);
      cursor: pointer; border: 1px solid transparent;
    }
    .side-item:hover { background: var(--panel-2); }
    .side-item.active { background: var(--panel-2); border-color: var(--line); }
    .tile {
      width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
      display: grid; place-items: center; font-size: .95rem; font-weight: 800; color: var(--text);
    }
    .tile.home { background: linear-gradient(135deg, #e2e8f0, #94a3b8); }
    .tile.zephyr { background: linear-gradient(135deg, #34d399, #fbbf24); }
    .new-chat {
      margin-top: .35rem; display: flex; align-items: center; gap: .7rem;
      padding: .5rem .55rem; border-radius: 12px; cursor: pointer;
      color: var(--muted); font-size: .95rem; border: 1px dashed var(--line-2); background: none; width: 100%;
      text-align: left;
    }
    .new-chat:hover { color: var(--text); border-color: rgba(0,0,0,.3); }
    .new-chat .plus {
      width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
      background: var(--panel-2); border: 1px solid var(--line-2); font-size: 1.1rem; color: var(--text);
    }

    /* Main */
    .main {
      flex: 1; min-width: 0; position: relative;
      display: flex; flex-direction: column;
      /* The app never scrolls sideways. overflow-x: clip kills any stray
         horizontal scrollbar (a child a hair too wide, a scrollbar gutter)
         WITHOUT making a scroll container — so overflow-y stays visible and
         dropdowns/menus that open downward are not clipped. */
      overflow-x: clip;
      /* Vignette spotlight (owner's pick, 2026-07-16 — replaced the square
         grid): a soft glow high in the frame falling off into darkened
         corners. Pure gradients, no asset. */
      background-image:
        radial-gradient(115% 85% at 42% 18%, rgba(255,255,255,.05) 0%, rgba(255,255,255,.016) 42%, transparent 70%),
        radial-gradient(150% 130% at 50% 55%, transparent 58%, rgba(0,0,0,.5) 100%);
    }

    /* ── Chat view ───────────────────────────── */
    .chat { flex: 1; display: none; flex-direction: column; min-height: 0; }
    .chat.active { display: flex; }
    .thread {
      /* overflow-x hidden, y auto: a chat thread never scrolls sideways.
         Setting only overflow-y:auto makes overflow-x compute to auto too, which
         lets a full-width child (or the reserved vertical-scrollbar gutter on
         desktop classic scrollbars) show a stray horizontal scrollbar. */
      flex: 1; overflow: hidden auto; padding: 1.6rem 1.5rem;
      display: flex; flex-direction: column; gap: .7rem;
      position: relative;
    }
    /* Empty-state hero — greeting + starter chips over a breathing glow */
    .home-hero {
      position: absolute; inset: 0; z-index: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      text-align: center; padding: 0 26px;
    }
    .home-hero.gone { display: none; }
    .hh-amb {
      position: absolute; inset: 0; pointer-events: none;
      display: flex; align-items: center; justify-content: center;
      transition: transform .45s cubic-bezier(.2, .8, .3, 1); will-change: transform;
    }
    .hh-orb {
      position: absolute; width: 500px; height: 500px; border-radius: 50%; pointer-events: none;
      background: radial-gradient(circle, rgba(0,0,0, .1), rgba(0,0,0, .05) 45%, transparent 70%);
      filter: blur(30px);
      opacity: .9;
    }
    .hh-spark { position: absolute; }
    /* Fresh generations land with a soft gradient pulse */
    .msg.landed { animation: media-land 1.5s cubic-bezier(.2, .8, .3, 1) both; }
    @keyframes media-land {
      0% { opacity: 0; transform: scale(.965); box-shadow: 0 0 0 0 rgba(0,0,0, 0); }
      18% { opacity: 1; }
      45% { transform: scale(1); box-shadow: 0 0 0 4px rgba(0,0,0, .26), 0 0 52px 10px rgba(0, 0, 0, .3); }
      100% { box-shadow: 0 0 0 0 rgba(0,0,0, 0), 0 0 0 0 rgba(0, 0, 0, 0); }
    }
    .hh-spark.s1 { top: 22%; left: 26%; font-size: 1rem; color: rgba(0,0,0, .45); }
    .hh-spark.s2 { top: 30%; right: 24%; font-size: .75rem; color: rgba(0,0,0, .4); }
    .hh-spark.s3 { bottom: 26%; left: 33%; font-size: .65rem; color: rgba(237, 234, 243, .3); }
    .hh-title {
      position: relative; font-family: 'Space Grotesk', Inter, sans-serif;
      font-size: 2.35rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .65rem; line-height: 1.1;
      animation: hh-rise .6s cubic-bezier(.2, .8, .3, 1) both;
    }
    .hh-name { background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .hh-sub {
      position: relative; color: var(--muted); font-size: .96rem; line-height: 1.55;
      max-width: 470px; margin: 0;
      animation: hh-rise .6s cubic-bezier(.2, .8, .3, 1) .1s both;
    }
    @keyframes hh-rise { from { opacity: 0; transform: translateY(16px); } }
    .thread-inner { width: 100%; max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: .7rem; }
    .msg {
      max-width: 78%; padding: .7rem 1rem; border-radius: 16px;
      font-size: .95rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word;
    }
    /* Bare-bar chat style — plain text with a pink→amber vertical accent bar on
       the outer edge (right for the user, left for Go Farther). Scoped to text
       bubbles so generated-media / loading cards keep their framed look. */
    .msg.user,
    .msg.agent:not(.image):not(.video):not(.audio):not(.gen-loading) {
      background: none; border: none; border-radius: 0; box-shadow: none;
      color: var(--text); padding: .15rem 0;
    }
    .msg.user {
      align-self: flex-end; text-align: right; font-weight: 500;
      padding-right: .95rem;
      border-right: 2px solid; border-image: linear-gradient(180deg, #1e1e22, #000000) 1;
    }
    /* No per-bubble backdrop blur — long chats would stack dozens of live
       blur layers; the big surfaces (composer, cards, menus) keep theirs. */
    .msg.agent:not(.image):not(.video):not(.audio):not(.gen-loading) {
      align-self: flex-start; padding-left: .95rem;
      border-left: 2px solid; border-image: linear-gradient(180deg, #1e1e22, #000000) 1;
    }
    /* Composer chip row: one @ImageN chip per attached reference — tap to
       insert the tag at the cursor. */
    .ref-chips { display: flex; gap: .35rem; flex-wrap: wrap; padding: .55rem .9rem 0; }
    .ref-chip {
      display: inline-flex; align-items: center; gap: .35rem;
      font: inherit; font-size: .72rem; font-weight: 600; color: var(--text);
      background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2);
      border-radius: 999px; padding: .16rem .55rem .16rem .18rem; cursor: pointer;
      transition: background .12s ease, border-color .12s ease;
    }
    .ref-chip:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .22); }
    .ref-chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; display: block; }
    .ref-chip-glyph { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: .72rem; background: rgba(0,0,0, .16); }

    /* Reference strip under a user message: the images the sent @ImageN tags
       pointed at, right-aligned like the bubble it belongs to. */
    .msg-refs { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; align-self: flex-end; max-width: 78%; padding-right: .95rem; }
    .mr-slot { position: relative; width: 92px; height: 68px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); }
    .mr-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .mr-tag {
      position: absolute; left: 3px; bottom: 3px; padding: .08rem .3rem;
      font-size: .58rem; font-weight: 700; letter-spacing: .02em;
      color: #fff; background: rgba(0, 0, 0, .72); border-radius: 5px;
      pointer-events: none;
    }
    .msg.typing { color: var(--muted); }
    .msg.typing .dots::after { content: '·'; animation: dots 1.2s steps(3, end) infinite; letter-spacing: 2px; }
    @keyframes dots { 33% { content: '··'; } 66% { content: '···'; } }

    /* ── Composer (shared) ───────────────────── */
    .composer-wrap { padding: 1rem 1.5rem 1.4rem; flex-shrink: 0; }
    .composer {
      display: flex; flex-direction: column; align-items: stretch; gap: 1.4rem;
      width: 100%; max-width: 780px; margin: 0 auto;
      /* Above the attach panel (z2) so drop-up menus stay clickable when
         the panel sits directly over the composer on narrow screens. */
      position: relative; z-index: 3;
      background: var(--panel); border: 1px solid var(--line-2);
      border-radius: 24px; padding: 1.35rem 1.35rem 1.1rem 1.5rem;
      box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
      backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%);
    }
    .composer #input, .composer #lpInput {
      flex: 1; background: none; border: none; outline: none;
      color: var(--text); font-size: .95rem; font-family: inherit; min-width: 0;
      padding: .45rem 0 1.2rem;
      resize: none; line-height: 1.5; max-height: 38vh; overflow-y: auto;
      display: block;
    }
    .composer-row {
      display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    }
    /* Below 1500px the mode-switch stays in the row (it goes vertical/absolute
       above that). Four wide controls won't fit 780px, so let them wrap and
       keep the send button pinned to the right of whatever line it lands on. */
    .composer-row .send { margin-left: auto; }
    .composer #input::placeholder, .composer #lpInput::placeholder { color: #5c5c66; }
    /* Home-page chatbox: the Builder composer's look, docked at the BOTTOM of
       the landing (owner's call). margin-top:auto pins it low on short pages;
       sticky keeps it in view while the preset grid scrolls behind it.
       Sending starts a fresh chat in the Builder with the message already sent. */
    .lp-compose { margin: auto auto 0; width: 100%; position: sticky; bottom: 0; padding-top: 1.4rem; }
    .lp-compose .composer { gap: .6rem; }
    .lp-compose-hint { color: var(--muted); font-size: .8rem; }
    /* Pinned preset chip (like "3D object generation ×") — amber pill in the
       composer row; × unpins it. */
    .lp-chip {
      display: inline-flex; align-items: center; gap: .4rem;
      background: rgba(0,0,0, .14); border: 1px solid rgba(0,0,0, .45);
      color: var(--text); border-radius: 999px; padding: .3rem .5rem .3rem .8rem;
      font-size: .82rem; font-weight: 600; letter-spacing: .01em;
    }
    .lp-chip b { font-weight: 600; }
    .lp-chip-x {
      background: none; border: none; color: inherit; cursor: pointer;
      font-size: 1rem; line-height: 1; padding: 0 .15rem; opacity: .75;
    }
    .lp-chip-x:hover { opacity: 1; }
    .send {
      flex-shrink: 0; background: rgba(255, 255, 255, .05); color: var(--text);
      border: 1px solid var(--line-2); border-radius: 50%; width: 48px; height: 48px;
      display: grid; place-items: center; cursor: pointer;
      box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
    }
    .send svg { display: block; }
    .send:hover { background: rgba(255, 255, 255, .09); border-color: rgba(237, 234, 243, .45); transform: translateY(-1px); }
    .send:disabled { opacity: .4; transform: none; cursor: default; box-shadow: none; }

    @media (max-width: 900px) {
      .sidebar { display: none; }
    }

/* ── Model picker (now lives in the composer) ── */
.model-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 250px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px;
  padding: .4rem; display: none; z-index: 50;
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
  backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%);
  /* Long lists (15 durations, 16 voices) must never run off-screen. */
  max-height: min(48vh, 430px); overflow-y: auto;
}
.model-menu::-webkit-scrollbar { width: 6px; }
.model-menu::-webkit-scrollbar-thumb { background: rgba(0,0,0, .4); border-radius: 999px; }
.model-menu::-webkit-scrollbar-track { background: transparent; }
.model-menu.open { display: block; }
.model-item {
  padding: .55rem .8rem; border-radius: 10px; font-size: .9rem;
  cursor: pointer; display: flex; justify-content: space-between; gap: 1rem;
}
.model-item:hover { background: var(--panel-2); }
.model-item .check { color: transparent; }
.model-item.selected .check { color: var(--neon); }
.model-item.disabled { color: var(--muted); cursor: default; font-size: .8rem; }
.model-item.disabled:hover { background: none; }

.msg.video { padding: .45rem; max-width: 68%; }
.msg.video video { display: block; width: 460px; max-width: 100%; border-radius: 12px; }

/* ── Audio / Image / Video mode switch ───── */
.mode-switch {
  display: flex; flex-direction: row; flex-shrink: 0; gap: 2px; padding: 3px;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 12px;
}
.mode-btn { text-align: center; }
/* Wide screens: the switch stacks vertically INSIDE the box's left edge,
   vertically centered; the content shifts right to make room, so the
   chatbox keeps its height. Narrow screens keep the inline pill. */
/* The vertical mode-switch (tucked into the composer's left edge) frees the
   control row so the send button stays inline — apply it on laptops too, not
   just 24" desktops, so narrow screens don't have to wrap the send button. */
@media (min-width: 1100px) {
  .view-home .composer { position: relative; padding-left: 122px; }
  .view-home .composer-row .mode-switch {
    flex-direction: column;
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  }
  /* Nudge the builder conversation column a touch right of centre. */
  .view-home .thread-inner, .view-home .composer { transform: translateX(22px); }
  /* Nudge the empty-state greeting right by the same amount (more left padding
     shifts the centred content ~half of it), so it lines up with the chat. */
  .view-home .home-hero { padding-left: 70px; }
}
.mode-btn {
  background: none; border: none; color: var(--muted);
  font-weight: 600; font-size: .85rem; padding: .45rem .9rem;
  border-radius: 9px; cursor: pointer; text-align: center;
}
.mode-btn:hover { color: var(--text); }
.mode-btn.active { background: var(--split); color: var(--on-accent); }
.msg.image { padding: .45rem; max-width: 68%; }
.msg.image img { display: block; width: 380px; max-width: 100%; border-radius: 12px; }
.msg.audio { max-width: 68%; }
.msg.audio audio { display: block; width: 320px; max-width: 100%; }
.msg.image img { cursor: zoom-in; }

/* ── Generated-media actions (full screen / download / delete) ──
   A vertical column sitting just OUTSIDE the media's right edge, as a flex
   sibling of the player — never an overlay, so it can't collide with the
   video's own controls (scrubber, volume, native PiP/full-screen), and it
   lands correctly for every aspect ratio and model (portrait, square,
   ultrawide) since it tracks the media's real rendered width. */
.msg.image, .msg.video, .msg.audio {
  position: relative;
  display: inline-flex; align-items: flex-start; gap: .5rem;
  align-self: flex-start; /* shrink-wrap to media + buttons, don't stretch */
}
/* The media element must be allowed to shrink on narrow screens so the button
   column always stays beside it (never pushed off / overlapping). */
.msg.video video, .msg.image img, .msg.audio audio { min-width: 0; }
/* A media message whose file is gone (expired temp link) collapses into a
   small note instead of a blank box; dead gallery files self-delete instead. */
.media-gone { display: inline-block; color: var(--muted); font-size: .85rem; padding: .55rem .8rem; border: 1px dashed var(--line-2); border-radius: 12px; }

.media-actions { display: flex; flex-direction: column; gap: .4rem; flex-shrink: 0; }
.media-btn {
  width: 34px; height: 34px; border-radius: 9px; border: none;
  background: rgba(10, 10, 11, .72); color: var(--text); cursor: pointer;
  display: grid; place-items: center; font-size: 1.05rem; line-height: 1;
  backdrop-filter: blur(4px); opacity: .9; transition: background .12s, opacity .12s;
}
.media-btn:hover { background: var(--neon); color: var(--on-accent); opacity: 1; }

/* ── Full-screen lightbox ── */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 2.5rem;
  background: rgba(0, 0, 0, .92);
}
.lightbox.open { display: flex; }
.lb-stage { display: flex; align-items: center; justify-content: center; position: relative; max-width: 94vw; max-height: 90vh; min-width: 120px; min-height: 120px; }
.lb-stage img, .lb-stage video { max-width: 94vw; max-height: 90vh; border-radius: 12px; display: block; }
.lb-loading {
  position: absolute; width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .15); border-top-color: var(--neon);
  animation: spin 1s linear infinite;
}
.lb-close, .lb-dl {
  position: fixed; top: 1.1rem; width: 44px; height: 44px; border-radius: 12px;
  border: none; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
  display: grid; place-items: center; line-height: 1;
}
.lb-close { right: 1.1rem; font-size: 1.6rem; }
.lb-dl { right: 4.2rem; font-size: 1.25rem; }
.lb-close:hover, .lb-dl:hover { background: var(--neon); color: var(--on-accent); }

/* ── Generation loading (animated) ──────── */
.gen-loading {
  align-self: flex-start; max-width: 70%;
  display: flex; flex-direction: column; gap: .65rem;
  background: none; border: none; padding: 0;
}
/* Dreaming frame: the scan-line loader plays inside the placeholder, a
   pink/amber aurora tint above it, a light sweep gliding across, and a
   softly breathing gradient border. */
.gen-shimmer {
  position: relative; overflow: hidden;
  width: 420px; max-width: 100%; border-radius: 12px;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(circle, rgba(0, 0, 0, .05) 1px, transparent 1.5px) 0 0 / 24px 24px,
    var(--panel-2);
}
/* one crisp gradient line sweeps top→bottom, scanning the frame into being */
.gen-scanline {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2;
  filter: blur(.3px);
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.55) 35%, rgba(0,0,0,.4) 65%, transparent);
  box-shadow: 0 0 16px rgba(0, 0, 0, .55);
  animation: gen-scandown 2.4s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes gen-scandown {
  0%   { top: 6%;  opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 94%; opacity: 0; }
}
/* tiny instrument readouts in the corners */
.gen-scan-tag {
  position: absolute; z-index: 3; pointer-events: none;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px; letter-spacing: .5px; color: var(--muted);
}
.gen-scan-tag.tl { left: 12px; top: 10px; }
.gen-scan-tag.br { right: 12px; bottom: 10px; }
@media (prefers-reduced-motion: reduce) { .gen-scanline { animation: none; top: 50%; } }
.gen-bars { display: flex; align-items: center; gap: 4px; height: 46px; padding: 0 .2rem; }
.gen-bars span {
  width: 5px; height: 22%; border-radius: 3px; background: var(--neon);
  animation: eq .9s ease-in-out infinite;
}
@keyframes eq { 0%, 100% { height: 18%; opacity: .55; } 50% { height: 92%; opacity: 1; } }
/* Free-tier on-screen mark over video players */
.msg.video, .msg.image { position: relative; }
.wm-badge {
  position: absolute; top: 10px; left: 12px; z-index: 2; pointer-events: none;
  font-family: 'Space Grotesk', Inter, sans-serif; font-size: .72rem; font-weight: 600;
  color: rgba(255, 255, 255, .78); text-shadow: 0 1px 8px rgba(0, 0, 0, .65);
  letter-spacing: .02em;
}
/* Full-screen playback keeps the mark readable. */
.lb-stage .wm-badge { font-size: 1rem; top: 16px; left: 18px; }
.gen-status { display: flex; align-items: center; gap: .55rem; color: var(--muted); font-size: .9rem; }
.gen-status-text.flip { animation: gen-flip .45s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes gen-flip { from { opacity: 0; transform: translateY(7px); } }
.gen-model {
  margin-left: auto; flex-shrink: 0; font-size: .7rem; font-weight: 600; color: rgba(237, 234, 243, .6);
  border: 1px solid var(--line); border-radius: 999px; padding: .16rem .55rem; white-space: nowrap;
}
.gen-model:empty { display: none; }
/* slim indeterminate bar between the frame and the status line */
.gen-prog { height: 3px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; margin: .5rem 0 .45rem; }
.gen-prog i {
  display: block; height: 100%; width: 34%; border-radius: 999px;
  background: var(--split);
  animation: gen-prog-sweep 1.7s cubic-bezier(.45, .15, .35, .9) infinite;
}
@keyframes gen-prog-sweep { from { transform: translateX(-120%); } to { transform: translateX(330%); } }
.gen-spinner {
  width: 15px; height: 15px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--line-2); border-top-color: var(--neon); border-right-color: var(--purple);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Director: A–D question card + prompt review ── */
.q-card, .review-card {
  align-self: flex-start; max-width: 82%;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 16px; border-bottom-left-radius: 5px;
  padding: 1.05rem 1.15rem; display: flex; flex-direction: column; gap: 1.1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
}
.q-intro, .review-label { color: var(--muted); font-size: .88rem; }
.opts { display: flex; flex-direction: column; gap: .45rem; }
.opt {
  display: flex; align-items: center; gap: .7rem; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--panel);
  border-radius: 11px; padding: .6rem .7rem;
}
.opt:hover { border-color: var(--neon); }
.opt .key {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center; font-weight: 700; font-size: .8rem;
  background: var(--line); color: var(--muted);
}
.opt .txt { flex: 1; min-width: 0; }
.opt .txt b { font-weight: 600; }
.opt .txt small { display: block; color: var(--muted); font-size: .8rem; margin-top: .1rem; }
.opt.sel { border-color: var(--neon); background: rgba(255, 214, 10, .09); }
.opt.sel .key { background: var(--split); color: var(--on-accent); }
.other-input {
  width: 100%; background: transparent; border: none; outline: none;
  color: var(--text); font-family: inherit; font-size: .95rem;
  border-bottom: 1px solid var(--neon); padding: .15rem 0; margin-top: .15rem;
}
.other-input::placeholder { color: var(--muted); }
.review-prompt {
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px;
  padding: .8rem .9rem; line-height: 1.5; font-size: .95rem; white-space: pre-wrap;
}
/* Multi-shot breakdown (Kling shot-list) inside the review card. */
.review-shots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.review-shots li {
  background: var(--panel); border: 1px solid var(--line-2); border-left: 2px solid var(--purple);
  border-radius: 10px; padding: .55rem .7rem; display: flex; flex-direction: column; gap: .2rem;
}
.review-shots .rs-tag {
  font-size: .72rem; font-weight: 700; letter-spacing: .01em;
  background: var(--split);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.review-shots .rs-txt { color: var(--text); font-size: .88rem; line-height: 1.45; }
.review-actions { display: flex; gap: .6rem; }
.review-allow, .review-deny {
  border-radius: 12px; padding: .65rem 1.35rem; font-weight: 700;
  cursor: pointer; font-size: .92rem; font-family: inherit; border: none;
}
.review-allow { align-self: flex-start; background: var(--split); color: var(--on-accent); }
.review-allow:hover { background: var(--split-dim); }
.review-deny { background: none; border: 1px solid var(--line-2); color: var(--muted); }
.review-deny:hover { border-color: #6b4a4a; color: #e88; }

/* ── Attachment pickers ──────────────────── */
.composer-top { display: flex; align-items: flex-start; gap: 1rem; }
.composer-top input { padding-top: .55rem; }
.attach-group { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.attach-btn {
  background: none; border: 1px dashed var(--line-2); color: var(--muted);
  border-radius: 12px; padding: .75rem 1.15rem; font-size: .95rem;
  cursor: pointer; display: flex; align-items: center; gap: .5rem; flex-shrink: 0;
}
.attach-btn small { color: #5c5c66; font-size: .75rem; }
.attach-btn:hover { color: var(--text); border-color: rgba(0,0,0,.3); }
.attach-btn.has { border-style: solid; border-color: var(--neon); color: var(--text); padding: .4rem .6rem; }
.attach-btn.has img { width: 36px; height: 36px; object-fit: cover; border-radius: 8px; display: block; }
.attach-btn .audio-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .85rem; color: var(--neon); font-weight: 600; padding: 0 .2rem;
}
.attach-btn .x { color: var(--muted); font-size: 1.15rem; padding: 0 .25rem; }
.attach-btn .x:hover { color: var(--text); }

/* ── Duration / ratio pickers ────────────── */
.opt-wrap { position: relative; }
.opt-btn {
  background: none; border: 1px solid var(--line-2); color: var(--muted);
  border-radius: 12px; padding: .7rem .85rem; font-size: .9rem;
  cursor: pointer; display: flex; align-items: center; gap: .4rem;
  white-space: nowrap;
}
.opt-btn b { color: var(--text); font-weight: 600; }
.opt-btn:hover { border-color: rgba(0,0,0,.3); color: var(--text); }
.model-menu.drop-up { top: auto; bottom: calc(100% + 10px); right: auto; left: 0; min-width: 130px; }
/* Drops up over the composer, so keep it fully solid to read over the attach row. */
.model-menu.drop-up.model-drop { min-width: 250px; background: #ffffff; }

/* ── Prompt-help mode chip (top-right beside the textarea) ── */
.dir-wrap { flex-shrink: 0; display: flex; align-items: center; gap: .55rem; }
/* Orchestrator master switch — turns the Sonnet layer on/off; the Auto/Plan
   chip sits beside it and only shows while it's on. */
.orch-ctl { display: inline-flex; align-items: center; gap: .45rem; margin-top: .15rem; }
.orch-name { font-size: .82rem; font-weight: 600; color: var(--muted); white-space: nowrap; transition: color .16s ease; }
.orch-ctl.on .orch-name { color: var(--text); }
/* Non-subscriber: switch is dimmed and the label carries a small lock; tapping
   opens the add-on upsell instead of toggling. */
.st-switch.locked { opacity: .5; }
.orch-ctl.locked .orch-name::after { content: " 🔒"; font-size: .72em; opacity: .8; }
.model-menu.drop-up.dir-menu { min-width: 300px; background: #ffffff; left: auto; right: 0; }
/* THE BUILDER AND EFFORT MENUS WERE 130px WIDE AND SEE-THROUGH.
   `.model-menu` sets `min-width: 250px` and a translucent panel; `.drop-up`
   above narrows that to 130px, and every other drop-up then re-widens itself and
   paints itself solid — `.model-drop` 250px, `.dir-menu` 300px, `.effort-menu`
   165px. `.build-menu` never did, so it inherited the 130px and the blur: the
   descriptions wrapped one or two words per line, the fifth effort ran off the
   bottom, and the chat showed through the menu. It has its own width now, wide
   enough for the longest line ("Multi-agent fan-out — nothing truncates") on two
   lines rather than six.
   Solid, like the other three, and for the reason already written above them:
   these drop UP over the composer and have to read against the attach row. */
.model-menu.drop-up.build-menu { min-width: 270px; background: #ffffff; }
/* The rightmost chip in the composer row opens leftwards. `.drop-up` pins every
   menu to `left: 0`, which put this one 72px past the rail's right edge —
   measured against the real 450px `.st-rail`. Same answer `.dir-menu` already
   takes for the same reason. */
.model-menu.drop-up.build-menu-end { left: auto; right: 0; }
.dir-item, .build-item { padding: .6rem .8rem; }
.dir-item .txt small, .build-item .txt small { display: block; color: var(--muted); font-size: .78rem; margin-top: .15rem; line-height: 1.35; }
/* The tick keeps its own column, so a description can never reflow around it or
   push it off the edge — `space-between` alone let the text claim the width. */
.build-item .txt { min-width: 0; }
.build-item .check { flex: none; }
/* Raw mode: the effort knob has nothing to control — greyed, not clickable. */
.effort-pick.locked .opt-btn { opacity: .35; cursor: default; }
.effort-pick.locked .opt-btn:hover { border-color: var(--line-2); color: var(--muted); }
.accept-chip {
  flex-shrink: 0; display: flex; align-items: center; gap: .45rem;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--muted);
  border-radius: 999px; padding: .5rem .9rem; font-size: .85rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; margin-top: .15rem;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.accept-chip .ae-icon { font-weight: 700; font-size: .75rem; letter-spacing: -1px; }
.accept-chip:hover { color: var(--text); border-color: rgba(0,0,0,.3); }
.accept-chip:active { transform: scale(.96); }

/* ── Settings panel (grouped composer options) ── */
/* Fully solid so the chips read clearly over content (matches the model picker). */
/* Double-class beats .model-menu.drop-up's min-width:130px override. */
.model-menu.settings-panel { min-width: 380px; max-width: 430px; padding: .6rem; background: #ffffff; }
.set-section { padding: .55rem .45rem; }
.set-section + .set-section { border-top: 1px solid var(--line); }
.set-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .55rem; }
/* A section whose value the model fixes (Veo refs → 8s, extend → +7s): chips
   dim + go inert, the note under them says why. */
.set-note { display: none; font-size: .74rem; color: var(--muted); margin-top: .45rem; max-width: 320px; line-height: 1.35; }
.set-section.dur-locked .set-note { display: block; }
.set-section.dur-locked .set-chips { opacity: .35; pointer-events: none; }
.set-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.set-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--panel); border: 1px solid var(--line-2); color: var(--text);
  border-radius: 10px; padding: .42rem .7rem; font-family: inherit; font-size: .85rem; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.set-chip:hover { border-color: rgba(0,0,0,.3); }
.set-chip.active {
  background: var(--split); color: var(--on-accent);
  border-color: transparent; font-weight: 700;
}
.set-voicebtn {
  width: 18px; height: 18px; border-radius: 5px; display: inline-grid; place-items: center;
  font-size: .58rem; border: 1px solid var(--line-2); color: var(--muted); line-height: 1;
}
.set-voicebtn:hover { color: var(--neon); border-color: var(--neon); }
.set-voicebtn.playing { color: var(--neon); border-color: var(--neon); }
.set-chip.active .set-voicebtn { border-color: rgba(237, 234, 243, .35); color: var(--text); }
/* collapse long lists: show the first 6, reveal the rest on "View all" */
.set-section.collapsible:not(.expanded) .set-chip:nth-child(n+7) { display: none; }
.set-viewall {
  margin-top: .55rem; background: none; border: none; color: var(--neon);
  font-family: inherit; font-size: .8rem; cursor: pointer; padding: .1rem .2rem;
}
.set-viewall:hover { text-decoration: underline; }
#voiceMenu { min-width: 168px; max-height: 340px; overflow-y: auto; }

/* Per-voice preview (play) button in the voice menu */
.voice-right { display: inline-flex; align-items: center; gap: .5rem; }
.voice-test {
  background: none; border: 1px solid var(--line-2); color: var(--muted);
  width: 24px; height: 24px; border-radius: 7px; font-size: .7rem; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.voice-test:hover { border-color: var(--neon); color: var(--neon); }
.voice-test.playing { border-color: var(--neon); color: var(--neon); }
.voice-test:disabled { opacity: .55; cursor: default; }


/* ── Auth gate ─────────────────────────────── */
/* ── Top-right account / profile menu ───────────────────────────────── */
.profile { position: fixed; top: 16px; right: 20px; z-index: 70; display: flex; align-items: center; gap: .6rem; }
/* Credits pill: balance + segmented meter (share of the highest balance seen) */
.cred-pill {
  display: none; align-items: center; gap: .6rem; cursor: pointer;
  background: rgba(10, 9, 14, .6); border: 1px solid var(--line-2); border-radius: 999px;
  padding: .44rem .9rem; color: var(--text);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  transition: border-color .15s ease, transform .12s ease;
}
.cred-pill.show { display: inline-flex; }
.cred-pill .cr-arc { display: none; } /* owner 2026-07-16: no gauge on the pill — just the balance */
.cred-pill:hover { border-color: rgba(0, 0, 0, .5); transform: translateY(-1px); }
.cred-n { font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 700; font-size: .88rem; line-height: 1; }
.cr-arc { width: 30px; height: 17px; flex: none; }
.cr-arc-bg { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 3; stroke-linecap: round; }
.cr-arc-fg {
  fill: none; stroke: url(#crGrad); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 37.7; stroke-dashoffset: 37.7;
  transition: stroke-dashoffset .6s ease;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, .5));
}
.pp-bal-row { display: flex; align-items: center; gap: .6rem; }
.pp-bal-row .cr-arc { margin-top: 2px; }
.profile-btn {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer; padding: 2px;
  background: var(--split); border: none; display: grid; place-items: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
  transition: transform .12s ease, box-shadow .12s ease;
}
.profile-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(0,0,0, .35); }
.profile-btn:active { transform: scale(.95); }
.profile-av {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  background: var(--split); color: var(--on-accent); font-weight: 800; font-size: .95rem;
}
.profile-pop {
  position: absolute; top: calc(100% + 10px); right: 0; width: 316px; display: none;
  background: var(--panel);
  border: 1px solid var(--line-2); border-radius: 16px;
  padding: .55rem; z-index: 71; transform-origin: top right;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%);
}
.profile-pop.open { display: block; animation: pp-in .16s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes pp-in { from { opacity: 0; transform: scale(.97) translateY(-4px); } }

/* Full-width top nav bar (icon-only): the views that used to live in the
   sidebar — Gallery / Products / Avatar / Media Agent. Spans the workspace
   end to end at the top of .main; a header strip that pushes content down.
   Right padding keeps the last tab clear of the fixed profile pill. */
.top-nav {
  flex-shrink: 0; height: 56px; display: flex; align-items: center; gap: .3rem;
  padding: 0 230px 0 1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
}
/* Go Farther wordmark in the Website Builder top bar (the section tabs are hidden
   there) — clicking it returns to the landing. Shown only in sites mode. */
.st-home {
  display: none; align-items: center; gap: .5rem; cursor: pointer;
  font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 900;
  font-size: 1.15rem; letter-spacing: -.02em; color: var(--text);
  height: 40px; padding: 0 .5rem; border-radius: 11px;
  transition: opacity .12s ease, transform .12s ease;
}
.st-home .logo-mark { width: 28px; height: 28px; }
.st-home:hover { opacity: .82; }
.st-home:active { transform: scale(.97); }
body.in-sites .st-home { display: inline-flex; }

/* Back-to-Builder button — only shown while a section view is open. */
.top-back {
  display: none; align-items: center; gap: .35rem; cursor: pointer;
  height: 40px; padding: 0 .8rem 0 .55rem; margin-right: .3rem;
  border-radius: 11px; border: 1px solid var(--line-2); background: transparent;
  color: var(--text); font: inherit; font-weight: 600; font-size: .9rem; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.top-back.show { display: inline-flex; }
.top-back svg { width: 19px; height: 19px; }
.top-back:hover { background: rgba(255, 255, 255, .07); border-color: rgba(0, 0, 0, .5); }
.top-back:active { transform: scale(.97); }
.top-tab {
  height: 40px; border-radius: 11px; cursor: pointer; padding: 0 .85rem;
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; border: 1px solid transparent; color: var(--muted);
  font: inherit; font-weight: 600; font-size: .9rem; white-space: nowrap;
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
.top-tab svg { width: 20px; height: 20px; flex: 0 0 20px; }
.top-tab .tt-label { line-height: 1; }
.top-tab:hover { color: var(--text); background: rgba(255, 255, 255, .07); }
.top-tab:active { transform: scale(.97); }
.top-tab.active { color: var(--text); background: rgba(255, 255, 255, .07); border-color: rgba(237, 234, 243, .55); font-weight: 700; }
.pp-head { display: flex; align-items: center; gap: .7rem; padding: .6rem .65rem .75rem; }
.pp-av {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; display: grid; place-items: center;
  color: var(--on-accent); font-weight: 800; font-size: 1rem; background: var(--split);
}
.pp-id { min-width: 0; flex: 1; }
.pp-name { font-weight: 700; font-size: .95rem; line-height: 1.2; }
.pp-email { font-size: .76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-plan-tag {
  flex-shrink: 0; align-self: flex-start; margin-top: 2px;
  font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: 999px; padding: .2rem .5rem;
}
/* Balance card — quiet centerpiece; opens one-time top-ups */
.pp-bal {
  display: flex; align-items: center; gap: .6rem; margin: .1rem .1rem .4rem;
  padding: .68rem .85rem; border-radius: 12px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line-2);
  transition: border-color .12s ease;
}
.pp-bal:hover { border-color: rgba(255, 255, 255, .24); }
.pp-bal-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pp-bal-lbl { font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pp-bal-n { font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 600; font-size: 1.18rem; line-height: 1.2; }
.pp-bal-cta {
  margin-left: auto; flex-shrink: 0; background: none; color: var(--text);
  font-weight: 600; font-size: .78rem; padding: .34rem .72rem; border-radius: 999px;
  border: 1px solid var(--line-2); transition: border-color .12s ease, background .12s ease;
}
.pp-bal:hover .pp-bal-cta { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .24); }
/* Membership upgrade — restrained card, single gradient accent */
.pp-upgrade {
  width: 100%; display: flex; align-items: center; gap: .6rem; cursor: pointer;
  margin: 0 .1rem .4rem; padding: .68rem .85rem; border-radius: 12px; text-align: left;
  background: linear-gradient(120deg, rgba(0,0,0, .07), rgba(0,0,0, .05));
  border: 1px solid rgba(0, 0, 0, .26); color: var(--text);
  transition: border-color .12s ease;
}
.pp-upgrade:hover { border-color: rgba(0, 0, 0, .5); }
.pp-up-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pp-up-t { font-weight: 600; font-size: .88rem; white-space: nowrap; }
.pp-up-s { font-size: .72rem; color: var(--muted); }
.pp-up-cta {
  margin-left: auto; flex-shrink: 0; background: var(--split); color: var(--on-accent);
  font-weight: 700; font-size: .76rem; padding: .36rem .72rem; border-radius: 999px;
}
.pp-row {
  width: 100%; display: flex; align-items: center; gap: .7rem; text-align: left;
  background: none; border: none; color: var(--text); cursor: pointer;
  padding: .62rem .75rem; border-radius: 11px; font-size: .9rem;
  transition: background .12s ease;
}
.pp-row:hover { background: var(--panel-2); }
.pp-ico { width: 20px; display: flex; align-items: center; justify-content: center; opacity: .75; flex: 0 0 20px; }
.pp-ico svg { width: 15px; height: 15px; }
.pp-txt { flex: 1; }
.pp-out:hover { color: #ff6b8a; }
.pp-sep { height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); margin: .35rem .3rem; }
@media (max-width: 900px) { .profile { top: 12px; right: 12px; } }

/* Settings panel (profile → Settings) */
.st-sec {
  margin: 1rem .1rem .5rem; font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.st-acct {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .8rem; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line-2);
}
.st-av {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; display: grid; place-items: center;
  color: var(--on-accent); font-weight: 800; font-size: .95rem; background: var(--split);
}
.st-id { min-width: 0; }
.st-name { font-weight: 600; font-size: .92rem; line-height: 1.25; }
.st-mail { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-form { display: flex; gap: .5rem; }
.st-in {
  flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: 11px; padding: .62rem .8rem; color: var(--text);
  font-family: inherit; font-size: .88rem; outline: none;
  transition: border-color .12s ease;
}
.st-in:focus { border-color: rgba(0, 0, 0, .5); }
.st-in::placeholder { color: var(--muted); }
.st-save {
  flex-shrink: 0; background: var(--split); color: var(--on-accent); border: none;
  border-radius: 11px; padding: .62rem 1.05rem; font-weight: 700; font-size: .86rem; cursor: pointer;
  transition: transform .12s ease;
}
.st-save:hover { transform: translateY(-1px); }
.st-box { max-height: 88vh; overflow-y: auto; }
.st-id { flex: 1; }
/* plan badge in the account row */
.st-plan {
  margin-left: auto; flex-shrink: 0; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: .22rem .55rem; border-radius: 999px;
  color: var(--muted); border: 1px solid var(--line-2);
}
.st-plan.paid { color: var(--on-accent); background: var(--split); border-color: transparent; }
/* Credits & plan link */
.st-link {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  margin-top: .5rem; background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: 12px; padding: .7rem .85rem; cursor: pointer; color: var(--text); font: inherit;
  transition: border-color .12s ease;
}
.st-link:hover { border-color: rgba(0, 0, 0, .45); }
.st-link-t { font-weight: 600; font-size: .9rem; }
.st-link-v { display: inline-flex; align-items: center; gap: .4rem; font-size: .86rem; color: var(--muted); font-weight: 600; }
.st-chev { font-size: 1.1rem; line-height: 1; opacity: .6; }
/* preference rows */
.st-row { display: flex; align-items: center; gap: .8rem; padding: .75rem .3rem; }
.st-row + .st-row { border-top: 1px solid var(--line); }
.st-row-col { flex-direction: column; align-items: stretch; gap: .6rem; }
.st-row-txt { flex: 1; min-width: 0; }
.st-row-t { font-weight: 600; font-size: .9rem; }
.st-row-s { font-size: .76rem; color: var(--muted); line-height: 1.4; margin-top: .12rem; }
/* toggle switch */
.st-switch {
  position: relative; flex: 0 0 42px; width: 42px; height: 24px; border-radius: 999px;
  background: var(--line-2); border: 1px solid var(--line); cursor: pointer; padding: 0;
  transition: background .16s ease, border-color .16s ease;
}
.st-switch.on { background: var(--split); border-color: transparent; }
.st-knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); transition: transform .16s ease;
}
.st-switch.on .st-knob { transform: translateX(18px); }
.st-switch:focus-visible { outline: 2px solid rgba(0, 0, 0, .7); outline-offset: 2px; }
/* segmented control */
.st-seg { display: flex; gap: .3rem; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 11px; padding: 3px; }
.st-seg-btn {
  flex: 1; padding: .5rem; border: none; background: none; color: var(--muted);
  font: inherit; font-size: .84rem; font-weight: 600; border-radius: 8px; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.st-seg-btn:hover { color: var(--text); }
.st-seg-btn.on { background: var(--split); color: var(--on-accent); }
/* sign out */
.st-signout {
  width: 100%; margin-top: 1rem; padding: .65rem; border-radius: 11px;
  background: none; border: 1px solid var(--line-2); color: var(--muted);
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.st-signout:hover { color: #ff6b8a; border-color: rgba(255, 107, 138, .45); }

/* ── Settings page (plain grouped-list view) ── */
.view-settings.active {
  flex-direction: column; overflow-y: auto; padding: 2.2rem 2rem 3rem;
  /* Ambient warm→violet glow, pinned to the view: background-attachment stays
     with the border box on an overflow container, so it doesn't scroll and the
     page reads soft rather than flat-black. */
  background:
    radial-gradient(780px 520px at 6% -8%, rgba(0, 0, 0, .10), transparent 62%),
    radial-gradient(700px 640px at 110% 32%, rgba(150, 92, 210, .12), transparent 60%);
}
.settings-page { width: 100%; max-width: 560px; margin: 0 auto; }
.sp-title { font-family: Georgia, 'Times New Roman', Times, serif; font-size: 2.05rem; font-weight: 500; letter-spacing: -.005em; margin-bottom: .35rem; }
.sp-sub { color: var(--muted); font-size: .95rem; line-height: 1.5; margin-bottom: 1.9rem; }
.sp-group { margin-bottom: 1.6rem; }
.sp-glabel {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 .2rem .55rem;
}
.sp-list { border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: var(--panel); }
.sp-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1rem; }
.sp-item + .sp-item { border-top: 1px solid var(--line); }
.sp-item-l { min-width: 0; }
.sp-item-t { display: block; font-weight: 600; font-size: .9rem; }
.sp-item-s { display: block; font-size: .78rem; color: var(--muted); margin-top: .12rem; line-height: 1.4; }
.sp-item-r { display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; color: var(--muted); font-weight: 600; font-size: .88rem; }
.sp-acct-l { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.sp-tap { width: 100%; border: 0; background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background .12s ease; }
.sp-tap:hover { background: var(--panel-2); }
.sp-form { gap: .5rem; }
.sp-form[hidden] { display: none; }
.sp-chev { display: inline-block; transition: transform .15s ease; }
.sp-tap.open .sp-chev { transform: rotate(90deg); }
.sp-note { margin: .5rem .2rem 0; }
/* Integrations — connect-app rows: brand icon + label, Connect button on the right. */
.ig-item .sp-item-l { display: flex; align-items: center; gap: .8rem; }
.ig-txt { min-width: 0; }
.ig-ico { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.ig-ico svg { width: 38px; height: 38px; display: block; }
.ig-connect {
  background: none; border: 1px solid var(--line-2); color: var(--text);
  font: inherit; font-weight: 600; font-size: .82rem; padding: .45rem .95rem;
  border-radius: 999px; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.ig-connect:hover:not([disabled]) { border-color: #1e1e22; background: var(--panel-2); }
.ig-connect[disabled] { opacity: .6; cursor: default; }
.ig-connect.ig-dis:hover:not([disabled]) { border-color: rgba(255, 120, 120, .6); color: #ff9a9a; background: none; }
.sp-signout {
  width: 100%; margin-top: .3rem; padding: .8rem; border-radius: 12px;
  background: none; border: 1px solid var(--line-2); color: var(--muted);
  font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.sp-signout:hover { color: #ff6b8a; border-color: rgba(255, 107, 138, .4); }
.sp-signout-all {
  width: 100%; margin-top: .55rem; padding: .35rem; background: none; border: none;
  color: var(--muted); font: inherit; font-size: .8rem; cursor: pointer; opacity: .75;
  transition: opacity .12s ease, color .12s ease;
}
.sp-signout-all:hover { color: var(--text); opacity: 1; }
.sp-red { color: #ff6b8a; }
@media (max-width: 900px) { .view-settings.active { padding: 1.5rem 1rem 2.5rem; } }

/* Page-header pattern (born on the removed Products page; the Avatar page
   keeps using it): pr-head headline + "or" divider + white action button. */
.pr-head h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; }
.pr-head p { color: var(--muted); font-size: .92rem; margin-top: .35rem; max-width: 460px; }
.pr-or { color: var(--muted); font-size: .9rem; }
.pr-manual { background: #fff; color: var(--text); border: 1px solid var(--line-2); border-radius: 11px; padding: .62rem 1.1rem; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; transition: transform .12s ease; }
.pr-manual:hover { transform: translateY(-1px); }

/* ── Avatar page ── */
.view-avatar.active { flex-direction: column; overflow-y: auto; padding: 2.4rem 2rem 3rem; }
.av-page { width: 100%; }
/* Empty state = the Products page pattern (owner's pick, design 1): pr-head
   headline + one action row. */
.av-start { display: flex; align-items: center; gap: .85rem; margin: 1.6rem 0 1.9rem; flex-wrap: wrap; }
.av-start-gen {
  background: var(--split); color: var(--on-accent); border: none; border-radius: 11px;
  padding: .66rem 1.15rem; font: inherit; font-weight: 700; font-size: .9rem;
  cursor: pointer; transition: transform .12s ease;
}
.av-start-gen:hover { transform: translateY(-1px); }
.av-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.av-top h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; }
.av-top-btns { display: flex; gap: .6rem; }
.av-mini {
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text); font: inherit;
  font-weight: 600; font-size: .85rem; padding: .5rem .9rem; border-radius: 10px; cursor: pointer;
  transition: border-color .12s ease;
}
.av-mini:hover { border-color: rgba(0, 0, 0, .5); }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.av-card { position: relative; }
.av-thumb { aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--line-2); }
.av-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-thumb-ph { display: grid; place-items: center; font-size: 2rem; opacity: .5; }
.av-name { margin-top: .5rem; font-size: .85rem; font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-del { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(10, 9, 14, .6); backdrop-filter: blur(6px); color: #fff; font-size: .8rem; cursor: pointer; opacity: 0; transition: opacity .12s ease; }
.av-card:hover .av-del { opacity: 1; }
@media (max-width: 640px) { .view-avatar.active { padding: 1.5rem 1rem 2.5rem; } }

/* ── Media Agent (social connections) ── */
.view-media-agent.active { flex-direction: column; overflow-y: auto; padding: 2.4rem 2rem 3rem; }
/* Wide workspace on every tab (owner's call 2026-07-11): 1420px fits 4 YouTube
   video cards / 6 IG post cards per row at the same card sizes the old 720px
   panel had — grids gain columns, cards keep their size. */
.ma-page { width: 100%; }
.ma-head h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; }
.ma-head p { color: var(--muted); font-size: .92rem; margin-top: .35rem; max-width: 520px; line-height: 1.5; }
.ma-msg {
  margin-top: 1.3rem; padding: .7rem .9rem; border-radius: 12px; font-size: .88rem; line-height: 1.45;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text);
}
.ma-msg a { color: #000000; }
.ma-msg-ok { border-color: rgba(120, 220, 150, .5); }
.ma-msg-warn { border-color: rgba(0, 0, 0, .5); }
.ma-conns { margin-top: 1.6rem; display: flex; flex-direction: column; gap: .8rem; }
.ma-note { color: var(--muted); font-size: .9rem; padding: 1.2rem 0; }
.ma-conn {
  display: flex; align-items: center; gap: 1rem;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 16px; padding: 1rem 1.1rem;
}
.ma-conn-ico { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; }
.ma-conn-ico svg { width: 24px; height: 24px; }
.ma-ico-instagram { background: linear-gradient(135deg, #feda75, #d62976 50%, #4f5bd5); }
.ma-ico-youtube { background: #ff0033; }
.ma-conn-info { flex: 1; min-width: 0; }
.ma-conn-name { font-size: 1rem; font-weight: 700; }
.ma-conn-sub { color: var(--muted); font-size: .82rem; margin-top: .12rem; }
.ma-pill {
  font-size: .74rem; font-weight: 700; padding: .32rem .6rem; border-radius: 999px;
  color: var(--muted); background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); white-space: nowrap;
}
.ma-pill.on { color: #7ee0a0; border-color: rgba(120, 220, 150, .5); }
.ma-pill.wait { color: #000000; border-color: rgba(0, 0, 0, .5); }
.ma-btn {
  font: inherit; font-weight: 700; font-size: .85rem; padding: .5rem .95rem; border-radius: 11px;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
}
.ma-btn[disabled] { opacity: .6; cursor: default; }
.ma-btn-on { color: var(--on-accent); background: linear-gradient(90deg, #1e1e22, #000000); }
.ma-btn-on:hover:not([disabled]) { filter: brightness(1.06); }
.ma-btn-off { color: var(--text); background: none; border-color: var(--line-2); }
.ma-btn-off:hover:not([disabled]) { border-color: rgba(255, 120, 120, .6); color: #ff9a9a; }
/* Media Agent app switcher — logo-only square tiles (linking lives in Integrations) */
.app-switch { margin-top: 1.5rem; display: flex; gap: .7rem; flex-wrap: wrap; }
.app-tile {
  position: relative; width: 58px; height: 58px; border-radius: 16px;
  border: 1px solid var(--line-2); background: var(--panel); cursor: pointer;
  display: grid; place-items: center; transition: background .15s ease;
}
.app-tile:hover { background: var(--panel-2); }
.app-tile.on { background: var(--panel-2); }
.app-tile.on::before {
  content: ''; position: absolute; inset: -1px; border-radius: 16px; padding: 2px;
  background: var(--split);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.app-tile-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; }
.app-tile-ico svg { width: 22px; height: 22px; }
.app-tile .cdot {
  position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(237, 234, 243, .3); border: 2px solid var(--bg);
}
.app-tile .cdot.on { background: #7ee0a0; }
/* Media Agent per-app panel + section tabs */
.app-main { margin-top: 1.1rem; border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel-2); overflow: hidden; }
.app-empty { padding: 2.4rem 1.2rem; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 1rem; font-size: .92rem; }
.sec-tabs { display: flex; gap: .15rem; padding: .5rem .7rem 0; border-bottom: 1px solid var(--line-2); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.sec-tabs::-webkit-scrollbar { width: 0; height: 0; display: none; }
.sec-tab { font: inherit; font-size: .88rem; font-weight: 600; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; padding: .6rem .85rem .7rem; cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.sec-tab:hover { color: var(--text); }
.sec-tab.on { color: var(--text); border-bottom-color: #1e1e22; }
.sec-body { padding: 1.2rem; }
.sec-loading { color: var(--muted); font-size: .9rem; padding: 1.4rem .2rem; }
.an-retry { font: inherit; font-size: .82rem; font-weight: 600; color: var(--neon); background: none; border: none; cursor: pointer; padding: 0 .2rem; }
.sec-soon { padding: 2rem 1rem; text-align: center; color: var(--muted); }
.sec-soon-s { font-size: .82rem; margin-top: .3rem; opacity: .8; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.stat { border: 1px solid var(--line-2); border-radius: 13px; background: var(--panel); padding: .85rem .9rem; min-width: 0; display: flex; flex-direction: column; min-height: 90px; }
.stat-l { font-size: .72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; line-height: 1.25; }
.stat-v { font-size: 1.4rem; font-weight: 800; margin-top: auto; padding-top: .3rem; letter-spacing: -.02em; }
.card { margin-top: 1.1rem; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); padding: 1rem 1.05rem 1.1rem; }
.card-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .7rem; }
.card-t { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.card-legend { font-size: .78rem; color: var(--muted); }
.sec-sub { margin: 1.3rem 0 .5rem; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.prow { display: flex; align-items: center; gap: .8rem; padding: .6rem .2rem; border-top: 1px solid var(--line); }
.prow:first-of-type { border-top: none; }
.pthumb { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 9px; background: linear-gradient(135deg, rgba(0,0,0, .4), rgba(0,0,0, .4)); background-size: cover; background-position: center; }
.pmeta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pt { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps { font-size: .75rem; color: var(--muted); }
.pnum { font-size: .82rem; color: var(--muted); font-weight: 600; min-width: 60px; text-align: right; }
/* YouTube analytics */
.stats-3 { grid-template-columns: repeat(3, 1fr); }
.pthumb-wide { width: 64px; flex-basis: 64px; height: 38px; border-radius: 7px; }
button.prow { width: 100%; text-align: left; background: none; border: none; border-top: 1px solid var(--line); cursor: pointer; color: var(--text); font: inherit; }
button.prow:first-of-type { border-top: none; }
button.prow:hover { background: rgba(255, 255, 255, .03); }
.yt-chan { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; }
.yt-chan-av { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; background: linear-gradient(135deg, rgba(0,0,0, .4), rgba(0,0,0, .4)); background-size: cover; background-position: center; }
.yt-chan-meta { min-width: 0; display: flex; flex-direction: column; }
.yt-chan-t { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yt-chan-h { color: var(--muted); font-size: .82rem; }
/* 4 across in the wide panel = same ~332px card as the old 2-up/720px layout;
   step down columns on narrower windows so card size stays steady. */
.ytg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 1460px) { .ytg { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) { .ytg { grid-template-columns: repeat(2, 1fr); } }
.ytv { display: flex; flex-direction: column; gap: .4rem; background: none; border: none; padding: 0; cursor: pointer; text-align: left; color: var(--text); font: inherit; }
.ytv-thumb { width: 100%; aspect-ratio: 16 / 9; border-radius: 11px; border: 1px solid var(--line-2); background: linear-gradient(135deg, rgba(0,0,0, .35), rgba(0,0,0, .35)); background-size: cover; background-position: center; }
.ytv:hover .ytv-thumb { filter: brightness(1.07); }
.ytv-t { font-weight: 600; font-size: .88rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ytv-m { font-size: .78rem; color: var(--muted); }
.ytv-thumb { position: relative; }
.ytv-pl { position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, .72); color: #fff; font-size: .72rem; font-weight: 700; padding: .2rem .45rem; border-radius: 6px; }
@media (max-width: 560px) { .ytg { grid-template-columns: 1fr; } }
/* Posts grid */
.posts-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap; }
.posts-count { font-size: .86rem; color: var(--muted); font-weight: 600; }
.posts-sort { display: flex; gap: .35rem; }
.psort { font: inherit; font-size: .8rem; font-weight: 600; color: var(--muted); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); border-radius: 8px; padding: .35rem .7rem; cursor: pointer; }
.psort.on { color: var(--on-accent); background: linear-gradient(90deg, #1e1e22, #000000); border-color: transparent; }
.posts-ctrls { display: flex; align-items: center; gap: .5rem; }
.posts-add { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--text); font-size: 1.25rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: transform .12s ease, background .12s ease, color .12s ease; }
.posts-add:hover { background: linear-gradient(90deg, #1e1e22, #000000); color: var(--on-accent); border-color: transparent; transform: translateY(-1px); }
.ma-pub-back { background: none; border: none; color: var(--muted); font: inherit; font-size: .85rem; cursor: pointer; padding: 0; }
.ma-pub-back:hover { color: var(--text); }
.pub-pick { display: flex; gap: .5rem; flex-wrap: wrap; }
.pub-pick-btn { font-size: .85rem; }
.pub-preview { display: none; }
.pub-preview.on { display: inline-block; position: relative; margin-bottom: .5rem; align-self: flex-start; width: max-content; }
.pub-preview img { max-width: 180px; max-height: 180px; border-radius: 11px; border: 1px solid var(--line-2); display: block; }
.pub-preview-load, .pub-preview-vid { font-size: .85rem; color: var(--muted); padding: .8rem 1rem; border: 1px dashed var(--line-2); border-radius: 11px; display: inline-block; }
.pub-preview-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(0, 0, 0, .62); color: #fff; font-size: 1.15rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; transition: background .12s ease; }
.pub-preview-x:hover { background: rgba(0, 0, 0, .85); }
.gal-cell { position: relative; padding: 0; border: none; background: none; cursor: pointer; display: block; }
.gal-cell-k { position: absolute; top: 8px; right: 8px; font-size: .6rem; font-weight: 700; letter-spacing: .04em; background: rgba(0, 0, 0, .68); color: #fff; padding: .18rem .4rem; border-radius: 6px; }
/* 6 across in the wide panel = same ~215px tile as the old 3-up/720px layout. */
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .7rem; }
@media (max-width: 1460px) { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.post { display: block; text-align: left; padding: 0; border: 1px solid var(--line-2); border-radius: 13px; overflow: hidden; background: var(--panel); cursor: pointer; font: inherit; color: var(--text); transition: filter .12s ease, border-color .12s ease; }
.post:hover { filter: brightness(1.06); border-color: var(--line-2); }
.post-media { display: flex; aspect-ratio: 1; align-items: flex-start; justify-content: flex-end; padding: .5rem; background: linear-gradient(135deg, rgba(0,0,0, .3), rgba(0,0,0, .3)); background-size: cover; background-position: center; }
.post-k { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: rgba(0, 0, 0, .5); border-radius: 6px; padding: .15rem .4rem; }
.post-nums { display: flex; justify-content: space-between; padding: .55rem .7rem; font-size: .8rem; color: var(--muted); font-weight: 600; }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } .grid { grid-template-columns: repeat(2, 1fr); } }
/* DMs tab: drop the standalone card chrome, list runs full-width in the panel */
.sec-body .ma-dm { margin-top: 0; border: none; border-radius: 0; background: none; }
.ma-dm-list-full { border-right: none; max-height: 62vh; }
/* Comments feed */
.cmt-list { display: flex; flex-direction: column; }
.cmt { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem .2rem; border-top: 1px solid var(--line); }
.cmt:first-child { border-top: none; }
.cmt-av { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: var(--on-accent); background: linear-gradient(135deg, #1e1e22, #000000); }
.cmt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.cmt-user { font-weight: 600; font-size: .86rem; }
.cmt-text { font-size: .9rem; line-height: 1.45; color: var(--text); word-wrap: break-word; }
.cmt-thumb { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 9px; border: 1px solid var(--line-2); padding: 0; cursor: pointer; background-color: var(--panel); background-size: cover; background-position: center; }
button.cmt-thumb:hover { border-color: var(--line-2); filter: brightness(1.08); }
.cmt-reply-btn { align-self: flex-start; margin-top: .25rem; background: none; border: none; color: var(--muted); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; padding: 0; }
.cmt-reply-btn:hover { color: var(--text); }
.cmt-reply { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; width: 100%; }
.cmt-reply-in { flex: 1; min-width: 160px; font: inherit; font-size: .86rem; color: var(--text); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); border-radius: 9px; padding: .5rem .7rem; }
.cmt-reply-in:focus { outline: none; border-color: rgba(0,0,0, .6); }
.cmt-reply-send { font-size: .82rem; padding: .45rem .9rem; }
.cmt-reply-status { font-size: .78rem; color: var(--muted); }
.cmt-reply-status.ok { color: #7ee0a0; }
.cmt-reply-status.warn { color: #ff9a9a; }
/* Auto reply config */
.ar-subtabs { display: inline-flex; gap: .25rem; padding: .25rem; border: 1px solid var(--line-2); border-radius: 11px; background: var(--panel); margin-bottom: 1.3rem; }
.ar-subtab { font: inherit; font-size: .85rem; font-weight: 600; color: var(--muted); background: none; border: none; border-radius: 8px; padding: .45rem 1.1rem; cursor: pointer; }
.ar-subtab.on { color: var(--on-accent); background: linear-gradient(90deg, #1e1e22, #000000); }
.ar-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid var(--line-2); border-radius: 13px; background: var(--panel); }
.ar-row-t { font-weight: 700; font-size: .95rem; }
.ar-row-s { font-size: .8rem; color: var(--muted); margin-top: .15rem; line-height: 1.4; }
.ar-switch { position: relative; flex: 0 0 46px; width: 46px; height: 26px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .06); cursor: pointer; transition: background .15s ease; }
.ar-switch.on { background: linear-gradient(90deg, #1e1e22, #000000); border-color: transparent; }
.ar-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.ar-switch.on .ar-knob { transform: translateX(20px); }
.ar-field { margin-top: 1.2rem; }
.ar-label { font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: .5rem; }
.ar-hint { font-weight: 400; opacity: .8; }
.ar-prompt { width: 100%; min-height: 150px; resize: vertical; font: inherit; font-size: .92rem; line-height: 1.55; color: var(--text); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); border-radius: 12px; padding: .8rem .9rem; }
.ar-prompt:focus { outline: none; border-color: rgba(0, 0, 0, .5); }
.ar-foot { margin-top: 1.1rem; display: flex; align-items: center; gap: .9rem; }
.ar-status { font-size: .85rem; font-weight: 600; color: var(--muted); }
.ar-status.ok { color: #7ee0a0; }
.ar-status.warn { color: #ff9a9a; }
/* Media Agent chat */
.ma-chat { margin-top: 2rem; border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel-2); overflow: hidden; }
.ma-chat-head {
  padding: .8rem 1.1rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line-2);
}
.ma-thread { min-height: 180px; max-height: 46vh; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: .7rem; }
.ma-bub { max-width: 82%; padding: .65rem .9rem; border-radius: 14px; font-size: .9rem; line-height: 1.5; white-space: normal; word-wrap: break-word; }
.ma-bub-user { align-self: flex-end; background: linear-gradient(135deg, rgba(0,0,0, .22), rgba(0,0,0, .22)); border: 1px solid var(--line-2); }
.ma-bub-assistant { align-self: flex-start; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); }
.ma-bub b { font-weight: 700; }
.ma-empty-chat { color: var(--muted); font-size: .9rem; }
.ma-empty-chat p { margin-bottom: .7rem; }
.ma-suggests { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.ma-suggest {
  font: inherit; font-size: .85rem; text-align: left; color: var(--text); cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); border-radius: 11px; padding: .5rem .8rem;
}
.ma-suggest:hover { border-color: rgba(0, 0, 0, .5); }
.ma-typing { display: inline-flex; gap: 4px; align-items: center; }
.ma-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: ma-blink 1.2s infinite both; }
.ma-typing span:nth-child(2) { animation-delay: .2s; }
.ma-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes ma-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.ma-composer { display: flex; gap: .6rem; padding: .8rem; border-top: 1px solid var(--line-2); }
.ma-input {
  flex: 1; min-width: 0; font: inherit; font-size: .92rem; color: var(--text);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); border-radius: 12px; padding: .6rem .9rem;
}
.ma-input:focus { outline: none; border-color: rgba(0, 0, 0, .5); }
.ma-send {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; border: none; cursor: pointer;
  color: var(--on-accent); font-size: 1.1rem; font-weight: 800; background: linear-gradient(135deg, #1e1e22, #000000);
}
.ma-send:hover { filter: brightness(1.06); }
/* Media Agent publish panel */
.ma-publish { margin-top: 1.6rem; border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel-2); overflow: hidden; }
.ma-pub-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.ma-pub-title { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ma-pub-tabs { display: flex; gap: .4rem; }
.ma-pub-tab {
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--muted); cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); border-radius: 9px; padding: .35rem .8rem;
}
.ma-pub-tab.on { color: var(--on-accent); background: linear-gradient(90deg, #1e1e22, #000000); border-color: transparent; }
.ma-pub-body { padding: 1.1rem; display: flex; flex-direction: column; gap: .4rem; }
.ma-pub-l { font-size: .8rem; font-weight: 600; color: var(--muted); margin-top: .5rem; }
.ma-pub-hint { font-weight: 400; opacity: .8; }
.ma-pub-in {
  font: inherit; font-size: .9rem; color: var(--text); width: 100%;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); border-radius: 11px; padding: .55rem .8rem;
}
.ma-pub-in:focus { outline: none; border-color: rgba(0, 0, 0, .5); }
.ma-pub-ta { min-height: 70px; resize: vertical; }
select.ma-pub-in { appearance: none; cursor: pointer; }
.ma-pub-foot { margin-top: 1rem; }
.ma-pub-submit { width: 100%; }
.ma-pub-confirm {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .8rem .9rem; border-radius: 12px; font-size: .88rem;
  background: rgba(0, 0, 0, .1); border: 1px solid rgba(0, 0, 0, .45);
}
.ma-pub-cbtns { display: flex; gap: .5rem; }
.ma-pub-res { margin-top: .8rem; padding: .6rem .8rem; border-radius: 11px; font-size: .88rem; border: 1px solid var(--line-2); }
.ma-pub-res a { color: #000000; font-weight: 700; }
.ma-pub-res-ok { border-color: rgba(120, 220, 150, .5); }
.ma-pub-res-warn { border-color: rgba(0, 0, 0, .55); }
.ma-pub-res-busy { color: var(--muted); }
/* Schedule post (Instagram) — the "not published yet" flag + the queue cards */
.sch-flag { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #000000; border: 1px solid rgba(0, 0, 0, .45); border-radius: 999px; padding: .18rem .55rem; }
.sch-urlprev { padding: .8rem; color: var(--muted); font-size: .85rem; word-break: break-all; }
.sch-prev-k { position: absolute; left: .5rem; bottom: .5rem; font-size: .62rem; font-weight: 700; letter-spacing: .04em; color: var(--on-accent); background: linear-gradient(90deg, #1e1e22, #000000); border-radius: 6px; padding: .12rem .4rem; }
/* Schedule: two columns — composer left, calendar right */
.sch-wrap { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; }
.sch-left { flex: 1 1 340px; min-width: 320px; }
.sch-left .ma-publish { margin-top: 0; }
.sch-right { flex: 1 1 420px; min-width: 340px; }
.scal { border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel-2); padding: 1rem 1.1rem 1.1rem; }
.scal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.scal-title { font-size: .95rem; font-weight: 700; color: var(--text); }
.scal-nav { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-2); background: none; color: var(--text); font-size: 1.15rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.scal-nav:hover { border-color: rgba(0, 0, 0, .55); color: #000000; }
.scal-dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; margin-bottom: .35rem; }
.scal-dow { text-align: center; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.scal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.scal-cell { min-height: 62px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(255, 255, 255, .02); padding: .3rem .35rem; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; cursor: pointer; overflow: hidden; text-align: left; transition: border-color .12s ease, background .12s ease; }
.scal-cell.scal-empty { border-color: transparent; background: none; cursor: default; }
.scal-cell:not(.scal-empty):hover { border-color: rgba(0, 0, 0, .5); }
.scal-cell.today { border-color: rgba(0, 0, 0, .55); }
.scal-cell.has { background: rgba(0, 0, 0, .07); }
.scal-cell.sel { border-color: transparent; box-shadow: 0 0 0 2px #1e1e22; background: rgba(0, 0, 0, .12); }
.scal-n { font-size: .78rem; font-weight: 600; color: var(--muted); }
.scal-cell.today .scal-n, .scal-cell.has .scal-n { color: var(--text); }
.scal-chips { display: flex; flex-direction: column; gap: .2rem; width: 100%; }
.scal-chip { display: flex; align-items: center; gap: .25rem; font-size: .62rem; font-weight: 600; color: var(--text); background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); border-radius: 6px; padding: .12rem .2rem; overflow: hidden; }
.scal-chip-th { flex-shrink: 0; width: 18px; height: 18px; border-radius: 4px; background: rgba(255, 255, 255, .08) center/cover no-repeat; display: grid; place-items: center; font-size: .62rem; }
.scal-chip-th-none { color: var(--muted); }
.scal-chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scal-more { font-size: .6rem; color: var(--muted); padding-left: .1rem; }
.scal-day { margin-top: 1rem; border-top: 1px solid var(--line-2); padding-top: .9rem; display: flex; flex-direction: column; gap: .6rem; }
.scal-day-h { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.scal-item { display: flex; align-items: center; gap: .7rem; }
.scal-thumb { flex-shrink: 0; width: 42px; height: 42px; border-radius: 9px; background: rgba(255, 255, 255, .05) center/cover no-repeat; display: grid; place-items: center; font-size: 1.15rem; color: var(--muted); }
.scal-item-meta { flex: 1; min-width: 0; }
.scal-item-cap { font-size: .88rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scal-item-sub { font-size: .76rem; color: var(--muted); margin-top: .15rem; }
/* ── Websites — the standalone website builder (frontend preview) ── */
/* Its ONLY entrance is the landing's WEBSITE channel; while open, the studio
   chrome vanishes — no chats sidebar, no section tabs, no back arrow. */
body.in-sites .sidebar { display: none; }
body.in-sites .top-tab, body.in-sites .top-back { display: none !important; }
.view-sites.active { flex-direction: column; overflow-y: auto; padding: 2.4rem 2rem 3rem; }
.view-sites.ws-open { padding: .8rem 1rem 1rem; overflow: hidden; }
.st-page { width: 100%; max-width: 1080px; margin: 0 auto; }
/* Start screen: a centered hero (Lovable-style home) — big ask, input below. */
.st-hero { max-width: 720px; margin: 8.5vh auto 0; text-align: center; }
/* SITTING LOWER WHEN THE HERO IS THE WHOLE PAGE. At 8.5vh the composer ended
   around 44% down a 900px screen and left HALF the viewport empty under it,
   which is what reads as floating too high. Scoped to the no-sites state on
   purpose: with a grid below, the same offset pushes the first row of cards off
   the fold, so the state that looks better is not the state that matters.
   `:not(:has(.st-grid))` says that condition out loud — `:only-child` would do
   it too and would silently stop applying the day anything else is appended. */
.st-page:not(:has(.st-grid)) .st-hero { margin-top: min(26vh, 15rem); }
/* Glowing orb (mirrors the video-generator hero), with two drifting sparks. */
.st-hero h1 { font-size: clamp(2rem, 3.7vw, 3rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.04; }
.st-grad { background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-hero p { color: var(--muted); font-size: 1rem; margin-top: .7rem; line-height: 1.5; display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; }
/* Glass composer — one calm surface, no chrome inside; the panel is the border. */
.st-new { margin-top: 2rem; text-align: left; border: 1px solid var(--line-2); border-radius: 20px; background: var(--panel); padding: 1.1rem 1.15rem .8rem; box-shadow: 0 24px 60px rgba(0, 0, 0, .42); transition: border-color .18s ease, box-shadow .18s ease; }
.st-new:focus-within { border-color: rgba(0, 0, 0, .42); box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 3px rgba(0, 0, 0, .07); }
.st-hero .st-in { width: 100%; font: inherit; font-size: 1.04rem; line-height: 1.5; color: var(--text); background: transparent; border: none; border-radius: 0; padding: .35rem .3rem; resize: none; min-height: 3.2rem; }
.st-hero .st-in:focus { outline: none; }
.st-new-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .55rem; flex-wrap: wrap; }
.st-hint { color: var(--muted); font-size: .8rem; }
/* Send — round gradient button, mirroring the studio composer. */
.st-gen {
  width: 44px; height: 44px; border-radius: 50%; margin-left: auto; flex: none;
  display: grid; place-items: center; color: var(--on-accent); cursor: pointer;
  background: var(--split); border: none;
  box-shadow: 0 6px 20px -3px rgba(0,0,0, .5);
  transition: box-shadow .18s ease, transform .15s ease;
}
.st-gen:hover { transform: translateY(-1px); box-shadow: 0 9px 26px -4px rgba(0,0,0, .7); }
.st-gen svg { display: block; }
.st-price, .st-arrow { background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
.st-arrow { font-size: 1.05rem; }
.st-gen-sm { font-size: .85rem; padding: .55rem .95rem; align-self: flex-end; }
.st-grid-h { margin: 2rem 0 .8rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.st-card { position: relative; border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel-2); overflow: hidden; cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.st-card:hover { border-color: rgba(0, 0, 0, .45); transform: translateY(-2px); }
.st-card-prev { aspect-ratio: 16/10; overflow: hidden; background: var(--bg); pointer-events: none; }
.st-card-prev iframe { width: 400%; height: 400%; transform: scale(.25); transform-origin: 0 0; border: 0; pointer-events: none; }
.st-card-meta { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .85rem .8rem; }
.st-card-name { font-size: .92rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-card-sub { font-size: .75rem; color: var(--muted); }
/* The small round "remove" control — a site card's corner and a scheduled
   post's row. It had NO STYLES AT ALL: `.sch-del` appears twice in chat.js and
   nowhere in this file, so both call sites were rendering a browser DEFAULT
   button — default padding, default border, default font — with only a
   translucent black fill layered on. That is the grey box with a hairline rim
   that looked wrong on the card thumbnails. */
.sch-del {
  display: grid; place-items: center;
  width: 24px; height: 24px; padding: 0;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--bg); color: var(--muted);
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sch-del:hover { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }
.sch-del:focus-visible { outline: 2px solid #0a0a0a; outline-offset: 2px; }
/* Over a thumbnail it has to carry its own contrast: the page underneath is
   whatever the model built, so a panel-coloured chip can disappear into it. */
.st-card-del {
  position: absolute; top: 8px; right: 8px;
  background: rgba(10, 10, 10, .6); border-color: transparent; color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.st-card-del:hover { background: rgba(10, 10, 10, .88); border-color: transparent; }
/* Workspace — mirrors Lovable's anatomy: top bar, slim chat rail, dominant
   preview card. Go Farther dark + pink→amber skin throughout. */
.st-ws.st-lv { display: flex; flex-direction: column; gap: .7rem; width: 100%; height: calc(100vh - 88px); min-height: 480px; }
.st-topbar { display: flex; align-items: center; gap: 1rem; padding: .35rem .35rem .35rem .2rem; }
.st-tb-left { display: flex; align-items: center; gap: .6rem; min-width: 0; flex: 1 1 0; }
.st-tb-names { display: flex; flex-direction: column; min-width: 0; }
.st-ws-name { font-weight: 700; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-ws-sub { font-size: .72rem; color: var(--muted); }
/* THE VIEW TABS MUST NOT MOVE WHEN THE VIEW CHANGES.
   `.st-tb-left` and `.st-tb-right` are both `flex: 1 1 0`, so this element is
   centred by its TOTAL width — and the page picker plus the reload button used
   to sit in here, existing only in the Preview view. Switching to Code or More
   narrowed the group and slid the tabs 66px right; a multi-page site moved them
   another 8px, the picker being wider than the word "Homepage". Both measured.
   Holding nothing but the tabs, this is now the same width in every view. */
.st-tb-mid { display: flex; align-items: center; gap: .55rem; }
.st-pillbtn { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 650; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: .34rem .8rem; }
.st-pillbtn.on { color: var(--text); background: linear-gradient(rgba(28, 21, 35, .92), rgba(28, 21, 35, .92)) padding-box, var(--split) border-box; border: 1px solid transparent; }
.st-tb-page { font-size: .84rem; font-weight: 600; color: var(--text); }
/* Multi-page picker in the workspace top bar */
.st-pagepick { position: relative; }
.st-pagebtn { font: inherit; font-size: .84rem; font-weight: 600; color: var(--text); background: transparent; border: 1px solid var(--line-2); border-radius: 9px; padding: .3rem .6rem; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.st-pagebtn:hover { border-color: rgba(0, 0, 0, .5); }
.st-pagebtn .st-cv { color: var(--muted); font-size: .7rem; }
/* The page menu. NEVER RESTYLED WHEN THE PLATFORM WENT BLACK-AND-WHITE, and it
   went unnoticed because the picker itself never rendered — a React build stored
   one page, so nothing above one ever opened this. Fixing that exposed three
   dark-theme leftovers at once: `var(--panel-2)` is a 7% black tint on white, so
   the menu was effectively TRANSPARENT and the URL chip read straight through
   it; the hover was white-on-white; and the selected row painted the near-black
   `--split` gradient as a hard slab.

   It matches `.model-menu` now — same surface, same radius, same shadow — so the
   two menus in this workspace read as one control rather than two eras. */
.st-pagemenu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  z-index: 50; min-width: 210px; max-height: min(48vh, 430px); overflow-y: auto;
  background: #ffffff; border: 1px solid var(--line-2); border-radius: 14px; padding: .4rem;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .16); display: flex; flex-direction: column; gap: 1px; }
.st-pagemenu[hidden] { display: none; }
.st-pageitem { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  width: 100%; text-align: left; font: inherit; background: transparent; border: 0;
  border-radius: 10px; padding: .5rem .65rem; cursor: pointer; color: var(--text); }
.st-pageitem:hover { background: var(--panel-2); }
/* The current page is marked by WEIGHT and a tick, not by a filled bar: this
   list sits on white and a solid row reads as a button somebody is about to
   press rather than as the state they are already in. */
.st-pageitem.on { background: var(--panel); }
.st-pageitem.on .st-pi-name::after { content: ' ✓'; color: var(--text); }
.st-pageitem:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.st-pi-name { font-weight: 600; font-size: .85rem; white-space: nowrap; }
.st-pi-path { font-size: .72rem; color: var(--muted); font-family: ui-monospace, Menlo, monospace;
  white-space: nowrap; }
/* Form-submissions inbox modal */
.si-modal { position: fixed; inset: 0; z-index: 200; background: rgba(248, 248, 250, .84); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.si-card { width: min(560px, 96vw); max-height: 82vh; display: flex; flex-direction: column; background: #ffffff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .13), 0 2px 6px rgba(0, 0, 0, .05); }
.si-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.si-head b { font-size: 1rem; }
.si-x { background: transparent; border: 0; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.si-x:hover { color: var(--text); }
.si-body { padding: .9rem 1.1rem 1.2rem; overflow-y: auto; }
.si-empty { color: var(--muted); font-size: .9rem; padding: 1.4rem .2rem; text-align: center; }
.si-count { font-size: .78rem; color: var(--dim, var(--muted)); margin-bottom: .7rem; letter-spacing: .02em; }
.si-item { border: 1px solid var(--line); border-radius: 11px; padding: .7rem .85rem; margin-bottom: .6rem; }
.si-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; margin-bottom: .5rem; }
/* Cloud Insights / Backups / Versions panels */
.si-panel-sub { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 1.1rem 0 .55rem; }
.si-panel-sub:first-child { margin-top: 0; }
.si-note { font-size: .76rem; color: var(--muted); margin-top: 1rem; line-height: 1.5; border-top: 1px solid var(--line); padding-top: .8rem; }
.si-stat-row { display: flex; gap: .6rem; margin-bottom: .4rem; }
.si-stat { flex: 1; background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .8rem; }
.si-stat b { display: block; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.si-stat span { font-size: .68rem; color: var(--muted); line-height: 1.3; display: block; margin-top: .15rem; }
.si-bar { display: flex; align-items: center; gap: .6rem; padding: .28rem 0; font-size: .82rem; }
.si-bar-k { flex: 0 0 34%; color: var(--text, #edeaf3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-bar-t { flex: 1; height: 8px; background: rgba(255,255,255,.06); border-radius: 6px; overflow: hidden; }
.si-bar-t i { display: block; height: 100%; background: var(--split); border-radius: 6px; }
.si-bar-v { flex: 0 0 auto; min-width: 30px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-size: .78rem; }
.si-body > .st-publish { width: 100%; margin-bottom: .4rem; }
.si-item > .st-hi-restore { margin-top: .1rem; }
.si-io { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.si-io select.st-in { flex: 1 1 120px; min-width: 110px; }
.si-io .st-gen2 { flex: 0 0 auto; cursor: pointer; }
.si-io label.st-gen2 { display: inline-flex; align-items: center; }
.si-form { font-weight: 700; font-size: .82rem; text-transform: capitalize; background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent; }
.si-when { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.si-row { display: flex; gap: .8rem; padding: .2rem 0; font-size: .86rem; }
.si-k { min-width: 96px; color: var(--muted); font-size: .78rem; text-transform: capitalize; }
.si-v { color: var(--text); word-break: break-word; }
.st-icon { font: inherit; font-size: .95rem; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line-2); background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.st-icon:hover:not([disabled]) { color: var(--text); border-color: rgba(0, 0, 0, .45); }
.st-icon[disabled] { opacity: .4; cursor: default; }
.st-tb-right { display: flex; align-items: center; gap: .5rem; flex: 1 1 0; justify-content: flex-end; }
/* The Preview-only controls (page picker + reload), moved OUT of `.st-tb-mid`
   so the view tabs stop moving when the view changes — see the note there.
   They live at the START of the right-hand group: this box begins exactly where
   the centred tabs end, so `margin-right: auto` parks them immediately to the
   tabs' right and leaves everything else flush right. Identical to where they
   have always appeared.
   IN FLOW, DELIBERATELY. The first fix positioned them absolutely off
   `.st-tb-mid`, which aligned the tabs perfectly and then ran the page name
   under the device toggles at 1024-1180px — measured, a 57-115px overlap. In
   flow they compress and push instead of colliding, which is the failure mode
   worth having. `min-width: 0` is what lets the picker ellipsise rather than
   refusing to shrink. */
.st-tb-pv { display: flex; align-items: center; gap: .55rem; margin-right: auto; min-width: 0; }
/* The end buttons never wrap. Reserving the picker's space below makes the bar
   tighter in the non-Preview views than it used to be, and the old "Live ↗"
   link broke onto a second line at 1180px, growing the whole toolbar — visible
   in a render, invisible to every position measurement. That link was removed
   on 2026-08-08, and the rule stays because `.st-publish` is still the Publish
   button and every modal's primary action. They are short labels; if the bar
   truly runs out of room the icon buttons beside them give way instead. */
.st-share, .st-publish { white-space: nowrap; flex: none; }
/* HIDDEN, NOT REMOVED, outside the Preview view — which is the whole fix, and
   three attempts were needed to get here. Both side groups are `flex: 1 1 0`, so
   they split the free space equally but only down to each one's MIN-CONTENT
   size: this block pushes `.st-tb-right`'s min-content past its fair share, the
   difference comes out of the left group, and the centre moves with it. Removing
   the block on a view change therefore moves the tabs at ANY width.
   Reserving the space instead means the two sides measure the same in every
   view, so the tabs cannot move — with no truncation and nothing out of flow.
   What was tried first, recorded because each looked right until it was
   rendered: taking it out of flow aligned the tabs and ran the page name under
   the device toggles at 1024-1180px; letting `.st-tb-right` shrink instead put
   the squeeze on the reload button, which the picker then overlapped; giving the
   name room to ellipsise cleanly reduced "Homepage" to "H". A measurement said
   0px spread through all three. Only looking at it did.
   `visibility: hidden` and not `display: none` — the space has to stay. It is
   already out of the tab order and the accessibility tree. */
.st-tb-pv-off { visibility: hidden; }
.st-share { font: inherit; font-size: .84rem; font-weight: 650; color: var(--text); background: none; border: 1px solid var(--line-2); border-radius: 11px; padding: .5rem .95rem; cursor: pointer; }
.st-share:hover { border-color: rgba(0, 0, 0, .45); }
.st-publish {
  font: inherit; font-size: .84rem; font-weight: 750; color: var(--on-accent); cursor: pointer; border-radius: 11px; padding: .5rem 1.05rem;
  background: var(--split);
  border: 1.5px solid transparent; box-shadow: 0 0 18px -6px rgba(0,0,0, .4);
}
.st-publish:hover:not([disabled]) { box-shadow: 0 0 26px -6px rgba(0,0,0, .6); }
.st-publish[disabled] { opacity: .45; cursor: default; box-shadow: none; }
.st-devs { display: flex; gap: .3rem; }
.st-dev { font: inherit; font-size: .85rem; width: 34px; height: 30px; border-radius: 9px; border: 1px solid var(--line-2); background: none; color: var(--muted); cursor: pointer; }
.st-dev.on { color: var(--text); background: linear-gradient(rgba(28, 21, 35, .92), rgba(28, 21, 35, .92)) padding-box, var(--split) border-box; border: 1px solid transparent; }
.st-body { display: flex; gap: .8rem; flex: 1; min-height: 0; }
.st-rail { flex: 0 0 450px; display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel-2); overflow: hidden; }
/* Collapsible chat rail — hide it and let the preview stage take the full width. */
.st-ws.st-rail-hidden .st-rail { display: none; }
.st-date { padding: .7rem 1rem .2rem; font-size: .72rem; color: var(--muted); text-align: center; }
.st-date-flag { color: #000000; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: .66rem; }
.st-thread { flex: 1; overflow-y: auto; padding: .7rem .95rem .9rem; display: flex; flex-direction: column; gap: .7rem; }
.st-msg { font-size: .88rem; line-height: 1.5; }
.st-msg.u { align-self: flex-end; max-width: 88%; border-radius: 14px 14px 4px 14px; padding: .55rem .85rem; background: var(--split); border: 1px solid transparent; }
.st-msg.a { align-self: stretch; color: var(--text); padding: 0 .1rem; }
.st-msg.a .st-acts { display: block; margin-top: .35rem; }
/* What was READ for a build — a linked page, a web lookup, or a link we could
   not reach. Its own block, above the result, because a newline inside the
   message text collapses (there is no pre-wrap here) and the sentence that
   matters most is the one saying a link was NOT read. Muted and ruled rather
   than coloured: the platform is monochrome, and a caveat that depends on hue
   says nothing in greyscale. */
/* `white-space: pre-line` because the note is SEVERAL notes joined with "\n" —
   a link that could not be read, a token change, a photograph budget. Without
   it they collapse into one run-on line, which is the exact failure this
   element was split out of `.st-msg` to fix: it was fixed one level up and left
   in place one level down. `pre-line` and not `pre-wrap`, so the newlines
   survive while incidental indentation does not. */
.st-note { font-size: .8rem; color: var(--muted); line-height: 1.45; margin: 0 0 .45rem; padding-left: .6rem; border-left: 2px solid var(--line); white-space: pre-line; }
/* WHY A BUILD FAILED, in the compiler's own words.
   Monospace and `pre-wrap`: this carries file:line references and real source
   lines, where a collapsed newline turns four separate errors into one
   unreadable sentence and a lost indent changes what the line says. Scrolls on
   its own rather than widening the thread — a tsc line is longer than the
   column. Muted and small: it sits under the plain-English sentence, for the
   person who wants the detail, never instead of it. */
.st-why { font-size: .72rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted); line-height: 1.5; margin: .45rem 0 0; padding: .5rem .6rem; border-left: 2px solid var(--line); background: var(--sunk, rgba(0,0,0,.03)); border-radius: 0 6px 6px 0; white-space: pre-wrap; overflow-x: auto; }
/* The answers to a question the builder asked before building (owner's pick,
   2026-08-08: the numbered treatment).

   ONE PER LINE rather than wrapped pills, and that is the layout decision the
   others lost on: these are short sentences the model writes, not chips we
   choose, so any row-based layout wraps unevenly on exactly the wording that
   turns up in practice. A column cannot degrade.

   Quiet by default — no fill, no border — because this appears inside a chat
   thread and three bordered boxes in a row would read as a form. The weight is
   in the hover instead, which is also where the affordance has to be: something
   clickable that looks like body text is something nobody clicks. */
.st-opts { display: flex; flex-direction: column; gap: .1rem; margin: .55rem 0 .2rem; align-items: flex-start; }
.st-opt { display: flex; align-items: baseline; gap: .6rem; width: 100%; font: inherit; font-size: .84rem;
  line-height: 1.35; text-align: left; cursor: pointer; padding: .34rem .4rem; border-radius: 7px;
  border: 1px solid transparent; background: none; color: var(--text); }
.st-opt:hover { background: var(--panel); border-color: var(--line); }
.st-opt:active { transform: translateY(1px); }
.st-opt:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
/* The key that really works. `flex: none` and a min-width so 1, 2 and esc all
   occupy the same column — ragged hints read as decoration, and these are not
   decoration. */
.st-opt kbd { font: 600 .68rem/1 ui-monospace, Menlo, Consolas, monospace; color: var(--muted);
  border: 1px solid var(--line-2); border-radius: 4px; padding: .2rem .34rem;
  width: 2.6em; text-align: center; flex: none; }
.st-opt:hover kbd { color: var(--text); border-color: var(--line-2); }
.st-opt span { min-width: 0; }
/* The way out, deliberately QUIETER than the answers rather than hidden — one
   that reads as prominently invites a reflex click past a question worth
   answering, and one that cannot be found is the interrogation this feature
   exists to avoid. */
.st-opt-skip { color: var(--muted); }
.st-opt-skip:hover { color: var(--text); }
.st-act { font: inherit; font-size: .8rem; background: none; border: none; color: var(--muted); cursor: pointer; padding: 0; }
.st-act:hover { color: var(--text); }
.st-msg.st-busy { color: var(--muted); }
.st-msg.st-busy::after { content: '…'; animation: sbpulse .9s ease-in-out infinite alternate; }
.st-msg.st-busy:has(.st-livelog) { padding: 0; background: none; border: none; }
.st-msg.st-busy:has(.st-livelog)::after { content: none; }
/* Live build activity log (Claude-Code-style running steps). Finished steps stay
   dim with a ✓; the active line pulses with a rotating dot. */
.st-livelog { display: flex; flex-direction: column; gap: .28rem; }
.st-livelog.st-livelog-stage { align-items: flex-start; gap: .4rem; max-width: 340px; margin: 0 auto; }
.st-ll { display: flex; align-items: center; gap: .5rem; font-size: .86rem; line-height: 1.3; }
.st-ll.done { color: var(--muted); }
.st-ll.done::before { content: '✓'; color: var(--acc, #1e1e22); font-weight: 700; font-size: .82rem; }
.st-ll.active { color: var(--text); }
.st-ll-dot { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(120deg, #1e1e22, #000000); flex: none; animation: sbpulse .9s ease-in-out infinite alternate; box-shadow: 0 0 8px rgba(0,0,0,.6); }
/* React builder — Claude-Code-style "what it did" step rows (live + finished). */
.st-busy-react { background: none !important; border: 0 !important; padding: 0 !important; }
.st-steps { display: flex; flex-direction: column; gap: 4px; margin-top: .5rem; }
.st-step { border: 1px solid var(--line, #211d30); border-radius: 10px; background: rgba(255,255,255,.02); overflow: hidden; }
.st-step-h { display: flex; align-items: center; gap: 8px; padding: 8px 11px; font-size: .82rem; }
.st-step:not(.st-step-nobody) .st-step-h { cursor: pointer; user-select: none; }
.st-step-chev { color: var(--muted); font-size: .62rem; width: 9px; flex: none; transition: transform .18s; }
.st-step.open .st-step-chev { transform: rotate(90deg); }
.st-step-run { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #000000; animation: sbpulse .9s ease-in-out infinite alternate; box-shadow: 0 0 7px rgba(0,0,0,.6); }
.st-step-tick { color: #57d9a3; font-size: .82rem; flex: none; }
.st-step-wait { width: 8px; height: 8px; border-radius: 50%; flex: none; border: 1.5px solid var(--line-2); }
/* A STEP THAT FAILED. Carries a MARK as well as a colour — the tick and the
   cross differ in shape, so the outcome survives greyscale, print, and anyone
   who cannot tell the two hues apart. Same discipline the component kit uses
   for status throughout. */
.st-step-fail { color: #d1453b; font-size: .82rem; flex: none; font-weight: 600; }
.st-step:has(.st-step-fail) .st-step-lbl { color: var(--text, #ece9f5); }
.st-step-lbl { color: var(--text, #ece9f5); font-weight: 500; }
.st-step-meta { margin-left: auto; color: var(--muted); font-size: .72rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46%; }
.st-step-b { display: none; border-top: 1px solid var(--line, #211d30); background: rgba(0,0,0,.04); }
.st-step.open .st-step-b { display: block; }
.st-lc { margin: 0; padding: 10px 12px; max-height: 260px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; line-height: 1.6; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.st-lc .kw { color: #1e1e22; } .st-lc .str { color: #000000; }
.st-lc-cur { display: inline-block; width: 6px; height: 12px; background: #000000; vertical-align: -2px; animation: sbblink .9s steps(1) infinite; }
/* BEFORE ANYTHING IS KNOWN TO BE HAPPENING. The build steps used to paint the
   moment a message was sent, so typing "hey" claimed "Writing the code" for a
   build that never ran. This is what shows while the router decides; the steps
   appear only once it really is building. */
.st-think { display: inline-flex; align-items: center; gap: .55rem; font-size: .88rem; font-weight: 600; color: var(--muted); padding: .1rem 0; }
.st-think i { width: 9px; height: 9px; border-radius: 50%; background: var(--text); flex: none; animation: stbreathe 1.6s ease-in-out infinite; }
@keyframes stbreathe { 0%, 100% { transform: scale(.7); opacity: .35; } 50% { transform: scale(1); opacity: 1; } }
/* Motion is the whole signal here, so with it off the dot has to stay legible
   rather than freezing mid-fade at 35% opacity. */
@media (prefers-reduced-motion: reduce) {
  .st-think i { animation: none; opacity: 1; transform: none; }
}
@keyframes sbblink { 50% { opacity: 0; } }
.st-fchips { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 11px; }
.st-fchip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line, #211d30); border-radius: 6px; padding: 3px 7px; }
/* Multi-agent fan-out chips (one per parallel agent, with its model + running/done state). */
.st-agents { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 11px 2px; }
.st-agent { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line, #211d30); border-radius: 999px; padding: 3px 9px; }
.st-agent.done { color: var(--text); border-color: rgba(120,220,150,.35); }
.st-agent em { font-style: normal; opacity: .6; font-size: .62rem; }
.st-agent-run { width: 7px; height: 7px; border-radius: 50%; border: 2px solid rgba(0,0,0,.16); border-top-color: var(--text); animation: spin .7s linear infinite; display: inline-block; }
.st-ithumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 11px; }
.st-ithumb { position: relative; aspect-ratio: 4/3; border-radius: 7px; overflow: hidden; border: 1px solid var(--line, #211d30); background: var(--panel-2); }
.st-ithumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-ithumb em { position: absolute; left: 5px; right: 5px; bottom: 4px; font-size: .58rem; font-style: normal; line-height: 1.25; color: #f0ecf8; text-shadow: 0 1px 3px #000; max-height: 2.5em; overflow: hidden; }
/* Data / Users panel (React sites with a backend) */
/* min-width:0 on BOTH, or a wide table takes the whole panel with it. A schema
   with seven columns (an orders table) made .st-data-body size to its content
   instead of to the stage — measured 1610px in a 1468px slot — and .st-stage
   centres what it cannot fit and clips both edges, so the TABLE RAIL was
   clipped out of existence and there was no way back to another table.
   .st-data-main already has min-width:0 and overflow:auto: once these two stop
   growing, the grid scrolls, which is what was always intended. */
.st-datawrap { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.st-data-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line, #211d30); }
.st-data-title { font-weight: 600; font-size: .95rem; }
.st-data-count { color: var(--muted, #8b849e); font-size: .8rem; font-family: ui-monospace, Menlo, monospace; }
.st-data-head .st-icon { margin-left: auto; }
.st-data-body { flex: 1; min-width: 0; display: flex; min-height: 0; }
/* 240px is MEASURED, not chosen: the widest realistic pairing a schema produces
   is a 13-character table name beside SUBMISSIONS, which wants 220px of tab.
   At the old 190 even `bookings SUBMISSIONS` was one pixel over and spilled
   silently — invisible until the name was given an ellipsis to spill INTO. */
.st-data-side { width: 240px; flex: none; border-right: 1px solid var(--line, #211d30); padding: 10px; display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.st-data-tab { display: flex; align-items: center; gap: 8px; text-align: left; padding: 9px 11px; border-radius: 9px; border: 1px solid transparent; background: none; color: var(--text, #ece9f5); font-size: .85rem; cursor: pointer; }
.st-data-tab:hover { background: rgba(255,255,255,.04); }
.st-data-tab.on { background: rgba(255,255,255,.05); border-color: var(--line, #211d30); }
/* The table name is the part that gives, because the access label is a fixed
   vocabulary of five words and the name is whatever the schema designer chose.
   Without min-width:0 a flex item refuses to shrink below its content, so a
   long name pushed its own label out past the rail — measured at 184px of
   content in a 169px tab on `announcements`. */
.st-data-tn { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-data-acc { flex: none; margin-left: auto; font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.st-data-main { flex: 1; min-width: 0; overflow: auto; padding: 14px 16px; }
.st-data-tablewrap { overflow-x: auto; border: 1px solid var(--line, #211d30); border-radius: 10px; }
.st-data-grid { border-collapse: collapse; width: 100%; font-size: .8rem; }
.st-data-grid th, .st-data-grid td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line, #211d30); white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.st-data-grid th { color: var(--muted, #8b849e); font-weight: 600; font-family: ui-monospace, Menlo, monospace; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; background: rgba(255,255,255,.02); position: sticky; top: 0; }
.st-data-grid td { color: var(--text); font-variant-numeric: tabular-nums; }
.st-data-grid tr:last-child td { border-bottom: 0; }
/* Owner content editor — add/edit row */
.st-data-add { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--on-accent); background: linear-gradient(90deg, #1e1e22, #000000); border: 0; border-radius: 8px; padding: 7px 13px; cursor: pointer; }
.st-data-head .st-data-add + .st-icon { margin-left: 8px; }
.st-data-form { border: 1px solid var(--line, #211d30); border-radius: 12px; padding: 14px; margin-bottom: 14px; background: rgba(255,255,255,.02); }
.st-data-form-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.st-data-field { display: flex; flex-direction: column; gap: 4px; font-size: .72rem; color: var(--muted, #8b849e); }
.st-data-field span { font-family: ui-monospace, Menlo, monospace; letter-spacing: .02em; }
.st-data-in { background: var(--bg); border: 1px solid var(--line, #211d30); border-radius: 8px; padding: 8px 10px; color: var(--text, #ece9f5); font-size: .85rem; }
.st-data-in:focus { outline: none; border-color: #1e1e22; }
.st-data-form-actions { display: flex; gap: 8px; margin-top: 12px; }
/* Email-me-on-submit toggle, in the Data panel header. */
.st-data-notify { font-size: .72rem; color: var(--muted, #8b849e); background: none; border: 1px solid var(--line, #211d30); border-radius: 7px; padding: 4px 9px; cursor: pointer; margin-left: auto; }
.st-data-notify[data-on="1"] { color: var(--text, #ece9f5); }
.st-data-notify:disabled { opacity: .55; cursor: default; }
/* Picture field: a thumbnail of what is set, and a button to replace it. The
   value stored is still just a URL string — the column is plain text either
   way — so this is an editor convenience, not a new kind of field. */
.st-data-pic { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.st-data-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line, #211d30); background: var(--bg); }
.st-data-up { font-size: .74rem; color: var(--muted, #8b849e); background: none; border: 1px solid var(--line, #211d30); border-radius: 7px; padding: 5px 10px; cursor: pointer; }
.st-data-up:hover:not(:disabled) { color: var(--text, #ece9f5); border-color: #33304a; }
.st-data-up:disabled { opacity: .55; cursor: default; }
.st-data-save { font-size: .82rem; font-weight: 600; color: var(--on-accent); background: linear-gradient(90deg, #1e1e22, #000000); border: 0; border-radius: 8px; padding: 8px 15px; cursor: pointer; }
.st-data-cancel { font-size: .82rem; color: var(--muted, #8b849e); background: none; border: 1px solid var(--line, #211d30); border-radius: 8px; padding: 8px 14px; cursor: pointer; }
.st-data-rowact { white-space: nowrap; text-align: right; }
.st-data-editbtn { font-size: .72rem; color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid var(--line, #211d30); border-radius: 6px; padding: 4px 9px; cursor: pointer; margin-right: 5px; }
.st-data-rmrow { font-size: .95rem; line-height: 1; color: #8b849e; background: none; border: 0; cursor: pointer; padding: 3px 6px; border-radius: 6px; }
.st-data-rmrow:hover { color: #ff6b6b; background: rgba(255,107,107,.1); }
/* React build — stage compile placeholder */
.st-building { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--muted, #8b849e); background: var(--bg); }
.st-bring { width: 32px; height: 32px; border-radius: 50%; border: 3px solid #211d30; border-top-color: #000000; animation: sbspin 1s linear infinite; }
.st-building-t { font-size: .9rem; }
@keyframes sbspin { to { transform: rotate(360deg); } }
/* Composer — "Ask Go Farther…" card with a Build selector + round send. */
.st-comp { margin: .4rem .7rem .7rem; border: 1px solid var(--line-2); border-radius: 16px; background: rgba(255, 255, 255, .03); padding: .6rem .7rem .55rem; }
.st-comp-in { width: 100%; font: inherit; font-size: .9rem; color: var(--text); background: none; border: none; resize: none; }
.st-comp-in:focus { outline: none; }
.st-comp-row { display: flex; align-items: center; gap: .55rem; margin-top: .45rem; }
.st-plus { font: inherit; font-size: 1.05rem; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.st-buildsel-wrap { position: relative; margin-right: auto; display: inline-flex; }
.st-buildsel { font-size: .8rem; font-weight: 650; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: .3rem .7rem; background: none; cursor: pointer; }
.st-buildsel:hover { color: var(--text); border-color: var(--text); }
.st-buildsel b { color: var(--text); font-weight: 700; }
.st-comp-price { background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; font-size: .82rem; }
.st-sendc {
  font: inherit; font-size: 1rem; font-weight: 800; width: 34px; height: 34px; border-radius: 50%; color: var(--on-accent); cursor: pointer; display: grid; place-items: center;
  background: var(--split);
  border: 1.5px solid transparent; box-shadow: 0 0 16px -6px rgba(0,0,0, .45);
}
.st-sendc:hover { box-shadow: 0 0 24px -6px rgba(0,0,0, .65); }
/* Stop button — replaces Send while a build/revise runs. */
.st-stopc { font-size: .78rem; color: #fff; background: #e5484d; border-color: transparent; box-shadow: 0 0 16px -6px rgba(229, 72, 77, .6); animation: stPulse 1.4s ease-in-out infinite; }
.st-stopc:hover { box-shadow: 0 0 24px -5px rgba(255, 91, 122, .8); }
@keyframes stPulse { 0%,100% { opacity: 1; } 50% { opacity: .62; } }
/* Preview — the dominant rounded card. */
.st-stage { flex: 1; min-width: 0; display: flex; align-items: stretch; justify-content: center; overflow: hidden; position: relative; }
/* ── History rail ── */
.st-hist { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.st-hist-tabs { display: flex; gap: 4px; padding: .7rem .7rem 0; }
.st-htab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font: inherit; font-size: .82rem; font-weight: 600; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .5rem; cursor: pointer; }
.st-htab.on { background: var(--panel-2); color: var(--text); border-color: var(--line-2); }
.st-hist-list { flex: 1; overflow-y: auto; padding: .7rem; display: flex; flex-direction: column; gap: .5rem; }
.st-hitem { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); padding: .6rem .7rem; }
.st-hi-ic { display: flex; color: var(--muted); margin-top: 1px; }
.st-hi-tx { min-width: 0; }
.st-hi-tx b { display: block; font-size: .84rem; font-weight: 500; line-height: 1.35; }
.st-hi-tx span { font-size: .7rem; color: var(--muted); }
.st-hi-empty { color: var(--muted); font-size: .85rem; padding: 1.4rem .4rem; text-align: center; }
/* ── "Try to fix" error card ── */
.st-errcard { position: absolute; right: 22px; bottom: 22px; width: 340px; max-width: calc(100% - 44px); background: rgba(255,255,255,.96); backdrop-filter: blur(14px); border: 1px solid var(--line-2); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); z-index: 5; }
.st-err-h { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .95rem; }
.st-err-ic { display: flex; }
.st-err-b { color: var(--muted); font-size: .84rem; margin: .4rem 0 .9rem; line-height: 1.45; }
.st-err-row { display: flex; gap: .6rem; justify-content: flex-end; }
.st-err-logs { font: inherit; font-size: .82rem; color: var(--muted); background: var(--panel); border: 1px solid var(--line-2); border-radius: 9px; padding: .45rem .8rem; cursor: pointer; }
.st-err-fix { font: inherit; font-size: .82rem; font-weight: 700; color: var(--on-accent); background: var(--split); border: none; border-radius: 9px; padding: .45rem .9rem; cursor: pointer; }
/* Runtime-error "Fix with AI" chip — bottom-left of the preview (Lovable-style). */
.st-fixbar { position: absolute; left: 22px; bottom: 22px; display: flex; align-items: center; gap: .55rem; background: rgba(255,255,255,.96); backdrop-filter: blur(14px); border: 1px solid rgba(255, 120, 120, .38); border-radius: 12px; padding: .5rem .5rem .5rem .8rem; box-shadow: 0 20px 48px rgba(0, 0, 0, .5); z-index: 5; max-width: calc(100% - 44px); }
.st-fixbar[hidden] { display: none; }
.st-fixbar-ic { display: flex; color: #c62828; flex: none; }
.st-fixbar-n { font-size: .84rem; font-weight: 600; color: #c62828; white-space: nowrap; }
.st-fixbar-btn { font: inherit; font-size: .82rem; font-weight: 700; color: var(--on-accent); background: var(--split); border: none; border-radius: 9px; padding: .42rem .85rem; cursor: pointer; flex: none; }
.st-fixbar-btn:hover { filter: brightness(1.06); }
.st-fixbar-x { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; }
.st-fixbar-x:hover { color: var(--text); }
/* Builder image attach (composer) */
.st-attach { display: flex; flex-wrap: wrap; gap: .5rem; }
.st-attach:not(:empty) { margin: .6rem 0 .2rem; }
.st-att { position: relative; width: 56px; height: 56px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line-2); flex: none; }
.st-att img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-att-x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: none; background: rgba(0, 0, 0, .68); color: #fff; font-size: .8rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.st-att-x:hover { background: #ff5b7a; }
.st-attbtn { display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: .8rem; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 9px; padding: .35rem .7rem; cursor: pointer; margin-right: auto; }
.st-attbtn:hover { color: var(--text, #e8e6ef); border-color: var(--amber, #000000); }
.st-attbtn svg { width: 15px; height: 15px; }
/* ── Attach source chooser + gallery picker ── */
.stac-opts { display: flex; flex-direction: column; gap: .6rem; }
.stac-opt { display: flex; align-items: center; gap: .8rem; text-align: left; font: inherit; color: var(--text, #e8e6ef); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 12px; padding: .85rem 1rem; cursor: pointer; transition: border-color .15s, transform .15s; }
.stac-opt:hover { border-color: var(--amber, #000000); transform: translateY(-1px); }
.stac-opt svg { color: var(--amber, #000000); flex: none; }
.stac-opt span { display: flex; flex-direction: column; gap: .1rem; }
.stac-opt b { font-size: .92rem; }
.stac-opt small { color: var(--muted); font-size: .78rem; }
.stg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .55rem; }
.stg-empty { grid-column: 1 / -1; color: var(--muted); font-size: .88rem; text-align: center; padding: 2.5rem 1rem; line-height: 1.5; }
.stg-cell { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--panel-2); }
.stg-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stg-cell.sel { border-color: var(--amber, #000000); }
.stg-check { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--split); color: var(--on-accent); font-size: .72rem; line-height: 1; display: none; place-items: center; }
.stg-cell.sel .stg-check { display: grid; }
.stg-foot { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.1rem; border-top: 1px solid var(--line); }
.stg-hint { color: var(--muted); font-size: .8rem; }
.stg-foot .st-attbtn { margin-right: 0; }
.stg-add { font: inherit; font-size: .82rem; font-weight: 600; color: var(--on-accent); background: var(--split); border: none; border-radius: 9px; padding: .4rem .9rem; cursor: pointer; }
.stg-add:disabled { opacity: .45; cursor: default; }
/* ── Publish panel ── */
.sp-intro { color: var(--muted); font-size: .88rem; line-height: 1.5; margin-bottom: 1rem; }
.sp-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.sp-k { font-size: .82rem; color: var(--muted); }
.sp-v { font-size: .86rem; }
.sp-vis { display: inline-flex; align-items: center; gap: .4rem; }
.sp-url { font-size: .86rem; color: var(--neon); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-url:hover { text-decoration: underline; }
.sp-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; }
.sk-add { display: flex; gap: .5rem; margin-bottom: .8rem; }
.sk-add .st-in { flex: 1; min-width: 0; }
.sk-add .st-publish { flex: none; }
.sk-item { display: flex; align-items: center; gap: .8rem; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); padding: .6rem .8rem; margin-bottom: .5rem; }
/* The name is the part that gives: it is whatever the owner typed, while the
   hint and the mode are bounded. Without min-width:0 the name refuses to shrink
   below its content and pushes its own row's siblings out — the same flex
   failure as the Data rail, and this row just gained two more of them. */
.sk-name { font-family: ui-monospace, monospace; font-size: .85rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The hint, never the value: a public Stripe prefix and the last four. */
.sk-hint { flex: none; font-family: ui-monospace, monospace; font-size: .74rem; color: var(--muted); letter-spacing: .02em; }
/* Filled for live, outlined for test — the difference has to survive greyscale
   and anyone who cannot see colour, so it is carried by FILL and by the word,
   never by hue. This is the one badge on the platform where being wrong means
   an owner thinks they are taking money and is not. */
.sk-mode { flex: none; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; border-radius: 999px; padding: 2px 7px; border: 1px solid var(--line-2); color: var(--muted); }
.sk-mode-live { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }
.sk-when { margin-left: auto; font-size: .74rem; color: var(--muted); flex: none; }
.sk-del { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; }
.sk-del:hover { color: #c62828; border-color: rgba(255, 120, 120, .4); }
/* Edge-function cards (Cloud → Edge functions). */
.fn-item { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: .7rem .85rem; margin-bottom: .6rem; }
.fn-top { display: flex; align-items: center; gap: .55rem; }
.fn-ic { display: inline-flex; color: var(--muted); flex: none; }
.fn-name { font-family: ui-monospace, monospace; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-trig { flex: none; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: .12rem .45rem; }
.fn-top .sk-del { margin-left: auto; }
.fn-top .st-badge-live, .fn-top .st-badge-soon { margin-left: 0; }
.fn-flow { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .6rem; }
.fn-step { font-size: .74rem; color: var(--text, #e8e6ef); background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: .18rem .5rem; }
.fn-arrow { color: var(--muted); font-size: .72rem; }
.fn-sch { display: inline-flex; align-items: center; gap: .25rem; flex: none; font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; color: var(--amber, #000000); border: 1px solid rgba(0,0,0, .35); border-radius: 999px; padding: .12rem .45rem; }
.fn-sch svg { width: 12px; height: 12px; }
/* The On/Paused switch on a scheduled job — a BUTTON wearing the badge's
   clothes, because the state and the control are the same thing here. Pushed
   to the row's right edge; the two states keep the badge pair's visual
   weight (filled = running, outline = paused) so the row reads at a glance
   in greyscale too. */
.fn-tgl { flex: none; margin-left: auto; cursor: pointer; font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--on-accent); background: var(--split); border: 1px solid transparent; border-radius: 999px; padding: .12rem .5rem; }
.fn-tgl.fn-off { font-weight: 700; color: var(--muted); background: none; border-color: var(--line-2); }
.fn-tgl:hover:not(:disabled) { filter: brightness(1.12); }
.fn-tgl.fn-off:hover:not(:disabled) { color: var(--text); border-color: var(--text); filter: none; }
.fn-tgl:disabled { opacity: .55; cursor: default; }
.fn-hook { display: flex; align-items: center; gap: .5rem; margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--line); }
.fn-hook-label { font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); flex: none; }
/* FULL-STRENGTH INK. `--dim` is not defined anywhere, so this fell through to a
   hardcoded #a49fb5 — a dark-theme lavender-grey, left behind by the 2026-07-23
   move to the light theme. On the white surface it reads as PLACEHOLDER text,
   and this is the webhook URL: the one string on the card an owner is here to
   copy. Same fix and same reasoning as `.sd-rf code` in the Domains panel.
   (`.si-count` is the other `--dim` reference and is fine — it falls back to
   `var(--muted)`, which is a real token in this theme.) */
.fn-hook-url { font-family: ui-monospace, monospace; font-size: .74rem; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: .22rem .45rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.fn-hook-copy { flex: none; font: inherit; font-size: .72rem; font-weight: 600; color: var(--text, #e8e6ef); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 7px; padding: .2rem .6rem; cursor: pointer; }
.fn-hook-copy:hover { border-color: var(--amber, #000000); color: #fff; }
/* Domains panel (Cloud → Domains) — the owner's own web address.
   Built from the same parts as .fn-item so the two panels read as one product;
   the only new shape is the RECORD, which is a thing to copy rather than read. */
.sd-item { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: .7rem .85rem; margin-bottom: .6rem; }
.sd-top { display: flex; align-items: center; gap: .55rem; }
.sd-top > svg { color: var(--muted); flex: none; }
.sd-host { font-family: ui-monospace, monospace; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-top .sk-del { margin-left: auto; }
.sd-visit { font-size: .72rem; font-weight: 600; color: var(--text); text-decoration: none; border: 1px solid var(--line-2); border-radius: 7px; padding: .2rem .55rem; flex: none; }
.sd-visit:hover { border-color: var(--ink, #000); }
/* NEEDS ATTENTION IS NOT "LIVE" AND NOT "SOON". It is the one state where the
   owner has to go and do something, and on a monochrome platform that cannot be
   carried by colour — so it is an outlined pill with its own words. */
.sd-bad { flex: none; font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text); border: 1px solid var(--ink, #000); border-radius: 999px; padding: .12rem .45rem; }
.sd-err { font-size: .78rem; color: var(--muted); margin-top: .5rem; }
/* The live DNS reading. A LEFT RULE rather than a colour, because the three
   states have to be distinguishable in greyscale — and because `unknown` is our
   own resolver failing rather than anything about their domain, so it gets no
   rule at all and reads as an aside. */
.sd-dns { font-size: .78rem; color: var(--text); margin-top: .5rem; line-height: 1.5; }
.sd-dns-warn { border-left: 2px solid var(--ink, #000); padding-left: .55rem; }
.sd-dns-ok { border-left: 2px solid var(--line-2); padding-left: .55rem; color: var(--muted); }
/* Who holds the DNS, and the way in. A ROW rather than a sentence, because the
   link is the point — the words only exist to say which button this is. */
.sd-prov { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; font-size: .78rem; color: var(--muted); }
.sd-prov .sd-visit { flex: none; }
/* One-click setup. THE ONLY FILLED BUTTON IN THE PANEL — everything else here
   is an outline — because where this exists it is the whole answer and the
   copyable records below become a fallback nobody should need to read. */
.sd-auto { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: .6rem; }
.sd-auto-go { flex: none; font-size: .8rem; font-weight: 700; color: var(--on-accent); background: var(--split); border-radius: 9px; padding: .42rem .8rem; text-decoration: none; }
.sd-auto-go:hover { opacity: .9; }
/* The reassurance carries real information — that they authenticate at their
   own provider and we never hold their credentials — so it is legible, not a
   footnote greyed to the edge of readability. */
.sd-auto-note { flex: 1; min-width: 12rem; font-size: .74rem; color: var(--muted); line-height: 1.45; }
/* Why there is no button. Quieter than the records it points at, because the
   records are the instruction here and this is only the explanation. */
.sd-auto-off { margin-top: .6rem; font-size: .74rem; color: var(--muted); line-height: 1.45; }
.sd-recs { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line); display: grid; gap: .55rem; }
.sd-rec { display: grid; gap: .35rem; }
.sd-rt { justify-self: start; font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: .1rem .45rem; }
/* Name and value each get their own row and their own button: those are the two
   fields people mistype, and one "copy all" produces a blob that has to be taken
   apart again in the form they are pasting into. */
.sd-rf { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.sd-rl { flex: none; width: 3.1rem; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* FULL-STRENGTH INK, not `--dim`. Copied from `.fn-hook-url`, these rendered in
   a dark-theme grey (#a49fb5) that on the white surface reads as PLACEHOLDER
   text — and these strings are the entire payload of the panel: the four values
   an owner has to retype into a form on another website. Caught by looking at
   the render; nothing in the markup says which colour a token resolves to. */
.sd-rf code { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: .74rem; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: .22rem .45rem; overflow-x: auto; white-space: nowrap; }
.sd-note { font-size: .74rem; color: var(--muted); line-height: 1.45; }

/* Files panel (Cloud → Files) */
.fl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .7rem; }
.fl-item { position: relative; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--panel); }
.fl-thumb { display: block; aspect-ratio: 1 / 1; background: var(--panel-2); }
.fl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-doc { width: 100%; height: 100%; display: grid; place-items: center; font-family: ui-monospace, monospace; font-size: .8rem; letter-spacing: .1em; color: var(--muted); }
.fl-meta { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; padding: .45rem .55rem; }
.fl-name { font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-size { font-size: .66rem; color: var(--muted); flex: none; }
.fl-del { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; background: rgba(0,0,0,.62); }
.fl-del:hover { background: #ff5b7a; color: #fff; }
/* Emails setup guide */
.em-steps { display: flex; flex-direction: column; gap: .7rem; }
.em-step { display: flex; gap: .8rem; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: .8rem .9rem; }
.em-n { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: var(--on-accent); background: var(--split); }
.em-step b { display: block; font-size: .9rem; margin-bottom: .2rem; }
/* The BODY's bolds stay inline. `.em-step b` was written when a step's only bold
   was its title, so emphasis inside the description became a block and broke
   every sentence containing one onto three lines. */
.em-step span b { display: inline; font-size: inherit; margin-bottom: 0; }
.em-step span { color: var(--muted); font-size: .82rem; line-height: 1.5; }
/* `.em-n` is a span inside `.em-step`, so `.em-step span` (0,1,1) beat `.em-n`
   (0,1,0) and painted the step number near-black at 56% on a near-black
   gradient — invisible, in every panel using this markup. Measured, not
   guessed: computed color was rgba(11,11,14,.56). */
.em-step .em-n { color: var(--on-accent); }
.em-step code { font-family: ui-monospace, monospace; font-size: .78rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 0 .3rem; }
/* Browser frame around the live preview — just a URL chip, no window dots. */
.st-frame { display: flex; flex-direction: column; width: 100%; height: 100%; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: var(--bg); box-shadow: 0 18px 44px -22px rgba(0, 0, 0, .8); }
.st-frame-bar { display: flex; align-items: center; padding: .5rem .7rem; border-bottom: 1px solid var(--line); background: var(--panel); flex: none; }
.st-frame-url { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .32rem .7rem; font-family: 'Inter', system-ui, sans-serif; font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.st-frame iframe { flex: 1; width: 100%; border: 0; background: #fff; }
.st-stage[data-dev="desktop"] .st-frame { width: 100%; }
.st-stage[data-dev="tablet"] .st-frame { width: 860px; max-width: 100%; }
.st-stage[data-dev="phone"] .st-frame { width: 412px; max-width: 100%; }
.st-empty { align-self: center; color: var(--muted); font-size: .95rem; padding: 2rem; text-align: center; }
/* ── Workspace view tabs (Preview / Code / More) ── */
.st-vtabs { display: flex; gap: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 3px; }
.st-svg { display: block; }
.st-vtab { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: .82rem; font-weight: 600; color: var(--muted); background: none; border: none; border-radius: 9px; padding: .4rem .8rem; cursor: pointer; white-space: nowrap; }
.st-vtab:hover { color: var(--text); }
.st-vtab.on { background: var(--split); border: 1px solid transparent; color: var(--text); }
/* ── Code view ── */
.st-code { display: flex; width: 100%; height: 100%; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: var(--bg); }
.st-code-tree { flex: 0 0 210px; border-right: 1px solid var(--line); overflow-y: auto; padding: .6rem .5rem; background: var(--panel); }
.st-code-h { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: .3rem .5rem .5rem; }
.st-file { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; font: inherit; font-size: .82rem; color: var(--muted); background: none; border: none; border-radius: 8px; padding: .45rem .55rem; cursor: pointer; }
.st-file:hover, .st-file.on { background: var(--panel-2); color: var(--text); }
.st-file-ic { display: flex; color: var(--muted); }
.st-file-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-code-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-code-bar { display: flex; align-items: center; justify-content: space-between; padding: .5rem .8rem; border-bottom: 1px solid var(--line); }
.st-code-fname { font-size: .8rem; color: var(--text); font-family: ui-monospace, monospace; }
.st-code-dl { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font: inherit; font-size: .78rem; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .32rem .6rem; cursor: pointer; }
.st-code-dl:hover { color: var(--text); }
.st-code-scroll { flex: 1; min-height: 0; overflow: auto; display: flex; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; line-height: 1.55; }
.st-code-gutter { padding: .8rem .4rem .8rem .8rem; color: rgba(0,0,0,.3); text-align: right; user-select: none; margin: 0; white-space: pre; }
.st-code-pre { padding: .8rem 1rem; margin: 0; color: var(--text); white-space: pre; }
/* ── More view (Analytics / Cloud / Security / SEO) ── */
.st-more { display: flex; width: 100%; height: 100%; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; background: var(--panel); }
.st-mnav-col { flex: 0 0 210px; border-right: 1px solid var(--line); padding: .8rem .6rem; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.st-mnav { display: flex; align-items: center; gap: .6rem; font: inherit; font-size: .86rem; color: var(--muted); background: none; border: none; border-radius: 9px; padding: .55rem .65rem; cursor: pointer; text-align: left; }
.st-mnav:hover { background: var(--panel-2); color: var(--text); }
.st-mnav.on { background: var(--panel-2); color: var(--text); font-weight: 600; }
.st-mnav-ic { display: flex; align-items: center; justify-content: center; width: 1.15rem; }
.st-more-body { flex: 1; min-width: 0; overflow-y: auto; padding: 1.4rem 1.6rem; }
.st-panel { max-width: 760px; }
.st-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.st-panel-head h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.st-panel-sub { font-size: .95rem; font-weight: 700; margin: 1.6rem 0 .8rem; }
.st-chip-muted { font-size: .76rem; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: .3rem .7rem; }
.st-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .8rem; }
.st-stat { border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); padding: .8rem .9rem; }
.st-stat-l { display: block; font-size: .74rem; color: var(--muted); }
.st-stat-v { display: block; font-size: 1.5rem; font-weight: 700; margin-top: .2rem; font-family: 'Space Grotesk', sans-serif; }
.st-chart { margin-top: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); height: 220px; display: grid; place-items: center; }
.st-chart-empty { color: var(--muted); font-size: .88rem; max-width: 320px; text-align: center; }
.an-bars { display: flex; align-items: flex-end; gap: .5rem; width: 100%; height: 100%; padding: 1.1rem 1rem .6rem; }
.an-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .4rem; }
.an-bar-fill { width: 100%; max-width: 46px; min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--split); }
.an-bar-l { font-size: .66rem; color: var(--muted); white-space: nowrap; }
.st-hi-restore { margin-left: auto; align-self: center; flex: none; font: inherit; font-size: .74rem; font-weight: 600; color: var(--text); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 8px; padding: .3rem .6rem; cursor: pointer; }
.st-hi-restore:hover { border-color: rgba(0, 0, 0, .5); }
.st-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem; }
.st-cloudcard { display: flex; gap: .8rem; align-items: flex-start; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); padding: 1rem; }
.st-cloudcard.live { border-color: rgba(0, 0, 0, .28); }
.st-cc-ic { display: flex; color: var(--muted); margin-top: 1px; }
.st-cc-tx { min-width: 0; }
.st-cc-tx b { display: flex; align-items: center; gap: .5rem; font-size: .95rem; }
.st-cc-tx span { display: block; color: var(--muted); font-size: .8rem; margin-top: .25rem; line-height: 1.4; }
.st-badge-live { font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--on-accent); background: var(--split); border-radius: 999px; padding: .12rem .45rem; }
.st-badge-soon { font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: .1rem .42rem; }
.st-sec-hero { display: flex; align-items: center; gap: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); padding: 1.1rem 1.2rem; }
.st-sec-hero .st-cc-tx { flex: 1; }
.st-sec-ic { display: flex; color: var(--muted); }
.st-sec-empty { border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); padding: 2.4rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; margin-top: .3rem; }
.st-sec-ok { display: flex; color: var(--muted); opacity: .5; margin-bottom: .2rem; }
.st-sec-empty b { font-size: 1rem; }
.st-sec-empty span { color: var(--muted); font-size: .85rem; }
.st-cloudcard.st-clickable { cursor: pointer; }
.st-cloudcard.st-clickable:hover { border-color: rgba(0, 0, 0, .45); background: var(--panel); }
.sp-unpub { color: #c62828; border-color: rgba(255, 120, 120, .35); }
.sp-unpub:hover { background: rgba(255, 80, 80, .08); }
.st-sec-count { font-size: .82rem; color: var(--muted); margin-bottom: .8rem; }
.st-sec-issues { display: flex; flex-direction: column; gap: .7rem; }
.st-issue { border: 1px solid var(--line); border-left-width: 3px; border-radius: 11px; background: var(--panel-2); padding: .8rem .95rem; }
.st-issue-top { display: flex; align-items: center; gap: .6rem; }
.st-issue-top b { font-size: .92rem; }
.st-issue p { color: var(--muted); font-size: .84rem; line-height: 1.45; margin-top: .35rem; }
.st-issue-sev { font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: .15rem .45rem; border-radius: 999px; color: var(--on-accent); }
.st-issue-pg { margin-left: auto; font-size: .72rem; color: var(--muted); }
.st-sev-critical { border-left-color: #ff5f6d; } .st-sev-critical .st-issue-sev { background: #ff5f6d; }
.st-sev-high { border-left-color: #ff9558; } .st-sev-high .st-issue-sev { background: #ff9558; }
.st-sev-medium { border-left-color: #000000; } .st-sev-medium .st-issue-sev { background: #000000; }
.st-sev-low { border-left-color: var(--line-2); } .st-sev-low .st-issue-sev { background: var(--muted); color: var(--bg); }
.st-gen2 { font: inherit; font-size: .82rem; font-weight: 600; color: var(--text); background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; padding: .5rem .9rem; cursor: pointer; }
.st-gen2:disabled { opacity: .5; cursor: default; }
.st-field { margin-bottom: 1.1rem; }
.st-field label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .4rem; }
.st-inp { border: 1px solid var(--line-2); border-radius: 11px; background: var(--panel-2); padding: .7rem .85rem; font-size: .9rem; color: var(--text); }
.st-inp-area { min-height: 4rem; color: var(--muted); }
.st-social { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.st-social-ph { width: 180px; height: 96px; border: 1px dashed var(--line-2); border-radius: 10px; display: grid; place-items: center; color: var(--muted); font-size: .76rem; background: var(--panel-2); }
.st-social-btns { display: flex; flex-direction: column; gap: .5rem; }
/* Media Agent DM inbox */
.ma-dm { margin-top: 1.6rem; border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel-2); overflow: hidden; }
.ma-dm-head { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line-2); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ma-dm-refresh { background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; }
.ma-dm-refresh:hover { color: var(--text); }
.ma-dm-body { display: grid; grid-template-columns: 240px 1fr; min-height: 300px; }
.ma-dm-list { border-right: 1px solid var(--line-2); overflow-y: auto; max-height: 46vh; }
.ma-dm-empty { color: var(--muted); font-size: .86rem; padding: 1.1rem; line-height: 1.5; }
.ma-dm-conv { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--line-2); padding: .7rem .9rem; cursor: pointer; color: var(--text); }
.ma-dm-conv:hover { background: rgba(255, 255, 255, .04); }
.ma-dm-conv.on { background: rgba(0,0,0, .1); }
.ma-dm-av { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: var(--on-accent); background: linear-gradient(135deg, #1e1e22, #000000); }
.ma-dm-meta { min-width: 0; display: flex; flex-direction: column; }
.ma-dm-user { font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-dm-prev { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-dm-thread { display: flex; flex-direction: column; min-width: 0; }
.ma-dm-tophead { padding: .7rem 1rem; border-bottom: 1px solid var(--line-2); font-size: .85rem; color: var(--muted); }
.ma-dm-tophead b { color: var(--text); }
.ma-dm-msgs { flex: 1; overflow-y: auto; max-height: 40vh; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.ma-dm-bub { max-width: 78%; padding: .5rem .8rem; border-radius: 13px; font-size: .88rem; line-height: 1.45; word-wrap: break-word; }
.ma-dm-bub.them { align-self: flex-start; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); }
.ma-dm-bub.mine { align-self: flex-end; background: linear-gradient(135deg, rgba(0,0,0, .25), rgba(0,0,0, .25)); border: 1px solid var(--line-2); }
.ma-dm-bub.pending { opacity: .6; }
.ma-dm-bub.failed { border-color: rgba(255, 120, 120, .6); }
.ma-dm-reply { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid var(--line-2); }
.ma-dm-note { padding: 0 1rem .6rem; font-size: .78rem; color: var(--muted); min-height: 1rem; }
@media (max-width: 640px) {
  .view-media-agent.active { padding: 1.5rem 1rem 2.5rem; }
  .ma-conn { flex-wrap: wrap; }
  .ma-dm-body { grid-template-columns: 1fr; }
  .ma-dm-list { border-right: none; border-bottom: 1px solid var(--line-2); max-height: 30vh; }
}

/* ── Avatar creator (preview in the middle, Builder panel on the right) ── */
.ac-page { width: 100%; max-width: 1120px; margin: 0 auto; }
.ac-back { background: none; border: 1px solid var(--line-2); color: var(--muted); font: inherit; font-size: .85rem; padding: .42rem .8rem; border-radius: 9px; cursor: pointer; margin-bottom: 1.3rem; transition: color .12s ease; }
.ac-back:hover { color: var(--text); }
.ac-main { display: flex; gap: 2rem; align-items: flex-start; }
.ac-stage { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.ac-preview {
  width: 100%; max-width: 420px; aspect-ratio: 3 / 4; border-radius: 18px; position: relative;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .04), transparent 60%), var(--panel-2);
  border: 1px solid var(--line-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; text-align: center; padding: 1.5rem;
}
.ac-ph-ico { font-size: 2rem; opacity: .5; }
.ac-ph-txt { color: var(--muted); font-size: .9rem; line-height: 1.5; max-width: 260px; }
.ac-tag { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 600; background: var(--panel); border: 1px solid var(--line-2); border-radius: 7px; padding: .2rem .55rem; color: var(--text); }
.ac-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--split); }
/* Empty state — "ghost silhouette" over a faint grid. */
.ac-preview.ac-empty {
  background:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 34px 100%,
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .04), transparent 60%), var(--panel-2);
}
.ac-ghost { position: relative; width: 118px; height: 118px; display: grid; place-items: center; margin-bottom: .3rem; }
.ac-ghost-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .22); animation: acghost 16s linear infinite; }
@keyframes acghost { to { transform: rotate(360deg); } }
.ac-ghost-ico { width: 52px; height: 52px; color: rgba(255, 255, 255, .48); }
.ac-ph-h { font-size: 1.06rem; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.ac-ph-h .ac-accent { background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Generated avatar shown in-place (Generate renders here, not in the chat). */
.ac-preview.ac-loading { padding: 1.5rem; }
.ac-preview .ac-result { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.ac-spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: #0b0b0e; animation: acspin .8s linear infinite; }
@keyframes acspin { to { transform: rotate(360deg); } }
.ac-actions { display: flex; gap: .7rem; align-items: center; width: 100%; max-width: 420px; }
.ac-shuffle { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text); font-size: 1.2rem; cursor: pointer; transition: border-color .12s ease; }
.ac-shuffle:hover { border-color: rgba(0, 0, 0, .5); }
.ac-gen { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem; border-radius: 12px; background: var(--split); color: var(--on-accent); border: none; font: inherit; font-weight: 700; font-size: .98rem; cursor: pointer; transition: transform .12s ease; }
.ac-gen:hover { transform: translateY(-1px); }
.ac-gen:disabled { opacity: .7; cursor: default; transform: none; }
.ac-gen-cost { font-weight: 800; font-size: .82rem; background: rgba(0, 0, 0, .16); border-radius: 999px; padding: .12rem .5rem; }
.ac-model-note { width: 100%; max-width: 420px; text-align: center; color: var(--muted); font-size: .76rem; margin-top: -.4rem; }
/* Builder panel */
.ac-builder { width: 380px; flex-shrink: 0; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 16px; padding: .9rem 1rem 1.1rem; max-height: calc(100vh - 150px); overflow-y: auto; }
.ab-top { display: flex; align-items: center; justify-content: space-between; padding: .2rem .2rem .7rem; }
.ab-top-t { font-size: 1rem; font-weight: 700; }
.ab-reset { background: none; border: none; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.ab-reset:hover { color: var(--text); }
.ab-sec { border-top: 1px solid var(--line); }
.ab-sec-h { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: none; border: none; color: var(--text); font: inherit; padding: .8rem .2rem; cursor: pointer; text-align: left; }
.ab-sec-t { display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 600; }
.ab-sec-ico { opacity: .8; }
.ab-sec-cnt { color: var(--muted); font-weight: 500; }
.ab-chev { color: var(--muted); font-size: 1rem; transition: transform .15s ease; }
.ab-sec.open .ab-chev { transform: rotate(180deg); }
.ab-sec:not(.open) .ab-sec-body { display: none; }
.ab-sec-body { padding: .1rem .1rem .9rem; }
/* card options (gender / type / hair) */
.ab-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ab-card { position: relative; aspect-ratio: 3 / 2; background: var(--panel); border: 1px solid var(--line-2); border-radius: 11px; cursor: pointer; padding: .5rem .6rem; text-align: left; color: var(--text); transition: border-color .12s ease; }
.ab-card:hover { border-color: rgba(0,0,0,.3); }
.ab-card.on { border-color: transparent; background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--split) border-box; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .5) inset; }
.ab-card-l { font-size: .78rem; font-weight: 600; }
.ab-card-i { position: absolute; right: .5rem; bottom: .4rem; font-size: 1.05rem; opacity: .8; }
/* image options (ethnicity) */
.ab-imgs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.ab-img { flex: 0 0 calc((100% - 1rem) / 3); position: relative; aspect-ratio: 3 / 4; border-radius: 11px; overflow: hidden; border: 1px solid var(--line-2); background: var(--panel-2); cursor: pointer; padding: 0; transition: border-color .12s ease; }
.ab-img:hover { border-color: rgba(0,0,0,.3); }
.ab-img.on { border-color: transparent; box-shadow: 0 0 0 2px #0b0b0e inset; }
.ab-img.on::after { content: '✓'; position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; border-radius: 50%; background: var(--split); color: var(--on-accent); font-size: .72rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.ab-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-img-ph { position: absolute; inset: 0; }
.ab-img-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.ab-ph0 { background: linear-gradient(160deg, rgba(0,0,0,.14), rgba(0,0,0,.05)); }
.ab-ph1 { background: linear-gradient(160deg, rgba(0,0,0,.14), rgba(0,0,0,.05)); }
.ab-ph2 { background: linear-gradient(160deg, rgba(0,0,0,.05), rgba(0,0,0,.16)); }
.ab-img-l { position: absolute; left: 6px; bottom: 5px; font-size: .72rem; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
/* swatch options (skin) */
.ab-swatches { display: grid; grid-template-columns: repeat(5, 34px); gap: .5rem; justify-content: start; }
.ab-swatch { width: 34px; height: 34px; border-radius: 9px; border: 2px solid var(--line-2); cursor: pointer; padding: 0; transition: transform .1s ease, border-color .1s ease; }
.ab-swatch:hover { transform: scale(1.06); }
.ab-swatch.on { border-color: #0b0b0e; box-shadow: 0 0 0 2px rgba(0, 0, 0, .3); }
/* ruler-style slider (age) */
.ab-ruler { position: relative; padding: 2.4rem .5rem 1.4rem; }
.ab-ruler-lbl { position: absolute; top: .3rem; right: .5rem; font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.ab-ruler-bubble { position: absolute; top: -.1rem; left: .5rem; min-width: 2.2rem; padding: .18rem .55rem; border-radius: 8px; background: var(--split); color: var(--on-accent); font-size: 1.05rem; font-weight: 800; text-align: center; letter-spacing: -.01em; }
.ab-ruler-track { position: relative; height: 30px; }
.ab-ruler-ticks { position: absolute; inset: 0; border-radius: 4px; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px calc(100% / 40)); background-position: left center; background-repeat: repeat-x; background-size: 100% 60%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4px, #000 calc(100% - 4px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 4px, #000 calc(100% - 4px), transparent 100%); }
.ab-ruler-fill { position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 999px; background: var(--split); pointer-events: none; }
.ab-ruler-thumb { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; border-radius: 999px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .55); pointer-events: none; }
.ab-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; outline: none; cursor: ew-resize; }
.ab-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 30px; background: transparent; cursor: ew-resize; }
.ab-range::-moz-range-thumb { width: 22px; height: 30px; background: transparent; border: none; cursor: ew-resize; }
.ab-range:focus-visible { outline: none; }
.ab-ruler:focus-within .ab-ruler-thumb { box-shadow: 0 0 14px rgba(0, 0, 0, .8); }
@media (max-width: 860px) {
  .ac-main { flex-direction: column; }
  .ac-builder { width: 100%; max-height: none; }
  .ac-stage { width: 100%; }
}

/* One-time welcome modal for fresh accounts (signup grant) */
.welcome-ov { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: up-fade .22s ease both; }
.wm-box {
  position: relative; overflow: hidden; width: min(92vw, 430px); text-align: center;
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(0,0,0, .13), transparent 55%),
    radial-gradient(120% 90% at 85% 100%, rgba(0,0,0, .08), transparent 60%),
    var(--panel);
  border: 1px solid rgba(0, 0, 0, .32); border-radius: 24px;
  padding: 2.1rem 1.9rem 1.9rem;
  box-shadow: 0 40px 110px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: up-pop .34s cubic-bezier(.2, .9, .3, 1.1) both;
}
.wm-star {
  font-size: 2.1rem; line-height: 1;
  background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 20px rgba(0,0,0, .45));
}
.wm-title { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 1.55rem; font-weight: 700; letter-spacing: -.01em; margin: .65rem 0 .15rem; }
.wm-grant {
  font-family: 'Space Grotesk', Inter, sans-serif; font-size: 1.05rem; font-weight: 700;
  background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wm-sub { color: var(--muted); font-size: .88rem; line-height: 1.55; margin: .75rem auto 1.35rem; max-width: 330px; }
.wm-cta {
  width: 100%; background: var(--split); color: var(--on-accent); border: none; border-radius: 13px;
  padding: .8rem; font-weight: 800; font-size: .95rem; cursor: pointer;
  box-shadow: 0 12px 32px rgba(0,0,0, .28); transition: transform .12s ease;
}
.wm-cta:hover { transform: translateY(-1px); }
.wm-x {
  position: absolute; top: .8rem; right: .8rem; z-index: 1;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: .85rem; cursor: pointer; padding: 0;
}
.wm-x:hover { color: var(--text); border-color: var(--line-2); }

.side-foot { margin-top: auto; padding: .75rem .5rem .3rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .6rem; }
.side-user { display: flex; align-items: center; gap: .6rem; padding: 0 .2rem; }
.side-avatar {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%;
  display: grid; place-items: center; color: var(--on-accent); font-weight: 700; font-size: .9rem;
  background: var(--split);
}
.side-user-meta { min-width: 0; }
.side-name { font-weight: 600; font-size: .9rem; line-height: 1.2; }
.side-email { font-size: .74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
/* Auth popup — a centered modal over the marketing landing (which stays
   visible, dimmed, behind the backdrop). Backdrop click / Esc / ✕ close it. */
.auth-gate {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; background: rgba(248, 248, 250, .84);
  backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.auth-gate .auth-card { position: relative; z-index: 1; animation: auth-pop .28s cubic-bezier(.2, .7, .3, 1.08); }
@keyframes auth-pop { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@media (prefers-reduced-motion: reduce) {
  .auth-gate .auth-card { animation: none; }
}
.auth-card {
  width: 100%; max-width: 380px; background: #ffffff; border: 1px solid var(--line);
  border-radius: 22px; padding: 2.1rem 1.9rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.13), 0 2px 6px rgba(0,0,0,.05);
}
.auth-brand { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.15rem; }
.auth-brand .logo-mark {
  width: 38px; height: 38px; object-fit: contain; background: none;
}
.auth-title { font-size: 1.5rem; font-weight: 800; margin: 1.4rem 0 .35rem; }
.auth-sub { color: var(--muted); font-size: .95rem; margin-bottom: 1.3rem; }
.auth-form { display: flex; flex-direction: column; gap: .7rem; }
#authCode { letter-spacing: .35em; text-align: center; font-size: 1.15rem; font-weight: 600; }
.auth-form input {
  background: #ffffff; border: 1px solid var(--line-2); color: var(--text);
  border-radius: 12px; padding: .85rem 1rem; font-size: 1rem; font-family: inherit; outline: none;
}
.auth-form input:focus { border-color: var(--neon); }
.auth-form input::placeholder { color: #5c5c66; }
.auth-error {
  color: #ff9b9b; font-size: .86rem; line-height: 1.4; background: rgba(255,80,80,.08);
  border: 1px solid rgba(255,80,80,.25); border-radius: 10px; padding: .55rem .7rem;
}
.auth-submit {
  margin-top: .3rem; background: var(--split); color: var(--on-accent); border: none;
  border-radius: 12px; padding: .9rem; font-size: 1rem; font-weight: 700; cursor: pointer; font-family: inherit;
}
.auth-submit:hover { background: var(--split-dim); }
.auth-submit:disabled { opacity: .6; cursor: default; }
.auth-links {
  margin-top: 1.2rem; display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; flex-wrap: wrap; font-size: .9rem; color: var(--muted);
}
.auth-switch { text-align: right; }
#authResend { align-self: center; margin-top: .2rem; }
.auth-link {
  background: none; border: none; color: var(--neon); font-weight: 600; cursor: pointer;
  font-family: inherit; font-size: .9rem; padding: 0 .2rem;
}
.auth-link:hover { text-decoration: underline; }

/* ── Motion & micro-interactions ───────────── */
/* Split-gradient buttons keep the full yellow→purple wash at rest; on hover
   the gradient zooms and slides so the colors flow toward purple. */
.review-allow, .auth-submit {
  transition: background-size .4s ease, background-position .4s ease, transform .16s ease, box-shadow .25s ease, filter .2s ease;
}
.review-allow:hover, .auth-submit:hover {
  background-image: var(--split); background-size: 145% 100%; background-position: 100% 50%;
  transform: translateY(-1px); filter: saturate(112%);
  box-shadow: 0 8px 26px rgba(168, 85, 247, .35);
}
.review-allow:active, .auth-submit:active, .btn-ghost:active,
.send:active, .mode-btn:active, .attach-btn:active, .opt-btn:active { transform: scale(.96); }

/* Send button: breathing glow at rest, gradient slide + arrow nudge on hover. */
.send {
  transition: transform .16s ease, box-shadow .25s ease, background .15s ease, border-color .15s ease;
}
.send:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.send svg { transition: transform .18s ease; }
.send:hover svg { transform: translateY(-2px); }
@keyframes send-breathe {
  0%, 100% { box-shadow: 0 6px 22px rgba(168, 85, 247, .22); }
  50% { box-shadow: 0 6px 28px rgba(168, 85, 247, .38), 0 2px 14px rgba(255, 214, 10, .16); }
}

/* Pills, chips and ghost buttons lift slightly. */
.btn-ghost, .attach-btn, .opt-btn, .mode-btn, .new-chat, .side-signout, .review-deny, .voice-test {
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .16s ease, box-shadow .2s ease;
}
.btn-ghost:hover, .attach-btn:hover, .opt-btn:hover, .new-chat:hover, .side-signout:hover { transform: translateY(-1px); }
.attach-btn.has { animation: pick-pop .3s cubic-bezier(.34, 1.56, .64, 1); }

/* Messages and director cards rise in. */
.msg, .q-card, .review-card { animation: rise-in .32s cubic-bezier(.21, .9, .35, 1) both; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* A–D options stagger in, glide on hover, pop when picked. */
.opt {
  transition: border-color .18s ease, background .18s ease, transform .16s ease;
  animation: rise-in .3s cubic-bezier(.21, .9, .35, 1) both;
}
.opts .opt:nth-child(1) { animation-delay: .03s; }
.opts .opt:nth-child(2) { animation-delay: .09s; }
.opts .opt:nth-child(3) { animation-delay: .15s; }
.opts .opt:nth-child(4) { animation-delay: .21s; }
.opt:hover { transform: translateX(4px); }
.opt.sel { animation: pick-pop .28s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pick-pop { 0% { transform: scale(.97); } 60% { transform: scale(1.015); } 100% { transform: scale(1); } }

/* Menus pop open; items glide. */
.model-menu.open { animation: menu-pop .18s ease; }
@keyframes menu-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.model-menu.drop-up.open { animation-name: menu-pop-up; }
@keyframes menu-pop-up { from { opacity: 0; transform: translateY(6px) scale(.97); } }
.model-item { transition: background .15s ease, transform .15s ease; }
.model-item:hover { transform: translateX(3px); }
.side-item { transition: background .18s ease, transform .16s ease; }
.side-item:hover { transform: translateX(2px); }

/* Chatbox glows softly while you're typing in it. */
.composer { transition: border-color .25s ease, box-shadow .25s ease; }
.composer:focus-within {
  border-color: rgba(255, 255, 255, .26);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .10),
    0 0 0 1px rgba(255, 214, 10, .15), 0 0 24px rgba(168, 85, 247, .07);
}

/* Brand mark shimmers slowly. */
@keyframes logo-sheen { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }

/* Auth card entrance + input focus glow. */
.auth-card { animation: card-in .45s cubic-bezier(.21, .9, .35, 1) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.auth-form input { transition: border-color .2s ease, box-shadow .2s ease; }
.auth-form input:focus { border-color: var(--text); box-shadow: 0 0 0 3px rgba(0, 0, 0, .09); }

/* Voice preview pulses while playing; lightbox fades in. */
.voice-test.playing { animation: play-pulse 1s ease-in-out infinite; }
@keyframes play-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.lightbox { animation: fade-in .22s ease; }
@keyframes fade-in { from { opacity: 0; } }

/* Accessibility: switch motion off for users who ask for it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Visible keyboard focus for every interactive control — including the divs
   that act as buttons (sidebar nav, menu options, chat/shot cards). */
:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
  border-radius: 6px;
}
[role="button"], .side-item, .side-logo { cursor: pointer; }

/* ── Chat history list ─────────────────────── */
.chat-list { margin-top: .4rem; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-item {
  display: flex; align-items: center; gap: .4rem;
  padding: .45rem .55rem; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; color: var(--muted); font-size: .9rem;
  transition: background .15s ease, color .15s ease;
}
.chat-item:hover { background: var(--panel); color: var(--text); }
/* Active chat matches the workspace nav's active pill (warm pink→amber glow). */
.chat-item.active {
  background: linear-gradient(100deg, rgba(0,0,0, .16), rgba(0,0,0, .05) 52%, rgba(255, 255, 255, 0) 88%);
  border-color: rgba(0,0,0, .22);
  color: var(--text);
  box-shadow: 0 8px 24px -14px rgba(0,0,0, .5);
}
.chat-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-del {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: .75rem; padding: .15rem .3rem; border-radius: 6px; opacity: 0;
  transition: opacity .15s ease, color .15s ease;
}
.chat-item:hover .chat-del { opacity: .8; }
.chat-del:hover { color: #e88; }

/* ── Sidebar chat search ───────────────────── */
.chat-search {
  margin: .45rem 0 .1rem; width: 100%;
  background: rgba(0, 0, 0, .25); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: .5rem .65rem; font-size: .88rem; font-family: inherit;
  outline: none; transition: border-color .2s ease;
}
.chat-search::placeholder { color: #5c5c66; }
.chat-search:focus { border-color: var(--line-2); }
.chat-empty { color: var(--muted); font-size: .85rem; padding: .6rem .55rem; }

/* ── Copy chip on text messages ────────────── */
.msg { position: relative; }
/* Floats just above the message's top-right corner so it never covers the
   text (the messages are bare now — no bubble to tuck into). */
.copy-btn {
  position: absolute; top: -26px; right: -4px;
  width: 26px; height: 26px; border-radius: 8px;
  background: #2a2a30; border: 1px solid var(--line-2); color: #cfc9d6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
  cursor: pointer; opacity: 0;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
  display: grid; place-items: center;
}
.copy-btn svg { width: 13px; height: 13px; }
.msg:hover .copy-btn { opacity: .85; }
.copy-btn:hover { opacity: 1; background: #33333a; color: #fff; }

/* ── Workspace nav (sidebar on most views, topbar dropdown in Studio) ── */
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.tile.nav-proj, .tile.nav-gal { background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text); font-size: 1rem; }
.tile.nav-studio { background: var(--split); color: var(--on-accent); font-size: 1rem; }
.nav-dd { position: relative; }
.nav-dd-btn {
  display: flex; align-items: center; gap: .5rem; background: var(--panel);
  border: 1px solid var(--line-2); color: var(--text); border-radius: 12px;
  padding: .45rem .85rem; font-family: inherit; font-size: .92rem; cursor: pointer;
}
.nav-dd-btn:hover { border-color: rgba(0,0,0,.3); }
.nav-dd-btn b { font-weight: 600; }
.nav-dd-icon { font-size: 1rem; color: var(--muted); }
.nav-dd-caret { color: var(--muted); font-size: .75rem; }
.nav-dd-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 236px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; padding: .4rem;
  display: none; z-index: 60; box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%);
}
.nav-dd-menu.open { display: block; animation: menu-pop .16s ease; }
.nav-dd-item {
  display: flex; align-items: center; gap: .7rem; width: 100%; background: none;
  border: 1px solid transparent;
  color: var(--text); font-family: inherit; font-size: .95rem; font-weight: 500; padding: .5rem .55rem;
  border-radius: 12px; cursor: pointer; text-align: left; transition: background .15s ease, color .15s ease;
}
.nav-dd-item:hover { background: var(--panel-2); }
.nav-dd-item:hover .nav-ico { color: var(--text); }
.nav-dd-item.active {
  background: linear-gradient(100deg, rgba(0,0,0, .16), rgba(0,0,0, .05) 52%, rgba(255, 255, 255, 0) 88%);
  border-color: rgba(0,0,0, .22);
  color: var(--text); font-weight: 700;
  box-shadow: 0 8px 24px -14px rgba(0,0,0, .5);
}
.nav-dd-item.active .nav-ico { color: var(--text); }
.nav-dd-sep { height: 1px; background: var(--line); margin: .4rem .25rem; }
.nav-dd-account { padding: .35rem .3rem .1rem; }
.nav-dd-account .side-email { padding: 0 .35rem .45rem; }
#homeChats { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#homeChats .chat-list { flex: 1; min-height: 0; }

/* ── View switching ── */
.view { flex: 1; min-height: 0; display: none; }
.view.active { display: flex; }
.view-home.active { flex-direction: column; }
.view-studio.active { flex-direction: row; }
.view-empty.active { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-view { color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.empty-view .empty-icon { font-size: 2.6rem; opacity: .55; }
.empty-view h2 { color: var(--text); font-size: 1.5rem; margin: 0; letter-spacing: -.02em; }
.empty-view p { margin: 0; font-size: .95rem; max-width: 440px; line-height: 1.55; }
.empty-cta {
  margin-top: 1.1rem; padding: .62rem 1.4rem; border-radius: 999px;
  background: var(--split); color: var(--on-accent); border: none; font: inherit;
  font-weight: 700; font-size: .9rem; cursor: pointer; transition: transform .12s ease;
}
.empty-cta:hover { transform: translateY(-1px); }

/* ── Studio: chat + iMovie-style editor ── */
.studio-chat {
  flex: 0 0 35%; max-width: 500px; min-width: 360px;
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.studio-chat-head { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.studio-chat-head .tile { width: 34px; height: 34px; }
.studio-thread { flex: 1; min-height: 0; overflow: hidden auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; scrollbar-width: none; -ms-overflow-style: none; }
.studio-thread::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Transient editor toasts — incidental hints & export/save progress. They float
   over the editor and auto-dismiss, so the chat thread stays conversation-only. */
#sbToasts {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 90;
  display: flex; flex-direction: column; gap: .4rem; align-items: center; pointer-events: none;
  width: min(92vw, 520px);
}
.sb-toast {
  width: max-content; max-width: 100%;
  background: rgba(18, 16, 24, .97); border: 1px solid var(--line-2); color: var(--text);
  padding: .5rem .9rem; border-radius: 11px; font-size: .82rem; line-height: 1.35; text-align: center;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease;
}
.sb-toast.in { opacity: 1; transform: none; }
.sb-toast.prog { border-color: rgba(255, 214, 10, .4); color: var(--neon); }
.studio-composer { display: flex; gap: .5rem; align-items: flex-end; padding: .75rem; border-top: 1px solid var(--line); }
.studio-composer textarea {
  flex: 1; resize: none; background: rgba(0, 0, 0, .28); border: 1px solid var(--line-2); color: var(--text);
  border-radius: 14px; padding: .75rem .9rem; font-family: inherit; font-size: .95rem; outline: none;
  min-height: 88px; max-height: 40vh; line-height: 1.45;
}
.studio-composer textarea:focus { border-color: rgba(255, 214, 10, .4); }
/* Two-class selector so it beats the later single-class `.send` block that
   would otherwise stretch this into a 126×62 rectangle. */
.send.studio-send { width: 40px; height: 40px; min-width: 0; flex: none; border-radius: 50%; padding: 0; animation: none; }

.studio-editor { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #08080a; }
.editor-top { flex: 1; min-height: 0; display: flex; }

/* media / import browser */
.editor-media { flex: 0 0 38%; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.media-tabs { display: flex; gap: .3rem; padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.media-tab {
  background: none; border: none; color: var(--muted); font-family: inherit; font-size: .82rem;
  padding: .35rem .6rem; border-radius: 8px; cursor: pointer;
}
.media-tab:hover { color: var(--text); }
.media-tab.active { color: var(--on-accent); background: var(--split); font-weight: 600; }
.media-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; display: flex; flex-wrap: wrap; gap: .7rem; align-content: flex-start; }
.import-zone {
  width: 100%; min-height: 150px; border: 1.5px dashed var(--line-2); border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  color: var(--muted); cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.import-zone:hover { border-color: var(--neon); color: var(--text); background: rgba(255, 214, 10, .04); }
.import-arrow {
  width: 52px; height: 52px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-2);
  display: grid; place-items: center; font-size: 1.5rem;
}
.import-label { font-size: .9rem; font-weight: 500; }
.media-clip { width: 100%; display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); }
.media-clip .mc-thumb { width: 46px; height: 30px; border-radius: 5px; background: linear-gradient(135deg, rgba(255,214,10,.3), rgba(168,85,247,.3)); flex: none; display: grid; place-items: center; font-size: .8rem; }
.media-clip .mc-name { font-size: .82rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* viewer / preview */
.editor-preview { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; padding: .5rem .9rem 0; }
.preview-toolbar { display: flex; align-items: center; gap: .5rem; padding: 0 .1rem .4rem; }
.pt-title { font-size: .85rem; color: var(--muted); }
.pt-spacer { flex: 1; }
.pt-icon { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .95rem; padding: .2rem .4rem; border-radius: 7px; }
.pt-icon:hover { color: var(--text); background: var(--panel-2); }
.pt-icon.on { color: var(--on-accent); background: var(--split); }
/* Per-clip adjustment popover under the preview toolbar */
.adjust-panel {
  position: absolute; z-index: 8; top: 2.1rem; right: .9rem; width: min(300px, 70%);
  background: rgba(18, 16, 24, .96); border: 1px solid var(--line-2); border-radius: 12px;
  padding: .7rem .75rem; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); backdrop-filter: blur(10px);
}
.adj-title { font-size: .74rem; color: var(--muted); font-weight: 600; margin-bottom: .55rem; }
.adj-title b { color: var(--neon); }
.adj-filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; }
.adj-f { display: flex; flex-direction: column; align-items: center; gap: .28rem; background: none; border: 1px solid transparent; border-radius: 9px; padding: .3rem .1rem; cursor: pointer; font: inherit; font-size: .62rem; color: var(--muted); }
.adj-f:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.adj-f.on { color: var(--text); border-color: rgba(0,0,0, .6); background: rgba(0,0,0, .08); }
.adj-fp { width: 100%; aspect-ratio: 16 / 10; border-radius: 6px; background: linear-gradient(135deg, rgba(0,0,0,.16), rgba(0,0,0,.06) 50%, rgba(0,0,0,.14)); }
.adj-speeds { display: flex; flex-wrap: wrap; gap: .4rem; }
.adj-s { background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); color: var(--text); border-radius: 8px; padding: .34rem .6rem; font: inherit; font-size: .8rem; cursor: pointer; }
.adj-s:hover { border-color: rgba(0,0,0,.3); }
.adj-s.on { color: var(--on-accent); background: var(--split); border-color: transparent; font-weight: 700; }
.adj-vol { width: 100%; accent-color: var(--neon); cursor: pointer; }
.adj-row { margin-bottom: .55rem; }
.adj-row:last-child { margin-bottom: 0; }
.adj-row label { display: block; font-size: .68rem; color: var(--muted); margin-bottom: .22rem; }
.adj-row label b { color: var(--neon); }
.adj-r { width: 100%; accent-color: var(--neon); cursor: pointer; }
.adj-reset { float: right; background: none; border: 1px solid var(--line-2); color: var(--muted); border-radius: 6px; font-size: .6rem; padding: .12rem .42rem; cursor: pointer; font-family: inherit; }
.adj-reset:hover { color: var(--text); border-color: rgba(0,0,0,.3); }
.adj-fill { display: block; width: 100%; text-align: left; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); color: var(--text); border-radius: 9px; padding: .4rem .6rem; font: inherit; font-size: .78rem; cursor: pointer; margin-bottom: .55rem; }
.adj-fill.on { color: var(--neon); border-color: rgba(0,0,0, .5); background: rgba(0,0,0, .08); }
.adj-motion { display: flex; flex-wrap: wrap; gap: .4rem; }
.adj-m { background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); color: var(--text); border-radius: 8px; padding: .34rem .6rem; font: inherit; font-size: .78rem; cursor: pointer; }
.adj-m:hover { border-color: rgba(0,0,0,.3); }
.adj-m.on { color: var(--on-accent); background: var(--split); border-color: transparent; font-weight: 700; }
/* Ken Burns preview loops — export is exact (sbSourceRect) */
@keyframes kb-zin { from { transform: scale(1); } to { transform: scale(1.22); } }
@keyframes kb-zout { from { transform: scale(1.22); } to { transform: scale(1); } }
@keyframes kb-panr { from { transform: scale(1.18) translateX(-6%); } to { transform: scale(1.18) translateX(6%); } }
@keyframes kb-panl { from { transform: scale(1.18) translateX(6%); } to { transform: scale(1.18) translateX(-6%); } }
.preview-stage {
  position: relative;
  flex: 1; min-height: 0; border-radius: 12px; border: 1px solid var(--line);
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .04), transparent 60%), #000;
  display: grid; place-items: center; overflow: hidden;
}
.preview-stage video { width: 100%; height: 100%; object-fit: contain; background: #000; }
/* Live title text drawn over a clip (export mirrors this via sbPaintCaption) */
.preview-caption {
  position: absolute; left: 0; right: 0; z-index: 3; padding: 0 6%; text-align: center; pointer-events: none;
  color: #fff; font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 700; line-height: 1.15;
  font-size: clamp(1rem, 3.6vw, 2.1rem); text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}
.preview-caption.pos-upper { top: 12%; }
.preview-caption.pos-center { top: 50%; transform: translateY(-50%); }
.preview-caption.pos-lower { bottom: 12%; }
.adj-text { width: 100%; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); color: var(--text); border-radius: 8px; padding: .42rem .5rem; font: inherit; font-size: .82rem; margin-bottom: .55rem; }
.adj-pos { display: flex; gap: .4rem; }
.adj-p { flex: 1; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); color: var(--text); border-radius: 8px; padding: .36rem; font: inherit; font-size: .76rem; cursor: pointer; }
.adj-p.on { color: var(--on-accent); background: var(--split); border-color: transparent; font-weight: 700; }
.preview-empty { color: var(--muted); font-size: .9rem; text-align: center; padding: 1rem; }
.preview-controls { display: flex; align-items: center; gap: .5rem; padding: .5rem .1rem; }
.pc-btn { background: none; border: 1px solid var(--line-2); color: var(--text); width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: .85rem; display: grid; place-items: center; }
.pc-btn:hover { border-color: rgba(0,0,0,.3); }
.pc-play { background: var(--panel-2); }
.timecode { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8rem; color: var(--muted); margin-left: .5rem; }
.pc-spacer { flex: 1; }

/* timeline */
.editor-timeline { height: auto; min-height: 300px; max-height: 58vh; flex: none; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .02); display: flex; flex-direction: column; }
.timeline-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .9rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.timeline-tools { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.tl-tool { background: none; border: 1px solid var(--line-2); color: var(--muted); border-radius: 9px; padding: .4rem .75rem; font-size: .82rem; cursor: pointer; font-family: inherit; }
.tl-tool:hover { color: var(--text); border-color: rgba(0,0,0,.3); }
.tl-export { border-color: rgba(255, 214, 10, .4); color: var(--neon); }
.tl-right { display: flex; align-items: center; gap: .8rem; }
.tl-zoom { width: 110px; accent-color: var(--neon); }
.tl-settings { font-size: .82rem; color: var(--muted); }
.timeline-track {
  position: relative; flex: 1; min-height: 150px; margin: .6rem .9rem .9rem; border-radius: 12px;
  border: 1px dashed var(--line-2); background: rgba(255, 255, 255, .015);
  display: grid; place-items: center; overflow: hidden;
}
/* Once there are clips it's a real track surface, not a drop hint. */
.timeline-track.has-shots { border-color: transparent; background: rgba(255, 255, 255, .022); }
.timeline-empty { color: var(--muted); font-size: .85rem; padding: 0 1rem; text-align: center; }
.clip-block {
  position: absolute; left: 14px; top: 12px; bottom: 12px; width: 55%;
  background: linear-gradient(135deg, rgba(255, 214, 10, .28), rgba(168, 85, 247, .28));
  border: 1px solid var(--line-2); border-radius: 8px; display: flex; align-items: center; padding: 0 .7rem;
  font-size: .8rem; color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.playhead { position: absolute; top: 0; bottom: 0; left: 18px; width: 2px; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .55); pointer-events: none; z-index: 6; }
.playhead::before { content: ''; position: absolute; top: -2px; left: -5px; width: 12px; height: 9px; border-radius: 3px 3px 4px 4px; background: var(--neon); box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
/* Skim magnifier: a hover line on the lanes + a floating frame loupe. */
.skimline { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .5); pointer-events: none; z-index: 4; }
.sb-skim { position: fixed; z-index: 9999; transform: translate(-50%, -100%); pointer-events: none; background: #0b0b10; border: 1px solid rgba(237, 234, 243, .18); border-radius: 9px; padding: 4px 4px 2px; box-shadow: 0 10px 30px rgba(0, 0, 0, .55); }
.sb-skim canvas { display: block; width: 240px; height: 135px; border-radius: 5px; background: #000; }
.sb-skim-tc { display: block; text-align: center; font: 600 11px/1.7 ui-monospace, "SF Mono", monospace; color: var(--neon); letter-spacing: .04em; }
.timeline-track.drop-here { border-color: rgba(255, 214, 10, .7); border-style: solid; background-color: rgba(255, 214, 10, .06); }
.timeline-track.has-shots { cursor: pointer; user-select: none; touch-action: none; }
/* Trim handles on each timeline clip */
.sb-trim { position: absolute; top: 0; bottom: 0; width: 12px; z-index: 3; cursor: ew-resize; opacity: 0; transition: opacity .12s; touch-action: none; }
.sb-trim.l { left: 0; }
.sb-trim.r { right: 0; }
.sb-trim::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3px; height: 44%; border-radius: 2px; background: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, .6); }
.sb-trim.l { background: linear-gradient(90deg, rgba(255, 214, 10, .55), transparent); }
.sb-trim.r { background: linear-gradient(270deg, rgba(255, 214, 10, .55), transparent); }
.sb-block:hover .sb-trim, .sb-block.sel .sb-trim { opacity: 1; }
/* Music track bar under the timeline */
.timeline-music { display: none; align-items: center; gap: .6rem; padding: .35rem .9rem .5rem; }
.timeline-music.has-music { display: flex; }
.tm-ico { color: var(--neon); font-size: .95rem; }
.tm-name { font-size: .82rem; color: var(--text); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-vol { flex: 1; max-width: 220px; accent-color: var(--neon); cursor: pointer; }
.tm-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 .2rem; }
.tm-x:hover { color: #f43f5e; }
.tm-chip { background: none; border: 1px solid var(--line-2); color: var(--muted); border-radius: 7px; font-size: .72rem; padding: .2rem .45rem; cursor: pointer; font-family: inherit; }
.tm-chip:hover { color: var(--text); border-color: rgba(0,0,0,.3); }
.tm-chip.on { color: var(--neon); border-color: rgba(255, 214, 10, .45); background: rgba(255, 214, 10, .08); }
/* Voiceover bar */
.timeline-voice { display: none; align-items: center; gap: .6rem; padding: .1rem .9rem .45rem; }
.timeline-voice.has-voice { display: flex; }
/* Extra timeline-bar controls */
.tl-sel { background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); color: var(--text); border-radius: 9px; padding: .38rem .5rem; font-size: .8rem; font-family: inherit; cursor: pointer; }
.tl-tool.on { color: var(--neon); border-color: rgba(255, 214, 10, .45); }
.tl-tool.recording { color: #f43f5e; border-color: rgba(244, 63, 94, .5); }
.tl-save { border-color: rgba(52, 211, 153, .4); color: #34d399; }
/* Per-clip mute toggle */
.sb-cmute { position: absolute; top: .28rem; right: .3rem; z-index: 3; background: rgba(0, 0, 0, .5); border: none; border-radius: 6px; font-size: .7rem; line-height: 1; padding: .15rem .28rem; cursor: pointer; opacity: 0; transition: opacity .12s; }
.sb-block:hover .sb-cmute, .sb-block.sel .sb-cmute { opacity: 1; }
/* Title cards */
.sb-title { display: flex; align-items: center; justify-content: center; }
.sb-titletext { color: #0b0b10; font-weight: 700; font-size: .78rem; padding: 0 .5rem; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; z-index: 2; }
.preview-title { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.preview-title span { color: #0b0b10; font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 700; font-size: 2.2rem; text-align: center; padding: 0 8%; line-height: 1.15; }

@media (max-width: 900px) {
  .view-studio.active { flex-direction: column; }
  .studio-chat { flex: 0 0 auto; max-width: none; min-width: 0; width: auto; height: 38%; border-right: none; border-bottom: 1px solid var(--line); }
  .editor-media { flex: 0 0 40%; }
}

/* ═══════════ Studio-warm home redesign ═══════════ */

/* Logo moved to the top of the sidebar. */
.side-logo {
  display: flex; align-items: center; gap: .6rem; cursor: pointer;
  font-weight: 900; font-size: 1.2rem; letter-spacing: -.02em;
  padding: .5rem .55rem 1rem;
}
.side-logo .logo-mark { width: 36px; height: 36px; font-size: 1rem; }

/* ── Collapsible sidebar ── the chevron collapses the chats sidebar to a slim
   rail (logo + expand + new chat); the choice persists per browser. */
.side-top { display: flex; align-items: center; justify-content: space-between; }
.side-collapse {
  width: 30px; height: 30px; flex: 0 0 30px; margin: -8px 2px 0 0;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 9px;
  color: var(--muted); transition: background .12s ease, color .12s ease;
}
.side-collapse svg { width: 17px; height: 17px; transition: transform .2s ease; }
.side-collapse:hover { color: var(--text); background: rgba(255, 255, 255, .07); }
.sidebar { transition: width .22s cubic-bezier(.2, .8, .3, 1), padding .22s ease; }
.sidebar.collapsed { width: 64px; padding: 1rem .6rem; overflow: hidden; }
.sidebar.collapsed .side-top { flex-direction: column; gap: .5rem; }
.sidebar.collapsed .side-logo { padding: .2rem 0 .2rem; }
.sidebar.collapsed .side-logo span { display: none; }
.sidebar.collapsed .side-collapse { margin: 0; }
.sidebar.collapsed .side-collapse svg { transform: rotate(180deg); }
.sidebar.collapsed #homeChats { display: none; }
/* (The collapsed rail deliberately has NO new-chat + — owner 2026-07-16.) */

/* Outline nav icons + gold active state. */
.nav-ico { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; color: var(--muted); transition: color .15s ease; }
.nav-ico svg { width: 20px; height: 20px; }
.side-item:hover .nav-ico { color: var(--text); }
.side-item.active {
  background: linear-gradient(100deg, rgba(0,0,0, .16), rgba(0,0,0, .05) 52%, rgba(255, 255, 255, 0) 88%);
  border-color: rgba(0,0,0, .22);
  color: var(--text);
  box-shadow: 0 8px 24px -14px rgba(0,0,0, .5);
}
.side-item.active .nav-ico { color: var(--text); }

/* Message timestamps — tight caption under each bubble. */
.msg-time {
  font-size: .68rem; margin-top: -.35rem; padding: 0 .35rem;
  font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  letter-spacing: .01em; color: rgba(140, 162, 156, .55);
}
.msg-time.user { align-self: flex-end; }
.msg-time.agent { align-self: flex-start; display: flex; align-items: center; }
.msg-time.agent::before {
  content: ''; flex: 0 0 13px; width: 13px; height: 13px; border-radius: 50%;
  margin-right: 6px; background: url('/logo.png') center/cover no-repeat;
}

/* Space Grotesk on the wordmark + names, like the mockup. */
.side-logo, .logo, .chat-head .cname, .auth-brand, .auth-title { font-family: 'Space Grotesk', Inter, sans-serif; }

.view-home.active { position: relative; overflow: hidden; }

/* Composer catches the warm landing glow. */
.composer {
  border-color: rgba(0,0,0, .30);
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 -8px 60px rgba(255,170,80,.10), 0 18px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Send button → rounded square with the pink→amber gradient. */
.send {
  border-radius: 17px; width: auto; min-width: 126px; height: 62px; padding: 0 20px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
.send:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, .45); }
.send-spark { color: var(--muted); font-weight: 700; font-size: 1.05rem; }
/* Empty box on a prompt-required model: the arrow/spark grey out (no hover
   lift) but the count chip keeps its full color — it never goes muddy. */
.send:disabled, .send:disabled:hover { opacity: 1; box-shadow: none; transform: none; cursor: default; }
.send:disabled svg, .send:disabled .send-spark { opacity: .4; }
.send-price {
  background: var(--split); color: var(--on-accent); border-radius: 999px;
  padding: .3rem .66rem; font-weight: 800; font-size: .9rem;
  letter-spacing: .01em; white-space: nowrap;
}
.send-price:empty { display: none; }

/* Mode switch (owner mock 2026-07-16): rounded-rect stack; the active mode is
   a gradient pill flanked by ‹ › chevrons. */
.mode-switch { border-radius: 16px; }
.mode-btn.active::before { content: '‹'; margin-right: .5rem; font-weight: 700; opacity: .75; }
.mode-btn.active::after { content: '›'; margin-left: .5rem; font-weight: 700; opacity: .75; }
@media (min-width: 1100px) { .view-home .composer-row .mode-switch { border-radius: 20px; } }
.mode-btn { border-radius: 99px; padding: .45rem .9rem; }

/* ── Outline button language (owner pick 2026-07-18) ──
   The pink→amber gradient moves from FILLS to BORDERS: the send is a hollow
   button ringed in the gradient with a gradient-text credit count, and the
   active mode is outlined instead of filled. Colors untouched — only shape.
   (The two-layer background is the gradient-border trick: inner paint on
   padding-box, gradient on border-box. Placed late so it wins the earlier
   .send / .send:hover / .mode-btn.active fills.) */
.mode-btn { border: 1px solid transparent; } /* all modes carry the 1px so the active ring never shifts widths */
.send {
  background: linear-gradient(rgba(19, 14, 25, .88), rgba(19, 14, 25, .88)) padding-box,
              var(--split) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 0 22px -6px rgba(0,0,0, .4), 0 6px 24px rgba(0, 0, 0, .35);
}
.send:hover {
  background: linear-gradient(rgba(30, 22, 38, .92), rgba(30, 22, 38, .92)) padding-box,
              var(--split) border-box;
  border-color: transparent;
  box-shadow: 0 0 30px -6px rgba(0,0,0, .6), 0 8px 30px rgba(0, 0, 0, .45);
}
.send:disabled, .send:disabled:hover {
  background: linear-gradient(rgba(19, 14, 25, .88), rgba(19, 14, 25, .88)) padding-box,
              var(--split) border-box;
  border-color: transparent;
}
.send-price {
  background: var(--split);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: .3rem 0; font-weight: 800;
}
.mode-btn.active {
  background: linear-gradient(rgba(28, 21, 35, .92), rgba(28, 21, 35, .92)) padding-box,
              var(--split) border-box;
  border: 1px solid transparent;
  color: var(--text);
}

/* Account avatar → dark chip (matches the mockup). */
.side-avatar { background: linear-gradient(140deg, #3a3344, #221d2b); border: 1px solid var(--line); color: var(--muted); }

/* ── Studio storyboard (shot-based) ─────────────── */
.sb-project { margin-left: auto; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line-2); border-radius: 8px; font-size: .78rem; padding: .25rem .4rem; max-width: 46%; color-scheme: dark; }
/* Style the native option list so the open dropdown matches the dark theme
   instead of the OS default (bright-blue selected row on white). */
.sb-project option { background: #14121a; color: var(--text); }
.sb-project option:checked { background: #2a2533; color: #fff; }
.sb-actions { padding: .6rem; border-top: 1px solid var(--line); }
/* Asset browser — Shots · Transitions · Titles · Backgrounds */
.mb-tabs { display: flex; gap: .2rem; flex-wrap: wrap; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
.mb-tab {
  background: transparent; border: none; color: var(--muted); font: inherit; font-weight: 600;
  font-size: .78rem; padding: .32rem .62rem; border-radius: 8px; cursor: pointer;
  transition: color .12s ease, background .12s ease;
}
.mb-tab:hover { color: var(--text); }
.mb-tab.active { color: var(--on-accent); background: var(--split); box-shadow: 0 3px 12px rgba(0,0,0, .28); }
.editor-media .media-body[hidden] { display: none; }
.mb-browser { display: block; overflow-y: auto; padding: .8rem; }
.mb-note { color: var(--muted); font-size: .72rem; margin-bottom: .7rem; }
.mb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.mb-item {
  display: flex; flex-direction: column; gap: .4rem; padding: .35rem; text-align: left; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 11px; font: inherit;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.mb-item:hover { background: rgba(255, 255, 255, .04); border-color: var(--line-2); transform: translateY(-2px); }
.mb-item.active { border-color: rgba(0,0,0, .6); background: rgba(0,0,0, .08); }
.mb-prev { aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--panel-2); }
.mb-prev b { font-size: .82rem; font-weight: 800; }
.mb-label { font-size: .74rem; font-weight: 600; color: var(--text); }
/* transition mini-previews (two panels + the transition zone) */
.mb-tr-cut { background: linear-gradient(90deg, #b57cf0 0 50%, #8ec5ff 50% 100%); }
.mb-tr-xfade { background: linear-gradient(90deg, #b57cf0 0 30%, #a9a2ea 50%, #8ec5ff 70% 100%); }
.mb-tr-dip { background: linear-gradient(90deg, #b57cf0 0 28%, #0b0b10 50%, #8ec5ff 72% 100%); }
.mb-tr-fade { background: linear-gradient(90deg, #0b0b10, #b57cf0 34%, #8ec5ff 66%, #0b0b10); }
.mb-item[draggable="true"] { cursor: grab; }
.mb-item.dragging { opacity: .5; }
.sb-btn { width: 100%; background: none; border: 1px dashed var(--line-2); color: var(--muted); border-radius: 10px; padding: .55rem; cursor: pointer; font-size: .85rem; }
.sb-btn:hover { color: var(--text); border-color: rgba(0,0,0,.3); }
.sb-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px);
  z-index: 120; max-width: min(90vw, 460px); text-align: center;
  background: rgba(10, 9, 14, .92); color: var(--text); border: 1px solid var(--line-2);
  border-radius: 12px; padding: .7rem 1rem; font-size: .85rem; line-height: 1.4;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.sb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.sb-empty { color: var(--muted); font-size: .85rem; padding: 1rem; line-height: 1.5; }
/* Media card = just the thumbnail tile. Add/remove buttons overlay on hover. */
.sb-card { position: relative; width: 122px; height: 68px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; cursor: pointer; background: #000; flex: none; }
.sb-card:hover { border-color: var(--line-2); }
.sb-card.sel { border-color: rgba(0,0,0, .9); box-shadow: 0 0 0 1px rgba(0,0,0, .45); }
.sb-thumb { width: 100%; height: 100%; object-fit: contain; background: #000; display: grid; place-items: center; }
.sb-thumb-photo { object-fit: contain; }
.sb-thumb-empty { font-size: 1.1rem; color: var(--muted); }
/* Subtle status cue without text/dots: pulse while working, red ring if missing. */
.sb-card.st-generating, .sb-card.st-editing, .sb-card.st-restoring { animation: sbpulse 1s infinite alternate; }
.sb-card.st-missing { border-color: rgba(244, 63, 94, .7); }
@keyframes sbpulse { from { opacity: .5; } to { opacity: 1; } }
.sb-tl, .sb-x { position: absolute; top: 4px; z-index: 3; opacity: 0; transition: opacity .12s; cursor: pointer; line-height: 1; display: grid; place-items: center; }
.sb-card:hover .sb-tl, .sb-card:hover .sb-x { opacity: 1; }
.sb-tl { right: 4px; width: 22px; height: 22px; border-radius: 6px; background: rgba(0, 0, 0, .6); border: 1px solid var(--line-2); color: #fff; font-size: .82rem; }
.sb-tl:hover { border-color: var(--neon); }
.sb-tl.on { color: var(--neon); border-color: rgba(255, 214, 10, .6); background: rgba(255, 214, 10, .14); }
.sb-x { left: 4px; width: 20px; height: 20px; border-radius: 6px; background: rgba(0, 0, 0, .6); border: none; color: #eee; font-size: .95rem; }
.sb-x:hover { color: #f43f5e; }
.sb-block { position: relative; background-size: cover; background-position: center; background-color: #000; min-width: 34px; cursor: pointer; }
.sb-blocknum { position: absolute; z-index: 2; left: .4rem; top: .25rem; font-size: .7rem; color: #fff; text-shadow: 0 1px 2px #000; }
/* iMovie-style filmstrip: distinct frames laid edge-to-edge across the clip. */
.sb-strip { position: absolute; inset: 0; display: flex; z-index: 1; }
.sb-frame { flex: 1 1 0; min-width: 0; background-size: cover; background-position: center; box-shadow: inset -1px 0 0 rgba(0, 0, 0, .35); }
.sb-frame:last-child { box-shadow: none; }
/* A photo clip: tile the WHOLE image across the strip at its real aspect ratio
   (height-fit, repeat across) so it reads as the actual picture, not a zoom-crop. */
.sb-photostrip { display: block; background-repeat: repeat-x; background-position: center; background-size: auto 100%; background-color: #000; }
/* Per-clip audio band (iMovie's blue strip): waveform PNG over a blue base. */
.sb-clipwave {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%; min-height: 14px; z-index: 2;
  background-repeat: no-repeat; background-size: 100% 100%; background-position: center;
  pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
.sb-block.sel { outline: 2px solid rgba(0,0,0, .8); outline-offset: -1px; z-index: 4; }
.sb-block.st-draft { opacity: .45; }
.sb-block.st-generating { animation: sbpulse .9s infinite alternate; }
/* Stacked lanes: video row on top, audio waveform lanes beneath, one playhead. */
.timeline-track.has-shots { display: block; overflow-x: auto; overflow-y: auto; padding: 0; place-items: unset; }
.tl-inner { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; min-height: 100%; box-sizing: border-box; }
.tl-lane { position: relative; width: 100%; flex: none; }
.tl-video { height: 90px; }
.tl-ruler { position: relative; height: 15px; flex: none; margin-bottom: 1px; }
.tl-tick { position: absolute; top: 0; font-size: .58rem; color: var(--muted); line-height: 15px; white-space: nowrap; border-left: 1px solid var(--line-2); padding-left: 3px; }
.tl-tick:first-child { border-left: none; padding-left: 0; }
/* iMovie-style per-clip label bar: amber duration + name over a soft top scrim. */
/* iMovie-style: a small duration pill in the corner, not a full scrim bar. The
   clip name only appears when the clip is selected or hovered. */
.sb-cliplabel {
  position: absolute; z-index: 3; top: 5px; left: 5px; max-width: calc(100% - 10px);
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .34rem; font-size: .6rem; line-height: 1.3; color: #fff;
  background: rgba(0, 0, 0, .55); border-radius: 5px;
  white-space: nowrap; overflow: hidden; pointer-events: none;
}
.sb-cliplabel .cl-dur { font-weight: 700; color: #fff; flex: none; }
.sb-cliplabel .cl-name { display: none; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.sb-block:hover .sb-cliplabel .cl-name, .sb-block.sel .sb-cliplabel .cl-name { display: inline; }
.sb-title .sb-cliplabel { background: rgba(0, 0, 0, .32); }
.sb-title .sb-cliplabel .cl-dur { color: #fff; }
.tl-video .clip-block.sb-block { position: absolute; top: 0; bottom: 0; inset-inline: auto; height: auto; padding: 0; min-width: 8px; border-radius: 7px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: filter .12s ease, box-shadow .12s ease; }
.tl-video .clip-block.sb-block:hover { filter: brightness(1.07); box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.tl-video .clip-block.sb-block.sel { box-shadow: 0 2px 10px rgba(0,0,0, .28); }
.tl-video .clip-block.sb-block.dragging { opacity: .82; z-index: 7; cursor: grabbing; box-shadow: 0 8px 22px rgba(0, 0, 0, .55); }
/* Overlay (picture-in-picture) lane — clips that play ON TOP of the film.
   Calm by default; only glows as a dropzone while you're dragging onto it. */
.tl-overlay { height: 58px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 8px; background: rgba(255, 255, 255, .02); }
.tl-overlay.drop-here { border-color: var(--neon); border-style: solid; background: rgba(255, 214, 10, .1); }
.tl-overlay-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: .66rem; color: var(--muted); opacity: .7; white-space: nowrap; pointer-events: none; }
.tl-oclip {
  position: absolute; top: 3px; bottom: 3px; border-radius: 7px; overflow: visible; min-width: 24px;
  border: 1px solid rgba(255, 214, 10, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  cursor: grab; touch-action: none; background: #000;
}
/* Connector cue: a little amber stalk + dot linking the overlay to its point on
   the storyline above (iMovie's "attached clip" look). */
.tl-oclip::before {
  content: ''; position: absolute; top: -11px; left: 0; width: 2px; height: 11px;
  background: rgba(255, 214, 10, .65); border-radius: 1px;
}
.tl-oclip::after {
  content: ''; position: absolute; top: -13px; left: -2px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--neon); box-shadow: 0 0 0 2px rgba(8, 7, 12, .8);
}
.tl-oclip > .sb-strip, .tl-oclip > .sb-photostrip { border-radius: 6px; overflow: hidden; }
.tl-oclip.sel { outline: 2px solid rgba(0,0,0, .9); outline-offset: -1px; z-index: 4; }
.sb-ocorner {
  position: absolute; right: 22px; top: 3px; z-index: 5; width: 20px; height: 18px; border-radius: 5px;
  background: rgba(0, 0, 0, .58); border: 1px solid var(--line-2); color: var(--neon); font-size: .7rem;
  line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.sb-ocorner:hover { border-color: var(--neon); }
.sb-ox { position: absolute; right: 3px; top: 3px; z-index: 5; width: 18px; height: 18px; border-radius: 5px; background: rgba(0, 0, 0, .58); border: none; color: #ddd; font-size: .85rem; line-height: 1; cursor: pointer; padding: 0; }
.sb-ox:hover { color: #f43f5e; }
/* The live PiP inset over the preview stage (mirrors the export compositing). */
.sb-pip { position: absolute; z-index: 4; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 22px rgba(0, 0, 0, .6); border: 2px solid rgba(255, 255, 255, .9); background: #000; line-height: 0; }
.sb-pip-media { display: block; width: 100%; height: 100%; object-fit: cover; }
.tl-audio { height: 46px; }
/* iMovie audio clip: solid coloured body, darker waveform layer on top. */
.tl-aclip {
  position: absolute; left: 0; top: 0; bottom: 0; min-width: 30px; border-radius: 5px; overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); cursor: grab; touch-action: none;
}
.tl-aclip.dragging { cursor: grabbing; z-index: 5; }
.tl-music .tl-aclip, .tl-voice .tl-aclip { background: linear-gradient(180deg, #46c568, #38a657); }
.tl-wave { position: absolute; inset: 0; z-index: 1; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
/* Audio clip trim edges */
.tl-atrim { position: absolute; top: 0; bottom: 0; width: 10px; z-index: 4; cursor: ew-resize; touch-action: none; }
.tl-atrim.l { left: 0; } .tl-atrim.r { right: 0; }
.tl-audio:hover .tl-atrim::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3px; height: 46%; border-radius: 2px; background: rgba(255, 255, 255, .9); }
/* Fade fills (triangular gradient) + draggable corner dots */
.tl-fadefill { position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none; }
.tl-fadefill.l { left: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .55), transparent); }
.tl-fadefill.r { right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, .55), transparent); }
.tl-fadedot { position: absolute; top: -3px; width: 11px; height: 11px; margin-left: -5px; margin-right: -5px; border-radius: 50%; background: #fff; border: 1px solid rgba(0, 0, 0, .5); z-index: 5; cursor: ew-resize; opacity: 0; transition: opacity .12s; touch-action: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.tl-audio:hover .tl-fadedot { opacity: 1; }
.tl-alabel { position: absolute; left: .45rem; top: .28rem; z-index: 2; font-size: .68rem; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); white-space: nowrap; pointer-events: none; }
.tl-actrl { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; align-items: center; gap: .3rem; opacity: 0; transition: opacity .12s; }
.tl-audio:hover .tl-actrl { opacity: 1; }
.tl-avol { width: 76px; accent-color: var(--neon); cursor: pointer; }
.tl-achip { background: rgba(0, 0, 0, .5); border: 1px solid var(--line-2); color: #cfcfd6; border-radius: 6px; font-size: .66rem; padding: .12rem .32rem; cursor: pointer; }
.tl-achip.on { color: var(--neon); border-color: rgba(255, 214, 10, .5); }
.tl-ax { background: rgba(0, 0, 0, .5); border: none; color: #ddd; border-radius: 6px; font-size: .85rem; line-height: 1; padding: .05rem .3rem; cursor: pointer; }
.tl-ax:hover { color: #f43f5e; }

/* ── Effort chip: floats just right of the attach panel ── */
.effort-pick { position: absolute; top: 10px; left: 298px; z-index: 3; }
.effort-pick .opt-btn {
  border-radius: 99px; padding: .5rem .95rem; font-size: .84rem;
  background: var(--panel);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
/* Floats at the top, so the menu drops DOWN and hangs off the left edge. */
.model-menu.effort-menu { right: auto; left: 0; min-width: 165px; background: #ffffff; }
@media (max-width: 1399px) { .effort-pick { top: 14px; left: 14px; } }

/* ── Attach panel: accordion in the space between sidebar and messages ── */
.composer-wrap { position: relative; }

/* Clarifying questions pop up floating over the thread, anchored on top of
   the composer — nothing is there when no question is open, and the page
   never shifts. */
.q-dock {
  position: absolute; bottom: 100%; left: 0; right: 0;
  margin: 0 auto; max-width: 780px; z-index: 3;
}
.q-dock .q-card {
  max-width: 100%;
  border-bottom-left-radius: 16px;
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.q-card { position: relative; }
.q-skip {
  position: absolute; top: .55rem; right: .6rem;
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: .88rem; line-height: 1; padding: .25rem .4rem; border-radius: 7px;
}
.q-skip:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
.attach-panel {
  position: absolute; left: 14px; top: 10px; max-height: calc(100% - 24px); width: 272px;
  z-index: 2; overflow-y: auto;
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: .45rem;
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.attach-panel::-webkit-scrollbar { width: 6px; }
.attach-panel::-webkit-scrollbar-thumb { background: rgba(0,0,0, .4); border-radius: 999px; }
.ap-row { position: relative; }
.ap-row + .ap-row { border-top: 1px solid var(--line); }
.ap-head {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  background: none; border: none; color: var(--text);
  font-size: .92rem; font-weight: 600; text-align: left;
  padding: .7rem .6rem; border-radius: 12px; cursor: pointer;
}
.ap-head:hover { background: var(--panel-2); }
/* Leading glyph — gives each mode instant identity. */
.ap-ico {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--muted); transition: color .15s ease, border-color .15s ease;
}
.ap-ico svg { width: 17px; height: 17px; }
.ap-head:hover .ap-ico, .ap-row.open .ap-ico { color: var(--text); border-color: var(--line-2); }
.ap-label { display: inline-flex; align-items: baseline; }
/* Info lives on the title via a dotted underline — hover the word. */
.ap-title[data-info] {
  text-decoration: underline dotted; text-decoration-color: rgba(255,255,255,.3);
  text-underline-offset: 3px; cursor: help;
}
.ap-title[data-info]:hover { text-decoration-color: var(--text); }
.ap-count { color: var(--muted); font-weight: 600; margin-left: .45rem; font-size: .82rem; }
/* The row's actual limits (seconds · megabytes), sat after the n/cap count so
   they read before you attach rather than as an error afterwards. Lighter and
   smaller than the count — reference, not status. Empty on rows with no cap,
   and the :empty rule keeps the separator from showing on its own. */
.ap-cap { color: var(--muted); opacity: .72; font-weight: 500; margin-left: .4rem; font-size: .72rem; white-space: nowrap; }
.ap-cap:not(:empty)::before { content: '·'; margin-right: .4rem; opacity: .6; }
.ap-head > svg { margin-left: auto; color: var(--muted); transition: transform .22s ease; flex-shrink: 0; }
.ap-row.open .ap-head > svg { transform: rotate(180deg); }
.ap-body { display: none; padding: .15rem .5rem .85rem 3.3rem; }
.ap-row.open .ap-body { display: block; }
.ap-body .attach-btn { padding: .5rem .85rem; font-size: .85rem; }
/* Extra image slots (multi-image models, e.g. Seedance refs) */
.ap-extra { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.ap-extra .slot {
  position: relative; width: 58px; height: 44px; border-radius: 8px;
  overflow: hidden; border: 1px solid var(--line-2);
}
.ap-extra img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-extra .x {
  position: absolute; top: 0; right: 4px; cursor: pointer;
  color: #fff; text-shadow: 0 0 5px #000; font-weight: 700;
}
/* @ImageN tag badge on reference thumbnails (tag-binding models only). */
.ap-extra .slot-tag {
  position: absolute; left: 3px; bottom: 3px; padding: .08rem .3rem;
  font-size: .58rem; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: rgba(0, 0, 0, .72); border-radius: 5px;
  pointer-events: none;
}
/* Position number on multi-image thumbnails (main = 1, extras 2,3,…), so the
   prompt can say "the first image / the second image" — Nano references by
   position, not by an @Image tag. The 44px badge gutter applies ONLY while
   the badges show (2+ images — .has-nums, toggled by renderExtraImages), and
   slots SHRINK by the gutter instead of being pushed past the panel edge —
   the old push made image 1 wider than the rest and scrolled the panel
   sideways (it also silently shoved the avatar/end/audio slots, which never
   have badges at all). */
#rowImage .ap-body.has-nums .attach-btn.has,
#rowImgref .ap-body.has-nums .ap-add,
#rowImgref .ap-body.has-nums #extraImages .slot { margin-left: 44px; width: calc(100% - 44px); }
/* The outside-left badge must not be clipped: these slots stop clipping and
   the image itself carries the rounding instead. */
#extraImages .slot { overflow: visible; }
#extraImages .slot img { border-radius: inherit; }
/* Position badge lane: the n/14 pill sits OUTSIDE the thumbnail, to its left
   (owner 2026-07-16) — the frame carrying it reserves the lane via margin. */
.slot-num {
  position: absolute; left: -44px; top: 6px; z-index: 2;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 800; line-height: 1; color: var(--on-accent);
  background: var(--split); border-radius: 999px; pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.ap-add { margin-top: .5rem; }
/* Not enough side room → the panel becomes a block above the composer. */
@media (max-width: 1399px) {
  .attach-panel {
    position: static; align-self: center; width: 100%; max-width: 780px;
    max-height: 220px; margin: 0 0 .5rem;
  }
}
/* Below 1100px the mode-switch can't tuck into the composer's left edge, so
   the four controls won't fit one line — drop the send to a full-width bar
   rather than orphaning it at the right edge. */
@media (max-width: 1099px) {
  .composer-row { row-gap: .7rem; }
  .composer-row .send { flex: 1 1 100%; margin-left: 0; min-width: 0; }
}

/* ── Chatbox lifted; arrow beneath slides down to the Presets screen ── */
/* Extra bottom padding floats the box ~1in off the bottom; the arrow lives
   in the freed space. */
.view-home .composer-wrap { padding-bottom: 1.4rem; }
.drawer-arrow {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  margin: .7rem auto 0;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--muted);
  cursor: pointer;
  transition: transform .28s ease, color .18s ease, border-color .18s ease, background .18s ease;
}
.drawer-arrow:hover { color: var(--text); border-color: rgba(0,0,0,.3); background: rgba(255,255,255,.09); }

/* Two full screens stacked vertically; the slide translates between them. */
.home-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  transition: transform .55s cubic-bezier(.65, 0, .35, 1); will-change: transform;
}
.home-slide.show-presets { transform: translateY(-100%); }
.home-screen {
  height: 100%; flex: none; position: relative;
  display: flex; flex-direction: column; min-height: 0;
}
.presets-screen {
  position: relative; height: 100%; flex: none;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: 1.1rem 1.5rem 1.5rem; overflow-y: auto;
}
/* Soft top-center glow behind the header. */
.presets-screen::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 900px; max-width: 100%; height: 340px; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 100% at 50% 0%, rgba(0,0,0, .11), transparent 72%);
}
.presets-screen > * { position: relative; z-index: 1; }
.presets-screen .drawer-arrow { margin: 0 auto; }
.presets-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; margin-top: .2rem;
}
.presets-sub { color: var(--muted); font-size: .92rem; margin-bottom: .3rem; }
.presets-body { flex: none; width: 100%; max-width: 820px; }
/* Glass tab bar — one rounded rail holding the category pills. */
.pt-tabs {
  display: flex; gap: .15rem; justify-content: center; flex-wrap: wrap;
  width: fit-content; max-width: 100%; margin: .55rem auto 1.6rem;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line);
  border-radius: 999px; padding: .3rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pt-tab {
  background: transparent; border: none; color: var(--muted);
  font: inherit; font-weight: 600; font-size: .86rem; padding: .46rem 1.05rem;
  border-radius: 999px; cursor: pointer; transition: color .12s ease, background .12s ease;
}
.pt-tab:hover { color: var(--text); }
.pt-tab.active { background: var(--split); color: var(--on-accent); box-shadow: 0 4px 14px rgba(0,0,0, .3); }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; }
/* Glass preset card: framed gradient preview + a footer row. */
.pt-card {
  display: flex; flex-direction: column; padding: .55rem; text-align: left; cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  border: 1px solid var(--line-2); border-radius: 20px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
  transition: border-color .13s ease, transform .13s ease, box-shadow .13s ease;
}
.pt-card:hover {
  border-color: rgba(0, 0, 0, .5); transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
}
.pt-prev {
  position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: 14px; background: var(--panel-2);
}
.pt-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-prev-ph::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(75% 65% at 30% 18%, rgba(255, 255, 255, .34), transparent 66%);
}
/* Soft neutral mesh — three light grey blobs on the B&W platform. */
.pt-ph0 { background:
  radial-gradient(100% 100% at 12% 10%, rgba(0,0,0,.10), transparent 55%),
  radial-gradient(110% 110% at 88% 28%, rgba(0,0,0,.06), transparent 58%),
  radial-gradient(120% 120% at 75% 92%, rgba(0,0,0,.09), transparent 55%), var(--panel-2); }
.pt-ph1 { background:
  radial-gradient(100% 100% at 15% 12%, #ffcfe2, transparent 58%),
  radial-gradient(110% 110% at 85% 25%, #d3c6f5, transparent 60%),
  radial-gradient(120% 120% at 72% 90%, #ffdcb6, transparent 58%), #e2d3f0; }
.pt-ph2 { background:
  radial-gradient(100% 100% at 12% 12%, #ffb6d4, transparent 54%),
  radial-gradient(110% 110% at 86% 30%, #bfa9f0, transparent 56%),
  radial-gradient(120% 120% at 74% 90%, #ffc79a, transparent 55%), #d6bce9; }
.pt-ph3 { background:
  radial-gradient(100% 100% at 14% 10%, #ffc2dd, transparent 55%),
  radial-gradient(110% 110% at 84% 26%, #c8b4f3, transparent 58%),
  radial-gradient(120% 120% at 76% 92%, #ffd0a0, transparent 55%), #dcc4ee; }
.pt-foot { display: flex; align-items: center; gap: .6rem; padding: .75rem .55rem .4rem; }
.pt-ico { flex: 0 0 auto; display: grid; place-items: center; color: var(--neon); }
.pt-ico svg { width: 20px; height: 20px; }
.pt-meta { flex: 1; min-width: 0; }
.pt-card-t { display: block; font-size: .95rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-card-s {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-size: .78rem; color: var(--muted); overflow: hidden; line-height: 1.35; margin-top: .1rem;
}
.pt-try {
  flex: 0 0 auto; background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-2); color: var(--text); font-weight: 700; font-size: .82rem;
  padding: .4rem .95rem; border-radius: 10px; transition: background .13s ease, color .13s ease, border-color .13s ease;
}
.pt-card:hover .pt-try { background: var(--split); color: var(--on-accent); border-color: transparent; }
@media (max-width: 1040px) {
  .pt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .pt-grid { grid-template-columns: 1fr; }
}

/* ── Home landing / dashboard ── */
.view-landing.active { flex-direction: column; overflow-y: auto; padding: 2.6rem 2rem 3rem; }
/* Flex column filling the view so the bottom-docked chatbox (.lp-compose,
   margin-top:auto) pins to the bottom even when the page content is short. */
.lp-page { width: 100%; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; flex: 1 0 auto; }
.lp-hero { margin-bottom: 1.8rem; }
.lp-hero h1 { font-size: 1.9rem; font-weight: 700; letter-spacing: -.01em; }
.lp-hero p { color: var(--muted); font-size: .95rem; margin-top: .35rem; }
.lp-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 16px; padding: 1.1rem 1.15rem;
  cursor: pointer; transition: border-color .12s ease, transform .12s ease;
}
.lp-card:hover { border-color: rgba(0, 0, 0, .5); transform: translateY(-2px); }
.lp-ico { font-size: 1.4rem; margin-bottom: .35rem; }
.lp-t { font-size: 1rem; font-weight: 600; color: var(--text); }
.lp-s { font-size: .8rem; color: var(--muted); }
.lp-sec { margin: 2.2rem 0 .9rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lp-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .8rem; }
.lp-rec {
  aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2);
  background: var(--panel-2); cursor: pointer; padding: 0; display: grid; place-items: center;
  transition: border-color .12s ease;
}
.lp-rec img, .lp-rec video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-rec-audio { font-size: 1.6rem; opacity: .7; }
.lp-rec:hover { border-color: rgba(0, 0, 0, .5); }
@media (max-width: 900px) { .view-landing.active { padding: 1.6rem 1rem 2.5rem; } }
/* Netflix-style model showcase rows */
.nf-row { margin-top: 2.1rem; }
.nf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.nf-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.nf-all {
  flex-shrink: 0; background: none; border: none; color: var(--muted); font: inherit;
  font-size: .82rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center;
  gap: .15rem; transition: color .12s ease;
}
.nf-all:hover { color: var(--text); }
.nf-all-c { font-size: 1.05rem; line-height: 1; }
.nf-track {
  display: flex; gap: .8rem; overflow-x: auto; overflow-y: hidden;
  padding-bottom: .6rem; scroll-snap-type: x proximity; scrollbar-width: thin;
}
.nf-track::-webkit-scrollbar { height: 8px; }
.nf-track::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.nf-card {
  flex: 0 0 auto; width: 168px; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden;
  position: relative; background: var(--panel-2); border: 1px solid var(--line-2); cursor: pointer;
  scroll-snap-align: start; transition: transform .14s ease, border-color .14s ease;
}
.nf-card:hover { transform: scale(1.045); border-color: rgba(0, 0, 0, .5); z-index: 1; }
.nf-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.nf-ph { display: grid; place-items: center; }
.nf-ph0 { background: linear-gradient(160deg, rgba(0,0,0,.14), rgba(0,0,0,.05)); }
.nf-ph1 { background: linear-gradient(160deg, rgba(0,0,0,.14), rgba(0,0,0,.05)); }
.nf-ph2 { background: linear-gradient(160deg, rgba(0,0,0,.05), rgba(0,0,0,.16)); }
.nf-play { font-size: 1.4rem; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 6px rgba(0, 0, 0, .4); }

/* ── Chat column nudged right of center (box + thread text together) ── */
/* The wide "floating attach rail + shifted column" layout — the 24" desktop
   look — needs room for the rail on the left. It fits from ~1400px, so laptops
   that wide get it too; below that the panel becomes an inline card. */
@media (min-width: 1400px) {
  .thread-inner,
  .view-home .composer,
  .view-home .drawer-arrow { position: relative; left: 100px; }
  .view-home .q-dock { transform: translateX(100px); }
}

/* ── Image previews in the panel: big card (user-picked size) ── */
#rowImage .ap-body,
#rowAvatar .ap-body,
#rowEnd .ap-body { padding-left: .6rem; }
#rowImage .attach-btn.has,
#rowAvatar .attach-btn.has,
#rowEnd .attach-btn.has { display: block; width: 100%; padding: .3rem; position: relative; }
#rowImage .attach-btn.has img,
#rowAvatar .attach-btn.has img,
#rowEnd .attach-btn.has img,
#rowClip .attach-btn.has img, #srVidGroup .attach-btn.has img { width: 100%; height: 190px; object-fit: cover; border-radius: 10px; }
#rowImage .attach-btn.has .x,
#rowAvatar .attach-btn.has .x,
#rowEnd .attach-btn.has .x {
  position: absolute; top: 10px; right: 14px; font-size: 1.15rem;
  color: #fff; text-shadow: 0 0 6px #000;
}
.ap-extra .slot { width: 100%; height: 190px; border-radius: 10px; }
.ap-extra { gap: .5rem; }

/* Empty image slot: same size as the picture it will hold, plus centered */
#rowImage .attach-btn:not(.has),
#rowAvatar .attach-btn:not(.has),
#rowEnd .attach-btn:not(.has) {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .25rem; width: 100%; height: 190px; padding: 0; border-radius: 10px;
}
#rowImage .plus-big, #rowAvatar .plus-big, #rowEnd .plus-big { font-size: 2.1rem; font-weight: 300; line-height: 1; }
#rowImage .slot-count, #rowAvatar .slot-count, #rowEnd .slot-count { font-size: .75rem; color: var(--muted); }

/* First & last frame + Reference to video: match the Image row's full-width
   dashed drop-zones so the three inputs read as one system. (NB: leave the
   body's display to the .ap-row.open toggle — forcing display here would pin
   the row permanently open.) */
#rowFlf .ap-body, #rowRef .ap-body, #rowEl .ap-body, #rowClip .ap-body, #srVidGroup .ap-body { padding-left: .6rem; }
#rowImgref .ap-body { padding-left: .6rem; position: relative; }
#rowFlf .attach-btn:not(.has),
#rowImgref .ap-add,
#rowClip .attach-btn:not(.has),
#srVidGroup .attach-btn:not(.has),
#rowRef .ap-add,
#rowEl .ap-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .25rem; width: 100%; height: 190px; padding: 0; border-radius: 10px;
}
#rowFlf .attach-btn + .attach-btn { margin-top: .55rem; }
#rowFlf .attach-btn.has { display: block; width: 100%; padding: .3rem; position: relative; }
#rowFlf .attach-btn.has img { width: 100%; height: 190px; object-fit: cover; border-radius: 10px; }
#rowFlf .attach-btn.has .x {
  position: absolute; top: 10px; right: 14px; font-size: 1.15rem;
  color: #fff; text-shadow: 0 0 6px #000;
}
#rowFlf .plus-big, #rowRef .plus-big, #rowEl .plus-big, #rowClip .plus-big, #rowImgref .plus-big, #srVidGroup .plus-big { font-size: 2.1rem; font-weight: 300; line-height: 1; }
#rowFlf .slot-lab, #rowFlf .slot-count, #rowRef .slot-count, #rowEl .slot-count, #rowClip .slot-lab, #rowImgref .slot-count, #srVidGroup .slot-lab { font-size: .75rem; color: var(--muted); }
#rowRef .ap-extra, #rowEl .ap-extra, #rowImgref .ap-extra { gap: .55rem; margin-bottom: .55rem; }
/* Attached clip: first-frame thumbnail card (same shape as the flf slots).
   While the thumb is still being captured the 🎬 chip centers in the box. */
#rowClip .attach-btn.has, #srVidGroup .attach-btn.has {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 96px; margin-left: 0; padding: .3rem;
  border-radius: 12px; position: relative;
}
#rowClip .attach-btn.has .x, #srVidGroup .attach-btn.has .x {
  position: absolute; top: 10px; right: 14px; font-size: 1.15rem;
  color: #fff; text-shadow: 0 0 6px #000;
}

/* Explainer popover — anchored under a title's dotted-underlined word on hover. */
#apInfoPop {
  position: fixed; z-index: 200; max-width: 244px; display: none;
  background: #ffffff; border: 1px solid var(--line-2); border-radius: 10px;
  padding: .6rem .7rem; font-size: .8rem; line-height: 1.42; color: var(--text);
  box-shadow: 0 12px 34px rgba(0,0,0,.16);
}
#apInfoPop.open { display: block; }
/* Caret pointing up to the ⓘ that opened it. */
#apInfoPop::before {
  content: ''; position: absolute; top: -6px; left: 16px; width: 10px; height: 10px;
  background: #14121b; border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2);
  transform: rotate(45deg);
}
/* No header bar anymore — keep the first message clear of the floating chip. */
.view-home .thread { padding-top: 3.4rem; }

/* Jump-to-latest chevron: shown only when the thread is scrolled up (JS toggles
   .show), so autoscroll no longer has to yank the user down on every message. */
.scroll-down {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 200px; z-index: 40;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
  box-shadow: 0 6px 22px rgba(0,0,0,.5);
}
.scroll-down.show { opacity: 1; pointer-events: auto; }
.scroll-down:hover { border-color: var(--text); }

/* ── Audio slot: waveform bars (design B) ── */
#rowAudio .ap-body, #srAudGroup .ap-body { padding-left: .6rem; }
#rowAudio .attach-btn, #srAudGroup .attach-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 96px; padding: 0; border-radius: 12px; overflow: hidden;
}
#rowAudio .attach-btn.has, #srAudGroup .attach-btn.has { border-style: solid; border-color: var(--neon); }
.aw-bars {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; gap: 3px; padding: 0 14px; pointer-events: none;
}
.aw-bars i { width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--purple), var(--neon)); opacity: .3; }
.aw-bars.lit i { opacity: .85; }
#rowAudio .plus-big, #srAudGroup .plus-big { position: relative; z-index: 2; font-size: 1.9rem; font-weight: 300; line-height: 1; }
.aw-play {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; background: var(--split); color: var(--on-accent);
  display: grid; place-items: center; font-size: .72rem; cursor: pointer;
}
.aw-meta {
  position: absolute; left: 12px; bottom: 7px; z-index: 2;
  font-size: .72rem; font-weight: 600; color: var(--text); text-shadow: 0 0 4px #000;
  max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#rowAudio .attach-btn .x, #srAudGroup .attach-btn .x {
  position: absolute; top: 2px; right: 9px; z-index: 3;
  color: #fff; text-shadow: 0 0 5px #000; font-weight: 700;
}
/* Bars ease between frames so the live dance looks fluid. */
.aw-bars i { transition: height .09s ease; }

/* ── Image source chooser + gallery picker ── */
#rowImage .ap-body { position: relative; }
.img-src-menu { top: 10px; left: 10px; right: auto; min-width: 170px; background: #ffffff; }
.img-src-menu .check { color: var(--muted); }
.gal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 7, 12, .6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
}
.gal-box {
  width: min(96vw, 1500px); height: 92vh; overflow-y: auto;
  background: linear-gradient(180deg, #26262d, #1e1e24);
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 26px;
  padding: 1.4rem 1.7rem 1.7rem;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .09);
}
.gal-box::-webkit-scrollbar { width: 9px; }
.gal-box::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 5px; }
.gal-box::-webkit-scrollbar-track { background: transparent; }

/* ── GPT inpainting: paint-the-edit-region button + editor ── */
.mask-btn {
  display: block; width: 100%; margin-top: .5rem; padding: .5rem .75rem;
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--text);
  background: var(--panel-2); border: 1px dashed var(--line-2); border-radius: 10px;
  cursor: pointer; text-align: center; transition: border-color .12s, background .12s;
}
.mask-btn:hover { border-color: var(--neon); }
.mask-btn.has-mask {
  border-style: solid; border-color: var(--neon); background: rgba(0,0,0, .08);
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.mask-btn .mask-clear {
  display: inline-grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; background: rgba(255, 255, 255, .12); font-size: .7rem; line-height: 1;
}
.mask-btn .mask-clear:hover { background: var(--neon); color: var(--on-accent); }
.mask-overlay {
  position: fixed; inset: 0; z-index: 210;
  background: rgba(8, 7, 12, .72);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
}
.mask-box {
  background: linear-gradient(180deg, #26262d, #1e1e24);
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 20px;
  padding: 1.1rem 1.2rem 1.2rem; max-width: 94vw;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .09);
}
.mask-head { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .8rem; }
.mask-title { font-weight: 700; font-size: 1rem; }
.mask-sub { font-size: .78rem; color: var(--muted); }
.mask-stage { position: relative; border-radius: 12px; overflow: hidden; user-select: none; }
.mask-stage .mask-img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mask-stage .mask-paint { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
.mask-tools { display: flex; align-items: center; gap: .9rem; margin-top: .9rem; flex-wrap: wrap; }
.mask-brush { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--muted); }
.mask-brush input { accent-color: #1e1e22; }
.mask-clearall {
  padding: .4rem .8rem; font: inherit; font-size: .8rem; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 9px; cursor: pointer;
}
.mask-actions { margin-left: auto; display: flex; gap: .5rem; }
.mask-cancel {
  padding: .5rem .9rem; font: inherit; font-size: .82rem; color: var(--muted);
  background: none; border: 1px solid var(--line-2); border-radius: 10px; cursor: pointer;
}
.mask-save {
  padding: .5rem 1.1rem; font: inherit; font-size: .82rem; font-weight: 700; color: var(--on-accent);
  background: var(--split); border: none; border-radius: 10px; cursor: pointer;
}
.gal-head {
  display: flex; align-items: baseline; gap: .8rem;
  margin-bottom: 1.2rem; padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.gal-title { font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; }
.gal-sub { color: var(--muted); font-size: .82rem; }
.gal-close {
  margin-left: auto; align-self: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .07); border: none; color: var(--muted);
  font-size: 1.15rem; cursor: pointer; line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.gal-close:hover { color: var(--text); background: rgba(255, 255, 255, .14); }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; }
.gal-grid img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
  transition: border-color .15s ease, transform .18s ease, box-shadow .18s ease;
}
.gal-grid img:hover {
  border-color: var(--neon); transform: translateY(-3px) scale(1.015);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0,0,0, .25);
}
.gal-empty { color: var(--muted); font-size: .9rem; padding: 1.4rem 0; text-align: center; }

/* ── Gallery view: everything ever generated, newest first ── */
.view-gallery.active { flex-direction: column; overflow-y: auto; padding: 1.5rem 2rem 2.5rem; }
.gallery-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem .8rem; margin-bottom: 1.3rem; }
.gallery-title { font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 700; font-size: 1.45rem; letter-spacing: -.02em; }
.gallery-sub { color: var(--muted); font-size: .85rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .9rem; }
.g-item {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-2); background: #101016;
  transition: border-color .15s ease, transform .18s ease, box-shadow .18s ease;
  /* Scroll perf (owner 2026-07-16: "laggy scrolling"): skip layout/paint/
     decode for off-screen cards — a page of <video> elements otherwise keeps
     every decoder + full-res original live at once. The intrinsic size keeps
     the scrollbar from jumping while cards are skipped. */
  content-visibility: auto;
  contain-intrinsic-size: 280px 190px;
}
.g-item:hover { border-color: var(--neon); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.g-item img, .g-item video { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; cursor: pointer; }
.g-item:has(.au-card) { align-self: start; }
/* Custom audio card (owner 2026-07-16: native <audio controls> read as
   broken): brand equalizer bars that dance while playing, gradient
   play/pause, seekable track, tabular time. */
.au-card { display: flex; flex-direction: column; gap: .8rem; padding: 1rem .95rem .85rem; }
.au-card audio { display: none; }
.au-viz { display: flex; align-items: flex-end; gap: 3px; height: 44px; padding: 0 .1rem; }
.au-viz i { flex: 1; height: 22%; border-radius: 2px; background: linear-gradient(180deg, #1e1e22, #000000); opacity: .3; transform-origin: bottom; transition: opacity .25s ease; }
.au-viz i:nth-child(2n) { height: 46%; }
.au-viz i:nth-child(3n) { height: 68%; }
.au-viz i:nth-child(4n) { height: 34%; }
.au-viz i:nth-child(5n) { height: 88%; }
.au-viz i:nth-child(7n) { height: 56%; }
.au-card.playing .au-viz i { opacity: .95; animation: auDance .9s ease-in-out infinite alternate; }
@keyframes auDance { from { transform: scaleY(.35); } to { transform: scaleY(1.12); } }
.au-row { display: flex; align-items: center; gap: .6rem; }
.au-play { width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--split); color: var(--on-accent); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; transition: transform .12s ease; }
.au-play:hover { transform: scale(1.07); }
.au-play svg { width: 15px; height: 15px; }
.au-ic-pause { display: none; }
.au-card.playing .au-ic-play { display: none; }
.au-card.playing .au-ic-pause { display: block; }
.au-track { flex: 1; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .1); cursor: pointer; }
.au-fill { height: 100%; width: 0%; border-radius: 99px; background: var(--split); }
.au-time { font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-actions {
  position: absolute; top: 7px; right: 8px; display: flex; gap: .35rem;
  opacity: 0; transition: opacity .15s ease; z-index: 2;
}
.g-item:hover .g-actions { opacity: 1; }
.g-btn {
  background: rgba(0, 0, 0, .6); border: none; color: #fff; font-size: .85rem;
  border-radius: 8px; padding: .28rem .55rem; cursor: pointer; text-decoration: none;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.g-btn:hover { background: rgba(0, 0, 0, .8); }
.g-prompt {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 1.4rem .75rem .5rem; font-size: .74rem; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .82));
  opacity: 0; transition: opacity .15s ease; pointer-events: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.g-item:hover .g-prompt { opacity: 1; }
.gallery-empty { color: var(--muted); font-size: .95rem; padding: 3rem 0; text-align: center; }

/* Gallery controls: filter chips + sort — on their OWN row under the title,
   so they clear the fixed top-right credit pill / avatar instead of colliding. */
.gallery-controls { width: 100%; margin-top: .9rem; display: flex; align-items: center; gap: .7rem; }
/* Underline tabs: plain text, active gets a pink→amber underline. */
.g-filters { display: inline-flex; gap: 1.5rem; }
.g-chip {
  background: none; border: none; color: var(--muted);
  font-weight: 600; font-size: .92rem; padding: .2rem 0 .5rem;
  position: relative; cursor: pointer; transition: color .15s ease;
}
.g-chip:hover { color: var(--text); }
.g-chip.active { color: var(--text); }
.g-chip.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px; background: var(--split);
}
.g-sort { border-radius: 99px; padding: .45rem .9rem; font-size: .82rem; margin-left: auto; }
/* Import-from-link box + Import button (the product-page URL pattern, reborn
   in the gallery — owner's ask 2026-07-16). */
.gi-url { display: flex; align-items: center; gap: .5rem; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 12px; padding: .15rem .15rem .15rem .7rem; min-width: 230px; max-width: 340px; flex: 1; }
.gi-url:focus-within { border-color: rgba(0, 0, 0, .5); }
.gi-ico { color: var(--muted); display: inline-flex; }
.gi-ico svg { width: 14px; height: 14px; }
.gi-url input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font: inherit; font-size: .84rem; padding: .42rem 0; }
.gi-url input::placeholder { color: rgba(237, 234, 243, .4); }
/* A hair wider + the ✦3 shown up front (same call as the old product box): a
   walled page auto-falls-back to the paid AI lookup, so the button says the
   worst-case price. A clean fetch still charges nothing. */
.gi-go { flex-shrink: 0; height: 30px; border-radius: 9px; border: none; background: var(--split); color: var(--on-accent); font-size: .95rem; font-weight: 700; cursor: pointer; transition: transform .12s ease; display: flex; align-items: center; gap: .25rem; padding: 0 .55rem; }
.gi-go-cr { font-size: .7rem; font-weight: 800; letter-spacing: .02em; }
.gi-go:hover:not(:disabled) { transform: translateY(-1px); }
.gi-go:disabled { opacity: .6; cursor: default; }
.g-import { border-radius: 99px; padding: .45rem .9rem; font-size: .82rem; white-space: nowrap; }

/* Attached-clip slot: first-frame thumbnail + a small duration tag. */
.attach-btn .clip-tag {
  position: absolute; left: 8px; bottom: 8px;
  background: rgba(8, 7, 12, .72); color: #fff;
  font-size: .7rem; font-weight: 700; padding: .2rem .45rem;
  border-radius: 7px; backdrop-filter: blur(4px); pointer-events: none;
}

/* Kind-aware library picker tiles: video + audio entries in the gal-grid. */
.gal-grid video {
  width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
  transition: border-color .15s ease, transform .18s ease, box-shadow .18s ease;
}
.gal-grid video:hover { border-color: var(--neon); transform: translateY(-2px); }
.gal-grid video.sel, .gal-grid .gal-audio-tile.sel { border-color: #1e1e22; box-shadow: 0 0 0 2px rgba(0,0,0, .55); }
.gal-audio-tile {
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 16/10; padding: .8rem; border-radius: 14px; cursor: pointer;
  background: var(--panel-2); border: 1px solid rgba(255, 255, 255, .14);
  color: var(--muted); font-size: .8rem; word-break: break-all;
  transition: border-color .15s ease, transform .18s ease;
}
.gal-audio-tile:hover { border-color: var(--neon); transform: translateY(-2px); color: var(--text); }

/* Bottom-center toast (sbToast) — import errors, storage warnings. */
.sb-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px);
  background: #ffffff; border: 1px solid var(--line-2); color: var(--text);
  font-size: .88rem; padding: .65rem 1rem; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  z-index: 400; max-width: min(520px, 90vw); text-align: center;
}
.sb-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Gallery storage usage bar ── */
.gallery-storage {
  display: flex; flex-direction: column; gap: .5rem;
  padding: .85rem 1rem; margin-bottom: 1.3rem;
  background: var(--panel, rgba(255,255,255,.03));
  border: 1px solid var(--line, rgba(255,255,255,.075)); border-radius: 14px;
}
.gs-row { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.gs-label { font-size: .82rem; font-weight: 600; color: var(--text); }
.gs-label .gs-tier {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--on-accent); background: var(--split); padding: .12rem .5rem; border-radius: 99px; margin-left: .5rem;
}
.gs-usage { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.gs-track { height: 7px; border-radius: 99px; background: rgba(0,0,0,.09); overflow: hidden; }
.gs-fill { height: 100%; border-radius: 99px; background: var(--split); transition: width .3s ease; }
.gs-fill.warn { background: linear-gradient(120deg, #ff9a4d, #ffd24d); }
.gs-fill.full { background: linear-gradient(120deg, #ff5d7a, #ff9a4d); }
.gs-note { font-size: .78rem; color: var(--muted); }
.gs-note a, .gs-cta {
  color: var(--pink); font-weight: 600; cursor: pointer; text-decoration: none;
  background: none; border: none; font: inherit; padding: 0;
}
.gs-cta:hover { text-decoration: underline; }

/* ── Model picker: logo rows with spec chips (Higgsfield-style) ── */
.model-menu.drop-up.model-drop { min-width: 345px; }
.m-search {
  width: 100%; box-sizing: border-box; display: block;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 10px;
  color: var(--text); font: inherit; font-size: .88rem;
  padding: .55rem .8rem; margin-bottom: .3rem; outline: none;
}
.m-search::placeholder { color: var(--muted); }
.m-search:focus { border-color: rgba(0,0,0,.3); }
.m-section {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; padding: .45rem .5rem .4rem;
  background: var(--split); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Each row carries its provider's brand colour in --prov, used for the icon
   tile, hover wash and selected accent so the list reads colourful, not flat. */
.model-item.m-row {
  position: relative; display: flex; align-items: center; gap: .7rem;
  padding: .5rem .55rem; overflow: hidden;
}
.model-item.m-row:hover {
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--prov, #fff) 13%, transparent), transparent 62%);
}
.model-item.m-row.selected {
  background: linear-gradient(100deg, rgba(0,0,0, .12), rgba(0,0,0, .07));
}
.model-item.m-row.selected::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--split);
}
.m-ico {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px;
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--prov, #8a8a92) 26%, transparent), transparent 70%),
    #17171d;
  border: 1px solid color-mix(in srgb, var(--prov, #8a8a92) 34%, var(--line));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--prov, #000) 18%, transparent);
  display: grid; place-items: center;
}
/* The real monochrome brand mark, rendered crisp near-white so each provider's
   actual logo reads clearly; the tile behind it carries the brand-colour glow. */
.m-logo {
  width: 22px; height: 22px; display: block;
  object-fit: contain;
}
.m-ico b { font-size: 1rem; color: var(--prov, var(--text)); font-weight: 800; }
.m-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .32rem; }
.m-title { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .92rem; flex-wrap: wrap; }
.m-title .spk { font-size: .72rem; opacity: .85; }
.m-badge {
  font-size: .58rem; font-weight: 800; letter-spacing: .05em;
  padding: .16rem .42rem; border-radius: 5px;
  background: var(--split); color: var(--on-accent);
  box-shadow: 0 0 12px rgba(255, 150, 120, .35);
}
.m-tag {
  font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line-2);
  padding: .13rem .4rem; border-radius: 5px;
}
.m-tag.cheap {
  color: #4ade80; border-color: rgba(74, 222, 128, .4);
  background: rgba(74, 222, 128, .12);
}
.m-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.m-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .68rem; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
  padding: .13rem .45rem;
}
.m-chip:first-child {
  color: color-mix(in srgb, var(--neon) 85%, #fff);
  border-color: rgba(0,0,0, .32);
  background: rgba(0,0,0, .1);
}

/* ── Collapsed family rows + hover flyout ─────────────────────────── */
/* A group row (Seedance, Kling) shows the family + which variant is active;
   hovering it opens .model-flyout to the side with the individual models. */
.m-group .m-caret {
  flex: 0 0 auto; color: var(--muted); font-size: 1.3rem; font-weight: 700;
  line-height: 1; padding-right: .1rem; transition: color .15s, transform .15s;
}
.m-group:hover .m-caret { color: var(--text); transform: translateX(2px); }
/* the "N models" count chip stays neutral (override the neon first-child chip) */
.m-chip.m-count {
  color: var(--muted); border-color: var(--line); background: var(--panel-2);
}
/* active variant pill shown on the collapsed parent when one is selected */
.m-active {
  font-size: .62rem; font-weight: 700; letter-spacing: .02em;
  padding: .12rem .44rem; border-radius: 999px; color: var(--on-accent);
  background: var(--split);
}
.model-flyout {
  position: fixed; z-index: 210; display: none;
  min-width: 258px; max-width: 320px; padding: .3rem;
  background: #ffffff; border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .16);
  animation: menu-pop .16s ease;
}
.model-flyout .m-row { padding: .45rem .5rem; }
.model-flyout .m-ico { width: 34px; height: 34px; flex-basis: 34px; border-radius: 9px; }
.model-flyout .m-logo { width: 19px; height: 19px; }

/* Credit balance pill above the account row. */
.side-credits {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-weight: 700; font-size: .86rem; color: var(--text);
  background: linear-gradient(130deg, rgba(0,0,0, .14), rgba(0,0,0, .14));
  border: 1px solid rgba(0, 0, 0, .3);
  border-radius: 99px; padding: .3rem .75rem; margin-bottom: .6rem;
  font-variant-numeric: tabular-nums;
}

/* ── Get-credits overlay ── */
.credits-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(15, 15, 18, .5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
.cp-box {
  width: min(92vw, 460px);
  background: #ffffff; border: 1px solid var(--line-2); border-radius: 20px;
  padding: 1.2rem 1.3rem 1.3rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}
.cp-head { display: flex; align-items: center; }
.cp-title { font-weight: 700; font-size: 1.05rem; }
.cp-close {
  margin-left: auto; background: none; border: none; color: var(--muted);
  font-size: 1rem; cursor: pointer; padding: .2rem .45rem; border-radius: 7px;
}
.cp-close:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
.cp-sub { color: var(--muted); font-size: .85rem; margin: .35rem 0 1rem; }
.cp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.cp-card {
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 14px;
  padding: .95rem .5rem; cursor: pointer; text-align: center;
  transition: transform .15s ease, border-color .15s ease;
}
.cp-card:hover { transform: translateY(-2px); border-color: rgba(0, 0, 0, .45); }
.cp-credits { font-weight: 800; font-size: 1rem; color: var(--text); }
.cp-usd {
  margin-top: .35rem; font-weight: 700; font-size: .92rem;
  background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cp-note { margin-top: .8rem; color: var(--muted); font-size: .82rem; min-height: 1.1em; }
.side-credits { cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.side-credits:hover { border-color: rgba(0, 0, 0, .55); transform: translateY(-1px); }

/* Membership cards */
.cp-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cp-plan { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.cp-per { font-size: .72rem; font-weight: 600; color: var(--muted); margin-left: 2px; }
.cp-card { position: relative; }
.cp-best { border-color: rgba(0, 0, 0, .5); }
.cp-tag {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--split); color: var(--on-accent); border-radius: 99px; padding: .16rem .5rem; white-space: nowrap;
}

/* Top-up minis under the membership cards */
.cp-box { width: min(92vw, 540px); }
.cp-sec {
  margin: 1.1rem 0 .55rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
/* Top-ups-only view: quiet list (design E) */
.cp-box.cp-narrow { width: min(92vw, 440px); }
.cp-narrow .cp-list { margin-top: .3rem; }
.cp-lrow {
  width: 100%; display: flex; align-items: baseline; gap: 1rem; text-align: left;
  background: none; border: none; border-top: 1px solid var(--line-2);
  color: var(--text); font-family: inherit; cursor: pointer; padding: .85rem .2rem;
  transition: opacity .12s ease;
}
.cp-lrow:first-child { border-top: none; }
.cp-lrow:hover { opacity: .72; }
.cp-lcr { font-size: 1.02rem; font-weight: 600; }
.cp-lusd {
  margin-left: auto; font-size: 1.02rem; font-weight: 700;
  background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.cp-grid-5 { grid-template-columns: repeat(5, 1fr); gap: .45rem; }
.cp-mini { padding: .6rem .3rem; border-radius: 11px; }
.cp-mini .cp-credits { font-size: .78rem; }
.cp-mini .cp-usd { font-size: .8rem; margin-top: .25rem; }
@media (max-width: 560px) {
  .cp-grid { grid-template-columns: 1fr; }
  .cp-grid-5 { grid-template-columns: repeat(3, 1fr); }
}

/* ── Full "Upgrade your plan" pricing page (profile → Upgrade) ────────────── */
.up-overlay {
  align-items: flex-start; justify-content: center; overflow-y: auto; padding: 46px 20px;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(0,0,0, .07), transparent 60%),
    rgba(15, 15, 18, .5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: up-fade .22s ease both;
}
@keyframes up-fade { from { opacity: 0; } }
.cp-box.cp-wide {
  width: min(94vw, 1040px); position: relative; padding: 1.7rem 1.8rem 2rem;
  background: #ffffff;
  border: 1px solid var(--line-2);
  box-shadow: 0 44px 120px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
  animation: up-pop .34s cubic-bezier(.2, .9, .3, 1.1) both;
}
@keyframes up-pop { from { opacity: 0; transform: translateY(16px) scale(.985); } }
.up-close {
  position: absolute; top: 1rem; right: 1rem; margin-left: 0; z-index: 3;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04);
  padding: 0;
}
.up-close:hover { border-color: var(--line-2); }

/* Hero */
.up-promo {
  position: relative; border-radius: 20px; overflow: hidden;
  padding: 1.7rem 1.9rem; margin-bottom: 1.9rem;
  background: linear-gradient(135deg, rgba(0,0,0,.05), rgba(0,0,0,.02) 60%, rgba(0,0,0,.012));
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.up-promo::after {
  content: ''; position: absolute; top: -45%; right: -8%; width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(0,0,0, .2), transparent 70%);
  filter: blur(8px); pointer-events: none;
}
.up-tagrow { position: relative; z-index: 1; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.up-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--split); color: var(--on-accent); font-weight: 800; font-size: .62rem;
  letter-spacing: .08em; text-transform: uppercase; padding: .3rem .64rem; border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0, .3);
}
.up-count {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 600; color: rgba(11, 11, 14, .75);
  background: rgba(0, 0, 0, .05); border: 1px solid var(--line-2);
  border-radius: 999px; padding: .28rem .7rem;
}
.up-count b {
  font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 700; color: #111114;
  font-variant-numeric: tabular-nums;
}
.up-count i { width: 6px; height: 6px; border-radius: 999px; background: var(--purple); animation: up-pulse 1.6s ease-in-out infinite; }
@keyframes up-pulse { 50% { opacity: .3; } }
.up-promo-h {
  position: relative; z-index: 1; font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 1.95rem; font-weight: 700; margin: .75rem 0 .35rem; letter-spacing: -.02em; line-height: 1.05;
}
.up-grad { background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent; }
.up-promo-p { position: relative; z-index: 1; color: rgba(11, 11, 14, .62); font-size: .92rem; margin: 0; max-width: 560px; line-height: 1.55; }
.up-models { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .95rem; }
.up-mchip {
  font-size: .72rem; font-weight: 600; color: rgba(11, 11, 14, .72);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
  border-radius: 999px; padding: .28rem .62rem; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.up-hero-cta {
  position: relative; z-index: 1; display: inline-block; margin-top: 1.05rem;
  background: var(--split); color: var(--on-accent); border: none; border-radius: 12px;
  padding: .62rem 1.25rem; font-weight: 800; font-size: .88rem; cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0, .28); transition: transform .13s ease;
}
.up-hero-cta:hover { transform: translateY(-1px); }
.up-spark { position: absolute; z-index: 0; pointer-events: none; }
.up-spark.s1 { top: 18%; right: 15%; font-size: 1.15rem; color: rgba(0,0,0, .5); animation: up-float 5.5s ease-in-out infinite alternate; }
.up-spark.s2 { top: 58%; right: 7%; font-size: .8rem; color: rgba(0,0,0, .45); animation: up-float 4.2s ease-in-out .8s infinite alternate-reverse; }
@keyframes up-float { from { transform: translateY(-5px) rotate(-8deg); } to { transform: translateY(6px) rotate(10deg); } }

/* Trimmed promo: just the launch-offer pill + a big segmented countdown. */
.up-promo-timer { display: flex; flex-direction: column; align-items: center; gap: 1.15rem; text-align: center; }
.up-segs { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: .7rem; }
.up-seg {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  background: #111114; border: 1px solid var(--line-2); border-radius: 14px;
  padding: .75rem 1.05rem; min-width: 92px; box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
}
.up-seg b {
  font-family: 'Space Grotesk', Inter, sans-serif; font-variant-numeric: tabular-nums;
  font-size: 2.9rem; font-weight: 700; line-height: 1; color: #fff;
}
.up-seg span { font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.up-colon { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 2.2rem; font-weight: 700; color: rgba(0, 0, 0, .55); padding-bottom: 1.4rem; }
@media (max-width: 560px) {
  .up-seg { min-width: 68px; padding: .6rem .5rem; }
  .up-seg b { font-size: 2.1rem; }
  .up-colon { font-size: 1.6rem; padding-bottom: 1.15rem; }
}

/* Heading block (centered) */
.up-headwrap { text-align: center; margin-bottom: 1.7rem; }
.up-eyebrow {
  font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: .55rem;
}
.up-h1 { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 2rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .45rem; }
.up-sub { color: var(--muted); font-size: .95rem; margin: 0 auto; max-width: 560px; line-height: 1.5; }

/* Cards — each tier carries its own color identity (Plus neutral, Pro amber, Max pink) */
.up-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; align-items: stretch; margin-top: .5rem; }
.up-card {
  position: relative; border-radius: 20px; padding: 1.35rem 1.3rem 1.3rem; cursor: pointer; text-align: left;
  color: var(--text); font-family: inherit; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(0,0,0,.035), rgba(0,0,0,.015));
  border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  animation: up-rise .55s cubic-bezier(.2, .8, .3, 1) both;
}
.up-card:nth-child(1) { animation-delay: .08s; }
.up-card:nth-child(2) { animation-delay: .16s; }
.up-card:nth-child(3) { animation-delay: .24s; }
@keyframes up-rise { from { opacity: 0; transform: translateY(22px); } }
.up-card:hover { transform: translateY(-4px); box-shadow: 0 22px 54px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08); }
.up-card.t-plus {
  background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .025) 55%, rgba(255, 255, 255, .02));
  border-color: rgba(0, 0, 0, .34);
}
.up-card.t-plus:hover { border-color: rgba(0, 0, 0, .55); }
.up-card.t-pro {
  background: linear-gradient(180deg, rgba(0,0,0, .12), rgba(0,0,0, .04) 60%, rgba(255, 255, 255, .02));
  border-color: transparent;
}
.up-card.t-pro::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.4px;
  background: var(--split); opacity: .8;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
  transition: opacity .18s ease;
}
.up-card.t-pro:hover::before { opacity: 1; }
.up-card.t-max {
  background: linear-gradient(180deg, rgba(0,0,0, .14), rgba(0,0,0, .035) 55%, rgba(255, 255, 255, .02));
  border-color: rgba(0,0,0, .42);
}
.up-card.t-max:hover { border-color: rgba(0,0,0, .68); }
.up-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--split); color: var(--on-accent); font-size: .6rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: .26rem .66rem; border-radius: 999px;
  white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0, .35); z-index: 1;
}
.up-namerow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.up-pname { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 1.45rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.up-chip {
  font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .24rem .5rem; border-radius: 6px; white-space: nowrap;
}
.up-chip.off { background: #8a8a90; color: var(--on-accent); }
.t-pro .up-chip.off { background: var(--split); }
.t-max .up-chip.off { background: var(--neon); }
.up-chip.val { background: var(--split); color: var(--on-accent); }
.up-desc { color: var(--muted); font-size: .8rem; margin-top: .3rem; }
/* Inset credits box — what the credits actually buy */
.up-credbox {
  margin-top: .95rem; border-radius: 14px; padding: .85rem .95rem;
  background: rgba(0, 0, 0, .04); border: 1px solid var(--line);
}
.up-credmain { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 1.12rem; font-weight: 700; }
.up-star { background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent; }
.up-credeq { color: var(--muted); font-size: .78rem; margin-top: .32rem; padding-left: .15rem; }
.up-credroll {
  margin-top: .65rem; padding-top: .6rem; border-top: 1px solid var(--line);
  font-size: .75rem; color: #111114; text-align: center; font-weight: 600;
}
/* Price + CTA + savings strip */
.up-priceline { display: flex; align-items: baseline; gap: .5rem; margin: 1rem 0 .75rem; }
.up-strike {
  font-family: 'Space Grotesk', Inter, sans-serif; font-size: 1.1rem; font-weight: 700;
  color: rgba(11, 11, 14, .35); text-decoration: line-through;
}
.t-plus .up-strike { color: rgba(0, 0, 0, .72); }
.t-pro .up-strike { color: rgba(0,0,0, .75); }
.t-max .up-strike { color: rgba(0,0,0, .78); }
.up-pprice { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 1.9rem; font-weight: 700; letter-spacing: -.01em; }
.up-permo { font-size: .72rem; color: rgba(11, 11, 14, .62); }
.up-buy {
  width: 100%; text-align: center; border-radius: 12px; padding: .8rem;
  font-weight: 800; font-size: .95rem; background: var(--split); color: var(--on-accent);
  border: none; transition: filter .15s ease, transform .12s ease;
}
.up-card:hover .up-buy { transform: translateY(-1px); filter: brightness(1.07); }
.t-plus .up-buy { background: #1e1e22; box-shadow: 0 10px 28px rgba(0, 0, 0, .2); }
.t-pro .up-buy { background: var(--split); box-shadow: 0 10px 28px rgba(0,0,0, .28); }
.t-max .up-buy { background: var(--neon); box-shadow: 0 10px 28px rgba(0,0,0, .24); }
.up-save {
  margin-top: .55rem; text-align: center; font-size: .74rem; font-weight: 600;
  color: rgba(11, 11, 14, .55); background: rgba(0, 0, 0, .04);
  border-radius: 9px; padding: .45rem .5rem;
}
/* Feature matrix — check what you get, cross what the next tier adds */
.up-feat { list-style: none; padding: 0; margin: 1.05rem 0; display: flex; flex-direction: column; gap: .55rem; }
.up-feat li { font-size: .82rem; display: flex; gap: .55rem; align-items: flex-start; line-height: 1.4; }
.up-feat li.ok { color: #17171b; }
.up-feat li.ok::before { content: '\2713'; flex: none; font-weight: 900; color: #111114; }
.up-feat li.no { color: rgba(11, 11, 14, .52); }
.up-feat li.no::before { content: '\2715'; flex: none; font-weight: 700; color: rgba(11, 11, 14, .5); }
/* Model access panel */
.up-modelbox {
  margin-top: auto; border-radius: 14px; padding: .8rem .95rem;
  background: rgba(0, 0, 0, .04); border: 1px solid var(--line);
}
.up-mtitle { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.up-mrow { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; color: #17171b; padding: .34rem 0; }
.up-mrow + .up-mrow { border-top: 1px solid var(--line); }
.up-full {
  font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(0, 0, 0, .14); color: #111114; padding: .2rem .45rem; border-radius: 6px;
}
.up-note { text-align: center; }
.up-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem;
  margin-top: 1.7rem; color: rgba(11, 11, 14, .46); font-size: .8rem;
}
.up-trust span { position: relative; }
.up-trust span:not(:first-child):before {
  content: ''; position: absolute; left: -.76rem; top: 50%; transform: translateY(-50%);
  width: 3px; height: 3px; border-radius: 999px; background: linear-gradient(120deg, #1e1e22, #000000);
}
.up-topnote { margin-top: 1rem; text-align: center; color: var(--muted); font-size: .88rem; }
.up-topup-link {
  background: none; border: none; color: #111114; font-weight: 700; cursor: pointer;
  font-family: inherit; font-size: .88rem; padding: 0;
}
.up-topup-link:hover { text-decoration: underline; }

/* AI Orchestrator add-on band on the pricing page */
/* Membership add-ons — glowing ID-badge cards */
.addon-eyebrow {
  margin: 1.6rem 0 .8rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); text-align: center;
}
/* Two separate badge "envelopes" — each ID badge hangs from its built-in lanyard
   and gently SWAYS like it's dangling from a cord (pendulum around the strap at
   the top). The floor reflection is faded out so it reads as hanging, not
   standing. name/price/Add below. */
.addon-env-row { display: flex; gap: 1.4rem; align-items: stretch; }
.addon-env {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .45rem;
  padding: 1rem 1.15rem 1.15rem; border-radius: 18px;
  background: rgba(255, 255, 255, .022); border: 1px solid var(--line);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.addon-env:hover {
  transform: translateY(-3px); border-color: rgba(0,0,0, .28);
  box-shadow: 0 18px 44px -22px rgba(0,0,0, .5);
}
/* Real badge photo with its background keyed out to true transparency, so it
   sits on the card as part of it on any page background. It hangs from its
   lanyard and gently sways; the stage carries the pink→amber glow. */
.addon-env-badge {
  position: relative; display: grid; place-items: start center; margin-bottom: .35rem;
  padding: .1rem .5rem 1.2rem; border-radius: 16px; overflow: visible; cursor: pointer;
  background: none;
}
.apb {
  max-height: 260px; width: auto; display: block;
  filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .45)) brightness(1.05);
  /* Swing from the top of the lanyard, like a real hanging badge. */
  transform-origin: 50% 2%;
  animation: apb-sway 5.2s ease-in-out infinite;
  will-change: transform;
}
/* The second badge swings on an offset + different period so the pair dangles
   independently instead of in lockstep. */
.apb.b { animation-delay: -2.7s; animation-duration: 5.8s; }
@keyframes apb-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
/* Click feedback: a damped pendulum "kick" that overrides the idle sway, then
   hands back to it on animationend. */
.apb.kick { animation: apb-kick .9s cubic-bezier(.3, .5, .2, 1) !important; }
@keyframes apb-kick {
  0%   { transform: rotate(0deg); }
  14%  { transform: rotate(-17deg); }
  32%  { transform: rotate(12deg); }
  50%  { transform: rotate(-8deg); }
  68%  { transform: rotate(5deg); }
  84%  { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .apb, .apb.kick { animation: none !important; } }
.addon-badge-name {
  font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 700; font-size: 1.06rem;
  letter-spacing: -.01em; display: flex; align-items: center; gap: .5rem;
}
.addon-tag {
  font-family: Inter, sans-serif; font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: .16rem .42rem; border-radius: 6px; white-space: nowrap; flex: none;
  background: rgba(0,0,0, .14); color: #000000; border: 1px solid rgba(0,0,0, .28);
}
.addon-badge-name { flex-wrap: wrap; }
.addon-tag.soon { background: rgba(255, 255, 255, .06); color: var(--muted); border-color: var(--line-2); }
.addon-badge-desc { font-size: .82rem; color: var(--muted); line-height: 1.45; }
.addon-badge-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; gap: .6rem; }
.addon-badge-price { font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }
.addon-badge-price small { color: var(--muted); font-weight: 600; font-size: .78rem; margin-left: .1rem; }
.addon-badge-buy {
  flex-shrink: 0; border: none; border-radius: 11px; padding: .58rem 1.05rem; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: .9rem; color: var(--on-accent);
  background: linear-gradient(120deg, #1e1e22, #000000); transition: transform .12s ease, box-shadow .2s ease;
}
.addon-badge-buy:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -8px rgba(0,0,0, .55); }
@media (max-width: 640px) { .addon-env-row { flex-direction: column; } }

/* AI Orchestrator upsell modal */
.orch-up { text-align: left; padding-top: 1.6rem; }
.orch-up-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.orch-up-spark { font-size: 1.1rem;
  background: linear-gradient(120deg, #1e1e22, #000000); -webkit-background-clip: text; background-clip: text; color: transparent; }
.orch-up-name { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.orch-up-price { margin-left: auto; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(120deg, #1e1e22, #000000); -webkit-background-clip: text; background-clip: text; color: transparent; }
.orch-up-price span { font-size: .78rem; color: var(--muted); -webkit-text-fill-color: var(--muted); font-weight: 600; }
.orch-up-lead { font-size: .9rem; color: var(--ink-2, #b6afc1); line-height: 1.5; margin: 0 0 1rem; }
.orch-up-feat { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .5rem; }
.orch-up-feat li { position: relative; padding-left: 1.5rem; font-size: .88rem; color: var(--text); }
.orch-up-feat li::before { content: "✓"; position: absolute; left: 0; font-weight: 800;
  background: linear-gradient(120deg, #1e1e22, #000000); -webkit-background-clip: text; background-clip: text; color: transparent; }
.orch-up-buy {
  width: 100%; border: none; border-radius: 12px; padding: .85rem; cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: .98rem; color: var(--on-accent);
  background: linear-gradient(120deg, #1e1e22, #000000); transition: transform .12s ease;
}
.orch-up-buy:hover { transform: translateY(-1px); }
.orch-up-fine { font-size: .78rem; color: var(--muted); line-height: 1.45; margin: .9rem 0 0; }

@media (max-width: 820px) {
  .up-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* (Memory FAB + "space" page removed — universal taste-memory is backend-only.) */

/* ── Public marketing landing (#marketing) ─────────────────────────────────
   Shown to logged-out visitors before the auth gate. Self-contained .mkt-*.
   Morphic-style: dark cinematic, filmstrip of output, two-tone headings.
   Media slots: /mkt/f1…f14.jpg (filmstrip) · /mkt/p1…p8.jpg (presets). */
.mkt{position:fixed;inset:0;z-index:60;overflow-y:auto;overflow-x:hidden;
  background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;scroll-behavior:smooth}
.mkt *,.mkt *::before,.mkt *::after{box-sizing:border-box}
.mkt img{max-width:100%}
.mkt button{font-family:inherit}
.mkt a{color:inherit;text-decoration:none}

/* ---- shared type ---- */
.mkt-h2{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;
  font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 .9rem}
.mkt-h2 b{display:block;font-weight:700;color:var(--text)}
.mkt-h2 span{display:block;font-weight:700;color:rgba(237,234,243,.38)}
.mkt-h2-sub{color:var(--muted);font-size:clamp(.95rem,1.4vw,1.08rem);max-width:34rem;margin:0}
.mkt-sec-head{margin-bottom:2.2rem}
.mkt-sec-head.mkt-center{text-align:center}
.mkt-sec-head.mkt-center .mkt-h2-sub{margin:0 auto}
.mkt-grad{background:var(--split);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- buttons ---- */
.mkt-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--split);color:#14060d;border:none;border-radius:999px;cursor:pointer;
  font-weight:700;font-size:.95rem;padding:.85rem 1.7rem;letter-spacing:.01em;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 8px 32px rgba(0,0,0,.28),0 2px 12px rgba(0,0,0,.22);
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
.mkt-cta:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 14px 44px rgba(0,0,0,.4),0 4px 18px rgba(0,0,0,.3)}
.mkt-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--panel);color:var(--text);border:1px solid var(--line-2);border-radius:999px;
  cursor:pointer;font-weight:600;font-size:.95rem;padding:.85rem 1.6rem;
  transition:border-color .25s,background .25s,transform .25s}
.mkt-ghost:hover{border-color:rgba(255,255,255,.28);background:var(--panel-2);transform:translateY(-2px)}
.mkt-big{font-size:1rem;padding:.95rem 1.9rem}

/* ==========================================================================
   Nav
   ========================================================================== */
.mkt-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:.85rem clamp(1.1rem,4vw,3rem);
  background:rgba(8,7,12,.6);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line)}
.mkt-brand{display:flex;align-items:center;gap:.55rem;
  font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;font-size:1.25rem;letter-spacing:-.02em}
.mkt-brand .logo-mark{width:28px;height:28px;border-radius:8px}
.mkt-links{display:flex;align-items:center;gap:clamp(.8rem,2.2vw,1.6rem)}
.mkt-links a{color:var(--muted);font-size:.9rem;font-weight:500;transition:color .2s}
.mkt-links a:hover{color:var(--text)}
.mkt-signin{background:none;border:none;color:var(--muted);font-size:.9rem;font-weight:500;
  cursor:pointer;padding:.4rem .2rem;transition:color .2s}
.mkt-signin:hover{color:var(--text)}
.mkt-nav .mkt-cta{padding:.55rem 1.2rem;font-size:.86rem}

/* ==========================================================================
   Hero — compact, left-aligned, filmstrip right below (Morphic)
   ========================================================================== */
.mkt-hero{position:relative;isolation:isolate;
  padding:clamp(3.4rem,8vh,5.5rem) clamp(1.1rem,4vw,3rem) clamp(2rem,4vh,3rem)}
.mkt-hero::before{content:"";position:absolute;inset:-40% -10% auto;height:130%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46% 60% at 18% 30%,rgba(0,0,0,.13),transparent 70%),
    radial-gradient(40% 55% at 78% 16%,rgba(0,0,0,.09),transparent 70%)}
.mkt-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);align-items:end;max-width:1180px;margin:0 auto}
.mkt-badge{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1.4rem;
  padding:.42rem 1rem;border:1px solid var(--line-2);border-radius:999px;
  background:rgba(255,255,255,.03);
  font-size:.78rem;font-weight:600;letter-spacing:.05em;color:var(--text)}
.mkt-badge b{color:var(--neon);font-weight:700}
.mkt-h1{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;margin:0;
  font-size:clamp(2.6rem,6.6vw,5.2rem);line-height:.98;letter-spacing:-.045em}
.mkt-h1 .mkt-grad{background:linear-gradient(115deg,var(--purple) 15%,var(--neon) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 30px rgba(0,0,0,.28))}
.mkt-hero-side{padding-bottom:.3rem}
.mkt-sub{margin:0 0 1.5rem;color:rgba(237,234,243,.72);
  font-size:clamp(.95rem,1.4vw,1.08rem);line-height:1.6;max-width:30rem}
.mkt-cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:.8rem}
.mkt-free-note{color:var(--muted);font-size:.83rem;margin:0}
.mkt-free-note b{color:var(--neon);font-weight:600}

/* ==========================================================================
   Filmstrip — two drifting rows of output frames (media slots /mkt/f*.jpg)
   ========================================================================== */
.mkt-strip{padding:0 0 .4rem}
.mkt-strip-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  max-width:1180px;margin:0 auto .9rem;padding:0 clamp(1.1rem,4vw,3rem)}
.mkt-strip-lbl{font-size:.8rem;font-weight:700;letter-spacing:.08em;color:var(--text)}
.mkt-strip-note{font-size:.78rem;color:var(--muted)}
.mkt-strip-row{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.mkt-strip-row + .mkt-strip-row{margin-top:.6rem}
.mkt-strip-track{display:flex;width:max-content;animation:mkt-drift 64s linear infinite}
.mkt-strip-row.mkt-rev .mkt-strip-track{animation:mkt-drift 74s linear infinite reverse}
.mkt-strip-row:hover .mkt-strip-track{animation-play-state:paused}
@keyframes mkt-drift{to{transform:translateX(-50%)}}
.mkt-cell{position:relative;flex:0 0 auto;width:min(268px,44vw);aspect-ratio:16/9;
  margin-right:.6rem;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:#100e16}
.mkt-cell::after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;
  font-size:1rem;color:rgba(237,234,243,.14)}
.mkt-cell-img{position:absolute;inset:0;z-index:1;background-size:cover;background-position:center}
/* a real AI-made clip playing among the stills (the first filmstrip cell) */
.mkt-cell-vid{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;display:block}
/* tap-to-unmute button, top-right of the video tile */
.mkt-vid-sound{position:absolute;top:7px;right:7px;z-index:4;width:26px;height:26px;padding:0;
  display:grid;place-items:center;cursor:pointer;color:#fff;border-radius:50%;
  background:rgba(10,8,14,.5);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .15s ease,transform .15s ease,color .15s ease}
.mkt-vid-sound:hover{background:rgba(10,8,14,.82);transform:scale(1.08)}
.mkt-vid-sound svg{display:block}
.mkt-vid-sound .ico-on{display:none}
.mkt-vid-sound.on{color:var(--on-accent);background:var(--split);border-color:transparent}
.mkt-vid-sound.on .ico-on{display:block}
.mkt-vid-sound.on .ico-off{display:none}
/* placeholder duotones — covered the moment a real frame lands in /mkt/ */
.mkt-c1{background:radial-gradient(120% 130% at 20% 0%,rgba(0,0,0,.24),rgba(139,92,246,.14) 50%,#141021 85%)}
.mkt-c2{background:radial-gradient(120% 130% at 80% 10%,rgba(0,0,0,.2),rgba(200,90,50,.1) 50%,#181119 85%)}
.mkt-c3{background:radial-gradient(120% 140% at 50% 110%,rgba(90,140,255,.18),rgba(60,80,160,.1) 45%,#0f1220 85%)}
.mkt-c4{background:radial-gradient(130% 120% at 10% 90%,rgba(80,200,170,.14),rgba(40,110,110,.08) 50%,#0e1618 85%)}
.mkt-c5{background:radial-gradient(120% 130% at 90% 90%,rgba(255,90,110,.18),rgba(160,50,90,.1) 50%,#190f16 85%)}
.mkt-c6{background:radial-gradient(120% 140% at 30% 20%,rgba(190,160,255,.18),rgba(110,80,200,.1) 50%,#131022 85%)}
.mkt-c7{background:radial-gradient(130% 120% at 70% 0%,rgba(255,210,120,.18),rgba(190,120,50,.1) 50%,#171208 85%)}
.mkt-c8{background:radial-gradient(120% 130% at 15% 15%,rgba(120,220,255,.16),rgba(60,130,180,.09) 50%,#0d151d 85%)}
.mkt-c9{background:radial-gradient(120% 130% at 85% 20%,rgba(0,0,0,.2),rgba(0,0,0,.1) 55%,#170f18 85%)}
.mkt-c10{background:radial-gradient(130% 130% at 50% 0%,rgba(140,255,170,.12),rgba(60,140,90,.08) 50%,#0e1712 85%)}
.mkt-c11{background:radial-gradient(120% 140% at 25% 100%,rgba(255,150,80,.18),rgba(190,80,60,.1) 50%,#1a1210 85%)}
.mkt-c12{background:radial-gradient(120% 130% at 75% 100%,rgba(150,120,255,.18),rgba(90,70,190,.1) 50%,#120f1f 85%)}
.mkt-c13{background:radial-gradient(130% 120% at 90% 50%,rgba(255,220,160,.14),rgba(180,140,80,.08) 50%,#171408 85%)}
.mkt-c14{background:radial-gradient(120% 130% at 10% 40%,rgba(255,110,160,.18),rgba(170,60,120,.1) 50%,#180e15 85%)}

/* ==========================================================================
   Lead hero — chatbox + chips on the left; the picked kind's output on the
   right (vertical filmstrip for video/image, live demos for website).
   ========================================================================== */
.mkt-lead{position:relative;isolation:isolate;display:flex;align-items:center;
  gap:clamp(1.5rem,4vw,3rem);min-height:min(90vh,900px);overflow:hidden;
  padding-left:clamp(1.2rem,6vw,5rem)}
.mkt-lead::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(42% 52% at 22% 40%,rgba(0,0,0,.14),transparent 70%),
    radial-gradient(46% 52% at 80% 58%,rgba(0,0,0,.1),transparent 72%)}
.mkt-lead-copy{flex:0 0 clamp(360px,38%,500px);padding:4.5rem 0 2rem}
.mkt-lead-h1{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;letter-spacing:-.03em;line-height:1.03;
  font-size:clamp(2.3rem,4.6vw,3.7rem);margin:.35rem 0 0}
.mkt-lead-h1 em{font-style:normal;background:var(--split);-webkit-background-clip:text;background-clip:text;color:transparent}
.mkt-lead-sub{color:rgba(237,234,243,.72);font-size:clamp(.98rem,1.4vw,1.12rem);line-height:1.6;
  max-width:30rem;margin:1rem 0 0}
/* the lead composer — the straight chatbox, full column width, wrapping text.
   Shorter top/bottom than the app composer (same width). */
.mkt-composer-lead{margin:0;max-width:none;padding:0}
.mkt-composer-lead .composer{padding:.9rem 1rem .75rem 1.3rem;gap:.5rem}
.mkt-composer-lead .mkt-fauxinput{white-space:normal;overflow:visible;align-items:flex-start;
  padding:.25rem 0 .35rem;font-size:1rem;line-height:1.5;font-weight:500}
.mkt-composer-lead .mkt-typebox-caret{align-self:flex-start;margin-top:.15rem}
/* output pickers — small rounded-square tiles fanned in a gentle arc over the
   chatbox (per the owner's sketch). Icon squircle + small label; active tile
   lifts and fills with the gradient. Game/Music are SOON teasers. */
/* a true semicircle over the chatbox: tiles positioned on a half-circle
   (x = R·cosθ, y = −R·sinθ at 180/135/90/45/0°), centered on the column so the
   dome sits symmetric over the box below. */
.mkt-picks{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:.7rem;margin:3.9rem 0 -1.7rem}
.mkt-pick{display:flex;flex-direction:column;align-items:center;gap:.4rem;width:64px;flex:0 0 auto;
  background:none;border:0;padding:0;cursor:pointer;color:var(--muted);font-family:inherit}
.mkt-pick .pk{position:relative;width:54px;height:54px;border-radius:18px;display:grid;place-items:center;
  border:1px solid var(--line-2);color:var(--muted);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  box-shadow:0 8px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.09);
  transition:transform .3s cubic-bezier(.34,1.45,.5,1),box-shadow .3s ease,
    border-color .3s ease,background .3s ease,color .3s ease}
.mkt-pick .pk svg{width:21px;height:21px}
.mkt-pick .pl{font-size:.58rem;font-weight:600;letter-spacing:.02em;white-space:nowrap;transition:color .3s ease}
.mkt-pick:hover .pk{transform:translateY(-4px);border-color:rgba(255,255,255,.32);color:var(--text)}
.mkt-pick:focus-visible{outline:none}
.mkt-pick:focus-visible .pk{border-color:var(--neon);box-shadow:0 0 0 3px rgba(0,0,0,.35)}
.mkt-pick.mkt-on{color:var(--text)}
.mkt-pick.mkt-on .pk{border-color:transparent;color:#14060d;background:var(--split);
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 16px 36px rgba(0,0,0,.32),0 5px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5)}
/* coming-soon tiles — visible but quiet */
.mkt-pick.mkt-soon{cursor:default;opacity:.42}
.mkt-pick.mkt-soon:hover .pk{transform:none;border-color:var(--line-2);color:var(--muted)}
.pk-soon{position:absolute;top:-7px;right:-10px;padding:.11rem .34rem;border-radius:999px;
  font-size:.44rem;font-weight:800;letter-spacing:.08em;font-style:normal;color:#14060d;
  background:var(--split)}
.mkt-lead-copy .mkt-free-note{margin-top:1.2rem}

/* stage — panels stacked, one visible at a time */
.mkt-lead-stage{flex:1;position:relative;align-self:stretch;overflow:hidden}
.lp-panel{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s ease}
.lp-panel.mkt-on{opacity:1;visibility:visible}

/* vertical filmstrip (video/image) — reuses .mkt-cell/.mkt-cN, drifting slowly */
.lp-film{display:flex;gap:1rem;justify-content:center;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent)}
/* Spacing lives on each cell's bottom margin (not container gap) so the doubled
   content is an exact 2x and translateY(-50%) wraps seamlessly — the tiles
   (video included) cycle around endlessly with no jump at the loop point. */
.lp-col{display:flex;flex-direction:column;flex:0 0 auto;will-change:transform}
.lp-col.lp-up{animation:mkt-vdrift 12.8s linear infinite}
.lp-col.lp-down{animation:mkt-vdrift 14.8s linear infinite reverse}
/* --vdrift is set in JS to the EXACT pixel height of one copy (measured), so the
   wrap lands perfectly on the seam — a plain -50% is off by the uncounted last
   margin and jumps. Falls back to -50% before JS measures. */
@keyframes mkt-vdrift{to{transform:translateY(var(--vdrift,-50%))}}
/* pause-on-hover is driven from JS via the Web Animations API (initCrtStage) so
   it reliably stops on the compositor thread too — a CSS :hover play-state pause
   can leave a GPU-composited animation still painting on some laptops. */
.lp-col .mkt-cell{margin:0 0 .7rem;width:min(268px,25vw)}
.lp-badge{position:absolute;top:.4rem;left:.4rem;z-index:2;display:none;align-items:center;gap:.25rem;
  padding:.16rem .5rem;border-radius:999px;font-size:.6rem;font-weight:700;color:#14060d;
  background:linear-gradient(120deg,#ffce8a,var(--neon))}
.mkt-lead-stage.cat-video .lp-badge{display:inline-flex}

/* website — live demos, cascaded + bigger */
.lp-web{display:flex;align-items:center;justify-content:center;padding:1rem}
.mb-cascade-lead{--sc:.64}

/* voice placeholder */
.lp-voice{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.1rem;color:var(--muted)}
.lp-wave{display:flex;align-items:center;gap:5px;height:120px}
.lp-wave i{display:block;width:6px;border-radius:4px;background:var(--split);animation:mkt-vwav 1s ease-in-out infinite alternate}
@keyframes mkt-vwav{from{height:16%}to{height:80%}}
.lp-voice-note{font-size:.85rem;letter-spacing:.02em}

@media (max-width:900px){
  .mkt-lead{flex-direction:column;align-items:stretch;min-height:0;padding:5.5rem clamp(1.1rem,4vw,2rem) 2rem}
  .mkt-lead-copy{flex:auto;padding:0}
  .mkt-lead-stage{width:100%;min-height:440px;margin-top:1.6rem}
  .mb-cascade-lead{--sc:.42}
}

/* ==========================================================================
   Model marquee
   ========================================================================== */
.mkt-marquee-wrap{padding:2.6rem 0 .6rem;text-align:center}
.mkt-marquee-lbl{font-size:.7rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);margin:0 1rem 1rem}
.mkt-marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mkt-marquee-track{display:flex;width:max-content;align-items:center;
  animation:mkt-scroll 46s linear infinite;padding:1rem 0}
.mkt-marquee-track span{font-family:'Space Grotesk',Inter,sans-serif;font-weight:600;
  font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(237,234,243,.5);
  white-space:nowrap;padding:0 1.1rem}
.mkt-marquee-track i{font-style:normal;background:var(--split);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-size:.8rem}
@keyframes mkt-scroll{to{transform:translateX(-50%)}}

/* ==========================================================================
   How it works (zigzag steps) + trust trio — between the hero and pricing.
   Steps: floating gradient tile with a mini UI mock on one side, numbered
   copy on the other, sides alternating. Trio: soft glow orbs, airy + centered.
   ========================================================================== */
.mkt-how,.mkt-trust{max-width:1160px;margin:0 auto;
  padding:clamp(3.6rem,9vh,6.5rem) clamp(1.1rem,4vw,2rem) 0}
.mkt-how-steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  row-gap:clamp(2.4rem,5vh,3.6rem);column-gap:clamp(1rem,2.6vw,2rem);margin-top:2.2rem;align-items:start}
/* connector cord — sits behind the tiles so it tucks under them and shows in the gaps */
.mkt-cord{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.mkt-cord-path{fill:none;stroke:url(#mktCordGrad);stroke-width:2;stroke-linecap:round;
  opacity:.55;filter:drop-shadow(0 0 6px rgba(0,0,0,.35))}
@media (prefers-reduced-motion: no-preference){
  .mkt-cord-path{stroke-dasharray:7 9;animation:mkt-cord-flow 26s linear infinite}
}
@keyframes mkt-cord-flow{to{stroke-dashoffset:-320}}
/* each step is a vertical card: tile on top, number + phrase wheel below */
.mkt-step{position:relative;z-index:1;display:flex;flex-direction:column;gap:1.2rem;text-align:left}
.mkt-step-copy{max-width:none}
/* tiles — soft gradient washes, media-like rounded slabs */
.mkt-step-tile{position:relative;border-radius:26px;min-height:248px;display:flex;
  align-items:center;justify-content:center;padding:2.2rem;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.16)}
/* vivid, saturated sunset/aurora gradient washes — Liftoff-style */
.mkt-tile-a{background:radial-gradient(115% 125% at 8% 12%,rgba(0,0,0,.85),transparent 50%),
  radial-gradient(120% 135% at 96% 94%,rgba(255,150,74,.72),transparent 52%),
  radial-gradient(90% 110% at 60% 45%,rgba(255,90,160,.35),transparent 60%),linear-gradient(150deg,#2c1526,#150b16)}
.mkt-tile-b{background:radial-gradient(115% 125% at 94% 8%,rgba(151,120,255,.8),transparent 50%),
  radial-gradient(125% 135% at 6% 96%,rgba(0,0,0,.62),transparent 52%),
  radial-gradient(90% 110% at 45% 55%,rgba(120,110,255,.32),transparent 60%),linear-gradient(150deg,#1e1433,#110b1b)}
.mkt-tile-c{background:radial-gradient(115% 130% at 10% 92%,rgba(255,172,66,.85),transparent 50%),
  radial-gradient(120% 130% at 92% 8%,rgba(255,108,150,.66),transparent 52%),
  radial-gradient(90% 110% at 55% 45%,rgba(255,140,80,.34),transparent 60%),linear-gradient(150deg,#2c1b10,#150d0a)}
/* rotating frames — 3 stacked visuals per tile; smooth blur-cross-fade */
.mkt-frames{position:relative;width:min(100%,346px);min-height:150px;display:grid}
.mkt-frames>.mkt-frame{grid-area:1/1;opacity:0;transform:translateY(10px) scale(.975);filter:blur(7px);
  pointer-events:none;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.25,1),filter .9s ease}
.mkt-frames>.mkt-frame.on{opacity:1;transform:none;filter:none}
/* side phrase wheel — 3 phrases stacked vertically, active one centered & sharp,
   the two neighbours above/below blurred; the next slides up into the middle.
   Positions/opacity/blur are driven per-item by JS (initMktRotate). */
.mkt-wheel{position:relative;height:7.2rem;width:22rem;max-width:100%;margin:.2rem 0 .8rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent)}
.mkt-step-flip .mkt-wheel{margin-left:auto}
.mkt-wheel-item{position:absolute;left:0;right:0;top:50%;height:2.4rem;margin-top:-1.2rem;
  display:flex;align-items:center;
  font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.15rem,2.3vw,1.55rem);line-height:1.1;white-space:nowrap;color:var(--text);
  transition:transform .8s cubic-bezier(.2,.8,.25,1),opacity .8s ease,filter .8s ease}
.mkt-step-flip .mkt-wheel-item{justify-content:flex-end}
@media (prefers-reduced-motion: reduce){
  .mkt-frames>.mkt-frame{transition:opacity .25s ease;transform:none;filter:none}
  .mkt-wheel-item{transition:opacity .25s ease}
}
/* mini mocks — frosted glass panels that float off the vivid gradient */
.mkt-mock{width:min(100%,346px);display:flex;flex-direction:column;gap:.7rem}
.mkt-mock-input,.mkt-mock-line,.mkt-mock-media,.mkt-mock-saved,.mkt-mock-attach,.mkt-mock-wave{
  border:1px solid rgba(255,255,255,.16);background:rgba(14,10,20,.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 22px 48px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.22)}
.mkt-mock-input{position:relative;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.95);
  padding:.95rem 3rem .95rem 1.05rem;border-radius:15px}
.mkt-mock-send{position:absolute;right:.6rem;bottom:.6rem;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--split);color:#14060d;
  font-weight:800;font-size:.85rem;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.mkt-mock-line{font-size:.8rem;line-height:1.55;color:rgba(255,255,255,.95);
  padding:.9rem 1.05rem;border-radius:15px}
.mkt-mock-tags{display:flex;gap:.45rem;flex-wrap:wrap}
.mkt-mock-tags b,.mkt-mock-tags span{font-size:.7rem;font-weight:600;padding:.34rem .68rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.2);background:rgba(14,10,20,.5);color:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mkt-mock-tags b{color:#14060d;background:var(--split);border-color:transparent;font-weight:800;
  box-shadow:0 4px 14px rgba(0,0,0,.4)}
.mkt-mock-media{aspect-ratio:16/9;border-radius:15px;
  display:flex;align-items:center;justify-content:center}
.mkt-mock-play{width:0;height:0;border-left:17px solid rgba(255,255,255,.95);
  border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.mkt-mock-saved{align-self:center;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.92);
  padding:.42rem .9rem;border-radius:999px}
/* extra mock variants used by the rotating frames */
.mkt-mock-attach{align-self:flex-start;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.85);
  padding:.36rem .7rem;border-radius:10px}
.mkt-mock-link{color:rgba(255,255,255,.72)}
.mkt-mock-search{color:rgba(255,255,255,.7);font-weight:600}
.mkt-mock-img{background:
  radial-gradient(65% 75% at 30% 30%,rgba(0,0,0,.55),transparent 65%),
  radial-gradient(65% 80% at 78% 72%,rgba(120,110,255,.5),transparent 65%),#0c0912}
.mkt-mock-wave{aspect-ratio:16/9;border-radius:15px;padding:1rem 1.1rem;
  display:flex;align-items:center;gap:4px}
.mkt-mock-wave i{flex:1;max-width:6px;border-radius:3px;background:linear-gradient(180deg,#1e1e22,#000000);
  transform-origin:center;animation:mkt-wave 1.4s ease-in-out infinite}
.mkt-mock-wave i:nth-child(2n){animation-delay:.15s}
.mkt-mock-wave i:nth-child(3n){animation-delay:.3s}
.mkt-mock-wave i:nth-child(4n){animation-delay:.45s}
.mkt-mock-wave i:nth-child(5n){animation-delay:.6s}
.mkt-mock-wave i:nth-child(odd){height:42%}
.mkt-mock-wave i:nth-child(even){height:74%}
.mkt-mock-wave i:nth-child(3n){height:92%}
.mkt-mock-wave i:nth-child(5n){height:30%}
@keyframes mkt-wave{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion: reduce){ .mkt-mock-wave i{animation:none} }
/* copy side */
.mkt-step-copy{max-width:24rem}
.mkt-step-n{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:var(--split);color:#14060d;font-weight:800;font-size:.85rem;margin-bottom:.9rem}
.mkt-step-h{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.25rem,2.4vw,1.6rem);margin:0 0 .55rem}
.mkt-step-p{color:var(--muted);font-size:.95rem;line-height:1.6;margin:0}
/* trust trio — soft glow orbs, centered, lots of air */
.mkt-safe{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem);
  margin-top:1.6rem;text-align:center}
.mkt-safe-item{display:flex;flex-direction:column;align-items:center;gap:.55rem;border:none}
.mkt-orb{width:72px;height:72px;border-radius:50%;margin-bottom:.4rem;filter:blur(7px);opacity:.95}
.mkt-orb-a{background:radial-gradient(circle at 42% 38%,rgba(255,217,238,.95),rgba(0,0,0,.65) 42%,rgba(0,0,0,0) 68%);
  box-shadow:0 0 56px rgba(0,0,0,.45)}
.mkt-orb-b{background:radial-gradient(circle at 42% 38%,rgba(228,220,255,.95),rgba(151,120,255,.62) 42%,rgba(151,120,255,0) 68%);
  box-shadow:0 0 56px rgba(151,120,255,.45)}
.mkt-orb-c{background:radial-gradient(circle at 42% 38%,rgba(255,233,201,.95),rgba(0,0,0,.62) 42%,rgba(0,0,0,0) 68%);
  box-shadow:0 0 56px rgba(0,0,0,.45)}
.mkt-safe-h{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;font-size:1.02rem;margin:0}
.mkt-safe-p{color:var(--muted);font-size:.88rem;line-height:1.55;max-width:16rem;margin:0}
/* reveal: drift up on scroll (JS adds .mkt-in; stagger via inline delay) */
[data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.9,.32,1)}
[data-reveal].mkt-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}
@media (max-width: 860px){
  /* stack the 3-across row back into a single column on narrow screens */
  .mkt-how-steps{grid-template-columns:1fr;gap:clamp(3rem,8vh,5rem)}
  .mkt-safe{grid-template-columns:1fr;gap:2.4rem}
}

/* ==========================================================================
   The app — home replica in the spotlight
   ========================================================================== */
.mkt-studio{max-width:1360px;margin:0 auto;overflow:hidden;
  padding:clamp(3.2rem,8vh,6rem) clamp(1.1rem,4vw,3rem) 0}
.mkt-stage{position:relative;max-width:1240px;margin:0 auto;perspective:1500px;text-align:left}
.mkt-stage::before{/* floor glow */
  content:"";position:absolute;left:8%;right:8%;bottom:-6%;height:40%;z-index:-1;
  background:radial-gradient(50% 60% at 50% 100%,rgba(0,0,0,.2),rgba(0,0,0,.1) 45%,transparent 75%);
  filter:blur(30px)}
.mkt-screen{position:relative;border-radius:18px;overflow:hidden;
  border:1px solid var(--line-2);
  background:linear-gradient(180deg,#121017,#0b0a10);
  box-shadow:0 -1px 0 rgba(255,255,255,.12) inset,0 40px 90px rgba(0,0,0,.65),
    0 18px 60px rgba(0,0,0,.12),0 6px 30px rgba(0,0,0,.08);
  transform:rotateX(7deg) scale(.99);transform-origin:50% 20%;
  transition:transform .9s cubic-bezier(.2,.7,.2,1),box-shadow .9s ease}
.mkt-screen:hover,.mkt-screen:focus-visible{transform:rotateX(1deg) scale(1);
  box-shadow:0 -1px 0 rgba(255,255,255,.12) inset,0 50px 110px rgba(0,0,0,.7),
    0 22px 80px rgba(0,0,0,.18),0 8px 36px rgba(0,0,0,.12)}
.mkt-screen::after{/* glass glare */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.02) 24%,transparent 42%)}
.mkt-screen:focus-visible{outline:2px solid var(--neon);outline-offset:4px}

.mkt-chrome{display:flex;align-items:center;gap:.45rem;padding:.65rem .95rem;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.028)}
.mkt-dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.14)}
.mkt-dot.mkt-r{background:#ff5f57}.mkt-dot.mkt-y{background:#febc2e}.mkt-dot.mkt-g{background:#28c840}
.mkt-url{margin:0 auto;padding:.22rem 1.4rem;border-radius:7px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);font-size:.74rem;color:var(--muted);letter-spacing:.04em}
.mkt-chrome i{width:41px}

.mkt-appwrap{display:flex;min-height:500px}

/* sidebar of the replica */
.mkt-side{flex:0 0 190px;padding:1rem .9rem;border-right:1px solid var(--line);
  background:rgba(255,255,255,.018);display:flex;flex-direction:column;gap:.15rem;font-size:.82rem}
.mkt-side-logo{display:flex;align-items:center;gap:.5rem;font-family:'Space Grotesk',Inter,sans-serif;
  font-weight:700;font-size:1rem;margin-bottom:1.1rem}
.mkt-side-logo .logo-mark{width:22px;height:22px;border-radius:6px}
.mkt-side-lbl{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  margin:.5rem 0 .4rem;opacity:.8}
.mkt-side-item{display:flex;align-items:center;gap:.6rem;padding:.42rem .55rem;border-radius:8px;
  color:var(--muted);font-weight:500;white-space:nowrap}
.mkt-side-item i{width:14px;height:14px;border-radius:4px;border:1.5px solid currentColor;opacity:.75;flex:0 0 auto}
.mkt-side-item.mkt-on{color:var(--text);background:var(--panel-2);
  box-shadow:0 0 0 1px var(--line) inset}
.mkt-side-item.mkt-on i{border-color:var(--neon);background:linear-gradient(120deg,rgba(0,0,0,.4),rgba(0,0,0,.4))}
.mkt-side-new{margin-top:.2rem;padding:.42rem .55rem;border:1px dashed var(--line-2);border-radius:8px;
  color:var(--muted);font-size:.78rem}
.mkt-side-chat{padding:.36rem .55rem;color:var(--muted);opacity:.7;font-size:.76rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* home pane of the replica */
.mkt-home{flex:1;min-width:0;display:flex;flex-direction:column;padding:1.6rem 1.7rem 1.4rem}
.mkt-greet{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.35rem,2.6vw,1.9rem)}
.mkt-greet em{font-style:normal;background:var(--split);-webkit-background-clip:text;background-clip:text;color:transparent}
.mkt-greet-sub{color:var(--muted);font-size:.88rem;margin:.15rem 0 1.1rem}
.mkt-tabs{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:1rem;font-size:.8rem;font-weight:600}
.mkt-tabs span,.mkt-tabs b{padding:.34rem .8rem;border-radius:999px;color:var(--muted);font-weight:600}
.mkt-tabs b{background:var(--split);color:#14060d}
.mkt-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:auto}
.mkt-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);
  transition:transform .3s,border-color .3s}
.mkt-screen:hover .mkt-card:nth-child(1){transform:translateY(-3px);border-color:var(--line-2)}
.mkt-thumb{position:relative;height:96px;overflow:hidden}
.mkt-thumb .mkt-play{position:absolute;right:.5rem;bottom:.5rem;width:22px;height:22px;border-radius:50%;
  background:rgba(8,7,12,.55);border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center}
.mkt-thumb .mkt-play::before{content:"";margin-left:2px;border-left:7px solid #fff;
  border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
/* t0 — dark studio, amber product bottle */
.mkt-thumb.mkt-t0{background:radial-gradient(90% 120% at 50% 115%,rgba(0,0,0,.4),rgba(0,0,0,.14) 45%,#17131e 78%)}
.mkt-thumb.mkt-t0::before{content:"";position:absolute;left:50%;bottom:14%;width:22px;height:52px;
  transform:translateX(-50%);border-radius:6px 6px 4px 4px;
  background:linear-gradient(105deg,#3a2a1c,#c98a3d 45%,#ffd9a0 52%,#c98a3d 60%,#3a2a1c);
  box-shadow:0 10px 18px rgba(0,0,0,.55)}
.mkt-thumb.mkt-t0::after{content:"";position:absolute;left:50%;bottom:66%;width:9px;height:9px;
  transform:translateX(-50%);border-radius:2px 2px 0 0;background:#20180f}
/* t1 — vertical UGC phone */
.mkt-thumb.mkt-t1{background:radial-gradient(120% 130% at 20% 0%,rgba(0,0,0,.4),rgba(139,92,246,.28) 45%,#171126 80%)}
.mkt-thumb.mkt-t1::before{content:"";position:absolute;left:50%;top:50%;width:38px;height:72px;
  transform:translate(-50%,-50%);border-radius:8px;border:1.5px solid rgba(255,255,255,.4);
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02))}
.mkt-thumb.mkt-t1::after{content:"";position:absolute;left:50%;top:42%;width:16px;height:16px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffd9a0,#e88ab0)}
/* t2 — paste a URL */
.mkt-thumb.mkt-t2{background:radial-gradient(110% 130% at 80% 0%,rgba(0,0,0,.32),rgba(0,0,0,.16) 50%,#1a1420 82%);
  display:flex;align-items:center;justify-content:center}
.mkt-thumb.mkt-t2 .mkt-urlpill{font-size:.62rem;color:var(--text);opacity:.9;letter-spacing:.02em;
  padding:.3rem .55rem;border-radius:999px;border:1px solid rgba(255,255,255,.25);
  background:rgba(8,7,12,.5);max-width:86%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt-card-t{font-weight:600;font-size:.84rem;padding:.55rem .7rem .05rem}
.mkt-card-s{color:var(--muted);font-size:.72rem;padding:0 .7rem .6rem}

.mkt-chatbox{display:flex;align-items:center;gap:.6rem;margin-top:1rem;
  padding:.65rem .65rem .65rem .8rem;border-radius:14px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.045);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.mkt-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .7rem;border-radius:999px;font-size:.76rem;font-weight:700;color:#14060d;
  background:linear-gradient(120deg,#ffce8a,var(--neon))}
.mkt-chip i{font-style:normal;font-weight:600;opacity:.75}
.mkt-ph{flex:1;min-width:0;color:var(--muted);font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt-caret{flex:0 0 2px;height:1.1rem;background:var(--neon);margin-left:-.5rem;
  animation:mkt-blink 1.1s steps(1) infinite}
@keyframes mkt-blink{50%{opacity:0}}
.mkt-send{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--split);color:#14060d;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;
  box-shadow:0 4px 14px rgba(0,0,0,.35)}
.mkt-stage-hint{text-align:center;color:var(--muted);font-size:.82rem;margin:.9rem 0 0;letter-spacing:.02em}
.mkt-stage-hint b{color:var(--text);font-weight:600}

.mkt-eyebrow{display:inline-block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);opacity:.8;margin-bottom:1.1rem}

/* "Type your idea" chatbox under the filmstrip — a faithful mock of the real
   Go Farther composer (reuses .composer/.composer-row/.mode-switch/.send). Clicking
   a filmstrip clip pastes its prompt in; the box itself starts sign-up. */
.mkt-composer{margin:clamp(3.2rem,7vh,5.5rem) auto 0;max-width:780px;padding:0 1.1rem}
/* laurel crest above the composer */
.mkt-crest{display:flex;align-items:center;justify-content:center;gap:.55rem;margin:0 0 1rem}
.mkt-laurel{width:58px;height:84px;flex:0 0 auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.mkt-laurel-r{transform:scaleX(-1)}
.mkt-crest-txt{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;
  font-size:.92rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  background:var(--split);-webkit-background-clip:text;background-clip:text;color:transparent}
.mkt-composer .composer{cursor:pointer}
.mkt-composer .composer:hover{border-color:rgba(0,0,0,.5);
  box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 26px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.1)}
/* premium send button — refined circular gradient with depth, not the flat app pill */
.mkt-composer .send{width:48px;height:48px;min-width:0;padding:0;border:0;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:#1a0a12;
  background:linear-gradient(135deg,#ffd695 0%,#ff9ec4 52%,#1e1e22 100%);
  box-shadow:0 8px 22px rgba(0,0,0,.34),0 2px 6px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease}
.mkt-composer .send:hover{transform:translateY(-2px) scale(1.03);filter:brightness(1.04);
  box-shadow:0 14px 30px rgba(0,0,0,.44),0 3px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.6)}
.mkt-composer .send:active{transform:translateY(0) scale(.98)}
.mkt-composer .send svg{width:19px;height:19px}
.mkt-fauxinput{flex:1;min-width:0;display:flex;align-items:center;color:var(--text);
  font-size:.98rem;line-height:1.5;padding:.45rem 0 1.2rem;white-space:nowrap;overflow:hidden}
.mkt-fauxinput #mktTypeText:empty::before{content:"Message Go Farther — say anything…";color:#5c5c66}
.mkt-typebox-caret{display:inline-block;width:2px;height:1.15em;margin-left:1px;flex:0 0 auto;
  background:var(--neon);animation:mkt-blink 1.1s steps(1) infinite}
/* mock controls are non-interactive (whole box → sign-up) but read as the real UI */
.mkt-composer .mode-btn,.mkt-optghost{cursor:pointer}
.mkt-optghost{display:inline-flex;align-items:center}
/* pulse the box when a preset clip is pasted in */
.mkt-typebox-flash{animation:mkt-tb-flash .6s ease}
@keyframes mkt-tb-flash{
  0%{box-shadow:0 0 0 0 rgba(0,0,0,.5),0 20px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.1)}
  100%{box-shadow:0 0 0 16px rgba(0,0,0,0),0 20px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.1)}}
/* filmstrip clips read as clickable presets */
.mkt-cell-pick{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.mkt-cell-pick:hover{transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.45),0 0 22px rgba(0,0,0,.22)}
/* website-builder hook — the one-line prompt that built the front demo, on the
   left of the split. Styled like something you typed; swapped by
   initDemoCarousel as the front card changes. */
.mkt-builtfrom{margin:1.6rem 0}
.mkt-builtfrom-lbl{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);opacity:.85;margin-bottom:.7rem}
.mkt-builtfrom-line{position:relative;margin:0;color:var(--text);font-weight:600;
  font-size:clamp(1.1rem,1.7vw,1.42rem);line-height:1.42;letter-spacing:-.01em;
  transition:opacity .28s ease,transform .28s ease,filter .28s ease}
.mkt-builtfrom-line::before,.mkt-builtfrom-line::after{font-weight:700;
  background:var(--split);-webkit-background-clip:text;background-clip:text;color:transparent}
.mkt-builtfrom-line::before{content:"\201C"}
.mkt-builtfrom-line::after{content:"\201D"}
.mkt-builtfrom-line.mkt-bf-swap{opacity:0;transform:translateY(8px);filter:blur(5px)}
/* the prompt shown inside a composer mock matching the top video-generator box,
   but sized for the split's left column and allowed to wrap. */
.mkt-composer-demo{margin:.9rem 0 1.5rem;max-width:none;padding:0}
.mkt-composer-demo .mkt-fauxinput{white-space:normal;overflow:visible;align-items:flex-start;
  padding:.35rem 0 1.15rem;font-size:1.02rem;line-height:1.5;font-weight:600;color:var(--text)}
.mkt-composer-demo .mkt-typebox-caret{align-self:center}

/* three captions under the replica (Morphic) */
.mkt-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;
  max-width:1080px;margin:2.6rem auto 0}
.mkt-trio-item{font-size:.88rem;color:var(--muted);line-height:1.55;
  padding-top:.9rem;border-top:1px solid var(--line)}
.mkt-trio-item b{display:block;color:var(--text);font-weight:600;margin-bottom:.2rem}

/* ===== Split: copy + one-line prompt on the left, a diagonal cascade of three
   SHRUNK live demos on the right. ===== */
.mkt-split{display:flex;align-items:center;gap:clamp(1.5rem,4vw,3.5rem);
  max-width:1240px;margin:clamp(3rem,9vh,6.5rem) auto 0;padding:0 clamp(1.1rem,4vw,3rem)}
.mkt-split-copy{flex:0 0 40%;max-width:430px}
.mkt-split-copy .mkt-h2{margin:.4rem 0 0}
.mkt-split-copy .mkt-cta{margin-top:.4rem}
.mkt-split-demo{flex:1;min-width:0;display:flex;justify-content:center}

/* The cascade. Each card's iframe renders at a fixed DESKTOP width (--fw) then
   scales down by --sc, so the site keeps its full layout instead of collapsing
   to a phone view. Card visual width = --fw * --sc; body height follows 16:9. */
.mb-cascade{--fw:1200px;--sc:.5;position:relative;
  width:calc(var(--fw) * var(--sc) + 128px);height:calc(var(--fw) * var(--sc) * 9 / 16 + 150px);
  max-width:100%;margin:0 auto}
.mb-slot{position:absolute;width:calc(var(--fw) * var(--sc));border-radius:12px;overflow:hidden;
  border:1px solid var(--line-2);background:#0d0b12;box-shadow:0 24px 60px rgba(0,0,0,.6);
  transition:transform .6s cubic-bezier(.34,1.32,.5,1),opacity .5s ease,filter .5s ease,box-shadow .5s ease;
  will-change:transform,opacity,filter}
/* shrink the chrome too, so the whole card reads as a small website */
.mb-slot .mkt-chrome{padding:.34rem .55rem;gap:.32rem}
.mb-slot .mkt-dot{width:8px;height:8px}
.mb-slot .mkt-url{font-size:.56rem;padding:.14rem .8rem;letter-spacing:.02em}
.mb-slot .mkt-chrome i{width:24px}
.mb-body{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#0d0b12}
.mb-demo{position:absolute;top:0;left:0;border:0;
  width:var(--fw);height:calc(var(--fw) * 9 / 16);
  transform:scale(var(--sc));transform-origin:top left}
.mb-grab{position:absolute;inset:0;border:0;padding:0;margin:0;background:transparent}
/* cascade positions — scale adds depth (front comes toward you); the springy
   easing gives the switch a little settle. front (p1) interactive, p2/p3 back. */
.mb-slot.mb-p1{left:128px;top:150px;z-index:3;opacity:1;transform:scale(1) rotate(0deg);
  box-shadow:0 -1px 0 rgba(255,255,255,.1) inset,0 34px 80px rgba(0,0,0,.66),0 14px 44px rgba(0,0,0,.14)}
.mb-slot.mb-p2{left:64px;top:75px;z-index:2;opacity:.82;filter:saturate(.9) brightness(.78);transform:scale(.95) rotate(-2deg)}
.mb-slot.mb-p3{left:0;top:0;z-index:1;opacity:.48;filter:saturate(.72) brightness(.55);transform:scale(.9) rotate(-4deg)}
.mb-slot.mb-p4{left:0;top:0;z-index:0;opacity:.32;filter:saturate(.62) brightness(.42);transform:scale(.86) rotate(-6deg)}
.mb-slot.mb-p5{left:0;top:0;z-index:0;opacity:.22;filter:saturate(.55) brightness(.34);transform:scale(.82) rotate(-8deg)}
.mb-slot.mb-p1 .mb-grab{pointer-events:none}
.mb-slot.mb-p2 .mb-grab,.mb-slot.mb-p3 .mb-grab,.mb-slot.mb-p4 .mb-grab,.mb-slot.mb-p5 .mb-grab{pointer-events:auto;cursor:pointer}
.mb-slot.mb-p2:hover,.mb-slot.mb-p3:hover,.mb-slot.mb-p4:hover,.mb-slot.mb-p5:hover{opacity:.94;filter:none}
@media (max-width:900px){
  /* stack: copy on top, cascade below (a touch smaller) */
  .mkt-split{flex-direction:column;align-items:stretch}
  .mkt-split-copy{flex:auto;max-width:none}
  .mb-cascade{--sc:.42}
}
@media (max-width:460px){ .mb-cascade{--fw:1100px;--sc:.32} }
.mkt-hint-cta{border:none;padding:0;cursor:pointer;font:inherit;font-weight:700;
  background:var(--split);-webkit-background-clip:text;background-clip:text;color:transparent}
.mkt-hint-cta:hover{filter:brightness(1.15)}

/* ==========================================================================
   Presets — horizontal rail (media slots /mkt/p*.jpg)
   ========================================================================== */
.mkt-presets{max-width:1180px;margin:0 auto;
  padding:clamp(3.2rem,8vh,6rem) clamp(1.1rem,4vw,3rem) 0}
.mkt-rail{display:flex;gap:.9rem;overflow-x:auto;padding:.2rem .2rem 1rem;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);
  mask-image:linear-gradient(90deg,#000 92%,transparent)}
.mkt-rail::-webkit-scrollbar{display:none}
.mkt-pcard{flex:0 0 232px;scroll-snap-align:start;cursor:pointer;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);
  transition:transform .3s,border-color .3s,box-shadow .3s}
.mkt-pcard:hover{transform:translateY(-4px);border-color:var(--line-2);
  box-shadow:0 18px 44px rgba(0,0,0,.45),0 8px 26px rgba(0,0,0,.08)}
.mkt-pcard:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
.mkt-pthumb{position:relative;aspect-ratio:16/10;overflow:hidden}
.mkt-pthumb::after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;
  font-size:.95rem;color:rgba(237,234,243,.16)}
.mkt-pthumb .mkt-cell-img{z-index:1}
.mkt-g1{background:radial-gradient(100% 120% at 50% 115%,rgba(0,0,0,.36),rgba(0,0,0,.14) 45%,#17131e 80%)}
.mkt-g2{background:radial-gradient(110% 130% at 80% 0%,rgba(0,0,0,.28),rgba(0,0,0,.14) 50%,#1a1420 82%)}
.mkt-g3{background:radial-gradient(120% 130% at 20% 0%,rgba(0,0,0,.36),rgba(139,92,246,.24) 45%,#171126 80%)}
.mkt-g4{background:radial-gradient(120% 130% at 50% 0%,rgba(120,200,255,.2),rgba(70,110,200,.12) 50%,#0f1424 82%)}
.mkt-g5{background:radial-gradient(120% 140% at 80% 100%,rgba(255,90,110,.22),rgba(150,50,90,.12) 50%,#190f16 82%)}
.mkt-g6{background:radial-gradient(120% 130% at 30% 100%,rgba(190,160,255,.24),rgba(110,80,200,.14) 50%,#131022 82%)}
.mkt-g7{background:radial-gradient(120% 130% at 70% 20%,rgba(255,210,160,.22),rgba(190,120,80,.12) 50%,#171108 82%)}
.mkt-g8{background:radial-gradient(120% 130% at 50% 50%,rgba(0,0,0,.22),rgba(0,0,0,.12) 55%,#150f18 82%)}
.mkt-pmeta{padding:.7rem .85rem .8rem}
.mkt-pkind{display:inline-block;font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--split);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.25rem}
.mkt-pname{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;font-size:.95rem;letter-spacing:-.01em}
.mkt-pdesc{color:var(--muted);font-size:.76rem;margin-top:.1rem}

/* ==========================================================================
   Pricing
   ========================================================================== */
.mkt-pricing{max-width:1100px;margin:0 auto;
  padding:clamp(3.2rem,8vh,6rem) clamp(1.1rem,4vw,3rem) 0;text-align:center}
.mkt-pricing .mkt-sec-head{margin-bottom:0}
.mkt-free-badge{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;
  padding:.5rem 1.1rem;border-radius:999px;border:1px solid rgba(0,0,0,.35);
  background:rgba(0,0,0,.07);color:var(--neon);font-size:.85rem;font-weight:600}
.mkt-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.6rem;align-items:stretch}
.mkt-plan{position:relative;display:flex;flex-direction:column;gap:.2rem;text-align:left;
  padding:1.7rem 1.6rem 1.5rem;border-radius:18px;border:1px solid var(--line);background:var(--panel);
  transition:transform .3s,border-color .3s,box-shadow .3s}
.mkt-plan:hover{transform:translateY(-4px);border-color:var(--line-2)}
.mkt-plan-hot{border:1px solid transparent;
  background:linear-gradient(180deg,#151019,#0e0b13) padding-box,var(--split) border-box;
  box-shadow:0 24px 60px rgba(0,0,0,.5),0 10px 44px rgba(0,0,0,.16)}
.mkt-plan-hot:hover{box-shadow:0 30px 70px rgba(0,0,0,.55),0 14px 54px rgba(0,0,0,.24)}
.mkt-plan-tag{position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);
  padding:.28rem .9rem;border-radius:999px;background:var(--split);color:#14060d;
  font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.mkt-plan-n{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.02em}
.mkt-plan-p{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;font-size:2.5rem;letter-spacing:-.03em;margin:.2rem 0 .1rem}
.mkt-plan-p small{font-size:.95rem;font-weight:500;color:var(--muted);letter-spacing:0}
.mkt-plan-d{color:var(--muted);font-size:.85rem;margin-bottom:1rem}
.mkt-plan-list{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-direction:column;gap:.5rem;font-size:.88rem}
.mkt-plan-list li{display:flex;gap:.55rem;align-items:baseline;color:rgba(237,234,243,.85)}
.mkt-plan-list li::before{content:"✦";flex:0 0 auto;font-size:.7rem;
  background:var(--split);-webkit-background-clip:text;background-clip:text;color:transparent}
.mkt-plan-cta{margin-top:auto;width:100%}

/* ==========================================================================
   Final CTA + footer (giant ghost wordmark)
   ========================================================================== */
.mkt-final{position:relative;overflow:hidden;text-align:center;
  padding:clamp(4rem,10vh,7rem) clamp(1.1rem,4vw,3rem) clamp(3.5rem,8vh,5.5rem)}
.mkt-final::before{content:"";position:absolute;left:50%;top:-40%;width:120vw;height:150%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(46% 55% at 50% 42%,rgba(0,0,0,.13),rgba(0,0,0,.06) 45%,transparent 72%)}
.mkt-final-h{position:relative;font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;
  font-size:clamp(2.2rem,6.4vw,4.6rem);line-height:1.02;letter-spacing:-.04em;margin:0 0 1rem}
.mkt-final-s{position:relative;color:var(--muted);font-size:clamp(.95rem,1.5vw,1.12rem);margin:0 0 2.2rem}
.mkt-final .mkt-cta-row{position:relative;justify-content:center;margin-bottom:0}

/* Footer — ember inverse: stays near-black, structured by a thick gradient
   rule up top + an ember wash rising from the bottom edge. Statement in
   gradient-clipped Space Grotesk, warm off-white link columns, amber hover,
   giant ghost wordmark bleeding off the bottom. */
.mkt-foot{position:relative;overflow:hidden;padding:0}
.mkt-foot::before{/* thick gradient rule — the footer's top edge */
  content:"";display:block;height:3px;background:var(--split);
  box-shadow:0 0 26px rgba(0,0,0,.5),0 2px 44px rgba(0,0,0,.3)}
.mkt-foot::after{/* ember wash rising from the bottom edge */
  content:"";position:absolute;left:50%;bottom:-32%;width:132%;height:80%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(52% 68% at 50% 100%,rgba(0,0,0,.12),rgba(0,0,0,.05) 46%,transparent 76%)}

.mkt-foot-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:clamp(1.8rem,4.5vw,4.5rem);align-items:start;max-width:1180px;margin:0 auto;
  padding:clamp(2.8rem,7vh,4.4rem) clamp(1.1rem,4vw,3rem) clamp(2rem,5vh,3rem)}
.mkt-foot-h{margin:0 0 1.7rem;font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;
  text-transform:uppercase;font-size:clamp(1.45rem,2.7vw,2.3rem);line-height:1.1;letter-spacing:-.01em;
  background:linear-gradient(135deg,var(--purple) 8%,var(--neon) 82%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 28px rgba(0,0,0,.22))}

.mkt-foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem 1.2rem;padding-top:.3rem}
.mkt-foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}
.mkt-foot-hd{font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.3rem}
.mkt-foot-hd2{margin-top:1.1rem}
.mkt-foot-col a,.mkt-foot-col button{/* links + link-styled buttons, one voice */
  background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;text-align:left;
  font-size:.86rem;line-height:1.35;color:rgba(243,236,229,.78);transition:color .2s}
.mkt-foot-col a:hover,.mkt-foot-col button:hover{color:var(--neon)}
.mkt-foot-col a:focus-visible,.mkt-foot-col button:focus-visible{color:var(--neon);
  outline:1px solid rgba(0,0,0,.5);outline-offset:3px;border-radius:2px}

.mkt-foot-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  max-width:1180px;margin:0 auto;border-top:1px solid var(--line);
  padding:1.15rem clamp(1.1rem,4vw,3rem) .4rem}
.mkt-foot .mkt-brand{font-size:1.05rem}
.mkt-foot .mkt-brand .logo-mark{width:22px;height:22px}
.mkt-foot-links{display:flex;align-items:center;gap:1.4rem;font-size:.85rem;color:var(--muted)}
.mkt-foot-links a{color:var(--muted);transition:color .2s}
.mkt-foot-links a:hover{color:var(--neon)}

.mkt-ghostword{margin-top:.5rem;text-align:center;user-select:none;pointer-events:none;
  font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;letter-spacing:-.05em;
  font-size:clamp(6rem,24vw,21rem);line-height:.72;transform:translateY(18%);
  background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.1) 46%,transparent 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .mkt-hero-grid{grid-template-columns:1fr;align-items:start;gap:1.6rem}
  .mkt-trio{grid-template-columns:1fr;gap:1rem}
  .mkt-foot-grid{grid-template-columns:1fr;gap:2.2rem}
  .mkt-foot-h{max-width:26ch}
  .mkt-foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem 1.4rem;padding-top:0}
}
@media (max-width:880px){
  .mkt-side{display:none}
  .mkt-appwrap{min-height:0}
  .mkt-price-grid{grid-template-columns:1fr;max-width:26rem;margin-left:auto;margin-right:auto}
  .mkt-plan-hot{order:-1}
}
@media (max-width:640px){
  .mkt-links a{display:none}
  .mkt-screen{transform:none}
  .mkt-screen:hover{transform:none}
  .mkt-cards{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .mkt-card:nth-child(3){display:none}
  .mkt-home{padding:1.2rem 1rem 1rem}
  .mkt-thumb{height:82px}
  .mkt-chatbox{gap:.45rem;padding:.55rem .55rem .55rem .65rem}
  .mkt-ph{font-size:.78rem}
  .mkt-marquee-track span{font-size:.9rem;padding:0 .8rem}
  .mkt-cell{width:46vw}
  .mkt-pcard{flex-basis:200px}
  .mkt-foot-cols{gap:1.6rem 1rem}
  .mkt-foot-col a,.mkt-foot-col button{font-size:.9rem;padding:.12rem 0}
  .mkt-foot-row{justify-content:center;text-align:center}
}
@media (max-width:420px){
  .mkt-hero{padding-top:2.6rem}
  .mkt-big{width:100%}
  .mkt-cta-row{flex-direction:column;align-items:stretch}
}

@media (prefers-reduced-motion:reduce){
  .mkt *,.mkt *::before,.mkt *::after{animation:none !important;transition:none !important}
  .mkt-screen{transform:none}
  .mkt-marquee-track{width:auto;flex-wrap:wrap;justify-content:center}
}

/* Auth popup: close (✕) button */
.auth-home{position:absolute;top:.8rem;right:.8rem;width:32px;height:32px;display:grid;place-items:center;
  background:none;border:none;border-radius:50%;color:var(--muted);font:inherit;font-size:1rem;line-height:1;cursor:pointer;
  transition:color .15s,background .15s}
.auth-home:hover{color:var(--text);background:rgba(255,255,255,.07)}

/* ==========================================================================
   Post-sign-in CRT channel selector (#crtSelect) — a retro television set,
   brand-tinted (pink→amber phosphor). Shown by enterCrt(); ↑↓/click tune,
   Enter/click selects. Live channels enter the workspace; others flash NO
   SIGNAL. Monospace HUD, wood frame, brass control panel.
   ========================================================================== */
.crt{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.4rem;padding:clamp(1rem,4vw,2.5rem);
  background:
    radial-gradient(58% 52% at 50% 42%,rgba(255,121,160,.11),transparent 62%),
    radial-gradient(90% 70% at 50% 118%,rgba(255,150,80,.08),transparent 60%),
    radial-gradient(70% 60% at 50% -10%,rgba(151,120,255,.06),transparent 55%),
    #07060a;
  font-family:ui-monospace,"SFMono-Regular",Menlo,"Roboto Mono",monospace}
/* the set: wood cabinet holding just the screen */
.crt-set{display:flex;gap:clamp(.8rem,2vw,1.4rem);width:min(840px,100%);
  padding:clamp(.9rem,2vw,1.5rem);border-radius:26px;
  background:
    repeating-linear-gradient(91deg,rgba(0,0,0,.22) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(89deg,rgba(255,220,170,.05) 0 1px,transparent 1px 11px),
    linear-gradient(158deg,#7a5433,#513521 52%,#38240f);
  box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(255,200,140,.18) inset,
    0 2px 0 rgba(255,225,185,.2) inset,0 -20px 60px rgba(90,55,25,.25) inset}
/* screen */
.crt-screen{position:relative;flex:1;min-height:clamp(300px,52vh,460px);
  border-radius:16px;padding:clamp(1.2rem,3vw,2rem);overflow:hidden;
  background:radial-gradient(52% 55% at 24% 28%,rgba(0,0,0,.11),transparent 62%),
    radial-gradient(50% 55% at 82% 74%,rgba(0,0,0,.08),transparent 64%),
    radial-gradient(120% 130% at 50% 45%,#100b16,#08070c 80%);
  box-shadow:0 0 0 3px #14100e,0 0 0 5px #3a2620,inset 0 0 70px rgba(0,0,0,.88),
    inset 0 0 30px rgba(0,0,0,.05)}
.crt-glass{position:absolute;inset:0;pointer-events:none;border-radius:16px;
  background:radial-gradient(80% 55% at 50% 12%,rgba(255,220,190,.08),transparent 60%)}
.crt-scan{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);
  animation:crt-flicker 5s steps(60) infinite}
@keyframes crt-flicker{0%,97%,100%{opacity:.5}98%{opacity:.36}99%{opacity:.56}}
.crt-hud{position:absolute;top:clamp(.9rem,2.4vw,1.5rem);left:clamp(1.2rem,3vw,2rem);
  right:clamp(1.2rem,3vw,2rem);display:flex;justify-content:space-between;
  font-size:.72rem;letter-spacing:.28em;color:rgba(0,0,0,.62)}
.crt-rec{display:flex;align-items:center;gap:.5rem}
.crt-rec i{width:8px;height:8px;border-radius:50%;background:#ff5a7a;
  box-shadow:0 0 10px #ff5a7a;animation:crt-blink 1.4s steps(1) infinite}
@keyframes crt-blink{50%{opacity:.15}}
/* the 5 channels hug the left edge of the screen (pull past the screen padding) */
.crt-menu{list-style:none;margin:0 0 0 calc(.25rem - clamp(1.2rem,3vw,2rem));
  padding:clamp(1.4rem,4vh,2.6rem) 0 0;outline:none;
  display:flex;flex-direction:column;gap:clamp(.35rem,1.4vh,.7rem)}
.crt-opt{position:relative;display:flex;align-items:center;gap:.55rem;cursor:pointer;
  font-size:clamp(1.6rem,3.6vw,2.5rem);font-weight:700;letter-spacing:.06em;line-height:1.05;
  color:rgba(255,176,120,.34);transition:color .25s,opacity .25s}
.crt-caret{flex:0 0 auto;width:.85em;opacity:0;color:#000000;transition:opacity .2s;
  filter:drop-shadow(0 0 8px rgba(255,150,90,.7))}
.crt-txt{transition:filter .25s}
.crt-opt.on{color:#ffce9a}
.crt-opt.on .crt-caret{opacity:1}
.crt-opt.on .crt-txt{background:var(--split);-webkit-background-clip:text;background-clip:text;
  color:transparent;filter:drop-shadow(0 0 20px rgba(255,140,90,.6))}
.crt-opt:hover{color:rgba(255,200,150,.7)}
.crt-foot{position:absolute;bottom:clamp(1rem,2.6vw,1.7rem);left:clamp(1.2rem,3vw,2rem);
  right:clamp(1.2rem,3vw,2rem);font-size:.72rem;letter-spacing:.24em;color:rgba(0,0,0,.5)}
/* NO SIGNAL flash for coming-soon channels */
.crt-screen.crt-nosig{animation:crt-shake .3s 2}
.crt-screen.crt-nosig .crt-scan{opacity:.85;animation:crt-flicker .18s steps(30) infinite}
.crt-screen.crt-nosig .crt-menu{opacity:.35}
.crt-foot.crt-foot-nosig{color:#ff7a6a;letter-spacing:.2em}
@keyframes crt-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
/* control panel */
.crt-panel{flex:0 0 clamp(150px,20%,210px);display:flex;flex-direction:column;align-items:center;
  gap:clamp(.9rem,2.4vh,1.5rem);padding:clamp(1rem,2.4vw,1.6rem) clamp(.6rem,1.6vw,1rem);
  border-radius:14px;background:linear-gradient(160deg,#efe3cb,#d9c7a3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -18px 30px rgba(140,110,70,.28),
    0 10px 30px rgba(0,0,0,.4)}
.crt-plate{width:100%;text-align:center;padding:.5rem;border-radius:8px;line-height:1.15;
  background:linear-gradient(180deg,#3a2a12,#241a0c);border:1px solid rgba(255,200,120,.35);
  box-shadow:inset 0 0 14px rgba(255,170,80,.25)}
.crt-plate span{display:block;font-size:.62rem;letter-spacing:.42em;color:rgba(255,190,120,.75)}
.crt-plate b{display:block;font-size:.82rem;letter-spacing:.16em;color:#ffcf8f;
  filter:drop-shadow(0 0 6px rgba(255,160,80,.5))}
.crt-dial{display:flex;flex-direction:column;align-items:center;gap:.45rem}
.crt-dial-row{display:flex;gap:clamp(.8rem,2vw,1.4rem);justify-content:center}
.crt-dial-lbl{font-size:.58rem;letter-spacing:.2em;color:#6b543099;text-align:center;line-height:1.4;color:#7a5c34}
.crt-dial-lbl i{display:block;font-style:normal;font-size:.5rem;opacity:.7}
.crt-knob{position:relative;width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;
  background:
    radial-gradient(circle at 38% 30%,#fbe9c4,#c9a25e 46%,#6d4c26 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.5),inset 0 2px 3px rgba(255,255,255,.5),
    inset 0 -6px 10px rgba(80,50,15,.6);transform:rotate(var(--rot,0deg));
  transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.crt-knob-lg{width:70px;height:70px}
.crt-knob-sm{width:44px;height:44px}
.crt-knob-mark{position:absolute;top:6px;left:50%;width:3px;height:34%;border-radius:2px;
  margin-left:-1.5px;background:linear-gradient(#3a2510,#7a5426)}
.crt-knob-sm .crt-knob-mark{height:30%}
.crt-knob-lg:hover{filter:brightness(1.06)}
.crt-knob-lg:focus-visible{outline:2px solid #ff9a4d;outline-offset:3px}
.crt-power{margin-top:.2rem;width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#7a5c34;
  background:radial-gradient(circle at 40% 32%,#fdf0d4,#d9bd8b 60%,#b0925f);
  border:1px solid rgba(120,90,50,.4);box-shadow:0 3px 8px rgba(0,0,0,.4),inset 0 1px 2px rgba(255,255,255,.6)}
.crt-power:hover{color:#ff7a3a}
.crt-power svg{width:20px;height:20px}
.crt-brand{display:flex;align-items:center;gap:.6rem;font-size:.68rem;letter-spacing:.3em;
  color:rgba(0,0,0,.4)}
.crt-brand svg{width:16px;height:16px}
@media (max-width:720px){
  .crt-set{flex-direction:column}
  .crt-panel{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;flex-basis:auto}
  .crt-plate{width:auto;flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .crt-scan,.crt-rec i,.crt-knob{animation:none;transition:none}
}

/* ==========================================================================
   CRT landing (production) — the CRT is the whole landing: nav on top, the TV
   centered, a chatbox docked at the bottom. Reuses the .crt-* screen visuals.
   ========================================================================== */
.mkt.mkt-crt{display:flex;flex-direction:column;overflow:hidden;
  background:radial-gradient(46% 60% at 18% 30%,rgba(0,0,0,.13),transparent 70%),
    radial-gradient(40% 55% at 82% 16%,rgba(0,0,0,.09),transparent 70%),var(--bg)}
.mkt-crt .crtl-stage{flex:1;min-height:0;display:flex;align-items:stretch;justify-content:center;
  padding:clamp(.4rem,1.2vh,.9rem) clamp(.5rem,1.5vw,1rem)}
/* no TV frame — the wood cabinet + screen bezel are removed; content sits on
   the page background (scanlines/glass kept for the CRT feel) */
.mkt-crt .crtl-stage .crt-set{width:100%;max-width:1640px;margin:0 auto;
  background:none;padding:0;border-radius:0;box-shadow:none}
.mkt-crt .crt-screen{flex:1;min-height:clamp(360px,70vh,1040px);
  background:transparent;box-shadow:none;border-radius:0}
/* nav lives INSIDE the screen, on the top bar (below the tiny REC/CH hud) */
.crt-topbar {position:absolute;top:clamp(2.4rem,5vh,3.1rem);left:0;right:0;z-index: 6;
  display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1.5rem,3.2vw,2.4rem)
  /* Above .crt-crest, which is also z-index 3 and comes LATER in the DOM —
     so at equal z-index the headline painted OVER the AI models dropdown,
     straight through the middle of it. The nav belongs above a decorative
     headline regardless. .crt-stage is 2, .crt-crest is 3. */
}
.crt-topbar .mkt-brand{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;font-size:1.05rem;
  display:flex;align-items:center;gap:.5rem;color:var(--text)}
.crt-topbar .mkt-brand .logo-mark{width:26px;height:26px}
.crt-topbar .mkt-links{display:flex;align-items:center;gap:1.4rem}
/* channels start below the in-screen nav */
.mkt-crt .crt-menu{padding-top:clamp(5.5rem,12vh,7.5rem)}
/* chatbox lives inside the screen, docked bottom-centre */
.crt-inbox{position:absolute;left:0;right:0;bottom:clamp(1.4rem,4vh,2.8rem);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:0 clamp(1.4rem,4vw,3rem)}
/* The two doors above the landing chatbox. The container is a plain row —
   the buttons themselves reuse .mkt-cta / .mkt-ghost, so they stay in step with
   the rest of the landing rather than being a third button style. */
/* The security log's rows. Deliberately plain — it is a list somebody scans
   when they are worried, so the only colour carries meaning: a failure and an
   action the owner took are the two things worth picking out of a wall of
   ordinary sign-ins. */
.sec-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.3fr) auto auto;gap:.6rem;align-items:baseline;
  padding:.5rem .1rem;border-bottom:1px solid var(--line);font-size:.86rem}
.sec-row:last-child{border-bottom:none}
.sec-who{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-what{color:var(--muted)}
.sec-when,.sec-where{color:var(--muted);opacity:.75;font-size:.8rem;white-space:nowrap}
.sec-bad .sec-what{color:#ff9b9b}
.sec-own .sec-what{color:var(--neon)}
.crt-doors{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}
.crt-doors .mkt-cta,.crt-doors .mkt-ghost{padding:.7rem 1.9rem;font-size:.92rem}
.crt-chatbox{width:min(560px,88%);display:flex;align-items:stretch;gap:.9rem;cursor:text;
  padding:1.1rem 1rem 1.1rem 1.4rem;border-radius:20px;border:1px solid var(--line-2);background:var(--panel);
  box-shadow:0 28px 70px rgba(0,0,0,.55);transition:border-color .25s}
.crt-chatbox:hover{border-color:rgba(0,0,0,.45)}
/* textarea: text starts top-left and the box grows DOWN (wraps, never scrolls sideways) */
.crt-chatbox-in{flex:1;min-width:0;color:var(--text);font-family:inherit;font-size:1.06rem;line-height:1.45;
  background:transparent;border:0;outline:0;padding:0;margin:0;resize:none;overflow-x:hidden;overflow-y:auto;
  min-height:4.4rem;max-height:9em;appearance:none}
.crt-chatbox-in::placeholder{color:var(--muted);opacity:1}
.crt-chatbox-send{flex:0 0 auto;align-self:center;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:0;cursor:pointer;background:var(--split);color:#14060d;box-shadow:0 6px 20px rgba(0,0,0,.4);transition:transform .15s}
.crt-chatbox-send:hover{transform:translateY(-1px) scale(1.04)}
.crt-chatbox-send:active{transform:scale(.96)}
/* coming-soon channel: the chatbox is inert (Enter does nothing) */
.crt-chatbox.crt-chatbox-soon{opacity:.5;filter:saturate(.5);cursor:not-allowed}
.crt-chatbox.crt-chatbox-soon .crt-chatbox-send{pointer-events:none}
.crtl-note{color:var(--muted);font-size:.85rem;text-align:center}
.crtl-note b{color:var(--neon)}
.crtl-note.crt-foot-nosig{color:#ff7a6a;letter-spacing:.14em;font-family:ui-monospace,Menlo,monospace;font-size:.78rem}
@media (max-width:640px){ .mkt-crt .crtl-stage{padding-top:4.5rem} }

/* ── Minimal landing (owner 2026-07-23): drop the channel list + media wall,
   leaving just the headline and chatbox centered in the screen. Markup is kept
   in the DOM (hidden) so the channels/demos can be brought back if wanted. ── */
.mkt-crt .crt-menu,
.mkt-crt .crt-stage{display:none}
/* Centred, then nudged down by half the row the doors added. The crest above is
   positioned independently, so a stack that grows from its middle grows INTO it
   — measured at 11px of overlap before this. */
.mkt-crt .crt-inbox{top:50%;bottom:auto;transform:translateY(calc(-50% + 1.6rem))}
.mkt-crt .crt-crest{top:calc(50% - 7.5rem)}

/* ── Gradient Halo chatbox (owner 2026-07-23): the ONE colored element on the
   black-and-white platform. Pinned to the old dark glass + pink→amber halo so it
   reads as a deliberate island (owner: "leave that chatbox like that"). The ring
   is a masked ::before (padding-box XOR border-box); the halo is the box-shadow. ── */
.mkt-crt .crt-chatbox{position:relative;flex-direction:column;align-items:stretch;gap:.55rem;
  width:min(620px,92%);padding:1.15rem 1.2rem 1rem;border:0;background:rgba(18,15,24,.94);
  box-shadow:0 28px 70px rgba(0,0,0,.28),0 0 24px rgba(255,121,198,.34),0 0 62px rgba(255,121,198,.16)}
.mkt-crt .crt-chatbox::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.7px;
  background:var(--halo);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.mkt-crt .crt-chatbox-in{min-height:2.6rem;font-size:1.08rem;color:#f4f1f8}
.mkt-crt .crt-chatbox-in::placeholder{color:rgba(244,241,248,.5)}
.crt-chatbox-bar{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.crt-chatbox-tools{display:flex;align-items:center;gap:.5rem}
.crt-chatbox-ico{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;color:var(--muted);background:rgba(255,255,255,.03);border:1px solid var(--line-2)}
.crt-chatbox-ico svg{width:17px;height:17px}
/* dark-island overrides so the chatbox stays legible on its dark glass */
.mkt-crt .crt-chatbox-ico{color:rgba(244,241,248,.62);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.mkt-crt .crt-chatbox-send{background:var(--halo)}
.mkt-crt .crt-scan{opacity:.05}

/* ---- CRT landing: crest (laurel + headline), preview stage, legal ---- */
.crt-crest{position:absolute;top:clamp(4.6rem,9vh,6.2rem);left:0;right:0;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:.7rem;pointer-events:none}
.crt-laurel{width:clamp(34px,4vw,50px);height:auto;flex:0 0 auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.crt-laurel-r{transform:scaleX(-1)}
.crt-crest-h{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.5rem,3vw,2.4rem);line-height:1;text-align:center;color:var(--text);margin:0;white-space:nowrap}
.crt-crest-h .mkt-grad{background:var(--split);-webkit-background-clip:text;background-clip:text;color:transparent}
/* preview stage — right half of the screen, morphs per channel */
.crt-stage{position:absolute;z-index:2;right:clamp(.5rem,.6vw,.9rem);
  top:clamp(6.4rem,13.5vh,9rem);bottom:clamp(6.6rem,12vh,9rem);
  width:clamp(440px,62vw,960px);border-radius:16px;overflow:hidden}
/* website cascade: front demo pinned to the right edge, back demos fan out to
   the LEFT so each shows a wide clickable strip you can grab to switch */
.crt-stage .lp-web{padding:0;justify-content:flex-end;align-items:center}
.crt-stage .mb-cascade{width:100%;max-width:none;margin:0}
.crt-stage .mb-cascade-lead{--sc:.72}
.crt-stage .mb-slot.mb-p1{left:auto;right:16px;top:60px}
.crt-stage .mb-slot.mb-p2{left:auto;right:70px;top:45px}
.crt-stage .mb-slot.mb-p3{left:auto;right:124px;top:30px}
.crt-stage .mb-slot.mb-p4{left:auto;right:178px;top:15px}
.crt-stage .mb-slot.mb-p5{left:auto;right:232px;top:0}
@media (max-width:1500px){
  .crt-stage .mb-cascade-lead{--sc:.54}
  .crt-stage .mb-slot.mb-p1{right:10px;top:48px}
  .crt-stage .mb-slot.mb-p2{right:50px;top:36px}
  .crt-stage .mb-slot.mb-p3{right:90px;top:24px}
  .crt-stage .mb-slot.mb-p4{right:130px;top:12px}
  .crt-stage .mb-slot.mb-p5{right:170px;top:0}
}
.crt-stage .lp-film{background:transparent}
.crt-stage .lp-voice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}
.crt-stage .lp-voice-note{color:var(--muted);font-size:.8rem;letter-spacing:.06em}
/* NO SIGNAL panel (music / game) */
.lp-nosig{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  background:radial-gradient(60% 60% at 50% 45%,rgba(255,121,140,.06),transparent 70%),#0a0806}
.lp-nosig-static{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 2px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.4) 0 1px,transparent 1px 3px);
  animation:crt-flicker .2s steps(24) infinite}
.lp-nosig-txt{position:relative;z-index:1;font-family:ui-monospace,Menlo,monospace;font-weight:700;
  letter-spacing:.18em;color:#ff7a6a;text-align:center;font-size:1rem}
.lp-nosig-txt small{display:block;margin-top:.4rem;font-size:.62rem;letter-spacing:.24em;color:var(--muted)}
/* GAME channel preview — live games Go Farther built, playing in mini arcade frames */
.lp-game{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:1rem;
  background:radial-gradient(70% 60% at 50% 40%,rgba(0,0,0,.07),transparent 70%),#0a0812}
.lp-arcade{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;width:100%;max-width:440px}
.lp-arc-slot{grid-column:auto;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;
  background:#0a0812;box-shadow:0 12px 34px rgba(0,0,0,.45);transition:border-color .2s,transform .2s}
.lp-arc-slot:first-child{grid-column:1 / -1}
.lp-arc-slot:hover{border-color:rgba(0,0,0,.5);transform:translateY(-2px)}
.mkt-chrome-game .mkt-url{color:#000000}
/* neon-gradient fallback shows through if a showcase game ever 404s (never a black void) */
.lp-arc-body{position:relative;width:100%;aspect-ratio:16/9;
  background:linear-gradient(135deg,rgba(0,0,0,.16),rgba(0,0,0,.12)),#0a0812}
.lp-arc-frame{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.lp-arc-tag{position:absolute;right:8px;bottom:8px;z-index:1;font-size:.56rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#0a0812;background:linear-gradient(90deg,var(--split-1,#1e1e22),var(--split-2,#000000));
  padding:3px 9px;border-radius:999px}
.lp-arc-cap{font-size:.74rem;line-height:1.4;color:var(--muted);text-align:center;max-width:440px}
.lp-arc-cap b{color:var(--text)}
/* legal footer, bottom-right on the frame */
.crt-legal{position:absolute;right:clamp(1.4rem,3vw,2.4rem);bottom:clamp(1rem,2.4vh,1.6rem);z-index:3;
  display:flex;align-items:center;gap:1.1rem;font-family:Inter,system-ui,sans-serif;
  font-size:.78rem;letter-spacing:.01em;color:var(--muted)}
.crt-legal a{color:inherit;text-decoration:none;transition:color .2s}
.crt-legal a:hover{color:var(--text)}
/* channels clear the crest */
.mkt-crt .crt-menu{padding-top:clamp(10rem,22vh,14rem)}
@media (max-width:820px){
  .crt-stage{display:none}
  .crt-crest-h{font-size:clamp(1.3rem,5vw,1.8rem)}
}


/* ── Scrollbars, everywhere (owner mock: peach hairline · minimal) ──
   Thin amber thumb on a transparent track; containers use overflow:auto, so a
   bar only exists when the content actually overflows. */
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0, .45) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(0,0,0, .4); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0, .75); }
*::-webkit-scrollbar-corner { background: transparent; }

/* Images appear whole (no top-down progressive paint): hidden until decoded. */
.img-fade { opacity: 0; transition: opacity .22s ease; }
.img-fade.img-ready { opacity: 1; }

/* The chat box itself never shows a scrollbar (owner's call, 2026-07-16) —
   a two-line placeholder or long input scrolls fine, just without the bar. */
#input { scrollbar-width: none; }
#input::-webkit-scrollbar { display: none; }

/* While a big image is still downloading, its frame shows a live shimmer —
   a silent blank reads as broken (owner, 2026-07-16). Scoped to chat +
   gallery, whose error handlers remove/replace the img, so a dead link can't
   leave a shimmer running forever. */
.msg.image:has(> img.img-fade:not(.img-ready)) { min-height: 220px; min-width: 260px; position: relative; }
.g-item:has(> img.img-fade:not(.img-ready)) { position: relative; min-height: 120px; }
.msg.image:has(> img.img-fade:not(.img-ready))::after,
.g-item:has(> img.img-fade:not(.img-ready))::after {
  content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,.04) 40%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.04) 60%);
  background-size: 200% 100%;
  animation: media-shimmer 1.3s linear infinite;
}
@keyframes media-shimmer { to { background-position: -200% 0; } }

/* Multi-select in the image-source picker (gallery/avatar/product) — same as
   picking several files from the device. Selected thumbs get the accent ring;
   the footer bar confirms. */
.gal-grid img.sel {
  border-color: var(--neon);
  box-shadow: 0 0 0 2px rgba(0,0,0, .65), 0 10px 28px rgba(0, 0, 0, .45);
  transform: scale(.97);
}
.gal-foot {
  display: flex; align-items: center; gap: .9rem; justify-content: flex-end;
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .09);
  position: sticky; bottom: 0; background: inherit;
}
.gal-count { color: var(--muted); font-size: .84rem; }
.gal-add {
  background: var(--split); color: var(--on-accent); border: none; border-radius: 11px;
  padding: .6rem 1.2rem; font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.gal-add:hover { transform: translateY(-1px); }
.gal-add:disabled { opacity: .4; cursor: default; transform: none; }

/* Seedance extra reference slots (@Video2-3 / @Audio2-3): text chips instead
   of thumbnails — a clip/audio slot shows its glyph + rounded duration. */
.vx-extra { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
.vx-extra .slot {
  width: auto; min-width: 86px; height: 44px; padding: 0 1.4rem 0 .55rem;
  display: flex; align-items: center; background: rgba(255, 255, 255, .04);
}
.vx-extra .slot-vid { font-size: .78rem; color: var(--ink-2, #cfcfd6); white-space: nowrap; }
.vx-extra .slot-tag { position: static; margin-left: .45rem; }

/* ── Tiered model rows (owner's reference design 2026-07-17): a gold max-res
   badge + a colored PREMIUM/CLASSIC/BASIC pill under the model name. ── */
.m-restier {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .55rem; border-radius: 8px;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  color: #000000; border: 1px solid rgba(0,0,0, .55);
  background: rgba(0,0,0, .07);
}
.m-restier svg { display: block; }
.m-tier {
  display: inline-flex; align-items: center;
  padding: .18rem .7rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
}
.m-tier-premium { color: #b9a5ff; border: 1px solid rgba(167, 139, 250, .6); background: rgba(124, 91, 255, .12); }
.m-tier-classic { color: #6db2ff; border: 1px solid rgba(96, 165, 250, .6); background: rgba(59, 130, 246, .10); }
.m-tier-basic   { color: #3fd9c4; border: 1px solid rgba(45, 212, 191, .55); background: rgba(45, 212, 191, .09); }

/* Merged Image-to-video row: the optional End frame slot sits under the
   start slot; filled state shows the frame with an "End" tag. */
#btnImgEnd { margin-top: .4rem; }
#btnImgEnd .slot-lab { font-size: .8rem; opacity: .8; }
#btnImgEnd.has { min-height: 96px; padding: .3rem; }
#btnImgEnd.has img { max-width: 190px; border-radius: 8px; display: block; }

/* Seedance combined Reference row: 3-icon modality switcher (image / video /
   audio) — one group visible at a time; active tab gets the split accent. */
.sr-tabs { display: flex; gap: .35rem; margin-bottom: .55rem; }
.sr-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .42rem 0; border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2, rgba(255,255,255,.08));
  color: var(--muted, #9a97a3);
}
.sr-tab svg { width: 15px; height: 15px; }
.sr-tab b { font-size: .64rem; font-weight: 700; letter-spacing: .02em; }
.sr-tab.on {
  color: #fff; border-color: transparent;
  background: linear-gradient(#17141d, #17141d) padding-box,
    var(--split, linear-gradient(90deg, #1e1e22, #000000)) border-box;
}
#srVidGroup, #srAudGroup { display: flex; flex-direction: column; gap: .35rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Claude Focus — empty new-chat layout (owner pick 2026-07-21)
   In the empty Builder home state (#viewHome.home-empty, toggled in
   toggleHomeHero), the greeting + composer read as ONE centered stack instead
   of a bottom-docked bar shifted right past a floating attach rail. The moment
   a message exists the class drops and the normal chat layout returns, so this
   only restyles the empty state. Scoped to .home-empty; nothing else changes.
   ══════════════════════════════════════════════════════════════════════════ */

/* Center the whole greeting→composer column in the viewport. */
.view-home.home-empty .home-screen { justify-content: center; }
.view-home.home-empty .chat { flex: 0 0 auto; }
.view-home.home-empty .thread {
  flex: 0 0 auto; overflow: visible; padding: 0 1.5rem;
}
/* Greeting flows in normal order directly above the composer (was absolute). */
.view-home.home-empty .home-hero {
  position: static; inset: auto; padding: 0 26px 1.6rem;
}
.view-home.home-empty .hh-title { font-size: 2.5rem; margin: 0; }
/* Keep the ambient orb centered behind the whole stack, not just the greeting box. */
.view-home.home-empty .hh-amb {
  position: fixed; inset: 0; z-index: 0;
}
.view-home.home-empty .composer-wrap { padding: 0 1.5rem; }

/* Undo the wide-screen right-shift + vertical mode-switch: the composer is
   centered and its controls sit on one horizontal row (Claude Focus). */
.view-home.home-empty .composer {
  max-width: 720px;
  padding: 1.35rem 1.35rem 1.1rem 1.5rem !important;
  transform: none !important; left: 0 !important;
}
.view-home.home-empty .thread-inner { transform: none !important; left: 0 !important; }
.view-home.home-empty .composer-row .mode-switch {
  position: static !important; flex-direction: row !important;
  transform: none !important; top: auto !important; left: auto !important;
}

/* Tuck the advanced effort pill + the contextual attach rail into the centered
   stack (max-width matched, centered) instead of floating them top-left/right. */
.view-home.home-empty .effort-pick {
  position: static !important; top: auto !important; left: auto !important;
  max-width: 720px; margin: 0 auto .5rem; width: 100%;
  display: flex; justify-content: flex-end; padding: 0 1.5rem;
}
.view-home.home-empty .attach-panel {
  position: static !important; max-width: 720px; margin: 0 auto .6rem;
  width: 100%; padding: 0 1.5rem; transform: none !important;
}

/* Keep the whole control row (mode · model · settings · send) on one line under
   the prompt: compact the send and tighten gaps so it doesn't orphan a row. */
.view-home.home-empty .composer-row { gap: .6rem; flex-wrap: nowrap; }
.view-home.home-empty .composer-row .send { min-width: 0; padding: 0 16px; height: 54px; }
.view-home.home-empty .composer-row .mode-switch,
.view-home.home-empty .composer-row .opt-wrap { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Game Studio — its own screen (owner 2026-07-22), like the Website Builder.
   Entered from the landing GAME channel → showView('games'). Chrome hidden while
   open (mirrors body.in-sites); NOT part of the media composer.
   ══════════════════════════════════════════════════════════════════════════ */
body.in-games .sidebar { display: none; }
body.in-games .top-tab, body.in-games .top-back { display: none !important; }

#viewGames.active { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.gs-top { display: flex; align-items: center; gap: 14px; padding: 16px 26px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.gs-brand { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 1.02rem; }
.gs-brand b { font-weight: 600; }
.gs-back { background: none; border: 1px solid var(--line-2); color: var(--muted); border-radius: 9px; padding: 7px 13px; font: inherit; font-size: .86rem; cursor: pointer; }
.gs-back:hover { color: var(--text); border-color: rgba(0,0,0,.3); }
.gs-open { font-size: .86rem; font-weight: 600; text-decoration: none; background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gs-new { background: var(--split); color: var(--on-accent); border: none; border-radius: 10px; padding: 8px 15px; font: inherit; font-weight: 600; font-size: .86rem; cursor: pointer; }

/* Compose (empty) state */
.gs-compose { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 6vh 24px 60px; text-align: center; }
.gs-h1 { font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 600; font-size: 2.7rem; letter-spacing: -.02em; margin-bottom: 12px; }
.gs-grad { background: var(--split); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gs-sub { color: var(--muted); font-size: 1.02rem; max-width: 520px; margin-bottom: 26px; }
.gs-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-bottom: 18px; }
.gs-chip { background: var(--panel); border: 1px solid var(--line-2); color: var(--muted); border-radius: 999px; padding: 8px 15px; font: inherit; font-size: .84rem; cursor: pointer; transition: border-color .12s, color .12s; }
.gs-chip:hover { color: var(--text); border-color: rgba(0,0,0,.5); }
.gs-box { width: 100%; max-width: 640px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 18px; padding: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.45); backdrop-filter: blur(24px); }
.gs-box textarea { width: 100%; background: none; border: none; outline: none; color: var(--text); font: inherit; font-size: 1rem; resize: none; line-height: 1.5; padding: 6px 6px 12px; }
.gs-box textarea::placeholder { color: #5c5c66; }
.gs-box-foot { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.gs-status { flex: 1; text-align: left; color: var(--muted); font-size: .84rem; min-height: 1.2em; }
.gs-build { background: var(--split); color: var(--on-accent); border: none; border-radius: 12px; padding: 12px 22px; font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; white-space: nowrap; }
.gs-build:disabled { opacity: .7; cursor: default; }

/* Recent games grid */
.gs-recent { width: 100%; max-width: 900px; margin-top: 46px; }
.gs-recent-lab { text-align: left; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin-bottom: 14px; }
.gs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.gs-card { background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; cursor: pointer; padding: 0; text-align: left; transition: border-color .12s, transform .12s; }
.gs-card:hover { border-color: rgba(0,0,0,.5); transform: translateY(-2px); }
.gs-card-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: #0a0812; overflow: hidden; pointer-events: none; }
.gs-card-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.gs-card-t { display: block; padding: 10px 12px; font-size: .88rem; font-weight: 600; color: var(--text); text-transform: capitalize; }
.gs-card { position: relative; }
.gs-card-del { position: absolute; top: 8px; right: 8px; z-index: 3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; border: 1px solid rgba(255,90,120,.32); background: rgba(10,8,16,.72); color: #ff9db0; cursor: pointer; opacity: 0; transform: translateY(-3px); transition: opacity .12s, transform .12s, background .12s, color .12s, border-color .12s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gs-card:hover .gs-card-del, .gs-card:focus-within .gs-card-del { opacity: 1; transform: none; }
.gs-card-del:hover { background: rgba(255,64,96,.92); color: #fff; border-color: transparent; }
.gs-card-del:focus-visible { opacity: 1; transform: none; outline: 2px solid #1e1e22; outline-offset: 2px; }

/* Preview (a game open) */
.gs-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 26px; }
.gs-frame-wrap { width: 100%; max-width: 1000px; }
.gs-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0a0812; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 90px -30px #000; }
.gs-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.gs-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 14px; }
.gs-meta b { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 1.1rem; text-transform: capitalize; }
.gs-meta span { color: var(--muted); font-size: .84rem; }

/* Revise bar under an open game (Game Studio iterate loop) */
.gs-revise { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.gs-revise input { flex: 1; min-width: 240px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; color: var(--text); font: inherit; font-size: .92rem; padding: 11px 14px; outline: none; }
.gs-revise input:focus { border-color: rgba(0,0,0,.5); }
.gs-revise input::placeholder { color: #5c5c66; }
.gs-revise .gs-status { flex-basis: 100%; text-align: left; }

/* Live code stream during a build (Game Studio) */
.gs-code { width: 100%; max-width: 640px; margin: 14px auto 0; max-height: 230px; overflow-y: auto;
  background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .74rem; line-height: 1.55;
  color: rgba(237,234,243,.72); white-space: pre-wrap; word-break: break-word; text-align: left; }
.gs-code::-webkit-scrollbar { width: 6px; }
.gs-code::-webkit-scrollbar-thumb { background: rgba(0,0,0,.4); border-radius: 999px; }

/* Preview/Code tabs + code view (Game Studio) */
.gs-tabs { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line-2); border-radius: 11px; background: rgba(0,0,0,.25); margin-right: 6px; }
.gs-tab { background: none; border: none; color: var(--muted); font: inherit; font-size: .84rem; font-weight: 600; padding: 6px 14px; border-radius: 8px; cursor: pointer; }
.gs-tab.on { background: var(--split); color: var(--on-accent); }
.gs-codeview { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 26px 60px; max-width: 1000px; margin: 0 auto; width: 100%; }
.gs-code-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.gs-code-head span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.gs-dl { background: var(--panel); border: 1px solid var(--line-2); color: var(--text); font: inherit; font-size: .84rem; font-weight: 600; padding: 8px 15px; border-radius: 10px; cursor: pointer; }
.gs-dl:hover { border-color: rgba(0,0,0,.5); }
.gs-code-load { color: var(--muted); font-size: .92rem; padding: 30px 0; text-align: center; }
.gs-file { margin-bottom: 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.gs-file-h { padding: 9px 14px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .78rem; color: var(--neon); background: rgba(0,0,0,.03); border-bottom: 1px solid var(--line); }
.gs-code-static { max-height: none; margin: 0; border: 0; border-radius: 0; background: rgba(0,0,0,.04); color: var(--text); }

/* AI-art toggle (Game Studio, Phase 6) */
.gs-toggles { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 0 0 18px; }
.gs-toggles .gs-arttoggle { margin: 0; }
.gs-beta { font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #000000; border: 1px solid rgba(0,0,0,.5); border-radius: 5px; padding: 1px 4px; margin-left: 2px; }
.gs-arttoggle { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.gs-artbtn { display: inline-flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line-2); color: var(--muted); font: inherit; font-size: .84rem; font-weight: 600; padding: 7px 14px 7px 8px; border-radius: 999px; cursor: pointer; }
.gs-artbtn.on { background: linear-gradient(120deg, rgba(0,0,0,.18), rgba(0,0,0,.18)); border-color: rgba(0,0,0,.5); color: var(--text); }
.gs-artknob { width: 30px; height: 18px; border-radius: 999px; background: rgba(0,0,0,.14); position: relative; transition: background .15s; flex-shrink: 0; }
.gs-artknob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28); transition: transform .15s; }
.gs-artbtn.on .gs-artknob { background: var(--split); }
.gs-artbtn.on .gs-artknob::after { transform: translateX(12px); }
.gs-arthint { color: var(--faint); font-size: .82rem; }

/* ===== Black-and-white theme — accent-ink fixups (owner 2026-07-23) =========
   The 2026-07-18 "dark fill + gradient-border" button language reads as solid
   black on the light theme, so every such control needs white ink. Appended
   last so it wins the earlier per-component fills. The pink→amber gradient now
   lives ONLY on the landing chatbox (see --halo). ========================== */
.mkt-cta{color:var(--on-accent)}
.send{color:var(--on-accent)}
.send-spark{color:rgba(255,255,255,.72)}
.send-price{-webkit-text-fill-color:var(--on-accent);color:var(--on-accent)}
/* `.st-pageitem.on` was in this list and is deliberately NOT any more. Everything
   left here is a control with a near-black FILL — a toolbar toggle, a view tab,
   the user's own message bubble — where white text is the only readable choice.
   A page-menu row is not one of those: it sits on white inside a dropdown, and
   marking the current page by filling its row black reads as a button about to
   be pressed rather than the state you are already in. It is marked by weight
   and a tick, the way the model menu marks its selection. Leaving it in the list
   after changing its background is what made the label render white-on-white. */
.mode-btn.active,
.st-pillbtn.on,.st-dev.on,.st-vtab.on,.st-msg.u{color:var(--on-accent)}
/* clean light landing — drop the CRT scanline texture */
.mkt-crt .crt-scan{display:none}

/* Payments panel — the setup checklist and the one URL an owner must move by
   hand. Monochrome like the rest: state is carried by fill and by a word, never
   by hue alone, so it survives greyscale and anyone who cannot see colour. */
.em-step.em-done .em-n { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }
.pay-ok, .pay-warn { border: 1px solid var(--line-2); border-radius: 10px; padding: .6rem .8rem; margin-bottom: .9rem; font-size: .85rem; }
/* A live shop reads as settled; a test key reads as unfinished. The filled rule
   on the left is the difference, not a colour. */
.pay-ok { border-left: 3px solid #0a0a0a; }
.pay-warn { border-left: 3px solid #0a0a0a; background: rgba(10, 10, 10, .04); }
.pay-hook { margin-top: 1rem; }
.pay-hook label { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .35rem; }
.pay-hook-row { display: flex; align-items: center; gap: .5rem; }
/* min-width:0 so the URL ellipsizes instead of pushing Copy off the card —
   the same flex failure as the Data rail, which this session hit twice. */
.pay-hook-row code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--line); border-radius: 8px; padding: .45rem .6rem; font-size: .78rem; background: var(--panel-2); }
.pay-hook-row .st-publish { flex: none; }

/* ── The landing's "AI models" dropdown ──────────────────────────────────────
   A menu hanging off the nav item, not a modal. Visibility is pure CSS on the
   wrapper's :hover / :focus-within — no open/close state to get stuck in, no
   close-timer to race a mouse with, and it works before chat.js has run.

   :focus-within is not decoration: hover alone is unreachable by keyboard and
   by anyone who cannot use a mouse, and this is the only way to see the list.

   The panel is a CHILD of the hovered wrapper and touches the button (the gap
   is padding-top on the panel, inside its own hit area), so moving the pointer
   down into it never crosses un-hovered ground and the menu never flickers
   shut mid-travel. */
.mkt-drop{position:relative;display:inline-flex}
.mdl-drop{
  position:absolute;top:100%;right:0;z-index:40;
  /* The gap under the trigger is PADDING, not margin — margin would be dead
     space that un-hovers the wrapper as the pointer crosses it. */
  padding-top:.55rem;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;
  pointer-events:none;
}
.mkt-drop:hover .mdl-drop,
.mkt-drop:focus-within .mdl-drop{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .16s ease,transform .16s ease,visibility 0s;
}
@media (prefers-reduced-motion:reduce){
  .mdl-drop{transition:none;transform:none}
  .mkt-drop:hover .mdl-drop,.mkt-drop:focus-within .mdl-drop{transition:none}
}
/* The card itself. Width is capped against the viewport as well as in px, and
   the height against the CRT screen — .crt-screen is overflow:hidden, so a
   panel taller than it is silently cut off rather than scrolled. */
.mdl-drop > .mdl-inner{
  width:min(430px,calc(100vw - 3rem));max-height:calc(100vh - 8.5rem);overflow-y:auto;
  background:var(--bg);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 46px rgba(0,0,0,.13),0 2px 6px rgba(0,0,0,.06);
  padding:1.15rem 1.25rem 1.25rem;text-align:left}
.mdl-sub{margin:0 0 .9rem;font-size:.78rem;color:var(--muted)}
/* Two columns, so nineteen models read at a glance instead of down a tube.
   break-inside:avoid keeps a group's heading with its own rows — a column
   break between them labels the wrong list. */
.mdl-groups{column-count:2;column-gap:1.5rem}
@media (max-width:720px){ .mdl-groups{column-count:1} }
.mdl-group{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 1.15rem;min-width:0}
.mdl-gh{margin:0 0 .25rem;font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text)}
.mdl-gsub{margin:0 0 .5rem;font-size:.74rem;line-height:1.4;color:var(--muted)}
.mdl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
/* A row is the model NAME and nothing else. It stays a block rather than a flex
   row precisely because there is no second thing to align against — and it
   keeps its own min-width:0 so a long name wraps inside the column instead of
   widening it. */
.mdl-row{padding:.4rem .62rem;background:var(--bg);min-width:0;
  font-weight:600;font-size:.79rem;color:var(--text)}

/* ── Cloud → Export data, and Cloud → Files ──────────────────────────────────
   Both panels were dark until 2026-08-07: Export offered snapshot/restore/import
   against routes deleted in July, and Files pointed at /api/site/files, gone the
   same day. Only the two that have real routes were wired; the rest still say
   plainly that they are off. */
.bk-rows{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.bk-row{display:flex;align-items:center;gap:1rem;padding:.7rem .9rem;background:var(--bg);min-width:0}
.bk-tx{display:flex;flex-direction:column;min-width:0}
.bk-tx b{font-size:.88rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-tx span{font-size:.75rem;color:var(--muted)}
.bk-btns{margin-left:auto;display:flex;gap:.4rem;flex:0 0 auto}
.bk-dl{border:1px solid var(--line-2);background:var(--bg);color:var(--text);border-radius:8px;
  padding:.3rem .6rem;font-size:.74rem;font-weight:600;cursor:pointer}
.bk-dl:hover{background:var(--panel)}
/* The two halves of Backups & export — the nightly whole-site copies above,
   the per-table export below. A heading each, so neither reads as the other. */
.bk-sec{margin-bottom:1.1rem}
/* An error message is a sentence, not a filename — it wraps rather than being
   cut to an ellipsis that hides the part naming the fault. */
.er-row .bk-tx b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
.bk-h{display:block;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 .45rem}

.fl-bar{display:flex;align-items:baseline;gap:.75rem;margin:0 0 .75rem;font-size:.8rem;color:var(--text)}
.fl-bar span{margin-left:auto;color:var(--muted);font-size:.75rem}
/* auto-fill, not auto-fit: one picture stays one tile rather than stretching
   across the whole modal. */
.fl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:.7rem}
.fl-item{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg);min-width:0}
.fl-item img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--panel)}
.fl-item figcaption{display:flex;align-items:center;gap:.4rem;padding:.4rem .5rem;min-width:0}
.fl-nm{font-size:.72rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fl-sz{font-size:.68rem;color:var(--muted);flex:0 0 auto}
.fl-del{margin-left:auto;flex:0 0 auto;border:0;background:none;color:var(--muted);
  font-size:1rem;line-height:1;cursor:pointer;padding:0 .1rem}
.fl-del:hover{color:var(--text)}
.fl-del:disabled{opacity:.4;cursor:default}
/* A file whose thumbnail would not load. The tile keeps its size so the grid
   does not reflow, and says which one is missing instead of showing a torn-page
   icon that reads as a broken panel. */
.fl-item.fl-gone a{display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;background:var(--panel);font-size:.7rem;color:var(--muted)}
.fl-item.fl-gone a::after{content:"not found"}
/* The add row, above the grid. */
.fl-add{display:flex;align-items:center;gap:.7rem;margin:0 0 .9rem;flex-wrap:wrap}
.fl-hint{font-size:.7rem;color:var(--muted)}
/* A DOCUMENT'S FACE IS ITS FORMAT, not a thumbnail. A PDF has no picture to
   show, and an <img> pointed at one paints the browser's torn-page icon on
   every card — which reads as a broken panel rather than as a working file.
   Same tile, same aspect ratio, so the grid does not reflow around it.

   THE ANCHOR HAS TO BE A BLOCK, and this was measured rather than reasoned. An
   <a> is inline, so the badge inside it had no definite width to derive its
   height from: `aspect-ratio:1` lost, the badge came out 180px tall in a 153px
   square, and `overflow:hidden` on the tile CUT THE FILENAME AND SIZE OFF
   ENTIRELY — a document tile that said nothing but "PDF". Every test passed.
   Found by looking at a render, which is the only thing that could have. */
.fl-item a{display:block;text-decoration:none;color:inherit}
.fl-doc{display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:1;background:var(--panel);
  font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--muted)}

/* An attachment with no picture — a PDF, a text file. The thumbnail tile would
   render `<img src="undefined">` and paint a broken-image icon, which reads as
   "your file failed" for one that is about to be used.

   WIDTH IS THE WHOLE POINT. `.st-att` is a fixed 56px square, which is right
   for a thumbnail and useless for a name: the first render came out as
   "spri…" and "pric…", so the one piece of information the chip carries was
   the one piece it cut off. Auto width with a ceiling, and the name is padded
   clear of the remove button so a long one does not run underneath it. */
.st-att-doc { width: auto; height: 56px; display: inline-flex; align-items: center; padding: 0 1.4rem 0 .6rem; background: var(--split); color: var(--on-accent); }
.st-att-doc .st-att-name { font-size: .72rem; font-weight: 600; line-height: 1.25; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Search-engine verification, inside the Domains panel — the other half of
   "my own address". Somebody who has just pointed a domain at their site is
   exactly the person about to ask why Google cannot find it. */
.sv-block{margin-top:1.4rem;border-top:1px solid var(--line);padding-top:1.1rem}
.sv-h{margin:0 0 .35rem;font-size:.85rem;font-weight:600;color:var(--text)}
.sv-row{display:grid;grid-template-columns:1fr;gap:.25rem;margin:0 0 .7rem}
.sv-lb{font-size:.75rem;font-weight:600;color:var(--text)}
/* THE HINT IS THE FEATURE, not decoration: a provider's page shows several
   strings and only one of them is the token, so naming the exact screen is
   what stops somebody pasting the wrong one and concluding this is broken. */
.sv-hint{font-size:.68rem;color:var(--muted)}
.sv-in{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem}
.sv-save{display:flex;align-items:center;gap:.7rem;margin-top:.2rem;flex-wrap:wrap}
.sv-msg{font-size:.72rem;color:var(--muted);flex:1 1 12rem;min-width:0}