/* ===== Extracted block ===== */

/* ── CARD FAV ACTIVE STATE ── */
.card-fav.active {
  opacity: 1 !important;
  background: rgba(212,96,122,0.28);
}
.card-fav.active:hover { background: rgba(212,96,122,0.45); }

/* ── FAVORITES BADGE ── */
.fav-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 9px; font-weight: 700;
  display: none; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
  border: 1.5px solid var(--bg2);
  pointer-events: none;
}

/* ── FAVORITES PAGE ── */
#favorites-page {
  position: fixed; inset: 0; z-index: 3500;
  display: none; flex-direction: row;
  background: var(--bg);
  opacity: 0; transition: opacity .35s ease;
}
#favorites-page.shown { opacity: 1; }

.fav-main {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: margin-left .3s cubic-bezier(.25,.46,.45,.94);
}
#favorites-page:hover .fav-main { margin-left: var(--sidebar-w-open); }

.fav-header {
  padding: 26px 36px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.fav-header-left {
  display: flex; align-items: center; gap: 16px;
}
.fav-back-btn {
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--bg3); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted);
  transition: background .2s, color .2s; flex-shrink: 0;
}
.fav-back-btn:hover { background: var(--accent); color: #fff; }
.fav-title {
  font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 2px;
}
.fav-subtitle { font-size: 13px; color: var(--muted); }

.fav-content {
  flex: 1; overflow-y: auto; padding: 28px 36px;
}
.fav-content::-webkit-scrollbar { width: 6px; }
.fav-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.fav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

/* Hearts on fav-page cards always visible */
.fav-card .card-fav { opacity: 1 !important; }

/* Empty state */
.fav-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; padding: 80px 20px;
  text-align: center; min-height: 60vh;
}
.fav-empty-icon {
  width: 90px; height: 90px; border-radius: 50%;
  background: var(--bg2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.fav-empty-title { font-size: 20px; font-weight: 700; color: var(--text); }
.fav-empty-sub { font-size: 14px; color: var(--muted); max-width: 280px; line-height: 1.5; }
.fav-browse-btn {
  margin-top: 6px; padding: 12px 30px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 50px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: opacity .2s, transform .2s;
}
.fav-browse-btn:hover { opacity: .88; transform: translateY(-1px); }

/* Responsive */
@media (max-width: 768px) {
  .fav-main { margin-left: 0; }
  #favorites-page:hover .fav-main { margin-left: 0; }
  .fav-header { padding: 18px 16px 14px; }
  .fav-content { padding: 16px; }
  .fav-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   CHAT — premium Telegram-style messenger
   3 panes on desktop (conversations · thread · profile); the thread column
   collapses to full-width on smaller screens (see responsive.css).
   ───────────────────────────────────────────────────────────────────────── */
#chat-page {
  position: fixed; inset: 0; z-index: 4000;
  height: 100dvh;
  display: none; flex-direction: row;
  background: var(--bg);
  opacity: 0; transition: opacity .35s ease, left .34s var(--ease-soft-out);
  /* the outgoing bubble + charged send share one rich rose→violet identity,
     deeper than the pastel --accent so white text stays legible in both themes */
  --ch-out: linear-gradient(135deg, #d4607a 0%, #b0658f 48%, #9d6bd4 100%);
  --ch-out-glow: rgba(157, 107, 212, .42);
  --ch-online: #22d06e;
}
#chat-page.shown { opacity: 1; }
#chat-page button { font-family: inherit; }

/* ── Left rail: conversations ── */
.ch-sidebar {
  width: 316px; flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.ch-sidebar-header {
  padding: 22px 18px 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.ch-sidebar-head-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ch-sidebar-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: var(--text); white-space: nowrap; transition: opacity .2s var(--ease-premium); }
/* Hamburger reveals the shared app sidebar — same square-icon style as the back button */
.ch-menu-btn {
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
  background: var(--bg3); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted); transition: background .2s var(--ease-premium), color .2s, border-color .2s;
}
.ch-menu-btn:hover { background: var(--bg); color: var(--text); border-color: var(--border-strong); }
.ch-search {
  margin: 2px 14px 12px;
  display: flex; align-items: center; gap: 9px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 50px; padding: 9px 14px;
  max-height: 60px; overflow: hidden;
  transition: border-color .18s var(--ease-premium), box-shadow .18s var(--ease-premium),
    max-height .3s var(--ease-soft-out), opacity .2s var(--ease-premium),
    margin .3s var(--ease-soft-out), padding .3s var(--ease-soft-out);
}
.ch-search:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.ch-search svg { flex-shrink: 0; opacity: .5; color: var(--muted); }
.ch-search-input { flex: 1; min-width: 0; background: none; border: none; outline: none; font-size: 13px; color: var(--text); }
.ch-search-input::placeholder { color: var(--muted); }
.ch-contact-list { flex: 1; overflow-y: auto; padding: 6px 8px 12px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.ch-contact-list::-webkit-scrollbar { width: 5px; }
.ch-contact-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Sticky "Create your AI" CTA ──
   A flex sibling after the scrolling list (not absolute/sticky), so it stays
   pinned to the foot of the rail with no overlap and no z-index juggling. */
.ch-sidebar-foot {
  flex-shrink: 0;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--bg2);
}
.ch-create-ai-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 18px; border-radius: 50px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; border: none; cursor: pointer;
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 16px rgba(212,96,122,.25);
  transition: transform .22s var(--ease-premium), box-shadow .22s var(--ease-premium), filter .22s var(--ease-premium),
    padding .3s var(--ease-soft-out), gap .3s var(--ease-soft-out);
}
.ch-create-ai-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(212,96,122,.35); filter: brightness(1.04); }
.ch-create-ai-btn:active { transform: translateY(0) scale(.98); }
.ch-create-ai-btn svg { flex-shrink: 0; }
.ch-create-ai-btn span { overflow: hidden; white-space: nowrap; transition: opacity .2s var(--ease-premium), max-width .3s var(--ease-soft-out); max-width: 200px; }

.ch-contact {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 11px; border-radius: 14px;
  cursor: pointer; background: none; border: 1px solid transparent; text-align: left;
  transition: background .16s var(--ease-premium), border-color .16s, padding .3s var(--ease-soft-out), gap .3s var(--ease-soft-out); position: relative;
}
.ch-contact:hover { background: var(--bg3); }
.ch-contact.active { background: color-mix(in srgb, var(--accent) 13%, transparent); border-color: color-mix(in srgb, var(--accent) 24%, transparent); }
.ch-contact-av {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; position: relative;
}
.ch-contact-dot {
  position: absolute; bottom: 1px; right: 1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ch-online); border: 2.5px solid var(--bg2);
}
.ch-contact-info { flex: 1; min-width: 0; max-width: 260px; display: flex; flex-direction: column; gap: 2px; transition: opacity .2s var(--ease-premium), max-width .3s var(--ease-soft-out); }
.ch-contact-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-contact-preview { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-unread {
  flex-shrink: 0; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 50px;
  background: var(--ch-out); color: #fff; font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: opacity .2s var(--ease-premium), max-width .3s var(--ease-soft-out), margin .3s var(--ease-soft-out);
}

/* ════════════════════════════════════════════════════════════════════════
   TELEGRAM-DESKTOP NAV REVEAL  (desktop ≥769px only)
   The hamburger sets body.ch-nav-open. The chat page slides right by the
   sidebar's open width, uncovering the SHARED app sidebar (#sidebar, z200)
   that already sits beneath it — no clone, no z-index juggling. The
   conversation rail compresses to an avatar-only column. Layout becomes:
   | Main Sidebar | Avatar Column | Conversation |.
   Guarded to ≥769px because the chat rail (and its hamburger) is hidden on
   mobile, where the app's existing sidebar behaviour is kept untouched.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* 1 · slide the chat page right to reveal the sidebar already beneath it */
  body.ch-nav-open #chat-page { left: var(--sidebar-w-open); }

  /* 2 · force the shared sidebar into its expanded (hover) state */
  body.ch-nav-open .sidebar { width: var(--sidebar-w-open); }
  body.ch-nav-open .sidebar .sb-label { opacity: 1; transform: none; }
  body.ch-nav-open .sidebar .sb-logo-text { opacity: 1; max-width: 120px; }
  body.ch-nav-open .sidebar .theme-toggle-label { opacity: 1; }

  /* 3 · active-state hint on the hamburger while the nav is open */
  body.ch-nav-open .ch-menu-btn { background: var(--bg); color: var(--text); border-color: var(--border-strong); }

  /* 4 · compress the conversation rail to an avatar-only column */
  body.ch-nav-open .ch-sidebar { width: 84px; }
  body.ch-nav-open .ch-sidebar-header { padding-left: 0; padding-right: 0; justify-content: center; }
  body.ch-nav-open .ch-sidebar-head-left { gap: 0; }
  body.ch-nav-open .ch-sidebar-title { opacity: 0; max-width: 0; overflow: hidden; }
  body.ch-nav-open .ch-search { max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-color: transparent; pointer-events: none; }
  body.ch-nav-open .ch-contact { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
  body.ch-nav-open .ch-contact-info { max-width: 0; opacity: 0; }
  body.ch-nav-open .ch-unread { max-width: 0; opacity: 0; margin-left: -6px; padding: 0; }
  body.ch-nav-open .ch-create-ai-btn { padding-left: 0; padding-right: 0; gap: 0; }
  body.ch-nav-open .ch-create-ai-btn span { max-width: 0; opacity: 0; }
}

/* ── Conversation column ── */
.ch-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; }
/* header (and its dropdown) and composer (and its upward popovers) must sit
   above the scrolling message region, which is later in the DOM */
.ch-msg-region { position: relative; z-index: 1; }
.ch-composer   { position: relative; z-index: 2; }
.ch-topbar     { position: relative; z-index: 3; }

/* ambient: the companion's own photo, softly blurred behind the thread */
.ch-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center 20%;
  filter: blur(48px) saturate(1.15); opacity: .15; transform: scale(1.25);
}
.ch-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, transparent 26%, transparent 64%, var(--bg) 100%); }

/* shared avatar image fill */
.ch-av-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ch-av-emoji { line-height: 1; }

/* header */
.ch-topbar {
  height: 66px; padding: 0 12px 0 14px; flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  background: color-mix(in srgb, var(--bg2) 80%, transparent);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.ch-hdr-back {
  display: none; width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px;
  background: none; border: 1px solid transparent; color: var(--text);
  align-items: center; justify-content: center; cursor: pointer; transition: background .18s;
}
.ch-hdr-back:hover { background: var(--bg3); }
.ch-hdr-id {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px;
  background: none; border: none; cursor: pointer; padding: 5px 8px; border-radius: 12px; text-align: left;
  transition: background .16s var(--ease-premium);
}
.ch-hdr-id:hover { background: var(--bg3); }
.ch-hdr-av {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.ch-hdr-online {
  position: absolute; bottom: 1px; right: 1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ch-online); border: 2.5px solid var(--bg2);
}
.ch-hdr-meta { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.ch-hdr-name { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-status { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ch-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.ch-status-dot.online { background: var(--ch-online); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ch-online) 22%, transparent); }
.ch-status-text { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-status.is-typing .ch-status-text { color: var(--accent); font-weight: 500; }
.ch-hdr-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ch-hdr-btn {
  width: 38px; height: 38px; border-radius: 11px;
  background: transparent; border: 1px solid transparent; color: var(--muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all .18s var(--ease-premium);
}
.ch-hdr-btn:hover { background: var(--bg3); color: var(--text); border-color: var(--border); }
.ch-hdr-btn:active { transform: scale(.92); }
/* "Update Plan" CTA — reuses the global .update-plan-btn look; this only tunes
   its placement inside the chat header actions (neutralises the global
   margin-left:auto and sits left of the icon cluster). */
.ch-hdr-plan { margin-left: 0; margin-right: 4px; padding: 7px 16px; }
.ch-hdr-plan-ico { flex-shrink: 0; }
.ch-hdr-plan-label { white-space: nowrap; }

/* popovers (header menu opens down-right; plus / emoji open upward) */
.ch-pop-wrap, .ch-plus-wrap { position: relative; }
.ch-pop {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 192px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-2); padding: 6px; z-index: 40;
  opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top right;
  pointer-events: none; transition: opacity .16s var(--ease-premium), transform .16s var(--ease-premium);
}
.ch-pop.open { opacity: 1; transform: none; pointer-events: auto; }
.ch-pop-up { top: auto; bottom: calc(100% + 10px); left: 0; right: auto; transform-origin: bottom left; transform: translateY(6px) scale(.97); }
.ch-pop-item {
  display: flex; align-items: center; gap: 11px; width: 100%; white-space: nowrap;
  padding: 9px 11px; border-radius: 9px; background: none; border: none; cursor: pointer;
  color: var(--text); font-size: 13px; font-weight: 500; text-align: left; transition: background .14s;
}
.ch-pop-item:hover { background: var(--bg3); }
.ch-pop-item svg { color: var(--muted); flex-shrink: 0; }
.ch-pop-item.ch-pop-danger { color: #e36b82; }
.ch-pop-item.ch-pop-danger svg { color: #e36b82; }
.ch-pop-sep { height: 1px; background: var(--border); margin: 5px 9px; }

/* message region */
.ch-msg-region { flex: 1; min-height: 0; display: flex; }
.ch-msg-fade { position: absolute; top: 0; left: 0; right: 0; height: 30px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, var(--bg), transparent); opacity: .55; }
.ch-messages {
  /* full-width messenger thread — no centred/capped column. The container spans
     the page (just a normal gutter); each row is full width and the bubble alone
     is capped, so AI/customer messages sit at the far left/right edges. */
  flex: 1; min-width: 0; overflow-y: auto; padding: 20px 32px 16px;
  display: flex; flex-direction: column;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  overscroll-behavior: contain;
}
.ch-messages::-webkit-scrollbar { width: 6px; }
.ch-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* margin-top:auto bottom-anchors a short thread; it collapses to 0 once the
   thread overflows, so the scroll container never clips the top message */
.ch-date-divider { align-self: center; margin: 0 0 14px; }
.ch-date-divider span {
  font-size: 11px; font-weight: 600; color: var(--muted);
  background: color-mix(in srgb, var(--bg3) 86%, transparent);
  padding: 4px 13px; border-radius: 50px; border: 1px solid var(--border);
  backdrop-filter: blur(8px);
}

/* Each row is full width and aligns its own bubble; the bubble (.ch-msg-col)
   carries the only width cap, so the conversation spans the page while AI sits
   left and customer sits right — like Telegram Desktop. */
.ch-msg { display: flex; gap: 8px; align-items: flex-end; width: 100%; justify-content: flex-start; }
.ch-msg.user  { justify-content: flex-end; }
.ch-msg + .ch-msg { margin-top: 11px; }
.ch-msg.model + .ch-msg.model, .ch-msg.user + .ch-msg.user { margin-top: 3px; }

.ch-msg-av {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
/* a run of model bubbles shows the avatar only on its last line */
.ch-msg.model:has(+ .ch-msg.model) .ch-msg-av { visibility: hidden; }

.ch-msg-col { display: flex; flex-direction: column; min-width: 0; max-width: min(74%, 600px); }
.ch-msg.user .ch-msg-col { align-items: flex-end; }

.ch-bubble {
  padding: 9px 13px; border-radius: 17px 17px 17px 5px;
  font-size: 14px; line-height: 1.45; color: var(--text);
  background: var(--bg2); border: 1px solid var(--border);
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
  max-width: 100%; box-shadow: var(--shadow-1);
}
.ch-msg.user .ch-bubble {
  border-radius: 17px 17px 5px 17px;
  background: var(--ch-out); color: #fff; border: none;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--ch-out-glow) 60%, transparent);
}
/* round the tail corner back when the message is mid-group */
.ch-msg.model:has(+ .ch-msg.model) .ch-bubble { border-bottom-left-radius: 17px; }
.ch-msg.user:has(+ .ch-msg.user) .ch-bubble { border-bottom-right-radius: 17px; }

.ch-meta { display: flex; align-items: center; gap: 4px; margin-top: 3px; padding: 0 5px; }
.ch-time { font-size: 10.5px; color: var(--muted); letter-spacing: .02em; }
.ch-check { display: inline-flex; color: var(--muted); transition: color .25s var(--ease-premium); }
.ch-check.read { color: var(--accent); }

/* typing indicator */
.ch-bubble.ch-typing { display: inline-flex; align-items: center; gap: 4px; padding: 12px 14px; }
.ch-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: chTyping .9s ease-in-out infinite; }
.ch-typing-dot:nth-child(2) { animation-delay: .15s; }
.ch-typing-dot:nth-child(3) { animation-delay: .30s; }

/* ── CHAT IMAGE UPLOAD ────────────────────────────────────────────────────────
   Photo-message bubbles + the small drag-and-drop upload dialog (21st.dev
   file-upload, adapted to vanilla) opened from the composer "+" menu. The dialog
   is built on the shared .pr-modal-* system and uses VORSA tokens only. */
.ch-bubble.ch-bubble-img { padding: 4px; max-width: 250px; overflow: hidden; }
.ch-bubble-photo { display: block; width: 100%; max-height: 300px; object-fit: cover; border-radius: 13px; }
.ch-bubble-cap { padding: 5px 7px 3px; font-size: 13.5px; line-height: 1.4; }

.pr-modal-box.cu-box { width: 410px; }
.cu-drop {
  position: relative; margin-top: 4px;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 28px 20px; text-align: center;
  border: 2px dashed var(--border-strong); border-radius: 16px;
  background: var(--bg); cursor: none;
  transition: border-color .2s var(--ease-premium), background .2s var(--ease-premium), transform .2s var(--ease-premium);
}
.cu-drop > *:not(input) { pointer-events: none; }   /* drag events hit the zone, not its children */
.cu-drop:hover { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 6%, var(--bg)); }
.cu-drop.is-drag { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--bg)); transform: scale(1.01); }
.cu-drop-ic {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg3); color: var(--muted);
  transition: background .2s, color .2s, transform .2s var(--ease-premium);
}
.cu-drop:hover .cu-drop-ic { background: color-mix(in srgb, var(--violet) 18%, transparent); color: var(--violet); }
.cu-drop.is-drag .cu-drop-ic { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); transform: translateY(-2px); }
.cu-drop-title { font-size: 14px; font-weight: 600; color: var(--text); }
.cu-drop.is-drag .cu-drop-title { color: var(--accent); }
.cu-drop-hint { font-size: 12px; color: var(--muted); }

.cu-preview {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
  padding: 10px; border-radius: 14px;
  background: var(--bg3); border: 1px solid var(--border);
  animation: pl-in .28s var(--ease-premium);
}
.cu-preview[hidden] { display: none; }   /* author display:flex would otherwise beat [hidden] */
.cu-thumb { width: 54px; height: 54px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--bg); }
.cu-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cu-info { flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.cu-name { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-size { font-size: 12px; color: var(--muted); }
.cu-remove {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--muted); cursor: none;
  transition: background .18s, color .18s;
}
.cu-remove:hover { background: rgba(239,68,68,.1); color: #ef4444; }

.cu-actions { display: flex; gap: 10px; margin-top: 18px; }
.cu-actions .cu-cancel, .cu-actions .cu-send {
  flex: 1; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cu-send:disabled { opacity: .5; box-shadow: none; }
.cu-send:disabled:hover { transform: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .cu-drop, .cu-drop-ic, .cu-preview { transition: none; animation: none; }
}
@keyframes chTyping { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }

/* bubble entrance */
.ch-msg.ch-in { animation: chMsgIn .34s var(--ease-soft-out) both; }
@keyframes chMsgIn { from { opacity: 0; transform: translateY(7px) scale(.985); } to { opacity: 1; transform: none; } }

/* empty state (after Clear chat) */
.ch-empty { margin: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 40px 20px; }
.ch-empty-av { width: 86px; height: 86px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 40px; box-shadow: var(--shadow-2); }
.ch-empty-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--text); }
.ch-empty-sub { font-size: 13px; color: var(--muted); max-width: 250px; line-height: 1.55; }

/* composer */
.ch-composer {
  display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px 15px; flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  background: color-mix(in srgb, var(--bg2) 82%, transparent);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.ch-cbtn {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--bg3); border: 1px solid var(--border); color: var(--muted);
  transition: transform .2s var(--ease-bounce-soft), background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.ch-cbtn:hover { color: var(--text); border-color: var(--border-strong); }
.ch-cbtn:active { transform: scale(.9); }
.ch-plus svg { transition: transform .26s var(--ease-premium); }
.ch-plus[aria-expanded="true"] svg { transform: rotate(45deg); }
.ch-plus[aria-expanded="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }

.ch-field {
  flex: 1; min-width: 0; position: relative; display: flex; align-items: flex-end; gap: 2px;
  background: var(--bg3); border: 1.5px solid var(--border); border-radius: 22px; padding: 6px 7px 6px 16px;
  transition: border-color .28s var(--ease-premium), box-shadow .4s var(--ease-premium);
}
/* focused composer — a single, refined dark glow replaces the old bright-pink
   double ring: border just barely lifts, a hairline gives definition, and a soft
   low-contrast violet ambient glow settles in. Premium and minimal, not neon.
   Border width is unchanged (1.5px) so there is no layout shift on focus. */
.ch-field:focus-within {
  border-color: color-mix(in srgb, var(--violet) 34%, var(--border-strong));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 0 0 1px color-mix(in srgb, var(--violet) 16%, transparent),
    0 8px 28px -12px color-mix(in srgb, var(--violet) 50%, transparent);
  animation: chFieldFocus .42s var(--ease-premium);
}
/* glow eases in on focus; focus-out is handled by the box-shadow transition above.
   Only `from` is declared — the 100% frame derives from the resting focus style,
   so the animated end state always matches and never jumps. */
@keyframes chFieldFocus {
  from {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0),
      0 0 0 1px transparent,
      0 2px 10px -12px transparent;
  }
}
.ch-textarea {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none; resize: none;
  font-size: 14px; line-height: 1.45; color: var(--text);
  max-height: 132px; min-height: 24px; padding: 6px 0;
}
.ch-textarea::placeholder { color: var(--muted); }
.ch-emoji-btn {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  background: none; border: none; cursor: pointer; color: var(--muted);
  display: flex; align-items: center; justify-content: center; transition: color .18s, background .18s;
}
.ch-emoji-btn:hover, .ch-emoji-btn[aria-expanded="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* emoji picker grid */
.ch-emoji-pop { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; width: 300px; max-width: calc(100vw - 28px); padding: 8px; left: auto; right: 0; transform-origin: bottom right; }
.ch-emoji { aspect-ratio: 1; border: none; background: none; cursor: pointer; font-size: 19px; line-height: 1; border-radius: 9px; display: flex; align-items: center; justify-content: center; transition: background .12s, transform .12s; }
.ch-emoji:hover { background: var(--bg3); transform: scale(1.18); }

/* mic ⇄ send morph — empty shows a quiet mic; typing charges the rose→violet send */
.ch-send { position: relative; overflow: hidden; }
.ch-send .ch-ic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity .2s var(--ease-premium), transform .2s var(--ease-premium); }
.ch-send .ch-send-ic { opacity: 0; transform: scale(.55) rotate(-12deg); color: #fff; }
.ch-send .ch-mic-ic { opacity: 1; transform: none; }
.ch-composer.has-text .ch-send {
  background: var(--ch-out); border-color: transparent; color: #fff;
  box-shadow: 0 6px 22px var(--ch-out-glow);
}
.ch-composer.has-text .ch-send .ch-send-ic { opacity: 1; transform: none; }
.ch-composer.has-text .ch-send .ch-mic-ic { opacity: 0; transform: scale(.55) rotate(12deg); }
.ch-composer.has-text .ch-send:hover { transform: scale(1.06); box-shadow: 0 8px 26px var(--ch-out-glow); }
.ch-composer.has-text .ch-send:active { transform: scale(.93); }

/* keyboard focus ring (a11y) — buttons, links, etc. keep a clear ring. The
   composer textarea is excluded (higher specificity beats the rule above) because
   the .ch-field focus glow is its focus indicator — this prevents a second,
   nested rectangular outline inside the rounded field. Keyboard focus stays
   visible via that glow. */
#chat-page :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#chat-page .ch-textarea:focus-visible { outline: none; }

/* The floating VORSA assistant is hidden only while the Chat page is open; it
   reappears automatically on every other view (no JS, no effect elsewhere). */
body:has(#chat-page.shown) #ai-widget { display: none; }

/* ═════════════════════════════════════════════════════════════════════════
   RIGHT RAIL — model details + chat settings (the 3rd pane)
   Docked column on desktop; a slide-over drawer ≤1099px (see responsive.css).
   Signature element: the portrait media card flowing into a glassy settings
   stack. Everything reuses the established rose/violet tokens — no new palette.
   ═════════════════════════════════════════════════════════════════════════ */
.ch-panel {
  width: 344px; flex-shrink: 0; position: relative; z-index: 4;
  background: var(--bg2);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.ch-panel-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 16px calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 15px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.ch-panel-scroll::-webkit-scrollbar { width: 6px; }
.ch-panel-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
/* drawer-only chrome — inert on the docked desktop column */
.ch-panel-backdrop { display: none; }
.ch-pnl-close { display: none; }
.ch-hdr-panel-toggle { display: none; }

/* ── Portrait gallery — the signature focal element at the top of the panel ──
   A rectangular portrait carousel reading the SAME image set as the preview
   lightbox (getModelGallery), so the two never diverge. Multi-image models get
   overlaid arrows, a counter pill and dot indicators; single-image models
   collapse to one static portrait. The visual language (rounded corners, glassy
   nav, counter pill) deliberately mirrors the .preview-* lightbox. */
.ch-gallery { display: flex; flex-direction: column; gap: 11px; padding: 2px 0; }
.ch-gallery-frame {
  position: relative; width: 100%; max-width: 272px; margin-inline: auto; aspect-ratio: 3 / 4;
  border-radius: 22px; overflow: hidden;
  background: var(--bg3); border: 1px solid var(--border);
  box-shadow: var(--shadow-2), 0 0 44px -18px color-mix(in srgb, var(--accent) 50%, transparent);
  cursor: none; touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  transition: box-shadow .3s var(--ease-premium);
}
.ch-gallery-frame:hover { box-shadow: var(--shadow-2), 0 0 56px -14px color-mix(in srgb, var(--accent) 62%, transparent); }
/* top sheen + bottom scrim keep the counter / online dot legible on any photo */
.ch-gallery-frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,.20), transparent 24%, transparent 60%, rgba(0,0,0,.40));
}
.ch-gallery-track {
  display: flex; height: 100%; will-change: transform;
  transition: transform .46s var(--ease-premium);
}
.ch-gallery-slide { flex: 0 0 100%; width: 100%; height: 100%; margin: 0; }
.ch-gallery-slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block; pointer-events: none;
}

/* Nav arrows — glassy, revealed on hover/focus (always shown on touch, below) */
.ch-gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,6,12,.46); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18); color: #fff; cursor: none; opacity: 0;
  transition: background .2s, transform .2s var(--ease-premium), border-color .2s, opacity .25s ease;
}
.ch-gallery-frame:hover .ch-gallery-nav, .ch-gallery-nav:focus-visible { opacity: 1; }
.ch-gallery-nav:hover { background: color-mix(in srgb, var(--accent) 60%, transparent); border-color: rgba(255,255,255,.34); }
.ch-gallery-prev { left: 10px; } .ch-gallery-prev:hover { transform: translateY(-50%) translateX(-2px); }
.ch-gallery-next { right: 10px; } .ch-gallery-next:hover { transform: translateY(-50%) translateX(2px); }

/* Counter pill */
.ch-gallery-counter {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #fff;
  padding: 3px 10px; border-radius: 50px;
  background: rgba(10,6,12,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
}

/* Online presence dot (top-right of the portrait) */
.ch-gallery-online {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--ch-online); border: 2.5px solid rgba(8,5,10,.45);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ch-online) 24%, transparent);
}

/* Dot indicators — the active dot stretches into a short pill */
.ch-gallery-dots { display: flex; align-items: center; justify-content: center; gap: 7px; }
.ch-gallery-dot {
  width: 7px; height: 7px; padding: 0; border: none; border-radius: 50px; cursor: none;
  background: var(--border-strong);
  transition: width .28s var(--ease-premium), background .25s;
}
.ch-gallery-dot.is-active { width: 22px; background: var(--accent); }
.ch-gallery-dot:hover { background: color-mix(in srgb, var(--accent) 55%, var(--border-strong)); }

/* No-hover (touch) devices: keep arrows visible, and cap the portrait height so
   the name + first actions stay in view without a long scroll. */
@media (hover: none) { .ch-gallery-nav { opacity: 1; } }
@media (max-width: 1099px) { .ch-gallery-frame { max-height: min(58vh, 520px); } }

/* ── Identity (centered profile header under the gallery) ── */
.ch-pnl-id { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.ch-pnl-idhead { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ch-pnl-name-row { display: flex; align-items: center; justify-content: center; gap: 9px; }
.ch-pnl-name { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.015em; color: var(--text); line-height: 1.1; }
.ch-pnl-badge {
  flex-shrink: 0; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 50px;
  color: var(--muted); background: var(--bg3); border: 1px solid var(--border);
}
.ch-pnl-badge.online { color: var(--ch-online); background: color-mix(in srgb, var(--ch-online) 14%, transparent); border-color: color-mix(in srgb, var(--ch-online) 30%, transparent); }
.ch-pnl-sub { font-size: 12.5px; font-weight: 500; color: var(--accent); letter-spacing: .01em; }
.ch-pnl-bio { font-size: 13px; line-height: 1.55; color: color-mix(in srgb, var(--text) 78%, transparent); }
.ch-pnl-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ch-pnl-chip {
  font-size: 11.5px; font-weight: 500; padding: 4px 11px; border-radius: 50px;
  color: var(--text); background: var(--bg3); border: 1px solid var(--border);
}
.ch-pnl-stats { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; font-size: 12px; color: var(--muted); margin-top: 1px; }
.ch-pnl-likes { display: inline-flex; align-items: center; gap: 5px; }
.ch-pnl-likes svg { color: var(--accent); }
.ch-pnl-likes strong { color: var(--text); font-weight: 700; }
.ch-pnl-statdot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); opacity: .6; }
.ch-pnl-creator { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Quick actions ── */
.ch-pnl-actions { display: flex; gap: 7px; }
.ch-pnl-act {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 11px 4px 9px; border-radius: 13px; cursor: pointer;
  background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  transition: transform .2s var(--ease-premium), background .2s var(--ease-premium), border-color .2s var(--ease-premium), box-shadow .2s var(--ease-premium);
}
.ch-pnl-act svg { color: var(--accent); }
.ch-pnl-act span { font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ch-pnl-act:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.ch-pnl-act:active { transform: translateY(0) scale(.95); }
.ch-pnl-fav.active { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.ch-pnl-fav.active svg { color: var(--accent); }
@keyframes chPnlFavPop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.ch-pnl-act.ch-pnl-fav-pop svg { animation: chPnlFavPop .4s var(--ease-bounce-soft); }

/* ── Settings ── */
.ch-pnl-seclabel { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 4px 2px -2px; }
.ch-pnl-settings { display: flex; flex-direction: column; gap: 8px; }
.ch-set { border: 1px solid var(--border); border-radius: 14px; background: var(--bg3); overflow: hidden; transition: border-color .2s var(--ease-premium), background .2s var(--ease-premium); }
.ch-set.open { border-color: var(--border-strong); }
.ch-set-head {
  width: 100%; display: flex; align-items: center; gap: 11px; padding: 11px 12px;
  background: none; border: none; cursor: pointer; text-align: left;
  transition: background .16s var(--ease-premium);
}
.ch-set-head:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ch-set-ic {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.ch-set-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ch-set-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.ch-set-val { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-set-chev { flex-shrink: 0; color: var(--muted); display: flex; transition: transform .3s var(--ease-premium), color .2s; }
.ch-set.open .ch-set-chev { transform: rotate(180deg); color: var(--accent); }
/* grid-rows 0fr→1fr animates height:auto cleanly */
.ch-set-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease-soft-out); }
.ch-set.open .ch-set-body { grid-template-rows: 1fr; }
.ch-set-inner { overflow: hidden; min-height: 0; }
.ch-set-inner > * { margin: 0 12px; }
.ch-set-inner > :first-child { margin-top: 2px; }
.ch-set-inner > :last-child { margin-bottom: 13px; }

/* option pills */
.ch-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.ch-opt {
  font-size: 12.5px; font-weight: 500; padding: 7px 13px; border-radius: 50px; cursor: pointer;
  color: var(--text); background: var(--bg); border: 1px solid var(--border);
  transition: transform .18s var(--ease-premium), border-color .18s, background .18s, color .18s, box-shadow .2s;
}
.ch-opt:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.ch-opt:active { transform: scale(.95); }
.ch-opt.active { background: var(--ch-out); border-color: transparent; color: #fff; box-shadow: 0 5px 16px var(--ch-out-glow); }

/* response sub-groups */
.ch-subgroup { display: flex; flex-direction: column; gap: 7px; }
.ch-subgroup + .ch-subgroup { margin-top: 12px; }
.ch-sub-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* toggle rows */
.ch-tgl-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.ch-tgl-row + .ch-tgl-row { border-top: 1px solid var(--border); }
.ch-tgl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ch-tgl-title { font-size: 13px; font-weight: 600; color: var(--text); }
.ch-tgl-sub { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.ch-switch {
  flex-shrink: 0; width: 42px; height: 24px; border-radius: 50px; cursor: pointer; position: relative;
  background: var(--bg); border: 1px solid var(--border-strong); padding: 0;
  transition: background .24s var(--ease-premium), border-color .24s var(--ease-premium);
}
.ch-switch-knob {
  position: absolute; top: 50%; left: 2.5px; transform: translateY(-50%);
  width: 17px; height: 17px; border-radius: 50%; background: var(--muted);
  transition: transform .26s var(--ease-bounce-soft), background .24s var(--ease-premium);
}
.ch-switch.on { background: var(--ch-out); border-color: transparent; }
.ch-switch.on .ch-switch-knob { transform: translate(18px, -50%); background: #fff; }

/* reset-memory (two-tap confirm) */
.ch-mem-reset {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: 12px; padding: 9px; border-radius: 11px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: #e36b82;
  background: color-mix(in srgb, #e36b82 10%, transparent); border: 1px solid color-mix(in srgb, #e36b82 26%, transparent);
  transition: background .2s var(--ease-premium), transform .18s var(--ease-premium);
}
.ch-mem-reset:hover { background: color-mix(in srgb, #e36b82 16%, transparent); }
.ch-mem-reset:active { transform: scale(.97); }
.ch-mem-reset.armed { background: #e36b82; border-color: #e36b82; color: #fff; }

/* profile sub-panel */
.ch-prof-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ch-prof-stat {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 11px;
  border-radius: 10px; background: var(--bg); border: 1px solid var(--border);
}
.ch-prof-stat .k { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ch-prof-stat .v { font-size: 13.5px; font-weight: 600; color: var(--text); }
.ch-prof-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: 10px; padding: 9px; border-radius: 11px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  transition: background .2s var(--ease-premium), transform .18s var(--ease-premium);
}
.ch-prof-cta:hover { background: color-mix(in srgb, var(--accent) 17%, transparent); }
.ch-prof-cta:active { transform: scale(.97); }

/* footer + empty state */
.ch-pnl-foot { margin-top: auto; padding-top: 8px; text-align: center; font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--muted); }
.ch-pnl-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 40px 24px; color: var(--muted); }
.ch-pnl-empty-ic { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg3); border: 1px solid var(--border); color: var(--accent); }
.ch-pnl-empty-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text); }
.ch-pnl-empty-sub { font-size: 13px; line-height: 1.5; max-width: 220px; }

/* ── Conversation intro card — the model's photo, name and bio rendered as the
   FIRST item inside the scrollable thread. It flows with the conversation (no
   fixed panel, no divider, no reserved viewport) and drifts off-screen as the
   messages grow, just like the contact header in Telegram / iMessage. ── */
.ch-intro {
  align-self: stretch;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 16px; padding-top: 10px; margin-bottom: 38px;
}
.ch-intro-photo {
  height: clamp(210px, 34vh, 320px); aspect-ratio: 3 / 4;
  position: relative; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 27px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  box-shadow:
    0 20px 52px -18px rgba(212, 96, 122, .52),
    0 0 0 6px color-mix(in srgb, var(--accent) 8%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, .10);
}
.ch-intro-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ch-intro-emoji { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: clamp(52px, 11vh, 80px); }
.ch-intro-online {
  position: absolute; bottom: 14px; right: 14px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--ch-online); border: 3px solid var(--bg2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ch-online) 28%, transparent);
}
.ch-intro-name { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.ch-intro-meta { font-size: 12.5px; font-weight: 600; color: var(--accent); letter-spacing: .01em; }
.ch-intro-bio { font-size: 13.5px; color: var(--muted); line-height: 1.6; max-width: 620px; }

/* ===== Extracted block ===== */

#plans-page {
  position: fixed; inset: 0; z-index: 6000;
  display: none; flex-direction: column;
  background: var(--bg);
  opacity: 0; transition: opacity .35s ease;
  overflow-y: auto;
}
#plans-page.shown { opacity: 1; }

/* Header */
.pl-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 14px 40px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
}
.pl-close {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--bg3); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted); transition: background .2s, color .2s;
}
.pl-close:hover { background: var(--accent); color: #fff; }

/* ── Premium pricing header: eyebrow + hero + billing share one ambient ── */
.pl-pricing-head {
  position: relative; isolation: isolate;
  padding: 46px 40px 36px;
  /* deliberately no overflow:hidden — the ambient must feather past the box */
}
/* Soft ambient orb — layered pink/violet radials that fall to nothing inside
   their own bounds, then a radial mask feathers the remaining edge so the glow
   dissolves into the dark background. No rectangle, no hard cutoff, no strip. */
.pl-head-ambient {
  position: absolute; z-index: -1; pointer-events: none;
  top: -40px; left: 50%; transform: translateX(-50%);
  width: min(940px, 120%); height: 420px;
  background:
    radial-gradient(46% 60% at 38% 28%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 72%),
    radial-gradient(48% 64% at 66% 22%, color-mix(in srgb, var(--violet) 30%, transparent), transparent 72%),
    radial-gradient(60% 80% at 50% 6%, color-mix(in srgb, var(--accent2) 16%, transparent), transparent 70%);
  filter: blur(36px);
  opacity: .55;
  -webkit-mask-image: radial-gradient(60% 62% at 50% 36%, #000 38%, transparent 78%);
          mask-image: radial-gradient(60% 62% at 50% 36%, #000 38%, transparent 78%);
}
html:not(.dark) .pl-head-ambient { opacity: .4; }

/* Hero */
.pl-hero { text-align: center; position: relative; }
.pl-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px 6px 11px; margin-bottom: 18px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg2));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.pl-eyebrow svg { width: 13px; height: 13px; }
.pl-hero-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 48px); font-weight: 700; color: var(--text);
  letter-spacing: -.02em; line-height: 1.08; margin-bottom: 14px;
}
.pl-hero-title span {
  background: linear-gradient(120deg, var(--accent) 0%, #b07ae0 55%, var(--accent2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pl-hero-sub { font-size: 16px; color: var(--muted); line-height: 1.6; max-width: 480px; margin: 0 auto; }

/* ── Billing toggle: Monthly / Annual (centered; Save label sits above) ── */
.pl-billing {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin: 32px auto 0; width: 100%;
}
.pl-bill-savetag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--tier-elite);
  background: color-mix(in srgb, var(--tier-elite) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier-elite) 26%, transparent);
  opacity: .72;
  transition: opacity .35s var(--ease-premium), box-shadow .35s ease;
}
.pl-bill-savetag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--tier-elite); box-shadow: 0 0 8px var(--tier-elite);
  opacity: .5; transition: opacity .35s ease;
}
.pl-bill-savetag.on {
  opacity: 1;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--tier-elite) 22%, transparent);
}
.pl-bill-savetag.on::before { opacity: 1; }
.pl-bill-toggle {
  position: relative; display: inline-flex;
  padding: 5px; border-radius: var(--radius-pill);
  background: var(--bg3); border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}
.pl-bill-opt {
  position: relative; z-index: 2;
  min-width: 124px; padding: 9px 20px;
  border: none; background: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  color: var(--muted); border-radius: var(--radius-pill);
  transition: color .3s var(--ease-premium);
}
.pl-bill-opt.active { color: #fff; }
.pl-bill-opt:hover:not(.active) { color: var(--text); }
.pl-bill-thumb {
  position: absolute; z-index: 1; top: 5px; bottom: 5px; left: 5px;
  width: calc(50% - 5px); border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent), var(--violet));
  box-shadow: var(--glow-soft);
  transition: transform .42s var(--ease-bounce-soft);
}
.pl-bill-toggle.annual .pl-bill-thumb { transform: translateX(100%); }

/* ── Plan cards: Premium / Elite / Ultra ── */
.pl-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 300px));
  gap: 20px; justify-content: center; align-items: stretch;
  padding: 0 40px 44px; width: 100%;
}
/* per-tier accent driver — every tier-coloured bit reads var(--t) */
.pl-plan.tier-premium { --t: var(--tier-premium); }
.pl-plan.tier-elite   { --t: var(--tier-elite); }
.pl-plan.tier-ultra   { --t: var(--tier-ultra); }

.pl-plan {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  padding: 30px 26px 26px; border-radius: 22px;
  background: color-mix(in srgb, var(--bg2) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  cursor: pointer; overflow: hidden;
  transition: transform .34s var(--ease-premium), box-shadow .34s var(--ease-premium),
              border-color .34s ease;
}
/* subtle tier accent line along the top edge (calm, not a glow) */
.pl-plan::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--t), transparent);
  opacity: .5; transition: opacity .34s ease;
}
.pl-plan:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--t) 40%, var(--border)); box-shadow: var(--shadow-2); }
.pl-plan:hover::before { opacity: .85; }
.pl-plan:focus-visible { outline: 2px solid var(--t); outline-offset: 3px; }

/* radial accent bloom — invisible until the plan is selected */
.pl-plan-aura {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity .5s var(--ease-premium);
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--t) 26%, transparent), transparent 70%);
}
.pl-plan.tier-ultra .pl-plan-aura {
  background:
    radial-gradient(120% 80% at 18% -10%, color-mix(in srgb, var(--tier-ultra-ice) 24%, transparent), transparent 62%),
    radial-gradient(120% 80% at 86% 0%, color-mix(in srgb, var(--tier-premium) 22%, transparent), transparent 60%),
    radial-gradient(140% 90% at 50% -12%, color-mix(in srgb, var(--tier-ultra) 30%, transparent), transparent 70%);
}

/* SELECTED — the bloom */
.pl-plan.selected {
  transform: translateY(-8px);
  border-color: var(--t);
  box-shadow: 0 0 0 1px var(--t),
              0 20px 54px color-mix(in srgb, var(--t) 30%, transparent);
}
.pl-plan.selected::before { opacity: 1; height: 4px; }
.pl-plan.selected .pl-plan-aura { opacity: 1; }
.pl-plan.selected .pl-plan-mark { color: #fff; background: var(--t); border-color: transparent; box-shadow: 0 6px 18px color-mix(in srgb, var(--t) 42%, transparent); }
.pl-plan.tier-ultra.selected {
  box-shadow: 0 0 0 1px var(--tier-ultra),
              0 22px 60px color-mix(in srgb, var(--tier-ultra) 30%, transparent),
              0 0 40px color-mix(in srgb, var(--tier-ultra-ice) 24%, transparent);
}

.pl-plan-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pl-plan-mark {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--t); background: color-mix(in srgb, var(--t) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--t) 26%, transparent);
  transition: color .34s ease, background .34s ease, border-color .34s ease, box-shadow .34s ease;
}
.pl-plan-mark svg { width: 21px; height: 21px; }
.pl-plan-check {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--t);
  opacity: 0; transform: scale(.3);
  transition: opacity .3s var(--ease-premium), transform .4s var(--ease-bounce-soft);
}
.pl-plan-check svg { width: 15px; height: 15px; }
.pl-plan.selected .pl-plan-check { opacity: 1; transform: scale(1); }

.pl-plan-badge {
  position: absolute; top: 16px; right: 16px;
  padding: 4px 11px; border-radius: 50px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: linear-gradient(135deg, var(--t), color-mix(in srgb, var(--t) 55%, var(--violet)));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--t) 36%, transparent);
}
.pl-plan.tier-elite .pl-plan-badge { right: auto; left: 50%; top: -1px; transform: translateX(-50%); border-radius: 0 0 11px 11px; }
.pl-plan.tier-elite { padding-top: 38px; }
.pl-plan-current {
  position: absolute; top: 16px; left: 16px;
  padding: 3px 10px; border-radius: 50px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); background: var(--bg3); border: 1px solid var(--border);
}

.pl-plan-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.pl-plan-tagline { font-size: 12.5px; color: var(--muted); line-height: 1.5; min-height: 36px; margin-bottom: 16px; }
.pl-plan-price { display: flex; align-items: flex-end; gap: 3px; margin-bottom: 4px; min-width: 0; flex-wrap: wrap; }
.pl-price-cur { font-family: var(--font-num); font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.pl-price-val { font-family: var(--font-num); font-variant-numeric: tabular-nums lining-nums; font-size: 44px; font-weight: 700; letter-spacing: -.02em; color: var(--text); line-height: 1; }
.pl-price-mo  { font-size: 14px; color: var(--muted); margin-bottom: 7px; }
.pl-price-sub { font-size: 12px; color: var(--muted); margin-bottom: 20px; min-height: 16px; }
.pl-price-sub s { opacity: .7; }

.pl-plan-feats { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 22px; padding-top: 18px; border-top: 1px dashed var(--border-strong); }
.pl-plan-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text); line-height: 1.4; }
.pl-feat-ic { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--t); display: inline-flex; }
.pl-feat-ic svg { width: 16px; height: 16px; }

.pl-plan-select {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: auto; width: 100%; padding: 13px;
  border-radius: var(--radius-pill); cursor: pointer;
  font-family: var(--font-sans); font-size: 14.5px; font-weight: 600;
  color: var(--text); background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--t) 45%, var(--border));
  transition: background .3s var(--ease-premium), color .3s, border-color .3s,
              transform .18s var(--ease-premium), box-shadow .3s;
}
.pl-plan-select-label { position: relative; z-index: 2; }
.pl-plan-select-shine {
  position: absolute; top: 0; left: -65%; width: 45%; height: 100%; z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.pl-plan-select:hover { border-color: var(--t); color: var(--t); transform: translateY(-2px); }
.pl-plan-select:active { transform: translateY(0) scale(.985); }
.pl-plan-select:focus-visible { outline: 2px solid var(--t); outline-offset: 3px; }

/* SELECTED → the primary purchase CTA: filled gradient, glow, shine, press.
   Robust whether the marker class lands on the card (.selected) or button. */
.pl-plan.selected .pl-plan-select,
.pl-plan-select.is-subscribe {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--t), color-mix(in srgb, var(--t) 60%, var(--violet)));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--t) 38%, transparent);
}
.pl-plan.selected .pl-plan-select:hover,
.pl-plan-select.is-subscribe:hover {
  color: #fff; transform: translateY(-2px);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--t) 48%, transparent);
}
/* one subtle shine sweep when it becomes the CTA, and again on hover */
.pl-plan-select.is-subscribe .pl-plan-select-shine { opacity: 1; animation: pl-shine 1.1s var(--ease-premium) .12s; }
.pl-plan-select.is-subscribe:hover .pl-plan-select-shine { animation: pl-shine .9s var(--ease-premium); }
.pl-plan.tier-ultra.selected .pl-plan-select,
.pl-plan.tier-ultra .pl-plan-select.is-subscribe {
  background: linear-gradient(120deg, var(--tier-ultra-ice), var(--tier-ultra) 50%, var(--tier-premium));
}

/* ── Dynamic selected-plan summary (signature element) ── */
.pl-summary {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 920px; margin: 0 auto 48px; width: calc(100% - 80px);
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  padding: 26px 30px; border-radius: 22px;
  background: color-mix(in srgb, var(--bg2) 80%, transparent);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--border); box-shadow: var(--shadow-1);
  transition: border-color .55s var(--ease-premium), box-shadow .55s var(--ease-premium), background .55s ease;
}
.pl-summary[data-tier=premium] { --t: var(--tier-premium); }
.pl-summary[data-tier=elite]   { --t: var(--tier-elite); }
.pl-summary[data-tier=ultra]   { --t: var(--tier-ultra); }
.pl-summary.shown {
  border-color: color-mix(in srgb, var(--t) 50%, var(--border));
  box-shadow: 0 20px 60px color-mix(in srgb, var(--t) 20%, transparent);
}
.pl-sum-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  transition: opacity .55s ease;
  background: radial-gradient(90% 140% at 12% 0%, color-mix(in srgb, var(--t) 22%, transparent), transparent 60%);
}
.pl-summary.shown .pl-sum-glow { opacity: 1; }
.pl-summary[data-tier=ultra] .pl-sum-glow {
  background:
    radial-gradient(70% 140% at 8% 0%, color-mix(in srgb, var(--tier-ultra-ice) 22%, transparent), transparent 55%),
    radial-gradient(80% 150% at 40% 0%, color-mix(in srgb, var(--tier-ultra) 24%, transparent), transparent 60%),
    radial-gradient(60% 130% at 75% 10%, color-mix(in srgb, var(--tier-premium) 18%, transparent), transparent 55%);
}

/* The summary exists only to confirm a selection, so keep it out of the layout
   entirely until a plan is chosen (renderSummary adds .shown). No empty banner,
   no reserved gap — the cards flow straight into the benefits section. */
.pl-summary:not(.shown) { display: none; }

.pl-summary.shown .pl-sum-main,
.pl-summary.shown .pl-sum-buy { animation: pl-fade-up .5s var(--ease-premium) both; }
.pl-sum-main { flex: 1 1 280px; min-width: 0; }
.pl-sum-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.pl-sum-ic {
  width: 50px; height: 50px; flex-shrink: 0; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(135deg, var(--t), color-mix(in srgb, var(--t) 55%, var(--violet)));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--t) 40%, transparent);
}
.pl-summary[data-tier=ultra] .pl-sum-ic { background: linear-gradient(120deg, var(--tier-ultra-ice), var(--tier-ultra) 55%, var(--tier-premium)); }
.pl-sum-ic svg { width: 24px; height: 24px; }
.pl-sum-name { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--text); }
.pl-sum-cycle { font-size: 12.5px; font-weight: 600; color: var(--t); text-transform: uppercase; letter-spacing: .05em; }
.pl-sum-highlight { font-size: 13.5px; color: var(--muted); line-height: 1.55; max-width: 380px; }

.pl-sum-buy { flex: 0 1 240px; display: flex; flex-direction: column; align-items: stretch; min-width: 200px; max-width: 100%; text-align: center; }
.pl-sum-price { display: flex; align-items: flex-end; justify-content: center; gap: 3px; min-width: 0; flex-wrap: wrap; }
.pl-sum-cur { font-family: var(--font-num); font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.pl-sum-val { font-family: var(--font-num); font-variant-numeric: tabular-nums lining-nums; font-size: clamp(30px, 6vw, 38px); font-weight: 700; color: var(--text); line-height: 1; letter-spacing: -.02em; }
.pl-sum-mo { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.pl-sum-note { font-size: 11.5px; color: var(--muted); margin: 4px 0 14px; }
.pl-sum-cta {
  position: relative; overflow: hidden;
  width: 100%; padding: 14px 22px; border: none; border-radius: 50px; cursor: pointer;
  font-family: 'Figtree', sans-serif; font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--t), color-mix(in srgb, var(--t) 55%, var(--violet)));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--t) 38%, transparent);
  transition: transform .2s var(--ease-premium), box-shadow .3s;
}
.pl-summary[data-tier=ultra] .pl-sum-cta { background: linear-gradient(120deg, var(--tier-ultra-ice), var(--tier-ultra) 50%, var(--tier-premium)); }
.pl-sum-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px color-mix(in srgb, var(--t) 48%, transparent); }
.pl-sum-cta:active { transform: translateY(0); }
.pl-sum-cta-label { position: relative; z-index: 2; }
.pl-sum-cta-shine {
  position: absolute; top: 0; left: -60%; width: 45%; height: 100%; z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
}
.pl-sum-cta:hover .pl-sum-cta-shine { animation: pl-shine 1s var(--ease-premium); }
.pl-sum-fine { font-size: 11px; color: var(--muted); margin-top: 10px; }

/* Benefits grid */
.pl-benefits {
  max-width: 900px; margin: 0 auto 60px; padding: 0 40px;
  width: 100%;
}
.pl-benefits-title {
  font-size: 22px; font-weight: 700; color: var(--text);
  margin-bottom: 20px; text-align: center;
}
.pl-benefits-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pl-benefit {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px 18px;
  transition: border-color .2s, transform .2s;
}
.pl-benefit:hover { border-color: rgba(240,100,180,.3); transform: translateY(-2px); }
.pl-benefit-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
  background: var(--bg3);
}
.pl-benefit-text { font-size: 14px; font-weight: 500; color: var(--text); }

/* Footer note */
.pl-footer-note {
  display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;
  padding: 0 40px 40px;
  font-size: 12px; color: var(--muted);
}
.pl-footer-item { display: flex; align-items: center; gap: 8px; }

/* ===== Extracted block ===== */

#ai-widget {
  position: fixed;
  bottom: calc(28px + env(safe-area-inset-bottom));
  right: calc(28px + env(safe-area-inset-right));
  left: auto;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: 'Figtree', sans-serif;
  /* the container box also spans the (closed) chat panel area — don't let it
     swallow clicks meant for the page underneath */
  pointer-events: none;
}
#ai-widget #ai-toggle { pointer-events: auto; }
#ai-widget #ai-chat.open { pointer-events: auto; }

/* Bubble chat window */
#ai-chat {
  width: 322px;
  background: var(--surface-sheen), var(--bg2);
  border-radius: 22px;
  box-shadow: var(--shadow-2), 0 0 50px -16px rgba(212,96,122,.30);
  border: 1px solid var(--border-strong);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform-origin: bottom right;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s;
  transform: scale(0); opacity: 0;
  pointer-events: none;
}
#ai-chat.open {
  transform: scale(1); opacity: 1;
  pointer-events: all;
}

/* Chat header */
.ai-chat-header {
  background: linear-gradient(120deg, #c2486a 0%, #d4607a 55%, #9d6bd4 130%);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
}
.ai-chat-avatar-sm {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
  color: #fff;
}
.ai-chat-header-info { flex: 1; }
.ai-chat-header-name {
  font-size: 13px; font-weight: 600; color: #fff; line-height: 1.2;
}
.ai-chat-header-status {
  font-size: 11px; color: rgba(255,255,255,0.75);
  display: flex; align-items: center; gap: 4px;
}
.ai-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #7fff7f; flex-shrink: 0;
}
.ai-chat-close {
  background: rgba(255,255,255,0.2); border: none;
  width: 26px; height: 26px; border-radius: 50%;
  color: #fff; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.ai-chat-close:hover { background: rgba(255,255,255,0.35); }

/* Messages area */
.ai-chat-messages {
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 120px; max-height: 220px;
  overflow-y: auto;
}
.ai-msg {
  display: flex; gap: 8px; align-items: flex-end;
}
.ai-msg-bubble {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 16px 16px 16px 4px;
  padding: 9px 13px;
  font-size: 12.5px; color: var(--text); line-height: 1.5;
  max-width: 220px;
}
.ai-msg-icon {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, #e8607a, #f0a0b8);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0;
  color: #fff;
}
/* User reply bubble */
.ai-msg.user { flex-direction: row-reverse; }
.ai-msg.user .ai-msg-bubble {
  background: linear-gradient(135deg, #e8607a, #f0a0b8);
  color: #fff;
  border: none;
  border-radius: 16px 16px 4px 16px;
}

/* Quick reply chips */
.ai-quick-replies {
  padding: 0 14px 14px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ai-qr-chip {
  background: transparent;
  border: 1px solid rgba(212,96,122,0.35);
  color: var(--accent);
  font-size: 11.5px; font-weight: 500;
  padding: 5px 12px; border-radius: 50px;
  cursor: pointer;
  transition: all .18s;
  font-family: 'Figtree', sans-serif;
}
.ai-qr-chip:hover {
  background: rgba(212,96,122,0.1);
  border-color: var(--accent);
}
.ai-qr-chip:active { transform: scale(.96); }

/* Input area */
.ai-chat-input-row {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}
.ai-chat-input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 7px 14px;
  font-size: 12px; color: var(--text);
  background: var(--bg3);
  outline: none;
  font-family: 'Figtree', sans-serif;
  transition: border-color .2s;
}
.ai-chat-input:focus { border-color: var(--accent); }
.ai-chat-input::placeholder { color: var(--muted); }
.ai-chat-send {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #e8607a, #f0a0b8);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s, box-shadow .2s;
  flex-shrink: 0;
}
.ai-chat-send:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(200,80,110,0.4);
}

/* Floating toggle button */
#ai-toggle {
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, #c2486a 0%, #e8607a 45%, #a06bd0 130%);
  border: 1px solid rgba(255,255,255,.18); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(200,80,110,0.4), 0 2px 8px rgba(0,0,0,0.1);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
  position: relative;
  flex-shrink: 0;
}
#ai-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(200,80,110,0.55);
}
#ai-toggle.active { transform: scale(0.9); }

/* Subtle pulse ring — slower and fainter so it doesn't distract */
#ai-toggle::before {
  content: '';
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(200,80,110,0.22);
  animation: pulse-ring 4s ease-out infinite;
}
#ai-toggle.active::before { display: none; }
@keyframes pulse-ring {
  0%   { transform: scale(1);    opacity: .4; }
  60%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}

/* Notification dot — small, accent-coloured, hidden until shown via JS */
#ai-notif {
  position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent2);
  border: 1.5px solid var(--bg);
  display: none;
  transition: transform .3s;
}
#ai-notif.show { display: block; }

/* Typing indicator */
.ai-typing {
  display: flex; gap: 4px; align-items: center;
  padding: 8px 12px;
}
.ai-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #d4607a; opacity: 0.4;
  animation: typing-dot 1.4s infinite;
}
.ai-typing span:nth-child(2) { animation-delay: .2s; }
.ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typing-dot {
  0%,60%,100% { opacity:.3; transform:translateY(0); }
  30%          { opacity:1;  transform:translateY(-4px); }
}

/* ===== Extracted block ===== */

#discover-page {
  position: fixed; inset: 0; z-index: 5000;
  background: #000;
  display: none; flex-direction: row;
  opacity: 0;
  transition: opacity .35s ease;
}
#discover-page.visible { display: flex; }
#discover-page.shown   { opacity: 1; }

/* ── Left sidebar (mirrors main) ── */
.dsc-sidebar {
  width: 72px; flex-shrink: 0;
  background: rgba(10,10,10,0.95);
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 0; gap: 6px;
  z-index: 10;
}
.dsc-logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #f0a8bb, #f8cdd8);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #1a1a1a;
  margin-bottom: 24px; flex-shrink: 0;
  text-decoration: none;
}
.dsc-back {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff; margin-top: auto;
  transition: background .2s;
}
.dsc-back:hover { background: rgba(240,168,187,0.2); }

/* ── Video feed container ── */
.dsc-feed {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #0a0a0a;
  position: relative;
}

/* ── Phone frame ── */
.dsc-phone {
  width: 390px;
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  position: relative;
  overflow: hidden;
  background: #000;
}

/* ── Video slides ── */
.dsc-slides {
  width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
}
.dsc-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .45s cubic-bezier(.25,.46,.45,.94);
}
.dsc-slide video {
  width: 100%; height: 100%;
  object-fit: cover;
}
.dsc-slide .dsc-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
}

/* ── Overlay UI ── */
.dsc-slide-ui {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px;
}
.dsc-slide-ui * { pointer-events: all; }

/* Legibility scrim — stronger bottom-left where the overlay sits */
.dsc-scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.12) 38%, transparent 62%),
    linear-gradient(to right, rgba(0,0,0,.45) 0%, transparent 42%);
}

/* Placeholder when a video can't load */
.dsc-ph {
  display: none; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(160deg, #1a1020, #0d0d1a);
  align-items: center; justify-content: center; flex-direction: column; gap: 12px;
}
.dsc-ph-avatar {
  width: 92px; height: 92px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 46px;
  background: linear-gradient(135deg, var(--accent), var(--violet));
}
.dsc-ph-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dsc-ph-label { font-size: 13px; color: rgba(255,255,255,.45); }

/* Top bar — brand eyebrow only (content-first) */
.dsc-topbar {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 16px 18px;
  display: flex; align-items: center; justify-content: flex-start;
  background: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, transparent 100%);
  pointer-events: none; z-index: 6;
}
.dsc-topbar-brand {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.dsc-topbar-brand svg { color: var(--accent2); }

/* ── Bottom overlay row: compact info (left) + Chat CTA (right) ── */
.dsc-slide-ui {
  flex-direction: row; align-items: flex-end; justify-content: space-between;
  gap: 12px;
}

/* Compact bottom-left info: [avatar · category] → name → description */
.dsc-info {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px;
  max-width: min(62%, 280px);
  padding: 10px 13px; margin: 0;
  border-radius: 14px;
  background: rgba(18,14,22,.40);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 24px rgba(0,0,0,.32);
}
/* row 1 — avatar + category badge, vertically centered */
.dsc-info-top {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 2px;
}
.dsc-info-avatar {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255,255,255,.85);
  background: linear-gradient(135deg, var(--accent), var(--violet));
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.dsc-info-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.dsc-avatar-emoji { font-size: 16px; }
.dsc-handle {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700; color: #fff; line-height: 1.15;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.dsc-desc {
  font-size: 11.5px; line-height: 1.4; color: rgba(255,255,255,.85);
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dsc-cat-badge {
  display: inline-flex; align-items: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; padding: 4px 10px; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent), var(--violet));
  box-shadow: 0 3px 10px rgba(212,96,122,.35);
}

/* Bottom-right Chat — reuses the homepage card-btn-primary component.
   Fixed height keeps it a consistent SaaS-size target across breakpoints. */
.dsc-chat-btn {
  flex: 0 0 auto; align-self: flex-end;
  height: 42px; padding: 0 22px; font-size: 13.5px;
  box-shadow: 0 6px 20px rgba(0,0,0,.38), var(--ring-inset);
}

/* Progress bar */
.dsc-progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: rgba(255,255,255,.2); z-index: 7;
}
.dsc-progress-fill {
  height: 100%;
  background: rgba(255,255,255,.75);
  transition: width .1s linear;
}

/* Swipe hint */
.dsc-swipe-hint {
  position: absolute; bottom: 60px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(255,255,255,.4); font-size: 11px;
  pointer-events: none; z-index: 8;
  animation: hint-fade 3s ease forwards;
}
@keyframes hint-fade {
  0%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}
.dsc-swipe-arrow {
  font-size: 20px;
  animation: arrow-bounce .8s ease-in-out infinite;
}
@keyframes arrow-bounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

/* Nav dots (side feed indicator) */
.dsc-dot-nav {
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 5px; z-index: 8;
}
.dsc-dot {
  width: 3px; border-radius: 2px;
  background: rgba(255,255,255,.35);
  transition: height .3s, background .3s;
  height: 12px;
}
.dsc-dot.active {
  height: 22px;
  background: rgba(255,255,255,.9);
}

/* Discover feed fills the area left of the back-rail (right panel removed) */
.dsc-feed { width: 100%; }


/* ===== Extracted block ===== */

/* ── Profile page overlay (same pattern as chat-page / plans-page) ── */
#profile-page {
  position: fixed; inset: 0; z-index: 3500;
  display: none; flex-direction: row;
  background: var(--bg);
  opacity: 0; transition: opacity .35s ease;
  overflow-y: auto;
}
#profile-page.shown { opacity: 1; }

/* ── Scoped profile vars (success/warning/danger only here) ── */
#profile-page { --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; }

/* ── Layout ── */
.pr-main { margin-left: var(--sidebar-w); flex: 1; min-width: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.pr-topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; padding: 0 28px; height: 60px;
  background: var(--topbar-bg); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border); gap: 16px;
}
.pr-topbar-title { font-size: 16px; font-weight: 600; color: var(--text); }
.pr-topbar-spacer { flex: 1; }
.pr-topbar-badge {
  font-size: 11px; font-weight: 500; color: var(--muted);
  background: var(--bg3); border: 1px solid var(--border);
  padding: 4px 14px; border-radius: 50px;
}
.pr-back-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 16px; border-radius: 50px;
  background: var(--bg3); border: 1px solid var(--border);
  font-size: 13px; font-weight: 500; color: var(--muted);
  cursor: none; transition: all .2s;
}
.pr-back-btn:hover { color: var(--text); border-color: rgba(212,96,122,0.35); }
.pr-back-btn svg { width: 14px; height: 14px; }

.pr-wrap {
  flex: 1; padding: 36px 40px 72px;
  max-width: 1000px; margin: 0 auto; width: 100%;
}

/* ── Banner — deep rose→violet, account-center feel ── */
.pr-banner {
  position: relative; height: 170px; border-radius: 22px 22px 0 0;
  background: linear-gradient(120deg,#8e2f4d 0%,#c2486a 30%,#b06bc9 68%,#8a5fd4 100%);
  overflow: hidden;
}
.pr-banner-pattern {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 15% 40%,rgba(255,255,255,.16) 0%,transparent 50%),
    radial-gradient(circle at 85% 20%,rgba(255,255,255,.10) 0%,transparent 45%),
    radial-gradient(circle at 50% 110%,rgba(15,8,18,.55) 0%,transparent 60%);
}
.pr-banner-btn {
  position: absolute; bottom: 14px; right: 18px;
  padding: 7px 16px; border-radius: 50px; font-size: 12px; font-weight: 500;
  background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(10px); cursor: none; transition: background .2s;
}
.pr-banner-btn:hover { background: rgba(255,255,255,.32); }

/* ── Avatar section ── */
.pr-avatar-section {
  background: var(--bg2); border: 1px solid var(--border);
  border-top: none; padding: 0 32px 28px; border-radius: 0 0 22px 22px;
}
.pr-avatar-row { display: flex; align-items: flex-end; gap: 24px; margin-bottom: 20px; }
.pr-avatar-wrap { position: relative; margin-top: -44px; flex-shrink: 0; }
.pr-avatar-img {
  width: 90px; height: 90px; border-radius: 50%;
  border: 4px solid var(--bg2);
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; overflow: hidden;
}
.pr-avatar-edit {
  position: absolute; bottom: 2px; right: 2px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); border: 2.5px solid var(--bg2);
  display: flex; align-items: center; justify-content: center;
  cursor: none; transition: transform .2s, box-shadow .2s;
}
.pr-avatar-edit:hover { transform: scale(1.12); box-shadow: 0 4px 14px rgba(212,96,122,.4); }
.pr-avatar-edit svg { width: 12px; height: 12px; stroke: #fff; }
.pr-user-info { flex: 1; padding-top: 18px; }
.pr-user-name {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700; letter-spacing: -.01em;
  color: var(--text); margin-bottom: 3px;
}
.pr-user-handle { font-size: 13px; color: var(--muted); }
.pr-badges { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pr-badge { padding: 3px 12px; border-radius: 50px; font-size: 11px; font-weight: 600; border: 1px solid; }
.pr-badge-free    { background: color-mix(in srgb, var(--tier-free) 12%, transparent); border-color: color-mix(in srgb, var(--tier-free) 30%, transparent); color: var(--tier-free); }
.pr-badge-premium { background: color-mix(in srgb, var(--tier-premium) 14%, transparent); border-color: color-mix(in srgb, var(--tier-premium) 42%, transparent); color: var(--tier-premium); }
.pr-badge-verified { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.3); color: #3b82f6; }
.pr-badge-member { background: rgba(212,96,122,.1); border-color: rgba(212,96,122,.3); color: var(--accent); }
/* stats as boxed metric chips */
.pr-stats { display: flex; gap: 12px; margin-top: 16px; }
.pr-stats > div {
  background: var(--surface-sheen), var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 22px;
  min-width: 86px;
  transition: transform var(--duration-fast) var(--ease-premium), border-color .2s;
}
.pr-stats > div:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.pr-stat-val {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; color: var(--text);
}
.pr-stat-label { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ── Grid ── */
.pr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
.pr-card {
  background: var(--surface-sheen), var(--bg2);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-1);
  transition: transform var(--duration-normal) var(--ease-premium), box-shadow var(--duration-normal) var(--ease-premium), border-color var(--duration-normal) ease;
}
.pr-card:hover { transform: translateY(-2px); box-shadow: var(--glow-soft); border-color: rgba(212,96,122,.22); }
.pr-card.pr-full { grid-column: 1 / -1; }
@keyframes prFadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
/* staggered card reveal re-triggers each time the overlay opens (.motion-in) */
#profile-page.motion-in .pr-card { animation: prFadeUp .5s var(--ease-premium) both; }
#profile-page.motion-in .pr-card:nth-child(1){animation-delay:.06s}
#profile-page.motion-in .pr-card:nth-child(2){animation-delay:.12s}
#profile-page.motion-in .pr-card:nth-child(3){animation-delay:.18s}
#profile-page.motion-in .pr-card:nth-child(4){animation-delay:.24s}
#profile-page.motion-in .pr-card:nth-child(5){animation-delay:.30s}
#profile-page.motion-in .pr-card:nth-child(6){animation-delay:.36s}
.pr-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.pr-card-title-row { display: flex; align-items: center; gap: 10px; }
.pr-card-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(212,96,122,.1); display: flex; align-items: center; justify-content: center;
}
.pr-card-icon svg { width: 18px; height: 18px; stroke: var(--accent); }
.pr-card-title { font-size: 15px; font-weight: 600; color: var(--text); }
.pr-card-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }

/* ── Form fields ── */
.pr-field { margin-bottom: 18px; }
.pr-field:last-of-type { margin-bottom: 0; }
.pr-label {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px; display: block;
}
.pr-input-row { position: relative; }
.pr-input {
  width: 100%; padding: 11px 42px 11px 14px;
  background: var(--bg3); border: 1.5px solid var(--border);
  border-radius: 12px; font-size: 14px; color: var(--text);
  font-family: 'Figtree',sans-serif; outline: none;
  transition: border-color .22s, box-shadow .22s;
}
.pr-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212,96,122,.1); }
.pr-input::placeholder { color: var(--muted); }
.pr-input:disabled { opacity: .55; }
.pr-input-icon {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); cursor: none; transition: color .2s;
}
.pr-input-icon:hover { color: var(--accent); }
.pr-input-icon svg { width: 15px; height: 15px; }
.pr-hint { font-size: 11px; color: var(--muted); margin-top: 5px; }

/* ── Buttons ── */
.pr-btn-primary {
  padding: 10px 22px; border-radius: 50px;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  color: #fff; border: none; font-size: 13px; font-weight: 600;
  cursor: none; font-family: 'Figtree',sans-serif;
  transition: all .22s; box-shadow: 0 4px 16px rgba(212,96,122,.25);
}
.pr-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(212,96,122,.35); }
.pr-btn-secondary {
  padding: 10px 20px; border-radius: 50px;
  background: var(--bg3); color: var(--muted);
  border: 1.5px solid var(--border); font-size: 13px; font-weight: 500;
  cursor: none; font-family: 'Figtree',sans-serif; transition: all .2s;
}
.pr-btn-secondary:hover { color: var(--text); border-color: rgba(212,96,122,.3); }
.pr-btn-danger {
  padding: 10px 20px; border-radius: 50px;
  background: rgba(239,68,68,.08); color: var(--danger);
  border: 1.5px solid rgba(239,68,68,.25); font-size: 13px; font-weight: 500;
  cursor: none; font-family: 'Figtree',sans-serif; transition: all .2s;
}
.pr-btn-danger:hover { background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.45); }
.pr-btn-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* ── Plan cards ── */
.pr-plan-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
/* per-tier accent driver — every coloured bit reads var(--t) */
.pr-plan-card {
  --t: var(--accent);
  border: 2px solid var(--border); border-radius: 16px; padding: 20px 18px;
  background: var(--bg3); cursor: pointer;
  transition: transform .25s var(--ease-bounce-soft), border-color .25s, box-shadow .25s, background .25s;
  position: relative; overflow: hidden;
}
.pr-plan-card[data-tier=free]    { --t: var(--tier-free); }
.pr-plan-card[data-tier=premium] { --t: var(--tier-premium); }
.pr-plan-card[data-tier=elite]   { --t: var(--tier-elite); }
.pr-plan-card[data-tier=ultra]   { --t: var(--tier-ultra); }
/* Free reads as the muted/dim baseline until it is the current plan */
.pr-plan-card[data-tier=free]:not(.pr-current) { opacity: .9; }
.pr-plan-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--t) 18%, transparent), transparent 65%);
}
.pr-plan-card[data-tier=ultra]::before {
  background:
    radial-gradient(90% 80% at 16% -10%, color-mix(in srgb, var(--tier-ultra-ice) 20%, transparent), transparent 58%),
    radial-gradient(110% 90% at 72% -10%, color-mix(in srgb, var(--tier-ultra) 24%, transparent), transparent 62%);
}
.pr-plan-card:hover { border-color: color-mix(in srgb, var(--t) 40%, var(--border)); transform: translateY(-3px); box-shadow: 0 10px 28px color-mix(in srgb, var(--t) 16%, transparent); }
.pr-plan-card.pr-current { border-color: var(--t); background: color-mix(in srgb, var(--t) 6%, var(--bg3)); box-shadow: 0 0 0 1px var(--t), 0 12px 30px color-mix(in srgb, var(--t) 18%, transparent); }
.pr-plan-card.pr-current::before { opacity: 1; }
/* Clean card-header row: the tier icon sits in its own rounded chip on the left;
   the "Current" badge is a pill anchored to the right of the SAME row. Both are
   flex children with min-width:0 + flex-shrink:0, so the badge can never overlap
   or clip the icon, title or card edge at any width. */
.pr-plan-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px; min-height: 40px; position: relative;
}
.pr-plan-badge {
  flex-shrink: 0; align-self: center;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  background: var(--t); color: #fff; display: none; white-space: nowrap;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--t) 30%, transparent);
}
.pr-plan-card.pr-current .pr-plan-badge { display: inline-flex; }
.pr-plan-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: color-mix(in srgb, var(--t) 13%, transparent);
  color: var(--t); position: relative;
}
.pr-plan-name { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; position: relative; }
.pr-plan-price { font-family: var(--font-num); font-variant-numeric: tabular-nums lining-nums; font-size: 22px; font-weight: 700; color: var(--t); margin-bottom: 12px; position: relative; }
.pr-plan-price span { font-size: 13px; font-weight: 400; color: var(--muted); }
.pr-plan-features { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; position: relative; }
.pr-plan-features li { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.pr-plan-features li::before { content: '✓'; color: var(--t); font-weight: 700; }
.pr-plan-btn {
  width: 100%; padding: 10px; border-radius: 50px; font-size: 13px; font-weight: 600;
  border: 1.5px solid var(--border); background: var(--bg2); color: var(--muted);
  cursor: pointer; font-family: 'Figtree',sans-serif; transition: all .2s; position: relative; z-index: 1;
}
.pr-plan-card.pr-current .pr-plan-btn { background: linear-gradient(135deg, var(--t), color-mix(in srgb, var(--t) 60%, var(--violet))); color: #fff; border-color: transparent; box-shadow: 0 4px 16px color-mix(in srgb, var(--t) 28%, transparent); }
.pr-plan-card[data-tier=ultra].pr-current .pr-plan-btn { background: linear-gradient(120deg, var(--tier-ultra-ice), var(--tier-ultra) 55%, var(--tier-premium)); }
.pr-plan-card:not(.pr-current):hover .pr-plan-btn { border-color: color-mix(in srgb, var(--t) 45%, var(--border)); color: var(--t); }

/* ── Activity ── */
.pr-activity-list { display: flex; flex-direction: column; gap: 2px; }
.pr-activity-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 12px; transition: background .15s; }
.pr-activity-item:hover { background: rgba(212,96,122,.04); }
.pr-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--accent); }
.pr-dot.green { background: var(--success); }
.pr-dot.yellow { background: var(--warning); }
.pr-activity-text { flex: 1; font-size: 13px; color: var(--text); }
.pr-activity-time { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ── Security ── */
.pr-security-item { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--border); }
.pr-security-item:last-child { border-bottom: none; padding-bottom: 0; }
.pr-sec-left { display: flex; align-items: center; gap: 14px; }
.pr-sec-icon-wrap { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(212,96,122,.08); }
.pr-sec-icon-wrap svg { width: 18px; height: 18px; stroke: var(--accent); }
.pr-sec-name { font-size: 14px; font-weight: 500; color: var(--text); }
.pr-sec-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ── Toggle switch ── */
.pr-toggle { position: relative; width: 44px; height: 24px; cursor: none; }
.pr-toggle input { display: none; }
.pr-toggle-track { position: absolute; inset: 0; border-radius: 50px; background: var(--border); border: 1.5px solid rgba(200,120,145,.2); transition: background .3s; }
.pr-toggle input:checked ~ .pr-toggle-track { background: var(--accent); }
.pr-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.2); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.pr-toggle input:checked ~ .pr-toggle-thumb { transform: translateX(20px); }

/* ── Notifications ── */
.pr-notif-item { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--border); }
.pr-notif-item:last-child { border-bottom: none; }
.pr-notif-label { font-size: 14px; color: var(--text); }
.pr-notif-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ── Profile Modals (prefixed pr-modal to avoid clash with lendos plans modal) ── */
.pr-modal-overlay {
  position: fixed; inset: 0; z-index: 6000;
  background: rgba(10,4,10,.62); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .28s;
}
.pr-modal-overlay.open { opacity: 1; pointer-events: all; }
.pr-modal-box {
  position: relative;
  background: var(--surface-sheen), var(--bg2);
  border: 1px solid var(--border-strong); border-radius: 24px;
  padding: 32px; width: 440px; max-width: calc(100vw - 48px);
  box-shadow: var(--shadow-2), 0 0 60px -20px rgba(212,96,122,.25);
  overflow: hidden;
  transform: scale(.94) translateY(10px); transition: transform .32s cubic-bezier(.34,1.56,.64,1);
}
.pr-modal-box::before {
  content: '';
  position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,168,187,.55), rgba(157,107,212,.4), transparent);
}
.pr-modal-overlay.open .pr-modal-box { transform: scale(1) translateY(0); }
.pr-modal-title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700; letter-spacing: -.01em;
  color: var(--text); margin-bottom: 6px;
}
.pr-modal-sub { font-size: 13px; color: var(--muted); margin-bottom: 24px; line-height: 1.55; }
.pr-modal-label { font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 7px; display: block; text-transform: uppercase; letter-spacing: .07em; }
.pr-modal-input {
  width: 100%; height: 44px; padding: 0 14px;
  background: var(--bg);
  border: 1.5px solid var(--border); border-radius: 12px;
  font-size: 14px; color: var(--text); font-family: 'Figtree',sans-serif;
  outline: none; transition: border-color .22s, box-shadow .25s var(--ease-premium), background-color .3s ease;
  margin-bottom: 14px;
}
.pr-modal-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212,96,122,.12), 0 0 18px rgba(240,168,187,.10); background: var(--bg3); }
.pr-modal-input::placeholder { color: var(--muted); }
.pr-modal-btn-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }

/* ── CHARACTER PREVIEW MODAL (lightbox) ──────────────────────────────────────
   Premium card-preview: deck-style carousel (active image elevated + glow,
   neighbours blurred/dimmed behind), metadata/action row, Chat/Generate CTAs.
   Sits above the page overlays (discover/favorites/chat) but below toasts. */
.preview-overlay { z-index: 6500; padding: 18px; }
.preview-box {
  position: relative; display: flex; flex-direction: column;
  width: min(640px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  background: var(--surface-sheen), var(--bg2);
  border: 1px solid var(--border-strong); border-radius: 26px;
  box-shadow: var(--shadow-2), 0 0 80px -28px color-mix(in srgb, var(--accent) 45%, transparent);
  overflow: hidden;
  opacity: 0; transform: scale(.95) translateY(12px);
  transition: transform .42s var(--ease-premium), opacity .3s ease;
}
.preview-overlay.open .preview-box { opacity: 1; transform: scale(1) translateY(0); }
.preview-box::before {
  content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px; z-index: 5;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 60%, transparent), color-mix(in srgb, var(--violet) 45%, transparent), transparent);
}

/* Close */
.preview-x {
  position: absolute; top: 14px; left: 14px; z-index: 6;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,6,12,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.16); color: #fff; cursor: none;
  transition: background .2s, transform .2s var(--ease-premium), border-color .2s;
}
.preview-x:hover { background: color-mix(in srgb, var(--accent) 55%, transparent); border-color: rgba(255,255,255,.32); transform: scale(1.08); }

/* Stage / deck carousel */
.preview-stage {
  position: relative; flex: 0 0 auto;
  height: clamp(340px, 52vh, 560px);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--violet) 16%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg3), var(--bg2));
}
.preview-deck { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.preview-slide {
  position: absolute; left: 50%; top: 50%; margin: 0;
  height: 86%; aspect-ratio: 3 / 4;
  border-radius: 18px; overflow: hidden; background: var(--bg3); cursor: none;
  transform: translate(-50%, -50%);
  will-change: transform, opacity, filter;
  transition: transform .46s var(--ease-premium), opacity .46s var(--ease-premium),
              filter .46s var(--ease-premium), box-shadow .46s var(--ease-premium);
}
.preview-slide img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.preview-slide.is-active {
  transform: translate(-50%, -50%) scale(1); opacity: 1; filter: none; z-index: 3;
  box-shadow: 0 18px 50px -16px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06), 0 0 46px -6px color-mix(in srgb, var(--accent) 50%, transparent);
}
.preview-slide.is-prev { transform: translate(-108%, -50%) scale(.78); opacity: .5; filter: blur(2px) brightness(.62); z-index: 2; }
.preview-slide.is-next { transform: translate(8%, -50%) scale(.78); opacity: .5; filter: blur(2px) brightness(.62); z-index: 2; }
.preview-slide.is-hidden { transform: translate(-50%, -50%) scale(.66); opacity: 0; z-index: 1; pointer-events: none; }

/* Nav arrows + counter */
.preview-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,6,12,.46); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18); color: #fff; cursor: none;
  transition: background .2s, transform .2s var(--ease-premium), border-color .2s;
}
.preview-nav:hover { background: color-mix(in srgb, var(--accent) 60%, transparent); border-color: rgba(255,255,255,.34); }
.preview-prev { left: 14px; } .preview-prev:hover { transform: translateY(-50%) translateX(-2px); }
.preview-next { right: 14px; } .preview-next:hover { transform: translateY(-50%) translateX(2px); }
.preview-counter {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 4;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #fff;
  padding: 4px 11px; border-radius: 50px;
  background: rgba(10,6,12,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
}

/* Body */
.preview-body { padding: 20px 24px 22px; overflow-y: auto; }
.preview-title {
  font-family: var(--font-display); font-size: 23px; font-weight: 700; letter-spacing: -.015em;
  color: var(--text); margin: 0 0 12px; line-height: 1.15; text-align: center;
}
.preview-meta {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 12px;
  padding: 11px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.preview-meta-btn, .preview-likes {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted); background: none; border: none; cursor: none;
  transition: color .18s;
}
.preview-meta-btn { font-weight: 600; }
.preview-meta-btn:hover { color: var(--text); }
.preview-likes strong { color: var(--text); font-weight: 700; }
.preview-likes svg { color: var(--accent); }
.preview-meta-sep { width: 1px; height: 14px; background: var(--border-strong); }

.preview-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 14px; }
.preview-tag {
  font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: 50px; color: var(--accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--violet) 12%, transparent));
  border: 1px solid var(--border-strong);
}
.preview-creator { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 12px; }
.preview-creator span { color: var(--text); font-weight: 600; }

/* Details (Profile toggle) */
.preview-details {
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  transition: max-height .38s var(--ease-premium), opacity .38s ease, margin-top .38s var(--ease-premium);
}
.preview-details.open { max-height: 360px; opacity: 1; margin-top: 14px; }
.preview-about { font-size: 13px; line-height: 1.6; color: var(--text); margin: 0 0 12px; }
.preview-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.preview-stat {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 6px; border-radius: 12px; background: var(--bg3); border: 1px solid var(--border);
}
.preview-stat-k { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.preview-stat-v { font-size: 13px; font-weight: 700; color: var(--text); }

/* CTAs */
.preview-cta-row { display: flex; gap: 12px; margin-top: 18px; }
.preview-cta {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 52px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 700;
  cursor: none; border: 1px solid transparent;
  transition: transform .2s var(--ease-premium), box-shadow .25s var(--ease-premium), background .25s, border-color .25s, opacity .2s;
}
.preview-cta-primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; box-shadow: var(--glow-soft); }
.preview-cta-primary:hover { transform: translateY(-2px); box-shadow: var(--glow-strong); }
.preview-cta-ghost { background: rgba(255,255,255,.04); border-color: var(--border-strong); color: var(--text); }
.preview-cta-ghost:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--violet) 12%, transparent); border-color: var(--violet); }
.preview-cta:active { transform: translateY(0) scale(.99); }

body.preview-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .preview-box, .preview-slide, .preview-nav, .preview-x,
  .preview-cta, .preview-details, .preview-meta-btn { transition: none !important; }
  .preview-overlay.open .preview-box { transform: none; }
}

/* ── Auth modal extras (Sign Up / Login) ── */
.auth-msg {
  display: none;
  font-size: 12.5px; line-height: 1.5;
  border-radius: 10px; padding: 9px 12px;
  margin: 2px 0 12px;
}
.auth-msg.show { display: block; }
.auth-msg.error {
  background: rgba(239,68,68,.08); color: #ef4444;
  border: 1px solid rgba(239,68,68,.25);
}
.auth-msg.info {
  background: rgba(212,96,122,.07); color: var(--accent);
  border: 1px solid rgba(212,96,122,.25);
}
.auth-forgot {
  display: inline-block;
  font-size: 12.5px; color: var(--muted);
  cursor: none; margin: -6px 0 10px;
  transition: color .18s;
}
.auth-forgot:hover { color: var(--accent); }

/* ── Language modal ── */
.lang-list { display: flex; flex-direction: column; gap: 4px; }
.lang-opt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-radius: 12px;
  font-size: 14px; color: var(--text);
  border: 1.5px solid transparent;
  cursor: none; transition: all .18s;
}
.lang-opt:hover { background: rgba(212,96,122,.06); }
.lang-opt.active {
  border-color: rgba(212,96,122,.35);
  background: rgba(212,96,122,.08);
  color: var(--accent);
}
.lang-check { opacity: 0; color: var(--accent); font-weight: 600; }
.lang-opt.active .lang-check { opacity: 1; }

/* ── Avatar upload ── */
.pr-upload-area {
  border: 2px dashed var(--border); border-radius: 16px; padding: 28px;
  text-align: center; cursor: none; transition: all .2s; background: var(--bg3); margin-bottom: 16px;
}
.pr-upload-area:hover { border-color: var(--accent); background: rgba(212,96,122,.04); }
.pr-upload-icon { font-size: 36px; margin-bottom: 10px; }
.pr-upload-text { font-size: 13px; color: var(--muted); }
.pr-upload-text strong { color: var(--accent); }
.pr-emoji-pick { font-size: 28px; cursor: pointer; padding: 8px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--bg3); transition: all .2s; }
.pr-emoji-pick:hover { border-color: var(--accent); transform: scale(1.12); }



/* ── CREATE AI PAGE ── */

/* ════════════════════════════════════════════════════════════════════════
   CREATE AI — companion studio. All selectors here are create-ai scoped
   (#create-ai-page / .cai-*); no other page uses them. An image-led landing
   to choose a style, then a two-zone studio: a stepper + option cards on the
   left and a sticky live portrait preview + CTA on the right. Built entirely
   on VORSA tokens and the project's own model imagery; collapses to a single
   column with a fixed action bar on tablet / mobile.
   ════════════════════════════════════════════════════════════════════════ */
#create-ai-page {
  position: fixed; inset: 0; z-index: 3500;
  display: none; flex-direction: column;
  background:
    radial-gradient(125% 78% at 82% -12%, color-mix(in srgb, var(--violet) 17%, transparent), transparent 55%),
    radial-gradient(115% 68% at 10% -4%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 52%),
    var(--bg);
  opacity: 0; transition: opacity .35s ease;
}
#create-ai-page.shown { opacity: 1; }

/* ── Topbar ── */
.cai-topbar {
  height: 62px; flex-shrink: 0; position: relative; z-index: 3;
  display: flex; align-items: center; gap: 14px;
  padding: 0 clamp(16px, 3vw, 32px);
  background: var(--topbar-bg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.cai-back-btn {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
  transition: color .2s var(--ease-premium), border-color .2s, background .2s, transform .2s var(--ease-premium);
}
.cai-back-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--bg); }
.cai-back-btn:active { transform: scale(.93); }
.cai-back-btn svg { width: 16px; height: 16px; }
.cai-topbar-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.cai-topbar-badge {
  margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); padding: 6px 13px; border-radius: 50px;
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}

.cai-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.cai-inner { max-width: 1240px; margin: 0 auto; padding: clamp(22px, 3.2vw, 44px); }

/* ════════ LANDING ════════ */
.cai-landing-head { max-width: 640px; }
.cai-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
  padding: 6px 14px; border-radius: 50px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}
.cai-landing-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 50px); font-weight: 800; line-height: 1.05;
  letter-spacing: -.025em; margin: 0 0 14px;
  background: linear-gradient(116deg, var(--text) 38%, var(--accent) 122%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cai-landing-sub { font-size: clamp(14px, 1.5vw, 16.5px); color: var(--muted); margin: 0; line-height: 1.65; max-width: 560px; }

.cai-style-pick { margin-top: clamp(28px, 4vw, 44px); }
.cai-style-pick-label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 16px;
}
.cai-style-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 22px); }
.cai-style-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: block; width: 100%; text-align: left; cursor: pointer;
  aspect-ratio: 16 / 10; border-radius: var(--radius-lg);
  border: 1.5px solid var(--border); background: var(--bg3);
  box-shadow: var(--shadow-1);
  transition: transform .3s var(--ease-bounce-soft), border-color .25s var(--ease-premium), box-shadow .3s var(--ease-premium);
}
.cai-style-media {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center top;
  background-image: conic-gradient(from 160deg, color-mix(in srgb, var(--accent) 45%, var(--bg3)), var(--violet), color-mix(in srgb, var(--accent2) 40%, var(--bg3)), color-mix(in srgb, var(--accent) 45%, var(--bg3)));
  transition: transform .6s var(--ease-soft-out);
}
.cai-style-veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,6,12,0) 28%, rgba(8,6,12,.6) 78%, rgba(8,6,12,.85) 100%);
}
.cai-style-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 24px 52px -22px color-mix(in srgb, var(--accent) 70%, transparent), var(--shadow-2); }
.cai-style-card:hover .cai-style-media { transform: scale(1.05); }
.cai-style-card:active { transform: translateY(-1px) scale(.995); }
.cai-style-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cai-style-info { position: absolute; left: clamp(16px, 2vw, 22px); bottom: clamp(15px, 2vw, 20px); right: 64px; z-index: 1; }
.cai-style-name { display: block; font-family: var(--font-display); font-size: clamp(19px, 2.4vw, 25px); font-weight: 700; letter-spacing: -.01em; color: #fff; }
.cai-style-desc { display: block; font-size: 13px; color: rgba(255,255,255,.82); margin-top: 3px; line-height: 1.4; }
.cai-style-go {
  position: absolute; right: clamp(15px, 2vw, 20px); bottom: clamp(15px, 2vw, 20px); z-index: 1;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--accent) 75%, transparent);
  transition: transform .3s var(--ease-bounce-soft);
}
.cai-style-go svg { width: 19px; height: 19px; }
.cai-style-card:hover .cai-style-go { transform: translateX(3px) scale(1.06); }
.cai-landing-cta { display: flex; justify-content: center; margin-top: clamp(26px, 4vw, 40px); }
.cai-landing-cta .pr-btn-primary { padding: 14px 38px; font-size: 15px; }

/* ════════ STUDIO GRID ════════ */
.cai-studio { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(22px, 3vw, 44px); align-items: start; }
.cai-stage { min-width: 0; }

/* ── Stepper (the connecting line fill is #caiProgressFill) ── */
.cai-stepper { margin-bottom: clamp(22px, 3vw, 32px); }
.cai-progress-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.cai-stepper-track { position: relative; }
.cai-stepper-line {
  position: absolute; left: 15px; right: 15px; top: 15px; height: 2px; transform: translateY(-50%);
  background: var(--border); border-radius: 50px; overflow: hidden;
}
.cai-progress-fill {
  display: block; height: 100%; width: 0; border-radius: 50px;
  background: linear-gradient(90deg, var(--accent), var(--violet));
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: width .55s cubic-bezier(.65, 0, .35, 1);
}
.cai-stepper-nodes { position: relative; display: flex; justify-content: space-between; }
.cai-step-node {
  position: relative; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg2); border: 1.5px solid var(--border);
  color: var(--muted); font-size: 12px; font-weight: 700; font-family: var(--font-sans); cursor: pointer;
  transition: transform .28s var(--ease-bounce-soft), border-color .25s, background .25s, color .2s, box-shadow .3s var(--ease-premium);
}
.cai-step-node[aria-disabled="true"] { cursor: default; }
.cai-step-node:not([aria-disabled="true"]):hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--text); }
.cai-step-ico { display: flex; align-items: center; justify-content: center; }
.cai-step-ico svg { width: 14px; height: 14px; }
.cai-step-tick { position: absolute; display: none; }
.cai-step-node.done { background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: transparent; color: #fff; }
.cai-step-node.done .cai-step-ico { display: none; }
.cai-step-node.done .cai-step-tick { display: flex; }
.cai-step-node.active {
  border-color: var(--accent); color: var(--accent); background: var(--bg); transform: scale(1.16);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent), 0 6px 16px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}
.cai-step-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Step content ── */
.cai-step-view { transition: opacity .22s ease, transform .26s var(--ease-soft-out); }
.cai-step-view.leaving { opacity: 0; transform: translateX(-16px); }
.cai-step-view.entering { opacity: 0; transform: translateX(16px); }
.cai-step-title { font-family: var(--font-display); font-size: clamp(21px, 2.5vw, 28px); font-weight: 700; letter-spacing: -.015em; color: var(--text); margin: 0 0 22px; }
.cai-group { margin-bottom: clamp(22px, 3vw, 30px); }
.cai-group-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 13px; }
.cai-group-optional { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: var(--muted); opacity: .75; border: 1px solid var(--border); padding: 2px 8px; border-radius: 50px; }
.cai-group-hint { font-size: 12.5px; color: var(--muted); margin: -7px 0 13px; }
/* Wrap-and-center instead of a fixed-column grid: a partial last row centers
   itself rather than stretching or leaving a lopsided gap. Cards keep a fixed
   flex-basis so every tile is the same size regardless of row fill. */
.cai-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; --cai-card-w: 158px; }
.cai-cards--wide { --cai-card-w: 212px; }

/* Option card — full-bleed visual tile (poster+video / gradient+emoji) */
.cai-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: block; flex: 0 0 var(--cai-card-w); width: var(--cai-card-w);
  padding: 0; aspect-ratio: 4 / 5; border-radius: 18px;
  background: var(--bg3); border: 2px solid var(--border); cursor: pointer; user-select: none;
  font-family: var(--font-sans); color: #fff;
  transition: transform .28s var(--ease-bounce-soft), border-color .22s var(--ease-premium), box-shadow .26s var(--ease-premium);
}
.cai-card-visual { position: absolute; inset: 0; z-index: 0; transition: transform .45s var(--ease-premium); }
/* Media tile: static poster at rest; the lazily-loaded clip fades in above it
   while hovered (.playing) or selected */
.cai-card-visual--media { background: var(--bg3); }
.cai-card-poster, .cai-card-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.cai-card-video { opacity: 0; transition: opacity .28s var(--ease-premium); }
.cai-card.playing .cai-card-video { opacity: 1; }
.cai-card-visual--icon {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(125% 92% at 50% 12%, color-mix(in srgb, var(--accent) 46%, var(--bg3)), transparent 64%),
    radial-gradient(120% 80% at 82% 102%, color-mix(in srgb, var(--violet) 34%, transparent), transparent 70%),
    var(--bg3);
}
.cai-card-emoji { font-size: clamp(34px, 4vw, 46px); line-height: 1; filter: drop-shadow(0 5px 16px rgba(0,0,0,.32)); transition: transform .32s var(--ease-bounce-soft); }
.cai-card-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0) 36%, rgba(0,0,0,.12) 58%, rgba(0,0,0,.74) 100%); }
.cai-card-label {
  position: absolute; z-index: 2; left: 13px; right: 36px; bottom: 11px;
  font-family: var(--font-display); font-size: clamp(13px, 1.4vw, 15.5px); font-weight: 800;
  letter-spacing: .015em; line-height: 1.15; text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.cai-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 24px 46px -22px color-mix(in srgb, var(--accent) 62%, transparent), var(--shadow-2); }
.cai-card:hover .cai-card-visual { transform: scale(1.07); }
.cai-card:hover .cai-card-emoji { transform: scale(1.12) translateY(-3px); }
.cai-card:active { transform: translateY(-2px) scale(.99); }
.cai-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1.5px var(--accent), 0 20px 42px -18px color-mix(in srgb, var(--accent) 78%, transparent);
}
.cai-card.active .cai-card-label { color: var(--accent); }
.cai-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cai-card-check {
  position: absolute; z-index: 2; top: 9px; right: 9px;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff;
  box-shadow: 0 5px 14px -3px color-mix(in srgb, var(--accent) 70%, transparent);
  opacity: 0; transform: scale(.4);
  transition: opacity .2s var(--ease-premium), transform .26s var(--ease-bounce-soft);
}
.cai-card.active .cai-card-check { opacity: 1; transform: scale(1); }
/* "Custom" tile — desaturated + dashed, echoing a build-your-own slot */
.cai-card[data-value="Custom"] { border-style: dashed; }
.cai-card[data-value="Custom"] .cai-card-visual--icon { background: repeating-linear-gradient(48deg, var(--bg3), var(--bg3) 9px, var(--bg2) 9px, var(--bg2) 18px); }
.cai-card[data-value="Custom"] .cai-card-emoji { opacity: .92; }

/* ── Colour swatches (skin tone / eye colour / hair colour) ──
   A lighter-weight picker than the photo tiles: round dots with a label. */
.cai-swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
.cai-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: none; padding: 6px 4px; border-radius: 12px;
  cursor: pointer; font-family: var(--font-sans);
}
.cai-swatch-dot {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: radial-gradient(120% 120% at 30% 25%, color-mix(in srgb, var(--sw) 78%, #fff), var(--sw) 52%, color-mix(in srgb, var(--sw) 72%, #000));
  border: 2px solid color-mix(in srgb, var(--sw) 55%, var(--border));
  box-shadow: inset 0 -2px 6px rgba(0,0,0,.18), 0 3px 10px -4px rgba(0,0,0,.35);
  transition: transform .24s var(--ease-bounce-soft), box-shadow .22s var(--ease-premium);
}
.cai-swatch-dot svg { opacity: 0; transform: scale(.4); transition: opacity .18s, transform .24s var(--ease-bounce-soft); filter: drop-shadow(0 1px 4px rgba(0,0,0,.55)); }
.cai-swatch:hover .cai-swatch-dot { transform: scale(1.1); }
.cai-swatch.active .cai-swatch-dot {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5.5px var(--accent),
    0 6px 16px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}
.cai-swatch.active .cai-swatch-dot svg { opacity: 1; transform: scale(1); }
.cai-swatch-name { font-size: 12px; font-weight: 600; color: var(--muted); transition: color .18s; }
.cai-swatch.active .cai-swatch-name { color: var(--accent); }
.cai-swatch--custom .cai-swatch-dot {
  background: conic-gradient(from 40deg, #f08bb5, #5b8fd9, #7bd98f, #e8c87a, #f08bb5);
  border-style: dashed; border-color: var(--border);
}
.cai-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Chips (personality / occupation / hobbies) ──
   Compact pills for long text lists; multi groups accumulate picks and the
   "+" rotates into an "×" while selected. */
.cai-chip-search { position: relative; max-width: 340px; margin: 0 auto 14px; }
.cai-chip-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.cai-chip-search-input {
  width: 100%; padding: 10px 15px 10px 38px; border-radius: 50px;
  border: 1px solid var(--border); background: var(--bg2); color: var(--text);
  font-size: 13.5px; font-family: var(--font-sans);
  transition: border-color .2s, box-shadow .2s;
}
.cai-chip-search-input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.cai-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.cai-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 50px;
  background: var(--bg2); border: 1.5px solid var(--border); color: var(--text);
  font-size: 13px; font-weight: 600; font-family: var(--font-sans); cursor: pointer;
  transition: transform .2s var(--ease-bounce-soft), border-color .18s, background .18s, color .18s, box-shadow .2s;
}
.cai-chip:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 55%, transparent); }
.cai-chip.active {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg2));
  border-color: var(--accent); color: var(--accent);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
.cai-chip-ico { width: 13px; height: 13px; flex-shrink: 0; opacity: .65; transition: transform .22s var(--ease-bounce-soft), opacity .18s; }
.cai-chip.active .cai-chip-ico { transform: rotate(45deg); opacity: 1; }
.cai-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cai-chip-empty { text-align: center; font-size: 13px; color: var(--muted); padding: 12px 0 4px; }

/* ── Custom free-text + prompting guide ──
   Revealed while a group's Custom tile is selected. */
.cai-custom { display: none; margin-top: 14px; }
.cai-custom.shown { display: block; animation: cai-custom-in .3s var(--ease-soft-out); }
@keyframes cai-custom-in { from { opacity: 0; transform: translateY(-6px); } }
.cai-custom-input {
  width: 100%; max-width: 460px; display: block; margin: 0 auto;
  padding: 12px 16px; border-radius: 14px;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--bg2); color: var(--text); font-size: 14px; font-family: var(--font-sans);
  transition: border-color .2s, box-shadow .2s;
}
.cai-custom-input:focus { outline: none; border-style: solid; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.cai-guide { max-width: 460px; margin: 10px auto 0; border: 1px solid var(--border); border-radius: 14px; background: var(--bg2); overflow: hidden; }
.cai-guide-toggle {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 14px;
  background: none; border: none; cursor: pointer; text-align: left;
  color: var(--muted); font-size: 12.5px; font-weight: 700; font-family: var(--font-sans);
  transition: color .18s;
}
.cai-guide-toggle:hover { color: var(--text); }
.cai-guide-bulb { font-size: 14px; }
.cai-guide-chev { width: 13px; height: 13px; margin-left: auto; flex-shrink: 0; transition: transform .25s var(--ease-premium); }
.cai-guide.open .cai-guide-chev { transform: rotate(180deg); }
.cai-guide-body { display: none; margin: 0; padding: 0 16px 13px 32px; }
.cai-guide.open .cai-guide-body { display: block; }
.cai-guide-body li { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-top: 5px; }

/* ── Sticky live preview ── */
.cai-aside { position: sticky; top: 22px; }
.cai-preview {
  border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(180deg, var(--bg2), var(--bg));
  border: 1px solid var(--border); box-shadow: var(--shadow-2);
}
.cai-preview-media { position: relative; aspect-ratio: 4 / 5; background: var(--bg3); overflow: hidden; }
.cai-preview-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: opacity .45s var(--ease-premium); }
.cai-preview-media.is-empty { background: conic-gradient(from 150deg, color-mix(in srgb, var(--accent) 42%, var(--bg3)), var(--violet), color-mix(in srgb, var(--accent2) 38%, var(--bg3)), color-mix(in srgb, var(--accent) 42%, var(--bg3))); }
.cai-preview-media.is-empty .cai-preview-img { opacity: 0; }
.cai-preview-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,6,12,0) 45%, color-mix(in srgb, var(--bg2) 88%, transparent) 99%); }
.cai-preview-glow { position: absolute; inset: -30% -30% auto; height: 60%; background: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); pointer-events: none; }
.cai-preview-badge {
  position: absolute; top: 13px; left: 13px; z-index: 1;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #fff;
  padding: 5px 11px; border-radius: 50px;
  background: rgba(10,8,14,.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
}
.cai-preview-body { padding: 18px 20px 20px; margin-top: -42px; position: relative; z-index: 1; text-align: center; }
.cai-summary-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text); }
.cai-summary-hint { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.cai-picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 14px; }
.cai-picks:empty { display: none; }
.cai-pick {
  font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 50px; padding: 4px 11px;
}
/* ── Floating CTA ── sticks to the viewport bottom inside the scroll area and
   overlaps the last card row (negative top margin) so Next never requires
   scrolling past a tall grid. The container is click-transparent. */
.cai-nav {
  position: sticky; bottom: 20px; z-index: 6;
  display: flex; justify-content: center; align-items: center; gap: 10px;
  margin-top: -26px; pointer-events: none;
}
.cai-nav-next, .cai-nav-back { pointer-events: auto; }
.cai-nav-next {
  display: inline-flex; align-items: center; gap: 9px; padding: 14px 34px;
  border: none; border-radius: 50px; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff;
  font-family: var(--font-sans); font-size: 14.5px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--accent) 75%, transparent), 0 2px 8px rgba(0,0,0,.18);
  transition: transform .22s var(--ease-bounce-soft), box-shadow .22s var(--ease-premium), opacity .2s, filter .2s;
}
.cai-nav-next svg { width: 16px; height: 16px; }
.cai-nav-next:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 34px -8px color-mix(in srgb, var(--accent) 85%, transparent), 0 2px 8px rgba(0,0,0,.2); }
.cai-nav-next:active:not(:disabled) { transform: translateY(0) scale(.98); }
.cai-nav-next:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.3); box-shadow: none; }
.cai-nav-back {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px;
  border-radius: 50px; cursor: pointer;
  background: color-mix(in srgb, var(--bg2) 82%, transparent);
  border: 1px solid var(--border); color: var(--text);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 600;
  box-shadow: var(--shadow-1);
  transition: transform .22s var(--ease-bounce-soft), border-color .2s;
}
.cai-nav-back svg { width: 15px; height: 15px; }
.cai-nav-back:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.cai-nav-next:focus-visible, .cai-nav-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Review ── */
.cai-review { display: flex; flex-direction: column; gap: 10px; }
.cai-review-row {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(180deg, var(--bg2), var(--bg3));
  border: 1px solid var(--border); border-radius: 16px; padding: 15px 18px;
  transition: border-color .2s, box-shadow .2s;
}
.cai-review-row:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); box-shadow: var(--shadow-1); }
.cai-review-label { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; width: 132px; flex-shrink: 0; }
.cai-review-value { font-size: 14.5px; font-weight: 500; color: var(--text); flex: 1; }
.cai-review-edit {
  font-size: 12.5px; font-weight: 600; color: var(--accent); cursor: pointer;
  background: transparent; border: none; font-family: var(--font-sans);
  padding: 6px 11px; border-radius: 9px; transition: background .15s;
}
.cai-review-edit:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* ── Generate ── */
.cai-gen { text-align: center; padding: 34px 0 18px; }
.cai-gen-orb {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 26px;
  background: conic-gradient(from 120deg, var(--accent), var(--violet), var(--accent2), var(--accent));
  box-shadow: 0 0 50px -4px color-mix(in srgb, var(--accent) 62%, transparent);
  animation: cai-pulse 1.6s ease-in-out infinite;
}
@keyframes cai-pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.07); opacity: 1; } }
.cai-gen-stage { font-size: 14px; color: var(--muted); margin-bottom: 20px; min-height: 20px; }
.cai-gen .cai-progress-track { max-width: 380px; margin: 0 auto; height: 7px; border-radius: 50px; overflow: hidden; background: var(--bg3); border: 1px solid var(--border); }

/* ── Coming soon ── */
.cai-soon { text-align: center; padding: 26px 0 14px; max-width: 460px; margin: 0 auto; }
.cai-soon-icon { font-size: 44px; margin-bottom: 16px; }
.cai-soon-title { font-family: var(--font-display); font-size: clamp(20px, 2.3vw, 25px); font-weight: 700; color: var(--text); margin: 0 0 13px; }
.cai-soon-badge {
  display: inline-block; padding: 5px 16px; border-radius: 50px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent); font-size: 12.5px; font-weight: 700; margin-bottom: 16px;
}
.cai-soon-sub { font-size: 14px; color: var(--muted); margin: 0 auto 26px; line-height: 1.65; }

/* ════════ Responsive ════════ */
@media (max-width: 1020px) {
  .cai-studio { grid-template-columns: 1fr; gap: 0; }
  .cai-aside { position: static; margin-top: 30px; }
  .cai-preview { display: grid; grid-template-columns: 132px 1fr; }
  .cai-preview-media { aspect-ratio: auto; grid-row: span 2; }
  .cai-preview-body { margin-top: 0; padding: 18px 20px 20px; text-align: left; align-self: center; }
  .cai-picks { justify-content: flex-start; }
  /* the aside drops below the stage here, so pin the CTA to the viewport */
  .cai-nav { position: fixed; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom)); margin-top: 0; z-index: 12; }
  .cai-scroll { padding-bottom: 90px; }
}
@media (max-width: 760px) {
  .cai-topbar-badge { display: none; }
  .cai-cards { --cai-card-w: 136px; gap: 10px; }
  .cai-cards--wide { --cai-card-w: 168px; }
  .cai-review-label { width: 108px; }
}
@media (max-width: 460px) {
  .cai-style-cards { grid-template-columns: 1fr; }
  .cai-style-card { aspect-ratio: 16 / 9; }
  .cai-cards, .cai-cards--wide { --cai-card-w: calc(50% - 5px); gap: 10px; }
  .cai-preview { grid-template-columns: 104px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cai-gen-orb { animation: none; }
  .cai-custom.shown { animation: none; }
  .cai-step-view, .cai-card, .cai-style-card, .cai-style-media, .cai-step-node, .cai-style-go,
  .cai-card-visual, .cai-card-emoji, .cai-card-video, .cai-chip, .cai-chip-ico,
  .cai-swatch-dot, .cai-swatch-dot svg, .cai-nav-next, .cai-nav-back, .cai-guide-chev { transition: none; }
  .cai-step-view.leaving, .cai-step-view.entering { transform: none; }
}

/* ═══════════════════════════════════════════
   VORSA 2026 POLISH — new components
   ═══════════════════════════════════════════ */

/* SVG icon sizing inside plan benefits (replaced emoji icons) */
.pl-benefit-icon { color: var(--accent); }
.pl-benefit-icon svg { width: 20px; height: 20px; }
/* icon now lives in .pr-plan-head, which owns the spacing — no bottom margin */
.pr-plan-icon { margin-bottom: 0; }
.pr-plan-icon svg { width: 21px; height: 21px; }
.pr-upload-icon { display: flex; justify-content: center; margin-bottom: 10px; }

/* Badges hold an inline SVG now */
.pr-badge { display: inline-flex; align-items: center; gap: 5px; }

/* ── Password visibility toggle ── */
.pass-wrap { position: relative; margin-bottom: 14px; }
.pass-wrap .pr-modal-input { margin-bottom: 0; padding-right: 44px; }
/* Hide the browser's native password reveal/clear control (Edge/IE) — we render our own eye */
.pr-modal-input::-ms-reveal, .pr-modal-input::-ms-clear { display: none; }
.pass-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--muted); cursor: pointer;
  transition: color .18s, background .18s;
}
.pass-toggle:hover { color: var(--text); background: rgba(212,96,122,.08); }
.pass-toggle.active { color: var(--accent); background: rgba(212,96,122,.12); }
.pass-toggle:active { transform: translateY(-50%) scale(.92); }

/* ── Footer info modal ── */
.footer-modal-body {
  font-size: 13.5px; color: var(--muted); line-height: 1.7;
  margin-bottom: 20px; white-space: pre-line;
  max-height: 50vh; overflow-y: auto;
}

/* ── Plan-selected modal summary ── */
.plan-select-summary {
  background: linear-gradient(135deg, rgba(212,96,122,.07), rgba(157,107,212,.04));
  border: 1px solid rgba(212,96,122,.18);
  border-radius: 14px; padding: 18px; margin-bottom: 20px;
}
.plan-select-price { font-size: 24px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.plan-select-note { font-size: 12px; color: var(--muted); }

/* ── Sidebar account block ── */
.sb-account {
  width: 100%; margin-bottom: 6px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.sidebar:hover .sb-account {
  background: var(--surface-sheen), var(--bg3);
  border-color: var(--border);
  box-shadow: var(--shadow-1);
}
.sb-acc-head {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 8px;
  background: transparent; border: none; border-radius: 12px;
  cursor: none; text-align: left;
  transition: background .18s;
}
.sb-acc-head:hover { background: rgba(240,168,187,0.08); }
.sb-acc-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--violet));
  border: 1.5px solid rgba(255,255,255,.25);
  box-shadow: 0 0 12px rgba(240,168,187,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: #fff;
  overflow: hidden;
}
.sb-acc-avatar svg { width: 16px; height: 16px; }
.sb-acc-meta { display: flex; flex-direction: column; min-width: 0; opacity: 0; transition: opacity .2s; }
.sidebar:hover .sb-acc-meta { opacity: 1; }
.sb-acc-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-acc-plan { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* Expanded-only panel: premium CTA + account links. Glides open with a longer,
   eased reveal so the menu never "rips" into view; the small translate adds a
   subtle settle without affecting layout height. */
.sb-acc-panel {
  max-height: 0; opacity: 0; overflow: hidden;
  transform: translateY(-4px);
  transition: max-height .42s var(--ease-premium), opacity .3s ease, transform .42s var(--ease-premium);
}
.sidebar:hover .sb-acc-panel { max-height: 260px; opacity: 1; transform: none; }

/* ── Sidebar Upgrade CTA ──
   Compact, refined account-panel CTA: a single ~36px row that sits flush with
   the credits bar and the account menu items. Dark near-black base with a soft
   rose→violet tint, refined rose border, gentle glow + diagonal shine on hover,
   and a subtle (not loud) "Save 30%" hint on the right. */
.sb-upgrade {
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 11px; margin: 0;
  border: 1px solid rgba(240,168,187,.28); border-radius: 10px;
  background: linear-gradient(135deg, rgba(240,168,187,.13), rgba(157,107,212,.11)), var(--bg3);
  color: var(--text);
  font-family: 'Figtree', sans-serif; font-size: 12px; font-weight: 600;
  cursor: none; white-space: nowrap;
  position: relative; overflow: hidden;
  transition: transform .22s var(--ease-premium), box-shadow .28s var(--ease-premium),
              border-color .28s var(--ease-premium), background .28s var(--ease-premium);
}
.sb-upgrade-ico {
  width: 15px; height: 15px; flex-shrink: 0; color: var(--accent);
  filter: drop-shadow(0 0 5px rgba(240,168,187,.35));
  transition: transform .35s var(--ease-bounce-soft);
}
.sb-upgrade-label { color: var(--text); }
.sb-upgrade-save {
  margin-left: auto; flex-shrink: 0;
  font-size: 9.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--accent); opacity: .7;
}
/* diagonal shine sweep on hover */
.sb-upgrade::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -130%; width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.16), transparent);
  transform: skewX(-20deg); pointer-events: none;
  transition: left .6s var(--ease-premium);
}
.sb-upgrade:hover {
  transform: translateY(-1px);
  border-color: rgba(240,168,187,.52);
  background: linear-gradient(135deg, rgba(240,168,187,.22), rgba(157,107,212,.16)), var(--bg3);
  box-shadow: 0 6px 18px rgba(212,96,122,.20);
}
.sb-upgrade:hover::after { left: 170%; }
.sb-upgrade:hover .sb-upgrade-ico { transform: rotate(-12deg) scale(1.12); }
.sb-upgrade:active { transform: translateY(0) scale(.985); }
.sb-upgrade:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px rgba(240,168,187,.5);
}
/* the logged-in panel has no horizontal padding — inset to line up with the
   credits row above and the menu links below */
.sb-acc-panel .sb-upgrade { margin: 4px 10px 10px; }
.sb-guest-actions .sb-upgrade { margin-top: 4px; }

.sb-acc-links {
  display: flex; flex-direction: column; gap: 1px;
  border-top: 1px solid var(--border);
  padding: 6px 4px 6px;
}
.sb-acc-link {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 7px 8px;
  background: transparent; border: none; border-radius: 9px;
  font-size: 12px; font-weight: 500; color: var(--muted);
  font-family: 'Figtree', sans-serif; text-align: left;
  cursor: none; white-space: nowrap;
  transition: background .15s, color .15s;
}
.sb-acc-link:hover { background: rgba(240,168,187,0.08); color: var(--text); }
.sb-acc-link svg { width: 14px; height: 14px; flex-shrink: 0; }
.sb-acc-link-out:hover { color: #ef4444; background: rgba(239,68,68,.06); }

/* Logo mark used by overlay sidebars (favorites / profile) */
.sb-logo-mark {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: #fff;
}

/* ═══════════════════════════════════════════
   COMPONENT MOTION — VORSA 2026
   ═══════════════════════════════════════════ */

/* ── Premium buttons: shine sweep + press on the main CTAs ── */
.update-plan-btn, .pr-btn-primary, .sb-acc-premium,
.card-btn-primary, .fav-browse-btn, .ch-book-btn {
  position: relative; overflow: hidden;
}
.update-plan-btn::after, .pr-btn-primary::after,
.sb-acc-premium::after, .card-btn-primary::after, .fav-browse-btn::after,
.ch-book-btn::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -140%;
  width: 55%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.30) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left var(--duration-slow) var(--ease-premium);
  pointer-events: none;
}
.update-plan-btn:hover::after, .pr-btn-primary:hover::after,
.sb-acc-premium:hover::after, .card-btn-primary:hover::after, .fav-browse-btn:hover::after,
.ch-book-btn:hover::after { left: 170%; }
.update-plan-btn:active, .pr-btn-primary:active,
.sb-acc-premium:active, .card-btn-primary:active, .fav-browse-btn:active,
.pr-btn-secondary:active, .pr-btn-danger:active, .auth-btn:active { transform: scale(.97); }

/* button icons get a nudge on hover */
.pr-btn-primary svg, .card-btn-primary svg, .ai-chat-send svg {
  transition: transform var(--duration-normal) var(--ease-bounce-soft);
}
.pr-btn-primary:hover svg, .card-btn-primary:hover svg { transform: translateX(2px) scale(1.08); }

/* success pulse fired by JS after save actions */
@keyframes btn-success-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.45); }
  100% { box-shadow: 0 0 0 14px rgba(34,197,94,0); }
}
.btn-success { animation: btn-success-pulse .6s var(--ease-premium); }

/* ── Overlay entrances: content glides up while the page fades ── */
.pr-main, .fav-main {
  transform: translateY(14px) scale(.995);
  transition: transform .45s var(--ease-premium), margin-left .3s cubic-bezier(.25,.46,.45,.94);
}
#profile-page.shown .pr-main, #favorites-page.shown .fav-main { transform: none; }

/* ── PLANS: re-triggered stagger via .motion-in ── */
@keyframes pl-in {
  from { opacity: 0; transform: translateY(22px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes pl-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pl-price-flip {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pl-shine { to { left: 130%; } }
@keyframes ultra-ambient {
  0%, 100% { opacity: .82; }
  50%      { opacity: 1; }
}

#plans-page.motion-in .pl-hero    { animation: pl-in .5s var(--ease-premium) both; }
#plans-page.motion-in .pl-billing { animation: pl-in .5s var(--ease-premium) .08s both; }
#plans-page.motion-in .pl-plan    { animation: pl-in .55s var(--ease-premium) both; }
#plans-page.motion-in .pl-plan:nth-child(1) { animation-delay: .14s; }
#plans-page.motion-in .pl-plan:nth-child(2) { animation-delay: .22s; }
#plans-page.motion-in .pl-plan:nth-child(3) { animation-delay: .30s; }
#plans-page.motion-in .pl-summary { animation: pl-in .55s var(--ease-premium) .34s both; }
#plans-page.motion-in .pl-benefit { animation: pl-in .5s var(--ease-premium) both; }
#plans-page.motion-in .pl-benefit:nth-child(1) { animation-delay: .12s; }
#plans-page.motion-in .pl-benefit:nth-child(2) { animation-delay: .18s; }
#plans-page.motion-in .pl-benefit:nth-child(3) { animation-delay: .24s; }
#plans-page.motion-in .pl-benefit:nth-child(4) { animation-delay: .30s; }
#plans-page.motion-in .pl-benefit:nth-child(5) { animation-delay: .36s; }
#plans-page.motion-in .pl-benefit:nth-child(6) { animation-delay: .42s; }
#plans-page.motion-in .pl-benefit:nth-child(7) { animation-delay: .48s; }

/* price re-fades when the billing cycle flips (fired by JS) */
.pl-price-flip { animation: pl-price-flip .4s var(--ease-premium); }

/* Ultra: a single, slow ambient breath on the selected aura / summary glow */
.pl-plan.tier-ultra.selected .pl-plan-aura,
.pl-summary[data-tier=ultra].shown .pl-sum-glow { animation: ultra-ambient 6s ease-in-out infinite; }

/* benefits: lift + icon glow on hover */
.pl-benefit { position: relative; transition: border-color var(--duration-normal) ease, transform var(--duration-normal) var(--ease-premium), box-shadow var(--duration-normal) var(--ease-premium); }
.pl-benefit:hover { border-color: rgba(212,96,122,.35); transform: translateY(-3px); box-shadow: var(--glow-soft); }
.pl-benefit-icon { transition: transform var(--duration-normal) var(--ease-bounce-soft), box-shadow var(--duration-normal) ease, background var(--duration-normal) ease; }
.pl-benefit:hover .pl-benefit-icon {
  transform: scale(1.08);
  background: rgba(212,96,122,.12);
  box-shadow: 0 0 16px rgba(212,96,122,.25);
}

/* close buttons (X): quarter-turn on hover */
.pl-close svg, .ai-chat-close svg { transition: transform var(--duration-normal) var(--ease-premium); }
.pl-close:hover svg, .ai-chat-close:hover svg { transform: rotate(90deg); }

/* ── PROFILE: banner drift, avatar ring, row slides ── */
.pr-banner { background-size: 160% 160%; animation: banner-drift 16s ease-in-out infinite alternate; }
@keyframes banner-drift {
  from { background-position: 0% 40%; }
  to   { background-position: 100% 60%; }
}
.pr-avatar-wrap::after {
  content: '';
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(212,96,122,.35);
  pointer-events: none;
  animation: avatar-ring 4.5s ease-in-out infinite;
}
@keyframes avatar-ring {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .8;  transform: scale(1.035); }
}
.pr-security-item .pr-sec-left, .pr-notif-item > div:first-child {
  transition: transform var(--duration-fast) var(--ease-premium);
}
.pr-security-item:hover .pr-sec-left, .pr-notif-item:hover > div:first-child { transform: translateX(4px); }
.pr-activity-item { transition: background .15s, transform var(--duration-fast) var(--ease-premium); }
.pr-activity-item:hover { transform: translateX(3px); }

/* ── MODALS: scale + lift + soft blur entrance; error shake ── */
.pr-modal-box {
  transform: scale(.94) translateY(14px);
  filter: blur(5px);
  transition: transform .34s var(--ease-bounce-soft), filter .3s var(--ease-premium);
}
.pr-modal-overlay.open .pr-modal-box { transform: none; filter: none; }
@keyframes auth-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
.pr-modal-overlay.open .pr-modal-box.auth-shake { animation: auth-shake .4s var(--ease-soft-out); }

/* eye toggle: icon swap pop */
@keyframes pass-pop {
  0%   { transform: translateY(-50%) scale(.78); }
  60%  { transform: translateY(-50%) scale(1.12); }
  100% { transform: translateY(-50%) scale(1); }
}
.pass-toggle.pass-pop { animation: pass-pop .3s var(--ease-bounce-soft); }

/* inputs: smooth focus glow */
.pr-modal-input, .pr-input { transition: border-color .22s, box-shadow .25s var(--ease-premium), background-color .3s ease; }

/* ── ASSISTANT: blurred rise on open, icon tilt, message/chip staggers ── */
#ai-chat {
  transform: scale(.86) translateY(16px);
  filter: blur(7px);
  transition: transform .4s var(--ease-bounce-soft), opacity .3s, filter .32s var(--ease-premium);
}
#ai-chat.open { transform: none; filter: none; }
#ai-toggle svg { transition: transform var(--duration-normal) var(--ease-bounce-soft); }
#ai-toggle.active svg { transform: rotate(-12deg) scale(.9); }
#ai-toggle { animation: ai-idle 6s ease-in-out infinite; }
@keyframes ai-idle {
  0%, 100% { box-shadow: 0 4px 20px rgba(200,80,110,0.4), 0 2px 8px rgba(0,0,0,0.1); }
  50%      { box-shadow: 0 6px 26px rgba(200,80,110,0.55), 0 2px 10px rgba(0,0,0,0.12); }
}
@keyframes ai-msg-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.ai-msg { animation: ai-msg-in .35s var(--ease-premium) both; }
#ai-chat.open .ai-qr-chip { animation: ai-msg-in .35s var(--ease-premium) both; }
#ai-chat.open .ai-qr-chip:nth-child(1) { animation-delay: .12s; }
#ai-chat.open .ai-qr-chip:nth-child(2) { animation-delay: .17s; }
#ai-chat.open .ai-qr-chip:nth-child(3) { animation-delay: .22s; }
#ai-chat.open .ai-qr-chip:nth-child(4) { animation-delay: .27s; }
#ai-chat.open .ai-qr-chip:nth-child(5) { animation-delay: .32s; }
#ai-notif.show { animation: notif-pulse 2.6s ease-in-out infinite; }
@keyframes notif-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.25); opacity: .75; }
}

.sb-acc-link svg { transition: transform var(--duration-fast) var(--ease-bounce-soft); }
.sb-acc-link:hover svg { transform: scale(1.12); }
.sb-acc-link { transition: background .15s, color .15s, transform var(--duration-fast) var(--ease-premium); }
.sb-acc-link:hover { transform: translateX(3px); }

/* ── TOASTS: card, icon, progress timer ── */
.vorsa-toast {
  position: relative; overflow: hidden;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
  padding: 13px 18px 15px;
  display: flex; align-items: center; gap: 11px;
  box-shadow: 0 10px 32px rgba(0,0,0,.16);
  min-width: 250px; max-width: 340px;
  transform: translateX(120%); opacity: 0;
  transition: transform .4s var(--ease-bounce-soft), opacity .3s;
  pointer-events: auto;
}
.vorsa-toast.in { transform: translateX(0); opacity: 1; }
.vorsa-toast.out { transform: translateX(120%); opacity: 0; }
.vorsa-toast-icon {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  animation: toast-icon-pop .45s var(--ease-bounce-soft) .15s both;
}
@keyframes toast-icon-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
.vorsa-toast-icon.success { background: rgba(34,197,94,.14);  color: #22c55e; }
.vorsa-toast-icon.error   { background: rgba(239,68,68,.14);  color: #ef4444; }
.vorsa-toast-icon.info    { background: rgba(212,96,122,.14); color: var(--accent); }
.vorsa-toast-msg { font-size: 13px; color: var(--text); font-weight: 500; line-height: 1.45; }
.vorsa-toast-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px;
  transform-origin: left;
  animation: toast-bar 3s linear forwards;
}
.vorsa-toast-bar.success { background: rgba(34,197,94,.55); }
.vorsa-toast-bar.error   { background: rgba(239,68,68,.55); }
.vorsa-toast-bar.info    { background: rgba(212,96,122,.55); }
@keyframes toast-bar {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ── SYSTEM NOTIFICATIONS (reui "alert-1" style) ──
   Dismissible alert callouts stacked top-right — distinct from the transient
   bottom-right toasts. Six variants drive the icon tint + a 3px left accent and
   a whisper of card tint. Spawned via vorsaNotify() in js/components.js. */
.vnote-host {
  position: fixed; top: 76px; right: 24px; z-index: 99995;
  display: flex; flex-direction: column; gap: 12px;
  width: 360px; max-width: calc(100vw - 32px);
  pointer-events: none;
}
.vnote {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 14px; border-radius: 14px;
  border: 1px solid var(--border); border-left: 3px solid var(--vn-color, var(--border-strong));
  background: linear-gradient(0deg, var(--vn-soft, transparent), var(--vn-soft, transparent)), var(--bg2);
  box-shadow: 0 16px 40px rgba(0,0,0,.30), var(--ring-inset);
  color: var(--text); font-family: 'Figtree', sans-serif;
  pointer-events: auto;
  opacity: 0; transform: translateX(18px) scale(.98);
  transition: opacity .3s var(--ease-premium), transform .3s var(--ease-premium);
}
.vnote.in  { opacity: 1; transform: none; }
.vnote.out { opacity: 0; transform: translateX(18px) scale(.98); }
.vnote-ico {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vn-tint, rgba(255,255,255,.07)); color: var(--vn-color, var(--muted));
}
.vnote-ico svg { width: 16px; height: 16px; }
.vnote-body { flex: 1; min-width: 0; padding-top: 1px; }
.vnote-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--text); }
.vnote-msg { font-size: 12.5px; font-weight: 400; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.vnote-x {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; border: none;
  background: transparent; color: var(--muted); cursor: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .15s;
}
.vnote-x:hover { background: rgba(255,255,255,.06); color: var(--text); }
.vnote-x:active { transform: scale(.9); }
.vnote-x svg { width: 14px; height: 14px; }
/* variant accents */
.vnote-default     { --vn-color: var(--muted);  --vn-tint: rgba(255,255,255,.07); --vn-soft: rgba(255,255,255,.02); }
.vnote-primary     { --vn-color: var(--accent); --vn-tint: rgba(240,168,187,.16); --vn-soft: rgba(240,168,187,.05); }
.vnote-success     { --vn-color: #34d399;       --vn-tint: rgba(52,211,153,.16);  --vn-soft: rgba(52,211,153,.05); }
.vnote-destructive { --vn-color: #f87171;       --vn-tint: rgba(248,113,113,.16); --vn-soft: rgba(248,113,113,.05); }
.vnote-info        { --vn-color: #60a5fa;       --vn-tint: rgba(96,165,250,.16);  --vn-soft: rgba(96,165,250,.05); }
.vnote-warning     { --vn-color: #fbbf24;       --vn-tint: rgba(251,191,36,.16);  --vn-soft: rgba(251,191,36,.05); }

/* ── SKELETON / LOADING ── */
.skeleton {
  position: relative; overflow: hidden;
  background: var(--bg3); border-radius: 12px;
}
.skeleton::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform: translateX(-100%);
  animation: skeleton-sheen 1.6s var(--ease-soft-out) infinite;
}
@keyframes skeleton-sheen {
  to { transform: translateX(100%); }
}
.pulse-soft { animation: pulse-soft 1.8s ease-in-out infinite; }
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* ── Reduced motion: stop ambient/infinite component loops ── */
@media (prefers-reduced-motion: reduce) {
  .pl-plan, .pl-summary, .pl-plan-aura, .pl-sum-glow, .pl-sum-cta-shine,
  .pl-plan-select-shine, .pl-plan-select.is-subscribe .pl-plan-select-shine,
  .pr-banner, .pr-avatar-wrap::after,
  #ai-toggle, #ai-notif.show,
  .skeleton::after, .pulse-soft { animation: none; }
  #ai-chat { filter: none; }
  .pr-modal-box { filter: none; }
  #plans-page.motion-in .pl-plan, #plans-page.motion-in .pl-summary,
  #plans-page.motion-in .pl-benefit, #ai-chat.open .ai-qr-chip { opacity: 1; }
  /* details/settings panel: snap, don't animate */
  .ch-pnl-fav-pop svg { animation: none !important; }
  .ch-set-body, .ch-set-chev, .ch-panel, .ch-panel-backdrop, .ch-opt, .ch-switch,
  .ch-switch-knob, .ch-pnl-act, .ch-gallery-frame, .ch-gallery-track,
  .ch-gallery-nav, .ch-gallery-dot { transition: none !important; }
}

/* ═══════════════════════════════════════════
   MOTION PASS — gap fills (section entrances + benefit shimmer)
   ═══════════════════════════════════════════ */

/* Chat overlay: center column + side panels glide up as the page fades in.
   `width` is included so the conversation rail animates when it compresses to
   an avatar column under body.ch-nav-open. */
.ch-main, .ch-sidebar {
  transition: opacity .4s var(--ease-premium), transform .45s var(--ease-premium), width .34s var(--ease-soft-out);
}
#chat-page:not(.shown) .ch-main    { opacity: 0; transform: translateY(16px); }
#chat-page:not(.shown) .ch-sidebar { opacity: 0; transform: translateX(-14px); }
#chat-page.shown .ch-main    { transition-delay: .06s; }
/* Right rail mirrors the entrance — desktop only. Below 1100px it's a drawer
   with its own transform, so this is guarded out to avoid clobbering it. */
@media (min-width: 1100px) {
  .ch-panel { transition: opacity .4s var(--ease-premium), transform .45s var(--ease-premium); }
  #chat-page:not(.shown) .ch-panel { opacity: 0; transform: translateX(14px); }
  #chat-page.shown .ch-panel { transition-delay: .09s; }
}

/* Create AI overlay: inner content rises in on open */
.cai-inner { transition: opacity .42s var(--ease-premium), transform .45s var(--ease-premium); }
#create-ai-page:not(.shown) .cai-inner { opacity: 0; transform: translateY(18px); }

/* Benefit cards: soft radial background shift + border shimmer on hover */
.pl-benefit { position: relative; overflow: hidden; isolation: isolate; }
.pl-benefit::before {
  content: '';
  position: absolute; inset: -40% -10% auto -10%; height: 160%;
  background: radial-gradient(ellipse 60% 70% at 30% 0%, rgba(240,168,187,.10) 0%, transparent 70%);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--duration-normal) var(--ease-premium), transform var(--duration-slow) var(--ease-premium);
  z-index: -1; pointer-events: none;
}
.pl-benefit:hover::before { opacity: 1; transform: translateY(0); }
.pl-benefit::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, transparent 30%, rgba(240,168,187,.5) 50%, rgba(157,107,212,.4) 60%, transparent 75%);
  background-size: 220% 100%; background-position: 140% 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--duration-normal) ease;
  pointer-events: none;
}
.pl-benefit:hover::after { opacity: 1; animation: benefit-shimmer 1.1s var(--ease-premium); }
@keyframes benefit-shimmer {
  from { background-position: 140% 0; }
  to   { background-position: -40% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-main, .ch-sidebar, .cai-inner { opacity: 1 !important; transform: none !important; }
  .pl-benefit::after { animation: none; }
}

/* ═══════════════════════════════════════════
   PROFILE / AUTH / PLANS REDESIGN — VORSA 2026
   ═══════════════════════════════════════════ */

/* ── Visibility toggles (guest vs logged-in) ── */
/* Scoped to #profile-page so this hide (1,1,0) beats same-element display
   rules like .pr-hero-actions/.pr-stats-row (0,1,0); the is-authed/is-guest
   reveals below are (1,2,0)+ and still win. Without this, both the guest and
   logged-in banner CTA rows leaked through at once. */
#profile-page .pr-auth-only, #profile-page .pr-guest-only { display: none; }
#profile-page.is-authed .pr-auth-only { display: block; }
#profile-page.is-guest  .pr-guest-only { display: block; }
#profile-page.is-authed .pr-grid.pr-auth-only { display: grid; }
#profile-page.is-authed .pr-stats-row.pr-auth-only { display: grid; }
#profile-page.is-authed .pr-hero-actions.pr-auth-only { display: flex; }
#profile-page.is-guest  .pr-hero-actions.pr-guest-only { display: flex; }
#profile-page.is-authed .pr-avatar-edit.pr-auth-only { display: flex; }
#profile-page.is-authed .pr-badge.pr-auth-only { display: inline-flex; }

/* ── PROFILE HERO ── */
.pr-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg2);
  box-shadow: var(--shadow-1);
  margin-bottom: 20px;
}
.pr-hero-bg {
  position: absolute; inset: 0; height: 132px;
  background:
    radial-gradient(120% 160% at 12% 0%, rgba(212,96,122,.45) 0%, transparent 55%),
    radial-gradient(120% 160% at 88% 10%, rgba(157,107,212,.40) 0%, transparent 55%),
    linear-gradient(120deg, #8e2f4d 0%, #b0466a 40%, #8a5fd4 100%);
}
.pr-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 38%, var(--bg2) 100%);
}
.pr-hero-inner {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; gap: 20px;
  padding: 70px 28px 24px;
  flex-wrap: wrap;
}
.pr-hero .pr-avatar-wrap { margin-top: 0; flex-shrink: 0; position: relative; }
.pr-hero .pr-avatar-img {
  width: 92px; height: 92px;
  border: 4px solid var(--bg2);
  box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06);
}
.pr-identity { flex: 1; min-width: 180px; padding-bottom: 2px; }
.pr-identity .pr-user-name {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700; letter-spacing: -.01em;
  color: var(--text); margin-bottom: 3px;
}
.pr-identity .pr-user-handle { font-size: 13px; color: var(--muted); }
.pr-hero-actions { display: flex; gap: 10px; align-items: center; }
.pr-hero-premium { display: inline-flex; align-items: center; gap: 7px; }

/* ghost button (used in hero + guest cta) */
.pr-btn-ghost {
  padding: 10px 20px; border-radius: var(--radius-pill);
  background: transparent; color: var(--text);
  border: 1.5px solid var(--border-strong);
  font-size: 13px; font-weight: 600; cursor: none;
  font-family: 'Figtree', sans-serif; transition: all .2s var(--ease-premium);
}
.pr-btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: rgba(240,168,187,.06); transform: translateY(-2px); }
.pr-btn-ghost:active { transform: translateY(0); }
.pr-btn-inline { display: inline-flex; align-items: center; gap: 7px; }

/* badges */
.pr-badge-elite {
  background: linear-gradient(135deg, rgba(168,127,224,.18), rgba(240,168,187,.12));
  border-color: rgba(168,127,224,.5); color: var(--violet);
}
.pr-badge-ultra {
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--tier-ultra-ice) 20%, transparent),
    color-mix(in srgb, var(--tier-ultra) 18%, transparent),
    color-mix(in srgb, var(--tier-premium) 16%, transparent));
  border-color: color-mix(in srgb, var(--tier-ultra) 52%, transparent);
  color: var(--tier-ultra);
}
/* hero banner action: "Manage plan" state for already-subscribed members */
.pr-hero-premium.is-manage {
  background: transparent; color: var(--text);
  border: 1.5px solid var(--border-strong); box-shadow: none;
}
.pr-hero-premium.is-manage:hover { border-color: var(--accent); color: var(--accent); }

/* ── "Upgrade" CTA + 30% OFF promo badge ──
   Shared treatment for every former "Go Premium" button (topbar, sidebar,
   profile hero + guest CTA). A compact rounded pill: the "✦ Upgrade" label
   stacked over a small, tight pink discount pill. Declared after the button
   blocks above so it wins the single-class cascade (compact padding overrides
   their taller base padding). NOTE: data-i18n lives on the inner .upg-label,
   never the <button> — applyTranslations() sets textContent, which would
   otherwise wipe out the .upg-badge sibling. */
.upg-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 16px;          /* compact — overrides the taller base button padding */
  line-height: 1.05;
}
.upg-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.upg-badge {
  display: inline-block;
  padding: 0 7px;
  border-radius: 50px;
  background: #ff2d78;        /* solid hot pink — small and tight, not loud */
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}
/* paid members see "Manage plan" on the hero — no discount to advertise */
.pr-hero-premium.is-manage .upg-badge { display: none; }

/* ── GUEST PERKS TEASER ── */
.pr-guest-perks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; margin-bottom: 18px;
}
.pr-perk {
  background: var(--surface-sheen), var(--bg2);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px; box-shadow: var(--shadow-1);
  transition: transform var(--duration-normal) var(--ease-premium), border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}
.pr-perk:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.pr-perk-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212,96,122,.1); color: var(--accent);
  margin-bottom: 14px;
}
.pr-perk-icon svg { width: 21px; height: 21px; }
.pr-perk-title { font-size: 14.5px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.pr-perk-sub { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.pr-guest-cta {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 22px; margin-bottom: 8px;
  background: radial-gradient(120% 180% at 0% 0%, rgba(212,96,122,.10), transparent 60%), var(--bg2);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}

/* ── STAT ROW ── */
.pr-stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-bottom: 20px;
}
.pr-stat-card {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface-sheen), var(--bg2);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px 18px; box-shadow: var(--shadow-1);
  transition: transform var(--duration-fast) var(--ease-premium), border-color .2s, box-shadow .2s;
}
.pr-stat-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.pr-stat-ic {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212,96,122,.1); color: var(--accent);
}
.pr-stat-ic svg { width: 19px; height: 19px; }
.pr-stat-card .pr-stat-val { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.1; }
.pr-stat-card .pr-stat-label { font-size: 11.5px; color: var(--muted); margin-top: 1px; }

/* ── SUBSCRIPTION CARD ── */
.pr-sub-card { margin-bottom: 20px; }
.pr-plan-status {
  font-size: 12px; color: var(--muted);
  background: var(--bg3); border: 1px solid var(--border);
  padding: 5px 12px; border-radius: var(--radius-pill);
}
/* (per-tier colour now driven by [data-tier] on .pr-plan-card above) */

/* email callout (replaces inline-styled box) */
.pr-callout {
  background: rgba(212,96,122,.05); border: 1px solid rgba(212,96,122,.15);
  border-radius: 13px; padding: 14px 16px; margin-bottom: 16px;
}
.pr-callout-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.pr-callout-text { font-size: 12px; color: var(--muted); line-height: 1.55; }

/* profile section motion */
#profile-page.motion-in .pr-hero,
#profile-page.motion-in .pr-stats-row,
#profile-page.motion-in .pr-sub-card,
#profile-page.motion-in .pr-guest-perks,
#profile-page.motion-in .pr-guest-cta { animation: prFadeUp .5s var(--ease-premium) both; }
#profile-page.motion-in .pr-stats-row { animation-delay: .06s; }
#profile-page.motion-in .pr-sub-card  { animation-delay: .12s; }

/* ── SIDEBAR GUEST / AUTH TOGGLE ── */
.sb-account.is-guest  .sb-auth-only  { display: none; }
.sb-account.is-authed .sb-guest-only { display: none; }
.sb-acc-guest { display: flex; flex-direction: column; align-items: center; }
.sb-guest-avatar { margin: 0 auto; }
.sb-guest-actions {
  display: flex; flex-direction: column; gap: 7px;
  width: 100%; padding: 0 8px 4px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .3s var(--ease-soft-out), opacity .25s, margin-top .25s;
  margin-top: 0;
}
.sidebar:hover .sb-acc-guest .sb-guest-actions { max-height: 180px; opacity: 1; margin-top: 10px; }
.sb-guest-btn {
  width: 100%; padding: 8px 10px; border-radius: 10px;
  font-size: 12px; font-weight: 600; cursor: none; white-space: nowrap;
  font-family: 'Figtree', sans-serif; transition: all .18s var(--ease-premium);
}
.sb-guest-signup {
  border: 1px solid rgba(255,255,255,.14); color: #1d1016;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 3px 12px rgba(212,96,122,.22);
}
.sb-guest-signup:hover { transform: translateY(-1px); filter: brightness(1.05); }
.sb-guest-login {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border-strong);
}
.sb-guest-login:hover { color: var(--text); border-color: var(--accent); }

/* (Premium/Elite tier toggle removed — replaced by the Monthly/Annual billing
   toggle (.pl-billing) and the Premium/Elite/Ultra plan cards (.pl-plan).) */

/* ── AUTH MODAL (Google / email onboarding) ── */
.auth-box { width: 400px; text-align: center; padding-top: 30px; }
.auth-x {
  position: absolute; top: 16px; right: 16px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--muted); cursor: none; transition: all .2s;
}
.auth-x:hover { color: var(--text); border-color: var(--border-strong); }
.auth-x svg { transition: transform var(--duration-normal) var(--ease-premium); }
.auth-x:hover svg { transform: rotate(90deg); }
.auth-brand { display: flex; justify-content: center; margin-bottom: 16px; }
.auth-brand-mark {
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 22px; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--violet));
  box-shadow: 0 8px 22px rgba(212,96,122,.35);
}
.auth-title { text-align: center; font-size: 21px; }
.auth-sub { text-align: center; max-width: 320px; margin: 6px auto 22px; }

.auth-providers { display: flex; flex-direction: column; gap: 11px; }
.pr-modal-overlay.show-email .auth-providers { display: none; }
.auth-email-form { display: none; text-align: left; }
.pr-modal-overlay.show-email .auth-email-form { display: block; animation: pl-in .32s var(--ease-premium); }

.auth-provider {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; height: 50px; border-radius: 13px;
  font-family: 'Figtree', sans-serif; font-size: 14.5px; font-weight: 600;
  cursor: none; transition: all .2s var(--ease-premium);
}
.auth-provider-google { background: #fff; color: #1f2024; border: 1px solid #fff; }
.auth-provider-google:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.auth-provider-email {
  background: var(--bg3); color: var(--text);
  border: 1.5px solid var(--border-strong);
}
.auth-provider-email:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); }
.auth-provider:active { transform: translateY(0); }
.auth-terms { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-top: 6px; }
.auth-switch { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.auth-switch button {
  background: none; border: none; cursor: none;
  color: var(--accent); font-weight: 600; font-size: 12.5px;
  font-family: 'Figtree', sans-serif; padding: 0;
}
.auth-switch button:hover { text-decoration: underline; }
.auth-email-form .pr-modal-btn-row { margin-top: 6px; }

/* ── LOGIN MODAL — premium glass sign-in (21st.dev-inspired) ──────────────────
   Reuses every auth contract (liIdent / liPassword / #liMsg / #liSubmit + the
   authGoogle / authForgotPassword / authSubmit / authSwitch / togglePass
   handlers) but presents the email form directly — no provider step. The glow
   and beam are decorative (pointer-events:none) and clipped by the modal's
   overflow:hidden; both honour prefers-reduced-motion. */
.auth-login { width: 420px; }
.auth-login .auth-sub { margin-bottom: 18px; }

/* Decorative depth — soft rose/violet glow behind the header + a top-edge beam */
.auth-login-glow {
  position: absolute; left: 50%; top: -46px; transform: translateX(-50%);
  width: 340px; height: 210px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--accent) 42%, transparent),
    color-mix(in srgb, var(--violet) 26%, transparent) 55%, transparent 74%);
  filter: blur(30px); opacity: .5;
  animation: auth-glow-pulse 6.5s var(--ease-premium) infinite;
}
.auth-login-beam {
  position: absolute; top: 0; left: -38%; height: 2px; width: 38%; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent), var(--violet), transparent);
  opacity: 0; animation: auth-beam 4.8s var(--ease-premium) 0.6s infinite;
}
@keyframes auth-glow-pulse {
  0%, 100% { opacity: .36; transform: translateX(-50%) scale(.95); }
  50%      { opacity: .58; transform: translateX(-50%) scale(1.05); }
}
@keyframes auth-beam {
  0%   { left: -38%; opacity: 0; }
  18%  { opacity: .75; }
  82%  { opacity: .75; }
  100% { left: 100%; opacity: 0; }
}

/* Divider */
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-divider span { font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }

/* Form — fields with a leading icon; spacing via flex gap */
.auth-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.auth-form .auth-field { margin: 0; }
.auth-form .pr-modal-input { margin-bottom: 0; }
.auth-form .auth-msg { margin: 0; }
.auth-field { position: relative; }
.auth-field-ic {
  position: absolute; left: 13px; top: 22px; transform: translateY(-50%);
  display: flex; color: var(--muted); pointer-events: none;
  transition: color .2s var(--ease-premium);
}
.auth-field:focus-within .auth-field-ic { color: var(--accent); }
.auth-field .auth-input { padding-left: 40px; }

/* Forgot password — right aligned, button reset */
.auth-row-end { display: flex; justify-content: flex-end; }
.auth-login .auth-forgot {
  margin: 0; padding: 0; background: none; border: none;
  font-family: 'Figtree', sans-serif; font-weight: 500; font-size: 12.5px;
}

/* Submit — full-width gradient (text-only so the JS pending-label swap is safe) */
.auth-submit {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 48px; border-radius: 13px; margin-top: 4px;
  font-size: 14.5px; letter-spacing: .01em;
}
.auth-submit:disabled { opacity: .68; transform: none; }

.auth-login .auth-switch { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .auth-login-glow { animation: none; }
  .auth-login-beam { display: none; }
}

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
  .pr-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .pr-hero-inner { padding: 60px 18px 20px; gap: 14px; }
  .pr-hero .pr-avatar-img { width: 76px; height: 76px; }
  .pr-hero-actions { width: 100%; }
  .pr-hero-actions .pr-btn-primary, .pr-hero-actions .pr-btn-ghost { flex: 1; }
  .pl-tier-opt { min-width: 104px; }
}
@media (max-width: 480px) {
  .pr-stats-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pr-stat-card { padding: 13px 14px; }
  .auth-box { width: 100%; }
  .pr-guest-cta { flex-direction: column; }
  .pr-guest-cta button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #profile-page.motion-in .pr-hero,
  #profile-page.motion-in .pr-stats-row,
  #profile-page.motion-in .pr-sub-card,
  #profile-page.motion-in .pr-guest-perks,
  #profile-page.motion-in .pr-guest-cta { animation: none; }
  .pl-tier-thumb { transition: none; }
}

/* ═══════════════════════════════════════════
   ACCOUNT CENTER — profile tabs, plan banner, quick actions   (VORSA 2026)
   ═══════════════════════════════════════════ */

/* ── Tab navigation ── */
.pr-account-center { margin-top: 4px; }
.pr-tabs {
  display: flex; gap: 4px; margin-bottom: 22px; padding: 5px;
  background: var(--surface-sheen), var(--bg2);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-1);
  overflow-x: auto; scrollbar-width: none;
}
.pr-tabs::-webkit-scrollbar { display: none; }
.pr-tab {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 14px; border-radius: var(--radius-pill);
  background: transparent; border: none; color: var(--muted);
  font-family: 'Figtree', sans-serif; font-size: 13px; font-weight: 600;
  white-space: nowrap; cursor: none;
  transition: color .2s var(--ease-premium), background .25s var(--ease-premium), box-shadow .25s var(--ease-premium);
}
.pr-tab svg { width: 15px; height: 15px; opacity: .85; transition: transform .25s var(--ease-bounce-soft); }
.pr-tab:hover { color: var(--text); background: rgba(240,168,187,.07); }
.pr-tab:hover svg { transform: translateY(-1px) scale(1.05); }
.pr-tab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--violet));
  box-shadow: 0 6px 18px rgba(212,96,122,.28);
}
.pr-tab.active svg { opacity: 1; }
.pr-tab:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px rgba(240,168,187,.5); }

/* ── Tab panels: show/hide + soft entrance ── */
.pr-tab-panel { display: none; }
.pr-tab-panel.active { display: block; animation: prTabIn .42s var(--ease-premium) both; }
@keyframes prTabIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Current-plan banner (Overview) ── */
.pr-sub-banner {
  --t: var(--tier-free);
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-sheen), var(--bg2);
  box-shadow: var(--shadow-1);
  padding: 20px 22px; margin-bottom: 18px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  transition: border-color .3s, box-shadow .3s;
}
.pr-sub-banner[data-tier=premium] { --t: var(--tier-premium); }
.pr-sub-banner[data-tier=elite]   { --t: var(--tier-elite); }
.pr-sub-banner[data-tier=ultra]   { --t: var(--tier-ultra); }
.pr-sub-banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(80% 130% at 0% 0%, color-mix(in srgb, var(--t) 16%, transparent), transparent 60%);
}
.pr-sub-banner[data-tier=free]::before { opacity: .25; }
.pr-sub-banner-main { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 260px; position: relative; }
.pr-sub-banner-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0;
  background: color-mix(in srgb, var(--t) 15%, var(--bg3)); color: var(--t);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 28%, transparent);
}
.pr-sub-banner-icon svg { width: 24px; height: 24px; }
.pr-sub-banner-info { min-width: 0; }
.pr-sub-banner-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 3px; }
.pr-sub-banner-name { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--text); }
.pr-sub-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
.pr-sub-status.is-active { color: var(--success); background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.26); }
.pr-sub-status.is-free   { color: var(--muted); background: var(--bg3); border: 1px solid var(--border); }
.pr-sub-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.pr-sub-banner-meta { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.pr-sub-banner-price { display: flex; align-items: baseline; gap: 4px; position: relative; }
.pr-sub-banner-amount { font-family: var(--font-num); font-variant-numeric: tabular-nums lining-nums; font-size: 26px; font-weight: 700; color: var(--text); }
.pr-sub-banner-cycle { font-size: 13px; color: var(--muted); }
.pr-sub-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; position: relative; }
.pr-sub-banner-actions .pr-btn-primary,
.pr-sub-banner-actions .pr-btn-ghost { padding: 9px 18px; font-size: 13px; }

/* ── Quick actions (Overview) ── */
.pr-quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pr-quick-item {
  display: flex; align-items: center; gap: 13px; text-align: left;
  padding: 15px 16px; border-radius: var(--radius-lg);
  background: var(--surface-sheen), var(--bg2);
  border: 1px solid var(--border); color: var(--text); cursor: none;
  transition: transform .25s var(--ease-premium), border-color .25s, box-shadow .25s, background .25s;
}
.pr-quick-item:hover { transform: translateY(-2px); border-color: rgba(212,96,122,.28); box-shadow: var(--glow-soft); }
.pr-quick-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background: rgba(212,96,122,.1); color: var(--accent);
}
.pr-quick-ic svg { width: 19px; height: 19px; }
.pr-quick-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pr-quick-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.pr-quick-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.pr-quick-arrow { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; transition: transform .25s var(--ease-premium); }
.pr-quick-item:hover .pr-quick-arrow { transform: translateX(3px); color: var(--accent); }

/* active-plan status pill in the subscription-card header */
.pr-plan-status.is-active { color: var(--success); border-color: rgba(34,197,94,.28); background: rgba(34,197,94,.08); }

/* ═══════════════════════════════════════════
   MANAGE PLAN — subscription-management modal   (distinct from Upgrade)
   ═══════════════════════════════════════════ */
.mp-overlay { z-index: 6200; }
.mp-panel {
  --t: var(--tier-free); --success: #22c55e; --danger: #ef4444;
  position: relative;
  width: min(640px, calc(100vw - 36px)); max-height: min(88vh, 880px);
  display: flex; flex-direction: column;
  background: var(--surface-sheen), var(--bg2);
  border: 1px solid var(--border-strong); border-radius: 24px;
  box-shadow: var(--shadow-3, 0 30px 80px rgba(0,0,0,.5));
  overflow: hidden;
  transform: translateY(14px) scale(.97); opacity: 0;
  transition: transform .4s var(--ease-premium), opacity .4s var(--ease-premium);
}
.mp-panel[data-tier=premium] { --t: var(--tier-premium); }
.mp-panel[data-tier=elite]   { --t: var(--tier-elite); }
.mp-panel[data-tier=ultra]   { --t: var(--tier-ultra); }
.mp-overlay.open .mp-panel { transform: none; opacity: 1; }
.mp-x {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg3); border: 1px solid var(--border); color: var(--muted);
  cursor: none; transition: background .2s, color .2s, transform .2s;
}
.mp-x:hover { background: var(--accent); color: #fff; transform: rotate(90deg); }

.mp-head {
  position: relative; flex-shrink: 0;
  padding: 26px 28px 18px; border-bottom: 1px solid var(--border);
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--t) 16%, transparent), transparent 58%),
    radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--violet) 12%, transparent), transparent 60%);
}
.mp-eyebrow {
  display: inline-block; margin-bottom: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.mp-title { font-family: var(--font-display); font-size: 23px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.mp-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }

.mp-body { padding: 22px 28px 26px; overflow-y: auto; }

/* current-plan hero */
.mp-hero {
  --t: var(--tier-free);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 20px; border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--t) 30%, var(--border));
  background:
    radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--t) 14%, transparent), transparent 60%),
    var(--bg3);
  margin-bottom: 22px;
}
.mp-hero[data-tier=premium] { --t: var(--tier-premium); }
.mp-hero[data-tier=elite]   { --t: var(--tier-elite); }
.mp-hero[data-tier=ultra]   { --t: var(--tier-ultra); }
.mp-hero-free { --t: var(--tier-free); }
.mp-hero-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 15px; flex-shrink: 0;
  background: color-mix(in srgb, var(--t) 16%, var(--bg2)); color: var(--t);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 30%, transparent);
}
.mp-hero-icon svg { width: 26px; height: 26px; }
.mp-hero-info { flex: 1 1 160px; min-width: 0; }
.mp-hero-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.mp-hero-name { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--text); }
.mp-hero-meta { font-size: 12.5px; color: var(--muted); }
.mp-hero-price { text-align: right; display: flex; align-items: baseline; gap: 4px; }
.mp-hero-amount { font-family: var(--font-num); font-variant-numeric: tabular-nums lining-nums; font-size: 26px; font-weight: 700; color: var(--text); }
.mp-hero-cycle { font-size: 13px; color: var(--muted); }

.mp-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.mp-status.is-active { color: var(--success); background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.26); }
.mp-status.is-free { color: var(--muted); background: var(--bg2); border: 1px solid var(--border); }
.mp-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }

.mp-section { margin-bottom: 22px; }
.mp-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 11px;
}
.mp-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mp-row, .mp-invoice {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--bg3); border: 1px solid var(--border);
}
.mp-row-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: rgba(212,96,122,.1); color: var(--accent);
}
.mp-row-ic svg { width: 17px; height: 17px; }
.mp-row-text { flex: 1; min-width: 0; }
.mp-row-label { font-size: 13px; font-weight: 600; color: var(--text); }
.mp-row-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.mp-row-val { font-size: 13px; font-weight: 600; color: var(--text); text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.mp-muted { color: var(--muted); font-weight: 500; }
.mp-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
}
.mp-pill.is-active { color: var(--success); background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.26); }

.mp-invoices { display: flex; flex-direction: column; gap: 8px; }
.mp-invoice-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.mp-invoice-amt { font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.mp-note { font-size: 11.5px; color: var(--muted); padding: 4px 2px; line-height: 1.5; }

/* free-state upsell teasers (NOT the upgrade selector) */
.mp-upsell { display: flex; flex-direction: column; gap: 8px; }
.mp-upsell-row {
  --t: var(--accent);
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border-radius: var(--radius-md);
  background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  cursor: none; text-align: left;
  transition: transform .2s var(--ease-premium), border-color .2s, box-shadow .2s, background .2s;
}
.mp-upsell-row.tier-premium { --t: var(--tier-premium); }
.mp-upsell-row.tier-elite   { --t: var(--tier-elite); }
.mp-upsell-row.tier-ultra   { --t: var(--tier-ultra); }
.mp-upsell-row:hover { transform: translateX(2px); border-color: color-mix(in srgb, var(--t) 45%, var(--border)); box-shadow: 0 8px 22px color-mix(in srgb, var(--t) 14%, transparent); }
.mp-upsell-ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; background: color-mix(in srgb, var(--t) 14%, transparent); color: var(--t); }
.mp-upsell-ic svg { width: 18px; height: 18px; }
.mp-upsell-name { font-size: 14px; font-weight: 600; flex: 1; }
.mp-upsell-price { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; color: var(--t); }
.mp-upsell-price span { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.mp-upsell-arrow { display: inline-flex; color: var(--muted); transition: transform .2s var(--ease-premium); }
.mp-upsell-arrow svg { width: 16px; height: 16px; }
.mp-upsell-row:hover .mp-upsell-arrow { transform: translateX(3px); color: var(--t); }

/* actions */
.mp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mp-btn {
  flex: 0 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 18px; border-radius: var(--radius-pill);
  background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  font-family: 'Figtree', sans-serif; font-size: 13px; font-weight: 600;
  cursor: none; white-space: nowrap;
  transition: transform .2s var(--ease-premium), border-color .2s, background .2s, box-shadow .2s, color .2s;
}
.mp-btn:hover { transform: translateY(-2px); border-color: rgba(212,96,122,.4); color: var(--text); box-shadow: var(--shadow-1); }
.mp-btn:active { transform: translateY(0) scale(.98); }
.mp-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--violet)); border-color: transparent; color: #fff;
  box-shadow: 0 6px 18px rgba(212,96,122,.3);
}
.mp-btn-primary:hover { box-shadow: 0 10px 26px rgba(212,96,122,.42); color: #fff; }
.mp-btn-wide { flex: 1 1 100%; }
.mp-btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); background: color-mix(in srgb, var(--danger) 7%, transparent); }
.mp-btn-danger:hover { color: #fff; background: var(--danger); border-color: transparent; box-shadow: 0 8px 22px color-mix(in srgb, var(--danger) 35%, transparent); }
.mp-btn-cancel { margin-left: auto; }

/* inline cancel confirmation */
.mp-cancel {
  padding: 16px 18px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--danger) 7%, var(--bg3));
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
  animation: prTabIn .3s var(--ease-premium) both;
}
.mp-cancel-text { font-size: 13px; color: var(--text); line-height: 1.55; margin-bottom: 14px; }
.mp-cancel-btns { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 560px) {
  .pr-quick { grid-template-columns: 1fr; }
  .mp-rows { grid-template-columns: 1fr; }
  .mp-body { padding: 18px 18px 22px; }
  .mp-head { padding: 22px 18px 16px; }
  .mp-hero-price { width: 100%; justify-content: flex-start; text-align: left; }
  .pr-sub-banner-price { width: 100%; }
  .pr-tab span { display: none; }
  .pr-tab { flex: 1 1 0; padding: 10px; }
  .pr-tab.active span { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-tab-panel.active,
  .mp-cancel { animation: none; }
  .mp-panel { transition: opacity .2s; transform: none; }
  .pr-quick-item:hover, .mp-btn:hover, .mp-upsell-row:hover, .pr-quick-item:hover .pr-quick-arrow { transform: none; }
}

/* ═══════════════════════════════════════════
   PROFILE BANNER v2 — integrated subscription status, custom banner,
   glance card, account danger zone, banner modal   (VORSA 2026)
   ═══════════════════════════════════════════ */

/* ── Banner readability scrim + custom-banner support ── */
.pr-hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.16) 0%, transparent 40%);
}
.pr-hero-bg.has-custom + .pr-hero-scrim {
  background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.08) 38%, transparent 64%);
}
.pr-hero-bg.has-custom { background-size: cover; background-position: center; }

/* "Change banner" affordance — top-right over the cover */
.pr-hero-banner-edit {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--radius-pill);
  background: rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: 11.5px; font-weight: 600; cursor: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .2s, transform .2s, border-color .2s;
}
.pr-hero-banner-edit:hover { background: rgba(0,0,0,.52); transform: translateY(-1px); border-color: rgba(255,255,255,.34); }
.pr-hero-banner-edit svg { width: 14px; height: 14px; }
#profile-page.is-authed .pr-hero-banner-edit.pr-auth-only { display: inline-flex; }

/* ── Integrated subscription STATUS (right side of the hero; no price) ── */
.pr-hero-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  flex-shrink: 0; max-width: 100%;
}
#profile-page.is-authed .pr-hero-side.pr-auth-only { display: flex; }
.pr-hero-status { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.pr-hero-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  color: var(--muted); background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.pr-hero-chip.is-active { color: var(--success); background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.26); }
.pr-hero-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.pr-hero-side-actions { display: flex; gap: 10px; align-items: center; }
.pr-hero-manage { padding: 9px 18px; font-size: 13px; }
.pr-hero-signout { padding: 9px 16px; font-size: 13px; }
#profile-page.motion-in .pr-hero-chip { animation: prFadeUp .5s var(--ease-premium) both; animation-delay: .14s; }

/* ── Overview "account at a glance" (read-only) ── */
.pr-glance-edit { padding: 7px 16px; font-size: 12.5px; }
.pr-glance-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 28px; }
.pr-glance-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 2px; border-bottom: 1px solid var(--border); min-width: 0;
}
.pr-glance-k { font-size: 12.5px; color: var(--muted); flex-shrink: 0; }
.pr-glance-v {
  font-size: 13px; font-weight: 600; color: var(--text); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Account-tab danger zone (bottom-right Delete Account) ── */
.pr-account-danger { display: flex; justify-content: flex-end; margin-top: 18px; }
.pr-delete-account { display: inline-flex; align-items: center; gap: 7px; }
.pr-delete-account svg { width: 15px; height: 15px; }

/* ── Change-banner modal ── */
.pr-banner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.pr-banner-swatch {
  height: 56px; border-radius: 12px; border: 2px solid var(--border);
  cursor: none; position: relative; padding: 0;
  transition: transform .18s var(--ease-premium), border-color .2s, box-shadow .2s;
}
.pr-banner-swatch:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.pr-banner-swatch.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px rgba(240,168,187,.5); }
.pr-banner-swatch.selected::after {
  content: '✓'; position: absolute; top: 3px; right: 7px;
  color: #fff; font-size: 13px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.pr-banner-upload {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px; margin-bottom: 18px;
  border-radius: 12px; border: 1.5px dashed var(--border-strong);
  background: var(--bg3); color: var(--text);
  font-size: 13px; font-weight: 600; cursor: none;
  transition: border-color .2s, background .2s, color .2s;
}
.pr-banner-upload:hover { border-color: var(--accent); color: var(--accent); background: rgba(240,168,187,.06); }
.pr-banner-upload svg { width: 16px; height: 16px; }

/* ── Responsive ── */
@media (max-width: 720px) {
  .pr-hero-side { align-items: flex-start; width: 100%; }
  .pr-hero-status { justify-content: flex-start; }
  .pr-hero-side-actions { width: 100%; }
  .pr-hero-manage { flex: 1; }
  .pr-glance-rows { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .pr-banner-grid { grid-template-columns: repeat(2, 1fr); }
  .pr-hero-banner-edit span { display: none; }
  .pr-hero-banner-edit { padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  #profile-page.motion-in .pr-hero-chip { animation: none; }
  .pr-banner-swatch:hover, .pr-hero-banner-edit:hover { transform: none; }
}

/* ═══════════════════════════════════════════
   AGE GATE (18+)
   Static markup in index.html; html.age-lock (set pre-paint by an inline
   <head> script) is the only thing that shows it. ageConfirm() adds .leaving
   for the fade, then drops the class.
   ═══════════════════════════════════════════ */
html.age-lock, html.age-lock body { overflow: hidden; }
.age-gate {
  position: fixed; inset: 0; z-index: 99990; /* above everything except the custom cursor */
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  transition: opacity .35s var(--ease-premium);
}
html.age-lock .age-gate { display: flex; }
.age-gate.leaving { opacity: 0; pointer-events: none; }
.age-gate-card {
  width: min(480px, 100%); text-align: center;
  background: linear-gradient(180deg, var(--bg2), var(--bg));
  border: 1px solid var(--border); border-radius: 26px;
  padding: clamp(30px, 5vw, 46px) clamp(22px, 4.5vw, 42px);
  box-shadow: var(--shadow-2);
}
.age-gate-brand { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 18px; }
.age-gate-logo { width: 44px; height: 44px; border-radius: 12px; }
.age-gate-wordmark { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: .04em; color: var(--text); }
.age-gate-badge {
  display: inline-block; padding: 5px 15px; border-radius: 50px; margin-bottom: 16px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.age-gate-title { font-family: var(--font-display); font-size: clamp(21px, 3vw, 27px); font-weight: 700; letter-spacing: -.015em; color: var(--text); margin: 0 0 12px; }
.age-gate-sub { font-size: 13.5px; line-height: 1.65; color: var(--muted); margin: 0 auto 24px; max-width: 400px; }
.age-gate-actions { display: flex; flex-direction: column; gap: 10px; }
.age-gate-enter {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 30px; border: none; border-radius: 50px; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff;
  font-family: var(--font-sans); font-size: 14.5px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--accent) 75%, transparent);
  transition: transform .22s var(--ease-bounce-soft), box-shadow .22s var(--ease-premium);
}
.age-gate-enter:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -8px color-mix(in srgb, var(--accent) 85%, transparent); }
.age-gate-enter:active { transform: translateY(0) scale(.98); }
.age-gate-leave {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 30px; border-radius: 50px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 600;
  transition: color .18s, border-color .2s;
}
.age-gate-leave:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.age-gate-enter:focus-visible, .age-gate-leave:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.age-gate-note { font-size: 11.5px; color: var(--muted); opacity: .8; margin: 18px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .age-gate, .age-gate-enter, .age-gate-leave { transition: none; }
}