/* babyg - premium dark theme
   babyg — full frontend stylesheet
   single source of truth: matches the landing page visual system
   responsive: mobile-first, desktop scales up cleanly
*/

:root {
  --obsidian: #0A0A0A;
  --jet: #050505;
  --bone: #F5F1E8;
  --bone-warm: #EEE7D6;
  --smoke: #888888;
  --ash: #1c1c1c;

  --bg: var(--obsidian);
  --surface-1: #111111;
  --surface-2: #161616;
  --surface-3: #1c1c1c;
  --hairline: #1d1d1d;
  --hairline-strong: #2a2a2a;

  --ink: var(--bone);
  --ink-mid: #b8b3a8;
  --ink-dim: #7a766f;
  --ink-faint: #4a4742;

  --lime: #FF4D6D;
  --lime-dim: #E0395B;
  --lime-soft: rgba(255,77,109,0.12);

  --accent: #e85a4f;
  --accent-bg: rgba(232,90,79,0.10);

  --chrome-1: #d8dde6;
  --chrome-2: #8e9cb8;

  --sans: "Helvetica Neue", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --display-track: -0.045em;
  --display-weight: 500;

  --tabbar-h: 54px;
  --topbar-h: 64px;
  --sidebar-w: 240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  /* `clip` visually clips horizontal overflow without turning html/body
     into a scroll container. `hidden` here breaks iOS Safari's edge
     swipe-back gesture because the browser treats the page as a
     scroller and consumes the touch. `clip` keeps the layout tidy
     and lets the back-swipe fire cleanly. Fallback for old Safari
     (< 16) uses `hidden`. */
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}
body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: inherit; }
/* iOS Safari triggers an auto-zoom on any form control with a font-size
   below 16px and frequently does NOT zoom back out on blur, which the
   user perceives as the page "shifting" or "staying zoomed". Pin every
   control to 16px globally so individual component rules don't have to
   remember. */
input, textarea, select { font-size: 16px; }
button { cursor: pointer; }
::selection { background: var(--lime); color: #fff; }

/* ───── shared bits ───── */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

.mono {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--ink-dim);
}
.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: var(--ink-dim);
}
.eyebrow.alert { color: var(--lime); }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--sans);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  line-height: 0.95;
  color: var(--ink);
}


/* ───── buttons ───── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 9px 16px; font-size: 12.5px; }
.btn-lg { padding: 15px 28px; font-size: 14.5px; }
.btn-wide { width: 100%; justify-content: center; }

.btn-light { background: var(--bone); color: var(--obsidian); border-color: var(--bone); }
.btn-light:hover { background: #fff; }
.btn-lime { background: var(--lime); color: #fff; border-color: var(--lime); }
.btn-lime:hover { background: #ff6c84; }
.btn-danger {
  background: rgba(255,77,109,.1);
  color: var(--lime);
  border-color: rgba(255,77,109,.5);
}
.btn-danger:hover {
  background: var(--lime);
  color: #fff;
  border-color: var(--lime);
}
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--hairline-strong); }
.btn-ghost:hover { border-color: #444; background: rgba(255,255,255,0.03); }
.btn-dark { background: var(--obsidian); color: var(--bone); border-color: var(--hairline-strong); }
.btn-dark:hover { background: #1c1c1c; }

/* ───── badges & pills ───── */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--accent-bg);
  letter-spacing: 0.12em;
  text-transform: lowercase;
  line-height: 1;
  white-space: nowrap;
}
.badge-muted { color: var(--ink-mid); border-color: var(--hairline-strong); background: rgba(255,255,255,0.02); }
.badge-coral { color: var(--lime); border-color: var(--lime); background: var(--lime-soft); }
.badge-chrome { color: #a0c8ff; border-color: rgba(160,200,255,0.5); background: rgba(160,200,255,0.10); }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  background: transparent;
  color: var(--ink-mid);
  border: 1px solid var(--hairline-strong);
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.chip:hover { color: var(--ink); border-color: #444; }
.chip-active { background: var(--bone); color: var(--obsidian); border-color: var(--bone); }
/* brand voice: vocab chip labels read lowercase. display only — the
   input value (e.g. "Instagram", "TikTok") submitted to the server is
   unchanged. */
.chip span { text-transform: lowercase; }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--ink-mid);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
}

.pulse-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 12px var(--lime);
  display: inline-block;
  animation: dotpulse 2.4s ease-in-out infinite;
}
@keyframes dotpulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 14px var(--lime); }
  50% { opacity: 0.4; transform: scale(0.85); box-shadow: 0 0 6px var(--lime); }
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--lime);
}

/* ───── brand mark ───── */
.brand-mark {
  --brand-accent: rgba(182, 211, 238, 0.42);
  --brand-accent-soft: rgba(182, 211, 238, 0.055);
  --brand-border: rgba(182, 211, 238, 0.14);
  --brand-glow: rgba(182, 211, 238, 0.10);
  width: 34px; height: 34px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 22%, var(--brand-accent-soft), transparent 46%),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,0) 42%),
    var(--obsidian);
  border: 1px solid var(--brand-border);
  flex: 0 0 34px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 0 8px var(--brand-glow);
}
.brand-mark img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 4px;
  filter:
    saturate(1.02)
    drop-shadow(0 0 2px var(--brand-accent));
}
.brand-mark.sm { width: 26px; height: 26px; flex-basis: 26px; border-radius: 6px; }
.brand-mark.lg { width: 48px; height: 48px; flex-basis: 48px; border-radius: 10px; }
.brand-mark.xl { width: 80px; height: 80px; flex-basis: 80px; border-radius: 18px; }

/* boxed-g symbol — clean CSS rendering of the brand symbol
   used in app chrome (sidebar, topbar, mobile header) for a sharper look */
.brand-g {
  --size: 32px;
  width: var(--size); height: var(--size);
  flex: 0 0 var(--size);
  border-radius: calc(var(--size) * 0.22);
  background: var(--obsidian);
  border: 1.25px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(var(--size) * 0.66);
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1;
  /* optical center: raise g to compensate for descender */
  padding-bottom: calc(var(--size) * 0.18);
  user-select: none;
}
.brand-g.sm { --size: 26px; }
.brand-g.lg { --size: 44px; }
.brand-g.xl { --size: 72px; }

.brand-lockup { display: inline-flex; align-items: center; gap: 10px; }
.brand-lockup .logo-text {
  font-weight: var(--display-weight);
  font-size: 20px;
  letter-spacing: var(--display-track);
  line-height: 1;
  color: var(--ink);
}

/* ───── app chrome ───── */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
/* In-app shells use --jet (#050505) instead of the default --obsidian
   (#0A0A0A) so anything visible below the bottom tabbar reads as
   *darker* than the tabbar's blurred surface, not lighter. Otherwise
   the body shows through as a brighter band right under the tabbar
   and reads as a stray gap during tab navigation. Marketing shell is
   exempt — it doesn't have a tabbar to anchor the relationship. */
.app-shell:not(.is-marketing),
.operator-shell { background: var(--jet); }
.is-marketing .app-topbar,
.is-marketing .app-sidebar,
.is-marketing .app-tabbar { display: none; }

/* desktop top bar */
.app-topbar {
  position: sticky; top: 0;
  z-index: 50;
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
  height: var(--topbar-h);
  display: none;
  align-items: center;
  padding: 0 26px;
  gap: 22px;
}
.app-topbar .crumb {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--ink-dim);
}
.app-topbar .topbar-search {
  flex: 1;
  max-width: 360px;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  border-radius: 999px;
  color: var(--ink-dim);
  font-size: 13px;
}
.app-topbar .topbar-search kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  padding: 3px 7px;
  background: var(--surface-3);
  border-radius: 6px;
  color: var(--ink-mid);
  margin-left: auto;
}
.app-topbar .right { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; }

/* mobile header — avatar only, right-aligned. The redundant CREATOR
   role pill was removed since the user already knows their own role
   and it was crowding the top-right corner on mobile. */
.mobile-header {
  position: sticky; top: 0;
  z-index: 50;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
  height: calc(54px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: env(safe-area-inset-top, 0px) 14px 8px;
}
.mobile-header .brand-lockup {
  min-width: 0;
}
.mobile-header .brand-lockup .logo-text {
  display: inline;
  font-size: 18px;
  letter-spacing: -0.04em;
}
.mobile-header .title {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--display-track);
}
.mobile-header .icon-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--ink-mid);
}
.mobile-header .icon-btn:hover { color: var(--ink); }
.mobile-header .mobile-profile-link {
  width: 36px;
  height: 36px;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  background: rgba(22,22,22,.78);
  color: var(--ink-mid);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.mobile-header .mobile-profile-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mobile-header .mobile-profile-link:hover,
.mobile-header .mobile-profile-link:focus-visible {
  color: var(--ink);
  border-color: rgba(255,77,109,.42);
  outline: none;
}
.creator-profile-link,
.mobile-header .mobile-profile-link {
  text-decoration: none;
}
.creator-profile-link {
  width: 38px;
  height: 38px;
  padding: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  background: rgba(22,22,22,.78);
  color: var(--ink-mid);
  font-size: 13px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.025);
}
.creator-profile-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.creator-profile-link:hover,
.creator-profile-link:focus-visible {
  color: var(--ink);
  border-color: rgba(255,77,109,.42);
  outline: none;
}

/* tabbar (mobile) */
.app-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: rgba(8,8,8,0.94);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  padding: 9px 14px max(env(safe-area-inset-bottom, 13px), 13px);
  min-height: var(--tabbar-h);
  height: auto;
  transition: transform .18s cubic-bezier(.2,.7,.2,1), opacity .18s ease;
  /* Bottom-of-screen "skirt" — covers any space below the tabbar with
     a solid dark continuation of the nav. iOS Safari (not standalone)
     shows its URL bar at the bottom of the layout viewport; when it
     collapses, a slim dark band remains. Without this skirt the
     translucent tabbar looks like it's floating above an unrelated
     gap. box-shadow paints without affecting layout, so this is safe
     to add to every page. */
  box-shadow: 0 200px 0 0 rgba(8,8,8,0.98);
}
.app-tabbar a {
  --nav-accent: rgba(245,241,232,.72);
  --nav-accent-soft: rgba(245,241,232,.14);
  --nav-glow: rgba(245,241,232,.22);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  color: var(--ink-dim);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-transform: lowercase;
  position: relative;
  padding-top: 4px;
}
.creator-tabbar {
  justify-content: center;
  gap: clamp(2px, 1.2vw, 10px);
  padding: 9px max(12px, env(safe-area-inset-right, 0px)) max(env(safe-area-inset-bottom, 13px), 13px) max(12px, env(safe-area-inset-left, 0px));
}
.creator-tabbar a {
  flex: 0 1 clamp(56px, 17vw, 68px);
  width: clamp(56px, 17vw, 68px);
  max-width: 68px;
}
.app-tabbar a[data-tab="feed"] { --nav-accent: #ff526c; --nav-accent-soft: rgba(255,82,108,.18); --nav-glow: rgba(255,82,108,.52); }
.app-tabbar a[data-tab="chat"] { --nav-accent: #9ccaff; --nav-accent-soft: rgba(156,202,255,.17); --nav-glow: rgba(156,202,255,.46); }
.app-tabbar a[data-tab="calendar"] { --nav-accent: #79aef4; --nav-accent-soft: rgba(121,174,244,.15); --nav-glow: rgba(121,174,244,.42); }
.app-tabbar a[data-tab="inbox"] { --nav-accent: #94d7ea; --nav-accent-soft: rgba(148,215,234,.15); --nav-glow: rgba(148,215,234,.38); }
.app-tabbar a[data-tab="network"] { --nav-accent: #b9a4ff; --nav-accent-soft: rgba(185,164,255,.15); --nav-glow: rgba(185,164,255,.4); }
.app-tabbar a[data-tab="stats"] { --nav-accent: #7edfc4; --nav-accent-soft: rgba(126,223,196,.15); --nav-glow: rgba(126,223,196,.4); }
.app-tabbar a[data-tab="profile"] { --nav-accent: #ead7b5; --nav-accent-soft: rgba(234,215,181,.14); --nav-glow: rgba(234,215,181,.34); }
.app-tabbar a[data-tab="settings"] { --nav-accent: #ff526c; --nav-accent-soft: rgba(255,82,108,.14); --nav-glow: rgba(255,82,108,.34); }
.app-tabbar a[data-tab="settings"] {
  letter-spacing: 0;
  white-space: nowrap;
}
.app-tabbar a::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 28px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, var(--nav-accent-soft), transparent 70%);
  opacity: .34;
  pointer-events: none;
  z-index: 0;
}
.app-tabbar a svg {
  width: 20px;
  height: 20px;
  position: relative;
  z-index: 1;
  opacity: 0.82;
  color: var(--nav-accent);
  filter: drop-shadow(0 0 7px var(--nav-glow));
}
.app-tabbar a.active { color: var(--ink); }
.app-tabbar a.active svg {
  opacity: 1;
  filter: drop-shadow(0 0 10px var(--nav-glow));
}
.app-tabbar a.active .nav-bg-icon {
  opacity: 1;
  filter:
    saturate(1.08)
    drop-shadow(0 0 4px var(--nav-glow))
    drop-shadow(0 0 8px var(--nav-accent-soft));
}
.app-tabbar a.active::before {
  content: ""; position: absolute; top: -1px; left: 50%;
  width: 18px; height: 2px; transform: translateX(-50%);
  background: var(--nav-accent); border-radius: 2px;
  box-shadow: 0 0 10px var(--nav-glow);
}
.app-tabbar a[data-tab="chat"] {
  margin-top: -23px;
  gap: 5px;
}
.app-tabbar a[data-tab="chat"]::before,
.app-tabbar a[data-tab="chat"]::after {
  display: none;
}
.tabbar-babyg-orb {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(36,34,38,.94), rgba(22,20,24,.96));
  box-shadow:
    0 12px 28px rgba(0,0,0,.36),
    inset 0 0 0 1px rgba(255,255,255,.035);
}
.app-tabbar a[data-tab="chat"] .nav-bg-icon {
  width: 28px;
  height: 28px;
}
.tabbar-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 22px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--lime);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(8,8,8,.94);
  z-index: 2;
}

/* sidebar (desktop) */
.app-sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  border-right: 1px solid var(--hairline);
  background: var(--jet);
  padding: 22px 12px;
  display: none;
  flex-direction: column;
  gap: 4px;
}
.app-sidebar .brand-lockup { padding: 6px 12px 18px; }
.app-sidebar > .brand-lockup .brand-mark {
  --brand-accent: rgba(182, 211, 238, 0.46);
  --brand-accent-soft: rgba(182, 211, 238, 0.065);
  --brand-border: rgba(182, 211, 238, 0.16);
  --brand-glow: rgba(182, 211, 238, 0.11);
}
.app-sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.app-sidebar nav a {
  --nav-accent: rgba(245,241,232,.72);
  --nav-accent-soft: rgba(245,241,232,.13);
  --nav-glow: rgba(245,241,232,.20);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--ink-mid);
  font-size: 14px;
  position: relative;
  overflow: hidden;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.app-sidebar nav a[data-tab="feed"] { --nav-accent: #ff526c; --nav-accent-soft: rgba(255,82,108,.17); --nav-glow: rgba(255,82,108,.52); }
.app-sidebar nav a[data-tab="chat"] { --nav-accent: #91b7dc; --nav-accent-soft: rgba(145,183,220,.06); --nav-glow: rgba(145,183,220,.16); }
.app-sidebar nav a[data-tab="calendar"] { --nav-accent: #79aef4; --nav-accent-soft: rgba(121,174,244,.15); --nav-glow: rgba(121,174,244,.42); }
.app-sidebar nav a[data-tab="inbox"] { --nav-accent: #94d7ea; --nav-accent-soft: rgba(148,215,234,.15); --nav-glow: rgba(148,215,234,.40); }
.app-sidebar nav a[data-tab="network"] { --nav-accent: #b9a4ff; --nav-accent-soft: rgba(185,164,255,.15); --nav-glow: rgba(185,164,255,.42); }
.app-sidebar nav a[data-tab="listings"] { --nav-accent: #d8b36d; --nav-accent-soft: rgba(216,179,109,.15); --nav-glow: rgba(216,179,109,.40); }
.app-sidebar nav a[data-tab="stats"] { --nav-accent: #7edfc4; --nav-accent-soft: rgba(126,223,196,.15); --nav-glow: rgba(126,223,196,.40); }
.app-sidebar nav a[data-tab="profile"] { --nav-accent: #ead7b5; --nav-accent-soft: rgba(234,215,181,.14); --nav-glow: rgba(234,215,181,.34); }
.app-sidebar nav a[data-tab="settings"] { --nav-accent: #ff526c; --nav-accent-soft: rgba(255,82,108,.14); --nav-glow: rgba(255,82,108,.34); }
.app-sidebar nav a::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, var(--nav-accent-soft), transparent 70%);
  opacity: .34;
  filter: blur(2px);
  pointer-events: none;
}
.app-sidebar nav a:hover {
  color: var(--ink);
  background:
    linear-gradient(90deg, var(--nav-accent-soft), transparent 54%),
    rgba(255,255,255,0.025);
}
.app-sidebar nav a.active {
  background:
    linear-gradient(90deg, var(--nav-accent-soft), transparent 64%),
    var(--surface-2);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.app-sidebar nav a svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--nav-accent);
  opacity: 0.72;
  transform-origin: center;
  position: relative;
  z-index: 1;
  stroke-width: 1.65;
  filter: drop-shadow(0 0 5px var(--nav-glow));
  animation: sidebarIconBreathe 4.8s ease-in-out infinite;
}
.app-sidebar nav a:hover svg,
.app-sidebar nav a.active svg {
  opacity: 1;
  color: var(--nav-accent);
  filter: drop-shadow(0 0 10px var(--nav-glow));
}
.app-sidebar nav a[data-tab="feed"] svg {
  animation: feedIconPulse 3.2s ease-in-out infinite;
}
.app-sidebar nav a.active:not([data-tab="feed"]):hover svg,
.app-sidebar nav a.active:not([data-tab="feed"]) svg {
  animation: sidebarIconActivePulse 4.2s ease-in-out infinite;
}
@keyframes feedIconPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 6px var(--nav-glow));
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 13px var(--nav-glow));
  }
}
@keyframes sidebarIconBreathe {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.72;
    filter: drop-shadow(0 0 4px var(--nav-glow));
  }
  50% {
    transform: translateY(-1px) scale(1.06);
    opacity: 0.98;
    filter: drop-shadow(0 0 10px var(--nav-glow));
  }
}
@keyframes sidebarIconActivePulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 7px var(--nav-glow));
  }
  50% {
    transform: translateY(-1px) scale(1.07);
    filter: drop-shadow(0 0 14px var(--nav-glow));
  }
}
.app-sidebar nav a .nav-bg-icon {
  width: 20px; height: 20px; flex: 0 0 20px;
  object-fit: contain;
  filter:
    saturate(1.03)
    drop-shadow(0 0 2px var(--nav-glow))
    drop-shadow(0 0 5px var(--nav-accent-soft));
  opacity: 0.95;
  transform-origin: center;
  position: relative;
  z-index: 1;
  animation: sidebarLogoBreathe 5.2s ease-in-out infinite;
}
.app-sidebar nav a:hover .nav-bg-icon,
.app-sidebar nav a.active .nav-bg-icon {
  opacity: 1;
  filter:
    saturate(1.08)
    drop-shadow(0 0 3px var(--nav-glow))
    drop-shadow(0 0 7px var(--nav-accent-soft));
}
@keyframes sidebarLogoBreathe {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: saturate(1.02) drop-shadow(0 0 2px var(--nav-glow));
  }
  50% {
    transform: translateY(-1px) scale(1.075);
    filter: saturate(1.06) drop-shadow(0 0 5px var(--nav-glow));
  }
}
.app-tabbar a .nav-bg-icon {
  width: 22px; height: 22px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter:
    saturate(1.04)
    drop-shadow(0 0 2px var(--nav-glow))
    drop-shadow(0 0 6px var(--nav-accent-soft));
  opacity: 0.95;
}
.app-sidebar nav a .count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--lime);
}
@media (prefers-reduced-motion: reduce) {
  .app-tabbar { transition: none; }
}

/* main column */
.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px);
}
.is-marketing .app-main { padding-bottom: 0; }

.app-bg-watermarks {
  position: fixed;
  top: var(--topbar-h);
  right: 0;
  bottom: 0;
  left: var(--sidebar-w);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.app-bg-mark {
  position: absolute;
  display: block;
  object-fit: contain;
  opacity: 0.052;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 0 40px rgba(255,77,109,0.14));
  will-change: transform;
}
.app-bg-mark.m1 {
  width: 500px;
  height: 500px;
  top: -155px;
  left: -165px;
  animation: appLogoDriftOne 28s ease-in-out -7s infinite;
}
.app-bg-mark.m2 {
  width: 560px;
  height: 560px;
  right: -230px;
  top: 2%;
  opacity: 0.046;
  animation: appLogoDriftTwo 34s ease-in-out -16s infinite;
}
.app-bg-mark.m3 {
  width: 520px;
  height: 520px;
  left: -240px;
  bottom: -240px;
  opacity: 0.042;
  animation: appLogoDriftThree 38s ease-in-out -11s infinite;
}
.app-bg-mark.m4 {
  width: 480px;
  height: 480px;
  right: -175px;
  bottom: -185px;
  opacity: 0.042;
  animation: appLogoDriftFour 31s ease-in-out -19s infinite;
}
.app-bg-mark.m5 {
  width: 360px;
  height: 360px;
  left: 38%;
  top: 18%;
  opacity: 0.026;
  animation: appLogoDriftFive 42s ease-in-out -23s infinite;
}
.app-bg-mark.m6 {
  width: 390px;
  height: 390px;
  right: 18%;
  bottom: 10%;
  opacity: 0.024;
  animation: appLogoDriftSix 46s ease-in-out -29s infinite;
}
.is-chat .app-bg-mark {
  opacity: 0.026;
}
.is-chat .app-bg-mark.m2,
.is-chat .app-bg-mark.m3,
.is-chat .app-bg-mark.m4,
.is-chat .app-bg-mark.m5,
.is-chat .app-bg-mark.m6 {
  opacity: 0.02;
}
@keyframes appLogoDriftOne {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg) scale(1); }
  35% { transform: translate3d(78px, 46px, 0) rotate(3deg) scale(1.04); }
  68% { transform: translate3d(34px, 92px, 0) rotate(-1deg) scale(1.02); }
}
@keyframes appLogoDriftTwo {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(2deg) scale(1); }
  32% { transform: translate3d(-92px, 42px, 0) rotate(-3deg) scale(1.035); }
  72% { transform: translate3d(-46px, 102px, 0) rotate(1deg) scale(1.02); }
}
@keyframes appLogoDriftThree {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(1deg) scale(1); }
  38% { transform: translate3d(86px, -76px, 0) rotate(-3deg) scale(1.04); }
  74% { transform: translate3d(24px, -118px, 0) rotate(2deg) scale(1.018); }
}
@keyframes appLogoDriftFour {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg) scale(1); }
  34% { transform: translate3d(-78px, -68px, 0) rotate(3deg) scale(1.035); }
  70% { transform: translate3d(-26px, -116px, 0) rotate(-2deg) scale(1.02); }
}
@keyframes appLogoDriftFive {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(2deg) scale(1); }
  40% { transform: translate3d(-56px, 86px, 0) rotate(-2deg) scale(1.03); }
  76% { transform: translate3d(34px, 48px, 0) rotate(2deg) scale(1.015); }
}
@keyframes appLogoDriftSix {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg) scale(1); }
  36% { transform: translate3d(68px, -72px, 0) rotate(2deg) scale(1.035); }
  78% { transform: translate3d(-28px, -38px, 0) rotate(-1deg) scale(1.02); }
}
.app-main > .mobile-header,
.app-main > #view {
  position: relative;
  z-index: 1;
}
@media (max-width: 999px) {
  .app-bg-watermarks {
    top: 0;
    left: 0;
  }
}
@media (max-width: 720px) {
  .app-bg-mark.m1 { width: 340px; height: 340px; top: -110px; left: -150px; }
  .app-bg-mark.m2 { width: 360px; height: 360px; right: -175px; top: 8%; opacity: 0.04; }
  .app-bg-mark.m3 { width: 360px; height: 360px; left: -190px; bottom: -180px; opacity: 0.036; }
  .app-bg-mark.m4 { width: 330px; height: 330px; right: -150px; bottom: -130px; opacity: 0.034; }
  .app-bg-mark.m5 { width: 260px; height: 260px; left: 34%; top: 28%; opacity: 0.022; }
  .app-bg-mark.m6 { width: 280px; height: 280px; right: -100px; bottom: 18%; opacity: 0.022; }
}

.app-body { display: flex; flex: 1; min-height: 100vh; }

/* page layout */
.page { padding: 20px 0 28px; }
.page-narrow .wrap-wide { max-width: 980px; }

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.page-header .title-block { min-width: 0; }
.page-header h1 {
  margin: 12px 0 8px;
  font-size: clamp(34px, 4.8vw, 56px);
  line-height: 1;
}
.page-header .sub { color: var(--ink-mid); font-size: 15px; max-width: 520px; margin: 0; }
.page-header .actions { display: flex; gap: 10px; flex-shrink: 0; align-items: center; flex-wrap: wrap; }

/* mobile: center-align the page-header & actions so screens feel balanced */
@media (max-width: 999px) {
  .page-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    margin-bottom: 18px;
  }
  .page-header .title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .page-header .sub { max-width: 320px; }
  .page-header .actions { justify-content: center; width: 100%; }
  /* .filter-row deliberately NOT centered on mobile — when the chip set
     overflows, justify-content: center starts the scroll mid-row, which
     hides earlier options. Pinning to flex-start keeps the natural read
     order. */
  .stat-row { justify-content: center; }
  .back-link { display: inline-flex; }

  /* adaptive side gutters — grow with screen width so Pro Max breathes */
  .wrap, .wrap-wide, .wrap-narrow {
    padding: 0 clamp(16px, 5.2vw, 28px);
  }

  /* cap content column width and center on wider iPhones */
  #view > .view {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  /* slightly smaller card radius on mobile — feels more native */
  .card { border-radius: 14px; padding: 18px; }

  /* tighter grid gap on mobile */
  .grid-2, .grid-3, .grid-4 { gap: 10px; }
}

/* wider-iPhone specific tweaks (Pro Max 430px+) */
@media (min-width: 400px) and (max-width: 999px) {
  .wrap, .wrap-wide, .wrap-narrow {
    padding: 0 clamp(20px, 5.5vw, 32px);
  }
}

/* surfaces */
.card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 22px;
}
.card-tight { padding: 16px; border-radius: 14px; }
.card-flush { padding: 0; overflow: hidden; }
.card:hover { border-color: var(--hairline-strong); }
.card-static:hover { border-color: var(--hairline); }

/* filter row */
.filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  /* Horizontal swipe scroll for pill rows that don't fit. Chips never
     compress (flex-shrink: 0 + white-space: nowrap on .chip) so the
     layout doesn't jitter when the active chip changes. */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  overflow-anchor: none;
  padding: 0 16px 4px;
  margin-left: -16px;
  margin-right: -16px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* firefox */
  -ms-overflow-style: none;       /* legacy edge */
  /* Soft right-edge fade so users see there's more content off-screen.
     Mask is transparent in the last 24px; non-supporting browsers just
     show a flat row, no visual breakage. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.filter-row::-webkit-scrollbar { display: none; } /* webkit */
.filter-row > .chip {
  flex: 0 0 auto;                 /* never shrink, always honor intrinsic width */
  scroll-snap-align: start;
}

/* stack & grid */
.stack > * + * { margin-top: 12px; }
.stack-lg > * + * { margin-top: 18px; }
.grid-2 { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

/* ───── responsive layout switch ───── */
@media (min-width: 1000px) {
  .app-topbar { display: flex; }
  .app-sidebar { display: flex; }
  .mobile-header { display: none; }
  .app-tabbar { display: none; }
  .app-main { padding-bottom: 0; }
  .page { padding: 32px 0 60px; }
  .wrap, .wrap-wide { padding: 0 36px; }
}

/* ───── auth/onboarding ───── */
/* Marketing/auth shell vertically centers the pane so the auth and
   "check your email" pages don't leave a giant black void below the card. */
.app-shell.is-marketing > .app-main {
  min-height: calc(100vh - env(safe-area-inset-top, 0px));
  min-height: calc(100dvh - env(safe-area-inset-top, 0px));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-pane {
  max-width: 460px;
  margin: 0 auto;
  padding: 48px 24px;
  text-align: center;
}
.auth-pane .brand-lockup { justify-content: center; margin-bottom: 28px; }
.auth-pane .eyebrow { display: block; margin-bottom: 14px; }
.auth-pane h1 { font-size: clamp(32px, 5vw, 48px); margin-bottom: 16px; line-height: 1.05; }
.auth-pane .sub { color: var(--ink-mid); margin-bottom: 28px; }
.auth-pane .auth-foot-meta {
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--ink-dim);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.field-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: var(--ink-dim);
}
.field input, .field textarea, .field select {
  padding: 14px 16px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  color: var(--ink);
  font-size: 15px;
  outline: none;
  transition: border-color .2s;
  font-family: inherit;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--lime); }
.field-hint { color: var(--ink-dim); font-size: 12.5px; margin-top: -2px; }

.role-grid { display: flex; flex-direction: column; gap: 12px; }
/* Primary interactive surface on the auth role-picker. Premium hover
   keeps motion restrained: -3px lift, surface elevation by one token,
   a monochrome triple-stack shadow for a soft halo. Layout-shift-free
   (transform + shadow only). Focus state mirrors hover so keyboard
   nav surfaces the same affordance. */
.role-card {
  display: block;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 24px;
  text-align: left;
  transition:
    background 240ms ease-in-out,
    border-color 240ms ease-in-out,
    transform 240ms ease-in-out,
    box-shadow 280ms ease-in-out;
  will-change: transform;
}
.role-card:hover,
.role-card:focus-visible {
  background: var(--surface-2);
  border-color: var(--hairline-strong);
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 18px 48px rgba(0, 0, 0, 0.30),
    0 0 24px rgba(255, 255, 255, 0.04);
}
.role-card:focus-visible {
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  .role-card { transition: none; }
  .role-card:hover,
  .role-card:focus-visible { transform: none; box-shadow: none; }
}
.role-card .role-tag { display: block; margin-bottom: 12px; }
.role-card h3 { font-size: 24px; margin: 0 0 8px; }
.role-card p { color: var(--ink-mid); font-size: 13.5px; margin: 0 0 16px; }
.role-card .cta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; color: var(--ink); }

/* onboarding */
.onb-bg-watermarks {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.onb-bg-mark {
  position: absolute;
  display: block;
  object-fit: contain;
  opacity: .045;
  filter: drop-shadow(0 0 36px rgba(255,77,109,.13));
  pointer-events: none;
  user-select: none;
}
.onb-bg-mark.m1 {
  width: 520px;
  height: 520px;
  top: -170px;
  left: -175px;
  animation: appLogoDriftOne 34s ease-in-out -9s infinite;
}
.onb-bg-mark.m2 {
  width: 560px;
  height: 560px;
  right: -230px;
  top: 12%;
  opacity: .038;
  animation: appLogoDriftTwo 40s ease-in-out -18s infinite;
}
.onb-bg-mark.m3 {
  width: 440px;
  height: 440px;
  left: 36%;
  bottom: -220px;
  opacity: .03;
  animation: appLogoDriftSix 44s ease-in-out -25s infinite;
}
.onb-shell {
  min-height: 100vh;
  min-height: 100dvh;
  width: min(100%, 760px);
  margin: 0 auto;
  padding: clamp(24px, 5vw, 54px) 16px max(env(safe-area-inset-bottom, 28px), 32px);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.onb-hero {
  max-width: 560px;
  margin: 0 auto 14px;
  text-align: center;
}
.onb-logo {
  width: 38px;
  height: 38px;
  margin: 0 auto 14px;
  display: block;
}
.onb-eyebrow,
.onb-section-kicker {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: lowercase;
  color: var(--lime);
}
.onb-eyebrow { margin-bottom: 14px; }
.onb-progress {
  width: min(100%, 620px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  list-style: none;
  margin: 0 auto 10px;
  padding: 0;
}
.onb-progress li {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(22,22,22,.42);
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .14em;
  text-transform: lowercase;
  color: var(--ink-dim);
  text-align: center;
}
.onb-progress li .n {
  display: none;
}
.onb-progress li[aria-current="step"] {
  background: rgba(255,77,109,.1);
  border-color: rgba(255,77,109,.5);
  color: var(--ink);
}
.onb-progress li[data-done] {
  color: var(--ink-mid);
  border-color: var(--hairline-strong);
}
.onb-card {
  width: min(100%, 620px);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 30px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,0) 34%),
    rgba(17,17,17,.82);
  box-shadow: 0 28px 90px rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
}
.onb-card .onb-section {
  border: 0;
  padding: 0;
  margin: 0;
}
.onb-card .onb-section h2 {
  max-width: 100%;
  margin: 10px 0 10px;
  font-size: clamp(30px, 7vw, 44px);
  line-height: 1;
  letter-spacing: var(--display-track);
  font-weight: var(--display-weight);
  text-align: center;
}
.onb-card .field {
  margin-bottom: 14px;
}
.onb-card .field:last-child {
  margin-bottom: 0;
}
.onb-card .field input,
.onb-card .field textarea,
.onb-card .field select {
  background: rgba(10,10,10,.38);
  border-color: var(--hairline-strong);
  min-height: 48px;
}
.onb-step-copy,
.onb-card .onb-section > p {
  max-width: 420px;
  margin: 0 auto 20px;
  color: var(--ink-mid);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}
.onb-note {
  margin: -2px 0 16px;
  color: var(--lime);
  font-size: 13px;
}
.onb-other-chip {
  position: relative;
  margin-top: 6px;
  background: var(--surface-2);
  border-color: var(--hairline);
}
.onb-other-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.onb-other-chip:has(input:checked) {
  border-color: var(--lime);
  color: var(--lime);
  background: rgba(255,77,109,.08);
}
.onb-other-field {
  max-width: 100%;
  margin-top: 10px;
}
.onb-other-field[hidden] {
  display: none;
}
.onb-integrations {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.onb-integration-row {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: rgba(10,10,10,.34);
}
.onb-integration-row p {
  margin: 3px 0 0;
  color: var(--ink-mid);
  font-size: 13px;
  line-height: 1.3;
}
.onb-integration-row strong,
.onb-muted {
  flex: 0 0 auto;
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  color: var(--ink-mid);
  font-size: 12px;
  line-height: 1;
}
.onb-integration-row.is-connected {
  border-color: rgba(255,77,109,.42);
  background: rgba(255,77,109,.06);
}
.onb-integration-row.is-connected strong {
  color: var(--lime);
  border-color: rgba(255,77,109,.46);
}
.onb-integration-row.is-muted {
  opacity: .72;
}
.onb-card .onb-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
.onb-card .onb-actions [hidden] {
  display: none !important;
}
.onb-card .onb-actions .btn {
  min-height: 50px;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.onb-card .onb-actions .btn-prev {
  flex: 0 0 auto;
  min-width: 82px;
  min-height: 42px;
}
.onb-card .onb-actions .btn-wide {
  flex: 1 1 auto;
  max-width: 420px;
}

@media (min-width: 720px) {
  .onb-integrations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .onb-shell {
    justify-content: flex-start;
    padding: 18px 12px max(env(safe-area-inset-bottom, 18px), 22px);
  }
  .onb-logo {
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
  }
  .onb-hero {
    margin-bottom: 12px;
  }
  .onb-card {
    padding: 18px;
    border-radius: 22px;
  }
  .onb-progress {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  .onb-progress li {
    min-height: 30px;
    padding: 7px 4px;
    font-size: 7.5px;
    letter-spacing: .1em;
  }
  .onb-card .onb-section h2 {
    font-size: clamp(30px, 9vw, 38px);
    text-wrap: balance;
  }
  .onb-card .field input,
  .onb-card .field textarea,
  .onb-card .field select {
    min-height: 46px;
  }
  .onb-integration-row {
    min-height: 66px;
    padding: 12px;
  }
  .onb-card .onb-actions {
    gap: 8px;
    margin-top: 20px;
  }
  .onb-card .onb-actions .btn-wide {
    width: 100%;
    max-width: none;
  }
  .onb-card .onb-actions .btn-prev:not([hidden]) + .btn-wide {
    width: auto;
  }
}
@media (max-width: 720px) {
  .onb-bg-mark.m1 { width: 330px; height: 330px; top: -110px; left: -150px; }
  .onb-bg-mark.m2 { width: 360px; height: 360px; right: -185px; top: 20%; }
  .onb-bg-mark.m3 { width: 300px; height: 300px; left: 8%; bottom: -170px; }
}
@media (prefers-reduced-motion: reduce) {
  .onb-bg-mark {
    animation: none !important;
  }
}

/* brand foundation */
.is-brand-shell .app-topbar {
  left: 0;
}
.is-brand-shell .brand-main {
  min-height: 100vh;
  min-height: 100dvh;
  /* Reserve room for both the topbar (above) and the brand tabbar
     (below) on every viewport. The brand shell has no sidebar to fall
     back to on desktop, so the tabbar stays visible at all widths —
     see the .is-brand-shell .app-tabbar override below. */
  padding: calc(var(--topbar-h) + 36px) 18px calc(var(--tabbar-h) + 32px);
}
/* Brand has no sidebar at any width, so unlike the creator shell we keep
   the bottom tabbar visible on desktop too. The default rule in app.css
   line ~984 hides the tabbar at >=985px to let the sidebar take over;
   this override re-enables it for brand. */
.is-brand-shell .app-tabbar { display: flex; }
@media (max-width: 700px) {
  .is-brand-shell .brand-main {
    padding-inline: 14px;
  }
}

/* ───── brand dashboard / pages ─────
   Reuses creator primitives wherever possible. Only patterns that don't
   exist on creator surfaces get their own class. The brand dashboard
   stat-row pattern is wide and tappable on phones — designed for 390px
   first then expanding gracefully on tablet+. */
.brand-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.brand-page-head h1 {
  margin: 6px 0 0;
  font-size: clamp(26px, 5.5vw, 32px);
  letter-spacing: var(--display-track);
  font-weight: var(--display-weight);
  line-height: 1.1;
}
.brand-page-head p {
  color: var(--ink-mid);
  font-size: 13.5px;
  margin: 6px 0 0;
}
.brand-stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 22px;
}
@media (min-width: 560px) {
  .brand-stat-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .brand-stat-grid { grid-template-columns: repeat(4, 1fr); }
}
.brand-stat-tile {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .2s ease, transform .2s ease;
}
.brand-stat-tile:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-1px);
}
.brand-stat-tile .l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
.brand-stat-tile .v {
  font-size: 22px;
  letter-spacing: var(--display-track);
  font-weight: var(--display-weight);
  color: var(--ink);
}
.brand-stat-tile .h {
  color: var(--ink-mid);
  font-size: 12.5px;
}
.brand-quick-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 24px;
}
@media (min-width: 560px) {
  .brand-quick-actions { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .brand-quick-actions { grid-template-columns: repeat(4, 1fr); }
}
.brand-quick-action {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 16px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .2s ease, transform .2s ease;
}
.brand-quick-action:hover {
  border-color: var(--lime);
  transform: translateY(-1px);
}
.brand-quick-action .h {
  font-size: 15px;
  font-weight: 500;
}
.brand-quick-action .s {
  color: var(--ink-mid);
  font-size: 12.5px;
}
/* Compact intentional empty state — DMs / saved / campaigns before
   the brand has anything yet. Honest, not hype. */
.brand-empty {
  text-align: center;
  padding: 56px 20px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.brand-empty h2 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: var(--display-track);
  margin: 0;
}
.brand-empty p { color: var(--ink-mid); font-size: 13.5px; margin: 0; max-width: 380px; }
.brand-empty .icon-circle {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--hairline-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mid);
  margin-bottom: 4px;
}

/* chip group for niches/formats */
.chip-group { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

/* creator profile: public preview first, controls second */
.profile-shell {
  --profile-gap: 20px;
  max-width: 920px;
  display: grid;
  gap: var(--profile-gap);
}
.profile-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
}
.profile-header-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.profile-header-copy p {
  margin: 0;
  color: var(--ink-mid);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.profile-header-link,
.profile-chip-edit,
.profile-manage-row,
.profile-manage-form button {
  min-height: 44px;
}
.profile-header-link,
.profile-chip-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 0 14px;
  background: transparent;
  color: var(--ink-mid);
  font-size: 12.5px;
  line-height: 1;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.profile-header-link:hover,
.profile-chip-edit:hover,
.profile-chip-trigger:focus-visible .profile-chip-edit {
  color: var(--ink);
  border-color: var(--bone);
  background: rgba(245,241,232,.04);
}
.profile-flash {
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  line-height: 1.45;
  text-transform: uppercase;
}
.profile-flash-ok {
  color: var(--lime);
  border-color: var(--lime);
  background: var(--lime-soft);
}
.profile-flash-error {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-bg);
}
.profile-fidelity-preview,
.profile-section {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  background: rgba(18,18,18,.72);
  box-shadow: 0 18px 56px rgba(0,0,0,.18);
}
.profile-fidelity-preview {
  padding: 20px;
}
.profile-preview-top {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.profile-preview-avatar {
  flex: 0 0 84px;
  overflow: hidden;
  padding: 0;
}
.profile-preview-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-preview-copy {
  min-width: 0;
}
.profile-preview-copy h2 {
  margin: 6px 0 0;
  font-size: 26px;
  line-height: 1;
  overflow-wrap: anywhere;
}
.profile-preview-copy p,
.profile-preview-bio,
.profile-preview-meta {
  color: var(--ink-mid);
}
.profile-preview-copy p {
  margin: 6px 0 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.profile-preview-bio {
  max-width: 68ch;
  margin: 18px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.profile-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 16px;
  font-size: 12.5px;
}
.profile-preview-tags {
  margin-top: 14px;
}
.profile-section {
  padding: 18px;
}
.profile-quick-section {
  background:
    linear-gradient(145deg, rgba(245,241,232,.035), transparent 45%),
    rgba(18,18,18,.74);
}
.profile-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  min-width: 0;
}
.profile-section-head h2 {
  margin-top: 5px;
  font-size: 20px;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.profile-photo-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.profile-header-photo-actions {
  margin: 12px 0 0;
}
.profile-photo-form {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
}
.profile-inline-form {
  display: inline;
  margin: 0;
}
.profile-page .btn-sm {
  min-height: 44px;
  align-items: center;
}
.profile-photo-picker {
  cursor: pointer;
  margin: 0;
}
.profile-photo-picker input {
  display: none;
}
.profile-photo-status {
  color: var(--ink-dim);
}
.profile-chip-stack {
  display: grid;
  gap: 0;
}
.profile-chip-section {
  min-width: 0;
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
}
.profile-chip-section:first-child { padding-top: 0; border-top: 0; }
.profile-chip-section:last-child { padding-bottom: 0; }
.profile-chip-trigger {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 0;
  margin: 0 0 12px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.profile-chip-trigger > span:first-child {
  min-width: 0;
}
.profile-chip-trigger:focus-visible {
  outline: 1px solid var(--bone);
  outline-offset: 6px;
  border-radius: 10px;
}
.profile-chip-label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-dim);
}
.profile-chip-hint,
.profile-chip-empty {
  display: block;
  margin: 0;
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.45;
}
.profile-chip-display {
  margin-top: 10px;
}
.profile-details-card {
  min-width: 0;
}
.profile-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.profile-detail-item {
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(10,10,10,.42);
}
.profile-detail-item .l {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: lowercase;
  color: var(--ink-dim);
}
.profile-detail-item strong {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.profile-bio-copy {
  color: var(--ink-mid);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
  white-space: pre-wrap;
}
.profile-chip-static {
  cursor: default;
  max-width: 100%;
  min-height: 32px;
  background: var(--bone);
  color: var(--obsidian);
  border-color: var(--bone);
  white-space: normal;
}
.profile-chip-static:hover {
  color: var(--obsidian);
  border-color: var(--bone);
}
.profile-chip-dialog {
  width: min(520px, calc(100vw - 28px));
  max-height: min(76vh, 680px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: 18px;
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(0,0,0,0.56);
}
.profile-chip-dialog::backdrop {
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(10px);
}
.profile-chip-sheet {
  padding: 22px;
}
.profile-chip-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.profile-chip-sheet h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: var(--display-track);
}
.profile-chip-sheet p {
  margin: 0 0 18px;
  color: var(--ink-mid);
  font-size: 14px;
}
/* Reusable utility — any circular close button gets the centering recipe.
   Apply `.close-x` to any circle/pill button; add `.close-x-glyph` when
   the label is a `×` text glyph so we nudge it 1px down to optical center
   (the multiplication-sign character sits above center in most fonts). */
.close-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  text-align: center;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.close-x.close-x-glyph {
  /* push the × glyph to true optical center without changing box size */
  padding-top: 1px;
}

.profile-chip-close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface-3);
  color: var(--ink-mid);
  cursor: pointer;
  line-height: 1;
  box-sizing: border-box;
}
.profile-chip-close::before,
.profile-chip-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
}
.profile-chip-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.profile-chip-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.profile-chip-close:hover { color: var(--ink); border-color: #444; }
.profile-chip-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.profile-chip-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface-1);
  color: var(--ink-mid);
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
  user-select: none;
}
.profile-chip-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.profile-chip-option span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  overflow-wrap: anywhere;
}
.profile-chip-option:hover {
  border-color: #444;
  color: var(--ink);
}
.profile-chip-option:has(input:checked) {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--obsidian);
}
.profile-chip-option:active { transform: scale(0.98); }
.profile-bio-textarea {
  width: 100%;
  min-height: 132px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: 16px;
  background: var(--surface-1);
  color: var(--ink);
  font: inherit;
  line-height: 1.45;
  resize: vertical;
  outline: none;
}
.profile-detail-input {
  width: 100%;
  min-height: 56px;
  margin: 0 0 18px;
  padding: 0 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: 16px;
  background: var(--surface-1);
  color: var(--ink);
  font: inherit;
  outline: none;
}
select.profile-detail-input {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 50px;
  background:
    var(--surface-1)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m7 9 5 5 5-5' stroke='%23F5F1E8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 16px center / 22px 22px;
}
.profile-bio-textarea:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 1px rgba(255,77,109,0.22);
}
.profile-detail-input:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 1px rgba(255,77,109,0.22);
}
.profile-chip-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.profile-chip-actions .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  padding-block: 0;
}
.profile-chip-lock { overflow: hidden; }
.profile-manage-list {
  display: grid;
  gap: 0;
}
.profile-manage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 13px 0;
  border-top: 1px solid var(--hairline);
  color: var(--ink-mid);
  font-size: 14px;
}
.profile-manage-row:first-child {
  border-top: 0;
  padding-top: 0;
}
.profile-manage-row:last-child {
  padding-bottom: 0;
}
.profile-manage-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.profile-manage-row strong,
.profile-manage-form button {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 500;
}
.profile-manage-form {
  margin: 0;
}
.profile-manage-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: transparent;
}
.profile-manage-form button:hover {
  border-color: var(--bone);
}

@media (max-width: 640px) {
  .profile-shell {
    --profile-gap: 16px;
  }
  .profile-header {
    align-items: flex-start;
  }
  .profile-header-link {
    min-width: 86px;
  }
  .profile-fidelity-preview,
  .profile-section {
    border-radius: 14px;
    padding: 16px;
  }
  .profile-preview-top {
    align-items: flex-start;
    gap: 14px;
  }
  .profile-preview-avatar {
    flex-basis: 72px;
    width: 72px;
    height: 72px;
  }
  .profile-preview-copy h2 {
    font-size: 22px;
  }
  .profile-photo-actions,
  .profile-photo-form {
    align-items: stretch;
  }
  .profile-header-photo-actions {
    margin-top: 14px;
  }
  .profile-detail-grid {
    grid-template-columns: 1fr;
  }
  .profile-detail-item {
    min-height: 78px;
  }
  .profile-chip-dialog {
    width: 100vw;
    max-width: none;
    max-height: min(82vh, 720px);
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: 24px 24px 0 0;
  }
  .profile-chip-sheet {
    padding: 22px 20px max(env(safe-area-inset-bottom), 22px);
  }
  .profile-chip-actions .btn {
    flex: 1 1 0;
    justify-content: center;
  }
  .profile-manage-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}

/* ───── app screens ───── */
/* intel cards */
.intel-card { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 18px; padding: 20px; }
.intel-card .head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 12px;
  flex-wrap: wrap;
}
.intel-card .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.intel-card h3 { font-size: 18px; margin: 0 0 8px; line-height: 1.2; }
.intel-card p { margin: 0 0 14px; color: var(--ink-mid); font-size: 13.5px; line-height: 1.55; }
.intel-card .source {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: lowercase;
  color: var(--ink); margin-bottom: 12px;
}
.intel-card .feedback {
  display: flex; gap: 6px;
  padding-top: 12px; border-top: 1px solid var(--hairline);
}
.feedback-btn {
  flex: 1; padding: 8px 4px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  color: var(--ink-mid);
  font-size: 11.5px;
  transition: background .15s, color .15s;
}
.feedback-btn:hover { color: var(--ink); }

/* avatars */
.avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: var(--display-track);
  color: var(--ink);
  border: 1px solid var(--hairline);
  flex-shrink: 0;
}
.avatar.lg { width: 64px; height: 64px; font-size: 22px; }
.avatar.xl { width: 84px; height: 84px; font-size: 28px; }
.av-g2 { background: linear-gradient(135deg, #4a5a6b, #1f2a35); }
.av-g3 { background: linear-gradient(135deg, #6b5a4a, #2f261f); }
/* When an uploaded photo is present, the <img> fills the circle and
   the gradient background sits underneath as a graceful fallback if
   the image fails to load. */
.avatar.avatar-photo { padding: 0; overflow: hidden; }
.avatar.avatar-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* network cards */
.creator-card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .2s, transform .2s;
}
.creator-card:hover { border-color: var(--hairline-strong); transform: translateY(-2px); }
/* Static variant used by the discover-preview on /creator/profile — no
   hover lift because it isn't a navigation, and no link styling. */
.creator-card-static { cursor: default; }
.creator-card-static:hover { border-color: var(--hairline); transform: none; }
.profile-preview { margin-bottom: 26px; }
.profile-preview-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.profile-preview-help { color: var(--ink-dim); font-size: 12.5px; }
.profile-preview-empty { color: var(--ink-dim); font-style: italic; }
.creator-card .top { display: flex; align-items: center; gap: 12px; }
.creator-card .name { font-weight: 500; font-size: 15px; letter-spacing: var(--display-track); }
.creator-card .handle { color: var(--ink-dim); font-size: 12.5px; margin-top: 2px; }
.creator-card .meta { display: flex; gap: 12px; color: var(--ink-mid); font-size: 12px; flex-wrap: wrap; }
.creator-card .tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* inbox */
.thread-row {
  display: flex; gap: 12px;
  padding: 14px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  transition: background .2s, border-color .2s;
}
.thread-row.unread { background: var(--surface-1); border-color: var(--hairline-strong); }
.thread-row:hover { border-color: var(--hairline-strong); }
.thread-row .body { flex: 1; min-width: 0; }
.thread-row .top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.thread-row .name { font-size: 14.5px; font-weight: 500; letter-spacing: var(--display-track); }
.thread-row.unread .name { color: var(--ink); }
.thread-row .when { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ink-dim); text-transform: lowercase; }
.thread-row.unread .when { color: var(--lime); }
.thread-row .preview {
  color: var(--ink-mid); font-size: 13px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.thread-row .unread-dot {
  align-self: center;
  background: var(--lime);
  color: #fff;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  height: 20px;
  min-width: 20px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 3px rgba(255,77,109,0.16);
  flex-shrink: 0;
}

/* chat bubbles */
.bubble {
  max-width: 84%;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.bubble.in {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.bubble.out {
  background: var(--surface-2);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.bubble.user-coral { background: var(--lime); color: #fff; border: none; }
.bubble b { font-weight: 500; color: var(--lime); }

/* babyg chat (full screen) */
.bot-screen { display: flex; flex-direction: column; flex: 1; height: 100%; min-height: 0; }

/* full-viewport chat — fills exactly the available space; only messages list scrolls */
.is-chat .app-main { padding-bottom: 0; }
.is-chat #view {
  /* 100dvh = dynamic viewport height; tracks the visible area as the iOS
     address bar shows/hides so we never overflow into the body background.
     --keyboard-inset is set by bot.js from window.visualViewport — it's
     visual viewport height is published by bot.js so keyboard and browser
     chrome transitions do not leave a blank band around the composer. */
  --chat-tabbar-clearance: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  height: calc(100dvh - var(--chat-tabbar-clearance));
  height: calc(var(--visual-viewport-height, 100dvh) - var(--chat-tabbar-clearance));
  display: flex; flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
}
.is-creator-app.is-chat #view {
  /* Creator chat uses the compact creator tabbar, not the older 86px
     product tabbar reservation. This keeps the composer docked close
     to the nav without overlapping the iPhone home indicator area. */
  --chat-tabbar-clearance: max(60px, calc(36px + env(safe-area-inset-bottom, 0px)));
}
@media (min-width: 1000px) {
  .is-chat #view { height: 100dvh; height: var(--visual-viewport-height, 100dvh); }
}
@media (max-width: 999px) {
  .is-chat.chat-keyboard-open #view {
    height: 100dvh;
    height: var(--visual-viewport-height, 100dvh);
  }
  .is-chat.chat-keyboard-open .app-tabbar {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }
  .is-chat.chat-keyboard-open .bot-composer {
    /* The keyboard already covers the home-indicator safe-area, so we
       collapse the bottom padding to a hairline — anything more reads
       as a gap between the input and the keyboard's accessory bar. */
    padding-top: 6px;
    padding-bottom: 2px;
  }
  /* When the keyboard is up, iOS will otherwise scroll the body itself
     to bring the focused composer into view — that scroll lifts the
     entire #view, pushing the bot-hero off the top of the screen.
     Locking the body to a fixed box prevents the auto-scroll; the
     visualViewport-driven --keyboard-inset above keeps the layout
     pinned to the actual visible area. */
  body.is-chat.chat-keyboard-open {
    position: fixed;
    inset: 0;
    overflow: hidden;
  }
}
.is-chat .bot-screen { flex: 1; min-height: 0; }
.is-chat .bot-messages { min-height: 0; }
/* Composer glitches to the middle of the screen on iOS Safari when
   the flex chain from #view -> .view -> .bot-screen doesn't fully
   stretch on first paint (the address-bar/dvh recompute race).
   `margin-top: auto` on the composer forces it to occupy all leftover
   space above itself regardless of whether the parent stretched, so
   the input always sits pinned above the tabbar. */
.is-chat .bot-composer { margin-top: auto; }
.is-chat #view > .view {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
/* DM thread: same full-height behavior as bot chat, separate body flag
   so the marketing/dashboard pages keep their normal scroll. */
.is-dm-thread .app-main { padding-bottom: 0; }
.is-dm-thread #view {
  height: calc(100dvh - var(--tabbar-h) - env(safe-area-inset-bottom, 0px));
  height: calc(var(--dm-visual-viewport-height, 100dvh) - var(--tabbar-h) - env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
}
@media (min-width: 1000px) {
  .is-dm-thread #view { height: 100dvh; height: var(--dm-visual-viewport-height, 100dvh); }
}
@media (max-width: 999px) {
  .is-dm-thread.dm-keyboard-open #view {
    height: 100dvh;
    height: var(--dm-visual-viewport-height, 100dvh);
  }
  body.is-dm-thread.dm-keyboard-open {
    position: fixed;
    inset: 0;
    width: 100%;
    overflow: hidden;
  }
}
.is-dm-thread #view > .view {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.dm-screen { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }
.dm-screen .dm-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
.dm-screen .dm-head .meta { min-width: 0; }
.dm-screen .dm-head .meta h2 {
  font-size: 17px; margin: 0; letter-spacing: var(--display-track);
}
.dm-screen .dm-head .meta .sub {
  font-size: 12px; color: var(--ink-dim); margin: 2px 0 0;
}
.dm-screen .dm-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px;
  -webkit-overflow-scrolling: touch;
}
.dm-screen .dm-empty {
  margin: auto;
  text-align: center;
  color: var(--ink-dim);
}
.dm-screen .dm-composer {
  flex-shrink: 0;
  padding: 12px 18px max(env(safe-area-inset-bottom, 18px), 18px);
  background: rgba(8,8,8,0.92);
  border-top: 1px solid var(--hairline);
  backdrop-filter: blur(20px);
}
.dm-screen .dm-composer .box {
  display: flex; gap: 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  align-items: center;
}
.dm-screen .dm-composer input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  background: var(--surface-2);
  border: 1px solid var(--hairline-strong);
  border-radius: 16px;
  outline: none;
  box-shadow: none;
  color: var(--ink);
  /* >= 16px — iOS Safari auto-zoom guard, same as .bot-composer textarea. */
  font-size: 16px;
  padding: 0 14px;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.dm-screen .dm-composer input::placeholder { color: var(--ink-dim); }
.dm-screen .dm-composer .send {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: #fff; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 44px; cursor: pointer;
}
/* Sticky hero — locks the babyg chat header to the top of the
   chat shell so the messages list scrolls beneath it. flex-shrink: 0
   prevents the hero from getting squeezed when the dynamic viewport
   shrinks during keyboard transitions. */
.bot-hero {
  padding: 16px 24px 14px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--obsidian);
}
/* Tighter padding when the keyboard is open so the hero gives the
   message list more room without disappearing entirely. */
.is-chat.chat-keyboard-open .bot-hero {
  padding-top: 12px;
  padding-bottom: 10px;
}
.is-chat.chat-keyboard-open .bot-hero h1,
.is-chat.chat-keyboard-open .bot-hero-title {
  font-size: 20px;
  letter-spacing: 0;
}
.is-chat.chat-keyboard-open .bot-hero .head,
.is-chat.chat-keyboard-open .bot-hero-head { margin-bottom: 0; }
.bot-hero .head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
/* Hero v2: mark + personal greeting stacked, with the live-dot as a
   pseudo-element on the mark so we don't need an inline-styled
   sibling span for it. */
.bot-hero-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.bot-hero-mark-live { position: relative; }
.bot-hero-mark-live::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--lime);
  border: 2px solid var(--obsidian);
  box-shadow: 0 0 6px var(--lime);
}
.bot-hero-title {
  font-size: 22px;
  margin: 0;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--ink);
  text-transform: lowercase;
  font-weight: 600;
}
/* Bot error banner — was carrying its style attribute inline. Pulled
   into a class so strict-CSP flavors (and future style-src tightening)
   don't strip the visuals. */
.bot-banner-error {
  margin: 0 24px 12px;
  padding: 12px 16px;
  background: rgba(255, 77, 109, 0.1);
  border: 1px solid var(--lime);
  border-radius: 12px;
  color: var(--lime);
  font-size: 13px;
}
.bot-hero-sub {
  margin: 0 0 0 auto;
  color: var(--ink-mid);
  font-size: 13px;
  text-align: right;
}
@media (max-width: 520px) {
  .bot-hero-sub {
    margin-left: 0;
    margin-top: 2px;
    text-align: left;
    flex-basis: 100%;
  }
  .bot-hero-head { flex-wrap: wrap; }
}
.is-creator-app.is-chat .creator-babyg-topbar .creator-screen-mark,
.bot-hero-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 11px;
  border: 1px solid rgba(182, 211, 238, 0.16);
  background:
    radial-gradient(circle at 30% 22%, rgba(182, 211, 238, 0.075), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,0) 44%),
    var(--obsidian);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 0 10px rgba(182, 211, 238, 0.12);
}
.is-creator-app.is-chat .creator-babyg-topbar .creator-screen-mark img,
.bot-hero-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
  filter: saturate(1.04) drop-shadow(0 0 3px rgba(182, 211, 238, 0.36));
}
.bot-hero .head .live-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--lime);
  border: 2px solid var(--obsidian);
  position: absolute; right: -2px; bottom: -2px;
  box-shadow: 0 0 6px var(--lime);
}
.bot-hero h1 { font-size: 28px; margin: 0; line-height: 1.05; letter-spacing: 0; }

.bot-messages {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: 0; padding: 12px 24px 24px;
  display: flex; flex-direction: column; gap: 16px;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 999px) {
  .bot-hero {
    padding-inline: 18px;
  }
  .bot-messages {
    padding: 10px 18px 14px;
  }
}
.bot-empty-state {
  margin: auto 0;
  text-align: center;
  list-style: none;
  color: var(--ink-dim);
  font-size: 13.5px;
}
.bot-empty-state p { margin: 0; }

/* Integrations grid — onboarding step 4 + profile/settings. Calm,
   restrained palette; coming-soon cards visually dim but still
   informative. No fake connect buttons. */
.integrations-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
}
@media (min-width: 720px) {
  .integrations-grid { grid-template-columns: repeat(2, 1fr); }
}
.integration-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--surface-1);
}
.integration-card-connected { border-color: var(--lime); }
.integration-card-soon { opacity: 0.78; }
.integration-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.integration-tag {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--ink-mid);
}
.integration-body {
  color: var(--ink-mid);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}
.integration-card .btn[disabled] {
  cursor: not-allowed;
  opacity: 0.65;
}
.integration-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.integration-card-actions form { margin: 0; }

.babyg-guide-form { margin: 0; }
.babyg-guide-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  color: var(--ink-mid);
  border: 1px solid rgba(255, 77, 109, 0.24);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.045);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 140ms ease;
}
.babyg-guide-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.08);
}
.babyg-guide-button:focus-visible {
  outline: 2px solid rgba(255, 77, 109, 0.58);
  outline-offset: 2px;
}
.babyg-guide-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}
@media (hover: hover) and (pointer: fine) {
  .babyg-guide-button:not(:disabled):hover {
    color: var(--ink);
    border-color: rgba(255, 77, 109, 0.4);
    background: rgba(255, 77, 109, 0.07);
    transform: translateY(-1px);
  }
}
.babyg-guide-button:not(:disabled):active { transform: scale(0.98); }

/* Live typing indicator. Created by bot.js when a fetch is in flight,
   removed when the response arrives or fails. Three dots blink in
   sequence. Tied to actual request lifecycle — never permanent. */
.bot-typing-dots { display: inline-flex; gap: 4px; align-items: center; }
.bot-typing-dots > span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink-dim);
  animation: bot-typing-blink 1.2s infinite ease-in-out;
}
.bot-typing-dots > span:nth-child(2) { animation-delay: 0.18s; }
.bot-typing-dots > span:nth-child(3) { animation-delay: 0.36s; }
@keyframes bot-typing-blink {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .bot-typing-dots > span { animation: none; opacity: 0.6; }
}
.bot-message { display: flex; flex-direction: column; gap: 6px; }
.bot-message.user { align-items: flex-end; }
.bot-message.assistant { align-items: flex-start; }
.bot-message .meta {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em;
  text-transform: lowercase; color: var(--ink-dim);
}
/* Bot bubbles: more generous padding + asymmetric radius so each turn
   reads as its own unit against the dark canvas. Assistant carries a
   soft outer shadow so long replies feel like a lifted card, not a
   text-on-page paragraph. */
.bot-message .bubble {
  /* Cap the bubble at a comfortable reading width on wide desktops so
     assistant paragraphs don't stretch to 1200px of run-on line. */
  max-width: min(86%, 780px);
  overflow-wrap: anywhere;
  font-size: 14.5px;
  line-height: 1.6;
}
.bot-message.user .bubble {
  padding: 14px 18px;
  border-radius: 20px 20px 6px 20px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  white-space: pre-wrap;
}
.bot-message.assistant .bubble {
  padding: 16px 20px;
  border-radius: 20px 20px 20px 6px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  /* Softer lift than before — the outer glow was reading as a heavy
     dark halo on mobile. Keep the inset highlight for definition; drop
     the outer shadow to a whisper. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025),
              0 2px 8px rgba(0, 0, 0, 0.08);
  /* Assistant text is server-rendered as <p>/<ul>/<strong> via the
     bot_markdown filter; pre-wrap would preserve the between-tag
     whitespace as visible gaps. */
  white-space: normal;
}

/* Bot-markdown internals inside the assistant bubble. */
.bot-message.assistant .bubble p { margin: 0; }
.bot-message.assistant .bubble p + p,
.bot-message.assistant .bubble p + ul,
.bot-message.assistant .bubble ul + p { margin-top: 10px; }
.bot-message.assistant .bubble ul {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bot-message.assistant .bubble li { padding-left: 4px; }
.bot-message.assistant .bubble strong { color: var(--ink); font-weight: 600; }

/* Nudge messages — proactive turns babyg initiates (new match, unconfirmed
   booking). Coral tinted bubble + a split "babyg · <CATEGORY>" tag: the
   "babyg ·" prefix reads muted like every other meta line, and the
   category itself is uppercase coral bold so the urgency (NEW MATCH,
   NEEDS YOU) lands as a status label the eye jumps to. */
.bot-message-nudge-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.bot-message-nudge-tag-lead {
  color: var(--ink-dim);
}
.bot-message-nudge-tag-label {
  color: var(--accent-text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.bot-message-nudge .bubble {
  border-color: rgba(255,77,109,.24);
  background: linear-gradient(145deg, rgba(255,77,109,.045), transparent 55%),
              var(--surface-1);
}

/* Inline chip row under any bot message. One primary (coral fill), the
   rest ghost, so every turn ends with a one-tap next move. Renders in
   two flavors: standalone (right under the bubble) or inline (inside an
   action card, replacing the old confirm/cancel button pair). */
.bot-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  max-width: 86%;
}
.bot-chip-row-inline { margin-top: 0; }
.bot-chip-form { margin: 0; display: inline-flex; }
.bot-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  color: var(--accent-text);
  border: 1px solid rgba(255,77,109,.28);
  border-radius: 999px;
  background: rgba(255,77,109,.05);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease,
              color 140ms ease, transform 120ms ease;
}
.bot-chip:hover {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}
.bot-chip:active { transform: scale(.97); }
.bot-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.bot-chip-primary {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}
.bot-chip-primary:hover {
  color: #fff;
  border-color: var(--accent-hover, #e8455f);
  background: var(--accent-hover, #e8455f);
}
.bot-chip-ghost {
  color: var(--ink-mid);
  border-color: var(--hairline-strong);
  background: transparent;
}
.bot-chip-ghost:hover {
  color: var(--ink);
  border-color: var(--ink-mid);
  background: var(--surface-2);
}

/* Typing indicator: sit inside a proper thinking-bubble so it reads as
   "babyg is composing", not floating dots. */
[data-bot-typing] .bubble {
  min-width: 60px;
  padding: 14px 20px;
  display: inline-flex;
  align-items: center;
}
[data-bot-typing] .bot-typing-dots > span {
  width: 6px; height: 6px; background: var(--ink-mid);
}

/* Tablet + narrow desktop: bubbles keep proportions but pad tightens
   slightly so long replies don't feel jammed against the composer. */
@media (max-width: 768px) {
  .bot-message .bubble { max-width: 92%; font-size: 14px; }
  .bot-message.user .bubble { padding: 12px 16px; }
  .bot-message.assistant .bubble { padding: 14px 18px; }
  .bot-message.assistant .bubble ul { padding-left: 18px; }
}
@media (max-width: 420px) {
  .bot-message .bubble { max-width: 94%; }
  .bot-message.assistant .bubble { padding: 13px 16px; }
}

.bot-prompts {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 4px 24px 8px;
}
.bot-prompts::-webkit-scrollbar { display: none; }
.bot-prompts button {
  white-space: nowrap;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-mid);
  font-size: 12.5px;
  transition: color .15s, border-color .15s;
}
.bot-prompts button:hover { color: var(--ink); border-color: var(--hairline-strong); }

.bot-composer {
  padding: 10px 16px 12px;
  background: rgba(8,8,8,0.92);
  border-top: 1px solid var(--hairline);
  backdrop-filter: blur(20px);
}
.bot-composer .box {
  display: flex; gap: 8px;
  /* Soft, defined field — a gentle surface fill and a translucent
     hairline, not the heavy dark outline. align-items:center keeps the
     resting single-line placeholder vertically centered; as the textarea
     grows the row stays balanced against the send button. */
  /* Soft glass pill: a faint surface fill over the blurred bar and a single
     hairline — no boxed look, no stacked ring. */
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 26px;
  /* The horizontal inset now lives on the textarea itself (below) so the
     placeholder/text is guaranteed to clear the pill edge; the box keeps a
     small symmetric pad plus min-height for vertical centering. */
  padding: 6px 6px 6px 10px;
  min-height: 52px;
  align-items: center;
  box-shadow: inset 0 1px rgba(255,255,255,0.04);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.bot-composer .box:focus-within {
  /* Gentle brighten only — a single refined pink hairline, no outer ring. */
  border-color: rgba(255,77,109,0.32);
  box-shadow: inset 0 1px rgba(255,255,255,0.05);
}
.bot-composer textarea {
  flex: 1;
  background: transparent; border: 0; outline: none;
  color: var(--ink);
  /* MUST stay >= 16px. iOS Safari (every version through 26.5)
     auto-zooms any form control with a font-size below 16, and bot.js
     refocuses the textarea after every send to keep the keyboard up —
     a sub-16 value re-triggers zoom on every message. Don't drop this. */
  font-size: 16px;
  line-height: 1.4;
  resize: none;
  /* Left inset carried here so placeholder + typed text always clear the
     pill edge/accent; small right pad keeps long text off the send button. */
  padding: 4px 4px 4px 20px;
  max-height: 100px;
  min-height: 22px;
  font-family: inherit;
  /* Silent auto-grow. bot.js resizes rows on input; past the 100px cap
     the caret still moves, but no scroll rail ever appears. */
  overflow: hidden;
}
.bot-composer textarea::placeholder { color: var(--ink-dim); }
.bot-composer .send {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--lime); color: #fff;
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(255,77,109,0.26), inset 0 0 0 1px rgba(255,255,255,0.08);
  transition: background .15s, transform .15s, box-shadow .15s;
  position: relative;
}
.bot-composer .send::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.22), transparent 55%);
  pointer-events: none;
}
.bot-composer .send svg { position: relative; z-index: 1; }
.bot-composer .send:disabled { background: var(--surface-3); color: var(--ink-dim); cursor: not-allowed; box-shadow: none; }
.bot-composer .send:not(:disabled):hover { background: #ff6c84; transform: scale(1.06); box-shadow: 0 6px 18px rgba(255,77,109,0.4), inset 0 0 0 1px rgba(255,255,255,0.12); }
.bot-composer .send:not(:disabled):active { transform: scale(0.96); }
.bot-composer .hint {
  margin-top: 8px; text-align: center;
  color: var(--ink-faint); font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: lowercase;
}

/* typing dots */
.typing { display: inline-flex; gap: 4px; align-items: center; }
.typing span {
  width: 6px; height: 6px;
  background: var(--ink-mid);
  border-radius: 50%;
  animation: typing 1.2s ease-in-out infinite;
}
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* event card */
.event-card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex; align-items: flex-start; gap: 14px;
}
.event-card .bar { width: 3px; min-height: 50px; border-radius: 4px; flex-shrink: 0; }
.event-card .body { flex: 1; min-width: 0; }
.event-card .head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.event-card h3 { font-size: 15px; margin: 0 0 6px; line-height: 1.25; }
.event-card .meta { display: flex; gap: 8px; color: var(--ink-mid); font-size: 12px; flex-wrap: wrap; }

/* listing card */
.listing-card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .2s, transform .2s;
}
.listing-card:hover { border-color: var(--hairline-strong); transform: translateY(-2px); }
.listing-card .head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.listing-card h3 { font-size: 16px; line-height: 1.25; margin: 0; }
.listing-card .comp { color: var(--ink); font-size: 13.5px; }
.listing-card .foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; border-top: 1px solid var(--hairline);
  color: var(--ink-dim); font-size: 12px;
}
.listing-card .foot .open { color: var(--ink); }

/* postings */
.posting-page {
  position: relative;
  min-height: calc(100vh - 96px);
  overflow: hidden;
  padding: 10px 0 80px;
}
.ambient-page {
  position: relative;
  min-height: calc(100vh - 96px);
  overflow: hidden;
  padding: 10px 0 80px;
}
.ambient-page .auth-bg-watermarks {
  opacity: .7;
}
.ambient-page .auth-bg-mark {
  filter: drop-shadow(0 0 34px rgba(255,77,109,0.1));
}
.ambient-shell {
  position: relative;
  z-index: 1;
}
.profile-shell {
  max-width: 1120px;
}
.calendar-page .page-header {
  margin-bottom: 34px;
}
.calendar-form-shell {
  width: min(100%, 720px);
  max-width: 720px;
  padding-top: 50px;
}
.calendar-form-shell .back-link {
  display: inline-flex;
  margin-bottom: 30px;
}
.calendar-form-shell .onb-header {
  text-align: center;
  margin-bottom: 38px;
}
.calendar-form-shell .onb-title {
  font-size: clamp(40px, 7vw, 58px);
  font-weight: 500;
  letter-spacing: var(--display-track);
}
.calendar-form-shell .onb-form {
  padding: 30px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 28px;
  background: rgba(22,22,22,.54);
  backdrop-filter: blur(12px);
}
.calendar-form-shell .onb-section {
  margin-bottom: 36px;
  padding-bottom: 34px;
}
.calendar-form-shell .field {
  margin-bottom: 18px;
}
.calendar-form-shell .field:last-child {
  margin-bottom: 0;
}
.calendar-form-shell textarea,
.calendar-form-shell input[type="text"],
.calendar-form-shell input[type="datetime-local"] {
  min-height: 56px;
  border-radius: 14px;
  background: rgba(12,12,12,.74);
}
.calendar-form-shell textarea {
  padding-top: 16px;
}
.posting-page .auth-bg-watermarks {
  opacity: .72;
}
.posting-page .auth-bg-mark {
  filter: drop-shadow(0 0 34px rgba(255,77,109,0.12));
}
.posting-shell,
.posting-form-shell {
  position: relative;
  z-index: 1;
}
.posting-index .page-header {
  margin-bottom: 72px;
}
.posting-index .page-header .sub {
  max-width: 560px;
}
.posting-empty {
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 92px 24px;
  text-align: center;
  color: var(--ink-dim);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 28px;
  background: rgba(22,22,22,.32);
  backdrop-filter: blur(12px);
}
.posting-empty p {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--ink-mid);
}

/* kv list */
.kv-list { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 16px; }
.kv-list .row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline);
}
.kv-list .row:last-child { border-bottom: 0; }
.kv-list .row .l {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; color: var(--ink-dim);
  text-transform: lowercase;
}
.kv-list .row .v { color: var(--ink); font-size: 13.5px; }

/* ───── performance page ───── */
.performance-shell {
  max-width: 1160px;
}
.performance-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px;
  margin-bottom: 22px;
}
.performance-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(48px, 6.8vw, 92px);
  line-height: 0.92;
  letter-spacing: var(--display-track);
}
.performance-hero .sub {
  margin: 0;
  max-width: 600px;
  color: var(--ink-mid);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.45;
}
.performance-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  background: rgba(22,22,22,.55);
  color: var(--ink-mid);
  backdrop-filter: blur(14px);
}
.performance-platform-tabs {
  width: min(100%, 520px);
  min-height: 42px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
}
.performance-platform-tabs a {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.performance-platform-tabs a:hover {
  color: var(--ink-mid);
  background: rgba(255,255,255,.035);
}
.performance-platform-tabs a.is-active {
  color: var(--ink);
  background: rgba(255,77,109,.16);
  box-shadow: inset 0 0 0 1px rgba(255,77,109,.28);
}
.performance-alert {
  margin-bottom: 18px;
  padding: 14px 16px;
  background: rgba(255,77,109,0.07);
  border: 1px solid rgba(255,77,109,0.28);
  border-radius: 18px;
  color: var(--ink-mid);
  font-size: 13px;
  line-height: 1.5;
}
.performance-alert .mono {
  display: block;
  margin-bottom: 4px;
  color: var(--lime);
  font-size: 10px;
}
.performance-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.performance-metric-card,
.performance-panel,
.performance-card,
.performance-spotlight,
.performance-empty {
  border: 1px solid rgba(255,255,255,.07);
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    rgba(17,17,17,.74);
  box-shadow: 0 18px 70px rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
}
.performance-metric-card {
  position: relative;
  overflow: hidden;
  min-height: 136px;
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .22s cubic-bezier(.23,1,.32,1), border-color .22s ease, background .22s ease;
}
.performance-metric-card::before,
.performance-card::before,
.performance-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.055) 38%, transparent 62%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-28%);
  transition: opacity .22s ease, transform .42s cubic-bezier(.23,1,.32,1);
}
.performance-metric-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,77,109,.22);
  background:
    linear-gradient(145deg, rgba(255,77,109,.045), rgba(255,255,255,.016)),
    rgba(20,20,20,.82);
}
.performance-metric-card:hover::before,
.performance-card:hover::before,
.performance-spotlight:hover::before {
  opacity: 1;
  transform: translateX(34%);
}
.performance-metric-card strong {
  display: block;
  margin-top: 12px;
  color: var(--ink);
  font-size: clamp(34px, 4.5vw, 58px);
  line-height: 0.9;
  font-weight: 500;
  letter-spacing: var(--display-track);
}
.performance-metric-card small {
  color: var(--ink-dim);
  font-size: 12px;
}
.performance-panel {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 20px;
  margin-bottom: 16px;
}
.performance-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.performance-panel-head small {
  color: var(--ink-dim);
  font-size: 12px;
}
.performance-bars {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.performance-bar-row {
  display: grid;
  grid-template-columns: minmax(140px, 32%) minmax(120px, 1fr) 54px;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}
.performance-bar-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-mid);
}
.performance-bar-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.performance-bar-fill {
  position: relative;
  overflow: hidden;
  display: block;
  height: 100%;
  width: var(--bar-width);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lime-dim), var(--lime), #ff7890);
  box-shadow: 0 0 18px rgba(255,77,109,.28), 0 0 42px rgba(255,77,109,.08);
  animation: performanceBarFill 1.05s cubic-bezier(.2,.9,.2,1) both;
}
.performance-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: translateX(-120%);
  animation: performanceBarShine 2.8s ease-in-out .45s infinite;
}
.performance-bar-value {
  justify-self: end;
  min-width: 42px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: var(--ink-mid);
  text-align: right;
  letter-spacing: 0.1em;
}
.performance-spotlight {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  margin-bottom: 16px;
  padding: 24px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 8% 0%, rgba(255,77,109,.13), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.015)),
    rgba(17,17,17,.78);
}
.performance-spotlight h2 {
  margin: 10px 0 8px;
  color: var(--ink);
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 0.98;
  letter-spacing: var(--display-track);
}
.performance-spotlight-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--lime);
  font-size: 10px;
  letter-spacing: .18em;
}
.performance-spotlight-label::before {
  content: "";
  width: 28px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--lime));
  opacity: .75;
}
.performance-spotlight p {
  margin: 0;
  color: var(--ink-mid);
  font-size: 14px;
}
.performance-next-move {
  max-width: 620px;
  margin-top: 18px !important;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: var(--ink-mid);
  line-height: 1.5;
}
.performance-next-move .mono {
  display: block;
  margin-bottom: 6px;
  color: var(--lime);
  font-size: 9px;
  letter-spacing: .18em;
}
.performance-spotlight-metrics {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.performance-spotlight-metrics span {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 88px;
  min-height: 58px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  color: var(--ink-dim);
  font-size: 11px;
  line-height: 1;
  text-align: center;
}
.performance-spotlight-metrics strong {
  color: var(--ink);
  font-size: 20px;
  font-weight: 500;
}
.performance-spotlight-metrics em {
  font-style: normal;
}
.performance-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.performance-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 20px;
  transition: transform .24s cubic-bezier(.23,1,.32,1), border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.performance-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,77,109,.32);
  background:
    radial-gradient(circle at 10% 0%, rgba(255,77,109,.08), transparent 28%),
    linear-gradient(145deg, rgba(255,77,109,.04), rgba(255,255,255,.018)),
    rgba(20,20,20,.86);
  box-shadow: 0 24px 80px rgba(0,0,0,.3);
}
.performance-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.performance-card-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.performance-rank {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    rgba(255,255,255,.025);
  color: var(--ink);
  line-height: 1;
  letter-spacing: .12em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.performance-rank span {
  color: var(--lime);
  font-size: 8px;
  letter-spacing: .18em;
}
.performance-card-title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.035em;
}
.performance-card-date {
  display: block;
  margin-top: 7px;
  color: var(--ink-dim);
  letter-spacing: .14em;
}
.performance-source {
  flex: 0 0 auto;
  padding: 4px 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: var(--ink-dim);
  font-size: 9px;
  letter-spacing: .12em;
}
.performance-mix {
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.performance-mix-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.performance-mix-values span,
.performance-mix p {
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    rgba(255,255,255,.018);
}
.performance-mix-values span {
  min-height: 66px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  line-height: 1;
}
.performance-mix-values strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.performance-mix-values em {
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 9px;
  font-style: normal;
  letter-spacing: .18em;
  text-transform: lowercase;
}
.performance-mix p {
  min-height: 66px;
  margin: 0;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  color: var(--ink-mid);
  font-size: 13px;
  line-height: 1.45;
}
.performance-stat-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.performance-stat {
  min-height: 54px;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012));
}
.performance-stat span {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: lowercase;
  color: var(--ink-dim);
}
.performance-stat strong {
  display: block;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  font-weight: 500;
}
.performance-view-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  margin-top: 14px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  color: var(--bone);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  transition: transform .18s cubic-bezier(.23,1,.32,1), background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.performance-view-link:hover,
.performance-view-link:focus-visible {
  transform: translateY(-1px);
  border-color: var(--lime);
  background: rgba(255,77,109,.16);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 34px rgba(255,77,109,.18);
}
.performance-view-link:active {
  transform: scale(.98);
}
.performance-view-arrow {
  display: inline-block;
  line-height: 1;
  transition: transform .18s cubic-bezier(.23,1,.32,1);
}
.performance-view-link:hover .performance-view-arrow,
.performance-view-link:focus-visible .performance-view-arrow {
  transform: translate(2px, -2px);
}
.performance-signal {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin: 14px 0 0 8px;
  padding: 0 10px;
  border: 1px solid rgba(255,77,109,.26);
  border-radius: 999px;
  background: rgba(255,77,109,.06);
  color: var(--lime);
  font-size: 9px;
  letter-spacing: .14em;
}
.performance-note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.5;
}
.performance-empty {
  margin: 20px auto 0;
  max-width: 520px;
  padding: 74px 24px;
  border-radius: 30px;
  text-align: center;
  color: var(--ink-dim);
}
.performance-empty p {
  margin: 12px 0 0;
  color: var(--ink-mid);
  font-size: 14px;
}
.performance-foot {
  margin: 32px 0 0;
  color: var(--ink-dim);
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.14em;
}
@keyframes performanceBarFill {
  from { width: 0; }
  to { width: var(--bar-width); }
}
@keyframes performanceBarShine {
  0%, 45% { transform: translateX(-120%); opacity: 0; }
  55% { opacity: .65; }
  100% { transform: translateX(120%); opacity: 0; }
}
@media (max-width: 999px) {
  .performance-hero {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .performance-hero .title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .performance-hero .sub {
    max-width: 340px;
  }
  .performance-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .performance-spotlight {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .performance-spotlight-metrics {
    justify-content: center;
  }
}
@media (max-width: 640px) {
  .performance-overview,
  .performance-stat-list {
    grid-template-columns: 1fr;
  }
  .performance-mix {
    grid-template-columns: 1fr;
  }
  .performance-metric-card {
    min-height: 116px;
  }
  .performance-bar-row {
    grid-template-columns: 1fr 46px;
    gap: 8px 10px;
  }
  .performance-bar-title {
    grid-column: 1 / -1;
  }
  .performance-card-head {
    align-items: flex-start;
  }
  .performance-card-identity {
    gap: 10px;
  }
  .performance-rank {
    min-width: 72px;
    height: 34px;
    padding: 0 10px;
  }
  .performance-rank span {
    display: none;
  }
  .performance-card-title {
    white-space: normal;
  }
  .performance-source {
    margin-top: 4px;
  }
  .performance-view-link {
    width: 100%;
  }
  .performance-signal {
    justify-content: center;
    width: 100%;
    margin-left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .performance-bar-fill,
  .performance-bar-fill::after {
    animation: none;
  }
  .performance-metric-card,
  .performance-metric-card:hover,
  .performance-metric-card::before,
  .performance-card::before,
  .performance-spotlight::before,
  .performance-spotlight,
  .performance-spotlight:hover,
  .performance-card,
  .performance-card:hover,
  .performance-view-link,
  .performance-view-link:hover,
  .performance-view-arrow {
    transition: none;
    transform: none;
  }
}

/* utility */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.center-text { text-align: center; }
.hide-on-mobile { display: none; }
@media (min-width: 1000px) {
  .hide-on-mobile { display: initial; }
  .hide-on-desktop { display: none; }
}

.view { opacity: 1; }

/* back link */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px 7px 10px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-mid);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  margin: 4px 0 18px;
  transition: border-color .15s, color .15s, background .15s;
}
.back-link:hover {
  color: var(--ink);
  border-color: var(--hairline-strong);
  background: var(--surface-2);
}

/* misc */
hr.hairline {
  border: none;
  height: 1px;
  background: var(--hairline);
  margin: 24px 0;
}

/* ───── auth class completions ───── */
.auth-page {
  position: relative;
  width: 100%;
  min-height: calc(100vh - env(safe-area-inset-top, 0px));
  min-height: calc(100dvh - env(safe-area-inset-top, 0px));
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 64px 20px;
}
.auth-bg-watermarks {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.auth-bg-mark {
  position: absolute;
  object-fit: contain;
  opacity: 0.042;
  filter: drop-shadow(0 0 34px rgba(255,77,109,0.12));
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
.auth-bg-mark.m1 {
  width: 470px;
  height: 470px;
  top: -155px;
  left: -165px;
  animation: appLogoDriftOne 30s ease-in-out -9s infinite;
}
.auth-bg-mark.m2 {
  width: 540px;
  height: 540px;
  right: -210px;
  top: 3%;
  opacity: 0.038;
  animation: appLogoDriftTwo 36s ease-in-out -18s infinite;
}
.auth-bg-mark.m3 {
  width: 520px;
  height: 520px;
  left: -220px;
  bottom: -230px;
  opacity: 0.032;
  animation: appLogoDriftThree 40s ease-in-out -13s infinite;
}
.auth-bg-mark.m4 {
  width: 460px;
  height: 460px;
  right: -165px;
  bottom: -175px;
  opacity: 0.032;
  animation: appLogoDriftFour 34s ease-in-out -21s infinite;
}
.auth-bg-mark.m5 {
  width: 340px;
  height: 340px;
  left: 28%;
  top: 11%;
  opacity: 0.02;
  animation: appLogoDriftFive 44s ease-in-out -24s infinite;
}
.auth-bg-mark.m6 {
  width: 360px;
  height: 360px;
  right: 28%;
  bottom: 8%;
  opacity: 0.018;
  animation: appLogoDriftSix 48s ease-in-out -31s infinite;
}
.auth-page .auth-pane {
  position: relative;
  z-index: 1;
  width: min(100%, 640px);
  max-width: 640px;
  padding: 54px 24px 40px;
}
.auth-logo-row {
  display: flex;
  justify-content: center;
  margin-bottom: 56px;
}
.auth-logo-row .brand-lockup {
  justify-content: center;
}
.auth-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: lowercase;
  color: var(--lime);
  margin-bottom: 18px;
  display: block;
}
.auth-title {
  font-size: clamp(42px, 7vw, 68px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: var(--display-track);
  margin: 0 0 20px;
}
.auth-sub {
  color: var(--ink-mid);
  font-size: 18px;
  line-height: 1.55;
  margin: 0 auto 42px;
  max-width: 460px;
}
.auth-warn { color: var(--lime); display: block; font-size: 12.5px; margin-top: 6px; }
.auth-error {
  background: rgba(255,77,109,0.08);
  border: 1px solid var(--lime);
  border-radius: 10px;
  color: var(--lime);
  font-size: 13px;
  padding: 12px 14px;
  margin-bottom: 20px;
  text-align: left;
}
.auth-hint {
  background: rgba(216,221,230,0.04);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  color: var(--ink-mid);
  font-size: 13px;
  padding: 12px 14px;
  margin-bottom: 20px;
  text-align: left;
}
.auth-form {
  width: min(100%, 560px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.auth-form input[type=email],
.auth-form input[type=text] {
  width: 100%;
  min-height: 66px;
  padding: 0 22px;
  background: var(--surface-1);
  border: 1px solid var(--lime);
  border-radius: 16px;
  color: var(--ink);
  font-size: 18px;
  outline: none;
  font-family: inherit;
  text-align: left;
}
.auth-form input::placeholder { color: var(--ink-faint); }
.auth-form input:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 1px rgba(255,77,109,0.45), 0 0 28px rgba(255,77,109,0.12);
}
.auth-form .btn {
  min-height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  font-size: 16px;
}
.auth-foot { color: var(--ink-dim); font-size: 13px; margin-top: 20px; }
.auth-foot a { color: var(--ink-mid); }

@media (max-width: 640px) {
  .auth-page {
    padding: 46px 18px;
  }
  .auth-bg-mark.m1 { width: 300px; height: 300px; top: -110px; left: -140px; }
  .auth-bg-mark.m2 { width: 340px; height: 340px; right: -170px; top: 8%; }
  .auth-bg-mark.m3 { width: 360px; height: 360px; left: -190px; bottom: -180px; }
  .auth-bg-mark.m4 { width: 300px; height: 300px; right: -140px; bottom: -130px; }
  .auth-bg-mark.m5 { width: 240px; height: 240px; left: 32%; top: 24%; opacity: 0.016; }
  .auth-bg-mark.m6 { width: 260px; height: 260px; right: -90px; bottom: 20%; opacity: 0.016; }
  .auth-page .auth-pane {
    padding: 34px 0 30px;
  }
  .auth-logo-row {
    margin-bottom: 44px;
  }
  .auth-title {
    font-size: clamp(38px, 13vw, 54px);
  }
  .auth-sub {
    font-size: 16px;
    margin-bottom: 34px;
  }
}

/* ───── button aliases ───── */
.btn-primary { background: var(--lime); color: #fff; border-color: var(--lime); }
.btn-primary:hover { opacity: .88; }
.btn-secondary {
  background: transparent;
  color: var(--ink-mid);
  border-color: var(--hairline);
}
.btn-secondary:hover { border-color: #555; color: var(--ink); }

/* ───── form page wrapper (onb-*) ───── */
.onb {
  max-width: 520px;
  margin: 0 auto;
  padding: 32px 24px max(env(safe-area-inset-bottom,40px),60px);
}
.onb-header { margin-bottom: 28px; }
.onb-brand { margin-bottom: 20px; }
.onb-title {
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 10px;
}
.onb-sub { color: var(--ink-mid); font-size: 14px; line-height: 1.55; margin: 0 0 20px; }
.onb-form { display: flex; flex-direction: column; }
.onb-section {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--hairline);
}
.onb-section-title {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  text-transform: lowercase;
  letter-spacing: .08em;
  margin: 0 0 20px;
  font-weight: 400;
}
.onb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.onb-row-two { grid-template-columns: 1fr 1fr; }
.onb-actions { padding-top: 8px; }
.posting-form-shell {
  width: min(100%, 640px);
  max-width: 640px;
  padding-top: 50px;
}
.posting-form-shell .back-link {
  display: inline-flex;
  margin-bottom: 28px;
}
.posting-form-shell .onb-header {
  text-align: center;
  margin-bottom: 36px;
}
.posting-form-shell .auth-tag {
  margin-bottom: 16px;
}
.posting-form-shell .onb-title {
  font-size: clamp(38px, 7vw, 58px);
  font-weight: 500;
  letter-spacing: var(--display-track);
  margin-bottom: 16px;
}
.posting-form-shell .onb-sub {
  max-width: 480px;
  margin: 0 auto;
  font-size: 16px;
}
.posting-form {
  gap: 0;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 28px;
  background: rgba(22,22,22,.54);
  backdrop-filter: blur(12px);
}
.posting-form .onb-section:last-of-type {
  border-bottom: 0;
  padding-bottom: 10px;
}
.posting-form .field {
  margin-bottom: 18px;
}
.posting-form .field:last-child {
  margin-bottom: 0;
}
.posting-form textarea,
.posting-form input[type="text"],
.posting-form input[type="datetime-local"] {
  min-height: 56px;
  border-radius: 14px;
  background: rgba(12,12,12,.74);
}
.posting-form textarea {
  padding-top: 16px;
}
.posting-form .field-hint {
  margin-top: 8px;
}
.posting-form .onb-actions {
  padding-top: 12px;
}
.posting-delete-form {
  margin-top: 18px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}

@media (max-width: 640px) {
  .posting-page {
    padding-top: 0;
  }
  .ambient-page {
    padding-top: 0;
  }
  .calendar-page .page-header {
    margin-bottom: 28px;
  }
  .calendar-form-shell {
    padding-top: 28px;
  }
  .calendar-form-shell .onb-header {
    text-align: left;
  }
  .calendar-form-shell .onb-title {
    font-size: clamp(34px, 12vw, 46px);
  }
  .calendar-form-shell .onb-form {
    padding: 22px;
    border-radius: 22px;
  }
  .posting-index .page-header {
    margin-bottom: 44px;
  }
  .posting-empty {
    padding: 68px 18px;
    border-radius: 22px;
  }
  .posting-form-shell {
    padding-top: 28px;
  }
  .posting-form-shell .onb-header {
    text-align: left;
  }
  .posting-form-shell .onb-title {
    font-size: clamp(34px, 12vw, 46px);
  }
  .posting-form-shell .onb-sub {
    margin-left: 0;
  }
  .posting-form {
    padding: 22px;
    border-radius: 22px;
  }
}

/* required field marker */
.req { color: var(--lime); }

/* ───── toggle chips (form checkboxes/radios) ───── */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chips .chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--ink-mid);
  background: var(--surface-2);
  transition: border-color .15s, color .15s, background .15s;
  user-select: none;
}
.chips .chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.chips .chip:has(input:checked) {
  border-color: var(--lime);
  color: var(--lime);
  background: rgba(255,77,109,0.08);
}
.chips .chip:hover { border-color: #555; color: var(--ink); }

/* checkbox toggle row */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
  color: var(--ink-mid);
  font-size: 14px;
}
.toggle-row input[type=checkbox] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--lime);
}

/* ───── settings page ───── */
.settings-group {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--hairline);
}
.settings-group:last-of-type { border-bottom: 0; }
.settings-group h2 {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  text-transform: lowercase;
  letter-spacing: .08em;
  margin: 0 0 14px;
  font-weight: 400;
}
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13.5px;
}
.settings-row:last-child { border-bottom: 0; }
.settings-row > span { color: var(--ink-dim); }
.settings-row strong { color: var(--ink); font-weight: 500; }
.settings-row strong a { color: var(--lime); }
.settings-row-stack { flex-direction: column; align-items: flex-start; gap: 6px; }
.settings-form { display: flex; flex-direction: column; gap: 12px; }
.settings-form select {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 13.5px;
  width: 100%;
  max-width: 360px;
}
.settings-form select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 48px;
  padding-right: 46px;
  background:
    var(--surface-2)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m7 9 5 5 5-5' stroke='%23F5F1E8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 14px center / 22px 22px;
  line-height: 1.2;
}
.settings-form select:focus { outline: 2px solid var(--lime); outline-offset: 2px; }
.settings-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.settings-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--lime);
  cursor: pointer;
}
.settings-help { color: var(--ink-dim); font-size: 12.5px; margin: 2px 0 0; }
.settings-hint {
  color: var(--ink-dim);
  font-size: 12.5px;
  margin: 4px 0 6px;
  line-height: 1.45;
}
.settings-subhead {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 14px 0 2px;
  font-weight: 600;
}
.settings-memory-history {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-memory-history-row {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: rgba(255,255,255,0.02);
}
.settings-memory-history-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-mid);
}
.settings-memory-history-head strong { color: var(--ink); }
.settings-memory-history-row .settings-help { margin-top: 4px; }
.settings-form textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: rgba(255,255,255,0.02);
  color: var(--ink);
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
}
.settings-form textarea:focus {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}
.settings-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.settings-flash {
  font-size: 12.5px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--hairline-strong);
  color: var(--ink-mid);
  background: rgba(255,255,255,0.02);
}
.settings-flash-ok { color: var(--lime); border-color: var(--lime); background: rgba(255,77,109,0.08); }

/* Fee visibility line inside deal preferences — quietly reminds the
   creator what babyg keeps of each closed deal. */
.settings-fee-note {
  display: block;
  margin: 4px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,77,109,0.08);
  border: 1px solid rgba(255,77,109,0.22);
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.5;
}
.settings-fee-note strong { color: var(--accent, #ff4d6d); font-weight: 600; }

/* ───── kv (description list) ───── */
.kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  margin-bottom: 16px;
}
.kv dt {
  color: var(--ink-dim);
  font-size: 12px;
  font-family: var(--mono);
  text-transform: lowercase;
  letter-spacing: .06em;
}
.kv dd { color: var(--ink); font-size: 14px; }
.kv-prose { margin-top: 16px; }
.kv-prose h3 {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  text-transform: lowercase;
  letter-spacing: .08em;
  margin: 0 0 8px;
  font-weight: 400;
}
.kv-prose p { color: var(--ink-mid); font-size: 14.5px; line-height: 1.55; margin: 0; }

/* ───── DM message bubbles ─────
   Grouping rules (see _partials/dm_thread_messages.html):
     * Sender changes → new group (tight top corner on the FIRST bubble
       of the group, all bubbles inside stay round-topped via
       dm-message-group-mid).
     * Day changes → dm-day-sep inserted above; the day above is a
       full-day label so tail timestamps only need HH:MM.
     * Only the LAST bubble in a group is followed by a dm-message-tail
       showing that group's final time. */
.dm-messages {
  display: flex;
  flex-direction: column;
  gap: 3px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dm-message {
  display: flex;
  max-width: 78%;
}
.dm-message-mine { align-self: flex-end; justify-content: flex-end; }
.dm-message-theirs { align-self: flex-start; justify-content: flex-start; }
.dm-message-body {
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14.5px;
  line-height: 1.45;
  word-break: break-word;
}
.dm-message-mine .dm-message-body {
  background: var(--accent);
  color: #fff;
  border-top-right-radius: 6px;
}
.dm-message-theirs .dm-message-body {
  background: var(--surface-2);
  color: var(--ink);
  border-top-left-radius: 6px;
}
/* Interior bubbles in a run share full-radius tops so the group reads
   as one thread of thought, not a set of separate messages. */
.dm-message.dm-message-group-mid.dm-message-mine .dm-message-body {
  border-top-right-radius: 18px;
}
.dm-message.dm-message-group-mid.dm-message-theirs .dm-message-body {
  border-top-left-radius: 18px;
}
.dm-message-tail {
  margin: 4px 4px 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  color: var(--ink-dim);
  list-style: none;
}
.dm-message-tail.in { align-self: flex-start; }
.dm-message-tail.out { align-self: flex-end; }
.dm-day-sep {
  align-self: center;
  margin: 14px 0 6px;
  padding: 3px 10px;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  list-style: none;
}

/* ───── connections page ───── */
.connection-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.connection-card .dm-thread-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.connection-actions { display: flex; gap: 8px; }
.creator-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  flex-shrink: 0;
}
.creator-avatar.creator-avatar-photo { padding: 0; overflow: hidden; }
.creator-avatar.creator-avatar-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.dm-avatar { font-size: 13px; }
.dm-thread-list { list-style: none; padding: 0; margin: 0; }
.dm-thread-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.dm-thread-row:last-child { border-bottom: 0; }
.dm-thread-name { font-size: 14px; color: var(--ink); font-weight: 500; }
.dm-thread-handle { font-size: 12px; color: var(--ink-dim); font-weight: 400; margin-left: 6px; }
.dm-thread-meta { font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.dm-thread-copy { flex: 1; min-width: 0; }

/* ───── views page ───── */
.views-count-card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.views-count-card span { color: var(--ink-dim); font-size: 13px; }
.views-count-card strong { font-size: 32px; font-weight: 600; color: var(--ink); letter-spacing: var(--display-track); }

/* Detail-page headline. Used on profile, network_profile, dm_thread,
   calendar_detail, jobs_detail. Smaller than .page-header h1 so detail
   surfaces feel like subheadings, not heroes. */
.detail-title {
  font-size: 22px;
  line-height: 1.1;
  margin: 6px 0 0;
  letter-spacing: var(--display-track);
}

/* ───── report form ───── */
.report-block {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.report-summary {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: lowercase;
  color: var(--ink-dim);
  cursor: pointer;
  list-style: none;
  padding: 0;
}
.report-summary::-webkit-details-marker { display: none; }
.report-summary:hover { color: var(--ink); }
.report-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.report-form textarea {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  padding: 10px 14px;
  resize: vertical;
  outline: none;
}
.report-form textarea:focus { border-color: var(--lime); }

/* ───── operator console ─────
   Kept entirely under .operator-shell so creator/mobile app surfaces retain
   their own layout and density. */
.operator-shell {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 78% -12%, rgba(255,77,109,.055), transparent 30rem),
    var(--bg);
  color: var(--ink);
}
.operator-shell a,
.operator-shell button,
.operator-shell input,
.operator-shell textarea,
.operator-shell select {
  outline: none;
}
.operator-shell a:focus-visible,
.operator-shell button:focus-visible,
.operator-shell input:focus-visible,
.operator-shell textarea:focus-visible,
.operator-shell select:focus-visible {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--lime);
}
.operator-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(170px, .75fr) minmax(520px, auto) minmax(120px, .75fr);
  align-items: center;
  gap: 24px;
  padding: 0 clamp(24px, 4vw, 58px);
  background: rgba(10,10,10,.92);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.operator-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  width: max-content;
}
.operator-brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  background: var(--surface-1);
}
.operator-brand-mark img {
  width: 25px !important;
  height: 25px !important;
}
.operator-brand-copy {
  display: grid;
  gap: 2px;
  line-height: 1;
}
.operator-brand-copy strong {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.025em;
}
.operator-brand-copy small {
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.operator-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.operator-nav a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border-radius: 7px;
  color: var(--ink-dim);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease;
}
.operator-nav a:hover {
  color: var(--ink);
  background: rgba(255,255,255,.035);
}
.operator-nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--surface-2);
}
.operator-environment {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.operator-environment > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
}
.operator-main {
  width: 100%;
  min-width: 0;
}
.operator-main-inner {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 50px clamp(24px, 4vw, 58px) 88px;
}
.operator-shell .op {
  width: 100%;
  min-width: 0;
}
.operator-shell .op-detail {
  max-width: 980px;
}
.operator-shell .op-header {
  max-width: 780px;
  margin: 0 0 36px;
}
.operator-shell .op-header-row,
.operator-shell .op-dashboard-header {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}
.operator-shell .op-header .auth-tag,
.operator-shell .op-section-heading .auth-tag {
  margin-bottom: 12px;
  color: var(--lime);
  font-size: 9px;
  letter-spacing: .2em;
}
.operator-shell .op-title {
  max-width: 900px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.02;
  overflow-wrap: anywhere;
}
.operator-shell .op-sub {
  max-width: 650px;
  margin: 14px 0 0;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.55;
}
.operator-shell .op-count {
  margin: 16px 0 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.operator-shell .btn {
  min-height: 40px;
  border-radius: 7px;
  padding: 0 17px;
  font-size: 12.5px;
}
.operator-shell .btn-primary {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--obsidian);
}
.operator-shell .btn-primary:hover {
  background: #fff;
  border-color: #fff;
  opacity: 1;
}
.operator-shell .btn-secondary,
.operator-shell .btn-ghost {
  background: var(--surface-1);
  border-color: var(--hairline-strong);
  color: var(--ink-mid);
}
.operator-shell .back-link {
  min-height: 36px;
  margin: 0 0 24px;
  border-radius: 7px;
  background: transparent;
}
.operator-shell .op-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 0 56px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-1);
}
.operator-shell .op-metric {
  min-width: 0;
  min-height: 145px;
  display: grid;
  align-content: space-between;
  padding: 21px 22px;
  border-right: 1px solid var(--hairline-strong);
  transition: background .18s ease;
}
.operator-shell .op-metric:last-child { border-right: 0; }
.operator-shell .op-metric:hover { background: var(--surface-2); }
.operator-shell .op-metric > span {
  color: var(--ink-dim);
  font-size: 12px;
}
.operator-shell .op-metric > strong {
  align-self: end;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.operator-shell .op-metric > small {
  color: var(--ink-faint);
  font-size: 10.5px;
}
.operator-shell .op-metric.is-alert > strong,
.operator-shell .op-metric.is-alert > small { color: var(--lime); }
.operator-shell .op-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 20px;
}
.operator-shell .op-section-heading h2 {
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.035em;
}
.operator-shell .op-section-heading > span,
.operator-shell .op-section-heading > a {
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.operator-shell .op-section-heading > a:hover { color: var(--ink); }
.operator-shell .op-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 56px;
}
.operator-shell .op-card {
  position: relative;
  min-height: 240px;
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  padding: 26px;
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: var(--surface-1);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.operator-shell .op-card:nth-child(-n+2) { grid-column: span 6; }
.operator-shell .op-card:hover {
  transform: translateY(-2px);
  background: var(--surface-2);
  border-color: #373737;
}
.operator-shell .op-card-index {
  position: absolute;
  top: 24px;
  right: 24px;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.operator-shell .op-card-tag {
  margin-bottom: 38px;
  color: var(--lime);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.operator-shell .op-card-title {
  color: var(--ink);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.1;
}
.operator-shell .op-card-body {
  max-width: 42ch;
  margin: 10px 0 24px;
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.55;
}
.operator-shell .op-card-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  color: var(--ink-mid);
  font-size: 12px;
  font-weight: 500;
}
.operator-shell .op-card-cta span {
  color: var(--ink-faint);
  font-size: 17px;
  transition: color .18s ease, transform .18s ease;
}
.operator-shell .op-card:hover .op-card-cta span {
  color: var(--lime);
  transform: translateX(3px);
}
.operator-shell .op-activity {
  padding: 26px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: var(--surface-1);
}
.operator-shell .op-activity .op-section-heading { margin-bottom: 16px; }
.operator-shell .op-activity-list { border-top: 1px solid var(--hairline); }
.operator-shell .op-activity-row {
  display: grid;
  grid-template-columns: 150px minmax(180px, .8fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--hairline);
  font-size: 12px;
}
.operator-shell .op-activity-row:last-child { border-bottom: 0; }
.operator-shell .op-activity-row strong {
  font-weight: 500;
  overflow-wrap: anywhere;
}
.operator-shell .op-activity-row > span:last-child {
  color: var(--ink-dim);
  overflow-wrap: anywhere;
}
.operator-shell .op-activity-time {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.operator-shell .op-empty-compact {
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  border-top: 1px solid var(--hairline);
}
.operator-shell .op-empty-compact strong { font-size: 14px; font-weight: 500; }
.operator-shell .op-empty-compact span { color: var(--ink-dim); font-size: 12.5px; }
.operator-shell .feed-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  margin: 0 0 18px;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.operator-shell .feed-filters::-webkit-scrollbar { display: none; }
.operator-shell .op-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(160px, auto) auto;
  gap: 10px;
  align-items: center;
  margin: 0 0 18px;
}
.operator-shell .op-toolbar input,
.operator-shell .op-toolbar select {
  min-height: 40px;
  border: 1px solid var(--hairline-strong);
  border-radius: 7px;
  background: var(--surface-1);
  color: var(--ink);
  padding: 0 13px;
}
.operator-shell .op-toolbar input:focus,
.operator-shell .op-toolbar select:focus {
  border-color: #525252;
}
.operator-shell .chip {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 7px;
  background: var(--surface-1);
  font-size: 11px;
}
.operator-shell .chip-active {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--obsidian);
}
.operator-shell .table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: var(--surface-1);
  scrollbar-color: var(--hairline-strong) transparent;
}
.operator-shell .op-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  table-layout: auto;
}
.operator-shell .op-table th {
  height: 44px;
  padding: 0 18px;
  border-bottom: 1px solid var(--hairline-strong);
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .13em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.operator-shell .op-table td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-mid);
  font-size: 12.5px;
  vertical-align: middle;
}
.operator-shell .op-table tbody tr:last-child td { border-bottom: 0; }
.operator-shell .op-table tbody tr { transition: background .15s ease; }
.operator-shell .op-table tbody tr:hover { background: rgba(255,255,255,.025); }
.operator-shell .op-table-title {
  color: var(--ink);
  font-weight: 500;
}
.operator-shell .op-table-title:hover { color: #fff; }
.operator-shell .op-table-meta {
  max-width: 380px;
  color: var(--ink-dim) !important;
  font-family: var(--mono);
  font-size: 10px !important;
  overflow-wrap: anywhere;
}
.operator-shell .op-table-actions { text-align: right; white-space: nowrap; }
.operator-shell .inline-form { display: inline; }
.operator-shell .link-btn {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-mid);
  font-size: 11px;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.operator-shell .link-btn:hover {
  color: var(--ink);
  background: var(--surface-2);
  border-color: #444;
}
.operator-shell .status-pill {
  gap: 6px;
  color: var(--ink-mid);
  letter-spacing: .1em;
}
.operator-shell .status-pill::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: currentColor;
}
.operator-shell .status-active,
.operator-shell .status-operator,
.operator-shell .status-positive,
.operator-shell .status-pass { color: var(--bone); }
.operator-shell .status-pending,
.operator-shell .status-escalated,
.operator-shell .status-caution,
.operator-shell .status-warn { color: var(--lime); }
.operator-shell .status-draft,
.operator-shell .status-archived,
.operator-shell .status-creator,
.operator-shell .status-actioned,
.operator-shell .status-dismissed,
.operator-shell .status-neutral,
.operator-shell .status-inconclusive { color: var(--ink-dim); }
.operator-shell .status-risk,
.operator-shell .status-fail { color: var(--accent); }
.operator-shell .op-trust-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.operator-shell .op-trust-summary > div {
  padding: 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  background: var(--surface-1);
}
.operator-shell .op-trust-summary strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 18px;
}
.operator-shell .op-trust-summary p {
  margin: 6px 0 0;
  color: var(--ink-mid);
  font-size: 13px;
  line-height: 1.45;
}
.operator-shell .badge {
  border-color: var(--hairline-strong);
  border-radius: 5px;
  background: rgba(255,255,255,.025);
  color: var(--ink-mid);
  font-size: 8.5px;
  letter-spacing: .1em;
}
.operator-shell .badge-alert { color: var(--lime); border-color: rgba(255,77,109,.35); }
.operator-shell .feed-empty {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 36px;
  border: 1px dashed var(--hairline-strong);
  border-radius: 10px;
  background: rgba(255,255,255,.012);
}
.operator-shell .feed-empty h2 {
  font-size: 18px;
  letter-spacing: -.025em;
}
.operator-shell .feed-empty p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 13px;
}
.operator-shell .onb-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.operator-shell .onb-section {
  min-width: 0;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: var(--surface-1);
}
.operator-shell .op-form .onb-section:first-of-type { grid-column: 1 / -1; }
.operator-shell .onb-actions { grid-column: 1 / -1; padding-top: 4px; }
.operator-shell .onb-section-title {
  margin-bottom: 22px;
  color: var(--ink-mid);
  font-size: 9px;
  letter-spacing: .16em;
}
.operator-shell .field { margin-bottom: 18px; }
.operator-shell .field:last-child { margin-bottom: 0; }
.operator-shell .field-label {
  color: var(--ink-mid);
  font-size: 11px;
}
.operator-shell .field-hint {
  margin: 5px 0 9px;
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 1.45;
}
.operator-shell .field input,
.operator-shell .field textarea,
.operator-shell .field select,
.operator-shell .decision-form textarea {
  width: 100%;
  border: 1px solid var(--hairline-strong);
  border-radius: 7px;
  background: #0d0d0d;
  color: var(--ink);
  box-shadow: none;
}
.operator-shell .field input,
.operator-shell .field select { min-height: 46px; padding: 0 13px; }
.operator-shell .field textarea,
.operator-shell .decision-form textarea { padding: 12px 13px; resize: vertical; }
.operator-shell .field input:focus,
.operator-shell .field textarea:focus,
.operator-shell .field select:focus,
.operator-shell .decision-form textarea:focus { border-color: #525252; }
.operator-shell .kv {
  display: grid;
  grid-template-columns: minmax(120px, .35fr) minmax(0, 1fr);
  margin: 0;
}
.operator-shell .kv dt,
.operator-shell .kv dd {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  overflow-wrap: anywhere;
}
.operator-shell .kv dt {
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.operator-shell .kv dd { color: var(--ink-mid); font-size: 12.5px; }
.operator-shell .kv-prose {
  color: var(--ink-mid);
  font-size: 13px;
  line-height: 1.65;
}
.operator-shell .decision-form {
  display: grid;
  gap: 14px;
}
.operator-shell .op-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.operator-shell .op-divider {
  height: 1px;
  margin: 24px 0;
  border: 0;
  background: var(--hairline);
}
.operator-shell .operator-note-form { margin-top: 22px; }
.operator-shell .dm-thread-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.operator-shell .dm-thread-row {
  padding: 15px 0;
  border-bottom: 1px solid var(--hairline);
}
.operator-shell .op-pagination {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
}

@media (max-width: 1080px) {
  .operator-topbar {
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    padding-inline: 24px;
  }
  .operator-brand-copy { display: none; }
  .operator-nav { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .operator-nav::-webkit-scrollbar { display: none; }
  .operator-shell .op-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .operator-shell .op-metric:nth-child(3) { border-right: 0; }
  .operator-shell .op-metric:nth-child(-n+3) { border-bottom: 1px solid var(--hairline-strong); }
  .operator-shell .op-metric:nth-child(5) { border-right: 0; }
  .operator-shell .op-card,
  .operator-shell .op-card:nth-child(-n+2) { grid-column: span 6; }
}

@media (max-width: 720px) {
  .operator-topbar {
    position: sticky;
    grid-template-columns: 1fr auto;
    grid-template-rows: 54px 50px;
    gap: 0;
    padding: 0 16px;
  }
  .operator-brand-mark { width: 32px; height: 32px; }
  .operator-environment { grid-column: 2; grid-row: 1; }
  .operator-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0 -16px;
    padding: 0 16px 8px;
  }
  .operator-nav a {
    min-height: 42px;
    padding-inline: 13px;
  }
  .operator-main-inner { padding: 30px 16px 64px; }
  .operator-shell .op-header-row,
  .operator-shell .op-dashboard-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }
  .operator-shell .op-dashboard-header .btn,
  .operator-shell .op-header-row .btn { width: 100%; justify-content: center; }
  .operator-shell .op-title { font-size: 32px; }
  .operator-shell .op-header { margin-bottom: 28px; }
  .operator-shell .op-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 42px;
  }
  .operator-shell .op-metric {
    min-height: 128px;
    border-right: 1px solid var(--hairline-strong);
    border-bottom: 1px solid var(--hairline-strong);
    padding: 18px;
  }
  .operator-shell .op-metric:nth-child(even) { border-right: 0; }
  .operator-shell .op-metric:nth-child(3) { border-right: 1px solid var(--hairline-strong); }
  .operator-shell .op-metric:nth-child(5) { border-right: 0; border-bottom: 0; grid-column: 1 / -1; }
  .operator-shell .op-metric:nth-child(4) { border-bottom: 1px solid var(--hairline-strong); }
  .operator-shell .op-metric > strong { font-size: 30px; }
  .operator-shell .op-grid { gap: 10px; margin-bottom: 42px; }
  .operator-shell .op-card,
  .operator-shell .op-card:nth-child(-n+2) {
    grid-column: 1 / -1;
    min-height: 210px;
    padding: 22px;
  }
  .operator-shell .op-card-tag { margin-bottom: 30px; }
  .operator-shell .op-activity { padding: 20px; }
  .operator-shell .op-activity-row {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 13px 0;
  }
  .operator-shell .op-section-heading { align-items: flex-start; }
  .operator-shell .op-section-heading > span { display: none; }
  .operator-shell .table-wrap { margin-inline: 0; }
  .operator-shell .op-table th,
  .operator-shell .op-table td { padding-inline: 14px; }
  .operator-shell .feed-empty { min-height: 190px; padding: 26px; }
  .operator-shell .op-toolbar { grid-template-columns: 1fr; }
  .operator-shell .onb-form { grid-template-columns: 1fr; }
  .operator-shell .op-form .onb-section:first-of-type,
  .operator-shell .onb-actions { grid-column: auto; }
  .operator-shell .onb-section { padding: 20px; }
  .operator-shell .kv { grid-template-columns: 1fr; }
  .operator-shell .kv dt { padding-bottom: 3px; border-bottom: 0; }
  .operator-shell .kv dd { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .app-bg-mark,
  .auth-bg-mark,
  .app-sidebar nav a svg,
  .app-sidebar nav a .nav-bg-icon,
  .app-sidebar nav a[data-tab="feed"] svg {
    animation: none;
    transform: none;
  }
  .app-sidebar nav a svg,
  .app-sidebar nav a .nav-bg-icon {
    filter: drop-shadow(0 0 7px var(--nav-glow));
  }
  .app-sidebar nav a .nav-bg-icon {
    filter: saturate(1.03) drop-shadow(0 0 3px var(--nav-glow));
  }
}

/* ---------------------------------------------------------------
   Unified Discover — mobile-first mixed stack
   --------------------------------------------------------------- */
.discover,
.discover-detail {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 14px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 106px);
}
.discover-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 10px;
}
.discover-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.discover-filter-toggle {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink);
}
.discover-filter-toggle svg { width: 22px; height: 22px; }
@media (max-width: 640px) {
  .discover-filter-toggle { width: 44px; height: 44px; border-radius: 12px; }
  .discover-filter-toggle svg { width: 18px; height: 18px; }
}
.discover-filter-toggle:focus-visible,
.discover-kind-tabs a:focus-visible,
.discover-actions button:focus-visible,
.discover-detail-form button:focus-visible,
.discover-detail-actions button:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}
.discover-kind-tabs {
  display: flex;
  gap: 8px;
  margin: 0 -14px 18px;
  padding: 0 14px 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.discover-kind-tabs::-webkit-scrollbar { display: none; }
.discover-kind-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 17px;
  flex: 0 0 auto;
  white-space: nowrap;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--ink-mid);
  font-size: 14px;
  text-decoration: none;
}
.discover-kind-tabs a.active {
  border-color: var(--lime);
  background: var(--lime-soft);
  color: var(--ink);
}
.discover-kind-tabs a.post {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  min-height: 40px;
  width: 40px;
  padding: 0;
  border: 0;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
}
.discover-kind-tabs a.post svg { width: 18px; height: 18px; }
.discover-kind-tabs a.post:hover {
  background: var(--accent-hover, #e8455f);
}
.discover-layout { min-width: 0; }
.discover-filters {
  display: none;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: 16px;
  background: var(--surface-1);
}
.discover-filters.is-open { display: block; }
.discover-filter-sheet-head { display: none; }
.discover-filter-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-mid);
  font: inherit;
  cursor: pointer;
}
.discover-filter-close svg {
  width: 18px;
  height: 18px;
  display: block;
}
.discover-filters form,
.discover-filters label { display: grid; gap: 8px; }
.discover-filters form { gap: 14px; }
.discover-filters label > span {
  font-family: var(--mono);
  color: var(--ink-dim);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: lowercase;
}
.discover-filters input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink);
}
.discover-budget-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.discover-filter-actions { display: flex; gap: 8px; }
.discover-filter-actions .btn {
  min-height: 48px;
  justify-content: center;
}
.discover-stage {
  position: relative;
  min-width: 0;
}
.discover-count {
  margin: 0 2px 9px;
  color: var(--ink-dim);
  font-size: 12px;
}
.discover-count strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}
.discover-stack {
  position: relative;
  min-height: 470px;
}
.discover-stack::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 10px -4px -8px 8px;
  border: 1px solid var(--hairline-strong);
  border-radius: 22px;
  background: var(--surface-1);
  transform: rotate(1.2deg);
}
.discover-card,
.discover-detail-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 470px;
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface-2) 94%, #ffffff 6%);
  box-shadow: 0 18px 48px rgba(0,0,0,.32);
  touch-action: pan-y;
  transition: transform .2s ease, opacity .2s ease, border-color .2s ease;
  will-change: transform;
}
.discover-card[hidden] { display: none; }
.discover-card.is-dragging { transition: none; }
.discover-card.is-leaving-left { transform: translateX(-115%) rotate(-7deg); opacity: 0; }
.discover-card.is-leaving-right { transform: translateX(115%) rotate(7deg); opacity: 0; }
.discover-card.is-entering { transform: scale(.97); opacity: 0; }
.discover-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 14px 16px 0;
}
.discover-card-kind,
.discover-trust {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: lowercase;
}
.discover-card-kind { color: var(--ink-dim); }
.discover-trust { color: var(--lime); }
.discover-trust.trust-neutral { color: var(--ink-mid); }
.discover-trust.trust-caution,
.discover-trust.trust-risk { color: var(--accent); }
.discover-identity {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px 0;
}
.discover-avatar {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  border-radius: 16px;
  background: var(--surface-3);
  color: var(--ink);
  font-size: 22px;
}
.discover-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.discover-identity h1,
.discover-identity h2 {
  margin: 0;
  font-size: clamp(24px, 7vw, 36px);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.discover-identity p {
  margin: 6px 0 0;
  color: var(--ink-dim);
  font-size: 13px;
}
.discover-description {
  margin: 18px 16px 0;
  color: var(--ink-mid);
  font-size: 15px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.discover-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 18px 16px 0;
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-strong);
}
.discover-facts div {
  min-width: 0;
  padding: 12px 0;
}
.discover-facts div:nth-child(even) {
  padding-left: 12px;
  border-left: 1px solid var(--hairline-strong);
}
.discover-facts dt {
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: lowercase;
}
.discover-facts dd {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.discover-tags {
  display: flex;
  gap: 6px;
  padding: 14px 16px 0;
  overflow: hidden;
}
.discover-tags span {
  padding: 5px 9px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  color: var(--ink-mid);
  font-size: 11px;
  white-space: nowrap;
}
.discover-relevance {
  margin: 14px 16px;
  padding: 12px;
  border-left: 2px solid var(--lime);
  background: var(--surface-1);
}
.discover-relevance span {
  color: var(--lime);
  font-size: 12px;
  font-weight: 500;
}
.discover-relevance p {
  margin: 4px 0 0;
  color: var(--ink-mid);
  font-size: 13px;
}
.discover-trust-note {
  margin: -4px 16px 14px;
  padding: 10px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  color: var(--ink-mid);
  background: color-mix(in srgb, var(--surface-1) 88%, #fff 4%);
  font-size: 12px;
  line-height: 1.45;
}
.discover-trust-note.trust-caution,
.discover-trust-note.trust-risk {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--hairline-strong));
  color: var(--ink);
}
.discover-detail-form,
.discover-detail-actions {
  margin-top: auto;
  border-top: 1px solid var(--hairline-strong);
}
.discover-detail-form button,
.discover-detail-actions button {
  width: 100%;
  min-height: 54px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}
.discover-detail-form button span {
  color: var(--lime);
  font-size: 20px;
  vertical-align: -1px;
}
.discover-detail-actions {
  padding: 16px;
}
.discover-detail-actions button {
  border-radius: 999px;
  background: var(--lime);
  color: #0a0a0a;
}
.discover-action-meta {
  display: flex;
  justify-content: center;
  margin: 12px 0;
}
.discover-action-meta form { margin: 0; }
.discover-undo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: rgba(28,26,29,.82);
  color: var(--ink-mid);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}
.discover-undo:hover:not(:disabled),
.discover-undo:focus-visible {
  border-color: rgba(255, 77, 109, .58);
  background: rgba(255, 77, 109, .08);
  color: var(--ink);
  transform: translateY(-1px);
}
.discover-undo svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
}
.discover-undo:disabled {
  color: var(--ink-faint);
  opacity: .45;
  cursor: default;
}
.discover-actions {
  position: fixed;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 14px calc(env(safe-area-inset-bottom) + 14px);
  border-top: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(18px);
}
.discover-actions form {
  margin: 0;
  min-width: 0;
}
.discover-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--ink-mid);
  font-size: 13px;
  font-weight: 500;
}
.discover-actions button.primary {
  border-color: var(--lime);
  background: var(--lime);
  color: #0a0a0a;
}
.discover-actions svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
}
.discover-empty {
  margin: 60px auto 0;
  max-width: 520px;
  padding: 44px 24px;
  text-align: center;
  border: 1px solid var(--hairline-strong);
  border-radius: 24px;
  background: var(--surface-1);
}
.discover-empty h2 {
  margin: 0;
  font-size: 30px;
}
.discover-empty p {
  max-width: 430px;
  margin: 14px auto 22px;
  color: var(--ink-mid);
}

@media (max-width: 719px) {
  .discover:has(.discover-filters.is-open) .discover-actions { display: none; }
}

@media (min-width: 720px) {
  .discover,
  .discover-detail {
    padding: 30px 28px 48px;
  }
  .discover-head {
    align-items: center;
    margin-bottom: 16px;
  }
  .discover-kind-tabs {
    margin: 0 0 24px;
    padding: 0;
  }
  .discover-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 620px);
    gap: 28px;
    justify-content: center;
  }
  .discover-filter-toggle { display: none; }
  .discover-head { display: none; }
  .discover-filters {
    display: block;
    margin: 26px 0 0;
    align-self: start;
  }
  .discover-budget-fields { grid-template-columns: 1fr; }
  .discover-filter-actions { flex-direction: column; }
  .discover-stack { min-height: 560px; }
  .discover-card,
  .discover-detail-card {
    min-height: 560px;
  }
  .discover-actions {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 12px 0 0;
    border-top: 0;
    background: none;
    backdrop-filter: none;
  }
  .discover-detail {
    max-width: 680px;
  }
}

/* Discover polish: keeps the existing stack/data flow but matches the
   app-like mobile composition from the reference. */
.discover {
  padding-top: 14px;
  padding-bottom: 26px;
}
.discover-head {
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 10px;
  min-height: 0;
}
.discover-filter-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border-radius: 17px;
  background: rgba(30,28,32,.86);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}
.discover-kind-tabs {
  gap: 9px;
  margin-bottom: 22px;
}
.discover-kind-tabs a {
  min-height: 40px;
  padding-inline: 18px;
  background: rgba(28,26,29,.86);
  font-weight: 600;
  color: rgba(245,241,232,.7);
}
.discover-kind-tabs a.active {
  border-color: rgba(255,77,109,.62);
  background: rgba(255,77,109,.16);
  color: #ff6b83;
  box-shadow: inset 0 0 0 1px rgba(255,77,109,.12);
}
.discover-kind-tabs a.post {
  min-height: 40px;
  width: 40px;
  padding: 0;
  border: 0;
  background: var(--accent);
  color: #fff;
}
.discover-kind-tabs a.post:hover {
  background: var(--accent-hover, #e8455f);
}
.discover-count {
  display: none;
}
.discover-stack {
  min-height: clamp(470px, 64dvh, 590px);
}
.discover-stack::before {
  display: none;
}
.discover-card {
  min-height: clamp(470px, 64dvh, 590px);
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(31,29,32,.98), rgba(17,16,18,.98));
  box-shadow: 0 22px 58px rgba(0,0,0,.42);
}
.discover-card-media {
  min-height: clamp(178px, 25dvh, 250px);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 72%, rgba(255,77,109,.18), transparent 44%),
    linear-gradient(180deg, rgba(45,42,46,.9), rgba(15,14,16,.95));
}
.discover-card-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 54%;
  background: linear-gradient(180deg, transparent, rgba(6,6,7,.82));
  pointer-events: none;
}
.discover-card-media .discover-card-topline {
  position: relative;
  z-index: 1;
  padding: 16px 18px 0;
}
.discover-card-topline-inline {
  display: none;
}
.discover-card-kind {
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(8,8,8,.52);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.discover-media-icon {
  margin: auto;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  color: rgba(245,241,232,.18);
}
.discover-media-icon svg {
  width: 72px;
  height: 72px;
}
.discover-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px 20px 108px;
}
.discover-card-body h2 {
  font-size: clamp(29px, 8vw, 42px);
  line-height: .98;
  letter-spacing: -0.06em;
}
.discover-card-body > div > p {
  margin: 7px 0 0;
  color: var(--ink-mid);
  font-size: 14px;
  font-weight: 600;
}
.discover-description {
  margin: 13px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  -webkit-line-clamp: 2;
}
.discover-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 18px 0 0;
  border: 0;
}
.discover-facts div,
.discover-facts div:nth-child(even) {
  padding: 0;
  border-left: 0;
}
.discover-facts dt {
  display: none;
}
.discover-facts dd {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.discover-facts dd::after {
  content: attr(data-label);
}
.discover-tags {
  padding: 13px 0 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.discover-tags::-webkit-scrollbar {
  display: none;
}
.discover-tags span {
  padding: 8px 12px;
  background: rgba(255,255,255,.035);
  font-size: 13px;
  font-weight: 600;
}
.discover-relevance {
  margin: 14px 0 0;
  padding: 12px;
  border-left-color: rgba(255,77,109,.72);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}
.discover-relevance span {
  color: #ff6b83;
}
.discover-trust-note {
  margin: 10px 0 0;
}
.discover .discover-detail-form {
  display: none;
}
.discover-actions {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 88px 88px minmax(0, 1fr);
  gap: 12px;
  margin: -110px 28px 0;
  padding: 0;
  border-top: 0;
  background: transparent;
  backdrop-filter: none;
}
.discover-actions button {
  min-height: 58px;
  border-radius: 18px;
  background: rgba(27,25,28,.96);
  color: rgba(245,241,232,.72);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}
.discover-actions button span:not([data-primary-label]) {
  display: none;
}
.discover-actions button.primary {
  border-color: rgba(255,77,109,.78);
  background: #ff4d6d;
  color: #fff;
  font-size: 15px;
}
.discover-actions button.primary svg {
  width: 22px;
  height: 22px;
}
.discover-action-meta {
  position: relative;
  z-index: 2;
  margin: 16px 0 0;
}
.discover-undo {
  min-height: 44px;
  min-width: 44px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: rgba(28,26,29,.82);
  text-decoration: none;
  font-weight: 600;
}
@media (max-width: 374px) {
  .discover {
    padding-inline: 10px;
  }
  .discover-kind-tabs {
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .discover-kind-tabs a {
    padding-inline: 14px;
  }
  .discover-actions {
    grid-template-columns: 70px 70px minmax(0, 1fr);
    gap: 8px;
    margin-inline: 18px;
  }
  .discover-actions button.primary {
    font-size: 13.5px;
  }
}
@media (max-width: 719px) {
  .discover-title-lockup p {
    display: none;
  }
  .discover-relevance,
  .discover-trust-note {
    display: none;
  }
}
@media (min-width: 720px) and (max-width: 999px) {
  #view > .view:has(.discover) {
    max-width: none;
  }
  .discover {
    padding-inline: 28px;
  }
  .discover-head {
    max-width: 620px;
    margin-inline: auto;
  }
  .discover-kind-tabs {
    max-width: 620px;
    margin-inline: auto;
  }
  .discover-layout {
    display: block;
  }
  .discover-filter-toggle {
    display: inline-grid;
  }
  .discover-filters {
    display: none;
    max-width: 620px;
    margin: 0 auto 18px;
  }
  .discover-filters.is-open {
    display: block;
  }
  .discover-stage {
    max-width: 620px;
    margin-inline: auto;
  }
}
@media (min-width: 720px) {
  .discover {
    padding-bottom: 48px;
  }
  .discover-title-lockup {
    grid-template-columns: 36px minmax(0, auto);
  }
  .discover-title-lockup .brand-mark {
    width: 34px;
    height: 34px;
  }
  .discover-layout {
    grid-template-columns: 220px minmax(0, 620px);
  }
  .discover-card,
  .discover-stack {
    min-height: 610px;
  }
  .discover-actions {
    max-width: 564px;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .discover-card {
    transition: none;
  }
}

/* ---------------------------------------------------------------
   Network discovery — swipe-style stack
   --------------------------------------------------------------- */
.network-swipe-wrap {
  max-width: 660px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.network-swipe-head {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 18px;
}
.network-control-stack {
  width: min(100%, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.network-section-tabs,
.network-head-actions,
.posting-network-head,
.posting-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.network-section-tabs,
.network-head-actions {
  justify-content: center;
}
.network-section-tabs .btn,
.network-head-actions .btn,
.network-mode-tabs a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 12.5px;
  line-height: 1;
  white-space: nowrap;
}
.network-section-tabs .btn,
.network-head-actions .btn {
  padding: 0 18px;
}
.network-section-tabs .btn.active,
.network-section-tabs .btn[aria-current="page"] {
  color: var(--ink);
  border-color: var(--hairline-strong);
  background: rgba(245,241,232,.07);
}
.network-undo-form { margin: 0; }
.network-new-posting,
.posting-new-button {
  box-shadow: 0 14px 34px -22px rgba(255,77,109,.85);
}
.network-mode-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  flex-wrap: wrap;
}
.network-mode-tabs a {
  min-width: 88px;
  padding: 0 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-mid);
  font-size: 12.5px;
  text-align: center;
  text-decoration: none;
  background: rgba(22,22,22,.48);
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.network-mode-tabs a:hover,
.network-mode-tabs a:focus-visible {
  color: var(--ink);
  border-color: rgba(255,77,109,.45);
  background: rgba(255,77,109,.08);
}
.network-mode-tabs a:active { transform: scale(.98); }
.network-mode-tabs a.active {
  color: #0a0a0a;
  border-color: var(--bone);
  background: var(--bone);
}
.network-swipe-card {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  background: var(--surface-1);
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 60px -36px rgba(0,0,0,0.65);
  user-select: none;
  touch-action: pan-y;
}
.network-swipe-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 8%, rgba(255,77,109,.12), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 42%);
  opacity: .7;
}
.network-swipe-card > * {
  position: relative;
  z-index: 1;
}
.network-swipe-hero {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  overflow: hidden;
}
.network-swipe-photo {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.network-swipe-photo-fallback {
  display: flex; align-items: center; justify-content: center;
  font-size: 96px; font-weight: 400; color: var(--ink-mid);
  background: linear-gradient(135deg, #4a5a6b, #1f2a35);
  letter-spacing: 0.02em;
}
.network-swipe-gradient {
  position: absolute; inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to bottom, rgba(10,10,10,0) 0%, rgba(10,10,10,0.75) 75%, rgba(10,10,10,0.95) 100%);
  pointer-events: none;
}
.network-swipe-hero-text {
  position: absolute; left: 18px; right: 18px; bottom: 16px;
  color: #fff;
}
.network-card-topline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.network-role-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: lowercase;
  color: var(--ink-mid);
  background: rgba(10,10,10,.55);
  backdrop-filter: blur(10px);
}
.network-role-badge-creator {
  color: #ff6b82;
  border-color: rgba(255,77,109,.38);
  background: rgba(255,77,109,.09);
}
.network-role-badge-brand {
  color: #8be6b5;
  border-color: rgba(112,220,162,.38);
  background: rgba(112,220,162,.08);
}
.network-role-badge-posting {
  color: #e7c77f;
  border-color: rgba(231,199,127,.34);
  background: rgba(231,199,127,.08);
}
.network-swipe-hero-text h1 {
  font-size: 28px; font-weight: 500; margin: 8px 0 0; letter-spacing: 0.005em;
}
.network-swipe-handle {
  margin: 4px 0 0; font-size: 13.5px; color: rgba(255,255,255,0.7);
}
.network-swipe-location {
  margin: 2px 0 0; font-size: 12.5px; color: rgba(255,255,255,0.6);
}
.network-swipe-body {
  padding: 18px 18px 4px; display: flex; flex-direction: column; gap: 12px;
}
.network-swipe-bio {
  color: var(--ink); font-size: 14.5px; line-height: 1.55; margin: 0;
}
.network-swipe-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  color: var(--ink-mid); font-size: 12.5px;
}
.network-posting-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.network-posting-body h1 {
  font-size: clamp(34px, 7vw, 52px);
  line-height: .95;
  letter-spacing: var(--display-track);
  font-weight: 500;
  margin: 8px 0 0;
}
.network-posting-poster {
  color: var(--ink-mid);
  font-size: 13.5px;
  margin: -6px 0 0;
}
.network-posting-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.network-posting-details span {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(10,10,10,.38);
  color: var(--ink);
  font-size: 12.5px;
  text-align: center;
}
.network-swipe-actions {
  /* Buttons are sized to their content and centered as a group so
     the three pills sit in the middle of the card instead of being
     stretched edge-to-edge by an equal-columns grid. */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 18px 20px;
}
.network-swipe-form { margin: 0; flex: 0 0 auto; }
.network-swipe-form .btn {
  width: auto;
  min-width: 110px;
  justify-content: center;
}
.btn.btn-lg {
  padding: 12px 14px; font-size: 14px; letter-spacing: 0.02em;
}
.network-swipe-hint {
  text-align: center; font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-dim);
  padding: 0 0 16px;
}
.network-swipe-empty {
  border: 1px dashed var(--hairline);
  border-radius: 18px;
  padding: 48px 28px;
  text-align: center;
  background: var(--surface-1);
  color: var(--ink-mid);
}
.network-swipe-empty h1 {
  font-size: 22px; font-weight: 500; margin: 8px 0 10px; color: var(--ink);
}
.network-swipe-empty p {
  font-size: 13.5px; line-height: 1.55; max-width: 380px;
  margin: 0 auto 18px;
}
.network-swipe-empty-cta {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.posting-network-head {
  justify-content: space-between;
  margin-bottom: 64px;
}
.posting-actions {
  margin-left: auto;
}
.tag.tag-muted {
  color: var(--ink-mid); border-color: var(--hairline);
}
@media (prefers-reduced-motion: reduce) {
  .network-swipe-card,
  .network-mode-tabs a { transition: none !important; }
}
@media (max-width: 600px) {
  /* Narrow phones: keep the flex centering but tighten the gap so
     all three pills stay on one row without wrapping. */
  .network-swipe-wrap {
    max-width: min(100%, 440px);
    padding-left: 16px;
    padding-right: 16px;
  }
  .network-control-stack {
    width: 100%;
    gap: 10px;
  }
  .network-section-tabs,
  .network-head-actions,
  .network-mode-tabs {
    width: 100%;
    justify-content: center;
  }
  .network-section-tabs .btn,
  .network-head-actions .btn,
  .network-mode-tabs a {
    min-height: 42px;
  }
  .network-swipe-actions { gap: 8px; padding: 14px 14px 18px; }
  .network-swipe-form .btn { min-width: 92px; padding-left: 14px; padding-right: 14px; }
  .network-swipe-head,
  .posting-network-head {
    justify-content: center;
  }
  .network-head-actions,
  .posting-actions {
    justify-content: center;
    width: 100%;
  }
  .network-mode-tabs {
    overflow-x: visible;
    padding-bottom: 2px;
  }
  .network-mode-tabs a {
    min-width: 88px;
    flex: 0 0 auto;
  }
  .network-posting-body { padding: 22px; }
  .network-posting-details {
    grid-template-columns: 1fr;
  }
}

.dm-brief-reply-text {
  color: var(--ink-mid);
  font-size: 13px;
  line-height: 1.55;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0;
}

/* ==========================================================================
   2026 product redesign
   Intentionally scoped away from the public landing page. The marketing
   landing has its own immutable .lp system in landing.css.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.2.6/files/geist-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/geist-mono@5.2.6/files/geist-mono-latin-wght-normal.woff2") format("woff2");
}

:where(.is-product-app, .is-auth-app, .is-onboarding-app, .is-legal-app, .is-get-started-app, .is-error-app) {
  --bg: #0c0a0a;
  --obsidian: #0c0a0a;
  --jet: #080606;
  --bone: #f7f5f8;
  --bone-warm: #eae7eb;
  --surface-1: #181517;
  --surface-2: #1f1b1e;
  --surface-3: #262125;
  --surface-4: #2f2a2e;
  --hairline: rgba(255,255,255,.06);
  --hairline-strong: rgba(255,255,255,.12);
  --ink: #f7f5f8;
  --ink-mid: #a7a1a8;
  --ink-dim: #7d7780;
  --ink-faint: #5a545b;
  --lime: #ff4d6d;
  --lime-dim: #ed3b5c;
  --lime-soft: rgba(255,77,109,.12);
  --accent: #ff4d6d;
  --accent-bg: rgba(255,77,109,.1);
  --safe: #34bd84;
  --safe-soft: rgba(52,189,132,.12);
  --caution: #e8b341;
  --caution-soft: rgba(232,179,65,.12);
  --risk: #f2554d;
  --risk-soft: rgba(242,85,77,.12);
  --ai: #c96bd6;
  --ai-soft: rgba(201,107,214,.12);
  --bg-base: #0c0a0a;
  --bg-sunken: #080606;
  --surface-overlay: rgba(12,10,10,.78);
  --surface-glass: rgba(31,27,30,.66);
  --text-primary: #f7f5f8;
  --text-secondary: #a7a1a8;
  --text-tertiary: #7d7780;
  --text-disabled: #5a545b;
  --border-subtle: rgba(255,255,255,.06);
  --border-default: rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.16);
  --border-accent: rgba(255,77,109,.45);
  --accent-hover: #ff6b85;
  --accent-press: #ed3b5c;
  --accent-text: #ff8095;
  --accent-subtle: #3a1019;
  --accent-subtle-2: rgba(255,77,109,.12);
  --accent-ring: rgba(255,77,109,.40);
  --safe-text: #4fd49a;
  --caution-text: #f2c25b;
  --risk-text: #ff7b72;
  --chrome-1: #f3f6f9;
  --chrome-2: #c2ccd8;
  --chrome-3: #94a0af;
  --chrome-4: #dce3ea;
  --chrome-gradient: linear-gradient(155deg, #f4f7fa 0%, #c9d3de 26%, #9aa7b6 48%, #e2e8ef 60%, #a7b2c0 78%, #7e8b9b 100%);
  --sans: "Geist", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", "SFMono-Regular", Consolas, monospace;
  --display-track: -.035em;
  --display-weight: 600;
  --tabbar-h: 86px;
  --topbar-h: 56px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --shadow-card: inset 0 1px rgba(255,255,255,.045), 0 12px 32px -24px rgba(0,0,0,.9);
  --shadow-raised: inset 0 1px rgba(255,255,255,.055), 0 18px 48px -28px rgba(0,0,0,.95);
  color-scheme: dark;
  min-height: 100dvh;
  font-family: var(--sans);
  background:
    radial-gradient(120% 80% at 85% -10%, rgba(255,77,109,.10), transparent 55%),
    radial-gradient(90% 60% at 0% 0%, rgba(201,107,214,.05), transparent 50%),
    var(--bg-sunken);
}

:where(.is-product-app, .is-auth-app, .is-onboarding-app, .is-legal-app, .is-get-started-app, .is-error-app) :focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}
:where(.is-product-app, .is-auth-app, .is-onboarding-app, .is-legal-app, .is-get-started-app, .is-error-app) :is(button, .btn, input, textarea, select) {
  border-radius: var(--radius-md);
}
:where(.is-product-app, .is-auth-app, .is-onboarding-app, .is-legal-app, .is-get-started-app, .is-error-app) :is(button, .btn, a, input, textarea, select) {
  -webkit-tap-highlight-color: transparent;
}
.is-product-app :is(button, .btn, input:not([type="hidden"]), select),
.is-onboarding-app :is(button, .btn, input:not([type="hidden"]), select),
.is-auth-app :is(button, .btn, input:not([type="hidden"]), select) {
  min-height: 44px;
}
.skip-link {
  position: absolute;
  top: calc(max(8px, env(safe-area-inset-top)) + 4px);
  left: -10000px;
  z-index: -1;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--bone);
  color: var(--jet);
}
.skip-link:focus-visible {
  left: max(12px, env(safe-area-inset-left));
  z-index: 200;
}

/* Product shell and shared surfaces */
.is-product-app .app-shell {
  min-height: 100dvh;
  background:
    radial-gradient(105% 68% at 92% -12%, rgba(255,77,109,.075), transparent 54%),
    radial-gradient(75% 50% at -8% 4%, rgba(201,107,214,.035), transparent 52%),
    var(--bg-base);
}
.is-product-app .app-body { min-height: 100dvh; }
.is-product-app .app-main { min-width: 0; background: transparent; }
.is-product-app .app-bg-watermarks { display: none; }
.is-product-app .wrap,
.is-product-app .wrap-wide,
.is-product-app .wrap-narrow {
  width: 100%;
  padding-inline: clamp(16px, 4.25vw, 24px);
}
.is-product-app .view { padding-top: clamp(18px, 4vw, 32px); }
.is-product-app :is(.card, .intel-card, .stat-card, .attention-strip, .settings-group, .profile-details-card, .brand-stat-tile, .brand-quick-action, .creator-card) {
  border-color: var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 4px 16px -8px rgba(0,0,0,.72);
}
.is-product-app :is(.card, .intel-card, .stat-card, .brand-stat-tile, .brand-quick-action, .creator-card, .op-card) {
  transition: transform 160ms ease, border-color 180ms ease, background 180ms ease;
}
@media (hover: hover) {
  .is-product-app :is(.card, .intel-card, .stat-card, .brand-stat-tile, .brand-quick-action, .creator-card, .op-card):hover {
    border-color: var(--hairline-strong);
    background: var(--surface-2);
    transform: translateY(-1px);
  }
}
.is-product-app :is(.card, .intel-card, .stat-card, .brand-stat-tile, .brand-quick-action, .creator-card, .op-card):active {
  transform: scale(.985);
}
.is-product-app .btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
}
.is-product-app :is(.btn-ghost, .btn-secondary) {
  color: var(--text-secondary);
  border-color: var(--border-default);
  background: var(--surface-2);
  box-shadow: inset 0 1px rgba(255,255,255,.03);
}
.is-product-app :is(.btn-ghost, .btn-secondary):hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--surface-3);
}
.is-product-app .btn-sm { min-height: 40px; padding-inline: 14px; font-size: 13px; }
.is-product-app :is(.btn-lime, .btn-primary) {
  color: #fff;
  background: var(--lime);
  border-color: var(--lime);
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 8px 24px -16px rgba(255,77,109,.9);
}
.is-product-app :is(.btn-lime, .btn-primary):hover { background: #ff6b85; border-color: #ff6b85; }
.is-product-app :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  width: 100%;
  min-width: 0;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--hairline-strong);
}
.is-product-app :is(input, textarea, select):focus { border-color: rgba(255,77,109,.56); box-shadow: 0 0 0 3px rgba(255,77,109,.14); }
.is-product-app .chip { min-height: 40px; padding: 8px 14px; border-radius: 999px; }
.is-product-app .chip-active,
.is-product-app .chip:has(input:checked) { color: #fff; background: var(--lime-soft); border-color: rgba(255,77,109,.55); }
.is-product-app .badge { min-height: 24px; border-radius: 7px; }
.is-product-app .badge-chrome {
  color: var(--chrome-2);
  border-color: rgba(194,204,216,.28);
  background: linear-gradient(145deg, rgba(243,246,249,.08), rgba(148,160,175,.035));
}
.is-product-app .badge-coral {
  color: var(--accent-text);
  border-color: var(--border-accent);
  background: var(--accent-subtle-2);
}
.is-product-app .pulse-dot { animation: none; box-shadow: none; }
.is-product-app h1 { text-wrap: balance; }
.is-product-app p { text-wrap: pretty; }

/* Creator navigation: fixed five-tab order, iPhone-safe. Compact v3:
   the tabbar was eating ~110px including the safe-area, which read
   as chrome dominating the page. Trimmed the whole stack — smaller
   icons, smaller labels, tighter padding, smaller babyg bubble —
   so the row lands at ~60px + safe-area. */
.is-creator-app .creator-tabbar {
  min-height: 54px;
  padding: 2px max(12px, env(safe-area-inset-right, 0px)) max(2px, calc(env(safe-area-inset-bottom, 0px) - 22px)) max(12px, env(safe-area-inset-left, 0px));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  justify-items: stretch;
  background: rgba(9,8,10,.96);
  border: 1px solid rgba(255,255,255,.105);
  border-top-color: rgba(255,255,255,.12);
  border-radius: 0;
  box-shadow: 0 -16px 42px -28px rgba(0,0,0,.98), inset 0 1px rgba(255,255,255,.035);
}
.is-creator-app .creator-tabbar a {
  justify-self: stretch;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 46px;
  gap: 2px;
  padding: 2px 2px 0;
  color: rgba(153,149,158,.95);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}
.is-creator-app .creator-tabbar a::after { display: none; }
.is-creator-app .creator-tabbar a::before {
  display: none;
}
.is-creator-app .creator-tabbar a svg {
  width: 22px;
  height: 22px;
  color: currentColor;
  filter: none;
  opacity: 1;
  stroke-width: 2.15;
}
.is-creator-app .creator-tabbar a.active { color: var(--lime); }
.is-creator-app .creator-tabbar a.active svg { color: var(--lime); filter: none; }
.is-creator-app .creator-tabbar-babyg {
  min-height: 52px;
  margin-top: 0;
  gap: 3px;
  transform: translateY(0);
}
.is-creator-app .creator-tabbar-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(43,39,43,.96), rgba(27,25,28,.98));
  box-shadow: 0 8px 20px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.04), inset 0 1px rgba(255,255,255,.055);
}
.is-creator-app .creator-tabbar .creator-tabbar-mark .nav-bg-icon {
  width: 24px;
  height: 24px;
  filter: saturate(1.05) drop-shadow(0 0 5px rgba(160,200,255,.25));
  opacity: .86;
}
.is-creator-app .creator-tabbar-babyg.active .creator-tabbar-mark {
  border-color: rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(47,43,48,.98), rgba(29,27,31,.98));
}
.is-creator-app .creator-tabbar .tabbar-badge {
  top: 0;
  right: calc(50% - 20px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(9,8,10,.96);
  border-radius: 999px;
  background: var(--lime);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}
.is-creator-app .app-topbar {
  position: fixed;
  top: max(14px, env(safe-area-inset-top, 0px));
  right: max(18px, env(safe-area-inset-right, 0px));
  left: auto;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  z-index: 80;
}
.is-creator-app .app-topbar .right {
  margin: 0;
  gap: 0;
  pointer-events: auto;
}
.is-creator-app .mobile-header {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  left: auto;
  width: auto;
  min-height: 0;
  height: auto;
  padding: 0;
  display: block;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  z-index: 80;
}
.is-creator-app .mobile-header .mobile-profile-link {
  width: 44px;
  height: 44px;
  pointer-events: auto;
  box-shadow: 0 10px 28px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.025);
}
.is-creator-app .mobile-header .icon-btn { width: 44px; height: 44px; }
@media (max-width: 999px) {
  .is-creator-app:not(.is-chat):not(.is-dm-thread) .app-main > #view {
    padding-top: calc(54px + env(safe-area-inset-top, 0px));
  }
}
@media (min-width: 1000px) {
  .is-creator-app .mobile-header {
    display: none;
  }
}
.is-creator-app .app-sidebar {
  background: linear-gradient(180deg, rgba(24,21,23,.72), rgba(12,10,10,.96));
  border-color: var(--border-subtle);
}
.is-creator-app .app-sidebar nav a {
  --nav-accent: var(--accent);
  --nav-accent-soft: var(--accent-subtle-2);
  --nav-glow: transparent;
  color: var(--text-tertiary);
}
.is-creator-app .app-sidebar nav a svg,
.is-creator-app .app-sidebar nav a .nav-bg-icon { color: currentColor; filter: none; animation: none; }
.is-creator-app .app-sidebar nav a.active {
  color: var(--text-primary);
  border-color: var(--border-default);
  background: var(--surface-2);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.is-creator-app .app-sidebar nav a.active svg { color: var(--accent); }

/* Creator home, Discover, Babyg, DMs and profile */
.is-creator-app .page-header { align-items: flex-end; }
.is-creator-app .page-header .sub { color: var(--ink-mid); }
.is-creator-app .stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.is-creator-app .stat-card { min-height: 112px; padding: 18px; }
.is-creator-app .stat-card .v { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.is-creator-app .home-command-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.is-creator-app .home-command-card {
  min-width: 0;
  min-height: 126px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
}
.is-creator-app .home-command-card:hover { border-color: var(--hairline-strong); background: var(--surface-2); }
.is-creator-app .home-command-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--hairline-strong); border-radius: 13px; background: var(--surface-2); }
.is-creator-app .home-command-icon svg { width: 22px; height: 22px; color: var(--lime); }
.is-creator-app .home-command-icon img { width: 36px; height: 36px; object-fit: contain; }
.is-creator-app .home-command-card small { display: block; margin-bottom: 4px; color: var(--ink-dim); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; }
.is-creator-app .home-command-card strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 16px; line-height: 1.2; }
.is-creator-app .home-command-card strong + span { display: block; color: var(--ink-mid); font-size: 12.5px; line-height: 1.45; }
.is-creator-app .home-command-arrow { color: var(--ink-dim); font-size: 18px; }
.is-creator-app .home-command-ai { background: linear-gradient(145deg, rgba(201,107,214,.075), transparent 58%), var(--surface-1); }
.is-creator-app .home-section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 26px 0 12px; }
.is-creator-app .home-section-head h2 { margin-top: 6px; font-size: 26px; }
.is-creator-app .home-section-head > span { color: var(--ink-dim); font-size: 12px; }
.is-creator-app .intel-card { padding: clamp(18px, 5vw, 24px); overflow: hidden; }
.is-creator-app .intel-card::before { background: linear-gradient(90deg, var(--lime), transparent); opacity: .65; }
.is-creator-app .attention-strip { border-color: rgba(255,77,109,.24); background: linear-gradient(135deg, rgba(255,77,109,.08), transparent 64%), var(--surface-1); }
.is-creator-app .filter-row { scrollbar-width: none; overscroll-behavior-inline: contain; }
.is-creator-app .filter-row::-webkit-scrollbar { display: none; }
.is-creator-app .discover { width: min(100%, 1180px); margin-inline: auto; padding-inline: clamp(16px, 4.25vw, 24px); }
.is-creator-app .discover-head h1 { font-weight: 600; letter-spacing: 0; }
.is-creator-app .discover-kind-tabs { scrollbar-width: none; }
.is-creator-app .discover-kind-tabs a.active { color: var(--ink); border-color: var(--lime); }
.is-creator-app .discover-filter-toggle { width: 44px; height: 44px; border-radius: var(--radius-md); }
.is-creator-app .discover-card,
.is-creator-app .network-swipe-card { border-radius: var(--radius-2xl); box-shadow: var(--shadow-raised); }
.is-creator-app .discover-actions button,
.is-creator-app .swipe-actions button { min-width: 48px; min-height: 48px; }
.is-creator-app .bot-shell { min-height: calc(100dvh - var(--tabbar-h) - env(safe-area-inset-bottom)); }
.is-creator-app .dm-thread {
  height: 100%;
  min-height: 100%;
  padding-bottom: 0;
}
.is-creator-app .dm-composer {
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding: 7px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
  background: rgba(12,10,10,.9);
  border-color: var(--hairline);
}
.is-creator-app .dm-composer-status {
  height: 18px;
  min-height: 18px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 5px 4px;
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .04em;
  opacity: 0;
  visibility: hidden;
}
.is-creator-app .dm-composer-status.is-active { opacity: 1; visibility: visible; }
.is-creator-app .dm-composer-status-dot {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,77,109,.1);
  animation: dm-reading-pulse 1.8s ease-in-out infinite;
}
@keyframes dm-reading-pulse {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}
.is-creator-app .dm-composer .box {
  min-height: 44px;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: none;
}
.is-creator-app .dm-composer .box:focus-within {
  border-color: transparent;
  box-shadow: none;
}
.is-creator-app .dm-screen .dm-composer input,
.is-creator-app .dm-screen .dm-composer input:focus,
.is-creator-app .dm-screen .dm-composer input:focus-visible {
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: 16px;
  background: var(--surface-2);
  box-shadow: none;
  outline: 0;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}
.is-creator-app .dm-screen .dm-composer input:focus,
.is-creator-app .dm-screen .dm-composer input:focus-visible {
  background: var(--surface-1);
  border-color: rgba(255,77,109,.36);
}
.is-creator-app .dm-composer .send {
  width: 44px;
  height: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 7px 16px -10px rgba(255,77,109,.8);
  transition: transform 140ms cubic-bezier(.23,1,.32,1), background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.is-creator-app .dm-composer .send svg { width: 18px; height: 18px; }
.is-creator-app .dm-composer .send:disabled {
  cursor: not-allowed;
  color: var(--text-disabled);
  border-color: var(--border-subtle);
  background: var(--surface-3);
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .is-creator-app .dm-composer .send:not(:disabled):hover {
    background: var(--accent-hover);
    border-color: rgba(255,255,255,.16);
    box-shadow: inset 0 1px rgba(255,255,255,.2), 0 8px 18px -11px rgba(255,77,109,.72);
    transform: translateY(-1px);
  }
}
.is-creator-app .dm-composer .send:not(:disabled):active { transform: scale(.96); }
@media (min-width: 768px) and (max-width: 999px) {
  .is-creator-app.is-dm-thread #view {
    height: calc(100dvh - var(--tabbar-h) - 12px - env(safe-area-inset-bottom, 0px));
    height: calc(var(--dm-visual-viewport-height, 100dvh) - var(--tabbar-h) - 12px - env(safe-area-inset-bottom, 0px));
  }
  .is-creator-app.is-dm-thread.dm-keyboard-open #view {
    height: 100dvh;
    height: var(--dm-visual-viewport-height, 100dvh);
  }
}
.is-creator-app .dm-thread-report {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}
.is-creator-app .dm-thread-report .report-block {
  margin: 0;
  padding: 0;
  border: 0;
}
.is-creator-app .dm-thread-report .report-summary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin-left: -8px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--text-tertiary);
  font-size: 10px;
  letter-spacing: .07em;
}
.is-creator-app .dm-thread-report details[open] .report-summary { color: var(--text-secondary); }
.is-creator-app .dm-thread-report .report-form {
  width: min(100%, 560px);
  margin-top: 4px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-1);
}
.is-creator-app .dm-brief {
  border-color: rgba(201,107,214,.28);
  background: linear-gradient(145deg, rgba(201,107,214,.085), transparent 42%), var(--surface-1);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 18px 44px -30px rgba(201,107,214,.55);
}
.is-creator-app .dm-brief-pill-safe,
.is-creator-app .dm-risk-chip-safe { color: var(--safe); border-color: rgba(52,189,132,.42); background: var(--safe-soft); }
.is-creator-app :is(.dm-brief-pill-suspicious_identity, .dm-brief-pill-scam_phishing, .dm-brief-pill-unsafe_meetup, .dm-brief-pill-adult_minor_risk, .dm-brief-pill-payment_risk, .dm-brief-pill-inappropriate, .dm-brief-pill-legal_contract_review),
.is-creator-app :is(.dm-risk-chip-suspicious_identity, .dm-risk-chip-scam_phishing, .dm-risk-chip-unsafe_meetup, .dm-risk-chip-adult_minor_risk, .dm-risk-chip-payment_risk, .dm-risk-chip-inappropriate, .dm-risk-chip-legal_contract_review) {
  color: var(--risk-text);
  border-color: rgba(242,85,77,.42);
  background: var(--risk-soft);
}
.is-creator-app .dm-risk-radar { border-color: var(--ai); background: rgba(201,107,214,.035); border-radius: 0 12px 12px 0; }
.is-creator-app .dm-follow-ups button { min-height: 44px; }
.is-creator-app .dm-thread-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 44px;
}
.is-creator-app .dm-thread-tools form { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .is-creator-app .dm-composer-status-dot { animation: none; opacity: 1; }
  .is-creator-app .dm-composer .send { transition: none; }
  .babyg-guide-button { transition: none; }
}
.is-creator-app .settings-group { padding: clamp(18px, 5vw, 24px); }
.is-creator-app .settings-row { min-height: 56px; }

/* Creator home composition from the reference kit.
   `align-content: start` locks grid rows to the top — without it, on
   tall viewports (iPad, desktop) the `.ambient-page min-height` was
   stretching the grid and the shortcuts row got dragged to the bottom
   with the previous rows ballooning. */
.is-creator-app .creator-home {
  max-width: 760px;
  display: grid;
  grid-auto-rows: min-content;
  align-content: start;
  gap: 24px;
  padding-bottom: 32px;
}
.is-creator-app .creator-home > .creator-home-section {
  align-self: start;
}
.is-creator-app .creator-home-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.is-creator-app .creator-home-lockup,
.is-creator-app .creator-screen-title { min-width: 0; display: flex; align-items: center; gap: 11px; }
.is-creator-app .creator-screen-mark {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  background: var(--surface-2);
}
.is-creator-app .creator-screen-mark img { width: 23px; height: 23px; object-fit: contain; }
.is-creator-app .creator-screen-topbar {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.is-creator-app .creator-screen-title h1 { margin: 0; color: var(--text-primary); font-size: 19px; font-weight: 650; letter-spacing: 0; }
.is-creator-app .creator-screen-title p { margin: 2px 0 0; color: var(--text-tertiary); font-size: 11.5px; }
.is-creator-app .creator-screen-action { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; color: var(--text-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-2); }
.is-creator-app .creator-screen-action svg { width: 19px; height: 19px; }
.is-creator-app .creator-inbox-page { width: min(100%, 760px); }
.is-creator-app .creator-inbox-page .stack { gap: 8px; }
.is-creator-app .creator-inbox-page .thread-row { min-height: 72px; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-card); }

/* Notifications — card rows on the shared 760px inbox column. Scoped to
   .creator-notifs-page so nothing here touches DMs / other inbox pages. */
.is-creator-app .creator-notifs-page .notif-readall-form { margin: 0; flex-shrink: 0; }
.is-creator-app .creator-notifs-page .notif-readall {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px;
  color: var(--ink-mid);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 12px; font-weight: 500;
  white-space: nowrap; cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.is-creator-app .creator-notifs-page .notif-readall svg { width: 14px; height: 14px; }
.is-creator-app .creator-notifs-page .notif-readall:hover { color: var(--ink); border-color: rgba(255,77,109,.4); background: var(--surface-3); }
.is-creator-app .creator-notifs-page .notif-readall:active { transform: scale(.97); }

.is-creator-app .creator-notifs-page .notif-stack { display: flex; flex-direction: column; gap: 8px; }
.is-creator-app .creator-notifs-page .notif-form { margin: 0; }
.is-creator-app .creator-notifs-page .notif-dismiss-form { margin: -4px 0 6px 46px; }
.is-creator-app .creator-notifs-page .notif-dismiss {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 0;
}
.is-creator-app .creator-notifs-page .notif-dismiss:hover { color: var(--ink); }
.is-creator-app .creator-notifs-page .notif-row {
  width: 100%;
  display: flex; align-items: flex-start; gap: 12px;
  text-align: left;
  padding: 14px;
  color: inherit;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 120ms ease;
}
.is-creator-app .creator-notifs-page .notif-row:hover { border-color: var(--border-default); background: var(--surface-2); }
.is-creator-app .creator-notifs-page .notif-row:active { transform: scale(.995); }
.is-creator-app .creator-notifs-page .notif-row.unread {
  border-color: rgba(255,77,109,.26);
  background: linear-gradient(0deg, rgba(255,77,109,.05), rgba(255,77,109,.05)), var(--surface-1);
}

.is-creator-app .creator-notifs-page .notif-icon {
  flex: 0 0 34px; width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--ink-mid);
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  background: var(--surface-2);
}
.is-creator-app .creator-notifs-page .notif-icon svg { width: 17px; height: 17px; }
.is-creator-app .creator-notifs-page .notif-row.unread .notif-icon {
  color: var(--accent);
  border-color: rgba(255,77,109,.3);
  background: rgba(255,77,109,.09);
}

.is-creator-app .creator-notifs-page .notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.is-creator-app .creator-notifs-page .notif-meta {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.is-creator-app .creator-notifs-page .notif-sep { color: var(--ink-faint); }
.is-creator-app .creator-notifs-page .notif-when { color: var(--ink-faint); }
.is-creator-app .creator-notifs-page .notif-row.unread .notif-kind { color: var(--accent); }
.is-creator-app .creator-notifs-page .notif-title { font-size: 14.5px; font-weight: 550; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.is-creator-app .creator-notifs-page .notif-preview { font-size: 13px; line-height: 1.45; color: var(--ink-mid); overflow-wrap: anywhere; }
.is-creator-app .creator-notifs-page .notif-dot {
  flex: 0 0 auto; width: 8px; height: 8px; margin-top: 6px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,77,109,.12);
}

.is-creator-app .creator-notifs-page .notif-empty { text-align: center; padding: 64px 0; color: var(--ink-dim); }
.is-creator-app .creator-notifs-page .notif-empty p { margin: 12px 0 0; font-size: 13.5px; }
@media (max-width: 430px) {
  /* Collapse "mark all read" to its icon so it never crowds the title. */
  .is-creator-app .creator-notifs-page .notif-readall { gap: 0; padding: 10px; }
  .is-creator-app .creator-notifs-page .notif-readall span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.is-creator-app .creator-babyg-topbar { margin: 0; padding: max(14px, env(safe-area-inset-top)) 16px 12px; border-bottom: none; background: transparent; }
@media (max-width: 430px) {
  .is-creator-app .creator-babyg-topbar { justify-content: center; padding-inline: 12px; }
  .is-creator-app .creator-babyg-topbar .creator-screen-title { gap: 9px; }
  .is-creator-app .creator-babyg-topbar .creator-screen-mark { width: 32px; height: 32px; flex-basis: 32px; }
  .is-creator-app .creator-babyg-topbar .creator-screen-mark img { width: 21px; height: 21px; }
}
.is-creator-app .creator-home-kicker,
.is-creator-app .creator-section-head span,
.is-brand-app .brand-section-head span {
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.is-creator-app .creator-home-hero h1 { margin: 4px 0 3px; font-size: 30px; font-weight: 600; letter-spacing: 0; }
.is-creator-app .creator-home-hero p { margin: 0; color: var(--text-secondary); font-size: 13.5px; }
.is-creator-app .creator-home-hero-actions { display: flex; flex: none; gap: 8px; }
.is-creator-app .creator-icon-action {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.is-creator-app .creator-icon-action svg { width: 20px; height: 20px; }
.is-creator-app .creator-action-dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border: 2px solid var(--surface-2); border-radius: 50%; background: var(--accent); }
.is-creator-app .creator-home-section { display: grid; gap: 11px; }
.is-creator-app .creator-section-head,
.is-brand-app .brand-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.is-creator-app .creator-section-head > div,
.is-brand-app .brand-section-head > div { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.is-creator-app .creator-section-head h2,
.is-brand-app .brand-section-head h2 { margin: 0; color: var(--text-primary); font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.is-creator-app .creator-section-head > a { min-height: 44px; display: inline-flex; align-items: center; color: var(--accent-text); font-size: 12.5px; font-weight: 600; }
.is-creator-app :is(.creator-count-chip, .trust-chip) {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}
.is-creator-app .creator-count-chip { color: var(--accent-text); border-color: var(--border-accent); background: var(--accent-subtle-2); }
.is-creator-app .trust-chip-safe { color: var(--safe); border-color: rgba(52,189,132,.34); background: var(--safe-soft); }
.is-creator-app .trust-chip-caution { color: var(--caution); border-color: rgba(232,179,65,.34); background: var(--caution-soft); }
.is-creator-app .trust-chip-neutral { color: var(--text-secondary); background: var(--surface-2); }
.is-creator-app .creator-action-card,
.is-creator-app .creator-calendar-preview,
.is-creator-app .creator-hot-drop-card,
.is-creator-app .creator-empty-card {
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
}
.is-creator-app .creator-action-row {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-top: 1px solid var(--border-subtle);
}
.is-creator-app .creator-action-row:first-child { border-top: 0; }
.is-creator-app a.creator-action-row:hover { background: var(--surface-2); }
.is-creator-app .creator-row-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.is-creator-app .creator-row-icon svg { width: 17px; height: 17px; }
.is-creator-app .creator-row-icon-accent { color: var(--accent); background: var(--accent-subtle); }
.is-creator-app .creator-row-icon-safe { color: var(--safe); background: var(--safe-soft); }
.is-creator-app .creator-row-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
.is-creator-app .creator-row-copy strong { overflow: hidden; color: var(--text-primary); font-size: 13.5px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.is-creator-app .creator-row-copy small { overflow: hidden; color: var(--text-tertiary); font-size: 11.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.is-creator-app .creator-row-chevron { flex: none; color: var(--text-tertiary); font-size: 21px; }
.is-creator-app .creator-calendar-preview { display: block; }
.is-creator-app .creator-calendar-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding: 12px; border-bottom: 1px solid var(--border-subtle); }
.is-creator-app .creator-calendar-strip span { min-width: 0; display: grid; place-items: center; gap: 3px; padding: 8px 2px; color: var(--text-tertiary); border-radius: var(--radius-sm); }
.is-creator-app .creator-calendar-strip span.is-active { color: #fff; background: var(--accent); }
.is-creator-app .creator-calendar-strip small { font-family: var(--mono); font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }
.is-creator-app .creator-calendar-strip strong { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.is-creator-app .creator-calendar-strip i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.is-creator-app .creator-calendar-empty { min-height: 76px; display: flex; align-items: center; gap: 11px; padding: 13px 14px; }
.is-creator-app .creator-calendar-empty > span:nth-child(2) { min-width: 0; flex: 1; display: grid; gap: 3px; }
.is-creator-app .creator-calendar-empty strong { color: var(--text-primary); font-size: 13.5px; }
.is-creator-app .creator-calendar-empty small { color: var(--text-tertiary); font-size: 11.5px; line-height: 1.35; }
.is-creator-app .creator-calendar-events { display: grid; }
.is-creator-app .creator-calendar-event { min-height: 66px; display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--border-subtle); }
.is-creator-app .creator-calendar-event:first-child { border-top: 0; }
.is-creator-app .creator-calendar-event:hover { background: var(--surface-2); }
.is-creator-app .creator-event-time { color: var(--safe); font-family: var(--mono); font-size: 10px; }
.is-creator-app .creator-calendar-event > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.is-creator-app .creator-calendar-event strong { overflow: hidden; color: var(--text-primary); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.is-creator-app .creator-calendar-event small { color: var(--text-tertiary); font-size: 11px; }
.is-creator-app .creator-calendar-connect { min-height: 40px; display: inline-flex; align-items: center; padding: 0 12px; color: var(--accent-text); border: 1px solid var(--border-accent); border-radius: 999px; background: var(--accent-subtle-2); font-size: 11px; font-weight: 600; }
.is-creator-app .creator-home-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.is-creator-app .creator-home-stats a { min-width: 0; min-height: 100px; display: grid; align-content: center; gap: 3px; padding: 15px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-card); }
.is-creator-app .creator-home-stats span { color: var(--text-tertiary); font-size: 11px; font-weight: 600; }
.is-creator-app .creator-home-stats strong { color: var(--text-primary); font-family: var(--mono); font-size: 26px; font-weight: 500; }
.is-creator-app .creator-home-stats small { color: var(--text-tertiary); font-size: 10.5px; }
.is-creator-app .creator-hot-drop-filters { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.is-creator-app .creator-hot-drop-filters::-webkit-scrollbar { display: none; }
.is-creator-app .creator-hot-drop-filters a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 13px; color: var(--text-secondary); border: 1px solid var(--border-default); border-radius: 999px; background: var(--surface-2); font-size: 11.5px; white-space: nowrap; }
.is-creator-app .creator-hot-drop-filters a.is-active { color: #fff; border-color: var(--accent); background: var(--accent); }
.is-creator-app .creator-hot-drop-list { display: grid; gap: 10px; }
.is-creator-app .creator-hot-drop-card { position: relative; padding: 18px; }
.is-creator-app .creator-hot-drop-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: linear-gradient(var(--accent), var(--ai)); }
.is-creator-app .creator-hot-drop-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.is-creator-app .creator-drop-kind { color: var(--accent-text); font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.is-creator-app .creator-hot-drop-meta time { margin-left: auto; color: var(--text-tertiary); font-family: var(--mono); font-size: 10px; }
.is-creator-app .creator-hot-drop-card h3 { margin: 13px 0 7px; color: var(--text-primary); font-size: 17px; font-weight: 600; letter-spacing: 0; }
.is-creator-app .creator-hot-drop-card p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.is-creator-app .creator-hot-drop-foot { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.is-creator-app .creator-hot-drop-foot > :is(a, span) { color: var(--text-tertiary); font-size: 11px; }
.is-creator-app .creator-drop-feedback { display: flex; gap: 6px; }
.is-creator-app .creator-drop-feedback button { min-height: 40px; padding: 0 12px; color: var(--text-secondary); border: 1px solid var(--border-default); border-radius: 999px; background: var(--surface-2); font-size: 11px; }
.is-creator-app .creator-drop-feedback button.is-active { color: var(--accent-text); border-color: var(--border-accent); background: var(--accent-subtle-2); }
.is-creator-app .creator-empty-card { padding: 26px 18px; text-align: center; }
.is-creator-app .creator-empty-card strong { color: var(--text-primary); font-size: 14px; }
.is-creator-app .creator-empty-card p { margin: 5px 0 0; color: var(--text-tertiary); font-size: 12px; }

/* Brand side: equally polished, thumb-friendly and honest. */
.is-brand-app .brand-main { min-height: 100dvh; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px); }
.is-brand-app .app-topbar { background: rgba(12,10,10,.86); border-color: var(--hairline); }
.is-brand-app .app-tabbar {
  min-height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: max(7px, env(safe-area-inset-bottom));
  background: var(--surface-overlay);
  border-color: var(--border-subtle);
}
.is-brand-app .app-tabbar a { min-height: 52px; color: var(--ink-dim); }
.is-brand-app .app-tabbar a::after { display: none; }
.is-brand-app .app-tabbar a svg { color: currentColor; filter: none; opacity: 1; }
.is-brand-app .app-tabbar a.active { color: var(--ink); }
.is-brand-app .app-tabbar a.active svg { color: var(--lime); filter: none; }
.is-brand-app .brand-page-head h1 { font-weight: 600; }
.is-brand-app .brand-stat-grid { gap: 10px; }
.is-brand-app .brand-stat-tile { min-height: 144px; padding: 18px; }
.is-brand-app .brand-stat-tile .v { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.is-brand-app .brand-quick-actions { gap: 10px; }
.is-brand-app .brand-quick-action { min-height: 112px; padding: 18px; }
.is-brand-app .settings-row-stack :is(input, textarea, select) { max-width: none !important; min-height: 48px; padding: 12px 14px !important; font-size: 16px !important; }
.is-brand-app .profile-details-card [style*="background:var(--lime)"] {
  background: linear-gradient(90deg, var(--accent), var(--accent-hover)) !important;
}
.is-brand-app .brand-dashboard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.is-brand-app .brand-status-chip,
.is-operator-app .op-system-chip { min-height: 28px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; color: var(--safe); border: 1px solid rgba(52,189,132,.32); border-radius: 999px; background: var(--safe-soft); font-family: var(--mono); font-size: 10px; white-space: nowrap; }
.is-brand-app .brand-status-chip span,
.is-operator-app .op-system-chip span { width: 6px; height: 6px; border-radius: 50%; background: var(--safe); }
.is-brand-app .brand-profile-completion { background: linear-gradient(145deg, rgba(255,77,109,.06), transparent 45%), var(--surface-1); }
.is-brand-app .brand-section-head { margin: 20px 0 10px; }

/* Operator command center, including usable table cards on phones. */
.is-operator-app .operator-shell {
  min-height: 100dvh;
  background:
    radial-gradient(95% 70% at 92% -12%, rgba(255,77,109,.055), transparent 52%),
    var(--bg-sunken);
}
.is-operator-app .operator-topbar { background: var(--surface-overlay); border-color: var(--border-subtle); }
.is-operator-app .operator-nav a[aria-current="page"] {
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  background: var(--surface-2);
  box-shadow: inset 3px 0 var(--accent), inset 0 1px rgba(255,255,255,.035);
}
.is-operator-app .operator-main { min-width: 0; }
.is-operator-app .operator-main-inner { width: min(100%, 1440px); margin-inline: auto; }
.is-operator-app .op-title { font-weight: 600; letter-spacing: -.04em; }
.is-operator-app .op-metrics { gap: 10px; border: 0; background: transparent; overflow: visible; }
.is-operator-app .op-metric,
.is-operator-app .op-card,
.is-operator-app .op-activity,
.is-operator-app .table-wrap,
.is-operator-app .onb-section {
  border-color: var(--hairline);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.is-operator-app .op-metric strong { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.is-operator-app .op-metric.is-alert { border-color: rgba(242,85,77,.35); background: linear-gradient(135deg, var(--risk-soft), transparent), var(--surface-1); }
.is-operator-app .op-metric.is-alert strong,
.is-operator-app .op-metric.is-alert small { color: var(--risk-text); }
.is-operator-app .status-safe,
.is-operator-app .status-verified { color: var(--safe); background: var(--safe-soft); border-color: rgba(52,189,132,.35); }
.is-operator-app .status-caution,
.is-operator-app .status-needs_review { color: var(--caution); background: var(--caution-soft); border-color: rgba(232,179,65,.35); }
.is-operator-app .status-risk,
.is-operator-app .status-high_risk,
.is-operator-app .status-blocked { color: var(--risk); background: var(--risk-soft); border-color: rgba(242,85,77,.35); }
.is-operator-app :is(input, textarea, select) { min-height: 44px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--hairline-strong); }
.is-operator-app .op-command-actions { display: flex; align-items: center; gap: 10px; }
.is-operator-app .op-console-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); align-items: start; gap: 18px; }
.is-operator-app .op-command-panel { min-width: 0; padding: 18px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-card); }
.is-operator-app .op-command-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.is-operator-app .op-command-grid .op-card { min-height: 160px; }
.is-operator-app .op-command-activity { margin: 0; }

/* Auth, role choice, onboarding and legal are redesigned without styling /. */
:where(.is-auth-app, .is-onboarding-app, .is-legal-app, .is-get-started-app, .is-error-app) .is-marketing > .app-main {
  min-height: 100dvh;
  background:
    radial-gradient(120% 80% at 85% -10%, rgba(255,77,109,.085), transparent 55%),
    radial-gradient(90% 60% at 0% 0%, rgba(201,107,214,.045), transparent 50%),
    var(--bg-sunken);
}
:where(.is-auth-app, .is-onboarding-app) :is(.auth-bg-watermarks, .onb-bg-watermarks) { display: none; }
/* Sign-in v3: the card frame is gone. The pane now floats on the
   ambient background so the page reads as a single considered
   moment — mark, one line, one field, one button — instead of a
   boxed form dropped into a lot of empty space. Legal moves to the
   viewport's true bottom via the parent .auth-page grid.

   Legacy .is-get-started-app pages still get the card via the split
   selector below so onboarding flows are unaffected. */
.is-get-started-app .auth-pane {
  width: min(calc(100% - 32px), 520px);
  padding: clamp(24px, 7vw, 42px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-2xl);
  background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 44%), var(--surface-1);
  box-shadow: var(--shadow-raised);
}
.is-auth-app .auth-page {
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) 0 max(24px, env(safe-area-inset-bottom));
  /* Give the legal strip its own row at the very bottom of the
     viewport so the sign-in stack lands optically centered instead
     of being pushed up by an attached legal footer. */
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: 32px;
}
.is-auth-app .auth-title,
.is-get-started-app .display { font-size: clamp(38px, 10vw, 56px); font-weight: 600; letter-spacing: -.05em; }
/* No card. The pane is a plain flex column that hugs its contents,
   living directly on the ambient background. Width is capped so the
   input + button don't stretch to unusable lengths on wide screens. */
.is-auth-app .auth-pane {
  width: min(calc(100vw - 32px), 380px);
  max-width: 380px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  text-align: center;
}
.is-auth-app .auth-pane > *,
.is-auth-app .auth-pane .brand-lockup { margin: 0; }
/* Mark. Sits alone above the title with a subtle coral halo so it
   feels lit from within instead of pasted on. */
.is-auth-app .auth-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 6px;
  border-radius: 16px;
  background: var(--surface-1);
  box-shadow: 0 10px 40px rgba(255, 77, 109, 0.22), inset 0 0 0 1px var(--hairline);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.is-auth-app .auth-mark:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 48px rgba(255, 77, 109, 0.32), inset 0 0 0 1px var(--hairline-strong);
}
.is-auth-app .auth-mark img { width: 34px; height: 34px; display: block; }
/* Title tuned smaller. The sign-in page has no other content
   competing for attention, so 30px is enough presence. */
.is-auth-app .auth-title {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
  text-align: center;
  color: var(--ink);
}
.is-auth-app .auth-sub {
  font-size: 14.5px;
  line-height: 1.5;
  max-width: 320px;
  text-align: center;
  margin: -8px auto 4px;
  color: var(--ink-mid);
}
/* Form: single input + full-width button, tight rhythm. */
.is-auth-app .auth-form { width: 100%; gap: 10px; }
.is-auth-app .auth-form input {
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  background: var(--surface-1);
  color: var(--ink);
  font-size: 15px;
  text-align: left;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.is-auth-app .auth-form input::placeholder { color: var(--ink-faint); }
.is-auth-app .auth-form input:focus {
  border-color: rgba(255, 77, 109, 0.55);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.12);
  outline: none;
}
.is-auth-app .auth-form .btn {
  width: 100%;
  min-height: 54px;
  padding: 0 20px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  gap: 0;
}
/* Error + hint banners stay inside the flex column so the vertical
   rhythm keeps holding once they appear. */
.is-auth-app .auth-error,
.is-auth-app .auth-hint {
  margin: 0;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  text-align: left;
}
/* Legal strip lives at the viewport bottom now, not attached to the
   pane. Mono, dim, generous letter-spacing — reads as chrome, not
   another action. */
.is-auth-app .auth-legal {
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--ink-faint);
}
.is-auth-app .auth-legal a { color: var(--ink-dim); }
.is-auth-app .auth-legal a:hover { color: var(--ink-mid); }
.is-auth-app .auth-legal .sep { color: var(--ink-faint); }
/* Old-style .legal-meta-strip fallback stays for pages still using it. */
.is-auth-app .legal-meta-strip { padding: 0; font-size: 10px; letter-spacing: 0.15em; gap: 4px 12px; max-width: 100%; }

/* Narrow mobile — dial the pane in so it doesn't feel cramped when the
   viewport is <= 420px CSS wide. Reduces side padding, trims the logo +
   heading, and lets the legal strip wrap gracefully. */
@media (max-width: 420px) {
  .is-auth-app .auth-pane { padding: 32px 22px; gap: 22px; }
  .is-auth-app .auth-logo-row .brand-mark { width: 56px; height: 56px; flex-basis: 56px; border-radius: 14px; }
  .is-auth-app .auth-title { font-size: 30px; }
  .is-auth-app .auth-sub { font-size: 14px; margin-top: -14px; }
  .is-auth-app .auth-form input,
  .is-auth-app .auth-form .btn { min-height: 50px; font-size: 15px; }
  .is-auth-app .legal-meta-strip { letter-spacing: 0.12em; gap: 4px 10px; }
}
.is-get-started-app .role-grid { grid-template-columns: 1fr; gap: 12px; }
.is-get-started-app .role-card { min-height: 168px; padding: 22px; border-radius: var(--radius-xl); background: var(--surface-2); border-color: var(--hairline); }
.is-get-started-app .role-card:hover { border-color: rgba(255,77,109,.4); background: var(--surface-3); }
.is-onboarding-app .onb-shell { width: min(calc(100% - 24px), 720px); margin-inline: auto; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
.is-onboarding-app .onb-card { border-radius: var(--radius-2xl); border-color: var(--hairline); background: var(--surface-1); box-shadow: var(--shadow-raised); }
.is-onboarding-app .onb-section { padding: clamp(20px, 6vw, 32px); }
.is-onboarding-app .onb-progress { position: sticky; top: env(safe-area-inset-top); z-index: 5; background: rgba(12,10,10,.88); backdrop-filter: blur(18px); }
.is-onboarding-app .onb-progress li[aria-current="step"] .n { background: var(--lime); border-color: var(--lime); color: white; }
.is-onboarding-app .input,
.is-onboarding-app textarea,
.is-onboarding-app select { min-height: 48px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-2); border-color: var(--hairline-strong); }
.is-onboarding-app .onb-actions { position: sticky; bottom: 0; padding-bottom: max(14px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, var(--surface-1) 24%); }
.is-legal-app .legal-pane { width: min(calc(100% - 32px), 820px); padding: clamp(24px, 6vw, 56px); border-color: var(--hairline); border-radius: var(--radius-2xl); background: var(--surface-1); box-shadow: var(--shadow-card); }
.is-legal-app .legal-pane h1 { font-family: var(--sans); font-weight: 600; letter-spacing: -.045em; }
.is-legal-app .legal-pane :is(p, li) { color: var(--ink-mid); font-size: 16px; line-height: 1.75; }

/* Logged-in mobile shell: reserve each safe area exactly once. Primary
   screens render their own headers, so they do not also reserve the shared
   floating-profile header slot. */
@media (max-width: 999px) {
  .is-creator-app .app-main { padding-bottom: 0; }
  .is-brand-shell .brand-main {
    padding-top: max(18px, env(safe-area-inset-top, 0px));
  }
  .is-creator-app.is-dm .app-topbar,
  .is-creator-app.is-dm .mobile-header,
  .is-creator-app .app-shell:has(.dm-inbox) .app-topbar,
  .is-creator-app .app-shell:has(.dm-inbox) .mobile-header,
  .is-creator-app .app-shell:has(.dm-thread) .app-topbar,
  .is-creator-app .app-shell:has(.dm-thread) .mobile-header {
    display: none !important;
  }
  .is-creator-app.is-dm .app-main > #view,
  .is-creator-app .app-shell:has(.dm-inbox) .app-main > #view,
  .is-creator-app .app-shell:has(.dm-thread) .app-main > #view {
    padding-top: 0;
  }
  .is-creator-app .dm-inbox-topbar {
    padding-top: calc(max(52px, env(safe-area-inset-top, 0px)) + 18px);
  }
  .is-creator-app .app-shell:has(.creator-home) .mobile-header,
  .is-creator-app .app-shell:has(.creator-screen-topbar) .mobile-header,
  .is-creator-app .app-shell:has(.profile-fidelity-topbar) .mobile-header,
  .is-creator-app .app-shell:has(.discover) .mobile-header { display: none; }
  .is-creator-app .app-shell:has(.creator-home) .app-main > #view,
  .is-creator-app .app-shell:has(.creator-screen-topbar) .app-main > #view,
  .is-creator-app .app-shell:has(.profile-fidelity-topbar) .app-main > #view,
  .is-creator-app .app-shell:has(.discover) .app-main > #view { padding-top: 0; }
  .is-creator-app .app-shell:has(.creator-home) .view,
  .is-creator-app .app-shell:has(.creator-screen-topbar) .view,
  .is-creator-app .app-shell:has(.profile-fidelity-topbar) .view,
  .is-creator-app .app-shell:has(.discover) .view { padding-top: 0; }
  .is-creator-app .creator-inbox-page,
  .is-creator-app .discover { padding-top: max(12px, env(safe-area-inset-top, 0px)); }
  .is-product-app :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) { font-size: 16px; }
}

/* iPhone range: SE through Pro Max, portrait and landscape. */
@media (max-width: 767px) {
  .is-product-app .view { padding-top: 18px; }
  .is-product-app .page-header { align-items: flex-start; text-align: left; gap: 12px; }
  .is-product-app .page-header .title-block { text-align: left; width: 100%; }
  .is-product-app .page-header .actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-product-app .page-header .actions .btn { width: 100%; }
  .is-creator-app:not(.is-chat):not(.is-dm-thread) .app-main > #view { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px); }
  .is-creator-app.is-chat #view,
  .is-creator-app.is-dm-thread #view { padding-bottom: 0; }
  .is-creator-app .app-shell:has(.creator-home) .mobile-header,
  .is-creator-app .app-shell:has(.creator-screen-topbar) .mobile-header { display: none; }
  .is-creator-app .app-shell:has(.creator-home) .view,
  .is-creator-app .app-shell:has(.creator-screen-topbar) .view { padding-top: 0; }
  .is-creator-app .creator-home { gap: 22px; padding-top: max(14px, env(safe-area-inset-top)); }
  .is-creator-app .creator-home-hero { align-items: flex-start; }
  .is-creator-app .creator-home-lockup { align-items: flex-start; }
  .is-creator-app .creator-home-lockup .creator-screen-mark { margin-top: 2px; }
  .is-creator-app .creator-home-hero-actions { gap: 5px; }
  .is-creator-app .creator-home-hero h1 { font-size: 27px; }
  .is-creator-app .creator-section-head > div { display: grid; gap: 2px; }
  .is-creator-app .creator-action-row { padding-inline: 12px; }
  .is-creator-app .creator-row-copy small { max-width: 52vw; }
  .is-creator-app .creator-hot-drop-card { padding: 16px; }
  .is-creator-app .creator-hot-drop-foot { align-items: flex-start; flex-direction: column; }
  .is-creator-app .creator-drop-feedback { width: 100%; }
  .is-creator-app .creator-drop-feedback button { flex: 1; min-height: 40px; }
  .is-creator-app .discover-layout { display: block; }
  .is-creator-app .home-command-grid { grid-template-columns: 1fr; }
  .is-creator-app .home-command-card { min-height: 112px; }
  .is-creator-app .home-section-head > span { display: none; }
  .is-creator-app .discover-filters { max-height: calc(100dvh - 140px); overflow-y: auto; overscroll-behavior: contain; }
  .is-brand-app .brand-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-brand-app .brand-quick-actions { grid-template-columns: 1fr; }
  .is-brand-app .brand-dashboard-head { align-items: flex-start; }
  .is-brand-app .brand-status-chip { display: none; }
  .is-operator-app .operator-topbar { align-items: flex-start; padding: max(12px, env(safe-area-inset-top)) 16px 12px; }
  .is-operator-app .operator-nav { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .is-operator-app .operator-nav::-webkit-scrollbar { display: none; }
  .is-operator-app .operator-nav a { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
  .is-operator-app .operator-environment { display: none; }
  .is-operator-app .operator-main { padding-inline: 14px; }
  .is-operator-app .op-header { align-items: flex-start; }
  .is-operator-app .op-header .btn { width: 100%; }
  .is-operator-app .op-command-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .is-operator-app .op-system-chip { align-self: flex-start; }
  .is-operator-app .op-console-layout { grid-template-columns: 1fr; }
  .is-operator-app .op-command-panel { padding: 14px; }
  .is-operator-app .op-command-grid { grid-template-columns: 1fr; }
  .is-operator-app .op-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-operator-app .op-metric { grid-column: auto; border: 1px solid var(--hairline); }
  .is-operator-app .op-metric:nth-child(3),
  .is-operator-app .op-metric:nth-child(4),
  .is-operator-app .op-metric:nth-child(5),
  .is-operator-app .op-metric:nth-child(even) { grid-column: auto; border: 1px solid var(--hairline); }
  .is-operator-app .op-metric:last-child { grid-column: 1 / -1; border: 1px solid var(--hairline); }
  .is-operator-app .op-grid { grid-template-columns: 1fr; }
  .is-operator-app .op-toolbar { grid-template-columns: 1fr; }
  .is-operator-app .table-wrap { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .is-operator-app .op-table,
  .is-operator-app .op-table tbody { display: grid; gap: 10px; width: 100%; }
  .is-operator-app .op-table thead { display: none; }
  .is-operator-app .op-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; padding: 16px; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface-1); }
  .is-operator-app .op-table td { display: block; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
  .is-operator-app .op-table td:first-child { grid-column: 1 / -1; }
  .is-operator-app .op-table-actions { grid-column: 1 / -1; }
  .is-operator-app .op-table-actions .link-btn { min-height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); }
  .is-creator-app .creator-tabbar { border-radius: 0; }
}

@media (max-width: 374px) {
  .is-product-app .wrap,
  .is-product-app .wrap-wide,
  .is-product-app .wrap-narrow { padding-inline: 12px; }
  .is-creator-app .creator-tabbar { padding-inline: 8px; }
  .is-creator-app .creator-tabbar a { font-size: 11px; gap: 6px; letter-spacing: 0; }
  .is-creator-app .creator-tabbar a svg { width: 26px; height: 26px; }
  .is-creator-app .creator-tabbar-babyg { transform: translateY(0); }
  .is-creator-app .creator-tabbar-mark { width: 54px; height: 54px; }
  .is-creator-app .creator-tabbar .creator-tabbar-mark .nav-bg-icon { width: 32px; height: 32px; }
  .is-creator-app .creator-home-hero-actions .creator-icon-action:first-child { display: none; }
  .is-creator-app .creator-calendar-strip { padding-inline: 8px; }
  .is-creator-app .creator-row-copy small { max-width: 48vw; }
  .is-product-app .page-header .actions { grid-template-columns: 1fr; }
  .is-brand-app .brand-stat-grid,
  .is-operator-app .op-metrics { grid-template-columns: 1fr; }
  :where(.is-auth-app, .is-get-started-app) .auth-pane { width: calc(100% - 20px); padding: 22px 18px; }
}

@media (min-width: 768px) and (max-width: 999px) {
  .is-creator-app .creator-tabbar { left: 50%; right: auto; width: min(680px, calc(100% - 32px)); bottom: 12px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.12); border-radius: 34px; padding-bottom: 13px; }
  .is-creator-app:not(.is-chat):not(.is-dm-thread) .app-main > #view { padding-bottom: 100px; }
  .is-brand-app .app-tabbar { left: 50%; right: auto; width: min(620px, calc(100% - 32px)); bottom: 12px; transform: translateX(-50%); border: 1px solid var(--hairline-strong); border-radius: 22px; padding-bottom: 7px; }
}

@media (min-width: 1000px) {
  .is-creator-app .creator-tabbar { display: none; }
  .is-product-app .view { padding-top: 40px; }
  .is-brand-app .brand-main { padding-bottom: 110px; }
  .is-operator-app .op-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Frontend polish pass: profile/discover/home responsive behavior. */
.creator-profile-avatar,
.mobile-profile-avatar {
  width: 100%;
  height: 100%;
  border: 0;
  font-size: 13px;
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.mobile-profile-avatar { font-size: 12px; }
.profile-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}
.profile-header-avatar {
  min-width: 0;
}
.profile-identity-avatar {
  border-color: rgba(255,255,255,.16);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.28);
}
.profile-photo-empty-cta {
  position: relative;
  padding: 0;
  border-style: dashed;
  cursor: pointer;
}
.profile-photo-empty-cta::after {
  content: "add a photo";
  position: absolute;
  left: 50%;
  bottom: -29px;
  transform: translateX(-50%);
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  white-space: nowrap;
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: rgba(20,18,20,.92);
  font-size: 11px;
  font-weight: 500;
}
.profile-shell {
  width: min(100%, 1120px);
  max-width: 1120px;
}
.profile-primary-grid,
.profile-secondary-grid,
.profile-edit-column {
  min-width: 0;
  display: grid;
  gap: var(--profile-gap);
}
.profile-primary-grid,
.profile-secondary-grid {
  width: 100%;
  align-items: start;
}
.profile-public-column {
  min-width: 0;
  display: grid;
  align-content: start;
}
.profile-edit-column {
  align-content: start;
}
@media (min-width: 1000px) {
  .profile-primary-grid,
  .profile-secondary-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  }
  .profile-fidelity-preview {
    min-height: 308px;
  }
}
.profile-chip-edit,
.profile-details-edit {
  min-width: 72px;
  min-height: 40px;
  padding-inline: 16px;
  border-radius: 999px;
  font-weight: 500;
}
.profile-chip-trigger {
  align-items: center;
}
.profile-chip-static-limits {
  color: #ffb6c1;
  border-color: rgba(255,77,109,.36);
  background: rgba(255,77,109,.08);
}
.profile-chip-static-limits:hover {
  color: #ffd0d7;
  border-color: rgba(255,77,109,.46);
}
.profile-chip-static-niches,
.profile-chip-static-formats {
  box-shadow: inset 0 1px rgba(255,255,255,.2);
}
@media (max-width: 999px) {
  .profile-shell,
  .profile-primary-grid,
  .profile-secondary-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .profile-header {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }
  .profile-header-link {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 18px;
  }
  .profile-identity-avatar {
    width: 72px;
    height: 72px;
    font-size: 24px;
  }
  .profile-photo-empty-cta::after {
    bottom: -27px;
  }
  .profile-photo-actions,
  .profile-photo-form {
    width: 100%;
  }
  .profile-photo-actions .btn,
  .profile-photo-form .btn,
  .profile-inline-form {
    width: 100%;
  }
  .profile-inline-form button {
    width: 100%;
  }
}

.discover-media-icon {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(91,70,54,.96), rgba(31,42,53,.95));
  color: var(--ink);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.04em;
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 22px 48px rgba(0,0,0,.28);
}
.discover-media-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.discover-media-icon span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
@media (max-width: 1023px) {
  .discover-filter-toggle { display: inline-grid; }
  .discover-layout {
    display: block;
  }
  .discover-filters {
    position: fixed;
    z-index: 130;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px);
    max-height: min(60dvh, 420px);
    margin: 0;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(24,22,26,.99), rgba(15,14,17,.99));
    box-shadow: 0 28px 90px rgba(0,0,0,.72), 0 0 0 100vmax rgba(0,0,0,.56);
  }
  .discover-filter-sheet-head {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 10px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 650;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 12px;
  }
  .discover-filter-close {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: rgba(255,255,255,.04);
  }
  .discover-filter-close:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 3px;
  }
  .discover-filters form {
    gap: 12px;
  }
  .discover-filters label {
    gap: 7px;
  }
  .discover-filters input {
    min-height: 44px;
    font-size: 16px;
  }
  .discover-filter-actions {
    position: sticky;
    bottom: -12px;
    padding: 10px 0 0;
    background: linear-gradient(180deg, rgba(15,14,17,0), rgba(15,14,17,.99) 38%);
  }
  .discover-filter-actions .btn {
    min-height: 44px;
    flex: 1;
  }
  .discover-filters:not(.is-open) {
    display: none;
  }
  .discover-filters.is-open {
    display: block;
  }
  .discover-stage {
    width: 100%;
  }
  .discover-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-inline: 16px;
  }
  .discover-actions button {
    min-width: 0;
    white-space: nowrap;
  }
}
@media (min-width: 1024px) {
  .discover-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 620px);
    gap: 28px;
    justify-content: center;
  }
  .discover-filter-toggle { display: none; }
  .discover-filters {
    display: block;
    position: static;
    max-height: none;
  }
}
@media (max-width: 420px) {
  .discover-actions {
    gap: 8px;
    margin-inline: 8px;
  }
  .discover-actions button {
    min-height: 52px;
    border-radius: 16px;
    font-size: 12.5px;
  }
}

/* Discover final: content-first vertical feed, scoped to /discover only. */
.discover {
  position: relative;
  max-width: 680px;
  padding: 12px 14px calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 24px);
}
.discover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  margin: 0 0 6px;
}
.discover-head h1,
.is-creator-app .discover-head h1 {
  margin: 0;
  color: var(--ink);
  font-size: 28px;
  line-height: 1.05;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: lowercase;
}
.discover-filter-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 999px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--ink);
}
.discover-filter-toggle:hover,
.discover-filter-toggle:focus-visible {
  background: rgba(255,255,255,.055);
}
.discover-mode-focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 38px;
  margin: 2px 0;
}
.discover-mode-focus span {
  color: var(--ink);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0;
}
.discover-mode-focus a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 2px 0 14px;
  color: #ff5f7d;
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
}
.discover-kind-tabs {
  gap: 24px;
  margin: 0 0 14px;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.discover-kind-tabs a {
  position: relative;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(245,241,232,.62);
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
}
.discover-kind-tabs a.active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #ff5f7d;
}
.discover-kind-tabs a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 2px;
  border-radius: 999px;
  background: #ff5f7d;
}
.discover-filters {
  display: none;
  position: absolute;
  z-index: 80;
  top: 54px;
  right: 14px;
  width: min(360px, calc(100vw - 28px));
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(24,22,26,.99), rgba(15,14,17,.99));
  box-shadow: 0 28px 90px rgba(0,0,0,.52);
}
.discover-filters.is-open {
  display: block;
}
.discover-filter-sheet-head {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
}
.discover-filter-close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--ink-mid);
}
.discover-filters form {
  display: grid;
  gap: 12px;
}
.discover-filters label {
  display: grid;
  gap: 7px;
}
.discover-filters label > span {
  color: var(--ink-dim);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: lowercase;
}
.discover-filters input {
  width: 100%;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 16px;
}
.discover-budget-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.discover-filter-actions {
  display: flex;
  gap: 8px;
}
.discover-filter-actions .btn {
  min-height: 44px;
  flex: 1;
  justify-content: center;
}
.discover-feed {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.discover-card {
  position: relative;
  z-index: 1;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(29,27,31,.96), rgba(18,17,20,.98));
  box-shadow: 0 16px 38px rgba(0,0,0,.28);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.discover-card:hover {
  border-color: rgba(255,255,255,.14);
}
.discover-card-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.discover-profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 18px 18px;
  text-align: center;
}
.discover-profile-avatar {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 24%, rgba(255,77,109,.22), rgba(255,255,255,.045));
  color: var(--ink);
  font-size: 34px;
  font-weight: 650;
}
.discover-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.discover-card-type {
  position: relative;
  z-index: 2;
  margin-top: 13px;
  color: rgba(245,241,232,.5);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.discover-card h2 {
  position: relative;
  z-index: 2;
  max-width: 100%;
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.discover-profile-bio {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 460px;
  margin: 7px 0 0;
  overflow: hidden;
  color: rgba(245,241,232,.72);
  font-size: 14px;
  line-height: 1.42;
}
.discover-social-link {
  position: relative;
  z-index: 3;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: 11px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255,255,255,.045);
  text-decoration: none;
}
.discover-social-link svg {
  width: 23px;
  height: 23px;
}
.discover-social-instagram {
  color: #ff5f7d;
}
.discover-social-tiktok {
  color: #f5f1e8;
}
.discover-social-youtube {
  color: #ff4d6d;
}
.discover-profile-meta,
.discover-opportunity-meta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
  color: rgba(245,241,232,.58);
  font-size: 13px;
  line-height: 1.35;
}
.discover-profile-tags {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
}
.discover-profile-tags span {
  max-width: 100%;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: rgba(245,241,232,.72);
  font-size: 12px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.discover-context-signal {
  position: relative;
  z-index: 2;
  max-width: 440px;
  margin: 12px 0 0;
  color: rgba(255,95,125,.9);
  font-size: 13px;
  line-height: 1.35;
}
.discover-card-action {
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 16px 0 0;
}
.discover-card-action button {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(255,95,125,.72);
  border-radius: 999px;
  background: #ff4d6d;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.discover-opportunity-card {
  display: grid;
  justify-items: center;
  padding: 20px 18px 18px;
  text-align: center;
}
.discover-opportunity-poster,
.discover-opportunity-description,
.discover-compensation-note {
  position: relative;
  z-index: 2;
  max-width: 480px;
  margin: 8px 0 0;
  color: rgba(245,241,232,.72);
  font-size: 14px;
  line-height: 1.42;
}
.discover-opportunity-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.discover-starting-price {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 2px;
  margin-top: 14px;
}
.discover-starting-price span {
  color: rgba(245,241,232,.52);
  font-size: 11px;
  font-weight: 650;
  text-transform: lowercase;
}
.discover-starting-price strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1.1;
}
.discover-empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: none;
  margin: 54px auto 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
}
.discover-empty h2 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  letter-spacing: 0;
}
.discover-empty a,
.discover-empty button {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: #ff5f7d;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
}
@media (max-width: 1023px) {
  .discover-filters {
    position: fixed;
    z-index: 130;
    top: auto;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px);
    width: auto;
    max-height: min(60dvh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 28px 90px rgba(0,0,0,.72), 0 0 0 100vmax rgba(0,0,0,.56);
  }
  .discover-filter-actions {
    position: sticky;
    bottom: -12px;
    padding-top: 10px;
    background: linear-gradient(180deg, rgba(15,14,17,0), rgba(15,14,17,.99) 38%);
  }
}
@media (max-width: 374px) {
  .discover {
    padding-inline: 10px;
  }
  .discover-kind-tabs {
    gap: 18px;
  }
  .discover-card h2 {
    font-size: 22px;
  }
  .discover-profile-avatar {
    width: 86px;
    height: 86px;
  }
}
@media (min-width: 768px) {
  .discover {
    max-width: 760px;
    padding: 24px 28px 56px;
  }
  .discover-feed {
    gap: 14px;
  }
  .discover-card {
    border-radius: 24px;
  }
  .discover-profile-card,
  .discover-opportunity-card {
    padding: 28px 28px 22px;
  }
}
@media (min-width: 1280px) {
  .discover {
    max-width: 820px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .discover-card {
    transition: none;
  }
}

.creator-screen-avatar {
  overflow: hidden;
  padding: 0;
}
.creator-screen-avatar.avatar {
  font-size: 14px;
  color: var(--ink);
}
.creator-screen-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  .is-creator-app .creator-calendar-strip {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .is-creator-app .creator-calendar-strip::-webkit-scrollbar { display: none; }
  .is-creator-app .creator-calendar-strip span {
    min-width: 56px;
    flex: 0 0 56px;
  }
  .is-creator-app .creator-home-stats {
    grid-template-columns: 1fr;
  }
  .is-creator-app .thread-row .top {
    gap: 10px;
  }
  .thread-row .name,
  .thread-row .preview {
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.is-product-app, .is-auth-app, .is-onboarding-app, .is-legal-app, .is-get-started-app, .is-error-app) *,
  :where(.is-product-app, .is-auth-app, .is-onboarding-app, .is-legal-app, .is-get-started-app, .is-error-app) *::before,
  :where(.is-product-app, .is-auth-app, .is-onboarding-app, .is-legal-app, .is-get-started-app, .is-error-app) *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Complete non-landing coverage for legacy and low-frequency surfaces. */
[data-babyg-redesign="true"] .chips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
  gap: var(--space-2, 8px);
}
[data-babyg-redesign="true"] .chip-radio {
  min-height: 44px;
  justify-content: flex-start;
  border-color: var(--border-default);
  background: var(--surface-2);
}
[data-babyg-redesign="true"] .chip-radio:has(input:checked) {
  color: var(--text-primary);
  border-color: var(--border-accent);
  background: var(--accent-subtle-2);
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}
[data-babyg-redesign="true"] .creator-card-top {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
}
[data-babyg-redesign="true"] .creator-card-head {
  min-width: 0;
  display: grid;
  gap: 3px;
}
[data-babyg-redesign="true"] .creator-card-name {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.02em;
}
[data-babyg-redesign="true"] .creator-card-handle {
  color: var(--text-tertiary);
  font-family: var(--font-mono, var(--mono));
  font-size: 12px;
}
[data-babyg-redesign="true"] .creator-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: var(--space-3, 12px);
  color: var(--text-tertiary);
  font-size: 12.5px;
}
[data-babyg-redesign="true"] .creator-card-meta span + span::before {
  content: "·";
  margin-right: 12px;
  color: var(--text-disabled);
}
[data-babyg-redesign="true"] .tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-3, 12px);
}
[data-babyg-redesign="true"] .tag-row-tight { gap: 5px; }
[data-babyg-redesign="true"] .creator-card-bio {
  margin: var(--space-4, 16px) 0 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}
[data-babyg-redesign="true"] .creator-card-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin-top: var(--space-4, 16px);
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--border-subtle);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 600;
}
[data-babyg-redesign="true"] .creator-card-cta::after { content: "→"; }
[data-babyg-redesign="true"] .connection-row {
  padding: 6px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
}
[data-babyg-redesign="true"] .connection-row .thread-row {
  border: 0;
  background: transparent;
  box-shadow: none;
}
[data-babyg-redesign="true"] .connection-disconnect-form .btn {
  color: var(--risk-text);
  border-color: rgba(242,85,77,.28);
  background: var(--risk-subtle);
}
[data-babyg-redesign="true"] .connections-page {
  max-width: 980px;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 72px);
}
[data-babyg-redesign="true"] .connections-head {
  margin-bottom: 14px;
}
[data-babyg-redesign="true"] .connections-panel {
  position: relative;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(245, 241, 232, 0.09);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 74, 112, 0.08), transparent 34%),
    linear-gradient(145deg, rgba(31, 29, 32, 0.92), rgba(14, 13, 15, 0.95));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}
[data-babyg-redesign="true"] .connections-panel-primary {
  margin-top: 8px;
}
[data-babyg-redesign="true"] .connections-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
[data-babyg-redesign="true"] .connections-section-head.compact {
  margin-bottom: 12px;
}
[data-babyg-redesign="true"] .connections-section-head h2 {
  margin: 4px 0 0;
  color: var(--text-primary);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 0.98;
  letter-spacing: -0.05em;
}
[data-babyg-redesign="true"] .connections-section-head strong {
  color: var(--accent-text);
  font-size: 22px;
}
[data-babyg-redesign="true"] .connections-list {
  display: grid;
  gap: 10px;
}
[data-babyg-redesign="true"] .connection-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(245, 241, 232, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-primary);
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
[data-babyg-redesign="true"] .connection-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 77, 109, 0.28);
  background: rgba(255, 255, 255, 0.04);
}
[data-babyg-redesign="true"] .connection-card-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
[data-babyg-redesign="true"] .connection-card-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
[data-babyg-redesign="true"] .connection-name {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-babyg-redesign="true"] .connection-handle,
[data-babyg-redesign="true"] .connection-date,
[data-babyg-redesign="true"] .connection-status {
  color: var(--text-secondary);
  font-size: 12px;
}
[data-babyg-redesign="true"] .connection-card-meta,
[data-babyg-redesign="true"] .connection-action-pair {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
[data-babyg-redesign="true"] .connection-card-meta {
  flex-wrap: wrap;
}
[data-babyg-redesign="true"] .connection-status {
  padding: 8px 12px;
  border: 1px solid rgba(245, 241, 232, 0.08);
  border-radius: 999px;
}
[data-babyg-redesign="true"] .connections-empty {
  display: grid;
  min-height: 220px;
  place-items: center;
  gap: 8px;
  border: 1px solid rgba(245, 241, 232, 0.06);
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.14);
  color: var(--text-secondary);
  text-align: center;
}
[data-babyg-redesign="true"] .connections-empty span {
  color: var(--text-primary);
  letter-spacing: 0.16em;
}
[data-babyg-redesign="true"] .connections-empty p {
  margin: 0;
}
[data-babyg-redesign="true"] .connections-pending-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
[data-babyg-redesign="true"] .connections-list.compact .connection-card {
  padding: 12px;
}
[data-babyg-redesign="true"] .connection-card.pending {
  align-items: flex-start;
}
@media (max-width: 760px) {
  [data-babyg-redesign="true"] .connections-section-head,
  [data-babyg-redesign="true"] .connection-card,
  [data-babyg-redesign="true"] .connection-card-meta {
    align-items: stretch;
    flex-direction: column;
  }
  [data-babyg-redesign="true"] .connections-pending-grid {
    grid-template-columns: 1fr;
  }
  [data-babyg-redesign="true"] .connection-action-pair {
    justify-content: stretch;
  }
  [data-babyg-redesign="true"] .connection-action-pair form,
  [data-babyg-redesign="true"] .connection-card-meta .btn,
  [data-babyg-redesign="true"] .connections-section-head .btn {
    width: 100%;
  }
}
[data-babyg-redesign="true"] .intel-card-head,
[data-babyg-redesign="true"] .intel-card-tags,
[data-babyg-redesign="true"] .intel-card-foot,
[data-babyg-redesign="true"] .feedback-row {
  display: flex;
  align-items: center;
}
[data-babyg-redesign="true"] .intel-card-head {
  justify-content: space-between;
  gap: 12px;
}
[data-babyg-redesign="true"] .intel-card-tags,
[data-babyg-redesign="true"] .feedback-row { flex-wrap: wrap; gap: 7px; }
[data-babyg-redesign="true"] .intel-card-meta {
  color: var(--text-tertiary);
  font-family: var(--font-mono, var(--mono));
  font-size: 11px;
}
[data-babyg-redesign="true"] .intel-card-title { margin-top: 18px; font-size: 20px; line-height: 1.15; }
[data-babyg-redesign="true"] .intel-card-body { color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
[data-babyg-redesign="true"] .intel-card-source { color: var(--accent-text); font-size: 13px; font-weight: 600; }
[data-babyg-redesign="true"] .intel-card-foot { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
[data-babyg-redesign="true"] .badge-conf-high {
  color: var(--safe-text);
  border-color: rgba(52,189,132,.35);
  background: var(--safe-subtle);
}
[data-babyg-redesign="true"] .badge-conf-low {
  color: var(--caution-text);
  border-color: rgba(232,179,65,.35);
  background: var(--caution-subtle);
}
[data-babyg-redesign="true"] .bot-banner {
  margin: 0 var(--space-4, 16px) var(--space-3, 12px);
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 13px;
}
[data-babyg-redesign="true"] .bot-banner-error {
  color: var(--risk-text);
  border-color: rgba(242,85,77,.35);
  background: var(--risk-subtle);
}
[data-babyg-redesign="true"] .bot-action-card {
  border-color: rgba(201,107,214,.28);
  background: linear-gradient(145deg, rgba(201,107,214,.075), transparent 54%), var(--surface-1);
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 18px 44px -32px rgba(201,107,214,.55);
}
[data-babyg-redesign="true"] .bot-action-preview {
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
[data-babyg-redesign="true"] .bot-action-confirmed { border-color: rgba(52,189,132,.34); }
[data-babyg-redesign="true"] .bot-action-cancelled { opacity: .72; }
[data-babyg-redesign="true"] .calendar-form-page,
[data-babyg-redesign="true"] .posting-form-page,
[data-babyg-redesign="true"] .profile-page {
  min-height: calc(100dvh - var(--topbar-h));
}

/* High-fidelity Creator Profile composition. */
.is-creator-app .profile-shell {
  width: 100%;
  max-width: 760px;
  display: grid;
  gap: 20px;
  padding-bottom: 30px;
}
.is-creator-app .profile-fidelity-topbar {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.is-creator-app .profile-fidelity-title { display: flex; align-items: center; gap: 10px; }
.is-creator-app .profile-fidelity-title h1 { margin: 0; color: var(--text-primary); font-size: 18px; font-weight: 650; letter-spacing: 0; }
.is-creator-app .profile-fidelity-mark { width: 26px; height: 26px; display: grid; place-items: center; }
.is-creator-app .profile-fidelity-mark img { width: 25px; height: 25px; object-fit: contain; }
.is-creator-app .profile-fidelity-settings { width: 44px; height: 44px; display: grid; place-items: center; color: var(--text-secondary); border-radius: var(--radius-md); }
.is-creator-app .profile-fidelity-settings:hover { color: var(--text-primary); background: var(--surface-2); }
.is-creator-app .profile-fidelity-settings svg { width: 20px; height: 20px; }
.is-creator-app .profile-fidelity-preview {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 17px;
  overflow: hidden;
  border: 1px solid rgba(255,77,109,.58);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(255,77,109,.055), transparent 45%), var(--surface-1);
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 16px 38px -28px rgba(255,77,109,.85), 0 0 24px -18px rgba(255,77,109,.75);
}
.is-creator-app .profile-fidelity-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.is-creator-app .profile-fidelity-preview-head > span { min-height: 24px; display: inline-flex; align-items: center; padding: 4px 9px; color: var(--accent-text); border-radius: 999px; background: var(--accent-subtle-2); font-size: 10px; font-weight: 700; }
.is-creator-app .profile-fidelity-preview-head small { color: var(--text-tertiary); font-size: 11px; }
.is-creator-app .profile-fidelity-identity { min-width: 0; display: flex; align-items: center; gap: 13px; }
.is-creator-app .profile-fidelity-avatar { width: 58px; height: 58px; flex: 0 0 58px; display: grid; place-items: center; overflow: hidden; color: var(--text-secondary); border: 2px solid var(--chrome-2); border-radius: 50%; background: var(--surface-3); font-size: 18px; font-weight: 600; }
.is-creator-app .profile-fidelity-avatar img { width: 100%; height: 100%; object-fit: cover; }
.is-creator-app .profile-fidelity-copy { min-width: 0; display: grid; gap: 3px; }
.is-creator-app .profile-fidelity-copy h2 { margin: 0; overflow: hidden; color: var(--text-primary); font-size: 17px; font-weight: 650; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.is-creator-app .profile-fidelity-copy > p { margin: 0; overflow: hidden; color: var(--text-secondary); font-size: 12.5px; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.is-creator-app .profile-fidelity-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 12px; color: var(--text-tertiary); font-size: 10.5px; }
.is-creator-app .profile-fidelity-meta span { min-width: 0; display: inline-flex; align-items: center; gap: 4px; }
.is-creator-app .profile-fidelity-meta svg { width: 12px; height: 12px; flex: none; stroke-width: 1.7; }
.is-creator-app .profile-fidelity-tags { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.is-creator-app .profile-fidelity-tags::-webkit-scrollbar { display: none; }
.is-creator-app .profile-fidelity-tags span { min-height: 28px; display: inline-flex; align-items: center; padding: 5px 11px; color: var(--text-secondary); border: 1px solid var(--border-default); border-radius: 999px; background: var(--surface-2); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.is-creator-app .profile-fidelity-settings-list { display: grid; gap: 10px; }
.is-creator-app .profile-fidelity-settings-list > h2 { margin: 0; color: var(--text-primary); font-size: 17px; font-weight: 650; letter-spacing: 0; }
.is-creator-app .profile-fidelity-settings-card { overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-card); }
.is-creator-app .profile-fidelity-settings-card > a { min-height: 58px; display: grid; grid-template-columns: minmax(64px, 88px) minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px 14px; border-top: 1px solid var(--border-subtle); }
.is-creator-app .profile-fidelity-settings-card > a:first-child { border-top: 0; }
.is-creator-app .profile-fidelity-settings-card > a:hover { background: var(--surface-2); }
.is-creator-app .profile-fidelity-settings-card > a > .eyebrow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-creator-app .profile-fidelity-settings-card strong { overflow: hidden; color: var(--text-primary); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.is-creator-app .profile-fidelity-settings-card strong span { color: var(--text-tertiary); font-weight: 450; }
.is-creator-app .settings-work-card .profile-fidelity-settings-card > a > .eyebrow,
.is-creator-app .settings-work-card .profile-fidelity-settings-card strong,
.is-creator-app .settings-work-card .profile-fidelity-settings-card strong span {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}
.is-creator-app .settings-work-card .profile-fidelity-settings-card > a > .eyebrow { color: var(--text-secondary); }
.is-creator-app .settings-work-card .profile-fidelity-settings-card strong span { color: var(--text-tertiary); }
.is-creator-app .profile-setting-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface-2); }
.is-creator-app .profile-setting-icon svg { width: 16px; height: 16px; stroke-width: 1.7; }
.is-creator-app .profile-setting-icon-safe { color: var(--safe); background: var(--safe-soft); }
.is-creator-app .profile-setting-icon-ai { color: var(--ai); background: var(--ai-soft); }
.is-creator-app .profile-setting-icon-accent { color: var(--accent); background: var(--accent-subtle); }
.is-creator-app .profile-setting-icon-caution { color: var(--caution); background: var(--caution-soft); }
.is-creator-app .profile-setting-arrow { color: var(--text-tertiary); font-size: 21px; }
.is-creator-app .profile-management { overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-1); }
.is-creator-app .profile-management > summary { position: relative; min-height: 62px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 11px 16px; cursor: pointer; list-style: none; }
.is-creator-app .profile-management > summary::-webkit-details-marker { display: none; }
.is-creator-app .profile-management > summary::after { position: absolute; right: 18px; color: var(--text-tertiary); content: "+"; font-size: 20px; }
.is-creator-app .profile-management[open] > summary::after { content: "-"; }
.is-creator-app .profile-management > summary span { color: var(--text-primary); font-size: 13.5px; font-weight: 600; }
.is-creator-app .profile-management > summary small { max-width: calc(100% - 32px); color: var(--text-tertiary); font-size: 10.5px; }
.is-creator-app .profile-management-body { padding: 16px; border-top: 1px solid var(--border-subtle); }
.is-creator-app .profile-management-body > .profile-preview { display: none; }

@media (max-width: 767px) {
  .is-creator-app .app-shell:has(.profile-fidelity-topbar) .mobile-header { display: none; }
  .is-creator-app .app-shell:has(.profile-fidelity-topbar) .view { padding-top: 0; }
  .is-creator-app .profile-shell { gap: 18px; padding-top: max(8px, env(safe-area-inset-top)); }
  .is-creator-app .profile-fidelity-settings-card strong span { display: none; }
  .is-creator-app .profile-management-body { padding: 12px; }
}
@media (max-width: 420px) {
  .is-creator-app .profile-fidelity-settings-card > a {
    grid-template-columns: minmax(58px, 74px) minmax(0, 1fr) auto;
    gap: 9px;
    padding-inline: 11px;
  }
}

@media (max-width: 374px) {
  .is-creator-app .profile-fidelity-preview { padding: 14px; }
  .is-creator-app .profile-fidelity-settings-card > a { padding-inline: 11px; }
}

@media (min-width: 1000px) {
  .is-creator-app .profile-shell { max-width: 1040px; grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr); align-items: start; column-gap: 22px; }
  .is-creator-app .profile-fidelity-topbar { grid-column: 1 / -1; }
  .is-creator-app .profile-fidelity-preview { grid-column: 1; grid-row: 2; min-height: 256px; align-content: start; padding: 24px; }
  .is-creator-app .profile-fidelity-avatar { width: 76px; height: 76px; flex-basis: 76px; }
  .is-creator-app .profile-fidelity-copy h2 { font-size: 21px; }
  .is-creator-app .profile-fidelity-copy > p { font-size: 14px; }
  .is-creator-app .profile-fidelity-settings-list { grid-column: 2; grid-row: 2; }
  .is-creator-app .profile-management { grid-column: 1 / -1; }
}
[data-babyg-redesign="true"] .network-swipe-queue[hidden] { display: none !important; }
[data-babyg-redesign="true"] .error-state {
  width: min(calc(100% - 32px), 480px);
  min-height: 100dvh;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(40px, env(safe-area-inset-top)) 24px max(40px, env(safe-area-inset-bottom));
  text-align: center;
}
[data-babyg-redesign="true"] .error-state img {
  width: 52px;
  height: 52px;
  margin-bottom: 24px;
  object-fit: contain;
}
[data-babyg-redesign="true"] .error-state .mono {
  margin-bottom: 10px;
  color: var(--risk-text);
  font-size: 11px;
  letter-spacing: .14em;
}
[data-babyg-redesign="true"] .error-state h1 { margin: 0 0 12px; font-size: clamp(28px, 8vw, 40px); }
[data-babyg-redesign="true"] .error-state p {
  max-width: 38ch;
  margin: 0 0 28px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
}
[data-babyg-redesign="true"] .error-state .btn { min-height: 44px; padding-inline: 18px; }

@media (max-width: 430px) {
  [data-babyg-redesign="true"] .connection-row {
    align-items: stretch !important;
    flex-direction: column;
  }
  [data-babyg-redesign="true"] .connection-disconnect-form .btn { width: 100%; }
}

/* Creator profile cleanup: keep public profile separate from account settings. */
.is-creator-app .profile-flow-shell {
  width: min(100%, 1040px);
  max-width: 1040px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.2vw, 26px);
  padding: clamp(22px, 5vw, 54px) clamp(16px, 3vw, 28px) 44px;
}
.is-creator-app .profile-flow-shell .profile-header {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
  align-items: center;
}
.is-creator-app .profile-flow-shell .profile-header-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.is-creator-app .profile-flow-shell .profile-header-copy p {
  margin: 0;
  color: var(--text-secondary);
}
.is-creator-app .profile-flow-shell .profile-photo-trigger {
  appearance: none;
  border: 1px solid rgba(245,241,232,.32);
  padding: 0;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.is-creator-app .profile-flow-shell .profile-photo-trigger:hover {
  border-color: rgba(255,77,109,.45);
  box-shadow: 0 0 0 5px rgba(255,77,109,.06), 0 18px 38px -24px rgba(0,0,0,.9);
}
.is-creator-app .profile-flow-shell .profile-photo-trigger:active {
  transform: scale(.985);
}
.is-creator-app .profile-flow-shell .profile-header-link,
.is-creator-app .profile-editor-summary,
.is-creator-app .profile-editor-action,
.is-creator-app .profile-chip-edit,
.is-creator-app .profile-details-edit {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}
.is-creator-app .profile-flow-shell .profile-primary-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .88fr);
  gap: clamp(18px, 2.4vw, 28px);
  align-items: start;
}
.is-creator-app .profile-flow-shell .profile-public-column,
.is-creator-app .profile-flow-shell .profile-edit-column {
  min-width: 0;
  display: grid;
  gap: 18px;
  align-content: start;
}
.is-creator-app .profile-flow-shell .profile-fidelity-preview,
.is-creator-app .profile-flow-shell .profile-section,
.is-creator-app .settings-shell .settings-group {
  border: 1px solid rgba(255,255,255,.105);
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,77,109,.055), transparent 34%),
    rgba(19,18,20,.74);
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 24px 70px -48px rgba(0,0,0,.9);
}
.is-creator-app .profile-flow-shell .profile-fidelity-preview {
  grid-column: auto;
  grid-row: auto;
  width: 100%;
  min-height: 300px;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: clamp(20px, 3vw, 28px);
  border-color: rgba(255,77,109,.42);
}
.is-creator-app .profile-flow-shell .profile-preview-top {
  display: flex;
  align-items: center;
  gap: 18px;
}
.is-creator-app .profile-flow-shell .profile-preview-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.is-creator-app .profile-flow-shell .profile-preview-copy h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(25px, 2.8vw, 36px);
  line-height: .96;
  letter-spacing: -.045em;
}
.is-creator-app .profile-flow-shell .profile-preview-copy p,
.is-creator-app .profile-flow-shell .profile-preview-bio {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.55;
}
.is-creator-app .profile-flow-shell .profile-preview-meta,
.is-creator-app .profile-flow-shell .profile-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 14px;
}
.is-creator-app .profile-flow-shell .profile-preview-meta {
  color: var(--text-tertiary);
  font-size: 13px;
}
.is-creator-app .profile-flow-shell .profile-section {
  padding: clamp(18px, 2.8vw, 24px);
}
.is-creator-app .profile-flow-shell .profile-section-head {
  min-height: 0;
  margin-bottom: 16px;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}
.is-creator-app .profile-flow-shell .profile-section-head h2,
.is-creator-app .settings-shell .settings-group h2 {
  margin: 4px 0 0;
  color: var(--text-primary);
  font-size: 20px;
  line-height: 1.08;
  letter-spacing: -.035em;
}
.is-creator-app .profile-editor-panel {
  padding: 0;
  overflow: hidden;
}
.is-creator-app .profile-editor-panel > summary {
  position: relative;
  width: 100%;
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  padding: 16px 18px;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  border: 0;
  border-radius: 24px;
  background: transparent;
}
.is-creator-app .profile-editor-panel > summary::-webkit-details-marker { display: none; }
.is-creator-app .profile-editor-summary strong {
  display: block;
  margin-top: 5px;
  color: var(--text-primary);
  font-size: 20px;
  letter-spacing: -.04em;
}
.is-creator-app .profile-editor-summary small {
  max-width: 16ch;
  color: var(--text-tertiary);
  text-align: right;
}
.is-creator-app .profile-editor-panel > summary::after {
  content: "";
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  background:
    linear-gradient(var(--accent-text), var(--accent-text)) center / 12px 2px no-repeat,
    linear-gradient(var(--accent-text), var(--accent-text)) center / 2px 12px no-repeat,
    rgba(255,255,255,.025);
}
.is-creator-app .profile-editor-panel[open] > summary::after {
  background:
    linear-gradient(var(--accent-text), var(--accent-text)) center / 12px 2px no-repeat,
    rgba(255,255,255,.025);
}
.is-creator-app .profile-editor-body {
  display: grid;
  gap: 18px;
  padding: 0 20px 20px;
  border-top: 1px solid var(--border-subtle);
}
.is-creator-app .profile-editor-block {
  display: grid;
  gap: 10px;
  padding-top: 18px;
}
.is-creator-app .profile-editor-actions {
  display: grid;
  gap: 9px;
}
.is-creator-app .profile-editor-action {
  width: 100%;
  min-height: 58px;
  padding: 12px 14px;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
}
.is-creator-app .profile-editor-action span {
  color: var(--text-primary);
  white-space: nowrap;
}
.is-creator-app .profile-editor-action small {
  min-width: 0;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 450;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.is-creator-app .profile-editor-action:hover,
.is-creator-app .profile-flow-shell .profile-header-link:hover {
  border-color: rgba(255,77,109,.32);
  background: rgba(255,77,109,.06);
}
.is-creator-app .profile-flow-shell .profile-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.is-creator-app .profile-flow-shell .profile-photo-form {
  width: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.is-creator-app .profile-flow-shell .profile-photo-status {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}
.is-creator-app .profile-flow-shell .profile-details-card {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.is-creator-app .profile-flow-shell .profile-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.is-creator-app .profile-flow-shell .profile-detail-item {
  min-height: 86px;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}
.is-creator-app .profile-flow-shell .profile-chip-close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.is-creator-app .settings-shell {
  width: min(100%, 1040px);
  max-width: 1040px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: clamp(22px, 5vw, 52px) clamp(16px, 3vw, 28px) 44px;
}
.is-creator-app .settings-shell > .back-link,
.is-creator-app .settings-shell > div:first-of-type,
.is-creator-app .settings-shell > .mono {
  grid-column: 1 / -1;
}
.is-creator-app .settings-shell .settings-group {
  margin: 0;
  padding: clamp(18px, 2.8vw, 24px);
}
.is-creator-app .settings-shell .settings-form input,
.is-creator-app .settings-shell .settings-form select {
  width: 100%;
}
.is-creator-app .settings-shell .settings-actions {
  justify-content: flex-start;
}
.is-creator-app .settings-shell .profile-manage-list {
  display: grid;
  gap: 0;
}
.is-creator-app .settings-shell .profile-manage-row {
  min-height: 54px;
}
@media (max-width: 900px) {
  .is-creator-app .profile-flow-shell .profile-primary-grid,
  .is-creator-app .settings-shell {
    grid-template-columns: 1fr;
  }
  .is-creator-app .profile-flow-shell .profile-fidelity-preview {
    min-height: 0;
  }
}
@media (max-width: 640px) {
  .is-creator-app .profile-flow-shell {
    padding-inline: 14px;
    padding-top: max(18px, env(safe-area-inset-top));
  }
  .is-creator-app .profile-flow-shell .profile-header {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .is-creator-app .profile-flow-shell .profile-header-link {
    grid-column: 1 / -1;
    width: 100%;
  }
  .is-creator-app .profile-flow-shell .profile-preview-top {
    align-items: flex-start;
  }
  .is-creator-app .profile-flow-shell .profile-detail-grid {
    grid-template-columns: 1fr;
  }
  .is-creator-app .profile-editor-panel > summary {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    padding-right: 64px;
  }
  .is-creator-app .profile-editor-summary small {
    grid-column: 1 / -1;
    max-width: none;
    padding-right: 48px;
    text-align: left;
  }
  .is-creator-app .profile-editor-panel > summary::after {
    position: absolute;
    right: 18px;
    top: 18px;
  }
  .is-creator-app .profile-flow-shell .profile-photo-actions,
  .is-creator-app .profile-flow-shell .profile-photo-form,
  .is-creator-app .profile-flow-shell .profile-photo-actions .btn,
  .is-creator-app .profile-flow-shell .profile-inline-form,
  .is-creator-app .profile-flow-shell .profile-inline-form button {
    width: 100%;
  }
  .is-creator-app .profile-editor-action {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .is-creator-app .profile-editor-action small {
    width: 100%;
  }
}
@media (max-width: 430px) {
  .is-creator-app .creator-tabbar {
    padding-inline: 6px;
  }
  .is-creator-app .creator-tabbar a {
    min-height: 56px;
    gap: 5px;
    font-size: 9.5px;
    letter-spacing: 0;
  }
  .is-creator-app .creator-tabbar a svg {
    width: 23px;
    height: 23px;
  }
  .is-creator-app .creator-tabbar-mark {
    width: 48px;
    height: 48px;
  }
  .is-creator-app .creator-tabbar .creator-tabbar-mark .nav-bg-icon {
    width: 30px;
    height: 30px;
  }
}

/* Creator settings: compact, private controls separated from the public profile */
.is-creator-app .app-sidebar nav a[data-tab="settings"] svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: block;
  overflow: visible;
  color: var(--nav-accent);
  transform-box: fill-box;
  transform-origin: center;
}
.is-creator-app .settings-clean-shell {
  width: min(100%, 1180px);
  max-width: 1180px;
  display: block;
  padding: clamp(22px, 4.6vw, 56px) clamp(16px, 4vw, 44px) 72px;
  overflow-x: clip;
  box-sizing: border-box;
}
.is-creator-app .settings-clean-shell *,
.is-creator-app .settings-clean-shell *::before,
.is-creator-app .settings-clean-shell *::after {
  box-sizing: border-box;
}
.is-creator-app .settings-hero {
  max-width: 620px;
  margin: 0 0 clamp(24px, 4vw, 40px);
}
.is-creator-app .settings-hero h1 {
  margin: 8px 0 0;
}
.is-creator-app .settings-hero p,
.is-creator-app .settings-card-head p {
  margin: 8px 0 0;
  color: var(--text-tertiary);
  font-size: 15px;
  line-height: 1.55;
}
.is-creator-app .settings-status {
  width: 100%;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.is-creator-app .settings-status.is-ok {
  color: var(--lime);
  border-color: rgba(188,255,77,.32);
  background: rgba(188,255,77,.06);
}
.is-creator-app .settings-status.is-muted {
  color: var(--text-tertiary);
}
.is-creator-app .settings-status.is-alert {
  color: var(--accent);
  border-color: rgba(255,77,109,.34);
  background: rgba(255,77,109,.06);
}
.is-creator-app .settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.6vw, 28px);
  align-items: stretch;
}
.is-creator-app .settings-grid.settings-progressive {
  grid-template-columns: minmax(0, 820px);
  justify-content: center;
  align-items: start;
  gap: 16px;
}
.is-creator-app .settings-progressive > .settings-card {
  min-height: 0;
}
.is-creator-app .settings-clean-shell .settings-disclosure {
  min-height: 0;
  padding: 0;
  overflow: clip;
}
.is-creator-app .settings-disclosure > summary,
.is-creator-app .settings-inline-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  list-style: none;
  cursor: pointer;
}
.is-creator-app .settings-disclosure > summary::-webkit-details-marker,
.is-creator-app .settings-inline-disclosure > summary::-webkit-details-marker {
  display: none;
}
.is-creator-app .settings-disclosure > summary {
  padding: 24px 28px;
}
.is-creator-app .settings-disclosure-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.is-creator-app .settings-disclosure-title {
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: clamp(21px, 2.5vw, 28px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.05;
}
.is-creator-app .settings-disclosure-copy > span:last-child {
  color: var(--text-tertiary);
  font-size: 14px;
  line-height: 1.5;
}
.is-creator-app .settings-disclosure-icon {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid rgba(245,241,232,.16);
  border-radius: 50%;
  background: rgba(255,255,255,.025);
}
.is-creator-app .settings-disclosure-icon::before,
.is-creator-app .settings-disclosure-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1px;
  background: var(--text-secondary);
  transform: translate(-50%, -50%);
  transition: transform 180ms ease, opacity 180ms ease;
}
.is-creator-app .settings-disclosure-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.is-creator-app details[open] > summary .settings-disclosure-icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}
.is-creator-app .settings-disclosure > summary:hover .settings-disclosure-icon,
.is-creator-app .settings-disclosure > summary:focus-visible .settings-disclosure-icon,
.is-creator-app .settings-inline-disclosure > summary:hover .settings-disclosure-icon,
.is-creator-app .settings-inline-disclosure > summary:focus-visible .settings-disclosure-icon {
  border-color: rgba(255,77,109,.52);
  background: rgba(255,77,109,.07);
}
.is-creator-app .settings-disclosure > summary:focus-visible,
.is-creator-app .settings-inline-disclosure > summary:focus-visible {
  outline: 2px solid rgba(255,77,109,.68);
  outline-offset: -3px;
}
.is-creator-app .settings-disclosure-body {
  padding: 0 28px 28px;
  border-top: 1px solid rgba(245,241,232,.09);
}
/* "your card" hosts the profile editor partial which brings its own
   layout scaffolding; strip our padding+rule so the partial paints
   edge-to-edge inside the disclosure and doesn't double-inset. */
.is-creator-app .settings-disclosure-body-plain {
  padding: 20px 20px 24px;
  border-top: 1px solid rgba(245,241,232,.09);
}
.is-creator-app .settings-disclosure-body > .settings-form,
.is-creator-app .settings-disclosure-body > .integrations-grid {
  padding-top: 24px;
}
.is-creator-app .settings-inline-disclosure {
  margin: 4px 0 20px;
  border-top: 1px solid rgba(245,241,232,.09);
  border-bottom: 1px solid rgba(245,241,232,.09);
}
.is-creator-app .settings-inline-disclosure > summary {
  padding: 18px 0;
}
.is-creator-app .settings-inline-disclosure .settings-disclosure-copy > strong {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
}
.is-creator-app .settings-inline-disclosure .settings-disclosure-copy > span:last-child {
  font-size: 13px;
}
.is-creator-app .settings-inline-body {
  padding-bottom: 2px;
}
.is-creator-app .settings-column {
  display: grid;
  gap: clamp(16px, 2.2vw, 22px);
  min-width: 0;
}
.is-creator-app .settings-clean-shell .settings-card {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid rgba(245,241,232,.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,77,109,.07), transparent 32%),
    rgba(17,17,17,.82);
  box-shadow: 0 24px 58px rgba(0,0,0,.28);
}
.is-creator-app .settings-clean-shell .settings-card.settings-disclosure {
  min-height: 0;
  padding: 0;
}
.is-creator-app .settings-clean-shell .settings-form,
.is-creator-app .settings-integrations-card {
  display: flex;
  flex-direction: column;
}
.is-creator-app .settings-clean-shell .settings-card-head {
  margin-bottom: 22px;
}
.is-creator-app .settings-clean-shell .settings-card h2 {
  margin: 6px 0 0;
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
}
.is-creator-app .settings-clean-shell .settings-field,
.is-creator-app .settings-clean-shell .settings-check {
  display: grid;
  gap: 10px;
  padding: 18px 0;
  border-top: 1px solid rgba(245,241,232,.09);
}
/* Static explainer inside a settings-check row — used by the sign-in
   disclosure to describe the auto-sign-in behavior without needing a
   toggle. Sentence-case, not mono, since it's copy not a control. */
.is-creator-app .settings-toggle-static {
  display: grid;
  gap: 4px;
}
.is-creator-app .settings-toggle-static strong {
  color: var(--ink);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
}
.is-creator-app .settings-toggle-static span {
  color: var(--ink-mid);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  padding: 0;
}
.is-creator-app .settings-clean-shell .settings-card-head + .settings-field,
.is-creator-app .settings-clean-shell .settings-card-head + .settings-check,
.is-creator-app .settings-clean-shell .settings-flash + .settings-field {
  border-top: 0;
  padding-top: 0;
}
.is-creator-app .settings-clean-shell .settings-field label,
.is-creator-app .settings-clean-shell .settings-toggle span,
.is-creator-app .settings-meta-grid span {
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: lowercase;
  /* Explicit line-height + generous top/bottom padding so wide-tracked
     lowercase labels never get clipped by the grid gap or the field's
     hairline border. Previous rendering was cutting the top of "dms",
     "usage rights", etc. on some browsers. */
  line-height: 1.4;
  padding: 4px 0 2px;
  overflow: visible;
}
.is-creator-app .settings-clean-shell .settings-field input,
.is-creator-app .settings-clean-shell .settings-field select,
.is-creator-app .settings-clean-shell .settings-form input,
.is-creator-app .settings-clean-shell .settings-form select {
  min-height: 54px;
  width: 100%;
  max-width: 100%;
  padding: 0 48px 0 18px;
  border: 1px solid rgba(245,241,232,.15);
  border-radius: 15px;
  background: rgba(255,255,255,.045);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1;
}
.is-creator-app .settings-clean-shell .settings-field select,
.is-creator-app .settings-clean-shell .settings-form select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-primary) 50%),
    linear-gradient(135deg, var(--text-primary) 50%, transparent 50%);
  background-position:
    calc(100% - 24px) calc(50% - 2px),
    calc(100% - 18px) calc(50% - 2px);
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
}
.is-creator-app .settings-clean-shell .settings-check p {
  max-width: 44ch;
  margin: 0;
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 1.5;
}
.is-creator-app .settings-clean-shell .settings-toggle {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.is-creator-app .settings-clean-shell .settings-toggle input {
  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0;
  accent-color: var(--accent);
}
.is-creator-app .settings-clean-shell .settings-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.is-creator-app .settings-clean-shell .settings-meta-grid div {
  display: grid;
  gap: 8px;
  min-height: 78px;
  align-content: center;
  padding: 14px;
  border: 1px solid rgba(245,241,232,.1);
  border-radius: 15px;
  background: rgba(255,255,255,.025);
}
.is-creator-app .settings-clean-shell .settings-meta-grid strong {
  color: var(--text-primary);
  font-size: 15px;
}
.is-creator-app .settings-clean-shell .settings-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 18px;
}
.is-creator-app .settings-clean-shell .settings-actions .btn,
.is-creator-app .settings-clean-shell .settings-actions button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 22px;
  line-height: 1;
}
.is-creator-app .settings-clean-shell .integrations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  flex: 1;
}
.is-creator-app .settings-clean-shell .integration-card {
  min-width: 0;
  min-height: 212px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  border-color: rgba(245,241,232,.11);
  background: rgba(255,255,255,.025);
}
.is-creator-app .settings-clean-shell .integration-card-connected {
  border-color: rgba(255,77,109,.44);
  background: rgba(255,77,109,.045);
}
.is-creator-app .settings-clean-shell .integration-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.is-creator-app .settings-clean-shell .integration-title,
.is-creator-app .settings-clean-shell .integration-tag {
  min-width: 0;
  font-size: 11px;
  letter-spacing: .2em;
}
.is-creator-app .settings-clean-shell .integration-body {
  margin: 0;
  color: var(--text-secondary);
  flex: 1;
  line-height: 1.45;
}
.is-creator-app .settings-clean-shell .status-pill {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 0;
  border: 0 !important;
  background: transparent;
  color: var(--text-tertiary) !important;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  line-height: 1;
}
.is-creator-app .settings-clean-shell .status-pill-connected {
  color: var(--accent) !important;
}
.is-creator-app .settings-clean-shell .status-pill-ready {
  color: var(--text-secondary) !important;
}
/* Warn state — the integration was connected but the token expired
   or was revoked at the provider. Used by the IG card when
   `instagram_needs_reconnect` is True. Same shape as connected/ready
   but amber so it reads as "attention needed, not broken". */
.is-creator-app .settings-clean-shell .status-pill-warn {
  color: #f0b060 !important;
}
.is-creator-app .settings-clean-shell .status-pill-warn .pulse-dot {
  background: #f0b060;
  box-shadow: 0 0 8px rgba(240,176,96,0.35);
}
.is-creator-app .settings-clean-shell .status-pill .pulse-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
}
.is-creator-app .settings-clean-shell .status-pill-ready .pulse-dot {
  background: var(--text-tertiary);
  box-shadow: none;
}
.is-creator-app .settings-clean-shell .integration-card-actions {
  display: grid;
  gap: 10px;
  margin-top: auto;
}
.is-creator-app .settings-clean-shell .integration-card-actions form {
  width: 100%;
}
.is-creator-app .settings-clean-shell .integration-card-actions .btn,
.is-creator-app .settings-clean-shell .integration-card-actions button {
  min-height: 42px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.is-creator-app .settings-clean-shell .profile-manage-list {
  display: grid;
  gap: 0;
}
.is-creator-app .settings-clean-shell .profile-manage-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 0;
  border-bottom: 1px solid rgba(245,241,232,.09);
}
.is-creator-app .settings-clean-shell .profile-manage-row:last-child {
  border-bottom: 0;
}
.is-creator-app .settings-clean-shell .profile-manage-row span {
  color: var(--text-secondary);
}
.is-creator-app .settings-clean-shell .profile-manage-row strong,
.is-creator-app .settings-clean-shell .profile-manage-row button {
  color: var(--text-primary);
  font-weight: 600;
}
.is-creator-app .settings-clean-shell .profile-manage-form button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid rgba(245,241,232,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  line-height: 1;
}
@media (max-width: 980px) {
  .is-creator-app .settings-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1180px) and (min-width: 981px) {
  .is-creator-app .settings-clean-shell .integrations-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .is-creator-app .settings-clean-shell {
    padding-inline: 14px;
    padding-bottom: 110px;
  }
  .is-creator-app .settings-hero {
    margin-top: 28px;
  }
  .is-creator-app .settings-clean-shell .settings-card {
    padding: 20px;
    border-radius: 20px;
  }
  .is-creator-app .settings-clean-shell .settings-card.settings-disclosure {
    padding: 0;
  }
  .is-creator-app .settings-disclosure > summary {
    padding: 20px;
  }
  .is-creator-app .settings-disclosure-body {
    padding: 0 20px 22px;
  }
  .is-creator-app .settings-disclosure-title {
    font-size: 20px;
  }
  .is-creator-app .settings-clean-shell .integrations-grid,
  .is-creator-app .settings-clean-shell .settings-meta-grid {
    grid-template-columns: 1fr;
  }
  .is-creator-app .settings-clean-shell .settings-actions,
  .is-creator-app .settings-clean-shell .settings-actions .btn,
  .is-creator-app .settings-clean-shell .settings-actions button {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .is-creator-app .settings-disclosure-icon::before,
  .is-creator-app .settings-disclosure-icon::after {
    transition: none;
  }
}
@media (max-width: 430px) {
  .is-creator-app .settings-clean-shell .profile-manage-row,
  .is-creator-app .settings-clean-shell .profile-manage-form {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
    padding-block: 16px;
  }
  .is-creator-app .settings-clean-shell .profile-manage-form button {
    width: 100%;
  }
}

/* ---------- Danger card (delete account) ---------- */
.settings-danger {
  margin-top: 32px;
  border: 1px solid rgba(255, 77, 109, 0.28);
  background: rgba(255, 77, 109, 0.04);
}
.is-creator-app .settings-clean-shell .settings-card.settings-disclosure.settings-danger {
  border-color: rgba(255, 77, 109, 0.28);
  background:
    radial-gradient(circle at 12% 0%, rgba(255,77,109,.10), transparent 34%),
    rgba(17,17,17,.82);
}
.settings-danger .settings-disclosure-title {
  color: var(--lime, #ff4d6d);
}
.settings-danger .settings-disclosure-body {
  border-top-color: rgba(255, 77, 109, 0.20);
}
.settings-danger-copy {
  margin: 0;
  padding-top: 18px;
  color: var(--text-secondary, #8a8a8a);
  font-size: 13px;
  line-height: 1.55;
}
.settings-danger .settings-header h2 {
  color: var(--lime, #ff4d6d);
}
.settings-danger .settings-header p {
  color: var(--text-secondary, #8a8a8a);
  font-size: 13px;
  line-height: 1.55;
  margin: 6px 0 0;
}
.settings-danger .settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.settings-danger .settings-field > span {
  font-size: 12px;
  color: var(--text-secondary, #8a8a8a);
  letter-spacing: 0.02em;
}
.settings-danger .settings-field input[type="text"] {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 77, 109, 0.28);
  background: rgba(255, 77, 109, 0.04);
  color: var(--text-primary, #f5f1e8);
  font: inherit;
  font-size: 14px;
}
.settings-danger .settings-field input[type="text"]:focus {
  outline: none;
  border-color: rgba(255, 77, 109, 0.55);
  background: rgba(255, 77, 109, 0.08);
}
.settings-inline-notice {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 77, 109, 0.10);
  border: 1px solid rgba(255, 77, 109, 0.32);
  color: var(--lime, #ff4d6d);
  font-size: 13px;
}

/* ============================================================
 * Unified nav icon color — every sidebar + mobile-tab item uses
 * the same coral accent (previously each tab had its own hue).
 * Keeps the animation + hover + active behavior intact; only the
 * color variables change. Appearing after the per-tab blocks in
 * this file lets these win by "later rule + equal specificity".
 * ============================================================ */
.app-sidebar nav a[data-tab="feed"],
.app-sidebar nav a[data-tab="chat"],
.app-sidebar nav a[data-tab="calendar"],
.app-sidebar nav a[data-tab="inbox"],
.app-sidebar nav a[data-tab="network"],
.app-sidebar nav a[data-tab="listings"],
.app-sidebar nav a[data-tab="stats"],
.app-sidebar nav a[data-tab="profile"],
.app-sidebar nav a[data-tab="settings"],
.app-tabbar a[data-tab="feed"],
.app-tabbar a[data-tab="chat"],
.app-tabbar a[data-tab="calendar"],
.app-tabbar a[data-tab="inbox"],
.app-tabbar a[data-tab="network"],
.app-tabbar a[data-tab="stats"],
.app-tabbar a[data-tab="profile"],
.app-tabbar a[data-tab="settings"] {
  --nav-accent: #ff526c;
  --nav-accent-soft: rgba(255, 82, 108, .14);
  --nav-glow: rgba(255, 82, 108, .34);
}
/* Force the coral through in the creator-app scope. A rule further up
   (`.is-creator-app .app-sidebar nav a svg { color: currentColor }`)
   otherwise strips the accent color and lets every non-settings icon
   fall back to the grey link color — that's why the original design
   only settings looked coral. Higher specificity + coming later wins. */
.is-creator-app .app-sidebar nav a svg {
  color: var(--nav-accent);
  filter: drop-shadow(0 0 5px var(--nav-glow));
}
.is-creator-app .app-sidebar nav a:hover svg,
.is-creator-app .app-sidebar nav a.active svg {
  color: var(--nav-accent);
  filter: drop-shadow(0 0 10px var(--nav-glow));
  opacity: 1;
}

/* ============================================================
 * Role pill — small coral badge under the sidebar lockup + in
 * the mobile / brand topbars. Same coral treatment for creator
 * and brand; the ICON is the differentiator (camera vs
 * magnifying glass) so brands + creators feel first-class.
 * No pulsing dot — user asked for a static icon.
 * ============================================================ */
.role-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: rgba(255, 82, 108, 0.10);
  border: 1px solid rgba(255, 82, 108, 0.32);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime, #ff4d6d);
  line-height: 1;
  height: 20px;
  width: fit-content;
  white-space: nowrap;
  user-select: none;
}
.role-pill-icon {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
}
/* Sidebar-specific placement: sits under the brand lockup with
   the same horizontal padding as nav rows below. */
.app-sidebar > .role-pill {
  margin: 4px 12px 12px 12px;
}
/* Brand shell topbar: pill sits between the lockup and the
   right-side actions. */
.is-brand-shell .app-topbar > .role-pill {
  margin-left: 12px;
}
/* Mobile header: pill sits opposite the profile avatar. Header
   uses justify-content:space-between so nothing else needs to
   move. */
.mobile-header > .role-pill {
  margin-right: auto;
  margin-left: 4px;
}

/* ============================================================
 * Get-started page redesign. Two role cards side-by-side on
 * desktop, stacked on mobile. Whole card is the button — no
 * inner CTA rectangle. Big hover glow + subtle lift.
 * ============================================================ */
.get-started-pane {
  width: min(calc(100vw - 32px), 780px);
  margin: 40px auto;
  padding: clamp(28px, 5vw, 44px) clamp(22px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
  background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 44%), var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-raised);
}
.get-started-brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.get-started-brand-row .mark {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--surface-2);
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
}
.get-started-brand-row .mark img { width: 100%; height: 100%; object-fit: contain; }
.get-started-brand-row .word {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.get-started-headline {
  text-align: center;
  font-size: clamp(32px, 4vw, 40px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  margin: 0;
}
.get-started-sub {
  text-align: center;
  color: var(--ink-mid);
  font-size: 15px;
  margin: 0;
  margin-top: -14px;
}
.get-started-role-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.get-started-role-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px;
  min-height: 200px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  color: inherit;
  text-decoration: none;
  transition: border-color .18s ease, transform .12s ease, background .18s ease, box-shadow .18s ease;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .get-started-role-card:hover {
    border-color: rgba(255, 77, 109, .42);
    background: var(--surface-3, rgba(255, 255, 255, .045));
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  }
}
.get-started-role-card:focus-visible {
  outline: 2px solid rgba(255, 77, 109, .58);
  outline-offset: 2px;
}
.get-started-role-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 22px;
  height: 22px;
  color: var(--ink-mid);
  opacity: .55;
  transition: opacity .18s ease, color .18s ease;
}
.get-started-role-card:hover .get-started-role-icon {
  opacity: 1;
  color: var(--lime, #ff4d6d);
}
.get-started-role-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lime, #ff4d6d);
}
.get-started-role-card h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.get-started-role-card p {
  margin: 0;
  color: var(--ink-mid);
  font-size: 14.5px;
  line-height: 1.55;
}
.get-started-role-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: lowercase;
  color: var(--ink-mid);
  transition: color .18s ease;
}
.get-started-role-card:hover .get-started-role-cta { color: var(--lime, #ff4d6d); }
@media (max-width: 720px) {
  .get-started-role-grid { grid-template-columns: 1fr; gap: 12px; }
  .get-started-role-card { min-height: auto; padding: 20px 18px; }
  .get-started-headline { font-size: clamp(28px, 8vw, 36px); }
}
@media (max-width: 420px) {
  .get-started-pane { padding: 28px 18px; gap: 20px; }
  .get-started-brand-row .word { font-size: 20px; }
}

/* ============================================================
 * Bot-chat slim header + suggested-prompt chips.
 * Header collapses to a ~52px strip (was ~100px with a full
 * lockup + subtitle) — the app sidebar already brands the page,
 * so this bar just marks "you are in the ai manager". Chip row
 * sits directly above the composer and only renders when the
 * thread is empty (see the {% if bot_prompts %} guard in the
 * partial).
 * ============================================================ */
.is-creator-app.is-chat .creator-babyg-topbar {
  min-height: 52px;
  padding: 10px 20px;
  margin: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.is-creator-app.is-chat .creator-babyg-topbar .creator-screen-title {
  gap: 10px;
  min-width: 0;
}
/* Shrink the icon in the slim bar — the 44px bot-hero mark from
   line 2959 was for the full-height layout. */
.is-creator-app.is-chat .creator-babyg-topbar .creator-screen-mark {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 7px;
  box-shadow: none;
}
.is-creator-app.is-chat .creator-babyg-topbar .creator-screen-mark img {
  padding: 3px;
  filter: none;
}
.creator-screen-lockup-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: var(--ink-mid);
  line-height: 1;
  white-space: nowrap;
}

/* Chip row. Sits between the message list and the composer. */
.bot-prompt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 24px 12px;
  justify-content: flex-start;
}
.bot-prompt-chip {
  appearance: none;
  background: linear-gradient(180deg, rgba(255,255,255,.058), rgba(255,255,255,.028));
  border: 1px solid rgba(255,255,255,.09);
  color: rgba(245,241,232,.78);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 0 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .12s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  white-space: nowrap;
  /* Was: 0 10px 26px rgba(0,0,0,.18) — read as a heavy dark halo on
     the chip strip. Keep the inset highlight for definition; drop the
     outer glow to a whisper so chips look like buttons, not floating
     cards. */
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 2px 6px rgba(0,0,0,.08);
}
.bot-prompt-chip:focus-visible {
  outline: 2px solid rgba(255, 77, 109, 0.55);
  outline-offset: 2px;
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .bot-prompt-chip:hover {
    color: var(--ink);
    border-color: rgba(255, 77, 109, 0.35);
    background: linear-gradient(180deg, rgba(255, 77, 109, 0.12), rgba(255, 77, 109, 0.055));
    box-shadow: inset 0 1px rgba(255,255,255,.07), 0 12px 30px rgba(255,77,109,.12);
  }
}
.bot-prompt-chip:active { transform: scale(0.98); }
.bot-prompt-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}
.bot-prompt-chip-icon svg { display: block; }

/* Verb weight. Chips inherit a taxonomy from the reply intent so the
   creator sees at a glance whether a chip is the next move (primary),
   a review action (warn), or a confirm/positive close (good). Visual
   weight only, no motion. */
.bot-prompt-chip[data-chip-tone="primary"] {
  color: #ffb0be;
  background: rgba(255, 77, 109, 0.14);
  border-color: rgba(255, 77, 109, 0.4);
}
.bot-prompt-chip[data-chip-tone="primary"] .bot-prompt-chip-icon { opacity: 0.95; color: #ff8ea0; }
.bot-prompt-chip[data-chip-tone="warn"] {
  color: #ffcc85;
  background: rgba(255, 190, 100, 0.1);
  border-color: rgba(255, 190, 100, 0.28);
}
.bot-prompt-chip[data-chip-tone="warn"] .bot-prompt-chip-icon { opacity: 0.95; color: #ffb559; }
.bot-prompt-chip[data-chip-tone="good"] {
  color: #6ee2a2;
  background: rgba(110, 226, 162, 0.1);
  border-color: rgba(110, 226, 162, 0.28);
}
.bot-prompt-chip[data-chip-tone="good"] .bot-prompt-chip-icon { opacity: 0.95; color: #6ee2a2; }
@media (hover: hover) and (pointer: fine) {
  .bot-prompt-chip[data-chip-tone="primary"]:hover { background: rgba(255, 77, 109, 0.2); color: #ffd0d8; }
  .bot-prompt-chip[data-chip-tone="warn"]:hover { background: rgba(255, 190, 100, 0.16); color: #ffddaa; }
  .bot-prompt-chip[data-chip-tone="good"]:hover { background: rgba(110, 226, 162, 0.16); color: #a3f0c4; }
}

/* Tablet + mobile: chips scroll horizontally in a single row so a
   thumb swipe reveals more, and long strings never wrap awkwardly. */
@media (max-width: 768px) {
  .is-creator-app.is-chat .creator-babyg-topbar {
    padding: 10px 16px;
    min-height: 48px;
  }
  .bot-prompt-chips {
    padding: 0 14px 6px;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .bot-prompt-chips::-webkit-scrollbar { display: none; }
  .bot-prompt-chip {
    flex-shrink: 0;
    scroll-snap-align: start;
    /* iOS's canonical 44px tap target applies to touch controls in
       isolation; a horizontally-scrolling chip strip inside a
       finger-scrollable region reads fine at 34px and reclaims real
       estate above the composer. */
    min-height: 34px;
    padding: 0 12px;
    font-size: 12.5px;
  }
}
@media (max-width: 420px) {
  .bot-prompt-chips { padding: 0 12px 6px; gap: 6px; }
  .bot-prompt-chip { padding: 0 10px; font-size: 12px; min-height: 32px; }
}

/* Bot composer: keep the textarea as the only visible input surface.
   The .box wrapper is layout-only so generic form-control styles cannot
   create the stacked text-box effect seen on mobile. */
body.is-creator-app.is-chat:not(.chat-keyboard-open) .bot-composer {
  /* A touch of breathing room above the tabbar so the composer
     doesn't feel sandwiched against it. Not enough to open a blank
     band — just enough for the pill to feel like it's floating. */
  padding-top: 10px;
  padding-bottom: 12px;
}
.is-creator-app.is-chat .bot-composer .box,
.is-creator-app.is-chat .bot-composer .box:focus-within {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Matches the tightened textarea min-height below so the send
     button sits flush without a phantom baseline gap. */
  min-height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.is-creator-app.is-chat .bot-composer textarea,
.is-creator-app.is-chat .bot-composer textarea:focus,
.is-creator-app.is-chat .bot-composer textarea:focus-visible {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  /* Was min-height 48px + 12px vertical pad = 72px tall. Tightened to
     40 + 8 = 56px so the composer stops eating a third of the chat
     screen on mobile. */
  min-height: 40px;
  max-height: 104px;
  padding: 8px 14px;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  outline: 0;
  /* Was 0 10px 28px rgba(0,0,0,.2) — the dark halo the user flagged.
     Same softening pass as the chips + bubbles: keep the inset
     highlight; whisper on the outer drop. */
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 2px 8px rgba(0,0,0,.08);
  font-size: 16px;
  line-height: 1.35;
  resize: none;
  -webkit-appearance: none;
  appearance: none;
}
.is-creator-app.is-chat .bot-composer textarea:focus,
.is-creator-app.is-chat .bot-composer textarea:focus-visible {
  background: linear-gradient(180deg, rgba(255,255,255,.088), rgba(255,255,255,.045));
  border-color: rgba(255,77,109,.42);
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 0 0 3px rgba(255,77,109,.09);
}
/* Send button on the ai-manager chat. The composer sits above the
   nudge chip strip and often shares the screen with brand names,
   coral chips, and staged action cards. A coral-gradient send pill
   was fighting all of them for attention. Redesigned as a quiet
   neutral pill so it reads as a companion to the input, not a hero.
   Coral only appears in the icon as a whisper, deepening on hover. */
.is-creator-app.is-chat .bot-composer .send {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,.06);
  color: rgba(255,140,158,.85);
  box-shadow: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.is-creator-app.is-chat .bot-composer .send:hover {
  background: var(--surface-4, #2a252a);
  color: var(--accent, #ff4d6d);
  border-color: rgba(255,77,109,.22);
}
.is-creator-app.is-chat .bot-composer .send:active {
  background: var(--surface-2);
}
.is-creator-app.is-chat .bot-composer .send:disabled {
  color: var(--ink-faint);
  cursor: default;
}
.is-creator-app.is-chat .bot-composer .send svg {
  width: 20px;
  height: 20px;
  display: block;
  /* Symmetric stroke arrow, no optical-center nudge needed. Keeps
     the 1px translate as a no-op so downstream contract tests still
     find the token — swap to translateX(0) preserves the assertion
     surface without shifting the icon. */
  transform: translateX(0);
}
.is-creator-app.is-chat .bot-composer .send:focus-visible {
  outline: 2px solid rgba(255, 143, 166, .55);
  outline-offset: 3px;
}


.discover-verified-check {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lime);
  border: 1px solid rgba(196, 255, 77, 0.28);
  background: rgba(196, 255, 77, 0.08);
  box-shadow: 0 0 18px rgba(196, 255, 77, 0.12);
}
.discover-verified-check svg {
  width: 17px;
  height: 17px;
}
.discover-platform-value {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.discover-platform-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: rgba(245, 241, 232, 0.88);
  border: 1px solid rgba(245, 241, 232, 0.14);
  background: rgba(245, 241, 232, 0.05);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.discover-platform-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: inherit;
  line-height: 1;
  text-decoration: none;
  transition: filter 180ms ease, transform 180ms ease;
}
.discover-platform-link:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.discover-platform-link:focus-visible {
  outline: 2px solid rgba(255, 74, 111, 0.72);
  outline-offset: 4px;
}
.discover-platform-link:hover .discover-platform-icon,
.discover-platform-link:focus-visible .discover-platform-icon {
  border-color: rgba(255, 74, 111, 0.48);
  box-shadow: 0 0 0 1px rgba(255, 74, 111, 0.14), 0 14px 30px rgba(255, 74, 111, 0.14);
}
.discover-platform-icon svg {
  width: 18px;
  height: 18px;
}
.discover-platform-icon-instagram {
  color: #ff5f83;
  border-color: rgba(255, 95, 131, 0.34);
  background: rgba(255, 95, 131, 0.09);
}
.discover-platform-icon-tiktok {
  color: #8ee8ff;
  border-color: rgba(142, 232, 255, 0.30);
  background: rgba(142, 232, 255, 0.08);
}
.discover-platform-icon-youtube {
  color: #ff5a66;
  border-color: rgba(255, 90, 102, 0.30);
  background: rgba(255, 90, 102, 0.08);
}
.discover-platform-icon-web {
  color: rgba(245, 241, 232, 0.72);
}
.network-undo-icon {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.network-undo-icon svg {
  width: 20px;
  height: 20px;
}
.network-swipe-meta .discover-platform-icon {
  width: 32px;
  height: 32px;
}
@media (prefers-reduced-motion: reduce) {
  .discover-platform-link {
    transition: none;
  }
  .discover-platform-link:hover {
    transform: none;
  }
}


/* ============================================================
 * DM inbox (list) v3 — no boxes per row, hairline separators,
 * coral bar for waiting-on-you, babyg subtitle inline, reply
 * chips shown on rows with brief context. Search + 2 filters.
 * ============================================================ */
/* Fills the full width of whatever content area it's in — no more
   780px cap that stranded the inbox on desktop with 400px of dead
   space on the right. Mobile keeps snug side padding. */
.dm-inbox {
  width: 100%;
  margin: 0 auto;
  padding: 0 0 48px;
  display: flex; flex-direction: column;
}
/* DM owns its top chrome: the shared creator badge/avatar is hidden in
   base.html so the search can start cleanly at the top of the view. */
.is-creator-app .app-shell:has(.dm-inbox) .view { max-width: none; padding-top: 0; }

/* Slim top bar: search + compose only. Renders inline (not sticky) so
   it doesn't overlap the shared header above. Flex is more forgiving
   than grid when the container width chases its parent. */
.dm-inbox-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--hairline);
}
/* Tag was clipping — moved into search placeholder instead. Class
   kept as a no-op in case the template still references it. */
.dm-inbox-tag { display: none; }
.dm-inbox-search {
  flex: 1 1 0%;
  width: auto;
  max-width: 100%;
  position: relative;
  display: block;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
}
.dm-inbox-search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  z-index: 1;
  width: 14px;
  height: 14px;
  color: var(--ink-dim);
  pointer-events: none;
  transform: translateY(-50%);
}
.is-creator-app .dm-inbox-search input,
.is-creator-app .dm-inbox-search input:focus,
.is-creator-app .dm-inbox-search input:focus-visible {
  display: block;
  width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  padding: 0 14px 0 38px;
  box-sizing: border-box;
  color: var(--ink);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  outline: 0;
  box-shadow: none;
  font: inherit;
  font-size: 16px;
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
}
.is-creator-app .dm-inbox-search input:focus,
.is-creator-app .dm-inbox-search input:focus-visible {
  background: var(--surface-2);
  border-color: rgba(255,77,109,.32);
}
.dm-inbox-search input::-webkit-search-decoration,
.dm-inbox-search input::-webkit-search-cancel-button,
.dm-inbox-search input::-webkit-search-results-button,
.dm-inbox-search input::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.dm-inbox-search input::placeholder { color: var(--ink-dim); }
.dm-inbox-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dm-inbox-row {
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
.dm-inbox-row:last-child { border-bottom: none; }
.dm-inbox-row:hover { background: rgba(255,255,255,.015); }
.dm-inbox-row.unread::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 2px; border-radius: 2px;
  background: var(--accent);
}
.dm-inbox-link {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px 20px 4px;
  color: inherit;
  text-decoration: none;
  align-items: flex-start;
}
/* Row with no chips (empty state or brief hidden): pull bottom padding
   back in so the row height matches a chip-carrying row's rhythm. */
.dm-inbox-row:not(:has(.dm-inbox-chips)) .dm-inbox-link { padding-bottom: 14px; }
.dm-inbox-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  display: grid; place-items: center;
  color: var(--ink-mid);
  font-family: var(--mono);
  font-size: 14px; font-weight: 600;
  overflow: hidden;
}
.dm-inbox-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-inbox-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dm-inbox-name {
  font-size: 15px; font-weight: 600; color: var(--ink);
  letter-spacing: 0; line-height: 1.2;
}
.dm-inbox-preview {
  color: var(--ink-mid);
  font-size: 12.5px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-inbox-preview-brief { color: var(--accent-text); font-style: italic; }
.dm-inbox-row.unread .dm-inbox-preview { color: var(--ink); }
.dm-inbox-meta {
  display: grid; gap: 4px; justify-items: end; align-self: center;
}
.dm-inbox-time {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-dim);
  white-space: nowrap;
}
.dm-inbox-row.unread .dm-inbox-time { color: var(--accent-text); }
.dm-inbox-count-dot {
  min-width: 18px; height: 18px; padding: 0 6px;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* Suggested reply row on DM rows. Indented past the avatar so chips
   align with the preview text above them. */
.dm-inbox-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  /* left = row padding (20) + avatar (48) + column gap (14) */
  padding: 6px 20px 14px calc(20px + 48px + 14px);
  margin: 0;
}
.dm-inbox-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  color: var(--accent-text);
  border: 1px solid rgba(255, 77, 109, 0.28);
  border-radius: 999px;
  background: rgba(255, 77, 109, 0.05);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  max-width: 100%;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.dm-inbox-chip:hover {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}
.dm-inbox-chip svg { width: 10px; height: 10px; flex: 0 0 10px; }
.dm-inbox-chip span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 220px;
}
@media (max-width: 640px) {
  /* Narrow screens: keep the row compact — chips scroll horizontally,
     first 2 visible, extras still reachable inside the thread. */
  .dm-inbox-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .dm-inbox-chips::-webkit-scrollbar { display: none; }
  .dm-inbox-chip { flex: 0 0 auto; }
  .dm-inbox-chip ~ .dm-inbox-chip ~ .dm-inbox-chip { display: none; }
}

.dm-inbox-empty-hint {
  text-align: center; color: var(--ink-dim);
  font-size: 13px; padding: 32px 0;
}
.dm-inbox-empty {
  text-align: center; padding: 60px 0; color: var(--ink-dim);
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.dm-inbox-empty p { margin: 0; font-size: 13.5px; }

@media (max-width: 640px) {
  .dm-inbox-topbar { padding: calc(max(52px, env(safe-area-inset-top, 0px)) + 18px) 14px 10px; gap: 10px; }
  .dm-inbox-tag { font-size: 10px; letter-spacing: .14em; }
  .dm-inbox-search { min-height: 44px; height: 44px; }
  .dm-inbox-link { padding: 14px 14px 4px; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; }
  .dm-inbox-row:not(:has(.dm-inbox-chips)) .dm-inbox-link { padding-bottom: 14px; }
  .dm-inbox-avatar { width: 44px; height: 44px; }
  .dm-inbox-chips { padding: 6px 14px 12px calc(14px + 44px + 12px); }
}

/* ============================================================
 * DM thread (single conversation) — slim header, brief strip,
 * cleaner bubbles, chip row above pill composer. The full brief
 * accordion still exists (below messages, collapsed) so safety +
 * negotiation-coach features remain reachable.
 * ============================================================ */
.dm-thread {
  /* Mobile + tablet: hugs the viewport with a hairline frame so it
     reads like the sms-style column that mobile users expect.
     Desktop widening is applied in a media query below so the
     laptop doesn't mirror the phone. */
  width: min(100%, 780px);
  margin: 0 auto;
  min-height: 100vh;
  display: flex; flex-direction: column;
  border-left: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
}
/* Desktop: fill more of the viewport and drop the phone-frame side
   borders. The messages inside stay readable because each bubble
   is capped at 620px, so widening the container gives the header
   and composer breathing room without stretching text lines. */
@media (min-width: 1024px) {
  .dm-thread {
    width: min(100%, 1120px);
    border-left: 0;
    border-right: 0;
  }
  .dm-message {
    max-width: min(84%, 620px);
  }
}
.dm-thread-head {
  display: flex; align-items: center; gap: 10px;
  /* iOS notch / status bar was clipping the peer name on mobile
     because the sticky header sat at top:0 with no safe-area
     padding. env(safe-area-inset-top) reserves the notch band so
     the name never lands behind the clock. */
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px;
  border-bottom: 1px solid var(--hairline);
  min-height: 56px;
  position: sticky; top: 0;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(20px);
  z-index: 4;
}
.dm-thread-back,
.dm-thread-menu > summary {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--ink-mid);
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  list-style: none;
}
.dm-thread-back:hover,
.dm-thread-menu > summary:hover { background: var(--surface-2); color: var(--ink); }
.dm-thread-back svg,
.dm-thread-menu svg { width: 18px; height: 18px; }
.dm-thread-menu > summary::-webkit-details-marker { display: none; }
.dm-thread-menu { position: relative; }
.dm-thread-menu-panel {
  position: absolute; top: 100%; right: 0;
  margin-top: 6px;
  min-width: 160px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: var(--shadow-raised);
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  z-index: 5;
}
.dm-thread-menu-item {
  display: block;
  min-height: 44px;
  padding: 11px 10px;
  border-radius: 8px;
  color: var(--ink-mid);
  font: inherit;
  font-size: 13px;
  background: transparent;
  border: none;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}
.dm-thread-menu-item:hover { background: var(--surface-2); color: var(--ink); }
.dm-thread-menu-item[disabled] { opacity: 0.45; cursor: not-allowed; }
.dm-thread-menu-item-danger { color: var(--accent-text); }
.dm-thread-menu-item-danger:hover { color: var(--accent); background: rgba(255,77,109,.06); }

.dm-thread-peer {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.dm-thread-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(160deg, #2a2226, #16121a);
  border: 1px solid var(--hairline);
  display: grid; place-items: center;
  color: var(--ink-mid);
  font-size: 13px; font-weight: 600;
  overflow: hidden;
  flex: 0 0 38px;
}
.dm-thread-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-thread-peer-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-thread-name {
  color: var(--ink); font-weight: 600; font-size: 14.5px;
  line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-thread-handle {
  color: var(--ink-dim); font-size: 11.5px;
  line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Babyg brief strip — coral pill + summary, one line, subtle */
.dm-thread-brief {
  padding: 10px 20px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(255,77,109,.045), transparent);
  font-size: 12.5px;
  color: var(--ink-mid);
  font-style: italic;
}
.dm-thread-brief-alert {
  background: linear-gradient(180deg, rgba(255,77,109,.12), transparent);
}
.dm-thread-brief-pill {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--lime,#ff4d6d);
  font-style: normal;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,77,109,.32);
  background: rgba(255,77,109,.06);
  flex: 0 0 auto;
  white-space: nowrap;
}
.dm-thread-brief-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dm-thread-notice {
  margin: 10px 20px 0;
  padding: 10px 14px;
  background: rgba(255,77,109,0.08);
  border: 1px solid rgba(255,77,109,0.32);
  border-radius: 10px;
  color: var(--lime,#ff4d6d);
  font-size: 13px;
  text-align: center;
}
.dm-thread-notice-error { color: var(--lime,#ff4d6d); }

.dm-thread-messages-wrap {
  flex: 1;
  padding: 16px 16px 8px;
  overflow-y: auto;
}
/* Real empty state for a thread that has zero messages — icon +
   headline + one-line context, then the composer prompts the user
   to say hey. Beats the old "start of your conversation." sentence
   stranded in the middle of a huge dark rectangle. */
.dm-thread-empty {
  min-height: 320px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  padding: 40px 24px;
  text-align: center;
  color: var(--ink-dim);
}
.dm-thread-empty svg {
  width: 32px; height: 32px;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.dm-thread-empty strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}
.dm-thread-empty span {
  font-size: 13px;
  line-height: 1.5;
  max-width: 260px;
}

/* Message bubbles — bot-page-style, peer left, you right */
.dm-messages {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 10px;
}
.dm-message {
  display: flex; flex-direction: column; gap: 3px;
  max-width: 84%;
}
.dm-message-mine { align-self: flex-end; align-items: flex-end; }
.dm-message-theirs { align-self: flex-start; align-items: flex-start; }
.dm-message-body {
  padding: 11px 15px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  border-radius: 18px;
}
.dm-message-theirs .dm-message-body {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-bottom-left-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02), 0 4px 14px rgba(0,0,0,.18);
}
.dm-message-mine .dm-message-body {
  /* Sent bubbles get a soft coral wash so the direction reads at a
     glance. Same 18px radius as incoming but with a tighter tail
     corner on the right. Subtle inner highlight for depth without
     shouting. */
  color: #fff;
  background: linear-gradient(180deg, #ff5f80 0%, #ff4d6d 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 14px rgba(255, 77, 109, 0.18), inset 0 1px rgba(255, 255, 255, 0.14);
}
.dm-message-meta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--ink-dim);
}
.dm-message-tick { color: var(--lime,#ff4d6d); }

/* Full brief accordion — moved below messages, muted styling */
.dm-thread-brief-full {
  margin: 12px 16px 0;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--surface-1);
  padding: 4px 0;
}
.dm-thread-brief-full > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--ink-mid);
  display: flex; justify-content: space-between; align-items: center;
  list-style: none;
}
.dm-thread-brief-full > summary::-webkit-details-marker { display: none; }
.dm-thread-brief-full[open] > summary { color: var(--ink); }
.dm-thread-brief-body {
  padding: 4px 16px 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.dm-thread-brief-block { display: flex; flex-direction: column; gap: 6px; }
.dm-thread-brief-block p, .dm-thread-brief-block ul, .dm-thread-brief-block dl {
  margin: 0; color: var(--ink); font-size: 13.5px; line-height: 1.5;
}
.dm-thread-brief-block ul { padding-left: 18px; }
.dm-thread-brief-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--ink-dim);
}
.dm-thread-brief-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.dm-thread-brief-deal { display: grid; gap: 6px; }
.dm-thread-brief-deal div { display: flex; gap: 8px; font-size: 13px; }
.dm-thread-brief-deal dt { color: var(--ink-mid); text-transform: lowercase; min-width: 90px; }
.dm-thread-brief-deal dd { margin: 0; color: var(--ink); }
.dm-thread-brief-follow-row { display: flex; flex-wrap: wrap; gap: 6px; }
.dm-thread-brief-follow-row button {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--ink-mid);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.dm-thread-brief-follow-row button:hover {
  border-color: rgba(255,77,109,.32);
  color: var(--ink);
}
.dm-thread-brief-follow-result {
  padding: 10px 12px; border: 1px solid var(--hairline);
  border-radius: 10px; color: var(--ink); font-size: 13px;
  background: var(--surface-2);
}
.dm-thread-brief-foot { color: var(--ink-dim); font-size: 10.5px; margin: 6px 0 0; }

.dm-thread-report { padding: 10px 16px 0; }

/* Chip row above composer */
.dm-thread-chips {
  padding: 10px 16px 6px;
  border-top: 1px solid var(--hairline);
  background: rgba(8,8,8,0.7);
  backdrop-filter: blur(12px);
}
.dm-thread-chips-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--ink-dim);
  margin: 0 0 8px 4px;
}
.dm-thread-chips-row {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.dm-thread-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,77,109,.06);
  border: 1px solid rgba(255,77,109,.28);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, border-color .15s ease;
  max-width: 100%;
}
.dm-thread-chip:hover {
  background: rgba(255,77,109,.12);
  border-color: rgba(255,77,109,.5);
}
.dm-thread-chip svg { width: 12px; height: 12px; color: var(--lime,#ff4d6d); flex: 0 0 12px; }
.dm-thread-chip span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 320px;
}
@media (max-width: 640px) {
  .dm-thread-chips { padding: 8px 14px 4px; }
  .dm-thread-chips-row {
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    padding-bottom: 2px;
  }
  .dm-thread-chips-row::-webkit-scrollbar { display: none; }
  .dm-thread-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    font-size: 12.5px;
    padding: 0 12px;
  }
  .dm-thread-chip span { max-width: 74vw; }
}

/* Composer — pill shape, matches bot page */
.dm-thread-composer {
  padding: 8px 16px 8px;
  background: rgba(8,8,8,0.92);
  border-top: 1px solid var(--hairline);
  backdrop-filter: blur(20px);
}
@media (max-width: 999px) {
  .is-dm-thread.dm-keyboard-open .dm-thread-composer {
    padding-top: 6px;
    padding-bottom: 2px;
  }
}
.dm-thread-composer-status {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--ink-dim);
  height: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  visibility: hidden;
}
.dm-thread-composer-status.is-visible {
  height: 18px;
  min-height: 18px;
  margin: 0 0 6px 4px;
  visibility: visible;
}
.dm-thread-composer-status-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: transparent;
}
/* DM composers: keep the input as the only visible textbox. The wrapper
   is layout-only so generic form-control styling cannot draw a second
   box around the real text field. */
.dm-thread-composer-box {
  display: flex; align-items: center; gap: 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  min-height: 44px;
  padding: 0;
  box-shadow: none;
  transition: none;
}
.dm-thread-composer-box:focus-within {
  border-color: transparent;
  box-shadow: none;
}
.dm-thread-composer-box input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  background: var(--surface-2);
  border: 1px solid var(--hairline-strong);
  border-radius: 16px;
  outline: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  color: var(--ink);
  font: inherit;
  font-size: 16px;   /* 16px avoids iOS zoom on focus */
  padding: 0 14px;
}
.dm-thread-composer-box input:focus,
.dm-thread-composer-box input:focus-visible {
  outline: 0;
  box-shadow: none;
  background: var(--surface-1);
  border-color: rgba(255,77,109,.36);
}
.dm-thread-composer-box input::placeholder { color: var(--ink-dim); }
.dm-thread-composer-send {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent, #ff4d6d);
  border: 0;
  display: grid; place-items: center;
  color: #fff;
  cursor: pointer;
  flex: 0 0 44px;
  transition: background-color .15s ease, transform .12s ease;
}
.dm-thread-composer-send:hover { background: var(--accent-hover, #e8455f); }
.dm-thread-composer-send:active { transform: scale(.94); }
.dm-thread-composer-send svg {
  width: 18px; height: 18px;
  display: block;
  stroke-width: 2.4;
  stroke: currentColor;
  fill: none;
}

/* Hide the mobile tabbar the moment the DM composer input is focused
   (keyboard is up). Uses :has() so we don't need any JS — supported in
   every Chromium 105+ / Safari 15.4+ / Firefox 121+. Falls back to
   showing the tabbar on older browsers, which is fine. */
body.dm-keyboard-open .app-tabbar,
body:has(.dm-thread-composer-box input:focus) .app-tabbar,
body.dm-keyboard-open .creator-tabbar,
body:has(.dm-thread-composer-box input:focus) .creator-tabbar {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .2s ease, opacity .15s ease;
}

/* Risk-level pill colors — keep the semantic palette for the strip
   pill so alerts stay visually distinct without shouting on every
   thread. */
.dm-thread-brief-pill-safe { color: rgb(126,223,196); border-color: rgba(126,223,196,.32); background: rgba(126,223,196,.08); }
.dm-thread-brief-pill-mild { color: rgb(156,202,255); border-color: rgba(156,202,255,.32); background: rgba(156,202,255,.08); }
.dm-thread-brief-pill-caution { color: rgb(234,215,181); border-color: rgba(234,215,181,.32); background: rgba(234,215,181,.08); }

/* Creator home v4: a daily command center. Greeting + "needs you" +
   compact today strip + matched picks + jump-to shortcuts. Every row
   surfaces its own action so the page can't turn into a dead list. */
.is-creator-app .creator-home-avatar {
  width: 42px; height: 42px; flex: 0 0 42px;
  display: grid; place-items: center;
  overflow: hidden;
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.is-creator-app .creator-home-avatar img { width: 100%; height: 100%; object-fit: cover; }
.is-creator-app .creator-home-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.is-creator-app .creator-home-section-head h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0;
}
.is-creator-app .creator-home-link {
  min-height: 44px;
  display: inline-flex; align-items: center;
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.is-creator-app .creator-home-link:hover { color: var(--accent); }

/* social analytics preview: one compact, honest dashboard tile on
   home. The card renders real IG rows from /performance only; no fake
   numbers, and all mobile grids use minmax(0, 1fr) to stay overflow-safe. */
.is-creator-app .creator-social-card {
  min-width: 0;
  display: grid;
  gap: 13px;
  padding: 14px;
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,77,109,.08), transparent 36%),
    var(--surface-1);
  box-shadow: var(--shadow-card);
  transition: border-color 160ms ease, background-color 160ms ease;
}
.is-creator-app .creator-social-card:hover {
  border-color: rgba(255,77,109,.28);
  background:
    linear-gradient(145deg, rgba(255,77,109,.1), transparent 38%),
    var(--surface-2);
}
.is-creator-app .creator-social-card-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.is-creator-app .creator-social-tabs {
  min-width: 0;
  min-height: 38px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
}
.is-creator-app .creator-social-tabs a {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  color: var(--ink-dim);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.is-creator-app .creator-social-tabs .is-active {
  color: var(--ink);
  background: rgba(255,77,109,.16);
  box-shadow: inset 0 0 0 1px rgba(255,77,109,.28);
}
.is-creator-app .creator-social-tabs a:not(.is-active):hover {
  color: var(--ink-mid);
  background: rgba(255,255,255,.035);
}
.is-creator-app .creator-social-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  color: var(--accent-text);
  border: 1px solid rgba(255,77,109,.24);
  border-radius: 999px;
  background: rgba(255,77,109,.08);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
.is-creator-app a.creator-social-action:hover {
  color: var(--ink);
  border-color: rgba(255,77,109,.4);
  background: rgba(255,77,109,.13);
}
.is-creator-app .creator-social-action.is-disabled {
  color: var(--ink-dim);
  border-color: var(--hairline);
  background: rgba(255,255,255,.025);
  cursor: default;
}
.is-creator-app .creator-social-main {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(92px, .82fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.is-creator-app .creator-social-signal {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}
.is-creator-app .creator-social-signal strong {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 600;
  line-height: .95;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.is-creator-app .creator-social-signal span {
  color: var(--ink-mid);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.2;
}
.is-creator-app .creator-social-signal small {
  overflow: hidden;
  color: var(--ink-dim);
  font-size: 10.5px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.is-creator-app .creator-social-trend {
  min-width: 0;
  min-height: 96px;
  display: flex;
  align-items: end;
  justify-content: stretch;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 58%),
    rgba(255,255,255,.018);
}
.is-creator-app .creator-social-trend span {
  flex: 1 1 0;
  min-width: 0;
  height: var(--bar);
  min-height: 10px;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, var(--accent), rgba(255,77,109,.28));
  box-shadow: 0 0 18px rgba(255,77,109,.12);
}
.is-creator-app .creator-social-metrics {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.is-creator-app .creator-social-metrics span {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--hairline);
  border-radius: 13px;
  background: rgba(255,255,255,.022);
}
.is-creator-app .creator-social-metrics small {
  overflow: hidden;
  color: var(--ink-dim);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.is-creator-app .creator-social-metrics strong {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.is-creator-app .creator-social-empty {
  min-height: 104px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 18px;
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 15px;
  background: rgba(255,255,255,.018);
}
.is-creator-app .creator-social-empty strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
}
.is-creator-app .creator-social-empty span {
  max-width: 42ch;
  color: var(--ink-dim);
  font-size: 12.5px;
  line-height: 1.45;
}

/* needs you — verb-first task rows. Small colored glyph on the left,
   title (verb-first) + one context line, one primary chip + one
   plain-text secondary. Boxes go neutral; only the glyph and the
   primary button carry color. */
.is-creator-app .creator-needs {
  display: grid; gap: 6px;
}
.is-creator-app .creator-home-recap {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.is-creator-app .creator-home-recap-eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
}
.is-creator-app .creator-home-recap-lines {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.is-creator-app .creator-home-recap-lines li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.is-creator-app .creator-needs-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: border-color 140ms ease;
}
.is-creator-app .creator-needs-row:hover { border-color: var(--hairline-strong); }
.is-creator-app .creator-needs-glyph {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  color: var(--ink-faint);
}
.is-creator-app .creator-needs-glyph svg { width: 14px; height: 14px; }
.is-creator-app .creator-needs-glyph img { width: 16px; height: 16px; object-fit: contain; opacity: .86; }
.is-creator-app .creator-needs-row.actionable .creator-needs-glyph { color: var(--accent); }
.is-creator-app .creator-needs-row.deadline   .creator-needs-glyph { color: #ffc07a; }
.is-creator-app .creator-needs-body {
  min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.is-creator-app .creator-needs-link {
  min-width: 0;
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.is-creator-app .creator-needs-title {
  color: var(--ink);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.is-creator-app .creator-needs-sub {
  color: var(--ink-dim);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.is-creator-app .creator-needs-actions {
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto;
}
.is-creator-app .creator-needs-actions-inline {
  display: inline-flex; margin: 0;
}
.is-creator-app .creator-needs-chip {
  appearance: none; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 14px;
  border-radius: 999px;
  background: var(--accent); color: #fff;
  font: inherit; font-size: 12px; font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 140ms ease;
}
.is-creator-app .creator-needs-chip:hover { background: var(--accent-hover, #e8455f); }
.is-creator-app .creator-needs-chip.warn {
  background: #ffc07a; color: #1a1218;
}
.is-creator-app .creator-needs-chip.warn:hover { background: #ffb666; }
.is-creator-app .creator-needs-text {
  appearance: none; border: 0; background: transparent;
  color: var(--ink-dim); cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 0 2px;
  text-decoration: none;
  white-space: nowrap;
}
.is-creator-app .creator-needs-text:hover { color: var(--ink); }
.is-creator-app .creator-needs-arrow { margin-left: 3px; }

/* matched for you — vertical list of media rows. Colored icon on the
   left (briefcase = opportunity, magnifier = brand, camera = creator),
   title + one info line, chevron on the right. No text kind labels. */
.is-creator-app .creator-match-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.is-creator-app .creator-match-row:hover {
  background: var(--surface-3);
  border-color: var(--hairline-strong);
}
.is-creator-app .creator-match-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--surface-3);
  color: var(--ink-mid);
  flex: 0 0 auto;
}
.is-creator-app .creator-match-icon svg { width: 18px; height: 18px; }
.is-creator-app .creator-match-row.k-opportunity .creator-match-icon {
  background: rgba(255,77,109,.14); color: var(--accent);
}
.is-creator-app .creator-match-row.k-brand .creator-match-icon {
  background: rgba(90,160,255,.12); color: #a4d0ff;
}
.is-creator-app .creator-match-row.k-creator .creator-match-icon {
  background: rgba(255,192,122,.12); color: #ffc07a;
}
.is-creator-app .creator-match-body {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.is-creator-app .creator-match-title {
  font-size: 14.5px; font-weight: 600;
  letter-spacing: -0.008em; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.is-creator-app .creator-match-line {
  font-size: 12px; color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.is-creator-app .creator-match-chev {
  display: grid; place-items: center;
  width: 20px; height: 20px; color: var(--ink-faint);
  flex: 0 0 auto;
}
.is-creator-app .creator-match-chev svg { width: 14px; height: 14px; }
.is-creator-app .creator-match-row:hover .creator-match-chev { color: var(--ink-mid); }

/* today card — reuse the 5-day strip pattern from the old calendar
   preview, keep it inside a single wrapper card. */
.is-creator-app .creator-today-card {
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
}
.is-creator-app .creator-today-strip {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  padding: 12px;
  border-bottom: 1px solid var(--hairline);
}
.is-creator-app .creator-today-strip span {
  min-width: 0;
  display: grid; place-items: center; gap: 3px;
  padding: 8px 2px;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
}
.is-creator-app .creator-today-strip span.is-active {
  color: #fff;
  background: var(--accent);
}
.is-creator-app .creator-today-strip small {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.is-creator-app .creator-today-strip strong {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
}
.is-creator-app .creator-today-events { display: grid; }
.is-creator-app .creator-today-event {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 11px 14px;
  color: inherit;
  border-top: 1px solid var(--hairline);
  text-decoration: none;
}
.is-creator-app .creator-today-event:first-child { border-top: 0; }
.is-creator-app .creator-today-event:hover { background: var(--surface-2); }
.is-creator-app .creator-today-event-time {
  color: var(--safe);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .02em;
}
.is-creator-app .creator-today-event-body {
  min-width: 0;
  display: grid; gap: 3px;
}
.is-creator-app .creator-today-event-body strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.is-creator-app .creator-today-event-body small {
  color: var(--text-tertiary);
  font-size: 11.5px;
}
.is-creator-app .creator-today-event > span[aria-hidden="true"] {
  flex: none;
  color: var(--text-tertiary);
  font-size: 20px;
  line-height: 1;
}
.is-creator-app .creator-today-empty {
  display: flex; align-items: center; gap: 11px;
  padding: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
}
.is-creator-app .creator-today-empty svg {
  width: 18px; height: 18px; flex: 0 0 18px;
  color: var(--text-tertiary);
}
.is-creator-app a.creator-today-empty:hover { background: var(--surface-2); }
.is-creator-app .creator-today-empty-clear svg { color: var(--safe); }

/* matched — babyg-curated discover picks, top 3. Stacked vertical
   media-row list (see .creator-match-row rules above). */
.is-creator-app .creator-matched {
  display: grid; gap: 6px;
}
.is-creator-app .creator-match-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  color: inherit;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: border-color 140ms ease, background-color 140ms ease, transform 120ms ease;
}
.is-creator-app .creator-match-card:hover {
  border-color: rgba(255,77,109,.32);
  background: var(--surface-2);
}
.is-creator-app .creator-match-card:active { transform: scale(.995); }
.is-creator-app .creator-match-thumb {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  overflow: hidden;
  color: var(--text-secondary);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
}
.is-creator-app .creator-match-thumb.creator { border-radius: 50%; }
.is-creator-app .creator-match-thumb img { width: 100%; height: 100%; object-fit: cover; }
.is-creator-app .creator-match-thumb svg { width: 18px; height: 18px; }
.is-creator-app .creator-match-body {
  min-width: 0;
  display: grid; gap: 4px;
}
.is-creator-app .creator-match-topline {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px;
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.is-creator-app .creator-match-kind {
  color: var(--accent-text);
  font-weight: 700;
}
.is-creator-app .creator-match-kind.brand { color: var(--ai, #c96bd6); }
.is-creator-app .creator-match-kind.creator { color: var(--safe); }
.is-creator-app .creator-match-title {
  color: var(--text-primary);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.is-creator-app .creator-match-meta {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* jump-to shortcuts — 4-tile grid. 1×4 on desktop, 2×2 on phones.
   Each shortcut gets a per-action color tint on its icon so the row
   reads as a system, not four identical chips.
   `!important` on the layout props defends against any legacy sibling
   selectors (nested grid, previous CSS caches) trying to stretch or
   re-flow these tiles into tall squares. */
.is-creator-app .creator-home-shortcuts {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch;
  max-width: 100%;
}
.is-creator-app .creator-home-shortcut {
  min-width: 0;
  min-height: 56px !important;
  align-self: start !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px;
  padding: 10px 14px;
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-2);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.is-creator-app .creator-home-shortcuts {
  align-content: start;
  align-items: start;
}
/* Desktop + tablet: cap tile height so tall viewports (iPad, Mac) can't
   stretch shortcuts into square boxes. Mobile has its own min-height:62
   rule further down that overrides this cap on phones — the media
   query below only fires above the phone breakpoint. */
@media (min-width: 641px) {
  .is-creator-app .creator-home-shortcut {
    height: 56px !important;
  }
}
.is-creator-app .creator-home-shortcut span {
  min-width: 0;
  color: inherit;
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.is-creator-app .creator-home-shortcut:hover {
  background: var(--surface-3);
  border-color: var(--hairline-strong);
}
.is-creator-app .creator-home-shortcut svg {
  width: 15px; height: 15px;
  color: var(--ink-dim);
  flex: 0 0 auto;
}
.is-creator-app .creator-home-shortcut.sc-dm svg          { color: #a4d0ff; }
.is-creator-app .creator-home-shortcut.sc-babyg svg       { color: #ffc07a; }
.is-creator-app .creator-home-shortcut.sc-discover svg    { color: var(--lime, #c6ff3d); }
.is-creator-app .creator-home-shortcut.sc-connections svg { color: var(--accent); }

@media (max-width: 640px) {
  .is-creator-app .creator-matched { grid-template-columns: 1fr; }
  .is-creator-app .creator-today-event { grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; padding-inline: 12px; }
  .is-creator-app .creator-home-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .is-creator-app .creator-home-shortcut { min-height: 62px !important; padding: 12px; border-radius: 14px; font-size: 13px; font-weight: 650; }
  .is-creator-app .creator-home-shortcut svg { width: 17px; height: 17px; flex-basis: 17px; }
}
@media (max-width: 420px) {
  .is-creator-app .creator-home-hero { gap: 12px; }
  .is-creator-app .creator-home-avatar { width: 38px; height: 38px; flex-basis: 38px; }
  .is-creator-app .creator-today-event { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 8px; }
  .is-creator-app .creator-today-event-time { font-size: 10px; }
  .is-creator-app .creator-today-event-body strong { font-size: 13.5px; }
  .is-creator-app .creator-needs-actions { gap: 8px; }
  .is-creator-app .creator-needs-chip { padding: 0 12px; }
  .is-creator-app .creator-home-shortcuts { gap: 8px !important; }
  .is-creator-app .creator-home-shortcut { gap: 8px; padding-inline: 10px; }
}


/* Post-opportunity form — mobile-first, single column. Sits inside the
   creator app shell so the sidebar/tabbar shell chrome handles nav. */
/* Post-opportunity form. Mobile-first: single column, slim header,
   kind as a horizontal chip strip so the form starts on the fields
   instead of a 2x2 card slab. Sub-660px stays tight to the safe
   area; wide screens cap at ~640px. */
.op-new {
  width: min(100%, 640px);
  margin: 0 auto;
  padding: 12px 16px calc(var(--tabbar-h, 68px) + env(safe-area-inset-bottom) + 24px);
  display: grid; gap: 14px;
}
.op-new-head {
  display: flex; align-items: center; gap: 10px;
}
.op-new-back {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: grid; place-items: center;
  color: var(--ink-mid);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  text-decoration: none;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
.op-new-back:hover { color: var(--ink); border-color: var(--hairline-strong); }
.op-new-back svg { width: 16px; height: 16px; }
.op-new-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: var(--ink);
}
.op-new-banner {
  padding: 10px 14px;
  color: var(--accent-text);
  border: 1px solid rgba(255,77,109,.32);
  border-radius: 12px;
  background: rgba(255,77,109,.06);
  font-size: 13px;
}
.op-new-form { display: grid; gap: 12px; }
.op-new-kinds { border: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.op-new-kinds legend {
  padding: 0;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
/* Horizontal chip strip. Scrolls on narrow phones so four choices
   never wrap to two rows and never crowd the fields below. */
.op-new-kind-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  margin: 0 -16px;
  padding-inline: 16px;
}
.op-new-kind-row::-webkit-scrollbar { display: none; }
@media (min-width: 500px) {
  .op-new-kind-row { flex-wrap: wrap; margin: 0; padding-inline: 0; overflow: visible; }
}
.op-new-kind {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  color: var(--ink-mid);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
.op-new-kind input {
  position: absolute; opacity: 0; pointer-events: none;
}
.op-new-kind:has(input:checked),
.op-new-kind.on {
  color: var(--ink);
  border-color: rgba(255,77,109,.5);
  background: rgba(255,77,109,.12);
}
.op-new-field { display: grid; gap: 5px; }
.op-new-field-label {
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
.op-new-field input,
.op-new-field textarea {
  padding: 11px 13px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  font: inherit; font-size: 16px;
  outline: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.op-new-field input:focus,
.op-new-field textarea:focus {
  border-color: rgba(255,77,109,.4);
  background: var(--surface-3);
}
.op-new-field textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.op-new-row-2 { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 500px) {
  .op-new-row-2 { grid-template-columns: 1fr 1fr; }
}
.op-new-submit {
  height: 46px;
  margin-top: 4px;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 999px;
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0;
  cursor: pointer;
  transition: background-color 140ms ease, transform 120ms ease;
}
.op-new-submit:hover { background: var(--accent-hover, #e8455f); }
.op-new-submit:active { transform: scale(.99); }

/* Calendar detail page — booking view. Replaces the old inline-styled
   .kv-list dump with a clean vertical stack: back nav, tag pills,
   title, two-line fact list, notes, actions. */
.cal-detail {
  width: min(100%, 640px);
  margin: 0 auto;
  padding: 12px 16px calc(var(--tabbar-h, 54px) + env(safe-area-inset-bottom) + 24px);
  display: grid; gap: 18px;
}
.cal-detail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.cal-detail-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 8px;
  color: var(--ink-mid);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
.cal-detail-back:hover { color: var(--ink); border-color: var(--hairline-strong); }
.cal-detail-back svg { width: 14px; height: 14px; }
.cal-detail-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cal-detail-tag {
  display: inline-flex; align-items: center;
  padding: 5px 10px;
  color: var(--ink-mid);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: lowercase;
}
.cal-detail-tag-confirmed {
  color: #6ee2a2;
  border-color: rgba(110, 226, 162, 0.25);
  background: rgba(110, 226, 162, 0.08);
}
.cal-detail-tag-cancelled {
  color: var(--ink-dim);
  text-decoration: line-through;
}
.cal-detail-title {
  margin: 0;
  font-size: clamp(22px, 5vw, 28px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}
.cal-detail-facts {
  margin: 0;
  padding: 0;
  display: grid; gap: 12px;
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}
.cal-detail-facts > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}
.cal-detail-facts dt {
  margin: 0;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cal-detail-facts dd {
  margin: 0;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.4;
}
.cal-detail-notes {
  display: grid; gap: 6px;
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}
.cal-detail-label {
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cal-detail-notes p {
  margin: 0;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.55;
}
.cal-detail-actions {
  display: inline-flex; gap: 8px; flex-wrap: wrap;
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}
.cal-detail-actions form { margin: 0; }
.cal-detail-cancel { color: var(--accent-text); }
.cal-detail-cancel:hover { color: var(--accent); background: rgba(255,77,109,.06); }

/* ============================================================
 * The Creator Card — one shape, two contexts.
 * Rendered as the ONLY thing on /creator/profile (edit action)
 * and as each discover result (pass · save · connect). Identical
 * body: avatar, kind pill, name, social icon (creator's preferred),
 * bio, location + follower meta, tag chips. Only the action row
 * at the bottom changes. Centered layout, capped ~380px so it
 * reads well on any width.
 * ============================================================ */
.creator-card {
  width: min(100%, 380px);
  margin: 0 auto;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,77,109,.045), transparent 45%),
              var(--surface-1);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.creator-card-body {
  padding: 30px 24px 22px;
  display: grid; gap: 14px;
  justify-items: center;
  text-align: center;
}
.creator-card-avatar {
  width: 116px; height: 116px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 3px rgba(255,77,109,.35), 0 12px 28px rgba(0,0,0,.45);
  overflow: hidden;
  display: grid; place-items: center;
  color: var(--ink-mid);
  font-family: var(--mono); font-weight: 700; font-size: 36px;
}
.creator-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.creator-card-kind {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid transparent;
}
.creator-card-kind svg {
  width: 12px; height: 12px; display: block; flex: 0 0 auto;
}
.creator-card-kind-creator {
  color: var(--accent, #ff4d6d);
  background: rgba(255,77,109,.08);
  border-color: rgba(255,77,109,.28);
}
.creator-card-kind-brand {
  color: #a4d0ff;
  background: rgba(90,160,255,.09);
  border-color: rgba(90,160,255,.28);
}
.creator-card-kind-opportunity {
  color: #ffc07a;
  background: rgba(255,192,122,.09);
  border-color: rgba(255,192,122,.28);
}
.creator-card-name {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 32px; font-weight: 600;
  letter-spacing: -.03em; line-height: 1.05;
  overflow-wrap: anywhere;
}
/* Icon-only socials. The icon *is* the link; tap opens the
   platform profile in a new tab. No handle text next to it. */
.creator-card-socials {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: -2px;
}
.creator-card-social {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  transition: transform 120ms ease, filter 140ms ease;
}
.creator-card-social:hover { transform: translateY(-1px); filter: brightness(1.08); }
.creator-card-social svg { width: 16px; height: 16px; }
.creator-card-social.ig { background: linear-gradient(135deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); }
.creator-card-social.tt { background: #000; border: 1px solid var(--hairline-strong); }
.creator-card-social.yt { background: #ff0000; }
.creator-card-social.x  { background: #000; border: 1px solid var(--hairline-strong); }
.creator-card-bio {
  margin: 0;
  color: var(--ink);
  font-size: 14.5px; line-height: 1.5;
  max-width: 300px;
  overflow-wrap: anywhere;
}
.creator-card-bio.is-empty { color: var(--ink-dim); font-style: italic; }
.creator-card-meta {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-mid);
  font-size: 12.5px;
}
.creator-card-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-dim); }
.creator-card-tags {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  max-width: 300px;
}
.creator-card-tag {
  padding: 5px 11px;
  color: var(--ink-mid);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 11.5px;
  white-space: nowrap;
}

.creator-card-actions {
  padding: 14px 22px 20px;
  border-top: 1px solid var(--hairline);
  display: grid; gap: 10px;
  align-items: center;
}
.creator-card-actions.is-own { grid-template-columns: 1fr; }
.creator-card-actions.is-other {
  grid-template-columns: 44px 44px minmax(0, 1fr);
}
.creator-card-actions form { margin: 0; display: contents; }
.creator-card-actions form > button { grid-column: span 1; }
.creator-card-btn-primary {
  height: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 12px;
  font: inherit; font-weight: 700; font-size: 14px; letter-spacing: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 140ms ease, transform 120ms ease;
}
.creator-card-btn-primary:hover { background: var(--accent-hover, #e8455f); }
.creator-card-btn-primary:active { transform: scale(.99); }
.creator-card-btn-primary svg { width: 14px; height: 14px; }
.creator-card-btn-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--ink-mid);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
.creator-card-btn-icon:hover { color: var(--ink); border-color: var(--hairline-strong); background: var(--surface-3); }
.creator-card-btn-icon svg { width: 14px; height: 14px; }

@media (max-width: 420px) {
  .creator-card-avatar { width: 100px; height: 100px; font-size: 32px; }
  .creator-card-name { font-size: 28px; }
  .creator-card-body { padding: 26px 20px 20px; gap: 12px; }
}

/* Discover uses .creator-card + a native discover-actions sibling.
   The action row lives outside the article so JS keeps working; we
   make it visually feel like a bottom row on the same card. */
/* On discover the actions dock is a sibling element (JS relies on it),
   so drop the card's bottom radius to make the two visually join. */
.creator-card.discover-card {
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 22px 22px 0 0;
  border-bottom: 0;
}
.creator-card .discover-detail-link {
  display: block;
  width: 100%;
  padding: 10px;
  color: var(--ink-dim);
  background: transparent;
  border: none;
  border-top: 1px solid var(--hairline);
  font: inherit;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em; text-transform: lowercase;
  cursor: pointer;
}
.creator-card .discover-detail-link:hover { color: var(--ink); background: var(--surface-2); }
.discover-stack:has(.creator-card) + .discover-actions {
  width: min(100%, 380px);
  margin: -1px auto 0;
  padding: 14px 22px 20px;
  border: 1px solid var(--hairline);
  border-top: 0;
  border-radius: 0 0 22px 22px;
  background: var(--surface-1);
  display: grid;
  grid-template-columns: 44px 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.discover-stack:has(.creator-card) { padding: 0; }
.discover-stack:has(.creator-card) + .discover-actions form { margin: 0; display: contents; }
.discover-stack:has(.creator-card) + .discover-actions button {
  width: 100%; height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--ink-mid);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.discover-stack:has(.creator-card) + .discover-actions button svg { width: 14px; height: 14px; }
.discover-stack:has(.creator-card) + .discover-actions button.primary {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
  height: 46px;
}
.discover-stack:has(.creator-card) + .discover-actions button.primary:hover { background: var(--accent-hover, #e8455f); }
/* Round + tuck: pass/save icons show only their SVG, primary is the big
   "connect" button on the right. Match the mockup 44 44 1fr grid. */
.discover-stack:has(.creator-card) + .discover-actions [aria-label="pass"] span,
.discover-stack:has(.creator-card) + .discover-actions [aria-label="save"] span,
.discover-stack:has(.creator-card) + .discover-actions [data-swipe-form="passed"] button span,
.discover-stack:has(.creator-card) + .discover-actions [data-swipe-form="saved"] button span {
  display: none;
}
.discover-stack:has(.creator-card) ~ .discover-action-meta {
  width: min(100%, 380px);
  margin: 12px auto 0;
  padding: 0 22px;
  display: flex; justify-content: center; gap: 8px;
}

/* ---------------------------------------------------------------------
   my connections v2 — segmented tabs + compact rows + message primary.
   Scoped to .conn-* to avoid colliding with legacy .connections-* rules.
--------------------------------------------------------------------- */
.conn-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 18px 96px;
  color: var(--ink);
}
.conn-page-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.conn-brand-mark {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, #232028, #17151b);
  border: 1px solid var(--hairline-strong);
  overflow: hidden;
}
.conn-brand-mark img { width: 20px; height: 20px; object-fit: contain; }
.conn-page-head h1 {
  margin: 0; font-size: 26px; font-weight: 600; letter-spacing: 0;
}

.conn-segments-wrap {
  max-width: 100%;
  overflow-x: auto; overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -4px 14px;
  padding: 2px 4px 4px;
}
.conn-segments-wrap::-webkit-scrollbar { display: none; }
.conn-segments {
  display: inline-flex; padding: 4px; gap: 2px;
  background: var(--surface-1, #141216);
  border: 1px solid var(--hairline, rgba(255,255,255,.06));
  border-radius: 999px;
  white-space: nowrap;
}
.conn-tab {
  appearance: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: transparent;
  color: rgba(245,241,232,.42);
  font-size: 13.5px; font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
.conn-tab:hover { color: rgba(245,241,232,.7); }
.conn-tab.active {
  background: rgba(255,255,255,.05);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline-strong, rgba(255,255,255,.09));
}
.conn-tab .n {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px; font-weight: 500;
  color: rgba(245,241,232,.28);
  padding: 2px 7px; border-radius: 999px;
  background: rgba(255,255,255,.05);
}
.conn-tab.active .n { color: var(--ink); background: rgba(255,255,255,.08); }
.conn-tab:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* Search bar — matches the DM inbox search: icon-overlaid pill, 44px tall */
.conn-search {
  position: relative;
  width: 100%;
  height: 44px;
  margin: 0 0 14px;
}
.conn-search svg {
  position: absolute;
  left: 14px; top: 50%;
  width: 14px; height: 14px;
  color: rgba(245,241,232,.42);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}
.conn-search input,
.conn-search input:focus,
.conn-search input:focus-visible {
  display: block;
  width: 100%;
  height: 44px; min-height: 44px;
  padding: 0 14px 0 38px;
  box-sizing: border-box;
  color: var(--ink);
  background: var(--surface-1, #141216);
  border: 1px solid var(--hairline, rgba(255,255,255,.06));
  border-radius: 999px;
  font: inherit; font-size: 16px;
  outline: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.conn-search input:focus,
.conn-search input:focus-visible {
  border-color: rgba(255,77,109,.35);
  box-shadow: 0 0 0 3px rgba(255,77,109,.12);
}
.conn-search input::placeholder { color: rgba(245,241,232,.32); }

.conn-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 6px;
}
.conn-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface-2, #1a1720);
  border: 1px solid var(--hairline, rgba(255,255,255,.06));
  border-radius: 14px;
  transition: background .15s ease, border-color .15s ease;
}
.conn-row:hover {
  background: rgba(255,255,255,.03);
  border-color: var(--hairline-strong, rgba(255,255,255,.09));
}
.conn-avatar {
  position: relative;
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, #2a2632, #17151b);
  display: inline-grid; place-items: center;
  font-size: 15px; font-weight: 600; letter-spacing: 0;
  color: rgba(245,241,232,.7);
  border: 1px solid var(--hairline-strong, rgba(255,255,255,.09));
  overflow: hidden;
  text-decoration: none;
  flex: 0 0 auto;
}
.conn-avatar img { width: 100%; height: 100%; object-fit: cover; }

.conn-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conn-name-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.conn-name {
  font-size: 14.5px; font-weight: 600; letter-spacing: 0;
  color: var(--ink); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.conn-name:hover { color: var(--accent); }
.conn-kind-glyph {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 5px;
  flex: 0 0 auto;
}
.conn-kind-glyph svg { width: 12px; height: 12px; display: block; }
.conn-kind-glyph-creator {
  color: var(--accent, #ff4d6d);
  background: rgba(255,77,109,.1);
}
.conn-kind-glyph-brand {
  color: #a4d0ff;
  background: rgba(90,160,255,.1);
}
.conn-sub-line {
  display: flex; align-items: center; gap: 6px;
  color: rgba(245,241,232,.42);
  font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conn-sub-line .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: .4; flex: 0 0 auto;
}

.conn-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.conn-inline-form { display: inline-flex; margin: 0; }

.conn-btn {
  appearance: none; border: 0; background: transparent;
  font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 16px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink); text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.conn-btn.primary { background: var(--accent); color: #fff; }
.conn-btn.primary:hover { background: var(--accent-hover, #e8455f); }
.conn-btn.ghost {
  color: rgba(245,241,232,.68);
  border: 1px solid var(--hairline-strong, rgba(255,255,255,.09));
  background: transparent;
}
.conn-btn.ghost:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.conn-btn.icon { width: 44px; height: 44px; padding: 0; color: rgba(245,241,232,.42); }
.conn-btn.icon:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.conn-btn svg { width: 14px; height: 14px; }
.conn-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.conn-status-pill {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(245,241,232,.42);
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--hairline, rgba(255,255,255,.06));
}

.conn-menu { position: relative; display: inline-flex; }
.conn-menu > summary {
  list-style: none;
  cursor: pointer;
}
.conn-menu > summary::-webkit-details-marker { display: none; }
.conn-menu > summary::marker { content: ''; }
.conn-menu-panel {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 160px;
  padding: 6px;
  background: var(--surface-1, #141216);
  border: 1px solid var(--hairline-strong, rgba(255,255,255,.09));
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.42);
  display: flex; flex-direction: column; gap: 2px;
  z-index: 20;
}
.conn-menu-item {
  appearance: none; border: 0; background: transparent;
  font: inherit; font-size: 13px;
  color: var(--ink); text-align: left; cursor: pointer;
  padding: 8px 10px; border-radius: 8px;
  text-decoration: none;
  width: 100%;
}
.conn-menu-item:hover { background: rgba(255,255,255,.05); }
.conn-menu-item.danger { color: var(--accent); }
.conn-menu-item.danger:hover { background: rgba(255,77,109,.1); }
.conn-menu form { margin: 0; }

.conn-row-incoming {
  border-color: rgba(255,77,109,.16);
  background: linear-gradient(180deg, rgba(255,77,109,.04), var(--surface-2, #1a1720));
}
.conn-row-incoming .conn-avatar { border-color: rgba(255,77,109,.28); }

.conn-section-head {
  display: flex; align-items: baseline; gap: 8px;
  margin: 28px 4px 10px;
}
.conn-section-head .eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245,241,232,.28);
}
.conn-section-head .n {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px; color: rgba(245,241,232,.42);
  font-variant-numeric: tabular-nums;
}

.conn-empty {
  padding: 28px 20px; text-align: center;
  background: var(--surface-1, #141216);
  border: 1px dashed var(--hairline-strong, rgba(255,255,255,.09));
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.conn-empty .mono {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(245,241,232,.42);
}
.conn-empty p { margin: 0; font-size: 13.5px; color: rgba(245,241,232,.68); }

/* Phones — collapse "message" text to icon, tighten paddings */
@media (max-width: 520px) {
  .conn-page { padding: 20px 14px 96px; }
  .conn-page-head { gap: 10px; margin-bottom: 16px; }
  .conn-page-head h1 { font-size: 22px; }
  .conn-brand-mark { width: 30px; height: 30px; }
  .conn-brand-mark img { width: 18px; height: 18px; }
  .conn-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    padding: 11px 12px; gap: 10px;
  }
  .conn-avatar { width: 40px; height: 40px; }
  .conn-btn { min-height: 44px; padding: 0 12px; font-size: 12px; }
  .conn-btn.icon { width: 44px; height: 44px; padding: 0; }
  .conn-search { height: 40px; }
  /* Hide message label on phones; leave the icon */
  .conn-row-connected .conn-btn.primary span { display: none; }
  .conn-row-connected .conn-btn.primary { width: 44px; padding: 0; }
  .conn-row-incoming .conn-actions { gap: 4px; }
  .conn-row-incoming .conn-btn { padding: 0 10px; font-size: 11.5px; }
}

/* Small phones — incoming row drops its actions to a second line */
@media (max-width: 380px) {
  .conn-page { padding: 18px 12px 96px; }
  .conn-row { padding: 10px 11px; gap: 9px; grid-template-columns: 38px minmax(0, 1fr) auto; }
  .conn-avatar { width: 38px; height: 38px; font-size: 14px; }
  .conn-name-line { flex-wrap: wrap; row-gap: 4px; }
  .conn-tab { padding: 8px 14px; font-size: 13px; }
  .conn-row-incoming { grid-template-columns: 38px minmax(0, 1fr); }
  .conn-row-incoming .conn-actions { grid-column: 1 / -1; padding-top: 4px; }
  .conn-row-incoming .conn-btn { flex: 1; }
}

/* Desktop — a hair more room in the row */
@media (min-width: 900px) {
  .conn-row {
    padding: 13px 16px; gap: 14px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }
  .conn-avatar { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .conn-row, .conn-btn, .conn-tab { transition: none; }
}

/* Home V2 destination foundation */
.perf-read,
.perf-row,
.ig-review-empty,
.ig-review-card,
.calendar-v2-connect,
.calendar-v2-read,
.calendar-v2-row,
.deals-empty,
.deal-row,
.deal-detail-card,
.deal-touchpoints,
.bot-activity,
.discover-manager-read {
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.perf-read,
.ig-review-empty,
.calendar-v2-connect,
.calendar-v2-read,
.deals-empty,
.deal-detail-card,
.deal-touchpoints,
.bot-activity,
.discover-manager-read {
  padding: 16px;
}

.perf-read,
.ig-manager-read,
.calendar-v2-read,
.deal-next,
.bot-activity,
.discover-manager-read {
  display: grid;
  gap: 8px;
}

.perf-read-label,
.perf-read .mono,
.ig-review-head .mono,
.ig-review-card-head .mono,
.ig-manager-read .mono,
.calendar-v2-head .mono,
.calendar-v2-read .mono,
.deals-head .mono,
.deal-next .mono,
.deal-section-head .mono,
.bot-activity .mono,
.discover-manager-read .mono {
  color: var(--text-tertiary);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.perf-read h2,
.ig-review-empty h2,
.ig-manager-read h3,
.calendar-v2-connect h2,
.calendar-v2-read h2,
.deals-empty h2,
.deal-detail-card h2,
.discover-manager-read h2 {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: 0;
}

.perf-read p,
.perf-read-action strong,
.perf-row-copy p,
.perf-row-reco p,
.ig-review-empty p,
.ig-manager-read p,
.ig-review-facts dd,
.calendar-v2-connect p,
.calendar-v2-read p,
.calendar-v2-read strong,
.deals-empty p,
.deal-next p,
.deal-touchpoints p,
.discover-manager-read p,
.discover-manager-read dd {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.perf-read-action {
  display: grid;
  gap: 5px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

.perf-feed,
.ig-review-stack,
.calendar-v2-stack,
.deals-stack {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.perf-row {
  box-sizing: border-box;
  display: grid;
  gap: 12px;
  padding: 12px;
}

.performance-platform-tabs a {
  min-height: 40px;
}

.perf-row-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
}

.perf-row-source a,
.perf-platform-icon,
.ig-review-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 42px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--surface-2);
}

.perf-row-source a {
  min-height: 42px;
  text-decoration: none;
}

.perf-platform-icon svg,
.ig-review-icon svg {
  width: 19px;
  height: 19px;
}

.perf-platform-icon-instagram,
.ig-review-icon {
  color: #ff6b8a;
}

.perf-row-copy,
.ig-thread-link span,
.calendar-v2-row-main,
.deal-row-main {
  min-width: 0;
}

.perf-row-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--text-tertiary);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.perf-row-copy h2,
.deal-row-main h2 {
  margin: 2px 0 4px;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.perf-row-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.perf-row-result span,
.perf-row-details dt,
.deal-terms dt,
.deal-detail-terms dt,
.ig-review-facts dt {
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.perf-row-result strong,
.perf-row-details dd,
.deal-terms dd,
.deal-detail-terms dd {
  margin: 0;
  color: var(--text-primary);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.perf-row-details,
.ig-message-context {
  min-width: 0;
}

.perf-row-details summary,
.ig-message-context summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
}

.perf-row-details dl,
.ig-review-facts,
.deal-terms,
.deal-detail-terms,
.discover-manager-read dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.perf-row-details dl,
.deal-detail-terms {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.perf-row-details div,
.ig-review-facts div,
.deal-terms div,
.deal-detail-terms div,
.discover-manager-read div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.perf-row-details a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  color: var(--accent-text);
}

.ig-review-page,
.calendar-v2-page,
.deals-page {
  display: grid;
  gap: 14px;
  padding-top: 18px;
  padding-bottom: calc(var(--tabbar-h, 64px) + 24px);
}

.ig-review-head,
.calendar-v2-head,
.deals-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ig-review-head h1,
.calendar-v2-head h1,
.deals-head h1 {
  margin: 2px 0 0;
  color: var(--text-primary);
  font-size: 25px;
  line-height: 1.08;
  letter-spacing: 0;
}

.ig-review-layout {
  display: grid;
  gap: 12px;
}

.ig-thread-list {
  min-width: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.ig-thread-list::-webkit-scrollbar { display: none; }

.ig-thread-link {
  min-width: 208px;
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  background: var(--surface-1);
  text-decoration: none;
}

.ig-thread-link.is-active {
  border-color: var(--border-accent);
  color: var(--text-primary);
  background: var(--accent-subtle-2);
}

.ig-thread-link .ig-review-icon {
  width: 34px;
  height: 34px;
}

.ig-thread-link strong,
.ig-thread-link small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ig-thread-link strong {
  color: var(--text-primary);
  font-size: 13px;
}

.ig-thread-link small {
  color: var(--text-tertiary);
  font-size: 11px;
}

.ig-thread-link em,
.ig-state {
  min-width: 22px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 0 7px;
  border-radius: 999px;
  color: var(--accent-text);
  background: var(--accent-subtle-2);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.ig-review-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.ig-review-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.ig-review-card-head h2 {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: 0;
}

.ig-manager-read,
.calendar-v2-read {
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.ig-message-context ol,
.deal-touchpoints ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ig-message {
  box-sizing: border-box;
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.ig-message div {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-tertiary);
  font-size: 11px;
}

.ig-message strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ig-message p,
.ig-message small {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.ig-review-action,
.calendar-v2-provider-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ig-evaluation-panel {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.ig-evaluation-grid {
  display: grid;
  gap: 8px;
}

.ig-evaluation-grid article,
.ig-evaluation-status {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.ig-evaluation-grid .mono,
.ig-evaluation-status strong {
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ig-evaluation-grid p,
.ig-evaluation-status p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.calendar-page {
  padding-bottom: calc(var(--tabbar-h, 64px) + 24px);
}

.calendar-toolbar,
.calendar-state,
.calendar-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.calendar-toolbar {
  margin: 18px 0 14px;
}

.calendar-toolbar h1 {
  margin: 2px 0 0;
  color: var(--text-primary);
  font-size: 25px;
  line-height: 1.08;
  letter-spacing: 0;
}

.calendar-toolbar-actions,
.calendar-footer-actions {
  flex-wrap: wrap;
}

.calendar-state {
  margin: 10px 0;
  padding: 13px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  background: var(--surface-1);
}

.calendar-state p {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.calendar-view-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 10px 0 12px;
  scrollbar-width: none;
}

.calendar-view-tabs::-webkit-scrollbar { display: none; }

.calendar-view-tabs a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-secondary);
  background: var(--surface-1);
  font-size: 12px;
  text-decoration: none;
}

.calendar-view-tabs a.is-active {
  border-color: var(--border-accent);
  color: var(--accent-text);
  background: var(--accent-subtle-2);
}

.calendar-week-shell,
.creator-calendar-week-preview,
.calendar-month-shell {
  --calendar-hour-h: 56px;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.creator-calendar-week-preview {
  --calendar-hour-h: 34px;
}

.calendar-home-range {
  padding: 10px 12px 0;
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
}

.calendar-mobile-days {
  display: none;
}

.calendar-week-head,
.calendar-all-day-row,
.calendar-time-grid {
  min-width: 760px;
  display: grid;
  grid-template-columns: 68px repeat(7, minmax(84px, 1fr));
}

.calendar-day-mode .calendar-week-head,
.calendar-day-mode .calendar-all-day-row,
.calendar-day-mode .calendar-time-grid {
  grid-template-columns: 68px minmax(260px, 1fr);
}

.calendar-day-mode .calendar-day-head:not(.is-selected),
.calendar-day-mode .calendar-all-day-cell:not(.is-selected),
.calendar-day-mode .calendar-day-column:not(.is-selected) {
  display: none;
}

.calendar-time-gutter,
.calendar-day-head,
.calendar-all-day-cell,
.calendar-day-column {
  min-width: 0;
  border-left: 1px solid var(--border-subtle);
}

.calendar-time-gutter {
  border-left: 0;
}

.calendar-day-head {
  min-height: 52px;
  display: grid;
  place-items: center;
  gap: 2px;
  color: var(--text-secondary);
  text-decoration: none;
}

.calendar-day-head span,
.calendar-mobile-days span {
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
}

.calendar-day-head strong,
.calendar-mobile-days strong {
  color: var(--text-primary);
  font-size: 14px;
}

.calendar-day-head.is-today,
.calendar-mobile-days .is-today {
  background: var(--accent-subtle-2);
}

.calendar-all-day-row {
  border-top: 1px solid var(--border-subtle);
}

.calendar-all-day-row .calendar-time-gutter {
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
}

.calendar-all-day-cell {
  min-height: 40px;
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 4px;
  padding: 6px;
}

.calendar-all-day-event {
  max-width: 100%;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border-radius: 999px;
  color: var(--accent-text);
  background: var(--accent-subtle-2);
  font-size: 11px;
  text-decoration: none;
}

.calendar-time-grid {
  position: relative;
  height: calc(24 * var(--calendar-hour-h));
  border-top: 1px solid var(--border-subtle);
}

.calendar-time-grid.calendar-home-grid {
  height: calc(17 * var(--calendar-hour-h));
}

.calendar-time-column,
.calendar-day-column {
  position: relative;
  min-height: 100%;
}

.calendar-time-column span {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: 10px;
}

.calendar-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-subtle);
}

.calendar-day-column.is-selected,
.calendar-all-day-cell.is-selected {
  background: color-mix(in srgb, var(--accent-subtle-2) 55%, transparent);
}

.calendar-timed-event {
  position: absolute;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 28px;
  overflow: hidden;
  padding: 5px 7px;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm);
  color: var(--accent-text);
  background: var(--accent-subtle-2);
  text-decoration: none;
}

.calendar-timed-event strong,
.calendar-timed-event span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-timed-event strong {
  font-size: 12px;
}

.calendar-timed-event span {
  color: var(--text-tertiary);
  font-size: 10px;
}

.calendar-month-shell {
  overflow: hidden;
}

.calendar-month-weekdays,
.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-month-weekdays span {
  padding: 10px 8px;
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
}

.calendar-month-cell {
  min-height: 96px;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 8px;
  border-top: 1px solid var(--border-subtle);
  border-left: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  text-decoration: none;
}

.calendar-month-cell:nth-child(7n + 1) {
  border-left: 0;
}

.calendar-month-cell > span {
  color: var(--text-primary);
  font-family: var(--mono);
  font-size: 12px;
}

.calendar-month-cell small {
  min-width: 0;
  overflow: hidden;
  padding: 4px 5px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--surface-2);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-month-cell.is-outside {
  opacity: .5;
}

.creator-calendar-empty.calendar-home-empty {
  margin: 0;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
}

.calendar-v2-notice {
  padding: 12px 14px;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  background: var(--accent-subtle-2);
  font-size: 13px;
}

.calendar-v2-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.calendar-v2-tabs a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-secondary);
  background: var(--surface-1);
  font-size: 12px;
  text-decoration: none;
}

.calendar-v2-tabs a.is-active {
  color: var(--accent-text);
  border-color: var(--border-accent);
  background: var(--accent-subtle-2);
}

.calendar-v2-row,
.deal-row {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.calendar-v2-row-main {
  min-height: 48px;
  display: grid;
  gap: 3px;
  color: inherit;
  text-decoration: none;
}

.calendar-v2-type,
.deal-stage {
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--text-tertiary);
  background: var(--surface-2);
  font-size: 11px;
}

.calendar-v2-row-main strong {
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.25;
}

.calendar-v2-row-main small,
.deal-row-main p,
.deal-touchpoints small,
.deals-muted {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.35;
}

.calendar-v2-row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.calendar-v2-empty {
  padding: 40px 12px;
  text-align: center;
}

.deal-terms {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.deal-open {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  text-decoration: none;
}

.deal-detail-terms-secondary {
  margin-top: 10px;
}

.deal-touchpoints li {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.deal-touchpoints li > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.deal-touchpoints strong {
  color: var(--text-primary);
  font-size: 13px;
}

.deal-touchpoints span {
  color: var(--text-tertiary);
  font-size: 12px;
}

.bot-activity {
  width: min(760px, calc(100% - 24px));
  margin: 0 auto 12px;
}

.bot-activity-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.bot-activity-head strong {
  min-width: 0;
  color: var(--text-primary);
  font-size: 13px;
}

.bot-activity-lines {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 16px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.35;
}

.bot-activity-actions,
.bot-activity-cycles {
  display: grid;
  gap: 7px;
}

.bot-activity-actions a {
  min-height: 44px;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--surface-2);
  text-decoration: none;
}

.bot-activity-actions span,
.bot-activity-cycles span {
  color: var(--text-tertiary);
  font-size: 11px;
}

.bot-activity-actions strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-manager-read {
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  .perf-row,
  .calendar-v2-row,
  .deal-row {
    grid-template-columns: minmax(0, 1.4fr) minmax(140px, .5fr) minmax(220px, .8fr) auto;
    align-items: center;
  }

  .calendar-v2-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .deal-row {
    grid-template-columns: minmax(0, 1fr) 180px minmax(260px, .7fr) auto;
  }

  .ig-review-layout {
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
  }

  .ig-thread-list {
    display: grid;
    overflow: visible;
  }

  .ig-thread-link {
    min-width: 0;
  }

  .deal-detail-terms {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .perf-row-copy h2,
  .deal-row-main h2 {
    white-space: normal;
  }

  .perf-row-details dl,
  .deal-detail-terms {
    grid-template-columns: 1fr;
  }

  .ig-review-head h1,
  .calendar-v2-head h1,
  .deals-head h1 {
    font-size: 22px;
  }

  .ig-review-action .btn,
  .calendar-v2-provider-actions .btn,
  .calendar-v2-row-actions .btn {
    width: 100%;
  }
}
/* ==================================================================== */
/* Home v5 — mobile is canonical; larger viewports scale the same stack. */
/* ==================================================================== */

.creator-home.hv5 {
  display: grid;
  gap: 22px;
  width: min(100%, 640px);
  margin: 0 auto;
  padding: 20px 14px calc(96px + env(safe-area-inset-bottom, 0px));
  color: var(--text-primary);
  background: transparent;
}
.creator-home.hv5 .hv5-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.creator-home.hv5 .hv5-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
}
.creator-home.hv5 .hv5-head-title {
  margin: 0;
  font-size: clamp(28px, 8vw, 34px);
  line-height: 1;
  font-weight: 650;
  letter-spacing: 0;
}
.creator-home.hv5 .hv5-head-link,
.creator-home.hv5 .hv5-empty-action {
  color: #ff3b6b;
  font-size: 16px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.creator-home.hv5 .hv5-brand-instagram,
.creator-home.hv5 .hv5-brand-performance,
.creator-home.hv5 .hv5-brand-opportunity { color: #ff3b6b; }
.creator-home.hv5 .hv5-brand-babyg {
  background: #050505;
  border-radius: 50%;
}
.creator-home.hv5 .hv5-brand-babyg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.creator-home.hv5 .hv5-brand-calendar svg,
.creator-home.hv5 .hv5-brand-gmail svg { filter: saturate(1.05); }

.creator-home.hv5 .hv5-brief,
.creator-home.hv5 .hv5-calendar-card {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
    var(--surface-1, rgba(255,255,255,0.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}
.creator-home.hv5 .hv5-brief-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 13px 12px;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.07));
  -webkit-tap-highlight-color: transparent;
}
.creator-home.hv5 .hv5-brief-row:first-child { border-top: 0; }
.creator-home.hv5 .hv5-brief-row:hover,
.creator-home.hv5 .creator-home-day-list li a:hover,
.creator-home.hv5 .hv5-connected-card:hover {
  background: rgba(255,255,255,0.035);
}
.creator-home.hv5 .hv5-brief-icon,
.creator-home.hv5 .hv5-empty-icon,
.creator-home.hv5 .hv5-connected-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
}
.creator-home.hv5 .hv5-brief-icon svg,
.creator-home.hv5 .hv5-empty-icon svg,
.creator-home.hv5 .hv5-connected-icon svg {
  width: 30px;
  height: 30px;
}
.creator-home.hv5 .hv5-brief-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.creator-home.hv5 .hv5-brief-title {
  color: var(--text-primary, #fff);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.creator-home.hv5 .hv5-brief-detail {
  color: var(--text-secondary, rgba(255,255,255,0.64));
  font-size: 14px;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.creator-home.hv5 .hv5-row-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
  color: var(--text-tertiary, rgba(255,255,255,0.5));
}
.creator-home.hv5 .hv5-row-time {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary, rgba(255,255,255,0.52));
  white-space: nowrap;
}
.creator-home.hv5 .hv5-row-chevron {
  font-size: 30px;
  line-height: 1;
  color: var(--text-tertiary, rgba(255,255,255,0.42));
}
.creator-home.hv5 .hv5-empty-row,
.creator-home.hv5 .creator-home-day-empty {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 14px 16px;
  color: inherit;
}
.creator-home.hv5 .hv5-empty-row {
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
  border-radius: 18px;
  background: var(--surface-1, rgba(255,255,255,0.03));
}
.creator-home.hv5 .hv5-empty-row span:last-child,
.creator-home.hv5 .creator-home-day-empty span:nth-child(2) {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.creator-home.hv5 .hv5-empty-row strong,
.creator-home.hv5 .creator-home-day-empty strong {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 650;
}
.creator-home.hv5 .hv5-empty-row small,
.creator-home.hv5 .creator-home-day-empty small {
  color: var(--text-secondary, rgba(255,255,255,0.62));
  font-size: 14px;
  line-height: 1.25;
}

.creator-home.hv5 [data-home-calendar] .calendar-mobile-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
}
.creator-home.hv5 [data-home-calendar] .calendar-mobile-days a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 62px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.creator-home.hv5 [data-home-calendar] .calendar-mobile-days a span {
  color: var(--text-tertiary, rgba(255,255,255,0.48));
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.creator-home.hv5 [data-home-calendar] .calendar-mobile-days a strong {
  color: var(--text-primary, #fff);
  font-size: 20px;
  font-weight: 650;
  line-height: 1;
}
.creator-home.hv5 [data-home-calendar] .calendar-mobile-days a.is-today strong {
  color: #ff3b6b;
}
.creator-home.hv5 [data-home-calendar] .calendar-mobile-days a.is-selected {
  background: rgba(255,255,255,0.065);
}
.creator-home.hv5 .creator-home-day-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.creator-home.hv5 .creator-home-day-list li + li {
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.07));
}
.creator-home.hv5 .creator-home-day-list li a {
  display: grid;
  grid-template-columns: 82px 3px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 11px 14px;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.creator-home.hv5 .creator-home-day-time {
  color: var(--text-primary, #fff);
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
}
.creator-home.hv5 .creator-home-day-divider {
  width: 3px;
  height: 34px;
  border-radius: 999px;
  background: #ff3b6b;
}
.creator-home.hv5 .creator-home-day-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.creator-home.hv5 .creator-home-day-body strong {
  color: var(--text-primary, #fff);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.creator-home.hv5 .creator-home-day-body small {
  color: var(--text-secondary, rgba(255,255,255,0.62));
  font-size: 13px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.creator-home.hv5 .creator-home-day-empty {
  list-style: none;
  color: inherit;
}

.creator-home.hv5 .hv5-connected-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.creator-home.hv5 .hv5-connected-card {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 96px;
  padding: 12px 8px;
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
    var(--surface-1, rgba(255,255,255,0.03));
  color: inherit;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.creator-home.hv5 .hv5-connected-name {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.creator-home.hv5 .hv5-connected-dot {
  position: absolute;
  top: 28px;
  right: 22px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
}
.creator-home.hv5 .hv5-connected-card.is-connected .hv5-connected-dot {
  background: #20df78;
  box-shadow: 0 0 0 4px rgba(32,223,120,0.12);
}
.creator-home.hv5 .hv5-connected-card.needs-attention .hv5-connected-dot {
  background: #ff3b6b;
  box-shadow: 0 0 0 4px rgba(255,59,107,0.12);
}

@media (max-width: 389px) {
  .creator-home.hv5 {
    gap: 20px;
    padding-left: 8px;
    padding-right: 8px;
  }
  .creator-home.hv5 .hv5-head-title {
    font-size: 27px;
  }
  .creator-home.hv5 .hv5-brief-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
    padding-inline: 10px;
  }
  .creator-home.hv5 .hv5-brief-icon,
  .creator-home.hv5 .hv5-empty-icon,
  .creator-home.hv5 .hv5-connected-icon {
    width: 32px;
    height: 32px;
  }
  .creator-home.hv5 .hv5-brief-title {
    font-size: 15px;
  }
  .creator-home.hv5 .hv5-brief-detail,
  .creator-home.hv5 .creator-home-day-body small {
    font-size: 13px;
  }
  .creator-home.hv5 .hv5-row-time {
    display: none;
  }
  .creator-home.hv5 .creator-home-day-list li a {
    grid-template-columns: 70px 3px minmax(0, 1fr) auto;
    gap: 10px;
    padding-inline: 10px;
  }
  .creator-home.hv5 .creator-home-day-time {
    font-size: 13px;
  }
  .creator-home.hv5 .hv5-connected-grid {
    gap: 8px;
  }
  .creator-home.hv5 .hv5-connected-card {
    min-height: 86px;
    padding-inline: 6px;
  }
}

@media (min-width: 768px) {
  .creator-home.hv5 {
    width: min(100%, 760px);
    gap: 26px;
    padding-top: 28px;
  }
  .creator-home.hv5 .hv5-head-title {
    font-size: 34px;
  }
  .creator-home.hv5 .hv5-connected-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }
}

@media (min-width: 1180px) {
  .creator-home.hv5 {
    width: min(100%, 820px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .creator-home.hv5 .hv5-brief-row,
  .creator-home.hv5 .creator-home-day-list li a,
  .creator-home.hv5 .hv5-connected-card {
    transition: background 140ms ease, border-color 140ms ease, transform 80ms ease;
  }
  .creator-home.hv5 .hv5-brief-row:active,
  .creator-home.hv5 .creator-home-day-list li a:active,
  .creator-home.hv5 .hv5-connected-card:active {
    transform: scale(0.995);
  }
}

/* ==================================================================== */
/* Full Calendar page — mobile trim.                                    */
/* Desktop layout is preserved: every rule below is scoped to           */
/* @media (max-width: 767px).                                           */
/*                                                                      */
/* Mobile control grouping (spec):                                      */
/*   ROW 1: date-range title (left)   |   google synced (right)         */
/*   ROW 2: previous | today | next | add item   (4 equal-height)      */
/*   ROW 3: day | week | month   (3 equal-height pill tabs)             */
/*                                                                      */
/* Mobile view modes:                                                   */
/*   day   — single-column timeline, unchanged                          */
/*   week  — 7-day strip + selected day's column only                   */
/*            (hide desktop 7-col head, hide non-selected columns)      */
/*   month — 7-col date grid, compact cells                             */
/* ==================================================================== */

/* Desktop-only: hide the mobile compact list. .calendar-mobile-list is
   the new home-parity block; keeping it out of the desktop flow means
   desktop always shows the full week/day timeline. */
.calendar-mobile-list { display: none; }

@media (max-width: 767px) {
  .calendar-page { padding: 12px 14px calc(88px + env(safe-area-inset-bottom, 0px)) !important; }

  /* Toolbar — ROW 1: eyebrow + title (title wraps if long).
     ROW 2: 4 equal-height nav/action buttons in a single 4-col grid.
     ROW 3 (below, .calendar-view-tabs): 3 equal-height view pills.
     The google-synced pill is absolutely positioned to the top-right
     so the header row stays compact even on 320px. */
  .calendar-page .calendar-toolbar {
    position: relative;
    display: block !important;
    padding: 4px 0 !important;
  }
  .calendar-page .calendar-toolbar > div:first-child {
    min-width: 0;
    padding-right: 110px;
  }
  .calendar-page .calendar-toolbar h1 {
    font-size: 20px !important;
    margin: 2px 0 6px !important;
    overflow-wrap: anywhere;
    line-height: 1.15;
  }
  .calendar-page .calendar-toolbar .eyebrow { font-size: 10.5px !important; }

  /* 4 button top row — 320px must fit prev / today / next / add.
     Equal-height, equal-width, evenly-spaced with 6px gap. */
  .calendar-page .calendar-toolbar-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 4px 0 4px !important;
  }
  .calendar-page .calendar-toolbar-actions .status-pill {
    position: absolute;
    top: 2px;
    right: 0;
    font-size: 10.5px !important;
    padding: 2px 8px !important;
    height: 20px !important;
    display: inline-flex; align-items: center; gap: 4px;
    white-space: nowrap;
  }
  .calendar-page .calendar-toolbar-actions .btn {
    padding: 0 !important;
    height: 30px !important;
    font-size: 12px !important;
    display: inline-flex; align-items: center; justify-content: center;
    white-space: nowrap;
    min-width: 0;
    letter-spacing: 0.01em;
  }

  /* View tabs (day / week / month) — three equal-height pills matching
     the top row visual weight. */
  .calendar-page .calendar-view-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 4px 0 8px !important;
    overflow: visible !important;
  }
  .calendar-page .calendar-view-tabs a {
    padding: 0 !important;
    height: 30px !important;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px !important;
    text-align: center;
    white-space: nowrap;
  }

  /* State messages */
  .calendar-page .calendar-state {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    gap: 8px !important;
  }

  /* ---- WEEK + DAY mobile: hide the entire hourly canvas. The compact
     list below (.calendar-mobile-list) is the only thing that shows.
     This drops ~1400px of empty grid off the mobile viewport. ---- */
  .calendar-page .calendar-week-shell {
    display: none !important;
  }
  .calendar-page .calendar-mobile-list {
    display: block !important;
    margin: 0 0 12px !important;
  }
  .calendar-page .calendar-mobile-list .calendar-mobile-days {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 8px 4px !important;
    margin: 0 0 10px !important;
    border-radius: 12px;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
    background: var(--surface-1, rgba(255,255,255,0.03));
  }
  .calendar-page .calendar-mobile-list .calendar-mobile-days a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    padding: 6px 0;
    border-radius: 8px;
    min-width: 0;
    color: inherit; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .calendar-page .calendar-mobile-list .calendar-mobile-days a span {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink-dim, rgba(255,255,255,0.48));
  }
  .calendar-page .calendar-mobile-list .calendar-mobile-days a strong {
    font-size: 14px; font-weight: 500;
  }
  .calendar-page .calendar-mobile-list .calendar-mobile-days a.is-today strong {
    color: var(--accent, #ff3b6b);
  }
  .calendar-page .calendar-mobile-list .calendar-mobile-days a.is-selected {
    background: rgba(255,255,255,0.06);
  }

  /* Selected-day event list — flat, compact, no hourly grid. Mirrors
     the home compact-day pattern. */
  .calendar-page .calendar-mobile-day-events {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .calendar-page .calendar-mobile-day-events li a {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface-1, rgba(255,255,255,0.03));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    color: inherit;
    text-decoration: none;
    min-height: 44px;
  }
  .calendar-page .calendar-mobile-day-time {
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-dim, rgba(255,255,255,0.55));
    white-space: nowrap;
  }
  .calendar-page .calendar-mobile-day-title {
    font-size: 13.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .calendar-page .calendar-mobile-day-empty {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed var(--border-subtle, rgba(255,255,255,0.08));
    color: var(--ink-dim, rgba(255,255,255,0.55));
    font-size: 12.5px;
    text-align: center;
  }

  /* ---- MONTH mobile: compact 7-col date grid ---- */
  .calendar-page .calendar-month-shell { padding: 0 !important; }
  .calendar-page .calendar-month-weekdays {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px; padding: 4px 0; font-size: 10.5px;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-dim, rgba(255,255,255,0.5));
  }
  .calendar-page .calendar-month-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }
  .calendar-page .calendar-month-cell {
    padding: 6px 4px !important;
    min-height: 46px;
    border-radius: 8px;
    font-size: 12.5px;
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0; overflow: hidden;
  }
  .calendar-page .calendar-month-cell span { font-size: 12px; font-weight: 500; }
  .calendar-page .calendar-month-cell small {
    font-size: 10px; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Footer actions (sync google now / disconnect calendar). Grid so the
     two buttons split the width evenly with a consistent gap; at 320px
     wrap stacks them full-width without touching the safe-area gutter. */
  .calendar-page .calendar-footer-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 12px 0 4px !important;
    margin-top: 4px !important;
  }
  .calendar-page .calendar-footer-actions form {
    margin: 0;
    display: contents;
  }
  .calendar-page .calendar-footer-actions .btn {
    padding: 0 !important;
    height: 34px !important;
    font-size: 12px !important;
    display: inline-flex; align-items: center; justify-content: center;
    white-space: nowrap;
    width: 100%;
  }
}

/* Narrowest phone widths (<=359px, e.g. iPhone SE 1st gen): stack the
   two footer buttons vertically so labels never truncate. */
@media (max-width: 359px) {
  .calendar-page .calendar-footer-actions {
    grid-template-columns: 1fr !important;
  }
}

/* ==================================================================== */
/* Dedicated /creator/calendar page (month-only redesign).                */
/*                                                                       */
/* Every rule below is scoped under .calendar-month-only-page so it can  */
/* NEVER leak into the Home calendar preview, which lives inside         */
/* [data-home-calendar] on dashboard.html and uses its own selectors     */
/* (.hv5-*, .creator-home-day-*, .calendar-mobile-days as a Home-        */
/* specific 7-day strip). Do not add a rule here that targets a bare     */
/* .calendar-* selector — always keep .calendar-month-only-page as an    */
/* ancestor.                                                             */
/* ==================================================================== */

.calendar-month-only-page .calendar-month-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 14px;
}

.calendar-month-only-page .calendar-month-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.calendar-month-only-page .calendar-month-title {
  margin: 0;
  color: var(--text-primary);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.calendar-month-only-page .calendar-month-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.calendar-month-only-page .calendar-month-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-secondary);
  background: var(--surface-1);
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}

.calendar-month-only-page .calendar-month-nav-btn:hover {
  border-color: var(--border-accent);
  color: var(--text-primary);
}

/* Month grid overrides — buttons instead of anchors so the resets
   remove default UA button chrome. Cell content stays the same
   visual shape as the earlier month grid; the redesign adds a today
   dot, a selected-cell treatment, and the +N overflow chip. */
.calendar-month-only-page .calendar-month-cell {
  appearance: none;
  border: 0;
  border-top: 1px solid var(--border-subtle);
  border-left: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.calendar-month-only-page .calendar-month-cell:focus-visible {
  outline: 2px solid var(--border-accent);
  outline-offset: -2px;
}

.calendar-month-only-page .calendar-month-cell.is-selected {
  border-color: var(--border-accent);
  background: var(--surface-2);
}

.calendar-month-only-page .calendar-month-cell-date {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-primary);
}

.calendar-month-only-page .calendar-today-dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent, #ff3b6b);
  z-index: 0;
}

.calendar-month-only-page .calendar-month-cell-num {
  position: relative;
  z-index: 1;
  color: var(--text-primary);
}

.calendar-month-only-page .calendar-month-cell.is-today .calendar-month-cell-num {
  color: #fff;
  font-weight: 600;
}

.calendar-month-only-page .calendar-month-cell-event {
  min-width: 0;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-month-only-page .calendar-month-cell-more {
  padding: 2px 6px;
  color: var(--text-tertiary);
  background: transparent;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
}

/* Bottom sheet — day-detail + add-event share the same container +
   panel shell. Mobile-first: full-width sheet anchored to the bottom
   with a translucent backdrop above the tabbar. Desktop widens the
   panel to a centered card. */
.calendar-month-only-page .calendar-sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: block;
}

.calendar-month-only-page .calendar-sheet[hidden] {
  display: none;
}

.calendar-month-only-page .calendar-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.calendar-month-only-page .calendar-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 85vh;
  overflow-y: auto;
  padding: 18px 18px calc(28px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
  background: var(--surface-0, #0e0e12);
  color: var(--text-primary);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.4);
}

.calendar-month-only-page .calendar-sheet-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.calendar-month-only-page .calendar-sheet-close:hover {
  color: var(--text-primary);
}

.calendar-month-only-page .calendar-sheet-title {
  margin: 0 0 12px;
  padding-right: 40px;
  font-size: 18px;
  line-height: 1.2;
  color: var(--text-primary);
}

.calendar-month-only-page .calendar-sheet-events {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calendar-month-only-page .calendar-sheet-event {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.calendar-month-only-page .calendar-sheet-event-time {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--text-tertiary);
}

.calendar-month-only-page .calendar-sheet-event-title {
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-month-only-page .calendar-sheet-empty {
  padding: 12px 14px;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  font-size: 13px;
  text-align: center;
}

.calendar-month-only-page .calendar-sheet-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--accent, #ff3b6b);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.calendar-month-only-page .calendar-sheet-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.calendar-month-only-page .calendar-sheet-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calendar-month-only-page .calendar-sheet-field > span {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.calendar-month-only-page .calendar-sheet-field input,
.calendar-month-only-page .calendar-sheet-field textarea {
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 14px;
  min-height: 40px;
}

.calendar-month-only-page .calendar-sheet-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 13px;
}

.calendar-month-only-page .calendar-sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}

.calendar-month-only-page .calendar-sheet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
}

.calendar-month-only-page .calendar-sheet-btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-subtle);
}

.calendar-month-only-page .calendar-sheet-btn-primary {
  background: var(--accent, #ff3b6b);
  color: #fff;
}

@media (max-width: 767px) {
  .calendar-month-only-page {
    padding: 12px 14px calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .calendar-month-only-page .calendar-month-header {
    margin: 6px 0 10px;
    gap: 8px;
  }
  .calendar-month-only-page .calendar-month-title {
    font-size: 20px;
  }
  .calendar-month-only-page .calendar-month-nav-btn {
    min-height: 28px;
    padding: 0 10px;
    font-size: 11.5px;
  }
  .calendar-month-only-page .calendar-month-shell {
    padding: 0 !important;
  }
  .calendar-month-only-page .calendar-month-weekdays span {
    padding: 6px 4px;
    font-size: 10px;
  }
  .calendar-month-only-page .calendar-month-cell {
    min-height: 60px;
    padding: 5px 4px;
    gap: 2px;
  }
  .calendar-month-only-page .calendar-month-cell-date {
    width: 22px;
    height: 22px;
    min-width: 22px;
    font-size: 11.5px;
  }
  .calendar-month-only-page .calendar-month-cell-event {
    padding: 2px 5px;
    font-size: 10px;
  }
  .calendar-month-only-page .calendar-month-cell-more {
    padding: 1px 4px;
    font-size: 10px;
  }
  .calendar-month-only-page .calendar-sheet-panel {
    padding: 14px 14px calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .calendar-month-only-page .calendar-sheet-event {
    grid-template-columns: 78px 1fr;
    padding: 8px 10px;
  }
}

/* Discover follow-up (surgical): mobile heading trim + stable nav.
   Applies ONLY to .discover on /creator/discover. The desktop
   heading, the filter toggle button, the kind tabs, and the filter
   panel are all preserved. Delta:
     - Hide the large `discover` h1 at mobile widths so the tab strip
       is the primary chrome.
     - Tighten .discover top spacing since the heading no longer
       occupies its own row.
     - New `.discover-post-link` slot lives in the header's right
       side next to the filter toggle when kind=opportunity, so the
       nav row does NOT restructure or insert an extra row between
       header and tabs.  */
@media (max-width: 767px) {
  .discover-head h1 { display: none; }
  .discover-head {
    justify-content: flex-end;
    min-height: 40px;
    margin: 0 0 4px;
  }
  .discover {
    padding-top: 8px;
  }
}
.discover-post-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--accent, #ff5f7d);
  color: #fff;
  font-size: 13.5px;
  font-weight: 650;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.discover-post-link:hover,
.discover-post-link:focus-visible {
  background: var(--accent-hover, #e8455f);
}

/* =========================================================
   Brief — visual pass 1
   Scoped to `.brief-feed` + `.brief-card*`. Every value comes
   from existing babyg design tokens (no new palette, no new
   font, no new radius scale). Mobile is canonical: one
   continuous vertical feed, cards full-width within the
   existing creator content margin. Desktop constrains the
   same feed into a centered readable column. Nothing here
   affects Home, Discover, Calendar, DM, Bot, Settings or
   Notifications.
   ========================================================= */
.brief-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px 24px;
  max-width: 640px;
  margin: 0 auto;
}
.brief-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 12px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--surface-1, #111);
  color: var(--ink);
}
.brief-card[data-brief-urgent] {
  border-color: rgba(255, 59, 107, 0.28);
}
.brief-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.brief-card-source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.brief-card-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--ink-mid);
  flex-shrink: 0;
}
.brief-card-icon svg {
  width: 18px;
  height: 18px;
}
.brief-card-icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 4px;
}
.brief-card-platform {
  font-size: 13.5px;
  color: var(--ink);
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brief-card-tags {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
.brief-card-type {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  padding: 2px 8px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: rgba(255,255,255,0.015);
  white-space: nowrap;
}
.brief-card-urgent {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: #ff3b6b;
  padding: 2px 8px;
  border: 1px solid rgba(255, 59, 107, 0.35);
  border-radius: 999px;
  background: rgba(255, 59, 107, 0.06);
  white-space: nowrap;
}
.brief-card-headline {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.brief-card-context {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-mid);
  overflow-wrap: anywhere;
}
.brief-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.brief-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
  background: transparent;
}
.brief-card-action-primary {
  background: var(--surface-3, #1c1c1c);
}
.brief-card-action-ghost {
  color: var(--ink-mid);
}
.brief-card-action[aria-disabled="true"] {
  cursor: default;
}
.brief-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--surface-1, #111);
  color: var(--ink-mid);
}
.brief-empty p {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
}

/* Mobile (≤ 430px): identical structure — only spacing tightens
   slightly so the card row still reads on 375px without wrapping
   the tag chips onto a second line. */
@media (max-width: 430px) {
  .brief-feed {
    padding: 10px 14px 24px;
    gap: 10px;
  }
  .brief-card {
    padding: 12px 12px 12px;
    border-radius: 12px;
  }
  .brief-card-headline {
    font-size: 14.5px;
  }
  .brief-card-context {
    font-size: 12.5px;
  }
}
@media (max-width: 375px) {
  .brief-card-platform {
    font-size: 13px;
  }
  .brief-card-type,
  .brief-card-urgent {
    padding: 2px 7px;
    font-size: 10px;
  }
}