/* =========================================================
   AUTH UI — Simple Center Card (Dark + Gold)
   ========================================================= */

:root{
  --bg0:#070A0F;
  --bg1:#0B1020;
  --card: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.60);

  --gold1:#F6D06A;
  --gold2:#D6A94B;

  --shadow: 0 28px 85px rgba(0,0,0,.55);
  --r18: 18px;
  --r14: 14px;
}

html, body{ height:100%; }

body.auth{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg1), var(--bg0));
  overflow-x:hidden;
}

/* background simple gradient + glow */
.auth-bg{
  position:fixed; inset:0;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(246,208,106,.13), transparent 60%),
    radial-gradient(900px 520px at 85% 25%, rgba(214,169,75,.10), transparent 62%),
    radial-gradient(900px 520px at 50% 110%, rgba(255,255,255,.06), transparent 65%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  pointer-events:none;
}

.auth-wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 28px 16px;
  position:relative;
}

/* card */
.auth-card{
  width: 100%;
  max-width: 420px;
  border-radius: var(--r18);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.15));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow:hidden;
  backdrop-filter: blur(10px);
}

/* header */
.auth-head{
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

.auth-title{
  margin:0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .2px;
}

.auth-subtitle{
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

.auth-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.75);
  font-size: 12px;
  white-space: nowrap;
}
.auth-badge i{ color: rgba(246,208,106,.85); }

/* body */
.auth-body{ padding: 16px 18px 18px; }

.auth-form{ display:flex; flex-direction:column; gap: 14px; }

/* alerts */
.auth-alert{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  font-size: 13px;
  margin-bottom: 10px;
}
.auth-alert i{ margin-top: 2px; }
.auth-alert--danger{ border-color: rgba(255, 99, 99, .25); }
.auth-alert--success{ border-color: rgba(60, 220, 140, .22); }
.auth-alert--warn{ border-color: rgba(255, 200, 80, .22); }

/* form groups */
.f-group{ display:flex; flex-direction:column; gap: 8px; }
.f-label{
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.80);
}

.f-control{
  position: relative;
  display:flex;
  align-items:center;
  border-radius: var(--r14);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,12,18,.35);
  overflow:hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.f-control:focus-within{
  border-color: rgba(246,208,106,.65);
  box-shadow: 0 0 0 4px rgba(246,208,106,.12);
}

/* icon box */
.f-icon{
  width: 46px;
  height: 46px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.04);
  border-right: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.72);
}
.f-icon i{ color: rgba(255,255,255,.78); }

/* input */
.f-input{
  width: 100%;
  height: 46px;
  border: 0;
  outline: none;
  background: transparent;
  color: rgba(255,255,255,.92);
  padding: 0 46px 0 12px; /* space for toggle */
  font-size: 14px;
}
.f-input::placeholder{ color: rgba(255,255,255,.40); }

/* autofill fix */
.f-input:-webkit-autofill,
.f-input:-webkit-autofill:hover,
.f-input:-webkit-autofill:focus{
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: 0 0 0 1000px rgba(10,12,18,.35) inset !important;
}

/* toggle */
.f-toggle{
  position:absolute;
  right: 6px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.72);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.f-toggle:hover{
  border-color: rgba(246,208,106,.35);
  background: rgba(246,208,106,.10);
  color: rgba(255,255,255,.92);
}

/* row */
.auth-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-top: -2px;
}

.auth-check{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.70);
  cursor:pointer;
  margin:0;
}
.auth-check input{
  width: 16px; height: 16px;
  accent-color: var(--gold2);
}

.auth-link{
  font-size: 13px;
  color: rgba(246,208,106,.90);
  text-decoration:none;
}
.auth-link:hover{ text-decoration:underline; color: rgba(246,208,106,1); }

/* button */
.btn-gold{
  height: 48px;
  border-radius: 14px;
  border: 0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  font-weight: 800;
  font-size: 14px;
  color: rgba(10,10,10,.92);
  background: linear-gradient(135deg, var(--gold1), var(--gold2));
  box-shadow: 0 16px 44px rgba(214,169,75,.16);
}
.btn-gold:active{ transform: translateY(1px); }

/* note */
.auth-note{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  color: rgba(255,255,255,.55);
  font-size: 12px;
  display:flex;
  align-items:center;
  gap: 10px;
}
.auth-note i{ color: rgba(255,255,255,.60); }

/* footer */
.auth-foot{
  padding: 14px 18px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.50);
  font-size: 12px;
  text-align:center;
}