/* ============================================================
   ONBOARDING — auth screen + multi-step register
   ============================================================ */
#auth-screen{ min-height:100vh; display:grid; grid-template-columns:.85fr 1.15fr; }
.auth-brand{
  background:var(--purple); color:#fff; padding:48px; display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.auth-brand svg.blob{ position:absolute; opacity:.35; }
.auth-brand .logo{ font-family:var(--font-display); font-weight:800; font-size:22px; display:flex; align-items:center; gap:8px; position:relative; z-index:1; }
.auth-brand .flower{ width:18px; height:18px; }
.auth-quote{ position:relative; z-index:1; max-width:340px; }
.auth-quote p{ font-family:var(--font-display); font-weight:600; font-size:clamp(20px,2.4vw,28px); line-height:1.35; }
.auth-quote span{ display:block; margin-top:14px; font-family:var(--font-mono); font-size:12.5px; opacity:.75; }
.auth-stats{ display:flex; gap:24px; position:relative; z-index:1; }
.auth-stats div b{ display:block; font-family:var(--font-display); font-size:24px; }
.auth-stats div span{ font-size:11px; opacity:.7; font-family:var(--font-mono); }

.auth-form-wrap{ display:flex; align-items:center; justify-content:center; padding:40px; }
.auth-form{ width:100%; max-width:400px; }
.auth-tabs{ display:inline-flex; padding:5px; border:var(--border-w) solid var(--ink); border-radius:999px; margin-bottom:28px; }
.auth-tabs button{ font-family:var(--font-display); font-weight:600; font-size:13.5px; padding:9px 20px; border-radius:999px; background:none; border:none; }
.auth-tabs button.active{ background:var(--ink); color:#fff; }
.auth-form h2{ font-family:var(--font-display); font-size:30px; margin-bottom:6px; }
.auth-form .sub{ color:var(--muted); font-size:14px; margin-bottom:26px; }
.auth-form .field{ margin-bottom:16px; }
.auth-error{ color:var(--pink); font-weight:600; font-size:13px; margin:2px 0 0; min-height:16px; }
.role-pick{ display:flex; gap:10px; margin-bottom:20px; }
.role-card{ flex:1; border:var(--border-w) solid var(--ink); border-radius:var(--r-md); padding:14px; text-align:center; cursor:pointer; transition:background .2s; }
.role-card.active{ background:var(--lime); }
.role-card svg{ width:22px; height:22px; margin:0 auto 8px; }
.role-card b{ display:block; font-family:var(--font-display); font-size:13px; }
.auth-form .foot-link{ text-align:center; margin-top:20px; font-size:13.5px; color:var(--muted); }
.auth-form .foot-link a{ color:var(--purple); font-weight:700; }

@media (max-width:900px){
  #auth-screen{ grid-template-columns:1fr; }
  .auth-brand{ display:none; }
}

/* ---------- register screen ---------- */
#register-screen{ min-height:100vh; grid-template-columns:.8fr 1.2fr; }
.reg-wrap{ display:flex; flex-direction:column; padding:36px clamp(20px,5vw,64px); max-height:100vh; overflow:auto; }
.reg-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.reg-head .logo{ font-family:var(--font-display); font-weight:800; font-size:20px; display:flex; gap:8px; align-items:center; }
.reg-head .flower{ width:16px; height:16px; }

.reg-progress{ margin-bottom:24px; }
.reg-progress .bar{ height:9px; background:var(--line); border:var(--border-w) solid var(--ink); border-radius:999px; overflow:hidden; }
.reg-progress .bar i{ display:block; height:100%; background:var(--lime); transition:width .35s var(--ease); }
.reg-progress .lab{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); margin-top:8px; }

.reg-step{ display:flex; flex-direction:column; gap:18px; }
.reg-step > h3{ font-family:var(--font-display); font-size:20px; }
.reg-step > .sec-sub{ color:var(--muted); font-size:13px; margin-top:-12px; }

.reg-field label{ display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
.reg-field .req{ color:var(--pink); font-weight:700; }
.reg-field .tag-opt{ font-family:var(--font-mono); font-size:9.5px; color:var(--muted); border:1.5px solid var(--line); border-radius:99px; padding:1px 7px; }
.reg-field.invalid .brutal-input,
.reg-field.invalid .brutal-textarea,
.reg-field.invalid .opt-list,
.reg-field.invalid .chip-row{ box-shadow:3px 3px 0 var(--pink); border-radius:var(--r-sm); }

.opt-list{ display:flex; flex-direction:column; gap:8px; }
.opt-list > label{ border:var(--border-w) solid var(--ink); border-radius:var(--r-sm); padding:11px 13px; font-family:var(--font-body); font-weight:600; font-size:13.5px; cursor:pointer; }
.opt-list > label.on{ background:var(--purple-soft); }
.opt-list input{ accent-color:var(--purple); width:16px; height:16px; }

.file-drop{ border:var(--border-w) dashed var(--ink); border-radius:var(--r-md); padding:16px; font-size:13px; }
.file-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.file-list .pill{ font-family:var(--font-mono); font-size:11px; background:var(--bg); border:1.5px solid var(--ink); border-radius:99px; padding:4px 10px; }

.reg-error{ color:var(--pink); font-weight:600; font-size:13px; margin:16px 0 0; min-height:18px; }
.reg-nav{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; align-items:center; }
.reg-nav .spacer{ flex:1; }

@media (max-width:960px){
  #register-screen{ grid-template-columns:1fr; }
  #register-screen .auth-brand{ display:none; }
  .reg-wrap{ max-height:none; }
}