/* ============================================================
   VEYELLE — Design System
   Dark luxury: deep forest-black canvas, warm cream type,
   antique-gold accent. Refined, editorial, restrained motion.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  color-scheme: dark; /* tells the browser to render native controls (select popups, date pickers, scrollbars) in their dark variant instead of defaulting to light/white -- this is the standard fix for white-on-white native <select> option lists */
  --bg: #0a0f0d;
  --bg-soft: #0e1512;
  --surface: rgba(246,241,231,0.04);
  --surface-hover: rgba(246,241,231,0.07);
  --border: rgba(246,241,231,0.10);
  --border-strong: rgba(201,162,103,0.35);
  --cream: #f6f1e7;
  --cream-dim: rgba(246,241,231,0.62);
  --cream-faint: rgba(246,241,231,0.38);
  --gold: #c9a267;
  --gold-bright: #e6c48e;
  --gold-dim: rgba(201,162,103,0.16);
  --wine: #a8493f;
  --wine-bright: #c85f52;
  --green-deep: #10241c;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 26px;
  --shadow-soft: 0 20px 60px -20px rgba(0,0,0,0.6);
  --ease: cubic-bezier(.16,.8,.24,1);
  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--cream);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:'Fraunces',serif; font-weight:500; margin:0; letter-spacing:-0.01em; }
p{ margin:0; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

/* Background texture — soft radial glow + grain */
.bg-glow{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(201,162,103,0.10), transparent 60%),
    radial-gradient(50% 45% at 100% 10%, rgba(168,73,63,0.08), transparent 55%),
    var(--bg);
}
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(10,15,13,0.72);
  border-bottom:1px solid var(--border);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.logo{ font-family:'Fraunces',serif; font-size:22px; letter-spacing:0.06em; font-weight:600; color:var(--cream); display:flex; align-items:center; gap:8px; }
.logo .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }
.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{ font-size:14px; color:var(--cream-dim); transition:color .2s var(--ease); }
.nav-links a:hover{ color:var(--gold-bright); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; background:none; border:0; color:var(--cream); font-size:26px; }

@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:999px; font-size:14px; font-weight:700;
  letter-spacing:0.02em; border:1px solid transparent; transition:all .25s var(--ease);
  white-space:nowrap;
}
.btn-gold{ background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#1a1108; }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(201,162,103,0.55); }
.btn-outline{ border-color:var(--border-strong); color:var(--cream); background:transparent; }
.btn-outline:hover{ background:var(--surface); border-color:var(--gold); }
.btn-ghost{ color:var(--cream-dim); padding:14px 18px; }
.btn-ghost:hover{ color:var(--cream); }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 18px; font-size:13px; }
.btn[disabled]{ opacity:.5; pointer-events:none; }

/* ---------- Hero ---------- */
.hero{ padding:120px 0 90px; position:relative; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; padding:8px 16px;
  border:1px solid var(--border-strong); border-radius:999px; font-size:12px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-bright);
  background:var(--gold-dim);
}
.hero h1{ font-size:clamp(40px,6vw,74px); line-height:1.03; margin-top:26px; max-width:820px; }
.hero h1 em{ font-style:italic; color:var(--gold-bright); }
.hero p.lead{ margin-top:24px; max-width:560px; font-size:18px; color:var(--cream-dim); }
.hero-actions{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; }
.trust-row{ display:flex; gap:28px; margin-top:56px; flex-wrap:wrap; }
.trust-row .item{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--cream-faint); }
.trust-row .item svg{ width:18px; height:18px; color:var(--gold); }

/* ---------- Sections ---------- */
.section{ padding:100px 0; position:relative; }
.section-head{ max-width:640px; margin-bottom:56px; }
.kicker{ font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.section-head h2{ font-size:clamp(30px,4vw,46px); margin-top:14px; }
.section-head p{ margin-top:16px; color:var(--cream-dim); font-size:16px; }

.grid{ display:grid; gap:24px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:940px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-3,.grid-4,.grid-2{ grid-template-columns:1fr; } }

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:32px; transition:all .3s var(--ease);
}
.card:hover{ background:var(--surface-hover); border-color:var(--border-strong); transform:translateY(-4px); }
.card .num{ font-family:'Fraunces',serif; font-size:15px; color:var(--gold); border:1px solid var(--border-strong); width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.card h3{ font-size:19px; margin-bottom:10px; }
.card p{ color:var(--cream-dim); font-size:14.5px; }
.card.icon-card{ text-align:left; }

.badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.badge{ font-size:12px; padding:7px 14px; border-radius:999px; border:1px solid var(--border); color:var(--cream-faint); }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Pricing ---------- */
.price-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:36px; display:flex; flex-direction:column; gap:20px; position:relative; overflow:hidden;
}
.price-card.featured{ border-color:var(--border-strong); background:linear-gradient(180deg,rgba(201,162,103,0.09),rgba(201,162,103,0.02)); }
.price-card.featured::before{ content:'MOST POPULAR'; position:absolute; top:18px; right:-38px; transform:rotate(45deg); background:var(--gold); color:#1a1108; font-size:10px; font-weight:800; letter-spacing:0.08em; padding:4px 44px; }
.price-tag{ font-family:'Fraunces',serif; font-size:40px; }
.price-tag span{ font-size:14px; font-family:'Manrope',sans-serif; color:var(--cream-faint); }
.price-card ul{ display:flex; flex-direction:column; gap:12px; margin:6px 0; }
.price-card li{ font-size:14px; color:var(--cream-dim); display:flex; gap:10px; align-items:flex-start; }
.price-card li svg{ width:16px; height:16px; color:var(--gold); flex-shrink:0; margin-top:2px; }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--border); padding:64px 0 40px; margin-top:60px; }
.footer-grid{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.footer-col h4{ font-family:'Manrope',sans-serif; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream-faint); margin-bottom:16px; font-weight:700;}
.footer-col a{ display:block; font-size:14px; color:var(--cream-dim); margin-bottom:10px; }
.footer-col a:hover{ color:var(--gold-bright); }
.footer-bottom{ margin-top:56px; padding-top:24px; border-top:1px solid var(--border); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:var(--cream-faint); }

/* ---------- Auth pages ---------- */
.auth-shell{ min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:900px){ .auth-shell{ grid-template-columns:1fr; } .auth-visual{ display:none; } }
.auth-visual{
  background:
    radial-gradient(70% 60% at 20% 10%, rgba(201,162,103,0.18), transparent 60%),
    linear-gradient(160deg,#0b1613,#060908);
  padding:60px; display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid var(--border);
}
.auth-visual h2{ font-size:clamp(32px,4vw,48px); max-width:420px; }
.auth-form-side{ display:flex; align-items:center; justify-content:center; padding:60px 28px; }
.auth-box{ width:100%; max-width:400px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; color:var(--cream-dim); margin-bottom:8px; font-weight:600; }
.field input, .field select, .field textarea{
  width:100%; background:var(--surface); border:1px solid var(--border); color:var(--cream);
  padding:14px 16px; border-radius:var(--radius-sm); font-size:15px; font-family:inherit;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold); background:var(--surface-hover); box-shadow:0 0 0 3px var(--gold-dim); }
.field small{ display:block; margin-top:6px; color:var(--cream-faint); font-size:12px; }
/* Belt-and-suspenders for the native <select> popup itself (color-scheme:dark above already
   handles this in current Chrome/Edge/Firefox/Safari) -- explicit option colors for any engine
   that respects them, plus a visible selected/hover state. Native <select>/<option> are kept
   throughout (not swapped for a custom widget) so keyboard navigation, screen readers, and
   mobile's native picker UI are never sacrificed. */
.field select option{ background:var(--bg-soft); color:var(--cream); }
.field select option:checked, .field select option:hover{ background:var(--gold-dim); color:var(--cream); }
.field select:disabled{ opacity:0.5; cursor:not-allowed; }
.divider-text{ display:flex; align-items:center; gap:14px; margin:22px 0; color:var(--cream-faint); font-size:12px; }
.divider-text::before,.divider-text::after{ content:''; flex:1; height:1px; background:var(--border); }
.alert{ padding:14px 16px; border-radius:var(--radius-sm); font-size:13.5px; margin-bottom:18px; }
.alert-error{ background:rgba(168,73,63,0.14); border:1px solid rgba(168,73,63,0.4); color:#f2b9b3; }
.alert-success{ background:rgba(94,150,110,0.14); border:1px solid rgba(94,150,110,0.4); color:#bfe6c9; }
.checkbox-row{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--cream-dim); margin-bottom:20px; }
.checkbox-row input{ margin-top:3px; }

/* ---------- Dashboard ---------- */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{
  width:240px; flex-shrink:0; border-right:1px solid var(--border); padding:28px 20px;
  display:flex; flex-direction:column; gap:6px; background:var(--bg-soft);
}
.sidebar a{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--radius-sm); font-size:14px; color:var(--cream-dim); }
.sidebar a:hover, .sidebar a.active{ background:var(--surface); color:var(--cream); }
.main-area{ flex:1; padding:36px 40px; max-width:1100px; }
@media (max-width:800px){ .sidebar{ display:none; } .main-area{ padding:24px 20px; } }

.topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; flex-wrap:wrap; gap:14px; }
.topbar h1{ font-size:26px; }
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:40px; }
@media (max-width:800px){ .stat-row{ grid-template-columns:repeat(2,1fr); } }
.stat-box{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px; }
.stat-box .val{ font-family:'Fraunces',serif; font-size:30px; color:var(--gold-bright); }
.stat-box .lbl{ font-size:12.5px; color:var(--cream-faint); margin-top:6px; }

.profile-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; }
.profile-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.profile-card .thumb{ aspect-ratio:3/4; background:linear-gradient(160deg,#1c2622,#0d1210); display:flex; align-items:center; justify-content:center; color:var(--cream-faint); font-family:'Fraunces',serif; font-size:38px; position:relative; }
.profile-card .thumb .pill{ position:absolute; top:10px; left:10px; font-size:10px; padding:4px 10px; border-radius:999px; background:rgba(10,15,13,0.7); border:1px solid var(--border-strong); color:var(--gold-bright); }
.profile-card .info{ padding:14px; }
.profile-card .info .name{ font-weight:700; font-size:14.5px; }
.profile-card .info .meta{ font-size:12px; color:var(--cream-faint); margin-top:3px; }
.empty-state{ padding:50px 20px; text-align:center; color:var(--cream-faint); border:1px dashed var(--border); border-radius:var(--radius); font-size:14px; }

table.admin-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.admin-table th{ text-align:left; padding:12px 14px; color:var(--cream-faint); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid var(--border); }
table.admin-table td{ padding:14px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.admin-table tr:hover td{ background:var(--surface); }
.tag{ font-size:11px; padding:4px 10px; border-radius:999px; font-weight:700; }
.tag-pending{ background:rgba(201,162,103,0.16); color:var(--gold-bright); }
.tag-approved{ background:rgba(94,150,110,0.16); color:#8fd6a2; }
.tag-rejected{ background:rgba(168,73,63,0.16); color:#e58d83; }

.modal-overlay{ position:fixed; inset:0; background:rgba(5,7,6,0.7); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-box{ background:var(--bg-soft); border:1px solid var(--border-strong); border-radius:var(--radius-lg); padding:32px; max-width:420px; width:100%; box-shadow:var(--shadow-soft); }

.mobile-menu{ position:fixed; inset:0; background:var(--bg); z-index:99; padding:28px; display:none; flex-direction:column; gap:22px; }
.mobile-menu.open{ display:flex; }
.mobile-menu a{ font-size:20px; font-family:'Fraunces',serif; }

::selection{ background:var(--gold); color:#1a1108; }

/* ---------- Nav badges ---------- */
.nav-icon-link{ position:relative; display:inline-flex; align-items:center; }
.nav-badge{ position:absolute; top:-6px; right:-10px; background:var(--wine); color:#fff; font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px; }

/* ---------- Tabs (admin) ---------- */
.tab-row{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:28px; border-bottom:1px solid var(--border); padding-bottom:0; }
.tab-link{ font-size:13.5px; padding:10px 16px; color:var(--cream-faint); border-bottom:2px solid transparent; }
.tab-link:hover{ color:var(--cream); }
.tab-link.active{ color:var(--gold-bright); border-bottom-color:var(--gold); }

/* ---------- Filter bar ---------- */
.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:28px; padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.filter-bar select, .filter-bar input{ background:var(--bg-soft); border:1px solid var(--border); color:var(--cream); padding:9px 12px; border-radius:var(--radius-sm); font-size:13px; font-family:inherit; }
.filter-bar label{ font-size:11.5px; color:var(--cream-faint); display:flex; flex-direction:column; gap:4px; }
.chip-toggle{ display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:999px; border:1px solid var(--border); font-size:12.5px; color:var(--cream-dim); cursor:pointer; user-select:none; }
.chip-toggle.on{ background:var(--gold-dim); border-color:var(--border-strong); color:var(--gold-bright); }

/* ---------- Profile detail ---------- */
.profile-hero{ display:grid; grid-template-columns:280px 1fr; gap:32px; margin-bottom:36px; }
@media (max-width:760px){ .profile-hero{ grid-template-columns:1fr; } }
.profile-photo-main{ aspect-ratio:3/4; border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(160deg,#1c2622,#0d1210); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:56px; color:var(--cream-faint); position:relative; }
.profile-photo-main img{ width:100%; height:100%; object-fit:cover; }
.photo-strip{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.photo-strip .thumb-sm{ width:64px; height:64px; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border); }
.photo-strip .thumb-sm img{ width:100%; height:100%; object-fit:cover; }
.profile-name-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.profile-name-row h1{ font-size:30px; }
.verified-badge{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; padding:5px 12px; border-radius:999px; background:rgba(94,150,110,0.16); color:#8fd6a2; font-weight:700; }
.profile-meta-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; color:var(--cream-faint); font-size:13.5px; }
.profile-actions{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.action-icon-btn{ width:44px; height:44px; border-radius:50%; border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; color:var(--cream-dim); transition:all .2s var(--ease); background:transparent; }
.action-icon-btn:hover{ background:var(--surface); color:var(--gold-bright); }
.action-icon-btn.liked{ background:var(--gold-dim); color:var(--gold-bright); border-color:var(--gold); }
.availability-toggle{ display:inline-flex; align-items:center; gap:10px; }
.switch{ position:relative; width:44px; height:24px; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{ position:absolute; inset:0; background:var(--border); border-radius:999px; transition:.2s; cursor:pointer; }
.switch .slider::before{ content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:var(--cream); border-radius:50%; transition:.2s; }
.switch input:checked + .slider{ background:var(--gold); }
.switch input:checked + .slider::before{ transform:translateX(20px); }

/* ---------- Messages ---------- */
.messages-shell{ display:grid; grid-template-columns:300px 1fr; height:calc(100vh - 76px); }
@media (max-width:800px){ .messages-shell{ grid-template-columns:1fr; height:auto; } }
.convo-list{ border-right:1px solid var(--border); overflow-y:auto; }
.convo-item{ display:flex; gap:12px; padding:16px 18px; border-bottom:1px solid var(--border); align-items:center; }
.convo-item:hover, .convo-item.active{ background:var(--surface); }
.convo-avatar{ width:44px; height:44px; border-radius:50%; background:linear-gradient(160deg,#1c2622,#0d1210); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:16px; color:var(--cream-faint); flex-shrink:0; overflow:hidden; }
.convo-avatar img{ width:100%; height:100%; object-fit:cover; }
.convo-preview{ flex:1; min-width:0; }
.convo-preview .name{ font-size:14px; font-weight:700; }
.convo-preview .snippet{ font-size:12.5px; color:var(--cream-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.unread-dot{ width:9px; height:9px; border-radius:50%; background:var(--gold); flex-shrink:0; }
.thread{ display:flex; flex-direction:column; height:100%; }
.thread-header{ padding:18px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; }
.thread-body{ flex:1; overflow-y:auto; padding:24px; display:flex; flex-direction:column; gap:12px; }
.bubble{ max-width:65%; padding:12px 16px; border-radius:18px; font-size:14px; line-height:1.5; }
.bubble.mine{ align-self:flex-end; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#1a1108; border-bottom-right-radius:4px; }
.bubble.theirs{ align-self:flex-start; background:var(--surface); border:1px solid var(--border); border-bottom-left-radius:4px; }
.bubble .time{ display:block; font-size:10.5px; opacity:.65; margin-top:5px; }
.thread-composer{ padding:18px 24px; border-top:1px solid var(--border); display:flex; gap:12px; }
.thread-composer input{ flex:1; background:var(--surface); border:1px solid var(--border); color:var(--cream); padding:12px 16px; border-radius:999px; font-family:inherit; font-size:14px; }
.paywall-banner{ margin:16px 24px; padding:16px; border-radius:var(--radius); background:linear-gradient(135deg,rgba(201,162,103,0.12),rgba(201,162,103,0.03)); border:1px solid var(--border-strong); font-size:13.5px; }

/* ---------- Notifications ---------- */
.notif-item{ display:flex; gap:14px; padding:16px 18px; border-bottom:1px solid var(--border); }
.notif-item.unread{ background:rgba(201,162,103,0.05); }
.notif-icon{ width:38px; height:38px; border-radius:50%; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--gold); }
.notif-text{ font-size:13.5px; color:var(--cream-dim); }
.notif-time{ font-size:11.5px; color:var(--cream-faint); margin-top:3px; }
.settings-row{ display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid var(--border); }
.settings-row:last-child{ border-bottom:none; }
.settings-row .lbl{ font-size:14px; font-weight:600; }
.settings-row .desc{ font-size:12.5px; color:var(--cream-faint); margin-top:3px; }

/* ---------- Coming soon ---------- */
.coming-soon{ text-align:center; padding:80px 20px; }
.coming-soon .icon-wrap{ width:72px; height:72px; border-radius:50%; background:var(--gold-dim); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; margin:0 auto 24px; color:var(--gold-bright); }

/* ---------- Meetups ---------- */
.meetup-card{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.status-pill{ font-size:11px; padding:5px 12px; border-radius:999px; font-weight:700; }
.status-proposed{ background:rgba(201,162,103,0.16); color:var(--gold-bright); }
.status-accepted{ background:rgba(94,150,110,0.16); color:#8fd6a2; }
.status-declined{ background:rgba(168,73,63,0.16); color:#e58d83; }
.status-disputed{ background:rgba(168,73,63,0.16); color:#e58d83; }

/* ---------- Config toggles (admin) ---------- */
.config-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; flex-wrap:wrap; }
.config-row .title{ font-weight:700; font-size:14.5px; }
.config-row .sub{ font-size:12.5px; color:var(--cream-faint); margin-top:3px; }
.pill-disabled{ font-size:11px; padding:4px 10px; border-radius:999px; background:rgba(168,73,63,0.16); color:#e58d83; font-weight:700; }
.pill-enabled{ font-size:11px; padding:4px 10px; border-radius:999px; background:rgba(94,150,110,0.16); color:#8fd6a2; font-weight:700; }
.pill-unconfirmed{ font-size:11px; padding:4px 10px; border-radius:999px; background:rgba(201,162,103,0.16); color:var(--gold-bright); font-weight:700; }

/* ---------- Welcome / promo modal (homepage, logged-out visitors only) ---------- */
.promo-overlay{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(6,9,8,0.74); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.promo-overlay.open{ opacity:1; visibility:visible; }
.promo-overlay[hidden]{ display:none; }

.promo-modal{
  position:relative; width:100%; max-width:1120px; max-height:88vh; overflow:hidden;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(201,162,103,0.12), transparent 55%),
    radial-gradient(80% 80% at 0% 100%, rgba(168,73,63,0.07), transparent 60%),
    var(--bg-soft);
  border:1px solid var(--border-strong); border-radius:var(--radius-lg);
  box-shadow: var(--shadow-soft), inset 0 0 0 1px rgba(201,162,103,0.06);
  transform:translateY(18px) scale(.98); opacity:0; transition:transform .4s var(--ease), opacity .4s var(--ease);
}
.promo-overlay.open .promo-modal{ transform:translateY(0) scale(1); opacity:1; }

.promo-progress{ position:absolute; top:0; left:0; right:0; height:3px; background:var(--border); z-index:2; }
.promo-progress-bar{ height:100%; width:0%; background:linear-gradient(90deg,var(--gold),var(--gold-bright)); }

.promo-close{
  position:absolute; top:14px; right:14px; z-index:3; width:34px; height:34px; border-radius:50%;
  background:rgba(10,15,13,0.6); border:1px solid var(--border); color:var(--cream);
  display:flex; align-items:center; justify-content:center; font-size:19px; line-height:1;
  transition:all .2s var(--ease);
}
.promo-close:hover{ background:var(--surface-hover); border-color:var(--gold); color:var(--gold-bright); }

.promo-scroll{ max-height:88vh; overflow-y:auto; padding:38px 44px; }

.promo-grid{ display:grid; grid-template-columns:1.08fr 0.92fr; gap:40px; align-items:center; }

.promo-logo{
  display:flex; align-items:center; gap:8px; font-family:'Fraunces',serif; font-size:16px;
  letter-spacing:0.08em; font-weight:600; color:var(--cream); margin-bottom:14px;
}
.promo-logo .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }
.promo-tag{
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-bright);
  font-weight:700; margin-bottom:14px;
}
.promo-left h2{ font-size:clamp(28px,3vw,40px); line-height:1.08; }
.promo-left h2 em{ font-style:italic; color:var(--gold-bright); }
.promo-lead{ margin-top:14px; color:var(--cream-dim); font-size:15px; max-width:420px; }
.promo-features{ display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin:22px 0 26px; }
.promo-features li{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--cream-dim); }
.promo-features li svg{ width:15px; height:15px; color:var(--gold); flex-shrink:0; }
.promo-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.promo-fine{ margin-top:16px; font-size:11.5px; color:var(--cream-faint); }

/* Right side — one compact "glimpse of the app" panel, not stacked cards */
.promo-right{ display:flex; }
.promo-device{
  width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px 14px; box-shadow:0 20px 40px -24px rgba(0,0,0,0.65);
}
.promo-device-bar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.promo-device-label{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-faint); font-weight:700; }
.promo-preview-tag{
  font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--cream-faint);
  border:1px solid var(--border); border-radius:999px; padding:4px 10px; white-space:nowrap;
}

.promo-device-profile{ display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.promo-avatar{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--gold-bright),var(--wine));
  display:flex; align-items:center; justify-content:center; color:#1a1108; font-family:'Fraunces',serif; font-weight:600;
}
.promo-mock-name{ font-size:14px; font-weight:700; display:flex; align-items:center; gap:6px; }
.promo-mock-name svg{ width:13px; height:13px; color:var(--gold); }
.promo-mock-sub{ font-size:11.5px; color:var(--cream-faint); margin-top:2px; display:flex; align-items:center; gap:4px; }
.promo-mock-sub svg{ width:11px; height:11px; color:var(--cream-faint); }
.promo-pill{ margin-left:auto; font-size:10.5px; padding:5px 10px; border-radius:999px; background:rgba(95,214,138,0.14); color:#7fd9a4; border:1px solid rgba(95,214,138,0.3); white-space:nowrap; }

.promo-device-chat{ padding:12px 0; }
.promo-chat-bubble{ max-width:80%; padding:8px 12px; border-radius:13px; font-size:12px; margin-bottom:7px; }
.promo-chat-bubble.them{ background:var(--surface-hover); border:1px solid var(--border); border-bottom-left-radius:4px; }
.promo-chat-bubble.you{ background:var(--gold-dim); border:1px solid var(--border-strong); border-bottom-right-radius:4px; margin-left:auto; color:var(--cream); }

.promo-device-footer{ display:flex; align-items:center; gap:7px; padding-top:12px; border-top:1px solid var(--border); font-size:11px; color:var(--cream-faint); }
.promo-device-footer svg{ width:13px; height:13px; color:var(--gold); flex-shrink:0; }


@media (max-width:900px){
  .promo-modal{ max-width:640px; }
  .promo-grid{ grid-template-columns:1fr; gap:22px; }
  .promo-scroll{ padding:34px 30px; max-height:85vh; }
  .promo-right{ max-width:360px; margin:0 auto; }
}
@media (max-width:640px){
  .promo-overlay{ padding:0; align-items:flex-end; }
  .promo-modal{ max-width:100%; max-height:86vh; border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
  .promo-scroll{ padding:28px 20px 22px; max-height:86vh; }
  .promo-right{ display:none; }
  .promo-features{ grid-template-columns:1fr; }
  .promo-features li:nth-child(4){ display:none; }
  .promo-actions{ flex-direction:column; }
  .promo-actions .btn{ width:100%; }
}

@media (prefers-reduced-motion: reduce){
  .promo-overlay, .promo-modal, .promo-progress-bar{ transition:none !important; }
}

/* ---------- Homepage female profile showcase carousel (real members only) ---------- */
.showcase-section{ padding-top:70px; padding-bottom:40px; }
.showcase{ position:relative; display:flex; align-items:center; gap:12px; }
.showcase-track{
  /* Viewport that clips the wider inner track. Movement is a pure CSS animation on
     .showcase-track-inner (see main.js) — deliberately NOT requestAnimationFrame. rAF-driven
     scrollLeft/transform tweens are throttled or fully suspended by the browser whenever the tab
     or frame is not the visible/focused one (confirmed by direct diagnosis: offset stayed frozen
     at 0 for 15+ seconds specifically because document.hidden was true) — a real, demonstrated
     failure mode, not a hypothetical one. CSS animations are driven by the compositor and keep
     progressing (or resume correctly from elapsed real time) regardless of tab visibility, which is
     exactly the reliability this needs. touch-action:pan-y lets vertical page scroll pass through
     on mobile while horizontal drag/swipe is handled by our own pointer-event logic. */
  overflow:hidden; position:relative; padding:6px 2px 18px; flex:1;
  cursor:grab; touch-action:pan-y;
}
.showcase-track:active{ cursor:grabbing; }
.showcase-track:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

@keyframes showcase-auto-slide{
  from{ transform:translate3d(0,0,0); }
  /* The inner track holds exactly two identical copies of the eligible-member set once cloned
     (see main.js), so -50% of its OWN width is always exactly one copy's width — no JS-computed
     pixel value needed for the distance, only for the duration (desired px/sec speed). */
  to{ transform:translate3d(-50%,0,0); }
}
.showcase-track-inner{
  display:flex; gap:20px; will-change:transform;
}
.showcase-track-inner.showcase-track-paused{ animation-play-state:paused; }
.showcase-track-inner.showcase-snap{ transition:transform .35s var(--ease); }
@media (prefers-reduced-motion: reduce){
  .showcase-track-inner{ animation:none !important; }
}

.showcase-card{
  position:relative; flex:0 0 auto; width:220px; scroll-snap-align:start;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.showcase-card:hover{ border-color:var(--border-strong); transform:translateY(-3px); }

.showcase-card-media{ position:relative; display:block; aspect-ratio:280/360; background:var(--bg-soft); }
.showcase-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.showcase-badges{ position:absolute; left:10px; top:10px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.showcase-badge{ font-size:10px; font-weight:700; letter-spacing:.04em; padding:4px 9px; border-radius:999px; backdrop-filter:blur(6px); }
.showcase-badge-gold{ background:rgba(201,162,103,0.85); color:#1a1108; }
.showcase-badge-green{ background:rgba(95,214,138,0.85); color:#0a1f10; }
.showcase-badge-dim{ background:rgba(10,15,13,0.6); color:var(--cream); border:1px solid rgba(246,241,231,0.2); }

.showcase-like{
  position:absolute; top:10px; right:10px; z-index:2; width:32px; height:32px; border-radius:50%;
  background:rgba(10,15,13,0.55); border:1px solid rgba(246,241,231,0.25); color:var(--cream);
  display:flex; align-items:center; justify-content:center; transition:all .2s var(--ease);
}
.showcase-like svg{ width:16px; height:16px; }
.showcase-like:hover{ background:rgba(10,15,13,0.8); border-color:var(--gold); }
.showcase-like.liked{ color:var(--wine-bright); border-color:var(--wine-bright); }
.showcase-like.liked svg{ fill:currentColor; }

.showcase-card-body{ display:block; padding:14px 14px 16px; }
.showcase-name{ display:flex; align-items:center; gap:6px; font-size:14.5px; font-weight:700; color:var(--cream); }
.showcase-name svg{ width:13px; height:13px; color:var(--gold); flex-shrink:0; }
.showcase-loc{ display:flex; align-items:center; gap:5px; margin-top:5px; font-size:12px; color:var(--cream-faint); }
.showcase-loc svg{ width:12px; height:12px; flex-shrink:0; }
.showcase-tagline{ margin-top:7px; font-size:12px; color:var(--cream-dim); line-height:1.4; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

.showcase-arrow{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:var(--surface);
  border:1px solid var(--border-strong); color:var(--cream); display:flex; align-items:center; justify-content:center;
  transition:all .2s var(--ease);
}
.showcase-arrow svg{ width:18px; height:18px; }
.showcase-arrow:hover{ background:var(--surface-hover); border-color:var(--gold); color:var(--gold-bright); }
.showcase-arrow:disabled{ opacity:.35; pointer-events:none; }

@media (max-width:640px){
  .showcase-arrow{ display:none; }
  /* One full card plus a clear peek of the next, so the row visibly reads as scrollable. */
  .showcase-card{ width:min(72vw, 250px); }
  .showcase-section{ padding-top:50px; padding-bottom:28px; }
}

/* ---------- Homepage browse grid (paginated, further down the page) ---------- */
.browse-section{ padding-top:70px; }
.browse-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
}
.browse-grid .showcase-card{ width:auto; }
.browse-more-wrap{ display:flex; justify-content:center; margin-top:32px; }
#browseLoadMore[disabled]{ opacity:.5; pointer-events:none; }

@media (max-width:940px){
  .browse-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:640px){
  .browse-grid{ grid-template-columns:repeat(2, 1fr); gap:14px; }
  .browse-section{ padding-top:50px; }
}
@media (max-width:420px){
  .browse-grid{ grid-template-columns:1fr; }
}

/* ---------- Compact safety/privacy strip (replaces the old large 4-card trust section) ---------- */
.safety-strip{ padding:36px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.safety-strip-inner{ text-align:center; max-width:720px; margin:0 auto; }
.safety-strip-line{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 22px;
  font-family:'Fraunces',serif; font-size:16px; color:var(--cream);
}
.safety-strip-line svg{ width:15px; height:15px; color:var(--gold); vertical-align:-2px; margin-right:6px; }
.safety-strip-inner p{ margin-top:12px; font-size:13px; color:var(--cream-faint); }
@media (max-width:640px){
  .safety-strip-line{ flex-direction:column; gap:10px; }
}

/* ============================================================
   Staged onboarding — intent + gender selection screens
   ============================================================ */
.onboard-shell{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; }
.onboard-shell .wrap{ width:100%; max-width:640px; }
.onboard-progress{ display:flex; gap:8px; justify-content:center; margin-bottom:28px; }
.onboard-progress .dot{ width:28px; height:4px; border-radius:2px; background:var(--border); }
.onboard-progress .dot.active{ background:var(--gold); }
.onboard-progress .dot.done{ background:var(--gold-dim); }
.onboard-shell h1{ font-size:clamp(26px,4vw,34px); text-align:center; margin-top:14px; }
.onboard-shell p.sub{ text-align:center; color:var(--cream-dim); margin-top:10px; font-size:15px; }
.choice-list{ display:flex; flex-direction:column; gap:12px; margin-top:32px; }
.choice-card{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 22px; text-align:left; color:var(--cream); text-decoration:none;
  transition:all .2s var(--ease); cursor:pointer; width:100%; font-family:inherit; font-size:16px;
}
.choice-card:hover, .choice-card:focus-visible{ background:var(--surface-hover); border-color:var(--gold); outline:none; transform:translateY(-2px); }
.choice-card .choice-title{ font-weight:600; font-size:16.5px; }
.choice-card .choice-desc{ color:var(--cream-dim); font-size:13px; margin-top:4px; }
.choice-card .choice-arrow{ color:var(--gold); font-size:20px; flex-shrink:0; }
.gender-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:32px; }
@media (max-width:640px){ .gender-grid{ grid-template-columns:1fr; } }
.gender-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:36px 24px; text-align:center; color:var(--cream); text-decoration:none;
  transition:all .2s var(--ease); cursor:pointer; font-family:inherit;
}
.gender-card:hover, .gender-card:focus-visible{ background:var(--surface-hover); border-color:var(--gold); outline:none; transform:translateY(-4px); }
.gender-card .gender-icon{ width:52px; height:52px; margin:0 auto 16px; border-radius:50%; background:var(--gold-dim); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--gold-bright); }
.gender-card .gender-title{ font-family:'Fraunces',serif; font-size:22px; }
.gender-card .gender-desc{ color:var(--cream-dim); font-size:13.5px; margin-top:8px; }
.onboard-back{ display:inline-block; margin-top:24px; color:var(--cream-faint); font-size:13px; text-decoration:none; }
.onboard-back:hover{ color:var(--gold-bright); }
.form-section{ margin-top:30px; }
.form-section:first-child{ margin-top:0; }
.form-section h2{ font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:16px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.field-value-display{ font-size:13px; color:var(--cream-dim); margin-top:6px; }
.field-value-display strong{ color:var(--cream); }
.use-location-btn-row{ margin:6px 0 18px; }
.geo-status-line{ font-size:12.5px; color:var(--cream-faint); margin-top:8px; display:flex; align-items:center; gap:8px; }
.geo-status-line.granted{ color:#bfe6c9; }
.geo-status-line.declined{ color:var(--cream-faint); }

/* Female onboarding -- Step 5 verification live camera capture (lib/pages/onboarding.js onboardingVerifyPage) */
.face-check-frame{
  position:relative; width:100%; max-width:360px; aspect-ratio:4/5; margin:24px auto 0;
  border-radius:var(--radius); overflow:hidden; background:var(--bg-soft); border:1px solid var(--border);
}
.face-check-frame video{ width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
.face-check-guide{
  position:absolute; inset:12%; border:2px dashed rgba(255,255,255,0.55); border-radius:50% / 40%;
  pointer-events:none;
}

/* Live Verification (Step 5) -- guided multi-pose progress indicator */
.face-check-progress{ display:flex; justify-content:center; gap:18px; margin-top:20px; }
.face-check-step{
  display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px;
  color:var(--cream-faint); width:28px; height:28px; border-radius:50%; border:1px solid var(--border);
  justify-content:center; position:relative;
}
.face-check-step span{ position:absolute; top:34px; white-space:nowrap; font-size:11px; }
.face-check-step.active{ border-color:var(--gold); color:var(--gold-bright); background:var(--gold-dim); }
.face-check-step.done{ border-color:var(--gold-dim); color:var(--gold); background:transparent; }

/* Gallery (Step 6) -- thumbnail grid with remove/set-main controls */
.gallery-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:24px; }
@media (max-width:520px){ .gallery-grid{ grid-template-columns:repeat(2, 1fr); } }
.gallery-thumb{ position:relative; aspect-ratio:1/1; width:100%; border-radius:var(--radius-sm); overflow:hidden; background:var(--surface); }
.gallery-thumb img{ width:100%;height:100%;object-fit:cover;border-radius:var(--radius-sm); }
.gallery-primary-badge{ position:absolute;top:4px;left:4px;background:var(--gold);color:#0a0f0d;font-size:10px;font-weight:700;padding:2px 6px;border-radius:10px; }
.gallery-thumb-remove{ position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:rgba(10,15,13,0.75);color:#fff;border:none;cursor:pointer;font-size:14px;line-height:1;padding:0; }
.gallery-thumb-primary{ position:absolute;bottom:4px;left:4px;right:4px;font-size:10px;padding:3px 4px;border-radius:6px;background:rgba(10,15,13,0.75);color:var(--cream);border:none;cursor:pointer; }
/* Fallback for a photo that genuinely fails to load (missing/corrupted file) -- shows a plain
   labeled placeholder instead of a browser's default broken-image icon on a black/blank tile.
   The onerror handler on the <img> (see onboardingGalleryPage) adds this class; hiding the <img>
   itself keeps the browser's own broken-image glyph from also showing through underneath. */
.gallery-thumb-broken-fallback{ display:none; }
.gallery-thumb-broken img{ display:none; }
.gallery-thumb-broken .gallery-thumb-broken-fallback{ display:flex; align-items:center; justify-content:center; text-align:center; width:100%; height:100%; font-size:11.5px; color:var(--cream-faint); background:var(--surface); padding:8px; }
.gallery-add-tile{ aspect-ratio:1/1;width:100%;border:1px dashed var(--border-strong);border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--cream-dim);cursor:pointer; }
.gallery-add-tile:hover{ border-color:var(--gold);color:var(--gold-bright); }

/* Profile Picture (Step 6) -- one deliberately-chosen main/primary photo, large square frame.
   Designed to read as "pick your main dating-profile photo", not a generic file-upload box:
   a soft gold-tinted gradient + person-silhouette glyph before a photo is chosen (rather than a
   camera icon, which reads as "take/upload a file" instead of "this becomes your photo"), and
   once chosen the photo fills the frame edge-to-edge with only a small corner pill to change it
   -- not a bar across the bottom that would cover part of her face. */
.profile-picture-frame{ width:min(320px, 78vw); aspect-ratio:1/1; margin:28px auto 0; border-radius:20px; border:2px dashed var(--border-strong); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--cream-dim); cursor:pointer; overflow:hidden; background:radial-gradient(circle at 50% 38%, rgba(201,162,103,0.14), var(--surface) 72%); position:relative; transition:border-color 0.15s ease, transform 0.15s ease; }
.profile-picture-frame:hover{ border-color:var(--gold); color:var(--gold-bright); transform:translateY(-1px); }
.profile-picture-frame.has-photo{ border-style:solid; border-color:var(--gold-dim); background:var(--surface); }
.profile-picture-frame img{ width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; }
.profile-picture-frame .ppf-icon{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(201,162,103,0.16); color:var(--gold-bright); }
.profile-picture-frame .ppf-icon svg{ width:34px; height:34px; }
.profile-picture-frame #ppfLabel{ font-weight:700; font-size:15px; color:var(--cream); }
.profile-picture-frame.has-photo .ppf-icon, .profile-picture-frame.has-photo #ppfLabel{ display:none; }
.profile-picture-frame .ppf-change{ position:absolute; bottom:12px; right:12px; padding:7px 14px; border-radius:999px; background:rgba(10,15,13,0.72); backdrop-filter:blur(2px); color:var(--cream); font-size:12.5px; font-weight:600; display:none; z-index:2; border:1px solid rgba(255,255,255,0.14); }
.profile-picture-frame.has-photo .ppf-change{ display:block; }
.profile-picture-frame.has-photo:hover .ppf-change{ background:rgba(10,15,13,0.88); }

/* Final Verification (Step 8) -- instructions beside an original instructional example image on
   desktop, stacked on mobile. */
.verify-intro-grid{ display:grid; grid-template-columns:1fr; gap:28px; margin-top:20px; align-items:start; }
@media (min-width:760px){ .verify-intro-grid{ grid-template-columns:1fr 1fr; } }
.verify-example{ text-align:center; }
.verify-example-label{ display:inline-block; background:var(--gold); color:#0a0f0d; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; padding:4px 12px; border-radius:10px; }
.verify-example-art{ max-width:260px; margin:14px auto 0; }
.verify-example-art svg{ width:100%; height:auto; display:block; }
.verify-example-caption{ margin-top:12px; font-size:13px; color:var(--cream-faint); max-width:260px; margin-left:auto; margin-right:auto; }
