/* ==========================================================================
   RBO Build — dashboard design system
   Warm and calm (D-3.33): off-white canvas, white surfaces, near-black ink, one deep-green
   primary, a light sidebar, and a dark mode with the same fonts and a lighter green.
   Type: Libre Baskerville (large titles, brand, big numbers) + Geist (everything else) + Geist Mono.
   Theme: <html data-theme="light|dark"> set from the rbo-theme cookie (see App.razor); with no
   choice made, the visitor's system setting decides.
   Single source of truth: this file styles the
   shell, the left nav and every dashboard page via plain class names.
   ========================================================================== */

:root {
  color-scheme: light;

  /* brand */
  --primary: #1E4636;        /* deep green */
  --primary-ink: #FFFFFF;
  --primary-deep: #163528;   /* button hover */
  --primary-bright: #3F7A5F; /* second stop for progress bars */
  --primary-soft: #E3EBE5;   /* tinted backgrounds (active tabs, icons, badges) */
  --accent: #B8643E;         /* clay — decorative accents only */
  --link: #1E4636;
  --link-hover: #123024;
  --ring: rgba(30, 70, 54, .45);
  --on-status: #FFFFFF;      /* text on solid ok/danger fills */
  --serp-title: #1A0DAB;     /* the SEO tab's Google result preview */
  --serp-ink: #474747;

  /* light working canvas */
  --canvas: #F4F1EB;
  --surface: #FFFFFF;
  --surface-2: #EFEAE1;
  --ink: #1D1C1A;
  --ink-soft: #4F4A43;
  --ink-faint: #6A655C;
  --line: #E2DCD1;
  --line-strong: #D6CFC2;
  --hover-bg: rgba(29, 28, 26, .05);
  --active-bg: #EFEAE1;
  --active-ink: #1D1C1A;
  --topbar-bg: rgba(244, 241, 235, .85);

  /* feedback */
  --ok: #1F6B3F;       --ok-bg: #E3EEE5;
  --warn: #875A00;     --warn-bg: #F6EACB;
  --danger: #B3372B;   --danger-bg: #F8E4E0;

  /* sidebar */
  --side-bg: #FBFAF7;
  --side-bg-2: #FBFAF7;
  --side-ink: #4F4A43;
  --side-ink-strong: #1D1C1A;
  --side-faint: #6A655C;
  --side-line: #E2DCD1;

  /* shape + type */
  --r-lg: 16px;
  --r: 12px;
  --r-sm: 10px;
  --shadow: 0 1px 2px rgba(29, 28, 26, .04), 0 4px 12px -6px rgba(29, 28, 26, .10);
  --shadow-lg: 0 20px 44px -24px rgba(29, 28, 26, .28);
  --font-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-display: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Dark mode: chosen with the switch, or the system setting when nothing was chosen. The two blocks
   are identical; CSS can't share one declaration list between a selector and a media query. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --primary: #2F6B52;  --primary-deep: #3A7F62;  --primary-bright: #4F9474;  --primary-soft: #13261C;
  --accent: #D08A63;
  --link: #7FCBA4;  --link-hover: #A8DEC2;  --ring: rgba(127, 203, 164, .5);  --on-status: #0B0C0F;  --serp-title: #99C3FF;  --serp-ink: #BFBFBF;
  --canvas: #0B0C0F;  --surface: #15171C;  --surface-2: #1A1D24;
  --ink: #ECEDEE;  --ink-soft: #B8BDC7;  --ink-faint: #9096A2;
  --line: #23262E;  --line-strong: #2E323B;
  --hover-bg: rgba(255, 255, 255, .05);  --active-bg: #1A1D24;  --active-ink: #ECEDEE;
  --topbar-bg: rgba(11, 12, 15, .85);
  --ok: #7FCBA4;  --ok-bg: #13261C;  --warn: #E0B45C;  --warn-bg: #2B2312;  --danger: #F08C80;  --danger-bg: #2E1716;
  --side-bg: #111317;  --side-bg-2: #111317;  --side-ink: #B8BDC7;  --side-ink-strong: #ECEDEE;  --side-faint: #9096A2;  --side-line: #23262E;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px -6px rgba(0, 0, 0, .5);
  --shadow-lg: 0 20px 44px -24px rgba(0, 0, 0, .7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --primary: #2F6B52;  --primary-deep: #3A7F62;  --primary-bright: #4F9474;  --primary-soft: #13261C;
    --accent: #D08A63;
    --link: #7FCBA4;  --link-hover: #A8DEC2;  --ring: rgba(127, 203, 164, .5);  --on-status: #0B0C0F;  --serp-title: #99C3FF;  --serp-ink: #BFBFBF;
    --canvas: #0B0C0F;  --surface: #15171C;  --surface-2: #1A1D24;
    --ink: #ECEDEE;  --ink-soft: #B8BDC7;  --ink-faint: #9096A2;
    --line: #23262E;  --line-strong: #2E323B;
    --hover-bg: rgba(255, 255, 255, .05);  --active-bg: #1A1D24;  --active-ink: #ECEDEE;
    --topbar-bg: rgba(11, 12, 15, .85);
    --ok: #7FCBA4;  --ok-bg: #13261C;  --warn: #E0B45C;  --warn-bg: #2B2312;  --danger: #F08C80;  --danger-bg: #2E1716;
    --side-bg: #111317;  --side-bg-2: #111317;  --side-ink: #B8BDC7;  --side-ink-strong: #ECEDEE;  --side-faint: #9096A2;  --side-line: #23262E;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px -6px rgba(0, 0, 0, .5);
    --shadow-lg: 0 20px 44px -24px rgba(0, 0, 0, .7);
  }
}

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 .55rem;
}
h1 { font-size: 1.95rem; font-weight: 700; letter-spacing: -.03em; }
h2 { font-size: 1.3rem; margin-top: 1.7rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .8rem; }

a { color: var(--link); text-decoration: none; font-weight: 500; }
a:hover { color: var(--link-hover); text-decoration: underline; }

code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: var(--surface-2);
  padding: .1em .35em;
  border-radius: 5px;
}

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

/* --------------------------------------------------------------- buttons --- */
button, .btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .92rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .6rem 1.05rem;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s, box-shadow .12s;
}
button:hover, .btn:hover { background: var(--surface-2); }
button:active, .btn:active { transform: translateY(1px); }
button:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
button:focus-visible, .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

/* primary — opt in with .primary / .cta / .apply / .save / .pay / .btn-primary */
.primary, .cta, .apply, .save, .pay, .btn-primary {
  background: var(--primary);
  border-color: transparent;
  color: var(--primary-ink);
  box-shadow: 0 1px 2px rgba(29, 28, 26, .14);
}
.primary:hover, .cta:hover, .apply:hover, .save:hover, .pay:hover, .btn-primary:hover {
  background: var(--primary-deep);
  color: var(--primary-ink);
}
.primary:active, .cta:active, .apply:active, .save:active, .pay:active, .btn-primary:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* destructive */
.danger, .del { color: var(--danger); }
.danger:hover, .del:hover { background: var(--danger-bg); border-color: var(--danger); }

/* link-style button (e.g. Sign out) */
.btn-link {
  border: none; background: none; box-shadow: none;
  min-height: auto; padding: 0;
  color: inherit; font-weight: 600;
}
.btn-link:hover { background: none; text-decoration: underline; }

a.cta, a.btn { text-decoration: none; }
a.cta:hover, a.btn:hover { text-decoration: none; }

/* ---------------------------------------------------------------- inputs --- */
input:not([type=checkbox]):not([type=radio]), textarea, select {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  padding: .55rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  min-height: 44px;
  max-width: 100%;
}
textarea { min-height: 90px; line-height: 1.5; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary-deep);
  box-shadow: 0 0 0 3px rgba(30, 70, 54, .45);
}
::placeholder { color: var(--ink-faint); }
label { font-weight: 600; color: var(--ink); }
input[type=checkbox], input[type=radio] { width: 1.1rem; height: 1.1rem; accent-color: var(--primary-deep); }

/* ---------------------------------------------------------------- tables --- */
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .65rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  border-bottom: 2px solid var(--line-strong);
}
tbody tr:hover { background: var(--surface-2); }

/* -------------------------------------------------------- shared helpers --- */
.muted { color: var(--ink-soft); }
.hint  { color: var(--ink-faint); font-size: .85rem; }
.ok    { color: var(--ok); font-weight: 600; }
.err   { color: var(--danger); font-weight: 600; }
.lead  { font-size: 1.05rem; color: var(--ink-soft); }
.host  { font-family: var(--font-mono); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.3rem 1.4rem;
  box-shadow: var(--shadow);
}

.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-mono); font-size: .7rem; font-weight: 600; letter-spacing: .03em;
  padding: .2rem .5rem; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-soft);
}
.badge.hero, .badge.primary { background: var(--primary); color: var(--primary-ink); }
.badge.pending { background: var(--warn-bg); color: var(--warn); }
.badge.failed  { background: var(--danger-bg); color: var(--danger); }

.tag {
  display: inline-block; font-family: var(--font-mono); font-size: .72rem;
  background: var(--surface-2); color: var(--ink-soft);
  border-radius: 6px; padding: .12rem .45rem; margin-left: .35rem;
}
.tag.primary { background: var(--primary); color: var(--primary-ink); }

.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  padding: .25rem .6rem; border-radius: 999px;
}
.pill::before { content: "●"; font-size: .8em; }
.pill.live { background: var(--ok-bg); color: var(--ok); }
.pill.draft, .pill.warn { background: var(--warn-bg); color: var(--warn); }

/* status as bold coloured inline text (with a leading dot) */
.status { font-weight: 700; }
.status.live { color: var(--ok); }
.status.draft, .status.off, .status.trial, .status.warn { color: var(--warn); }

/* page intro line under an h1 */
.sub { color: var(--ink-soft); margin-top: -.2rem; }

/* a subtle "back to dashboard" footer link spacing */
.backlink { margin-top: 1.5rem; }

/* ------------------------------------------------------------- the shell --- */
.app-shell { display: flex; min-height: 100vh; }

.nav-toggle { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.nav-scrim { display: none; }

.app-sidebar {
  width: 264px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--side-bg) 0%, var(--side-bg-2) 100%);
  color: var(--side-ink);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--side-line);
}

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

.app-topbar {
  position: sticky; top: 0; z-index: 20;
  height: 60px;
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.5rem;
  background: var(--topbar-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.app-topbar .spacer { flex: 1; }
.app-topbar .crumb { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-faint); letter-spacing: .04em; }
.app-topbar .topbar-brand { display: none; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.app-topbar .topbar-brand span { font-family: var(--font-mono); font-weight: 500; font-size: .65rem; opacity: .5; }
.app-topbar .topbar-action {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: .85rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  padding: .45rem .85rem; border-radius: 999px;
}
.app-topbar .topbar-action:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.app-topbar .topbar-action.primary { background: var(--primary); border-color: transparent; color: var(--primary-ink); box-shadow: 0 1px 2px rgba(29, 28, 26, .14); }

/* live/offline site status (topbar + publish page) */
.site-status { display: flex; align-items: center; gap: .6rem; }
.site-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono); font-size: .75rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: .34rem .72rem; border-radius: 999px;
}
.site-pill.live { background: var(--ok-bg); color: var(--ok); }
.site-pill.off { background: var(--warn-bg); color: var(--warn); }
.site-pill.big { font-size: .92rem; padding: .45rem .95rem; }
.site-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.site-pill.big .dot { width: 10px; height: 10px; }
.site-pill.live .dot { animation: rbo-pulse 1.8s infinite ease-in-out; }
@keyframes rbo-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(21, 127, 70, .22); }
  50% { box-shadow: 0 0 0 8px rgba(21, 127, 70, 0); }
}

.topbar-stop, .topbar-cancel { min-height: auto; padding: .42rem .8rem; font-size: .82rem; border-radius: 999px; }
.topbar-stop { color: var(--danger); border-color: var(--line-strong); }
.topbar-stop:hover { background: var(--danger-bg); border-color: var(--danger); }
.topbar-stop.yes { background: var(--danger); border-color: transparent; color: var(--on-status); }
.topbar-stop.yes:hover { background: var(--danger); }
.topbar-confirm { display: inline-flex; align-items: center; gap: .4rem; }

.app-content { padding: 1.7rem 1.9rem 3rem; max-width: 1180px; width: 100%; }

.burger {
  display: none;
  width: 42px; height: 42px; padding: 0; min-height: auto;
  border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface);
  flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
}
.burger span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; display: block; }

/* --------------------------------------------------------- sidebar parts --- */
.side-brand {
  display: flex; align-items: center; gap: .65rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid var(--side-line);
}
.side-brand .mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--primary); color: var(--primary-ink);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 6px 14px -6px var(--ring);
}
.side-brand .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; color: var(--side-ink-strong); }
.side-brand .wordmark span { font-family: var(--font-mono); font-weight: 500; font-size: .68rem; opacity: .55; margin-left: .15rem; }

.side-nav { flex: 1; overflow-y: auto; padding: .85rem .75rem 1rem; display: flex; flex-direction: column; gap: .12rem; }
.side-group { font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .13em; color: var(--side-faint); padding: 1rem .75rem .4rem; }

.side-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .58rem .7rem;
  border-radius: var(--r-sm);
  color: var(--side-ink);
  font-weight: 500; font-size: .92rem; line-height: 1.2;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.side-site-switcher {
  width: calc(100% - 1.5rem); margin: 0 .75rem .4rem;
  padding: .5rem .6rem; border-radius: var(--r-sm);
  border: 1px solid var(--side-line); background: var(--surface);
  color: var(--side-ink-strong); font-weight: 600; font-size: .88rem;
}
.side-link:hover { background: var(--hover-bg); color: var(--side-ink-strong); text-decoration: none; }
.side-link.active { background: var(--active-bg); color: var(--active-ink); font-weight: 700; }
.side-link .ico { width: 22px; text-align: center; font-size: 1.05rem; flex-shrink: 0; }
.side-link .count {
  margin-left: auto; font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
  background: var(--primary); color: #fff; border-radius: 999px; padding: .05rem .4rem;
}
.side-link.active .count { background: var(--primary); color: var(--primary-ink); }

.side-footer { border-top: 1px solid var(--side-line); padding: .85rem .9rem; }
.side-user { display: flex; align-items: center; gap: .6rem; }
.side-user .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex-shrink: 0;
}
.side-user .who { min-width: 0; flex: 1; }
.side-user .who .nm { font-size: .85rem; font-weight: 600; color: var(--side-ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user .who .role { font-size: .68rem; color: var(--side-faint); font-family: var(--font-mono); }
.side-user .who .role .side-email-link { color: inherit; text-decoration: underline; }
.side-user .who .role .side-email-link:hover { color: var(--side-ink-strong); }
.side-user form { margin: 0; }
.side-signout {
  background: var(--surface); border: 1px solid var(--line-strong);
  color: var(--side-ink); border-radius: var(--r-sm);
  padding: .35rem .6rem; min-height: auto; font-size: .78rem; font-weight: 600;
}
.side-signout:hover { background: var(--surface-2); color: var(--side-ink-strong); }
.side-auth { display: flex; flex-direction: column; gap: .4rem; }
.side-auth a { color: var(--side-ink); font-weight: 600; font-size: .9rem; }
.side-auth a:hover { color: var(--side-ink-strong); text-decoration: none; }
.side-auth .cta { color: var(--primary-ink); }

/* --------------------------------------------------- dashboard home tiles --- */
/* Stat tile grid — same visual language as .setup-checklist above: same 18px corner,
   same soft shadow, more breathing room. Min 320px per tile so 3-up on a 1180px canvas
   and the subdomain doesn't have to break across 3 lines. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.65rem 1.75rem;
  box-shadow: 0 8px 24px rgba(29, 28, 26, .06);
  display: flex;
  flex-direction: column;
  min-height: 220px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(29, 28, 26, .1);
  border-color: var(--line-strong);
}
.stat .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  font-size: 1.35rem;
  margin-bottom: .85rem;
}
.stat h2 {
  font-size: 1.05rem;
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink-soft);
  font-weight: 600;
  letter-spacing: 0;
}
.stat .big {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: .35rem 0 .15rem;
  /* Overflow-wrap is gentler than word-break — only wrap when the word truly can't fit,
     so the subdomain stays on as few lines as possible. */
  overflow-wrap: anywhere;
  line-height: 1.1;
}
.stat .unit { font-size: .92rem; font-weight: 500; color: var(--ink-faint); }
.stat .muted { font-size: .92rem; flex-grow: 1; margin: .35rem 0 1rem; line-height: 1.45; }
.stat .stat-links {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding-top: .25rem;
  border-top: 1px solid var(--line);
}
.stat .stat-links a {
  font-weight: 600;
  font-size: .95rem;
  padding-top: .55rem;
}

/* ------------------------------------------------------------------ forms --- */
.form { max-width: 640px; }
.form label { display: block; margin: .9rem 0; font-weight: 600; }
.form input:not([type=checkbox]):not([type=radio]), .form textarea, .form select { display: block; width: 100%; margin-top: .3rem; font-weight: 400; }
.row { display: flex; gap: .85rem; flex-wrap: wrap; }
.row label { flex: 1 1 160px; }
.row > input { flex: 1 1 200px; }
.actions { display: flex; align-items: center; gap: .6rem; margin-top: 1.1rem; flex-wrap: wrap; }

/* --------------------------------------------------------------- services --- */
.add { display: flex; gap: .5rem; margin: 1.1rem 0; max-width: 560px; }
.add input { flex: 1; }
.list { list-style: none; padding: 0; max-width: 680px; display: flex; flex-direction: column; gap: .5rem; }
.list li { display: flex; align-items: center; gap: .6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .55rem .8rem; box-shadow: var(--shadow); }
.list li.inactive { opacity: .65; }
.list li.inactive .name { color: var(--ink-faint); text-decoration: line-through; }
.list .name { font-weight: 600; }
.list .spacer { flex: 1; }
.list li button { min-height: 38px; padding: .35rem .6rem; }
.toggle { display: inline-flex; margin: 0; }

/* ---------------------------------------------------------------- billing --- */
.plan { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; margin: 0 0 .4rem; }
.price { color: var(--ink); } .per { font-size: .9rem; font-weight: 400; color: var(--ink-soft); }
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; max-width: 700px; margin: .7rem 0 1rem; }
.tier { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.3rem 1rem; text-align: center; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .55rem; align-items: center; }
.tier.current { border: 2px solid var(--primary); }
.tier h3 { margin: 0; }
.tier .amount { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
.tier .amount span { font-size: .8rem; font-weight: 500; color: var(--ink-faint); }
.tier button { width: 100%; }
.code { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 600; background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--r); padding: .5rem .8rem; display: inline-block; letter-spacing: .05em; }
.refer { display: flex; gap: .5rem; max-width: 360px; }
.refer { flex-wrap: wrap; }
.refer input { flex: 1 1 12rem; min-width: 0; }

/* ----------------------------------------------------------------- domain --- */
.domains { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem; max-width: 680px; }
.domains li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .6rem .8rem; box-shadow: var(--shadow); }
/* One option per row — matches the dashboard tile + checklist visual language. */
.options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.2rem;
}
.opt {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 8px 24px rgba(29, 28, 26, .06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.opt:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(29, 28, 26, .08);
  border-color: var(--line-strong);
}
.opt h3 {
  margin: 0 0 .35rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.01em;
}
.opt > .muted { margin: 0 0 1rem; font-size: .95rem; line-height: 1.45; }
.opt input { width: 100%; margin: .4rem 0; }
.dns { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: .7rem .8rem; font-size: .85rem; margin-top: .6rem; }
.dns ul { margin: .4rem 0 0; padding-left: 1.1rem; }

/* ----------------------------------------------------------------- photos --- */
.gallery { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.photo-card { width: 230px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .6rem; box-shadow: var(--shadow); }
.thumb { position: relative; height: 155px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border-radius: var(--r-sm); overflow: hidden; margin-bottom: .55rem; }
.thumb img { width: 100%; height: 155px; object-fit: cover; }
.thumb .badge.hero { position: absolute; top: .4rem; left: .4rem; }
.photo-card input { width: 100%; }
.photo-card .actions { margin-top: .4rem; gap: .3rem; }
.photo-card .actions button { min-height: 38px; padding: .35rem .55rem; flex: 1; }
.upload-btn { display: inline-block; }

/* ---------------------------------------------------------------- changes --- */
.request { max-width: 680px; }
.request textarea { width: 100%; }
.request button { margin-top: .6rem; }
.refusal { background: var(--warn-bg); border: 1px solid var(--line-strong); border-radius: var(--r); padding: .7rem .9rem; color: var(--warn); }
.diffs { display: flex; flex-direction: column; gap: .75rem; max-width: 780px; }
.diff { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .8rem .9rem; box-shadow: var(--shadow); }
.diff .field { font-weight: 700; margin-bottom: .4rem; }
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.before, .after { font-size: .9rem; padding: .5rem .6rem; border-radius: var(--r-sm); }
.before { background: var(--danger-bg); } .after { background: var(--ok-bg); }
.lbl { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin-bottom: .2rem; }
.history { list-style: none; padding: 0; max-width: 680px; }
.history li { display: flex; align-items: center; gap: .6rem; border-bottom: 1px solid var(--line); padding: .55rem 0; }
.history .when { color: var(--ink-faint); font-size: .8rem; white-space: nowrap; font-family: var(--font-mono); }
.history .reason { flex: 1; }

/* ------------------------------------------------------------------ admin --- */
/* Underlined tab strip (also used for the chatbot sub-tabs). */
.adminnav { display: flex; gap: .25rem; margin: .6rem 0 0; border-bottom: 1px solid var(--line-strong); overflow-x: auto; overflow-y: hidden; }
.adminnav a {
  padding: .7rem .95rem; margin-bottom: -1px; border-bottom: 2px solid transparent;
  color: var(--ink-soft); font-weight: 500; font-size: .95rem; white-space: nowrap;
}
.adminnav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.adminnav a.active { color: var(--link); border-bottom-color: var(--link); font-weight: 600; }

.search { display: flex; gap: .5rem; max-width: 480px; margin-bottom: 1.2rem; }
.search input { flex: 1; }
.bar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.2rem; }
.rowsub { color: var(--ink-faint); font-size: .8rem; }

/* A customer page is a stack of sections, not a grid of tiles. */
.sections { margin-top: .25rem; }
.section { max-width: 760px; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.section:last-child { border-bottom: 0; }
.section h2 { margin-top: 0; font-size: 1.15rem; }
.section label > input:not([type=checkbox]) { display: block; width: 100%; max-width: 420px; margin: .3rem 0 .6rem; }
.facts { list-style: none; padding: 0; margin: 0; }
.facts li { padding: .35rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.facts li:last-child { border-bottom: 0; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; max-width: 860px; margin-top: 1.3rem; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .25rem; box-shadow: var(--shadow); }
.kpi.big { border: 2px solid var(--primary); }
.kpi.warn .value { color: var(--danger); }
.kpi .label { color: var(--ink-faint); font-size: .75rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .07em; }
.kpi .value { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; letter-spacing: -.02em; }

/* prompt editor */
.editor { width: 100%; max-width: 820px; font-family: var(--font-mono); font-size: .85rem; display: block; margin: .4rem 0; }
.output { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: .7rem .8rem; max-width: 820px; white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono); font-size: .85rem; }

/* fake checkout card */
.checkout { max-width: 420px; margin: 2rem auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.7rem 1.6rem; text-align: center; box-shadow: var(--shadow-lg); }
.checkout .amount { font-family: var(--font-display); font-size: 2rem; font-weight: 700; margin: .5rem 0; }
.checkout .amount span { font-size: 1rem; font-weight: 400; color: var(--ink-soft); }
.checkout .pay { width: 100%; margin: 1.1rem 0 .6rem; }

/* design picker (business publish page + admin) */
/* Website page — every card (preview / recolour / publish) shares the same width and 18px
   surface vocabulary as the dashboard tiles + checklist. */
.design-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 1rem; }
.design-tab { min-height: auto; padding: .5rem .9rem; font-size: .88rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-soft); }
.design-tab:hover { background: var(--surface-2); }
.design-tab.active { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.design-preview {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(29, 28, 26, .06);
  overflow: hidden;
  width: 100%;          /* fills the column — no narrow cap */
  margin: 0 0 1.5rem;
}
.design-preview-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line);
}
.design-frame {
  width: 100%;
  height: clamp(540px, 70vh, 820px);   /* taller — more of the site visible without scrolling */
  border: 0; display: block; background: #fff;
}

/* Recolour card matches the preview's width + surface treatment. */
.recolour {
  width: 100%;
  max-width: none;
  margin: 0 0 1.5rem;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(29, 28, 26, .06);
  padding: 1.5rem 1.75rem;
}
.recolour h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  margin: 0 0 .5rem;
}

/* Locked "Adjust your website with AI" — shown until the business has saved a design choice. */
.recolour.locked { background: var(--surface-2); border-style: dashed; }
.recolour.locked h3 { color: var(--ink-soft); }

.locked-banner {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 0 .25rem;
}
.locked-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: .15rem;
}
.locked-banner > div strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: .25rem;
}
.locked-banner > div .muted {
  margin: 0;
  font-size: .95rem;
  line-height: 1.45;
}

/* ---------- "Adjust your website with AI" — chat-style composer ----------
   Rounded surface around the textarea + a circular send button, plus a user-message bubble +
   animated "Thinking" indicator that appears while the AI is working. Mirrors the feel of a
   typing-in-a-chat-app (ChatGPT / Linear) without being a full multi-turn thread. */

.ai-chat {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 1rem 0;
}

.ai-chat-log {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  max-height: 360px;
  overflow-y: auto;
  padding: .25rem .1rem;
  scroll-behavior: smooth;
}

.ai-message {
  max-width: 85%;
  padding: .7rem 1rem;
  font-family: var(--font-display);
  font-size: .95rem;
  line-height: 1.5;
  word-wrap: break-word;
  box-shadow: 0 2px 8px rgba(29, 28, 26, .06);
}

/* User message — yellow bubble, right-aligned, "tail" on the bottom-right corner. */
.ai-message.you {
  align-self: flex-end;
  background: var(--primary);
  color: var(--primary-ink);
  border-radius: 18px 18px 4px 18px;
}

/* AI reply — white bubble with subtle border, left-aligned, "tail" on the bottom-left. */
.ai-message.bot {
  align-self: flex-start;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 18px 18px 18px 4px;
}

.ai-message div + div { margin-top: .25rem; }   /* multi-line gap */

.ai-chat-clear {
  text-align: right;
  font-size: .82rem;
  margin: -.25rem 0 0;
}
.ai-chat-clear .link {
  background: transparent;
  border: 0;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  cursor: pointer;
  text-decoration: underline;
}
.ai-chat-clear .link:hover { color: var(--ink-soft); }
.ai-chat-clear .link:disabled { opacity: .5; cursor: not-allowed; }

.ai-thinking {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--surface);
  color: var(--ink-soft);
  padding: .65rem 1rem;
  border: 1px solid var(--line);
  border-radius: 18px 18px 18px 4px;
  font-family: var(--font-display);
  font-size: .92rem;
}

.ai-avatar {
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
}

.ai-thinking-text { color: var(--ink); font-weight: 500; }

.ai-dots {
  display: inline-flex;
  gap: .25rem;
  padding-left: .15rem;
}
.ai-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-deep);
  animation: ai-bounce 1.2s ease-in-out infinite both;
}
.ai-dots span:nth-child(2) { animation-delay: .15s; }
.ai-dots span:nth-child(3) { animation-delay: .30s; }
@keyframes ai-bounce {
  0%, 80%, 100% { transform: scale(.6); opacity: .4; }
  40%          { transform: scale(1);  opacity: 1; }
}

.ai-composer {
  display: flex;
  align-items: flex-end;
  gap: .65rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: .65rem .75rem .65rem 1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ai-composer:focus-within {
  border-color: var(--primary-deep);
  box-shadow: 0 0 0 3px rgba(30, 70, 54, .25);
}

.ai-input {
  flex: 1;
  border: 0;
  background: transparent;
  resize: none;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  padding: .35rem 0;
  outline: none;
  min-height: 1.5rem;
  max-height: 200px;
}
.ai-input::placeholder { color: var(--ink-faint); }
.ai-input:disabled { background: transparent; color: var(--ink-faint); }

.ai-send {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-ink);
  border: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(29, 28, 26, .14);
  transition: transform .12s ease, box-shadow .12s ease;
}
.ai-send:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(29, 28, 26, .14);
}
.ai-send:disabled {
  background: var(--line-strong);
  color: var(--ink-faint);
  box-shadow: none;
  cursor: not-allowed;
}

.ai-send-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ai-spin .8s linear infinite;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }

.ai-hint {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-faint);
  text-align: right;
  margin: 0;
}
.ai-hint kbd {
  font-family: var(--font-mono);
  font-size: .68rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  margin: 0 1px;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .ai-dots span, .ai-send-spinner { animation: none; }
}

/* Inline preview iframe for "Adjust your website with AI" proposals — businesses see the staged
   site rendered live below the diff list so they can judge the change before clicking Apply. */
.change-preview {
  margin: 1.25rem 0 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
}
.change-preview-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: .92rem;
}
.change-preview-head strong { color: var(--ink); }
.preview-popout {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
  text-decoration: none;
}
.preview-popout:hover { color: var(--ink); text-decoration: underline; }
.change-preview-frame {
  width: 100%;
  height: clamp(420px, 60vh, 680px);
  border: 0;
  display: block;
  background: #fff;
}
.change-diffs-head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin: 1.5rem 0 .75rem;
  color: var(--ink);
}

/* Address/publish card on the website page — same gutter and corner as the others. */
.recolour ~ .card {
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(29, 28, 26, .06);
  padding: 1.5rem 1.75rem;
}
.swatch-row { display: flex; align-items: center; gap: .6rem; margin: .8rem 0; flex-wrap: wrap; }
.swatch { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line-strong); display: inline-block; }

/* collapsible "tell us more" note (e.g. missing-category request on signup) */
details.note { margin: .9rem 0; max-width: 560px; }
details.note > summary { cursor: pointer; font-weight: 600; color: var(--link); list-style: revert; }
details.note > summary:hover { color: var(--link); }
details.note[open] > summary { margin-bottom: .5rem; }

/* generic centred auth/marketing-lite pages (login, register, confirm) */
.narrow { max-width: 420px; }
.narrow input { width: 100%; }
.narrow .validation-message { display: block; }

/* ------------------------------------------------------ blazor error UI --- */
#blazor-error-ui {
  color-scheme: light only;
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: .6rem 1.25rem .7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* ---------------------------------------------------- plans (admin + tiers) --- */
.plan-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: 1rem 0; }
.plan-edit { display: flex; flex-direction: column; gap: .2rem; }
.plan-edit h2 { margin: 0 0 .4rem; }
.plan-edit label { display: block; margin: .5rem 0 0; font-weight: 600; }
.plan-edit input:not([type=radio]), .plan-edit textarea { display: block; width: 100%; margin-top: .25rem; font-weight: 400; }
.plan-edit.featured { border: 2px solid var(--primary); }

/* recommended tier on the business billing chooser */
.tier.featured { border: 2px solid var(--primary); box-shadow: var(--shadow-lg); position: relative; }
.tier .badge.featured { background: var(--primary); color: var(--primary-ink); }
.tier .features { list-style: none; padding: 0; margin: .2rem 0 .6rem; text-align: left; width: 100%; display: flex; flex-direction: column; gap: .35rem; }
.tier .features li { position: relative; padding-left: 1.3rem; font-size: .88rem; color: var(--ink-soft); }
.tier .features li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }

/* --------------------------------------------------------- chat widget --- */
.chat-widget { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 80; }

/* Chat bubble — beefier, with a yellow halo and a slow pulse so it's the obvious "ask for help"
   affordance against the warm dashboard canvas. */
.chat-bubble {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  min-height: auto;
  padding: 0;
  background: var(--primary);
  color: var(--primary-ink);
  border: 3px solid var(--primary-ink);
  font-size: 1.7rem;
  cursor: pointer;
  box-shadow: 0 10px 28px -8px rgba(29, 28, 26, .35);
  transition: transform .15s ease, box-shadow .15s ease;
  animation: chat-pulse 2.4s ease-in-out infinite;
}

/* Soft halo behind the bubble — primary colour, lower alpha */
.chat-bubble::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: var(--primary);
  opacity: .18;
  z-index: -1;
  animation: chat-halo 2.4s ease-in-out infinite;
}

.chat-bubble:hover {
  background: var(--primary);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 14px 34px -8px rgba(29, 28, 26, .4);
  animation: none;
}

.chat-bubble:hover::before { opacity: .3; }

@keyframes chat-pulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@keyframes chat-halo {
  0%, 100% { transform: scale(1);    opacity: .35; }
  50%      { transform: scale(1.18); opacity: .15; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-bubble, .chat-bubble::before { animation: none; }
}
.chat-panel {
  width: min(370px, calc(100vw - 2rem)); height: min(560px, calc(100vh - 2rem));
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1rem; background: var(--side-bg); color: var(--side-ink-strong);
}
.chat-head .chat-title { font-family: var(--font-display); font-weight: 700; }
.chat-close { background: none; border: none; color: var(--side-ink); min-height: auto; padding: .2rem .4rem; font-size: 1rem; cursor: pointer; }
.chat-close:hover { background: var(--hover-bg); color: var(--side-ink-strong); }
.chat-body { flex: 1; overflow-y: auto; padding: .9rem; display: flex; flex-direction: column; gap: .55rem; background: var(--canvas); }
.chat-msg { max-width: 85%; padding: .55rem .75rem; border-radius: 12px; font-size: .9rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.chat-msg.bot { background: var(--surface); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-msg.me { background: var(--primary); color: var(--primary-ink); align-self: flex-end; border-bottom-right-radius: 4px; font-weight: 500; }
.chat-msg.muted { color: var(--ink-faint); }
.chat-human { align-self: flex-start; margin-top: .2rem; }
.chat-human-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .7rem; display: flex; flex-direction: column; gap: .45rem; }
.chat-human-form input { width: 100%; }
.chat-input { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid var(--line); background: var(--surface); }
.chat-input input { flex: 1; min-height: 40px; }
.chat-input .primary { min-height: 40px; }

/* admin transcript view */
.chat-transcript { display: flex; flex-direction: column; gap: .5rem; max-width: 680px; margin-top: 1rem; }
.chat-transcript .chat-msg { max-width: 80%; }
.chat-transcript .src { display: block; margin-top: .25rem; font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }

/* ------------------------------------------------- support attachments --- */
.attach-list { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; gap: .25rem; }
.attach-list li { font-size: .9rem; }
.attachments { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
.attachments a { font-size: .82rem; font-weight: 600; }

/* ------------------------------------------------------------ promo codes --- */
.promo-codes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.toggle-label { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.toggle-label input[type=checkbox] { margin: 0; }

/* ---------------------------------------------------- how-to help library --- */
/* Inline "Need a hand?" chip dropped under a page's h1 (HelpLink.razor). */
.help-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--line);
  padding: .3rem .7rem; border-radius: 999px;
  margin: 0 0 1rem;
}
.help-link:hover { background: var(--primary); color: var(--primary-ink); border-color: transparent; text-decoration: none; }

/* Library index */
.howto-cat { font-size: 1.05rem; margin-top: 1.8rem; }
.howto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .9rem; margin-top: .8rem; }
.howto-card {
  display: flex; align-items: flex-start; gap: .85rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1rem 1.1rem; box-shadow: var(--shadow);
  color: var(--ink); font-weight: 400;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.howto-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); text-decoration: none; }
.howto-card-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; background: var(--surface-2); display: grid; place-items: center; font-size: 1.1rem; }
.howto-card-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.howto-card-title { font-family: var(--font-display); font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.howto-card-summary { font-size: .86rem; color: var(--ink-soft); line-height: 1.4; }
.howto-card-go { color: var(--ink-faint); font-weight: 700; align-self: center; }
.howto-card:hover .howto-card-go { color: var(--link); }

.howto-contact { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }
.howto-contact p { margin: .2rem 0 0; }
.howto-contact .btn { flex-shrink: 0; }

/* Single article */
.howto-eyebrow { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .3rem; }
.howto-eyebrow span { margin: 0 .3rem; }
.howto-title-icon { margin-right: .35rem; }
.howto-article { max-width: 720px; }
.howto-article h2 { font-size: 1.05rem; margin-top: 1.6rem; }
.howto-why { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: var(--r); padding: .9rem 1.1rem; margin-top: 1rem; }
.howto-why h2 { margin-top: 0; }
.howto-why p { margin: 0; color: var(--ink-soft); }
.howto-steps { margin: .6rem 0 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.howto-steps li { padding-left: .2rem; }
.howto-tips ul { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.howto-tips li { position: relative; padding-left: 1.6rem; color: var(--ink-soft); }
.howto-tips li::before { content: "💡"; position: absolute; left: 0; top: 0; }
.howto-cta { margin-top: 1.6rem; }

.howto-prevnext { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; max-width: 720px; }
.howto-nav {
  display: flex; flex-direction: column; gap: .15rem; max-width: 48%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: .7rem .9rem; box-shadow: var(--shadow); color: var(--ink); font-weight: 400;
}
.howto-nav:hover { border-color: var(--line-strong); background: var(--surface-2); text-decoration: none; }
.howto-nav.next { text-align: right; margin-left: auto; }
.howto-nav .lbl { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; }
.howto-nav .ttl { font-weight: 600; color: var(--ink); }

/* ------------------------------------------------ billing interval toggle --- */
.interval-toggle { display: inline-flex; gap: .25rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: .25rem; margin: .2rem 0 1rem; }
.interval-toggle button {
  border: 0; background: transparent; cursor: pointer; color: var(--ink-soft);
  font: inherit; font-weight: 600; padding: .45rem 1.1rem; border-radius: 999px;
  display: inline-flex; align-items: center; gap: .4rem;
}
.interval-toggle button.active { background: var(--primary); color: var(--primary-ink); box-shadow: var(--shadow); }
.interval-toggle .save { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; background: var(--ok); color: var(--on-status); padding: .1rem .4rem; border-radius: 999px; }
.interval-toggle button.active .save { background: var(--primary-ink); color: var(--primary); }

/* -------------------------------------------------------------- responsive --- */
@media (max-width: 820px) {
  .app-sidebar {
    position: fixed; left: 0; top: 0; z-index: 60;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--shadow-lg);
  }
  .nav-toggle:checked ~ .app-sidebar { transform: translateX(0); }
  .nav-toggle:checked ~ .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(14, 14, 14, .45); z-index: 55; }
  .burger { display: inline-flex; }
  .app-topbar .topbar-brand { display: inline-flex; align-items: baseline; gap: .25rem; }
  .app-topbar .crumb { display: none; }
  .app-content { padding: 1.2rem 1.1rem 2.5rem; }
}

@media (max-width: 560px) {
  .ba { grid-template-columns: 1fr; }
  .gallery .photo-card { width: 100%; }
  h1 { font-size: 1.6rem; }
  .howto-prevnext { flex-direction: column; }
  .howto-nav, .howto-nav.next { max-width: none; text-align: left; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* ==========================================================================
   LANDING (split layout)
   Anonymous-only. Left column = brand + pitch + CTAs on a soft tinted canvas;
   right column = a soft panel with a light CSS-only mockup of the business
   site we'd build them. Stacks on mobile; right panel shrinks to a banner.
   ========================================================================== */

.landing-shell {
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink);
}

.landing-content {
  min-height: 100vh;
}

.landing-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
}

/* ---------- left side: brand + pitch ---------- */

.landing-split-left {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 6vw, 4.5rem);
  background: var(--canvas);
}

.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: inherit;
  align-self: flex-start;
}

.landing-brand .landing-mark {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--primary);
  color: var(--primary-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
}

.landing-brand .landing-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -.01em;
}

.landing-brand .landing-wordmark span {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .72rem;
  margin-left: .25em;
  color: var(--ink-faint);
}

.landing-hero {
  margin: auto 0;
  max-width: 520px;
}

.landing-eyebrow {
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--link);
  margin: 0 0 1rem;
}

.landing-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 4.4vw, 3.7rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0 0 1.3rem;
  color: var(--ink);
}

.landing-title .hl {
  color: var(--link);
}

.landing-lead {
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 .8rem;
}

.landing-price {
  font-size: .9rem;
  color: var(--ink-soft);
  margin: 0 0 1.8rem;
}

.landing-cta {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

.landing-foot {
  font-size: .85rem;
  color: var(--ink-faint);
  margin: 1.5rem 0 0;
}

/* The "big" CTA modifier — used on the landing only. */
.btn.big {
  padding: .9rem 1.5rem;
  font-size: 1rem;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 700;
}

.btn.primary.big {
  background: var(--primary);
  color: var(--primary-ink);
  border: 1px solid transparent;
  box-shadow: none;
}

.btn.primary.big:hover {
  background: var(--primary-deep);
  color: var(--primary-ink);
  text-decoration: none;
}

.btn.ghost.big {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

.btn.ghost.big:hover {
  background: var(--surface-2);
  border-color: var(--ink-faint);
  text-decoration: none;
  color: var(--ink);
}

/* ---------- right side: soft panel + mockup ---------- */

.landing-split-right {
  position: relative;
  background: linear-gradient(160deg, var(--primary-soft) 0%, var(--surface-2) 100%);
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
}

/* Offset accent block sitting behind the mockup */
.landing-split-right::before {
  content: "";
  position: absolute;
  right: 7%;
  top: 22%;
  width: 60%;
  height: 58%;
  background: var(--accent);
  border-radius: 6px;
}

.mockup {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
}

.mockup-frame {
  background: #fff;
  border-radius: 12px;
  box-shadow:
    0 24px 48px -20px rgba(29, 28, 26, .35),
    0 2px 6px rgba(29, 28, 26, .08);
  overflow: hidden;
  border: 1px solid rgba(29, 28, 26, .08);
}

.mockup-bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: #F3F5FA;
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--line);
}

.mockup-bar .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #CBD3E3;
}

.mockup-bar .addr {
  margin-left: .8rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-faint);
  background: #fff;
  padding: .15rem .55rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  flex: 1;
  text-align: center;
}

.mockup-site {
  background: #fff;
  color: var(--ink);
  padding: 1rem 1.2rem 1.2rem;
}

.mockup-nav {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.1rem;
}

.mockup-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--ink);
  margin-right: auto;
}

.mockup-link {
  font-size: .7rem;
  color: var(--ink-faint);
}

.mockup-hero { text-align: center; padding: .6rem 0 1rem; }

.mockup-eyebrow {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .14em;
  color: var(--primary);
  margin: 0 0 .55rem;
}

.mockup-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 .55rem;
  color: var(--ink);
}

.mockup-sub {
  font-size: .78rem;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}

.mockup-buttons { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }

.mockup-btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .72rem;
  padding: .5rem .8rem;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
}

.mockup-btn.primary {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: transparent;
}

.mockup-strip {
  display: flex;
  justify-content: space-between;
  font-size: .62rem;
  color: var(--ink-faint);
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px solid var(--line);
}

/* "LIVE 11:47 AM today" badge on the mockup's bottom-right */
.mockup-badge {
  position: absolute;
  right: -14px;
  bottom: -18px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-mono);
  padding: .5rem .75rem;
  border-radius: 10px;
  box-shadow: 0 14px 28px -10px rgba(29, 28, 26, .35);
  border: 1px solid var(--line);
}

.mockup-badge-time {
  background: var(--ok);
  color: var(--on-status);
  font-weight: 700;
  font-size: .66rem;
  padding: .12rem .45rem;
  border-radius: 6px;
  letter-spacing: .08em;
}

.mockup-badge-when {
  font-size: .7rem;
  letter-spacing: .02em;
  color: var(--ink-soft);
}

/* ---------- responsive: stack on tablets+phones ---------- */

@media (max-width: 960px) {
  .landing-split { grid-template-columns: 1fr; }
  .landing-split-left { padding: 2rem 1.5rem; min-height: auto; }
  .landing-split-right {
    order: -1;
    min-height: 280px;
    padding: 2.5rem 1.5rem;
  }
  .mockup { width: min(380px, 100%); }
}

@media (max-width: 540px) {
  .landing-cta { flex-direction: column; align-items: stretch; }
  .btn.big { width: 100%; text-align: center; }

}

/* ==========================================================================
   AUTH PAGES (Register / Login / Confirm Email / Register Confirmation)
   Anonymous-shell inner pages. Centered card with the brand mark at top so
   the visitor stays oriented after clicking "Build me a site" on /.
   ========================================================================== */

.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.5rem, 5vh, 3rem) 1.25rem;
  background: var(--canvas);
  color: var(--ink);
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: inherit;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

.auth-brand .auth-mark {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--primary);
  color: var(--primary-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  box-shadow: 0 1px 2px rgba(29, 28, 26, .14);
}

.auth-brand .auth-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -.01em;
}

.auth-brand .auth-wordmark span {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .7rem;
  margin-left: .2em;
  opacity: .55;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow:
    0 24px 48px rgba(29, 28, 26, .06),
    0 4px 12px rgba(29, 28, 26, .04);
  margin: auto 0;
}

.auth-card h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2rem);
  letter-spacing: -.02em;
  margin: 0 0 .5rem;
}

.auth-card .lead {
  color: var(--ink-soft);
  font-size: .98rem;
  margin: 0 0 1.5rem;
}

.auth-card .err {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 10px;
  padding: .65rem .85rem;
  margin: 0 0 1rem;
  font-size: .9rem;
}

.auth-card label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
}

.auth-card input[type=text],
.auth-card input[type=email],
.auth-card input[type=password],
.auth-card .valid,
.auth-card .invalid {
  width: 100%;
  padding: .7rem .85rem;
  margin-top: .35rem;
  font-size: 1rem;
  font-family: var(--font-display);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-card input:focus {
  outline: 0;
  border-color: var(--primary-deep);
  box-shadow: 0 0 0 3px rgba(30, 70, 54, .35);
}

.auth-card p { margin: 0 0 1rem; }

.auth-submit {
  width: 100%;
  padding: .9rem 1.25rem;
  margin-top: .35rem;
  font-size: 1.02rem;
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: 12px;
  background: var(--primary);
  color: var(--primary-ink);
  border: 1px solid transparent;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(29, 28, 26, .14);
  transition: transform .12s ease, box-shadow .12s ease;
}

.auth-submit:hover {
  
  box-shadow: none; background: var(--primary-deep);
}

.auth-submit:active {
  transform: translateY(1px);
  box-shadow: none;
}

.auth-alt {
  text-align: center;
  margin: 1.5rem 0 0;
  font-size: .92rem;
  color: var(--ink-soft);
}

.auth-alt a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--primary-deep);
  text-underline-offset: 3px;
}

.auth-alt a:hover { color: var(--link); }

.auth-dev {
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  padding: 1rem;
  margin-top: 1rem;
}

.auth-dev p { margin: 0 0 .65rem; font-size: .88rem; color: var(--ink-soft); }
.auth-dev p:last-child { margin: 0; }

/* Blazor / DataAnnotations validation message styling inside the card */
.auth-card .validation-message {
  display: block;
  color: var(--danger);
  font-size: .85rem;
  margin-top: .35rem;
}

.auth-card .validation-summary-errors {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 10px;
  padding: .65rem .85rem;
  margin: 0 0 1rem;
  font-size: .9rem;
  list-style: none;
}

/* ==========================================================================
   ONBOARDING WIZARD
   Modern slider: header (brand + dot progress + skip), translating slide
   track, footer (back + finish). Full-bleed; rendered via OnboardingLayout
   so no dashboard chrome leaks in.
   ========================================================================== */

.onboarding-shell {
  /* Force full-bleed regardless of parent layout — covers the dashboard sidebar
     and topbar if MainLayout happens to wrap this page. */
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(1100px 600px at 100% 0%, rgba(30, 70, 54, .18) 0%, transparent 60%),
    radial-gradient(1100px 600px at 0% 100%, rgba(127, 177, 59, .08) 0%, transparent 60%),
    var(--canvas);
  color: var(--ink);
  overflow: hidden;
}

.onboarding-loading {
  display: grid;
  place-items: center;
  min-height: 100vh;
  color: var(--ink-soft);
  font-family: var(--font-mono);
}

.onboarding-celebrate {
  display: grid;
  place-items: center;
  min-height: 100vh;
  text-align: center;
  padding: 2rem;
}

.onboarding-confetti {
  font-size: 4rem;
  margin-bottom: 1rem;
  animation: oconfetti .8s ease-out;
}

@keyframes oconfetti {
  0% { transform: scale(.5) rotate(-15deg); opacity: 0; }
  60% { transform: scale(1.2) rotate(8deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.onboarding-celebrate h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -.02em;
  margin: 0 0 .75rem;
}

.onboarding-celebrate .lead {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 460px;
  margin: 0 auto 2rem;
}

/* ---------- header (brand + dots + skip) ---------- */

.onboarding-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem);
  gap: 1.5rem;
}

.onboarding-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: inherit;
  justify-self: start;
}

.onboarding-mark {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--primary);
  color: var(--primary-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  box-shadow: 0 1px 2px rgba(29, 28, 26, .14);
}

.onboarding-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}

.onboarding-wordmark span {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .65rem;
  opacity: .55;
  margin-left: .15em;
}

.onboarding-steps {
  display: flex;
  gap: .55rem;
  justify-self: center;
}

.onboarding-dot {
  width: 28px;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  transition: background .25s ease, transform .25s ease;
}

.onboarding-dot.current {
  background: var(--primary);
  transform: scaleY(1.5);
  box-shadow: 0 1px 2px rgba(29, 28, 26, .14);
}

.onboarding-dot.done {
  background: var(--primary-deep);
}

.onboarding-skip {
  justify-self: end;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  padding: .55rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

.onboarding-skip:hover {
  background: var(--surface-2);
  border-color: var(--ink-faint);
  transform: translateY(-1px);
}

.onboarding-required-tag {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary-ink);
  background: var(--primary);
  padding: .45rem .8rem;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(29, 28, 26, .14);
}

.onboarding-required-tag::before {
  content: "●";
  font-size: .55rem;
  color: var(--primary-ink);
  opacity: .75;
}

/* ---------- slider track ---------- */

.onboarding-slider {
  overflow: hidden;
  position: relative;
  min-height: 0; /* allow grid to shrink */
}

.onboarding-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.onboarding-slide {
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 4vh, 3rem) clamp(1.25rem, 4vw, 2.5rem);
  overflow-y: auto;
}

.onboarding-slide-inner {
  width: 100%;
  max-width: 560px;
  text-align: center;
  margin: auto;
}

.onboarding-slide-inner.wide { max-width: 1080px; }

.onboarding-eyebrow {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}

.onboarding-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 .9rem;
}

.onboarding-lead {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--ink-soft);
  margin: 0 0 2rem;
}

.onboarding-note {
  margin-top: 2rem;
  color: var(--ink-soft);
  font-size: .95rem;
}

.onboarding-note .link {
  background: transparent;
  border: 0;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--primary-deep);
  text-underline-offset: 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

/* ---------- category picker step (step 2) ---------- */

.category-picker-card {
  display: grid;
  gap: 1.25rem;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2rem;
  margin: 0 0 1rem;
  box-shadow: 0 8px 24px rgba(29, 28, 26, .06);
}

.category-picker-label {
  display: grid;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
}

.category-picker-card select,
.category-picker-card input {
  font-family: var(--font-display);
  font-size: 1.05rem;
  padding: .95rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.category-picker-card input { cursor: text; }

.category-picker-card select:focus,
.category-picker-card input:focus {
  outline: 0;
  border-color: var(--primary-deep);
  box-shadow: 0 0 0 3px rgba(30, 70, 54, .35);
}

.category-picker-card .err {
  margin: 0;
  padding: .7rem .85rem;
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 10px;
  font-size: .9rem;
}

.category-continue { width: 100%; margin-top: .5rem; }

.onboarding-note.small,
.muted.small { font-size: .85rem; }

/* Highlight the plan card the user picked on step 1 (visual confirmation across step 2). */
.plan-card.selected {
  border-color: var(--primary-deep);
  background: linear-gradient(180deg, var(--primary-soft) 0%, var(--surface) 50%);
}

.plan-card.selected .plan-pick {
  background: var(--ok);
  color: var(--on-status);
  box-shadow: 0 4px 0 #0F5E32;
}

.plan-trial {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--link);
  margin: -.4rem 0 0;
}

/* ==========================================================================
   DASHBOARD SETUP CHECKLIST
   Banner that sits above the dashboard tiles after onboarding. Auto-hides
   once every step is done. Five steps: domain → business info → services →
   photos → testimonials, computed by SetupChecklistService.
   ========================================================================== */

.setup-checklist {
  margin: 0 0 2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 8px 24px rgba(29, 28, 26, .06);
  position: relative;
  overflow: hidden;
}

.setup-checklist::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-bright) 100%);
}

.setup-head {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.setup-head > div:first-child { flex: 1; min-width: 200px; }

.setup-eyebrow {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .35rem;
}

.setup-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--ink);
}

.setup-progress {
  flex: 1;
  min-width: 180px;
  height: 8px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.setup-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-deep) 100%);
  border-radius: 999px;
  transition: width .55s cubic-bezier(.22, .61, .36, 1);
}

.setup-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}

.setup-step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}

.setup-step:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.setup-step.done {
  background: var(--ok-bg);
  border-color: rgba(21, 127, 70, .25);
}

.setup-tick {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1.5px solid var(--line-strong);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: transparent;
}

.setup-step.done .setup-tick {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--on-status);
}

.setup-body { min-width: 0; }

.setup-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
}

.setup-link:hover { color: var(--link); text-decoration: underline; }

.setup-desc {
  font-size: .88rem;
  color: var(--ink-soft);
  margin: .15rem 0 0;
  line-height: 1.4;
}

.setup-go {
  display: inline-flex;
  align-items: center;
  padding: .5rem .95rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(29, 28, 26, .14);
  transition: transform .12s ease, box-shadow .12s ease;
}

.setup-go:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(29, 28, 26, .14);
  color: var(--primary-ink);
  text-decoration: none;
}

.setup-done-tag {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ok);
  background: rgba(21, 127, 70, .12);
  padding: .3rem .6rem;
  border-radius: 999px;
}

@media (max-width: 640px) {
  .setup-step { grid-template-columns: auto 1fr; }
  .setup-go, .setup-done-tag { grid-column: 2; justify-self: start; }
}

/* Cancel-trial button on /dashboard/billing */
.cancel-trial {
  margin-top: .5rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .88rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.cancel-trial:hover {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger);
}

.status.canceled { color: var(--danger); }
.status.canceled .link {
  background: transparent;
  border: 0;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

/* ==========================================================================
   FAKE CHECKOUT (dev mode card-capture page)
   ========================================================================== */

.checkout-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(30, 70, 54, .14) 0%, transparent 60%),
    var(--canvas);
}

/* When checkout is rendered inside the OnboardingLayout shell (i.e. during the wizard's
   Stripe-Checkout step), let it span all grid rows so it centers in the viewport instead of
   landing in row 1. The shell's gradient already paints the backdrop. */
.onboarding-shell > .checkout-shell {
  grid-row: 1 / -1;
  grid-column: 1 / -1;
  background: transparent;
  min-height: 0;
  height: 100%;
  width: 100%;
}

.checkout-card {
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2rem;
  box-shadow: 0 24px 48px rgba(29, 28, 26, .08);
}

.checkout-tag {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--surface-2);
  padding: .35rem .7rem;
  border-radius: 999px;
  display: inline-block;
  margin: 0 0 1rem;
}

.checkout-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: -.02em;
  margin: 0 0 1rem;
}

.checkout-amount { margin: 0 0 1rem; }
.checkout-amount .amount-big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: -.02em;
  color: var(--ink);
}
.checkout-amount .amount-unit { font-size: 1rem; color: var(--ink-faint); margin-left: .15rem; }

.checkout-trial {
  background: rgba(30, 70, 54, .25);
  border-left: 3px solid var(--primary);
  border-radius: 10px;
  padding: .8rem 1rem;
  font-size: .92rem;
  color: var(--ink);
  margin: 0 0 1.5rem;
  line-height: 1.4;
}

.checkout-form {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.5rem;
}

.checkout-form label {
  min-width: 0;
  display: grid;
  gap: .35rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
}

.checkout-form input {
  font-family: var(--font-display);
  font-size: 1rem;
  width: 100%;
  min-width: 0;
  padding: .75rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}

.checkout-form input:focus {
  outline: 0;
  border-color: var(--primary-deep);
  box-shadow: 0 0 0 3px rgba(30, 70, 54, .35);
}

.checkout-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.checkout-pay {
  width: 100%;
  background: var(--primary);
  color: var(--primary-ink);
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  padding: .95rem 1.25rem;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(29, 28, 26, .14);
  transition: transform .12s ease, box-shadow .12s ease;
}

.checkout-pay:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(29, 28, 26, .14);
}

.checkout-cancel { text-align: center; margin: 1rem 0 0; font-size: .92rem; }
.checkout-cancel a { color: var(--ink-soft); text-decoration: underline; }

.checkout-fine {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--ink-faint);
  text-align: center;
  margin: 1.25rem 0 0;
}

/* ---------- plan cards (step 1) ---------- */

.plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin: 1rem 0 1.5rem;
  text-align: left;
}

.plan-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.plan-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(29, 28, 26, .08);
}

.plan-card.featured {
  border-color: var(--primary-deep);
  background: linear-gradient(180deg, var(--primary-soft) 0%, var(--surface) 50%);
  box-shadow: 0 1px 2px rgba(29, 28, 26, .14);
}

.plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-ink);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .35rem .75rem;
  border-radius: 999px;
}

.plan-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  margin: 0;
  letter-spacing: -.01em;
}

.plan-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.2rem;
  margin: 0;
  letter-spacing: -.02em;
  color: var(--ink);
}

.plan-price span {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-faint);
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .92rem;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.plan-pick { width: 100%; margin-top: auto; }

/* ---------- domain step (step 2) ---------- */

.domain-pick { display: flex; flex-direction: column; gap: 1rem; align-items: center; }

.domain-preview {
  background: #0E0E0E;
  color: #fff;
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  padding: 1.25rem 1.75rem;
  border-radius: 14px;
  margin: 0;
  box-shadow: 0 14px 32px rgba(29, 28, 26, .15), 0 0 0 4px rgba(30, 70, 54, .3);
  word-break: break-all;
}

.domain-preview span {
  background: linear-gradient(90deg, var(--primary), var(--primary-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- business info form (step 3) ---------- */

.onboarding-form {
  display: grid;
  gap: 1rem;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.75rem;
  margin: 0 0 1.5rem;
  box-shadow: 0 8px 24px rgba(29, 28, 26, .05);
}

.onboarding-form label {
  display: grid;
  gap: .35rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
}

.onboarding-form input,
.onboarding-form textarea {
  font-family: var(--font-display);
  font-size: 1rem;
  padding: .7rem .85rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
}

.onboarding-form input:focus,
.onboarding-form textarea:focus {
  outline: 0;
  border-color: var(--primary-deep);
  box-shadow: 0 0 0 3px rgba(30, 70, 54, .35);
}

/* ---------- services / photos / testimonials steps ---------- */

.ok-banner {
  background: var(--ok-bg);
  color: var(--ok);
  border: 1px solid var(--ok);
  border-radius: 12px;
  padding: .8rem 1rem;
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-weight: 600;
}

.photo-illustration {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .65rem;
  margin: 0 auto 2rem;
  max-width: 380px;
}

.photo-tile {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background:
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(0, 0, 0, .04) 8px 10px),
    linear-gradient(135deg, var(--primary) 0%, var(--primary-bright) 100%);
}

.photo-tile:nth-child(2) {
  background:
    repeating-linear-gradient(135deg, transparent 0 8px, rgba(255, 255, 255, .15) 8px 10px),
    linear-gradient(135deg, #16140E 0%, #2c2920 100%);
}

.photo-tile:nth-child(3) {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-bright) 100%);
}

.testimonial-sample {
  background: var(--surface);
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 0 0 2rem;
  text-align: left;
  box-shadow: 0 8px 24px rgba(29, 28, 26, .05);
}

.testimonial-sample p {
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0 0 .5rem;
  line-height: 1.5;
}

.testimonial-sample footer {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--ink-faint);
}

/* ---------- footer (back + finish) ---------- */

.onboarding-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .5);
  backdrop-filter: saturate(120%) blur(8px);
}

.onboarding-back {
  background: transparent;
  border: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink-soft);
  padding: .5rem .8rem;
  border-radius: 8px;
  cursor: pointer;
}

.onboarding-back:hover {
  background: var(--surface-2);
  color: var(--ink);
}

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  .onboarding-header {
    grid-template-columns: 1fr auto;
    gap: 1rem;
  }
  .onboarding-steps {
    order: 3;
    grid-column: 1 / -1;
    justify-self: center;
  }
  .onboarding-dot { width: 22px; }
  .plan-cards { grid-template-columns: 1fr; }
}

/* developer's client list */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.page-head h1 { margin: 0; }
.page-head .sub { margin: .25rem 0 0; }
.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.kpi-card { display: flex; align-items: center; gap: .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem 1.15rem; box-shadow: var(--shadow); }
.kpi-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: var(--r); background: var(--primary-soft); font-size: 1.2rem; }
.kpi-label { color: var(--ink-faint); font-size: .8rem; }
.kpi-value { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.kpi-card.attn { border-color: var(--warn); }
.kpi-card.attn .kpi-icon { background: var(--warn-bg); }
.tablecard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.tablecard .toolbar { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .7rem 1rem; border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; }
.tab { border: 0; background: transparent; box-shadow: none; padding: .4rem .8rem; border-radius: 999px; color: var(--ink-soft); font-weight: 600; }
.tab:hover { background: var(--surface-2); }
.tab.on { background: var(--primary-soft); color: var(--link); }
.tab .count { margin-left: .3rem; font-size: .75rem; opacity: .7; }
.search { max-width: 240px; width: 100%; }
.clients { width: 100%; border-collapse: collapse; }
.clients th { text-align: left; font-size: .72rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); background: var(--side-bg-2); padding: .6rem 1rem; border-bottom: 1px solid var(--line); }
.clients td { padding: .8rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: .92rem; }
.clients tbody tr:last-child td { border-bottom: 0; }
.clients tbody tr:hover { background: var(--side-bg-2); }
.clients .right { text-align: right; }
.clients .center { text-align: center; padding: 1.5rem; }
.who { display: flex; align-items: center; gap: .7rem; }
.avatar { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; font-weight: 700; font-size: .8rem; flex: none; }
.badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: .78rem; font-weight: 600; }
.pill.bad { background: var(--danger-bg); color: var(--danger); }
.empty-card { max-width: 560px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; box-shadow: var(--shadow); }
.new-site-form { max-width: 560px; }

/* brief and files: one row per file */
.material { display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--line); max-width: 760px; }
.material input { grid-column: 1; width: 100%; }
.material .link { grid-column: 2; grid-row: 1 / span 2; }
/* SEO tab: one card per page, an editor, and a Google result preview */
.seo .section { max-width: 820px; }
.seo-page { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: .8rem 1rem; margin: .6rem 0; }
.seo-page.open { box-shadow: var(--shadow); }
.seo-page-head { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; }
.seo-page-sum { min-width: 0; }
.seo-path { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-faint); margin-right: .4rem; }
.seo-page-title { font-weight: 600; margin: .2rem 0 .1rem; overflow-wrap: anywhere; }
.seo-page .rowsub { overflow-wrap: anywhere; }
.seo-edit { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.seo-edit label, .seo-ga { display: block; margin-bottom: .8rem; }
.seo-edit label > span:first-child, .seo-ga > span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
.seo .section .seo-edit label > input, .seo-edit textarea { width: 100%; max-width: none; margin: 0; }
.seo .section .seo-ga > input { width: 100%; max-width: 260px; margin: 0; font-family: var(--font-mono); }
.seo-count { display: block; font-size: .8rem; margin-top: .25rem; }
.seo-count.good { color: var(--ok); }
.seo-count.warn { color: var(--warn); }
.serp { border: 1px solid var(--line); border-radius: var(--r-sm); padding: .9rem 1rem; background: var(--canvas); font-family: Arial, Helvetica, sans-serif; max-width: 640px; }
.serp-site { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.serp-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); font-size: .75rem; font-weight: 700; color: var(--ink-soft); flex: none; }
.serp-name { display: block; font-size: .85rem; color: var(--ink); }
.serp-url { display: block; font-size: .75rem; color: var(--serp-ink); overflow-wrap: anywhere; }
.serp-title { color: var(--serp-title); font-size: 1.2rem; line-height: 1.3; margin-bottom: .2rem; overflow-wrap: anywhere; }
.serp-desc { color: var(--serp-ink); font-size: .875rem; line-height: 1.55; overflow-wrap: anywhere; }
.seo-redirect { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: .5rem; align-items: center; margin: .4rem 0; }
.seo-redirect input { width: 100%; font-family: var(--font-mono); font-size: .85rem; }
@media (max-width: 640px) {
  .seo-redirect { grid-template-columns: 1fr; }
  .seo-redirect > span { display: none; }
}
.tablecard .search { flex: 0 1 240px; width: auto; min-width: 160px; margin: 0; }
.clients .btn { white-space: nowrap; }

/* charts (plain SVG) */
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
.chart-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 1rem 1.1rem; min-width: 0; }
.chart-card.wide { grid-column: 1 / -1; }
.chart { margin: 0; }
.chart figcaption { font-weight: 700; font-size: .95rem; margin-bottom: .5rem; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-svg .chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-axis { fill: var(--ink-faint); font-size: 11px; font-family: var(--font-mono); }
.chart-bar { fill: var(--primary); }
.chart-bar:hover { fill: var(--primary-deep); }
.chart-line { stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { fill: var(--primary); opacity: .1; }
.chart-dot { fill: var(--surface); stroke: var(--primary); stroke-width: 2; }
.chart-empty { color: var(--ink-faint); margin: 1.5rem 0; }
.chart-note { color: var(--ink-faint); font-size: .8rem; margin: .5rem 0 0; }
.donut-wrap { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.donut-svg { width: 150px; height: 150px; flex: none; }
.donut-total { font-size: 20px; font-weight: 700; fill: var(--ink); font-family: var(--font-display); }
.donut-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .9rem; }
.donut-legend .swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .35rem; }
.two-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
@media (max-width: 720px) { .chart-grid, .two-tables { grid-template-columns: 1fr; } }
.kpi-row.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .kpi-row.five { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }

/* phones: tables scroll inside their card, figure cards go two across, the top bar never balloons */
.tablecard { overflow-x: auto; }
.clients { min-width: 560px; }
.topbar-action { white-space: nowrap; }
@media (max-width: 560px) {
  .kpi-row, .kpi-row.five { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .kpi-card { padding: .7rem .75rem; gap: .55rem; }
  .kpi-icon { width: 2rem; height: 2rem; font-size: 1rem; }
  .kpi-value { font-size: 1.25rem; }
  .kpi-label { font-size: .72rem; }
  .tablecard .search { flex: 1 1 100%; max-width: none; }
  .topbar-action { padding: .3rem .6rem; font-size: .78rem; }
  .page-head .btn { width: 100%; text-align: center; }
  .chart-card { padding: .8rem; }
  .donut-svg { width: 120px; height: 120px; }
}
.clients.summary { min-width: 0; }
@media (max-width: 720px) { table.leads { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } }
@media (max-width: 720px) { table.leads td:nth-child(4) { min-width: 200px; } table.leads td, table.leads th { min-width: 84px; } }
.two-tables > div { min-width: 0; }
.tablecard { max-width: 100%; }
@media (max-width: 560px) {
  .chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chart .chart-svg { min-width: 480px; }
}

/* ==========================================================================
   DISPLAY TYPE (D-3.33)
   Large titles, the brand wordmark and big numbers use Libre Baskerville (regular weight);
   everything else stays in Geist. Kept in one place so the split is easy to see and change.
   ========================================================================== */
h1,
.side-brand .wordmark, .app-topbar .topbar-brand,
.landing-brand .landing-wordmark, .landing-title,
.auth-brand .auth-wordmark, .auth-card h1,
.onboarding-wordmark, .onboarding-title, .onboarding-celebrate h1,
.checkout-title, .setup-title,
.stat .big, .kpi .value, .kpi-value, .tier .amount, .checkout .amount {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0;
}
h1 { font-size: 2.05rem; line-height: 1.15; }
.side-brand .wordmark { font-size: 1.15rem; }
.side-brand .wordmark span, .app-topbar .topbar-brand span { display: none; }
.stat .big, .kpi .value, .kpi-value, .tier .amount { font-size: 1.75rem; line-height: 1.1; }
.landing-title { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.12; }
.onboarding-title, .onboarding-celebrate h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.15; }
.auth-card h1 { font-size: clamp(1.4rem, 3vw, 1.75rem); }
.checkout-title, .setup-title { font-size: 1.3rem; }

/* The "R" brand mark: serif italic on the primary green. */
.side-brand .mark, .landing-brand .landing-mark, .auth-brand .auth-mark, .onboarding-mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  box-shadow: none;
}

/* ==========================================================================
   LIGHT / DARK SWITCH
   A plain button (works without the interactive circuit); App.razor's rboTheme script flips
   data-theme on <html> and remembers the choice in the rbo-theme cookie.
   ========================================================================== */
.theme-toggle {
  width: 40px; height: 40px; min-height: 40px; padding: 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: none; }
}
.theme-toggle-float { position: fixed; top: 1rem; right: 1rem; z-index: 30; }

/* Line icons (Icon.razor) inside the icon slots: tinted in the primary/link colour. */
.side-link .ico { display: inline-flex; align-items: center; justify-content: center; color: var(--side-faint); }
.side-link.active .ico, .side-link:hover .ico { color: var(--active-ink); }
.kpi-icon, .stat .stat-icon { color: var(--link); }
.kpi-card.attn .kpi-icon { color: var(--warn); }
.icon { flex-shrink: 0; vertical-align: -3px; }
/* Small words beside a big number ("of 10 included") stay in the plain font and on one line. */
.kpi-value .muted, .stat .big .muted { font-family: var(--font-body); font-size: .9rem !important; white-space: nowrap; margin-left: .25rem; }

/* Alignment pass (owner feedback 2026-09-28): cards, tables and page headers share one width, the
   figure cards sit in one even row, and table cells don't wrap into tall rows. */
@media (max-width: 1000px) { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi-card { min-height: 92px; }
.kpi-value { font-size: 1.6rem; line-height: 1.15; }
.clients td { white-space: nowrap; }
.clients td:first-child { white-space: normal; min-width: 200px; }
.clients .who strong { font-weight: 600; }
.page-head { align-items: flex-end; }
.page-head .help-link { margin: .6rem 0 .2rem; }
/* The website being worked on, shown as a heading over its links (replaces the old dropdown). */
.side-group.side-site-name {
  font-family: var(--font-serif); font-size: .95rem; text-transform: none; letter-spacing: 0;
  color: var(--side-ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.4; padding-top: 1.1rem; padding-bottom: .45rem;
}
.side-nav > * { flex-shrink: 0; }
/* Websites table fits without sideways scrolling: tighter cells, the name opens the website, and
   the Billing column hides on narrower screens (it is also on Plan and billing). */
.clients td, .clients th { padding-left: .8rem; padding-right: .8rem; }
.clients td:first-child { min-width: 170px; }
.clients .site-link { color: var(--ink); }
.clients .site-link:hover { color: var(--link); }
@media (max-width: 1250px) { .clients th:nth-child(4), .clients td:nth-child(4) { display: none; } }

/* Phones and tablets (owner request 2026-09-28). */
.kpi-icon { flex-shrink: 0; }
.app-topbar .topbar-brand { white-space: nowrap; }
@media (max-width: 700px) {
  .app-topbar .topbar-brand { font-size: 1rem; }
  .kpi-value .muted { display: block; margin-left: 0; }
  /* Websites table becomes one card per website, each value labelled. */
  .tablecard { overflow-x: visible; }
  .clients { min-width: 0; display: block; }
  .clients thead { display: none; }
  .clients tbody, .clients tr, .clients td { display: block; }
  .clients tr { padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
  .clients tbody tr:last-child { border-bottom: 0; }
  .clients td { border: 0; padding: .2rem 0; white-space: normal; }
  .clients td:first-child { min-width: 0; padding-bottom: .5rem; }
  .clients td[data-label] { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; }
  .clients td[data-label]::before { content: attr(data-label); color: var(--ink-faint); }
  .clients th:nth-child(4), .clients td:nth-child(4) { display: flex; }
  .clients td.right { text-align: left; padding-top: .6rem; }
  .clients td.right .btn { width: 100%; }
  .chat-bubble { transform: scale(.85); transform-origin: bottom right; }
}
@media (max-width: 560px) { .kpi-icon { display: none; } }

/* "Ask the AI builder" on Versions and publishing (v4 step 3; the full builder screen comes in step 4). */
.ai-ask { margin: 1.2rem 0 1.6rem; }
.ai-ask textarea { width: 100%; }
.ai-edits { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: .7rem; }
.ai-edit { border-top: 1px solid var(--line); padding-top: .7rem; }
.ai-edit-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ai-edit-request { margin: .4rem 0 .2rem; font-weight: 600; white-space: pre-wrap; }
.ai-edit-summary { margin: .2rem 0; white-space: pre-wrap; color: var(--ink-soft); }

/* ==========================================================================
   BUILDER SCREEN (v4 step 4): chat on the left, live preview or versions on the right, Publish top right.
   Full window, its own top bar (BuilderLayout). On phones the chat and the preview are two tabs.
   ========================================================================== */
.builder-shell { height: 100vh; height: 100dvh; background: var(--canvas); }
.bld { height: 100%; display: flex; flex-direction: column; }
.bld-loading, .bld-empty { padding: 2rem; }

.bld-top {
  flex-shrink: 0; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .45rem .9rem .45rem 1rem; background: var(--side-bg); border-bottom: 1px solid var(--line);
}
.bld-top-left, .bld-top-mid, .bld-top-right { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.bld-mark {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--primary); color: var(--primary-ink); font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; text-decoration: none;
}
.bld-mark:hover { color: var(--primary-ink); text-decoration: none; background: var(--primary-deep); }
.bld-mark.sm { width: 22px; height: 22px; border-radius: 6px; font-size: .8rem; }
.bld-slash { color: var(--line-strong); }
.bld-site { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
.bld-state { font-size: .82rem; color: var(--ink-faint); white-space: nowrap; }
.bld-top .btn, .bld-top button { min-height: 36px; padding: .35rem .8rem; font-size: .88rem; }
.bld-top .theme-toggle { width: 36px; height: 36px; min-height: 36px; padding: 0; }
.bld-confirm { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; }

.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: 10px; }
.seg button {
  min-height: 30px; padding: .25rem .75rem; border: 1px solid transparent; background: none; border-radius: 8px;
  font-size: .85rem; font-weight: 500; color: var(--ink-faint); box-shadow: none;
}
.seg button:hover { background: none; color: var(--ink); }
.seg button.on { background: var(--surface); border-color: var(--line); color: var(--ink); }

.bld-note { margin: .5rem 1rem 0; }
.bld-setup { max-width: 620px; margin: 3rem auto; padding: 1.6rem 1.8rem; }

.bld-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(320px, 400px) 1fr; }
.bld-chat { display: flex; flex-direction: column; min-height: 0; background: var(--side-bg); border-right: 1px solid var(--line); }
.bld-messages { flex: 1; overflow-y: auto; padding: 1.2rem 1.2rem .6rem; display: flex; flex-direction: column; gap: 1rem; }
.bld-msg p { margin: 0 0 .4rem; }
.bld-msg.me { align-self: flex-end; max-width: 85%; background: var(--surface-2); border-radius: 16px 16px 4px 16px; padding: .65rem .85rem; }
.bld-msg.me p { white-space: pre-wrap; margin: 0; }
.bld-msg.ai { font-size: .94rem; }
.bld-who { display: flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 600; margin-bottom: .35rem; }
.bld-summary { white-space: pre-wrap; color: var(--ink-soft); }
.bld-working { display: flex; align-items: center; gap: .5rem; color: var(--ink-soft); }
.bld-dots { display: inline-flex; gap: 3px; }
.bld-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--link); animation: bld-blink 1.2s infinite ease-in-out; }
.bld-dots i:nth-child(2) { animation-delay: .2s; }
.bld-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes bld-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.bld-progress { height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.bld-progress span { display: block; height: 100%; width: 40%; background: var(--primary); border-radius: 4px; animation: bld-slide 1.6s infinite ease-in-out; }
@keyframes bld-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { .bld-dots i, .bld-progress span { animation: none; } }

.bld-composer { padding: .6rem .9rem .8rem; border-top: 1px solid var(--line); }
.bld-composer textarea {
  width: 100%; resize: none; min-height: 76px; border: 1px solid var(--line-strong); border-radius: 14px;
  background: var(--surface); color: var(--ink); padding: .7rem .8rem; font: inherit; font-size: .95rem;
}
.bld-composer-row { display: flex; align-items: center; gap: .6rem; margin-top: .45rem; }
.bld-attach { position: relative; display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; color: var(--ink-soft); cursor: pointer; padding: .25rem .4rem; border-radius: 8px; }
.bld-attach:hover { background: var(--hover-bg); }
.bld-attach input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; min-height: 0; }
.bld-usage { margin-left: auto; font-size: .78rem; color: var(--ink-faint); }
.bld-send { width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 10px; }
.bld-fineprint { margin: .4rem 0 0; font-size: .74rem; color: var(--ink-faint); }
.bld-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .45rem; }
.bld-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; padding: .2rem .55rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }

.bld-stage { min-width: 0; min-height: 0; overflow: auto; padding: 1rem; background: var(--surface-2); display: flex; flex-direction: column; }
.bld-browser { flex: 1; display: flex; flex-direction: column; min-height: 420px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.bld-browser.phone { width: 390px; max-width: 100%; margin: 0 auto; }
.bld-bar { display: flex; align-items: center; gap: .45rem; padding: .4rem .7rem; border-bottom: 1px solid var(--line); background: var(--side-bg); font-size: .8rem; color: var(--ink-faint); }
.bld-bar .spacer { flex: 1; }
.bld-bar button.link { min-height: 28px; padding: 0 .3rem; color: var(--ink-faint); }
.bld-bar a { color: var(--ink-faint); display: inline-flex; }
.bld-url { font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bld-frame { flex: 1; width: 100%; border: 0; background: #fff; }
.bld-frame-empty { flex: 1; display: grid; place-content: center; gap: .6rem; text-align: center; color: var(--ink-faint); }
.bld-versions { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.2rem; }
.bld-versions table { width: 100%; }

.bld-tabs { display: none; }

@media (max-width: 900px) {
  .bld-top { flex-wrap: wrap; }
  .bld-top-mid { order: 3; width: 100%; justify-content: center; }
  .bld-site { max-width: 40vw; }
  .bld-state, .bld-share { display: none; }
  .bld-body { grid-template-columns: 1fr; }
  .bld[data-tab="chat"] .bld-stage { display: none; }
  .bld[data-tab="stage"] .bld-chat { display: none; }
  .bld-chat { border-right: 0; }
  .bld-stage { padding: .5rem; }
  .bld-tabs {
    display: grid; grid-template-columns: 1fr 1fr; flex-shrink: 0; border-top: 1px solid var(--line); background: var(--side-bg);
  }
  .bld-tabs button { border: 0; border-radius: 0; background: none; min-height: 48px; color: var(--ink-faint); box-shadow: none; }
  .bld-tabs button.on { color: var(--ink); font-weight: 700; box-shadow: inset 0 3px 0 var(--primary); }
}

/* ===== SETTINGS PAGE (v4 step 5) ===== */
.settings .set-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .9rem 0; border-top: 1px solid var(--line); cursor: pointer; }
.settings .set-row:first-of-type { border-top: 0; }
.settings .set-row > div:first-child { min-width: 0; flex: 1; }
.settings label.set-row { font-weight: 400; margin: 0; }
.settings .theme-row { flex-wrap: wrap; row-gap: .75rem; cursor: default; }
.settings .theme-row > div:first-child { flex: 1 1 16rem; }
.settings .set-row p { margin: .2rem 0 0; }
.settings .actions { margin-top: 1rem; }
/* The selected theme follows the page's own theme attribute, so it is always right. */
html[data-theme="light"] .theme-choice button[data-v="light"],
html[data-theme="dark"] .theme-choice button[data-v="dark"],
html:not([data-theme="light"]):not([data-theme="dark"]) .theme-choice button[data-v="auto"] { background: var(--surface); border-color: var(--line); color: var(--ink); }
/* On/off switch built from a checkbox. */
input.switch { appearance: none; -webkit-appearance: none; flex: none; width: 42px; height: 24px; min-height: 0; min-width: 0; max-width: 42px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; transition: background .15s; margin: 0; border: 0; }
input.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform .15s; }
input.switch:checked { background: var(--primary); }
input.switch:checked::after { transform: translateX(18px); }
input.switch:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
@media (max-width: 640px) {
    .settings .set-row { flex-wrap: wrap; }
}

/* ===== WEBSITE CARDS with a live preview (v4 step 5) ===== */
.site-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; padding: 1rem; }
.site-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; min-width: 0; }
.site-thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--line); }
/* The site renders at 1280 x 800 and is shrunk to the card (the scale is set by a script in App.razor). Clicks go to the link. */
.site-thumb iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 800px; border: 0; background: #fff; pointer-events: none;
    transform: scale(var(--thumb-scale, .25)); transform-origin: 0 0; }
.site-thumb:hover { border-bottom-color: var(--primary); }
.site-thumb-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: var(--ink-faint); font-size: .85rem; }
.site-card-body { display: flex; flex-direction: column; gap: .5rem; padding: .85rem 1rem 1rem; flex: 1; }
.site-card-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; }
.site-card-title .site-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; font-size: .85rem; min-width: 0; }
.site-card-meta a { overflow-wrap: anywhere; }
.site-card-actions { display: flex; gap: .5rem; margin-top: auto; padding-top: .35rem; }
.site-card-actions .btn { flex: 1; }
@media (max-width: 640px) { .site-cards { grid-template-columns: 1fr; padding: .75rem; } }

/* ===== WEBSITE OVERVIEW PANEL (v4 step 5) ===== */
.site-hero { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 1.25rem; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; margin-bottom: 1.25rem; }
.site-hero .site-thumb { border: 1px solid var(--line); border-radius: 10px; }
.site-hero-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45rem 1rem; margin: 0 0 1rem; }
.site-hero-facts dt { color: var(--ink-faint); font-weight: 500; }
.site-hero-facts dd { margin: 0; overflow-wrap: anywhere; }
.site-hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
@media (max-width: 760px) {
    .site-hero { grid-template-columns: 1fr; }
    .site-hero-facts { grid-template-columns: 1fr; gap: .1rem; }
    .site-hero-facts dd { margin-bottom: .5rem; }
}

/* Phones: the top bar must fit in 375px (every page scrolled sideways before, 2026-09-29). The status pill is dropped here
   (the website's Overview shows it); the rest tightens so the theme switch stays on screen. */
@media (max-width: 560px) {
  .app-topbar { padding: 0 .75rem; gap: .5rem; }
  .app-topbar .site-status { gap: .4rem; min-width: 0; }
  .app-topbar .site-pill { display: none; }
  .app-topbar .topbar-brand { font-size: .95rem; }
  .app-topbar .theme-toggle { width: 36px; height: 36px; min-height: 36px; flex: none; }
}
/* Wide tables on phones scroll inside themselves instead of widening the page. */
@media (max-width: 560px) { table.scroll-x { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } }

/* Enquiries page for client websites (D-3.46): email status, counts and the client's email settings. */
.mail-status { max-width: 760px; border-radius: var(--r); padding: .8rem 1rem; margin: .8rem 0 1rem; border: 1px solid transparent; }
.mail-status.good { background: var(--ok-bg); color: var(--ok); }
.mail-status.warn { background: var(--warn-bg); color: var(--warn); }
.mail-status.bad { background: var(--danger-bg); color: var(--danger); }
.mail-status .rowsub { display: block; margin-top: .25rem; color: inherit; opacity: .85; }
.mail-counts { max-width: 760px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mail-settings .seg { margin: .4rem 0 1rem; }
.mail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; max-width: 760px; }
.mail-grid label { display: block; }
.mail-grid label > span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
.mail-settings .mail-grid label > input, .mail-settings .mail-grid label > select { width: 100%; max-width: none; margin: 0; }
.mail-grid .wide { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .mail-grid { grid-template-columns: 1fr; }
  .mail-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Website health (D-3.47): a summary line and one row per check, grouped. */
.health-actions { margin: .8rem 0 1rem; }
.health-summary { max-width: 820px; border-radius: var(--r); padding: .8rem 1rem; margin: 0 0 1.2rem; }
.health-summary.good { background: var(--ok-bg); color: var(--ok); }
.health-summary.warn { background: var(--warn-bg); color: var(--warn); }
.health-summary.bad { background: var(--danger-bg); color: var(--danger); }
.health-group { max-width: 820px; margin-bottom: 1.4rem; }
.health-group h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.health-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.health-item { display: flex; gap: .8rem; align-items: flex-start; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.health-item:last-child { border-bottom: 0; }
.health-mark { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-weight: 700; font-size: .85rem; }
.health-item.good .health-mark { background: var(--ok-bg); color: var(--ok); }
.health-item.warn .health-mark { background: var(--warn-bg); color: var(--warn); }
.health-item.bad .health-mark { background: var(--danger-bg); color: var(--danger); }
.health-item.info .health-mark { background: var(--surface-2); color: var(--ink-soft); font-family: var(--font-serif); font-style: italic; }
.health-body { flex: 1; min-width: 0; }
.health-title { font-weight: 600; overflow-wrap: anywhere; }
.health-detail { color: var(--ink-soft); font-size: .9rem; overflow-wrap: anywhere; }
.health-item .btn { flex: none; white-space: nowrap; }
@media (max-width: 560px) {
  .health-item { flex-wrap: wrap; }
  .health-item .btn { margin-left: 2.4rem; }
}

/* Import an existing website (D-3.48). */
.import-panel { max-width: 640px; margin: 1.2rem 0; }
.import-panel h2 { margin-top: 0; font-size: 1.05rem; }
.import-drop { display: flex; flex-direction: column; gap: .4rem; padding: 1rem; border: 1.5px dashed var(--line-strong); border-radius: var(--r); background: var(--surface-2); }
.import-drop span { color: var(--ink-soft); font-size: .9rem; }

/* Planning a new website before its first build (D-3.50). */
.bld-plan .plan-questions { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .8rem; }
.plan-q { border: 1px solid var(--line); border-radius: var(--r-sm); padding: .7rem .8rem; background: var(--surface); }
.plan-topic { display: inline-block; font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-bottom: .2rem; }
.plan-text { font-weight: 600; margin-bottom: .45rem; }
.plan-options { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .45rem; }
.plan-chip { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); border-radius: 999px; padding: .25rem .7rem; font-size: .85rem; min-height: auto; }
.plan-chip:hover { background: var(--hover-bg); }
.plan-chip.on { background: var(--primary); border-color: transparent; color: var(--primary-ink); }
.plan-typed { width: 100%; font-size: .9rem; }
.bld-next { white-space: nowrap; padding-inline: .9rem; }
.bld-fineprint .link { font-size: inherit; padding: 0; }

/* ---- Client access (D-3.41) ---- */
.pill.off { background: var(--danger-bg); color: var(--danger); }
.client-invite { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.client-invite label { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 200px; min-width: 0; }
.client-invite label > span { font-weight: 600; font-size: .9rem; }
.client-invite input { width: 100%; margin: 0; }
.client-list td.actions { white-space: nowrap; text-align: right; }
.client-list td.actions > * { margin-left: .4rem; }
.client-sites { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); margin-top: 1rem; }
.client-site { background: var(--surface); border: 1px solid var(--line, var(--surface-2)); border-radius: var(--r); padding: 1.1rem 1.2rem; }
.client-site h2 { margin: 0 0 .4rem; font-size: 1.15rem; }
.client-site a { overflow-wrap: anywhere; }
.client-people { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.client-person { border: 1px solid var(--line); border-radius: var(--r); padding: .8rem 1rem; background: var(--surface); }
.client-person-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.client-person-who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.client-person-who .rowsub { overflow-wrap: anywhere; }
.client-person-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.client-rights { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.client-right { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; }
.client-right input { margin: 0; }
.client-right.off { color: var(--ink-soft); }
.client-can { margin: .2rem 0 0; padding-left: 1.1rem; }
.role-list dt { font-weight: 700; margin-top: .6rem; }
.role-list dd { margin: .15rem 0 0; color: var(--ink-soft); }
.role-toggle { display: flex; gap: .6rem; align-items: flex-start; }
.role-toggle > span { display: flex; flex-direction: column; }
.role-table td:not(:first-child), .role-table th:not(:first-child) { text-align: center; width: 9rem; }

/* The owner's logo (2026-09-29): the "rbo/build" wordmark and the square "r/" mark, drawn as shapes (Layout/BrandLogo.razor,
   BrandIcon.razor). The letters take the text colour; the slash is the clay accent (lighter in dark mode). */
.brand-logo { display: block; width: auto; height: 1.6rem; color: var(--ink); }
.brand-logo .brand-slash { fill: var(--accent); }
.side-brand .brand-logo { height: 25px; color: var(--side-ink-strong); }
.app-topbar .topbar-brand .brand-logo { height: 19px; }
.landing-brand .brand-logo { height: 32px; }
.auth-brand .brand-logo { height: 30px; }
.onboarding-brand .brand-logo { height: 26px; }
.brand-icon { display: block; width: 100%; height: 100%; }
.bld-mark:has(.brand-icon) { background: none; padding: 0; overflow: hidden; }
.bld-mark:has(.brand-icon):hover { background: none; opacity: .85; }
.client-task { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.client-task p { margin: 0 0 .6rem; }
.crumbs { font-size: .88rem; color: var(--ink-soft); margin: 0 0 .3rem; }
.req { color: var(--danger); }
.onboarding .ob-q { display: flex; flex-direction: column; gap: .25rem; margin-bottom: 1rem; max-width: 760px; }
.onboarding .ob-q > label { font-weight: 600; }
.onboarding .ob-q input, .onboarding .ob-q textarea { width: 100%; margin: 0; }
.ob-uploads { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.ob-upload { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.ob-upload > span { font-weight: 600; }
.ob-upload input[type=file] { max-width: 100%; }
.ob-files { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .4rem; }
.ob-files li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; }
.ob-file-name { font-weight: 600; overflow-wrap: anywhere; }
.ob-bar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem;
  padding: .8rem 0; margin-top: 1rem; background: var(--canvas); border-top: 1px solid var(--line); }
.ob-bar .rowsub { margin-right: auto; }
.details-row { display: flex; flex-wrap: wrap; gap: 0 1rem; max-width: 760px; }
.details-row .ob-q { flex: 1 1 160px; }
.details-row select { width: 100%; margin: 0; }
.details-hours { display: grid; gap: .5rem; max-width: 520px; }
.details-day { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-height: 44px; }
.details-open { display: inline-flex; align-items: center; gap: .45rem; min-width: 8.5rem; font-weight: 600; }
.details-day input[type=time] { width: auto; margin: 0; }
.details-logo { display: block; max-height: 90px; max-width: min(100%, 320px); margin-bottom: .6rem; background: var(--surface-2); padding: .5rem; border-radius: var(--r-sm); }
.details-logo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.enq-filter { display: flex; gap: .4rem; margin: .4rem 0 1rem; }
.enq-filter button.on { background: var(--primary); color: var(--primary-ink); border-color: transparent; }
.enq-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; max-width: 820px; }
.enq { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: .8rem 1rem; }
.enq.new { border-left: 4px solid var(--primary); }
.enq-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; }
.enq-status { margin-left: auto; }
.enq-status select { margin: 0; }
.enq-contact { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .4rem 0; overflow-wrap: anywhere; }
.enq-message { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.enq-pages { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; }
.client-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.count-badge { background: var(--primary); color: var(--primary-ink); border-radius: 999px; font-size: .75rem; padding: .05rem .5rem; }
.member-brand { display: inline-flex; align-items: center; min-width: 0; color: inherit; text-decoration: none; }
.member-logo { display: block; max-height: 40px; max-width: 180px; object-fit: contain; }
.side-brand .member-logo { max-height: 44px; }
.member-name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; overflow-wrap: anywhere; }
.app-topbar .topbar-brand.member-brand .member-logo { max-height: 30px; }
.brand-fields { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin: .8rem 0; max-width: 760px; }
.brand-field { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 240px; min-width: 0; }
.brand-field > span:first-child { font-weight: 600; font-size: .9rem; }
.brand-field input { margin: 0; width: 100%; }
.brand-colour { display: flex; gap: .5rem; align-items: center; }
.brand-colour input[type=color] { width: 44px; height: 44px; padding: 2px; flex: none; }
#client-branding h3 { margin-top: 1.2rem; }
.btn.primary .count-badge { background: var(--primary-ink); color: var(--primary); }
.pay-kinds { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 .6rem; }
.pay-kind { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: .45rem .8rem; min-height: 44px; cursor: pointer; }
.pay-kind.on { border-color: var(--primary); background: var(--primary-soft); font-weight: 600; }
.pay-kind input { margin: 0; }
.client-pay-facts { display: flex; flex-wrap: wrap; gap: .2rem .8rem; margin: .5rem 0 0; }
.client-pay-facts:empty { display: none; }
/* Sign-up: the line linking the terms and privacy policy (marketing site). */
.auth-legal { font-size: .82rem; color: var(--ink-faint); margin: .8rem 0 0; text-align: center; line-height: 1.5; }
.help-client ul { margin: .4rem 0 0; padding-left: 1.2rem; max-width: 760px; }
.help-client li { margin-bottom: .35rem; }
/* ---- Edit text (D-3.52) ---- */
.edit-bar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; padding: .7rem 0; margin-bottom: .8rem; background: var(--canvas); border-bottom: 1px solid var(--line); }
.edit-bar label { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.edit-bar label > span { font-weight: 600; font-size: .85rem; }
.edit-bar select { margin: 0; max-width: 100%; }
.edit-bar .rowsub { margin-right: auto; align-self: center; }
.text-blocks { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; max-width: 820px; }
.text-block { border: 1px solid var(--line); border-radius: var(--r); padding: .6rem .8rem; background: var(--surface); display: flex; flex-direction: column; gap: .3rem; }
.text-block.changed { border-color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
.text-block.locked { background: var(--surface-2); }
.text-block textarea { width: 100%; margin: 0; resize: vertical; }
.text-tag { font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.text-fixed { margin: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.text-block .link { align-self: flex-start; padding: 0; min-height: auto; }
/* ---- Photos and colours (D-3.52, chunk B) ---- */
.look-photos { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.look-photo { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.look-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); }
.look-photo-info { display: flex; flex-direction: column; gap: .3rem; padding: .6rem .7rem .7rem; min-width: 0; }
.look-photo-info strong { overflow-wrap: anywhere; }
.look-swap { align-self: flex-start; cursor: pointer; }
.look-swap.disabled { opacity: .5; pointer-events: none; }
.look-colours { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); margin: .6rem 0; }
.look-colour { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--line); border-radius: var(--r-sm); padding: .4rem .6rem; background: var(--surface); }
.look-colour.changed { border-color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
.section .look-colour > input[type=color] { width: 44px; max-width: 44px; height: 44px; padding: 2px; margin: 0; flex: none; }
.look-colour span { display: flex; flex-direction: column; min-width: 0; }
.look-colour code { font-size: .78rem; color: var(--ink-soft); }
/* ---- AI edits left (D-3.53) ---- */
.bld-usage.low { color: var(--warn); font-weight: 600; }
.bld-usage.out { color: var(--danger); font-weight: 600; }
.credits-note { background: var(--warn-bg); border-radius: var(--r-sm); padding: .6rem .8rem; display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; }
/* ---- AI costs report ---- */
tr.ai-cost-losing td { background: var(--danger-bg); }
tr.ai-cost-high td { background: var(--warn-bg); }
td .pill { margin-left: .4rem; }
.ai-weeks { display: flex; align-items: flex-end; gap: .4rem; height: 120px; max-width: 520px; margin: 1rem 0 .4rem; }
.ai-week { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .25rem; min-width: 0; }
.ai-week-bar { width: 100%; min-height: 2px; background: var(--primary); border-radius: 4px 4px 0 0; }
.ai-week-label { font-size: .7rem; color: var(--ink-soft); white-space: nowrap; }
/* ---- Sign in with Google, forgot password (step 9c) ---- */
.google-form { margin: 0 0 .2rem; }
.google-button { width: 100%; justify-content: center; gap: .6rem; background: #fff; color: #1f1f1f; border: 1px solid #747775; }
.google-button:hover { background: #f2f2f2; }
.auth-or { display: flex; align-items: center; gap: .8rem; margin: .9rem 0; color: var(--ink-soft); font-size: .85rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-forgot { margin: .6rem 0 0; font-size: .9rem; }
/* ---- Errors page (pre-launch hardening 2) ---- */
.error-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.error-list > li { border: 1px solid var(--line); border-radius: 10px; padding: .75rem .9rem; background: var(--surface, transparent); }
.error-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .85rem; }
.error-message { margin: .4rem 0 0; overflow-wrap: anywhere; }
.error-list pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .78rem; max-height: 18rem; overflow: auto; }
/* ---- Your data page and deletion notice (pre-launch hardening 3) ---- */
.notice { border-radius: 10px; padding: .75rem 1rem; margin: 0 0 1rem; border: 1px solid var(--line); }
.notice.warn { background: var(--warn-bg); border-color: var(--warn); color: var(--ink); }
.notice ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.notice p { margin: 0; }
.danger-zone { border-color: var(--danger); }
.danger-zone button.danger { border: 1px solid var(--danger); }
.deletion-notice a { font-weight: 600; margin-left: .4rem; }
/* Four-hat review (pre-launch hardening 5): button groups are easy to tap on a phone. */
@media (max-width: 720px), (pointer: coarse) {
  .seg > button { min-height: 40px; }
}
/* ---- Monthly / yearly plans (2026-09-30) ---- */
.plan-interval { margin: 0 0 1rem; }
.plan-save { font-size: .75rem; font-weight: 700; color: var(--ok); margin-left: .3rem; }
.plan-per-month { margin: -.3rem 0 .4rem; font-size: .85rem; color: var(--ink-soft); }
.renewal { max-width: 640px; margin: 0 0 1.5rem; }
.renewal-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.renewal-when { margin: 0; font-size: 1.05rem; }
.switch { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-weight: 600; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 44px; height: 26px; border-radius: 999px; background: var(--line); position: relative; transition: background .15s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.switch input:checked + .track { background: var(--ok); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 2px solid var(--primary); outline-offset: 2px; }
.switch input:disabled + .track { opacity: .5; }
/* ---- Super admins page (2026-10-01) ---- */
.plain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
/* ---- Team (2026-10-01) ---- */
.team-seats { margin: 0 0 1.25rem; }
.team-member { margin: 0 0 .9rem; padding: .9rem 1rem; }
.team-member-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; flex-wrap: wrap; }
.team-member-head .rowsub { display: block; }
.team-summary { margin: .5rem 0; }
.rights-editor { border: 0; padding: 0; margin: .8rem 0; min-width: 0; }
.rights-editor legend { font-weight: 700; margin: .8rem 0 .4rem; padding: 0; }
.rights-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .35rem 1rem; margin: .6rem 0; }
.rights-editor .check { display: flex; gap: .5rem; align-items: flex-start; font-weight: 500; margin: .2rem 0; }
.rights-editor .check .rowsub { display: block; }
/* ---- "Need something changed?" request button (2026-10-01) ---- */
.request-wrap { position: relative; }
.request-open { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.request-panel {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60; width: min(380px, calc(100vw - 2rem));
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.request-title { font-weight: 700; margin: 0 0 .3rem; }
.request-lead { margin: 0 0 .7rem; font-size: .9rem; }
.request-kind { display: flex; flex-wrap: wrap; margin: 0 0 .6rem; }
.request-panel textarea { width: 100%; box-sizing: border-box; }
.request-panel .actions { margin-top: .6rem; }
@media (max-width: 720px) {
  .request-label { display: none; }
  .request-panel { position: fixed; left: 1rem; right: 1rem; top: 4rem; width: auto; }
}

/* ---- Builder: start a new website (style library, KAN-41) ---- */
.bld-start { padding: .4rem .9rem .2rem; display: grid; gap: .9rem; }
.bld-start-step h2 { font-size: .95rem; margin: 0 0 .35rem; display: flex; align-items: center; gap: .45rem; }
.bld-step-num { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--primary-soft, var(--hover-bg)); font-size: .78rem; font-weight: 700; }
.style-filter { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem; margin: .4rem 0 .6rem; }
.style-filter label { display: grid; gap: .2rem; font-size: .8rem; color: var(--ink-soft); }
.style-filter select { min-width: 12rem; }
.style-grid { display: grid; gap: .6rem; }
.style-card { display: grid; grid-template-columns: 116px 1fr; gap: .6rem; border: 1px solid var(--line); border-radius: 10px; padding: .45rem; background: var(--surface); }
.style-card.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.style-card img, .style-chosen img { width: 116px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--line); background: var(--hover-bg); }
.style-body { display: grid; gap: .2rem; align-content: start; font-size: .86rem; }
.style-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.style-tags span { font-size: .7rem; padding: .05rem .45rem; border-radius: 999px; background: var(--hover-bg); color: var(--ink-soft); }
.style-links { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .8rem; margin-top: .15rem; }
.style-links .primary.sm, .style-filter .btn.sm { padding: .2rem .7rem; min-height: auto; font-size: .8rem; }
.style-more { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .5rem; font-size: .84rem; }
.style-chosen { display: grid; grid-template-columns: 116px 1fr; gap: .6rem; align-items: start; font-size: .86rem; }
.style-chosen > div { display: grid; gap: .2rem; }
.bld-start .guide { font-size: .86rem; }
.bld-start .guide summary { cursor: pointer; color: var(--ink-soft); }
.bld-start .guide ul { margin: .4rem 0; padding-left: 1.1rem; display: grid; gap: .2rem; }
.bld-start .bld-chip .link { margin-left: .2rem; padding: 0 .2rem; min-height: auto; }
@media (max-width: 520px) { .style-card, .style-chosen { grid-template-columns: 1fr; } .style-card img, .style-chosen img { width: 100%; } }
.style-links .link, .style-more .link { border: 0; background: none; padding: 0; min-height: auto; font-size: inherit; color: var(--primary); text-decoration: underline; cursor: pointer; }
.style-links .link:hover, .style-more .link:hover { background: none; color: var(--ink); }

/* ---- Admin: Templates (style library, KAN-41) ---- */
.tpl-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; }
.tpl-form label { display: grid; gap: .25rem; font-size: .88rem; }
.tpl-form label.wide, .tpl-form .wide { grid-column: 1 / -1; }
.tpl-form label.check { display: flex; align-items: center; gap: .5rem; align-self: end; }
.tpl-shot { grid-column: 1 / -1; max-width: 360px; border: 1px solid var(--line); border-radius: 8px; }
.tpl-thumb { width: 96px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--line); display: block; }
.tpl-filter { margin-bottom: .7rem; }
.tpl-table td.right { white-space: nowrap; }
.tpl-table td.right > * { margin-left: .35rem; }
@media (max-width: 720px) { .tpl-form { grid-template-columns: 1fr; } }