/* ── Reset & protect ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{
  -webkit-text-size-adjust:none;text-size-adjust:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:pan-y;
}
body{
  min-height:100dvh;
  font-family:'Plus Jakarta Sans',sans-serif;
  background:#06060f;
  color:#f0eeff;
  display:flex;align-items:center;justify-content:center;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;
}
img{
  pointer-events:none;
  -webkit-user-drag:none;
  user-drag:none;
  draggable:false;
}
::selection{background:transparent;}

/* ── CSS vars ── */
:root{
  --a1:#a78bfa;--a2:#ec4899;--a3:#f97316;--a4:#22d3ee;
  --gold:#fbbf24;
  --t1:#f0eeff;--t2:rgba(240,238,255,.52);--t3:rgba(240,238,255,.26);
  --gb:rgba(255,255,255,.09);--gb2:rgba(255,255,255,.04);
  --err:#f87171;--s1:#0d0c1d;
}

/* ── Background ── */
.mesh{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 700px 500px at 8% 12%,rgba(167,139,250,.14) 0%,transparent 60%),
    radial-gradient(ellipse 600px 400px at 92% 85%,rgba(236,72,153,.11) 0%,transparent 60%),
    radial-gradient(ellipse 400px 300px at 50% 40%,rgba(34,211,238,.05) 0%,transparent 60%);
  animation:meshA 14s ease-in-out infinite alternate;
}
@keyframes meshA{from{filter:hue-rotate(0deg);}to{filter:hue-rotate(28deg);}}

.grid{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(167,139,250,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(167,139,250,.028) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,black 40%,transparent 100%);
}

.pts{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.pt{position:absolute;border-radius:50%;animation:ptUp linear infinite;opacity:0;pointer-events:none;}
@keyframes ptUp{0%{transform:translateY(0);opacity:0;}8%{opacity:.6;}92%{opacity:.15;}100%{transform:translateY(-100vh);opacity:0;}}

/* ── Wrap ── */
.wrap{position:relative;z-index:10;width:92%;max-width:410px;padding:10px 0 18px;animation:wIn .7s cubic-bezier(.34,1.1,.64,1) both;}
@keyframes wIn{from{transform:translateY(28px) scale(.95);opacity:0;}to{transform:translateY(0) scale(1);opacity:1;}}

/* logo moved to vof-logo-wrap */

/* ── Title ── */

/* ── VOF Logo ── */
.vof-logo-wrap{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:90px;height:90px;margin:0 auto 10px;
}
.vof-ring{
  position:absolute;border-radius:50%;border:1.5px solid transparent;
}
.vof-ring1{
  inset:0;
  border-color:rgba(167,139,250,.35);
  animation:vofSpin1 8s linear infinite;
  background:linear-gradient(#06060f,#06060f) padding-box,
             linear-gradient(135deg,rgba(167,139,250,.6),rgba(236,72,153,.6)) border-box;
}
.vof-ring2{
  inset:8px;
  border-color:rgba(236,72,153,.25);
  animation:vofSpin2 6s linear infinite reverse;
  background:linear-gradient(#06060f,#06060f) padding-box,
             linear-gradient(225deg,rgba(236,72,153,.5),rgba(34,211,238,.4)) border-box;
}
.vof-ring3{
  inset:16px;
  border-color:rgba(34,211,238,.2);
  animation:vofSpin1 10s linear infinite;
  background:linear-gradient(#06060f,#06060f) padding-box,
             linear-gradient(45deg,rgba(34,211,238,.4),rgba(167,139,250,.4)) border-box;
}
@keyframes vofSpin1{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes vofSpin2{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}
.vof-icon-wrap{
  position:relative;z-index:2;
  width:52px;height:52px;
  background:linear-gradient(135deg,rgba(167,139,250,.15),rgba(236,72,153,.12));
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 30px rgba(167,139,250,.3),inset 0 1px 0 rgba(255,255,255,.1);
  animation:vofPulse 3s ease-in-out infinite;
}
@keyframes vofPulse{0%,100%{box-shadow:0 0 20px rgba(167,139,250,.3);}50%{box-shadow:0 0 40px rgba(167,139,250,.5),0 0 60px rgba(236,72,153,.2);}}
.vof-icon-svg{width:32px;height:32px;}

/* ── App title ── */
.app-title{
  text-align:center;font-size:38px;font-weight:900;letter-spacing:2px;
  background:linear-gradient(135deg,#fff 0%,var(--a1) 45%,var(--a2) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1;margin-bottom:3px;
  position:relative;
  animation:titleGlow 4s ease-in-out infinite alternate;
}
.app-title-dot{
  background:linear-gradient(135deg,var(--a2),var(--a3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
@keyframes titleGlow{
  from{filter:drop-shadow(0 0 8px rgba(167,139,250,.4));}
  to{filter:drop-shadow(0 0 20px rgba(167,139,250,.7));}
}
.app-title::after{
  content:'';position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
  width:80px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--a1),var(--a2),var(--a3));
  opacity:.8;animation:lineAnim 3s ease-in-out infinite alternate;
}
@keyframes lineAnim{from{width:50px;opacity:.5;}to{width:100px;opacity:1;}}

.app-sub{text-align:center;font-size:10px;color:var(--t3);letter-spacing:3.5px;text-transform:uppercase;margin:10px 0 4px;}

/* ── VOEN ── */
.voen-wrap{display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:16px;}
.voen-lbl{font-size:9px;font-weight:700;color:var(--t3);letter-spacing:2px;text-transform:uppercase;}
.voen-val{font-size:11px;font-weight:700;color:var(--gold);background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.22);border-radius:8px;padding:2px 10px;letter-spacing:1px;}

/* ── Card ── */
.card{
  background:rgba(255,255,255,.044);
  backdrop-filter:blur(36px) saturate(160%);-webkit-backdrop-filter:blur(36px) saturate(160%);
  border:1px solid var(--gb);border-radius:28px;
  padding:26px 22px 22px;
  box-shadow:0 0 0 1px rgba(255,255,255,.025),0 40px 100px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.065);
  position:relative;overflow:hidden;
}
.card::after{content:'';position:absolute;top:-1px;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.55),rgba(236,72,153,.4),transparent);}

/* ── Tabs ── */
.tabs{display:flex;background:rgba(0,0,0,.42);border:1px solid var(--gb2);border-radius:14px;padding:3px;margin-bottom:20px;position:relative;}
.tab-track{position:absolute;top:3px;bottom:3px;width:calc(50% - 3px);background:linear-gradient(135deg,var(--a1),var(--a2));border-radius:11px;transition:transform .35s cubic-bezier(.34,1.1,.64,1);box-shadow:0 4px 20px rgba(167,139,250,.32);}
.tab-track.r{transform:translateX(calc(100% + 3px));}
.tab-btn{flex:1;padding:10px 0;border:none;background:transparent;color:var(--t2);font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:700;cursor:pointer;position:relative;z-index:1;transition:color .25s;border-radius:11px;-webkit-tap-highlight-color:transparent;}
.tab-btn.active{color:#fff;}

/* ── Error ── */
.err-box{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.22);border-radius:11px;padding:11px 14px;font-size:13px;font-weight:500;color:var(--err);margin-bottom:16px;display:flex;align-items:center;gap:8px;}

/* ── Forms ── */
.form-section{display:none;}.form-section.active{display:block;}
.field{margin-bottom:12px;}
.field label{display:block;font-size:10px;font-weight:700;color:var(--t3);letter-spacing:2px;text-transform:uppercase;margin-bottom:6px;}
.iw{position:relative;}
.ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--t3);pointer-events:none;transition:color .2s;}
.iw:focus-within .ico{color:var(--a1);}
.iw input{width:100%;padding:13px 14px 13px 38px;background:rgba(255,255,255,.05);border:1px solid var(--gb2);border-radius:12px;color:var(--t1);font-size:14px;font-weight:500;font-family:'Plus Jakarta Sans',sans-serif;outline:none;-webkit-appearance:none;transition:border-color .2s,background .2s,box-shadow .2s;}
.iw input::placeholder{color:var(--t3);font-weight:400;}
.iw input:focus{border-color:rgba(167,139,250,.55);background:rgba(167,139,250,.055);box-shadow:0 0 0 3px rgba(167,139,250,.09);}

/* ── Gender ── */
.gr{display:flex;gap:8px;}
.gb-btn{flex:1;padding:11px 0;border:1px solid var(--gb2);border-radius:12px;background:rgba(255,255,255,.03);color:var(--t2);font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .22s;-webkit-tap-highlight-color:transparent;}
.gb-btn svg{width:14px;height:14px;}
.gb-btn.active[data-val="male"]{border-color:rgba(34,211,238,.5);background:rgba(34,211,238,.08);color:#67e8f9;box-shadow:0 0 0 3px rgba(34,211,238,.09);}
.gb-btn.active[data-val="female"]{border-color:rgba(236,72,153,.5);background:rgba(236,72,153,.08);color:#f9a8d4;box-shadow:0 0 0 3px rgba(236,72,153,.09);}

/* ── Submit ── */
.btn-sub{width:100%;padding:14px;margin-top:6px;border:none;border-radius:13px;background:linear-gradient(135deg,var(--a1) 0%,var(--a2) 100%);color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:800;letter-spacing:.2px;cursor:pointer;position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s,opacity .15s;box-shadow:0 8px 28px rgba(167,139,250,.38);-webkit-tap-highlight-color:transparent;}
.btn-sub::before{content:'';position:absolute;top:0;left:-120%;width:80%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transition:left .5s;}
.btn-sub:hover::before{left:140%;}
.btn-sub:active{transform:scale(.98);}
.btn-sub.loading{opacity:.6;pointer-events:none;}

/* ── Legal grid ── */
.legal-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:14px;}
.ll{display:flex;align-items:center;gap:6px;padding:9px 11px;background:rgba(255,255,255,.025);border:1px solid var(--gb2);border-radius:10px;color:var(--t2);font-size:11px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .18s,border-color .18s,color .18s;-webkit-tap-highlight-color:transparent;}
.ll:hover,.ll:active{background:rgba(167,139,250,.08);border-color:rgba(167,139,250,.3);color:var(--a1);}
.ll svg{width:13px;height:13px;flex-shrink:0;opacity:.5;transition:opacity .18s;}
.ll:hover svg,.ll:active svg{opacity:1;}

/* ── Logo click toast ── */
.toast{
  position:fixed;bottom:40px;left:50%;transform:translateX(-50%) translateY(20px);
  z-index:99999;
  background:rgba(15,12,30,.95);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--gb);
  border-radius:18px;
  padding:14px 20px;
  display:flex;align-items:center;gap:12px;
  min-width:280px;max-width:90vw;
  box-shadow:0 20px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07);
  opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.toast-icon{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,var(--a1),var(--a2));
  display:flex;align-items:center;justify-content:center;
}
.toast-icon svg{width:20px;height:20px;color:#fff;}
.toast-text{flex:1;}
.toast-title{font-size:14px;font-weight:800;color:var(--t1);margin-bottom:2px;}
.toast-desc{font-size:12px;color:var(--t2);line-height:1.4;}
.toast-close{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.07);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--t3);
  -webkit-tap-highlight-color:transparent;
}

/* ── Legal popup ── */
.lov{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);align-items:center;justify-content:center;padding:20px;}
.lov.open{display:flex;}
.lbox{background:var(--s1);border:1px solid var(--gb);border-radius:24px;width:100%;max-width:400px;max-height:82vh;display:flex;flex-direction:column;box-shadow:0 40px 100px rgba(0,0,0,.75);animation:lIn .26s cubic-bezier(.34,1.1,.64,1) both;}
@keyframes lIn{from{transform:scale(.88) translateY(-12px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}
.lhdr{padding:17px 18px 13px;border-bottom:1px solid var(--gb2);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.ltitle{font-size:15px;font-weight:800;color:var(--t1);}
.lclose{width:30px;height:30px;border-radius:50%;background:var(--gb2);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);-webkit-tap-highlight-color:transparent;}
.lbody{flex:1;overflow-y:auto;padding:16px 18px 20px;font-size:13px;line-height:1.7;color:var(--t2);-webkit-overflow-scrolling:touch;}
.lbody h3{font-size:14px;font-weight:700;color:var(--t1);margin:14px 0 6px;}
.lbody p{margin-bottom:10px;}

/* ── Social links ── */
.social-row{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0 4px;}
.social-btn{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);cursor:pointer;text-decoration:none;transition:all .2s;-webkit-tap-highlight-color:transparent;}
.social-btn:active{transform:scale(.92);}
.social-btn.tg{border-color:rgba(34,196,255,.25);background:rgba(34,196,255,.08);}
.social-btn.tg:hover{background:rgba(34,196,255,.15);}
.social-btn.ig{border-color:rgba(236,72,153,.25);background:rgba(236,72,153,.08);}
.social-btn.ig:hover{background:rgba(236,72,153,.15);}
.social-btn svg{width:20px;height:20px;}

/* Separate login and registration pages share the same visual design. */
.tabs .tab-btn{display:grid;place-items:center;text-decoration:none}
.auth-note{text-align:center;font-size:12px;color:var(--t2);margin:4px 0 18px;line-height:1.5}