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

/* ── Design tokens — shared with the coming-soon page ──────────────────────
   Surfaces run darkest (page) to lightest (input). The accent is the coral
   from the landing page; the gradient is reserved for primary actions. */
:root {
  --bg:          #0e0e0e;
  --panel:       #111113;
  --panel-2:     #151517;
  --surface:     #1c1c1c;
  --surface-2:   #232325;
  --border:      #2e2e2e;
  --border-soft: #232323;

  /* Warm off-white rather than #fff — pure white glares on a near-black UI. */
  --text:        #f0ece9;
  --text-2:      #cdc8c4;
  --text-3:      #ada7a3;
  --text-muted:  #8d8884;

  --accent:      #ff5c38;
  --accent-2:    #ff2d78;
  --accent-3:    #7c3aed;
  --accent-soft: #ff5c3826;
  --accent-line: #ff5c3866;
  --grad: linear-gradient(120deg, #ff5c38, #ff2d78 30%, #7c3aed 60%, #ff2d78 80%, #ff5c38);

  --star:  #fbbf24;
  --ok:    #22c55e;
  --warn:  #fbbf24;
  --err:   #ef4444;

  --font:    'Inter', system-ui, -apple-system, sans-serif;
  --display: 'Sora', 'Inter', system-ui, sans-serif;
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* Text that sits on top of --accent. Coral is dark enough for white here,
     but the light theme darkens the accent further, so both stay legible. */
  --accent-ink: #fff;

  /* Elevation. The shadow colour is a token so light mode can use a warm,
     low-alpha shade instead of the black that reads as a smudge on white. */
  --shadow-c:        rgba(0,0,0,0.45);
  --shadow-c-strong: rgba(0,0,0,0.6);
  --shadow-sm: 0 1px 2px var(--shadow-c);
  --shadow:    0 2px 8px var(--shadow-c);
  --shadow-md: 0 8px 24px var(--shadow-c);
  --shadow-lg: 0 20px 60px var(--shadow-c-strong);

  /* One focus ring for the whole app — borders alone are not a focus state. */
  --ring: 0 0 0 3px var(--accent-soft);
}

/* Light theme. Only the palette changes — every rule below reads these tokens,
   so nothing else needs a light-mode variant. Set by js/theme.js before paint. */
:root[data-theme="light"] {
  --bg:          #faf9f8;
  --panel:       #ffffff;
  --panel-2:     #fbfaf9;
  --surface:     #f3f1ef;
  --surface-2:   #eae7e3;
  --border:      #d9d5d0;
  --border-soft: #e8e4e0;

  /* Warm near-black rather than #000 — pure black is harsh on a warm off-white.
     --text-3 and --text-muted carry most of the app's secondary copy (hints,
     save status, tabs, placeholders), so both clear 4.5:1 on --panel. */
  --text:        #1a1614;
  --text-2:      #3b3532;
  --text-3:      #57504b;
  --text-muted:  #6e6762;

  /* The dark palette's coral is only ~3:1 as text on white. Darkened here so
     accent text and borders stay readable; the gradient is unchanged because
     it is only ever used behind --accent-ink. */
  --accent:      #c53c20;
  --accent-soft: #ff5c3814;
  --accent-line: #ff5c3866;

  /* The dark palette's greens and ambers wash out on white. */
  --star:  #a86f00;
  --ok:    #0f7038;
  --warn:  #a04a08;
  --err:   #c81e1e;

  /* Black at dark-mode alpha reads as a grey smudge on white — warm and sheer. */
  --shadow-c:        rgba(23,20,18,0.08);
  --shadow-c-strong: rgba(23,20,18,0.16);
}

/* ── Universal Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Headings carry the landing page's display face. */
h1, h2, h3, .brand, .display {
  font-family: var(--display);
  letter-spacing: -0.015em;
}

@keyframes sweep { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

/* One focus state for the whole app. Border-colour alone was the only cue, which
   is invisible on the controls that already have a coloured border — keyboard
   users had nothing to follow. :focus-visible keeps it off mouse clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.preview-tab:focus-visible,
.rail-item:focus-visible,
.ob-rstep:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: var(--ring);
  border-radius: var(--r-xs);
}

/* ── Dev-only navigation bar (devnav.js) ── */
.devnav {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 6px;
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
  font-family: var(--font);
}
.devnav-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--warn);
  padding: 0 8px 0 4px;
}
.devnav-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  transition: background 0.15s, color 0.15s;
}
.devnav-btn:hover { background: var(--surface); color: var(--text); }
.devnav-btn.active { background: var(--accent); color: var(--accent-ink); }

/* On phones the top-center bar collides with page headers — dock it to the
   bottom and shrink it so it stays out of the way. */
@media (max-width: 900px) {
  .devnav {
    top: auto;
    bottom: 12px;
    gap: 2px;
    padding: 5px;
    opacity: 0.92;
  }
  .devnav-tag { font-size: 0.6rem; padding: 2px 5px; }
  .devnav-btn { padding: 5px 9px; font-size: 0.72rem; }
}

/* ── Chat-page aliases ──
   Only names the chat page uses that the shared tokens do not already provide.
   Re-declaring a shared name here (--bg, --text, --accent…) would either shadow
   it globally or, if it referenced itself, form a cycle that voids the property
   everywhere — which is what turned the dashboard white. */
:root {
  --surface2:      var(--surface);
  --accent-msg:    var(--accent-2);
  --text-dim:      var(--text-muted);
  --online:        var(--ok);
  --bubble-bot:    var(--panel-2);
  --bubble-user:   var(--accent-soft);
  --radius-bubble: 20px;
  --header-h:      72px;
  --input-h:       72px;
  --safe-bottom:   env(safe-area-inset-bottom, 0px);
}

/* The 8%-alpha coral that reads fine over a near-black page all but vanishes on
   #faf9f8. Declared after the alias block so it wins over --bubble-user's
   var(--accent-soft) reference. */
:root[data-theme="light"] {
  --bubble-user: #ff5c3824;
}

/* ══════════════════════════════════════
   CHAT PAGE  (body.page-chat)
   ══════════════════════════════════════ */

body.page-chat {
  min-height: 100dvh;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.chat-container {
  width: 100%;
  max-width: 520px;
  height: min(780px, calc(100dvh - 48px));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}

/* ── Name entry screen (first "page" inside the chat widget) ── */
.name-gate {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  animation: gate-fade 0.25s ease;
}
.name-gate.hidden { display: none; }
@keyframes gate-fade { from { opacity: 0; } to { opacity: 1; } }
.name-gate-card {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.name-gate-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface2);
  border: 2px solid var(--border);
}
.name-gate-title { font-size: 20px; font-weight: 600; color: var(--text); }
.name-gate-sub { font-size: 14px; color: var(--text-muted); margin-top: -8px; }
.name-gate input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--bubble-bot);
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s;
}
.name-gate input::placeholder { color: var(--text-dim); }
.name-gate input:focus { border-color: var(--accent); }
.name-gate-btn {
  width: 100%;
  padding: 13px;
  border-radius: var(--r-lg);
  border: none;
  background: var(--accent);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.08s;
}
.name-gate-btn:hover { opacity: 0.9; }
.name-gate-btn:active { transform: scale(0.98); }

.header {
  /* Pinned over the messages rather than stacked above them, so the list keeps
     the full height and slides underneath when the keyboard opens. */
  position: absolute;
  top: 0; left: 0; right: 0;
  min-height: var(--header-h);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 4;
}
@supports not (backdrop-filter: blur(2px)) {
  .header { background: var(--surface); }
}

.header-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.header-avatar-wrap img {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface2);
  display: block;
}

.online-dot {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--online);
  border: 2px solid var(--surface);
  box-shadow: 0 0 6px rgba(34,197,94,0.5);
}

.header-info { flex: 1; min-width: 0; }

.header-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.header-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-status-chip {
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
}

.header-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.conn-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-dim);
}

body.page-chat .conn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: background 0.3s;
}
body.page-chat .conn-dot.ok  { background: var(--online); }
body.page-chat .conn-dot.err { background: var(--err); }

.user-chip {
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-chip:hover { border-color: var(--accent); color: var(--text); }

.chat-window {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 16px;
  padding-top: calc(var(--hdr-h, 64px) + 16px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  scroll-behavior: smooth;
  background: var(--bg);
}
.chat-window::-webkit-scrollbar { width: 4px; }
.chat-window::-webkit-scrollbar-track { background: transparent; }
.chat-window::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 9999px; }

.date-sep {
  align-self: center;
  font-size: 11px;
  color: var(--text-dim);
  background: var(--surface);
  padding: 3px 12px;
  border-radius: 9999px;
  margin: 10px 0 6px;
  user-select: none;
}

.msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 2px;
}
.msg-row.user { justify-content: flex-end; }
.msg-row.bot  { justify-content: flex-start; }

.msg-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface2);
  flex-shrink: 0;
  align-self: flex-end;
}
.msg-av-spacer { width: 28px; flex-shrink: 0; }

.bubble {
  max-width: min(72%, 360px);
  padding: 11px 15px;
  font-size: 15px;
  line-height: 1.5;
  word-break: break-word;
  position: relative;
}
.msg-row.bot .bubble {
  background: var(--bubble-bot);
  color: var(--text);
  border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) 6px;
  border: 1px solid var(--border);
}
.msg-row.user .bubble {
  background: var(--bubble-user);
  /* Token, not a fixed light tint: the bubble is a translucent accent, so on
     the light theme (and inside the builder's preview rail) fixed pale text
     disappears into the page. */
  color: var(--text);
  /* The fill is translucent by design, so the edge is what separates the bubble
     from the page — without it the light theme shows an untethered block of text. */
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-bubble) var(--radius-bubble) 6px var(--radius-bubble);
}
.msg-row.bot.cont .bubble  { border-top-left-radius: 6px; }
.msg-row.user.cont .bubble { border-top-right-radius: 6px; }

.bubble-photo {
  display: block;
  width: 100%;
  max-width: 260px;
  max-height: 340px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: zoom-in;
}

.bubble-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

.bubble-time {
  display: block;
  font-size: 10px;
  margin-top: 5px;
  opacity: 0.45;
  text-align: right;
}

.typing-row {
  display: none;
  align-items: flex-end;
  gap: 8px;
  padding: 2px 0 4px;
}
.typing-bubble {
  background: var(--bubble-bot);
  border: 1px solid var(--border);
  border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) 6px;
  padding: 12px 16px;
  display: flex;
  gap: 5px;
  align-items: center;
}
.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-dim);
  animation: bounce 1.2s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.18s; }
.typing-dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40%  { transform: translateY(-5px); opacity: 1; }
}

.input-area {
  flex-shrink: 0;
  padding: 12px 16px calc(12px + var(--safe-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 0 16px;
  transition: border-color 0.15s;
  min-height: 46px;
}
.input-wrap:focus-within { border-color: var(--accent); }
.input-wrap input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  padding: 12px 0;
  min-width: 0;
}
.input-wrap input::placeholder { color: var(--text-dim); }

.send-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
}
.send-btn:hover  { background: var(--accent-2); }
.send-btn:active { transform: scale(0.93); }
.send-btn svg { width: 20px; height: 20px; }

@media (max-width: 600px) {
  body.page-chat {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  body.page-chat, body.page-chat .chat-shell {
    /* --vvh tracks the visual viewport, so the keyboard shrinks the chat
       instead of pushing its header off the top of the screen. */
    height: var(--vvh, 100dvh);
    min-height: 0;
  }
  body.page-chat .chat-container {
    max-width: 100%;
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
  .chat-container { height: var(--app-height, 99vh); }
  .header { height: auto; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); }
  .header-avatar-wrap img { width: 40px; height: 40px; }
  .bubble { max-width: 82%; }
}

body.page-chat.embed {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  /* A definite height, so the shell's height:100% has something to resolve
     against — min-height alone leaves it sized to its content. */
  height: var(--vvh, 100dvh);
  min-height: 0;
  overflow: hidden;
}
body.page-chat.embed .chat-container {
  max-width: 100%;
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
  box-shadow: none;
}
body.page-chat.embed .chat-shell {
  max-width: 100%;
  width: 100%;
  height: 100%;
  gap: 0;
}
body.page-chat.embed .persona-rail { display: none; }
/* The demo embed is wide enough to show the rail, and it is part of the pitch. */
body.page-chat.embed.demo { padding: 14px; }
body.page-chat.embed.demo .chat-shell { gap: 14px; height: 100%; max-height: 100%; }
body.page-chat.embed.demo .chat-container { border-radius: var(--r-xl); border: 1px solid var(--border); }
body.page-chat.embed.demo .persona-rail { display: flex; }
@media (max-width: 720px) {
  body.page-chat.embed.demo { padding: 0; }
  body.page-chat.embed.demo .persona-rail { display: none; }
  body.page-chat.embed.demo .chat-container { border-radius: 0; border: none; }
}

/* ── Persona rail (chat-side switcher) ── */
.chat-shell {
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  max-width: 760px;
  height: min(780px, calc(100dvh - 48px));
}
.chat-shell .chat-container {
  flex: 1;
  height: 100%;
  min-width: 0;
}
.persona-rail {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.persona-rail-header {
  flex-shrink: 0;
  padding: 18px 18px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.persona-rail-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.persona-rail-list::-webkit-scrollbar { width: 4px; }
.persona-rail-list::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 9999px; }
.rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r);
  cursor: pointer;
  transition: background 0.15s;
}
.rail-item:hover { background: var(--surface2); }
.rail-item.active { background: var(--bubble-user); }
.rail-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
}
.rail-info { min-width: 0; flex: 1; }
.rail-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rail-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 720px) {
  .chat-shell { flex-direction: column; gap: 0; max-width: 100%; }
  .persona-rail {
    width: 100%;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    max-height: 84px;
  }
  .persona-rail-header { display: none; }
  .persona-rail-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .rail-item { flex-shrink: 0; }
  .rail-info { display: none; }
}

/* ── Dating-app style profile / gallery popup (chat) ── */
.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.profile-modal.open { opacity: 1; pointer-events: auto; }
.profile-card {
  position: relative;
  width: 100%;
  max-width: 980px;
  max-height: calc(100dvh - 40px);
  min-height: min(600px, calc(100dvh - 40px));
  background: var(--panel);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  box-shadow: var(--shadow-lg);
  transform: translateY(8px);
  transition: transform 0.25s ease;
}
.profile-modal.open .profile-card { transform: translateY(0); }
.profile-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.85rem;
  cursor: pointer;
  z-index: 3;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.profile-close:hover { background: var(--surface-2); color: var(--text); }

/* ── Left column: who she is ── */
.profile-info {
  padding: 44px 40px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-content: start;
}
.profile-eyebrow {
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 4px 11px;
  border-radius: 9999px;
  margin-bottom: 8px;
}
.profile-name-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.profile-name {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
}
.profile-age { font-size: 1.35rem; font-weight: 400; color: var(--text-3); }
.profile-verified {
  align-self: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.7rem;
  display: flex; align-items: center; justify-content: center;
}
.profile-loc { font-size: 0.9rem; color: var(--text-muted); }
.profile-bio {
  font-size: 1rem;
  color: var(--text-2);
  line-height: 1.6;
  margin-top: 6px;
  white-space: pre-wrap;
}
.profile-interests { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.interest-chip {
  font-size: 0.78rem;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: 9999px;
}
.profile-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pf-btn {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.pf-btn:hover { background: var(--surface-2); }
.pf-btn.primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.pf-btn.primary:hover { filter: brightness(1.06); }
.pf-btn:active { transform: translateY(1px); }

/* ── Right column: the photos ── */
.profile-gallery {
  position: relative;
  min-height: 420px;
  background: var(--bg);
  overflow: hidden;
}
.profile-gallery img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}
.pg-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pg-nav:hover { background: rgba(0,0,0,0.65); }
.pg-nav.prev { left: 12px; }
.pg-nav.next { right: 12px; }

/* Thumbnail strip, floated over the photo like a segmented control. */
.pg-thumbs {
  position: absolute;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  padding: 4px;
  max-width: calc(100% - 32px);
  overflow-x: auto;
  border-radius: 12px;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(8px);
}
.pg-thumb {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  padding: 0;
  border-radius: 9px;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.62;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.pg-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.pg-thumb:hover { opacity: 0.85; }
.pg-thumb.active { opacity: 1; border-color: var(--accent); }

/* Fullscreen photo view */
.profile-card.fs {
  max-width: 100vw;
  max-height: 100dvh;
  width: 100vw; height: 100dvh;
  border-radius: 0;
  grid-template-columns: 1fr;
}
.profile-card.fs .profile-info { display: none; }
.profile-card.fs .profile-gallery img { object-fit: contain; cursor: zoom-out; }

@media (max-width: 860px) {
  .profile-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    max-width: 460px;
  }
  .profile-gallery { grid-row: 1; min-height: 0; aspect-ratio: 3/4; }
  .profile-info { grid-row: 2; padding: 24px 22px 28px; }
  .profile-name { font-size: 1.9rem; }
}

/* ══════════════════════════════════════
   DASHBOARD PAGE  (body.page-dashboard)
   ══════════════════════════════════════ */

body.page-dashboard {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  height: 100dvh; /* the mobile URL bar eats the difference */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.page-dashboard header {
  background: var(--panel);
  border-bottom: 1px solid var(--border-soft);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
}
body.page-dashboard header h1 {
  font-size: 1rem; font-weight: 800; letter-spacing: -0.3px;
  background: var(--grad); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.page-dashboard .badge {
  font-size: 0.7rem; padding: 2px 9px; border-radius: 9999px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line); font-weight: 600;
}

/* Admin-only chrome. Hidden while the identity check is in flight so it never
   flashes for a normal user, then revealed only for admins. */
body.auth-pending .admin-only,
body:not(.is-admin) .admin-only { display: none !important; }



.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr 340px;
  min-height: 0;
  overflow: hidden;
}

.sidebar {
  border-right: 1px solid var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
.sb-scroll { flex: 1; overflow-y: auto; min-height: 0; padding: 10px 10px 6px; }

.sb-ws { display: flex; align-items: center; gap: 10px; padding: 6px 6px 14px; }
.sb-ws-avatar {
  width: 32px; height: 32px; border-radius: var(--r-sm); flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-weight: 700; font-size: 0.78rem;
  display: flex; align-items: center; justify-content: center;
}
.sb-ws-info { min-width: 0; }
.sb-ws-name { font-size: 0.85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-ws-tier { font-size: 0.72rem; color: var(--text-muted); }

.sb-search {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; margin-bottom: 12px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); color: var(--text-muted);
}
.sb-search input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-size: 0.82rem; color: var(--text); font-family: var(--font);
}
.sb-search input::placeholder { color: var(--text-muted); }
.sb-kbd {
  font-size: 0.64rem; color: var(--text-muted); background: var(--panel);
  border: 1px solid var(--border-soft); border-radius: 4px; padding: 1px 5px;
  font-family: inherit;
}

.sb-nav { display: flex; flex-direction: column; }
.sb-label {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); padding: 14px 8px 6px;
}
.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: var(--r-sm);
  font-size: 0.83rem; color: var(--text-2); text-decoration: none;
  border: none; background: none; width: 100%; text-align: left; cursor: pointer;
  font-family: var(--font);
}
.sb-item svg { flex-shrink: 0; color: var(--text-muted); }
.sb-ic-chat { color: var(--accent); }
.sb-ic-x, .sb-ic-threads { color: var(--text); }
.sb-ic-telegram { color: #29A9EB; }
.sb-item span:not(.sb-badge):not(.sb-chevron) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-item:hover { background: var(--surface); color: var(--text); }
.sb-item.active { background: var(--surface); color: var(--text); font-weight: 600; }
.sb-item.active svg { color: var(--text); }
.sb-badge {
  font-size: 0.68rem; color: var(--text-muted); background: var(--surface-2);
  border-radius: 9999px; padding: 1px 7px; flex: 0 0 auto;
}

.sb-quick { display: flex; flex-direction: column; margin: 2px 0 6px; padding: 0 10px; }
.sb-showall {
  display: block; width: 100%; text-align: left;
  padding: 7px 12px; margin-top: 2px;
  background: none; border: none; border-radius: var(--r-sm);
  color: var(--text-3); font: inherit; font-size: 0.78rem; font-weight: 500;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.sb-showall:hover { background: var(--surface); color: var(--text); }

.sb-group { display: flex; flex-direction: column; }
.sb-chevron { transition: transform 0.15s; color: var(--text-muted); flex: 0 0 auto; }
.sb-group.open .sb-chevron { transform: rotate(90deg); }
.sb-children {
  display: none; flex-direction: column; margin-left: 19px;
  padding-left: 10px; border-left: 1px solid var(--border-soft);
}
.sb-group.open .sb-children { display: flex; }
.sb-children .sb-item { font-size: 0.8rem; }

.sb-no-match { padding: 10px 8px; font-size: 0.8rem; color: var(--text-muted); }

.sb-foot {
  flex-shrink: 0; padding: 8px 10px 10px;
  border-top: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 2px;
}
.persona-item {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s;
  margin-bottom: 2px;
}
.persona-item:hover  { background: var(--panel); border-color: var(--border); }
.persona-item.active {
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  box-shadow: inset 3px 0 0 var(--accent);
}
.persona-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.geo-suggest {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  z-index: 30;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
}
.geo-item { padding: 8px 12px; font-size: 0.85rem; color: var(--text); cursor: pointer; }
.geo-item:hover { background: var(--surface); }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.photo-cell {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border-soft);
}
.photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-add {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-style: dashed;
  color: var(--text-muted);
  font-size: 1.6rem;
  transition: border-color 0.15s, color 0.15s;
}
.photo-add:hover { border-color: var(--accent); color: var(--text-3); }
.photo-del {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.6);
  color: var(--text);
  cursor: pointer;
  font-size: 0.7rem;
  display: flex; align-items: center; justify-content: center;
}
.photo-del:hover { background: var(--err); }
.photo-badge {
  position: absolute;
  bottom: 4px; left: 4px;
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: rgba(124,58,237,0.9);
  color: var(--text);
  padding: 1px 6px;
  border-radius: 9999px;
}

.persona-star { margin-left: auto; }
.persona-name { font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.persona-slug { font-size: 0.7rem; color: var(--text-muted); }
.persona-tag {
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-3);
  background: var(--surface);
  padding: 1px 6px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.persona-del {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 4px 6px;
  border-radius: var(--r-sm);
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.persona-item:hover .persona-del,
.persona-item:focus-within .persona-del { opacity: 1; }
.persona-del:hover { color: var(--err); background: var(--border); }
.persona-star {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 1.06rem;
  line-height: 1;
  border-radius: var(--r-sm);
  transition: color 0.15s, background 0.15s, transform 0.12s;
}
.persona-star:hover { background: var(--surface); transform: scale(1.12); }
.persona-star.active,
.persona-star:hover { color: var(--star); }
.btn-new {
  margin: 12px;
  padding: 10px;
  background: var(--grad); background-size: 300% 100%;
  border: none;
  border-radius: var(--r);
  color: var(--accent-ink);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
  flex-shrink: 0;
}
.btn-new:hover { transform: translateY(-1px); box-shadow: 0 6px 20px #ff2d7855; animation: sweep 3s ease-in-out infinite alternate; }



.form-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 28px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-area > h2,
.form-area > div:first-child { letter-spacing: -0.3px; }

.form-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-section:hover { border-color: var(--border); }
.form-section:focus-within {
  border-color: var(--border);
  box-shadow: 0 0 0 1px var(--accent-soft), var(--shadow);
}
.section-title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: 9px;
}
.section-title::before {
  content: '';
  width: 3px;
  height: 13px;
  border-radius: 9999px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  flex-shrink: 0;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; align-items: start; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field.full { grid-column: 1 / -1; }

/* The avatar keeps the same column edges as every other row, so the form reads
   as one grid. Its picture and buttons sit side by side rather than leaving the
   column half empty with a stretched Upload button. */
.field-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.identity-avatar .avatar-block { display: flex; align-items: center; gap: 14px; }
.identity-avatar .avatar-actions {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.identity-avatar .avatar-actions .btn {
  padding: 5px 14px; font-size: 0.78rem; white-space: nowrap;
}

body.page-dashboard label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.2px;
  line-height: 1.4;
}

body.page-dashboard input[type="text"],
body.page-dashboard input[type="number"],
body.page-dashboard input[type="password"],
body.page-dashboard textarea,
body.page-dashboard select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  padding: 11px 14px;
  font-size: 0.95rem;
  line-height: 1.5;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  width: 100%;
}
body.page-dashboard input::placeholder,
body.page-dashboard textarea::placeholder { color: var(--text-muted); }
body.page-dashboard input[type="text"]:hover,
body.page-dashboard input[type="number"]:hover,
body.page-dashboard textarea:hover,
body.page-dashboard select:hover { border-color: var(--accent-line); }
body.page-dashboard input:focus,
body.page-dashboard textarea:focus,
body.page-dashboard select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
body.page-dashboard textarea { min-height: 84px; resize: vertical; line-height: 1.55; }
body.page-dashboard select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  cursor: pointer;
}

.hint { font-size: 0.79rem; color: var(--text-muted); line-height: 1.6; }

.slider-row { display: flex; align-items: center; gap: 14px; }
.slider-row input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 9999px;
  border: none;
  outline: none;
  background: var(--surface-2);
  padding: 0;
  cursor: pointer;
}
.slider-row input[type="range"]:focus,
.slider-row input[type="range"]:focus-visible,
.slider-row input[type="range"]:active {
  outline: none;
  box-shadow: none;
}
.slider-row input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.slider-row input[type="range"]::-moz-range-track { background: transparent; }
.slider-row input[type="range"]::-moz-range-progress { background: transparent; }
.slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: 0;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--warmth-color, var(--accent));
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
}
.slider-row input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
.slider-row input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--warmth-color, var(--accent));
  cursor: pointer;
  transition: border-color 0.12s;
}
.slider-labels { display: flex; justify-content: space-between; font-size: 0.64rem; color: var(--text-muted); margin-top: 4px; }
.slider-val {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  min-width: 26px;
  text-align: center;
  background: var(--surface);
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  padding: 2px 0;
  transition: color 0.12s, border-color 0.12s;
}

.toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle input:checked + .toggle-track { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.toggle input:focus-visible + .toggle-track { box-shadow: 0 0 0 3px var(--accent-line); }
.toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s;
}
.toggle input:checked + .toggle-track::after { transform: translateX(18px); }
.toggle-row { display: flex; align-items: center; gap: 10px; }
.toggle-label { font-size: 0.875rem; color: var(--text-2); }

.action-bar {
  display: flex;
  gap: 10px;
  padding: 16px 32px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg);
  position: sticky;
  bottom: 0;
  flex-wrap: nowrap;
  align-items: center;
}
/* Larger type made these wrap to two rows; keep the bar one line tall. */
.action-bar .btn { flex-shrink: 0; white-space: nowrap; padding: 10px 17px; }
.btn {
  padding: 10px 22px;
  border-radius: var(--r);
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out,
              background-color 0.2s ease-out, color 0.2s ease-out,
              border-color 0.2s ease-out;
}
.btn-primary {
  background: var(--grad); background-size: 300% 100%;
  color: var(--accent-ink); font-weight: 600;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px #ff2d7855;
  animation: sweep 3s ease-in-out infinite alternate;
}
.btn-secondary { background: var(--surface); color: var(--text); }
.btn-secondary:hover { background: var(--border); color: var(--accent); }
.btn-ghost  { background: transparent; color: var(--text-muted); border: 1px solid var(--border-soft); }
.btn-ghost:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.platform-tab.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.platform-tab.active:hover { background: var(--accent); border-color: var(--accent); }
.save-status { font-size: 0.8rem; color: var(--text-muted); align-self: center; margin-left: auto; }
.save-status.ok  { color: var(--ok); }
.save-status.err { color: var(--err); }

/* The rail is a card floating in its column, not a walled-off third pane — same
   recipe as .form-section one elevation step up, so it matches what it sits beside. */
.preview-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  padding: 14px 14px 14px 0;
}
.preview-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.preview-header {
  padding: 14px 16px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.preview-tabs { display: flex; border-bottom: 1px solid var(--border-soft); }
.preview-tab {
  padding: 13px 16px;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.preview-tab:hover { color: var(--text-2); background: var(--panel-2); }
.preview-tab.active { color: var(--accent); border-color: var(--accent); font-weight: 600; }
.preview-content { flex: 1; overflow-y: auto; padding: 16px; }

.prompt-box {
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 14px;
  font-size: 0.78rem;
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--text-3);
  font-family: 'Menlo', 'Monaco', monospace;
  min-height: 200px;
}
.chat-preview { display: flex; flex-direction: column; gap: 10px; }
.chat-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: var(--r-lg);
  font-size: 0.85rem;
  line-height: 1.45;
}
.chat-bubble.bot  { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 4px; }
.chat-bubble.user { align-self: flex-end; background: var(--accent); border-bottom-right-radius: 4px; color: var(--text); }

.funnel-stage {
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.funnel-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.funnel-stage-name { font-size: 0.8rem; font-weight: 600; }
.funnel-stage-desc { font-size: 0.72rem; color: var(--text-muted); }

.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  text-align: center;
  padding: 40px;
}
.empty-state svg { width: 48px; height: 48px; opacity: 0.4; }
.empty-state p { font-size: 0.875rem; }

.es-card {
  width: 100%;
  max-width: 470px;
  padding: 30px 30px 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--panel);
  text-align: left;
  color: var(--text);
}
.es-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.es-title { font-size: 1.35rem; font-weight: 700; margin: 6px 0 8px; }
.es-sub { font-size: 0.88rem; line-height: 1.55; color: var(--text-3); margin: 0; }
.es-steps {
  list-style: none;
  margin: 20px 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.es-steps li { display: flex; align-items: flex-start; gap: 12px; }
.es-num {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.es-steps strong { display: block; font-size: 0.85rem; font-weight: 600; }
.es-steps span:not(.es-num) { font-size: 0.78rem; color: var(--text-muted); }
.es-cta { width: 100%; justify-content: center; }
.es-foot { font-size: 0.72rem; color: var(--text-muted); margin: 12px 0 0; text-align: center; }

.conn-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  transition: border-color 0.15s;
}
.conn-badge:hover { border-color: var(--border); }

body.page-dashboard .conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}
body.page-dashboard .conn-dot.ok  { background: var(--ok); box-shadow: 0 0 6px var(--ok)88; }
body.page-dashboard .conn-dot.err { background: var(--err); }

.icon-btn {
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: var(--r-sm);
  transition: color 0.15s, background 0.15s;
}
.icon-btn:hover { color: var(--accent); background: var(--accent-soft); }

/* Light/dark switch. One button showing the icon of the theme it switches to:
   a sun while dark, a moon while light. */
.theme-toggle { padding: 6px; }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .ico-sun { display: block; }
.theme-toggle .ico-moon { display: none; }
:root[data-theme="light"] .theme-toggle .ico-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ico-moon { display: block; }

.btn-ai {
  background: var(--grad); background-size: 300% 100%;
  /* --text flips to near-black in light mode, which is unreadable on the
     gradient; --accent-ink is the colour that sits on the accent in both. */
  color: var(--accent-ink);
  border: none;
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px #ff5c3840;
  transition: transform 0.12s, box-shadow 0.15s, filter 0.15s;
}
.btn-ai:hover { transform: translateY(-1px); box-shadow: 0 4px 14px #ff2d7855; filter: brightness(1.06); }
.btn-ai:active { transform: translateY(0); }
.btn-ai:disabled { opacity: 0.55; cursor: wait; filter: saturate(0.6); transform: none; box-shadow: none; }

/* ── Loading ──────────────────────────────────────────────────────────────
   Generation used to show only a text swap and a faded button, which people
   missed and clicked through. Three staggered dots read as "working" at a
   glance and cost nothing. */
.loader-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  vertical-align: middle;
}
.loader-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: dot-bounce 1.4s ease-in-out infinite both;
}
.loader-dots i:nth-child(2) { animation-delay: 0.16s; }
.loader-dots i:nth-child(3) { animation-delay: 0.32s; }
.loader-dots.lg { gap: 7px; }
.loader-dots.lg i { width: 10px; height: 10px; }

@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.45; }
  40%           { transform: scale(1);   opacity: 1; }
}

/* Inline status line: dots plus what is being generated. */
.busy-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 0.8rem;
}

/* Photo generation is the longest wait and the grid is the thing changing, so
   it gets a scrim over the grid rather than a label beside a button. */
.loader-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  backdrop-filter: blur(2px);
  color: var(--text-2);
  font-size: 0.82rem;
  text-align: center;
  padding: 16px;
}
.loader-host { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .loader-dots i { animation: none; opacity: 0.7; }
  .btn-primary:hover, .btn-new:hover { animation: none; }
}

/* Per-section save button, sits at the right edge of a .section-title */
.btn-section-save {
  margin-left: auto;
  background: var(--border-soft);
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 4px 12px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-section-save:hover { background: var(--border); color: var(--text); border-color: var(--border); }
.btn-section-save.saved { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); border-color: var(--ok); }
.btn-section-save.failed { background: color-mix(in srgb, var(--err) 16%, transparent); color: var(--err); border-color: var(--err); }

/* ── Outfits ──────────────────────────────────────────────────────────────── */

.outfit {
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.outfit:hover { border-color: var(--border); }
.outfit.is-open { border-color: var(--border); }

.outfit-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  cursor: pointer;
  user-select: none;
}
.outfit-head:hover { background: var(--panel-2); }

.outfit-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outfit-num.empty { background: var(--surface); color: var(--text-muted); }

.outfit-name { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.outfit-name.empty { color: var(--text-muted); font-weight: 400; font-style: italic; }
.outfit-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.outfit-count {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-3);
  background: var(--border-soft);
  border-radius: 9999px;
  padding: 2px 9px;
}
.outfit-count.zero { color: var(--text-muted); background: var(--panel-2); }
.outfit-caret {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 0.7rem;
  transition: transform 0.18s;
}
.outfit.is-open .outfit-caret { transform: rotate(90deg); }

.outfit-body {
  display: none;
  padding: 4px 14px 14px;
  border-top: 1px solid #202024;
}
.outfit.is-open .outfit-body { display: block; }

.outfit-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  padding: 14px 0;
}

.outfit-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  padding-top: 4px;
}
.outfit-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
}
.outfit-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.outfit-photo select {
  position: absolute;
  left: 5px; right: 5px; bottom: 5px;
  width: auto;
  font-size: 0.66rem;
  padding: 3px 6px;
  background: rgba(9,9,11,0.9);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
}
.outfit-photo .rm {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  border: none;
  border-radius: 5px;
  background: rgba(9,9,11,0.8);
  color: #f87171;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.outfit-photo:hover .rm { opacity: 1; }
.outfit-photo .rm:hover { background: #7f1d1d; color: var(--text); }

.outfit-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: 0.72rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.outfit-drop:hover { border-color: var(--accent); color: var(--text-3); background: var(--panel-2); }

/* ── Media Vault ── */
.vault {
  background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: var(--r);
  padding: 14px 16px; margin-bottom: 14px;
}
.vault.drop-active { outline: 2px dashed var(--accent); outline-offset: 3px; background: var(--accent)0d; }
.vault-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.vault-title { font-size: 0.82rem; font-weight: 600; color: var(--text); letter-spacing: .02em; }
.vault-title span { color: var(--text-muted); font-weight: 400; }
.vault-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vault-tools select, .vault-add-target {
  background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
  color: var(--text-2); font-size: 0.75rem; padding: 6px 8px;
}
.vault-sel { font-size: 0.75rem; color: var(--accent); min-width: 62px; }
.vault-danger { background: #7f1d1d !important; }
.vault-danger:hover:not(:disabled) { background: #991b1b !important; }
.vault-tools .btn-ai:disabled { opacity: .45; cursor: not-allowed; }
.vault-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px; max-height: 260px; overflow-y: auto; padding: 2px;
}
.vault-item {
  position: relative; aspect-ratio: 3/4; border-radius: var(--r-sm); overflow: hidden;
  border: 2px solid transparent; cursor: pointer; background: var(--bg);
}
.vault-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vault-item:hover { border-color: var(--border); }
.vault-item.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent)44; }
.vault-item .rm {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px;
  border: none; border-radius: 50%; background: #000000b0; color: var(--text);
  font-size: 12px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s;
}
.vault-item:hover .rm { opacity: 1; }
.vault-badge {
  position: absolute; bottom: 3px; left: 3px; padding: 1px 6px; border-radius: 999px;
  background: var(--accent)cc; color: var(--text); font-size: 0.62rem; font-weight: 700;
}
.vault-badge.none { background: var(--border)cc; color: var(--text-3); }
.vault-empty { grid-column: 1 / -1; color: var(--text-muted); font-size: 0.8rem; padding: 18px 0; text-align: center; }

.outfit-photo[draggable="true"] { cursor: grab; }
.outfit-photo.dragging { opacity: .4; cursor: grabbing; }
.outfit-photo.drop-before { box-shadow: -3px 0 0 0 var(--accent); }
.outfit-photo.drop-after  { box-shadow:  3px 0 0 0 var(--accent); }
.outfit-photos.drop-active {
  outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: var(--r);
  background: var(--accent)0d;
}
.outfit-drop small { display: block; font-size: 0.66rem; color: var(--text-muted); margin-top: 3px; }

.outfit-gen { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.outfit-seed { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.outfit-seed-label { font-size: 0.72rem; color: var(--text-muted); margin-right: 2px; }
.outfit-seed-img {
  width: 34px; height: 44px; object-fit: cover; border-radius: 5px;
  border: 1px solid var(--border); cursor: pointer; transition: border-color .15s, transform .15s;
}
.outfit-seed-img:hover { border-color: var(--accent); transform: translateY(-1px); }
.outfit-gen-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.outfit-gen-count {
  background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
  color: var(--text-2); font-size: 0.75rem; padding: 6px 8px;
}
.outfit-gen-status { font-size: 0.75rem; color: var(--text-3); }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.15s ease-out;
}
@keyframes modalIn {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-soft);
}
.modal-header h2 { font-size: 1.05rem; font-weight: 600; color: var(--text); }
.modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.modal-close:hover { color: var(--text); }
.modal-body { padding: 22px; }
.modal-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  justify-content: flex-end;
}
.modal-footer .save-status { margin-right: auto; margin-left: 0; }

.conn-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  font-size: 0.82rem;
  color: var(--text-3);
}

body.page-dashboard code {
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.78em;
  color: var(--text-2);
}

.mobile-only { display: none !important; }
.mobile-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  z-index: 150; opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.mobile-overlay.open { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
  .mobile-only { display: inline-flex !important; }
  .desk-only { display: none !important; }
  .layout { grid-template-columns: 1fr; position: relative; }

  .sidebar, .preview-panel {
    position: fixed; top: 0; bottom: 0; height: 100%;
    z-index: 200; width: 290px; max-width: 86vw;
    background: var(--bg);
    transition: transform 0.26s cubic-bezier(.4,0,.2,1);
    will-change: transform;
  }
  .sidebar { left: 0; border-right: 1px solid var(--surface); transform: translateX(-101%); }
  .preview-panel { right: 0; width: 340px; border-left: 1px solid var(--border-soft); transform: translateX(101%); }
  .sidebar.open, .preview-panel.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .preview-panel { padding: 0; }

  /* The dim strip left over next to a 340px drawer is a thin close target, so
     each drawer carries its own button. */
  .panel-close {
    position: absolute; top: 8px; right: 8px; z-index: 5;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); background: var(--panel);
    color: var(--text-2); font-size: 1.15rem; line-height: 1; cursor: pointer;
  }
  /* Each button sits on the drawer's own free edge, clear of the content. */
  .sidebar .panel-close { right: 8px; }
  .preview-panel .panel-close { right: auto; left: 8px; }
  .preview-card { border-radius: var(--r-lg) 0 0 var(--r-lg); border-right: none; box-shadow: none; }

  body.page-dashboard header { padding: 11px 14px; }
  body.page-dashboard header h1 { font-size: 0.92rem; }
  .form-area { padding: 18px 16px 80px; }

  /* Stack two-column rows */
  .field-row { grid-template-columns: 1fr; gap: 14px; }
  .form-section { padding: 16px 16px; }

  /* Action bar: scroll horizontally instead of overflowing the viewport */
  .action-bar {
    padding: 12px 16px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .action-bar::-webkit-scrollbar { display: none; }
  .action-bar .btn { flex-shrink: 0; white-space: nowrap; padding: 10px 18px; }
  .action-bar .save-status { flex-shrink: 0; }

  /* Modals fill the small screen comfortably */
  .modal-overlay { padding: 12px; align-items: flex-start; }
  .modal { max-width: 100%; max-height: 92vh; overflow-y: auto; margin-top: 12px; }
}

@media (max-width: 640px) {
  /* Hide non-essential header links on very narrow screens */
  body.page-dashboard header h1 + .badge { display: none; }
  .dash-link-secondary { display: none; }
  body.page-dashboard #gemini-status { display: none; }
  .xbot-label { display: none; }
  .form-area > div:first-child h2 { font-size: 1rem; }
}

/* ══════════════════════════════════════
   LANDING PAGE  (body.page-landing)
   ══════════════════════════════════════ */

body.page-landing {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body.page-landing nav {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.verified {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-weight: 600;
  font-size: 0.9rem;
}
.verified-dot {
  width: 20px;
  height: 20px;
  background: #10b981;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.lp-content {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.5rem 6rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Hero: copy + cover photo side by side */
.headline-media {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
  align-items: center;
  min-height: 300px;
}

.headline-copy {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.headline {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -2px;
}

.subtext {
  font-size: 1.1rem;
  color: var(--text-3);
}

.highlight { color: rgb(73,242,100); }

.cta-button {
  align-self: flex-start;
  background: rgb(73,242,100);
  color: var(--bg);
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.2s, box-shadow 0.2s;
  letter-spacing: 0.3px;
}
.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(73,242,100,0.25);
}

.secret-note {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgb(73,242,100);
  font-style: italic;
  font-size: 0.9rem;
}

/* Cover photo */
.cover-photo {
  width: 100%;
  aspect-ratio: 3/4;
  max-height: 380px;
  background: linear-gradient(180deg, #fcd34d, #b45309);
  border-radius: 28px;
  position: relative;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
  overflow: hidden;
}
.cover-photo video,
.cover-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 28px;
  display: block;
}
.silhouette {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 220px;
}
.silhouette-head { width: 110px; height: 110px; background: #451a03; border-radius: 50%; margin: 0 auto; }
.silhouette-body { width: 160px; height: 160px; background: #78350f; border-radius: 50% 50% 0 0; margin: -40px auto 0; }
.cover-label {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: var(--text);
  padding: 6px 20px;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
  z-index: 2;
}

/* About blurb */
.lp-about {
  font-size: 0.88rem;
  color: var(--text-3);
  line-height: 1.5;
}

/* Stats row */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.stat-card {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border-soft);
  padding: 0.65rem 0.5rem;
  border-radius: var(--r);
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.2s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  min-height: 72px;
}
.stat-card:hover { transform: translateY(-2px); }
.stat-number { font-size: 1.05rem; font-weight: 700; line-height: 1.1; }
.stat-label  { color: var(--text-muted); font-size: 0.68rem; font-weight: 500; line-height: 1; }

/* Gallery */
.gallery-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gallery-header { font-size: 0.78rem; font-weight: 600; color: var(--text-3); margin: 0; }
.gallery-grid {
  display: flex;
  flex-direction: row;
  gap: 4px;
  height: 160px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.gallery-grid::-webkit-scrollbar { display: none; }
.photo {
  flex: 0 0 auto;
  width: 120px;
  height: 100%;
  border-radius: var(--r);
  background: linear-gradient(180deg, #facc15, #92400e);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}
.photo:hover { transform: scale(1.03); }
.photo-label {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(0,0,0,0.7);
  color: var(--text);
  font-size: 0.55rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 9999px;
}
.photo.locked { filter: brightness(0.5) blur(4px); }
.plus-private {
  background: rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-weight: 700;
  font-size: 0.7rem;
  border: 2px dashed rgba(255,255,255,0.3);
}

/* ── Chat Drawer ── */
.chat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
}
.chat-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.chat-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100vw);
  background: var(--bg);
  z-index: 300;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-lg);
}
.chat-drawer.open {
  transform: translateX(0);
}
.chat-drawer iframe {
  flex: 1;
  border: none;
  width: 100%;
  height: 100%;
  display: block;
}

.drawer-close {
  position: absolute;
  top: 14px;
  left: -52px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: background 0.2s;
  z-index: 10;
}
.drawer-close:hover { background: rgba(255,255,255,0.2); }

/* ── Floating Chat Button ── */
.chat-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text);
  border: none;
  cursor: pointer;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(124,58,237,0.5), 0 2px 8px rgba(0,0,0,0.3);
  z-index: 150;
  transition: transform 0.2s, box-shadow 0.2s;
  outline: none;
}
.chat-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 32px rgba(124,58,237,0.6), 0 2px 8px rgba(0,0,0,0.3);
}
.chat-fab:active { transform: scale(0.95); }

body.chat-is-open .chat-fab { display: none; }

.fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--err);
  color: var(--text);
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.fab-badge.visible {
  opacity: 1;
  transform: scale(1);
}

/* ── Responsive ── */
@media (max-width: 720px) {
  .headline-media {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 1.25rem;
  }
  .cover-photo {
    aspect-ratio: 16/9;
    max-height: 220px;
    border-radius: 20px;
    order: -1;
  }
  .lp-content { padding: 1.25rem 1rem 7rem; }
  body.page-landing nav { padding: 0.75rem 1rem; }
  .verified { font-size: 0.75rem; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .drawer-close { left: auto; right: 14px; top: 14px; }
}

@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .chat-fab { bottom: 20px; right: 20px; width: 54px; height: 54px; font-size: 1.2rem; }
}

/* ── Guided persona setup (js/onboarding.js) ─────────────────────────────── */
body.ob-running .form-area {
  padding: 0; overflow: hidden;
  display: flex; flex: 1; min-height: 0; gap: 0;
}

.ob-split { display: flex; flex: 1; min-height: 0; }

.ob-rail {
  width: 268px;
  flex: 0 0 auto;
  background: var(--panel);
  border-right: 1px solid var(--border-soft);
  padding: 22px 16px;
  overflow-y: auto;
}
.ob-rail-h {
  font-family: var(--display);
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 5px;
}
.ob-rail-p { font-size: 0.73rem; color: var(--text-muted); margin-bottom: 14px; }
.ob-mini { height: 4px; background: var(--surface-2); border-radius: 99px; overflow: hidden; margin-bottom: 20px; }
.ob-mini i { display: block; height: 100%; background: var(--grad); background-size: 300% 100%; border-radius: 99px; transition: width 0.3s; }

.ob-rstage { margin-bottom: 15px; }
.ob-rstage-t {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 600;
  color: var(--text-3); margin-bottom: 7px;
}
.ob-rstage-t.on { color: var(--text); }
.ob-rnum {
  width: 19px; height: 19px; border-radius: 50%;
  font-size: 0.6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  background: var(--surface-2); color: var(--text-muted);
}
.ob-rnum.done { background: var(--ok); color: var(--bg); }
.ob-rnum.now { background: var(--grad); background-size: 300% 100%; color: #fff; }
.ob-rsteps { padding-left: 27px; display: flex; flex-direction: column; gap: 2px; }
.ob-rstep {
  font-size: 0.76rem; color: var(--text-muted);
  padding: 5px 9px; border-radius: var(--r-sm);
  display: flex; align-items: center; gap: 7px; cursor: pointer;
}
.ob-rstep:hover { color: var(--text-2); background: var(--surface); }
.ob-rstep.done { color: var(--text-3); }
.ob-rstep.on {
  color: var(--text); font-weight: 600;
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}
.ob-rcheck { color: var(--ok); font-size: 0.7rem; width: 9px; }
.ob-rdot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.5; margin: 0 2px; }

.ob-stepwrap {
  flex: 1; min-width: 0;
  padding: 32px 38px;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.ob-crumb {
  font-size: 0.69rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
.ob-step-h { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.ob-step-s { font-size: 0.86rem; color: var(--text-3); line-height: 1.55; max-width: 58ch; margin-bottom: 24px; }

.ob-card {
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex; flex-direction: column; gap: 16px;
  max-width: 720px;
}
.ob-card > .field, .ob-card > .form-section { margin: 0; }
.ob-card > .form-section { background: transparent; border: none; padding: 0; box-shadow: none; }

.ob-foot { margin-top: 26px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ob-saved { font-size: 0.74rem; color: var(--text-muted); }
.ob-alt { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ob-skip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; min-height: 36px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r);
  cursor: pointer; font-family: var(--font); font-size: 0.78rem; font-weight: 500;
  color: var(--text-2); white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}
.ob-skip:hover {
  background: var(--surface); border-color: var(--accent-line);
  color: var(--text); transform: translateY(-1px);
}
.ob-skip-icon { font-size: 0.9rem; line-height: 1; }

@media (max-width: 900px) {
  /* The 268px rail plus the step column does not fit a phone. The crumb line
     already says which step you are on, so the rail goes and the step column
     takes the full width. */
  .ob-split { flex-direction: column; }
  .ob-rail { display: none; }
  .ob-stepwrap { padding: 20px 16px 40px; }
  .ob-step-h { font-size: 1.25rem; }
  .ob-step-s { margin-bottom: 18px; }
  .ob-card { padding: 16px 14px; }
  .ob-foot { margin-top: 20px; }
  .ob-foot .btn { flex: 1 1 auto; justify-content: center; }
  .ob-done { padding: 40px 20px; }
}

@media (max-width: 760px) {
  .ob-alt { margin-left: 0; width: 100%; }
  .ob-skip { flex: 1; justify-content: center; }
}

/* ── Guided tour overlay ──────────────────────────────────────────────────
   The dim is four rectangles fitted around the highlighted element, leaving a
   real hole rather than a shadow spread — so whatever is being explained is
   still visible at full contrast and still clickable. */
.obt-root { position: fixed; inset: 0; z-index: 4000; pointer-events: none; }
.obt-root.on { pointer-events: auto; }
.obt-root:not(.on) { display: none; }

.obt-mask {
  position: fixed;
  background: rgba(8,7,7,0.72);
  backdrop-filter: blur(2px);
  animation: obt-fade 0.18s ease-out;
}
.obt-ring {
  position: fixed;
  border: 2px solid var(--accent-line);
  border-radius: var(--r);
  pointer-events: none;
  transition: top 0.18s ease, left 0.18s ease, width 0.18s ease, height 0.18s ease;
}
.obt-root.obt-nospot .obt-ring { display: none; }
.obt-root.obt-nospot .obt-t {
  inset: 0; width: 100%; height: 100%;
}
.obt-root.obt-nospot .obt-r,
.obt-root.obt-nospot .obt-b,
.obt-root.obt-nospot .obt-l { display: none; }

.obt-dialog {
  position: fixed;
  width: min(380px, calc(100vw - 24px));
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 18px 20px 16px;
  animation: modalIn 0.2s ease-out;
}
.obt-title {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 7px;
  padding-right: 26px;
}
/* Body copy in a teaching dialog is primary text, not a muted hint. */
.obt-body { font-size: 0.875rem; line-height: 1.55; color: var(--text-2); }
.obt-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.obt-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-right: auto;
  font-variant-numeric: tabular-nums;
}
.obt-foot .btn { padding: 8px 16px; font-size: 0.84rem; }
.obt-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.obt-close:hover { background: var(--surface-2); color: var(--text); }

body.obt-open { overflow: hidden; }

@keyframes obt-fade { from { opacity: 0; } to { opacity: 1; } }

/* Coach-marks do not fit a phone — dock the dialog as a bottom sheet and drop
   the spotlight, which would cover most of the screen anyway. */
@media (max-width: 700px) {
  .obt-dialog {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100%;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .obt-ring { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .obt-mask, .obt-dialog { animation: none; }
  .obt-ring { transition: none; }
}

/* Finished state */
.ob-done { padding: 56px 40px; text-align: center; overflow-y: auto; }
.ob-seal {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--grad); background-size: 300% 100%;
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; color: #fff;
  box-shadow: 0 12px 40px -8px var(--accent-soft);
}
.ob-done-h { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 9px; }
.ob-done-s { font-size: 0.88rem; color: var(--text-3); max-width: 52ch; margin: 0 auto 28px; line-height: 1.6; }
.ob-nxt { display: flex; gap: 12px; max-width: 760px; margin: 0 auto; flex-wrap: wrap; }
.ob-nxt-c {
  flex: 1; min-width: 200px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r); padding: 17px;
  text-align: left; text-decoration: none; color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.ob-nxt-c:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.ob-nxt-i {
  width: 31px; height: 31px; border-radius: var(--r-sm);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px; font-size: 0.9rem;
}
.ob-nxt-t { font-size: 0.84rem; font-weight: 600; margin-bottom: 4px; }
.ob-nxt-d { font-size: 0.73rem; color: var(--text-muted); line-height: 1.5; }

@media (max-width: 860px) {
  .ob-rail { display: none; }
  .ob-stepwrap { padding: 22px 18px; }
}

/* Platform setup wizard — reuses the .ob-* shell, adds its own step widgets. */
.ps-picks { display: grid; gap: 10px; }
.ps-pick {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 10px; align-items: center;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; cursor: pointer;
}
.ps-pick.on { border-color: var(--accent, #a855f7); }
.ps-pick.off { opacity: 0.5; cursor: default; }
.ps-pick input { grid-row: 1 / span 2; margin: 0; }
.ps-pick-t { font-size: 0.86rem; font-weight: 600; }
.ps-pick-d { font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; }
.ps-ok { color: var(--ok, #22c55e); font-size: 0.82rem; margin-bottom: 10px; }
.ps-err { color: var(--err, #ef4444); font-size: 0.78rem; margin-top: 10px; }

.ps-hub { padding: 26px 28px; max-width: 880px; overflow-y: auto; flex: 1; min-height: 0; }
.ps-tablewrap { overflow-x: auto; margin-top: 18px; }
.ps-table { border-collapse: collapse; width: 100%; font-size: 0.8rem; }
.ps-table th, .ps-table td {
  border-bottom: 1px solid var(--border); padding: 10px 12px; text-align: left;
}
.ps-table thead th { color: var(--text-muted); font-weight: 600; }
.ps-table tbody th { font-weight: 600; white-space: nowrap; }
.ps-chip {
  font: inherit; font-size: 0.73rem; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 11px; background: transparent; color: var(--text-muted);
}
.ps-chip.on { border-color: var(--ok, #22c55e); color: var(--ok, #22c55e); }
.ps-chip.soon { cursor: default; opacity: 0.55; }

.name-slug {
  margin-top: 8px;
  min-height: 16px;
  font-size: 0.74rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-muted);
}
#name-ok:disabled { opacity: 0.45; cursor: not-allowed; }

/* Live chat preview — right-hand panel. Reuses the real chat page's own
   classes (.header, .chat-window, .msg-row, .bubble, .input-area, .msg-av)
   so this panel is visually identical to chat.html, just sized to fit a
   340px rail instead of centered full-page. */
.preview-chat {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.preview-chat .header {
  min-height: auto;
  padding: 12px 14px;
  gap: 10px;
}
.preview-chat .header-avatar-wrap img,
.preview-chat .pc-av-fallback {
  width: 38px;
  height: 38px;
}
.pc-av-fallback {
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
}
.preview-chat .online-dot { width: 10px; height: 10px; }
.preview-chat .chat-window { padding: 14px 12px; gap: 8px; }
.preview-chat .bubble { font-size: 0.8rem; max-width: 84%; padding: 9px 12px; }
.preview-chat .msg-av { width: 24px; height: 24px; font-size: 0.6rem; }
.preview-chat .input-area { padding: 10px 12px; background: var(--panel-2); }
.preview-chat .input-area input:disabled,
.preview-chat .send-btn:disabled { cursor: default; }
.preview-chat .input-wrap { min-height: 38px; }
.preview-chat .send-btn { width: 38px; height: 38px; }
.preview-chat .send-btn svg { width: 16px; height: 16px; }
.pc-section-label {
  align-self: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface);
  padding: 3px 11px;
  border-radius: 9999px;
  margin: 10px 0 4px;
  text-align: center;
}
.pc-section-label:first-child { margin-top: 0; }
.pc-section-note {
  align-self: stretch;
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--text-muted);
  padding: 0 4px 4px;
}
.pc-empty {
  margin: auto;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 20px;
}

/* Persona gallery — cards/list browsing view — and embedded sidebar pages share the
   same full-width shape, so both classes drive the same column rules. */
body.browsing:not(.ob-running) .preview-panel,
body.embedding:not(.ob-running) .preview-panel { display: none; }
/* Desktop-only: below 901px the sidebar and preview are off-canvas drawers, so
   hiding the sidebar would kill the hamburger, and these column templates would
   leave the form a sliver of the viewport. */
@media (min-width: 901px) {
  body.sidebar-off .sidebar { display: none; }
  body.browsing:not(.ob-running) .layout,
  body.embedding:not(.ob-running) .layout { grid-template-columns: 280px 1fr; }
  body.sidebar-off .layout { grid-template-columns: 1fr 340px; }
  body.browsing.sidebar-off:not(.ob-running) .layout,
  body.embedding.sidebar-off:not(.ob-running) .layout { grid-template-columns: 1fr; }
}
body.browsing:not(.ob-running) .form-area { padding: 24px 28px; }
body.embedding .form-area { padding: 0; overflow: hidden; }
.sb-frame { width: 100%; height: 100%; border: none; display: block; }

.pg-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.pg-head-l { margin-right: auto; }

/* One control height across search, filter, sort and the view toggle — the row
   read as four unrelated widgets before. */
.pg-head .pg-search,
.pg-head .pg-ctl,
.pg-head .pg-toggle { height: 38px; }
.pg-toggle {
  display: flex; gap: 2px; align-items: center; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 3px;
}
.pg-toggle button {
  border: none; background: transparent; padding: 0 12px; height: 100%;
  font-size: 0.78rem; font-family: var(--font);
  color: var(--text-muted); border-radius: calc(var(--r-md) - 4px); cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pg-toggle button:hover { color: var(--text-2); }
.pg-toggle button.active { background: var(--panel); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }

/* ── Filter / sort dropdowns ── */
.pg-menu { position: relative; flex-shrink: 0; }
.pg-ctl {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 13px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); cursor: pointer;
  font-family: var(--font); font-size: 0.78rem; font-weight: 500; color: var(--text-2);
  white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pg-ctl:hover { background: var(--surface-2); color: var(--text); }
.pg-menu.open .pg-ctl { border-color: var(--accent-line); color: var(--text); }
.pg-ctl.active { border-color: var(--accent-line); color: var(--accent); }
.pg-ctl-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9999px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 0.66rem; font-weight: 700;
}
.pg-pop {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 216px; max-height: min(460px, calc(100vh - 140px)); overflow-y: auto;
  padding: 6px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
}
.pg-menu.open .pg-pop { display: block; }
.pg-opt-h {
  padding: 8px 8px 4px; font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
.pg-opt {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; border: none; background: none; border-radius: var(--r-sm);
  font-family: var(--font); font-size: 0.8rem; color: var(--text-2);
  text-align: left; cursor: pointer; transition: background 0.12s, color 0.12s;
}
.pg-opt:hover { background: var(--surface); color: var(--text); }
.pg-opt.on { color: var(--text); font-weight: 600; }
.pg-tick {
  width: 15px; flex-shrink: 0; color: var(--accent);
  font-size: 0.8rem; line-height: 1;
}
.pg-opt-clear { margin-top: 4px; border-top: 1px solid var(--border-soft); border-radius: 0; color: var(--err); }
.pg-opt-clear:hover { color: var(--err); }

.pg-status {
  margin: -6px 0 14px; font-size: 0.78rem; color: var(--text-muted);
  display: flex; align-items: center; gap: 10px;
}
.pg-status strong { color: var(--text-2); }
.pg-clear {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font); font-size: 0.78rem; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
}
.pg-none {
  padding: 44px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.pg-none-t { font-size: 0.9rem; color: var(--text-2); }

@media (max-width: 900px) {
  .pg-head-l { margin-right: 0; width: 100%; }
  .pg-head .pg-search { margin: 0; max-width: none; flex: 1 1 160px; }
  .pg-pop { right: auto; left: 0; }
}

.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }

.pg-card {
  border-radius: var(--r-lg); overflow: hidden; background: var(--panel);
  border: 1px solid var(--border-soft); cursor: pointer; transition: transform 0.12s, border-color 0.12s;
}
.pg-card:hover { transform: translateY(-2px); border-color: var(--border); }
.pg-card-img { position: relative; aspect-ratio: 1 / 1; background: var(--surface); }
.pg-card-img img { width: 100%; height: 100%; }
.pg-initials {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--text-3); font-weight: 700; background: var(--surface-2);
}
.pg-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.15) 50%, transparent 75%);
}
.pg-card-text { position: absolute; left: 14px; right: 14px; bottom: 12px; color: #fff; }
.pg-card-name { font-size: 1.05rem; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.pg-card-sub { font-size: 0.78rem; opacity: 0.85; }
.pg-del {
  position: absolute; top: 9px; right: 9px; width: 32px; height: 32px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.5); color: #fff; cursor: pointer; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center; transition: background 0.12s;
}
.pg-del:hover { background: var(--err); }
.pg-star {
  position: absolute; top: 9px; right: 45px; width: 32px; height: 32px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.5); color: #fff; cursor: pointer; font-size: 1.12rem;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s, transform 0.12s;
}
.pg-star:hover { transform: scale(1.1); background: rgba(0,0,0,0.68); }
.pg-star.active { color: var(--star); background: rgba(0,0,0,0.6); }
.pg-star.active:hover { color: var(--star); }
.pg-row .pg-star {
  position: static; background: transparent; color: var(--text-3);
  width: 32px; height: 32px; font-size: 1.06rem;
}
.pg-row .pg-star:hover { background: var(--surface); }
.pg-row .pg-star.active, .pg-row .pg-star:hover { color: var(--star); }
.pg-card-foot { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.pg-pct {
  font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  flex-shrink: 0; min-width: 34px; text-align: right;
}
.pg-bar { flex: 1; height: 4px; border-radius: 9999px; background: var(--surface-2); overflow: hidden; }
.pg-bar i { display: block; height: 100%; border-radius: 9999px; }
.pg-open { padding: 5px 14px; font-size: 0.76rem; }

.pg-list { display: flex; flex-direction: column; gap: 8px; }
.pg-row {
  display: flex; align-items: center; gap: 14px; padding: 10px 14px;
  border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--panel);
  cursor: pointer; transition: border-color 0.12s;
}
.pg-row:hover { border-color: var(--border); }
.pg-row-thumb { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--surface); }
.pg-row-info { flex: 1; min-width: 0; }
.pg-row-name { font-size: 0.88rem; font-weight: 600; }
.pg-row-sub { font-size: 0.74rem; color: var(--text-muted); }
.pg-row-bar { width: 120px; flex-shrink: 0; }
.pg-row .pg-del { position: static; background: transparent; color: var(--text-muted); }
.pg-row .pg-del:hover { background: var(--err); color: #fff; }

.btn-back-gallery {
  border: none; background: transparent; color: var(--text-muted); font-size: 0.78rem;
  cursor: pointer; padding: 0;
}
.btn-back-gallery:hover { color: var(--text); }

.desk-only { display: inline-flex; }
.pg-head-l { display: flex; align-items: center; gap: 14px; }
.pg-search {
  display: flex; align-items: center; gap: 7px;
  padding: 0 11px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); color: var(--text-muted);
  max-width: 260px; flex: 1 1 180px;
  transition: border-color 0.15s;
}
.pg-search:focus-within { border-color: var(--accent-line); }
.pg-search input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-size: 0.8rem; color: var(--text); font-family: var(--font);
}
.pg-search input::placeholder { color: var(--text-muted); }