/* ═══════════════════════════════════════════
   AUTH SCREEN
═══════════════════════════════════════════ */
#auth-screen {
  position:fixed; inset:0; z-index:500;
  background:var(--bg);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:1.5rem;
}
#auth-screen::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(46,204,113,.12) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 70%, rgba(26,92,48,.18) 0%, transparent 55%);
}

.auth-brand {
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  margin-bottom:.6rem; position:relative;
}
.auth-logo-img {
  width:110px; height:110px; object-fit:contain;
  filter:drop-shadow(0 4px 16px rgba(46,204,113,.4));
}
.logo{
  font-family:Gluten;}
.auth-logo-text {
  font-size:2.6rem; font-weight:900; letter-spacing:2px;
  font-family:Gluten;
  background:linear-gradient(135deg,#2ecc71,#a8e6cf);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.auth-tagline { color:var(--txt2); font-size:.9rem; margin-bottom:2rem; position:relative; }

/* ── Auth box ── */
.auth-box {
  width:100%; max-width:420px;
  background:rgba(10,26,15,.85); backdrop-filter:blur(20px);
  border:1px solid rgba(46,204,113,.2); border-radius:20px;
  padding:2rem; position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 40px rgba(46,204,113,.08);
}

/* ── Tabs ── */
.auth-tabs {
  display:flex; margin-bottom:1.8rem;
  background:rgba(46,204,113,.06); border-radius:10px; padding:4px;
}
.atab {
  flex:1; padding:.6rem; border:none; border-radius:8px;
  background:transparent; color:var(--txt2);
  font-size:.9rem; font-weight:600; cursor:pointer; transition:all .25s;
}
.atab.active { background:linear-gradient(135deg,#27ae60,#2ecc71); color:#fff; }
.atab:not(.active):hover { color:var(--g3); }

/* ── Form ── */
.auth-form { animation:fadeUp .3s ease; }
@keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

.form-group { margin-bottom:1.1rem; }
.form-group label {
  display:block; color:var(--txt2); font-size:.82rem;
  font-weight:600; margin-bottom:.45rem; text-transform:uppercase; letter-spacing:.5px;
}
.form-group input {
  width:100%; background:rgba(5,15,8,.8);
  border:1.5px solid rgba(46,204,113,.2); border-radius:10px;
  padding:.8rem 1rem; color:var(--txt);
  font-size:.95rem; outline:none; transition:border-color .25s, box-shadow .25s;
}
.form-group input:focus {
  border-color:var(--g3); box-shadow:0 0 0 3px rgba(46,204,113,.12);
}
.form-group input::placeholder { color:var(--muted); }

/* ── Error ── */
.auth-error {
  display:none; background:rgba(231,76,60,.15); border:1px solid rgba(231,76,60,.4);
  border-radius:8px; padding:.65rem .9rem;
  color:#e74c3c; font-size:.85rem; margin-bottom:1rem; line-height:1.4;
}

/* ── Submit button ── */
.auth-btn {
  width:100%; padding:.9rem;
  background:linear-gradient(135deg,#27ae60,#2ecc71);
  border:none; border-radius:12px;
  color:#fff; font-size:1rem; font-weight:800;
  cursor:pointer; transition:all .25s; margin-top:.25rem;
  letter-spacing:.3px;
}
.auth-btn:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(46,204,113,.4); }
.auth-btn:active { transform:scale(.98); }