/*
 * Dates Brite — Premium Design System v4
 * Plus Jakarta Sans · Rose × Navy · Faith-first dating
 */

/* ═══════════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════════ */
:root {
  --brand:        #e03058;
  --brand-2:      #ff6b85;
  --brand-dark:   #c02045;
  --brand-grad:   linear-gradient(135deg, #ff6b85 0%, #e03058 60%, #c02045 100%);
  --purple:       #7c3aed;
  --navy:         #0a0d1a;
  --bg:           #f7f4fb;
  --surface:      #ffffff;
  --surface-2:    #f2eef9;
  --border:       #e8e2f4;
  --border-2:     #d5cde8;
  --text:         #0f172a;
  --text-2:       #334155;
  --muted:        #64748b;
  --muted-2:      #94a3b8;
  --ok:           #10b981;
  --warn:         #f59e0b;
  --danger:       #ef4444;
  --sh-sm:  0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
  --sh-md:  0 4px 16px rgba(15,23,42,.08), 0 1px 4px rgba(15,23,42,.04);
  --sh-lg:  0 12px 40px rgba(15,23,42,.11), 0 2px 8px rgba(15,23,42,.05);
  --sh-xl:  0 24px 64px rgba(15,23,42,.14), 0 4px 16px rgba(15,23,42,.07);
  --sh-brand: 0 8px 28px rgba(224,48,88,.4);
  --nav-h: 68px;
  --bottom-nav-h: 64px;
  /* legacy compat */
  --accent:      var(--brand);
  --accent-dim:  var(--brand-dark);
  --shadow:      var(--sh-lg);
  --lp-orange:   #ea580c;
  --lp-orange-hover:#c2410c;
  --lp-navy:     #0f172a;
  --lp-blue:     #2563eb;
  --lp-teal:     #14b8a6;
  --lp-panel:    #f8fafc;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}

/* ═══════════════════════════════════════════════
   2. RESET + BASE
   ═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { min-height: 100vh; background: var(--bg); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4,h5,h6 { line-height: 1.18; letter-spacing: -0.025em; }
button { cursor: pointer; font-family: inherit; }
textarea { resize: vertical; }
.site-bg { display: none; }

/* ═══════════════════════════════════════════════
   3. LAYOUT
   ═══════════════════════════════════════════════ */
.main { width: min(1240px, calc(100% - 2rem)); margin: 1.5rem auto 3rem; }
.main--home { max-width:none!important; width:100%!important; margin:0!important; padding:0!important; }
.main--home > .banner { width: min(720px, calc(100% - 1.5rem)); margin: 1rem auto 0; }

/* ═══════════════════════════════════════════════
   4. TOP NAVIGATION
   ═══════════════════════════════════════════════ */
.top { position:sticky; top:0; z-index:200; height:var(--nav-h); backdrop-filter:blur(16px); background:color-mix(in srgb,var(--surface) 94%,transparent); border-bottom:1px solid var(--border); }
.top-inner { width:min(1280px,calc(100% - 2rem)); margin:0 auto; height:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:inline-flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.1rem; letter-spacing:-.03em; color:var(--text); flex-shrink:0; }
.brand:hover { text-decoration:none; }
.brand-mark { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--brand-grad); color:#fff; font-size:.85rem; font-weight:800; }
.nav { display:flex; align-items:center; gap:.3rem; flex-wrap:nowrap; }
.nav > a { display:flex; align-items:center; gap:.35rem; color:var(--text-2); font-size:.9rem; font-weight:600; padding:.45rem .7rem; border-radius:10px; transition:background .15s,color .15s; white-space:nowrap; }
.nav > a:hover { background:color-mix(in srgb,var(--brand) 9%,transparent); color:var(--brand); text-decoration:none; }
.nav > a.active { background:color-mix(in srgb,var(--brand) 12%,transparent); color:var(--brand); }
.nav > a .nav-icon { font-size:1rem; }
.badge { display:inline-grid; place-items:center; min-width:1.2rem; padding:.06rem .3rem; border-radius:999px; background:var(--brand); color:#fff; font-size:.68rem; font-weight:800; margin-left:.15rem; }
.btn-nav { background:var(--brand-grad)!important; color:#fff!important; border:none!important; box-shadow:var(--sh-brand)!important; padding:.5rem .95rem!important; }
.nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; padding:8px; background:none; border:none; border-radius:10px; transition:background .15s; }
.nav-toggle span { display:block; width:100%; height:2px; border-radius:2px; background:currentColor; transition:transform .22s,opacity .22s; }
.nav-toggle:hover { background:rgba(0,0,0,.06); }
.nav-toggle--open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle--open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-toggle--open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ═══════════════════════════════════════════════
   5. BOTTOM MOBILE NAV
   ═══════════════════════════════════════════════ */
.bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; height:var(--bottom-nav-h); background:color-mix(in srgb,var(--surface) 96%,transparent); backdrop-filter:blur(20px); border-top:1px solid var(--border); z-index:200; padding-bottom:env(safe-area-inset-bottom); }
.bottom-nav-inner { height:100%; display:flex; align-items:stretch; justify-content:space-around; }
.bottom-nav-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-decoration:none; color:var(--muted); font-size:.62rem; font-weight:700; padding:.4rem .25rem; position:relative; transition:color .15s; letter-spacing:.01em; min-width:0; }
.bottom-nav-item:hover { text-decoration:none; color:var(--brand); }
.bottom-nav-item.active { color:var(--brand); }
.bottom-nav-icon { font-size:1.3rem; line-height:1; }
.bottom-nav-dot { position:absolute; top:8px; right:50%; transform:translateX(12px); width:8px; height:8px; border-radius:50%; background:var(--brand); border:2px solid var(--surface); }

/* ═══════════════════════════════════════════════
   6. BUTTONS
   ═══════════════════════════════════════════════ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.6rem 1.1rem; border-radius:11px; border:1.5px solid var(--border); background:var(--surface); color:var(--text); font:inherit; font-size:.9rem; font-weight:700; line-height:1; text-decoration:none; transition:background .15s,border-color .15s,box-shadow .15s,transform .1s; cursor:pointer; white-space:nowrap; -webkit-tap-highlight-color:transparent; }
.btn:hover { background:var(--surface-2); text-decoration:none; }
.btn:active { transform:scale(.98); }
.btn.primary { background:var(--brand-grad); color:#fff; border-color:transparent; box-shadow:var(--sh-brand); }
.btn.primary:hover { filter:brightness(1.06); }
.btn.secondary { background:color-mix(in srgb,var(--brand) 10%,var(--surface)); color:var(--brand); border-color:color-mix(in srgb,var(--brand) 25%,var(--border)); }
.btn.secondary:hover { background:color-mix(in srgb,var(--brand) 16%,var(--surface)); }
.btn.danger { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 35%,var(--border)); }
.btn.danger:hover { background:color-mix(in srgb,var(--danger) 8%,var(--surface)); }
.btn.small { padding:.38rem .7rem; font-size:.82rem; border-radius:8px; }
.btn.large { padding:.85rem 1.6rem; font-size:1.02rem; border-radius:14px; }
.btn-like { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; padding:.65rem 1rem; border-radius:12px; border:none; font:inherit; font-size:.9rem; font-weight:700; background:var(--brand-grad); color:#fff; box-shadow:0 4px 14px rgba(224,48,88,.38); transition:filter .15s,transform .12s; cursor:pointer; text-decoration:none; }
.btn-like:hover { filter:brightness(1.08); transform:scale(1.02); text-decoration:none; color:#fff; }
.btn-like:active { transform:scale(.97); }
.btn-ghost { display:inline-flex; align-items:center; justify-content:center; padding:.65rem .8rem; border-radius:12px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.15); backdrop-filter:blur(4px); color:#fff; font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; transition:background .15s; text-decoration:none; }
.btn-ghost:hover { background:rgba(255,255,255,.28); text-decoration:none; color:#fff; }

/* ═══════════════════════════════════════════════
   7. FORMS
   ═══════════════════════════════════════════════ */
.stack { display:flex; flex-direction:column; gap:1rem; }
.stack label { display:flex; flex-direction:column; gap:.35rem; font-weight:600; font-size:.9rem; color:var(--text-2); }
input[type="email"], input[type="password"], input[type="text"], input[type="number"], input[type="date"], textarea, select { width:100%; border-radius:11px; border:1.5px solid var(--border); background:var(--surface); color:var(--text); padding:.7rem .85rem; font:inherit; font-size:.95rem; transition:border-color .15s,box-shadow .15s; -webkit-appearance:none; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(224,48,88,.12); }
input::placeholder, textarea::placeholder { color:var(--muted-2); }
select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .8rem center; padding-right:2.2rem; cursor:pointer; }
label.check { flex-direction:row; gap:.6rem; align-items:flex-start; cursor:pointer; }
label.check input { margin-top:.18rem; accent-color:var(--brand); cursor:pointer; }
.hp-field { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

/* ═══════════════════════════════════════════════
   8. BANNERS
   ═══════════════════════════════════════════════ */
.banner { padding:.85rem 1.1rem; border-radius:13px; border:1.5px solid var(--border); margin:0; background:var(--surface); font-size:.92rem; width:100%; }
.banner.error   { border-color:color-mix(in srgb,var(--danger) 45%,var(--border)); background:color-mix(in srgb,var(--danger) 8%,var(--surface)); color:#991b1b; }
.banner.success { border-color:color-mix(in srgb,var(--ok) 45%,var(--border)); background:color-mix(in srgb,var(--ok) 8%,var(--surface)); color:#065f46; }
.banner.warn    { border-color:color-mix(in srgb,var(--warn) 45%,var(--border)); background:color-mix(in srgb,var(--warn) 8%,var(--surface)); color:#92400e; }

/* ═══════════════════════════════════════════════
   9. UTILITIES
   ═══════════════════════════════════════════════ */
.muted { color:var(--muted); }
.muted-2 { color:var(--muted-2); }
.visually-hidden, .sr { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.inline-form { display:inline; }
.page-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.page-title { font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; letter-spacing:-.03em; margin:0 0 .2rem; color:var(--text); }
.page-subtitle { color:var(--muted); margin:0 0 1.5rem; font-size:.98rem; }
.back { margin:0 0 1rem; font-size:.9rem; }
.back a { color:var(--muted); font-weight:600; }
.back a:hover { color:var(--brand); text-decoration:none; }
.progress { width:100%; height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; border:1px solid var(--border); }
.progress span { display:block; height:100%; border-radius:inherit; background:var(--brand-grad); transition:width .5s ease; }
.match-pill { display:inline-flex; align-items:center; gap:.25rem; border-radius:999px; padding:.1rem .55rem; font-size:.75rem; font-weight:700; border:1.5px solid color-mix(in srgb,var(--brand) 35%,var(--border)); color:var(--brand); background:color-mix(in srgb,var(--brand) 10%,transparent); }
.pager { display:flex; align-items:center; gap:.75rem; margin-top:1.5rem; justify-content:center; }
.panel { background:var(--surface); border:1.5px solid var(--border); border-radius:18px; box-shadow:var(--sh-md); }

/* ═══════════════════════════════════════════════
   10. AVATAR
   ═══════════════════════════════════════════════ */
.avatar, .inbox-avatar { border-radius:50%; object-fit:cover; flex-shrink:0; background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 25%,#fff),color-mix(in srgb,var(--brand) 10%,#f5f0f8)); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--brand-dark); overflow:hidden; }
.avatar img, .inbox-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* ═══════════════════════════════════════════════
   11. PROFILE CARDS
   ═══════════════════════════════════════════════ */
.profile-card { position:relative; border-radius:22px; overflow:hidden; background:var(--surface); box-shadow:var(--sh-md); transition:transform .22s,box-shadow .22s; cursor:default; }
.profile-card:hover { transform:translateY(-5px); box-shadow:var(--sh-lg); }
.profile-card__photo { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center top; }
.profile-card__photo-ph { width:100%; aspect-ratio:3/4; background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 18%,#fff),color-mix(in srgb,var(--brand) 6%,#f5eef8)); display:flex; align-items:center; justify-content:center; font-size:3.5rem; color:color-mix(in srgb,var(--brand) 35%,#fff); }
.profile-card__overlay { position:absolute; inset:0; background:linear-gradient(to bottom,transparent 40%,rgba(10,5,18,.55) 68%,rgba(10,5,18,.88) 100%); pointer-events:none; }
.profile-card__body { position:absolute; bottom:0; left:0; right:0; padding:1rem 1rem .9rem; color:#fff; }
.profile-card__name { font-size:1.15rem; font-weight:800; margin:0 0 .18rem; text-shadow:0 1px 6px rgba(0,0,0,.35); }
.profile-card__meta { font-size:.8rem; color:rgba(255,255,255,.8); margin:0 0 .7rem; }
.profile-card__bio { font-size:.83rem; color:rgba(255,255,255,.88); margin:0 0 .7rem; line-height:1.42; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.profile-card__actions { display:flex; gap:.45rem; }
.match-badge { position:absolute; top:.7rem; right:.7rem; background:var(--brand-grad); color:#fff; font-size:.7rem; font-weight:800; padding:.2rem .55rem; border-radius:999px; box-shadow:0 2px 10px rgba(224,48,88,.5); letter-spacing:.02em; }

/* ═══════════════════════════════════════════════
   12. GRIDS
   ═══════════════════════════════════════════════ */
.discover-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1.25rem; margin-top:1.25rem; }
.browse-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; margin-top:1rem; }
.browse-grid .profile-card__photo, .browse-grid .profile-card__photo-ph { aspect-ratio:2/3; }
.matches-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; margin-top:1.25rem; }
.matches-grid .profile-card__photo, .matches-grid .profile-card__photo-ph { aspect-ratio:2/3; }

/* ═══════════════════════════════════════════════
   13. FILTER PANEL
   ═══════════════════════════════════════════════ */
.filter-panel { background:var(--surface); border:1.5px solid var(--border); border-radius:18px; padding:1.25rem 1.35rem; box-shadow:var(--sh-sm); margin-bottom:1.35rem; }
.filter-panel .filter-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.85rem; margin-bottom:.85rem; }
.filter-panel .filter-row:last-child { margin-bottom:0; }
.filter-panel label { font-size:.85rem; gap:.3rem; }

/* ═══════════════════════════════════════════════
   14. INBOX
   ═══════════════════════════════════════════════ */
.inbox-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.3rem; }
.inbox-item { background:var(--surface); border:1.5px solid var(--border); border-radius:16px; transition:background .15s,border-color .15s,box-shadow .15s; overflow:hidden; }
.inbox-item:hover { background:color-mix(in srgb,var(--brand) 4%,var(--surface)); border-color:color-mix(in srgb,var(--brand) 22%,var(--border)); box-shadow:var(--sh-sm); }
.inbox-link { display:flex; align-items:center; gap:.9rem; padding:.9rem 1rem; color:var(--text); }
.inbox-link:hover { text-decoration:none; }
.inbox-avatar { width:52px; height:52px; font-size:1.2rem; letter-spacing:-.02em; }
.inbox-body { flex:1; min-width:0; }
.inbox-name { font-weight:700; font-size:.95rem; margin-bottom:.15rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inbox-preview { font-size:.84rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inbox-unread .inbox-name { color:var(--brand); font-weight:800; }
.inbox-unread .inbox-preview { color:var(--text-2); font-weight:600; }
.inbox-unread-dot { width:10px; height:10px; border-radius:50%; background:var(--brand); flex-shrink:0; }
.inbox-time { font-size:.75rem; color:var(--muted-2); flex-shrink:0; white-space:nowrap; margin-left:auto; padding-left:.5rem; }

/* ═══════════════════════════════════════════════
   15. CHAT THREAD
   ═══════════════════════════════════════════════ */
.chat-layout { display:flex; flex-direction:column; gap:.85rem; }
.chat-header { background:var(--surface); border:1.5px solid var(--border); border-radius:18px; padding:1rem 1.25rem; display:flex; align-items:center; gap:.9rem; box-shadow:var(--sh-sm); }
.chat-header-info { flex:1; min-width:0; }
.chat-header-name { font-size:1.1rem; font-weight:800; margin:0 0 .12rem; }
.chat-header-meta { font-size:.84rem; color:var(--muted); margin:0; }
.chat-header-actions { display:flex; gap:.5rem; flex-shrink:0; }
.chat-messages { background:var(--surface); border:1.5px solid var(--border); border-radius:18px; padding:1.25rem; min-height:300px; max-height:56vh; overflow-y:auto; display:flex; flex-direction:column; gap:.55rem; scroll-behavior:smooth; }
.chat-empty { text-align:center; padding:2.5rem 1rem; color:var(--muted); font-size:.95rem; margin:auto; }
.bubble { max-width:70%; padding:.7rem 1rem; border-radius:18px; line-height:1.48; font-size:.95rem; border:none; }
.bubble.me { align-self:flex-end; background:var(--brand-grad); color:#fff; border-bottom-right-radius:5px; }
.bubble.me .bubble-time { color:rgba(255,255,255,.65); }
.bubble.them { align-self:flex-start; background:var(--surface-2); color:var(--text); border:1px solid var(--border); border-bottom-left-radius:5px; }
.bubble-body { white-space:pre-wrap; word-break:break-word; }
.bubble-time { font-size:.72rem; margin-top:.3rem; color:var(--muted); }
.chat-composer { background:var(--surface); border:1.5px solid var(--border); border-radius:18px; padding:.85rem 1rem; display:flex; gap:.65rem; align-items:flex-end; box-shadow:var(--sh-sm); }
.chat-composer textarea { flex:1; border:1.5px solid var(--border); border-radius:13px; padding:.7rem .9rem; font:inherit; font-size:.95rem; resize:none; min-height:46px; max-height:140px; background:var(--surface-2); color:var(--text); }
.chat-composer textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(224,48,88,.1); }
.chat-send { flex-shrink:0; width:46px; height:46px; border-radius:13px; border:none; background:var(--brand-grad); color:#fff; font-size:1.15rem; cursor:pointer; display:grid; place-items:center; box-shadow:0 4px 14px rgba(224,48,88,.4); transition:filter .15s,transform .1s; }
.chat-send:hover { filter:brightness(1.08); }
.chat-send:active { transform:scale(.94); }

/* ═══════════════════════════════════════════════
   16. PROFILE EDIT
   ═══════════════════════════════════════════════ */
.profile-layout { display:grid; grid-template-columns:280px 1fr; gap:1.35rem; align-items:start; }
.profile-sidebar { position:sticky; top:calc(var(--nav-h) + 1rem); display:flex; flex-direction:column; gap:1rem; }
.profile-completion { background:var(--surface); border:1.5px solid var(--border); border-radius:18px; padding:1.25rem; box-shadow:var(--sh-sm); }
.profile-completion-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.65rem; font-weight:700; font-size:.9rem; }
.profile-completion-pct { font-size:1.5rem; font-weight:800; background:var(--brand-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.profile-photos-preview { background:var(--surface); border:1.5px solid var(--border); border-radius:18px; padding:1.25rem; box-shadow:var(--sh-sm); }
.profile-photos-preview h3 { margin:0 0 .85rem; font-size:.95rem; font-weight:700; }
.photo-grid { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:.65rem; }
.photo-tile { border:1.5px solid var(--border); border-radius:13px; overflow:hidden; background:var(--surface-2); }
.photo-tile img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.photo-del { padding:.4rem; }
.profile-main-form { background:var(--surface); border:1.5px solid var(--border); border-radius:18px; padding:1.75rem; box-shadow:var(--sh-sm); }
.profile-main-form h2 { margin:0 0 1.25rem; font-size:1.15rem; font-weight:800; }
.form-section { padding-top:1.35rem; margin-top:1.35rem; border-top:1.5px solid var(--border); }
.form-section h2 { margin:0 0 1rem; font-size:.75rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.onboard-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.6rem; }

/* ═══════════════════════════════════════════════
   17. NOTIFICATIONS
   ═══════════════════════════════════════════════ */
.notice-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.3rem; }
.notice-item { background:var(--surface); border:1.5px solid var(--border); border-radius:15px; overflow:hidden; transition:background .15s; }
.notice-item:hover { background:color-mix(in srgb,var(--brand) 4%,var(--surface)); }
.notice-item a { display:flex; align-items:center; gap:.85rem; padding:.9rem 1.1rem; color:var(--text); text-decoration:none; }
.notice-item a:hover { text-decoration:none; }
.notice-icon { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:1rem; flex-shrink:0; background:color-mix(in srgb,var(--brand) 10%,var(--surface-2)); color:var(--brand); }
.notice-text { flex:1; min-width:0; }
.notice-text strong { display:block; font-size:.92rem; }
.notice-time { font-size:.76rem; color:var(--muted); margin-top:.1rem; }
.notice-item.notice-unread { border-left:3px solid var(--brand); }
.notice-item.notice-unread .notice-text strong { color:var(--text); font-weight:700; }
.notice-item.notice-read .notice-text strong { color:var(--muted); font-weight:600; }

/* ═══════════════════════════════════════════════
   18. EMPTY STATES
   ═══════════════════════════════════════════════ */
.empty-state { text-align:center; padding:4rem 2rem; color:var(--muted); }
.empty-state-icon { font-size:3.5rem; margin-bottom:.85rem; display:block; }
.empty-state h3 { margin:0 0 .55rem; font-size:1.15rem; font-weight:700; color:var(--text); }
.empty-state p { margin:0 0 1.5rem; font-size:.95rem; max-width:320px; margin-left:auto; margin-right:auto; }

/* ═══════════════════════════════════════════════
   19. AUTH PAGES
   ═══════════════════════════════════════════════ */
body.page-auth { background:radial-gradient(900px 500px at 80% 5%,rgba(224,48,88,.1),transparent 65%),radial-gradient(700px 400px at 5% 90%,rgba(124,58,237,.08),transparent 60%),#f3f0fa; }
body.page-auth .top { background:rgba(255,255,255,.92); border-bottom:1px solid rgba(200,190,220,.4); }
body.page-auth .main { width:min(1040px,calc(100% - 1.25rem)); margin:clamp(.5rem,2vh,1.5rem) auto 1.5rem; display:flex; flex-direction:column; align-items:center; gap:.75rem; }
.auth-shell { display:grid; grid-template-columns:1fr 1fr; width:min(980px,100%); min-height:min(640px,calc(100vh - 120px)); border:1.5px solid rgba(200,190,220,.5); border-radius:24px; overflow:hidden; background:#fff; box-shadow:0 28px 80px rgba(100,60,150,.18),0 4px 16px rgba(100,60,150,.08); }
.auth-left { background:#fff; padding:2rem 1.75rem; display:grid; place-items:center; }
.auth-card { width:min(400px,100%); }
.auth-card h1 { margin:0; font-size:clamp(1.65rem,2.5vw,2.1rem); font-weight:800; letter-spacing:-.03em; color:var(--text); }
.auth-sub { margin:.5rem 0 0; color:var(--muted); font-size:.95rem; }
.auth-switch { margin:.55rem 0 1.25rem; font-weight:600; font-size:.9rem; }
.auth-form { margin-top:.85rem; }
.auth-submit { width:100%; margin-top:.25rem; }
.auth-meta { margin-top:.9rem; font-size:.9rem; }
.auth-terms { margin-top:.75rem; font-size:.86rem; color:var(--muted); }
.auth-right { background:linear-gradient(145deg,#1a0a2e 0%,#0f172a 55%,#1e0838 100%); color:#fff; display:grid; place-items:center; padding:2rem 2.25rem; position:relative; overflow:hidden; }
.auth-right::before { content:''; position:absolute; top:-150px; left:-100px; width:450px; height:450px; background:radial-gradient(circle,rgba(224,48,88,.28),transparent 65%); pointer-events:none; }
.auth-right::after  { content:''; position:absolute; bottom:-120px; right:-80px; width:380px; height:380px; background:radial-gradient(circle,rgba(124,58,237,.22),transparent 65%); pointer-events:none; }
.auth-promo { position:relative; z-index:1; width:min(500px,100%); }
.auth-promo h2 { margin:0 0 .55rem; font-size:clamp(2rem,3.2vw,2.8rem); font-weight:800; letter-spacing:-.04em; color:#fff; }
.auth-promo p { margin:0 0 1.25rem; font-size:1.05rem; color:rgba(255,255,255,.82); line-height:1.55; }
.auth-promo ul { list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }
.auth-promo li { position:relative; padding-left:2rem; font-size:1rem; color:rgba(255,255,255,.9); line-height:1.5; }
.auth-promo li::before { content:'✓'; position:absolute; left:0; top:.05rem; width:1.25rem; height:1.25rem; border-radius:999px; display:grid; place-items:center; font-size:.78rem; font-weight:800; color:#4ade80; border:1.5px solid rgba(74,222,128,.5); background:rgba(0,0,0,.2); }
.step-dots { display:flex; gap:.5rem; margin-top:1rem; margin-bottom:.25rem; }
.dot { width:30px; height:5px; border-radius:999px; background:var(--border); transition:background .25s; }
.dot.active { background:var(--brand); }
.step-card { display:none; }
.step-card.active { display:block; }
.step-card h2 { margin:1rem 0 .85rem; font-size:1rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.step-actions { margin-top:1rem; display:flex; gap:.55rem; justify-content:flex-end; }
.review-list { list-style:none; margin:.85rem 0 0; padding:0; display:grid; gap:.45rem; }
.review-list li { font-size:.92rem; color:var(--text-2); }
.review-list strong { color:var(--text); }

/* ═══════════════════════════════════════════════
   20. FOOTER + COOKIE
   ═══════════════════════════════════════════════ */
.foot { border-top:1px solid var(--border); margin-top:2rem; padding:1.5rem 0 2rem; }
.foot-inner { width:min(1240px,calc(100% - 2rem)); margin:0 auto; text-align:center; }
.foot-links { display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin-bottom:.65rem; }
.foot-links a { color:var(--muted); font-size:.88rem; font-weight:600; }
.foot-links a:hover { color:var(--brand); text-decoration:none; }
.foot .muted { font-size:.82rem; margin:0; }
.cookie-banner { position:fixed; left:1rem; right:1rem; bottom:1rem; padding:.8rem 1rem; border-radius:16px; background:var(--surface); border:1.5px solid var(--border); box-shadow:var(--sh-xl); display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap; z-index:500; }
.cookie-banner p { margin:0; max-width:54rem; font-size:.88rem; }
.cookie-banner--bar { left:0; right:0; bottom:0; border-radius:0; background:#1e1b38; border:none; border-top:1px solid rgba(255,255,255,.08); box-shadow:0 -8px 32px rgba(0,0,0,.2); }
.cookie-banner__inner { width:min(1200px,calc(100% - 2rem)); margin:0 auto; padding:1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.cookie-banner__copy strong { display:block; color:#fff; font-size:.95rem; margin-bottom:.22rem; }
.cookie-banner__copy p { margin:0; font-size:.84rem; color:rgba(255,255,255,.78); }
.cookie-banner__copy a { color:#7dd3fc; text-decoration:underline; }
.cookie-banner__accept { flex-shrink:0; padding:.65rem 1.35rem; font-weight:800; font:inherit; border:none; border-radius:11px; background:#14b8a6; color:#fff; cursor:pointer; box-shadow:0 4px 16px rgba(20,184,166,.4); }
.cookie-banner__accept:hover { filter:brightness(1.08); }

/* ═══════════════════════════════════════════════
   21. ADMIN PANEL
   ═══════════════════════════════════════════════ */
body.page-admin .top { background:#fff; border-bottom:1px solid var(--border); }
.admin-wrap { display:grid; grid-template-columns:220px 1fr; gap:1.5rem; margin-top:1.5rem; }
.admin-sidebar { position:sticky; top:calc(var(--nav-h) + 1rem); background:var(--surface); border:1.5px solid var(--border); border-radius:18px; padding:1rem; box-shadow:var(--sh-sm); height:fit-content; }
.admin-sidebar h2 { margin:0 0 .75rem; font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; padding:0 .5rem; }
.admin-nav { display:flex; flex-direction:column; gap:.2rem; }
.admin-nav a { display:flex; align-items:center; gap:.6rem; padding:.6rem .75rem; border-radius:11px; color:var(--text-2); font-size:.9rem; font-weight:600; transition:background .15s,color .15s; text-decoration:none; }
.admin-nav a:hover { background:var(--surface-2); color:var(--brand); text-decoration:none; }
.admin-nav a.active { background:color-mix(in srgb,var(--brand) 10%,var(--surface)); color:var(--brand); }
.admin-nav .nav-icon { font-size:1rem; width:1.2rem; text-align:center; }
.admin-content { min-width:0; }
.admin-content h1 { margin:0 0 .25rem; font-size:clamp(1.4rem,2.5vw,1.9rem); font-weight:800; }
.admin-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.admin-stat-card { background:var(--surface); border:1.5px solid var(--border); border-radius:18px; padding:1.25rem 1.35rem; box-shadow:var(--sh-sm); }
.admin-stat-num { display:block; font-size:2.2rem; font-weight:800; letter-spacing:-.04em; background:var(--brand-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:.2rem; }
.admin-stat-label { font-size:.85rem; color:var(--muted); font-weight:600; }
.admin-stat-card.warn .admin-stat-num { background:linear-gradient(135deg,#f59e0b,#d97706); -webkit-background-clip:text; background-clip:text; }
.admin-stat-card.ok   .admin-stat-num { background:linear-gradient(135deg,#10b981,#059669); -webkit-background-clip:text; background-clip:text; }
.table-wrap { overflow-x:auto; border-radius:14px; border:1.5px solid var(--border); box-shadow:var(--sh-sm); }
.table { width:100%; border-collapse:collapse; font-size:.9rem; background:var(--surface); }
.table th { background:var(--surface-2); border-bottom:1.5px solid var(--border); padding:.7rem .9rem; text-align:left; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); white-space:nowrap; }
.table td { border-bottom:1px solid var(--border); padding:.75rem .9rem; vertical-align:middle; color:var(--text-2); }
.table tbody tr:last-child td { border-bottom:none; }
.table tbody tr:hover { background:color-mix(in srgb,var(--brand) 3%,var(--surface)); }
.status-badge { display:inline-flex; align-items:center; padding:.15rem .55rem; border-radius:999px; font-size:.75rem; font-weight:700; }
.status-badge.active   { background:#dcfce7; color:#166534; }
.status-badge.suspended{ background:#fee2e2; color:#991b1b; }
.status-badge.open     { background:#fef9c3; color:#854d0e; }
.status-badge.reviewed { background:#dbeafe; color:#1e40af; }
.status-badge.closed   { background:#f1f5f9; color:#475569; }
.status-badge.pending  { background:#fef9c3; color:#92400e; }
.status-badge.approved { background:#dcfce7; color:#166534; }
.status-badge.rejected { background:#fee2e2; color:#991b1b; }
.admin-photo-grid { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.1rem; }
.admin-photo-card { border:1.5px solid var(--border); border-radius:15px; overflow:hidden; background:var(--surface); box-shadow:var(--sh-sm); }
.admin-photo-card img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.admin-photo-meta { padding:.5rem .75rem; font-size:.82rem; color:var(--muted); font-weight:600; }
.admin-photo-card form { padding:0 .75rem .75rem; }
.admin-photo-card select { font-size:.82rem; }
.inline-form select { width:auto; padding:.3rem .6rem; font-size:.82rem; border-radius:8px; }

/* ═══════════════════════════════════════════════
   22. LEGAL PAGES
   ═══════════════════════════════════════════════ */
.legal-content { max-width:780px; margin:0 auto; background:var(--surface); border:1.5px solid var(--border); border-radius:20px; padding:2.5rem; box-shadow:var(--sh-sm); }
.legal-content h1 { margin:0 0 .4rem; font-size:clamp(1.6rem,3vw,2rem); }
.legal-lead { color:var(--muted); margin:0 0 2rem; }
.legal-content h2 { margin:2rem 0 .75rem; font-size:1.1rem; }
.legal-content h3 { margin:1.5rem 0 .5rem; font-size:1rem; }
.legal-content p, .legal-content li { font-size:.95rem; line-height:1.68; color:var(--text-2); }
.legal-content ul, .legal-content ol { padding-left:1.5rem; margin:.5rem 0; }
.legal-content li + li { margin-top:.35rem; }

/* ═══════════════════════════════════════════════
   23. REPORT FORM
   ═══════════════════════════════════════════════ */
.report-card { max-width:600px; background:var(--surface); border:1.5px solid var(--border); border-radius:20px; padding:2rem; box-shadow:var(--sh-sm); }
.report-card h1 { margin:0 0 .4rem; font-size:1.4rem; }
.report-card .muted { margin:0 0 1.5rem; }

/* ═══════════════════════════════════════════════
   24. PROFILE VIEW PAGE
   ═══════════════════════════════════════════════ */
.profile-view { display:grid; grid-template-columns:320px 1fr; gap:1.5rem; align-items:start; }
.profile-view__photo-col { position:sticky; top:calc(var(--nav-h) + 1rem); }
.profile-view__main-photo { width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center top; border-radius:22px; border:1.5px solid var(--border); box-shadow:var(--sh-lg); }
.profile-view__photo-ph { width:100%; aspect-ratio:3/4; border-radius:22px; background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 18%,#fff),color-mix(in srgb,var(--brand) 6%,#f5eef8)); display:flex; align-items:center; justify-content:center; font-size:5rem; border:1.5px solid var(--border); }
.profile-view__info { background:var(--surface); border:1.5px solid var(--border); border-radius:22px; padding:2rem; box-shadow:var(--sh-sm); }
.profile-view__name { margin:0 0 .3rem; font-size:clamp(1.5rem,3vw,2rem); font-weight:800; }
.profile-view__meta { color:var(--muted); margin:0 0 1.25rem; font-size:.95rem; }
.profile-view__tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.profile-tag { display:inline-flex; align-items:center; gap:.3rem; padding:.3rem .75rem; border-radius:999px; font-size:.82rem; font-weight:700; background:var(--surface-2); border:1.5px solid var(--border); color:var(--text-2); }
.profile-tag.faith  { background:#fef9c3; border-color:#fde68a; color:#92400e; }
.profile-tag.intent { background:#ffe4e6; border-color:#fda4af; color:#9f1239; }
.profile-view__bio { font-size:.98rem; color:var(--text-2); line-height:1.68; margin:0 0 1.5rem; }
.profile-view__divider { height:1px; background:var(--border); margin:1.5rem 0; }
.profile-view__actions { display:flex; gap:.75rem; flex-wrap:wrap; }
.profile-gallery { margin-top:1rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:.5rem; }
.profile-gallery img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; border:1.5px solid var(--border); cursor:pointer; transition:opacity .15s; }
.profile-gallery img:hover { opacity:.85; }

/* ═══════════════════════════════════════════════
   25. HOME / LANDING PAGE
   ═══════════════════════════════════════════════ */
body.page-home { --lp-header-h:var(--nav-h); background:#0a0d1a; }
body.page-home .top { background:rgba(10,13,26,.9); border-bottom:1px solid rgba(255,255,255,.08); backdrop-filter:blur(16px); box-shadow:none; }
body.page-home .brand { color:#fff; }
body.page-home .brand .brand-mark { background:linear-gradient(145deg,#ff6b85,#e03058); }
body.page-home .nav > a { color:rgba(255,255,255,.8); }
body.page-home .nav > a:hover { background:rgba(255,255,255,.1); color:#fff; }
body.page-home .btn-nav { background:linear-gradient(135deg,#ff6b85,#e03058)!important; color:#fff!important; border:none!important; box-shadow:0 4px 16px rgba(224,48,88,.45)!important; }
body.page-home .nav-toggle { color:#fff; }
body.page-home .foot { background:#07090f; border-top:1px solid rgba(255,255,255,.07); margin-top:0; }
body.page-home .foot-links a { color:rgba(255,255,255,.55); }
body.page-home .foot-links a:hover { color:#fff; }
body.page-home .foot .muted { color:rgba(255,255,255,.3); }

.hero { position:relative; min-height:calc(100vh - var(--nav-h)); min-height:calc(100svh - var(--nav-h)); display:flex; align-items:center; overflow:hidden; background:linear-gradient(135deg,#0a0d1a 0%,#12071e 55%,#0f0a1a 100%); }
.hero-bg { position:absolute; inset:0; pointer-events:none; z-index:0; }
.hero-orb { position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; animation:orbFloat 9s ease-in-out infinite; }
.hero-orb--1 { width:600px;height:600px;top:-200px;left:-80px;background:radial-gradient(circle,rgba(224,48,88,.55),transparent 70%);animation-delay:0s; }
.hero-orb--2 { width:500px;height:500px;top:5%;right:-80px;background:radial-gradient(circle,rgba(124,58,237,.45),transparent 70%);animation-delay:-3s; }
.hero-orb--3 { width:380px;height:380px;bottom:-80px;left:38%;background:radial-gradient(circle,rgba(234,88,12,.3),transparent 70%);animation-delay:-5.5s; }
@keyframes orbFloat{0%,100%{transform:translateY(0)scale(1)}50%{transform:translateY(-28px)scale(1.06)}}
.hero-inner { position:relative;z-index:1;width:min(1280px,calc(100% - 2rem));margin:0 auto;padding:3rem 0;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center; }
.hero-left { display:flex;justify-content:center; }
.hero-card { width:100%;max-width:480px;background:rgba(255,255,255,.975);border-radius:28px;padding:2.5rem 2rem;box-shadow:0 32px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.9); }
.hero-card-badge { display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,#fff0f3,#ffe4eb);border:1px solid rgba(224,48,88,.2);border-radius:999px;padding:.3rem .9rem .3rem .55rem;font-size:.78rem;font-weight:700;color:#c02045;margin-bottom:1.25rem; }
.hero-card-badge-dot { width:7px;height:7px;border-radius:50%;background:#e03058;animation:heroPulse 2s ease-in-out infinite; }
@keyframes heroPulse{0%,100%{box-shadow:0 0 0 0 rgba(224,48,88,.5)}50%{box-shadow:0 0 0 5px rgba(224,48,88,0)}}
.hero-headline { margin:0 0 .75rem;font-size:clamp(1.85rem,3.2vw,2.55rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;color:#0f172a; }
.hero-headline-accent { background:linear-gradient(135deg,#e03058,#ff6b85);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.hero-sub { margin:0 0 1.75rem;font-size:1rem;color:#475569;line-height:1.58; }
.hero-form { display:flex;flex-direction:column; }
.hero-field { margin-bottom:1.1rem; }
.hero-label { margin:0 0 .55rem;font-size:.75rem;font-weight:700;color:#334155;text-transform:uppercase;letter-spacing:.06em; }
.hero-pills { display:flex;gap:.5rem; }
.hero-pill { flex:1;padding:.65rem .6rem;font:inherit;font-size:.93rem;font-weight:700;color:#475569;background:#f8fafc;border:2px solid #e2e8f0;border-radius:999px;cursor:pointer;transition:all .15s; }
.hero-pill:hover { border-color:#cbd5e1;background:#f1f5f9; }
.hero-pill.is-on { border-color:#e03058;background:linear-gradient(135deg,#fff0f3,#ffe4eb);color:#c02045; }
.hero-age-row { display:flex;align-items:center;gap:.65rem; }
.hero-dash { color:#94a3b8;font-weight:700; }
.hero-select { flex:1;padding:.65rem .75rem;border-radius:12px;border:2px solid #e2e8f0;background:#f8fafc;font:inherit;font-weight:600;color:#334155;cursor:pointer; }
.hero-select:focus { outline:none;border-color:#e03058;box-shadow:0 0 0 3px rgba(224,48,88,.12); }
.hero-cta { display:flex;align-items:center;justify-content:center;gap:.55rem;margin-top:.5rem;padding:1rem 1.5rem;font:inherit;font-size:1.05rem;font-weight:800;color:#fff!important;text-decoration:none!important;background:linear-gradient(135deg,#ff6b85 0%,#e03058 55%,#c02045 100%);border-radius:16px;border:none;box-shadow:0 8px 28px rgba(224,48,88,.5),0 2px 8px rgba(224,48,88,.28);transition:filter .15s,transform .15s,box-shadow .15s;cursor:pointer; }
.hero-cta:hover { filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 14px 38px rgba(224,48,88,.58),0 4px 12px rgba(224,48,88,.32);text-decoration:none!important; }
.hero-cta:active { transform:translateY(0); }
.hero-signin { display:block;text-align:center;margin-top:.9rem;font-size:.9rem;font-weight:600;color:#64748b;text-decoration:none; }
.hero-signin:hover { color:#e03058;text-decoration:none; }
.hero-legal { margin:1rem 0 0;font-size:.71rem;color:#94a3b8;text-align:center;line-height:1.5; }
.hero-legal a { color:#64748b;text-decoration:underline;text-underline-offset:2px; }
.hero-welcome-brand { font-size:1.2rem;font-weight:800;margin:0 0 .5rem;color:#0f172a;letter-spacing:-.02em; }
.hero-brand-accent { color:#e03058; }
.hero-logged-cta { display:flex;flex-direction:column;gap:.75rem; }
.hero-right { display:flex;align-items:center;justify-content:center; }
.hero-visual { position:relative;width:100%;max-width:520px; }
.hero-stack { position:relative;height:clamp(340px,52vh,560px);margin:0 auto; }
.hcard { position:absolute;margin:0;border-radius:24px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08); }
.hcard-photo { display:block;width:100%;height:100%;object-fit:cover;object-position:center 12%; }
.hcard-info { position:absolute;bottom:0;left:0;right:0;padding:1.1rem .9rem .9rem;background:linear-gradient(to top,rgba(0,0,0,.78) 0%,transparent 100%);display:flex;flex-direction:column;gap:.18rem; }
.hcard-name { font-size:.9rem;font-weight:800;color:#fff; }
.hcard-loc  { font-size:.74rem;color:rgba(255,255,255,.78); }
.hcard-verified { position:absolute;top:10px;left:10px;width:26px;height:26px;border-radius:50%;background:#2563eb;color:#fff;font-size:.72rem;font-weight:800;display:grid;place-items:center;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.3); }
.hcard--1 { width:46%;aspect-ratio:3/4;left:2%;top:12%;transform:rotate(-10deg);z-index:1;animation:hfloat1 6s ease-in-out infinite; }
.hcard--2 { width:54%;aspect-ratio:3/4;left:50%;top:3%;transform:translateX(-50%);z-index:3;animation:hfloat2 7s ease-in-out infinite; }
.hcard--3 { width:43%;aspect-ratio:3/4;right:2%;top:14%;transform:rotate(9deg);z-index:2;animation:hfloat3 5.5s ease-in-out infinite; }
@keyframes hfloat1{0%,100%{transform:rotate(-10deg)translateY(0)}50%{transform:rotate(-10deg)translateY(-12px)}}
@keyframes hfloat2{0%,100%{transform:translateX(-50%)translateY(0)}50%{transform:translateX(-50%)translateY(-16px)}}
@keyframes hfloat3{0%,100%{transform:rotate(9deg)translateY(0)}50%{transform:rotate(9deg)translateY(-10px)}}
.hero-match-pop { position:absolute;bottom:8%;left:-6%;background:#fff;border-radius:16px;padding:.75rem 1.1rem;display:flex;align-items:center;gap:.7rem;box-shadow:0 16px 48px rgba(0,0,0,.32),0 0 0 1px rgba(0,0,0,.04);z-index:10;animation:heroPopIn .6s cubic-bezier(.34,1.56,.64,1) .8s both;white-space:nowrap; }
.hero-match-pop strong { display:block;font-size:.88rem;font-weight:800;color:#e03058; }
.hero-match-pop span   { display:block;font-size:.74rem;color:#64748b; }
.hero-match-heart { font-size:1.5rem; }
.hero-activity-pop { position:absolute;top:4%;right:-3%;background:rgba(255,255,255,.1);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:.55rem 1rem;display:flex;align-items:center;gap:.55rem;font-size:.78rem;font-weight:700;color:#fff;z-index:10;animation:heroPopIn .6s cubic-bezier(.34,1.56,.64,1) 1.2s both;white-space:nowrap; }
.hero-activity-dot { width:8px;height:8px;border-radius:50%;background:#22c55e;animation:heroPulse 2s ease-in-out infinite; }
@keyframes heroPopIn{from{opacity:0;transform:scale(.8)translateY(8px)}to{opacity:1;transform:scale(1)translateY(0)}}
.stats-bar { background:#fff;border-top:1px solid #e2e8f0;border-bottom:1px solid #f1f5f9;padding:1.85rem 1.5rem; }
.stats-inner { width:min(1100px,calc(100% - 2rem));margin:0 auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap; }
.stat-item { flex:1;min-width:130px;display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.5rem 1rem; }
.stat-num { font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,#e03058,#ff6b85);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.stat-label { font-size:.83rem;color:#64748b;font-weight:600;text-align:center; }
.stat-divider { width:1px;height:44px;background:#e2e8f0;flex-shrink:0; }
.section-title { margin:0 0 .55rem;font-size:clamp(1.65rem,3.2vw,2.4rem);font-weight:800;letter-spacing:-.03em;color:#0f172a;text-align:center; }
.section-title--light { color:#fff; }
.section-sub { margin:0;font-size:1.02rem;color:#64748b;text-align:center; }
.section-sub--light { color:rgba(255,255,255,.72); }
.pillars-header { margin-bottom:2.75rem; }
.pillars { padding:5rem 1.5rem;background:#f8fafc; }
.pillars-inner { width:min(1100px,calc(100% - 2rem));margin:0 auto; }
.pillars-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; }
.pillar-card { background:#fff;border:1px solid #e8eef8;border-radius:24px;padding:2rem 1.75rem;box-shadow:0 4px 24px rgba(15,23,42,.06);transition:transform .22s,box-shadow .22s; }
.pillar-card:hover { transform:translateY(-5px);box-shadow:0 18px 50px rgba(15,23,42,.1); }
.pillar-icon { width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.35rem;margin-bottom:1.1rem; }
.pillar-icon--faith { background:linear-gradient(135deg,#fef9c3,#fde68a);color:#92400e; }
.pillar-icon--match { background:linear-gradient(135deg,#fff0f3,#fecdd3);color:#c02045; }
.pillar-icon--safe  { background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1d4ed8; }
.pillar-card h3 { margin:0 0 .65rem;font-size:1.08rem;font-weight:800;color:#0f172a; }
.pillar-card p  { margin:0;font-size:.93rem;color:#64748b;line-height:1.62; }
.how-it-works { padding:5rem 1.5rem;background:#fff; }
.hiw-inner { width:min(960px,calc(100% - 2rem));margin:0 auto; }
.hiw-steps { display:flex;align-items:flex-start; }
.hiw-step { flex:1;text-align:center;padding:0 1.25rem; }
.hiw-num { display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,#ff6b85,#e03058);color:#fff;font-size:1.05rem;font-weight:800;margin-bottom:1.1rem;box-shadow:0 8px 24px rgba(224,48,88,.38); }
.hiw-step h3 { margin:0 0 .55rem;font-size:1.05rem;font-weight:800;color:#0f172a; }
.hiw-step p  { margin:0;font-size:.92rem;color:#64748b;line-height:1.62; }
.hiw-connector { width:60px;height:2px;background:linear-gradient(90deg,#fecdd3,#e03058,#fecdd3);align-self:center;flex-shrink:0;margin-bottom:48px;opacity:.55; }
.features { padding:5rem 1.5rem;background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%); }
.features-inner { width:min(1100px,calc(100% - 2rem));margin:0 auto; }
.features-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem; }
.feature-card { background:#fff;border:1px solid #e8eef8;border-radius:20px;padding:1.75rem 1.5rem;box-shadow:0 2px 16px rgba(15,23,42,.05);transition:transform .22s,box-shadow .22s; }
.feature-card:hover { transform:translateY(-4px);box-shadow:0 12px 36px rgba(15,23,42,.09); }
.feature-icon { font-size:2rem;display:block;margin-bottom:.9rem; }
.feature-card h3 { margin:0 0 .5rem;font-size:1rem;font-weight:800;color:#0f172a; }
.feature-card p  { margin:0;font-size:.9rem;color:#64748b;line-height:1.62; }
.testimonials { padding:5.5rem 1.5rem;background:linear-gradient(135deg,#1a0a2e 0%,#0f172a 55%,#1a0c1a 100%);position:relative;overflow:hidden; }
.testimonials::before { content:'';position:absolute;top:-200px;left:-100px;width:600px;height:600px;background:radial-gradient(circle,rgba(224,48,88,.18),transparent 70%);pointer-events:none; }
.testimonials::after  { content:'';position:absolute;bottom:-150px;right:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(124,58,237,.18),transparent 70%);pointer-events:none; }
.testimonials-inner { position:relative;z-index:1;width:min(1100px,calc(100% - 2rem));margin:0 auto; }
.testi-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; }
.testi-card { background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:2rem;backdrop-filter:blur(8px);transition:transform .22s,background .22s; }
.testi-card:hover { transform:translateY(-4px);background:rgba(255,255,255,.09); }
.testi-card--featured { background:rgba(224,48,88,.14);border-color:rgba(224,48,88,.28); }
.testi-stars { color:#fbbf24;font-size:1rem;letter-spacing:.06em;margin-bottom:.9rem; }
.testi-card p { margin:0 0 1.35rem;font-size:.94rem;color:rgba(255,255,255,.86);line-height:1.68;font-style:italic; }
.testi-author { display:flex;align-items:center;gap:.75rem; }
.testi-avatar { width:42px;height:42px;border-radius:50%;border:2px solid rgba(255,255,255,.18);flex-shrink:0; }
.testi-avatar--1 { background:linear-gradient(135deg,#f472b6,#ec4899); }
.testi-avatar--2 { background:linear-gradient(135deg,#60a5fa,#3b82f6); }
.testi-avatar--3 { background:linear-gradient(135deg,#34d399,#10b981); }
.testi-author strong { display:block;font-size:.9rem;font-weight:700;color:#fff; }
.testi-author span   { font-size:.76rem;color:rgba(255,255,255,.5); }
.final-cta { padding:6.5rem 1.5rem;background:linear-gradient(135deg,#fff1f4 0%,#fce7f3 50%,#ede9ff 100%);text-align:center;position:relative;overflow:hidden; }
.final-cta::before { content:'';position:absolute;inset:0;background:radial-gradient(700px 450px at 25% 50%,rgba(224,48,88,.09),transparent),radial-gradient(600px 400px at 80% 30%,rgba(124,58,237,.07),transparent);pointer-events:none; }
.final-cta-inner { position:relative;z-index:1;width:min(640px,calc(100% - 2rem));margin:0 auto; }
.final-cta-title { margin:0 0 .75rem;font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.03em;color:#0f172a; }
.final-cta-sub { margin:0 0 2.5rem;font-size:1.08rem;color:#64748b; }
.final-cta-actions { display:flex;flex-direction:column;align-items:center;gap:1rem; }
.final-cta-btn { width:min(360px,100%);font-size:1.1rem!important;padding:1.1rem 1.5rem!important;border-radius:18px!important; }
.final-cta-login { font-size:.92rem;font-weight:600;color:#64748b;text-decoration:none; }
.final-cta-login:hover { color:#e03058;text-decoration:none; }
.final-cta-legal { margin:1.35rem 0 0;font-size:.8rem;color:#94a3b8; }

/* ═══════════════════════════════════════════════
   26. RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width:1100px) {
  .features-grid { grid-template-columns:repeat(2,1fr); }
  .testi-grid { grid-template-columns:1fr;gap:1rem; }
  .testi-card--featured { order:-1; }
}
@media (max-width:960px) {
  .hero-inner { grid-template-columns:1fr;padding:2.5rem 0; }
  .hero-right { display:none; }
  .hero-left { width:100%; }
  .hero-card { max-width:520px;margin:0 auto; }
  .pillars-grid { grid-template-columns:1fr; }
  .hiw-steps { flex-direction:column;align-items:center; }
  .hiw-connector { width:2px;height:40px;background:linear-gradient(180deg,#fecdd3,#e03058,#fecdd3);margin-bottom:0; }
  .hiw-step { max-width:380px; }
}
@media (max-width:900px) {
  .profile-layout { grid-template-columns:1fr; }
  .profile-sidebar { position:static; }
  .profile-view { grid-template-columns:1fr; }
  .profile-view__photo-col { position:static; }
  .auth-shell { grid-template-columns:1fr;min-height:0;border-radius:16px; }
  .auth-right { min-height:240px;padding:1.75rem 1.5rem; }
  .auth-promo h2 { font-size:clamp(1.5rem,5vw,2rem); }
  .auth-left { padding:1.5rem 1.25rem; }
  .admin-wrap { grid-template-columns:1fr; }
  .admin-sidebar { position:static; }
  .admin-nav { flex-direction:row;flex-wrap:wrap; }
  .admin-nav a { padding:.45rem .7rem;font-size:.85rem; }
}
@media (max-width:768px) {
  .hero { min-height:auto; }
  .pillars,.how-it-works,.features,.final-cta { padding:3.5rem 1rem; }
  .testimonials { padding:3.5rem 1rem; }
  .pillars-header { margin-bottom:1.75rem; }
  .stat-divider { display:none; }
  .stat-item { min-width:50%;padding:.75rem .5rem; }
  .features-grid { grid-template-columns:1fr; }
  .hero-card { padding:2rem 1.5rem; }
  .admin-stats { grid-template-columns:repeat(2,1fr); }
  .legal-content { padding:1.5rem; }
  .report-card { padding:1.5rem; }
  .filter-panel .filter-row { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .nav-toggle { display:flex; }
  .nav { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; background:var(--surface); border-bottom:1px solid var(--border); padding:.75rem 1rem 1rem; gap:.2rem; box-shadow:0 12px 32px rgba(0,0,0,.1); z-index:100; }
  .nav--open { display:flex; }
  .nav > a { padding:.7rem .75rem;border-radius:10px;font-size:1rem; }
  body.page-home .nav { background:rgba(10,13,26,.97);border-bottom-color:rgba(255,255,255,.08); }
  body.page-home .nav > a { color:rgba(255,255,255,.88); }
  .top { position:relative; }
  .top-inner { position:relative; }
  .bottom-nav { display:block; }
  body.has-bottom-nav { padding-bottom:var(--bottom-nav-h); }
  .main { width:calc(100% - 1rem);margin-top:1rem; }
  .discover-grid { grid-template-columns:repeat(2,1fr);gap:.75rem; }
  .browse-grid { grid-template-columns:repeat(2,1fr);gap:.65rem; }
  .matches-grid { grid-template-columns:repeat(2,1fr);gap:.65rem; }
  .profile-card__name { font-size:1rem; }
  .profile-card__meta { font-size:.76rem; }
  .chat-messages { max-height:42vh; }
  .bubble { max-width:88%; }
  .profile-gallery { grid-template-columns:repeat(3,1fr); }
  .auth-shell { border-radius:14px; }
}
@media (max-width:400px) {
  .hero-card { padding:1.75rem 1.25rem; }
  .hero-pills { flex-direction:column; }
  .admin-stats { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════
   27. ADDITIONAL UI COMPONENTS (Phase 2)
   ═══════════════════════════════════════════════ */

/* --- Btn outline variant --- */
.btn.outline { background:transparent; border-color:var(--border-2); color:var(--text-2); }
.btn.outline:hover { background:var(--surface-2); border-color:var(--brand); color:var(--brand); }

/* --- Btn icon (circle icon button) --- */
.btn-icon { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; border:1.5px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer; transition:background .15s,color .15s,border-color .15s; text-decoration:none; }
.btn-icon:hover { background:var(--surface-2); color:var(--brand); border-color:var(--brand); text-decoration:none; }

/* --- Btn action (small icon button on cards) --- */
.btn-action { display:inline-flex; align-items:center; justify-content:center; padding:.65rem .75rem; border-radius:12px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.12); backdrop-filter:blur(4px); color:#fff; cursor:pointer; transition:background .15s; text-decoration:none; }
.btn-action:hover { background:rgba(255,255,255,.26); text-decoration:none; color:#fff; }
.btn-action.btn-report { background:rgba(239,68,68,.15); border-color:rgba(239,68,68,.35); }
.btn-action.btn-report:hover { background:rgba(239,68,68,.28); }

/* --- Small utility --- */
.small { font-size:.82rem; }

/* --- Pager info --- */
.pager-info { font-size:.88rem; color:var(--muted); font-weight:600; white-space:nowrap; }

/* --- Discover hint --- */
.discover-hint { display:flex; align-items:center; gap:.75rem; justify-content:center; padding:1.5rem; color:var(--muted); font-size:.9rem; }
.discover-hint span { font-size:1rem; color:var(--brand); }

/* --- Match card (matches page) --- */
.matches-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.25rem; margin-top:1.25rem; }
.match-card { background:var(--surface); border:1.5px solid var(--border); border-radius:22px; overflow:hidden; box-shadow:var(--sh-md); transition:transform .22s,box-shadow .22s; }
.match-card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); }
.match-card__photo-wrap { position:relative; }
.match-card__photo { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center top; }
.match-card__photo-ph { width:100%; aspect-ratio:3/4; background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 18%,#fff),color-mix(in srgb,var(--brand) 6%,#f5eef8)); display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:800; color:color-mix(in srgb,var(--brand) 45%,#fff); }
.match-card__badge { position:absolute; top:.65rem; right:.65rem; display:inline-flex; align-items:center; gap:.25rem; padding:.2rem .6rem; border-radius:999px; background:var(--brand-grad); color:#fff; font-size:.68rem; font-weight:800; box-shadow:0 3px 10px rgba(224,48,88,.5); }
.match-card__body { padding:1rem 1rem .9rem; }
.match-card__name { font-size:1rem; font-weight:800; margin:0 0 .25rem; color:var(--text); }
.match-card__meta { display:flex; gap:.35rem; flex-wrap:wrap; margin:0 0 .85rem; }
.match-card__meta span { font-size:.78rem; color:var(--muted); }
.match-card__meta span + span::before { content:'·'; margin-right:.2rem; }
.match-card__actions { display:flex; gap:.45rem; }

/* --- Filter panel (browse page) --- */
.filter-form { display:flex; flex-direction:column; gap:.85rem; }
.filter-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.85rem; align-items:end; }
.filter-label { display:flex; flex-direction:column; gap:.35rem; font-size:.85rem; font-weight:600; color:var(--text-2); }
.filter-actions { display:flex; gap:.5rem; align-items:flex-end; }

/* --- Inbox extras --- */
.inbox-avatar--md { width:46px; height:46px; font-size:1.1rem; }
.inbox-avatar__dot { position:absolute; bottom:1px; right:1px; width:11px; height:11px; border-radius:50%; background:var(--brand); border:2px solid var(--surface); }
.inbox-avatar { position:relative; }
.inbox-meta { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; margin-bottom:.15rem; }
.inbox-badge { flex-shrink:0; display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 .35rem; border-radius:999px; background:var(--brand); color:#fff; font-size:.7rem; font-weight:800; }

/* --- Chat extras --- */
.chat-back { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; border:1.5px solid var(--border); color:var(--muted); transition:color .15s,border-color .15s; flex-shrink:0; text-decoration:none; }
.chat-back:hover { color:var(--brand); border-color:var(--brand); text-decoration:none; }
.chat-header-profile { display:flex; align-items:center; gap:.75rem; flex:1; min-width:0; text-decoration:none; color:inherit; }
.chat-header-profile:hover { text-decoration:none; }
.chat-header-name { display:block; font-size:1.05rem; font-weight:800; color:var(--text); line-height:1.2; margin-bottom:.12rem; }
.chat-header-meta { display:block; font-size:.82rem; color:var(--muted); }
.chat-date-divider { display:flex; align-items:center; gap:.75rem; margin:.75rem 0; color:var(--muted); font-size:.76rem; font-weight:600; }
.chat-date-divider::before, .chat-date-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.chat-date-divider span { white-space:nowrap; }
.chat-no-match { display:flex; align-items:center; gap:.6rem; padding:.8rem 1.1rem; border-radius:13px; background:color-mix(in srgb,var(--brand) 8%,var(--surface)); border:1.5px solid color-mix(in srgb,var(--brand) 22%,var(--border)); color:var(--brand); font-size:.86rem; font-weight:600; }
.chat-input { flex:1; border:1.5px solid var(--border); border-radius:13px; padding:.7rem .9rem; font:inherit; font-size:.95rem; resize:none; min-height:46px; max-height:160px; background:var(--surface-2); color:var(--text); overflow:auto; }
.chat-input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(224,48,88,.1); }
.chat-empty-icon { font-size:2.5rem; margin-bottom:.5rem; display:block; }

/* --- Notifications extras --- */
.notice-link { display:flex; align-items:center; gap:.85rem; padding:.9rem 1.1rem; color:var(--text); text-decoration:none; }
.notice-link:hover { text-decoration:none; }
.notice-body { display:block; font-size:.92rem; font-weight:600; color:var(--text); }
.notice-dot { width:9px; height:9px; border-radius:50%; background:var(--brand); flex-shrink:0; }
.notice-icon--match { background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 15%,#fff),color-mix(in srgb,var(--brand) 6%,#fff)); color:var(--brand); }
.notice-icon--message { background:color-mix(in srgb,#2563eb 12%,var(--surface-2)); color:#2563eb; }
.notice-icon--like { background:color-mix(in srgb,#f59e0b 12%,var(--surface-2)); color:#d97706; }
.notice-icon--default { background:var(--surface-2); color:var(--muted); }

/* --- Auth page extras --- */
.auth-card__logo { margin-bottom:1.25rem; }
.auth-card__logo .brand { display:inline-flex; font-size:1rem; }
.auth-foot { margin-top:1.25rem; font-size:.9rem; font-weight:600; color:var(--muted); text-align:center; }
.auth-promo__mark { font-size:2.5rem; margin-bottom:.85rem; background:var(--brand-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.auth-promo__list { list-style:none; margin:.75rem 0 0; padding:0; display:grid; gap:.7rem; }
.auth-promo__list li { display:flex; align-items:flex-start; gap:.55rem; font-size:.95rem; color:rgba(255,255,255,.88); line-height:1.5; }
.auth-promo__icon { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:6px; background:rgba(74,222,128,.18); border:1px solid rgba(74,222,128,.35); color:#4ade80; font-size:.72rem; font-weight:800; flex-shrink:0; margin-top:.1rem; }

/* --- Step indicator (register) --- */
.step-indicator { display:flex; align-items:center; gap:.25rem; margin:1rem 0 1.5rem; }
.step-indicator__item { display:flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:700; color:var(--muted-2); transition:color .22s; }
.step-indicator__item.active { color:var(--brand); }
.step-indicator__item.done { color:var(--ok); }
.step-indicator__dot { width:26px; height:26px; border-radius:50%; background:var(--surface-2); border:2px solid var(--border); display:grid; place-items:center; font-size:.72rem; font-weight:800; color:var(--muted); transition:background .22s,border-color .22s,color .22s; flex-shrink:0; }
.step-indicator__item.active .step-indicator__dot { background:var(--brand-grad); border-color:transparent; color:#fff; }
.step-indicator__item.done .step-indicator__dot { background:var(--ok); border-color:transparent; color:#fff; }
.step-indicator__line { flex:1; height:2px; background:var(--border); border-radius:2px; }

/* --- Review card (register step 3) --- */
.review-card { background:var(--surface-2); border:1.5px solid var(--border); border-radius:14px; padding:1.1rem 1.25rem; margin-bottom:1rem; }
.review-list { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.review-list li { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; font-size:.9rem; }
.review-label { color:var(--muted); font-weight:600; font-size:.82rem; flex-shrink:0; }

/* --- Input with toggle (password show/hide) --- */
.input-with-toggle { position:relative; }
.input-with-toggle input { padding-right:4.5rem; }
.input-toggle { position:absolute; right:.6rem; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--muted); font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; padding:.25rem .4rem; border-radius:6px; transition:color .15s; }
.input-toggle:hover { color:var(--brand); }

/* --- Profile edit extras --- */
.profile-edit-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.progress-pill { display:inline-flex; align-items:center; gap:.6rem; padding:.4rem .85rem; border-radius:999px; background:var(--surface); border:1.5px solid var(--border); font-size:.82rem; font-weight:700; color:var(--muted); box-shadow:var(--sh-sm); }
.progress-pill__bar { width:70px; height:5px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden; }
.progress-pill__bar span { display:block; height:100%; background:var(--brand-grad); border-radius:inherit; }
.progress-pill--done { color:var(--ok); border-color:color-mix(in srgb,var(--ok) 35%,var(--border)); background:color-mix(in srgb,var(--ok) 8%,var(--surface)); }
.profile-edit-layout { display:grid; grid-template-columns:280px 1fr; gap:1.35rem; align-items:start; }
.profile-photos-section { background:var(--surface); border:1.5px solid var(--border); border-radius:18px; padding:1.25rem; box-shadow:var(--sh-sm); }
.profile-checklist { background:var(--surface); border:1.5px solid var(--border); border-radius:18px; padding:1.25rem; box-shadow:var(--sh-sm); }
.profile-checklist h3 { margin:0 0 .75rem; font-size:.88rem; font-weight:700; color:var(--text-2); }
.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.85rem; }
.section-head h2 { margin:0; font-size:.95rem; font-weight:700; color:var(--text); }
.form-label { display:flex; flex-direction:column; gap:.35rem; font-weight:600; font-size:.88rem; color:var(--text-2); }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.form-actions { display:flex; gap:.65rem; padding-top:1rem; }
.check-label { display:flex; align-items:flex-start; gap:.6rem; cursor:pointer; font-size:.9rem; color:var(--text-2); font-weight:500; }
.check-label input[type="checkbox"] { margin-top:.18rem; accent-color:var(--brand); cursor:pointer; width:17px; height:17px; flex-shrink:0; }
.char-counter { text-align:right; margin-top:.25rem; }
.profile-main-form { display:flex; flex-direction:column; gap:0; }
.danger-zone { background:var(--surface); border:1.5px solid color-mix(in srgb,var(--danger) 28%,var(--border)); border-radius:18px; padding:1.35rem 1.5rem; margin-top:1.5rem; box-shadow:var(--sh-sm); }
.danger-zone h3 { margin:0 0 .75rem; font-size:.72rem; font-weight:700; color:var(--danger); text-transform:uppercase; letter-spacing:.08em; }
.danger-zone__inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.danger-zone__inner p { margin:.2rem 0 0; }
.btn.danger.outline { background:transparent; border-color:color-mix(in srgb,var(--danger) 45%,var(--border)); color:var(--danger); }
.btn.danger.outline:hover { background:color-mix(in srgb,var(--danger) 8%,var(--surface)); }

/* --- Photo upload (profile edit) --- */
.photo-upload-form { margin-top:.85rem; }
.photo-upload-label { cursor:pointer; }
.photo-upload-input { display:none; }
.photo-upload-trigger { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; padding:1.25rem 1rem; border:2px dashed var(--border-2); border-radius:14px; background:var(--surface-2); color:var(--muted); font-size:.82rem; font-weight:600; text-align:center; transition:border-color .15s,background .15s; cursor:pointer; margin-bottom:.65rem; }
.photo-upload-trigger:hover { border-color:var(--brand); background:color-mix(in srgb,var(--brand) 5%,var(--surface)); color:var(--brand); }
.photo-del-btn { display:inline-flex; align-items:center; justify-content:center; width:100%; padding:.35rem; background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2); border-radius:0; color:var(--danger); cursor:pointer; font-family:inherit; transition:background .15s; }
.photo-del-btn:hover { background:rgba(239,68,68,.18); }
.photo-tile { position:relative; }

/* --- Admin extras --- */
.admin-brand { font-size:1rem; font-weight:800; color:var(--text); display:flex; align-items:center; gap:.5rem; padding:.5rem .5rem 1rem; border-bottom:1px solid var(--border); margin-bottom:.75rem; }
.admin-main { min-width:0; }
.admin-topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.admin-page-title { margin:0; font-size:clamp(1.3rem,2.5vw,1.8rem); font-weight:800; letter-spacing:-.025em; }
.admin-stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-bottom:1.75rem; }
.admin-stat-card { position:relative; background:var(--surface); border:1.5px solid var(--border); border-radius:18px; padding:1.25rem 1.35rem; box-shadow:var(--sh-sm); display:flex; align-items:flex-start; gap:.85rem; transition:box-shadow .15s; }
.admin-stat-card:hover { box-shadow:var(--sh-md); }
.admin-stat-card--alert { border-color:color-mix(in srgb,var(--warn) 45%,var(--border)); background:color-mix(in srgb,var(--warn) 5%,var(--surface)); }
.admin-stat-icon { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; flex-shrink:0; }
.admin-stat-icon--users   { background:color-mix(in srgb,#2563eb 12%,var(--surface-2)); color:#2563eb; }
.admin-stat-icon--matches { background:color-mix(in srgb,var(--brand) 12%,var(--surface-2)); color:var(--brand); }
.admin-stat-icon--reports { background:color-mix(in srgb,var(--warn) 15%,var(--surface-2)); color:#d97706; }
.admin-stat-icon--photos  { background:color-mix(in srgb,var(--purple) 12%,var(--surface-2)); color:var(--purple); }
.admin-stat-body { flex:1; min-width:0; }
.admin-stat-num { font-size:1.85rem; font-weight:800; letter-spacing:-.04em; line-height:1.1; color:var(--text); margin-bottom:.15rem; }
.admin-stat-label { font-size:.82rem; color:var(--muted); font-weight:600; }
.admin-stat-link { position:absolute; bottom:.75rem; right:1rem; font-size:.78rem; font-weight:700; color:var(--brand); text-decoration:none; }
.admin-stat-link:hover { text-decoration:underline; }
.admin-section { background:var(--surface); border:1.5px solid var(--border); border-radius:18px; padding:1.35rem 1.5rem; box-shadow:var(--sh-sm); }
.admin-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; }
.admin-section-head h2 { margin:0; font-size:1rem; font-weight:800; }
.admin-badge { display:inline-grid; place-items:center; min-width:1.3rem; padding:.05rem .3rem; border-radius:999px; background:var(--brand); color:#fff; font-size:.65rem; font-weight:800; margin-left:auto; }
.admin-table { width:100%; border-collapse:collapse; font-size:.88rem; background:var(--surface); border-radius:14px; overflow:hidden; }
.admin-table th { background:var(--surface-2); border-bottom:1.5px solid var(--border); padding:.65rem .9rem; text-align:left; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); white-space:nowrap; }
.admin-table td { border-bottom:1px solid var(--border); padding:.7rem .9rem; vertical-align:middle; color:var(--text-2); }
.admin-table tbody tr:last-child td { border-bottom:none; }
.admin-table tbody tr:hover { background:color-mix(in srgb,var(--brand) 3%,var(--surface)); }
.admin-filter-tabs { display:flex; gap:.25rem; flex-wrap:wrap; }
.admin-tab { display:inline-flex; align-items:center; padding:.4rem .85rem; border-radius:999px; font-size:.82rem; font-weight:700; color:var(--muted); background:var(--surface-2); border:1.5px solid var(--border); text-decoration:none; transition:background .15s,color .15s,border-color .15s; }
.admin-tab:hover { color:var(--brand); border-color:color-mix(in srgb,var(--brand) 35%,var(--border)); text-decoration:none; }
.admin-tab.active { background:color-mix(in srgb,var(--brand) 10%,var(--surface)); border-color:color-mix(in srgb,var(--brand) 35%,var(--border)); color:var(--brand); }
.admin-search-form { display:flex; gap:.5rem; flex-wrap:nowrap; }
.admin-search-form input { width:auto; min-width:160px; padding:.45rem .85rem; font-size:.88rem; border-radius:10px; }
.admin-select { width:auto; padding:.3rem .6rem; font-size:.82rem; border-radius:8px; border:1.5px solid var(--border); background:var(--surface); cursor:pointer; }
.admin-sidebar-foot { margin-top:auto; padding-top:.75rem; border-top:1px solid var(--border); }
.admin-nav-item { display:flex; align-items:center; gap:.6rem; padding:.55rem .75rem; border-radius:11px; color:var(--text-2); font-size:.88rem; font-weight:600; transition:background .15s,color .15s; text-decoration:none; cursor:pointer; background:none; border:none; width:100%; font-family:inherit; }
.admin-nav-item:hover { background:var(--surface-2); color:var(--brand); text-decoration:none; }
.admin-nav-item.active { background:color-mix(in srgb,var(--brand) 10%,var(--surface)); color:var(--brand); }
.admin-photo-card__img-wrap { position:relative; }
.admin-photo-card__meta { padding:.5rem .75rem; font-size:.82rem; color:var(--muted); font-weight:600; display:flex; align-items:center; justify-content:space-between; }
.admin-photo-status { position:absolute; top:.5rem; left:.5rem; }

/* --- Status badge extras --- */
.status-badge--active   { background:#dcfce7; color:#166534; }
.status-badge--suspended{ background:#fee2e2; color:#991b1b; }
.status-badge--open     { background:#fef9c3; color:#854d0e; }
.status-badge--reviewed { background:#dbeafe; color:#1e40af; }
.status-badge--closed   { background:#f1f5f9; color:#475569; }
.status-badge--pending  { background:#fef9c3; color:#92400e; }
.status-badge--approved { background:#dcfce7; color:#166534; }
.status-badge--rejected { background:#fee2e2; color:#991b1b; }

/* --- Report card extras --- */
.report-card__who { display:flex; align-items:center; gap:.9rem; margin-bottom:1.35rem; padding-bottom:1.25rem; border-bottom:1.5px solid var(--border); }
.report-card__avatar { width:52px; height:52px; border-radius:50%; border:2px solid var(--border); background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 20%,#fff),color-mix(in srgb,var(--brand) 8%,#f5eef8)); display:grid; place-items:center; font-size:1.3rem; font-weight:800; color:var(--brand-dark); overflow:hidden; flex-shrink:0; }
.report-card__avatar img { width:100%; height:100%; object-fit:cover; }
.report-card__notice { display:flex; align-items:flex-start; gap:.6rem; padding:.85rem 1rem; border-radius:12px; background:color-mix(in srgb,var(--warn) 8%,var(--surface)); border:1.5px solid color-mix(in srgb,var(--warn) 28%,var(--border)); color:#92400e; font-size:.86rem; margin-top:1rem; }
.report-card__notice p { margin:0; line-height:1.55; }
.report-card__notice svg { flex-shrink:0; margin-top:.1rem; }

/* --- Profile view page extras --- */
.profile-view__back { display:flex; align-items:center; gap:.5rem; margin-bottom:1.25rem; }
.profile-view__layout { display:grid; grid-template-columns:320px 1fr; gap:1.75rem; align-items:start; }
.profile-view__aside { position:sticky; top:calc(var(--nav-h) + 1rem); display:flex; flex-direction:column; gap:1rem; }
.profile-view__hero { position:relative; border-radius:22px; overflow:hidden; box-shadow:var(--sh-lg); }
.profile-view__hero-img { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center top; }
.profile-view__hero-ph { width:100%; aspect-ratio:3/4; background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 18%,#fff),color-mix(in srgb,var(--brand) 6%,#f5eef8)); display:flex; align-items:center; justify-content:center; font-size:5rem; }
.profile-view__match-badge { position:absolute; bottom:.85rem; left:.85rem; display:inline-flex; align-items:center; gap:.3rem; padding:.3rem .8rem; border-radius:999px; background:var(--brand-grad); color:#fff; font-size:.78rem; font-weight:800; box-shadow:0 4px 14px rgba(224,48,88,.5); }
.profile-view__body { background:var(--surface); border:1.5px solid var(--border); border-radius:22px; padding:2rem; box-shadow:var(--sh-sm); }
.profile-view__header { display:flex; align-items:baseline; gap:.65rem; margin-bottom:.75rem; flex-wrap:wrap; }
.profile-view__name { margin:0; font-size:clamp(1.5rem,3vw,2.2rem); font-weight:800; letter-spacing:-.03em; }
.profile-view__age { font-size:1.4rem; font-weight:700; color:var(--muted); }
.profile-view__section { margin-top:1.5rem; padding-top:1.5rem; border-top:1.5px solid var(--border); }
.profile-view__section h2 { margin:0 0 .75rem; font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.profile-view__bio { font-size:.98rem; color:var(--text-2); line-height:1.7; margin:0; white-space:pre-wrap; }
.profile-view__dl { display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.25rem; margin:0; font-size:.92rem; }
.profile-view__dl dt { color:var(--muted); font-weight:600; }
.profile-view__dl dd { margin:0; color:var(--text); font-weight:600; }
.profile-view__actions { display:flex; gap:.65rem; flex-wrap:wrap; }
.profile-view__block { margin-top:.65rem; }
.profile-view__match-cta { display:flex; align-items:center; gap:1rem; padding:1.1rem 1.25rem; border-radius:16px; background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 10%,#fff),color-mix(in srgb,var(--brand) 4%,#fff)); border:1.5px solid color-mix(in srgb,var(--brand) 25%,var(--border)); margin-top:1.5rem; flex-wrap:wrap; }
.profile-view__match-cta-icon { font-size:2rem; color:var(--brand); line-height:1; }
.profile-gallery { margin-top:.85rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); gap:.45rem; }
.profile-gallery__thumb { border:none; padding:0; background:none; border-radius:12px; overflow:hidden; cursor:pointer; opacity:.75; transition:opacity .15s; border:2px solid transparent; }
.profile-gallery__thumb:hover { opacity:1; }
.profile-gallery__thumb.active { opacity:1; border-color:var(--brand); }
.profile-gallery__thumb img { display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.profile-tag--location { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.profile-tag--faith { background:#fef9c3; border-color:#fde68a; color:#92400e; }
.profile-tag--intent { background:#ffe4e6; border-color:#fda4af; color:#9f1239; }

/* ═══════════════════════════════════════════════
   28. RESPONSIVE ADDITIONS
   ═══════════════════════════════════════════════ */
@media (max-width:900px) {
  .profile-edit-layout { grid-template-columns:1fr; }
  .profile-view__layout { grid-template-columns:1fr; }
  .profile-view__aside { position:static; }
  .form-grid-2 { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .match-card__photo, .match-card__photo-ph { aspect-ratio:2/3; }
  .admin-stats-grid { grid-template-columns:1fr 1fr; }
  .admin-topbar { gap:.65rem; }
  .danger-zone__inner { flex-direction:column; align-items:flex-start; }
  .profile-view__match-cta { flex-direction:column; align-items:flex-start; }
  .chat-composer { flex-wrap:nowrap; }
}
@media (max-width:480px) {
  .admin-stats-grid { grid-template-columns:1fr; }
  .profile-edit-header { flex-direction:column; align-items:flex-start; }
  .filter-row { grid-template-columns:1fr; }
}