/* ══════════════════════════════════════════════════════════════
   YouDoYou Design System — imported from shared.css reference
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ── Core palette ───────────────────────────────────────────────
     These are the landing page's values, character for character.
     Landing declares the same set on .lp in Pages/Landing.razor.css
     because that page is a self-contained marketing surface; this
     block is the app's copy of the same system, so a colour that
     changes on one has to change on the other. Everything below is
     an alias, so no rule outside this block should carry a literal
     colour. */
  --ink: #1a1d20;
  --muted: #6a6d76;
  --line: #e2e4e8;
  /* The landing page carries two border weights: --line for a hairline
     between things, and this one for the outline of something you can
     click, where a hairline reads as disabled. Landing spells it out on
     .btn-line. */
  --line-strong: #c9ccd2;
  /* Third weight, for the boundary of a field you type into. Landing
     uses #8f96a3 on .fl input; that measures 2.97:1 on white and 2.73:1
     on the ground, either side of the 3:1 WCAG 1.4.11 asks for a control
     boundary. This is the same grey nudged until it clears on both
     (3.33:1 and 3.06:1). Indistinguishable by eye, correct by measure. */
  --line-field: #868d9a;
  --ground: #f5f5f7;
  --surface: #ffffff;
  --pill: #edf3fa;

  --blue: #0b5cca;
  --blue-hover: #0a4fae;
  --blue-lt: #4d9de0;
  --blue-deep: #1d5ab8;

  --purple: #7b6fd4;
  --orange: #ff9f0a;
  --amber: #8a5a00;
  --green: #34c759;
  --red: #d92d20;

  /* ── Channels ───────────────────────────────────────────────────
     Tints and glows need the hue at an alpha, which a hex token cannot
     give, so the app had been writing them out by hand. Two of those
     hand-written hues were not ours: rgba(0,113,227) is Apple's blue
     and rgba(255,59,48) is iOS red, and between them they painted 43
     tints across 15 files in a palette the landing page never uses.
     These carry the real --blue and --red, so a tint is the same hue
     as the solid next to it. */
  --blue-rgb: 11, 92, 202;
  --red-rgb: 217, 45, 32;

  /* Text-safe partners for the decorative hues. Measured on white:
     green 2.22:1, orange 2.06:1, purple 4.14:1 and blue-lt 2.91:1
     all fail AA for body text, so a status word never uses them.
     These do: green-ink 5.86, amber 5.93, red 4.83, blue 6.18. */
  --green-ink: #087351;
  /* --red on --tint-red measures 4.39:1, under AA for body text, so error
     copy on a red card uses this instead: 6.58:1 on the tint, 7.25:1 on
     white. --red stays for fills, borders and icons. */
  --red-ink: #a52620;
  --amber-ink: var(--amber);
  /* Pressed and hover partners, one step darker, the way the landing
     page pairs --blue with --blue-hover. */
  --red-hover: #b8241a;

  /* Status tints. Backgrounds only, always with the matching -ink on top.
     There were four near-identical blues, three ambers and three reds in
     the sheets before this; these are the survivors. */
  --tint-blue: #eaf3ff;
  --tint-green: #e4f2eb;
  --tint-amber: #fff8e8;
  --tint-red: #fff1ef;
  /* A tint card needs a border of its own hue; --line reads as a mistake
     next to a coloured fill. */
  --tint-amber-line: #f0d48c;
  --tint-red-line: #efd1cd;
  /* The icon badges carry four more tint and ink pairs. They were spelled
     out as literals in workspace.css, which is how the set quietly grew. */
  --tint-purple: #eee8f6;
  --purple-ink: #74509b;
  --tint-cyan: #e3f2f5;
  --cyan-ink: #08778e;
  --tint-pink: #fae9ee;
  --pink-ink: #a93057;
  --ink-soft: #35434b;

  /* Elevation, same three steps as the landing page. */
  /* ── Focus and glow ──────────────────────────────────────────────
     Both read off the landing page. The ring is what .fl input:focus
     draws, the glow is what .btn-fill:hover draws. The app had been
     drawing the ring in four different blues at eight opacities, and
     the glow in the light blue with a positive spread, so it haloed
     the button instead of sitting under it. */
  --focus-ring: 0 0 0 3px rgba(11, 92, 202, 0.18);
  --glow: 0 6px 18px -10px rgba(11, 92, 202, 0.5);
  --e1: 0 1px 2px rgba(13,27,46,0.05), 0 4px 12px rgba(13,27,46,0.05);
  --e2: 0 2px 6px rgba(13,27,46,0.06), 0 12px 30px rgba(13,27,46,0.08);
  --e3: 0 6px 14px rgba(13,27,46,0.07), 0 28px 64px rgba(13,27,46,0.13);

  /* ── Aliases ────────────────────────────────────────────────────
     Older names kept so existing rules keep working. Prefer the
     core names above in anything new. */
  --color-primary-blue: var(--blue);
  --color-primary-purple: var(--purple);
  --color-highlight-cyan: #46abc1;
  --color-logo-blue: var(--blue-deep);

  --bg-canvas: var(--ground);
  --bg-pill: var(--pill);
  --border-light: var(--line);
  --border: var(--line);

  --bg: var(--ground);
  --card-bg: var(--surface);
  --text: var(--ink);
  --text-primary: var(--ink);
  --text-secondary: var(--muted);

  --accent: var(--blue);
  --accent-light: rgba(77, 157, 224, 0.1); /* --blue-lt at 10% */
  --accent-dark: var(--blue-hover);

  --pink: #ff2d55;
  --cyan: var(--color-highlight-cyan);

  /* ── Corner scale ───────────────────────────────────────────────
     Read off the landing page. Six steps carry almost all of it: 3px
     on .btn, 5px on the .hero-ask field shell, 6px on small tiles,
     8px on medium surfaces, 12px on every card, and 999px on pills.
     Two more exist only for hardware and for the big dark panels:
     landing's .phone is 30px and its .screen is 22px. The app had
     eighteen different radii before this, which is what made two
     panels side by side look like two products. */
  --radius-control: 3px;
  --radius-field: 5px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-panel: 22px;
  --radius-device: 30px;
  --radius-pill: 999px;
  --gap: 20px;
  --sidebar-w: 224px;
  --header-h: 64px;
  --content-max: 1120px;
  --content-wide-max: 1480px;
  /* ── Type scale ─────────────────────────────────────────────────
     Twelve declared steps. Before this the sheets carried thirteen
     undeclared px sizes plus eleven rem sizes between .65 and 1.7,
     which is how one panel ended up with .78rem, .8rem, .82rem and
     .84rem text in the same card. 11px is the floor: text at 9px and
     10px was in use and is not readable. */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-label: 13.5px;   /* landing .fl label */
  --fs-note: 14px;
  --fs-base: 15px;
  /* Every control label is one size, the landing page's .btn size.
     Primary buttons were 16px and secondary 15px before this, which
     made a pair of buttons side by side look misaligned. */
  --fs-control: 15.5px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-heading-sm: 20px;
  --fs-xl: 22px;
  --fs-heading: 24px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;

  /* Analyze page — light theme from mockup 10-analyze-shell-v1-soft-bento.svg */
  --analyze-bg-start: #F7F7F9;
  --analyze-bg-end: #F1F3F7;
  --analyze-card-radius: 36px;
  --analyze-inner-radius: 26px;
  --analyze-card-shadow: 0 18px 48px rgba(0,0,0,0.08);
  --analyze-progress-start: var(--color-primary-blue);
  --analyze-progress-end: var(--color-primary-purple);

  /* Report bento-grid — from mockup 03-report-popup-v1.svg */
  --report-card-bg: var(--surface);
  --report-card-shadow: 0 8px 32px rgba(0,0,0,0.06);
  --report-diagnostic-bg: var(--ground);

  /* Subscribe modal — from mockup 12-subscription-gate-v1-soft-bento.svg */
  --subscribe-overlay: rgba(0,0,0,0.45);
  --subscribe-card-bg: var(--surface);
  --subscribe-cta-gradient: var(--blue);

  --modal-z: 2000;
  --modal-overlay: rgba(15, 23, 42, 0.52);
  --modal-border: var(--line);
  --modal-radius: var(--radius);
  --modal-shadow: 0 24px 70px rgba(15, 23, 42, 0.26);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: var(--fs-base);
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* So no heading or sentence ends on one word by itself. Browsers that do not know these
   simply wrap as before. */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, figcaption, blockquote { text-wrap: pretty; }

body:has(.modal-overlay),
body:has(.sub-overlay),
body:has(.subscribe-overlay),
body:has(.studio-modal),
body:has(.spm-overlay),
body:has(.pg-modal-backdrop),
body:has(.ilm-backdrop),
body:has(.sc-img-overlay),
body:has(.sc-zoom-overlay),
body:has(.ip-overlay),
body:has(.adv-zoom-overlay),
body:has(.bp-backdrop),
body:has(.bid-backdrop),
body:has(.adp-backdrop),
body:has(.progress-panel-overlay),
body:has(.ech-lightbox),
body:has(.ec-lightbox),
body:has(.ydy-dialog-overlay) {
  overflow: hidden;
}

/* Below 960px the page scrolls under the 58px tab bar fixed to the foot of the screen, and a
   control tabbed to at the bottom stopped behind it (Dashboard, Library, Settings and more).
   The padding brings it up clear of the bar. */
/* Brand settings pins its save bar while there is something to save, over the tab bar on phones. */
html:has(.brand-save-actions.has-changes) {
  scroll-padding-bottom: 80px;
}

@media (max-width: 960px) {
  html:has(.workspace-main) {
    scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  html:has(.workspace-main .brand-save-actions.has-changes) {
    scroll-padding-bottom: calc(140px + env(safe-area-inset-bottom));
  }
}

/* The app bar is pinned at the top at every width, and tabbing back up a page stopped a control
   behind it. Edit media pins its own tool bar under the app bar (129px tall on a short phone). */
html:has(.workspace-main .header) {
  scroll-padding-top: calc(var(--header-h) + 12px);
}

html:has(.workspace-main .edit-media-header) {
  scroll-padding-top: calc(var(--header-h) + 78px);
}

@media (max-width: 760px) {
  html:has(.workspace-main .edit-media-header) {
    scroll-padding-top: 201px;
  }
}

/* Edit media pins the photo under its bar on a tall single-column screen (EditMedia.razor.css),
   and a slider tabbed to stopped behind the photo: 36vh (30vh on its side or on a phone) plus
   about 124px of card, 36px for the Crop hint and an 8px gap, under the 66px bar (61px on a phone). */
@media (max-width: 1120px) and (min-height: 600px) {
  html:has(.workspace-main .edit-media-header) {
    scroll-padding-top: calc(var(--header-h) + 238px + 36vh);
  }
}

@media (max-width: 1120px) and (min-height: 600px) and (orientation: landscape) {
  html:has(.workspace-main .edit-media-header) {
    scroll-padding-top: calc(var(--header-h) + 238px + 30vh);
  }
}

@media (max-width: 960px) and (min-height: 600px) {
  html:has(.workspace-main .edit-media-header) {
    scroll-padding-top: calc(298px + 36vh);
  }
}

@media (max-width: 960px) and (min-height: 600px) and (orientation: landscape) {
  html:has(.workspace-main .edit-media-header) {
    scroll-padding-top: calc(298px + 30vh);
  }
}

@media (max-width: 760px) and (min-height: 600px) {
  html:has(.workspace-main .edit-media-header) {
    scroll-padding-top: calc(289px + 30vh);
  }
}

/* The Crop hint takes two lines this narrow. */
@media (max-width: 360px) and (min-height: 600px) {
  html:has(.workspace-main .edit-media-header) {
    scroll-padding-top: calc(309px + 30vh);
  }
}

/* A short screen lets the app bar scroll away (workspace.css); only Edit media's bar stays. */
@media (max-width: 960px) and (max-height: 500px) {
  html:has(.workspace-main .header) {
    scroll-padding-top: 12px;
  }

  html:has(.workspace-main .edit-media-header) {
    scroll-padding-top: 141px;
  }
}

/* The calendar pins its day names under the app bar (Calendar.razor.css: about 38px over the
   month, 51px over the week where the week does not scroll sideways), and a post tabbed to on
   the way back up stopped under them. */
html:has(.workspace-main .calendar-scroll-month) {
  scroll-padding-top: calc(var(--header-h) + 50px);
}

@media (max-width: 640px), (min-width: 730px) and (max-width: 960px), (min-width: 980px) {
  html:has(.workspace-main .calendar-scroll-week) {
    scroll-padding-top: calc(var(--header-h) + 64px);
  }
}

@media (max-width: 960px) and (max-height: 500px) {
  html:has(.workspace-main .calendar-scroll-month) {
    scroll-padding-top: 50px;
  }
}

@media (max-width: 640px) and (max-height: 500px), (min-width: 730px) and (max-width: 960px) and (max-height: 500px) {
  html:has(.workspace-main .calendar-scroll-week) {
    scroll-padding-top: 64px;
  }
}

/* A visitor's report pins its "Your report" bar (69px) at the top, and a jump link or tabbing
   back up put headings and links under it. */
html:has(.rpt-topbar) {
  scroll-padding-top: 81px;
}

/* On phones the Studio page itself scrolls and its next bar (about 136px) is sticky over the
   foot of the screen. The padding keeps a control scrolled or tabbed into view clear of it. */
@media (max-width: 900px) {
  html:has(.fs-next-bar) {
    scroll-padding-bottom: 160px;
  }
}

/* ── Buttons ─────────────────────────────────────────────────────
   Same grammar as the landing page's .btn: one corner radius, one
   label size, weight 600, a 1px transparent border so filled and
   outlined buttons occupy the same box, the same four-property
   transition, and a 1px press. Height stays at the app's 44px rather
   than the landing's 52px, because a toolbar is denser than a hero;
   everything else is character for character.
   Landing equivalents: .btn-primary = .btn-fill, .btn-secondary =
   .btn-line, .btn-ghost = .btn-line at icon size. */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 24px; min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-family: inherit; font-size: var(--fs-control); font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .2s cubic-bezier(.16,1,.3,1);
}
.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active,
.btn-danger:active { transform: translateY(1px); }

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled,
.btn-danger:disabled,
.btn-primary[aria-disabled="true"],
.btn-secondary[aria-disabled="true"],
.btn-ghost[aria-disabled="true"],
.btn-danger[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--e1); }
.btn-primary:hover { background: var(--accent-dark); box-shadow: var(--e2); text-decoration: none; }
.btn-primary svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; }

.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }

.btn-ghost {
  justify-content: center; gap: 6px;
  background: var(--surface); border-color: var(--line-strong); color: var(--ink);
  padding: 8px 14px; min-width: 44px;
}
.btn-ghost:hover { border-color: var(--ink); background: var(--surface); color: var(--ink); text-decoration: none; }

.btn-sm { padding: 7px 14px; border-radius: var(--radius-control); font-size: var(--fs-sm); min-height: 44px; }
.btn-danger { background: var(--red); color: #fff; box-shadow: var(--e1); }
.btn-danger:hover { background: var(--red-hover); box-shadow: var(--e2); text-decoration: none; }

/* Mobile parity with the Studio 44pt tap-target rule — Settings,
   Brand, and modal action buttons all measured ~40px on phones, below the
   Apple HIG minimum. Keep desktop sizing untouched. */
@media (max-width: 640px) {
  .btn-primary,
  .btn-secondary,
  .btn-danger,
  .danger-btn,
  .btn-sm,
  .btn-ghost,
  .edit-btn {
    min-height: 44px;
  }
}

/* Keyboard focus must remain visible even where component styles remove the
   default outline. Keep the ring broad and token-based so it covers shared
   buttons, icon buttons, accordions, links, form fields, and editor controls.
   A control inside a box that clips (a tab strip, a photo tile) draws the ring inside
   itself with its own outline-offset, which needs !important to win over this. Without
   it the ring sat outside and was cut off on three sides. */
:where(a[href], button, input, textarea, select, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--blue) !important;
  outline-offset: 3px !important;
  box-shadow: var(--focus-ring) !important;
}

/* A date or time field puts focus on one of its parts (hour, minute, AM/PM), so in Chromium the
   field itself never matches :focus or :focus-visible and no ring showed on any of them. */
input:is([type="time"], [type="date"], [type="datetime-local"], [type="month"], [type="week"]):focus-within {
  outline: 2px solid var(--blue) !important;
  outline-offset: 3px !important;
  box-shadow: var(--focus-ring) !important;
  border-color: var(--blue);
}

:where(a[href], button, input, textarea, select, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* A drop-down list opens on a click like every other control, so it shows the same hand. It kept
   the browser's arrow, the one control in the app that did. :where keeps any page's own rule. */
:where(select:not(:disabled)) {
  cursor: pointer;
}

/* FocusOnNavigate (App.razor) focuses each new page's h1 and gives it tabindex="-1" so a
   screen reader announces the page. A heading is not a control and draws no ring. On a
   first visit Chrome treats that focus as keyboard focus, so the privacy, terms and
   recovery pages opened with a box around their title. !important because the
   page-scoped :focus-visible rings outrank a global rule. The part of the page that takes
   focus when the button pressed in it goes away (index.html) is not a control either. Nor is
   a window's own root, which takes focus on open so Escape reaches it: Chrome drew an orange
   line round the whole screen for Simple mode's window on a phone. */
h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus,
h3[tabindex="-1"]:focus,
h4[tabindex="-1"]:focus,
[data-focus-place]:focus,
:is(.sc-root, .sc-img-overlay, .sc-zoom-overlay, .studio-modal, .ilm-backdrop, .adp-panel)[tabindex="-1"]:focus {
  outline: none !important;
}

/* Skip to content (AuthenticatedLayout): first in the tab order, out of sight until it has focus. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 12px 18px;
  border-radius: var(--radius-control);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(calc(-100% - 24px));
}

.skip-link:focus {
  transform: none;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The page it skips to. A whole page is not a control, so it draws no ring. */
.workspace-body:focus {
  outline: none;
}

/* While the offline notice shows, the foot of every page gets that much more room, so its last
   row can be scrolled out from under it (connection-notice.js sets the height). */
.workspace-body::after {
  content: "";
  display: block;
  height: var(--connection-notice-room, 0px);
}

/* PageCrashBoundary: a page that threw says so in its own place, with the way back. */
.page-crash {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  margin: clamp(24px, 8vh, 72px) auto;
  max-width: 480px;
  padding: 28px;
  width: calc(100% - 32px);
}

.page-crash h1 {
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0 0 8px;
}

.page-crash p {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  margin: 0 0 20px;
}

.page-crash-reload {
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.page-crash-reload:hover {
  background: var(--accent-dark);
}

.page-crash-reload:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The last resort when something fails outside any page (index.html). Blazor shows it. */
#blazor-error-ui {
  display: none;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2000;
  max-width: 560px;
  margin: 0 auto;
  padding: 14px 48px 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: #fff;
  font-size: var(--fs-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

#blazor-error-ui .reload {
  color: #fff;
  /* 24px tall at least, so a thumb can hit it on a phone (it was 16). */
  display: inline-block;
  font-weight: 700;
  margin-left: 6px;
  padding: 4px 0;
}

#blazor-error-ui .dismiss {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* NewReleaseNotice: the API answered from a newer release than this tab runs. At the top, so it
   never covers the bars pinned to the foot of the screen (the Studio's Schedule bar). */
.release-notice {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 1950;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 6px 6px 6px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: #fff;
  font-size: var(--fs-sm);
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.release-notice-reload,
.release-notice-dismiss {
  flex: none;
  min-height: 36px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.release-notice-reload { padding: 0 12px; text-decoration: underline; }
.release-notice-dismiss { width: 36px; font-size: 20px; line-height: 1; }
.release-notice-reload:hover,
.release-notice-dismiss:hover { background: rgba(255, 255, 255, 0.14); }

@media (min-width: 961px) {
  body:has(.workspace-main) .release-notice {
    left: calc(50% + var(--sidebar-w) / 2);
    max-width: calc(100% - var(--sidebar-w) - 32px);
  }
}

/* connection-notice.js: while the browser is offline, and for a moment once it is back. The
   script lifts it above any bar pinned to the foot of the screen. Empty, it is an invisible
   point that stays a live region, so the words are read out when they arrive. */
#connection-notice {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 1900;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  /* Transparent here, drawn in High Contrast, where the dark fill is dropped. */
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

#connection-notice:empty {
  padding: 0;
  border: 0;
  box-shadow: none;
}

#connection-notice.online {
  background: var(--green-ink);
}

/* Said in full first, then this small while the connection stays down, so it stops covering
   what is just above the foot of the screen. */
#connection-notice.compact {
  padding: 6px 12px;
  font-size: var(--fs-xs);
}

/* Centred on the page beside the sidebar, not on the whole window. */
@media (min-width: 961px) {
  body:has(.workspace-main) #connection-notice {
    left: calc(50% + var(--sidebar-w) / 2);
    max-width: calc(100% - var(--sidebar-w) - 32px);
  }
}

/* Windows High Contrast drops colour fills, and with them every "this one" mark: the page you
   are on, a pressed filter or view, the open tab. System colours put the mark back. Platform
   logos keep their own colours, because their white glyph vanished with the dropped fill. */
@media (forced-colors: active) {
  :is([aria-pressed="true"], [aria-current="page"], [aria-current="true"], [aria-selected="true"], [aria-checked="true"]) {
    forced-color-adjust: none;
    background: SelectedItem !important;
    border-color: SelectedItem !important;
    color: SelectedItemText !important;
  }

  :is([aria-pressed="true"], [aria-current="page"], [aria-current="true"], [aria-selected="true"], [aria-checked="true"]) :not(.platform-logo-badge, .platform-logo-badge *) {
    background-color: transparent !important;
    border-color: currentColor !important;
    color: inherit !important;
  }

  .platform-logo-badge {
    forced-color-adjust: none;
  }

  /* White line icons sat on a coloured tile, which drops here, leaving white on white: the
     Image Studio mark and the analysis card icons. They take the text colour instead. */
  svg[stroke="white"] {
    stroke: currentColor;
  }

  /* Initials sat on a tinted circle or tile, which drops here, leaving a lone letter: the
     account button, the workspace badge, team members, the post frame's account and the
     Studio and Simple marks. */
  .avatar-circle,
  .workspace-avatar,
  .member-avatar,
  span.fs-frame-avatar,
  .fs-brand-mark,
  .simple-mark {
    border: 1px solid CanvasText;
  }

  /* A colour swatch is its colour. Each was painted the page colour, and a chosen one the
     selection colour, so brand colours and the editors' text colours were rows of blank
     shapes. They keep their colours; the chosen one gets a ring. */
  .color-swatch,
  .color-dot,
  .adp-color-swatch,
  .rpt-swatch,
  .trust-swatch,
  .ilm-swatch,
  .lac-color-swatch,
  .ie-prop-swatch,
  .ve-color-swatch {
    forced-color-adjust: none;
    border: 1px solid CanvasText !important;
  }

  :is(.ie-prop-swatch, .ve-color-swatch)[aria-pressed] {
    background: var(--swatch) !important;
  }

  .ie-prop-swatch-active,
  .ve-color-swatch-active {
    outline: 3px solid Highlight !important;
    outline-offset: 2px !important;
  }

  /* The photo editor's Place grid (text and logo) is nine borderless tiles with a filled dot,
     so all that was left was the word Place over an empty gap. */
  .ie-place-spot {
    border: 1px solid ButtonText !important;
  }

  .ie-place-spot span {
    forced-color-adjust: none;
    background: ButtonText !important;
  }

  /* Small marks drawn as a fill: the dot before a draft's state on the Dashboard and Studio
     home, Studio home's Auto line, Auto's On badge, Brand Hub's list bullets, the landing
     page's dots, the FAQ's plus and minus and the preview menu glyph. The fill drops here,
     leaving a gap or a button with no sign on it. */
  .dash-state::before,
  .studio-draft-state::before,
  .studio-route-status::before,
  .auto-status-badge > span,
  .brand-hub-list li::before,
  .done h3::before,
  .qa summary i::before,
  .qa summary i::after,
  .sc-preview-menu-glyph span {
    forced-color-adjust: none;
    background: CanvasText !important;
  }

  /* The plan picker's Continue is a fill with no border, so it read as a line of text. */
  .sub-primary-btn {
    border: 1px solid ButtonText !important;
  }

  /* Sliders drew their track and handle as backgrounds, which drop here, so the photo
     editor's Brightness, Contrast and the rest showed as labels over empty space. They
     take system colours instead. */
  input[type="range"] {
    forced-color-adjust: none;
    background-color: transparent !important;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(CanvasText, CanvasText) center / 100% 2px no-repeat !important;
  }

  input[type="range"]::-moz-range-track {
    background: linear-gradient(CanvasText, CanvasText) center / 100% 2px no-repeat !important;
  }

  input[type="range"]::-webkit-slider-thumb {
    background: Highlight !important;
    border: 2px solid Canvas !important;
    box-shadow: 0 0 0 1px CanvasText !important;
  }

  input[type="range"]::-moz-range-thumb {
    background: Highlight !important;
    border: 2px solid Canvas !important;
    box-shadow: 0 0 0 1px CanvasText !important;
  }

  input[type="range"]:disabled::-webkit-slider-thumb {
    background: GrayText !important;
  }

  input[type="range"]:disabled::-moz-range-thumb {
    background: GrayText !important;
  }

  input[type="range"]:focus-visible {
    outline: 2px solid Highlight;
  }
}

/* ── Native tick boxes ──────────────────────────────────────────
   Five controls in the product are native checkboxes: four in AI
   settings and one on a brand library tile. Nothing had ever sized
   them, so the browser drew them at 13px in the platform's own blue.
   The landing page has none, so this rule reaches only the app. */
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--blue);
}

/* The label is what you click, so the row carries the 24px target that
   WCAG 2.5.8 asks for, not the box. It had been sitting at 23px. */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  cursor: pointer;
  font-size: var(--fs-md);
}

/* ── Accordion ── */
.accordion { display: flex; flex-direction: column; gap: 8px; }
.acc-item { background: var(--card-bg); border-radius: var(--radius); overflow: hidden; transition: box-shadow 0.3s; }
.acc-item:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.05); }
.acc-trigger {
  width: 100%; display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; border: none; background: none;
  cursor: pointer; text-align: left; transition: background 0.15s;
  font-family: inherit;
}
.acc-trigger:hover { background: rgba(0,0,0,0.01); }
.acc-heading { margin: 0; font: inherit; }
.acc-trigger .acc-title { font-size: var(--fs-lg); font-weight: 600; flex: 1; color: var(--text); text-wrap: balance; }
.acc-summary { font-size: var(--fs-base); color: var(--text-secondary); margin-right: 12px; }
.acc-chevron {
  width: 20px; height: 20px; stroke: var(--text-secondary); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.3s; flex-shrink: 0;
}
.acc-item.open .acc-chevron { transform: rotate(180deg); }
.acc-body { display: none; padding: 0 24px 24px; }
.acc-item.open .acc-body { display: block; }
.acc-divider { height: 1px; background: var(--line); margin-bottom: 20px; }

/* ── Cards (design system) ── */
.card {
  background: var(--card-bg); border-radius: var(--radius);
  padding: 24px; transition: box-shadow 0.3s;
}
.card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.05); }
.card-sm { border-radius: var(--radius-sm); padding: 16px; }

/* ── Tags ── */
.tag {
  display: inline-block; font-size: var(--fs-sm); font-weight: 600;
  padding: 5px 11px; border-radius: var(--radius-pill); margin: 2px;
}
.tag-blue   { background: rgba(77,157,224,0.1); color: var(--blue); }
.tag-green  { background: rgba(52,199,89,0.1); color: var(--green-ink); }
.tag-purple { background: rgba(175,82,222,0.1); color: var(--purple-ink); }
.tag-orange { background: rgba(255,159,10,0.1); color: var(--amber); }
.tag-gray   { background: rgba(99,99,102,0.1); color: var(--ink-soft); }
.tag-red    { background: var(--tint-red); color: var(--red-ink); }
.tag-pink   { background: var(--tint-pink); color: var(--pink-ink); }
.tag-cyan   { background: rgba(48,176,199,0.1); color: var(--cyan-ink); }
.tag-dark   { background: rgba(0,0,0,0.06); color: var(--muted); }
/* High Contrast drops the tinted fill, and Brand Hub's "Words that fit you" read as loose words. */
@media (forced-colors: active) {
  .tag { border: 1px solid CanvasText; }
}

/* ── Data rows ── */
.data-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.data-row:last-child { border-bottom: none; }
.data-label { font-size: var(--fs-base); color: var(--text-secondary); }
.data-value { font-size: var(--fs-md); font-weight: 600; }

/* ── Eyebrow labels ── */
.eyebrow {
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-secondary);
  margin-bottom: 8px; margin-top: 16px;
}
.eyebrow:first-child { margin-top: 0; }

/* ── Grid helpers ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.four-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ── Stat cards ── */
.stat-card { background: var(--card-bg); border-radius: var(--radius-sm); padding: 20px; }
.stat-value { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; }
.stat-label { font-size: var(--fs-base); color: var(--text-secondary); margin-top: 4px; }
.stat-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-sm); font-weight: 600; padding: 4px 9px; border-radius: var(--radius-sm); margin-top: 8px;
}
.stat-trend.up { background: rgba(52,199,89,0.1); color: var(--green-ink); }
.stat-trend.down { background: rgba(255,45,85,0.1); color: var(--red); }


/* ── Toggle switch ── */
.toggle-group { display: inline-flex; background: var(--line); border-radius: var(--radius); padding: 3px; }
.toggle-opt {
  padding: 9px 18px; border-radius: var(--radius-sm); border: none;
  font-size: var(--fs-base); font-weight: 600; cursor: pointer;
  background: transparent; color: var(--text-secondary);
  font-family: inherit; transition: all 0.2s;
}
.toggle-opt.active { background: #fff; color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }

/* ── Social rows ── */
.social-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px; background: var(--bg); border-radius: var(--radius-sm); margin-bottom: 8px;
}
.social-row:last-child { margin-bottom: 0; }
.social-left { display: flex; align-items: center; gap: 12px; }
.social-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.social-icon svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; }

/* ── Sidebar (design system — matches shared.css) ── */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: #000;
  padding: 10px; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
}
.sidebar-inner {
  background: var(--ink); border-radius: var(--radius-panel); height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
}
.sidebar-logo {
  padding: 22px 20px; border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: var(--fs-xl); font-weight: 700; color: #fff;
}
.sidebar-logo a { color: #fff; text-decoration: none; }
.sidebar-workspace { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.workspace-btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.05); border: none; border-radius: var(--radius-control);
  padding: 10px 14px; color: #fff; font-size: var(--fs-base);
  cursor: pointer; font-family: inherit; transition: background 0.15s;
  text-decoration: none; line-height: normal;
}
.workspace-btn:hover { background: rgba(255,255,255,0.1); }
.workspace-avatar {
  width: 28px; height: 28px; background: var(--accent); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: 700; color: #fff; flex-shrink: 0;
}
.sidebar-nav { flex: 1; padding: 14px 10px; overflow-y: auto; }
.sidebar-nav::-webkit-scrollbar { display: none; }
.nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--radius-sm); color: var(--line-strong);
  font-size: var(--fs-md); font-weight: 500; text-decoration: none;
  transition: all 0.15s; margin-bottom: 2px;
}
.nav-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-link.active { background: rgba(77,157,224,0.25); color: #fff; }
.nav-link svg {
  width: 20px; height: 20px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}
.nav-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 10px 14px; }
.sidebar-footer { padding: 16px 18px; border-top: 1px solid rgba(255,255,255,0.08); }
.usage-label { display: flex; justify-content: space-between; font-size: var(--fs-sm); margin-bottom: 8px; }
.usage-label span:first-child { color: var(--muted); }
.usage-label span:last-child { color: #fff; }
.usage-bar { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.usage-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.3s; }
.upgrade-btn {
  display: block; width: 100%; margin-top: 12px; padding: 11px;
  min-height: 44px; background: rgba(77,157,224,0.15); border: none;
  border-radius: var(--radius-control); color: var(--accent); font-size: var(--fs-sm);
  font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s;
}
.upgrade-btn:hover { background: rgba(77,157,224,0.25); }

/* ── Main area ── */
.main { flex: 1; margin-left: var(--sidebar-w); overflow-y: auto; min-height: 100vh; }

/* ── Header (design system) ── */
.header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(245,245,247,0.85);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  padding: 0 32px; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
}
.header-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.search-box { position: relative; }

.search-box input{
  width: 260px; padding: 10px 14px 10px 38px; min-height: 44px;
  border: 1.5px solid var(--line-field); border-radius: var(--radius-control);
  font-size: var(--fs-base); background: #fff; outline: none; font-family: inherit;
}
.search-box input:focus { border-color: var(--accent); }
.search-box svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; stroke: var(--muted); fill: none; stroke-width: 2;
}
.notif-btn {
  position: relative; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: var(--radius-control);
  cursor: pointer; transition: background 0.15s;
}
.notif-btn:hover { background: rgba(0,0,0,0.04); }
.notif-btn svg { width: 20px; height: 20px; stroke: var(--muted); fill: none; stroke-width: 1.8; }
.notif-dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; background: var(--pink); border-radius: 50%;
  border: 2px solid var(--bg);
}
.avatar-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px; border: none; background: transparent;
  border-radius: var(--radius-control); cursor: pointer; font-family: inherit;
}
.avatar-btn:hover { background: rgba(0,0,0,0.04); }
.avatar-circle {
  width: 32px; height: 32px; background: var(--accent-light);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: 600; color: var(--accent);
}
.avatar-btn span { font-size: var(--fs-base); font-weight: 500; color: var(--text); }

/* ── Dashboard-specific ── */
.quick-action-card {
  text-decoration: none; display: flex; align-items: center; gap: 14px;
  cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s, box-shadow 0.2s;
}
.quick-action-card:hover { border-color: var(--accent); }

.platform-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--radius-xs); flex-shrink: 0;
}
.platform-icon svg { width: 14px; height: 14px; fill: #fff; stroke: none; }
.pi-ig { background: linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045); }
.pi-fb { background: #1877f2; }
.pi-tw { background: #000; }
.pi-tk { background: #000; }

.post-row {
  display: flex; align-items: center; gap: 14px; padding: 14px;
  background: var(--bg); border-radius: var(--radius-sm); margin-bottom: 8px;
  transition: background 0.15s;
}
.post-row:last-child { margin-bottom: 0; }
.post-row:hover { background: var(--line); }
.post-meta { flex: 1; min-width: 0; }
.post-title { font-size: var(--fs-md); font-weight: 600; margin-bottom: 3px; }
.post-sub { font-size: var(--fs-sm); color: var(--text-secondary); }
.post-tags { display: flex; gap: 6px; }

.suggestion-row {
  display: flex; align-items: center; gap: 14px; padding: 14px;
  background: var(--bg); border-radius: var(--radius-sm); transition: background 0.15s;
}
.suggestion-row:hover { background: var(--line); }
.suggestion-row.top-pick {
  background: rgba(77,157,224,0.05); border: 1px solid rgba(77,157,224,0.18);
}
.suggestion-row.top-pick:hover { background: rgba(77,157,224,0.09); }
.suggestion-body { flex: 1; min-width: 0; }
.suggestion-title { font-size: var(--fs-md); font-weight: 600; margin-bottom: 3px; }
.suggestion-desc { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.35; max-width: 68ch; }

.stat-card-dashboard { background: var(--bg) !important; }

.activity-row .data-label { color: var(--text); font-size: var(--fs-base); }
.activity-row .data-value { font-size: var(--fs-sm); }

.dashboard-alert {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; margin-bottom: 24px;
  border-radius: var(--radius-sm);
}
.dashboard-alert svg {
  width: 22px; height: 22px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.dashboard-alert-warning {
  background: var(--ground); border: 1px solid var(--amber); color: var(--amber);
}
.dashboard-alert-title {
  font-weight: 700;
}
.dashboard-alert-copy {
  color: var(--amber); font-size: var(--fs-sm); margin-top: 2px;
}

.sidebar-analysis-info {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; margin: 0 10px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: var(--line-field); font-size: var(--fs-sm); line-height: 1.35;
}
.sidebar-analysis-info svg { stroke: currentColor !important; flex-shrink: 0; }

/* A Settings section that loads to a screen or more (Profile, Workspace, brand and AI) holds a screen
   while it loads. Its one line of "Loading..." left the sections under it in view, and the form
   then pushed them down the page. */
.settings-loading-tall { min-height: 100vh; }
a.sidebar-analysis-info { text-decoration: none; border-radius: var(--radius-xs); }
a.sidebar-analysis-info:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

/* ── Calendar-specific ── */
.cal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.cal-nav { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cal-nav h2 { font-size: var(--fs-xl); font-weight: 700; min-width: 200px; }
.cal-nav-btn {
  width: 36px; height: 36px; border: none; background: #fff; border-radius: var(--radius-control);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.cal-nav-btn:hover { background: var(--line); }
.cal-nav-btn svg { width: 18px; height: 18px; stroke: var(--text); fill: none; stroke-width: 2; }
.today-btn {
  padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--radius-control); background: #fff;
  font-size: var(--fs-xs); font-weight: 600; color: var(--accent); cursor: pointer;
  font-family: inherit; transition: all 0.15s;
}
.today-btn:hover { background: var(--accent-light); border-color: var(--accent); }

.cal-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 16px; min-width: 0; }
.cal-grid { background: #fff; border-radius: var(--radius); overflow: hidden; }
.cal-day-headers { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); border-bottom: 1px solid var(--line); }
.cal-day-header { padding: 12px; text-align: center; font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); }
.cal-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.cal-day {
  min-height: 110px; padding: 8px; border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line); position: relative; cursor: pointer;
  transition: background 0.15s; min-width: 0; overflow: hidden;
}
.cal-day:hover { background: rgba(var(--blue-rgb), 0.02); }
.cal-day:nth-child(7n) { border-right: none; }
.cal-day.other-month { background: var(--ground); }
/* --line-strong is a border grey and measures 1.48:1 on the ground, so the
   leading and trailing dates of a month were not readable. The grey cell is
   what marks them as outside the month; the number itself is still a date. */
.cal-day.other-month .day-num { color: var(--muted); }
.cal-day.today { background: rgba(var(--blue-rgb), 0.04); }
.cal-day.today .day-num { background: var(--accent); color: #fff; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
.day-num { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 4px; }

.post-chip {
  padding: 4px 8px; border-radius: var(--radius-pill); font-size: var(--fs-2xs); font-weight: 600;
  margin-bottom: 3px; display: flex; align-items: center; gap: 4px;
  cursor: pointer; transition: box-shadow 0.15s; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}
.post-chip span:first-child { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.post-chip:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
/* ── Calendar post chips ────────────────────────────────────────
   These carried a 3px stripe down the left edge on top of a pill radius, so a
   straight bar met a fully rounded end. The platform is already said twice over,
   in the tint and in the text colour, and every other side stripe in the product
   came off earlier for the same reason. The hues stay: these are the platforms'
   own colours, not ours to restyle. */
.post-chip.ig { background: rgba(131,58,180,0.1); color: #833ab4; }
.post-chip.fb { background: rgba(24,119,242,0.1); color: #1877f2; }
.post-chip.tw { background: rgba(29,161,242,0.1); color: #1da1f2; }
.post-chip.tk { background: rgba(0,0,0,0.06); color: var(--ink); }
.post-chip.multi { background: rgba(var(--blue-rgb), 0.06); color: var(--accent); }
.post-chip .chip-time { font-size: var(--fs-2xs); opacity: 0.7; }
.more-posts { font-size: var(--fs-2xs); color: var(--text-secondary); text-align: center; padding: 2px; }
.calendar-week { background: #fff; border-radius: var(--radius); overflow: hidden; }
.calendar-week-row { display: grid; grid-template-columns: 60px repeat(7,minmax(0,1fr)); border-bottom: 1px solid var(--ground); min-height: 48px; }
.calendar-week-head { border-bottom-color: var(--line); min-height: 0; }
.calendar-week-time-spacer,
.calendar-week-day { padding: 12px; }
.calendar-week-day { text-align: center; font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary); min-width: 0; }
.calendar-week-day.today { color: var(--accent); }
.calendar-week-time { padding: 4px 8px; font-size: var(--fs-2xs); color: var(--text-secondary); text-align: right; }
.calendar-week-cell { border-right: 1px solid var(--ground); padding: 2px 4px; min-height: 48px; min-width: 0; overflow: hidden; }
.calendar-week-cell:last-child { border-right: none; }
.calendar-week-chip { padding: 3px 6px; border-radius: 4px; font-size: var(--fs-2xs); font-weight: 600; margin-bottom: 2px; min-width: 0; }
.calendar-week-chip .chip-time { margin-left: auto; flex-shrink: 0; }
.cal-legend { margin-top: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; }

.auto-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2xs);
  font-weight: 600; padding: 3px 8px; border-radius: var(--radius-xs);
  background: rgba(52,199,89,0.1); color: var(--green-ink);
}
.auto-badge svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

.cal-filters { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.filter-chip {
  padding: 6px 14px; border-radius: var(--radius-pill); border: none; font-size: var(--fs-2xs);
  font-weight: 600; cursor: pointer; font-family: inherit; transition: opacity 0.2s;
}
.filter-chip.active { opacity: 1; }
.filter-chip:not(.active) { opacity: 0.4; }

/* Slide-out panel */
.slide-panel {
  position: fixed; top: 0; right: -400px; width: 400px; height: 100%;
  background: #fff; box-shadow: -4px 0 24px rgba(0,0,0,0.1);
  z-index: 100; transition: right 0.3s ease; padding: 24px; overflow-y: auto;
}
.slide-panel.open { right: 0; }
.slide-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.2); z-index: 99; display: none; }
.slide-overlay.open { display: block; }
.panel-close {
  width: 32px; height: 32px; border: none; background: var(--line); border-radius: var(--radius-control);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.panel-close svg { width: 16px; height: 16px; stroke: var(--text); fill: none; stroke-width: 2; }

/* ── Brand Hub-specific ── */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-header .eyebrow { margin: 0; }
.edit-btn {
  display: inline-flex; align-items: center; gap: 6px; background: none;
  border: 1px solid var(--line); padding: 6px 14px; border-radius: var(--radius-control);
  font-size: var(--fs-xs); font-weight: 600; color: var(--accent); cursor: pointer;
  font-family: inherit; transition: all 0.15s; min-height: 44px; text-decoration: none;
}
.edit-btn:hover { background: var(--accent-light); border-color: var(--accent); }
.edit-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.pillar-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pillar { padding: 16px; border-radius: var(--radius-sm); }
.pillar h3 { font-size: var(--fs-md); font-weight: 600; margin-bottom: 4px; }
.pillar p { font-size: var(--fs-base); color: var(--muted); line-height: 1.5; }
.pillar-pct { font-size: var(--fs-sm); font-weight: 700; margin-top: 8px; }

.tag-container { display: flex; flex-wrap: wrap; gap: 4px; }

.competitor-row {
  display: flex; align-items: center; gap: 14px; padding: 14px;
  background: var(--bg); border-radius: var(--radius-sm); margin-bottom: 8px;
}
.competitor-row:last-child { margin-bottom: 0; }
.competitor-rank {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 700; flex-shrink: 0;
}
.rank-high { background: rgba(255,45,85,0.1); color: var(--pink); }
.rank-med { background: rgba(255,159,10,0.1); color: var(--orange); }

.idea-row {
  display: flex; align-items: center; gap: 14px; padding: 12px;
  background: var(--bg); border-radius: var(--radius-sm); margin-bottom: 8px;
}
.idea-row:last-child { margin-bottom: 0; }

.qw-row {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  background: var(--bg); border-radius: var(--radius-sm); margin-bottom: 8px;
}
.qw-row:last-child { margin-bottom: 0; }
.qw-check { width: 20px; height: 20px; border: 2px solid var(--line-strong); border-radius: var(--radius-xs); flex-shrink: 0; }
.qw-priority {
  font-size: var(--fs-2xs); font-weight: 700; padding: 3px 8px; border-radius: var(--radius-xs);
  margin-left: auto; flex-shrink: 0;
}

/* ── Settings-specific ── */
/* Was 12px uppercase muted with tracking, which is a second label grammar
   for the same job. The landing page labels a field in sentence case, in
   ink, at 13.5px. One grammar. */
/* The browser's own 0.8em would put <small> at 10.8px inside a 13.5px
   parent, below the 11px floor the type scale sets. */
small { font-size: var(--fs-2xs); }
.form-label {
  display: block; font-size: var(--fs-label); font-weight: 600;
  color: var(--ink); margin-bottom: 8px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.switch-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.switch-row:last-child { border-bottom: none; }
.switch-label { font-size: var(--fs-base); font-weight: 500; }
.switch-desc { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 2px; }
.switch {
  width: 44px; height: 24px; background: var(--line); border-radius: var(--radius-pill);
  position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0;
  border: none;
}
.switch.on { background: var(--accent); }
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; background: #fff; border-radius: 50%;
  transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.switch.on::after { transform: translateX(20px); }

.plan-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.plan-card {
  padding: 20px; border: 2px solid var(--line); border-radius: var(--radius-sm);
  text-align: center; cursor: pointer; transition: all 0.2s; position: relative;
}
.plan-card:hover { border-color: var(--accent); }
.plan-card.current { border-color: var(--accent); background: var(--accent-light); }
.plan-card.current::after {
  content: 'Current'; position: absolute; top: -10px; right: 12px;
  font-size: var(--fs-xs); font-weight: 700; background: var(--accent); color: #fff;
  padding: 2px 8px; border-radius: var(--radius-xs);
}
.plan-name { font-size: var(--fs-md); font-weight: 700; margin-bottom: 4px; }
.plan-price { font-size: var(--fs-2xl); font-weight: 700; color: var(--accent); }
.plan-price span { font-size: var(--fs-sm); font-weight: 400; color: var(--text-secondary); }
.plan-features { list-style: none; margin-top: 12px; text-align: left; padding: 0; }
.plan-features li {
  font-size: var(--fs-sm); padding: 4px 0; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}
.plan-features li::before { content: '✓'; color: var(--green-ink); font-weight: 700; font-size: var(--fs-xs); }

.usage-meter { margin-bottom: 16px; }
.usage-meter:last-child { margin-bottom: 0; }
.usage-meter-header { display: flex; justify-content: space-between; margin-bottom: 6px; }
.usage-meter-label { font-size: var(--fs-sm); font-weight: 500; }
.usage-meter-value { font-size: var(--fs-sm); font-weight: 600; }
.usage-meter-bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.usage-meter-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }

/* High Contrast drops both colour fills, so every usage and progress bar left a blank gap: a
   track and fill drawn only in background colours. The track is outlined and the fill drawn. */
@media (forced-colors: active) {
    :is(.usage-meter-bar, .admin-usage-track, .analyze-progress, .adp-progress-track,
        .analysis-progress-track, .sc-quota-bar-track, .spm-progress-track,
        .analysis-widget-progress, .full-discovery-progress-track) {
        border: 1px solid CanvasText;
    }

    :is(.usage-meter-fill, .admin-usage-fill, .analyze-progress-bar, .adp-progress-fill,
        .analysis-progress-fill, .sc-quota-bar-fill, .spm-progress-fill,
        .analysis-widget-progress-bar, .full-discovery-progress-fill) {
        forced-color-adjust: none;
        background: CanvasText !important;
    }
}

/* A quiet row, like Delete workspace: a red title and an outlined button under a rule. The pink
   panel it was made it the loudest thing in Settings. The confirmation takes the full row. */
.danger-zone {
  align-items: center; border-top: 1px solid var(--border-light); display: grid; gap: 16px 24px;
  grid-template-columns: minmax(0, 1fr) auto; margin-top: 28px; padding-top: 20px;
}
.danger-zone h4 { color: var(--red-ink); font-size: var(--fs-base); font-weight: 700; margin: 0; }
.danger-zone h4 + p { color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.45; margin: 4px 0 0; }
.danger-zone > .profile-delete-confirmation { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .danger-zone { align-items: stretch; grid-template-columns: minmax(0, 1fr); }
  .danger-zone > .danger-btn { width: 100%; }
}
.danger-btn {
  padding: 7px 16px; border: 1px solid var(--red); border-radius: var(--radius-control);
  background: none; color: var(--red-ink); font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all 0.15s; min-height: 44px;
}
.danger-btn:not(:disabled):hover { background: var(--red); color: #fff; }
/* Delete permanently waits for DELETE to be typed, but looked ready the whole time, and
   turned solid red under the pointer as if it would go. */
.danger-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.settings-actions {
  display: flex; gap: 10px; margin-top: 20px;
  padding-top: 16px; border-top: 1px solid var(--line);
}

.profile-heading { margin-bottom: 20px; }
.profile-heading h3 { margin: 0; color: var(--text); font-size: var(--fs-md); font-weight: 700; }
.profile-heading p { margin: 4px 0 0; color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.45; }

.profile-subsection {
  max-width: none;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.profile-subsection-title {
  margin: 0 0 4px;
  line-height: inherit;
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 700;
}

.profile-subsection-copy {
  margin: 0 0 14px;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

.profile-password-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.settings-loading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ground);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

.settings-retry-btn {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-control);
  background: #fff;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.settings-retry-btn:hover {
  background: var(--accent-light);
}

@media (max-width: 640px) {
  .settings-retry-btn {
    min-height: 44px;
  }

  .danger-btn {
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .acc-trigger {
    gap: 10px;
    padding: 16px;
    min-width: 0;
  }

  .acc-trigger .acc-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-base);
  }

  .acc-summary {
    display: none;
  }
}

/* ── Image Placeholders ── */
.img-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7); font-size: var(--fs-sm); font-weight: 600;
}
/* Stand-ins for a photograph, not UI. The colours are deliberately outside the
   palette because they are meant to read as an image, the way the landing page's
   mock cards carry real pictures. */
.img-ph-1 { background: linear-gradient(135deg, #2D5016 0%, #4a7c2e 50%, #F5A623 100%); }
.img-ph-2 { background: linear-gradient(135deg, #1a3a5c 0%, #2980b9 50%, #6dd5fa 100%); }
.img-ph-3 { background: linear-gradient(135deg, #4a0e4e 0%, #833ab4 50%, #fd1d1d 100%); }

/* ── Social connect CTA ── */
.social-connect {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--accent);
  text-decoration: none; padding: 5px 12px;
  border: 1px solid rgba(77,157,224,0.25);
  border-radius: var(--radius-sm); transition: background 0.15s;
}
.social-connect:hover { background: var(--accent-light); }

/* ── User menu dropdown ── */
.user-menu {
  position: absolute; right: 0; top: 100%; margin-top: 8px;
  width: 192px; background: #fff; border-radius: var(--radius-sm);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12); border: 1px solid var(--line);
  padding: 8px 0; z-index: 50;
}
.user-menu a, .user-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 16px; border: none; background: none;
  font-size: var(--fs-sm); font-weight: 500; color: var(--text);
  cursor: pointer; font-family: inherit; text-decoration: none;
  transition: background 0.15s;
}
.user-menu a:hover, .user-menu button:hover { background: var(--bg); }
.user-menu .menu-divider { height: 1px; background: var(--line); margin: 4px 0; }
.user-menu .menu-danger { color: var(--red-ink); }
.user-menu .menu-danger:hover { background: rgba(var(--red-rgb), 0.05); }
.user-menu svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
/* Settings and Log out were 32 to 36px tall with only the divider between them, while the
   business rows above them were 44px on a phone. */
@media (pointer: coarse) {
  .user-menu a, .user-menu button { min-height: 44px; }
}

/* ── Content area ── */
.content {
  width: 100%;
  max-width: min(100%, var(--content-max));
  margin: 0 auto;
  padding: 32px;
}
.content-wide {
  width: 100%;
  max-width: min(100%, var(--content-wide-max));
  margin: 0 auto;
  padding: 32px;
}

@media (min-width: 1800px) {
  :root {
    --content-max: 1280px;
    --content-wide-max: 1680px;
  }
}

@media (min-width: 2560px) {
  :root {
    --content-max: 1480px;
    --content-wide-max: 1960px;
  }
}
.welcome { margin-bottom: 28px; }
.welcome h1 { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.02em; }
.welcome p { font-size: var(--fs-base); color: var(--text-secondary); margin-top: 4px; }

/* ── Form inputs (design system) ── */
.form-group { margin-bottom: 16px; }
/* Fields follow the landing page's .fl block: sentence-case label in ink,
   a 1.5px boundary you can actually see, the control corner rather than the
   card corner, and the blue focus ring. They were 12px corners, a hairline
   border and 40px tall, so a text box read as a card and missed the 44px
   target the buttons already keep. */
.form-group label {
  display: block; font-size: var(--fs-label); font-weight: 600;
  color: var(--ink); margin-bottom: 8px;
}
.form-input,
.form-select {
  width: 100%; padding: 10px 14px; min-height: 44px;
  border: 1.5px solid var(--line-field); border-radius: var(--radius-control);
  font-size: var(--fs-control); color: var(--ink); background: var(--surface);
  outline: none; font-family: inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form-input::placeholder,
.form-select::placeholder { color: var(--muted); }
.form-input:hover,
.form-select:hover { border-color: var(--ink); }
.form-input:focus,
.form-select:focus { border-color: var(--blue); box-shadow: var(--focus-ring); }
.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"] { border-color: var(--red); }
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236a6d76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

/* ── Inline icon ── */
.icon-inline {
  width: 16px; height: 16px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle;
}

/* ── Color swatch ── */
.color-swatch { width: 44px; height: 44px; border-radius: var(--radius-sm); border: 2px solid rgba(0,0,0,0.06); }

/* ── Utility classes ── */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Words for the pointer in use: a phone has no click and nothing to drop. Wrap each wording
   in its own span; the hidden one is display:none, so a screen reader hears only one. */
.hint-touch { display: none; }
@media (hover: none) {
  .hint-pointer { display: none; }
  .hint-touch { display: inline; }
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  :root { --sidebar-w: 220px; }
  .sidebar { width: var(--sidebar-w); }
  .main { margin-left: var(--sidebar-w); }
}
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main { margin-left: 0; }
  .header { padding: 0 12px; gap: 8px; }
  .search-box {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 152px);
  }
  .search-box input {
    width: 100%;
    min-width: 0;
  }
  .header-right {
    gap: 6px;
    min-width: 0;
    flex: 0 0 auto;
  }
  .header-right .btn-sm {
    width: 44px;
    min-width: 44px;
    padding: 0;
    gap: 0;
    overflow: hidden;
    font-size: 0;
  }
  .notif-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
  .avatar-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
  .avatar-btn span {
    display: none;
  }
  .two-col, .three-col, .four-col { grid-template-columns: 1fr; }
  .two-col,
  .two-col > *,
  .acc-body {
    min-width: 0;
    max-width: 100%;
  }
  .data-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .data-value {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .pillar-grid { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .content { padding: 16px; }
  .content-wide { padding: 16px !important; }
  .acc-body { padding: 16px 14px; }
  .studio-panel { width: 95vw; max-width: 100%; border-radius: var(--radius); }
  .editor-panel { max-height: 90vh; overflow-y: auto; }
  .results-panel { max-height: 90vh; overflow-y: auto; }
  .cal-header { flex-wrap: wrap; align-items: flex-start; gap: 12px; }
  .cal-nav {
    width: 100%;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px auto;
    gap: 8px;
  }
  .cal-nav h2 {
    min-width: 0;
    align-self: center;
    font-size: var(--fs-heading-sm);
  }
  .cal-actions {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }
  .cal-actions .toggle-group {
    flex: 1 1 210px;
  }
  .cal-actions .toggle-opt {
    flex: 1 1 0;
    padding: 9px 10px;
  }
  .cal-filters {
    flex: 1 1 220px;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .cal-actions .btn-primary {
    flex: 0 0 auto;
  }
  .cal-day-header {
    padding: 10px 4px;
  }
  .cal-day {
    min-height: 88px;
    padding: 6px 4px;
  }
  .post-chip {
    display: block;
    padding: 3px 4px;
    font-size: var(--fs-2xs);
    line-height: 1.2;
  }
  .post-chip .chip-time {
    display: none;
  }
  .more-posts {
    font-size: var(--fs-2xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .calendar-week-row {
    grid-template-columns: 44px repeat(7,minmax(0,1fr));
  }
  .calendar-week-time-spacer,
  .calendar-week-day {
    padding: 9px 2px;
  }
  .calendar-week-day {
    font-size: var(--fs-2xs);
  }
  .calendar-week-time {
    padding: 4px 4px;
    font-size: var(--fs-2xs);
  }
  .calendar-week-cell {
    padding: 2px;
  }
  .calendar-week-chip {
    padding: 3px 4px;
  }
  .slide-panel { width: 100%; right: -100%; }
  .slide-panel.open { right: 0; }
}

@media (max-width: 600px) {
  .suggestion-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
  }
  .suggestion-row .suggestion-body {
    flex: 1 1 100%;
  }
  .suggestion-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  .suggestion-row > .tag {
    order: 2;
  }
  .suggestion-row > a {
    order: 3;
    flex: 0 0 auto;
  }
  .suggestion-row > button {
    order: 4;
    width: 44px;
    min-width: 44px;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── Studio: Mode cards ── */
.mode-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
.mode-card {
  background: var(--card-bg); border-radius: var(--radius); padding: 32px 28px;
  text-align: center; cursor: pointer; border: 2px solid transparent;
  transition: all 0.25s; position: relative; text-decoration: none; color: inherit;
}
.mode-card:hover { border-color: var(--accent); box-shadow: 0 8px 30px rgba(0,0,0,0.07); transform: translateY(-2px); }
.mode-card .mc-icon {
  width: 64px; height: 64px; border-radius: var(--radius); margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
}
.mode-card .mc-icon svg { width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 1.8; }
.mode-card .mc-title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 6px; }
.mode-card .mc-desc { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5; }
.mode-card .mc-badge {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700;
  padding: 3px 10px; border-radius: var(--radius-pill); margin-top: 12px;
}

.create-summary-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}

.create-summary-grid > .card {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.create-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  min-width: 0;
}

.create-list-thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.create-list-body {
  flex: 1 1 auto;
  min-width: 0;
}

.create-list-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Studio: Generate button ── */
.generate-btn {
  width: 100%; padding: 18px; border: none; border-radius: var(--radius-control);
  background: var(--subscribe-cta-gradient);
  color: #fff; font-size: var(--fs-md); font-weight: 700; cursor: pointer;
  font-family: inherit; margin-top: 20px; transition: all 0.25s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: var(--e1);
}
.generate-btn:hover { opacity: 0.92; box-shadow: var(--glow); transform: translateY(-1px); }
.generate-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.generate-btn svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; }

/* ── Studio: Output type toggle ── */
.output-toggle { display: flex; gap: 10px; margin-top: 16px; }
.output-btn {
  flex: 1; padding: 18px 12px; border: 2px solid var(--line); border-radius: var(--radius-control);
  background: #fff; cursor: pointer; text-align: center; font-family: inherit; transition: all 0.2s;
}
.output-btn:hover { border-color: var(--accent); }
.output-btn.active { border-color: var(--accent); background: var(--accent-light); }
.output-btn .out-label { font-size: var(--fs-base); font-weight: 600; }
.output-btn .out-sub { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 3px; }

/* ── Studio: Image options grid ── */
.image-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.image-opt {
  aspect-ratio: 1/1; border-radius: var(--radius-sm); border: 3px solid transparent;
  cursor: pointer; overflow: hidden; position: relative; transition: all 0.2s;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
}
.image-opt:hover { border-color: rgba(77,157,224,0.4); }
.image-opt.selected { border-color: var(--accent); box-shadow: var(--focus-ring); }
.image-opt img { width: 100%; height: 100%; object-fit: cover; }
.image-opt .opt-check {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
  border-radius: 50%; background: var(--accent); color: #fff;
  display: none; align-items: center; justify-content: center;
}
.image-opt.selected .opt-check { display: flex; }
.image-opt .opt-check svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 3; }

/* ── Studio: Platform chips ── */
.plat-chip {
  display: flex; align-items: center; gap: 6px; padding: 8px 16px;
  border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; font-family: inherit; border: 2px solid var(--line);
  background: #fff; transition: all 0.15s; user-select: none;
}
.plat-chip:hover { border-color: var(--accent); }
.plat-chip.active { border-color: var(--blue-hover); background: var(--tint-blue); color: var(--blue-hover); box-shadow: 0 0 0 1px var(--blue-hover); font-weight: 700; }

/* ── Studio: Modal system ── */
.studio-modal {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: calc(var(--modal-z) + 40);
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow: auto;
  overscroll-behavior: contain;
}
.studio-panel {
  background: #fff;
  border: 1px solid var(--modal-border);
  border-radius: min(var(--radius), 24px);
  width: min(90vw, 540px);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  box-shadow: var(--modal-shadow);
  display: flex;
  flex-direction: column;
}
.studio-panel.results-panel { --ydy-modal-width: 900px; --modal-max-height: calc(100dvh - 32px); --modal-mobile-max-height: 90vh; }
.studio-panel.editor-panel { width: min(92vw, 720px); max-width: 720px; }
.studio-panel.billing-upgrade-panel { --ydy-modal-width: 480px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.modal-header h2 { font-size: var(--fs-lg); font-weight: 700; }
.modal-close {
  width: 40px; height: 40px; border: none; background: transparent; border-radius: var(--radius-control);
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.modal-close:hover { background: rgba(0,0,0,0.05); }
.modal-close svg { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 2; }
.modal-body { padding: 24px; overflow: auto; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.video-editor-grid { display: grid; grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1fr); gap: 24px; }
.field-label { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); display: block; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Studio: Video from image CTA ── */
.video-from-img {
  display: flex; align-items: center; gap: 8px; padding: 12px 18px;
  background: rgba(175,82,222,0.08); border: 1px solid rgba(175,82,222,0.2);
  border-radius: var(--radius-control); cursor: pointer; font-family: inherit;
  font-size: var(--fs-sm); font-weight: 600; color: var(--purple); transition: all 0.15s;
}
.video-from-img:hover { background: rgba(175,82,222,0.14); }
.video-from-img svg { width: 18px; height: 18px; stroke: var(--purple); fill: none; stroke-width: 2; }

/* ── Studio: Caption area ── */
.caption-area textarea{
  width: 100%; min-height: 180px; padding: 14px 16px; border: 1.5px solid var(--line-field);
  border-radius: var(--radius); font-size: var(--fs-base); font-family: inherit;
  line-height: 1.7; outline: none; resize: vertical; background: #fff;
}
.caption-area textarea:focus { border-color: var(--accent); }
.caption-meta { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 10px; font-weight: 500; }
.hashtag-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 16px; }
.hashtag-edit {
  font-size: var(--fs-sm); padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: #fff; color: var(--ink-soft); cursor: pointer; font-family: inherit; font-weight: 600;
  min-height: 40px; transition: all 0.15s;
}
.hashtag-edit:hover { background: var(--ground); border-color: var(--line-field); }

/* ── Studio: Advanced mode panels ── */
.adv-panel {
  background: var(--card-bg); border-radius: var(--radius); padding: 24px; margin-bottom: 16px;
}
.adv-panel-title {
  font-size: var(--fs-md); font-weight: 700; margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.adv-panel-title svg { width: 20px; height: 20px; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.step-num {
  width: 24px; height: 24px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: var(--fs-xs);
  font-weight: 700; color: #fff; flex-shrink: 0;
}

/* ── Studio: Inputs (design-specific) ── */
.studio-input{
  width: 100%; padding: 12px 16px; border: 1.5px solid var(--line-field); border-radius: var(--radius-control);
  font-size: var(--fs-base); font-family: inherit; outline: none; background: #fff;
}
.studio-input:focus { border-color: var(--accent); }
.studio-textarea { resize: vertical; min-height: 120px; line-height: 1.7; }
.studio-select-sm {
  padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--radius-control);
  font-size: var(--fs-sm); font-family: inherit; outline: none; background: #fff;
  min-height: 44px; width: 100%; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}

/* ── Studio: Caption generated banner ── */
.caption-generated {
  background: var(--tint-green); border: 1px solid var(--green-ink); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px; display: flex; align-items: center;
  gap: 8px; font-size: var(--fs-sm); color: var(--green-ink); font-weight: 500;
}
.caption-generated svg { width: 18px; height: 18px; stroke: var(--green-ink); fill: none; stroke-width: 2.5; flex-shrink: 0; }

/* ── Studio: Prompt box ── */
.prompt-box {
  background: var(--bg); border-radius: var(--radius); padding: 14px 16px; border: 1px solid var(--line);
}
.prompt-box-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.prompt-box-header span {
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* ── Studio: Action chips ── */
.action-chip {
  font-size: var(--fs-sm); padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: #fff; color: var(--ink-soft); cursor: pointer; font-family: inherit; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.action-chip:hover { background: var(--ground); border-color: var(--line-field); color: var(--ink); }
.action-chip svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── Studio: Media thumbnails ── */
.media-thumb {
  width: 88px; height: 88px; border-radius: var(--radius); overflow: hidden;
  position: relative; cursor: pointer; flex-shrink: 0;
}
.media-thumb img, .media-thumb .img-placeholder { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }

/* ── Studio: Platform chip (Advanced/Batch) ── */
.platform-chip {
  display: flex; align-items: center; gap: 6px; padding: 8px 16px;
  border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; font-family: inherit; border: 2px solid var(--line);
  background: #fff; transition: all 0.15s; user-select: none;
}
.platform-chip:hover { border-color: var(--accent); }
.platform-chip.selected { border-color: var(--blue-hover); background: var(--tint-blue); color: var(--blue-hover); box-shadow: 0 0 0 1px var(--blue-hover); font-weight: 700; }
.platform-chip-icon {
  width: 22px; height: 22px; border-radius: var(--radius-xs); display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}

/* ── Studio: Batch table ── */
.batch-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.batch-table th {
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 12px;
  text-align: left; border-bottom: 2px solid var(--line);
}
.batch-table td { padding: 10px 12px; border-bottom: 1px solid var(--ground); font-size: var(--fs-sm); vertical-align: middle; }
.batch-table tr:last-child td { border-bottom: none; }
.batch-status {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600;
}
.batch-status.pending { background: rgba(0,0,0,0.05); color: var(--text-secondary); }
.batch-status.generating { background: rgba(77,157,224,0.1); color: var(--accent); }
.batch-status.done { background: rgba(52,199,89,0.1); color: var(--green-ink); }
.batch-thumb { width: 40px; height: 40px; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color 0.15s; }
.batch-thumb:hover { border-color: var(--accent); }
.batch-thumb .img-placeholder { width: 100%; height: 100%; border-radius: var(--radius-xs); }

/* ── Studio: Hashtag chip ── */
.hashtag-chip {
  display: inline-block; padding: 6px 14px; border-radius: var(--radius-pill); font-size: var(--fs-sm);
  font-weight: 600; background: rgba(77,157,224,0.08); color: var(--accent); cursor: default;
}

@media (max-width: 768px) {
  .mode-cards { grid-template-columns: 1fr; }
  .create-summary-grid { grid-template-columns: 1fr; }
  .profile-password-grid { grid-template-columns: 1fr; }
  .create-list-row { flex-wrap: wrap; align-items: flex-start; }
  .create-list-body { flex: 1 1 calc(100% - 52px); }
  .create-list-row > .btn-secondary,
  .create-list-row > .btn-ghost,
  .create-list-row > .tag { margin-top: 4px; }
  .create-list-row > .btn-ghost { margin-left: auto; }
  .image-options { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 2560px) {
  .mode-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════
   Legacy styles (pre-design-system)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .batch-table,
  .batch-table tbody,
  .batch-table tr,
  .batch-table td {
    display: block;
    width: 100%;
  }

  .batch-table thead {
    display: none;
  }

  .batch-table tbody {
    display: grid;
    gap: 10px;
  }

  .batch-table tr {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    grid-template-areas:
      "idx topic status"
      "idx pillar action"
      "idx image action";
    gap: 8px 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
  }

  .batch-table td {
    padding: 0;
    border-bottom: 0;
    min-width: 0;
  }

  .batch-table td:nth-child(1) {
    grid-area: idx;
    align-self: start;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 700;
    padding-top: 4px;
  }

  .batch-table td:nth-child(2) {
    grid-area: topic;
    line-height: 1.35;
  }

  .batch-table td:nth-child(3) {
    grid-area: pillar;
  }

  .batch-table td:nth-child(4) {
    grid-area: image;
  }

  .batch-table td:nth-child(5) {
    grid-area: status;
    align-self: start;
    justify-self: end;
  }

  .batch-table td:nth-child(6) {
    grid-area: action;
    align-self: end;
    justify-self: end;
  }

  .batch-thumb {
    width: 44px;
    height: 44px;
  }
}

/* Landing Page Card Style (matches ux-var2-accordion reference) */
.landing-card {
    background: #ffffff;
    border-radius: var(--radius);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.landing-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

/* Bento Card Styles */
.bento-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: all 0.2s ease;
}

.bento-card:hover {
    border-color: var(--line-strong);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* iPhone-style sidebar: black outer frame, dark gray inner */
.sidebar-outer {
    background: #000000;
    padding: 12px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sidebar-inner {
    background: var(--ink);
    border-radius: var(--radius-panel);
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-inner nav {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sidebar-inner nav::-webkit-scrollbar {
    display: none;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    transition: all 0.15s ease;
    text-decoration: none;
}

.sidebar-link:hover {
    background: rgba(255,255,255,0.08);
    color: white;
}

.sidebar-link.active {
    background: rgba(var(--blue-rgb), 0.25);
    color: white;
}

/* Platform Badge */
.platform-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-xs);
    font-size: var(--fs-xs);
    font-weight: 500;
}

/* Icon chips. These used to be tilted in perspective with a white gloss
   sheet over a two-stop gradient, from an old design template. Nothing on the
   landing page is tilted or glossed, and the app shell had already been
   overriding all of it back to flat, so the two halves of the product
   disagreed. Flat is now the default and the override is redundant. */
.icon-3d {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.icon-3d svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    position: relative;
    z-index: 1;
}
.icon-3d.icon-sm { width: 36px; height: 36px; border-radius: var(--radius-sm); }
.icon-3d.icon-sm svg { width: 18px; height: 18px; }
.icon-3d.icon-lg { width: 64px; height: 64px; border-radius: var(--radius); }
.icon-3d.icon-lg svg { width: 30px; height: 30px; }
/* Tint behind, ink on top. Two reasons this beat the old saturated chip with a
   white glyph: the landing page's own colour blocks are tints (.pill, .hero-ask)
   rather than solid fills, and the app shell was already drawing these chips
   this way, so the same icon looked like two different icons depending on which
   page you were on. Every ink here clears AA on its own tint. */
.icon-blue { background: var(--pill); color: var(--blue); }
.icon-green { background: var(--tint-green); color: var(--green-ink); }
.icon-orange { background: var(--tint-amber); color: var(--amber); }
.icon-pink { background: var(--tint-pink); color: var(--pink-ink); }
.icon-purple { background: var(--tint-purple); color: var(--purple-ink); }
.icon-cyan { background: var(--tint-cyan); color: var(--cyan-ink); }
.icon-dark { background: var(--line); color: var(--ink-soft); }

/* Phone Preview Frame */
.phone-frame {
    background: var(--ink);
    border-radius: var(--radius-device);
    padding: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.phone-screen {
    background: white;
    border-radius: var(--radius-panel);
    overflow: hidden;
}

.phone-notch {
    width: 120px;
    height: 28px;
    background: var(--ink);
    border-radius: 0 0 14px 14px;
    margin: 0 auto;
}

.phone-home-indicator {
    width: 134px;
    height: 5px;
    background: var(--ink);
    border-radius: 3px;
    margin: 8px auto;
}

/* Loading Spinner */
.spinner {
    animation: spin 1s linear infinite;
}

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

/* Pulse Animation */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Form Inputs */
input:focus, textarea:focus, select:focus {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--blue);
}

/* Slider Styles */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--line);
    /* The padding is touch room around the 8px track. Without the clip the track colour
       filled it too, so every slider drew as a 40px grey slab. */
    background-clip: content-box;
    padding: 16px 0;
    box-sizing: content-box;
    /* The browser's own 2px side margin put every full-width slider 2px past its box. */
    margin-inline: 0;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--blue);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--blue);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--muted);
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 20px;
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    animation: slideIn 0.3s ease;
    z-index: 1000;
}

.toast-success {
    background: var(--green-ink);
    color: white;
}

.toast-error {
    background: var(--red);
    color: white;
}

.toast-info {
    background: var(--blue);
    color: white;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--modal-overlay);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--modal-z);
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    overflow: auto;
    overscroll-behavior: contain;
}

.modal-content {
    background: white;
    border: 1px solid var(--modal-border);
    border-radius: var(--radius);
    box-shadow: var(--modal-shadow);
    width: min(420px, calc(100vw - 32px));
    max-width: 90vw;
    max-height: calc(100dvh - 32px);
    overflow: auto;
}

.ydy-dialog-card {
    width: min(420px, calc(100vw - 32px));
    padding: 26px;
}

.ydy-dialog-title {
    margin: 0 0 10px;
    color: var(--text);
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1.2;
}

.ydy-dialog-message {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-base);
    line-height: 1.55;
}

.ydy-dialog-error {
    margin: 16px 0 0;
    padding: 12px;
    border: 1px solid var(--red);
    border-radius: var(--radius-xs);
    color: var(--red);
    font-size: var(--fs-sm);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.ydy-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

@media (max-width: 520px) {
    .modal-overlay,
    .studio-modal {
        align-items: flex-end;
        padding: 12px;
    }

    .modal-content,
    .ydy-dialog-card {
        width: 100%;
    }

    .ydy-dialog-card {
        padding: 22px;
    }

    .ydy-dialog-actions,
    .modal-footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .ydy-dialog-actions > *,
    .modal-footer > * {
        width: 100%;
        justify-content: center;
    }

    .video-editor-grid {
        grid-template-columns: 1fr;
    }
}

/* Calendar Styles */
.calendar-day {
    min-height: 100px;
    border: 1px solid var(--line);
    padding: 8px;
}

.calendar-day:hover {
    background: var(--ground);
}

.calendar-day.today {
    background: rgba(var(--blue-rgb), 0.05);
}

.calendar-day.other-month {
    opacity: 0.4;
}

/* Media Grid */
.media-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
}

.media-item:hover .media-overlay {
    opacity: 1;
}

.media-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Progress Bar */
.progress-bar {
    height: 6px;
    background: var(--line);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--blue);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Onboarding Steps */
.step-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-note);
    font-weight: 600;
}

.step-dot.completed {
    background: var(--blue);
    color: white;
}

.step-dot.active {
    background: var(--blue);
    color: white;
}

.step-dot.pending {
    background: var(--line);
    color: var(--muted);
}

.step-line {
    flex: 1;
    height: 2px;
    background: var(--line);
}

.step-line.completed {
    background: var(--blue);
}

/* ========================================
   LANDING PAGE STYLES
   ======================================== */

/* Demo Card - Accordion-reference dark app shell */
.demo-card-dark {
    background: #000000;
    border-radius: var(--radius);
    color: white;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255,255,255,0.06);
    min-height: 500px;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.4s ease;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.demo-card-dark:hover {
    transform: scale(1.01);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

.demo-card-dark.activated {
    transform: scale(1.02);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 40px rgba(var(--blue-rgb), 0.1);
    cursor: default;
}

.demo-card-dark.activated:hover {
    transform: scale(1.02);
}

/* Demo mini app-bar (replaces dynamic island) */
.demo-app-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 2px;
}

.demo-app-bar-logo {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

.demo-app-bar-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--blue-lt);
}

.demo-app-bar-status .status-dot-live {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
    animation: pulse-dot 2s ease-in-out infinite;
}

/* Inner Panel */
.inner-panel {
    background: var(--ink);
    border-radius: var(--radius);
    padding: 18px 20px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Step Container & Transitions */
.step-container {
    position: relative;
    flex: 1;
    min-height: 260px;
    overflow: hidden;
    max-width: 100%;
}

.step {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.step.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.step.exit {
    opacity: 0;
    transform: translateX(-30px);
}

/* Animated Cursor */
.animated-cursor {
    position: absolute;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 100;
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                top 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
    filter: drop-shadow(0 0 8px rgba(var(--blue-rgb), 0.6));
}

/* Dark Form Elements */
.form-dark {
    background: var(--ink);
    border: 1px solid rgba(255,255,255,0.1);
    color: white;
    border-radius: var(--radius);
}

.form-dark::placeholder {
    color: var(--muted);
}

.form-dark:focus {
    border-color: var(--blue);
    box-shadow: var(--focus-ring);
}

/* Demo step labels */
.demo-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--line-strong);
    margin-bottom: 10px;
}

/* Quick Picks */
.quick-pick-dark {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    color: #ffffff;
    padding: 8px 14px;
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.quick-pick-dark:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
    color: #fff;
}

.quick-pick-dark.selected {
    background: rgba(var(--blue-rgb), 0.25);
    border-color: rgba(var(--blue-rgb), 0.7);
    color: var(--blue-lt);
}

/* Post Type Grid */
.post-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.post-type {
    padding: 14px 10px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    color: white;
}

.post-type:hover {
    background: rgba(255,255,255,0.11);
    border-color: rgba(255,255,255,0.2);
}

.post-type.selected {
    background: rgba(var(--blue-rgb), 0.25);
    border-color: rgba(var(--blue-rgb), 0.7);
}

.post-type-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}

.post-type-icon svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.post-type-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--line-strong);
    letter-spacing: 0.02em;
}

.post-type.selected .post-type-label {
    color: var(--blue-lt);
}

/* Landing Progress Bar */
.demo-card-dark .progress-bar {
    display: flex;
    gap: 6px;
    margin-top: 16px;
    height: auto;
    background: transparent;
    padding: 0 2px;
}

.progress-segment {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    transition: background 0.3s ease;
}

.progress-segment.active {
    background: var(--blue);
}

.progress-segment.completed {
    background: rgba(var(--blue-rgb), 0.5);
}

/* Demo primary button (matches accordion btn-primary) */
.btn-gradient {
    background: var(--blue);
    border: none;
    color: white;
    border-radius: var(--radius-control);
    font-weight: 600;
    font-size: var(--fs-note);
    padding: 12px 20px;
}

.btn-gradient:hover {
    background: var(--accent-dark);
    box-shadow: var(--glow);
}

/* Button Animation */
.btn-animated {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-animated:hover {
    transform: scale(1.02);
}

.btn-animated:active {
    transform: scale(0.98);
}

/* Loading Steps */
.loading-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--muted);
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.loading-step.active {
    color: #fff;
    background: rgba(255,255,255,0.05);
}

.loading-step.done {
    color: var(--blue-lt);
}

/* Pulse Dot Animation */
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.pulse-dot {
    animation: pulse-dot 2s ease-in-out infinite;
}

/* Hero Typography */
.hero-title {
    font-size: 48px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
}

/* Avoid showing a browser focus ring around the landing hero headline on initial route focus */
.hero-title:focus,
.hero-title:focus-visible {
    outline: none;
}

.hero-sub {
    font-size: var(--fs-heading-sm);
    line-height: 1.5;
    font-weight: 400;
}

.hero-sub .grey {
    color: var(--muted);
}

/* Section Typography */
.section-title {
    font-size: var(--fs-3xl);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.section-subtitle {
    font-size: var(--fs-lg);
    line-height: 1.6;
}

.card-title {
    font-size: var(--fs-heading-sm);
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-weight: 600;
}

.card-text {
    font-size: var(--fs-md);
    line-height: 1.6;
}

/* Card Entrance Animation — form is on the right, slides in from right */
@keyframes cardEntrance {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.card-entrance {
    animation: cardEntrance 0.6s ease forwards;
}

/* Hero Entrance Animation — text is on the left, slides in from left */
@keyframes heroEntrance {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-entrance {
    animation: heroEntrance 0.6s ease 0.2s forwards;
    opacity: 0;
}

/* Fade In Up Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.5s ease forwards;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 40px;
    }
    .hero-sub {
        font-size: var(--fs-lg);
    }
    .section-title {
        font-size: 32px;
    }
    .demo-card-dark {
        min-height: auto;
    }
    .step-container {
        height: auto;
        min-height: 320px;
    }
    .demo-card-dark.activated {
        transform: none;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }
    .demo-card-dark.activated:hover {
        transform: none;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 32px;
    }
    .hero-sub {
        font-size: var(--fs-md);
    }
    .section-title {
        font-size: var(--fs-2xl);
    }
    .card-title {
        font-size: var(--fs-lg);
    }
    .inner-panel {
        padding: 16px;
    }
    .demo-card-dark {
        border-radius: var(--radius);
    }
    .post-type-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .post-type {
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 26px;
    }
    .hero-sub {
        font-size: var(--fs-base);
    }
    .section-title {
        font-size: var(--fs-heading);
    }
    .quick-pick-dark {
        padding: 8px 12px;
        font-size: var(--fs-sm);
    }
    .btn-gradient {
        padding: 12px 16px;
        font-size: var(--fs-note);
    }
}

/* ══════════════════════════════════════════════════════════════
   Analyze Page — Light theme shell from mockup
   ══════════════════════════════════════════════════════════════ */

.analyze-page {
    min-height: 100vh;
    background: linear-gradient(180deg, var(--analyze-bg-start), var(--analyze-bg-end));
    padding: 40px 24px;
}

.analyze-container {
    max-width: 960px;
    margin: 0 auto;
}

.analyze-header {
    text-align: center;
    margin-bottom: 40px;
}

.analyze-header h1 {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
}

.analyze-header h1:focus {
    outline: none;
}

.analyze-header p {
    color: var(--text-secondary);
    font-size: var(--fs-md);
    margin: 0;
}

/* Progress bar */
.analyze-progress {
    background: rgba(0,0,0,0.06);
    border-radius: var(--radius);
    height: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.analyze-progress-bar {
    height: 100%;
    border-radius: var(--radius);
    background: var(--blue);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.analyze-status {
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    margin-bottom: 32px;
}

/* Analysis result cards */
.analyze-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.analyze-card {
    background: var(--card-bg);
    border-radius: var(--analyze-inner-radius);
    box-shadow: var(--analyze-card-shadow);
    padding: 28px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.analyze-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.analyze-card.skeleton-state {
    opacity: 1;
    transform: translateY(0);
}

.analyze-card.full-width {
    grid-column: 1 / -1;
}

.analyze-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.analyze-card-title {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text);
    margin: 0 0 8px;
}

.analyze-card-diagnostic {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 640px) {
    .analyze-cards { grid-template-columns: 1fr; }
    .analyze-card { padding: 20px; }
}

/* ══════════════════════════════════════════════════════════════
   Report Bento Grid — from mockup 03-report-popup-v1.svg
   ══════════════════════════════════════════════════════════════ */

/* Legacy container — still used by Report.razor loading/error states */
.report-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px 24px;
}

/* ── Premium Report V3 — Magazine Layout (.rpt) ────────────── */

.rpt {
    max-width: 800px;
    margin: 0 auto;
    padding: 32px 24px 48px;
    background: var(--ground);
}

.rpt--overlay {
    background: var(--ground);
    border-radius: var(--radius);
    border: 1px solid var(--modal-border);
    box-shadow: var(--modal-shadow);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    position: relative;
}

/* ─ Top bar (overlay mode) ─ */
.rpt-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 24px;
    margin: 0 -24px 0;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.04);
    border-radius: 20px 20px 0 0;
}
.rpt-topbar-label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.rpt-topbar-actions { display: flex; align-items: center; gap: 16px; }
.rpt-topbar-subscribe { font-size: var(--fs-sm); color: var(--blue-lt); text-decoration: none; font-weight: 600; }
.rpt-topbar-close { background: none; border: none; cursor: pointer; color: var(--muted); font-size: var(--fs-heading-sm); line-height: 1; padding: 4px; }

/* ─ Hero — gradient banner ─ */
.rpt-hero {
    background: var(--blue);
    border-radius: var(--radius);
    padding: 36px 40px 32px;
    margin-bottom: 20px;
}
.rpt-hero-name {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.rpt-hero-meta {
    font-size: var(--fs-note);
    color: rgba(255,255,255,0.85);
    margin: 0 0 4px;
}
.rpt-hero-sub {
    font-size: var(--fs-xs);
    color: rgba(255,255,255,0.6);
    margin: 0;
}

/* ─ Key Findings ─ */
.rpt-findings {
    margin-bottom: 20px;
}
.rpt-section-title {
    font-size: var(--fs-note);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 12px;
}
.rpt-findings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.rpt-finding-chip {
    background: #fff;
    border-radius: var(--radius);
    padding: 14px 16px;
    font-size: var(--fs-xs);
    color: var(--ink);
    line-height: 1.5;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

/* ─ Card Rows ─ */
.rpt-row {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
}
.rpt-row--halves {
    grid-template-columns: 1fr 1fr;
}

/* ─ Shared Card ─ */
.rpt-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    padding: 28px 32px;
    margin-bottom: 20px;
}
.rpt-card-title {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 12px;
}
.rpt-card-narrative {
    font-size: var(--fs-sm);
    color: var(--ink);
    line-height: 1.7;
    margin: 0 0 12px;
}
.rpt-card-meta {
    font-size: var(--fs-xs);
    color: var(--muted);
    margin: 8px 0 0;
}
.rpt-meta-label {
    font-weight: 500;
    color: var(--ink);
}
.rpt-card-empty {
    font-size: var(--fs-sm);
    color: var(--muted);
    margin: 0;
}

/* ─ Callout boxes ─ */
.rpt-callout {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: var(--fs-xs);
    line-height: 1.5;
    margin-top: 12px;
}
.rpt-callout--accent {
    background: rgba(77,157,224,0.07);
    color: var(--blue-lt);
}
.rpt-callout--green {
    background: rgba(52,199,89,0.07);
    color: var(--green-ink);
}
.rpt-callout-icon {
    flex-shrink: 0;
    font-size: var(--fs-sm);
    line-height: 1.4;
}

/* ─ Tags / pills ─ */
.rpt-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.rpt-tag {
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: rgba(77,157,224,0.08);
    font-size: var(--fs-2xs);
    font-weight: 500;
    color: var(--blue-lt);
}

/* ─ Competitor chips ─ */
.rpt-competitor-chips {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.rpt-competitor-chip {
    background: var(--ground);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.rpt-competitor-name {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink);
}
.rpt-competitor-meta {
    font-size: var(--fs-2xs);
    color: var(--muted);
}
.rpt-edge {
    font-size: var(--fs-xs);
    color: var(--green);
    margin: 4px 0 0;
}
.rpt-edge-icon { margin-right: 4px; }

/* ─ Strategy (full width) ─
   This had a 3px blue stripe down its left edge. It is a card, and no card on
   the landing page carries one. The white ground and the shadow lift it off
   the page on their own. */
.rpt-strategy {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    padding: 28px 32px;
    margin-bottom: 20px;
}

/* ─ Brand Identity ─ */
.rpt-brand-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}
.rpt-brand-swatches {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.rpt-swatch {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-xs);
    border: 1px solid rgba(0,0,0,0.06);
}
.rpt-swatch--lg {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
}
.rpt-brand-aesthetic {
    font-size: var(--fs-sm);
    color: var(--muted);
    margin: 0 0 4px;
}
.rpt-brand-voice {
    font-size: var(--fs-xs);
    color: var(--muted);
    margin: 0 0 4px;
}
.rpt-brand-essence {
    font-size: var(--fs-sm);
    font-style: italic;
    color: var(--ink);
    margin: 4px 0 0;
}

/* ─ Image grid ─ */
.rpt-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 8px;
}
.rpt-image {
    width: 100%;
    border-radius: var(--radius);
    aspect-ratio: 1;
    object-fit: cover;
}

/* ─ CTA conversion block ─ */
.rpt-cta-block {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    padding: 36px 32px 32px;
    margin-bottom: 20px;
    border-top: 3px solid;
    border-image: var(--blue) 1;
}
.rpt-cta-header {
    text-align: center;
    margin-bottom: 28px;
}
.rpt-cta-headline {
    font-size: var(--fs-heading-sm);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 10px;
    letter-spacing: -0.02em;
    line-height: 1.3;
}
.rpt-cta-lead {
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: 1.7;
    margin: 0;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
.rpt-cta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.rpt-cta-card {
    background: var(--ground);
    border-radius: var(--radius);
    padding: 20px 18px;
}
.rpt-cta-icon {
    font-size: var(--fs-xl);
    display: block;
    margin-bottom: 10px;
}
.rpt-cta-card h3 {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px;
}
.rpt-cta-card p {
    font-size: var(--fs-xs);
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}
.rpt-cta-bottom {
    text-align: center;
}
.rpt-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 48px;
    border: none;
    border-radius: var(--radius-control);
    background: var(--blue);
    color: white;
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
    letter-spacing: -0.01em;
}
.rpt-cta-btn:hover {
    opacity: 0.92;
    transform: translateY(-2px);
    box-shadow: var(--glow);
}
.rpt-cta-note {
    font-size: var(--fs-2xs);
    color: var(--muted);
    margin: 12px 0 0;
}

/* ─ Skeleton ─ */
.rpt-skeleton-wrap {
    text-align: center;
    padding: 40px 0;
    max-width: 600px;
    margin: 0 auto;
}

/* ─ Report Responsive ─ */
@media (max-width: 640px) {
    .rpt { padding: 20px 16px 40px; }
    .rpt-hero { padding: 28px 24px 24px; border-radius: var(--radius); }
    .rpt-hero-name { font-size: var(--fs-xl); }
    .rpt-findings-grid { grid-template-columns: 1fr 1fr; }
    .rpt-row--halves { grid-template-columns: 1fr; }
    .rpt-card { padding: 20px; border-radius: var(--radius); }
    .rpt-finding-chip { border-radius: var(--radius); }
    .rpt-brand-row { flex-direction: column; align-items: flex-start; }
    .rpt-cta-grid { grid-template-columns: 1fr; }
    .rpt-cta-block { padding: 28px 20px 24px; }
}

/* ══════════════════════════════════════════════════════════════
   Subscribe Modal — from mockup 12-subscription-gate-v1
   ══════════════════════════════════════════════════════════════ */

.subscribe-overlay {
    position: fixed;
    inset: 0;
    background: var(--modal-overlay);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--modal-z);
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    overflow: auto;
    animation: fadeIn 0.3s ease;
}

.subscribe-modal {
    background: var(--subscribe-card-bg);
    border-radius: var(--analyze-card-radius);
    box-shadow: 0 32px 64px rgba(0,0,0,0.2);
    max-width: 480px;
    width: 90%;
    padding: 40px;
    text-align: center;
    animation: slideUp 0.4s ease;
}

.subscribe-modal h2 {
    font-size: var(--fs-xl);
    font-weight: 700;
    margin: 0 0 12px;
}

.subscribe-modal p {
    color: var(--text-secondary);
    font-size: var(--fs-base);
    margin: 0 0 24px;
    line-height: 1.6;
}

.subscribe-features {
    text-align: left;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.subscribe-features li {
    padding: 8px 0;
    font-size: var(--fs-sm);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
}

.subscribe-features li svg {
    flex-shrink: 0;
    color: var(--green-ink);
}

.btn-subscribe {
    display: inline-block;
    width: 100%;
    padding: 14px 28px;
    background: var(--subscribe-cta-gradient);
    color: white;
    border: none;
    border-radius: var(--radius-control);
    font-size: var(--fs-md);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}

.btn-subscribe:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════
   Shimmer / Skeleton Loading Animation
   ══════════════════════════════════════════════════════════════ */

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, var(--line) 25%, var(--line-strong) 50%, var(--line) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-xs);
}

.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    width: 80%;
}

.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 60%; }

.skeleton-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.skeleton-card {
    height: 180px;
    border-radius: var(--analyze-inner-radius);
}

/* ══════════════════════════════════════════════════════════════
   Slide-Up Card Animation (for live analysis reveals)
   ══════════════════════════════════════════════════════════════ */

@keyframes slideUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.slide-up {
    animation: slideUp 0.5s ease forwards;
}

.slide-up-delay-1 { animation-delay: 0.1s; opacity: 0; }
.slide-up-delay-2 { animation-delay: 0.2s; opacity: 0; }
.slide-up-delay-3 { animation-delay: 0.3s; opacity: 0; }
.slide-up-delay-4 { animation-delay: 0.4s; opacity: 0; }
.slide-up-delay-5 { animation-delay: 0.5s; opacity: 0; }
.slide-up-delay-6 { animation-delay: 0.6s; opacity: 0; }

/* ══════════════════════════════════════════════════════════════
   Confetti Micro-Animation (CSS-only, P2 prep)
   ══════════════════════════════════════════════════════════════ */

@keyframes confettiFall {
    0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(60px) rotate(360deg); opacity: 0; }
}

.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.confetti-piece {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    animation: confettiFall 2s ease forwards;
}

/* ══════════════════════════════════════════════════════════════
   Landing Trust Animation (CSS-only color swatches appearing)
   ══════════════════════════════════════════════════════════════ */

@keyframes trustAppear {
    from { opacity: 0; transform: scale(0.9) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.trust-anim {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 16px;
}

.trust-swatch {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    opacity: 0;
    animation: trustAppear 0.4s ease forwards;
}

.trust-swatch:nth-child(1) { animation-delay: 0.5s; }
.trust-swatch:nth-child(2) { animation-delay: 0.7s; }
.trust-swatch:nth-child(3) { animation-delay: 0.9s; }
.trust-swatch:nth-child(4) { animation-delay: 1.1s; }
.trust-swatch:nth-child(5) { animation-delay: 1.3s; }

/* ══════════════════════════════════════════════════════════════
   Lapsed Account Banner
   ══════════════════════════════════════════════════════════════ */

.lapsed-banner {
    background: var(--tint-amber);
    border: 1px solid var(--tint-amber-line);
    border-radius: var(--radius-sm);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.lapsed-banner-text {
    font-size: var(--fs-sm);
    color: var(--amber);
    font-weight: 500;
}

.lapsed-banner .btn-subscribe {
    width: auto;
    padding: 10px 20px;
    font-size: var(--fs-sm);
}

/* ══════════════════════════════════════════════════════════════
   AnalysisWidget — Compact mode for dashboard (PRD §9/§10)
   ══════════════════════════════════════════════════════════════ */

.analysis-widget-compact {
    position: fixed;
    z-index: 100;
    width: 320px;
    max-height: 400px;
    overflow-y: auto;
    background: white;
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    padding: 16px;
    transition: all 0.3s ease;
}

/* Position variants */
.analysis-widget-compact[style*="bottom-right"] { bottom: 24px; right: 24px; }
.analysis-widget-compact[style*="bottom-left"] { bottom: 24px; left: 24px; }

.analysis-widget-compact.minimized {
    max-height: 48px;
    overflow: hidden;
    cursor: pointer;
}

.analysis-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    cursor: pointer;
}

.analysis-widget-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    font-weight: 600;
}

.analysis-widget-progress {
    height: 4px;
    background: rgba(0,0,0,0.06);
    border-radius: 2px;
    margin-bottom: 8px;
    overflow: hidden;
}

.analysis-widget-progress-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 1s ease;
}

.analysis-widget-step {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin: 0 0 12px 0;
}

/* Compact cards: single-line checklist items */
.compact-cards .analyze-card {
    padding: 8px 12px;
    border-radius: var(--radius-xs);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.compact-cards .analyze-card-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: var(--radius-xs);
}

.compact-cards .analyze-card-icon svg {
    width: 14px;
    height: 14px;
}

.compact-cards .analyze-card-title {
    font-size: var(--fs-xs);
    margin: 0;
}

.compact-cards .analyze-card-diagnostic {
    display: none;
}

/* Full mode: no special positioning */
.analysis-widget-full {
    width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   Mobile Responsiveness — S18 (P0 at launch)
   ══════════════════════════════════════════════════════════════ */

/* Landing hero: stack vertically, full-width form */
@media (max-width: 768px) {
    .analyze-page { padding: 24px 16px; }

    /* Landing hero 2-col → 1-col */
    section > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Analyze page split-view → tab toggle */
    .analyze-cards { grid-template-columns: 1fr !important; }

    /* Report grid → single column */
    .rpt-row--halves { grid-template-columns: 1fr !important; }

    /* Subscribe modal */
    .subscribe-modal {
        width: 95% !important;
        padding: 24px !important;
        border-radius: var(--modal-radius) !important;
    }

    /* First-run dashboard ideas grid → single column */
    div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* Analyze page mobile tab toggle */
.analyze-mobile-tabs {
    display: none;
}

@media (max-width: 768px) {
    .analyze-mobile-tabs {
        display: flex;
        gap: 0;
        margin-bottom: 20px;
        background: rgba(0,0,0,0.04);
        border-radius: var(--radius-sm);
        padding: 3px;
    }

    .analyze-mobile-tab {
        flex: 1;
        padding: 10px 16px;
        border: none;
        background: none;
        font-size: var(--fs-sm);
        font-weight: 500;
        color: var(--text-secondary);
        cursor: pointer;
        border-radius: calc(var(--radius-sm) - 2px);
        transition: all 0.2s;
    }

    .analyze-mobile-tab.active {
        background: white;
        color: var(--text);
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    /* Hide non-active tab panel on mobile */
    .analyze-tab-panel { display: none; }
    .analyze-tab-panel.active { display: block; }
}

/* Progress bar full-width on mobile */
@media (max-width: 768px) {
    .analyze-progress {
        margin-left: -16px;
        margin-right: -16px;
        border-radius: 0;
    }
}

/* Report mobile: CTA sticks to bottom */
@media (max-width: 768px) {
    .rpt-cta {
        position: sticky;
        bottom: 0;
        background: white;
        padding: 16px 0;
        margin-top: 16px;
        box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
    }
    .rpt-cta-inner { padding: 16px; }
    .rpt-cta-headline { font-size: var(--fs-lg); }
}

/* Landing header — hamburger toggle is hidden on desktop */
.landing-nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: 4px;
    border-radius: var(--radius-sm);
    color: var(--text);
    align-items: center;
    justify-content: center;
    min-height: 40px;
    min-width: 40px;
}
.landing-nav-toggle:hover { background: rgba(0,0,0,0.04); }
.landing-nav-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Mobile-nav drawer panel — hidden on desktop, opens beneath header bar on small viewports */
.landing-mobile-nav {
    display: none;
    flex-direction: column;
    padding: 8px 24px 16px;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--line);
}
.landing-mobile-nav a {
    font-size: var(--fs-base);
    color: var(--text);
    text-decoration: none;
    padding: 12px 4px;
    border-bottom: 1px solid var(--line);
}
.landing-mobile-nav a:last-child { border-bottom: none; }

/* Landing header mobile */
@media (max-width: 640px) {
    .landing-header-nav { display: none !important; }
    .landing-nav-toggle { display: inline-flex; }
    .landing-mobile-nav { display: flex; }
}

/* Header nav links (Features / Pricing / Blog) — align vertical rhythm
   with the buttons (40px tall, 14px font) so the whole header bar reads
   as one cohesive row. Links keep the lighter 500 weight to avoid
   competing with the Sign Up CTA. */
.landing-header-nav a {
    display: inline-flex !important;
    align-items: center !important;
    font-size: var(--fs-note) !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    min-height: 40px !important;
    padding: 10px 12px !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    text-decoration: none !important;
    transition: color 0.15s, background 0.15s !important;
}
.landing-header-nav a:hover {
    background: rgba(0,0,0,0.04) !important;
    color: var(--color-primary-blue) !important;
}
.landing-header-nav a:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

/* Header buttons — keep Log in / Sign Up visually in sync (same height,
   padding, type scale, border-radius). Inline styles diverge across the
   two buttons, so we override them here to a single shared rhythm. The
   gradient background + shadow on Sign Up come from inline styles +
   .btn-primary and are left untouched. */
.landing-header-btn {
    white-space: nowrap;
    min-height: 44px !important;
    padding: 10px 20px !important;
    font-size: var(--fs-note) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border-radius: var(--radius-control) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Ghost (Log in) — bordered transparent pill so it visually matches
   the Sign Up pill weight without competing for primary attention */
.landing-header-btn:not(.btn-primary) {
    background: #ffffff !important;
    border: 1.5px solid rgba(0,0,0,0.12) !important;
    color: var(--text) !important;
}
.landing-header-btn:not(.btn-primary):hover {
    border-color: var(--color-primary-blue) !important;
    color: var(--color-primary-blue) !important;
    background: #ffffff !important;
}

/* Hero grid children must allow shrinking below their intrinsic min-content width on tiny viewports */
.landing-hero-grid > * { min-width: 0; }

/* Sub-spec narrow viewports (< 360px) — guarantee buttons + inputs don't blow up vertically */
@media (max-width: 360px) {
    .landing-header-actions { gap: 8px !important; }
    .landing-header-btn { padding: 8px 12px !important; font-size: var(--fs-sm) !important; }
}

/* ══════════════════════════════════════════════════════════════
   Editorial sections (Problem "You're not alone" + Solution
   "Here's what changes") — internal vertical-rhythm tightening
   on mobile. Selectors target the page-level <style> rules with
   matching specificity; !important ensures they win the cascade
   regardless of stylesheet load order.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .editorial-rule-wrap     { margin-bottom: 16px !important; }
    .editorial-section-title { margin-bottom: 24px !important; font-size: clamp(28px, 8vw, 36px) !important; }
    .editorial-problem-col   { padding: 16px 0 !important; }
    .editorial-quote-headline,
    .solution-headline       { margin-bottom: 10px !important; }
    .editorial-quote-body    { margin-bottom: 14px !important; line-height: 1.6 !important; }
    .editorial-ghost-quote   { font-size: 44px !important; margin-bottom: -14px !important; }
    .solution-number         { font-size: 32px !important; margin-bottom: 8px !important; }
    .editorial-rule--bottom  { margin-top: 20px !important; }
}

/* ══════════════════════════════════════════════════════════════
   Landing page — mobile vertical rhythm
   Inline styles set desktop padding/min-height; these overrides
   tighten the layout on small viewports so sections don't waste
   ~700px of vertical whitespace and the hero isn't forced to 100vh.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .landing-hero-section {
        min-height: auto !important;
        padding-top: 88px !important;
        padding-bottom: 48px !important;
    }

    .landing-hero-grid {
        gap: 24px !important;
    }

    .landing-section {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .landing-cta-section {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

    .landing-form-card-body {
        padding: 24px 20px 28px !important;
    }
}

@media (max-width: 480px) {
    .landing-hero-section {
        padding-top: 80px !important;
        padding-bottom: 32px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .landing-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .landing-cta-section {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .landing-form-card-body {
        padding: 20px 16px 24px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   Studio — Soft Bento makeover (matches landing-page aesthetic)
   ════════════════════════════════════════════════════════════════════════
   Bird's-eye intent: wrap Stage + Chat in white rounded cards on an
   var(--ground) body, gradient the primary actions, sticky-foot the primary
   CTA so it's never below the fold, animate generating slots with a
   shimmer + spinner, and at ≤768px collapse to a single vertical stack
   that hides the stage when there's no content yet.

   Scoped CSS in the Studio razor files uses [b-xxxx] attribute
   selectors with class-level specificity, so we use !important here to
   reliably win the cascade without chasing every individual hash. */

/* Body / shell */
.es-root {
    background: var(--ground) !important;
}
.es-frame {
    background: transparent !important;
}

/* Header — match landing's 64px height + same border treatment */
.es-header {
    height: 64px !important;
    min-height: 64px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 0 24px !important;
}

/* Body — give panels breathing room and a card surface */
.es-body {
    gap: 16px !important;
    padding: 16px !important;
    background: var(--ground) !important;
    box-sizing: border-box !important;
}

/* Card-style panels (Stage + Chat) — white, rounded, subtle shadow */
.es-stage-panel,
.es-chat-panel {
    background: #ffffff !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid var(--line) !important;
    overflow: hidden !important;
}

/* Stage internal scroll container should still scroll, but with
   padding inside the card */
.es-stage-root {
    padding: 24px !important;
    box-sizing: border-box !important;
}

/* Sticky primary CTA at the bottom of the stage panel — keeps
   "Generate Images" / "Looks good" within reach without scrolling */
.es-stage-root .ec-btn-primary {
    position: sticky !important;
    bottom: 0 !important;
    margin-top: 16px !important;
    z-index: 5 !important;
}

/* Primary buttons. Landing's btn-primary is a flat --blue, so this is too;
   it used to be a blue-to-purple gradient under a comment claiming otherwise. */
.ec-btn-primary,
.ech-chip-action.primary {
    background: var(--blue) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--radius-control) !important;
    font-size: var(--fs-note) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    padding: 12px 24px !important;
    box-shadow: var(--glow) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
    cursor: pointer !important;
}
.ec-btn-primary:hover,
.ech-chip-action.primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--glow) !important;
    filter: brightness(1.03) !important;
}
.ec-btn-primary:active,
.ech-chip-action.primary:active {
    transform: translateY(0) !important;
    filter: brightness(0.97) !important;
}
.ec-btn-primary:disabled,
.ech-chip-action.primary:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    filter: none !important;
}

/* Secondary buttons (Add References, etc.) — ghost pill matching
   landing's Log in style */
.ec-btn-secondary {
    background: #ffffff !important;
    color: var(--text) !important;
    border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: var(--radius-control) !important;
    font-size: var(--fs-note) !important;
    font-weight: 600 !important;
    padding: 12px 20px !important;
    transition: border-color 0.15s, color 0.15s !important;
}
.ec-btn-secondary:hover {
    border-color: var(--color-primary-blue) !important;
    color: var(--color-primary-blue) !important;
}

/* Type-scale unification: chips and composer pick up the same
   14px / 600 button size; non-action chips stay 500 weight */
.ech-chip-action {
    font-size: var(--fs-note) !important;
    font-weight: 600 !important;
    border-radius: var(--radius) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
}
.ech-chip-action:not(.primary) {
    font-weight: 500 !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: var(--text) !important;
}

/* Composer input — readable size + landing-style focus ring */
.ech-input {
    font-size: var(--fs-note) !important;
    line-height: 1.4 !important;
    border-radius: var(--radius-control) !important;
}
.ech-input:focus {
    outline: 2px solid var(--blue) !important;
    outline-offset: 3px !important;
}

/* Image slots — generating state shimmer + spinner */
.ec-image-slot {
    border-radius: var(--radius) !important;
    overflow: hidden !important;
    position: relative !important;
}
.ec-image-slot:not(:has(img)) {
    background: linear-gradient(110deg, var(--ground) 8%, var(--line) 18%, var(--ground) 33%) !important;
    background-size: 200% 100% !important;
    animation: es-shimmer 1.4s linear infinite !important;
}
.ec-image-slot:not(:has(img))::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 36px !important;
    height: 36px !important;
    margin: -18px 0 0 -18px !important;
    border: 3px solid rgba(77, 157, 224, 0.18) !important;
    border-top-color: var(--color-primary-blue) !important;
    border-radius: 50% !important;
    animation: es-spin 0.9s linear infinite !important;
    z-index: 2 !important;
}
@keyframes es-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@keyframes es-spin {
    to { transform: rotate(360deg); }
}

/* Hero slot — give it a "primary pick" feel via a subtle ring */
.ec-image-slot.large {
    box-shadow: var(--focus-ring), 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

/* Eyebrow labels — keep the existing 11px tracking but tighten margin */
.ec-phase-label {
    font-size: var(--fs-2xs) !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    color: var(--text-secondary) !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}

/* ────────────────────────────────────────────────────────────────────
   Mobile (≤768px) — collapse to a vertical stack
   - Welcome / pre-stage state: only the chat shows full-width.
   - Once the body has a stage (.has-stage), stage stacks above chat.
   - Internal panel scrolling is replaced by document scrolling so the
     hero image and primary CTAs aren't trapped in tiny boxes.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    .es-body {
        --es-mobile-header-space: 148px;
        flex-direction: column !important;
        padding: 8px !important;
        gap: 8px !important;
        height: auto !important;
        min-height: calc(100dvh - var(--es-mobile-header-space)) !important;
    }
    .es-body > * {
        width: 100% !important;
        flex: none !important;
        max-width: none !important;
    }

    .es-body:not(.has-stage):not(.has-post) {
        height: calc(100dvh - var(--es-mobile-header-space)) !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .es-body:not(.has-stage):not(.has-post) .es-chat-panel {
        height: 100% !important;
        min-height: 0 !important;
    }

    /* Stage panel — collapse to natural height, no internal scroll */
    .es-stage-panel,
    .es-stage-root {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .es-stage-root {
        padding: 16px !important;
    }

    /* Chat panel — at minimum half the viewport so it's usable */
    .es-chat-panel {
        min-height: 60vh !important;
        height: auto !important;
    }

    /* When there's no stage content yet (welcome / asking for brief),
       hide the empty stage panel so chat takes the full screen */
    .es-body:not(.has-stage) .es-stage-panel {
        display: none !important;
    }

    /* Header — keep on one line, drop non-essentials */
    .es-header {
        height: auto !important;
        min-height: 64px !important;
        padding: 8px 10px !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        align-content: center !important;
    }
    .es-header-left {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }
    .es-header-right {
        flex: 0 1 auto !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        gap: 6px !important;
    }
    .es-quota,
    .es-brand-chip-score,
    .es-plat-pill {
        display: none !important;
    }
    .es-content-pill {
        display: inline-flex !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: var(--radius) !important;
        background: var(--tint-blue) !important;
        border-color: transparent !important;
        color: var(--muted) !important;
    }
    .es-content-pill.is-active {
        background: var(--blue) !important;
        color: #fff !important;
    }
    .es-content-pill svg {
        width: 20px !important;
        height: 20px !important;
    }
    .es-content-pill-label,
    .es-content-pill-preview {
        display: none !important;
    }
    .es-progress {
        order: 3 !important;
        flex: 1 0 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 44px !important;
        gap: 0 !important;
    }
    .es-dot,
    .es-dot.active,
    .es-dot.done,
    .es-dot.future {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: var(--radius-pill) !important;
        background: transparent !important;
        transform: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .es-dot::after {
        content: '' !important;
        width: 8px !important;
        height: 8px !important;
        border-radius: var(--radius-pill) !important;
        background: var(--line-strong) !important;
        transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
    }
    .es-dot.active::after { background: var(--color-primary-blue) !important; transform: scale(1.35) !important; }
    .es-dot.done::after { background: var(--green) !important; }
    .es-dot.stale { box-shadow: none !important; }
    .es-dot.stale::after { box-shadow: 0 0 0 4px rgba(247, 167, 40, 0.45) !important; }
    .es-dot.rewindable:hover { transform: none !important; box-shadow: none !important; }
    .es-dot.rewindable:hover::after { box-shadow: 0 0 0 5px rgba(52,199,89,0.18) !important; }
    .es-ideas-btn,
    .es-brand-chip,
    .es-canvas-toggle,
    .es-discard-btn,
    .es-close-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: var(--radius-control) !important;
        justify-content: center !important;
    }
    .es-brand-chip {
        padding: 0 !important;
    }
    .es-brand-chip-glyph {
        font-size: var(--fs-md) !important;
    }
    .es-header-title {
        font-size: var(--fs-note) !important;
    }

    /* Image slots — give the hero real estate at mobile */
    .ec-image-slot.large {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 5 !important;
    }
    .ec-image-slot:not(.large) {
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    /* Sticky primary CTA — at mobile, keep it sticky to viewport bottom
       inside the stage card, not relative to a scroll container */
    .es-stage-root .ec-btn-primary {
        position: sticky !important;
        bottom: 8px !important;
    }

    /* Composer — pad for thumb reach, avoid clip */
    .ech-input {
        font-size: var(--fs-md) !important;
        padding: 12px 14px !important;
    }
    .ech-paperclip-btn,
    .ech-send-btn,
    .ech-chip-modality {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .ech-chip-action,
    .ech-chip-retry,
    .ech-chip-discussion {
        min-height: 44px !important;
        align-items: center !important;
    }
}

/* Desktop micro-tweaks: the welcome state had 800px of dead space; let
   the chat-only welcome panel size to a comfortable centered width but
   stop bleeding empty whitespace on either side */
@media (min-width: 769px) {
    .es-body:not(.has-stage) .es-chat-panel {
        margin: 0 auto !important;
        max-width: 720px !important;
    }
}

/* Reduced motion, global backstop. Most component stylesheets carry their own
   prefers-reduced-motion block, but four did not, and a visitor who asks the
   operating system to cut animation should not have to rely on every new
   stylesheet remembering. Durations collapse rather than drop to zero so that
   animationend and transitionend still fire and nothing waits forever. */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Spinners keep turning, slowly. Collapsed above they froze into a still arc that read as
       stuck, and turning in place is not the sliding or zooming the setting is there to stop. */
    .spinner,
    .admin-spinner,
    .lp-checking span,
    .studio-generating-spinner,
    .recovery-spinner,
    .dash-spin,
    .full-discovery-status-icon:not(.failed):not(.done) svg,
    .edit-spinner,
    .ie-spinner,
    .ve-spinner,
    .ilm-spinner {
        animation-duration: 1.6s !important;
        animation-iteration-count: infinite !important;
    }
}

/* Approved YouDoYou wordmark. Intrinsic dimensions reserve space before decode.
   The same component is used by public, account and workspace shells. */
.ydy-wordmark { display: block; width: 160px; max-width: 100%; height: auto; flex-shrink: 0; }
.sidebar-logo a { display: inline-flex; align-items: center; min-height: 44px; }
.header-brand { min-height: 44px; align-content: center; flex-shrink: 0; }
@media (max-width: 760px) { .ydy-wordmark { width: 130px; } }
@media (max-width: 380px) { .ydy-wordmark { width: 112px; } }