/*
 * Zoti Marketing Suite look for core's Django pages (docs/design-look.md).
 *
 * Loaded after BrightBean's Tailwind build (templates/base.html, block
 * zoti_head). Three layers:
 *   1. Suite tokens (--ss-*), mirroring studio/packages/ui/src/tokens.css.
 *   2. BrightBean's own custom properties and the Tailwind theme colours it
 *      uses, remapped onto the suite tokens, so every upstream page picks up
 *      the new palette, font and radii without template edits.
 *   3. The suite shell (sidebar, top bar, main panel), the sign-in pages, and
 *      restyles of BrightBean's shared components.
 * An agency's brand colour replaces --ss-accent (inline <style> from
 * zoti/theme/head.html). Light only for now: BrightBean's pages hard-code
 * white in too many places for a clean dark mode.
 */

/* 1. Suite tokens ---------------------------------------------------------- */
:root {
  --ss-bg: #f6f7fb;
  --ss-panel: #ffffff;
  --ss-sidebar: #fbfbfd;
  --ss-ink: #12142b;
  --ss-text: #262840;
  --ss-soft: #5e6180;
  --ss-faint: #767995;
  --ss-line: #e6e8f1;
  --ss-line-2: #eef0f5;
  --ss-hover: #f0f1f8;
  --ss-chip: #f1f2f8;
  --ss-accent: #6a45f5;
  --ss-accent-ink: #ffffff;
  --ss-accent-soft: #f0ecff;
  --ss-ok: #0f7a46;
  --ss-ok-soft: #ddf3e7;
  --ss-warn: #8a5300;
  --ss-warn-soft: #fff2d6;
  --ss-info: #135ea8;
  --ss-info-soft: #e3f0ff;
  --ss-err: #b42318;
  --ss-err-soft: #fde8e6;
  --ss-mark-1: #7f5bff;
  --ss-mark-2: #a057fa;
  --ss-mark-3: #c850c8;
  --ss-mark-4: #ef5378;
  --ss-mark-5: #f97316;
  --ss-radius-sm: 10px;
  --ss-radius: 12px;
  --ss-radius-lg: 20px;
  --ss-shadow: 0 1px 2px rgb(18 20 43 / 0.04);
  --ss-shadow-pop: 0 12px 32px -8px rgb(18 20 43 / 0.18), 0 2px 6px rgb(18 20 43 / 0.06);
  --ss-font: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ss-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ss-ring: color-mix(in srgb, var(--ss-accent) 22%, transparent);
  color-scheme: light;
}

/* 2. BrightBean + Tailwind remap ------------------------------------------ */
:root {
  /* BrightBean brand scale (was orange) -> accent */
  --brand-50: var(--ss-accent-soft);
  --brand-100: color-mix(in srgb, var(--ss-accent) 16%, #fff);
  --brand-200: color-mix(in srgb, var(--ss-accent) 28%, #fff);
  --brand-300: color-mix(in srgb, var(--ss-accent) 48%, #fff);
  --brand-400: color-mix(in srgb, var(--ss-accent) 74%, #fff);
  --brand-500: var(--ss-accent);
  --brand-600: color-mix(in srgb, var(--ss-accent) 88%, #000);
  --brand-700: color-mix(in srgb, var(--ss-accent) 76%, #000);
  --brand-800: color-mix(in srgb, var(--ss-accent) 62%, #000);
  --brand-900: color-mix(in srgb, var(--ss-accent) 48%, #000);
  --brand-green-100: var(--ss-ok-soft);
  --brand-green-200: color-mix(in srgb, var(--ss-ok) 28%, #fff);
  --brand-green-500: var(--ss-ok);
  --brand-green-600: var(--ss-ok);
  --brand-font-display: var(--ss-font);
  --brand-font-body: var(--ss-font);
  --brand-font-mono: var(--ss-mono);

  --primary: var(--ss-accent);
  --primary-hover: color-mix(in srgb, var(--ss-accent) 88%, #000);
  --primary-soft: var(--ss-accent-soft);
  --primary-muted: color-mix(in srgb, var(--ss-accent) 16%, #fff);
  --primary-ring: var(--ss-ring);

  /* Warm stone neutrals -> the suite's cool neutrals */
  --neutral-950: #0b0c1c;
  --neutral-900: var(--ss-ink);
  --neutral-800: var(--ss-text);
  --neutral-700: #3d4060;
  --neutral-600: var(--ss-soft);
  --neutral-500: var(--ss-faint);
  --neutral-400: #9a9db5;
  --neutral-300: #d3d6e3;
  --neutral-200: var(--ss-line);
  --neutral-100: var(--ss-hover);
  --neutral-50: #f8f9fc;

  --surface-0: var(--ss-panel);
  --surface-page: var(--ss-bg);
  --surface-1: #f8f9fc;
  --surface-2: var(--ss-chip);
  --surface-3: var(--ss-line);
  --border: var(--ss-line);
  --border-hover: #d3d6e3;
  --text-primary: var(--ss-ink);
  --text-secondary: var(--ss-soft);
  --text-tertiary: var(--ss-faint);
  --text-ghost: #9a9db5;
  --text-inverse: var(--ss-accent-ink);
  --color-illustration-accent: var(--ss-accent);

  --success-500: var(--ss-ok); --success-50: var(--ss-ok-soft); --success-700: var(--ss-ok);
  --warning-500: #c27c0e; --warning-50: var(--ss-warn-soft); --warning-700: var(--ss-warn);
  --error-500: var(--ss-err); --error-50: var(--ss-err-soft); --error-700: var(--ss-err);
  --info-500: var(--ss-info); --info-50: var(--ss-info-soft); --info-700: var(--ss-info);

  --shadow-xs: none;
  --shadow-sm: var(--ss-shadow);
  --shadow-md: var(--ss-shadow);
  --shadow-lg: var(--ss-shadow-pop);
  --shadow-xl: var(--ss-shadow-pop);
  --shadow-primary: none;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-2xl: 20px;

  --font-display: var(--ss-font);
  --font-body: var(--ss-font);
  --font-mono: var(--ss-mono);
  --font-sans: var(--ss-font);

  /* Tailwind theme colours used by BrightBean's templates */
  --color-black: var(--ss-ink);
  --color-stone-50: #f8f9fc;
  --color-stone-100: var(--ss-hover);
  --color-stone-200: var(--ss-line);
  --color-stone-300: #d3d6e3;
  --color-stone-400: #9a9db5;
  --color-stone-500: var(--ss-faint);
  --color-stone-600: var(--ss-soft);
  --color-stone-700: #3d4060;
  --color-stone-800: var(--ss-text);
  --color-stone-900: var(--ss-ink);
  --color-stone-950: #0b0c1c;
  --color-gray-50: #f8f9fc;
  --color-gray-100: var(--ss-hover);
  --color-gray-200: var(--ss-line);
  --color-gray-300: #d3d6e3;
  --color-gray-400: #9a9db5;
  --color-gray-500: var(--ss-faint);
  --color-gray-600: var(--ss-soft);
  --color-gray-700: #3d4060;
  --color-gray-800: var(--ss-text);
  --color-gray-900: var(--ss-ink);

  --color-orange-50: var(--ss-accent-soft);
  --color-orange-100: color-mix(in srgb, var(--ss-accent) 16%, #fff);
  --color-orange-200: color-mix(in srgb, var(--ss-accent) 28%, #fff);
  --color-orange-300: color-mix(in srgb, var(--ss-accent) 48%, #fff);
  --color-orange-400: color-mix(in srgb, var(--ss-accent) 74%, #fff);
  --color-orange-500: var(--ss-accent);
  --color-orange-600: color-mix(in srgb, var(--ss-accent) 88%, #000);
  --color-orange-700: color-mix(in srgb, var(--ss-accent) 76%, #000);
  --color-orange-800: color-mix(in srgb, var(--ss-accent) 62%, #000);
  --color-orange-900: color-mix(in srgb, var(--ss-accent) 48%, #000);

  --color-red-50: var(--ss-err-soft);
  --color-red-100: color-mix(in srgb, var(--ss-err) 14%, #fff);
  --color-red-200: color-mix(in srgb, var(--ss-err) 26%, #fff);
  --color-red-300: color-mix(in srgb, var(--ss-err) 45%, #fff);
  --color-red-400: color-mix(in srgb, var(--ss-err) 72%, #fff);
  --color-red-500: var(--ss-err);
  --color-red-600: var(--ss-err);
  --color-red-700: var(--ss-err);
  --color-red-800: color-mix(in srgb, var(--ss-err) 82%, #000);
  --color-red-900: color-mix(in srgb, var(--ss-err) 70%, #000);
  --color-rose-50: var(--ss-err-soft);
  --color-rose-500: var(--ss-err);
  --color-rose-600: var(--ss-err);

  --color-green-50: var(--ss-ok-soft);
  --color-green-100: color-mix(in srgb, var(--ss-ok) 14%, #fff);
  --color-green-200: color-mix(in srgb, var(--ss-ok) 26%, #fff);
  --color-green-400: color-mix(in srgb, var(--ss-ok) 72%, #fff);
  --color-green-500: var(--ss-ok);
  --color-green-600: var(--ss-ok);
  --color-green-700: var(--ss-ok);
  --color-green-800: color-mix(in srgb, var(--ss-ok) 82%, #000);
  --color-emerald-50: var(--ss-ok-soft);
  --color-emerald-500: var(--ss-ok);
  --color-emerald-600: var(--ss-ok);
  --color-emerald-700: var(--ss-ok);

  --color-amber-50: var(--ss-warn-soft);
  --color-amber-100: color-mix(in srgb, #c27c0e 16%, #fff);
  --color-amber-200: color-mix(in srgb, #c27c0e 30%, #fff);
  --color-amber-400: #e0a43a;
  --color-amber-500: #c27c0e;
  --color-amber-600: var(--ss-warn);
  --color-amber-700: var(--ss-warn);
  --color-amber-800: var(--ss-warn);
  --color-yellow-50: var(--ss-warn-soft);
  --color-yellow-100: color-mix(in srgb, #c27c0e 16%, #fff);
  --color-yellow-500: #c27c0e;
  --color-yellow-700: var(--ss-warn);

  --color-blue-50: var(--ss-info-soft);
  --color-blue-100: color-mix(in srgb, var(--ss-info) 14%, #fff);
  --color-blue-500: var(--ss-info);
  --color-blue-600: var(--ss-info);
  --color-blue-700: var(--ss-info);
  --color-blue-800: color-mix(in srgb, var(--ss-info) 82%, #000);
  --color-sky-50: var(--ss-info-soft);
  --color-sky-500: var(--ss-info);
  --color-sky-600: var(--ss-info);
}

/* 3a. Base ----------------------------------------------------------------- */
html, body {
  font-family: var(--ss-font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ss-ink);
  -webkit-font-smoothing: antialiased;
}
body { background: var(--ss-bg) !important; }
code, kbd, pre, samp, .font-mono { font-family: var(--ss-mono); }
input[type="checkbox"], input[type="radio"], progress { accent-color: var(--ss-accent); }
::selection { background: color-mix(in srgb, var(--ss-accent) 22%, #fff); }
.ss-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ss-icon { width: 20px; height: 20px; flex: none; }

/* Wordmark: lowercase "social" Geist 300 + "studio" Geist 600 */
.ss-wordmark { font-family: var(--ss-font); letter-spacing: -0.045em; line-height: 1; white-space: nowrap; color: var(--ss-ink); }
.ss-wordmark .ss-wm-light { font-weight: 300; }
.ss-wordmark .ss-wm-bold { font-weight: 600; }

/* 3b. Shell: sidebar ------------------------------------------------------- */
.ss-side {
  position: relative;
  z-index: 40;
  display: flex;
  flex-direction: column;
  flex: none;
  width: 248px;
  height: 100vh;
  height: 100dvh;
  background: var(--ss-sidebar);
  border-right: 1px solid var(--ss-line);
  font-family: var(--ss-font);
  transition: width 0.18s ease;
}
.ss-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 18px 16px 12px 18px; min-height: 66px; }
.ss-brand { display: flex; align-items: center; min-width: 0; color: var(--ss-ink); text-decoration: none; }
.ss-logo { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.ss-logo-mark { width: 26px; height: 26px; flex: none; }
.ss-logo .ss-wordmark { font-size: 21px; }
.ss-agency-logo { display: block; max-height: 34px; max-width: 176px; object-fit: contain; }
.ss-agency-name { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-logo-initial {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--ss-accent); color: var(--ss-accent-ink);
  font-size: 14px; font-weight: 600;
}
.ss-agency-logo + .ss-logo-initial { display: none; }
.ss-side-close { display: none; }

/* Client switcher */
.ss-switch { position: relative; margin: 2px 12px 10px; }
.ss-switch-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px;
  padding: 8px 10px; text-align: left; cursor: pointer;
  background: var(--ss-panel); border: 1px solid var(--ss-line); border-radius: var(--ss-radius);
  color: var(--ss-ink); font: inherit; transition: border-color 0.15s, background 0.15s;
}
.ss-switch-btn:hover { border-color: #d3d6e3; }
.ss-switch-btn:focus-visible { outline: none; border-color: var(--ss-accent); box-shadow: 0 0 0 3px var(--ss-ring); }
.ss-ws-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 10px; object-fit: cover;
  background: var(--ss-accent-soft); color: var(--ss-accent); font-size: 14px; font-weight: 600;
}
.ss-ws-avatar.is-sm { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }
.ss-ws-avatar.is-empty { background: var(--ss-chip); color: var(--ss-faint); }
.ss-ws-avatar.is-empty .ss-icon { width: 18px; height: 18px; }
.ss-switch-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.ss-switch-kicker { font-size: 11.5px; color: var(--ss-faint); }
.ss-switch-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-switch-chev { color: var(--ss-faint); display: flex; }
.ss-switch-chev .ss-icon { width: 16px; height: 16px; }

/* Popovers (switcher, user menu) */
.ss-pop {
  position: absolute; z-index: 60; padding: 6px;
  background: var(--ss-panel); border: 1px solid var(--ss-line); border-radius: 14px;
  box-shadow: var(--ss-shadow-pop); font-family: var(--ss-font);
}
.ss-switch-pop { top: calc(100% + 6px); left: 0; right: 0; min-width: 240px; }
.ss-pop-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px;
  padding: 7px 10px; border: 0; border-radius: var(--ss-radius-sm); background: none;
  color: var(--ss-text); font: 500 14px/1.3 var(--ss-font); text-align: left; text-decoration: none; cursor: pointer;
}
.ss-pop-item:hover, .ss-pop-item:focus-visible { background: var(--ss-hover); color: var(--ss-ink); outline: none; }
.ss-pop-item > .ss-icon { width: 18px; height: 18px; color: var(--ss-faint); }
.ss-pop-item.is-current { color: var(--ss-ink); }
.ss-pop-check { margin-left: auto; color: var(--ss-accent); display: flex; }
.ss-pop-check .ss-icon { width: 18px; height: 18px; }
.ss-pop-item .ss-nav-badge { margin-left: auto; }
.ss-pop-foot { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--ss-line-2); }
.ss-pop-head { display: flex; flex-direction: column; padding: 8px 10px 10px; line-height: 1.3; }
.ss-pop-title { font-size: 14px; font-weight: 500; color: var(--ss-ink); }
.ss-pop-sub { font-size: 12.5px; color: var(--ss-faint); }
.ss-pop-empty { margin: 0; padding: 10px; font-size: 14px; color: var(--ss-soft); }
.ss-switch-list { max-height: min(320px, 50vh); overflow-y: auto; }
.ss-switch-search {
  display: flex; align-items: center; gap: 8px; height: 40px; margin-bottom: 6px; padding: 0 10px;
  border: 1px solid var(--ss-line); border-radius: var(--ss-radius-sm); color: var(--ss-faint);
}
.ss-switch-search .ss-icon { width: 17px; height: 17px; }
.ss-switch-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  font: 14px var(--ss-font); color: var(--ss-ink); box-shadow: none !important;
}
.ss-switch-search:focus-within { border-color: var(--ss-accent); box-shadow: 0 0 0 3px var(--ss-ring); }

/* Nav */
.ss-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 12px 12px; }
.ss-nav-group + .ss-nav-group { margin-top: 14px; }
.ss-nav-section, .ss-nav .sidebar-section-label {
  padding: 6px 10px 4px; font-size: 12px; font-weight: 500; color: var(--ss-faint);
  text-transform: none; letter-spacing: 0;
}
.ss-nav-item, .ss-nav .sidebar-nav-item {
  display: flex; align-items: center; gap: 11px; min-height: 40px; margin: 1px 0; padding: 0 10px;
  border-radius: var(--ss-radius-sm); color: var(--ss-soft); text-decoration: none;
  font: 500 14px/1.2 var(--ss-font); transition: background 0.12s, color 0.12s;
}
.ss-nav-item:hover, .ss-nav .sidebar-nav-item:hover { background: var(--ss-hover); color: var(--ss-ink); }
.ss-nav-item.is-active, .ss-nav .sidebar-nav-item.active {
  background: var(--ss-accent-soft); color: var(--ss-accent); font-weight: 500;
}
.ss-nav-item:focus-visible, .ss-nav .sidebar-nav-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ss-ring); }
.ss-nav .sidebar-nav-item svg { width: 20px; height: 20px; stroke-width: 1.7; }
.ss-nav-item.is-soon { cursor: default; color: var(--ss-faint); }
.ss-nav-item.is-soon:hover { background: none; color: var(--ss-faint); }
.ss-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-nav-soon { font-size: 11px; font-weight: 500; padding: 2px 7px; border-radius: 999px; background: var(--ss-chip); color: var(--ss-faint); }
.ss-nav-badge, .ss-nav .sidebar-badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ss-chip); color: var(--ss-soft); font: 600 11.5px/1 var(--ss-font);
}
.ss-nav-badge.is-warn { background: var(--ss-warn-soft); color: var(--ss-warn); }

/* User block */
.ss-user { position: relative; display: flex; align-items: center; gap: 4px; padding: 10px 10px 12px 12px; border-top: 1px solid var(--ss-line-2); }
.ss-user-btn {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 6px; min-height: 48px;
  border: 0; border-radius: var(--ss-radius); background: none; text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.ss-user-btn:hover { background: var(--ss-hover); }
.ss-user-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ss-ring); }
.ss-avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 999px; background: var(--ss-accent-soft); color: var(--ss-accent);
  font: 600 13px/1 var(--ss-font);
}
.ss-avatar img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; }
.ss-avatar-dot { position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; border-radius: 999px; background: var(--ss-err); border: 2px solid var(--ss-sidebar); }
.ss-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ss-user-name { font-size: 14px; font-weight: 500; color: var(--ss-ink); }
.ss-user-org { font-size: 12.5px; color: var(--ss-faint); }
.ss-user-pop { left: 10px; right: 10px; bottom: calc(100% - 4px); min-width: 236px; }
.ss-collapse, .ss-icon-btn, .ss-side-close {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border: 0; border-radius: var(--ss-radius-sm); background: none;
  color: var(--ss-faint); cursor: pointer; text-decoration: none;
}
.ss-collapse:hover, .ss-icon-btn:hover, .ss-side-close:hover { background: var(--ss-hover); color: var(--ss-ink); }
.ss-collapse:focus-visible, .ss-icon-btn:focus-visible, .ss-side-close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ss-ring); }
.ss-collapse-out { display: none; }
.ss-side-head .ss-side-close { display: none; }
.ss-icon-btn .ss-avatar-dot { top: 8px; right: 8px; border-color: var(--ss-panel); }

/* Collapsed icon rail (desktop) */
@media (min-width: 900px) {
  html.sidebar-is-collapsed .ss-side { width: 66px; }
  html.sidebar-is-collapsed .ss-side-head { justify-content: center; padding: 18px 8px 12px; }
  html.sidebar-is-collapsed .ss-logo-text,
  html.sidebar-is-collapsed .ss-agency-logo,
  html.sidebar-is-collapsed .ss-switch-text,
  html.sidebar-is-collapsed .ss-switch-chev,
  html.sidebar-is-collapsed .ss-nav-label,
  html.sidebar-is-collapsed .ss-nav .sidebar-nav-label,
  html.sidebar-is-collapsed .ss-nav-section,
  html.sidebar-is-collapsed .ss-nav .sidebar-section-label,
  html.sidebar-is-collapsed .ss-nav-soon,
  html.sidebar-is-collapsed .ss-nav-badge,
  html.sidebar-is-collapsed .ss-nav .sidebar-badge,
  html.sidebar-is-collapsed .ss-user-text { display: none; }
  html.sidebar-is-collapsed .ss-agency-logo + .ss-logo-initial { display: inline-flex; }
  html.sidebar-is-collapsed .ss-switch { margin: 2px 10px 10px; }
  html.sidebar-is-collapsed .ss-switch-btn { justify-content: center; padding: 8px 0; min-height: 46px; }
  html.sidebar-is-collapsed .ss-switch-pop { right: auto; width: 260px; }
  html.sidebar-is-collapsed .ss-nav { padding: 2px 10px 12px; }
  html.sidebar-is-collapsed .ss-nav-group + .ss-nav-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ss-line-2); }
  html.sidebar-is-collapsed .ss-nav-item,
  html.sidebar-is-collapsed .ss-nav .sidebar-nav-item { justify-content: center; padding: 0; }
  html.sidebar-is-collapsed .ss-user { flex-direction: column; padding: 10px 8px 12px; }
  html.sidebar-is-collapsed .ss-user-btn { flex: none; justify-content: center; }
  html.sidebar-is-collapsed .ss-user-pop { left: 8px; right: auto; width: 240px; }
  html.sidebar-is-collapsed .ss-collapse-in { display: none; }
  html.sidebar-is-collapsed .ss-collapse-out { display: inline-flex; }
}

/* Mobile top bar + slide-over menu (under 900px) */
.ss-topbar { display: none; }
@media (max-width: 899.98px) {
  .ss-side {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 80;
    width: min(300px, 86vw); height: 100%;
    transform: translateX(-102%); transition: transform 0.2s ease;
    box-shadow: var(--ss-shadow-pop);
  }
  .ss-side.is-open { transform: translateX(0); }
  .ss-side-head .ss-side-close { display: inline-flex; }
  .ss-collapse { display: none; }
  .ss-nav-item, .ss-nav .sidebar-nav-item { min-height: 44px; }
  .ss-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none;
    height: 58px; padding: 0 8px; background: var(--ss-panel); border-bottom: 1px solid var(--ss-line);
  }
  .ss-topbar .ss-icon-btn { width: 44px; height: 44px; }
  .ss-topbar .ss-agency-logo { max-height: 30px; max-width: 160px; }
}

/* Main column: one white panel on the canvas */
.ss-side ~ div > main {
  margin: 12px 12px 12px 12px;
  padding: 28px 32px 32px;
  background: var(--ss-panel);
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-lg);
  box-shadow: none;
}
@media (max-width: 899.98px) {
  .ss-side ~ div > main { margin: 0; padding: 18px 16px 24px; border: 0; border-radius: 0; }
}

/* 3c. Page typography ----------------------------------------------------- */
/* Page titles: h1, or the h2.text-xl/2xl many BrightBean pages use as their title */
.ss-side ~ div > main :is(h1, h2.text-2xl, h2.text-xl) {
  font-family: var(--ss-font) !important;
  font-weight: 300 !important;
  font-size: clamp(26px, 2.6vw, 32px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  color: var(--ss-ink) !important;
}
.ss-side ~ div > main h2 { font-family: var(--ss-font); letter-spacing: -0.015em; }
.ss-side ~ div > main :is(h2, h3).font-bold { font-weight: 500; }
[style*="font-family: var(--font-display)"], [style*="font-family:var(--font-display)"] { font-family: var(--ss-font) !important; }
.ss-side ~ div > main > .mb-4 > [class*="rounded-md"] { border-radius: var(--ss-radius); font-size: 14px; }

/* 3d. BrightBean components ------------------------------------------------ */
/* Buttons */
.btn-brand, .btn-outline, .btn-social {
  min-height: 44px; border-radius: var(--ss-radius); font-family: var(--ss-font); font-weight: 600; font-size: 14.5px;
  box-shadow: none; transform: none !important;
}
.btn-brand { background: var(--ss-accent); color: var(--ss-accent-ink); }
.btn-brand:hover { background: var(--ss-accent); filter: brightness(0.94); box-shadow: none; }
.btn-brand:focus-visible, .btn-outline:focus-visible, .btn-social:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ss-ring); }
.btn-outline, .btn-social { background: var(--ss-panel); color: var(--ss-ink); border: 1px solid var(--ss-line); }
.btn-outline:hover, .btn-social:hover { background: var(--ss-hover); border-color: #d3d6e3; box-shadow: none; }
.btn-link { color: var(--ss-accent); border-radius: var(--ss-radius-sm); }
.btn-link:hover { background: var(--ss-accent-soft); }
.btn-primary-hover:hover, .btn-primary-lift:hover { filter: brightness(0.94); transform: none; box-shadow: none; }
.card-hover-lift:hover { transform: none; box-shadow: none; border-color: #d3d6e3; }
/* Solid accent buttons written with inline styles or Tailwind's orange */
.ss-side ~ div > main :is(button, a)[style*="background: var(--primary)"],
.ss-side ~ div > main :is(button, a)[style*="background:var(--primary)"],
.ss-side ~ div > main :is(button, a).bg-orange-500 {
  color: var(--ss-accent-ink) !important; border-radius: var(--ss-radius);
}
/* rounded-full action buttons become suite buttons (radius 12); chips and avatars stay round */
.ss-side ~ div > main :is(button, a)[class*="rounded-full"][class*="px-4"],
.ss-side ~ div > main :is(button, a)[class*="rounded-full"][class*="px-5"],
.ss-side ~ div > main :is(button, a)[class*="rounded-full"][class*="px-6"] { border-radius: var(--ss-radius); }

/* Inputs */
.form-input-styled, .form-datetime, .bb-select {
  min-height: 44px; border: 1px solid var(--ss-line); border-radius: var(--ss-radius);
  font-family: var(--ss-font); font-size: 15px; color: var(--ss-ink); background-color: var(--ss-panel);
}
.form-input-styled:hover, .form-datetime:hover, .bb-select:hover { border-color: #d3d6e3; }
.form-input-styled:focus, .form-datetime:focus, .bb-select:focus,
.input-focus:focus, .input-focus-surface:focus,
:is(input, select, textarea)[class*="border"]:focus {
  outline: none; border-color: var(--ss-accent) !important; box-shadow: 0 0 0 3px var(--ss-ring) !important;
}
.form-input-styled.is-error { border-color: var(--ss-err); }
:is(input, select, textarea) { font-family: inherit; }
.ss-side ~ div > main :is(input[type="text"], input[type="email"], input[type="url"], input[type="search"],
  input[type="password"], input[type="number"], input[type="tel"], input[type="date"], input[type="time"],
  input[type="datetime-local"], select, textarea)[class*="border"] { border-color: var(--ss-line); }
.ss-side ~ div > main :is(input, select, textarea)[class*="rounded-lg"][class*="border"],
.ss-side ~ div > main :is(input, select, textarea)[class*="rounded-md"][class*="border"] { border-radius: var(--ss-radius-sm); }
.bb-toggle input:checked + .bb-toggle-track { background: var(--ss-accent); }
.bb-checkbox { accent-color: var(--ss-accent); }

/* Cards and panels: 1px line, generous radius, no lift */
.ss-side ~ div > main [class*="rounded-xl"][class*="border"],
.ss-side ~ div > main [class*="rounded-2xl"][class*="border"] { border-color: var(--ss-line); }
.ss-side ~ div > main [class*="shadow-sm"], .ss-side ~ div > main [class*="shadow-xs"] { box-shadow: none; }

/* Tables: no zebra, 1px dividers, quiet headers */
.ss-side ~ div > main table { border-collapse: collapse; }
.ss-side ~ div > main th {
  font-size: 12.5px; font-weight: 500; color: var(--ss-soft); text-transform: none; letter-spacing: 0;
}
.ss-side ~ div > main tbody tr { border-color: var(--ss-line-2); }
.ss-side ~ div > main tbody tr:nth-child(even) { background: transparent; }
.ss-side ~ div > main td { vertical-align: middle; }

/* Uppercase micro-labels -> sentence case, as in the suite */
.ss-side ~ div > main [class*="uppercase"][class*="tracking-"] { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; }

/* Alerts */
.alert-error, .alert-success, .alert-info { border-radius: var(--ss-radius); border: 0; font-size: 14px; }
.alert-error { background: var(--ss-err-soft); color: var(--ss-err); }
.alert-success { background: var(--ss-ok-soft); color: var(--ss-ok); }
.alert-info { background: var(--ss-info-soft); color: var(--ss-info); }

/* Modals and dropdowns */
.idea-modal { border-radius: var(--ss-radius-lg); box-shadow: var(--ss-shadow-pop); font-family: var(--ss-font); }
.idea-modal-overlay, .fixed.inset-0[class*="bg-black"] { background: rgb(18 20 43 / 0.32); }
.idea-pill-btn { border-color: var(--ss-line); }
.idea-pill-dropdown, .emoji-picker-popup { border-radius: 14px; border-color: var(--ss-line); box-shadow: var(--ss-shadow-pop); }
[class*="ring-stone-200"][class*="shadow-lg"] { box-shadow: var(--ss-shadow-pop); }

/* Flatpickr date picker */
.flatpickr-calendar { font-family: var(--ss-font); border-radius: 14px; box-shadow: var(--ss-shadow-pop); border: 1px solid var(--ss-line); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange {
  background: var(--ss-accent); border-color: var(--ss-accent); color: var(--ss-accent-ink);
}
.flatpickr-day.today:not(.selected) { border-color: var(--ss-accent); }

/* Toast for htmx errors */
[role="alert"] > .rounded-lg[style*="#FEF2F2"] { background: var(--ss-err-soft) !important; border-color: color-mix(in srgb, var(--ss-err) 25%, #fff) !important; color: var(--ss-err) !important; border-radius: var(--ss-radius); }

/* 3e. Sign-in family (zoti/theme/auth.html) --------------------------------- */
.ss-auth-body { margin: 0; background: var(--ss-panel) !important; color: var(--ss-ink); font: 15px/1.5 var(--ss-font); }
.ss-auth { display: grid; grid-template-columns: minmax(380px, 44%) 1fr; min-height: 100vh; min-height: 100dvh; }
.ss-auth-brand {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 44px 56px 48px; background: var(--ss-accent); color: var(--ss-accent-ink);
}
.ss-auth-logo { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; min-height: 56px; }
.ss-auth-tile {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 52px; height: 52px; border-radius: 14px; background: #fff;
}
.ss-auth-tile img { width: 30px; height: 30px; }
.ss-auth-tile.is-logo { width: auto; height: auto; min-height: 56px; padding: 10px 16px; }
.ss-auth-tile.is-logo img { width: auto; height: auto; max-height: 40px; max-width: 220px; object-fit: contain; }
.ss-auth-tile.is-initial { color: var(--ss-accent); font-size: 24px; font-weight: 600; }
.ss-auth-brand .ss-wordmark { color: inherit; font-size: 30px; }
.ss-auth-name { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.ss-auth-headline {
  position: relative; z-index: 1; margin: auto 0 14px; max-width: 13em;
  font-weight: 300; font-size: clamp(32px, 3.3vw, 46px); line-height: 1.08; letter-spacing: -0.035em;
}
.ss-auth-address { position: relative; z-index: 1; margin: 0; font: 13.5px/1.4 var(--ss-mono); opacity: 0.78; }
.ss-auth-art {
  position: absolute; top: -70px; right: -70px; display: grid; grid-template-columns: repeat(3, 110px); gap: 14px;
  opacity: 0.09; pointer-events: none;
}
.ss-auth-art span { width: 110px; height: 110px; border-radius: 28px; background: currentColor; }
.ss-auth-main { display: flex; align-items: center; justify-content: center; padding: 48px 28px; }
.ss-auth-box { width: 100%; max-width: 400px; }
.ss-auth-head h1 { margin: 0 0 8px; font-weight: 300; font-size: 34px; line-height: 1.1; letter-spacing: -0.035em; color: var(--ss-ink); }
.ss-auth-head p { margin: 0 0 28px; color: var(--ss-soft); font-size: 15px; }
.ss-auth-head strong { color: var(--ss-ink); font-weight: 500; }
.ss-auth-messages { display: grid; gap: 8px; margin-bottom: 18px; }
.ss-form { display: grid; gap: 16px; }
.ss-field label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 500; color: var(--ss-ink); }
.ss-input {
  display: block; width: 100%; height: 48px; padding: 0 14px; box-sizing: border-box;
  border: 1px solid var(--ss-line); border-radius: var(--ss-radius); background: var(--ss-panel);
  font: 15px var(--ss-font); color: var(--ss-ink); transition: border-color 0.15s, box-shadow 0.15s;
}
.ss-input::placeholder { color: #9a9db5; }
.ss-input:hover { border-color: #d3d6e3; }
.ss-input:focus { outline: none; border-color: var(--ss-accent); box-shadow: 0 0 0 3px var(--ss-ring); }
.ss-input[readonly] { background: var(--ss-chip); color: var(--ss-soft); }
.ss-input.is-error { border-color: var(--ss-err); }
.ss-field-err { margin: 6px 0 0; font-size: 13px; color: var(--ss-err); }
.ss-field-help { margin-top: 6px; font-size: 13px; color: var(--ss-faint); }
.ss-field-help ul { margin: 0; padding-left: 18px; }
.ss-form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -2px 0 4px; flex-wrap: wrap; }
.ss-check { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ss-soft); cursor: pointer; }
.ss-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ss-accent); }
.ss-check-card { display: flex; align-items: flex-start; padding: 14px; border: 1px solid var(--ss-line); border-radius: var(--ss-radius); color: var(--ss-text); line-height: 1.5; }
.ss-check-card input { margin-top: 1px; flex: none; }
.ss-check-card a { color: var(--ss-accent); font-weight: 500; }
.ss-link { color: var(--ss-accent); font-size: 14px; font-weight: 500; text-decoration: none; }
.ss-link:hover { text-decoration: underline; }
.ss-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
  min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--ss-radius);
  font: 600 14.5px/1 var(--ss-font); text-decoration: none; cursor: pointer; transition: filter 0.15s, background 0.15s;
}
.ss-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ss-ring); }
.ss-btn-primary { background: var(--ss-accent); color: var(--ss-accent-ink); }
.ss-btn-primary:hover { filter: brightness(0.94); }
.ss-btn-secondary { background: var(--ss-panel); border-color: var(--ss-line); color: var(--ss-ink); }
.ss-btn-secondary:hover { background: var(--ss-hover); }
.ss-btn-block { width: 100%; }
.ss-btn-lg { min-height: 48px; }
.ss-divider { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; color: var(--ss-faint); font-size: 13px; }
.ss-divider::before, .ss-divider::after { content: ""; flex: 1; height: 1px; background: var(--ss-line); }
.ss-auth-social { display: grid; gap: 10px; margin-bottom: 18px; }
.ss-alert { padding: 12px 14px; border-radius: var(--ss-radius); font-size: 14px; line-height: 1.45; margin-bottom: 4px; }
.ss-alert.is-err { background: var(--ss-err-soft); color: var(--ss-err); }
.ss-alert.is-ok { background: var(--ss-ok-soft); color: var(--ss-ok); }
.ss-alert.is-info { background: var(--ss-info-soft); color: var(--ss-info); }
.ss-auth-foot { margin: 24px 0 0; text-align: center; font-size: 14px; color: var(--ss-soft); }
.ss-auth-legal { margin: 16px 0 0; font-size: 13px; color: var(--ss-faint); text-align: center; }
.ss-auth-legal a { color: var(--ss-soft); }
.ss-form-actions { display: flex; gap: 10px; }
.ss-form-actions > * { flex: 1; }
.ss-stack { display: grid; gap: 10px; }
.ss-invite { margin: 0 0 20px; padding: 4px 16px; border: 1px solid var(--ss-line); border-radius: 16px; }
.ss-invite > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ss-line-2); }
.ss-invite > div:last-child { border-bottom: 0; }
.ss-invite dt { font-size: 13.5px; color: var(--ss-soft); }
.ss-invite dd { margin: 0; font-size: 14px; font-weight: 500; text-align: right; }
.ss-invite ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ss-invite li { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ss-pill { display: inline-flex; padding: 2px 9px; border-radius: 999px; background: var(--ss-chip); color: var(--ss-soft); font-size: 12px; font-weight: 500; text-transform: capitalize; }
.ss-cap { text-transform: capitalize; }

@media (max-width: 899.98px) {
  .ss-auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .ss-auth-brand { padding: 22px 20px 26px; }
  .ss-auth-logo { min-height: 44px; }
  .ss-auth-tile { width: 44px; height: 44px; border-radius: 12px; }
  .ss-auth-tile img { width: 26px; height: 26px; }
  .ss-auth-tile.is-logo { min-height: 44px; padding: 8px 12px; }
  .ss-auth-tile.is-logo img { max-height: 30px; max-width: 180px; }
  .ss-auth-brand .ss-wordmark { font-size: 24px; }
  .ss-auth-headline { margin: 22px 0 8px; font-size: 24px; }
  .ss-auth-address { font-size: 12.5px; }
  .ss-auth-art { top: -40px; right: -50px; grid-template-columns: repeat(3, 64px); gap: 8px; }
  .ss-auth-art span { width: 64px; height: 64px; border-radius: 16px; }
  .ss-auth-main { align-items: flex-start; padding: 28px 20px 40px; }
  .ss-auth-head h1 { font-size: 30px; }
}