/* register.html — extracted CSS (sprint 14 ship 37 2026-05-30). Was inline <style> in register.html. Non-functional move. */

:root {
  --bg:      #f4f3ef;
  --bg-2:    #ffffff;
  --bg-3:    #eae9e3;
  --brand:   #1b2a4a;
  --accent:  #1a7a4a;
  --ink:     #15141a;
  --ink-2:   #5c5b62;
  --ink-3:   #9e9da4;
  --border:  #e2e1dd;
  --r:       12px;
  --r-sm:    8px;
  --shadow:  0 2px 16px rgba(21,20,26,0.08);
  --danger:  #dc2626;
  --font:    'Plus Jakarta Sans', sans-serif;
  --mono:    'DM Mono', monospace;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }
body { background:var(--bg); font-family:var(--font); color:var(--ink); min-height:100vh; -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }
button { font:inherit; cursor:pointer; border:none; }

/*  Nav  */
nav {
  position:sticky; top:0; z-index:100;
  background:rgba(244,243,239,0.95);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border); padding:0 20px;
}
.nav-inner { max-width:1100px; margin:0 auto; height:60px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nav-logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-mark { width:32px; height:32px; background:var(--brand); border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.logo-text { font-size:19px; font-weight:800; color:var(--brand); letter-spacing:-0.5px; }
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-link { font-size:14px; font-weight:600; color:var(--ink-2); padding:8px 12px; border-radius:var(--r-sm); transition:color 0.15s,background 0.15s; white-space:nowrap; }
.nav-link:hover { color:var(--ink); background:var(--bg-3); }
.btn-nav {
  font-family:var(--font); font-size:13px; font-weight:700; color:var(--brand);
  background:transparent; border:1.5px solid rgba(21,20,26,0.16); cursor:pointer;
  padding:8px 16px; border-radius:var(--r-sm); transition:background 0.15s; white-space:nowrap;
  min-height:38px; text-decoration:none; display:inline-flex; align-items:center;
}
.btn-nav:hover { background:var(--bg-3); }
@media(max-width:640px) { .nav-link { display:none; } }

/*  Page heading  */
.page-heading { background:var(--bg); padding:48px 20px 36px; border-bottom:1px solid var(--border); text-align:center; }
.page-heading h1 { font-size:clamp(26px,4vw,38px); font-weight:800; color:var(--brand); letter-spacing:-0.5px; margin-bottom:8px; }
.page-heading p { font-size:15px; color:var(--ink-2); }

/*  Step indicator  */
.steps-wrap { max-width:560px; margin:0 auto; padding:24px 20px 0; }
.step-bar { display:flex; align-items:center; gap:0; margin-bottom:8px; }
.step-dot {
  width:28px; height:28px; border-radius:50%; border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:var(--ink-3); flex-shrink:0;
  transition:background 0.2s, border-color 0.2s, color 0.2s;
}
.step-dot.active { background:var(--brand); border-color:var(--brand); color:#fff; }
.step-dot.done { background:var(--accent); border-color:var(--accent); color:#fff; }
.step-line { flex:1; height:2px; background:var(--border); transition:background 0.2s; }
.step-line.done { background:var(--accent); }
.step-label { font-size:12px; color:var(--ink-3); text-align:center; margin-top:4px; }

/*  Main  */
.main-wrap { max-width:560px; margin:0 auto; padding:24px 20px 64px; }

/*  Step cards  */
.step-card { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r); padding:28px; box-shadow:var(--shadow); display:none; }
.step-card.active { display:block; }
.step-num { font-size:10px; font-weight:700; color:var(--ink-3); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:6px; }
.step-title { font-size:20px; font-weight:800; color:var(--brand); margin-bottom:6px; }
.step-sub { font-size:14px; color:var(--ink-2); margin-bottom:24px; line-height:1.6; }

/*  Role cards  */
.role-grid { display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
.role-card {
  display:flex; align-items:center; gap:16px;
  border:1.5px solid var(--border); border-radius:var(--r);
  padding:16px 18px; cursor:pointer; transition:border-color 0.15s, background 0.15s;
  user-select:none;
}
.role-card:hover { border-color:var(--brand); background:var(--bg); }
.role-card.selected { border-color:var(--brand); background:rgba(27,42,74,0.04); }
.role-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; background:var(--bg-3); }
.role-name { font-size:15px; font-weight:800; color:var(--brand); }
.role-desc { font-size:12px; color:var(--ink-2); margin-top:2px; line-height:1.4; }
.role-note { font-size:12px; color:var(--ink-3); text-align:center; margin-top:8px; line-height:1.55; }

/*  Form primitives  */
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.form-label { font-size:12.5px; font-weight:700; color:var(--ink-2); }
.form-input, .form-select {
  width:100%; height:48px; border:1.5px solid var(--border); border-radius:var(--r-sm);
  background:var(--bg); font-family:var(--font); font-size:14px; color:var(--ink);
  padding:0 14px; outline:none; transition:border-color 0.15s; appearance:none;
}
.form-input:focus, .form-select:focus { border-color:var(--accent); background:#fff; }
.form-input::placeholder { color:var(--ink-3); }

/*  OTP input  */
.otp-input {
  width:100%; height:64px; font-size:28px; font-family:var(--mono); font-weight:700;
  text-align:center; letter-spacing:0.25em;
  border:2px solid var(--border); border-radius:var(--r-sm);
  background:var(--bg); color:var(--ink);
  outline:none; transition:border-color 0.15s;
}
.otp-input:focus { border-color:var(--accent); background:#fff; }

/*  Phone row  */
.phone-row { display:flex; gap:10px; }
.phone-prefix { height:48px; padding:0 14px; background:var(--bg-3); border:1.5px solid var(--border); border-radius:var(--r-sm); font-size:14px; font-weight:700; color:var(--brand); display:flex; align-items:center; flex-shrink:0; white-space:nowrap; }

/*  Buttons  */
.btn-primary {
  width:100%; height:52px; background:var(--accent); color:#fff;
  border:none; border-radius:var(--r-sm); font-family:var(--font); font-size:15px; font-weight:700;
  cursor:pointer; transition:background 0.15s; display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:4px;
}
.btn-primary:hover:not(:disabled) { background:#15613b; }
.btn-primary:disabled { opacity:0.55; cursor:not-allowed; }

.btn-google {
  width:100%; height:48px; background:var(--bg-3); color:var(--ink);
  border:1.5px solid var(--border); border-radius:var(--r-sm); font-family:var(--font);
  font-size:14px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px;
  transition:background 0.15s, border-color 0.15s;
}
.btn-google:hover:not(:disabled) { background:var(--bg-2); border-color:var(--brand); }
.btn-google:disabled { opacity:0.55; cursor:not-allowed; }

.divider { display:flex; align-items:center; gap:12px; color:var(--ink-3); font-size:12px; margin:16px 0; }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--border); }

.btn-ghost {
  background:none; border:none; font-size:12.5px; font-weight:600;
  color:var(--ink-3); cursor:pointer; margin-top:12px; display:block; width:100%; text-align:center;
}
.btn-ghost:hover { color:var(--ink); }

/*  Error bar  */
.error-bar { display:none; padding:10px 14px; background:rgba(220,38,38,0.06); border:1px solid rgba(220,38,38,0.15); border-radius:var(--r-sm); font-size:13px; color:var(--danger); font-weight:600; margin-bottom:12px; }
.error-bar.show { display:block; }

/*  Spinner  */
@keyframes spin { to { transform:rotate(360deg); } }
.spin { animation:spin .7s linear infinite; display:inline-block; }

/*  Success  */
.done-icon { font-size:56px; text-align:center; margin-bottom:16px; }
.done-title { font-size:22px; font-weight:800; color:var(--brand); text-align:center; margin-bottom:8px; }
.done-body { font-size:14px; color:var(--ink-2); text-align:center; line-height:1.65; margin-bottom:24px; }

/*  Footer  */
footer { background:var(--bg-2); border-top:1px solid var(--border); padding:32px 20px 24px; }
.footer-inner { max-width:1100px; margin:0 auto; text-align:center; }
.footer-inner p { font-size:13px; color:var(--ink-3); margin-bottom:8px; }
.footer-inner a { color:var(--ink-2); }