/* ── Datezy Premium CSS v2 — Cosmic Dating App ─────────────────────────── */
:root {
  --pink:         #FF1F8F;
  --pink-deep:    #C0006A;
  --pink-soft:    rgba(255,31,143,0.18);
  --gold:         #F5C842;
  --gold-soft:    rgba(245,200,66,0.15);
  --purple:       #7B2FBE;
  --purple-soft:  rgba(123,47,190,0.2);
  --blue-star:    #00D4FF;
  --dark:         #05051A;
  --dark-card:    rgba(13,13,36,0.85);
  --dark-panel:   rgba(255,255,255,0.04);
  --dark-border:  rgba(255,255,255,0.08);
  --dark-border2: rgba(255,255,255,0.14);
  --text:         #F2F2FF;
  --text-dim:     rgba(242,242,255,0.5);
  --text-muted:   rgba(242,242,255,0.28);
  --grad-primary: linear-gradient(135deg,#FF1F8F 0%,#7B2FBE 100%);
  --grad-cosmic:  linear-gradient(135deg,#FF1F8F 0%,#F5C842 55%,#00D4FF 100%);
  --grad-card:    linear-gradient(170deg,rgba(255,31,143,0.07) 0%,rgba(123,47,190,0.07) 100%);
  --glass-bg:     rgba(10,10,30,0.78);
  --glass-border: rgba(255,255,255,0.09);
  --glass-blur:   22px;
  --radius:       18px;
  --radius-sm:    12px;
  --radius-lg:    28px;
  --shadow-glow:  0 0 40px rgba(255,31,143,0.28),0 0 90px rgba(123,47,190,0.14);
  --shadow-card:  0 24px 64px rgba(0,0,0,0.55),0 4px 18px rgba(0,0,0,0.3);
  --shadow-btn:   0 4px 22px rgba(255,31,143,0.42);
  --nav-h:        70px;
  --safe-bottom:  env(safe-area-inset-bottom,0px);
  --safe-top:     env(safe-area-inset-top,0px);
  --trans-fast:   0.16s cubic-bezier(0.4,0,0.2,1);
  --trans-spring: 0.46s cubic-bezier(0.34,1.56,0.64,1);
  --trans-smooth: 0.3s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
body{
  background:var(--dark);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Inter','SF Pro Text','Segoe UI',sans-serif;
  font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
}

/* cosmic nebula backdrop */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 90% 55% at 15% 15%,rgba(123,47,190,0.18) 0%,transparent 60%),
    radial-gradient(ellipse 70% 45% at 85% 85%,rgba(255,31,143,0.12) 0%,transparent 50%),
    radial-gradient(ellipse 55% 65% at 65% 25%,rgba(0,212,255,0.07) 0%,transparent 45%),
    linear-gradient(180deg,#080820 0%,#05051A 100%);
}
#app{position:relative;z-index:1;height:100%}

/* ── Utility ── */
.hidden{display:none!important}
.text-center{text-align:center}
.text-dim{color:var(--text-dim)}
.text-muted{color:var(--text-muted)}
.mt-1{margin-top:.75rem}.mt-2{margin-top:1.25rem}.mt-3{margin-top:2rem}
.mb-1{margin-bottom:.75rem}.mb-2{margin-bottom:1.25rem}
.row{display:flex;gap:.75rem}
.spacer{flex:1;min-height:.5rem}
.divider{height:1px;background:var(--dark-border);margin:1rem 0}

/* ── Toast ── */
.toast-container{
  position:fixed;top:calc(var(--safe-top) + 1rem);left:50%;transform:translateX(-50%);
  z-index:9999;display:flex;flex-direction:column;align-items:center;gap:.5rem;
  pointer-events:none;width:90%;max-width:400px;
}
.toast{
  padding:.7rem 1.2rem;border-radius:50px;font-size:.85rem;font-weight:600;
  color:#fff;text-align:center;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  animation:toastIn .3s var(--trans-spring),toastOut .3s ease 2.7s forwards;
  box-shadow:0 4px 20px rgba(0,0,0,0.45);pointer-events:none;
}
.toast.info{background:rgba(25,25,70,0.96);border:1px solid var(--glass-border)}
.toast.success{background:rgba(0,190,90,0.88)}
.toast.error{background:rgba(210,40,70,0.92)}
.toast.warn{background:rgba(190,130,0,0.9)}
@keyframes toastIn{from{opacity:0;transform:translateY(-18px) scale(.88)}to{opacity:1;transform:none}}
@keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateY(-8px)}}

/* ── Screens ── */
.screen{
  position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden;
  pointer-events:none;
}
.screen.active{display:flex;pointer-events:all;animation:screenIn .15s ease}
.screen.slide-out{display:none}
@keyframes screenIn{from{opacity:0}to{opacity:1}}

/* ── Auth ── */
.auth-bg{
  justify-content:center;align-items:center;
  padding:1.5rem 1.25rem;
  padding-top:calc(var(--safe-top) + 2rem);
  padding-bottom:calc(var(--safe-bottom) + 1.5rem);
  overflow-y:auto;gap:1.5rem;
}
.auth-logo{text-align:center;padding:.5rem 0}
.auth-logo h1{
  font-size:3.2rem;font-weight:900;letter-spacing:-.05em;line-height:1;
  background:var(--grad-primary);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.auth-logo p{color:var(--text-dim);font-size:1rem;margin-top:.4rem;letter-spacing:.01em}

/* ── Glass card ── */
.card{
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);padding:1.5rem;width:100%;max-width:420px;
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  box-shadow:var(--shadow-card);
}

/* ── Form ── */
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.field:last-child{margin-bottom:0}
.field label{font-size:.72rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}
.field-hint{font-size:.7rem;color:var(--text-muted);line-height:1.4}
input,textarea,select{
  width:100%;background:rgba(255,255,255,0.06);border:1.5px solid var(--dark-border);
  border-radius:var(--radius-sm);color:var(--text);font-size:1rem;font-family:inherit;
  padding:.78rem 1rem;outline:none;-webkit-appearance:none;appearance:none;
  transition:border-color var(--trans-fast),background var(--trans-fast),box-shadow var(--trans-fast);
}
input:focus,textarea:focus,select:focus{
  border-color:var(--pink);background:rgba(255,31,143,0.07);
  box-shadow:0 0 0 3.5px rgba(255,31,143,0.16);
}
input::placeholder,textarea::placeholder{color:var(--text-muted)}
textarea{resize:none}
select option{background:#1a1a3a}

/* ── Buttons ── */
.btn{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  width:100%;padding:.88rem 1.5rem;border-radius:50px;
  font-size:1rem;font-weight:700;font-family:inherit;letter-spacing:-.01em;
  border:none;cursor:pointer;outline:none;
  transition:transform var(--trans-fast),box-shadow var(--trans-fast),opacity var(--trans-fast),background var(--trans-fast);
  position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;
}
.btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background .15s;border-radius:inherit}
.btn:active::after{background:rgba(255,255,255,.12)}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.48;pointer-events:none}

.btn-primary{background:var(--grad-primary);color:#fff;box-shadow:var(--shadow-btn)}
.btn-primary:hover{box-shadow:0 6px 30px rgba(255,31,143,.58);transform:translateY(-1px)}

.btn-gold{
  background:linear-gradient(135deg,#F5C842 0%,#FF9A3C 100%);color:#1a1000;
  box-shadow:0 4px 20px rgba(245,200,66,.42);
}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(245,200,66,.52)}

.btn-secondary{background:rgba(255,255,255,.08);color:var(--text);border:1.5px solid var(--dark-border2)}
.btn-secondary:hover{background:rgba(255,255,255,.12)}
.btn-ghost{background:transparent;color:var(--text-dim);font-weight:500;font-size:.9rem}
.btn-ghost:hover{color:var(--text)}
.btn-danger{background:rgba(220,50,70,.14);color:#FF5A6E;border:1.5px solid rgba(220,50,70,.3)}
.btn-sm{width:auto;padding:.42rem .9rem;font-size:.82rem}

/* ── Spinner ── */
.spinner{
  width:26px;height:26px;border:2.5px solid rgba(255,255,255,.1);
  border-top-color:var(--pink);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-center{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:3rem 1rem;color:var(--text-dim);font-size:.9rem}

/* ── Skeleton ── */
.skel{
  background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.04) 75%);
  background-size:200% 100%;animation:skelWave 1.4s ease infinite;border-radius:var(--radius-sm);
}
@keyframes skelWave{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── OTP ── */
.otp-row{display:flex;gap:.45rem;justify-content:center;margin:1rem 0}
.otp-row input{
  width:44px;height:54px;text-align:center;font-size:1.4rem;font-weight:700;
  padding:0;border-radius:var(--radius-sm);border:2px solid var(--dark-border);
  background:rgba(255,255,255,.05);caret-color:var(--pink);
  transition:all var(--trans-fast);
}
.otp-row input:focus{border-color:var(--pink);background:rgba(255,31,143,.09);box-shadow:0 0 0 3px rgba(255,31,143,.18);transform:scale(1.09)}
.otp-row input.filled{border-color:var(--purple);color:var(--pink)}

/* ── Chips ── */
.chip-grid{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.45rem .88rem;border-radius:50px;font-size:.83rem;font-weight:500;
  border:1.5px solid var(--dark-border2);background:rgba(255,255,255,.04);color:var(--text-dim);
  cursor:pointer;transition:all var(--trans-fast);user-select:none;-webkit-user-select:none;
}
.chip:hover{border-color:var(--pink);color:var(--text);background:var(--pink-soft)}
.chip.selected{border-color:var(--pink);background:var(--pink-soft);color:var(--pink);font-weight:600}
.chip.selected-gold{border-color:var(--gold);background:var(--gold-soft);color:var(--gold);font-weight:600}

/* ── Wizard ── */
#screen-onboarding{background:none}
.wizard-header{
  display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;
  padding-top:calc(var(--safe-top) + 1rem);flex-shrink:0;
}
.wizard-back{
  width:36px;height:36px;background:rgba(255,255,255,.07);border:1px solid var(--glass-border);
  border-radius:50%;color:var(--text);font-size:1.3rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all var(--trans-fast);flex-shrink:0;padding:0;
}
.wizard-back:hover{background:rgba(255,255,255,.12)}
.wizard-progress{flex:1;height:4px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden}
.wizard-progress-fill{height:100%;background:var(--grad-primary);border-radius:2px;transition:width .48s var(--trans-spring)}
.wizard-step-label{font-size:.78rem;font-weight:600;color:var(--text-dim);flex-shrink:0}
.wizard-body{
  flex:1;overflow-y:auto;padding:1rem 1.25rem 1.5rem;
  display:flex;flex-direction:column;-webkit-overflow-scrolling:touch;
}
.wizard-step{display:flex;flex-direction:column;flex:1;animation:stepIn .3s var(--trans-spring)}
@keyframes stepIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.wizard-title{font-size:1.6rem;font-weight:800;letter-spacing:-.035em;margin-bottom:.5rem;line-height:1.2}
.wizard-subtitle{font-size:.88rem;color:var(--text-dim);line-height:1.55;margin-bottom:1.25rem}

/* ── Zodiac reveal ── */
.zodiac-reveal{
  text-align:center;padding:1.5rem;
  background:var(--grad-card);border:1px solid var(--glass-border);
  border-radius:var(--radius);margin:.75rem 0;
  animation:zodiacPop .55s var(--trans-spring);
}
@keyframes zodiacPop{from{transform:scale(.75);opacity:0}to{transform:scale(1);opacity:1}}
.zodiac-glyph{
  display:block;font-size:3.5rem;margin-bottom:.5rem;
  animation:glyphFloat 3s ease-in-out infinite;
}
@keyframes glyphFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.zodiac-sign-name{
  font-size:1.5rem;font-weight:800;
  background:var(--grad-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.zodiac-element{font-size:.85rem;color:var(--text-dim);margin-top:.25rem}

/* ── Swipe screen ── */
.swipe-screen{background:none;padding-bottom:calc(var(--nav-h) + var(--safe-bottom))}
.swipe-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.25rem;padding-top:calc(var(--safe-top) + .75rem);flex-shrink:0;
}
.swipe-header h2{
  font-size:1.5rem;font-weight:800;letter-spacing:-.035em;
  background:var(--grad-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.deck-wrap{flex:1;position:relative;overflow:hidden;margin:0 1rem}

/* ── Swipe cards ── */
.swipe-card{
  position:absolute;inset:0;border-radius:var(--radius-lg);overflow:hidden;
  cursor:grab;box-shadow:var(--shadow-card);touch-action:none;
  will-change:transform;background:#0b0b28;
  user-select:none;-webkit-user-select:none;
}
.swipe-card:active{cursor:grabbing}
.swipe-card[data-pos="1"]{z-index:10}
.swipe-card[data-pos="2"]{z-index:9;transform:scale(.95) translateY(10px);filter:brightness(.7);transition:transform .35s ease,filter .35s ease}
.swipe-card[data-pos="3"]{z-index:8;transform:scale(.90) translateY(20px);filter:brightness(.5);transition:transform .35s ease,filter .35s ease}
.swipe-card[data-pos="2"].promoting{transform:scale(1) translateY(0)!important;filter:brightness(1)!important}

/* Photo + dots */
.card-photo{width:100%;height:100%;object-fit:cover;pointer-events:none;display:block}
.card-photo-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:5rem;background:var(--grad-card)}
.card-photo-dots{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px;z-index:5}
.card-photo-dot{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3);transition:background .2s}
.card-photo-dot.active{background:rgba(255,255,255,.95)}

/* Info overlay */
.card-info-overlay{
  position:absolute;bottom:0;left:0;right:0;
  padding:3.5rem 1.25rem 1.25rem;
  background:linear-gradient(transparent,rgba(5,5,26,.72) 28%,rgba(5,5,26,.97));
  z-index:4;
}
.card-name-age{
  font-size:1.75rem;font-weight:800;letter-spacing:-.035em;line-height:1;
  margin-bottom:.3rem;display:flex;align-items:center;gap:.45rem;
}
.card-verify-badge{
  width:20px;height:20px;background:var(--blue-star);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.62rem;color:#fff;font-weight:900;flex-shrink:0;
}
.card-distance{font-size:.78rem;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:.25rem;margin-bottom:.5rem}
.card-zodiac-chip{
  display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .65rem;
  border-radius:50px;font-size:.76rem;font-weight:600;
  background:rgba(123,47,190,.55);border:1px solid rgba(123,47,190,.75);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.card-compat-bar{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}
.card-compat-track{flex:1;height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.card-compat-fill{height:100%;background:var(--grad-cosmic);border-radius:2px;transition:width .65s var(--trans-spring) .2s}
.card-compat-label{font-size:.72rem;font-weight:600;color:var(--gold);white-space:nowrap}
.card-interests{display:flex;gap:.3rem;margin-top:.55rem;flex-wrap:wrap}
.card-interest-tag{
  padding:.2rem .5rem;border-radius:50px;font-size:.7rem;
  background:rgba(255,255,255,.09);color:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.1);
}

/* Stamps */
.stamp{
  position:absolute;top:40px;padding:.5rem 1.2rem;border-radius:var(--radius-sm);
  font-size:2rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;
  border:3px solid;opacity:0;z-index:20;pointer-events:none;transition:opacity .1s;
}
.stamp-like{left:24px;color:#4CAF50;border-color:#4CAF50;transform:rotate(-15deg)}
.stamp-nope{right:24px;color:#F44336;border-color:#F44336;transform:rotate(15deg)}
.stamp-super{left:50%;transform:translateX(-50%) rotate(-5deg);top:30%;color:var(--gold);border-color:var(--gold);font-size:1.5rem}

/* ── Action buttons ── */
.swipe-actions{display:flex;justify-content:center;align-items:center;gap:1rem;padding:.7rem 1.5rem;flex-shrink:0}
.action-btn{
  display:flex;align-items:center;justify-content:center;border:none;
  border-radius:50%;cursor:pointer;transition:all var(--trans-spring);flex-shrink:0;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.action-btn:active{transform:scale(.86)!important}
.action-undo{width:48px;height:48px;font-size:1.1rem;background:rgba(255,255,255,.08);color:var(--gold);border:1.5px solid rgba(255,200,60,.3);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.action-pass{width:62px;height:62px;font-size:1.6rem;background:rgba(244,67,54,.12);color:#F44336;border:2px solid rgba(244,67,54,.4);box-shadow:0 6px 20px rgba(244,67,54,.2)}
.action-like{width:72px;height:72px;font-size:1.8rem;background:rgba(76,175,80,.12);color:#4CAF50;border:2px solid rgba(76,175,80,.4);box-shadow:0 6px 20px rgba(76,175,80,.2)}
.action-super{width:48px;height:48px;font-size:1.2rem;background:rgba(245,200,66,.12);color:var(--gold);border:1.5px solid rgba(245,200,66,.35);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.action-btn:hover{transform:scale(1.09)}
.action-like:hover{box-shadow:0 8px 30px rgba(76,175,80,.38)!important}
.action-pass:hover{box-shadow:0 8px 30px rgba(244,67,54,.38)!important}

/* Empty deck */
.deck-empty{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.75rem;text-align:center;padding:2rem;color:var(--text-dim);
}
.deck-empty .big-emoji{font-size:3.5rem}
.deck-empty h3{font-size:1.2rem;font-weight:700;color:var(--text)}
.deck-empty p{font-size:.9rem;line-height:1.5}

/* ── Bottom nav ── */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;
  height:calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom:var(--safe-bottom);
  display:flex;
  background:rgba(5,5,26,.88);border-top:1px solid var(--glass-border);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);z-index:100;
}
.bottom-nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative;
  border:none;background:none;color:var(--text-dim);transition:color var(--trans-fast);padding:0;
}
.bottom-nav-item:hover,.bottom-nav-item.active{color:var(--pink)}
.bottom-nav-icon{font-size:1.45rem;line-height:1;transition:transform var(--trans-spring)}
.bottom-nav-item.active .bottom-nav-icon{transform:scale(1.18)}
.bottom-nav-label{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.bottom-nav-badge{
  position:absolute;top:6px;right:calc(50% - 16px);min-width:16px;height:16px;padding:0 4px;
  background:var(--pink);color:#fff;font-size:.58rem;font-weight:800;border-radius:8px;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--dark);
}

/* ── Likes grid ── */
.screen-header{
  padding:1rem 1.25rem;padding-top:calc(var(--safe-top) + 1rem);
  border-bottom:1px solid var(--glass-border);flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
}
.screen-header h2{font-size:1.5rem;font-weight:800;letter-spacing:-.035em}
.likes-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;
  padding:.75rem;overflow-y:auto;flex:1;
  padding-bottom:calc(var(--nav-h) + var(--safe-bottom) + 1rem);-webkit-overflow-scrolling:touch;
}
.like-card{
  position:relative;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;
  background:var(--dark-card);cursor:pointer;transition:transform var(--trans-fast);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.like-card:active{transform:scale(.97)}
.like-card img,.like-card .card-photo{width:100%;height:100%;object-fit:cover}
.like-card .blur-cover{
  position:absolute;inset:0;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  background:rgba(5,5,26,.4);display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:.5rem;
}
.like-card-name{
  position:absolute;bottom:0;left:0;right:0;padding:2rem .75rem .75rem;
  background:linear-gradient(transparent,rgba(5,5,26,.95));font-weight:700;font-size:.93rem;
}

/* ── Matches list ── */
.matches-list{flex:1;overflow-y:auto;padding:.5rem 0;padding-bottom:calc(var(--nav-h) + var(--safe-bottom) + .5rem);-webkit-overflow-scrolling:touch}
.match-item{display:flex;align-items:center;gap:1rem;padding:.9rem 1.25rem;cursor:pointer;transition:background var(--trans-fast);position:relative}
.match-item:active{background:rgba(255,255,255,.04)}
.match-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--pink-soft)}
.match-avatar-placeholder{width:56px;height:56px;border-radius:50%;background:var(--pink-soft);border:2px solid var(--pink-soft);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0}
.match-info{flex:1;min-width:0}
.match-name{font-weight:700;font-size:.93rem}
.match-last-msg{font-size:.78rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.12rem}
.match-time{font-size:.68rem;color:var(--text-muted);flex-shrink:0;align-self:flex-start;margin-top:.1rem}
.match-unread{position:absolute;right:1.25rem;bottom:.9rem;width:8px;height:8px;border-radius:50%;background:var(--pink)}

/* ── Chat ── */
.chat-header{
  display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;
  padding-top:calc(var(--safe-top) + .75rem);border-bottom:1px solid var(--glass-border);
  background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);flex-shrink:0;z-index:10;
}
.chat-back{
  width:36px;height:36px;background:rgba(255,255,255,.07);border:1px solid var(--glass-border);
  border-radius:50%;color:var(--text);font-size:1.3rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;
}
.chat-avatar-sm{width:40px;height:40px;border-radius:50%;background:var(--pink-soft);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;overflow:hidden}
.chat-avatar-sm img{width:100%;height:100%;object-fit:cover}
.chat-header-name{font-weight:700;font-size:.93rem}
.chat-header-sign{font-size:.73rem;color:var(--text-dim)}
.chat-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem;-webkit-overflow-scrolling:touch;justify-content:flex-end}
.chat-bubble{
  max-width:72%;padding:.65rem .9rem;border-radius:18px;font-size:.88rem;line-height:1.47;
  word-wrap:break-word;animation:bubbleIn .22s var(--trans-spring);position:relative;
}
@keyframes bubbleIn{from{transform:scale(.88) translateY(5px);opacity:0}to{transform:none;opacity:1}}
.bubble-them{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.07);border-bottom-left-radius:4px;align-self:flex-start}
.bubble-me{background:var(--grad-primary);border-bottom-right-radius:4px;align-self:flex-end;color:#fff}
.bubble-time{font-size:.62rem;color:rgba(255,255,255,.42);margin-top:.2rem;display:block}
.bubble-me .bubble-time{text-align:right}
.bubble-them .bubble-time{text-align:left}
.chat-input-wrap{
  display:flex;align-items:flex-end;gap:.5rem;padding:.6rem 1rem;
  padding-bottom:calc(var(--safe-bottom) + .6rem);
  background:var(--glass-bg);border-top:1px solid var(--glass-border);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);flex-shrink:0;
}
.chat-input{
  flex:1;background:rgba(255,255,255,.07);border:1.5px solid var(--dark-border);
  border-radius:22px;padding:.6rem .9rem;font-size:.93rem;resize:none;
  max-height:120px;overflow-y:auto;transition:border-color var(--trans-fast);
}
.chat-input:focus{border-color:var(--pink)}
.chat-send{
  width:40px;height:40px;border-radius:50%;background:var(--grad-primary);border:none;color:#fff;
  font-size:.95rem;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  transition:all var(--trans-fast);box-shadow:0 2px 12px rgba(255,31,143,.38);
}
.chat-send:hover{transform:scale(1.1)}
.chat-send:active{transform:scale(.94)}

/* ── Profile ── */
.profile-scroll{flex:1;overflow-y:auto;padding-bottom:calc(var(--nav-h) + var(--safe-bottom) + 1rem);-webkit-overflow-scrolling:touch}
.profile-hero{width:100%;aspect-ratio:3/4;max-height:55vh;overflow:hidden;position:relative;background:var(--dark-card)}
.profile-hero img{width:100%;height:100%;object-fit:cover}
.profile-hero-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:5rem;background:var(--grad-card)}
.profile-edit-fab{
  position:absolute;bottom:1rem;right:1rem;width:44px;height:44px;border-radius:50%;
  background:var(--glass-bg);border:1.5px solid var(--glass-border);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.profile-body{padding:1.25rem}
.profile-name-age{font-size:1.8rem;font-weight:800;letter-spacing:-.035em;display:flex;align-items:center;gap:.4rem}
.profile-section{margin-bottom:1.5rem}
.profile-section-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:.5rem}
.profile-bio{font-size:.93rem;color:var(--text-dim);line-height:1.6}

/* Photo grid */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:.5rem 0}
.photo-slot{
  aspect-ratio:3/4;border-radius:var(--radius-sm);background:rgba(255,255,255,.04);
  border:1.5px dashed var(--dark-border2);display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;cursor:pointer;transition:all var(--trans-fast);
}
.photo-slot:hover{border-color:var(--pink);background:var(--pink-soft)}
.photo-slot img{width:100%;height:100%;object-fit:cover}
.photo-slot-add{font-size:1.6rem;color:var(--text-muted)}
.photo-slot-del{
  position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;font-size:.7rem;cursor:pointer;color:#fff;
}

/* ── Settings ── */
.settings-list{flex:1;overflow-y:auto;padding:.5rem 0;padding-bottom:calc(var(--nav-h) + var(--safe-bottom) + 1rem);-webkit-overflow-scrolling:touch}
.settings-section-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim);padding:1rem 1.25rem .4rem}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.25rem;cursor:pointer;transition:background var(--trans-fast);gap:1rem}
.settings-row:active{background:rgba(255,255,255,.04)}
.settings-row-label{font-size:.93rem;font-weight:500}
.settings-row-sub{font-size:.78rem;color:var(--text-dim);margin-top:.1rem}
.settings-row-value{color:var(--text-dim);font-size:.83rem;flex-shrink:0}
.settings-row-icon{font-size:1.1rem;flex-shrink:0}
.settings-divider{height:1px;background:var(--dark-border);margin:.25rem 0}
.toggle{width:48px;height:28px;background:rgba(255,255,255,.12);border-radius:14px;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
.toggle.on{background:var(--pink)}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s var(--trans-spring);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.toggle.on::after{transform:translateX(20px)}

/* ── Premium ── */
.premium-screen{overflow-y:auto;padding:0;-webkit-overflow-scrolling:touch}
.premium-hero{padding:3rem 1.5rem 2rem;padding-top:calc(var(--safe-top) + 3rem);text-align:center;background:linear-gradient(180deg,rgba(123,47,190,.15) 0%,transparent 100%)}
.premium-crown{font-size:4rem;display:block;animation:crownFloat 3s ease-in-out infinite}
@keyframes crownFloat{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-10px) rotate(5deg)}}
.premium-title{
  font-size:2.2rem;font-weight:900;letter-spacing:-.045em;margin-top:.75rem;
  background:var(--grad-cosmic);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.premium-subtitle{color:var(--text-dim);margin-top:.5rem;font-size:.93rem}
.premium-features{padding:0 1.25rem;display:flex;flex-direction:column;gap:.5rem;margin:1rem 0}
.premium-feature{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:rgba(255,255,255,.04);border-radius:var(--radius-sm);border:1px solid var(--glass-border)}
.premium-feature-icon{font-size:1.3rem;flex-shrink:0}
.premium-feature-text{font-size:.88rem;font-weight:500}
.premium-plans{display:flex;gap:.75rem;padding:0 1.25rem;margin:1rem 0}
.premium-plan{flex:1;padding:1.25rem 1rem;border-radius:var(--radius);border:2px solid var(--dark-border2);background:rgba(255,255,255,.03);text-align:center;cursor:pointer;transition:all var(--trans-fast);position:relative}
.premium-plan.selected{border-color:var(--gold);background:var(--gold-soft)}
.premium-plan-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--gold);color:#1a1000;font-size:.63rem;font-weight:800;padding:.2rem .5rem;border-radius:50px;white-space:nowrap}
.premium-plan-period{font-size:.78rem;color:var(--text-dim);font-weight:600}
.premium-plan-price{font-size:1.8rem;font-weight:900;letter-spacing:-.045em;margin:.25rem 0}
.premium-plan-per{font-size:.73rem;color:var(--text-dim)}
.premium-footer{padding:0 1.25rem 2rem}

/* ── Match overlay ── */
.match-screen{
  position:fixed;inset:0;z-index:1000;background:rgba(5,5,26,.96);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:2rem;opacity:0;pointer-events:none;transition:opacity .4s;
}
.match-screen.active{opacity:1;pointer-events:all}
.match-title{
  font-size:2.8rem;font-weight:900;letter-spacing:-.045em;
  background:var(--grad-cosmic);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:matchTitlePop .65s var(--trans-spring) .15s both;
}
@keyframes matchTitlePop{from{transform:scale(.45);opacity:0}to{transform:scale(1);opacity:1}}
.match-cosmic{font-size:.9rem;color:var(--gold);margin:.5rem 0 1.5rem;animation:fadeUp .5s ease .4s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.match-photos{display:flex;gap:.5rem;margin-bottom:1.5rem;animation:fadeUp .5s ease .5s both}
.match-photo-placeholder{
  width:90px;height:90px;border-radius:50%;border:3px solid var(--pink);
  display:flex;align-items:center;justify-content:center;font-size:2.5rem;
  background:var(--dark-card);box-shadow:var(--shadow-glow);
}
.match-actions{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:320px;animation:fadeUp .5s ease .7s both}

/* Confetti */
.confetti-particle{position:fixed;width:8px;height:8px;border-radius:2px;pointer-events:none;z-index:1001;animation:confettiFall linear forwards}
@keyframes confettiFall{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}

/* ── Forgot modal ── */
#forgot-modal{
  position:fixed;inset:0;z-index:500;background:rgba(5,5,26,.85);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:flex-end;padding:1rem;padding-bottom:calc(var(--safe-bottom) + 1rem);
}
#forgot-modal .card{max-width:100%}

/* ── Interest groups ── */
.interest-group{margin-bottom:1rem}
.interest-group-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:.4rem}

/* ── Legacy class aliases — keep HTML backward compat ── */
.nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative;border:none;background:none;color:var(--text-dim);transition:color var(--trans-fast);padding:0}
.nav-btn:hover,.nav-btn.active{color:var(--pink)}
.nav-btn .icon{font-size:1.45rem;line-height:1;transition:transform var(--trans-spring)}
.nav-btn.active .icon{transform:scale(1.18)}
.nav-btn span:last-child{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.nav-badge{min-width:16px;height:16px;padding:0 4px;background:var(--pink);color:#fff;font-size:.58rem;font-weight:800;border-radius:8px;display:flex;align-items:center;justify-content:center;border:2px solid var(--dark);position:absolute;top:6px;right:calc(50% - 16px)}

.settings-item{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.25rem;cursor:pointer;transition:background var(--trans-fast);gap:1rem}
.settings-item:active{background:rgba(255,255,255,.04)}
.settings-item .left{display:flex;align-items:center;gap:.75rem}
.settings-item .icon{font-size:1.1rem;flex-shrink:0}
.settings-item .label{font-size:.93rem;font-weight:500}
.settings-item .arrow{color:var(--text-muted);font-size:1.2rem}

/* ── Scrollbar hidden ── */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{display:none}

/* ── Edit Profile Screen ── */
.ep-photos-wrap{display:flex;align-items:center;gap:.7rem;padding:1rem 1rem .5rem;overflow-x:auto}
.ep-photo-strip{display:flex;gap:.7rem;flex-shrink:0}
.ep-photo-thumb{width:90px;height:110px;border-radius:14px;background-size:cover;background-position:center;position:relative;flex-shrink:0;border:2px solid rgba(255,255,255,.12)}
.ep-photo-del{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.65);border:none;color:#fff;font-size:.65rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ep-add-photo{width:80px;height:110px;border-radius:14px;border:2px dashed rgba(255,255,255,.25);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:var(--text-dim);transition:border-color var(--trans-fast)}
.ep-add-photo:hover{border-color:var(--pink);color:var(--pink)}
.ep-field{display:flex;flex-direction:column;gap:.45rem}
.ep-label{font-size:.78rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}
.btn-link-pink{background:none;border:none;color:var(--pink);font-weight:700;font-size:.95rem;cursor:pointer;padding:.3rem .5rem;border-radius:8px;transition:opacity var(--trans-fast)}
.btn-link-pink:disabled{opacity:.5}
.toggle-wrap{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.toggle-input{position:absolute;opacity:0;width:0;height:0}
.toggle-track{width:46px;height:26px;background:rgba(255,255,255,.18);border-radius:13px;transition:background var(--trans-fast);position:relative}
.toggle-track::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform var(--trans-fast)}
.toggle-input:checked + .toggle-track{background:var(--pink)}
.toggle-input:checked + .toggle-track::after{transform:translateX(20px)}


/* ── Discovery Preferences ── */
.pref-chips{display:flex;gap:.5rem;flex-wrap:wrap}
.pref-chip{padding:.45rem 1rem;border-radius:20px;border:1.5px solid rgba(255,255,255,.18);background:transparent;color:var(--text-muted);font-size:.85rem;font-weight:600;cursor:pointer;transition:all var(--trans-fast)}
.pref-chip.active{border-color:var(--pink);background:rgba(255,31,143,.15);color:var(--pink)}
.pref-slider{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:3px;background:rgba(255,255,255,.15);outline:none;cursor:pointer}
.pref-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--grad-primary);cursor:pointer;box-shadow:0 2px 8px rgba(255,31,143,.4)}
.pref-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--grad-primary);cursor:pointer;border:none}

/* ── Notifications / Settings section title ── */
.settings-section-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);padding:.6rem 1.25rem .2rem}


/* ═══════════════ PREMIUM UI UPGRADE ════════════════════════════════════════ */

/* Better photo framing — show upper-face on portrait headshots */
.card-photo{object-position:center 60%}

/* Taller, more dramatic bottom gradient */
.card-info-overlay{
  padding:6rem 1.4rem 1.6rem;
  background:linear-gradient(
    transparent 0%,
    rgba(5,5,26,.35) 30%,
    rgba(5,5,26,.82) 55%,
    rgba(5,5,26,.98) 78%,
    #05051a 100%
  );
}

/* Larger name, readable at a glance */
.card-name-age{
  font-size:2rem;font-weight:900;letter-spacing:-.04em;
  text-shadow:0 2px 12px rgba(0,0,0,.6);margin-bottom:.35rem;
}

/* Inline height pill next to zodiac */
.card-meta-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.35rem 0}
.card-height-chip{
  display:inline-flex;align-items:center;gap:.2rem;padding:.22rem .55rem;
  border-radius:50px;font-size:.73rem;font-weight:600;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.8);
}

/* Bio snippet — 2-line clamp */
.card-bio-snippet{
  font-size:.84rem;color:rgba(255,255,255,.72);line-height:1.45;
  margin:.4rem 0 .3rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
}

/* Compat bar — thicker + glow */
.card-compat-track{height:5px}
.card-compat-fill{box-shadow:0 0 10px rgba(186,104,200,.65),0 0 22px rgba(255,200,60,.25)}
.card-compat-label{font-size:.75rem;font-weight:700;letter-spacing:.01em}

/* Better card stack depth */
.swipe-card{border-radius:20px;box-shadow:0 8px 40px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4)}
.swipe-card[data-pos="2"]{
  transform:scale(.94) translateY(16px)!important;
  filter:brightness(.6) saturate(.8)!important;
  box-shadow:0 4px 20px rgba(0,0,0,.4)!important;
}
.swipe-card[data-pos="3"]{
  transform:scale(.88) translateY(32px)!important;
  filter:brightness(.32) saturate(.5)!important;
  box-shadow:0 2px 12px rgba(0,0,0,.3)!important;
}

/* Stamp styles — bolder, classic dating-app look */
.stamp{
  border-width:4px;border-radius:10px;
  font-size:2.4rem;font-weight:900;letter-spacing:.12em;
  padding:.55rem 1.4rem;
  box-shadow:0 4px 18px rgba(0,0,0,.3);
  text-shadow:0 2px 4px rgba(0,0,0,.2);
}
.stamp-like{
  left:20px;top:50px;
  color:#22c55e;border-color:#22c55e;
  text-shadow:0 0 20px rgba(34,197,94,.5);
  transform:rotate(-22deg);
}
.stamp-nope{
  right:20px;top:50px;
  color:#ef4444;border-color:#ef4444;
  text-shadow:0 0 20px rgba(239,68,68,.5);
  transform:rotate(22deg);
}
.stamp-super{
  top:28%;color:#f59e0b;border-color:#f59e0b;
  text-shadow:0 0 20px rgba(245,158,11,.6);
}

/* Action buttons — glow on main actions */
.action-like{
  width:76px!important;height:76px!important;font-size:2rem!important;
  background:rgba(34,197,94,.14)!important;
  border:2px solid rgba(34,197,94,.5)!important;
  box-shadow:0 0 0 0 rgba(34,197,94,.3),0 6px 24px rgba(34,197,94,.22)!important;
  transition:all .2s var(--trans-spring)!important;
}
.action-like:hover{
  box-shadow:0 0 0 8px rgba(34,197,94,.12),0 8px 32px rgba(34,197,94,.4)!important;
  transform:scale(1.1)!important;
}
.action-pass{
  width:66px!important;height:66px!important;font-size:1.7rem!important;
  background:rgba(239,68,68,.14)!important;
  border:2px solid rgba(239,68,68,.5)!important;
  box-shadow:0 0 0 0 rgba(239,68,68,.3),0 6px 24px rgba(239,68,68,.22)!important;
}
.action-pass:hover{
  box-shadow:0 0 0 8px rgba(239,68,68,.12),0 8px 32px rgba(239,68,68,.4)!important;
  transform:scale(1.1)!important;
}

/* Deck empty state */
.deck-empty{
  background:radial-gradient(ellipse at center,rgba(123,47,190,.08) 0%,transparent 70%);
}
.deck-empty .big-emoji{font-size:5rem;animation:float 3s ease-in-out infinite}

/* Photo dots — wider hit area */
.card-photo-dots{top:14px}
.card-photo-dot{height:4px;border-radius:3px}

/* Top-of-card frosted gradient (protect dots visibility) */
.swipe-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:80px;
  background:linear-gradient(rgba(5,5,26,.45),transparent);
  z-index:3;pointer-events:none;border-radius:20px 20px 0 0;
}

/* Match popup improvement */
.match-title{
  font-size:2.8rem!important;font-weight:900!important;
  background:linear-gradient(135deg,#ff1f8f 0%,#a855f7 50%,#f59e0b 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}

/* Like-you cards — better grid */
.likes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;padding:.75rem}
.like-card{border-radius:14px;overflow:hidden;position:relative;aspect-ratio:.78;background:var(--card)}
.like-card-overlay{
  position:absolute;bottom:0;left:0;right:0;
  padding:2rem .75rem .75rem;
  background:linear-gradient(transparent,rgba(5,5,26,.95));
}
.like-card-name{font-size:.92rem;font-weight:700}
.like-card-sign{font-size:.72rem;color:var(--text-dim);margin-top:.1rem}
.like-card-blur .like-card-img,.like-card-blur img{filter:blur(18px) brightness(.7)!important}
.like-card-blur .like-card-overlay{backdrop-filter:none}

/* Premium badge on profile photo */
.card-photo-dots{gap:5px}

/* Swipe actions spacing */
.swipe-actions{gap:1.1rem;padding:.85rem 1.5rem}


/* ═══════════════ CHAT FIX ════════════════════════════════════════════════ */

/* Hide nav when in chat (full-screen chat UX) */
.bottom-nav.nav-hidden{display:none!important}

/* Chat screen is already full-height via .screen position:absolute;inset:0 */

/* Match popup avatars */
.match-photos{display:flex;justify-content:center;align-items:center;gap:-20px;margin:1.5rem 0}
.match-photo-placeholder{
  width:100px;height:100px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:2.5rem;
  border:3px solid rgba(255,255,255,.15);overflow:hidden;
  background:var(--dark-card);flex-shrink:0;
}
.match-photo-placeholder.you{border-color:var(--pink);margin-right:-16px;z-index:2}
#match-partner-photo{
  width:110px;height:110px;border-radius:50%;overflow:hidden;
  border:3px solid rgba(186,104,200,.6);flex-shrink:0;
  background:var(--dark-card);display:flex;align-items:center;justify-content:center;font-size:2.5rem;
}


/* ══ Chat layout extras ══════════════════════════════════════════════════════ */

/* When messages overflow, allow scroll to work (override flex-end) */
.chat-messages > * { flex-shrink: 0; }

/* screen-chat layout handled by .screen + .screen.active rules */

/* Match list item photo size */
.match-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255,31,143,.35);
}

/* PWA max-width shell for desktop */
#app-shell, .app-shell {
  max-width: 430px;
  margin: 0 auto;
  position: relative;
  height: 100dvh;
  overflow: hidden;
}

/* Max-width shell for desktop preview */
#app {
  max-width: 430px;
  margin: 0 auto;
  position: relative;
  height: 100dvh;
}
body { background: #08081a; }


/* ══ PREMIUM-V3-INJECTED ══ */

/* ══════════════════════════════════════════════════════════════════════════
   DATEZY — PREMIUM UI UPGRADE v3
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Animated star field on auth screens ── */
.auth-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 72%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(2px 2px at 44% 35%, rgba(245,200,66,.9) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 12%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 67% 55%, rgba(0,212,255,.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 81% 22%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 92% 68%, rgba(255,31,143,.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 7% 88%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 92%, rgba(245,200,66,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 74% 85%, rgba(0,212,255,.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 51% 62%, rgba(123,47,190,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 19% 45%, rgba(255,255,255,.35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 87% 40%, rgba(255,31,143,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 63% 78%, rgba(255,255,255,.5) 0%, transparent 100%);
  animation: starTwinkle 5s ease-in-out infinite alternate;
}
@keyframes starTwinkle {
  0%   { opacity: .65; }
  33%  { opacity: .95; }
  66%  { opacity: .5; }
  100% { opacity: .8; }
}
.auth-bg > * { position: relative; z-index: 1; }

/* ── Swipe card glow — top card gets a soft pink rim ── */
.swipe-card[data-pos="1"] {
  box-shadow: var(--shadow-card), 0 0 0 1.5px rgba(255,31,143,.22), 0 0 60px rgba(255,31,143,.1);
}

/* ── Swipe card drag — scale down slightly to feel physical ── */
.swipe-card:active {
  cursor: grabbing !important;
}

/* ── Better stamp visibility ── */
.stamp {
  font-size: 1.6rem;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
  border-width: 3.5px;
}
.stamp-like  { left: 20px; }
.stamp-nope  { right: 20px; }

/* ── Action button hover glow pulse ── */
.action-like:hover  { animation: likeGlow .6s ease infinite alternate; }
.action-pass:hover  { animation: passGlow .6s ease infinite alternate; }
@keyframes likeGlow { from { box-shadow: 0 6px 20px rgba(76,175,80,.3); } to { box-shadow: 0 8px 36px rgba(76,175,80,.6); } }
@keyframes passGlow { from { box-shadow: 0 6px 20px rgba(244,67,54,.3); } to { box-shadow: 0 8px 36px rgba(244,67,54,.6); } }

/* ── Bottom nav active indicator dot ── */
.bottom-nav-item.active::before,
.nav-btn.active::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 6px var(--pink);
  animation: navDotFade .3s ease;
}
@keyframes navDotFade { from { opacity: 0; transform: translateX(-50%) scale(.3); } to { opacity: 1; transform: translateX(-50%) scale(1); } }

/* ── Match screen — hearts burst ── */
.match-screen::before {
  content: '💕';
  position: absolute;
  font-size: 4rem;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  animation: heartBurst 0.8s cubic-bezier(0.34,1.56,0.64,1) 0.1s both;
  pointer-events: none;
  z-index: 0;
}
@keyframes heartBurst {
  0%   { transform: translateX(-50%) scale(0) rotate(-20deg); opacity: 0; }
  60%  { transform: translateX(-50%) scale(1.3) rotate(5deg); opacity: 1; }
  100% { transform: translateX(-50%) scale(1) rotate(0deg); opacity: 0; }
}

/* ── Match photos — bigger, with glow rings ── */
.match-photo-placeholder,
#match-partner-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid var(--pink);
  box-shadow: 0 0 0 4px rgba(255,31,143,.18), var(--shadow-glow);
  overflow: hidden;
  animation: matchPhotoScale .55s cubic-bezier(0.34,1.56,0.64,1) .3s both;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  background: var(--dark-card);
}
#match-partner-photo { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(123,47,190,.18), 0 0 40px rgba(123,47,190,.25); animation-delay: .45s; }
@keyframes matchPhotoScale { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── Match screen title — enhanced ── */
.match-title {
  font-size: 3rem;
  margin-bottom: .3rem;
  filter: drop-shadow(0 0 30px rgba(255,31,143,.5));
}

/* ── Screen transitions — slide up ── */
.screen.active {
  animation: screenSlideUp .22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes screenSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Card name/info larger ── */
.card-name-age {
  font-size: 2.1rem;
}

/* ── Wizard step entrance — smoother ── */
.wizard-step {
  animation: stepIn .35s cubic-bezier(0.34,1.4,0.64,1);
}

/* ── Zodiac chip on card — more vibrant ── */
.card-zodiac-chip {
  background: rgba(123,47,190,.65);
  border-color: rgba(200,100,255,.5);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* ── Premium plan selected ring ── */
.premium-plan.selected {
  box-shadow: 0 0 0 2px var(--gold), 0 0 30px rgba(245,200,66,.25);
}

/* ── Chip selected — pulsing ring ── */
.chip.selected {
  box-shadow: 0 0 0 2.5px rgba(255,31,143,.35);
  animation: chipSelectPulse .4s ease;
}
@keyframes chipSelectPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* ── Like card (Likes screen) hover ── */
.like-card:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 36px rgba(255,31,143,.25);
}

/* ── Chat bubble me — gradient shimmer ── */
.bubble-me {
  background: var(--grad-primary);
  box-shadow: 0 2px 14px rgba(255,31,143,.3);
}

/* ── Settings row hover glow ── */
.settings-row:hover, .settings-item:hover {
  background: rgba(255,31,143,.04);
}

/* ── Auth card glass enhancement ── */
.auth-bg .card {
  background: rgba(8,8,28,.82);
  border-color: rgba(255,31,143,.12);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(255,31,143,.06), 0 0 80px rgba(123,47,190,.12);
}

/* ── Input focus ring — pink glow ── */
input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 3.5px rgba(255,31,143,.18), 0 0 20px rgba(255,31,143,.08);
}

/* ── Auth logo name — floating effect ── */
.auth-logo h1 {
  animation: logoFloat 4s ease-in-out infinite;
  display: inline-block;
}
@keyframes logoFloat {
  0%,100% { transform: translateY(0); filter: drop-shadow(0 0 20px rgba(255,31,143,.4)); }
  50%      { transform: translateY(-4px); filter: drop-shadow(0 0 30px rgba(255,31,143,.65)); }
}

/* ── Progress bar gradient animation ── */
.wizard-progress-fill {
  background: var(--grad-cosmic);
  background-size: 200% 100%;
  animation: progressShimmer 2s linear infinite;
}
@keyframes progressShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ── Compat fill on card — animated ── */
.card-compat-fill {
  animation: compatFill .8s cubic-bezier(0.34,1.56,0.64,1) .4s both;
}
@keyframes compatFill {
  from { width: 0 !important; }
}

/* ── Deck cards — staggered entrance ── */
.swipe-card {
  animation: cardDrop .4s cubic-bezier(0.34,1.4,0.64,1) both;
}
.swipe-card[data-pos="2"] { animation-delay: .06s; }
.swipe-card[data-pos="3"] { animation-delay: .12s; }
@keyframes cardDrop {
  from { transform: scale(.9) translateY(-20px); opacity: 0; }
  to   { opacity: 1; }
}

/* ── OTP input filled state ── */
.otp-row input.filled {
  border-color: var(--pink);
  background: rgba(255,31,143,.1);
  box-shadow: 0 0 0 3px rgba(255,31,143,.2), 0 0 12px rgba(255,31,143,.15);
  animation: otpFill .25s ease;
}
@keyframes otpFill {
  0%  { transform: scale(1.18); }
  100%{ transform: scale(1.09); }
}

/* ── Toast — better shadow ── */
.toast {
  box-shadow: 0 8px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.08);
}

/* ── Spinner — pink gradient ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  border-top-color: var(--pink);
  border-right-color: rgba(255,31,143,.3);
}

/* ── Social auth buttons ── */
.btn-social{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 20px;border-radius:12px;font-size:.93rem;font-weight:600;cursor:pointer;border:none;transition:all .2s}
.btn-apple{background:#fff;color:#000}
.btn-apple:hover{background:#f0f0f0;transform:translateY(-1px);box-shadow:0 4px 15px rgba(0,0,0,.25)}

.btn-google{background:#fff;color:#3c4043}
.btn-google:hover{background:#f0f0f0;transform:translateY(-1px);box-shadow:0 4px 15px rgba(0,0,0,.25)}


/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM UI v3 — Cosmic Animations & Motion Design
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cosmic particle canvas — sits behind everything */
#cosmic-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

/* ── Card glow ring during drag ── */
.swipe-card {
  transition: box-shadow 0.08s ease;
}
.swipe-card.dragging-right {
  box-shadow:
    0 8px 40px rgba(0,0,0,.6),
    0 2px 8px rgba(0,0,0,.4),
    0 0 40px rgba(34,197,94,.45),
    0 0 80px rgba(34,197,94,.2);
}
.swipe-card.dragging-left {
  box-shadow:
    0 8px 40px rgba(0,0,0,.6),
    0 2px 8px rgba(0,0,0,.4),
    0 0 40px rgba(239,68,68,.45),
    0 0 80px rgba(239,68,68,.2);
}
.swipe-card.dragging-up {
  box-shadow:
    0 8px 40px rgba(0,0,0,.6),
    0 2px 8px rgba(0,0,0,.4),
    0 0 40px rgba(245,158,11,.45),
    0 0 80px rgba(245,158,11,.2);
}

/* ── Like button heartbeat pulse ── */
.action-like {
  animation: heartbeat 2.4s ease-in-out infinite;
}
@keyframes heartbeat {
  0%,100% { transform: scale(1); }
  14%      { transform: scale(1.08); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.04); }
  70%      { transform: scale(1); }
}
.action-like:hover {
  animation: none !important;
}

/* ── Stamp entrance — scale in with glow ── */
.stamp {
  transition: opacity 0.12s ease, transform 0.12s ease !important;
  transform-origin: center center;
}
.stamp-like  { transform: rotate(-22deg) scale(0.9); }
.stamp-nope  { transform: rotate(22deg) scale(0.9); }
.stamp[style*="opacity: 1"],
.stamp[style*="opacity:1"] {
  transform: rotate(var(--stamp-rot)) scale(1.08) !important;
}

/* ── Throw burst overlay ── */
@keyframes burstLike {
  0%   { opacity: 0.7; transform: scale(0.5); }
  40%  { opacity: 1;   transform: scale(1.15); }
  100% { opacity: 0;   transform: scale(1.8); }
}
@keyframes burstNope {
  0%   { opacity: 0.6; transform: scale(0.5) rotate(45deg); }
  40%  { opacity: 0.9; transform: scale(1.1) rotate(45deg); }
  100% { opacity: 0;   transform: scale(1.6) rotate(45deg); }
}
.throw-burst {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  font-size: 5rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.throw-burst.like {
  animation: burstLike 0.55s cubic-bezier(0.4,0,1,1) forwards;
}
.throw-burst.nope {
  animation: burstNope 0.55s cubic-bezier(0.4,0,1,1) forwards;
}
.throw-burst.super {
  font-size: 4rem;
  animation: burstLike 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

/* ── Card photo parallax wrapper ── */
.card-photo-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
}
.card-photo-wrap .card-photo {
  will-change: transform;
  transform-origin: center center;
}

/* ── Action button ripple effect ── */
.action-btn {
  overflow: hidden;
}
.action-btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transform: scale(0);
  animation: rippleAnim 0.5s linear;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ── Screen swipe entrance: spring slide + fade ── */
#screen-swipe.active {
  animation: swipeScreenIn 0.3s cubic-bezier(0.34,1.4,0.64,1);
}
@keyframes swipeScreenIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Nav active icon bounce ── */
.nav-item.active .nav-icon {
  animation: navBounce 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes navBounce {
  from { transform: translateY(4px) scale(0.85); }
  to   { transform: translateY(0) scale(1); }
}

/* ── Card deck glow pulse ── */
#swipe-deck {
  filter: drop-shadow(0 0 18px rgba(123,47,190,0.12));
}

/* ── Discover header gradient text ── */
#screen-swipe .screen-header-logo {
  background: linear-gradient(135deg, #FF1F8F 0%, #a855f7 50%, #00D4FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: headerColorShift 5s ease infinite alternate;
}
@keyframes headerColorShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ── Match screen explosion ── */
.match-screen {
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  pointer-events: none;
  animation: confettiFall 1.2s ease-out forwards;
}
@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ── Smoother screen transitions ── */
.screen.active {
  animation: screenIn 0.2s cubic-bezier(0.25,0.46,0.45,0.94);
}
@keyframes screenIn {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Photo shimmer loading ── */
.card-photo[loading="lazy"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  animation: shimmerAnim 1.4s ease infinite;
}
@keyframes shimmerAnim {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Premium floating gradient orbs in background ── */
.bg-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: orbFloat linear infinite;
}
.bg-orb-1 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,31,143,0.12) 0%, transparent 70%);
  top: -100px; left: -80px;
  animation-duration: 18s;
}
.bg-orb-2 {
  width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(123,47,190,0.15) 0%, transparent 70%);
  bottom: 60px; right: -60px;
  animation-duration: 22s;
  animation-direction: reverse;
}
.bg-orb-3 {
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(0,212,255,0.08) 0%, transparent 70%);
  top: 40%; left: 20%;
  animation-duration: 26s;
}
@keyframes orbFloat {
  0%,100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(15px, -20px) scale(1.05); }
  50%      { transform: translate(-10px, 10px) scale(0.95); }
  75%      { transform: translate(20px, 5px) scale(1.02); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM GLOBAL v4 — Inclusive Cosmic Design
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Playfair Display for the logo ── */
.auth-logo h1,
.screen-header-logo {
  font-family: "Playfair Display", "Georgia", serif !important;
  letter-spacing: -.03em !important;
}

/* ── Deeper, richer cosmic background ── */
body::before {
  background:
    radial-gradient(ellipse 100% 60% at 10% 5%,  rgba(123,47,190,0.26) 0%, transparent 55%),
    radial-gradient(ellipse 80%  50% at 90% 90%,  rgba(255,31,143,0.20) 0%, transparent 50%),
    radial-gradient(ellipse 60%  70% at 60% 20%,  rgba(0,212,255,0.10) 0%,  transparent 45%),
    radial-gradient(ellipse 50%  40% at 30% 80%,  rgba(245,200,66,0.06) 0%, transparent 40%),
    linear-gradient(180deg, #06061e 0%, #04040f 100%);
}

/* ── World welcome strip ── */
.world-welcome {
  font-size: .75rem;
  color: rgba(255,255,255,.45);
  margin-top: .35rem;
  letter-spacing: .02em;
  text-align: center;
  font-style: italic;
}

/* ── Auth logo — larger, more majestic ── */
.auth-logo h1 {
  font-size: 3.8rem !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #FF1F8F 0%, #c855f7 45%, #FF1F8F 100%);
  background-size: 200% 200%;
  animation: logoGradient 5s ease-in-out infinite, logoFloat 4s ease-in-out infinite !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
@keyframes logoGradient {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ── Card — more depth, richer overlay ── */
.swipe-card {
  border-radius: 24px !important;
  box-shadow:
    0 12px 50px rgba(0,0,0,.7),
    0 4px 16px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.05) !important;
}

/* ── Card info overlay — richer gradient ── */
.card-info-overlay {
  background: linear-gradient(
    transparent 0%,
    rgba(4,4,15,.2)  25%,
    rgba(4,4,15,.72) 48%,
    rgba(4,4,15,.92) 68%,
    #04040f 100%
  ) !important;
  padding: 7rem 1.5rem 1.8rem !important;
  border-radius: 0 0 24px 24px;
}

/* ── Card name — Playfair Display ── */
.card-name-age {
  font-family: "Playfair Display", "Georgia", serif;
  font-size: 2.2rem !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.7) !important;
}

/* ── Premium action buttons — gradient ring ── */
.action-like {
  background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(16,185,129,.12)) !important;
  border: 2px solid rgba(34,197,94,.6) !important;
  box-shadow: 0 0 0 0 rgba(34,197,94,.35), 0 8px 28px rgba(34,197,94,.28) !important;
}
.action-pass {
  background: linear-gradient(135deg, rgba(239,68,68,.18), rgba(220,38,38,.12)) !important;
  border: 2px solid rgba(239,68,68,.6) !important;
  box-shadow: 0 0 0 0 rgba(239,68,68,.3), 0 8px 28px rgba(239,68,68,.22) !important;
}
.action-super {
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(251,191,36,.12)) !important;
  border: 2px solid rgba(245,158,11,.6) !important;
  box-shadow: 0 0 0 0 rgba(245,158,11,.3), 0 8px 24px rgba(245,158,11,.2) !important;
}

/* ── Sign In button — more premium gradient ── */
.btn-primary, button[type="submit"], .btn[onclick*="doLogin"], .btn[onclick*="doRegister"] {
  background: linear-gradient(135deg, #FF1F8F 0%, #a855f7 50%, #7B2FBE 100%) !important;
  background-size: 200% 200% !important;
  transition: all .3s ease !important;
  box-shadow: 0 6px 28px rgba(255,31,143,.45), 0 2px 8px rgba(0,0,0,.3) !important;
}
.btn-primary:hover {
  background-position: 100% 100% !important;
  box-shadow: 0 8px 36px rgba(255,31,143,.65), 0 2px 8px rgba(0,0,0,.3) !important;
  transform: translateY(-1px) !important;
}

/* ── Zodiac chip — more vibrant ── */
.card-zodiac-chip {
  background: linear-gradient(135deg, rgba(123,47,190,.7), rgba(168,85,247,.5)) !important;
  border: 1px solid rgba(200,100,255,.45) !important;
  font-weight: 700 !important;
  padding: .26rem .65rem !important;
}

/* ── Compat bar — premium rainbow ── */
.card-compat-fill {
  background: linear-gradient(90deg, #FF1F8F 0%, #a855f7 50%, #00D4FF 100%) !important;
  background-size: 200% 100% !important;
  animation: compatFill .8s cubic-bezier(0.34,1.56,0.64,1) .4s both,
             compatShimmer 3s linear infinite 1.2s !important;
}
@keyframes compatShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ── Social buttons — richer style ── */
.btn-google, .btn-apple {
  background: rgba(255,255,255,.97) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.25) !important;
  color: #1a1a2e !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}
.btn-google:hover, .btn-apple:hover {
  background: rgba(255,255,255,1) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.35) !important;
}

/* ── Match screen — confetti + premium title ── */
.match-title {
  font-family: "Playfair Display", "Georgia", serif !important;
  font-size: 3.4rem !important;
  font-weight: 900 !important;
}

/* ── Auth card glass — richer blur ── */
.auth-bg .card {
  background: rgba(6,6,22,.88) !important;
  backdrop-filter: blur(32px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.5) !important;
  border: 1px solid rgba(255,31,143,.14) !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,31,143,.07),
    0 0 100px rgba(123,47,190,.15) !important;
}

/* ── Input fields — premium style ── */
input, textarea, select {
  background: rgba(255,255,255,.05) !important;
  border: 1.5px solid rgba(255,255,255,.12) !important;
  font-family: "Inter", sans-serif !important;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(255,31,143,.5) !important;
  background: rgba(255,255,255,.08) !important;
  box-shadow: 0 0 0 4px rgba(255,31,143,.14), 0 0 24px rgba(255,31,143,.1) !important;
}

/* ── Nav bar — premium glass ── */
.bottom-nav {
  background: rgba(4,4,15,.92) !important;
  backdrop-filter: blur(28px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.4) !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 -4px 30px rgba(0,0,0,.4) !important;
}

/* ── Header bar ── */
.screen-header {
  background: rgba(4,4,15,.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

/* ── Matches list — richer row ── */
.match-row, .match-item {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
  transition: all .2s ease !important;
}
.match-row:hover, .match-item:hover {
  background: rgba(255,31,143,.08) !important;
  border-color: rgba(255,31,143,.2) !important;
  transform: translateX(4px) !important;
}

/* ── Stamp — more dramatic ── */
.stamp {
  font-family: "Playfair Display", "Georgia", serif !important;
  letter-spacing: .08em !important;
  font-style: italic !important;
  border-width: 5px !important;
}

/* ── Card deck area ── */
#swipe-deck {
  filter: drop-shadow(0 0 30px rgba(123,47,190,.18)) !important;
}

/* ── Premium scroll bar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,31,143,.35); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,31,143,.6); }

/* ── Selection color ── */
::selection { background: rgba(255,31,143,.3); color: #fff; }


/* ─── Religion chip ─── */
.card-religion-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 600;
  padding: .22rem .55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(251,191,36,.1));
  border: 1px solid rgba(245,158,11,.4);
  color: rgba(255,255,255,.9);
  white-space: nowrap;
}

/* ─── Goal tag on card ─── */
.card-goal-tag {
  font-size: .7rem;
  color: rgba(255,255,255,.6);
  margin: .25rem 0 .1rem;
  letter-spacing: .01em;
  font-style: italic;
}

/* ─── Interest tags — more colourful ─── */
.card-interest-tag {
  font-size: .72rem;
  font-weight: 600;
  padding: .22rem .55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(168,85,247,.22), rgba(123,47,190,.15));
  border: 1px solid rgba(168,85,247,.35);
  color: rgba(255,255,255,.9);
  white-space: nowrap;
}


/* ═══════════════════════════════════ MATCH PREMIUM ═════════════════════════════ */

/* Match screen background — deep glow */
#screen-match {
  background: radial-gradient(ellipse 80% 60% at 50% 20%, rgba(255,31,143,.25) 0%, transparent 55%),
              radial-gradient(ellipse 60% 40% at 50% 80%, rgba(123,47,190,.2) 0%, transparent 50%),
              #06061e !important;
}

/* Match photo ring — pulsing glow */
.match-photos-row {
  position: relative;
}
.match-photo-avatar {
  border: 3px solid rgba(255,31,143,.7) !important;
  box-shadow:
    0 0 0 6px rgba(255,31,143,.15),
    0 0 30px rgba(255,31,143,.4),
    0 0 60px rgba(255,31,143,.2) !important;
  animation: matchPhotoGlow 2s ease-in-out infinite !important;
}
@keyframes matchPhotoGlow {
  0%,100% { box-shadow: 0 0 0 6px rgba(255,31,143,.15), 0 0 30px rgba(255,31,143,.4), 0 0 60px rgba(255,31,143,.2); }
  50%      { box-shadow: 0 0 0 10px rgba(255,31,143,.22), 0 0 50px rgba(255,31,143,.6), 0 0 90px rgba(255,31,143,.3); }
}

/* Match heart emoji — bounce */
.match-heart {
  animation: matchHeartBounce .5s cubic-bezier(0.34,1.56,0.64,1) both !important;
}
@keyframes matchHeartBounce {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg);   opacity: 1; }
}

/* Match title — Playfair, dramatic */
.match-title {
  font-family: "Playfair Display","Georgia",serif !important;
  font-size: 2.8rem !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #FF1F8F, #c855f7, #FF1F8F) !important;
  background-size: 200% !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: matchTitleShimmer 3s linear infinite !important;
}
@keyframes matchTitleShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Match buttons — more premium */
.match-btn-primary {
  background: linear-gradient(135deg, #FF1F8F, #a855f7) !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  box-shadow: 0 8px 32px rgba(255,31,143,.45) !important;
  font-size: 1.05rem !important;
}
.match-btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 40px rgba(255,31,143,.6) !important;
}

/* Match cosmic compat text */
#match-cosmic-text {
  color: rgba(255,255,255,.7) !important;
  font-style: italic !important;
  font-size: .9rem !important;
  letter-spacing: .02em !important;
}

/* Match screen entrance */
#screen-match.active {
  animation: matchScreenEntrance .5s cubic-bezier(0.34,1.56,0.64,1) both !important;
}
@keyframes matchScreenEntrance {
  0%   { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1);    opacity: 1; }
}


/* ─── Rotating global tagline ─── */
.auth-tagline-rotate {
  transition: opacity .4s ease !important;
  min-height: 1.6em !important;
  font-size: .98rem !important;
  color: rgba(255,255,255,.65) !important;
  letter-spacing: .01em !important;
  font-style: italic !important;
  text-align: center !important;
}

/* ─── Flags strip on login ─── */
.auth-flags-strip {
  display: flex !important;
  justify-content: center !important;
  gap: .2rem !important;
  font-size: 1.3rem !important;
  margin-top: .5rem !important;
  opacity: .7 !important;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.3)) !important;
  flex-wrap: wrap !important;
}


/* ═══════════════════════════════════════ DESKTOP RESPONSIVE ════════════════ */

@media (min-width: 768px) {
  body {
    display: flex;
    justify-content: center;
    background-attachment: fixed;
    min-height: 100vh;
  }

  /* Center the app in a phone-width column */
  #app-shell {
    position: relative;
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    box-shadow:
      -30px 0 80px rgba(0,0,0,.6),
       30px 0 80px rgba(0,0,0,.6),
       0 0 0 1px rgba(255,255,255,.04);
    background: linear-gradient(180deg, #0b0820, #06061a) !important;
    overflow-x: hidden;
    z-index: 1;
  }

  /* All full-screen screens are contained */
  .screen {
    max-width: 430px;
    margin: 0 auto;
  }

  /* Cosmic canvas + orbs still fill the full viewport */
  #cosmic-canvas,
  .bg-orb {
    position: fixed;
    z-index: 0;
  }

  /* Desktop scrollbar inside the app column */
  #app-shell::-webkit-scrollbar { width: 4px; }
  #app-shell::-webkit-scrollbar-track { background: transparent; }
  #app-shell::-webkit-scrollbar-thumb { background: rgba(168,85,247,.3); border-radius: 99px; }

  /* Deck is centered within its container */
  #deck-wrap {
    max-width: 390px;
    margin: 0 auto;
  }

  /* Swipe card max size on desktop */
  .swipe-card {
    max-width: 390px;
    max-height: 560px;
    margin: 0 auto;
  }

  /* Match grid for desktop */
  #likes-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 390px;
    margin: 0 auto;
  }

  /* Widen chat input area */
  .chat-input-row {
    max-width: 390px;
    margin: 0 auto;
  }

  /* Auth card slightly wider feel */
  .auth-card {
    max-width: 380px;
    margin: 0 auto;
  }
}

/* Wide desktop — subtle side panels */
@media (min-width: 1100px) {
  body::before, body::after {
    content: "";
    flex: 1;
    background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(123,47,190,.08), transparent);
    pointer-events: none;
  }
}


/* ─── Throw burst emoji flash ─── */
@keyframes throwBurst {
  0%   { opacity: 1; transform: translate(-50%,-50%) scale(0.5); }
  40%  { opacity: 1; transform: translate(-50%,-50%) scale(1.3); }
  100% { opacity: 0; transform: translate(-50%,-55%) scale(1.6); }
}

.throw-burst {
  position: fixed;
  z-index: 9998;
  font-size: 5rem;
  top: 50%;
  left: 50%;
  pointer-events: none;
  animation: throwBurst .6s ease both;
  transform: translate(-50%,-50%);
  line-height: 1;
}


/* ─── Button ripple ─── */
.action-btn {
  position: relative;
  overflow: hidden;
}
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  transform: scale(0);
  animation: ripple .6s ease-out;
  pointer-events: none;
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}


/* ─── Safe delete modal (injected by JS) ─── */
#dzy-delete-modal {
  font-family: "Inter", sans-serif;
}
#dzy-delete-modal h2 {
  font-size: 1.6rem;
  margin: 0 0 .5rem;
}
#dzy-delete-modal p {
  font-size: .9rem;
  line-height: 1.6;
}


/* ═══════════════════════════ LOCATION AUTOCOMPLETE ════════════════════════ */

.location-search-wrap {
  position: relative;
  width: 100%;
  margin: 1rem 0 .5rem;
}

.location-search-wrap .wiz-input {
  width: 100%;
  padding: .85rem 1.1rem;
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.14);
  border-radius: 16px;
  color: #fff;
  font-size: 1rem;
  font-family: "Inter", sans-serif;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.location-search-wrap .wiz-input:focus {
  outline: none;
  border-color: rgba(255,31,143,.55);
  box-shadow: 0 0 0 3px rgba(255,31,143,.12);
}
.location-search-wrap .wiz-input::placeholder { color: rgba(255,255,255,.35); }

/* Dropdown */
.location-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: rgba(18,8,38,.97);
  border: 1px solid rgba(255,31,143,.2);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
  z-index: 9000;
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}
.location-dropdown.hidden { display: none; }

.loc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem 1.1rem;
  cursor: pointer;
  transition: background .15s;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.loc-item:last-child { border-bottom: none; }
.loc-item:hover, .loc-item:active {
  background: rgba(255,31,143,.12);
}

.loc-name {
  font-weight: 600;
  font-size: .95rem;
  color: #fff;
}
.loc-county {
  font-size: .78rem;
  color: rgba(255,255,255,.45);
  text-align: right;
  flex-shrink: 0;
  margin-left: .75rem;
}
.loc-loading, .loc-no-results {
  padding: .9rem 1.1rem;
  color: rgba(255,255,255,.5);
  font-size: .85rem;
  text-align: center;
}

/* Divider between text search and GPS */
.location-or-divider {
  color: rgba(255,255,255,.25);
  font-size: .82rem;
  text-align: center;
  margin: 1rem 0 .6rem;
  letter-spacing: .05em;
}


/* loc-county-fix — keep long region names tidy */
.loc-item { gap: .75rem; }
.loc-name { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-county {
  max-width: 48%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ── login-teaser-upgrade: teaser card + USP pills + start CTA ── */

/* Teaser preview card */
.login-teaser-wrap {
  width: 100%;
  max-width: 340px;
  padding: 0 0 2px;
  position: relative;
  z-index: 2;
}
.login-teaser-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,180,255,.18);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 8px 32px rgba(168,85,247,.25);
}
.login-teaser-card:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(168,85,247,.4); }
.ltc-photo {
  position: relative;
  height: 110px;
  overflow: hidden;
}
.ltc-photo-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 30%, #db2777 65%, #f97316 100%);
  opacity: .85;
}
.ltc-compat-badge {
  position: absolute;
  bottom: 8px;
  right: 10px;
  background: linear-gradient(135deg, rgba(168,85,247,.9), rgba(236,72,153,.9));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  backdrop-filter: blur(8px);
  letter-spacing: .3px;
}
.ltc-body {
  padding: 10px 12px 4px;
}
.ltc-name-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.ltc-name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.ltc-sign {
  font-size: 12px;
  color: #c4b5fd;
}
.ltc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}
.ltc-chip {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  color: #e2d9f3;
  border: 1px solid rgba(255,255,255,.12);
}
.ltc-religion {
  background: linear-gradient(135deg, rgba(251,191,36,.15), rgba(245,158,11,.15));
  border-color: rgba(251,191,36,.3);
  color: #fbbf24;
}
.ltc-distance {
  font-size: 10px;
  color: #9d7fbe;
  margin-bottom: 4px;
}
.ltc-footer-cta {
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(168,85,247,.2), rgba(236,72,153,.2));
  border-top: 1px solid rgba(168,85,247,.2);
  font-size: 11px;
  font-weight: 600;
  color: #d8b4fe;
  text-align: center;
  letter-spacing: .3px;
}

/* USP pills */
.usp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
}
.usp-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 20px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: #d8b4fe;
  white-space: nowrap;
  letter-spacing: .2px;
}

/* Start for Free primary CTA */
.btn-start-free {
  width: 100%;
  max-width: 340px;
  padding: 15px 20px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .3px;
  background: linear-gradient(135deg, #ec4899, #a855f7, #7c3aed);
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
  box-shadow: 0 6px 30px rgba(168,85,247,.5);
  border-radius: 16px;
  margin-bottom: 4px;
  position: relative;
  z-index: 2;
}
.btn-start-free:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(168,85,247,.65);
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* "or sign in with email" divider inside card */
.login-or-email {
  font-size: 11px;
  color: rgba(255,255,255,.35);
  text-align: center;
  margin: 8px 0 10px;
  position: relative;
}
.login-or-email::before,
.login-or-email::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: rgba(255,255,255,.12);
}
.login-or-email::before { left: 0; }
.login-or-email::after  { right: 0; }

/* Mobile: tighten spacing on small screens */
@media (max-height: 700px) {
  .login-teaser-wrap { display: none; }
  .usp-pills { margin-top: 6px; }
  .btn-start-free { padding: 12px 20px; font-size: 14px; }
}


/* ── DOB picker (premium Day/Month/Year) — dob-picker-premium ── */
.dob-picker{display:flex;gap:.55rem;margin:.25rem 0 .35rem}
.dob-col{flex:1;display:flex;flex-direction:column;gap:.4rem;min-width:0}
.dob-col-year{flex:1.35}
.dob-col label{font-size:.66rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;padding-left:.25rem}
.dob-select-wrap{position:relative}
.dob-select-wrap::after{
  content:'';position:absolute;right:.9rem;top:50%;width:.5rem;height:.5rem;
  border-right:2px solid var(--text-dim);border-bottom:2px solid var(--text-dim);
  transform:translateY(-65%) rotate(45deg);pointer-events:none;
  transition:border-color var(--trans-fast);
}
.dob-select-wrap.filled::after{border-color:var(--gold)}
.dob-select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;
  padding:.95rem 1.9rem .95rem 1rem;font-size:1.02rem;font-weight:700;
  color:var(--text-dim);background:var(--dark-panel);
  border:1.5px solid var(--dark-border2);border-radius:var(--radius-sm);
  font-family:inherit;cursor:pointer;line-height:1.2;
  transition:border-color var(--trans-fast),box-shadow var(--trans-fast),color var(--trans-fast);
}
.dob-select:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}
.dob-select.filled{color:var(--gold);border-color:rgba(245,200,66,.45);background:var(--gold-soft)}
.dob-select option{background:#0d0d24;color:var(--text);font-weight:600}
.dob-hint{
  text-align:center;font-size:.82rem;color:var(--gold);font-weight:600;
  margin:.5rem 0 .15rem;animation:zodiacPop .45s var(--trans-spring);
}
#btn-wiz-dob.ready{animation:dobReadyPulse 1.7s ease-in-out infinite}
@keyframes dobReadyPulse{
  0%,100%{box-shadow:var(--shadow-btn);transform:translateY(0)}
  50%{box-shadow:0 7px 36px rgba(255,31,143,.75);transform:translateY(-1px)}
}
/* Discovery pref chips */
.pref-chip {
  padding: 0.45rem 1rem;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent;
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
}
.pref-chip.selected {
  background: linear-gradient(135deg, #FF1F8F, #a855f7);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}
.pref-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}
.pref-slider {
  width: 100%;
  accent-color: #FF1F8F;
  cursor: pointer;
}
.photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 1rem;
  margin-top: 0.5rem;
}
.ep-photo-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 1rem;
}
.ep-photos-wrap {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 1rem;
  align-items: center;
}
.ep-add-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 100px;
  border-radius: 12px;
  border: 2px dashed rgba(255,255,255,0.25);
  cursor: pointer;
  flex-shrink: 0;
  color: rgba(255,255,255,0.5);
  font-size: 0.75rem;
  gap: 4px;
  transition: border-color 0.15s;
}
.ep-add-photo:hover { border-color: #FF1F8F; color: #FF1F8F; }
.btn-link-pink {
  background: none;
  border: none;
  color: #FF1F8F;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0.4rem 0.5rem;
}
.settings-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.35);
  padding: 0.75rem 1.2rem 0.25rem;
}
.ep-field { display: flex; flex-direction: column; gap: 0.4rem; }
.ep-label { font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.6); }