/* Shared design system for login.html, signup.html, onboarding.html */
:root{
  --ink:#1D2226; --ink-soft:#666666; --ink-faint:#8A8D91;
  --paper:#F8F9FA; --panel:#FFFFFF; --panel-2:#F3F5F7;
  --line:#CCCCCC; --line-strong:#BFBFBF; --border-input:#8C8C8C;
  --signal:#0A66C2; --signal-ink:#004182; --signal-tint:#E8F3FF;
  --stamp:#CC1016; --stamp-tint:#FCE9E9;
  --success:#057642; --success-tint:#E8F5EE;
  --input-bg:#FCFCFD;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F5F5F5; --ink-soft:#A5A5A5; --ink-faint:#767676;
    --paper:#1D2226; --panel:#1B1F23; --panel-2:#26292C;
    --line:#38434F; --line-strong:#4A5561; --border-input:#5E6A76;
    --signal:#70B5F9; --signal-ink:#A6C8FF; --signal-tint:rgba(112,181,249,.14);
    --stamp:#F05454; --stamp-tint:rgba(240,84,84,.14);
    --success:#3DC28B; --success-tint:rgba(61,194,139,.14);
    --input-bg:#242A30;
  }
}
:root[data-theme="dark"]{
  --ink:#F5F5F5; --ink-soft:#A5A5A5; --ink-faint:#767676;
  --paper:#1D2226; --panel:#1B1F23; --panel-2:#26292C;
  --line:#38434F; --line-strong:#4A5561; --border-input:#5E6A76;
  --signal:#70B5F9; --signal-ink:#A6C8FF; --signal-tint:rgba(112,181,249,.14);
  --stamp:#F05454; --stamp-tint:rgba(240,84,84,.14);
  --success:#3DC28B; --success-tint:rgba(61,194,139,.14);
  --input-bg:#242A30;
}
*{box-sizing:border-box;}
body{
  margin:0; min-height:100vh; background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.5;
}
a{color:var(--signal);}

/* Brand mark, shared everywhere */
.auth-brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; color:var(--ink); text-decoration:none;}
.auth-brand-mark{
  width:32px; height:32px; border-radius:8px; background:var(--signal); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.auth-brand-mark svg{width:18px; height:18px; display:block;}

/* ---- Split-screen shell (login) ---- */
.auth-shell{
  display:flex; height:100vh; position:relative; overflow:hidden;
  background:linear-gradient(165deg, var(--signal-tint) 0%, var(--paper) 100%);
}
.auth-shell::before, .auth-shell::after{
  content:''; position:absolute; border-radius:50%; filter:blur(2px); z-index:0; pointer-events:none;
}
.auth-shell::before{width:640px; height:640px; top:-220px; right:-220px; background:radial-gradient(circle, rgba(10,102,194,.16), rgba(10,102,194,0) 70%);}
.auth-shell::after{width:520px; height:520px; bottom:-220px; left:-160px; background:radial-gradient(circle, rgba(10,102,194,.12), rgba(10,102,194,0) 70%);}
.auth-hero{
  flex:1 1 50%; position:relative; z-index:1; padding:40px 56px;
  display:flex; flex-direction:column; justify-content:center;
}
.auth-hero-inner{position:relative; z-index:1; max-width:460px; margin:0 auto; width:100%;}
.auth-hero .auth-brand{margin-bottom:28px;}
.auth-hero h1{font-size:34px; font-weight:800; line-height:1.15; margin:0 0 12px; letter-spacing:-.01em;}
.auth-hero h1 .accent{color:var(--signal);}
.auth-hero-sub{font-size:15px; color:var(--ink-soft); margin:0 0 24px; max-width:42ch;}
.auth-feature-list{display:flex; flex-direction:column; gap:14px; margin-bottom:28px;}
.auth-feature-item{display:flex; align-items:flex-start; gap:12px;}
.auth-feature-icon{
  width:36px; height:36px; border-radius:9px; background:var(--panel); border:1px solid var(--line-strong);
  color:var(--signal); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.auth-feature-title{font-weight:700; font-size:14px; color:var(--ink); margin:0 0 1px;}
.auth-feature-desc{font-size:12.5px; color:var(--ink-soft); margin:0;}

.auth-mockup{position:relative; max-width:300px; margin:0 auto 40px 0; transform:scale(.85); transform-origin:left top;}
.auth-mockup-card{
  background:var(--panel); border:1px solid var(--line-strong); border-radius:12px; padding:14px;
  box-shadow:0 20px 40px rgba(0,0,0,.1);
}
.auth-mockup-banner{height:52px; border-radius:8px; background:linear-gradient(135deg, var(--signal), var(--signal-ink)); position:relative;}
.auth-mockup-badge{
  position:absolute; top:8px; left:8px; width:22px; height:22px; border-radius:6px; background:var(--panel);
  color:var(--signal); display:flex; align-items:center; justify-content:center;
}
.auth-mockup-avatar{
  width:48px; height:48px; border-radius:50%; background:var(--panel-2); border:3px solid var(--panel);
  margin:-24px 0 0 14px; position:relative;
}
.auth-mockup-lines{padding:12px 0 2px;}
.auth-mockup-line{height:8px; border-radius:4px; background:var(--panel-2); margin-bottom:7px;}
.auth-mockup-line.w60{width:60%;}
.auth-mockup-line.w40{width:40%;}
.auth-mockup-checklist{
  position:absolute; right:-16px; bottom:20px; width:150px; background:var(--panel); border:1px solid var(--line-strong);
  border-radius:10px; padding:12px 14px; box-shadow:0 16px 32px rgba(0,0,0,.12);
}
.auth-mockup-checklist-title{font-size:11px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.03em; margin:0 0 8px;}
.auth-mockup-check-row{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-soft); margin-bottom:5px;}
.auth-mockup-check-row:last-child{margin-bottom:0;}
.auth-mockup-check-icon{color:var(--success); flex-shrink:0;}
.auth-mockup-float{
  position:absolute; left:-14px; bottom:-18px; display:flex; align-items:center; gap:8px;
  background:var(--panel); border:1px solid var(--line-strong); border-radius:10px; padding:8px 12px;
  box-shadow:0 16px 32px rgba(0,0,0,.12); font-size:12px; font-weight:600;
}
.auth-mockup-float-icon{
  width:28px; height:28px; border-radius:7px; background:var(--signal-tint); color:var(--signal-ink);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.auth-panel{flex:1 1 50%; position:relative; z-index:1; display:flex; align-items:center; justify-content:center; padding:32px 20px;}
.auth-panel-inner{width:100%; max-width:400px;}

/* ---- Centered shell (signup, onboarding) ---- */
.auth-centered-shell{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:48px 20px; position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--signal-tint) 0%, var(--paper) 55%);
}
.auth-centered-shell::before, .auth-centered-shell::after{
  content:''; position:absolute; border-radius:50%; z-index:0;
  background:radial-gradient(circle, rgba(10,102,194,.14), rgba(10,102,194,0) 70%);
}
.auth-centered-shell::before{width:480px; height:480px; top:-140px; left:-140px;}
.auth-centered-shell::after{width:380px; height:380px; bottom:-140px; right:-100px;}
.auth-centered-inner{position:relative; z-index:1; width:100%; max-width:460px; display:flex; flex-direction:column; align-items:center;}
.auth-centered-inner .auth-brand{margin-bottom:28px;}
.auth-centered-inner h1{text-align:center; font-size:28px; font-weight:800; margin:0 0 8px; letter-spacing:-.01em;}
.auth-centered-inner .auth-tagline{text-align:center; color:var(--ink-soft); margin:0 0 28px; font-size:15px;}

/* ---- Numbered step indicator ---- */
.auth-steps{display:flex; align-items:flex-start; width:100%; margin-bottom:24px;}
.auth-step{display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 auto;}
.auth-step-circle{
  width:32px; height:32px; border-radius:50%; background:var(--panel); border:2px solid var(--line-strong);
  color:var(--ink-faint); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.auth-step-label{font-size:12px; font-weight:600; color:var(--ink-faint); white-space:nowrap;}
.auth-step-line{flex:1 1 auto; height:2px; background:var(--line-strong); margin:15px 8px 0; min-width:16px;}
.auth-step.active .auth-step-circle{border-color:var(--signal); background:var(--signal); color:#fff;}
.auth-step.active .auth-step-label{color:var(--ink);}
.auth-step.done .auth-step-circle{border-color:var(--signal); background:var(--signal); color:#fff;}
.auth-step.done .auth-step-label{color:var(--signal);}
.auth-step.done ~ .auth-step-line, .auth-step-line.done{background:var(--signal);}

/* ---- Card ---- */
.auth-card{background:var(--panel); border:1px solid var(--line-strong); border-radius:12px; padding:22px; width:100%; box-shadow:0 8px 24px rgba(0,0,0,.05);}
.auth-card-head{display:flex; align-items:flex-start; gap:14px; margin-bottom:22px;}
.auth-card-icon{
  width:44px; height:44px; border-radius:10px; background:var(--signal-tint); color:var(--signal-ink);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.auth-card-head h2{font-size:17px; font-weight:700; margin:0 0 3px;}
.auth-card-head p{font-size:13px; color:var(--ink-soft); margin:0;}

/* ---- Onboarding: individual vs business selector ---- */
.onboard-type-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px;}
.onboard-type-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left;
  background:var(--panel); border:1.5px solid var(--line-strong); border-radius:10px; padding:16px;
  cursor:pointer; font-family:inherit; transition:border-color .15s ease, background-color .15s ease;
}
.onboard-type-card:hover{border-color:var(--signal);}
.onboard-type-card.selected{border-color:var(--signal); background:var(--signal-tint);}
.onboard-type-icon{
  width:36px; height:36px; border-radius:9px; background:var(--signal-tint); color:var(--signal-ink);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.onboard-type-card.selected .onboard-type-icon{background:var(--signal); color:#fff;}
.onboard-type-title{font-weight:700; font-size:14px; color:var(--ink);}
.onboard-type-desc{font-size:12.5px; color:var(--ink-soft); line-height:1.4;}
@media (max-width:560px){
  .onboard-type-grid{grid-template-columns:1fr;}
}

/* ---- Fields ---- */
.field{margin-bottom:13px;}
.field:last-of-type{margin-bottom:0;}
.field label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px;}
.field input, .field select{
  width:100%; font-family:inherit; font-size:15px; color:var(--ink); background:var(--input-bg, #FCFCFD);
  border:1px solid var(--border-input); border-radius:8px; padding:10px 13px; line-height:1.5;
}
.field input:focus, .field select:focus{outline:2px solid var(--signal); outline-offset:1px;}
.field-note, .field-hint{margin:6px 0 0; font-size:13px; color:var(--ink-faint); line-height:1.5;}
.field-hint a{color:var(--signal);}
.otp-boxes{display:flex; gap:8px; justify-content:center;}
.otp-box{
  width:44px; height:52px; font-family:inherit; font-size:1.4rem; font-weight:700; text-align:center;
  color:var(--ink); background:var(--input-bg, #FCFCFD); border:1px solid var(--border-input); border-radius:8px;
}
.otp-box:focus{outline:2px solid var(--signal); outline-offset:1px;}

.icon-input-wrap{position:relative;}
.icon-field input{padding-left:42px;}
.icon-field-icon{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--ink-faint); pointer-events:none; display:flex;}
.icon-field-icon svg{display:block;}
.icon-field-toggle{
  position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer;
  color:var(--ink-faint); padding:4px; display:flex; align-items:center; justify-content:center;
}
.icon-field-toggle:hover{color:var(--ink-soft);}
.field-label-row{display:flex; align-items:center; justify-content:space-between;}
.field-label-row a{font-size:13px; font-weight:600; text-decoration:none;}
.field-label-row a:hover{text-decoration:underline;}

/* ---- Buttons ---- */
.btn{
  width:100%; font-family:inherit; font-size:15px; font-weight:600;
  padding:12px 18px; border-radius:24px; border:1px solid var(--signal); background:var(--signal); color:#fff; cursor:pointer;
  margin-top:4px; display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn:hover{background:var(--signal-ink); border-color:var(--signal-ink);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn.outline{background:transparent; color:var(--signal); border-color:var(--signal);}
.btn.outline:hover{background:var(--signal-tint);}
.btn.block{width:100%;}
.btn-link{
  display:block; width:100%; background:none; border:none; color:var(--signal); font-family:inherit;
  font-size:13px; font-weight:600; cursor:pointer; padding:10px 0 0; text-align:center;
}
.btn-link:hover{text-decoration:underline;}
.btn-link:disabled{color:var(--ink-faint); cursor:not-allowed;}
.actions{display:flex; gap:10px; margin-top:4px;}
.actions .btn{flex:1;}

.auth-divider{display:flex; align-items:center; gap:10px; margin:16px 0;}
.auth-divider::before, .auth-divider::after{content:''; flex:1; height:1px; background:var(--line-strong);}
.auth-divider span{font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--ink-faint); background:var(--panel-2); padding:3px 8px; border-radius:4px;}
.btn.google{background:var(--panel); color:var(--ink); border:1px solid var(--border-input);}
.btn.google:hover{background:var(--panel-2);}
.btn.google svg{flex-shrink:0;}
.auth-inline-notice{font-size:12.5px; color:var(--ink-faint); margin:6px 0 0; text-align:center;}

.switch{text-align:center; margin-top:22px; font-size:14px; color:var(--ink-soft);}
.switch a{color:var(--signal); font-weight:600; text-decoration:none;}
.switch a:hover{text-decoration:underline;}

.verified-row{display:flex; align-items:center; gap:8px; margin-bottom:16px; font-size:14px; color:var(--ink-soft);}
.verified-badge{display:inline-flex; align-items:center; gap:4px; color:var(--success); font-weight:600;}

.notice{font-size:13px; padding:10px 12px; border-left:2px solid var(--stamp); background:var(--stamp-tint); color:var(--ink); border-radius:4px; margin-top:16px;}
.notice.good{border-left-color:var(--success); background:var(--success-tint);}
.dev-otp-notice{font-size:13px; padding:10px 12px; border-left:2px solid var(--signal); background:var(--signal-tint); color:var(--ink); border-radius:4px; margin-bottom:16px;}
.dev-otp-notice code{font-weight:700; color:var(--signal-ink); font-size:1rem; letter-spacing:.06em;}

/* ---- Bottom feature row (signup/onboarding) ---- */
.auth-feature-row{display:flex; gap:28px; margin-top:32px; justify-content:center; flex-wrap:wrap;}
.auth-feature-row-item{display:flex; flex-direction:column; align-items:center; gap:8px; max-width:130px; text-align:center;}
.auth-feature-row-icon{color:var(--signal);}
.auth-feature-row-title{font-size:13px; font-weight:700; color:var(--ink);}
.auth-feature-row-desc{font-size:12px; color:var(--ink-faint);}

.auth-footer{margin-top:40px; text-align:center; font-size:12px; color:var(--ink-faint);}

.onboarding-step[hidden]{display:none;}

@media (max-width:900px){
  .auth-shell{flex-direction:column;}
  .auth-hero{display:none;}
  .auth-panel{padding:40px 20px;}
}
@media (max-width:560px){
  .auth-steps{gap:2px;}
  .auth-step-label{display:none;}
  .auth-feature-row{gap:18px;}
}