/* ─── Flownex Admin — shared design system ─────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&display=swap');

:root{
  --brand:#00D9C4; --brand-2:#00BCA9; --brand-dim:rgba(0,217,196,.12); --brand-border:rgba(0,217,196,.22);
  --coral:#FF6B35; --coral-2:#E85A26;
  --bg:#07080D; --s1:#0C0E18; --s2:#10131F; --s3:#141826;
  --border:#1A1F2E; --border2:#222840;
  --text:#EDF0F9; --text2:#8892AE; --text3:#454D68;
  --green:#2DD4A0; --red:#F87171; --amber:#FBBF24; --purple:#A78BFA;
  --mono:'DM Mono',monospace;
  --display:'Space Grotesk',sans-serif;
  --body:'DM Sans',sans-serif;
  --r:8px; --r2:12px; --r3:16px;
}

*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; }
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.6;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:var(--body); cursor:pointer; }

/* ─── AUTH LAYOUT (shared by login/signup/verify/forgot/reset) ────── */
.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0,217,196,.07) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(167,139,250,.04) 0%, transparent 50%);
}
.auth-card{
  width:100%;
  max-width:420px;
  background:var(--s1);
  border:1px solid var(--border);
  border-radius:var(--r3);
  padding:36px;
  position:relative;
}
.auth-logo{ text-align:center; margin-bottom:28px; }
.auth-logo-mark{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--display);
  font-size:22px;
  font-weight:700;
  color:var(--text);
  letter-spacing:-.01em;
}
.auth-logo-mark svg{ width:28px; height:28px; }
.auth-title{
  font-family:var(--display);
  font-size:22px;
  font-weight:700;
  color:var(--text);
  text-align:center;
  margin-bottom:6px;
  letter-spacing:-.02em;
}
.auth-sub{
  font-size:13px;
  color:var(--text2);
  text-align:center;
  margin-bottom:26px;
  line-height:1.55;
}

/* ─── FORM FIELDS ──────────────────────────────────────────────────── */
.form-group{ margin-bottom:16px; }
.form-label{
  display:block;
  font-size:12px;
  font-weight:500;
  color:var(--text2);
  margin-bottom:6px;
  letter-spacing:.02em;
}
.form-input{
  width:100%;
  padding:11px 14px;
  background:var(--s2);
  border:1px solid var(--border2);
  border-radius:var(--r);
  color:var(--text);
  font-size:14px;
  font-family:var(--body);
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.form-input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(0,217,196,.14);
}
.form-input::placeholder{ color:var(--text3); }
.form-input.error{ border-color:var(--red); }
.form-error{ font-size:11px; color:var(--red); margin-top:5px; }
.form-hint{ font-size:11px; color:var(--text3); margin-top:5px; line-height:1.5; }

/* ─── BUTTONS ──────────────────────────────────────────────────────── */
.btn{
  width:100%;
  padding:12px;
  border-radius:var(--r);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  border:none;
  transition:background .15s, transform .08s, box-shadow .15s;
  letter-spacing:-.01em;
  font-family:var(--body);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.btn-primary{
  background:var(--brand);
  color:#07080D;
  margin-bottom:12px;
}
.btn-primary:hover{ background:var(--brand-2); box-shadow:0 8px 24px rgba(0,217,196,.18); }
.btn-primary:active{ transform:translateY(1px); }
.btn-outline{
  background:none;
  color:var(--text);
  border:1px solid var(--border2);
}
.btn-outline:hover{ background:var(--s2); border-color:var(--text3); }
.btn-coral{
  background:var(--coral);
  color:#fff;
}
.btn-coral:hover{ background:var(--coral-2); }

/* ─── OAUTH BUTTONS ────────────────────────────────────────────────── */
.oauth-btn{
  width:100%;
  padding:11px;
  border-radius:var(--r);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  border:1px solid var(--border2);
  background:var(--s2);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:10px;
  transition:background .15s, border-color .15s;
  font-family:var(--body);
}
.oauth-btn:hover{ background:var(--s3); border-color:var(--text3); }
.oauth-btn svg{ width:16px; height:16px; flex-shrink:0; }

/* ─── DIVIDER ──────────────────────────────────────────────────────── */
.divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:20px 0;
}
.divider::before, .divider::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--border);
}
.divider span{
  font-size:11px;
  color:var(--text3);
  font-family:var(--mono);
  letter-spacing:.05em;
}

/* ─── AUTH FOOTER LINK ─────────────────────────────────────────────── */
.auth-footer{
  text-align:center;
  font-size:13px;
  color:var(--text3);
  margin-top:20px;
}
.auth-footer a{
  color:var(--brand);
  cursor:pointer;
  text-decoration:none;
}
.auth-footer a:hover{ text-decoration:underline; }

.legal-foot{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--border);
  font-size:11px;
  color:var(--text3);
  text-align:center;
  line-height:1.6;
}
.legal-foot a{ color:var(--brand); }

/* ─── PASSWORD STRENGTH BAR ────────────────────────────────────────── */
.password-strength{
  height:3px;
  border-radius:2px;
  margin-top:6px;
  background:var(--border);
  overflow:hidden;
  position:relative;
}
.password-strength::after{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:var(--pw-strength, 0%);
  background:var(--pw-color, var(--red));
  border-radius:2px;
  transition:width .25s, background .25s;
}

/* ─── PROGRESS STEPS (welcome screen) ──────────────────────────────── */
.ps-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:32px;
  padding:0 20px;
}
.ps-dot{
  width:26px;
  height:26px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  flex-shrink:0;
  font-family:var(--mono);
}
.ps-done{ background:var(--green); color:#07080D; }
.ps-active{
  background:var(--brand);
  color:#07080D;
  box-shadow:0 0 0 5px rgba(0,217,196,.18);
}
.ps-todo{ background:var(--border2); color:var(--text3); }
.ps-line{
  flex:1;
  height:1.5px;
  background:var(--border);
  border-radius:1px;
}
.ps-line.done{ background:var(--green); }

/* ─── TOAST ────────────────────────────────────────────────────────── */
.toast{
  position:fixed;
  bottom:32px;
  left:50%;
  transform:translate(-50%, 120%);
  background:var(--s1);
  border:1px solid var(--brand-border);
  border-radius:var(--r);
  padding:12px 20px;
  font-size:13px;
  color:var(--text);
  box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(0,217,196,.15);
  z-index:1000;
  font-family:var(--body);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  max-width:360px;
}
.toast.show{ transform:translate(-50%, 0); }

/* ─── PANEL / CARD UTILITIES ───────────────────────────────────────── */
.panel{
  background:var(--s2);
  border:1px solid var(--border2);
  border-radius:var(--r);
  padding:16px;
}
.mono{ font-family:var(--mono); }
.brand{ color:var(--brand); }
.dim{ color:var(--text3); }

/* ─── WELCOME / ONBOARDING ─────────────────────────────────────────── */
.welcome-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 20px 40px;
  background:radial-gradient(ellipse at 50% 0%, rgba(0,217,196,.09) 0%, transparent 60%);
}
.welcome-inner{ width:100%; max-width:580px; }
.welcome-head{ text-align:center; margin-bottom:32px; }
.welcome-head .auth-logo-mark{ margin-bottom:14px; }
.welcome-head h1{
  font-family:var(--display);
  font-size:26px;
  font-weight:700;
  color:var(--text);
  margin-bottom:6px;
  letter-spacing:-.02em;
}
.welcome-head p{ font-size:14px; color:var(--text2); }

/* ─── RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width:480px){
  .auth-card{ padding:28px 22px; }
  .auth-title{ font-size:20px; }
}