/* Botomat-style auth pages (matches wa-app-setup pattern) */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f8f9fb;
  --ink:#111827;
  --ink-2:#374151;
  --ink-3:#6b7280;
  --ink-4:#9ca3af;
  --rule:#e5e7eb;
  --rule-soft:#f3f4f6;
  --gray-50:#f9fafb;
  --gray-100:#f3f4f6;
  --gray-200:#e5e7eb;
  --accent:#fbbf24;
  --accent-hover:#f59e0b;
  --amber-200:#fde68a;
  --red:#dc2626;
  --red-soft:#fee2e2;
  --green:#16a34a;
  --emerald-500:#10b981;
}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Heebo',-apple-system,system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  -webkit-font-smoothing:antialiased;
  font-weight:700;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input{font:inherit;color:inherit}

/* ─── Auth shell ────────────────────────────────────────── */
.auth-wrap{
  width:100%;
  max-width:440px;
  animation:fadeIn .35s ease-out;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.auth-card{
  background:#fff;
  border-radius:40px;
  border:1px solid var(--rule);
  box-shadow:0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(17,24,39,.04);
  padding:32px 28px;
}
@media(min-width:640px){
  .auth-card{padding:40px 40px}
}

.auth-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:28px;
  text-align:center;
}
.auth-icon{
  width:64px;
  height:64px;
  border-radius:16px;
  background:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  box-shadow:0 12px 24px -8px rgba(252,211,77,.5), 0 0 0 1px rgba(252,211,77,.2);
}
.auth-icon svg{stroke:var(--ink);stroke-width:2.5}
.auth-title{
  font-size:28px;
  font-weight:900;
  color:var(--ink);
  letter-spacing:-.02em;
  line-height:1.15;
  margin-bottom:4px;
}
@media(min-width:640px){.auth-title{font-size:32px}}
.auth-sub{
  font-size:14px;
  color:var(--ink-3);
  font-weight:700;
  line-height:1.4;
}

/* ─── Form fields ───────────────────────────────────────── */
.field{margin-bottom:16px}
.label{
  display:block;
  font-weight:700;
  font-size:13px;
  color:var(--ink-2);
  margin-bottom:8px;
}
.input-wrap{position:relative}
.input{
  width:100%;
  padding:16px 18px;
  background:var(--gray-50);
  border-radius:16px;
  border:2px solid transparent;
  outline:none;
  font:inherit;
  font-weight:700;
  color:var(--ink);
  transition:all .15s;
}
.input::placeholder{color:var(--ink-4);font-weight:600}
.input:focus{border-color:var(--accent);background:#fff}
.input-icon{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  color:var(--ink-4);
  pointer-events:none;
  display:flex;
}
.input.with-icon{padding-right:46px}
.input.with-iconL{padding-left:46px}
.input[dir="ltr"]{text-align:right}
.input-eye{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);
  cursor:pointer;
  border-radius:8px;
  transition:background .15s;
}
.input-eye:hover{background:var(--gray-100);color:var(--ink)}

/* ─── Password strength meter ───────────────────────────── */
.pw-strength{margin-top:10px;display:flex;align-items:center;gap:10px}
.pw-bar{flex:1;height:6px;background:var(--gray-100);border-radius:999px;overflow:hidden}
.pw-bar > span{display:block;height:100%;border-radius:999px;transition:width .3s,background .3s}
.pw-strength .lbl{font-size:11px;font-weight:900;color:var(--ink-2)}

/* ─── Buttons ───────────────────────────────────────────── */
.btn-primary{
  width:100%;
  padding:16px;
  background:var(--ink);
  color:#fff;
  border-radius:16px;
  font-weight:900;
  font-size:15px;
  letter-spacing:.01em;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 10px 25px -5px rgba(17,24,39,.25);
  transition:transform .12s, background .15s, opacity .15s;
}
.btn-primary:hover{background:#000}
.btn-primary:active{transform:scale(.97)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-ghost{
  color:var(--ink-3);
  font-weight:700;
  font-size:13px;
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .15s;
}
.btn-ghost:hover{color:var(--ink)}

.auth-foot{
  text-align:center;
  margin-top:24px;
  font-size:14px;
  color:var(--ink-3);
  font-weight:700;
}
.auth-foot a{color:var(--ink);font-weight:900}
.auth-foot a:hover{text-decoration:underline}

/* ─── Alert ─────────────────────────────────────────────── */
.alert{
  padding:12px 16px;
  background:var(--red-soft);
  color:#991b1b;
  border-radius:14px;
  font-size:13px;
  font-weight:700;
  margin-bottom:16px;
  text-align:center;
  display:none;
}
.alert.ok{background:#dcfce7;color:#15803d}
.alert.on{display:block}

/* ─── Brand top ─────────────────────────────────────────── */
.brand-top{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:24px;
  font-size:14px;
  font-weight:800;
  color:var(--ink-3);
}
.brand-top .dot{width:9px;height:9px;border-radius:50%;background:var(--accent)}