/* ============================================================
   MaxMyListing Portal — Global Stylesheet
   Brand Colors: Gold #ffd84d | Black #101426 | Rose #8c5759
   Blue-Gray #9facb5 | Blue #123ec4
   ============================================================ */

/* Native cross-document view transitions: the browser cross-fades between
   pages on same-origin navigation — no blank/white frame. Makes the guided
   tour (and all in-app navigation) feel like one continuous surface.
   Progressive enhancement: browsers without support just navigate normally. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

:root {
  --gold: #ffd84d;
  --gold-light: #ffe27a;
  --gold-dark: #d9a908;
  --black: #101426;
  --black-mid: #1a2033;
  --black-light: #232941;
  --rose: #8c5759;
  --blue-gray: #9facb5;
  --blue: #123ec4;
  --blue-light: #3a5fd0;
  --white: #ffffff;
  --gray-100: #f5f5f7;
  --gray-200: #e8e8ec;
  --gray-400: #9a9aa8;
  --gray-600: #5a5a6a;
  --success: #2ec97e;
  --warning: #f5a623;
  --danger: #e05252;
  --text-primary: #ffffff;
  --text-secondary: #9facb5;
  --border: rgba(255,255,255,0.08);
  --card-bg: #1a2033;
  --input-bg: #232941;
  --radius-sm: 7px;
  --radius-md: 11px;
  --radius-lg: 16px;
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
  --shadow-gold: 0 0 30px rgba(225,166,107,0.2);
  --transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--black);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
}

/* ---- Typography ---- */
h1, h2, h3, h4, h5 { font-weight: 700; line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }
p { color: var(--text-secondary); }
/* ⚠ Link colour rides a TOKEN, not a theme-scoped selector. Deep gold on white
   measures 2.18:1 — we were painting Terms of Service, Privacy Policy and the
   Approvals "View →" in it. The obvious fix, `.theme-light a`, is (0,1,1) and
   would out-specify every `.btn-*` rule (0,1,0) and repaint the buttons too.
   Overriding the token instead keeps this rule at (0,0,1), so everything that
   beats it today still beats it and only genuinely unstyled links move. */
a { color: var(--link, var(--gold)); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--link-hover, var(--gold-light)); }

.text-gold { color: var(--gold); }
.text-gray { color: var(--text-secondary); }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-center { text-align: center; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* ---- Layout ---- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-sm { max-width: 800px; margin: 0 auto; padding: 0 24px; }
.container-xs { max-width: 600px; margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section-sm { padding: 48px 0; }

/* minmax(0,1fr) + min-width:0, not plain 1fr. A grid item defaults to
   min-width:auto, so a track REFUSES to shrink below its content's intrinsic
   minimum — on a 390px phone that pushed the free-description form to 438px and
   ran the whole page off the right edge. This lets the tracks actually shrink. */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.flex { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-col { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  white-space: nowrap;
  text-decoration: none;
}
.btn-lg { padding: 16px 32px; font-size: 1.0625rem; }
.btn-sm { padding: 8px 16px; font-size: 0.8125rem; }
.btn-primary {
  background: #123ec4;
  color: #fff;
  box-shadow: 0 6px 18px rgba(18,62,196,0.3);
}
.btn-primary:hover {
  background: #0d2f9e;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(18,62,196,0.4);
}
.btn-secondary {
  background: var(--black-light);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  background: var(--black-mid);
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(12,27,46,0.28);
}
.btn-outline {
  background: transparent;
  color: var(--gold);
  border: 1.5px solid var(--gold);
}
.btn-outline:hover {
  background: rgba(225,166,107,0.1);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(12,27,46,0.28);
}
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  background: var(--black-light);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(12,27,46,0.28);
}
.btn-success {
  background: linear-gradient(135deg, #2ec97e, #1ea864);
  color: white;
}
.btn-success:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(12,27,46,0.28);
}
.btn-danger {
  background: linear-gradient(135deg, #e05252, #c03838);
  color: white;
}
.btn-danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(12,27,46,0.28);
}
.btn-blue {
  background: linear-gradient(135deg, var(--blue-light), var(--blue));
  color: white;
}
.btn-block { width: 100%; justify-content: center; }

/* ---- Cards ---- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: var(--transition);
}
.card:hover { border-color: rgba(225,166,107,0.2); }
.card-glow { box-shadow: var(--shadow-gold); }
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* ---- Forms ---- */
.form-group { margin-bottom: 20px; }
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.form-control {
  width: 100%;
  background: var(--input-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 12px 16px;
  font-size: 0.9375rem;
  transition: var(--transition);
  font-family: inherit;
  resize: vertical;
}
.form-control:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(225,166,107,0.15);
}
.form-control::placeholder { color: var(--gray-400); }
.form-control:disabled { opacity: 0.5; cursor: not-allowed; }
.form-control.input-error { border-color: #b4231f; box-shadow: 0 0 0 3px rgba(180,35,31,0.14); }
textarea.form-control { min-height: 100px; }

.form-hint {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: 6px;
}

/* Radio / Checkbox */
.radio-group, .checkbox-group { display: flex; gap: 12px; flex-wrap: wrap; }
.radio-option, .check-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 10px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  transition: var(--transition);
  font-size: 0.9rem;
}
/* Hover is a hint, selection is a state — keep them visually distinct, and
   only show hover on devices that actually hover (touch "sticky hover" made
   the last-tapped chip look permanently selected). */
@media (hover: hover) { .radio-option:hover, .check-option:hover { border-color: #9fb3e8; } }
.radio-option.active, .check-option.active {
  border-color: #123ec4;
  background: #eef3ff;
  color: #123ec4;
  font-weight: 600;
}
.radio-option input, .check-option input { display: none; }

/* Upload Zone */
.upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  background: rgba(255,255,255,0.02);
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--gold);
  background: rgba(225,166,107,0.05);
}
.upload-zone .upload-icon { font-size: 2.5rem; margin-bottom: 12px; }
.upload-zone p { color: var(--text-secondary); font-size: 0.9rem; }
.upload-zone span { color: var(--gold); font-weight: 600; }

/* ---- Navigation ---- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(24, 21, 25, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--white);
  text-decoration: none;
}
.nav-logo .logo-badge {
  background: #ffd84d;
  color: #101426;
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
}
.nav-links a:hover { color: var(--white); }
.nav-actions { display: flex; align-items: center; gap: 12px; }

/* Dashboard Sidebar */
.dashboard-layout {
  display: flex;
  min-height: 100vh;
  padding-top: 64px;
}
.sidebar {
  width: 240px;
  background: var(--black-mid);
  border-right: 1px solid var(--border);
  padding: 24px 0;
  position: fixed;
  top: 64px;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  z-index: 90;
  display: flex;
  flex-direction: column;
}
.sidebar-section { padding: 0 16px; margin-bottom: 8px; }
.sidebar-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-400);
  padding: 0 12px;
  margin-bottom: 6px;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  transition: var(--transition);
  cursor: pointer;
  text-decoration: none;
}
.sidebar-link:hover { background: var(--black-light); color: var(--white); }
.sidebar-link.active {
  background: rgba(225,166,107,0.12);
  color: var(--gold);
}
.sidebar-link .icon { font-size: 1.1rem; width: 20px; }
.sidebar-link .badge {
  margin-left: auto;
  background: var(--rose);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
}
/* Credit foot — pinned to the bottom of the sidebar on every page */
.sidebar-foot { margin: auto 16px 8px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--black-light); }
.sidebar-foot-plan { font: 800 0.82rem 'Sora', sans-serif; color: var(--text-primary); }
.sidebar-foot-credits { font-size: 0.76rem; color: var(--text-secondary); margin-top: 2px; }
.sidebar-foot-credits span { font-weight: 800; color: var(--gold); }
.sidebar-foot-add { display: inline-block; margin-top: 9px; font: 700 0.74rem 'Sora', sans-serif; color: var(--gold); border: 1px solid rgba(184,144,47,0.4); border-radius: 8px; padding: 5px 10px; text-decoration: none; }
.sidebar-foot-add:hover { background: rgba(184,144,47,0.12); }
.theme-light .sidebar-foot { background: #f4f4f0; border-color: var(--border); }
.theme-light .sidebar-foot-plan { color: #101426; }
.theme-light .sidebar-foot-credits { color: #4a4f63; }
.theme-light .sidebar-foot-credits span { color: var(--gold-dark); }
.theme-light .sidebar-foot-add { color: var(--gold-dark); }

.main-content {
  flex: 1;
  margin-left: 240px;
  padding: 32px;
  min-height: calc(100vh - 64px);
}
/* Continuity: on wide screens, content sits in one comfortable centered
   column instead of full-bleed "tubes" stretching edge to edge. Every child
   is capped the same way, so all sections share one visual spine. */
.main-content > * { max-width: 1120px; margin-left: auto; margin-right: auto; }

/* Mobile menu button + drawer backdrop (shown only on small screens via the
   responsive block below; injected by app.js).

   ⚠ THIS BUTTON IS FIXED TO THE VIEWPORT, NOT PLACED IN THE NAV — and it has to
   stay that way. It used to be injected into `.nav-inner`, inside the top bar
   that `body:has(aside.sidebar) > nav.nav { display:none }` hides on every page
   that has a sidebar, which is every portal page. Result: computed
   display:inline-flex, measured rect 0×0, and no way whatsoever to open the
   sidebar on a phone. The whole portal — Photos, Website, Social, Seller
   Report, Billing, Settings — was unreachable below 1024px. Never put it back
   inside a container that another rule can hide. */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 9px;
  left: 12px;
  z-index: 210;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1.5px solid #e2e0d6;
  border-radius: 12px;
  font-size: 1.45rem;
  line-height: 1;
  color: #101426;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 10px rgba(16,20,38,0.10);
}
.sidebar-toggle:hover { border-color: #101426; }
.sidebar-backdrop { display: none; }

/* ---- Stat Cards ---- */
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.stat-card.gold::before { background: linear-gradient(90deg, var(--gold), var(--gold-dark)); }
.stat-card.blue::before { background: linear-gradient(90deg, var(--blue), var(--blue-light)); }
.stat-card.rose::before { background: linear-gradient(90deg, var(--rose), #b06870); }
.stat-card.success::before { background: linear-gradient(90deg, var(--success), #1ea864); }
.stat-value { font-size: 2rem; font-weight: 800; color: var(--white); line-height: 1; }
.stat-label { font-size: 0.8125rem; color: var(--text-secondary); margin-top: 6px; }
.stat-change { font-size: 0.8125rem; font-weight: 600; margin-top: 8px; }
.stat-change.up { color: var(--success); }
.stat-change.down { color: var(--danger); }
.stat-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  opacity: 0.2;
}

/* ---- Credit Meter ---- */
.credit-meter {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.credit-meter-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(225,166,107,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.credit-display {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.credit-count { font-size: 3.5rem; font-weight: 800; color: var(--gold); line-height: 1; }
.credit-total { font-size: 1.5rem; color: var(--text-secondary); }
.credit-bar {
  width: 100%;
  height: 8px;
  background: var(--black-light);
  border-radius: 100px;
  margin-top: 16px;
  overflow: hidden;
}
.credit-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  border-radius: 100px;
  transition: width 1s ease;
}
.credit-coins {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.credit-coin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 800;
  transition: var(--transition);
}
.credit-coin.used {
  background: var(--black-light);
  border: 1.5px solid var(--border);
  color: var(--gray-400);
}
.credit-coin.available {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--black);
  box-shadow: 0 2px 8px rgba(225,166,107,0.4);
}
.credit-coin.available:hover { transform: scale(1.15) rotate(5deg); }

/* ---- Listing Cards ---- */
.listing-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
}
.listing-card:hover {
  border-color: rgba(225,166,107,0.3);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.listing-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: var(--black-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.listing-img.placeholder { background: linear-gradient(135deg, #2a2330, #1e1a22); }
.listing-body { padding: 18px; }
.listing-address { font-weight: 700; font-size: 0.9375rem; margin-bottom: 4px; }
.listing-city { font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 12px; }
.listing-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.listing-stat { text-align: center; }
.listing-stat-val { font-size: 1.1rem; font-weight: 700; color: var(--white); }
.listing-stat-lbl { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.listing-actions { display: flex; gap: 8px; }
.listing-actions .btn { flex: 1; }

/* Status Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* #2ec97e on its own 15% tint measured 2.15:1. Same hue, readable — the badge
   still reads green, it just can also be read. */
.badge-live { background: rgba(46,201,126,0.15); color: var(--success); }
.theme-light .badge-live { background: #e9f6ee; color: #1f6a42; }   /* 5.20:1 */
.badge-pending { background: rgba(245,166,35,0.15); color: var(--warning); }
.badge-coming { background: rgba(36,101,201,0.15); color: var(--blue-light); }
.badge-done { background: rgba(156,172,181,0.15); color: var(--blue-gray); }

/* ---- Progress Steps ---- */
.steps-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  padding: 0 16px;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  border: 2px solid var(--border);
  background: var(--card-bg);
  color: var(--gray-400);
  transition: var(--transition);
  z-index: 1;
}
.step.active .step-num {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
  box-shadow: 0 0 16px rgba(225,166,107,0.4);
}
.step.done .step-num {
  background: var(--success);
  border-color: var(--success);
  color: white;
}
.step-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-400);
  margin-top: 6px;
  white-space: nowrap;
}
.step.active .step-label { color: var(--gold); font-weight: 600; }
.step.done .step-label { color: var(--success); }
.step-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 8px;
  margin-bottom: 20px;
  transition: var(--transition);
}
.step-line.done { background: var(--success); }

/* ---- Post Approval Cards ---- */
.post-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  animation: fadeIn 0.3s ease;
}
.post-card.approving {
  animation: slideOut 0.5s ease forwards;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes slideOut { to { opacity: 0; transform: scale(0.9); max-height: 0; padding: 0; } }
.post-card-header {
  padding: 14px 18px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.post-platform {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.platform-dot { width: 8px; height: 8px; border-radius: 50%; }
.platform-dot.instagram { background: #e1306c; }
.platform-dot.facebook { background: #1877f2; }
.platform-dot.linkedin { background: #0077b5; }
.platform-dot.twitter { background: #1da1f2; }
.post-card-body { padding: 18px; }
.post-caption {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 14px;
  min-height: 80px;
  white-space: pre-wrap;
}
.post-caption[contenteditable="true"] { cursor: text; }
.post-caption[contenteditable="true"]:focus {
  border-color: var(--gold);
  outline: none;
}
.post-media-thumb {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  background: var(--black-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--text-secondary);
}
.post-schedule { font-size: 0.8125rem; color: var(--text-secondary); }
.post-actions { display: flex; gap: 8px; margin-top: 14px; }
.post-actions .btn { flex: 1; padding: 10px; font-size: 0.8125rem; }

/* ---- Stats / Charts ---- */
.mini-chart { display: flex; align-items: flex-end; gap: 4px; height: 50px; }
.mini-bar {
  flex: 1;
  background: linear-gradient(0deg, var(--gold-dark), var(--gold));
  border-radius: 4px 4px 0 0;
  opacity: 0.7;
  transition: var(--transition);
  min-width: 8px;
}
.mini-bar:hover { opacity: 1; }

/* ---- Launch Button ---- */
.launch-btn {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--black);
  font-size: 1.125rem;
  font-weight: 800;
  padding: 18px 40px;
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(225,166,107,0.35);
  position: relative;
  overflow: hidden;
}
.launch-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(225,166,107,0.5);
}
.launch-btn:active { transform: scale(0.98); }
.launch-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
  opacity: 0;
  transition: var(--transition);
}
.launch-btn:hover::after { opacity: 1; }

/* Launch celebration */
.celebrate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.celebrate-overlay.show { opacity: 1; pointer-events: all; }
.celebrate-card {
  background: var(--card-bg);
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 48px;
  text-align: center;
  max-width: 440px;
  box-shadow: var(--shadow-gold);
  animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.celebrate-emoji { font-size: 4rem; margin-bottom: 16px; display: block; animation: bounce 0.6s ease infinite alternate; }
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-10px); } }

/* ---- Tables ---- */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: 14px 16px;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.data-table tr:hover td { background: rgba(255,255,255,0.02); }

/* ---- Alert / Notice ---- */
.alert {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
}
.alert-info { background: rgba(36,101,201,0.12); border-left: 3px solid var(--blue); color: #93b8f5; }
.alert-warning { background: rgba(245,166,35,0.12); border-left: 3px solid var(--warning); color: #f5c86c; }
.alert-success { background: rgba(46,201,126,0.12); border-left: 3px solid var(--success); color: #7ee8b3; }
.alert-gold { background: rgba(225,166,107,0.1); border-left: 3px solid var(--gold); color: var(--gold-light); }

/* ---- Video embed ---- */
.video-callout {
  background: var(--black-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: var(--transition);
}
.video-callout:hover { border-color: var(--gold); background: rgba(225,166,107,0.05); }
.video-play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  color: var(--black);
}

/* ---- Tabs ---- */
.tabs { display: flex; gap: 4px; background: var(--black-light); border-radius: var(--radius-md); padding: 4px; margin-bottom: 24px; }
.tab-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}
.tab-btn.active {
  background: var(--card-bg);
  color: var(--gold);
  box-shadow: var(--shadow);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---- Page Header ---- */
.page-header { margin-bottom: 32px; }
.page-title { font-size: 1.75rem; font-weight: 800; }
.page-subtitle { color: var(--text-secondary); margin-top: 4px; }
.page-header-inner { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; }

/* ---- Divider ---- */
.divider { height: 1px; background: var(--border); margin: 24px 0; }

/* ---- Hero Section (Landing) ---- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: 64px;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(225,166,107,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 20% 70%, rgba(36,101,201,0.06) 0%, transparent 50%),
    var(--black);
}
.hero-content { position: relative; z-index: 1; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(225,166,107,0.1);
  border: 1px solid rgba(225,166,107,0.2);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 24px;
}
.hero h1 { margin-bottom: 20px; }
.hero h1 .highlight {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero p { font-size: 1.125rem; margin-bottom: 32px; max-width: 560px; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* Dashboard preview floating card */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}
.hero-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow);
  animation: float 4s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Features */
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  margin-bottom: 16px;
  background: rgba(225,166,107,0.1);
}
.feature-icon.blue { background: rgba(36,101,201,0.12); }
.feature-icon.rose { background: rgba(140,87,89,0.15); }
.feature-icon.success { background: rgba(46,201,126,0.12); }

/* Pricing */
.pricing-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  transition: var(--transition);
}
.pricing-card.featured {
  border-color: var(--gold);
  position: relative;
  box-shadow: var(--shadow-gold);
}
.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--black);
  padding: 4px 16px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}
.price-amount { font-size: 2.5rem; font-weight: 800; color: var(--white); line-height: 1; }
.price-period { color: var(--text-secondary); font-size: 0.875rem; }
.price-features { list-style: none; text-align: left; margin: 24px 0; }
.price-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.price-features li::before { content: '✓'; color: var(--success); font-weight: 700; flex-shrink: 0; }

/* Footer */
.footer {
  background: var(--black-mid);
  border-top: 1px solid var(--border);
  padding: 48px 0 24px;
}
.footer-logo { margin-bottom: 12px; }
.footer-desc { font-size: 0.875rem; color: var(--text-secondary); max-width: 280px; }
.footer-heading { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); margin-bottom: 14px; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: var(--text-secondary); font-size: 0.875rem; }
.footer-links a:hover { color: var(--gold); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; margin-top: 48px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer-bottom p { font-size: 0.8125rem; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--black-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-600); }

/* ---- Animations ---- */
.fade-in { animation: fadeIn 0.4s ease; }
.pulse { animation: pulse 2s ease infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  /* Off-canvas drawer: sidebar slides in from the left when the ☰ button
     (injected by app.js) is tapped; a tap-anywhere backdrop closes it. */
  .dashboard-layout { display: block; }
  .sidebar {
    width: 270px;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    box-shadow: 2px 0 28px rgba(0, 0, 0, 0.28);
    z-index: 200;
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  /* The drawer opens over the whole viewport now — the 64px inset was leaving a
     live strip of page above it, and on a sidebar page there is no top bar
     occupying that strip anyway. */
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
    z-index: 150;
  }
  body.sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; }
  .sidebar-toggle { display: inline-flex; }
  .main-content { margin-left: 0; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: minmax(0, 1fr); }
  /* .btn is white-space:nowrap so labels stay on one line — right on desktop,
     but a long CTA ("Open my free account & take the tour →") then can't fit a
     phone and pushes past the edge. On small screens let it wrap and center. */
  .btn { white-space: normal; text-align: center; }
  .btn-lg { max-width: 100%; }
  .nav-links { display: none; }
  .hero { text-align: center; }
  .hero p { margin: 0 auto 32px; }
  .hero-cta { justify-content: center; }
  .hero-visual { display: none; }
  .main-content { padding: 20px 16px; }
  .steps-bar { overflow-x: auto; padding-bottom: 8px; }
  .data-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .page-header-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
}
/* Phone-width nav: with .nav-links hidden, logo + Sign In + CTA still added up
   to ~460px on a 390px phone, so the whole page side-scrolled. Tighten the bar
   and clip residual bleed at the root (clip, not hidden — hidden would break
   sticky/fixed chrome in some browsers). */
html, body { overflow-x: hidden; overflow-x: clip; }
@media (max-width: 560px) {
  .nav { padding: 0 14px; }
  .nav-logo { font-size: 1rem; gap: 7px; }
  .nav-logo .logo-badge { padding: 3px 8px; font-size: 0.78rem; }
  .nav-actions { gap: 8px; }
  .nav-actions .btn { font-size: 0.78rem; padding: 9px 12px; white-space: nowrap; }
}
@media (max-width: 400px) {
  /* The sign-up page links back to sign-in, so the CTA keeps both paths. */
  .nav-actions .btn-ghost { display: none; }
}

/* ---- Deliverable marketing asset modal ---- */
.deliverable-asset-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.78);
  padding: 24px;
}
.deliverable-asset-dialog {
  width: min(1040px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: linear-gradient(145deg, rgba(23,23,26,.98), rgba(9,10,14,.98));
  border: 1px solid rgba(225,166,107,.24);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 28px 100px rgba(0,0,0,.55);
}
.deliverable-asset-header,
.deliverable-asset-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.deliverable-asset-header h2 { margin: 0; font-size: 1.6rem; }
.deliverable-asset-header p { color: var(--text-secondary); margin-top: 6px; }
.deliverable-asset-actions { justify-content: flex-start; align-items: center; margin: 18px 0; }
.asset-preview {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at top left, rgba(225,166,107,.18), transparent 36%), var(--black-mid);
  padding: 22px;
  margin-bottom: 18px;
}
.asset-kicker {
  color: var(--gold);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.deliverable-source-copy[contenteditable="true"] {
  outline: 2px solid rgba(225,166,107,.5);
  background: rgba(225,166,107,.08);
}
@media (max-width: 768px) {
  .deliverable-asset-modal { padding: 12px; }
  .deliverable-asset-dialog { padding: 16px; }
}

/* ---- Homepage MAX Description Funnel ---- */
.home-hero { min-height: min(760px, 88vh); }
.homepage-description-funnel {
  position: relative;
  margin-top: -28px;
  background: linear-gradient(180deg, rgba(24,21,25,0), var(--black-mid) 34%, var(--black-mid));
  border-top: 1px solid rgba(225,166,107,0.08);
  border-bottom: 1px solid var(--border);
  z-index: 2;
}
.funnel-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: 28px;
  align-items: center;
  background:
    radial-gradient(circle at top right, rgba(225,166,107,0.16), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid rgba(225,166,107,0.18);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow);
}
.funnel-copy h2 { margin-bottom: 12px; }
.funnel-copy p { max-width: 680px; }
.funnel-card {
  background: rgba(24,21,25,0.86);
  border: 1px solid rgba(225,166,107,0.24);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.28);
}
.funnel-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.funnel-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  background: rgba(255,255,255,0.03);
}
.funnel-step span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--black-light);
  color: var(--gold);
  font-weight: 800;
}
.funnel-step.active {
  border-color: rgba(225,166,107,0.42);
  background: rgba(225,166,107,0.1);
  color: var(--gold-light);
}
.funnel-step.active span {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--black);
}
.funnel-flow-list {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
.funnel-flow-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
  color: var(--text-secondary);
}
.funnel-flow-item span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(225,166,107,0.12);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 800;
  font-size: 0.8125rem;
}
.funnel-flow-item.active {
  border-color: rgba(225,166,107,0.35);
  background: rgba(225,166,107,0.08);
  color: var(--gold-light);
}
.funnel-flow-item strong { color: var(--text-primary); display: block; margin-bottom: 2px; }
@media (max-width: 900px) {
  .home-hero { min-height: auto; }
  .homepage-description-funnel { margin-top: 0; }
  .funnel-shell { grid-template-columns: 1fr; }
  .funnel-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .funnel-shell, .funnel-card { padding: 18px; }
  .funnel-steps { grid-template-columns: 1fr; }
}

/* ---- MAX Description Formula Receipts ---- */
.max-analysis-panel {
  border: 1px solid rgba(225,166,107,0.28);
  border-radius: var(--radius-md);
  padding: 16px;
  background: linear-gradient(135deg, rgba(225,166,107,0.10), rgba(255,255,255,0.035));
}
.max-analysis-title {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 12px;
}
.max-analysis-steps {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.max-analysis-steps li {
  position: relative;
  padding: 10px 12px 10px 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: rgba(255,255,255,0.03);
  font-size: .9rem;
}
.max-analysis-steps li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  border: 2px solid rgba(225,166,107,0.36);
}
.max-analysis-steps li.active {
  color: var(--gold-light);
  border-color: rgba(225,166,107,0.5);
  background: rgba(225,166,107,0.11);
}
.max-analysis-steps li.active::before {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(225,166,107,0.13);
}
.max-analysis-steps li.complete {
  color: var(--text-primary);
  border-color: rgba(93,192,132,0.38);
}
.max-analysis-steps li.complete::before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(93,192,132,0.72);
  background: rgba(93,192,132,0.22);
  color: #8ef0b1;
  font-size: .68rem;
  font-weight: 900;
}
.max-receipt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.max-receipt-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: rgba(255,255,255,0.035);
}
.max-receipt-card strong {
  display: block;
  color: var(--gold-light);
  margin-bottom: 8px;
}
.max-receipt-card ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: .86rem;
}
.max-receipt-card li + li { margin-top: 5px; }
@media (max-width: 760px) {
  .max-receipt-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   LIGHT THEME — applies when <body class="theme-light">
   Used on all portal pages (dashboard, submit, approve, etc.)
   and the public homepage (Direction 2).
   ============================================================ */

.theme-light {
  background: #f4f4f0;
  color: #101426;

  /* Token overrides — aligned to the marketing site + dashboard palette
     (cream background, deep gold, navy ink). */
  --gold:        #d9a908;
  --gold-light:  #d9a908;
  --gold-dark:   #8a6a08;
  /* TEXT gold, separate from the decorative gold above. --gold stays bright
     because it paints rails, dots, borders and progress fills where brightness
     is the point; a link painted in it is 2.18:1. 5.42:1 on white. */
  --link:        #8a6a08;
  --link-hover:  #6d5306;
  --black:        #ffffff;
  --black-mid:    #f4f4f0;
  --black-light:  #f1f1ec;
  --card-bg:      #ffffff;
  --input-bg:     #ffffff;
  --text-primary: #101426;
  --text-secondary: #4a4f63;
  --border:       #e8e6df;
  --shadow:       0 12px 32px rgba(16,20,38,0.05);
  --shadow-gold:  0 0 30px rgba(184,144,47,0.16);
  --accent:       #123ec4; /* per-zone accent, overridden below */
}

/* ── Per-zone accent ─────────────────────────────────────────
   Base palette stays cream/navy/gold everywhere; each zone gets a small
   accent so the experience signals what kind of page you're on. */
.theme-light[data-zone="new"]          { --accent: #2f8f5b; } /* New Listing — growth */
.theme-light[data-zone="approvals"]    { --accent: #c98a1e; } /* Approvals — a decision */
.theme-light[data-zone="descriptions"] { --accent: #b4703a; } /* Descriptions — content */
.theme-light[data-zone="nitro"]        { --accent: #3a5a78; } /* Nitro MLS — infrastructure */
.theme-light[data-zone="billing"]      { --accent: #2f6f9f; } /* Billing — trust */
.theme-light[data-zone="settings"]     { --accent: #4a4f63; } /* Settings — neutral */
/* Accent application — subtle: a short underline under the page title and the
   left rail of the page's lead banner. */
.theme-light .page-title { position: relative; padding-bottom: 12px; }
.theme-light .page-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px; border-radius: 3px; background: var(--accent); }
/* nav stays brand-gold for consistency; the zone accent lives in the content */

/* ── Nav ─────────────────────────────────────────────────── */
.theme-light .nav {
  background: rgba(255,255,255,0.96);
  border-bottom-color: rgba(0,0,0,0.08);
}
.theme-light .nav-logo { color: #101426; }
.theme-light .nav-links a { color: #4a4f63; }
.theme-light .nav-links a:hover { color: #101426; }
.theme-light .btn-ghost {
  border: 1.5px solid rgba(0,0,0,0.14);
  color: #101426;
  background: transparent;
}
.theme-light .btn-ghost:hover { background: rgba(0,0,0,0.05); color: #101426; }
.theme-light .btn-outline {
  border: 1.5px solid rgba(0,0,0,0.16);
  color: #101426;
  background: transparent;
}
.theme-light .btn-outline:hover { background: rgba(0,0,0,0.04); }
.theme-light .btn-secondary {
  background: #e8e8ee; color: #101426;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.theme-light .sidebar {
  background: #ffffff;
  border-right-color: rgba(0,0,0,0.08);
}
.theme-light .sidebar-link { color: #4a4f63; }
.theme-light .sidebar-link:hover { background: #f3f4f8; color: #101426; }
.theme-light .sidebar-link.active { background: #eef3ff; color: #123ec4; box-shadow: inset 3px 0 0 #123ec4; }
/* Sidebar 4a (design handoff): each deliverable icon sits in a soft 23px chip. */
.theme-light .sidebar-link .icon { width: 23px; height: 23px; border-radius: 7px; background: #f1f2f6; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.theme-light .sidebar-link.active .icon { background: #dbe6ff; }

.theme-light .sidebar .badge { background: #123ec4; color: #fff; }

/* ── Typography ──────────────────────────────────────────── */
.theme-light h1,
.theme-light h2,
.theme-light h3,
.theme-light h4,
.theme-light h5 { color: #101426; }
.theme-light p { color: #4a4f63; }

/* ⚠ SPECIFICITY TRAP — READ BEFORE ADDING A DARK BAND.
   The rule above is (0,1,1). Every bare class on a <p> is (0,1,0), so it LOSES,
   and a dark band's body copy gets silently repainted #4a4f63 on navy = 2.25:1.
   That is not a theoretical risk: it ate the one sentence on each studio page
   that says what to do next — "tap at least 3 photos, in the order you want
   them", Maxim's flagged count, Massimo's entire introduction, and the whole
   opening paragraph of the Video hub. Invisible, on five pages, for months.
   Anything painted on a dark ground has to out-specify the theme rule.
   (The `[data-theme]:not(...)` block further down does the same job for the
   dark/mono/holiday skins; this one covers the DEFAULT light theme.) */
.theme-light .psa-line,
.theme-light .psa-dark p,
.theme-light .mml-intro p,
.theme-light .mml-intro-tx p,
.theme-light .mml-intro-main p { color: #cfd6e6; }              /* 11.36:1 on #101426 */
.theme-light .psa-dark .psa-note { color: #b8c0d4; }            /* 8.31:1 */
/* Same trap, headings arm: `.theme-light h1` is (0,1,1) and would paint the
   studio header's page title near-black on navy. */
.theme-light .psa-top .psa-title { color: #ffffff; }
.theme-light .psa-top .psa-title span { color: #aab3c9; }       /* 8.09:1 */

.theme-light .page-title { color: #101426; }
.theme-light .page-subtitle { color: #4a4f63; }
.theme-light strong { color: #101426; }

/* ── Cards ───────────────────────────────────────────────── */
.theme-light .card {
  background: #ffffff;
  border-color: rgba(16,24,40,0.07);
  box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 10px 28px -12px rgba(16,24,40,0.14);
  transition: box-shadow 0.25s cubic-bezier(0.4,0,0.2,1), border-color 0.25s cubic-bezier(0.4,0,0.2,1), transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.theme-light .card:hover {
  border-color: rgba(184,144,47,0.30);
  box-shadow: 0 2px 4px rgba(16,24,40,0.05), 0 18px 40px -16px rgba(16,24,40,0.20);
}

/* ── Stat cards ──────────────────────────────────────────── */
.theme-light .stat-card {
  background: #ffffff;
  border-color: rgba(16,24,40,0.07);
  box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 8px 22px -14px rgba(16,24,40,0.16);
}
.theme-light .stat-value { color: #101426; }
.theme-light .stat-label { color: #4a4f63; }

/* ── Credit meter ────────────────────────────────────────── */
.theme-light .credit-meter {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
.theme-light .credit-bar { background: #e0e0ea; }
.theme-light .credit-coin.used {
  background: #eaeaf0;
  border-color: rgba(0,0,0,0.1);
  color: #9090a0;
}
.theme-light .credit-total { color: #9090a0; }

/* ── Listing cards ───────────────────────────────────────── */
.theme-light .listing-card { background: #ffffff; border-color: rgba(0,0,0,0.08); }
.theme-light .listing-address { color: #101426; }
.theme-light .listing-city { color: #4a4f63; }
.theme-light .listing-stat-val { color: #101426; }
.theme-light .listing-img.placeholder { background: linear-gradient(135deg, #ede8f2, #e0dce8); }

/* ── Steps bar ───────────────────────────────────────────── */
.theme-light .step-num {
  background: #f0f0f5;
  border-color: rgba(0,0,0,0.1);
  color: #9090a0;
}
.theme-light .step.active .step-num { background: var(--gold); color: var(--black); border-color: var(--gold); }
.theme-light .step.active .step-label { color: var(--gold-dark); }
.theme-light .step.done .step-num { background: var(--gold-dark); color: #fff; border-color: var(--gold-dark); }
.theme-light .step-label { color: #4a4f63; }
.theme-light .step-line { background: rgba(0,0,0,0.1); }

/* ── Forms ───────────────────────────────────────────────── */
.theme-light .form-control {
  background: #f0f0f5;
  border-color: rgba(0,0,0,0.1);
  color: #101426;
}
.theme-light .form-control:focus {
  border-color: var(--gold);
  background: #ffffff;
}
.theme-light .form-control::placeholder { color: #9090a0; }
.theme-light .form-label { color: #101426; }
.theme-light .form-hint { color: #4a4f63; }
.theme-light .confirm-field {
  background: #f0f0f5;
  border-color: rgba(0,0,0,0.1);
  color: #101426;
}
.theme-light .form-section-title { color: #4a4f63; border-bottom-color: rgba(0,0,0,0.08); }
.theme-light .divider { border-color: rgba(0,0,0,0.08); }

/* ── Tabs ────────────────────────────────────────────────── */
.theme-light .tabs { background: #eaeaef; }
.theme-light .tab-btn { color: #4a4f63; }
.theme-light .tab-btn.active { background: #ffffff; color: var(--gold-dark); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }

/* ── Tables ──────────────────────────────────────────────── */
.theme-light .data-table th { color: #4a4f63; border-bottom-color: rgba(0,0,0,0.08); }
.theme-light .data-table td { border-bottom-color: rgba(0,0,0,0.05); color: #101426; }
.theme-light .data-table tr:hover td { background: rgba(0,0,0,0.02); }

/* ── Alerts ──────────────────────────────────────────────── */
.theme-light .alert-info    { background: rgba(36,101,201,0.07);  color: #1a4fa0; }
.theme-light .alert-warning { background: rgba(245,166,35,0.09);  color: #7a5000; }
.theme-light .alert-success { background: rgba(46,201,126,0.09);  color: #1a6a40; }
.theme-light .alert-gold    { background: #eef3ff; border-left-color: var(--accent); color: #7a6320; }
.theme-light .alert strong  { color: inherit; }
.theme-light .alert a       { color: var(--gold-dark); }

/* ── Page header ─────────────────────────────────────────── */
.theme-light .page-header { border-bottom: 1px solid rgba(0,0,0,0.07); padding-bottom: 24px; margin-bottom: 28px; }

/* ── Approve-all bar ─────────────────────────────────────── */
.theme-light .approve-all-bar {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
}
.theme-light .approve-all-bar .fw-700 { color: #101426; }

/* ── Post cards ──────────────────────────────────────────── */
.theme-light .post-card { background: #ffffff; border-color: rgba(0,0,0,0.08); }
.theme-light .post-card-header { border-bottom-color: rgba(0,0,0,0.07); }
.theme-light .post-platform { color: #101426; }

/* ── Celebrate overlay ───────────────────────────────────── */
.theme-light .celebrate-card { background: #ffffff; color: #101426; }
.theme-light .celebrate-card h2 { color: #101426; }
.theme-light .celebrate-card p { color: #4a4f63; }

/* ── Sign-in card ────────────────────────────────────────── */
.theme-light .section { background: transparent; }
.theme-light .hero-eyebrow { border-color: rgba(225,166,107,0.3); background: rgba(225,166,107,0.08); }

/* ── Billing page specifics ──────────────────────────────── */
.theme-light section.card { background: #ffffff; }

/* ── Plan shortcut card (settings right rail) ────────────── */
.plan-shortcut { background: linear-gradient(150deg, #ffffff, #fbf6ea); border-color: rgba(184,144,47,0.28); }
.plan-shortcut-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 16px; }
.plan-shortcut-eyebrow { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-secondary); }
.theme-light .plan-shortcut-name { font-size: 1.35rem; font-weight: 800; color: #101426; line-height: 1.15; margin-top: 2px; }
.plan-shortcut-badge { flex: 0 0 auto; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 100px; color: #1a6a40; background: rgba(46,201,126,0.14); border: 1px solid rgba(46,201,126,0.3); }

/* ── Deliverables hub rows ───────────────────────────────── */
.deliv-focus { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; padding: 10px 14px; border-radius: 10px; background: rgba(184,144,47,0.08); border: 1px solid rgba(184,144,47,0.22); font-size: 0.85rem; color: var(--text-secondary); }
.theme-light .deliv-focus { color: #4a4f63; }
.deliv-focus strong { color: var(--text-primary); }
.theme-light .deliv-focus strong { color: #101426; }
.deliv-focus a { font-weight: 700; color: var(--gold-dark, var(--gold)); white-space: nowrap; }
.deliv-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--border); }
.deliv-row:last-child { border-bottom: none; }
.deliv-row-main { min-width: 0; }
.deliv-row-main strong { display: block; color: var(--text-primary); }
.deliv-row-act { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }

/* ── Client updates (messages / videos from the team) ────── */
.upd-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 10px 28px -12px rgba(16,24,40,0.12); }
.upd-card.unread { border-left: 3px solid var(--gold); }
.upd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.upd-head h3 { font-size: 1.1rem; color: #101426; }
.upd-body { color: #4a4f63; font-size: 0.92rem; line-height: 1.6; margin-bottom: 14px; }
.upd-video { position: relative; padding-top: 56.25%; margin-top: 6px; border-radius: 12px; overflow: hidden; background: #000; }
.upd-video iframe, .upd-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── MML HQ hub ─────────────────────────────────────────── */
.hq-hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; align-items: center; background: linear-gradient(135deg,#101426,#1a2540); border-radius: 20px; padding: 26px; margin-bottom: 28px; box-shadow: 0 20px 50px rgba(12,27,46,.22); }
.hq-tv { position: relative; padding-top: 56.25%; border-radius: 14px; overflow: hidden; background: #000; border: 4px solid rgba(255,255,255,.1); box-shadow: 0 14px 34px rgba(0,0,0,.4); }
.hq-tv .upd-video { position: absolute; inset: 0; padding: 0; margin: 0; }
.hq-tv-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #7f93aa; background: radial-gradient(circle at 50% 40%,#1a2540,#0a1626); font: 700 .82rem 'Sora',sans-serif; letter-spacing: .04em; }
.hq-tv-empty .hq-tv-ic { font-size: 2.4rem; }
.hq-hero { position: relative; overflow: hidden; }
.hq-hero::after { content:''; position:absolute; top:-40%; right:-6%; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,rgba(233,200,135,.28),transparent 70%); pointer-events:none; }
.hq-hero-tx { position: relative; }
.hq-hero-tx .hq-eyebrow { color: #e9d8a8; font: 800 .72rem 'Sora',sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.hq-hero-tx h2 { color: #fff; font-size: 1.9rem; margin: 8px 0 6px; line-height: 1.1; }
.hq-hero-tx p { color: #b9c6d6; font-size: .95rem; line-height: 1.6; }
.hq-hero-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.hq-hero-tags span { font: 700 .74rem 'Sora',sans-serif; color: #e9d8a8; background: rgba(233,200,135,.12); border: 1px solid rgba(233,200,135,.28); border-radius: 100px; padding: 6px 12px; }
.hq-sec { margin-bottom: 34px; }
.hq-sec-h { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.hq-ic { width: 44px; height: 44px; border-radius: 13px; flex: none; display: grid; place-items: center; font-size: 1.3rem; background: var(--gold-soft, #f7f0de); border: 1px solid var(--gold-line, #ecdfbb); }
.hq-sec-h h2 { font-size: 1.45rem; margin: 0; color: #101426; letter-spacing: -.01em; }
.hq-sec-h p { font-size: .84rem; color: var(--text-secondary); margin: 1px 0 0; }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* What's new — timeline feed */
/* Feeds read like a comms dashboard: a contained column, not edge-to-edge. */
.hq-feed { position: relative; max-width: 780px; }
.hq-feed-b .upd-video { max-width: 520px; }
.hq-feed-item { display: grid; grid-template-columns: 26px 1fr; gap: 4px; }
.hq-rail { position: relative; display: flex; justify-content: center; }
.hq-rail::before { content: ''; position: absolute; top: 22px; bottom: -6px; width: 2px; background: linear-gradient(#e7dcc0, #f1f1ec); }
.hq-feed-item:last-child .hq-rail::before { display: none; }
.hq-rail span { width: 15px; height: 15px; border-radius: 50%; background: var(--gold, #d9a908); box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(184,144,47,.25); margin-top: 6px; z-index: 1; }
.hq-feed-b { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; margin: 0 0 16px; box-shadow: var(--shadow); }
.hq-feed-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.hq-feed-top h3 { font-size: 1.08rem; margin: 0; color: #101426; flex: 1; }
.hq-feed-top time { font-size: .76rem; color: var(--text-secondary); }
.hq-new { font: 800 .64rem 'Sora',sans-serif; letter-spacing: .06em; color: #1f6a42; background: #e6f4ec; border: 1px solid #bfe3cc; border-radius: 100px; padding: 3px 8px; }
.hq-feed-b p { font-size: .9rem; color: #46546a; line-height: 1.6; margin: 0 0 6px; }

/* Sidebar Approvals — the single glowing highlight when things await review. */
.approvals-hot .badge { background: #b4231f !important; color: #fff !important; animation: approvalsPulse 2s ease-in-out infinite; }
@keyframes approvalsPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(180,35,31,.45); } 50% { box-shadow: 0 0 0 6px rgba(180,35,31,0); } }
@media (prefers-reduced-motion: reduce) { .approvals-hot .badge { animation: none; } }
.hq-link { font: 700 .82rem 'Sora',sans-serif; color: var(--gold-dark, #8a6a08); text-decoration: none; }

/* Best practices — numbered tips */
.hq-tips { display: grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap: 16px; }
.hq-tip { display: flex; gap: 16px; background: linear-gradient(160deg,#fff,#faf7f0); border: 1px solid var(--gold-line,#ecdfbb); border-radius: 16px; padding: 20px; transition: transform .14s, box-shadow .14s; }
.hq-tip:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(184,144,47,.14); }
.hq-tip-n { font-family: Sora, system-ui, sans-serif; font-weight: 700; font-size: 2.6rem; line-height: .8; color: var(--gold, #d9a908); flex: none; }
.hq-tip h3 { font-size: 1.05rem; margin: 2px 0 5px; color: #101426; }
.hq-tip p { font-size: .88rem; color: #46546a; line-height: 1.55; margin: 0 0 6px; }

/* Best Home on Tour — branded black/gold showcase */
.hq-bhot { background: radial-gradient(circle at 20% 0%, #1c1c1c, #0b0b0b 70%); border-radius: 20px; overflow: hidden; margin-bottom: 34px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.hq-bhot-banner { text-align: center; padding: 34px 24px 24px; border-bottom: 1px solid rgba(242,167,27,.22); position: relative; }
.hq-bhot-banner::before { content:''; position:absolute; inset:0; background: repeating-linear-gradient(115deg, rgba(242,167,27,.05) 0 2px, transparent 2px 22px); pointer-events:none; }
.hq-bhot-logo { max-width: 560px; width: 100%; height: auto; position: relative; }
.hq-bhot-word { display: none; align-items: center; justify-content: center; gap: 14px; font-size: 2.1rem; }
.hq-bhot-word span { font: 900 2.1rem 'Sora',sans-serif; letter-spacing: -.01em; color: #f2a71b; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.hq-bhot-word span b { color: #fff; }
.hq-bhot-banner p { color: #cbb892; font-size: .9rem; margin: 12px 0 0; position: relative; }
.hq-bhot-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap: 16px; padding: 24px; }
.hq-bhot-card { position: relative; background: #161616; border: 1px solid rgba(242,167,27,.3); border-radius: 14px; padding: 20px; color: #f4f0e6; }
.hq-bhot-crown { position: absolute; top: -12px; right: 16px; font-size: 1.5rem; }
.hq-bhot-card h3 { color: #f2a71b; font-size: 1.1rem; margin: 0 0 8px; }
.hq-bhot-card p { color: #cfc8b8; font-size: .9rem; line-height: 1.6; margin: 0 0 10px; }
.hq-bhot-btn { display: inline-block; background: #f2a71b; color: #111; font: 800 .84rem 'Sora',sans-serif; text-decoration: none; padding: 10px 18px; border-radius: 100px; }
.hq-bhot-btn:hover { filter: brightness(1.08); }

/* Resources — download tiles */
.hq-res { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 14px; }
.hq-res-tile { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; text-decoration: none; color: inherit; transition: transform .14s, box-shadow .14s, border-color .14s; }
.hq-res-tile:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(12,27,46,.1); border-color: var(--gold-line,#ecdfbb); }
.hq-res-ic { width: 46px; height: 46px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 1.4rem; background: #f7f0de; }
.hq-res-tx { flex: 1; }
.hq-res-tx h3 { font-size: 1rem; margin: 0 0 2px; color: #101426; }
.hq-res-tx p { font-size: .82rem; color: var(--text-secondary); margin: 0; }
.hq-res-go { font: 800 .8rem 'Sora',sans-serif; color: var(--gold-dark,#8a6a08); white-space: nowrap; }

.hq-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: linear-gradient(135deg,#101426,#1a2540); border-radius: 18px; padding: 24px 28px; margin-top: 8px; box-shadow: 0 18px 44px rgba(12,27,46,.2); }
.hq-cta strong { display: block; color: #fff; font-size: 1.15rem; }
.hq-cta span { color: #b9c6d6; font-size: .9rem; }
@media (max-width: 760px) { .hq-hero { grid-template-columns: 1fr; } .hq-bhot-word, .hq-bhot-word span { font-size: 1.5rem; } }

/* ── HQ: section jump-nav ─────────────────────────────────── */
html { scroll-behavior: smooth; }
.hq-anchor { scroll-margin-top: 84px; }
.hq-jump { position: sticky; top: 8px; z-index: 40; display: flex; gap: 8px; flex-wrap: wrap; padding: 10px; margin-bottom: 22px; background: rgba(255,255,255,.82); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 6px 18px rgba(12,27,46,.06); }
.hq-chip { font: 700 .82rem 'Sora',sans-serif; color: #29405d; text-decoration: none; padding: 7px 14px; border-radius: 100px; background: #f4f1ea; border: 1px solid transparent; white-space: nowrap; transition: background .14s, color .14s, border-color .14s, transform .14s; }
.hq-chip:hover { background: #101426; color: #fff; transform: translateY(-1px); }

/* ── HQ: Refer & earn ─────────────────────────────────────── */
.hq-refer { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; margin-bottom: 34px; padding: 28px 32px; border-radius: 20px; color: #fff; background: radial-gradient(680px 240px at 92% -40%,rgba(233,200,135,.32),transparent), linear-gradient(135deg,#101426,#1a2540); box-shadow: 0 22px 52px rgba(12,27,46,.28); }
.hq-refer-badge { display: inline-block; font: 800 .72rem 'Sora',sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #241a05; background: linear-gradient(180deg,#ffe27a,#e9c235); padding: 5px 12px; border-radius: 100px; margin-bottom: 12px; }
.hq-refer-tx h2 { color: #fff; font-size: 1.65rem; margin: 0 0 8px; line-height: 1.12; letter-spacing: -.01em; }
.hq-refer-tx > p { color: #d4deea; font-size: .96rem; line-height: 1.6; max-width: 640px; margin: 0 0 18px; }
.hq-refer-tx > p strong { color: #ffe27a; }
.hq-refer-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.hq-refer-btn { font: 800 .9rem 'Sora',sans-serif; cursor: pointer; padding: 12px 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1); color: #fff; transition: background .15s, transform .15s, box-shadow .15s; }
.hq-refer-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,.18); }
.hq-refer-btn.primary { color: #241a05; border-color: transparent; background: linear-gradient(180deg,#ffe27a,#ffd84d); box-shadow: 0 10px 22px -6px rgba(184,144,47,.6); }
.hq-refer-btn.primary:hover { filter: brightness(1.05); }
.hq-refer-fine { color: #9fb3ca; font-size: .78rem; margin: 14px 0 0; }
.hq-refer-art { font-size: 4.6rem; line-height: 1; opacity: .9; filter: drop-shadow(0 10px 22px rgba(0,0,0,.35)); }
.hq-refer-link { display: flex; gap: 8px; margin: 0 0 14px; max-width: 560px; }
.hq-refer-link input { flex: 1; min-width: 0; font: 600 .86rem 'Sora',sans-serif; color: #eaf1f8; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: 10px; padding: 11px 13px; }
.hq-refer-link .hq-refer-btn { flex: none; }
.hq-refer-stats { display: flex; gap: 22px; margin: 16px 0 0; }
.hq-refer-stats span { color: #c3d1e2; font-size: .84rem; }
.hq-refer-stats b { display: inline-block; color: #ffe27a; font-size: 1.15rem; margin-right: 4px; }
@media (max-width: 720px) { .hq-refer { grid-template-columns: 1fr; padding: 24px; } .hq-refer-art { display: none; } .hq-refer-link { flex-wrap: wrap; } }

/* ── HQ: featured Power Partner banner ────────────────────── */
.hq-partner-featured { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); background: #0a1428; }
.hq-partner-featured-img { display: block; line-height: 0; }
.hq-partner-featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hq-partner-featured-tx { padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; gap: 6px; background: #fff; }
.hq-partner-tag { align-self: flex-start; font: 800 .68rem 'Sora',sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #8a6a08; background: #f7f0de; border-radius: 100px; padding: 4px 11px; }
.hq-partner-featured-tx h3 { font-size: 1.3rem; margin: 4px 0 0; color: #101426; }
.hq-partner-featured-tx p { font-size: .9rem; color: #46546a; line-height: 1.55; margin: 0; }
.hq-partner-featured-tx .hq-link { margin-top: 6px; }
@media (max-width: 640px) { .hq-partner-featured { grid-template-columns: 1fr; } }

/* ── Billing: calm, accounting-style ──────────────────────── */
#billingMain .card-header h2 { font-size: 1.18rem; letter-spacing: -.01em; }
#billingMain h2 { font-weight: 800; }
/* One plan and one "let's talk" card, so this is a pair of cards rather than a
   row of tiers to compare. minmax caps at 1fr so a single card can't stretch
   into a banner if Enterprise is ever removed. */
.bill-plan-btns { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 12px; align-items: stretch; }
.bill-plan-card { display: flex; flex-direction: column; gap: 6px; background: #fbfaf7; border: 1px solid var(--border); border-radius: 14px; padding: 18px 18px 16px; }
.bill-plan-card.quote { background: #fff; border-style: dashed; }
.bill-plan-card .btn { margin-top: auto; align-self: flex-start; }
.bill-plan-name { font: 800 1.05rem 'Sora',sans-serif; color: #101426; }
.bill-plan-credits { font: 700 .78rem 'Sora',sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #5b6070; }
.bill-anchor { font: 500 .95rem 'Sora',sans-serif; color: #4a4f63; margin-top: 4px; }
.bill-anchor s { color:#5f6572; margin-right: 6px; }
.bill-anchor b { font: 800 1.5rem 'Sora',sans-serif; color: #101426; }
/* The strike-through is an arithmetic claim, so its explanation is part of the
   component — never let one ship without the other. */
.bill-anchor-why { font: 500 .72rem 'Sora',sans-serif; color: #7a8598; margin-top: 4px; line-height: 1.4; }
.bill-plan-note { font-size: .8rem; color: #5b6070; line-height: 1.45; margin-bottom: 10px; }
.bill-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.bill-tiles { display: grid; grid-template-columns: repeat(auto-fit,minmax(118px,1fr)); gap: 12px; }
.bill-tile { background: #fbfaf7; border: 1px solid var(--border); border-radius: 12px; padding: 15px 15px 16px; }
.bill-tile-n { font: 800 1.75rem 'Sora',sans-serif; color: #101426; line-height: 1; font-variant-numeric: tabular-nums; }
.bill-tile-l { font: 700 .75rem 'Sora',sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #5b6070; margin-top: 8px; }
.bill-tile-note { font-size: .74rem; color:#5f6572; margin-top: 3px; line-height: 1.35; }
.bill-tile.total { background: linear-gradient(135deg,#101426,#1a2540); border-color: transparent; }
.bill-tile.total .bill-tile-n { color: #fff; }
.bill-tile.total .bill-tile-l { color: #cbb988; }
.bill-tile.total .bill-tile-note { color: #a9b8cb; }
.bill-tile.remix { border-top: 3px solid var(--gold,#d9a908); }
.bill-ledger { font-variant-numeric: tabular-nums; }
.bill-ledger th, .bill-ledger td { font-size: .86rem; }
.bill-ledger .bill-amt { text-align: right; font-weight: 700; white-space: nowrap; }
.bill-ledger .bill-amt.pos { color: #2f7d4f; }
.bill-ledger .bill-amt.neg { color: #b4231f; }
.bill-ledger .bill-bal { text-align: right; font-weight: 700; color: #101426; white-space: nowrap; }
/* Remix hero card — profile-style navy card, action button in the corner */
.rmx-hero { position: relative; overflow: hidden; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 28px; border-radius: 18px; color: #fff; background: radial-gradient(620px 220px at 92% -50%,rgba(233,200,135,.3),transparent), linear-gradient(135deg,#101426,#1a2540); box-shadow: 0 20px 50px rgba(12,27,46,.26); }
.rmx-hero-tx { flex: 1; min-width: 260px; }
.rmx-eyebrow { font: 800 .72rem 'Sora',sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #e9d8a8; margin-bottom: 8px; }
.rmx-num { color: #fff; font-size: 1.7rem; margin: 0 0 8px; }
.rmx-num span { color: #ffe27a; }
.rmx-hero-tx p { color: #cdd8e6; font-size: .92rem; line-height: 1.55; max-width: 760px; margin: 0 0 8px; }
.rmx-hero-tx .rmx-fine { color: #9fb3ca; font-size: .8rem; }
.rmx-hero-tx .rmx-fine strong { color: #e9d8a8; }
.rmx-hero-btn { flex: none; font: 800 .9rem 'Sora',sans-serif; color: #241a05; background: linear-gradient(180deg,#ffe27a,#e9c235); border: none; border-radius: 12px; padding: 13px 20px; box-shadow: 0 10px 24px -6px rgba(184,144,47,.55); }
.rmx-hero-btn:hover { filter: brightness(1.05); }
@media (max-width: 640px) { .rmx-hero-btn { width: 100%; } }
/* Remix request modal form */
.rmx-lead { background: #f6f2e8; border: 1px solid #ece2cc; border-radius: 10px; padding: 12px 14px; font-size: .86rem; color: #5c5230; margin: 0 0 16px; }
.rmx-l { display: block; font: 700 .8rem 'Sora',sans-serif; color: #101426; margin: 14px 0 6px; }
.rmx-seg { display: inline-flex; gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.rmx-seg button { border: none; background: #fff; color: #5c6470; font: 700 .84rem 'Sora',sans-serif; padding: 9px 22px; cursor: pointer; }
.rmx-seg button + button { border-left: 1px solid var(--border); }
.rmx-seg button.on { background: #101426; color: #fff; }
.rmx-warn { background: #fdeceb; border: 1px solid #f3c3bf; color: #9a2f28; border-radius: 10px; padding: 11px 14px; font-size: .84rem; margin-top: 10px; }
.rmx-msg { font-size: .84rem; margin-top: 10px; }
.rmx-msg.err { color: #b4231f; }
.rmx-msg.ok { color: #2f7d4f; }

/* ══ Reusable page intro (infographic header) ═════════════════
   Replaces the wordy tan banners: one punchy line + at-a-glance
   fact chips, with the full detail tucked into an info popup and
   an optional "watch" video button. Same cream/navy/gold palette. */
/* Deliverable-page explainer band — the design handoff's DARK subpage shell:
   ink gradient, gold rail, white title, chips, gold ▶ Watch. One class, every
   deliverable page. */
.mml-intro { position: relative; background: linear-gradient(120deg,#101426,#182449); border: 0; border-left: 4px solid var(--gold,#ffd84d); border-radius: 16px; padding: 19px 22px; margin-bottom: 22px; box-shadow: 0 14px 34px rgba(16,20,38,.18); }
.mml-intro-main { display: flex; align-items: center; gap: 14px; }
.mml-intro-icon { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 1.5rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); }
.mml-intro-tx { flex: 1; min-width: 0; }
.mml-intro-tx h2 { margin: 0; font-size: 1.16rem; color: #fff; letter-spacing: -.01em; }
.mml-intro-tx p { margin: 3px 0 0; font-size: .9rem; color: #b9bfd0; line-height: 1.5; }
.mml-intro h2 { color: #fff; }
.mml-intro-main > div > p, .mml-intro-main p { color: #b9bfd0; }
.mml-intro-main strong { color: #fff; }
.mml-intro-actions { display: flex; gap: 8px; flex: none; }
.mml-intro-btn { font: 700 .82rem 'Sora',sans-serif; cursor: pointer; white-space: nowrap; border-radius: 100px; padding: 9px 15px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; transition: background .15s, color .15s, border-color .15s, transform .15s; }
.mml-intro-btn:hover { background: #fff; color: #101426; border-color: #fff; transform: translateY(-1px); }
.mml-intro-btn.watch { background: linear-gradient(135deg,#ffd84d,#caa45a); color: #241a05; border-color: transparent; }
.mml-intro-btn.watch:hover { filter: brightness(1.05); background: linear-gradient(135deg,#ffd84d,#caa45a); color: #241a05; }
.mml-intro-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mml-intro-chips span { display: inline-flex; align-items: center; gap: 6px; font: 700 .78rem 'Sora',sans-serif; color: #e6e9f2; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 100px; padding: 6px 12px; }
.mml-intro-chips b { color: #ffd84d; }
.mml-intro-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mml-intro-tags span { display: inline-flex; align-items: center; gap: 6px; font: 700 .78rem 'Sora',sans-serif; color: #e6e9f2; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 100px; padding: 6px 12px; }
/* Subpage shell: title + short blue rule under every portal page title. */
.dashboard-layout .page-title::after { content: ''; display: block; width: 52px; height: 4px; border-radius: 2px; background: var(--blue,#123ec4); margin-top: 10px; }
@media (max-width: 640px) { .mml-intro-main { flex-wrap: wrap; } .mml-intro-actions { width: 100%; } .mml-intro-btn { flex: 1; } }

/* Generic section jump-nav (the HQ pattern, reusable on any page) */
.mml-secnav { position: sticky; top: 8px; z-index: 40; display: flex; gap: 8px; flex-wrap: wrap; padding: 10px; margin-bottom: 22px; background: rgba(255,255,255,.82); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 6px 18px rgba(12,27,46,.06); }
.mml-secnav a { font: 700 .82rem 'Sora',sans-serif; color: #29405d; text-decoration: none; padding: 7px 14px; border-radius: 100px; background: #f4f1ea; border: 1px solid transparent; white-space: nowrap; transition: background .14s, color .14s, transform .14s; }
.mml-secnav a:hover { background: #101426; color: #fff; transform: translateY(-1px); }
.mml-anchor { scroll-margin-top: 84px; }

/* Info / video popup */
.mml-modal-ov { position: fixed; inset: 0; z-index: 6000; background: rgba(8,15,28,.62); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .2s; }
.mml-modal-ov.on { opacity: 1; }
.mml-modal { background: #fff; border-radius: 18px; max-width: 580px; width: 100%; max-height: 86vh; overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,.42); transform: translateY(10px) scale(.98); transition: transform .2s; }
.mml-modal-ov.on .mml-modal { transform: none; }
.mml-modal-hd { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid #eee; position: sticky; top: 0; background: #fff; z-index: 1; }
.mml-modal-hd .ic { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; font-size: 1.3rem; background: linear-gradient(135deg,#101426,#1a2540); }
.mml-modal-hd h3 { margin: 0; font-size: 1.16rem; color: #101426; flex: 1; }
.mml-modal-x { border: none; background: #f1eee7; width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: .95rem; color: #5c6470; flex: none; }
.mml-modal-x:hover { background: #e6e1d6; }
.mml-modal-bd { padding: 20px 22px; color: #3a4657; font-size: .92rem; line-height: 1.62; }
.mml-modal-bd strong { color: #101426; }
.mml-modal-bd p { margin: 0 0 12px; }
.mml-modal-bd .ul { display: grid; gap: 9px; margin: 4px 0 14px; }
.mml-modal-bd .ul .li { display: flex; gap: 10px; align-items: flex-start; }
.mml-modal-bd .ul .li .k { flex: none; }
.mml-modal-video { position: relative; padding-top: 56.25%; border-radius: 12px; overflow: hidden; margin-bottom: 16px; background: #000; }
.mml-modal-video .upd-video, .mml-modal-video iframe, .mml-modal-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; }

/* ── HQ: Power Partners ───────────────────────────────────── */
.hq-partners { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 14px; }
.hq-partner { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--gold,#d9a908); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow); transition: transform .14s, box-shadow .14s; }
.hq-partner:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(12,27,46,.12); }
.hq-partner-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.4rem; background: #f7f0de; }
.hq-partner-tx h3 { font-size: 1.05rem; margin: 0 0 3px; color: #101426; }
.hq-partner-tx p { font-size: .86rem; color: #46546a; line-height: 1.55; margin: 0; }
.hq-partner .hq-link { margin-top: auto; }

/* ── Admin "view as agent" banner ────────────────────────── */
.mml-imp-banner { position: fixed; top: 0; left: 0; right: 0; height: 38px; z-index: 5000; background: #b4231f; color: #fff; font: 700 0.82rem 'Sora', sans-serif; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 0 16px; text-align: center; }
.mml-imp-banner strong { color: #fff; }
.mml-imp-banner button { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.55); color: #fff; border-radius: 6px; padding: 4px 12px; font: 700 0.76rem 'Sora', sans-serif; cursor: pointer; white-space: nowrap; }
.mml-imp-banner button:hover { background: rgba(255,255,255,0.3); }
body.mml-imp-on .nav { top: 38px; }
body.mml-imp-on .dashboard-layout { padding-top: 102px; }
body.mml-imp-on .sidebar { top: 102px; }
/* The banner is fixed at z-index 5000 across the top, so it sat directly on
   the ☰ — an operator using "Act as agent" on a phone had no way to open the
   sidebar, which is the whole point of viewing the account as the agent sees
   it. Drop the button below the banner. */
body.mml-imp-on .sidebar-toggle { top: 47px; }
body.mml-imp-on .sidebar-backdrop { inset: 38px 0 0 0; }
/* Plain pages (no dashboard layout) that pad below the fixed nav also need
   the extra 38px when the admin-view banner pushes the nav down. */
body.mml-imp-on .page-below-nav { padding-top: 122px !important; }

/* ── Launch area ─────────────────────────────────────────── */
.theme-light .launch-area p { color: #4a4f63; }

/* ── Video callout ───────────────────────────────────────── */
.theme-light .video-callout { background: #f0f0f5; border-color: rgba(0,0,0,0.1); }
.theme-light .video-callout:hover { background: rgba(225,166,107,0.06); }

/* ── Misc text ───────────────────────────────────────────── */
.theme-light .text-gray { color: #4a4f63 !important; }
.theme-light .section-eyebrow { color: var(--gold-dark); }
.theme-light .text-gold { color: var(--gold-dark); }

/* ── Listing Refresh™ toggle switch ──────────────────────── */
.ld-refresh-switch {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 8px 14px; border-radius: 100px; border: 1px solid var(--border);
  background: var(--black-light); user-select: none; transition: var(--transition);
}
.ld-refresh-switch.is-on { border-color: var(--success); background: rgba(46,201,126,0.12); }
.ld-refresh-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ld-refresh-track {
  position: relative; flex: 0 0 auto; width: 40px; height: 22px; border-radius: 100px;
  background: var(--gray-600); transition: var(--transition);
}
.ld-refresh-switch.is-on .ld-refresh-track { background: var(--success); }
.ld-refresh-knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: var(--transition); box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.ld-refresh-switch.is-on .ld-refresh-knob { transform: translateX(18px); }
.ld-refresh-label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
.ld-refresh-switch.is-on .ld-refresh-label { color: var(--text-primary); }
.ld-refresh-label strong { color: inherit; }

/* ============================================================
   First-run guided tour
   ============================================================ */
/* Matches the HQ nav button so the top-right controls read as one set. */
.mml-tour-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; white-space: nowrap;
  font: 700 .82rem 'Sora', sans-serif; cursor: pointer;
  border: 1px solid var(--border); background: var(--black-light); color: var(--text-primary);
  padding: 0 14px; border-radius: 11px; margin-right: 8px; transition: background .18s, transform .18s;
}
.mml-tour-btn:hover { background: var(--black-mid); transform: translateY(-1px); }
.mml-tour { position: fixed; inset: 0; z-index: 4000; }
.mml-tour-spot {
  position: fixed; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(12,27,46,0.55), 0 0 0 2px rgba(225,166,107,0.95), 0 0 24px rgba(225,166,107,0.5);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
.mml-tour-pop {
  position: fixed; width: 330px; max-width: calc(100vw - 32px);
  background: #fff; color: #101426; border-radius: 16px; padding: 22px;
  border: 1px solid rgba(16,24,40,0.08);
  box-shadow: 0 28px 70px -16px rgba(12,27,46,0.5); z-index: 4001;
  animation: mmlTourIn .22s cubic-bezier(0.4,0,0.2,1);
}
@keyframes mmlTourIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.mml-tour-step { font: 700 0.68rem 'Sora', sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #d9a908; margin-bottom: 6px; }
.mml-tour-title { font-size: 1.18rem; font-weight: 800; color: #101426; margin-bottom: 8px; line-height: 1.25; }
.mml-tour-body { font-size: 0.9rem; line-height: 1.55; color: #4a4f63; margin-bottom: 16px; }
.mml-tour-cta { margin-bottom: 16px; }
.mml-tour-pop.has-video { width: 440px; }
.mml-tour-video { position: relative; padding-top: 56.25%; border-radius: 12px; overflow: hidden; margin: 0 0 14px; background: #000; }
.mml-tour-video .upd-video, .mml-tour-video iframe, .mml-tour-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; }
.mml-tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mml-tour-skip { background: none; border: none; color: #9aa0ad; font: 600 0.8rem 'Sora', sans-serif; cursor: pointer; padding: 4px 2px; }
.mml-tour-skip:hover { color: #4a4f63; }
.mml-tour-dots { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; max-width: 120px; }
.mml-tour-dot { width: 5px; height: 5px; border-radius: 50%; background: #ddd6c6; transition: background .2s ease; }
.mml-tour-dot.on { background: #d9a908; }
.mml-tour-nav { display: flex; gap: 8px; }
body.mml-tour-open { overflow: hidden; }
@media (max-width: 720px) {
  .mml-tour-spot { display: none !important; }
  .mml-tour-pop { left: 50% !important; top: auto !important; bottom: 16px; transform: translateX(-50%); }
}

/* Top-bar mailbox — quiet by default, glows + bounces on unread messages. */
.mml-notif { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; border-radius: 10px; background: var(--black-light); border: 1px solid var(--border); text-decoration: none; font-size: 1.05rem; padding: 0 14px 0 12px; margin-right: 8px; color: var(--text-primary); transition: background .18s, transform .18s, border-color .18s; }
.mml-notif:hover { background: var(--black-mid); transform: translateY(-1px); }
/* Design spec: the HQ button is a dark ink chip that hovers to brand blue. */
.theme-light .mml-notif { background: #101426; border-color: #101426; color: #fff; }
.theme-light .mml-notif:hover { background: #123ec4; border-color: #123ec4; color: #fff; }
.theme-light .mml-notif .mml-notif-label { color: #fff; }
.mml-notif .ico { line-height: 1; display: inline-block; transform-origin: 50% 85%; }
.mml-notif-label { font: 700 .82rem 'Sora', sans-serif; }
.mml-notif-dot { position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: #b4231f; color: #fff; font: 800 .7rem 'Sora', sans-serif; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }
.mml-notif.has-unread { border-color: #b4231f; animation: mmlBellGlow 1.9s ease-in-out infinite; }
.mml-notif.has-unread .ico { animation: mmlMailBounce 1.9s ease-in-out infinite; }
@keyframes mmlBellGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(180,35,31,0); } 50% { box-shadow: 0 0 14px 2px rgba(180,35,31,.5); } }
@keyframes mmlMailBounce { 0%, 55%, 100% { transform: translateY(0) rotate(0); } 12% { transform: translateY(-4px) rotate(-7deg); } 26% { transform: translateY(0) rotate(0); } 38% { transform: translateY(-2px) rotate(5deg); } }

/* Premium full-screen checkout transition — shown instantly so checkout never feels frozen. */
#mmlCheckoutOverlay { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; text-align: center; opacity: 0; pointer-events: none; transition: opacity .25s ease; background: radial-gradient(900px 480px at 50% 12%, rgba(202,164,80,.18), transparent), linear-gradient(180deg, #0f2138, #0a1626); color: #eaf0f7; font-family: Sora, system-ui, sans-serif; }
#mmlCheckoutOverlay.on { opacity: 1; pointer-events: auto; }
#mmlCheckoutOverlay .cko-bar { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, #ffd84d, #caa45a); width: 0; animation: ckoBar 2.4s ease-out forwards; box-shadow: 0 0 12px rgba(233,200,135,.6); }
@keyframes ckoBar { 0% { width: 0 } 60% { width: 78% } 100% { width: 94% } }
#mmlCheckoutOverlay .cko-logo { font: 800 26px Sora; letter-spacing: .2px; }
#mmlCheckoutOverlay .cko-logo b { background: linear-gradient(135deg, #f0d6a0, #caa45a); color: #101426; padding: 5px 10px; border-radius: 9px; }
#mmlCheckoutOverlay .cko-ring { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#ffd84d, #caa45a, #8a6a2e, #ffd84d); animation: ckoSpin 1.1s linear infinite; }
#mmlCheckoutOverlay .cko-ring::before { content: '🔒'; width: 64px; height: 64px; border-radius: 50%; background: #101426; display: grid; place-items: center; font-size: 1.5rem; }
@keyframes ckoSpin { to { transform: rotate(360deg) } }
#mmlCheckoutOverlay .cko-label { font: 800 20px Sora; color: #fff; }
#mmlCheckoutOverlay .cko-sub { color: #a9b8cb; font-size: 14px; max-width: 360px; line-height: 1.55; }
#mmlCheckoutOverlay .cko-stripe { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: #cdd8e6; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 100px; padding: 7px 14px; }

/* ============================================================
   NITRO MLS — per-photo gallery (photo + title + description)
   ============================================================ */
.nitro-overall {
  background: linear-gradient(180deg, #fffdf8, #fbf4e3);
  border: 1px solid #ecdfbb;
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.nitro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
/* Delivered view: one sample on the left, a "what to do" guide on the right. */
.nitro-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin: 4px 0 8px; }
@media (max-width: 820px) { .nitro-split { grid-template-columns: 1fr; } }
.nitro-guide { background: linear-gradient(180deg, #fffdf8, #fbf4e3); border: 1px solid #ecdfbb; border-radius: 14px; padding: 16px 18px; }
.nitro-guide-h { font: 800 .98rem Sora; color: #6f5200; margin-bottom: 10px; }
.nitro-guide-steps { margin: 0 0 12px; padding-left: 20px; }
.nitro-guide-steps li { font-size: .88rem; color: #37424f; line-height: 1.55; margin-bottom: 8px; }
.nitro-guide-why { font-size: .82rem; color: #4a4f63; padding-top: 10px; border-top: 1px dashed #ecdfbb; }
.nitro-guide-why code { background: #efe7d2; padding: 1px 5px; border-radius: 5px; font-size: .78rem; }
.nitro-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.nitro-shot {
  aspect-ratio: 16 / 10;
  background: #101426;
  overflow: hidden;
}
.nitro-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nitro-shot-empty {
  display: grid; place-items: center;
  background: linear-gradient(135deg, #1a2540, #101426);
}
.nitro-shot-empty span { color: #cdb87f; font: 700 .8rem Sora; letter-spacing: .04em; }
.nitro-cbody { padding: 14px 16px 16px; }
.nitro-chead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nitro-num {
  font: 800 .68rem Sora; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold);
}
.nitro-title { font: 700 1.02rem Sora; color: var(--text-primary); margin: 7px 0 5px; line-height: 1.3; }
.nitro-desc { font-size: .9rem; color: #37424f; line-height: 1.55; }
.nitro-file { font-size: .76rem; color: var(--text-secondary); margin-top: 9px; }
.nitro-file code { background: #f1f1ec; border-radius: 5px; padding: 1px 6px; font-size: .73rem; color: #4a4f63; }
.nitro-kw { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.nitro-kw span {
  font-size: .7rem; color: #6a5a2c; background: #f7f0de;
  border: 1px solid #ecdfbb; border-radius: 100px; padding: 2px 9px;
}

/* Nitro batched generation — live "working" indicator */
.nitro-working {
  display: flex; align-items: flex-start; gap: 14px;
  background: linear-gradient(180deg, #fffdf8, #fbf4e3);
  border: 1px solid #ecdfbb; border-radius: var(--radius-lg);
  padding: 16px 18px; margin-bottom: 16px;
}
.nitro-spin {
  flex: none; width: 26px; height: 26px; margin-top: 2px;
  border: 3px solid rgba(184,144,47,.25); border-top-color: #d9a908;
  border-radius: 50%; animation: nitroSpin .8s linear infinite;
}
@keyframes nitroSpin { to { transform: rotate(360deg); } }
.nitro-working-tx strong { display: block; color: #101426; font: 800 1rem Sora; }
.nitro-working-tx span { display: block; color: #4a4f63; font-size: .85rem; margin-top: 2px; line-height: 1.45; }
.nitro-bar { height: 7px; border-radius: 100px; background: #efe6cf; overflow: hidden; margin-top: 10px; }
.nitro-bar i { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, #d9a908, #d9a908); transition: width .4s ease; }

/* ── Nitro: instructions hero, proof bar, glowing PDF, help modal ── */
.nitro-howto {
  background: linear-gradient(180deg, #fffdf8, #fbf4e3);
  border: 1px solid #ecdfbb; border-radius: var(--radius-lg);
  padding: 16px 20px; margin-bottom: 14px;
}
.nitro-howto-h { font: 800 1rem Sora; color: #101426; margin-bottom: 8px; }
.nitro-howto ol { margin: 0 0 8px; padding-left: 20px; }
.nitro-howto li { font-size: .9rem; color: #37424f; line-height: 1.6; }
.nitro-howto-note { font-size: .82rem; color: #4a4f63; padding-top: 8px; border-top: 1px dashed #ecdfbb; }
.nitro-proof {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}
.nitro-proof .np {
  flex: 1 1 150px; background: #101426; border-radius: var(--radius-md);
  padding: 12px 14px; color: #cdd8e6;
}
.nitro-proof .np b { display: block; font: 800 1.5rem Sora; color: #ffd84d; line-height: 1.1; }
.nitro-proof .np span { display: block; font-size: .73rem; margin-top: 3px; line-height: 1.35; }
/* Glowing primary — draws the eye to the PDF download */
.btn-glow { position: relative; animation: nitroGlow 2.2s ease-in-out infinite; }
@keyframes nitroGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184,144,47,.0), 0 8px 20px rgba(184,144,47,.25); }
  50% { box-shadow: 0 0 0 5px rgba(184,144,47,.16), 0 10px 26px rgba(184,144,47,.4); }
}
.nitro-help-modal {
  position: fixed; inset: 0; z-index: 220; background: rgba(8,18,32,.55);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.nitro-help-modal.open { display: flex; }
.nitro-help-box {
  background: #fff; border-radius: 20px; max-width: 380px; width: 100%;
  padding: 30px 28px 26px; text-align: center; position: relative;
  box-shadow: 0 30px 80px rgba(8,18,32,.4);
}
.nitro-help-x { position: absolute; top: 12px; right: 16px; background: none; border: 0; font-size: 1.6rem; color: #aab2bd; cursor: pointer; line-height: 1; }
.nitro-help-face {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 12px;
  overflow: hidden; background: linear-gradient(135deg, #1a2540, #101426);
  display: grid; place-items: center; border: 3px solid #ffd84d;
}
.nitro-help-face img { width: 100%; height: 100%; object-fit: cover; }
.nitro-help-face span { color: #ffd84d; font: 800 2rem Sora; }
.nitro-help-box h2 { font-family: Sora, sans-serif; font-size: 1.7rem; color: #101426; margin: 2px 0 6px; }
.nitro-help-box p { font-size: .9rem; color: #4a4f63; line-height: 1.5; margin-bottom: 16px; }
.nitro-help-go {
  display: block; width: 100%; font: 800 1rem Sora; color: #fff;
  background: linear-gradient(135deg, #1a2540, #101426); border-radius: 12px;
  padding: 14px; margin-bottom: 10px; box-shadow: 0 12px 28px rgba(12,27,46,.3);
}
.nitro-help-go:hover { transform: translateY(-1px); color: #fff; }
.nitro-help-go.soft { background: #fff; color: #101426; border: 1px solid #e8e6df; box-shadow: none; }
.nitro-help-go.gold { background: linear-gradient(180deg, #ffe27a, #e9c235); color: #241a05; border: 1px solid rgba(120,86,17,.35); box-shadow: 0 2px 5px rgba(12,27,46,.3); cursor: pointer; }
.nitro-help-go.gold:disabled { opacity: .6; cursor: wait; }
/* Advantage modal — the unlock-moment sell (Autopilot, Photo Studio Pass). */
.adv-badge{display:inline-block;font:800 .66rem 'Sora',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6f5200;background:linear-gradient(180deg,#f7e3b1,#eccf8d);border:1px solid #dfc27a;border-radius:100px;padding:5px 12px}
.adv-points{text-align:left;margin:0 0 16px;padding-left:20px}
.adv-points li{font-size:.88rem;color:#37424f;line-height:1.55;margin-bottom:6px}
.adv-fine{font-size:.76rem !important;color:#8a93a0 !important;margin:10px 0 0 !important}

/* "Have us do it" block inside the support modal — the we-got-you framing. */
.nitro-dfy { text-align: left; background: linear-gradient(180deg, #fffdf8, #fbf4e3); border: 1px solid #ecdfbb; border-radius: 12px; padding: 14px 16px; margin-bottom: 4px; }
.nitro-dfy-h { font: 800 .95rem Sora; color: #6f5200; margin-bottom: 4px; }
.nitro-dfy-p { font-size: .86rem !important; margin-bottom: 10px !important; }

/* Nitro help modal — mini tour steps + future video slot */
.nitro-help-steps { text-align: left; margin: 0 0 16px; padding-left: 20px; }
.nitro-help-steps li { font-size: .88rem; color: #37424f; line-height: 1.6; }
.nitro-help-video { border-radius: 14px; overflow: hidden; margin-bottom: 12px; aspect-ratio: 16/9; background: #101426; }
.nitro-help-video iframe { width: 100%; height: 100%; display: block; border: 0; }

/* Nitro delivered cards — flat row, expand on command */
.nitro-acc .nitro-acc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  cursor: pointer; user-select: none;
}
.nitro-acc-info h3 { margin: 0; font-size: 1.15rem; color: var(--text-primary); }
.nitro-acc-info p { margin: 4px 0 0; font-size: .85rem; color: var(--text-secondary); }
.nitro-ready { color: #2f8f5b; font-weight: 700; }
.nitro-acc-act { display: flex; align-items: center; gap: 14px; flex: none; }
.nitro-acc-toggle { font: 700 .82rem Sora; color: var(--gold-dark); white-space: nowrap; }
.nitro-chev { font-style: normal; display: inline-block; transition: transform .2s; }
.nitro-acc.open .nitro-chev { transform: rotate(180deg); }
.nitro-acc-body { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.nitro-acc-body[hidden] { display: none; }

/* Nitro row — two clean buttons (white+gold edge / black), next-step, help footer */
.nitro-moreinfo {
  font: 700 .85rem Sora; color: var(--text-primary); background: #fff;
  border: 1.5px solid var(--gold); border-radius: 9px; padding: 9px 16px;
  cursor: pointer; white-space: nowrap; transition: background .15s, box-shadow .15s;
}
.nitro-moreinfo:hover { background: #fffdf5; box-shadow: 0 2px 10px rgba(184,144,47,.18); }
.nitro-pdfbtn {
  font: 800 .85rem Sora; color: #fff; background: #101426;
  border: 1.5px solid #101426; border-radius: 9px; padding: 9px 18px;
  cursor: pointer; white-space: nowrap; transition: transform .12s, background .15s;
}
.nitro-pdfbtn:hover { background: #1a2540; transform: translateY(-1px); }
.nitro-next {
  margin-top: 16px; padding: 13px 16px; border-radius: var(--radius-md);
  background: #f1f7f3; border: 1px solid #cfe6da; font-size: .88rem; color: #2f6f4f;
}
.nitro-next a:not(.btn-next) { color: #2f8f5b; font-weight: 800; }

/* The "next step" CTA — its own identity, used ONLY for forward progress.
   Navy so it never competes with the gold action buttons, with a gold arrow
   that slides on hover. Distinct from the HQ glow; crisp, not fuzzy. */
.btn-next {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font: 800 .9rem 'Sora', sans-serif; color: #fff;
  background: linear-gradient(135deg, #1a2540, #101426);
  border: 1px solid rgba(255,255,255,.08); border-left: 3px solid var(--gold, #d9a908);
  border-radius: 11px; padding: 11px 18px; white-space: nowrap; cursor: pointer;
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s;
}
.btn-next .btn-next-arw { color: #ffd84d; font-size: 1.05rem; transition: transform .16s cubic-bezier(.2,.7,.3,1); }
.btn-next:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 3px 9px rgba(12,27,46,.4); }
.btn-next:hover .btn-next-arw { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .btn-next, .btn-next .btn-next-arw { transition: none; } }
.nitro-help-foot { font-size: .8rem !important; color: #8a93a0 !important; margin: 12px 0 0 !important; }

/* Next-step CTA layout + spacing overrides */
.nitro-next {
  margin-top: 24px; padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.nitro-next > div strong { display: block; color: #205a3e; font-size: .95rem; }
.nitro-next > div span { display: block; color: #2f6f4f; font-size: .85rem; margin-top: 2px; }
.nitro-next .btn { flex: none; }
.nitro-help-foot { margin: 6px 0 14px !important; }

/* Listing Descriptions — new-bar picker + refresh row (reuses .nitro-acc) */
.ld-new{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ld-new-tx strong{display:block;color:var(--text-primary);font-size:1.05rem}
.ld-new-tx span{display:block;color:var(--text-secondary);font-size:.85rem;margin-top:2px}
.ld-new-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ld-new-act select{min-width:240px}
.ld-refresh-row{display:flex;align-items:flex-start;gap:9px;margin-top:14px;padding:12px 14px;background:#f1f7f3;border:1px solid #cfe6da;border-radius:10px;font-size:.85rem;color:#2f6f4f;cursor:pointer}
.ld-refresh-row input{margin-top:2px;accent-color:#2f8f5b}

/* ── Listing Descriptions — unique "listing piece" cards ── */
.ld-piece{
  position:relative; background:#fff; border:1px solid var(--border);
  border-left:4px solid var(--gold); border-radius:14px; margin-bottom:14px;
  box-shadow:0 10px 30px rgba(12,27,46,.06); overflow:hidden; transition:box-shadow .15s, transform .12s;
}
.ld-piece:hover{box-shadow:0 16px 40px rgba(184,144,47,.14)}
.ld-piece.pending{background:linear-gradient(180deg,#fffdf8,#fbf4e3);border-left-color:#ecdfbb}
.ld-head{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer}
.ld-badge{flex:none;width:42px;height:42px;border-radius:11px;background:var(--gold-soft,#f7f0de);border:1px solid #ecdfbb;display:grid;place-items:center;font-size:1.2rem}
.ld-badge.dashed{background:#fff;border:1.5px dashed var(--gold);color:var(--gold);font-weight:800}
.ld-info{flex:1;min-width:0}
.ld-info h3{margin:0;font-size:1.12rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ld-info p{margin:3px 0 0;font-size:.84rem;color:var(--text-secondary)}
.ld-ready{color:#2f8f5b;font-weight:700}.ld-refresh-on{color:#2f8f5b;font-weight:700}.ld-none{color:#b08a2e;font-weight:700}
.ld-act{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:none}
/* Status text sits tidily beside the button and wraps within its own column
   instead of stretching the row or dropping to a ragged bottom line. */
.ld-act [data-ld-gen-status]{max-width:200px;text-align:right;line-height:1.35;white-space:normal}
.ld-more{font:700 .82rem Sora;color:var(--text-primary);background:#fff;border:1.5px solid var(--gold);border-radius:9px;padding:8px 14px;cursor:pointer;white-space:nowrap}
.ld-more:hover{background:#fffdf5}
.ld-copybtn{font:800 .82rem Sora;color:#fff;background:#101426;border:1.5px solid #101426;border-radius:9px;padding:8px 16px;cursor:pointer}
.ld-copybtn:hover{background:#1a2540}
.ld-body{padding:0 18px 18px}.ld-body[hidden]{display:none}
.ld-why{font-size:.85rem;color:#6a5a2c;background:#f7f0de;border:1px solid #ecdfbb;border-radius:10px;padding:11px 14px;margin-bottom:14px;line-height:1.5}
.ld-desc .ld-p{margin:0 0 .95em}.ld-desc .ld-p:last-child{margin-bottom:0}
.ld-desc{font-size:.95rem;line-height:1.7;color:#26303c;background:#f4f4f0;border:1px solid var(--border);border-radius:12px;padding:18px 20px;white-space:pre-wrap;font-family:Sora,system-ui,sans-serif;font-size:1.08rem}

/* Listing description being written (AI queued) */
.ld-piece.writing{background:linear-gradient(180deg,#fffdf8,#fbf4e3);border-left-color:#d9a908}
.ld-writing{color:#b08a2e;font-weight:700}

/* Listing descriptions — new-address form */
.ld-newaddr{margin-top:14px;padding-top:14px;border-top:1px dashed var(--border)}
.ld-link{background:none;border:0;color:var(--gold-dark);font:700 .86rem Sora;cursor:pointer;padding:0}
.ld-link:hover{color:var(--gold)}
#ldNewAddrForm{margin-top:14px;max-width:620px}

/* ── Websites — little squares per listing ── */
.wsite-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.wsite{position:relative;background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);transition:box-shadow .15s,transform .12s}
.wsite:hover{box-shadow:0 18px 44px rgba(12,27,46,.14);transform:translateY(-2px)}
.wsite-shot{height:170px;background:#101426 center/cover no-repeat;position:relative}
.wsite-shot.empty{display:grid;place-items:center;font-size:2.2rem;background:linear-gradient(135deg,#1a2540,#101426);color:#cdb87f}
.wsite-badge{position:absolute;top:12px;left:12px;z-index:2;font:700 .7rem Sora;padding:5px 11px;border-radius:100px;color:#fff;backdrop-filter:blur(3px)}
.wsite-badge.live{background:rgba(47,143,91,.95)}.wsite-badge.draft{background:rgba(201,138,30,.95)}
.wsite-b{padding:15px 17px 17px}
.wsite-b h3{margin:0;font-size:1.08rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsite-place{font-size:.8rem;color:var(--text-secondary);margin-top:2px}
.wsite-url{font:600 .82rem Sora;color:#3a5a78;margin-top:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsite-url.vanity{color:var(--gold-dark);font-weight:800}
.wsite-why{font-size:.82rem;color:#4a4f63;line-height:1.5;margin:11px 0 14px;background:#f4f4f0;border:1px solid var(--border);border-radius:9px;padding:10px 12px}
.wsite-acts{display:flex;gap:9px}
.wsite-acts .btn{flex:1}

/* Website squares — in-production placeholder */
.wsite.placeholder{background:linear-gradient(180deg,#fffdf8,#fbf4e3);border-color:#ecdfbb}
.wsite-shot.building{filter:grayscale(.5) brightness(.96)}
.wsite-shot.building::after,.wsite.placeholder .wsite-shot.empty::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(184,144,47,.06),rgba(184,144,47,.06) 12px,transparent 12px,transparent 24px)}
.wsite-badge.build{background:rgba(201,138,30,.95)}
.wsite-why.build{background:#fff;border-color:#ecdfbb;color:#8a6a1e}

/* Website squares — clickable property URL + vanity */
a.wsite-url{display:block;text-decoration:none}
a.wsite-url:hover{color:#101426;text-decoration:underline}
.wsite-soon{color:#5f6572;font-weight:600;font-style:italic}
.wsite-why strong{color:#101426}

/* ── QR Codes — branded, downloadable code per listing ── */
.qr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.qr-card{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);transition:box-shadow .15s,transform .12s;display:flex;flex-direction:column}
.qr-card:hover{box-shadow:0 18px 44px rgba(12,27,46,.14);transform:translateY(-2px)}
.qr-canvas{display:grid;place-items:center;padding:22px 22px 6px;background:#fff}
.qr-canvas canvas,.qr-canvas svg{width:200px;height:200px;border-radius:12px;background:#fff;box-shadow:0 6px 18px rgba(12,27,46,.12)}
.qr-canvas.building{height:222px;font-size:2.4rem;color:#cdb87f;background:linear-gradient(135deg,#1a2540,#101426)}
.qr-b{padding:6px 17px 17px}
.qr-b h3{margin:8px 0 0;font-size:1.06rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qr-place{font-size:.8rem;color:var(--text-secondary);margin-top:2px}
.qr-link{font:700 .8rem Sora;color:var(--gold-dark);margin-top:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qr-why{font-size:.82rem;color:#4a4f63;line-height:1.5;margin:10px 0 13px;background:#f4f4f0;border:1px solid var(--border);border-radius:9px;padding:10px 12px}
.qr-why.build{background:#fff;border-color:#ecdfbb;color:#8a6a1e}
.qr-acts{display:flex;gap:8px;flex-wrap:wrap}
.qr-acts .btn{flex:1 1 calc(50% - 4px);min-width:0;padding:8px 10px;font-size:.76rem;justify-content:center}
.qr-card.placeholder{background:linear-gradient(180deg,#fffdf8,#fbf4e3);border-color:#ecdfbb}

/* ── Social Media — connect banner + 30-day calendar ── */
.social-connect{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#101426,#1a2540);border-radius:14px;padding:15px 20px;margin-bottom:18px;text-decoration:none;box-shadow:0 12px 30px rgba(12,27,46,.18)}
.social-connect:hover{transform:translateY(-1px)}
.sc-ic{font-size:1.6rem;flex:none}
.sc-tx{flex:1}.sc-tx strong{display:block;color:#fff;font:800 1rem Sora}.sc-tx span{display:block;color:#a9b8cb;font-size:.84rem;margin-top:2px}
.sc-go{flex:none;background:#ffd84d;color:#101426;font:800 .85rem Sora;padding:9px 18px;border-radius:100px}
.soc-hint{font-size:.84rem;color:var(--text-secondary);background:#f4f4f0;border:1px solid var(--border);border-radius:10px;padding:10px 13px;margin-bottom:14px}
.soc-kwbar{font-size:.86rem;color:#1f3a2a;background:linear-gradient(135deg,#f3f8f0,#e9f3e2);border:1px solid #d3e6c8;border-radius:10px;padding:11px 14px;margin-bottom:12px}.soc-kwbar strong{color:#2f6b3f}
/* Campaign tiles: compact, horizontal, built to be tapped — the full post
   lives in the modal, so the calendar reads at half the old height. */
.soc-cal{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.soc-day{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:box-shadow .14s,transform .1s,border-color .14s;display:flex;flex-direction:row;min-height:78px}
.soc-day:hover{box-shadow:0 3px 10px rgba(12,27,46,.16);transform:translateY(-2px);border-color:var(--gold)}
.soc-day:hover .soc-openlink{color:var(--gold-dark,#8a6a08)}
.soc-day:hover .soc-openlink i{transform:translateX(3px)}
.soc-shot{flex:0 0 72px;background:#1a2540 center/cover no-repeat;position:relative}
.soc-openlink{font:700 .7rem Sora;color:#8a94a2;margin-top:auto;display:inline-flex;align-items:center;gap:4px}
.soc-openlink i{font-style:normal;transition:transform .14s}
.soc-daynum{position:absolute;top:8px;left:8px;background:rgba(12,27,46,.78);color:#fff;font:800 .68rem Sora;padding:3px 9px;border-radius:100px}
.soc-dayb{padding:9px 11px 9px;display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.soc-type{font:800 .68rem Sora;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-dark)}
.soc-who{font-size:.7rem;color:#4a4f63;line-height:1.3}.soc-who strong{color:#37424f}
.soc-cap{font-size:.8rem;color:#37424f;line-height:1.42;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.soc-keys{display:flex;flex-wrap:wrap;gap:5px}
.soc-key{font:600 .62rem Sora;color:#3a5a78;background:#eef3f7;border:1px solid #dbe6ef;border-radius:100px;padding:2px 8px;white-space:nowrap}
.soc-copy{align-self:flex-start;font:700 .74rem Sora;color:var(--text-primary);background:#f1f1ec;border:0;border-radius:7px;padding:6px 11px;cursor:pointer}
.soc-copy:hover{background:#e9e1cf}

/* ── DARK-MODE TEST LAYER (.mml-dark) ─────────────────────────────────────
   Currently live on social.html only. The app's base theme is already dark
   (pages opt INTO light via .theme-light), so var()-driven components adapt
   for free; this layer re-skins the hardcoded-light pieces the Social page
   uses. Approve it → roll the class out portal-wide, page by page. */
.mml-dark .mml-intro{background:linear-gradient(135deg,#141d2c,#1a2334);border-color:#2b3648;border-left-color:var(--gold,#d9a908);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.mml-dark .mml-intro-tx h2{color:#f2e9d5}
.mml-dark .mml-intro-tx p{color:#9aa6b7}
.mml-dark .mml-intro-chips span{color:#c8d2df;background:#101826;border-color:#2b3648}
.mml-dark .mml-intro-btn{background:#101826;border:1px solid #2b3648;color:#e6ecf4}
.mml-dark .mml-secnav{background:rgba(13,18,28,.85);border-color:#2b3648}
.mml-dark .mml-secnav a{color:#c8d2df}
.mml-dark .soc-kwbar{color:#bfe3cc;background:linear-gradient(135deg,#12241a,#0f2016);border-color:#234531}
.mml-dark .soc-kwbar strong{color:#5fd08d}
.mml-dark .soc-day{background:#141d2c;border-color:#2b3648}
.mml-dark .soc-day:hover{border-color:var(--gold,#d9a908);box-shadow:0 3px 12px rgba(0,0,0,.5)}
.mml-dark .soc-type{color:#e2bf6f}
.mml-dark .soc-who{color:#8d99ab}.mml-dark .soc-who strong{color:#c8d2df}
.mml-dark .soc-key{color:#9fb6cb;background:#101826;border-color:#2b3648}
.mml-dark .soc-openlink{color:#71809a}
.mml-dark .soc-day:hover .soc-openlink{color:var(--gold,#e2bf6f)}
.mml-dark .soc-box{background:#161f2e;color:#e6ecf4}
.mml-dark .soc-box-b textarea{background:#101826;color:#e6ecf4;border:1px solid #2b3648}
.mml-dark .social-diag{background:#241d0d;border-color:#4a3c14;color:#d8bd7a}
.mml-dark .social-diag code{background:#101826;border-color:#4a3c14;color:#e2bf6f}
.mml-dark [data-soc-wk-prev],.mml-dark [data-soc-wk-next]{background:#141d2c !important;border-color:#2b3648 !important;color:#c8d2df !important}
.mml-dark #studioPass > div{background:#141d2c !important;border-color:#2b3648 !important}
.mml-dark #studioPass > div [style*="color:#101426"]{color:#e6ecf4 !important}
.mml-dark .reel-confirm{background:linear-gradient(180deg,#12241a,#0f2016);border-color:#234531;color:#9fd8b4}
.mml-dark .nitro-moreinfo{background:#101826;border-color:var(--gold,#d9a908);color:#e6ecf4}
.mml-dark .nitro-ready{color:#5fd08d}
/* Reels page (dark test #2) — its hardcoded-light bits. Inline styles need
   !important to lose gracefully. */
.mml-dark .rl-style{border-color:#2b3648 !important;background:#141d2c}
.mml-dark .rl-style strong{color:#e6ecf4}
.mml-dark .rl-style span{color:#8d99ab !important}
.mml-dark .mml-step{background:#141d2c;border-color:#2b3648}
.mml-dark .mml-step strong{color:#e6ecf4}
.mml-dark .mml-step em{color:#8d99ab}
.mml-dark .mml-step.done{background:linear-gradient(180deg,#12241a,#0f2016);border-color:#234531}
.mml-dark #reelBrandForm{background:#1c1809 !important;border-color:#4a3c14 !important}
.mml-dark .wb-kicker{color:#e2bf6f}
.mml-dark [style*="color:#5a6572"]{color:#8d99ab !important}
.mml-dark [style*="color:#33414f"]{color:#c8d2df !important}
.mml-dark [style*="color:#101426"]{color:#e6ecf4 !important}
.mml-dark [style*="background:#fff"]:not(img):not(.nitro-help-box):not(.soc-box){background:#141d2c !important}
.mml-dark [style*="border:1px solid #e7ebf0"],.mml-dark [style*="border:1px solid #e3e8ee"]{border-color:#2b3648 !important}
/* Edit & copy modal */
.soc-modal{position:fixed;inset:0;z-index:240;background:rgba(8,18,32,.55);display:none;align-items:center;justify-content:center;padding:24px}
.soc-modal.open{display:flex}
.soc-box{background:#fff;border-radius:18px;max-width:440px;width:100%;overflow:hidden;position:relative;box-shadow:0 30px 80px rgba(8,18,32,.4)}
.soc-x{position:absolute;top:10px;right:14px;z-index:2;background:rgba(0,0,0,.4);color:#fff;border:0;width:30px;height:30px;border-radius:50%;font-size:1.3rem;cursor:pointer;line-height:1}
.soc-box-shot{height:180px;background:#1a2540 center/cover no-repeat}
.soc-box-b{padding:18px 20px 20px}
.soc-box-h{font:800 .72rem Sora;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:8px}
.soc-box-b textarea{width:100%;border:1px solid var(--border);border-radius:10px;padding:12px 14px;font:inherit;font-size:.92rem;line-height:1.5;box-sizing:border-box;resize:vertical}
.soc-box-go{display:block;width:100%;margin-top:12px;font:800 1rem Sora;color:#fff;background:linear-gradient(135deg,#1a2540,#101426);border:0;border-radius:12px;padding:13px;cursor:pointer}

/* Social — connected banner + send row */
.social-connect.on{background:linear-gradient(135deg,#143a26,#1f6a42)}
.soc-send{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}

/* Social — admin diagnostic */
.social-diag{background:#fff8e6;border:1px solid #f0d98a;border-radius:10px;padding:12px 15px;margin-bottom:18px;font-size:.84rem;color:#6a5320;line-height:1.5}
.social-diag .sd-h{font:800 .72rem Sora;letter-spacing:.06em;text-transform:uppercase;color:#b08a2e;margin-bottom:5px}
.social-diag code{background:#fff;border:1px solid #f0d98a;border-radius:5px;padding:1px 6px;font-size:.8rem}

/* Step infographic — replaces intro paragraphs nobody reads: numbered icon
   chips with arrows, scannable in two seconds. Shared across tool pages. */
.mml-steps{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin-top:10px}
.mml-step{position:relative;flex:1;min-width:132px;max-width:210px;background:#fff;border:1px solid var(--gold-line,#ecdfbb);border-radius:12px;padding:10px 12px 9px;display:flex;flex-direction:column}
.mml-step.done{background:linear-gradient(180deg,#f1f7f3,#e7f2ea);border-color:#cfe6da}
.mml-step-n{position:absolute;top:-8px;left:-6px;width:20px;height:20px;border-radius:50%;background:#101426;color:#f0d09a;font:800 .68rem 'Sora',sans-serif;display:grid;place-items:center}
.mml-step-ic{font-size:1.15rem;line-height:1;margin-bottom:4px}
.mml-step strong{font-size:.8rem;color:#1d2433}
.mml-step em{font-style:normal;font-size:.7rem;color:#4a4f63;line-height:1.35;margin-top:1px}
.mml-step-arw{align-self:center;color:var(--gold-dark,#8a6a08);font-weight:800;font-size:1.05rem}
@media (max-width:700px){.mml-step-arw{display:none}}

/* Reel render confirmation — loud "we've got it, go live your life" state. */
.reel-confirm{background:linear-gradient(180deg,#f1f7f3,#e7f2ea);border:1px solid #cfe6da;border-radius:12px;padding:12px 15px;font-size:.88rem;color:#205a3e;line-height:1.5}

/* Workbench header — the house you're working on, front and center. Reused
   across deliverable pages as the standard "what/where/why" block. */
.wb-head{text-align:center;margin:6px auto 18px;max-width:720px}
.wb-kicker{font:800 .66rem 'Sora',sans-serif;letter-spacing:.14em;color:var(--gold-dark,#8a6a08)}
.wb-head h2{font-family:Sora,sans-serif;font-size:2rem;color:var(--text-primary);margin:4px 0 6px;line-height:1.1}
.wb-head p{font-size:.88rem;color:var(--text-secondary);line-height:1.55;margin:0}

/* Photo Studio — hover to enlarge a MAXed/staged result */
.studio-tile{position:relative;transition:transform .18s ease, box-shadow .18s ease;}
/* z-index must clear the fixed sidebar (90) and nav so an enlarged tile is
   never covered by page chrome, whichever edge of the grid it sits on. */
.studio-tile:hover{transform:scale(1.75);z-index:400;box-shadow:0 22px 55px rgba(7,20,36,.45);}
.studio-tile:hover .studio-tile-img{cursor:zoom-in;}
@media (max-width:640px){.studio-tile:hover{transform:scale(1.35);}}

/* ============================================================
   THEME SYSTEM (doc 29) — everything is tokens.
   A "theme" = one set of token values on <html data-theme>. Layout and
   behavior NEVER change; only tokens + a few chrome skins swap. This makes
   dark mode, seasonal skins, brand themes, and per-agent brand color all
   free. Light (dotted) is the standing default. app.js always sets
   data-theme on the root, so `[data-theme]:not([data-theme="light"])`
   targets the non-light skins collectively.
   ============================================================ */

/* Token defaults live on the light surface every portal page already carries. */
.theme-light {
  --thm-card: #ffffff;
  --thm-card-bd: #e8e6df;
  --thm-panel: #f4f4f0;
  --thm-ink: #101426;
  --thm-mut: #4a4f63;
  --thm-radius: 16px;
  --thm-cardsh: 0 1px 2px rgba(16,24,40,.04), 0 10px 28px -12px rgba(16,24,40,.14);
  --thm-ch: translateY(-2px);
  --thm-csh: 0 18px 40px -16px rgba(16,24,40,.20);
  --thm-btn-fg: #ffffff;
  --thm-btn-bg: #123ec4;
  --thm-btn-bd: transparent;
  --thm-ghost-bd: rgba(0,0,0,.14);
  --thm-ghost-fg: #101426;
  --thm-input-bg: #ffffff;
  --thm-input-bd: #d7d5cd;
}

/* ☀️ LIGHT — warm off-white with the signature fine dotted texture behind
   the card area. This dotted-light background is the standing default. */
.theme-light {
  background:
    radial-gradient(rgba(16,20,38,.05) 1px, transparent 1.6px) 0 0 / 18px 18px,
    linear-gradient(160deg, #f4f2ec, #e6e3d8) fixed;
}

/* 🌙 DARK — deep radial navy, translucent frosted cards, gold primary. */
[data-theme="dark"] .theme-light {
  background: radial-gradient(circle at 25% -10%, #1c2440, #0c101d) fixed;
  color: #eef1f8;
  --thm-card: rgba(28,36,64,.72);
  --thm-card-bd: rgba(255,255,255,.10);
  --thm-panel: rgba(255,255,255,.05);
  --thm-ink: #f2f5fc;
  --thm-mut: #b3bacd;
  --thm-cardsh: 0 1px 2px rgba(0,0,0,.3), 0 14px 34px -14px rgba(0,0,0,.55);
  --thm-csh: 0 20px 46px -14px rgba(0,0,0,.6);
  --thm-btn-fg: #14183a;
  --thm-btn-bg: #ffd84d;
  --thm-ghost-bd: rgba(255,255,255,.22);
  --thm-ghost-fg: #eef1f8;
  --thm-input-bg: rgba(255,255,255,.06);
  --thm-input-bd: rgba(255,255,255,.16);
  --accent: #7fa0ff;
}
[data-theme="dark"] .theme-light .card,
[data-theme="dark"] .theme-light .stat-card { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ◐ MONO — true high-contrast B&W: white cards, hard black borders, an
   offset "comic" shadow that snaps further on hover. A designed look, not a
   grayscale filter. (Cards stay white so every existing black-on-white label
   remains legible across custom card styles — the chrome is what turns mono.) */
[data-theme="mono"] .theme-light {
  background: #f5f5f2;
  color: #0d0d0d;
  --thm-card: #ffffff;
  --thm-card-bd: #0d0d0d;
  --thm-panel: #ffffff;
  --thm-ink: #0d0d0d;
  --thm-mut: #3a3a3a;
  --thm-radius: 4px;
  --thm-cardsh: 5px 5px 0 #0d0d0d;
  --thm-ch: translate(-3px,-3px);
  --thm-csh: 9px 9px 0 #0d0d0d;
  --thm-btn-fg: #ffffff;
  --thm-btn-bg: #0d0d0d;
  --thm-btn-bd: #0d0d0d;
  --thm-ghost-bd: #0d0d0d;
  --thm-ghost-fg: #0d0d0d;
  --thm-input-bg: #ffffff;
  --thm-input-bd: #0d0d0d;
  --accent: #0d0d0d;
}
[data-theme="mono"] .theme-light .card,
[data-theme="mono"] .theme-light .stat-card { border-width: 2px; border-style: solid; }

/* ✨ SPECIAL (seasonal slot) — currently HOLIDAY: midnight blue, red accent,
   frosted cards over a dark scrim, falling-snow garnish (app.js). Swap this
   slot's values for Halloween, July 4th, etc. — ONE special slot. */
[data-theme="holiday"] .theme-light {
  background:
    linear-gradient(rgba(8,14,36,.55), rgba(8,14,36,.72)),
    radial-gradient(circle at 50% -20%, #16224a, #0a0f24) fixed;
  color: #eef1f8;
  --thm-card: rgba(20,28,58,.55);
  --thm-card-bd: rgba(255,255,255,.14);
  --thm-panel: rgba(255,255,255,.06);
  --thm-ink: #f4f6fd;
  --thm-mut: #b7c0da;
  --thm-cardsh: 0 14px 34px -14px rgba(0,0,0,.5);
  --thm-csh: 0 20px 46px -14px rgba(0,0,0,.55);
  --thm-btn-fg: #ffffff;
  --thm-btn-bg: #e5484d;
  --thm-ghost-bd: rgba(255,255,255,.24);
  --thm-ghost-fg: #f4f6fd;
  --thm-input-bg: rgba(255,255,255,.06);
  --thm-input-bd: rgba(255,255,255,.18);
  --accent: #ff6b70;
}
[data-theme="holiday"] .theme-light .card,
[data-theme="holiday"] .theme-light .stat-card { backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px); }

/* ── Token consumers — written once, gated to the non-light skins so LIGHT
   keeps its existing hand-tuned look untouched. ─────────────────────────── */
[data-theme]:not([data-theme="light"]) .theme-light .card,
[data-theme]:not([data-theme="light"]) .theme-light .stat-card,
[data-theme]:not([data-theme="light"]) .theme-light .listing-card,
[data-theme]:not([data-theme="light"]) .theme-light .credit-meter {
  background: var(--thm-card);
  border-color: var(--thm-card-bd);
  box-shadow: var(--thm-cardsh);
  color: var(--thm-ink);
}
[data-theme]:not([data-theme="light"]) .theme-light .card:hover,
[data-theme]:not([data-theme="light"]) .theme-light .stat-card:hover {
  transform: var(--thm-ch);
  box-shadow: var(--thm-csh);
  border-color: var(--thm-card-bd);
}
/* Typography overrides are scoped to .main-content so body-appended overlays
   (the guided tour, Max concierge, popups) keep their own white-card styling
   and never end up with white text on a white modal. Cards set their own ink
   color, so text inside them stays consistent regardless. */
[data-theme]:not([data-theme="light"]) .theme-light .main-content h1,
[data-theme]:not([data-theme="light"]) .theme-light .main-content h2,
[data-theme]:not([data-theme="light"]) .theme-light .main-content h3,
[data-theme]:not([data-theme="light"]) .theme-light .main-content h4,
[data-theme]:not([data-theme="light"]) .theme-light .main-content h5,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .page-title,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .stat-value,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .listing-address,
[data-theme]:not([data-theme="light"]) .theme-light .main-content strong { color: var(--thm-ink); }
[data-theme]:not([data-theme="light"]) .theme-light .main-content p,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .page-subtitle,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .stat-label,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .listing-city,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .text-gray { color: var(--thm-mut); }

/* The dashboard (.mml-dash) is a self-contained LIGHT-design surface — its own
   cream background plus hardcoded-white sub-cards (.kpi/.lrow/.qcard/.attn-card/
   .mml-dfy) that are NOT tokenized. The .main-content text overrides above would
   paint light ink onto that light surface (white-on-white) under Dark/Holiday,
   so re-assert its native ink here at higher specificity. Its own dark hero
   bands (.m-hero, .mml-intro) set their own light text and are unaffected. Mono
   already uses dark ink so it was never broken. (A fully dark-themed dashboard
   is a larger, separate enhancement — legibility first.) */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .mml-dash h1,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .mml-dash h2,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .mml-dash h3,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .mml-dash h4,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .mml-dash h5,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .mml-dash .stat-value,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .mml-dash strong { color: #101426; }
[data-theme]:not([data-theme="light"]) .theme-light .main-content .mml-dash p,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .mml-dash .stat-label,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .mml-dash .text-gray { color: #4a4f63; }
/* …but the dashboard's own dark bands keep their light text (they set it inline
   or via .m-hero/.mml-intro; re-assert so the reset above doesn't darken them). */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .mml-dash .m-hero h1,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .mml-dash .m-hero h2,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .mml-dash .mml-intro h1,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .mml-dash .mml-intro h2,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .mml-dash .mml-intro p { color: inherit; }

/* Sidebar + footer cards follow the skin (they carry hardcoded light values). */
[data-theme]:not([data-theme="light"]) .theme-light .sidebar { background: var(--thm-panel); border-right-color: var(--thm-card-bd); }
[data-theme]:not([data-theme="light"]) .theme-light .sidebar-brand { color: var(--thm-ink); }
[data-theme]:not([data-theme="light"]) .theme-light .sidebar-link { color: var(--thm-mut); }
[data-theme]:not([data-theme="light"]) .theme-light .sidebar-link:hover { background: rgba(127,160,255,.12); color: var(--thm-ink); }
[data-theme]:not([data-theme="light"]) .theme-light .sidebar-link .icon { background: rgba(127,160,255,.14); }
[data-theme="mono"] .theme-light .sidebar-link:hover { background: #0d0d0d; color: #fff; }
[data-theme="mono"] .theme-light .sidebar-link .icon { background: #e6e6e2; }
[data-theme]:not([data-theme="light"]) .theme-light .sidebar-acct,
[data-theme]:not([data-theme="light"]) .theme-light .sidebar-help,
[data-theme]:not([data-theme="light"]) .theme-light .sidebar-bhot { background: var(--thm-panel) !important; border-color: var(--thm-card-bd) !important; }
[data-theme]:not([data-theme="light"]) .theme-light .sidebar-acct div,
[data-theme]:not([data-theme="light"]) .theme-light .sidebar-help div,
[data-theme]:not([data-theme="light"]) .theme-light .sidebar-bhot div { color: var(--thm-ink) !important; }

/* Buttons — primary follows the skin's CTA; ghost/outline get legible edges. */
[data-theme]:not([data-theme="light"]) .theme-light .btn-primary { background: var(--thm-btn-bg); color: var(--thm-btn-fg); border-color: var(--thm-btn-bd); }
[data-theme]:not([data-theme="light"]) .theme-light .btn-ghost,
[data-theme]:not([data-theme="light"]) .theme-light .btn-outline { border: 1.5px solid var(--thm-ghost-bd); color: var(--thm-ghost-fg); background: transparent; }
[data-theme]:not([data-theme="light"]) .theme-light .btn-ghost:hover,
[data-theme]:not([data-theme="light"]) .theme-light .btn-outline:hover { background: rgba(127,160,255,.12); color: var(--thm-ink); }
[data-theme="mono"] .theme-light .btn-ghost:hover,
[data-theme="mono"] .theme-light .btn-outline:hover { background: #0d0d0d; color: #fff; }
[data-theme]:not([data-theme="light"]) .theme-light .btn-secondary { background: var(--thm-panel); color: var(--thm-ink); }

/* Inputs. */
[data-theme]:not([data-theme="light"]) .theme-light input,
[data-theme]:not([data-theme="light"]) .theme-light select,
[data-theme]:not([data-theme="light"]) .theme-light textarea { background: var(--thm-input-bg); border-color: var(--thm-input-bd); color: var(--thm-ink); }

/* ── Sidebar theme switcher (rendered by app.js on every portal page). ───── */
.thm-switch { margin: 8px 16px 4px; }
/* Compact button row when it sits in the top bar (left of the property picker). */
.thm-switch-top { margin: 0 12px 0 0; align-self: center; }
.thm-switch-top .thm-row { gap: 4px; }
.thm-switch-top .thm-chip { flex: none; width: 30px; height: 28px; font-size: 13px; }
@media (max-width: 640px) { .thm-switch-top .thm-chip { width: 26px; height: 26px; } }
.thm-switch .thm-lbl { font: 800 .58rem 'Sora', sans-serif; letter-spacing: .12em; color:#5f6572; text-transform: uppercase; margin-bottom: 6px; }
.thm-switch .thm-row { display: flex; gap: 6px; }
.thm-chip { flex: 1; height: 32px; border-radius: 9px; border: 1.5px solid #e2e0d8; background: #fff; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: transform .12s ease, border-color .12s ease, background .12s ease; }
.thm-chip:hover { transform: translateY(-1px); border-color: #c7c4b8; }
.thm-chip.on { border-color: #123ec4; background: #eef3ff; box-shadow: inset 0 0 0 1px #123ec4; }
[data-theme]:not([data-theme="light"]) .theme-light .thm-switch .thm-lbl { color: var(--thm-mut); }
[data-theme]:not([data-theme="light"]) .theme-light .thm-chip { background: var(--thm-panel); border-color: var(--thm-card-bd); }
[data-theme]:not([data-theme="light"]) .theme-light .thm-chip.on { border-color: var(--accent); background: rgba(127,160,255,.16); box-shadow: inset 0 0 0 1px var(--accent); }
[data-theme="mono"] .theme-light .thm-chip.on { background: #0d0d0d; box-shadow: inset 0 0 0 1px #0d0d0d; }

/* ── Falling-snow garnish for the Holiday skin (app.js toggles #thmSnow). ── */
#thmSnow { position: fixed; inset: 0; pointer-events: none; z-index: 9998; overflow: hidden; }
#thmSnow b { position: absolute; top: -6%; color: #fff; opacity: .8; animation: thmSnowFall linear infinite; }
@keyframes thmSnowFall { to { transform: translateY(112vh) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #thmSnow { display: none; } .thm-chip, [data-theme]:not([data-theme="light"]) .theme-light .card:hover { transition: none; } }

/* Paused-for-launch sidebar slots (doc 30) — present but disabled, muted with
   a SOON pill. Opacity-based so it reads correctly in every theme. */
.sidebar-link.soon { opacity: .5; cursor: default; pointer-events: none; }
.sidebar-link.soon:hover { background: none; }
.soon-pill { margin-left: auto; font: 800 8px 'Sora', sans-serif; letter-spacing: .1em; color:#5f6572; background: rgba(16,20,38,.07); border-radius: 6px; padding: 2px 6px; }
[data-theme]:not([data-theme="light"]) .theme-light .soon-pill { background: rgba(255,255,255,.10); color: var(--thm-mut); }

/* ── Directional theme slider (Erik, July 21) — top bar, left of the property
   picker. Drag or tap along; the gradient hints each skin, the knob shows the
   active one. No labels — it's meant to be played with. ─────────────────── */
.thm-slider { position: relative; width: 96px; height: 26px; flex: none; align-self: center; }
.thm-slider-top { margin-right: 12px; }
.thm-track { position: absolute; top: 50%; left: 7px; right: 7px; height: 7px; transform: translateY(-50%); border-radius: 7px; cursor: pointer;
  background: linear-gradient(90deg, #f4d35e 0%, #f4d35e 22%, #123ec4 40%, #101010 66%, #e5484d 100%); box-shadow: inset 0 1px 2px rgba(0,0,0,.15); }
.thm-stop { position: absolute; top: 0; bottom: 0; width: 26px; margin-left: -13px; background: none; border: 0; padding: 0; cursor: pointer; z-index: 2; }
.thm-knob { position: absolute; top: 50%; width: 22px; height: 22px; margin-left: -11px; transform: translateY(-50%); border-radius: 50%; background: #fff;
  box-shadow: 0 2px 7px rgba(16,20,38,.30); border: 1.5px solid rgba(16,20,38,.12); display: flex; align-items: center; justify-content: center; font-size: 12px;
  cursor: grab; z-index: 3; transition: left .2s cubic-bezier(.4,0,.2,1); touch-action: none; }
.thm-knob:active { cursor: grabbing; }
[data-theme="dark"] .thm-knob, [data-theme="holiday"] .thm-knob { background: #1c2440; border-color: rgba(255,255,255,.2); }
@media (prefers-reduced-motion: reduce) { .thm-knob { transition: none; } }
@media (max-width: 640px) { .thm-slider-top { width: 76px; margin-right: 8px; } }

/* ═══ Deliverable pages — shared header (design: ← Back · icon-title · actions) ═══ */
.dlv-back { display: inline-block; font: 700 .82rem 'Sora', sans-serif; color: var(--primary, #123ec4); text-decoration: none; margin: 4px 0 14px; }
.dlv-back:hover { text-decoration: underline; }
.dlv-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.dlv-title { display: flex; gap: 14px; align-items: flex-start; flex: 1; min-width: 260px; }
.dlv-icon { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex: none; box-shadow: 0 2px 8px rgba(16,20,38,.12); }
.dlv-icon.web { background: linear-gradient(150deg,#1aa06a,#128a5a); }
.dlv-title h1 { font: 800 1.9rem/1.1 'Sora', sans-serif; color: var(--ink, #101426); margin: 0 0 4px; letter-spacing: -.01em; }
.dlv-title p { font-size: .92rem; color: #5b6172; max-width: 640px; margin: 0; line-height: 1.5; }
.dlv-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dlv-selrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.dlv-select { font: 700 .9rem 'Sora', sans-serif; color: var(--ink,#101426); background: #fff; border: 1.5px solid #e2e0d8; border-radius: 11px; padding: 9px 34px 9px 14px; cursor: pointer; }
.dlv-status { font-size: .85rem; color: #1a7a44; font-weight: 600; }
.dlv-status.build { color: #b7791f; }

/* ═══ Website page — single-listing detail ═══ */
.web-detail { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .web-detail { grid-template-columns: 1fr; } }
.web-left, .web-right { display: flex; flex-direction: column; gap: 16px; }
.web-card { background: #fff; border: 1px solid #e8e6df; border-radius: 16px; padding: 18px 20px; }
.web-card-h { font-weight: 800; color: var(--ink,#101426); margin-bottom: 10px; }
/* Browser mockup */
.web-browser { background: #fff; border: 1px solid #e8e6df; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(16,20,38,.08); }
.web-chrome { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #f3f2ec; border-bottom: 1px solid #e8e6df; }
.wc-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.wc-dot.r { background: #ff5f57; } .wc-dot.y { background: #febc2e; } .wc-dot.g { background: #28c840; }
.web-omni { flex: 1; margin: 0 8px; background: #fff; border: 1px solid #e2e0d8; border-radius: 8px; padding: 5px 12px; font: 600 .8rem 'Sora', sans-serif; color: #3b4252; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.web-expand { border: 0; background: none; cursor: pointer; font-size: 1rem; color: #5b6172; }
.web-frame { position: relative; height: 400px; overflow: hidden; background: #eef0f4; }
.web-frame iframe { border: 0; width: 166.6%; height: 666px; transform: scale(.6); transform-origin: top left; pointer-events: none; }
.web-frame-open { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; padding: 10px 18px; border: 0; border-radius: 10px; background: rgba(16,20,38,.86); color: #fff; font: 700 .85rem 'Sora', sans-serif; cursor: pointer; opacity: 0; transition: opacity .16s; }
.web-browser:hover .web-frame-open { opacity: 1; }
.web-cap { font-size: .82rem; color: #7a8090; text-align: center; margin: -4px 0 0; }
/* Networked listings */
.web-net-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid #eceae0; text-decoration: none; color: inherit; }
.web-net-row:first-of-type { border-top: 0; }
.web-net-shot { width: 46px; height: 40px; border-radius: 8px; background: #dfe3ea center/cover; display: flex; align-items: center; justify-content: center; flex: none; }
.web-net-tx { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.web-net-tx b { color: var(--ink,#101426); font-size: .9rem; }
.web-net-tx span { color: var(--primary,#123ec4); font-size: .78rem; }
.web-net-go { color:#5f6572; }
.web-net-note { font-size: .8rem; color: #7a8090; margin: 10px 0 0; }
/* URL card */
.web-url-lbl { display: block; font: 700 .82rem 'Sora', sans-serif; color: var(--ink,#101426); margin: 12px 0 6px; }
.web-url-lbl:first-child { margin-top: 0; }
.web-url-lbl span { color:#5f6572; font-weight: 500; }
.web-url-field { display: flex; align-items: center; gap: 6px; }
.web-url-field input { flex: 1; font: 600 .86rem 'Sora', sans-serif; color: #3b4252; background: #f7f8fb; border: 1px solid #e2e0d8; border-radius: 9px; padding: 9px 12px; }
.web-copy { width: 36px; height: 36px; flex: none; border: 1px solid #e2e0d8; border-radius: 9px; background: #fff; cursor: pointer; font-size: .95rem; }
.web-copy:hover { border-color: var(--primary,#123ec4); color: var(--primary,#123ec4); }
.web-url-note { font-size: .8rem; color: #7a8090; margin: 12px 0 0; line-height: 1.5; }
/* QR card */
.web-qr-card { text-align: center; }
.web-qr-h { font-weight: 800; color: var(--ink,#101426); margin-bottom: 12px; }
.web-qr { display: flex; justify-content: center; margin: 0 auto 10px; min-height: 180px; }
.web-qr-cap { font-size: .8rem; color: #7a8090; margin: 0 0 12px; }
.web-qr-tools { display: block; text-align: center; font: 700 .85rem 'Sora', sans-serif; color: var(--ink,#101426); text-decoration: none; border: 1px solid #e2e0d8; border-radius: 10px; padding: 10px; }
.web-qr-tools:hover { border-color: var(--primary,#123ec4); color: var(--primary,#123ec4); }
/* Purple upsell banner */
.web-upsell { display: flex; align-items: center; gap: 14px; text-decoration: none; background: linear-gradient(120deg,#3b2b8f,#5b3fc4); border-radius: 16px; padding: 18px 20px; color: #fff; }
.web-upsell-ic { font-size: 20px; }
.web-upsell b { display: block; font-size: .95rem; }
.web-upsell-cta { color: #ffd84d; font-weight: 700; font-size: .84rem; }
/* Building state */
.web-building { background: #fff; border: 1px dashed #cfd3dd; border-radius: 16px; padding: 44px 24px; text-align: center; }
.web-building-ic { font-size: 34px; margin-bottom: 10px; }
.web-building h3 { margin: 0 0 6px; color: var(--ink,#101426); }
.web-building p { color: #7a8090; font-size: .9rem; margin: 0; }

/* ═══ Deliverable pages — shared dark video banner (design: play + copy + gold stat) ═══ */
.dlv-banner { display: flex; align-items: center; gap: 18px; background: linear-gradient(120deg,#101426,#1a2240); border-radius: 16px; padding: 20px 24px; margin-bottom: 22px; cursor: pointer; color: #fff; }
.dlv-banner-play { width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--primary,#123ec4); display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; box-shadow: 0 6px 18px rgba(18,62,196,.45); }
.dlv-banner-tx { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.dlv-banner-tx b { font-size: 1rem; }
.dlv-banner-tx span { font-size: .85rem; color: #aeb6cd; line-height: 1.45; }
.dlv-banner-tx em { font: 700 .8rem 'Sora', sans-serif; font-style: normal; color: #ffd84d; }
.dlv-banner-stat { text-align: right; flex: none; }
.dlv-banner-stat b { display: block; font: 800 1.9rem/1 'Sora', sans-serif; color: #ffd84d; }
.dlv-banner-stat span { font: 700 .62rem 'Sora', sans-serif; letter-spacing: .1em; color: #aeb6cd; }
@media (max-width: 640px) { .dlv-banner { flex-wrap: wrap; } }
.dlv-icon.qr { background: #101426; color: #fff; font-size: 19px; }

/* QR page — design cards: big code, address, blue face link, scans stat, PNG/SVG/Copy */
.qr-face { display: block; font: 600 .82rem 'Sora', sans-serif; color: var(--primary,#123ec4); text-decoration: none; margin: 2px 0 10px; }
.qr-face:hover { text-decoration: underline; }
.qr-stat { display: flex; align-items: center; gap: 10px; background: #f7f8f4; border: 1px solid #eceae0; border-radius: 11px; padding: 9px 13px; margin-bottom: 12px; }
.qr-stat-eye { font-size: .95rem; }
.qr-stat-n b { font: 800 1rem 'Sora', sans-serif; color: var(--ink,#101426); margin-right: 6px; }
.qr-stat-n span { font-size: .74rem; color: #7a8090; }

/* ═══ Deliverable icon tiles per page (design colors) ═══ */
.dlv-icon.nitro { background: linear-gradient(150deg,#2b63f6,#123ec4); }
.dlv-icon.desc { background: linear-gradient(150deg,#f2b64a,#e09a1f); }
.dlv-icon.soc { background: linear-gradient(150deg,#ffd84d,#f0b429); }
.dlv-icon.stage { background: linear-gradient(150deg,#7c5cd6,#5b3fc4); }
.dlv-icon.spot { background: linear-gradient(150deg,#3b4252,#101426); }
.dlv-icon.proof { background: linear-gradient(150deg,#e2574c,#c43a30); }
.dlv-pill { display: inline-block; vertical-align: middle; font: 700 .62rem 'Sora', sans-serif; letter-spacing: .06em; background: #eef3ff; color: var(--primary,#123ec4); border-radius: 999px; padding: 4px 10px; margin-left: 8px; }

/* Photo Studio — the two experts as ONE toggle (Maxim navy/gold · Maxine purple/pink).
   Tap a name; that expert's card shows. Colors are re-asserted at winning
   specificity below so the theme text-reset can't darken the card's own text. */
.ps-crew { margin-bottom: 20px; }
.ps-crewtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
@media (max-width: 560px) { .ps-crewtabs { grid-template-columns: 1fr; } }
.ps-crewtab { display: flex; align-items: center; gap: 11px; text-align: left; background: #fff; border: 1.5px solid #e3e0d8; border-radius: 14px; padding: 11px 14px; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
.ps-crewtab:hover { transform: translateY(-1px); }
.ps-crewtab img, .ps-crewtab .ps-crewtab-fb { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 20px; background: #101426; }
.ps-crewtab-txt b { display: block; font: 800 .98rem 'Sora', sans-serif; color: #101426; }
.ps-crewtab-txt i { display: block; font-style: normal; font: 600 .72rem 'Sora', sans-serif; color:#5f6572; margin-top: 1px; }
.ps-crewtab.is-active { border-color: #123ec4; box-shadow: 0 0 0 3px #eef3ff; }
.ps-crewtab[data-ps-tab="maxine"].is-active { border-color: #7c4fd0; box-shadow: 0 0 0 3px #f3ecff; }

.ps-crewcard { border-radius: 18px; padding: 22px 24px; }
.ps-crewcard[hidden] { display: none; }
.ps-crewcard.maxim { background: linear-gradient(135deg,#131b38,#1c2a55); border: 1.5px solid #ffd84d; }
.ps-crewcard.maxine { background: linear-gradient(135deg,#3b2b6f,#5b3fa4); border: 1.5px solid #c9a7f0; }
.ps-crewhead { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }
.ps-crewhead img, .ps-crewhead .ps-crewhead-fb { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.35); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 26px; background: #101426; }
.ps-crewhead b { font-size: 1.06rem; margin-right: 8px; }
.ps-crewhead i { display: block; font-style: normal; font-size: .78rem; }
.ps-crewtag { font: 700 .58rem 'Sora', sans-serif; letter-spacing: .08em; border-radius: 999px; padding: 3px 9px; vertical-align: middle; }
.ps-crewtag.gold { background: #ffd84d; color: #101426; }
.ps-crewtag.pink { background: #e7c7ff; color: #3b1f66; }
.ps-crewcard p { font-size: .87rem; line-height: 1.55; margin: 0 0 16px; }
.ps-crewbtn { border: 0; border-radius: 11px; padding: 11px 18px; font: 700 .88rem 'Sora', sans-serif; cursor: pointer; }
.ps-crewbtn.gold { background: #ffd84d; color: #101426; }
.ps-crewbtn.pink { background: #e7c7ff; color: #3b1f66; }
.ps-crewbtn:hover { filter: brightness(1.06); }

/* Theme-proof: the crew card is a self-contained DARK surface. The global
   .main-content text-reset under Dark/Mono/Holiday (0,4,1) would otherwise
   paint its quote + subtitle dark → invisible on the dark card. Re-assert the
   card's own light text at matching-or-higher specificity in EVERY theme. */
.ps-crewcard b, .ps-crewcard p, .ps-crewhead i { color: #fff; }
.ps-crewcard p { color: rgba(255,255,255,.9); }
.ps-crewhead i { color: rgba(255,255,255,.66); }
[data-theme]:not([data-theme="light"]) .theme-light .main-content .ps-crewcard p { color: rgba(255,255,255,.9); }
[data-theme]:not([data-theme="light"]) .theme-light .main-content .ps-crewcard b,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .ps-crewcard strong { color: #fff; }
[data-theme]:not([data-theme="light"]) .theme-light .main-content .ps-crewhead i { color: rgba(255,255,255,.66); }
/* …and the gold/pink pill text stays its dark ink on the bright pill. */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .ps-crewtag.gold,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .ps-crewbtn.gold { color: #101426; }
[data-theme]:not([data-theme="light"]) .theme-light .main-content .ps-crewtag.pink,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .ps-crewbtn.pink { color: #3b1f66; }

/* Seller Proof page */
.sp-detail { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .sp-detail { grid-template-columns: 1fr; } }
.sp-left, .sp-right { display: flex; flex-direction: column; gap: 14px; }
.sp-report { position: relative; background: #fff; border: 1px solid #e8e6df; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(16,20,38,.08); height: 640px; }
.sp-report iframe { border: 0; width: 143%; height: 915px; transform: scale(.7); transform-origin: top left; pointer-events: none; }
.sp-report-open { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 10px 18px; border: 0; border-radius: 10px; background: rgba(16,20,38,.86); color: #fff; font: 700 .85rem 'Sora', sans-serif; cursor: pointer; opacity: 0; transition: opacity .16s; }
.sp-report:hover .sp-report-open { opacity: 1; }
.sp-dark { background: linear-gradient(130deg,#101426,#1a2240); border-radius: 16px; padding: 18px 20px; color: #fff; }
.sp-dark-h { font-weight: 800; margin-bottom: 8px; }
.sp-dark p { font-size: .85rem; color: #aeb6cd; line-height: 1.55; margin: 0; }
.sp-act { width: 100%; margin-bottom: 10px; }
.sp-act-ink { background: #101426; color: #fff; border: 0; }
.sp-act-ink:hover { background: #1a2240; color: #fff; }
.sp-act-row { display: flex; gap: 10px; }
.sp-act-row .btn { flex: 1; }

/* Profile & Brand — Brand Kit banner (design: dark ink + gold CTA) */
.bk-banner { display: flex; align-items: center; gap: 16px; background: linear-gradient(120deg,#101426,#1a2240); border-radius: 16px; padding: 20px 24px; margin-bottom: 20px; color: #fff; }
.bk-ic { width: 44px; height: 44px; flex: none; border-radius: 12px; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-size: 19px; }
.bk-tx { flex: 1; }
.bk-tx b { display: block; margin-bottom: 3px; }
.bk-tx span { font-size: .84rem; color: #aeb6cd; line-height: 1.5; }
.bk-cta { flex: none; background: #ffd84d; color: #101426; font: 700 .88rem 'Sora', sans-serif; text-decoration: none; border-radius: 11px; padding: 11px 18px; }
.bk-cta:hover { filter: brightness(1.06); }
@media (max-width: 640px) { .bk-banner { flex-wrap: wrap; } }

/* Approvals — design header (REVIEW QUEUE eyebrow + green Approve all) */
.ap-eyebrow { font: 800 .68rem 'Sora', sans-serif; letter-spacing: .14em; color: var(--primary,#123ec4); margin-bottom: 4px; }
.ap-approve-all { border: 0; border-radius: 12px; background: #123ec4; color: #fff; font: 700 .92rem 'Sora', sans-serif; padding: 13px 22px; cursor: pointer; box-shadow: 0 4px 14px rgba(18,62,196,.3); }
.ap-approve-all:hover { background: #1d9151; }

/* ═══ Nitro Index — full design body ═══ */
.nitro-idx-status { font-size: .85rem; color: #1a7a44; font-weight: 600; margin: 4px 0 14px; }
.nitro-idx { display: grid; grid-template-columns: 92px 1fr 300px; gap: 18px; align-items: start; }
@media (max-width: 1024px) { .nitro-idx { grid-template-columns: 74px 1fr; } .nitro-idx-side { grid-column: 1 / -1; } }
@media (max-width: 680px) { .nitro-idx { grid-template-columns: 1fr; } .nitro-idx-strip { flex-direction: row; overflow-x: auto; } }
.nitro-idx-strip { display: flex; flex-direction: column; gap: 10px; }
.nitro-idx-lbl { font: 800 .6rem 'Sora', sans-serif; letter-spacing: .1em; color:#5f6572; }
.nitro-thumb { position: relative; width: 100%; aspect-ratio: 1/.82; border: 2px solid #e2e0d8; border-radius: 10px; overflow: hidden; background: #eef0f4; cursor: pointer; padding: 0; }
.nitro-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nitro-thumb span { position: absolute; left: 5px; bottom: 4px; font: 700 .6rem 'Sora', sans-serif; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.nitro-thumb.on { border-color: var(--primary,#123ec4); box-shadow: 0 0 0 2px rgba(18,62,196,.2); }
.nitro-thumb.more { display: flex; align-items: center; justify-content: center; border-style: dashed; background: #f7f8fb; color: #7a8090; font: 700 .72rem 'Sora', sans-serif; cursor: default; }
.nitro-idx-main { display: flex; flex-direction: column; gap: 14px; }
.nitro-idx-photo { border-radius: 14px; overflow: hidden; background: #eef0f4; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.nitro-idx-photo img { width: 100%; height: 100%; object-fit: cover; }
.nitro-idx-seo { background: #fff; border: 1px solid #e8e6df; border-radius: 14px; padding: 18px 20px; }
.nitro-seo-h { display: flex; align-items: center; gap: 8px; font: 800 .66rem 'Sora', sans-serif; letter-spacing: .08em; color:#5f6572; margin: 14px 0 6px; }
.nitro-seo-h:first-child { margin-top: 0; }
.nitro-copybtn { margin-left: auto; border: 0; background: none; cursor: pointer; font: 700 .72rem 'Sora', sans-serif; color: var(--primary,#123ec4); }
.nitro-seo-title { font: 800 1.08rem 'Sora', sans-serif; color: var(--ink,#101426); }
.nitro-seo-desc { font-size: .9rem; color: #3b4252; line-height: 1.55; }
.nitro-seo-kw { display: flex; flex-wrap: wrap; gap: 7px; }
.nitro-seo-kw span { background: #eef3ff; color: var(--primary,#123ec4); border-radius: 999px; padding: 4px 11px; font: 600 .78rem 'Sora', sans-serif; }
.nitro-idx-side { display: flex; flex-direction: column; gap: 14px; }
.nitro-acct { background: linear-gradient(150deg,#101426,#1a2240); border-radius: 16px; padding: 18px 20px; color: #fff; }
.nitro-acct-lbl { font: 800 .62rem 'Sora', sans-serif; letter-spacing: .1em; color: #ffd84d; }
.nitro-acct-big { font: 800 2.6rem/1 'Sora', sans-serif; color: #fff; margin: 6px 0 2px; }
.nitro-acct-sub { font-size: .74rem; color: #aeb6cd; margin-bottom: 14px; }
.nitro-acct-rows > div { display: flex; justify-content: space-between; font-size: .82rem; color: #cdd3e4; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.08); }
.nitro-acct-rows b { color: #fff; }
.nitro-acct-total { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.16); font: 800 .92rem 'Sora', sans-serif; }
.nitro-acct-total b { color: #ffd84d; }
.nitro-where { background: #fff; border: 1px solid #e8e6df; border-radius: 14px; padding: 16px 18px; }
.nitro-where-h { font-weight: 800; color: var(--ink,#101426); margin-bottom: 10px; }
.nitro-where-li { font-size: .85rem; color: #3b4252; padding: 4px 0; }
.nitro-share { display: flex; flex-direction: column; gap: 9px; }
.nitro-share .btn { width: 100%; }

/* ═══ Portal sidebar — exact port of design 01 (Dashboard Global) ═══ */
.mside-brand { display: flex; align-items: center; padding: 0 8px 18px; }
.mside-word { font: 800 20px 'Sora', sans-serif; color: #101426; flex: 1; text-decoration: none; }
.mside-word span { color: #123ec4; }
.mside-dtog { display: inline-flex; align-items: center; width: 34px; height: 19px; border-radius: 99px; background: #d8d5cb; padding: 2px; cursor: pointer; flex: none; transition: background .2s; }
.mside-dtog.on { background: #123ec4; }
.mside-knob { width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16,20,38,.35); transition: transform .2s; }
.mside-dtog.on .mside-knob { transform: translateX(15px); }
.mside-spacer0 { height: 0; }
.mmint { font: 800 11px 'Sora', sans-serif; letter-spacing: .1em; color: #5b6070; padding: 16px 8px 6px; }
.mmint:first-of-type, .mside-brand + .mside-spacer0 + .mmint { padding-top: 0; }
.mnav { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 9px; font: 600 13px 'Sora', sans-serif; color: #4a4f63; cursor: pointer; transition: all .12s; text-decoration: none; }
.mnav:hover { background: #f3f4f8; color: #4a4f63; }
.mnav.on { background: #eef3ff; color: #123ec4; box-shadow: inset 3px 0 0 #123ec4; }
.mchip { width: 23px; height: 23px; border-radius: 7px; background: #f1f2f6; display: flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.mnav.on .mchip { background: #dbe6ff; }
.mnav-badge { margin-left: auto; font: 800 10px 'Sora', sans-serif; color: #fff; background: #123ec4; border-radius: 99px; padding: 2px 8px; }
.mside-acct { display: flex; align-items: center; gap: 9px; margin: 16px 0 2px; padding: 11px 5px; border-top: 1px solid #eee; border-radius: 10px; cursor: pointer; text-decoration: none; }
.mside-acct:hover { background: #f7f9ff; }
.mside-av { width: 32px; height: 32px; border-radius: 50%; background: #eef3ff; color: #123ec4; display: flex; align-items: center; justify-content: center; font: 800 11px 'Sora', sans-serif; flex: none; background-size: cover; background-position: center; }
.mside-acctx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mside-acctn { font: 700 11.5px 'Sora', sans-serif; color: #101426; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* On the white sidebar #2e9e6b measured 2.55:1 at 10px. Same hue, readable. */
.mside-acctp { font: 600 11px 'Sora', sans-serif; color: #1f6a42; }             /* 5.20:1 on #fff */
/* The credit split. Used to be written into a span that was display:none in
   its own markup, so the balance was invisible on every page in the portal. */
.mside-acctc { display: block; font: 700 11px 'Sora', sans-serif; color: #5f6572; margin-top: 2px; }
.mside-arw { font-size: 13px; color: #c3c7d2; }
/* Keep the whole deliverable-page layout on the design ground */
.dashboard-layout > .main-content { background: #f6f5f1; }

/* Deliverable pages (any page with aside.sidebar) use the design chrome: the
   sidebar IS the nav — hide the legacy top bar there. Dashboard keeps its bar. */
body:has(aside.sidebar) > nav.nav { display: none; }
body:has(aside.sidebar) .dashboard-layout { min-height: 100vh; }
/* …and reclaim the space it was holding. `.dashboard-layout` reserves 64px for
   a fixed top bar and `.sidebar` starts 64px down; with the bar hidden that was
   just an empty cream strip at the top of every portal page. On a phone the
   band earns its keep again — the fixed ☰ sits in it. */
body:has(aside.sidebar) .dashboard-layout { padding-top: 0; }
body:has(aside.sidebar) .sidebar { top: 0; }
@media (max-width: 1024px) {
  body:has(aside.sidebar) .dashboard-layout { padding-top: 62px; }
  /* …plus the 38px admin banner when one is showing. */
  body.mml-imp-on:has(aside.sidebar) .dashboard-layout { padding-top: 100px; }
}

/* Approvals — action buttons (design .abtn) + REVIEW QUEUE band */
.abtn { font: 700 11.5px 'Sora', sans-serif; border-radius: 8px; padding: 8px 13px; cursor: pointer; transition: transform .1s, filter .1s; text-decoration: none; display: inline-block; white-space: nowrap; }
.abtn:hover { filter: brightness(.97); transform: translateY(-1px); }
.ap-groupby { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 14px 0 4px; }
.ap-groupby-lbl { font: 700 11px 'Sora', sans-serif; letter-spacing: .09em; color:#5f6572; }
.ap-seg { display: flex; gap: 3px; background: #f1f2f6; border-radius: 10px; padding: 3px; }
.ap-seg span { font: 700 11.5px 'Sora', sans-serif; border-radius: 8px; padding: 7px 14px; cursor: pointer; color:#5f6572; }
.ap-seg span.on { color: #101426; background: #fff; }

/* ═══ Settings / Profile & Brand — design look (scoped; nothing removed) ═══ */
.settings-page .mml-secnav { background: none; border: 0; padding: 0 0 0 6px; display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 0; }
.settings-page .mml-secnav a { display: inline-block; font: 700 12px 'Sora', sans-serif; color:#5f6572; background: #efeee9; border: 1px solid #e0ded6; border-bottom: 0; border-radius: 11px 11px 0 0; padding: 10px 15px; text-decoration: none; }
.settings-page .mml-secnav a:hover { color: #101426; }
.settings-page .mml-secnav a.active, .settings-page .mml-secnav a:target { color: #101426; background: #fbfaf7; box-shadow: inset 0 3px 0 #123ec4; }
/* Section cards sit on the design's cream panel */
.settings-page .card.wide, .settings-page .card { background: #fbfaf7; border: 1px solid #e0ded6; border-radius: 16px; }
.settings-page .form-label, .settings-page .lbl { font: 800 11px 'Sora', sans-serif; letter-spacing: .05em; color:#5f6572; text-transform: uppercase; }
.settings-page .form-control { background: #fff; border: 1px solid #e4e2da; border-radius: 10px; font: 600 13px 'Sora', sans-serif; color: #101426; }
.settings-page .form-control:focus { border-color: #123ec4; box-shadow: 0 0 0 3px rgba(18,62,196,.12); }

/* Settings tabs (design ftab pills) */
.ftabs { display: flex; gap: 4px; padding-left: 6px; flex-wrap: wrap; margin-bottom: 0; }
.ftab { font: 700 12px 'Sora', sans-serif; color:#5f6572; background: #efeee9; border: 1px solid #e0ded6; border-bottom: 0; border-radius: 11px 11px 0 0; padding: 10px 15px; cursor: pointer; }
.ftab:hover { color: #101426; }
.ftab.on { color: #101426; background: #fbfaf7; box-shadow: inset 0 3px 0 #123ec4; }
.settings-page .card { margin-top: 0; }

/* ── Social Media page — design 07 (single-listing "always on" dashboard) ── */
.soc-switch { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.soc-switch-lbl { font:800 .66rem 'Sora',sans-serif; letter-spacing:.1em; color:#5f6572; }
.soc-switch-seg { display:flex; gap:6px; flex-wrap:wrap; background:#fff; border:1px solid #e8e6df; border-radius:12px; padding:5px; }
.soc-switch-btn { border:none; background:none; border-radius:8px; padding:7px 14px; font:700 .82rem 'Sora',sans-serif; color:#5a6572; cursor:pointer; }
.soc-switch-btn.on { background:#123ec4; color:#fff; }
.soc-dash { display:flex; flex-direction:column; gap:18px; }
.soc-dash-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.soc-dash-title { margin:0; font:800 1.5rem 'Sora',sans-serif; color:#101426; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.soc-dash-sub { margin:4px 0 0; color:#5a6572; font-size:.9rem; }
.soc-dash-act { display:flex; gap:8px; flex-wrap:wrap; }
.soc-askmax { display:inline-flex; align-items:center; gap:7px; }
.soc-ai-pill { font:800 .6rem 'Sora',sans-serif; letter-spacing:.06em; color:#4a3aa7; background:#efeafc; border-radius:100px; padding:3px 9px; text-transform:uppercase; }
.soc-ai-pill-lg { color:#3a4657; background:#eef1f6; }
/* dark connected band */
.soc-band { display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:linear-gradient(135deg,#101426,#1a2540); border-radius:16px; padding:14px 20px; color:#e8edf4; box-shadow:0 12px 30px rgba(12,27,46,.18); }
.soc-band-live { color:#7ed9a7; font-weight:800; font-size:.86rem; white-space:nowrap; }
.soc-band-chips { display:flex; gap:6px; }
.soc-band-chip { width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.12); display:inline-flex; align-items:center; justify-content:center; font-size:.82rem; }
.soc-band-sep { flex:1; }
.soc-band-auto { font-size:.82rem; color:#c7d2e0; }
.soc-band-auto b { color:#fff; }
.soc-band-right { display:flex; align-items:center; gap:12px; font-size:.82rem; color:#ffd84d; }
.soc-band-right b { color:#ffd84d; }
.soc-band-manage { border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.1); color:#fff; border-radius:100px; padding:6px 14px; font:700 .78rem 'Sora',sans-serif; cursor:pointer; }
.soc-band-manage:hover { background:rgba(255,255,255,.2); }
.soc-band-off .soc-band-auto { flex:1; }
/* connect row */
.soc-connrow { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:#fff; border:1px solid #e8e6df; border-radius:16px; padding:14px 20px; }
.soc-connrow-tx strong { color:#101426; font-size:.92rem; }
.soc-connrow-tx span { color:#5a6572; font-size:.86rem; }
.soc-connrow-tx b { color:#123ec4; }
.soc-connrow-act { display:flex; gap:8px; flex-wrap:wrap; }
.btn-gold { background:#ffd84d; color:#241a05; border:1px solid #eec53a; font-weight:700; }
.btn-gold:hover { background:#123ec4; color:#fff; border-color:#123ec4; }
/* results card */
.soc-results { background:#fff; border:1px solid #e8e6df; border-radius:16px; padding:20px 22px; box-shadow:0 8px 22px rgba(12,27,46,.05); }
.soc-results-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.soc-results-head strong { font:800 1rem 'Sora',sans-serif; color:#101426; }
.soc-live-pill { font:800 .6rem 'Sora',sans-serif; color:#1f7a4d; background:#e6f6ec; border-radius:100px; padding:3px 9px; letter-spacing:.05em; }
.soc-results-sub { color:#5f6572; font-size:.78rem; }
.soc-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.soc-stat b { display:block; font:800 2rem 'Sora',sans-serif; color:#101426; line-height:1; }
.soc-stat span { font-size:.76rem; color:#5a6572; }
.soc-typechips { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid #f0eee7; }
.soc-typechip { font:700 .74rem 'Sora',sans-serif; color:#3a4657; background:#f4f4f0; border-radius:100px; padding:5px 12px; }
/* two-col */
.soc-cols { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
@media (max-width:900px){ .soc-cols { grid-template-columns:1fr; } .soc-stats { grid-template-columns:repeat(2,1fr); } }
.soc-maxwell { background:#fff; border:1px solid #e8e6df; border-radius:16px; padding:18px 20px; box-shadow:0 8px 22px rgba(12,27,46,.05); }
.soc-maxwell-head { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
.soc-maxwell-name { font:800 1rem 'Sora',sans-serif; color:#101426; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.soc-maxwell-line { font-size:.82rem; color:#3a4657; line-height:1.5; margin-top:4px; }
.soc-maxwell-line b { color:#123ec4; }
.soc-cal-head { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px; }
.soc-cal-head span { text-align:center; font:700 .66rem 'Sora',sans-serif; color:#a9b0bd; }
.soc-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.soc-cell { aspect-ratio:1; border:none; border-radius:8px; cursor:pointer; position:relative; background-clip:padding-box; transition:transform .12s; }
.soc-cell:hover { transform:scale(1.08); box-shadow:0 4px 12px rgba(12,27,46,.18); }
.soc-cal-legend { display:flex; gap:16px; margin:12px 0 14px; }
.soc-cal-legend span { display:inline-flex; align-items:center; gap:6px; font-size:.72rem; color:#5a6572; }
.soc-cal-legend i { width:11px; height:11px; border-radius:3px; display:inline-block; }
.soc-cal-open { width:100%; background:#123ec4; color:#fff; border:none; border-radius:12px; padding:12px; font:800 .88rem 'Sora',sans-serif; cursor:pointer; }
.soc-cal-open:hover { background:#0d2f9e; }
/* review room */
.soc-review { background:#fff; border:1px solid #f0d98a; border-radius:16px; padding:18px 20px; box-shadow:0 8px 22px rgba(12,27,46,.05); }
.soc-review-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.soc-review-head strong { font:800 1rem 'Sora',sans-serif; color:#8a6d0f; display:inline-flex; align-items:center; gap:8px; }
.soc-rev-count { font:800 .72rem 'Sora',sans-serif; color:#241a05; background:#ffd84d; border-radius:100px; padding:2px 9px; }
.soc-review-sub { color:#a9b0bd; font-size:.72rem; }
.soc-review-lede { color:#5a6572; font-size:.8rem; margin:4px 0 12px; }
.soc-rev-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid #f4f2ea; }
.soc-rev-ic { width:30px; height:30px; flex:none; border-radius:50%; background:#f4f4f0; display:inline-flex; align-items:center; justify-content:center; font-size:.9rem; }
.soc-rev-tx { flex:1; min-width:0; }
.soc-rev-meta { font:700 .72rem 'Sora',sans-serif; color:#5f6572; }
.soc-rev-cap { font-size:.82rem; color:#3a4657; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.soc-rev-btn { border:none; background:#123ec4; color:#fff; border-radius:10px; padding:8px 16px; font:700 .78rem 'Sora',sans-serif; cursor:pointer; flex:none; }
.soc-rev-btn:hover { background:#0d2f9e; }
.soc-review-all { width:100%; margin-top:12px; background:#fff; border:1px solid #e8e6df; border-radius:12px; padding:11px; font:700 .82rem 'Sora',sans-serif; color:#101426; cursor:pointer; }
.soc-review-all:hover { border-color:#123ec4; color:#123ec4; }
/* video tour */
.soc-tour { display:flex; align-items:center; gap:16px; background:#fff; border:1px solid #e8e6df; border-radius:16px; padding:16px 20px; cursor:pointer; }
.soc-tour:hover { border-color:#123ec4; }
.soc-tour-play { width:44px; height:44px; flex:none; border-radius:50%; background:#123ec4; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem; }
.soc-tour-tx { flex:1; }
.soc-tour-tx b { display:block; color:#101426; font-size:.92rem; }
.soc-tour-tx span { color:#5a6572; font-size:.82rem; }
.soc-tour-cta { color:#4a3aa7; font:700 .84rem 'Sora',sans-serif; white-space:nowrap; }
.sc-flash { animation:scFlash 1.4s ease; }
@keyframes scFlash { 0%,100%{ box-shadow:0 0 0 0 rgba(18,62,196,0);} 30%{ box-shadow:0 0 0 4px rgba(18,62,196,.35);} }

/* ── Agent Spotlight page — design 09 ── */
.spot-stepper { display:flex; align-items:center; gap:0; margin:8px 0 22px; }
.spot-stepper .ss-item { display:flex; align-items:center; gap:10px; }
.spot-stepper .ss-num { width:34px; height:34px; flex:none; border-radius:50%; background:#123ec4; color:#fff; display:inline-flex; align-items:center; justify-content:center; font:800 .95rem 'Sora',sans-serif; }
.spot-stepper .ss-tx b { display:block; font:800 .88rem 'Sora',sans-serif; color:#101426; line-height:1.1; }
.spot-stepper .ss-tx span { font-size:.72rem; color:#5f6572; }
.spot-stepper .ss-line { flex:1; height:2px; background:#e0ddd3; margin:0 16px; min-width:26px; }
.spot-massimo { background:linear-gradient(120deg,#2b1a52,#4a2f8f); border-radius:18px; padding:20px 24px; color:#efe9fb; margin-bottom:20px; box-shadow:0 14px 34px rgba(43,26,82,.28); }
.spot-massimo-top { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.spot-massimo-name { font:800 1.15rem 'Sora',sans-serif; color:#fff; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.spot-massimo-role { font:800 .6rem 'Sora',sans-serif; letter-spacing:.06em; color:#2b1a52; background:#d9c9ff; border-radius:100px; padding:3px 10px; }
.spot-massimo-note { font-size:.78rem; color:#c3b6e6; }
.spot-massimo-sub { font-size:.8rem; color:#c3b6e6; margin-top:2px; }
.spot-massimo-start { margin-left:auto; background:#d9c9ff; color:#2b1a52; border:none; border-radius:100px; padding:11px 22px; font:800 .86rem 'Sora',sans-serif; cursor:pointer; white-space:nowrap; }
.spot-massimo-start:hover { background:#fff; }
.spot-massimo-quote { margin-top:14px; font-size:.86rem; line-height:1.6; color:#e6def8; }
.spot-massimo-quote b { color:#fff; }
.spot-step { background:#fff; border:1px solid #e8e6df; border-radius:16px; padding:18px 22px; margin-bottom:18px; box-shadow:0 8px 22px rgba(12,27,46,.05); }
.spot-step.gold { background:#fffdf5; border-color:#f0d98a; }
.spot-step-hd { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.spot-num { width:30px; height:30px; flex:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font:800 .9rem 'Sora',sans-serif; color:#fff; background:#123ec4; }
.spot-num.gold { background:#ffd84d; color:#241a05; }
.spot-step-hd h3 { margin:0; font:800 1.1rem 'Sora',sans-serif; color:#101426; }
.spot-step-sub { font-size:.8rem; color:#5f6572; }
.spot-eyebrow { font:800 .62rem 'Sora',sans-serif; letter-spacing:.08em; color:#8a6d0f; background:#ffd84d; border-radius:100px; padding:3px 10px; text-transform:uppercase; }
.spot-videos-hd { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:26px 0 12px; }
.spot-videos-hd strong { font:800 .78rem 'Sora',sans-serif; letter-spacing:.06em; color:#5a6572; text-transform:uppercase; }
.spot-beta-pill { font:800 .58rem 'Sora',sans-serif; letter-spacing:.05em; color:#4a3aa7; background:#efeafc; border-radius:100px; padding:3px 9px; }
.spot-videos-hd span.sub { font-size:.76rem; color:#a9b0bd; }
.spot-note { display:flex; gap:10px; background:#f4f2fb; border:1px solid #e5ddf7; border-radius:14px; padding:14px 18px; margin-top:18px; font-size:.82rem; color:#4a4670; line-height:1.55; }
.spot-note b { color:#4a3aa7; }

/* ── Listing Description page — design 05 ── */
.ld-verline { font:700 .82rem 'Sora',sans-serif; color:#1f7a4d; margin:0 0 14px; }
.ld-band { display:flex; align-items:center; gap:16px; background:linear-gradient(135deg,#101426,#1a2540); border-radius:16px; padding:16px 22px; margin-bottom:20px; box-shadow:0 12px 30px rgba(12,27,46,.18); }
.ld-band-play { width:44px; height:44px; flex:none; border-radius:12px; background:#123ec4; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem; }
.ld-band-tx { flex:1; }
.ld-band-tx b { display:block; color:#fff; font-size:.98rem; }
.ld-band-tx span { color:#a9b8cb; font-size:.82rem; }
.ld-band-chips { display:flex; gap:8px; flex-wrap:wrap; }
.ld-band-chips span { font:700 .72rem 'Sora',sans-serif; color:#dbe4f0; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); border-radius:100px; padding:6px 12px; }
.ld-cols { display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; }
@media (max-width:900px){ .ld-cols { grid-template-columns:1fr; } }
.ld-main-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.ld-eyebrow { font:800 .7rem 'Sora',sans-serif; letter-spacing:.06em; color:#5f6572; }
.ld-charcount { font-size:.74rem; color:#5f6572; }
/* 📄 / ✂ Two cuts of one description — pages of the same chapter, not two
   competing cards. The active tab carries the count that applies to it. */
.ld-tabs { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.ld-tab { flex:1; min-width:190px; text-align:left; cursor:pointer; background:#fff; border:1px solid #e3e0d8; border-radius:12px 12px 0 0; border-bottom:3px solid #e3e0d8; padding:10px 14px; font-family:'Sora',sans-serif; }
.ld-tab b { display:block; font-size:.92rem; font-weight:800; color:#101426; }
.ld-tab span { display:block; font-size:.72rem; font-weight:500; color:#5f6572; margin-top:1px; }
.ld-tab em { display:block; font-size:.72rem; font-weight:700; font-style:normal; color:#5f6572; margin-top:5px; }
.ld-tab em.over { color:#c0392b; }
.ld-tab.on { background:#eef3ff; border-color:#c8d6f7; border-bottom-color:#123ec4; }
.ld-tab.on b, .ld-tab.on em { color:#123ec4; }
.ld-charcount.over { color:#c0392b; font-weight:700; }
.ld-card { background:#fff; border:1px solid #e8e6df; border-radius:16px; padding:22px 24px; box-shadow:0 8px 22px rgba(12,27,46,.05); }
.ld-card-title { font:800 1.2rem 'Sora',sans-serif; color:#101426; margin-bottom:12px; line-height:1.3; }
.ld-desc { font-size:.92rem; line-height:1.7; color:#2b3543; white-space:pre-wrap; }
.ld-lock { display:flex; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid #f0eee7; font-size:.76rem; color:#8a7a4a; line-height:1.5; }
.ld-lock b { color:#6a5320; }
.ld-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:16px 0; }
.ld-copy-all { background:#101426; color:#fff; border:none; border-radius:11px; padding:11px 20px; font:800 .86rem 'Sora',sans-serif; cursor:pointer; }
.ld-copy-all:hover { background:#123ec4; }
.ld-lowcards { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .ld-lowcards { grid-template-columns:1fr; } }
.ld-lowcard { background:#fff; border:1px solid #e8e6df; border-radius:14px; padding:16px 18px; }
.ld-lowcard-h { font:800 .84rem 'Sora',sans-serif; color:#101426; margin-bottom:10px; }
.ld-vrow { display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-top:1px solid #f4f2ea; font-size:.82rem; color:#3a4657; }
.ld-vrow:first-of-type { border-top:none; }
.ld-vcurrent { color:#1f7a4d; font-weight:700; }
.ld-varch { color:#a9b0bd; }
.ld-todo { margin:0; padding-left:18px; font-size:.82rem; color:#3a4657; line-height:1.8; }
.ld-rail { display:flex; flex-direction:column; gap:16px; }
.ld-ring-card, .ld-why-card { background:#fff; border:1px solid #e8e6df; border-radius:16px; padding:20px; box-shadow:0 8px 22px rgba(12,27,46,.05); }
.ld-ring { width:130px; height:130px; margin:0 auto 8px; border-radius:50%; background:conic-gradient(#123ec4 calc(var(--pct)*1%), #e8e6df 0); display:flex; align-items:center; justify-content:center; }
.ld-ring-in { width:104px; height:104px; border-radius:50%; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ld-ring-in b { font:800 1.9rem 'Sora',sans-serif; color:#101426; line-height:1; }
.ld-ring-in span { font:800 .56rem 'Sora',sans-serif; letter-spacing:.06em; color:#5f6572; margin-top:3px; text-align:center; }
.ld-ring-cap { text-align:center; font-size:.8rem; color:#5a6572; margin-bottom:14px; }
.ld-ring-btns { display:flex; gap:8px; }
.ld-ring-btns .btn { flex:1; }
.ld-autoemail { flex:1; display:inline-flex; align-items:center; gap:6px; justify-content:center; border:1px solid #e2e0d8; border-radius:10px; padding:8px; font:700 .78rem 'Sora',sans-serif; color:#33404f; cursor:pointer; }
.ld-ring-note { font-size:.72rem; color:#a9b0bd; margin-top:12px; line-height:1.5; text-align:center; }
.ld-why-h { font:800 .92rem 'Sora',sans-serif; color:#101426; margin-bottom:12px; }
.ld-why-row { display:flex; gap:9px; font-size:.82rem; color:#3a4657; line-height:1.5; margin-bottom:10px; }
.ld-why-row b { color:#101426; }
.ld-writing-state { text-align:center; padding:24px; }
.ld-writing-state b { font-size:1.05rem; color:#101426; }
.ld-writing-state p { color:#5a6572; font-size:.85rem; margin:6px 0 14px; }

/* ── Seller Proof page — design 10 additions (VIEW AS, refresh pill, history) ── */
.sp-viewas { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.sp-viewas-lbl { font:800 .68rem 'Sora',sans-serif; letter-spacing:.1em; color:#5f6572; }
.sp-viewas-seg { display:flex; gap:4px; background:#fff; border:1px solid #e8e6df; border-radius:12px; padding:5px; }
.sp-viewas-seg button { border:none; background:none; border-radius:8px; padding:7px 14px; font:700 .8rem 'Sora',sans-serif; color:#5a6572; cursor:pointer; }
.sp-viewas-seg button.on { background:#eef3ff; color:#123ec4; }
.sp-viewas-note { font-size:.76rem; color:#a9b0bd; }
.sp-refresh-pill { margin-top:14px; display:inline-block; background:rgba(255,216,77,.14); border:1px solid rgba(255,216,77,.4); border-radius:100px; padding:7px 14px; font-size:.8rem; color:#ffe9a6; }
.sp-refresh-pill b { color:#fff; }
.sp-hist { background:#fff; border:1px solid #e8e6df; border-radius:16px; padding:8px 20px 12px; margin-top:20px; box-shadow:0 8px 22px rgba(12,27,46,.05); }
.sp-hist-h { font:800 .72rem 'Sora',sans-serif; letter-spacing:.08em; color:#5f6572; padding:12px 0 4px; }
/* M3 — Seller Proof running activity log + agent "+ Add event" */
.sp-addev { display:grid; grid-template-columns:1fr; gap:8px; margin:12px 0 6px; }
.sp-addev .form-control { padding:9px 12px; font-size:.86rem; }
.sp-addev [data-sp-evadd] { justify-self:start; padding:9px 18px; }
.sp-log { margin-top:8px; max-height:230px; overflow-y:auto; }
.sp-log-del { margin-left:auto; background:none; border:0; cursor:pointer; font-size:.9rem; opacity:.45; padding:4px; } .sp-log-del:hover { opacity:1; }
.sp-log-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid #f4f2ea; }
.sp-log-ic { width:26px; height:26px; flex:none; border-radius:7px; background:#f4f4f0; display:inline-flex; align-items:center; justify-content:center; font-size:.9rem; }
.sp-log-tx { flex:1; min-width:0; }
.sp-log-tx b { display:block; font-size:.83rem; color:#101426; font-weight:600; }
.sp-log-tx span { font-size:.72rem; color:#8a90a0; }
.sp-hist-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid #f4f2ea; }
.sp-hist-ic { width:30px; height:30px; flex:none; border-radius:8px; background:#f4f4f0; display:inline-flex; align-items:center; justify-content:center; }
.sp-hist-tx { flex:1; min-width:0; }
.sp-hist-tx b { display:block; font-size:.88rem; color:#101426; }
.sp-hist-tx span { font-size:.76rem; color:#5f6572; }
.sp-hist-tag { font:800 .64rem 'Sora',sans-serif; border-radius:100px; padding:3px 10px; color:#5a6572; background:#eef1f6; }
.sp-hist-tag.review { color:#8a6d0f; background:#fff3cd; }
.sp-hist-pdf { border:none; background:none; color:#123ec4; font:700 .8rem 'Sora',sans-serif; cursor:pointer; }

/* ── Where your buyers come from (disposition coaching) ── */
.bsrc-card { background:#fff; border:1px solid #e8e6df; border-radius:16px; padding:16px 18px; margin-bottom:16px; box-shadow:0 8px 22px rgba(12,27,46,.05); }
.bsrc-h { font:800 .92rem 'Sora',sans-serif; color:#101426; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.bsrc-n { font:700 .68rem 'Sora',sans-serif; color:#5f6572; background:#f4f4f0; border-radius:100px; padding:3px 9px; }
.bsrc-collect { font-size:.82rem; color:#5a6572; line-height:1.55; }
.bsrc-row { margin-bottom:9px; }
.bsrc-lbl { display:flex; align-items:center; justify-content:space-between; font-size:.8rem; color:#3a4657; margin-bottom:4px; }
.bsrc-lbl b { color:#101426; font-weight:800; }
.bsrc-bar { height:8px; border-radius:100px; background:#f0eee7; overflow:hidden; }
.bsrc-bar span { display:block; height:100%; border-radius:100px; background:linear-gradient(90deg,#123ec4,#4a3aa7); }
.bsrc-note { font-size:.78rem; color:#5a6572; margin-top:10px; padding-top:10px; border-top:1px solid #f0eee7; }
.bsrc-note b { color:#123ec4; }

/* ── Social post text-overlay editor ── */
.sov-tools { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.sov-tool { border:1px solid #e2e0d8; background:#fff; border-radius:10px; padding:8px 12px; font:700 .78rem 'Sora',sans-serif; color:#33404f; cursor:pointer; }
.sov-tool:hover { border-color:#123ec4; color:#123ec4; }
.sov-panel { background:#f6f5f1; border:1px solid #e8e6df; border-radius:12px; padding:12px 14px; margin-bottom:12px; }
.sov-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.sov-row > label { font:700 .72rem 'Sora',sans-serif; color:#5f6572; width:44px; flex:none; }
.sov-seg { display:flex; gap:4px; background:#fff; border:1px solid #e2e0d8; border-radius:9px; padding:3px; flex-wrap:wrap; }
.sov-seg button { border:none; background:none; border-radius:6px; padding:5px 10px; font:700 .74rem 'Sora',sans-serif; color:#5a6572; cursor:pointer; }
.sov-seg button.on { background:#123ec4; color:#fff; }
.sov-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px; }

/* ══ 📷 THE STUDIO SHELL (Erik, Aug 15 · extended to video Aug 16) ══════════
   Erik: "let's treat this page like it's its own app — self contained… but set
   up to be usable", and "instead of long thinner lines across". So the page is
   ONE bounded surface with its own header, its own pipeline strip and its own
   left rail — not a stack of full-width bands you scroll through.

   ⚠ SCOPE CHANGED: .psa- started as Photo-Studio-only. It is now the SHARED
   shell for Photo Studio, Listing Reels and Agent Spotlight (see the video
   extension at the bottom of this file). Change a .psa- rule and you change
   all three — which is the point, and also the warning. Everything
   below is namespaced .psa- so it can never leak onto a non-studio page, and the
   theme guards at the bottom exist because the portal's Dark/Mono/Holiday text
   reset (.main-content h2/p/strong) outranks a single class and would paint
   dark ink onto the app's dark surfaces. */
.psa { background:#fff; border:1px solid #e8e6df; border-radius:16px; overflow:hidden; box-shadow:0 14px 36px rgba(16,20,38,.07); font-family:'Sora',system-ui,sans-serif; }

/* ── the app header: who you are, which house, the two always-there actions ── */
.psa-top { background:linear-gradient(120deg,#101426,#182449); padding:14px 18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
/* The page's own name, above the crew row. Full-width so the header reads
   "what this page is" → "who does it here" → "which listing". */
.psa-title { flex:0 0 100%; margin:0; font:800 1.05rem 'Sora',sans-serif; color:#fff; letter-spacing:-.01em; }
.psa-title span { display:block; font:500 .78rem/1.45 'Sora',sans-serif; color:#aab3c9; letter-spacing:0; margin-top:3px; }
.psa-who { display:flex; align-items:center; gap:11px; min-width:0; }
.psa-who b { display:block; font:800 1rem 'Sora',sans-serif; color:#fff; }
.psa-who i { display:block; font-style:normal; font:700 .62rem 'Sora',sans-serif; letter-spacing:.09em; color:#ffd84d; margin-top:2px; }
.psa-where { display:flex; align-items:center; gap:9px; flex:1 1 260px; min-width:0; }
.psa-where select { flex:1; min-width:0; max-width:360px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:10px; padding:9px 11px; font:600 .82rem 'Sora',sans-serif; }
.psa-where select option { color:#101426; }
.psa-act { display:flex; gap:8px; flex-wrap:wrap; }
.psa-btn { border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08); color:#fff; border-radius:10px; padding:9px 13px; font:700 .78rem 'Sora',sans-serif; cursor:pointer; white-space:nowrap; }
.psa-btn:hover { background:#fff; color:#101426; border-color:#fff; }
.psa-btn.gold { background:#ffd84d; border-color:#ffd84d; color:#101426; }
.psa-btn.gold:hover { filter:brightness(1.06); background:#ffd84d; color:#101426; }

/* ── the pipeline strip: the spine of the page ── */
.psa-flow { display:flex; background:#f7f7f4; border-bottom:1px solid #e8e6df; }
.psa-step { flex:1 1 0; min-width:0; display:flex; align-items:center; gap:9px; padding:11px 13px; background:transparent; border:0; border-right:1px solid #e8e6df; cursor:pointer; text-align:left; font-family:'Sora',sans-serif; }
.psa-step:last-child { border-right:0; }
.psa-step:hover { background:#fff; }
.psa-step.is-on { background:#fff; box-shadow:inset 0 -3px 0 0 #123ec4; }
.psa-step-n { flex:none; width:23px; height:23px; border-radius:50%; display:grid; place-items:center; font:800 .68rem 'Sora',sans-serif; background:#e8e6df; color:#5f6572; }
.psa-step.is-on .psa-step-n { background:#123ec4; color:#fff; }
.psa-step.is-done .psa-step-n { background:#e8f7ee; color:#1f6a42; }
.psa-step-t { min-width:0; }
.psa-step-t b { display:block; font:800 .8rem 'Sora',sans-serif; color:#101426; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.psa-step-t span { display:block; font:600 .74rem 'Sora',sans-serif; color:#5f6572; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── body: rail + pane ── */
.psa-body { display:grid; grid-template-columns:216px minmax(0,1fr); }
.psa-rail { border-right:1px solid #e8e6df; background:#fbfbf9; padding:14px 11px; }
.psa-railh { font:800 .69rem 'Sora',sans-serif; letter-spacing:.11em; color:#5f6572; margin:0 0 7px 8px; }
.psa-railh + .psa-railh, .psa-navb + .psa-railh { margin-top:16px; }
.psa-navb { width:100%; display:flex; align-items:center; gap:9px; border:0; background:transparent; border-radius:10px; padding:9px 10px; cursor:pointer; font:700 .81rem 'Sora',sans-serif; color:#33414f; text-align:left; }
.psa-navb:hover { background:#f1f1ec; }
.psa-navb.is-on { background:#eef3ff; color:#123ec4; box-shadow:inset 3px 0 0 0 #123ec4; }
.psa-navb i { margin-left:auto; font-style:normal; font:800 .68rem 'Sora',sans-serif; color:#5f6572; }
.psa-navb.is-on i { color:#123ec4; }
.psa-pane { padding:18px 20px 22px; min-width:0; }

/* ── pane furniture ── */
.psa-h { font:800 1.05rem 'Sora',sans-serif; color:#101426; margin:0 0 3px; }
.psa-sub { font:500 .8rem/1.55 'Sora',sans-serif; color:#5f6572; margin:0 0 14px; }
.psa-card { background:#fff; border:1px solid #e8e6df; border-radius:14px; padding:15px 17px; margin-bottom:13px; }
.psa-dark { background:linear-gradient(120deg,#101426,#182449); border-radius:14px; padding:16px 18px; margin-bottom:13px; color:#cfd6e6; }
.psa-dark.win { background:linear-gradient(120deg,#0f2f22,#14532f); }
.psa-dark b, .psa-dark strong { color:#fff; }
.psa-kick { font:800 .62rem 'Sora',sans-serif; letter-spacing:.1em; color:#ffd84d; margin-bottom:5px; }
.psa-dark.win .psa-kick { color:#7fe0ae; }
.psa-line { font:500 .84rem/1.6 'Sora',sans-serif; color:#cfd6e6; margin:0; }
.psa-note { font:500 .74rem/1.5 'Sora',sans-serif; color:#5f6572; margin-top:6px; }
/* …but a note only ever renders INSIDE a dark band, and the light-card muted
   grey is tuned for white (5.85:1) — on the navy it inverts and on the green
   "win" surface it disappears. Lift it where it actually lives (8.31:1 navy ·
   4.99:1 green) and leave the light-card value alone for any future use. */
.psa-dark .psa-note { color:#b8c0d4; }
.psa-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.psa-go { border:0; border-radius:11px; padding:11px 17px; font:800 .82rem 'Sora',sans-serif; cursor:pointer; background:#123ec4; color:#fff; white-space:nowrap; }
.psa-go:hover { background:#0d2f9e; }
.psa-go[disabled] { opacity:.55; cursor:default; }
.psa-go.ghost { background:#fff; color:#101426; border:1px solid #d8d5cb; }
.psa-go.ghost:hover { background:#f4f4f0; }
.psa-go.gold { background:#ffd84d; color:#101426; }
.psa-go.sm { padding:8px 12px; font-size:.75rem; border-radius:9px; }
.psa-chip { display:inline-flex; align-items:center; gap:5px; font:800 .66rem 'Sora',sans-serif; border-radius:999px; padding:4px 10px; background:#f2f2ee; color:#5f6572; }
.psa-chip.good { background:#e8f7ee; color:#1f6a42; }
.psa-chip.fix { background:#fff6dd; color:#8a6420; }
.psa-chip.poor { background:#fdecec; color:#b4231f; }
.psa-chip.blue { background:#eef3ff; color:#123ec4; }
.psa-empty { background:#fbfbf9; border:1px dashed #d8d5cb; border-radius:14px; padding:22px; text-align:center; font:500 .84rem/1.6 'Sora',sans-serif; color:#5f6572; }

/* ── photo grids ── */
.psa-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:13px; }
.psa-grid.sm { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.psa-tile { background:#fff; border:1px solid #e8e6df; border-radius:14px; overflow:hidden; }
.psa-shot { position:relative; height:150px; background:#101426; overflow:hidden; }
.psa-shot img { width:100%; height:100%; object-fit:cover; display:block; }
.psa-grid.sm .psa-shot { height:104px; }
.psa-pos { position:absolute; left:6px; top:6px; font:800 .62rem 'Sora',sans-serif; background:rgba(16,20,38,.78); color:#fff; border-radius:8px; padding:4px 8px; }
.psa-pos.hero { background:#ffd84d; color:#101426; }
.psa-tools { position:absolute; top:6px; right:6px; display:flex; gap:4px; }
.psa-tool { border:0; border-radius:8px; background:rgba(16,20,38,.72); color:#fff; width:26px; height:26px; cursor:pointer; font-size:.8rem; line-height:1; }
.psa-tool:hover { background:#123ec4; }
.psa-tool.del:hover { background:#b0453a; }
.psa-tool.grab { cursor:grab; touch-action:none; }
.psa-badge { position:absolute; left:6px; bottom:6px; font:800 .6rem 'Sora',sans-serif; letter-spacing:.04em; border-radius:999px; padding:4px 9px; }
.psa-meta { padding:9px 11px; }
.psa-why { font:500 .72rem/1.5 'Sora',sans-serif; color:#5f6572; margin:5px 0 0; }
.psa-dims { display:flex; gap:5px; flex-wrap:wrap; margin-top:7px; }
.psa-acts { display:flex; flex-wrap:wrap; gap:6px; padding:8px 9px; border-top:1px solid #f0efe8; }

/* ── cleanup findings ── */
.psa-find { display:grid; grid-template-columns:170px minmax(0,1fr); gap:14px; align-items:start; background:#fff; border:1px solid #e8e6df; border-radius:14px; padding:13px; margin-bottom:11px; }
.psa-find img { width:100%; border-radius:10px; display:block; background:#101426; }
/* A checkbox row where the whole row is the target. The bare 13×13 box is a
   coin flip for a 55-year-old on a phone, and every one of these already sits
   inside a <label> — it only ever needed the padding. */
.mml-check-row { display:flex; align-items:center; gap:11px; font-size:.85rem; cursor:pointer; min-height:44px; padding:4px 6px; margin-left:-6px; border-radius:8px; }
.mml-check-row:hover { background:#f6f5f1; }
.mml-check-row input { width:19px; height:19px; flex:none; accent-color:#123ec4; }

.psa-item { display:flex; gap:9px; align-items:flex-start; padding:8px 0; border-bottom:1px solid #f0efe8; }
.psa-item:last-of-type { border-bottom:0; }
.psa-item input { margin-top:3px; width:16px; height:16px; flex:none; accent-color:#123ec4; }
.psa-item > span > b { display:block; font:700 .8rem 'Sora',sans-serif; color:#101426; }
.psa-item > span > span { display:block; font:500 .73rem/1.5 'Sora',sans-serif; color:#5f6572; }

@media (max-width:900px) {
  .psa-body { grid-template-columns:minmax(0,1fr); }
  .psa-rail { border-right:0; border-bottom:1px solid #e8e6df; display:flex; flex-wrap:wrap; gap:6px; padding:11px; }
  .psa-railh { width:100%; margin:0 0 2px 2px; }
  .psa-railh + .psa-railh, .psa-navb + .psa-railh { margin-top:8px; }
  .psa-navb { width:auto; padding:8px 11px; background:#fff; border:1px solid #e8e6df; }
  .psa-navb i { margin-left:6px; }
  .psa-flow { flex-wrap:wrap; }
  .psa-step { flex:1 1 44%; border-bottom:1px solid #e8e6df; min-height:44px; }
  .psa-find { grid-template-columns:minmax(0,1fr); }
  .psa-pane { padding:15px 14px 20px; }
  /* The rail's PIPELINE group repeats the .psa-flow strip directly above it.
     Fine as a vertical spine; on a phone the rail goes horizontal and you get
     eight chips for four destinations before any content. The strip wins — it
     carries the number, the name AND the hint. */
  .psa-railgrp-steps { display:none; }
}
@media (max-width:520px) {
  /* The hint is the line that makes the pipeline self-explanatory — "tap them
     in order", "only what needs it", "record, then pick what's behind you".
     It used to be hidden here, on exactly the screen with no room for a
     tooltip and no hover to reveal one. Wrap it instead. */
  .psa-step { flex:1 1 100%; }
  .psa-step-t span { white-space:normal; overflow:visible; line-height:1.35; }
  .psa-where select { max-width:none; }
}

/* Theme-proof. The app's dark bands are self-contained dark surfaces; the
   portal's Dark/Mono/Holiday text reset would otherwise paint their headings
   and copy dark-on-dark. Re-assert at matching specificity, both directions. */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-dark b,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-dark strong,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-who b { color:#fff; }
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-line,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-note { color:#cfd6e6; }
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-h,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-step-t b,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-item > span > b { color:#101426; }
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-sub,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-why,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-item > span > span { color:#5f6572; }
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-card,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-tile { background:#fff; border-color:#e8e6df; }

/* ══ 🔦 DARK-SURFACE TEXT GUARD — "we can't see the words" ═══════════════════
   THE DEFECT, in one sentence: the theme text-reset at line ~2535
   (`[data-theme]:not([data-theme="light"]) .theme-light .main-content p`, four
   class-level parts + one element = 0,4,1) outranks every dark band's own
   `.sp-dark p` / `.mml-intro h2` style rule (0,1,1 – 0,2,1), so under MONO it
   repaints their body copy `--thm-mut: #3a3a3a` and their headings
   `--thm-ink: #0d0d0d` — on navy that is 1.25:1 and 1.06:1. Invisible. That is
   exactly Erik's Seller Proof screenshot: heading and gold pill fine (both are
   custom classes, not reset targets), the paragraph gone.

   Dark and Holiday happen to survive because their ink/mut tokens are already
   light; MONO is the theme that breaks, and any future theme with dark tokens
   would break the same way. So the guard is written for ALL non-light themes,
   not just the one that is broken today.

   THE RULE: a dark surface re-asserts its OWN palette at 0,5,1 — it does not
   get flattened to white. Every value below is the value the light theme
   already ships, verified ≥4.5:1 against the lightest stop of that surface's
   gradient (the worst case). Ratios are in the comments.

   ADDING A DARK BAND? Add it here in the same commit. This block is the list. */

/* ── ink / navy bands: white heads, light-slate copy ── */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .sp-dark h1,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .sp-dark h2,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .sp-dark h3,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .sp-dark h4,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .sp-dark strong,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .dlv-banner h1,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .dlv-banner h2,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .dlv-banner h3,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .dlv-banner strong,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .bk-banner h2,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .bk-banner h3,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .bk-banner strong,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .nitro-acct strong,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .nitro-proof h3,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .nitro-proof strong,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .bill-tile.total h2,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .bill-tile.total h3,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .bill-tile.total strong { color:#fff; }
/* sp-dark 15.59:1 · dlv/bk 15.59:1 · nitro-acct 15.59:1 · bill-tile 15.19:1 */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .sp-dark p,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .sp-dark .text-gray,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .dlv-banner p,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .dlv-banner .text-gray { color:#aeb6cd; }   /* 7.70:1 on #1a2240 */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .bk-banner p,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .bk-banner .text-gray { color:#cfd6e6; }    /* 10.70:1 */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .nitro-acct p { color:#cdd3e4; }            /* 10.42:1 */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .nitro-proof p,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .nitro-proof .text-gray { color:#cdd8e6; }  /* 10.53:1 */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .bill-tile.total p,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .bill-tile.total .text-gray { color:#a9b8cb; } /* 7.53:1 */

/* ── the dark explainer band, on ~12 portal pages ── */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .mml-intro h1,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .mml-intro h2,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .mml-intro h3,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .mml-intro strong { color:#fff; }            /* 15.14:1 on #182449 */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .mml-intro p,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .mml-intro .text-gray { color:#b9bfd0; }     /* 8.24:1 */

/* ── HQ ── */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-hero h1,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-hero h2,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-hero h3,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-hero strong,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-cta strong,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-refer h1,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-refer h2,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-refer h3,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .rmx-hero h1,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .rmx-hero h2,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .rmx-hero h3,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .rmx-hero strong { color:#fff; }             /* 15.19:1 on #1a2540 */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-hero p,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-hero .text-gray,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-cta p { color:#b9c6d6; }                 /* 8.76:1 */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-refer p,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-refer .text-gray { color:#d4deea; }      /* 11.16:1 */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-refer-tx > p strong { color:#ffe27a; }   /* 11.87:1 — the gold accent survives */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .rmx-hero p,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .rmx-hero .text-gray { color:#cdd8e6; }      /* 10.53:1 */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-tv-empty h3,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-tv-empty p { color:#b8c6d6; }            /* 8.74:1 */
/* BHOT's band is black + brass, not navy — keep ITS palette, not the navy one. */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-bhot h2,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-bhot h3,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-bhot-card h3 { color:#f2a71b; }          /* 8.89:1 on #161616 */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-bhot-card p { color:#cfc8b8; }           /* 10.86:1 */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-bhot-banner p { color:#cbb892; }         /* 8.77:1 */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-bhot strong { color:#fff; }

/* ── social / descriptions / website bands ── */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .soc-band strong,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .social-connect strong,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .ld-band strong,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .web-upsell strong { color:#fff; }
[data-theme]:not([data-theme="light"]) .theme-light .main-content .soc-band p,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .soc-band .text-gray,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .social-connect p,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .social-connect .text-gray { color:#c7d2e0; } /* 9.93:1 */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .ld-band p,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .ld-band .text-gray { color:#a9b8cb; }        /* 7.53:1 */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .web-upsell p,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .web-upsell .text-gray { color:#e0d9f8; }     /* 5.23:1 on #5b3fc4 */

/* ── the studio-app shell (Photo Studio · Reels · Spotlight) ── */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-dark h1,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-dark h2,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-dark h3,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-top h1,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-top h2,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-top strong { color:#fff; }
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-dark p,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-dark .text-gray,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-top p { color:#c9d1e4; }                 /* 9.89:1 navy · 5.95:1 on the green win band */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-dark .psa-note { color:#b8c0d4; }        /* 8.31:1 navy · 4.99:1 green */

/* ── the inverse of the same defect: a WHITE sub-card inside a dark parent.
   `.hq-partner-featured` declares `background:#0a1428`, but its `-tx` half is
   `background:#fff`. Its own `h3`/`p` rules are 0,1,1 and lose to the reset —
   so under DARK/HOLIDAY (ink #f2f5fc, mut #b3bacd) that text goes near-white
   ON WHITE: 1.1:1 and 1.9:1. Same bug wearing the opposite coat. ── */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-partner-featured-tx h3,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-partner-featured-tx strong { color:#101426; } /* 18.26:1 on #fff */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .hq-partner-featured-tx p { color:#46546a; }     /* 7.67:1 on #fff */

/* ══ 🎬 THE STUDIO SHELL, EXTENDED FOR VIDEO (Erik, Aug 16) ═════════════════
   Erik on Reels + Spotlight: "this needs a new UI - it's just long blocks from
   one side of the screen to the other... make these areas a little smaller
   maybe?" — the same note that produced the Photo Studio app.

   So .psa- is no longer "the Photo Studio app". It is THE STUDIO SHELL: one
   header, one pipeline strip, one rail, one pane at a time — shared by Photo
   Studio, Listing Reels and Agent Spotlight so the three read as one product
   instead of three eras. Everything above this line is unchanged and still
   drives Photo Studio; everything below is the extra furniture the two video
   pages need (choice cards, vertical video tiles, a shot picker, a field row).
   Nothing here is page-specific — if a fourth studio page arrives it inherits
   the lot. */

/* ── choice cards: style, backdrop, anything pick-one ── */
.psa-opts { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:10px; margin-bottom:13px; }
.psa-opt { display:block; position:relative; background:#fff; border:2px solid #e4e2da; border-radius:13px; padding:12px 14px; cursor:pointer; font-family:'Sora',sans-serif; }
.psa-opt:hover { border-color:#c3cbdc; }
.psa-opt.is-on { border-color:#123ec4; background:#f7f9ff; box-shadow:0 0 0 3px rgba(18,62,196,.09); }
/* An explicit mark, not just a tinted border. This is the most expensive
   choice in the builder and "which one is picked" was carried by a 2px
   border colour alone. */
.psa-opt::after { content:''; position:absolute; top:11px; right:12px; width:19px; height:19px; border-radius:50%; border:2px solid #d7d5cc; }
.psa-opt.is-on::after { content:'✓'; border-color:#123ec4; background:#123ec4; color:#fff; font:800 11px/16px 'Sora',sans-serif; text-align:center; }
.psa-opt b { padding-right: 30px; }
.psa-opt input { position:absolute; opacity:0; pointer-events:none; }
.psa-opt b { display:block; font:800 .84rem 'Sora',sans-serif; color:#101426; margin-bottom:3px; }
.psa-opt span { display:block; font:500 .74rem/1.5 'Sora',sans-serif; color:#5f6572; }
.psa-opt .psa-tag { display:inline-block; font:800 .58rem 'Sora',sans-serif; letter-spacing:.05em; border-radius:999px; padding:2px 7px; background:#ffd84d; color:#101426; margin-left:5px; vertical-align:1px; }
.psa-opt .psa-tag.cost { background:#fdecec; color:#b4231f; }
.psa-opt.is-off { opacity:.62; cursor:not-allowed; }

/* ── one labelled control, in a row that wraps ── */
.psa-fields { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; margin-bottom:12px; }
.psa-field { display:flex; flex-direction:column; gap:4px; min-width:0; }
.psa-field > label { font:800 .62rem 'Sora',sans-serif; letter-spacing:.08em; color:#5f6572; }
.psa-field select, .psa-field input[type="text"] { border:1px solid #d7d5cd; border-radius:10px; padding:9px 11px; font:600 .82rem 'Sora',sans-serif; color:#101426; background:#fff; max-width:230px; }
.psa-check { display:inline-flex; align-items:center; gap:7px; font:600 .8rem 'Sora',sans-serif; color:#33414f; cursor:pointer; }
.psa-check input { width:16px; height:16px; accent-color:#123ec4; flex:none; }
.psa-radios { display:flex; gap:14px; flex-wrap:wrap; }

/* ── the shot picker: tap in order, the number IS the edit ── */
.psa-picks { display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:9px; }
.psa-pick { position:relative; height:100px; padding:0; overflow:hidden; border:3px solid transparent; border-radius:12px; background:#101426; cursor:pointer; }
.psa-pick img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.psa-pick.is-on { border-color:#123ec4; }
.psa-pick-n { position:absolute; top:5px; right:5px; min-width:22px; height:22px; border-radius:999px; background:#123ec4; color:#fff; font:800 .7rem 'Sora',sans-serif; display:flex; align-items:center; justify-content:center; }

/* ── vertical (9:16) video tiles: takes, backdrops, finished reels ── */
.psa-vgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:11px; }
.psa-vgrid.tight { grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:9px; }
.psa-vtile { position:relative; background:#101426; border:3px solid transparent; border-radius:13px; overflow:hidden; }
.psa-vtile.is-on { border-color:#123ec4; }
.psa-vtile.pickable { cursor:pointer; }
.psa-vtile video { width:100%; aspect-ratio:9/16; object-fit:cover; display:block; background:#000; }
.psa-vcap { display:flex; align-items:center; gap:6px; padding:6px 9px; background:#fff; font:700 .68rem 'Sora',sans-serif; color:#33414f; }
.psa-vcap .psa-vcap-s { margin-left:auto; font:700 .64rem 'Sora',sans-serif; color:#5f6572; }
.psa-vtile.is-on .psa-vcap { background:#eef3ff; color:#123ec4; }
.psa-vbtns { display:flex; gap:5px; padding:6px 8px; border-top:1px solid #f0efe8; background:#fff; flex-wrap:wrap; }
.psa-vplay { position:absolute; top:6px; right:6px; width:30px; height:30px; border:0; border-radius:999px; background:rgba(9,12,24,.74); color:#fff; font-size:.82rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.psa-vplay:hover { background:#123ec4; }

/* ── the pane's own footer: where the one real action lives ── */
.psa-bar { display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-top:15px; padding-top:13px; border-top:1px solid #eeece4; }
.psa-msg { font:500 .8rem/1.5 'Sora',sans-serif; color:#5f6572; flex:1; min-width:200px; margin:0; }
.psa-msg.bad { color:#b4231f; }
.psa-msg.good { color:#1f6a42; }

/* ── a caption row per picked shot ── */
.psa-cap { display:flex; align-items:center; gap:9px; padding:5px 0; }
.psa-cap > b { font:800 .72rem 'Sora',sans-serif; color:#123ec4; width:16px; text-align:right; flex:none; }
.psa-cap > i { width:52px; height:36px; border-radius:7px; background:#101426 center/cover; flex:none; }
.psa-cap input { flex:1; min-width:0; border:1px solid #d7d5cd; border-radius:9px; padding:7px 10px; font:500 .78rem 'Sora',sans-serif; color:#101426; background:#fff; }

@media (max-width:620px) {
  .psa-opts { grid-template-columns:minmax(0,1fr); }
  .psa-field select, .psa-field input[type="text"] { max-width:none; width:100%; }
}

/* Theme-proof, same rule as the rest of the shell: these live on LIGHT panes
   inside the app, so under Dark/Mono/Holiday the .main-content reset would
   paint them with the theme's ink instead of the pane's. */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-opt b,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-opt strong,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-cap input { color:#101426; }
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-opt span,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-opt p,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-msg { color:#5f6572; }
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-opt,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-vcap,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-vbtns { background:#fff; }
[data-theme]:not([data-theme="light"]) .theme-light .main-content .psa-opt.is-on { background:#f7f9ff; }

/* The radio inside a .psa-opt is visually hidden but still focusable, which is
   the point — keyboard users must be able to walk the choices. Give the CARD
   the focus ring the invisible input can no longer show. */
.psa-opt:focus-within { border-color:#123ec4; box-shadow:0 0 0 3px rgba(18,62,196,.22); }

/* ── 🎞 finished-reel tiles: obviously playable, honestly dead (Aug 17) ─────
   Erik: "I need to be able to play and see these reels." A big centred ▶ over
   the poster plays inline WITH sound; native controls carry scrub/full-screen.
   A tile whose media errors (the legacy pre-fix renders — black frames with no
   stored file) flips is-dead: the play affordance goes away, the reason is
   printed on the tile, and DELETE becomes the loud button. */
.psa-vstage { position:relative; }
.psa-vbigplay { position:absolute; inset:0; margin:auto; width:56px; height:56px; border:0; border-radius:999px; background:rgba(9,12,24,.72); color:#fff; font-size:1.15rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.4); padding-left:4px; }
.psa-vbigplay:hover { background:#123ec4; transform:scale(1.06); }
.psa-vdead { position:absolute; inset:0; background:rgba(10,13,26,.9); color:#e8d7b0; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:14px; font:500 .72rem/1.5 'Sora',sans-serif; text-align:center; }
/* display:flex outranks the [hidden] UA rule — without this the "dead" overlay
   would sit invisible-text-first over EVERY tile and eat its clicks. */
.psa-vdead[hidden] { display:none; }
.psa-vdead b { color:#ffd84d; font:800 .76rem 'Sora',sans-serif; }                 /* 11.9:1 / 4.6:1 floor on rgba(10,13,26,.9) over #000 */
.psa-vtile.is-dead { border-color:#b4231f; }
.psa-go.danger { background:#b4231f; color:#fff; }                                  /* 6.6:1 white on #b4231f */
.psa-go.danger:hover { background:#941c19; }

/* ── 🌐 the Website studio panes (Aug 17 — the right-side junk drawer, filed) ─
   The old .web-card stack rode a 2-column grid whose gap did the spacing; in
   a pane the cards stack, so they space themselves. Everything else about the
   cards is untouched — same classes, same hooks. */
[data-web-pane] .web-card { margin-bottom:13px; }
[data-web-pane] .web-browser { margin-bottom:9px; }
[data-web-pane] .web-cap { text-align:left; margin:0 0 13px; }
[data-web-pane] .web-upsell { margin-top:2px; }
.web-share-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:13px; }
.web-share-grid .web-card { margin-bottom:0; }
@media (max-width:620px) { [data-web-pane] .web-frame { height:300px; } }

/* ── 🔗 the social CONNECT BOARD (Aug 17) ──────────────────────────────────
   Replaces the "long thin bar" — Erik: "this one is a BIG deal - we want it
   to feel like one" — and its invisible ink-on-navy .btn-ghost chips. One
   card per platform on the #101426 board; every colour below is computed
   against its real background (worst case in the comment). Effective card
   backgrounds: rgba(255,255,255,.06) over #101426 ≈ #1e2233; the connected
   tint ≈ #192430. */
.scp { background:#101426; border-radius:16px; padding:18px 20px 20px; box-shadow:0 12px 30px rgba(12,27,46,.18); font-family:'Sora',sans-serif; }
.scp-offer { margin-top:14px; padding:12px 16px; background:rgba(255,216,77,.08); border:1.5px solid rgba(255,216,77,.45); border-radius:11px; font-size:.84rem; line-height:1.55; color:#e8edf4; }
.scp-offer a { color:#ffd84d; font-weight:800; text-decoration:none; }
.scp-offer a:hover { text-decoration:underline; }
.scp-head { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.scp-tx { flex:1; min-width:230px; }
.scp-tx strong { display:block; color:#fff; font:800 1.08rem 'Sora',sans-serif; }          /* 18.3:1 on #101426 */
.scp-tx p { margin:5px 0 0; color:#c7d2e0; font:500 .8rem/1.55 'Sora',sans-serif; }        /* 11.9:1 */
.scp-prog { flex:none; text-align:right; }
.scp-prog b { display:block; color:#ffd84d; font:800 1.45rem/1 'Sora',sans-serif; }        /* 13.2:1 */
.scp-prog b i { font-style:normal; color:#8b93ab; font-size:.95rem; }                      /* 5.96:1 */
.scp-prog > span { display:block; margin-top:2px; color:#c7d2e0; font:800 .6rem 'Sora',sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.scp-segs { display:flex; gap:4px; margin-top:7px; justify-content:flex-end; }
.scp-segs i { width:20px; height:5px; border-radius:99px; background:rgba(255,255,255,.18); }
.scp-segs i.on { background:#7ed9a7; }
.scp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(152px,1fr)); gap:10px; }
.scp-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px; background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.16); border-radius:14px; padding:13px 14px; text-align:left; font-family:'Sora',sans-serif; min-height:118px; }
.scp-card b { color:#fff; font:800 .84rem 'Sora',sans-serif; }                              /* 15.8:1 on ≈#1e2233 */
.scp-state { color:#aeb6cd; font:600 .7rem/1.45 'Sora',sans-serif; }                        /* 7.8:1 */
.scp-state.ok { color:#7ed9a7; font-weight:700; word-break:break-word; }                    /* 9.3:1 */
.scp-brand { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:rgba(255,255,255,.1); color:#fff; flex:none; }
.scp-cta { margin-top:auto; background:#ffd84d; color:#101426; border-radius:999px; padding:5px 12px; font:800 .72rem 'Sora',sans-serif; }  /* 13.2:1 ink on gold */
button.scp-card { cursor:pointer; transition:transform .14s, border-color .14s, background .14s; }
button.scp-card:hover { border-color:#ffd84d; background:rgba(255,216,77,.09); transform:translateY(-2px); }
button.scp-card:focus-visible { outline:2px solid #ffd84d; outline-offset:2px; }
button.scp-card[disabled] { cursor:default; transform:none; }
.scp-card.is-busy { border-color:#ffd84d; }
.scp-card.is-on { background:rgba(126,217,167,.08); border-color:rgba(126,217,167,.55); }
.scp-card.is-wait { border-style:dashed; }
.scp-card.is-wait b { color:#c7d2e0; }                                                      /* 10.3:1 */
.scp-badge { position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:50%; background:#1f7a4d; color:#fff; display:grid; place-items:center; font:800 .72rem 'Sora',sans-serif; animation:scpPop .45s ease; }  /* 5.3:1 white on #1f7a4d */
.scp-card.is-new { animation:scpNew 1.1s ease; }
@keyframes scpPop { 0% { transform:scale(.2); } 60% { transform:scale(1.3); } 100% { transform:scale(1); } }
@keyframes scpNew { 0% { box-shadow:0 0 0 0 rgba(126,217,167,.75); } 100% { box-shadow:0 0 0 16px rgba(126,217,167,0); } }
@media (prefers-reduced-motion: reduce) {
  .scp-badge, .scp-card.is-new { animation:none; }
  button.scp-card, button.scp-card:hover { transition:none; transform:none; }
}
@media (max-width:560px) { .scp-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .scp-prog { text-align:left; } .scp-segs { justify-content:flex-start; } }

/* DARK-SURFACE TEXT GUARD entries for the board (the rule: a dark band added
   anywhere gets its palette re-asserted here in the same commit). */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .scp strong { color:#fff; }      /* 18.3:1 on #101426 */
[data-theme]:not([data-theme="light"]) .theme-light .main-content .scp p,
[data-theme]:not([data-theme="light"]) .theme-light .main-content .scp .text-gray { color:#c7d2e0; } /* 11.9:1 */

/* ═══════════════════════════════════════════════════════════════════════════
   🎈 POP CARDS → OUTLINE CARDS (Erik, Aug 17 2026: "the different colors look
   terrible. please just do an outline with a black line or the navy blue line
   and leave the area behind the color of the screen").
   White card · 2px ink outline · NO offset shadow — the page ground shows
   behind every card. Navy (#123ec4) is the only second line color, used on
   hover and on emphasis cards. The pop-* variant classes stay in the markup
   but are deliberately paint-neutral now, so no renderer needs an edit.
   SKIN PASS ONLY: these classes change paint, never layout or handlers. */
.theme-light .pop,
.theme-light .card.pop,
.mml-dash .pop {
  background: #ffffff;
  border: 2px solid #101426;
  border-radius: 16px;
  box-shadow: none;
  transition: border-color .16s ease;
}
.theme-light .pop:hover,
.theme-light .card.pop:hover,
.mml-dash .pop:hover { border-color: #123ec4; }
.theme-light .pop.pop-sm, .mml-dash .pop.pop-sm { border-radius: 12px; }

/* ── Family pass: existing card classes adopt the outline (no markup edits,
   the JS renderers keep emitting exactly what they already emit). ───────── */
.theme-light .qr-card { border: 2px solid #101426; box-shadow: none; }
.theme-light .qr-card:hover { border-color: #123ec4; }
.theme-light .ld-card { border: 2px solid #101426; box-shadow: none; }
.theme-light .nitro-card { border: 2px solid #101426; box-shadow: none; }
.theme-light .sp-hist { border: 2px solid #101426; box-shadow: none; }
.theme-light .post-card { border: 2px solid #101426; box-shadow: none; }
/* DARK-SURFACE TEXT GUARD (found during this pass, pre-existing): the Remix
   hero's h2 was painted ink by `.theme-light h2` (0,1,1) over `.rmx-num`
   (0,1,0) — dark-on-dark on the dark band. Re-assert its white. */
.theme-light .rmx-num { color: #fff; }
/* Billing credit tiles — same outline; the Remix tile keeps its gold top rail. */
.theme-light .bill-tile { border: 1.5px solid #101426; border-radius: 12px; box-shadow: none; }
.theme-light .bill-tile.remix { border-top: 3px solid var(--gold, #d9a908); }
.theme-light .bill-tile.total { border-color: #101426; }

/* ── Dashboard (self-contained light surface — safe under every skin).
   Flat white cards, ink outlines, screen ground behind. The one navy outline
   is the attention card — the single card that needs the agent's eye. ───── */
.mml-dash .kpi { border: 2px solid #101426; box-shadow: none; }
.mml-dash .kpi:hover { border-color: #123ec4; }
.mml-dash .qcard { border: 2px solid #101426; box-shadow: none; }
.mml-dash .qcard:hover { border-color: #123ec4; }
.mml-dash .attn-card { border: 2px solid #123ec4; box-shadow: none; }
.mml-dash .calm-card { border: 2px solid #101426; box-shadow: none; }
.mml-dash .mml-dfy { border: 2px solid #101426; box-shadow: none; }

/* ── Media Library tiles — one clean action row (badge left, equal-size
   buttons pinned right; the 🗑 never wraps to its own ragged line). ─────── */
.ml-tile { background: #fff; border: 2px solid #101426; border-radius: 12px; overflow: hidden; box-shadow: none; transition: border-color .16s ease; }
.ml-tile:hover { border-color: #123ec4; }
.ml-acts { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.ml-badges { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; flex: 1; min-width: 0; }
.ml-btns { display: flex; gap: 4px; flex: none; margin-left: auto; }
.ml-ib { width: 30px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: .74rem; line-height: 1; background: #fff; color: #3c4254; border: 1.5px solid #dcdad2; border-radius: 8px; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.ml-ib:hover { border-color: #101426; background: #f6f7fb; }

@media (prefers-reduced-motion: reduce) {
  .theme-light .pop, .mml-dash .pop, .theme-light .qr-card, .mml-dash .kpi, .mml-dash .qcard, .ml-tile, .ml-ib { transition: none; }
  .theme-light .pop:hover, .mml-dash .pop:hover, .theme-light .qr-card:hover, .mml-dash .kpi:hover, .mml-dash .qcard:hover, .ml-tile:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOUCH TARGETS — scoped to `pointer: coarse` so desktop density is untouched.

   Measured at 390px before this block: the photo-tile overlay cluster
   (⠿ ‹ › 🗑 ⤒ ⤓) at 26×26 with the red delete one thumb-width from the arrow;
   Media Library's per-photo buttons at 30×28 with delete 6px from copy;
   the education step checkbox at 13×13; reel style radios at 13×13; the video
   brief copy glyph at 10×17; "← Back to dashboard" — the ONLY navigation on a
   non-dashboard page — at 135×15. Apple's floor is 44×44, and this audience is
   45–60 on a phone in daylight. Anything a finger has to hit belongs here.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  .ml-ib { width: 44px; height: 44px; font-size: .92rem; }
  .psa-navb { min-height: 44px; }
  .psa-go { min-height: 46px; }
  .ap-seg span { min-height: 44px; display: inline-flex; align-items: center; }
  .dlv-back { min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; margin-left: -4px; }
  .psa-item { padding: 11px 0; }
  .psa-item input { width: 21px; height: 21px; margin-top: 1px; }
  .mml-check-row { min-height: 48px; }
  .abtn { min-height: 44px; display: inline-flex; align-items: center; }
  .ftab, .settings-page .mml-secnav a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* The concierge bubble is fixed bottom-right at 58px across, so with no room
   underneath it lands on whatever the last control on the page happens to be —
   measured 18px of overlap on agent-profile's "Save profile", bubble on top.
   Every portal page that carries him gets a bubble-sized gutter. */
body:has(#mmlMaxBubble) .main-content { padding-bottom: 96px; }

/* Wide content must scroll inside its own box, never push the page sideways.
   Approvals' table ran to right:929px at a 390px viewport with NO scrollable
   ancestor — Status and Link were simply unreachable. Same shape on Billing's
   account-activity table. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Approvals: the thing you are approving ────────────────────────────────
   The card used to carry a 90-character, nowrap, overflow-hidden sliver of a
   ~400-character post and no image. You cannot approve what you cannot read. */
.appr-body { display: flex; gap: 14px; align-items: flex-start; padding: 0 15px 14px 15px; }
.appr-shot { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; flex: none; background: #f1f0ea; }
.appr-cap {
  flex: 1; min-width: 0;
  font: 500 13.5px/1.62 'Sora', sans-serif; color: #33414f;
  background: #f8f8f5; border: 1px solid #eceada; border-radius: 10px;
  padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 15em; overflow-y: auto;
}
.appr-cap-none { color: #5f6572; font-style: italic; }
@media (max-width: 640px) {
  .appr-body { flex-direction: column; }
  .appr-shot { width: 100%; height: 180px; }
  .appr-acts { flex-wrap: wrap; }
}

/* ── Nitro Index layout ────────────────────────────────────────────────────
   ⚠ This grid had NO mobile breakpoint, and the page is overflow-x:clip. At
   390px all three action buttons computed to left:408px — off-screen, and the
   page could not be scrolled sideways to reach them. On a phone the Nitro page
   is "download the PDF and paste it into your MLS", and there was no PDF
   button. It only reappeared above ~530px. */
.nitro-3col { display: grid; grid-template-columns: 160px 1.35fr 0.95fr; gap: 18px; align-items: start; }
@media (max-width: 900px) {
  .nitro-3col { grid-template-columns: minmax(0, 1fr); }
  /* The photo strip goes horizontal so it doesn't eat a screen of height. */
  .nitro-3col > div:first-child { flex-direction: row !important; overflow-x: auto; padding-bottom: 4px; }
  .nitro-3col > div:first-child > div:first-child { flex: none; align-self: center; }
}

/* Crew-chat openers. A blank chat box is the failure state for this audience —
   these say what the specialist is for, in one tap, in their own register. */
.mx-starter {
  font: 600 12px 'Sora', sans-serif; color: #123ec4;
  background: #fff; border: 1px solid #cfd9f5; border-radius: 999px;
  padding: 8px 13px; cursor: pointer; min-height: 36px;
}
.mx-starter:hover { background: #eef3ff; border-color: #123ec4; }
@media (pointer: coarse) { .mx-starter { min-height: 44px; } }