:root{
  --bg:#081120;
  --bg2:#0e172a;
  --panel:rgba(17,24,39,.78);
  --text:#eef2ff;
  --muted:#9fb0cf;
  --line:rgba(148,163,184,.18);
  --primary:#7c3aed;
  --primary-2:#2563eb;
  --accent:#ec4899;
  --danger:#ef4444;
  --glass: blur(14px);
  --radius:22px;
  --shadow:0 20px 60px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 0% 0%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(900px 600px at 100% 20%, rgba(37,99,235,.18), transparent 60%),
    linear-gradient(180deg, #07111f, #0a1322 50%, #08111d);
  min-height:100vh;
}
a{color:#b9c8ff;text-decoration:none}
img{display:block;max-width:100%}
.container{width:min(1120px,92%);margin:0 auto}
.page{padding:28px 0 60px}
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(8,17,32,.7);
  backdrop-filter:var(--glass);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;justify-content:space-between;align-items:center;
  min-height:72px;gap:16px;
}
.brand{font-size:1.05rem;font-weight:800;color:#fff}
.nav-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:stretch}
.panel,.card,.chat-sidebar,.chat-main{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:var(--glass);
}
.panel-inner,.card-body,.chat-sidebar .inner,.chat-main .inner{padding:22px}
.hero-title{font-size:clamp(2rem,5vw,3.8rem);line-height:1.02;margin:0 0 14px}
.muted,.hero p{color:var(--muted)}
.badges,.toolbar{display:flex;gap:10px;flex-wrap:wrap}
.badges{margin:18px 0 24px}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 12px;border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:#dbe4ff;font-size:.92rem;
}
.btn{
  display:inline-flex;justify-content:center;align-items:center;gap:8px;
  border:none;border-radius:14px;padding:13px 18px;font-weight:700;
  cursor:pointer;text-decoration:none;transition:.18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-2));color:#fff}
.btn-secondary{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.1)}
.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}
.btn-like{background:linear-gradient(135deg,#ec4899,#db2777);color:#fff}
.btn-pass{background:linear-gradient(135deg,#475569,#334155);color:#fff}
.btn-small{padding:10px 13px;border-radius:12px;font-size:.92rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.section{margin-top:26px}
.form-stack{display:grid;gap:14px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:grid;gap:8px;font-weight:600}
input,textarea,select{
  width:100%;border:1px solid rgba(255,255,255,.1);border-radius:14px;
  background:rgba(8,15,26,.72);color:#fff;padding:13px 14px;outline:none;
}
textarea{min-height:130px;resize:vertical}
input[type="checkbox"]{width:auto}
.notice{
  padding:13px 14px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);margin-bottom:16px;
}
.notice.error{background:rgba(127,29,29,.28);border-color:rgba(248,113,113,.35)}
.notice.success{background:rgba(6,95,70,.28);border-color:rgba(52,211,153,.35)}
.pref-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.pref-option{
  display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
}
.photo-frame{
  border-radius:22px;overflow:hidden;background:#0b1324;border:1px solid var(--line);
}
.profile-photo{width:100%;height:min(72vh,640px);object-fit:cover}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.match-list{display:grid;gap:12px}
.match-item{
  display:grid;grid-template-columns:76px 1fr auto;gap:12px;align-items:center;
  padding:12px;border-radius:18px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}
.match-thumb{
  width:76px;height:76px;border-radius:18px;object-fit:cover;background:#0b1324;
}
.chat-layout{display:grid;grid-template-columns:340px 1fr;gap:18px}
.messages{
  display:grid;gap:10px;max-height:58vh;overflow-y:auto;padding-right:4px;margin-bottom:14px;
}
.msg{padding:12px 14px;border-radius:16px;max-width:78%;line-height:1.45}
.msg.me{
  margin-left:auto;
  background:linear-gradient(135deg, rgba(124,58,237,.45), rgba(37,99,235,.45));
  border:1px solid rgba(147,197,253,.18);
}
.msg.them{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.empty{padding:30px 18px;text-align:center;color:var(--muted)}
.kpi{
  padding:18px;border-radius:20px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.footer-note{margin-top:18px;font-size:.92rem;color:var(--muted)}
@media (max-width: 920px){
  .hero,.chat-layout,.grid-3,.grid-2,.row{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .pref-grid{grid-template-columns:1fr}
  .match-item{grid-template-columns:68px 1fr}
  .actions{grid-template-columns:1fr}
  .hero-title{font-size:2.3rem}
}

.hero-premium{
  position:relative;
  overflow:hidden;
}
.hero-premium::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 20% 20%, rgba(236,72,153,.15), transparent 25%),
    radial-gradient(circle at 80% 10%, rgba(59,130,246,.16), transparent 28%),
    radial-gradient(circle at 50% 80%, rgba(124,58,237,.12), transparent 30%);
  pointer-events:none;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:#dbe4ff;
  font-size:.92rem;
  margin-bottom:12px;
}
.hero-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px;
}
.feature-list{
  display:grid;
  gap:12px;
  margin-top:16px;
}
.feature-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.feature-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(135deg,#ec4899,#7c3aed);
  margin-top:6px;
  flex:0 0 auto;
}
.city-pill-wrap{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}
.city-pill{
  padding:8px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  font-size:.9rem;
  color:#dbe4ff;
}
.match-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-size:.9rem;
  color:var(--muted);
  margin-top:4px;
}
.unread-badge{
  display:inline-flex;
  min-width:24px;
  height:24px;
  padding:0 8px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:linear-gradient(135deg,#ec4899,#db2777);
  color:#fff;
  font-size:.82rem;
  font-weight:700;
}
.msg-time{
  font-size:.78rem;
  color:rgba(255,255,255,.65);
  margin-top:6px;
}
.admin-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
@media (max-width:640px){
  .hero-cta{flex-direction:column}
}

.match-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(3,7,18,.72);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:9999;
}
.match-modal{
  width:min(560px,100%);
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  overflow:hidden;
}
.match-modal-inner{
  padding:28px;
  text-align:center;
}
.match-photos{
  display:flex;
  gap:14px;
  justify-content:center;
  margin:18px 0 22px;
}
.match-photos img{
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:24px;
  border:2px solid rgba(255,255,255,.2);
}
.verified-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.3);
  color:#dcfce7;
  font-size:.84rem;
  font-weight:700;
}
.activity-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(59,130,246,.12);
  border:1px solid rgba(59,130,246,.28);
  color:#dbeafe;
  font-size:.84rem;
}
.stat-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
@media (max-width:880px){
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.brand-logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.brand-logo img{
  height:52px;
  width:auto;
  display:block;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.hero-home{
  position:relative;
  min-height:78vh;
  background-image:url('/assets/img/hero/hero-sacramento-1.jpg');
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(6,10,20,0.45), rgba(6,10,20,0.72));
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:860px;
  padding:40px 20px;
}

.hero-logo-wrap{
  margin-bottom:18px;
}

.hero-logo{
  width:min(260px,70vw);
  height:auto;
  display:block;
  margin:0 auto;
  filter:drop-shadow(0 10px 25px rgba(0,0,0,.35));
}

.hero-home h1{
  font-size:clamp(2.1rem, 5vw, 4rem);
  line-height:1.02;
  margin:0 0 12px;
}

.hero-home p{
  max-width:760px;
  margin:0 auto;
  font-size:clamp(1rem, 2vw, 1.2rem);
}

.hero-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:24px;
}

@media (max-width:640px){
  .brand-logo img{
    height:38px;
  }

  .hero-home{
    min-height:68vh;
    background-position:center;
  }

  .hero-cta{
    flex-direction:column;
    align-items:center;
  }
}

/* ===== Premium brand/header polish ===== */
.brand-logo{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}

.brand-logo img{
  height:42px;
  width:auto;
  display:block;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.18));
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ===== Premium homepage hero ===== */
.hero-home{
  position:relative;
  min-height:78vh;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  border-radius:28px;
  margin-bottom:28px;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(5,10,18,.32), rgba(5,10,18,.68)),
    radial-gradient(circle at 20% 20%, rgba(236,72,153,.16), transparent 30%),
    radial-gradient(circle at 80% 10%, rgba(124,58,237,.18), transparent 32%);
}

.hero-content{
  position:relative;
  z-index:2;
  width:min(900px, 100%);
  padding:64px 24px;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
  color:#f3f4f6;
  font-size:.92rem;
  margin-bottom:18px;
}

.hero-logo-wrap{
  margin-bottom:16px;
}

.hero-logo{
  width:min(190px, 48vw);
  height:auto;
  display:block;
  margin:0 auto;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.32));
}

.hero-home h1{
  font-size:clamp(2.2rem, 5vw, 4.4rem);
  line-height:1.02;
  margin:0 0 14px;
  text-shadow:0 10px 30px rgba(0,0,0,.28);
}

.hero-home p{
  max-width:760px;
  margin:0 auto;
  font-size:clamp(1rem, 2vw, 1.15rem);
  color:rgba(255,255,255,.92);
}

.hero-cta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:26px;
}

.hero-cta .btn{
  min-width:180px;
}

@media (max-width: 768px){
  .brand-logo img{
    height:36px;
  }

  .hero-home{
    min-height:68vh;
    border-radius:22px;
  }

  .hero-content{
    padding:48px 18px;
  }

  .hero-logo{
    width:min(150px, 52vw);
  }

  .hero-cta{
    flex-direction:column;
    align-items:center;
  }

  .hero-cta .btn{
    width:min(280px, 100%);
  }
}

/* ===== Homepage hero slideshow ===== */
.hero-home{
  position:relative;
  min-height:78vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  border-radius:28px;
  margin-bottom:28px;
  isolation:isolate;
}

.hero-slideshow{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.02);
  transition:opacity 1.4s ease, transform 6s ease;
}

.hero-slide.active{
  opacity:1;
  transform:scale(1.06);
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(5,10,18,.32), rgba(5,10,18,.70)),
    radial-gradient(circle at 20% 20%, rgba(236,72,153,.15), transparent 30%),
    radial-gradient(circle at 80% 10%, rgba(124,58,237,.16), transparent 35%);
  backdrop-filter:blur(1px);
}

.hero-content{
  position:relative;
  z-index:2;
  width:min(920px, 100%);
  padding:64px 24px;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
  color:#f3f4f6;
  font-size:.92rem;
  margin-bottom:18px;
}

.hero-logo-wrap{
  margin-bottom:16px;
}

.hero-logo{
  width:min(150px, 38vw);
  height:auto;
  display:block;
  margin:0 auto;
  border-radius:22px;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.22));
}

.hero-home h1{
  font-size:clamp(2.4rem, 5vw, 4.6rem);
  line-height:1.02;
  margin:0 0 14px;
  text-shadow:0 14px 34px rgba(0,0,0,.42);
}

.hero-home p{
  max-width:760px;
  margin:0 auto;
  font-size:clamp(1rem, 2vw, 1.15rem);
  color:rgba(255,255,255,.94);
}

.hero-cta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:26px;
}

.hero-cta .btn{
  min-width:180px;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.hero-cta .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.22);
}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 18px 36px rgba(0,0,0,.28);
}

@media (max-width: 768px){
  .brand-logo img{
    height:38px;
  }

  .hero-home{
    min-height:68vh;
    border-radius:22px;
  }

  .hero-content{
    padding:48px 18px;
  }

  .hero-logo{
    width:min(128px, 46vw);
  }

  .hero-cta{
    flex-direction:column;
    align-items:center;
  }

  .hero-cta .btn{
    width:min(280px, 100%);
  }
}

/* ===== Hero animation entrance ===== */
.hero-animate{
  animation:heroFadeUp .9s ease both;
}

@keyframes heroFadeUp{
  0%{
    opacity:0;
    transform:translateY(20px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

/* ===== Floating stat chips ===== */
.hero-floating-chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin:0 0 16px;
}

.floating-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
  color:#f8fafc;
  font-size:.86rem;
  box-shadow:0 12px 26px rgba(0,0,0,.14);
}

/* ===== Hero slideshow navigation ===== */
.hero-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:46px;
  height:46px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.hero-nav:hover{
  transform:translateY(-50%) scale(1.05);
  background:rgba(255,255,255,.18);
  box-shadow:0 14px 26px rgba(0,0,0,.20);
}

.hero-prev{
  left:18px;
}

.hero-next{
  right:18px;
}

/* ===== Hero dots ===== */
.hero-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:22px;
}

.hero-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:none;
  background:rgba(255,255,255,.35);
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.hero-dot.active{
  background:#fff;
  transform:scale(1.25);
  box-shadow:0 0 0 6px rgba(255,255,255,.08);
}

.hero-dot:hover{
  background:rgba(255,255,255,.85);
}

/* ===== Gradient glow buttons ===== */
.btn-glow{
  position:relative;
  overflow:hidden;
  box-shadow:
    0 10px 24px rgba(124,58,237,.30),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

.btn-glow::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.18), rgba(255,255,255,.0));
  transform:translateX(-120%);
  transition:transform .7s ease;
}

.btn-glow:hover::before{
  transform:translateX(120%);
}

.btn-glow:hover{
  box-shadow:
    0 14px 30px rgba(124,58,237,.42),
    0 0 0 1px rgba(255,255,255,.10) inset;
}

/* ===== Coming soon / more users card ===== */
.hero-soon-card{
  margin:24px auto 0;
  max-width:760px;
  padding:14px 18px;
  border-radius:18px;
  background:rgba(10,16,30,.42);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  color:#f8fafc;
  display:flex;
  flex-direction:column;
  gap:6px;
  box-shadow:0 20px 40px rgba(0,0,0,.18);
}

.hero-soon-card strong{
  font-size:1rem;
}

.hero-soon-card span{
  color:rgba(255,255,255,.86);
  font-size:.96rem;
}

/* ===== Slightly stronger card polish ===== */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.024));
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 18px 36px rgba(0,0,0,.28);
}

/* ===== Mobile polish ===== */
@media (max-width: 768px){
  .hero-nav{
    width:40px;
    height:40px;
    font-size:24px;
  }

  .hero-prev{
    left:10px;
  }

  .hero-next{
    right:10px;
  }

  .hero-floating-chips{
    gap:8px;
  }

  .floating-chip{
    font-size:.8rem;
    padding:7px 10px;
  }

  .hero-soon-card{
    padding:12px 14px;
  }
}

/* ===== Discover / swipe polish ===== */
.swipe-card{
  transition:transform .24s ease, opacity .24s ease, filter .24s ease;
}
.swipe-card.swipe-left{
  transform:translateX(-80px) rotate(-6deg);
  opacity:0;
  filter:blur(2px);
}
.swipe-card.swipe-right{
  transform:translateX(80px) rotate(6deg);
  opacity:0;
  filter:blur(2px);
}
.photo-carousel{
  position:relative;
  overflow:hidden;
  border-radius:22px;
}
.carousel-slide{
  display:none;
}
.carousel-slide.active{
  display:block;
}
.discover-main-photo{
  height:min(62vh, 640px);
}
.carousel-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:42px;
  height:42px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:28px;
  cursor:pointer;
}
.carousel-prev{ left:12px; }
.carousel-next{ right:12px; }
.carousel-dots{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
}
.carousel-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:none;
  background:rgba(255,255,255,.45);
  cursor:pointer;
}
.carousel-dot.active{
  background:#fff;
  transform:scale(1.18);
}
.empty-state.premium-empty{
  padding:28px 18px;
  text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
}
.verified-chip{
  margin-left:8px;
}
.full-width-chat{
  width:100%;
}
.messages{
  min-height:320px;
}
.msg.me{
  margin-left:auto;
  max-width:min(76%, 620px);
}
.msg.them{
  margin-right:auto;
  max-width:min(76%, 620px);
}
.msg{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  padding:12px 14px;
  border-radius:16px;
  margin:0 0 10px;
}
.msg-time{
  opacity:.7;
  font-size:.8rem;
  margin-top:6px;
}
.unread-badge{
  display:inline-flex;
  min-width:26px;
  height:26px;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  background:#ec4899;
  color:#fff;
  font-weight:700;
}
.stat-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:12px;
}
@media (max-width:960px){
  .stat-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ===== Toasts ===== */
.toast-wrap{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.toast{
  min-width:220px;
  max-width:320px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(11,18,32,.92);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  box-shadow:0 18px 36px rgba(0,0,0,.28);
  transform:translateY(10px);
  opacity:0;
  transition:opacity .22s ease, transform .22s ease;
}
.toast.show{
  opacity:1;
  transform:translateY(0);
}
.toast-success{
  border-color:rgba(34,197,94,.34);
}
.nav-unread-badge{
  display:inline-flex;
  min-width:18px;
  height:18px;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  background:#ec4899;
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  margin-left:6px;
  padding:0 5px;
}
.admin-user-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:18px;
}
.admin-side-card,
.admin-notes-card{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.024));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:16px;
}
@media (max-width: 900px){
  .admin-user-grid{
    grid-template-columns:1fr;
  }
}

.health-pre{
  white-space:pre-wrap;
  word-break:break-word;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:14px;
}

.notice.warning{
  border-color:rgba(245,158,11,.35);
  background:rgba(245,158,11,.10);
}

/* ===== Profile strength ===== */
.strength-card{
  margin:0 0 18px;
  padding:16px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.08);
}
.strength-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.strength-bar{
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.strength-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(135deg,#ec4899,#7c3aed);
}
.strength-tips{
  margin:12px 0 0 18px;
  color:#d1d5db;
}

/* ===== Match celebration ===== */
.match-celebration{
  position:relative;
  overflow:hidden;
}
.match-burst{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 30% 30%, rgba(236,72,153,.16), transparent 24%),
    radial-gradient(circle at 70% 25%, rgba(124,58,237,.18), transparent 25%),
    radial-gradient(circle at 50% 75%, rgba(255,255,255,.08), transparent 20%);
  animation:matchPulse 2.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes matchPulse{
  0%,100%{ transform:scale(1); opacity:.9; }
  50%{ transform:scale(1.04); opacity:1; }
}

/* ===== Icebreakers ===== */
.icebreaker-wrap{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* ===== Admin polish ===== */
.table-wrap{
  overflow:auto;
}

/* ===== Growth polish ===== */
.featured-chip{
  background:linear-gradient(135deg,#f59e0b,#fb7185);
  color:#fff;
}
.real-activity-banner{
  margin:0 0 18px;
  padding:12px 16px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(236,72,153,.12), rgba(124,58,237,.12));
  border:1px solid rgba(255,255,255,.08);
  color:#f3f4f6;
  text-align:center;
}
.like-preview-banner{
  margin:0 0 16px;
  padding:14px 16px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(236,72,153,.14), rgba(124,58,237,.14));
  border:1px solid rgba(255,255,255,.08);
}
.teaser-card{
  position:relative;
  overflow:hidden;
}
.teaser-blur{
  filter:blur(10px) brightness(.75);
  transform:scale(1.06);
}
.teaser-overlay{
  position:absolute;
  inset:auto 12px 12px 12px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(11,18,32,.72);
  color:#fff;
  font-weight:700;
  text-align:center;
}
.notification-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.notification-item{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.notification-item.unread{
  border-color:rgba(236,72,153,.28);
  box-shadow:0 0 0 1px rgba(236,72,153,.08) inset;
}
.notification-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}
.admin-inline-row td{
  background:rgba(255,255,255,.02);
  border-top:none;
}
.admin-inline-tools{
  padding:8px 0 4px;
}

/* ===== Homepage / featured sections ===== */
.section-block{
  margin:0 0 28px;
}
.section-head{
  margin:0 0 14px;
}
.center-text{
  text-align:center;
}
.hero-home{
  position:relative;
  overflow:hidden;
  min-height:520px;
  border-radius:28px;
  margin:0 0 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.08);
  background:#0b1220;
}
.hero-bg-slider{
  position:absolute;
  inset:0;
}
.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.1s ease;
  background-size:cover;
  background-position:center;
}
.hero-slide:nth-child(1){ background-image:url('/assets/img/hero/hero-sacramento-1.jpg'); }
.hero-slide:nth-child(2){ background-image:url('/assets/img/hero/hero-sacramento-2.jpg'); }
.hero-slide:nth-child(3){ background-image:url('/assets/img/hero/hero-sacramento-3.jpg'); }
.hero-slide:nth-child(4){ background-image:url('/assets/img/hero/hero-sacramento-4.jpg'); }
.hero-slide.active{
  opacity:1;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(7,10,18,.35), rgba(7,10,18,.72)),
    radial-gradient(circle at 50% 20%, rgba(236,72,153,.14), transparent 28%);
}
.hero-inner{
  position:relative;
  z-index:2;
  max-width:760px;
  text-align:center;
  padding:56px 24px;
}
.hero-inner h1{
  margin:0 0 14px;
  font-size:clamp(2.2rem, 6vw, 4.4rem);
  line-height:1.04;
}
.hero-sub{
  max-width:680px;
  margin:0 auto 18px;
  color:#d1d5db;
  font-size:1.05rem;
}
.hero-mini-note{
  margin-top:16px;
  color:#cbd5e1;
  font-size:.95rem;
}
.featured-chip{
  background:linear-gradient(135deg,#f59e0b,#fb7185);
  color:#fff;
}
@media (max-width: 820px){
  .hero-home{
    min-height:440px;
  }
  .hero-inner{
    padding:42px 18px;
  }
}

/* =========================================================
   PHOTO SYSTEM POLISH
   Consistent image sizing/cropping across app
   ========================================================= */

:root{
  --photo-radius: 18px;
  --photo-card-height: 420px;
  --photo-card-height-tablet: 360px;
  --photo-card-height-mobile: 300px;
  --photo-thumb-height: 120px;
  --photo-admin-height: 240px;
}

/* Generic media safety */
img{
  max-width:100%;
  height:auto;
  display:block;
}

/* Main reusable photo frame */
.photo-frame{
  position:relative;
  width:100%;
  border-radius:var(--photo-radius);
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}

/* Standard app profile photos */
.profile-photo{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  background:#0b1220;
}

/* Standard card heights */
.photo-frame.card-photo{
  height:var(--photo-card-height);
}

/* Discover main card photo */
.discover-main-photo,
#discoverMainPhoto{
  width:100%;
  height:var(--photo-card-height);
  object-fit:cover;
  object-position:center center;
  display:block;
  border-radius:var(--photo-radius);
}

/* Profile page gallery cards */
.grid-3 .photo-frame{
  height:var(--photo-card-height-tablet);
}

/* Smaller thumb/gallery cards */
.photo-thumb-frame{
  position:relative;
  width:100%;
  height:var(--photo-thumb-height);
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
}
.photo-thumb-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

/* Admin images */
.admin-photo-frame,
.admin-user-grid .photo-frame{
  height:var(--photo-admin-height);
}

/* Featured / teaser / spotlight cards */
.teaser-card,
.like-card .photo-frame,
.grid-3 .card .photo-frame{
  height:var(--photo-card-height-tablet);
}

/* Match modal photos */
.match-photos{
  display:flex;
  justify-content:center;
  gap:14px;
  margin:18px 0 22px;
}
.match-photos img{
  width:110px;
  height:110px;
  border-radius:50%;
  object-fit:cover;
  object-position:center center;
  border:2px solid rgba(255,255,255,.14);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  background:#0b1220;
}

/* Carousel images */
.photo-carousel{
  position:relative;
}
.carousel-slide{
  display:none;
}
.carousel-slide.active{
  display:block;
}
.carousel-slide img{
  width:100%;
  height:var(--photo-card-height);
  object-fit:cover;
  object-position:center center;
  border-radius:var(--photo-radius);
}

/* Homepage/featured profile cards */
.section-block .grid-3 .card .profile-photo{
  height:320px;
  object-fit:cover;
  object-position:center center;
}

/* User detail/admin larger profile preview */
.admin-user-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px;
}
.admin-side-card{
  padding:16px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
}

/* Prevent extra tall inline image overrides */
.profile-photo[style],
.photo-frame img[style]{
  max-width:100%;
}

/* Profile settings page photo cards */
.card .photo-frame img.profile-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

/* If you ever need full image without crop, use this helper */
.photo-contain{
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center center !important;
  background:#0b1220;
}

/* Mobile polish */
@media (max-width: 980px){
  .admin-user-grid{
    grid-template-columns:1fr;
  }

  .photo-frame.card-photo,
  .discover-main-photo,
  #discoverMainPhoto,
  .carousel-slide img{
    height:var(--photo-card-height-tablet);
  }
}

@media (max-width: 700px){
  .photo-frame.card-photo,
  .discover-main-photo,
  #discoverMainPhoto,
  .carousel-slide img{
    height:var(--photo-card-height-mobile);
  }

  .grid-3 .photo-frame,
  .teaser-card,
  .like-card .photo-frame,
  .section-block .grid-3 .card .profile-photo{
    height:260px;
  }

  .match-photos img{
    width:92px;
    height:92px;
  }
}

/* ===== Thumbnail / full image system ===== */
.profile-photo,
.discover-main-photo,
.carousel-slide img{
  image-rendering:auto;
}
[data-full]{
  cursor:zoom-in;
}

/* ===== Photo modal ===== */
.photo-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(3,7,18,.84);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:24px;
}
.photo-modal-backdrop.open{
  display:flex;
}
.photo-modal{
  position:relative;
  max-width:min(96vw, 1100px);
  max-height:92vh;
}
.photo-modal-image{
  max-width:100%;
  max-height:92vh;
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.38);
  object-fit:contain;
}
.photo-modal-close{
  position:absolute;
  top:-14px;
  right:-14px;
  width:42px;
  height:42px;
  border:none;
  border-radius:999px;
  background:#fff;
  color:#111827;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}

/* ===== Matches page mobile/avatar fix ===== */
.match-list{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.match-card-shell{
  overflow:hidden;
}

.match-card-row{
  display:flex;
  align-items:flex-start;
  gap:16px;
}

.match-avatar-frame{
  flex:0 0 96px;
  width:96px;
  height:96px;
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
}

.match-avatar{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  background:#0b1220;
}

.match-card-content{
  flex:1 1 auto;
  min-width:0;
}

.match-card-name{
  margin:0 0 8px;
  line-height:1.08;
}

.match-meta-line{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:4px;
}

.match-preview-text{
  margin:0;
  color:#dbe4ff;
  font-size:1rem;
  line-height:1.42;
  word-break:break-word;
}

.match-preview-text.no-msg{
  color:#b9c4e8;
  font-weight:600;
}

@media (max-width: 700px){
  .match-card-row{
    gap:14px;
  }

  .match-avatar-frame{
    flex:0 0 82px;
    width:82px;
    height:82px;
    border-radius:18px;
  }

  .match-card-name{
    font-size:1.08rem;
  }

  .match-preview-text{
    font-size:.98rem;
  }
}

/* ===== Perfect image pipeline: blur-up ===== */
.img-blurup{
  filter:blur(10px);
  transform:scale(1.02);
  opacity:.88;
  transition:
    filter .35s ease,
    transform .35s ease,
    opacity .35s ease;
}

.img-blurup.is-loaded{
  filter:blur(0);
  transform:scale(1);
  opacity:1;
}

/* ===== Discover image experience upgrade ===== */
.discover-media-wrap{
  margin-bottom:18px;
}

.discover-media-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.discover-photo-count{
  color:#c9d4f2;
  font-size:.95rem;
  font-weight:600;
}

.discover-photo-carousel{
  position:relative;
}

.discover-image-shell{
  width:100%;
  height:min(72vh, 760px);
  min-height:360px;
  border-radius:22px;
  overflow:hidden;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    #071120;
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
}

.discover-main-photo{
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center center !important;
  background:#071120;
  cursor:zoom-in;
}

.discover-thumb-row{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:12px 2px 2px;
  scrollbar-width:thin;
}

.discover-thumb{
  flex:0 0 auto;
  width:68px;
  height:68px;
  padding:0;
  border:none;
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  border:2px solid transparent;
  cursor:pointer;
}

.discover-thumb.active{
  border-color:rgba(236,72,153,.9);
  box-shadow:0 0 0 1px rgba(236,72,153,.24);
}

.discover-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}

.discover-lightbox{
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(2,6,20,.86);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.discover-lightbox.open{
  display:flex;
}

.discover-lightbox-inner{
  position:relative;
  width:min(96vw, 1200px);
  max-height:94vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.discover-lightbox img{
  max-width:100%;
  max-height:94vh;
  object-fit:contain;
  border-radius:22px;
  background:#071120;
  box-shadow:0 22px 60px rgba(0,0,0,.45);
}

.discover-lightbox-close{
  position:absolute;
  top:-10px;
  right:-10px;
  width:44px;
  height:44px;
  border:none;
  border-radius:999px;
  background:#fff;
  color:#0f172a;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}

.no-scroll{
  overflow:hidden;
}

@media (max-width: 900px){
  .discover-image-shell{
    height:min(64vh, 620px);
    min-height:320px;
  }
}

@media (max-width: 700px){
  .discover-media-topbar{
    align-items:flex-start;
    flex-direction:column;
  }

  .discover-image-shell{
    height:min(58vh, 520px);
    min-height:280px;
    border-radius:18px;
  }

  .discover-thumb{
    width:60px;
    height:60px;
    border-radius:12px;
  }
}

/* ===== Shared content hub polish ===== */
.section-block{
  margin:0 0 28px;
}
.section-head{
  margin:0 0 14px;
}
.section-head h1,
.section-head h2{
  margin:0 0 10px;
  line-height:1.08;
}
.section-head p{
  margin:0;
}

.card a{
  color:#dbe4ff;
  text-decoration:none;
}
.card a:hover{
  color:#ffffff;
}

.grid-2 .card,
.grid-3 .card{
  height:100%;
}

.card-body h3{
  margin:0 0 10px;
}
.card-body p:last-child{
  margin-bottom:0;
}

@media (max-width: 920px){
  .section-block{
    margin:0 0 22px;
  }
}

/* ===== Premium footer SEO grid ===== */
.site-footer{
  margin-top:40px;
  padding:28px 0 34px;
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}

.footer-seo-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
  margin-bottom:18px;
}

.footer-seo-col{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-seo-col h3{
  margin:0 0 4px;
  font-size:1rem;
  color:#fff;
}

.footer-seo-col a{
  color:#cfd8f6;
  text-decoration:none;
  font-size:.96rem;
  line-height:1.4;
}

.footer-seo-col a:hover{
  color:#fff;
}

.footer-bottom-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.06);
}

@media (max-width: 980px){
  .footer-seo-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 640px){
  .footer-seo-grid{
    grid-template-columns:1fr;
  }

  .footer-bottom-row{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ===== Mobile hamburger navigation ===== */
.nav-hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:44px;
  height:44px;
  border:none;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  cursor:pointer;
  padding:0;
  flex-shrink:0;
}

.nav-hamburger span{
  display:block;
  width:22px;
  height:2px;
  border-radius:2px;
  background:#fff;
  transition:transform .22s ease, opacity .22s ease;
  transform-origin:center;
}

.nav-hamburger.is-open span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.nav-hamburger.is-open span:nth-child(2){
  opacity:0;
  transform:scaleX(0);
}
.nav-hamburger.is-open span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

@media (max-width: 820px){
  .nav-hamburger{
    display:flex;
  }

  .nav-links{
    display:none;
    position:absolute;
    top:72px;
    left:0;
    right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:rgba(8,17,32,.97);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.08);
    padding:12px 0 16px;
    z-index:49;
  }

  .nav-links.nav-open{
    display:flex;
  }

  .nav-links a{
    width:100%;
    padding:13px 24px;
    border-radius:0;
    font-size:1rem;
  }

  .nav-links a:hover{
    background:rgba(255,255,255,.05);
  }

  .nav-links .btn{
    margin:10px 20px 0;
    width:calc(100% - 40px);
    justify-content:center;
    border-radius:14px;
  }
}

body.nav-overlay-open::before{
  content:'';
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.38);
  z-index:48;
  pointer-events:none;
}