/* public/css/auth.css */

/* =========================================================
   TOKENS
========================================================= */
:root{
  --bg: #f4f7ff;
  --bg2:#eaf0ff;
  --text:#0f172a;
  --muted: rgba(15,23,42,.72);

  --card: rgba(255,255,255,.96);
  --card2: rgba(255,255,255,.90);
  --border: rgba(15,23,42,.12);

  --field: rgba(255,255,255,.96);
  --field-border: rgba(15,23,42,.18);

  --primary:#7c3aed;   /* purple */
  --primary2:#06b6d4;  /* cyan */
  --danger:#ef4444;
  --success:#22c55e;

  --shadow: 0 22px 70px rgba(15,23,42,.16);
  --radius: 18px;

  --ring: 0 0 0 4px rgba(6,182,212,.14);
}

/* =========================================================
   BASE
========================================================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(124,58,237,.16), transparent 60%),
    radial-gradient(900px 520px at 82% 26%, rgba(6,182,212,.12), transparent 62%),
    linear-gradient(160deg, var(--bg), var(--bg2));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   LAYOUT
========================================================= */
.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 16px;
}

.auth-card{
  width:100%;
  max-width: 440px; /* tiny bump looks more premium */
  background: linear-gradient(180deg, var(--card), var(--card2));
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  backdrop-filter: blur(10px);
}

.auth-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(90deg, rgba(124,58,237,.25), rgba(6,182,212,.20));
  filter: blur(22px);
  opacity:.55;
  z-index:0;
  pointer-events:none;
}

.auth-inner{
  position:relative;
  z-index:1;
  padding:30px 28px 24px;
}

/* =========================================================
   BRAND
========================================================= */
.brand{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
}

.brand .brand-logo{
  height:44px;
  width:auto;
  object-fit:contain;
  display:block;
  flex:0 0 auto;
}

.brand.brand-stacked{
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.brand .logo{
  width:44px;
  height:44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(6,182,212,.85));
  display:grid;
  place-items:center;
  box-shadow: 0 16px 45px rgba(124,58,237,.22);
  flex:0 0 auto;
  border: 1px solid rgba(255,255,255,.12);
}

.brand .logo span{
  font-weight:900;
  letter-spacing:.6px;
}

.brand h1{
  margin:0;
  font-size:18px;
  line-height:1.2;
  font-weight:800;
}

.brand p{
  margin:2px 0 0;
  font-size:13px;
  color:var(--muted);
}

/* =========================================================
   HEADINGS
========================================================= */
.auth-title{
  margin:12px 0 4px;
  font-size:22px;
  letter-spacing:-.02em;
  font-weight:800;
}

.auth-subtitle{
  margin:0 0 18px;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.5;
}

/* =========================================================
   FORM
========================================================= */
.form-group{ margin-bottom:14px; }

.label{
  display:block;
  font-size:12.5px;
  color: var(--muted);
  margin-bottom:6px;
}

.input{
  width:100%;
  height:48px;
  padding: 0 14px;
  border-radius: 14px;
  border:1px solid var(--field-border);
  background: var(--field);
  color: var(--text);
  outline:none;
  transition: .18s ease;
}

.input::placeholder{ color: rgba(15,23,42,.42); }

.input:focus{
  border-color: rgba(6,182,212,.50);
  box-shadow: var(--ring);
}

.input-row{
  display:flex;
  gap:10px;
  align-items:center;
}

.input-row .input{ flex:1; }

.icon-btn{
  height:48px;
  width:52px;
  border-radius:14px;
  border:1px solid var(--field-border);
  background: rgba(255,255,255,.96);
  color: #334155;
  cursor:pointer;
  transition:.18s ease;
}

.icon-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(124,58,237,.45);
}

.icon-btn:active{ transform: translateY(0); opacity:.95; }

/* =========================================================
   BUTTONS
========================================================= */
.btn{
  width:100%;
  height:48px;
  border:0;
  border-radius:14px;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.3px;
  color:white;
  background: linear-gradient(90deg, var(--primary), var(--primary2));
  box-shadow: 0 16px 42px rgba(124,58,237,.18);
  transition: .18s ease;
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 55px rgba(6,182,212,.12), 0 18px 55px rgba(124,58,237,.12);
}

.btn:active{ transform: translateY(0); opacity:.97; }

.btn.secondary{
  background: transparent;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:none;
}

/* =========================================================
   LINKS / HELPERS
========================================================= */
.helper{
  margin-top:14px;
  text-align:center;
  font-size:13px;
  color: var(--muted);
}

.helper a{
  color: #0f766e;
  text-decoration:none;
  font-weight:800;
}

.helper a:hover{ text-decoration:underline; }

/* =========================================================
   FEEDBACK
========================================================= */
.error{
  margin-top:6px;
  display:block;
  font-size:12.5px;
  color: #fecaca;
}

.alert{
  padding:12px 14px;
  border-radius: 14px;
  font-size:13px;
  margin-bottom:14px;
  border:1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.92);
}

.alert.success{ border-color: rgba(34,197,94,.35); color:#bbf7d0; }
.alert.error{ border-color: rgba(239,68,68,.35); color:#fecaca; }

/* =========================================================
   NOTE
========================================================= */
.note{
  margin-top:12px;
  padding-top:12px;
  border-top: 1px solid rgba(15,23,42,.10);
  color: rgba(15,23,42,.62);
  font-size:12.5px;
  line-height:1.5;
}

/* =========================================================
   LIGHT MODE (controlled, not global nuking)
   Add class="light-mode" on <html> or <body>
========================================================= */
.light-mode{
  --bg: #f8fafc;
  --bg2:#eef2ff;

  --text:#0f172a;
  --muted: rgba(15,23,42,.68);

  --card: rgba(255,255,255,.92);
  --card2: rgba(255,255,255,.86);
  --border: rgba(15,23,42,.10);

  --field: rgba(255,255,255,.92);
  --field-border: rgba(15,23,42,.12);

  --shadow: 0 22px 70px rgba(2,6,23,.12);
  --ring: 0 0 0 4px rgba(6,182,212,.12);
}

.light-mode body{
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(124,58,237,.12), transparent 60%),
    radial-gradient(900px 520px at 82% 26%, rgba(6,182,212,.10), transparent 62%),
    linear-gradient(160deg, var(--bg), var(--bg2));
  color: var(--text);
}

.light-mode .helper a{ color:#0284c7; }
.light-mode .error{ color:#b91c1c; }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:420px){
  .auth-inner{ padding:22px 18px; }
  .auth-card{ max-width: 100%; }
}