/* ══════════════════════════════════════════════
   CREATE VYRAL — AUTH PAGE STYLES
   ══════════════════════════════════════════════ */
:root {
  --black:   #0A0A0A;
  --black-2: #111111;
  --black-3: #161616;
  --cream:   #F4F1E8;
  --accent:  #C5FF3E;
  --accent-w:#D4FF57;
  --border:  rgba(244,241,232,0.08);
  --border-2:rgba(244,241,232,0.14);
  --text:    #F4F1E8;
  --text-dim:rgba(244,241,232,0.5);
  --red:     #ef4444;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{height:100%;}
body{
  font-family:'DM Sans',sans-serif;
  background:var(--black); color:var(--text);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
.mono{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;}
.hidden{display:none!important;}

/* ── Layout ── */
.auth-wrap{
  display:grid; grid-template-columns:1fr 1fr;
  min-height:100vh;
}
@media(max-width:900px){
  .auth-wrap{grid-template-columns:1fr;}
}

/* ── Left Panel ── */
.auth-left{
  background:var(--black-2);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  padding:40px 48px;
  position:relative; overflow:hidden;
}
.auth-left::before{
  content:''; position:absolute; top:-20%; right:-20%;
  width:600px; height:600px;
  background:radial-gradient(circle,rgba(197,255,62,.07) 0%,transparent 60%);
  filter:blur(60px); pointer-events:none;
}
@media(max-width:900px){.auth-left{display:none;}}

.auth-logo{
  font-family:'Syne',sans-serif; font-weight:800;
  font-size:18px; color:var(--text);
  display:flex; align-items:center; gap:10px;
  margin-bottom:auto; padding-bottom:48px;
  text-decoration:none;
}
.dot{
  width:8px;height:8px;
  background:var(--accent);border-radius:50%;
  box-shadow:0 0 10px var(--accent);
}

.auth-left-body{flex:1;display:flex;flex-direction:column;justify-content:center;}
.al-label{color:var(--text-dim);margin-bottom:28px;}
.al-headline{
  font-family:'Syne',sans-serif;
  font-size:clamp(48px,5vw,80px);
  font-weight:700; line-height:.92;
  letter-spacing:-.04em; margin-bottom:48px;
}
.al-headline em{font-style:normal;color:var(--accent);}

.al-features{display:flex;flex-direction:column;gap:16px;margin-bottom:48px;}
.al-feat{
  display:flex; align-items:center; gap:14px;
  font-size:15px; color:var(--text-dim);
}
.af-icon{font-size:1.2rem;flex-shrink:0;}

.al-plan-preview{
  background:rgba(197,255,62,.06);
  border:1px solid rgba(197,255,62,.2);
  border-radius:16px; padding:24px 28px;
}
.ap-label{color:rgba(197,255,62,.6);margin-bottom:10px;display:block;}
.ap-name{
  font-family:'Syne',sans-serif;
  font-weight:800; font-size:28px;
  color:var(--accent); letter-spacing:.04em;
  margin-bottom:4px;
}
.ap-price{
  font-family:'Syne',sans-serif;
  font-weight:700; font-size:22px;
  color:var(--text);
}
.ap-price span{font-size:14px;color:var(--text-dim);font-weight:400;}

.al-footer{color:var(--text-dim);margin-top:auto;padding-top:32px;}

/* ── Right Panel ── */
.auth-right{
  display:flex; align-items:center; justify-content:center;
  padding:40px 24px;
  background:var(--black);
}
.auth-card{
  width:100%; max-width:480px;
}

/* ── Tabs ── */
.auth-tabs{
  display:flex; background:var(--black-2);
  border:1px solid var(--border); border-radius:12px;
  padding:4px; margin-bottom:32px;
}
.auth-tab{
  flex:1; padding:10px; border-radius:9px;
  font-size:14px; font-weight:600; color:var(--text-dim);
  background:none; border:none; cursor:pointer;
  transition:all .2s;
}
.auth-tab.active{
  background:var(--accent); color:var(--black);
}

/* ── Forms ── */
.auth-form{display:flex;flex-direction:column;gap:20px;}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:480px){.form-row-2{grid-template-columns:1fr;}}

.field{display:flex;flex-direction:column;gap:8px;}
.field label{
  font-size:12px; font-weight:600;
  color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.06em;
}
.field input,.field select{
  background:var(--black-2);
  border:1px solid var(--border);
  border-radius:10px; color:var(--text);
  font-family:'DM Sans',sans-serif;
  font-size:15px; padding:13px 16px;
  outline:none; transition:border-color .2s, box-shadow .2s;
  -webkit-appearance:none;
}
.field select option{background:var(--black-2);color:var(--text);}
.field input::placeholder{color:var(--text-dim);}
.field input:focus,.field select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(197,255,62,.12);
}

.input-eye{position:relative;}
.input-eye input{width:100%;padding-right:48px;}
.eye-btn{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:var(--text-dim); background:none; border:none; cursor:pointer;
  display:flex; align-items:center; padding:4px;
  transition:color .2s;
}
.eye-btn:hover{color:var(--text);}

/* Plan selector */
.plan-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.plan-opt{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 8px; border-radius:10px;
  border:1px solid var(--border); cursor:pointer;
  transition:all .2s; text-align:center;
  position:relative;
}
.plan-opt input[type=radio]{position:absolute;opacity:0;pointer-events:none;}
.plan-opt:has(input:checked){
  border-color:var(--accent);
  background:rgba(197,255,62,.08);
}
.po-icon{font-size:1.4rem;}
.po-name{
  font-family:'Syne',sans-serif;
  font-size:12px;font-weight:700;
  color:var(--text); letter-spacing:.05em;
}
.po-price{font-size:11px;color:var(--text-dim);}

/* Error */
.form-error{
  font-size:13px;color:var(--red);
  background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.2);
  border-radius:8px; padding:10px 14px;
  display:none;
}
.form-error.visible{display:block;}

/* Submit button */
.auth-btn{
  background:var(--accent); color:var(--black);
  border:none; border-radius:12px;
  padding:16px 24px; font-size:15px; font-weight:700;
  cursor:pointer; display:flex; align-items:center;
  justify-content:center; gap:10px;
  transition:transform .2s, box-shadow .2s;
  font-family:'DM Sans',sans-serif;
}
.auth-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 32px rgba(197,255,62,.35);
}
.auth-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;}

.auth-small{font-size:12px;color:var(--text-dim);text-align:center;line-height:1.6;}

/* Demo hint */
.demo-hint{
  background:rgba(197,255,62,.04);
  border:1px dashed rgba(197,255,62,.2);
  border-radius:10px; padding:16px;
}
.dh-label{color:var(--accent);margin-bottom:8px;display:block;}
.demo-hint p{font-size:13px;color:var(--text-dim);line-height:1.6;}