/* signup_page.css — signup.php wizard styling. Extracted from its inline <style> block. */
:root{
   --kv-wiz-accent:#4f46e5; --kv-wiz-accent-2:#06b6d4; --kv-wiz-ok:#16a34a;
   --kv-wiz-line:#e5e7eb; --kv-wiz-muted:#94a3b8;
}
.kv-wiz-shell{max-width:640px;width:100%;}
.kv-wiz-card{border:0;border-radius:22px;box-shadow:0 20px 60px rgba(15,23,42,.10),0 2px 8px rgba(15,23,42,.04);overflow:hidden;}
/* ---- Progress stepper ---- */
.kv-steps{display:flex;align-items:center;gap:0;margin:0 0 6px;padding:0;list-style:none;}
.kv-step{flex:1 1 0;display:flex;flex-direction:column;align-items:center;position:relative;min-width:0;}
.kv-step .dot{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
   background:#fff;border:2px solid var(--kv-wiz-line);color:var(--kv-wiz-muted);font-weight:700;font-size:.85rem;
   transition:all .3s cubic-bezier(.4,0,.2,1);z-index:2;}
.kv-step .dot i{font-size:.9rem;}
.kv-step .lbl{font-size:.66rem;font-weight:600;color:var(--kv-wiz-muted);margin-top:6px;text-align:center;
   line-height:1.1;letter-spacing:.02em;white-space:nowrap;transition:color .3s;}
.kv-step::before{content:"";position:absolute;top:17px;left:-50%;width:100%;height:3px;background:var(--kv-wiz-line);z-index:1;transition:background .3s;}
.kv-step:first-child::before{display:none;}
.kv-step.is-active .dot{border-color:var(--kv-wiz-accent);color:var(--kv-wiz-accent);
   box-shadow:0 0 0 5px rgba(79,70,229,.14);transform:scale(1.06);}
.kv-step.is-active .lbl{color:var(--kv-wiz-accent);}
.kv-step.is-done .dot{background:linear-gradient(135deg,var(--kv-wiz-accent),var(--kv-wiz-accent-2));border-color:transparent;color:#fff;}
.kv-step.is-done::before{background:linear-gradient(90deg,var(--kv-wiz-accent),var(--kv-wiz-accent-2));}
.kv-step.is-done .lbl{color:#334155;}
@media (max-width:576px){ .kv-step .lbl{display:none;} .kv-step .dot{width:30px;height:30px;} }
/* ---- Step panels + transitions ---- */
.kv-pane{display:none;animation:kvFade .35s ease;}
.kv-pane.is-current{display:block;}
@keyframes kvFade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.kv-pane h3{font-weight:800;letter-spacing:-.02em;}
.form-control-lg,.form-select-lg{border-radius:12px;}
.form-control:focus,.form-select:focus{border-color:var(--kv-wiz-accent);box-shadow:0 0 0 .2rem rgba(79,70,229,.15);}
/* ---- Interest / chip selectors ---- */
.kv-chip{position:relative;display:inline-block;}
.kv-chip input{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none;margin:0;}
/* Interest chips — readable size and a real tap target (2026-08-31, founder: "change the font").
   These were font-size:.8rem with .5rem/.9rem padding. Because style.bundle.css pins the root to
   13px !important, that resolved to 9.6px text in ~7px/12px padding — a chip barely 26px tall.
   Two problems at once: text too small to read comfortably, and a target well under the ~44px
   minimum a thumb needs. Absolute units are used so the pinned root cannot shrink them again.
   Colour also darkened (#475569 -> #334155) for the same reason as the category labels. */
.kv-chip .lab{display:inline-block;padding:9px 15px;border:1.5px solid var(--kv-wiz-line);border-radius:999px;
   font-size:14px;line-height:1.35;font-weight:600;color:#334155;cursor:pointer;transition:all .15s;user-select:none;background:#fff;}
.kv-chip .lab:hover{border-color:var(--kv-wiz-accent);color:var(--kv-wiz-accent);}
.kv-chip input:checked + .lab{background:linear-gradient(135deg,var(--kv-wiz-accent),var(--kv-wiz-accent-2));
   border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(79,70,229,.28);}
.kv-int-scroll{max-height:320px;overflow-y:auto;padding-right:6px;}
/* Interest category headings — enlarged and darkened 2026-08-31 (founder: "fonts not readable").
   Was .68rem (~10.9px) in #64748b. At that size, uppercase and letter-spaced, it is hard work on a
   phone: #64748b on white is ~4.8:1, which only just clears the AA floor and is not comfortable for
   a small-caps treatment. Now ~12.8px in #334155 (~10:1) — still a quiet section label, but legible
   at arm's length on a mid-range handset, which is what most signups happen on.
   Only size, colour and letter-spacing change; layout and rhythm are preserved. */
/* px, NOT rem, deliberately: style.bundle.css sets `body, html { font-size: 13px !important }`,
   so every rem on this platform renders ~19% smaller than a 16px-root design intends. .8rem here
   computed to 10.4px, not the 12.8px it reads like. Absolute units make this label immune to that
   until the root size itself is dealt with. */
.kv-cat{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#334155;margin:16px 0 9px;}
.kv-cat:first-child{margin-top:0;}
/* ---- OTP inputs ---- */
.kv-otp-row{display:flex;gap:10px;justify-content:center;margin:4px 0 6px;}
.kv-otp-row input{width:52px;height:60px;text-align:center;font-size:1.6rem;font-weight:800;border:2px solid var(--kv-wiz-line);
   border-radius:14px;transition:all .15s;}
.kv-otp-row input:focus{border-color:var(--kv-wiz-accent);box-shadow:0 0 0 4px rgba(79,70,229,.14);outline:0;}
@media (max-width:400px){ .kv-otp-row input{width:42px;height:52px;font-size:1.3rem;} }
/* ---- password rules ---- */
#kvPwdRules .dot{width:1.1rem;display:inline-block;text-align:center;color:var(--kv-wiz-muted);font-weight:700;}
#kvPwdRules li.ok .dot{color:var(--kv-wiz-ok);} #kvPwdRules li.ok span:last-child{color:var(--kv-wiz-ok);}
.kv-reassure{background:linear-gradient(135deg,rgba(79,70,229,.08),rgba(6,182,212,.08));border:1px solid rgba(79,70,229,.18);
   border-radius:14px;padding:14px 16px;font-size:.86rem;color:#334155;display:flex;gap:10px;align-items:flex-start;}
.kv-reassure i{color:var(--kv-wiz-accent);font-size:1.1rem;margin-top:1px;}
.kv-skip-link{font-weight:600;text-decoration:none;}
.kv-usertype{cursor:pointer;transition:all .15s;}