:root{--ink:#050d3b;--ink-soft:#596b90;--muted:#7786a7;--line:#dbe4f3;--blue:#2563eb;--blue-strong:#0f5fff;--blue-deep:#1d4ed8;--green:#059669;--green-soft:#ecfdf5}*{box-sizing:border-box}html{min-height:100%;background:#eef5ff}body{min-height:100vh;margin:0;color:var(--ink);font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 8% 6%,rgba(149,125,255,.22),transparent 35%),radial-gradient(circle at 92% 18%,rgba(74,204,231,.18),transparent 34%),linear-gradient(135deg,#f2f0ff 0%,#fbfdff 50%,#ecf8ff 100%)}button,a,input{font:inherit;-webkit-tap-highlight-color:transparent}.screen-stage{display:grid;place-items:center;min-height:100vh;padding:15px 0}.phone-card{position:relative;isolation:isolate;width:min(402px,calc(100vw - 58px));min-height:min(798px,calc(100vh - 30px));overflow:hidden;padding:34px 31px 29px;border:1px solid rgba(255,255,255,.92);border-radius:45px;background:rgba(255,255,255,.86);box-shadow:0 30px 90px rgba(22,48,113,.14),inset 0 0 0 1px rgba(255,255,255,.76)}.phone-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 8%,rgba(255,255,255,.98),transparent 33%),radial-gradient(circle at 8% 69%,rgba(83,121,255,.06),transparent 31%),radial-gradient(circle at 98% 77%,rgba(65,204,231,.1),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.92),rgba(253,254,255,.98))}.phone-bg:before,.phone-bg:after{content:"";position:absolute;border:1.5px solid rgba(109,130,255,.13);border-radius:50%}.phone-bg:before{width:315px;height:210px;right:-123px;top:-86px;transform:rotate(37deg)}.phone-bg:after{width:306px;height:188px;left:-121px;top:378px;transform:rotate(-22deg)}.brand-lockup{display:grid;justify-items:center;gap:4px;text-align:center}.brand-orb{display:grid;place-items:center;width:70px;height:70px;border:1px solid rgba(148,163,184,.12);border-radius:22px;background:linear-gradient(145deg,#fff 0%,#f4f7ff 100%);box-shadow:0 16px 36px rgba(12,28,88,.12),inset 0 1px 0 rgba(255,255,255,.96)}.brand-svg{width:47px;height:47px;filter:drop-shadow(0 8px 12px rgba(37,99,235,.28))}.brand-lockup strong{font-size:29px;line-height:1;font-weight:800;letter-spacing:-.045em}.brand-lockup small{color:var(--muted);font-size:14px;line-height:1.2;font-weight:500}.screen-title{margin:34px auto 0;text-align:center}.screen-title h1{margin:0 auto;color:var(--ink);font-size:30px;line-height:1.07;font-weight:800;letter-spacing:-.052em}.screen-title p{max-width:304px;margin:11px auto 0;color:var(--ink-soft);font-size:15px;line-height:1.46;font-weight:400}.primary-cta{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:60px;border:0;border-radius:20px;color:white;background:linear-gradient(180deg,#3b82f6 0%,#2563eb 58%,#1d4ed8 100%);box-shadow:0 18px 36px rgba(37,99,235,.28),inset 0 1px 0 rgba(255,255,255,.25);cursor:pointer;font-size:17px;line-height:1;font-weight:700;letter-spacing:-.01em}.primary-cta span{font:inherit;line-height:1;letter-spacing:inherit}.arrow-icon{position:absolute;right:22px;width:22px;height:22px;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.arrow-icon path{stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.link-action{display:block;color:#0b6bff;text-align:center;text-decoration:none;font-size:15px;font-weight:600;letter-spacing:-.015em}.soft-panel{border:1px solid rgba(226,232,240,.82);background:rgba(255,255,255,.82);box-shadow:0 22px 52px rgba(22,48,113,.08),inset 0 1px 0 rgba(255,255,255,.88);backdrop-filter:blur(18px)}.input-row{display:flex;align-items:center;gap:14px;height:52px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.72);padding:0 16px;color:#94a3b8}.input-row .lead-icon{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:13px;color:#2563eb;background:#eff6ff}.input-row svg{width:22px;height:22px}.input-row input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--ink);font-size:15px;font-weight:500}.input-row input::placeholder{color:#98a5ba}.trust-pill,.help-pill{display:flex;align-items:center;justify-content:center;gap:11px;border:1px solid rgba(16,185,129,.16);border-radius:18px;background:rgba(236,253,245,.72);color:#059669}.trust-pill .shield,.help-pill .help-icon{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#d1fae5}.trust-pill svg,.help-pill svg{width:22px;height:22px}.trust-pill p,.help-pill p{margin:0;font-size:14px;line-height:1.25;font-weight:600;letter-spacing:-.025em}.help-pill{width:max-content;max-width:100%;margin-inline:auto;padding:5px 17px 5px 5px;border-color:rgba(226,232,240,.95);background:rgba(255,255,255,.7);color:var(--ink);box-shadow:0 12px 28px rgba(15,23,42,.04)}.help-pill .help-icon{background:#eef4ff}.help-pill a{color:#0b6bff;text-decoration:none;font-weight:600}.method-pill{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;padding:0 27px;border:1px solid rgba(226,232,240,.9);border-radius:18px;background:rgba(255,255,255,.72);box-shadow:0 12px 28px rgba(15,23,42,.035);font-size:16px;font-weight:700;letter-spacing:-.025em}.method-pill svg{width:24px;height:24px}.otp-row{display:grid;gap:13px}.otp-row.six{grid-template-columns:repeat(6,1fr)}.otp-row.four{grid-template-columns:repeat(4,1fr)}.otp-box{display:grid;place-items:center;height:51px;border:1.6px solid #dce3ef;border-radius:15px;background:rgba(255,255,255,.56);color:#1166ff;font-size:25px;font-weight:500}.otp-box.active{border-color:#1268ff;box-shadow:0 0 0 1px rgba(18,104,255,.1)}.small-note{margin:17px 0 0;text-align:center;color:#293552;font-size:14px;line-height:1.4}.small-note a{color:#0b6bff;text-decoration:none;font-weight:600}.tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;border:1px solid rgba(219,228,243,.95);border-radius:18px;background:rgba(248,250,252,.72)}.tab{display:flex;align-items:center;justify-content:center;gap:9px;height:40px;border:0;border-radius:15px;background:transparent;color:#69758c;font-size:15px;font-weight:600}.tab.active{color:#1268ff;background:#f8fbff;border:1px solid rgba(37,99,235,.18);box-shadow:0 8px 18px rgba(37,99,235,.06)}.tab svg{width:22px;height:22px}.label{margin:20px 0 9px;color:#202a48;font-size:15px;font-weight:600;letter-spacing:-.02em}.secondary-btn{display:flex;align-items:center;justify-content:center;gap:13px;width:100%;height:49px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.78);color:#111827;font-size:15px;font-weight:700;letter-spacing:-.015em}.secondary-btn svg{width:22px;height:22px}@media (max-width:380px){.phone-card{width:100vw;min-height:100vh;border-radius:0;padding-inline:24px}.screen-stage{padding:0}.screen-title h1{font-size:30px}.otp-row{gap:10px}}
.choose-username .brand-lockup{margin-top:0}.username-panel{position:relative;margin-top:43px;padding:28px 23px 25px;border-radius:30px}.avatar-wrap{position:absolute;left:23px;top:28px;width:88px;height:88px}.avatar{display:grid;place-items:center;width:82px;height:82px;border-radius:50%;background:#eef4ff;border:1px solid #d7e2ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}.avatar svg{width:68px;height:68px}.edit-dot{position:absolute;right:0;bottom:2px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:white;box-shadow:0 8px 18px rgba(15,23,42,.09)}.edit-dot svg{width:19px;height:19px}.username-copy{min-height:95px;margin-left:108px}.username-copy h1{margin:0;font-size:30px;line-height:1.08;font-weight:800;letter-spacing:-.052em}.username-copy p{margin:13px 0 0;color:var(--ink-soft);font-size:15px;line-height:1.45}.username-input{display:flex;align-items:center;gap:13px;width:100%;height:52px;margin-top:28px;padding:0 18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.62);color:#8b98ad}.username-input span{font-size:25px;font-weight:600}.username-input input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--ink);font-size:16px}.username-input input::placeholder{color:#93a0b3}.username-help{margin:14px 0 20px;color:#64748b;font-size:14px}.skip{margin-top:20px}.stepper{display:flex;align-items:center;justify-content:center;gap:0;width:210px;margin:30px auto 0}.stepper span{width:18px;height:18px;border-radius:50%;background:#1268f7;box-shadow:0 5px 12px rgba(18,104,247,.2)}.stepper i{width:84px;height:3px;background:#1268f7}.stepper .ring{position:relative;background:#1268f7;box-shadow:0 0 0 7px #dbe8ff,0 0 0 13px rgba(219,232,255,.75)}.step-text{margin:24px 0 0;text-align:center;color:#65748d;font-size:16px;font-weight:500}
