@import url('https://cdn.jsdelivr.net/npm/@fontsource/syne@5.0.18/index.css');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;min-height:100%}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}

/* ─── Auth Pages ─────────────────────────────────────────────────────── */
.auth-page{
  background:#06060f; color:#eeeeff;
  font-family:system-ui,-apple-system,sans-serif;
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:20px;
  background-image:
    radial-gradient(ellipse at 20% 50%,rgba(191,90,242,.12),transparent 55%),
    radial-gradient(ellipse at 80% 20%,rgba(0,229,255,.1),transparent 55%),
    linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,50px 50px,50px 50px;
}
.auth-container{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:20px; padding:40px 36px; max-width:440px; width:100%;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.auth-container h1{
  font-family:'Syne',system-ui,sans-serif;
  font-size:24px; font-weight:800; color:#fff; margin-bottom:5px;
}
.auth-container .subtitle{
  font-size:13px; color:rgba(238,238,255,.45); margin-bottom:28px;
}
.auth-form .field{margin-bottom:16px}
.auth-form label{
  display:block; font-size:10px; color:rgba(238,238,255,.4);
  text-transform:uppercase; letter-spacing:.9px; font-weight:600; margin-bottom:6px;
}
.auth-form input{
  width:100%; padding:11px 14px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  color:#eeeeff; font-size:14px; font-family:inherit; outline:none;
  transition:border-color .18s;
}
.auth-form input:focus{border-color:rgba(0,229,255,.4)}
.input-prefix{display:flex; align-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:10px; overflow:hidden}
.input-prefix span{padding:11px 10px 11px 14px;font-size:13px;color:rgba(238,238,255,.4);white-space:nowrap;border-right:1px solid rgba(255,255,255,.08)}
.input-prefix input{background:none;border:none;padding:11px 13px;flex:1}
.input-prefix input:focus{outline:none}
.auth-form small{display:block;font-size:11px;color:rgba(238,238,255,.3);margin-top:4px}

.btn-primary{
  width:100%; padding:12px; border-radius:10px; border:none;
  background:linear-gradient(135deg,#00e5ff,#bf5af2);
  color:#000; font-weight:800; font-size:15px; cursor:pointer;
  font-family:'Syne',system-ui,sans-serif; letter-spacing:.2px;
  transition:transform .18s; margin-top:8px;
}
.btn-primary:hover{transform:scale(1.02)}

.auth-switch{text-align:center;font-size:13px;color:rgba(238,238,255,.4);margin-top:20px}
.auth-switch a{color:#00e5ff;text-decoration:none;font-weight:600}
.auth-switch a:hover{text-decoration:underline}

.alert{border-radius:10px;padding:12px 16px;margin-bottom:18px;font-size:13px}
.alert-error{background:rgba(255,100,100,.1);border:1px solid rgba(255,100,100,.25);color:#ff7b7b}
.alert-success{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.25);color:#34d399}

/* ─── Logo ───────────────────────────────────────────────────────────── */
.logo{
  display:block; font-family:'Syne',system-ui,sans-serif;
  font-size:22px; font-weight:800; color:#00e5ff;
  text-decoration:none; letter-spacing:-.5px; margin-bottom:20px;
}
.logo span{color:#bf5af2}

/* ─── Landing Page ───────────────────────────────────────────────────── */
.landing-page{
  background:#06060f; color:#eeeeff;
  font-family:system-ui,-apple-system,sans-serif; min-height:100vh;
}

/* ─── Misc ───────────────────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}