/* =====================================================================
   LuxeMatch — Tinder-style theme (loaded after each page's own styles)
   White background · pink→orange gradient · pill buttons · bold sans
   ===================================================================== */
:root{
  --tg:linear-gradient(45deg,#fd267a,#ff6036);
  --gold:#fd267a; --gold2:#fd267a; --rose:#fd267a;
  --dark:#ffffff; --dark2:#f6f7f9; --card:#ffffff;
  --line:#e7e9ed; --text:#21262e; --muted:#7c8591; --green:#1ec18f; --blue:#1786f8;
  --r:14px;
}
html,body{background:#fff}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--text)}
.serif{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;font-weight:800;letter-spacing:-.02em}
.gold{background:var(--tg) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;-webkit-text-fill-color:transparent}

/* buttons: pills */
.btn{border-radius:999px !important}
.btn-gold{background:var(--tg) !important;color:#fff !important;box-shadow:0 6px 18px rgba(253,38,122,.28) !important}
.btn-gold:hover{filter:brightness(1.05)}
.btn-ghost,.btn-out{background:#fff !important;color:var(--text) !important;border:1.5px solid var(--line) !important}
.btn-ghost:hover,.btn-out:hover{border-color:#fd267a !important;color:#fd267a !important}
.btn-danger,.btn-red{background:#fff0f3 !important;color:#e0245e !important;border:1px solid #ffc9d6 !important}
.btn-green{background:#eafaf3 !important;color:#12a46b !important;border:1px solid #bdeed8 !important}
input,select,textarea,.plain{background:#fff !important;border-color:var(--line) !important;color:var(--text) !important}
input:focus,select:focus,textarea:focus,.plain:focus{border-color:#fd267a !important;box-shadow:0 0 0 3px rgba(253,38,122,.12) !important}

/* top bar & tabs */
.top{background:rgba(255,255,255,.96) !important;border-bottom:1px solid var(--line) !important}
.tab{color:var(--muted)}
.tab.active{background:#fff0f4 !important;color:#fd267a !important}
.badge{background:var(--tg) !important;color:#fff !important}
.icon-btn{background:#fff !important;border:1px solid var(--line) !important;color:var(--muted) !important}
.icon-btn:hover{color:#fd267a !important;border-color:#fd267a !important}
.bnav{background:#fff !important;border-top:1px solid var(--line) !important}
.bnav .tab.active{background:none !important;color:#fd267a !important}

/* surfaces */
.card,.panel,.post,.chat,.stat,.chart,.item{box-shadow:0 2px 14px rgba(20,24,40,.06)}
.card{border:none !important;border-radius:16px !important}
.mbox{border:none !important;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal{background:rgba(20,22,30,.55) !important}
.toast{background:#21262e !important;color:#fff !important;border:none !important;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.empty{background:#fafbfc !important}
.vbadge{background:var(--tg) !important;color:#fff !important}
.fbadge{background:#fff0f4 !important;color:#fd267a !important;border-color:#ffc2d6 !important}
.dot{background:#1ec18f !important}

/* stories */
.sring,.vring{background:conic-gradient(#fd267a,#ff6036,#ffb03a,#fd267a) !important}
.sring.seen,.vring.seen{background:#d5d9de !important}
.sring .av{border-color:#fff !important}
.sring .plus{background:var(--tg) !important;color:#fff !important;border-color:#fff !important}

/* chat bubbles like Tinder */
.msgs{background:#fff !important}
.bub.mine{background:#1786f8 !important;color:#fff !important}
.bub.them{background:#eef0f3 !important;color:#21262e !important}
.safety-note{background:#f3fbf7 !important}
.citem.active{background:#fff0f4 !important;border-left-color:#fd267a !important}

/* "It's a Match!" */
#matchModal{background:rgba(10,10,14,.88) !important}
.match-box{background:transparent !important;box-shadow:none !important;color:#fff}
.match-box h2{font-size:3rem !important;font-style:italic;font-weight:900;letter-spacing:-.03em;line-height:1.05}
.match-box h2 .gold{background:linear-gradient(45deg,#1ee3a0,#7ef0c8) !important;-webkit-background-clip:text !important;background-clip:text !important}
.match-box p{color:rgba(255,255,255,.8) !important}
.match-box p b{color:#fff !important}
.match-box .match-avs .av{border-color:#fff !important}
.match-box .btn-ghost{background:transparent !important;color:#fff !important;border-color:rgba(255,255,255,.6) !important}
.match-box .x{color:#fff}

/* profile modal: full-bleed photo */
#viewBox{padding-top:0 !important}
#viewBox .vp-photo{border-radius:0 0 18px 18px;margin:0 -28px 18px;width:calc(100% + 56px);aspect-ratio:4/4.6}
#viewBox .x{z-index:3;background:rgba(0,0,0,.45);color:#fff;width:36px;height:36px;border-radius:50%;font-size:1.4rem;top:12px;right:12px;line-height:1}

/* ===== auth page (index) ===== */
.side{background:linear-gradient(150deg,#fd267a 0%,#ff4f5a 55%,#ff7a36 100%) !important;color:#fff}
.side::before{background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px) !important}
.side .logo,.side h1,.side b{color:#fff !important}
.side .gold{background:none !important;color:#fff !important;-webkit-text-fill-color:#fff}
.side h1{font-size:clamp(2.4rem,4vw,3.6rem) !important;font-weight:900;letter-spacing:-.03em}
.side p.lead,.side small,.side-foot{color:rgba(255,255,255,.9) !important}
.feat li{background:rgba(255,255,255,.16) !important;border:1px solid rgba(255,255,255,.28) !important;backdrop-filter:blur(6px)}
.feat .ic{background:rgba(255,255,255,.22) !important}
.side .logo svg path:first-child{fill:#fff}
.side .logo svg path:last-child{fill:#fd267a}
.main{background:#fff !important}
.tabs#authTabs{background:#f3f4f6 !important;border:none !important;border-radius:999px !important}
#authTabs button{border-radius:999px !important}
#authTabs button.active{background:#fff !important;color:#fd267a !important;box-shadow:0 2px 10px rgba(0,0,0,.08) !important}
.inp input{background:#fff !important}
.roles label{background:#fff !important;border-color:var(--line) !important}
.roles label:has(input:checked){border-color:#fd267a !important;background:#fff0f4 !important;color:#fd267a !important}
.err{background:#fff0f3 !important;border-color:#ffc9d6 !important;color:#d0204f !important}
.ok{background:#eafaf3 !important;border-color:#bdeed8 !important;color:#0f8a5a !important}
.divider::before,.divider::after{background:var(--line) !important}
.wstats div{background:#fff !important;border-color:var(--line) !important}
.wstats b{color:#fd267a !important}
@media(max-width:900px){
  .main{background:linear-gradient(180deg,#fff0f4 0,#fff 260px) !important}
}
#viewBox .btn{white-space:nowrap}
#viewBox .heart,#viewBox .btn-ghost{min-width:48px;height:48px;padding:0 14px !important;flex:0 0 auto !important}
#viewBox .btn-gold{height:48px}
body > .box h1{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;font-weight:800;letter-spacing:-.02em}