/* SwiftFlyerLab auth pages: premium glass card on a dark emerald scene */
:root{
  --night:#05100B;--ink:#0B1A14;--green:#0E7A4E;--bright:#1BA46B;--mint:#7EE2B0;--text:#E6F4EC;--muted:#9DBBAD;
  --glass:rgba(255,255,255,.07);--glass-line:rgba(255,255,255,.16);--err:#FF9C9C;
  --grad:linear-gradient(135deg,#075C3A 0%,#0E7A4E 45%,#1BA46B 100%);--grad-btn:linear-gradient(135deg,#075C3A 0%,#0A6B44 50%,#0E7A4E 100%);
  --f:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:var(--f);color:var(--text);background:var(--night);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--mint)}
.scene{position:fixed;inset:0;z-index:0;overflow:hidden;background:radial-gradient(120% 80% at 50% -10%,#0D2A1E 0%,#05100B 60%)}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.orb.a{width:520px;height:520px;left:-140px;top:-120px;background:#1BA46B}
.orb.b{width:460px;height:460px;right:-120px;bottom:-140px;background:#0E7A4E}
.orb.c{width:260px;height:260px;right:18%;top:12%;background:#8EF0BE;opacity:.22}
.tile{position:absolute;width:190px;aspect-ratio:4/5;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02));box-shadow:0 30px 60px rgba(0,0,0,.35)}
.tile::before{content:"";position:absolute;inset:14px 14px auto;height:46%;border-radius:12px;background:var(--grad);opacity:.55}
.tile::after{content:"";position:absolute;left:14px;right:40%;bottom:30px;height:12px;border-radius:6px;background:rgba(255,255,255,.28);box-shadow:0 -22px 0 rgba(255,255,255,.18)}
.tile.t1{left:7%;top:18%;transform:rotate(-10deg)}
.tile.t2{right:8%;top:52%;transform:rotate(9deg)}
.tile.t3{left:14%;bottom:-40px;transform:rotate(6deg);opacity:.6}
.grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(60% 60% at 50% 45%,#000,transparent 80%);-webkit-mask-image:radial-gradient(60% 60% at 50% 45%,#000,transparent 80%)}
@media (prefers-reduced-motion:no-preference){
  .orb.a{animation:float1 16s ease-in-out infinite alternate}.orb.b{animation:float1 19s ease-in-out infinite alternate-reverse}
  .tile.t1{animation:bob 9s ease-in-out infinite}.tile.t2{animation:bob 11s ease-in-out infinite reverse}
}
@keyframes float1{to{transform:translate(60px,40px) scale(1.1)}}
@keyframes bob{50%{translate:0 -14px}}

.top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:18px 24px}
.top img{width:128px;height:auto;display:block}
.top a.back{color:var(--muted);text-decoration:none;font-size:14px;font-weight:600}
.top a.back:hover{color:#fff}
.stage{position:relative;z-index:2;flex:1;display:grid;place-items:center;padding:12px 16px 48px}
.card{width:100%;max-width:440px;position:relative;border-radius:28px;padding:34px 32px 30px;background:var(--glass);border:1px solid var(--glass-line);
  backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);
  box-shadow:0 40px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(255,255,255,.04)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(142,240,190,.55),rgba(255,255,255,.05) 40%,rgba(27,164,107,.35));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.card .badge{width:54px;height:54px;border-radius:16px;background:var(--grad);display:grid;place-items:center;box-shadow:0 12px 26px rgba(27,164,107,.4);margin-bottom:18px}
.card .badge svg{width:26px;height:26px;color:#fff}
.card h1,.card h2{margin:0;font-size:28px;letter-spacing:-.02em;line-height:1.15;color:#fff}
.card .lead{margin:8px 0 24px;color:var(--muted);font-size:15px;line-height:1.55}
form{display:grid;gap:14px}
label.f{display:grid;gap:7px;font-size:13.5px;font-weight:600;color:#CFE3D8}
.inp{position:relative}
.inp input{width:100%;font:500 16px var(--f);color:#fff;background:rgba(5,16,11,.55);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:13px 14px;transition:border-color .15s,box-shadow .15s}
.inp input::placeholder{color:#6F8F80}
.inp input:focus{outline:none;border-color:var(--bright);box-shadow:0 0 0 4px rgba(27,164,107,.22)}
.inp .eye{position:absolute;right:8px;top:50%;translate:0 -50%;background:none;border:0;color:var(--muted);cursor:pointer;padding:6px;border-radius:8px}
.inp .eye:hover{color:#fff}.inp .eye svg{width:20px;height:20px;display:block}
.inp.pw input{padding-right:44px}
.code input{letter-spacing:.5em;text-align:center;font-size:24px;font-weight:700}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}
.row a{text-decoration:none;font-weight:600}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#CFE3D8;line-height:1.5;cursor:pointer}
.check input{appearance:none;flex:none;width:20px;height:20px;margin-top:1px;border-radius:6px;border:1.5px solid rgba(255,255,255,.3);background:rgba(5,16,11,.55);cursor:pointer;display:grid;place-items:center}
.check input:checked{background:var(--grad);border-color:transparent}
.check input:checked::after{content:"";width:10px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.check input:focus-visible{outline:3px solid var(--bright);outline-offset:2px}
.check a{font-weight:700}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px 20px;border:0;border-radius:14px;background:var(--grad-btn);color:#fff;font:700 16px var(--f);cursor:pointer;box-shadow:0 14px 30px rgba(14,122,78,.45);transition:transform .15s,box-shadow .15s,opacity .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 18px 36px rgba(14,122,78,.55)}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}
.btn svg{width:18px;height:18px}
.link-btn{background:none;border:0;color:var(--mint);font:600 14px var(--f);cursor:pointer;padding:0}
.msg{min-height:1.3em;font-size:14px;font-weight:600;margin:2px 0 0}
.msg.err{color:var(--err)}.msg.ok{color:var(--mint)}
.meter{height:6px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--grad);transition:width .2s}
.hint{font-size:12.5px;color:var(--muted);margin-top:-4px}
.foot{margin-top:22px;text-align:center;font-size:14px;color:var(--muted)}
.foot a{font-weight:700;text-decoration:none}
.legal{position:relative;z-index:2;text-align:center;font-size:12.5px;color:#6F8F80;padding:0 16px 24px}
.legal a{color:#9DBBAD}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#0B1A14;padding:8px 14px;border-radius:8px;z-index:100;font-weight:700}
.skip:focus{left:12px}
:focus-visible{outline:3px solid var(--bright);outline-offset:3px}
@media (max-width:520px){.card{padding:28px 20px 24px;border-radius:24px}.tile{display:none}.top{padding:14px 16px}}
/* /signup: personal or business (8 Nov 2026) */
.modes{display:grid;gap:10px;margin:4px 0 18px}
.mode{display:grid;gap:4px;text-align:left;padding:14px 16px;border-radius:14px;border:1.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:inherit;font:inherit;cursor:pointer;text-decoration:none}
.mode b{font-size:15px}.mode span{font-size:13px;opacity:.8;line-height:1.45}
.mode.on{border-color:#1BA46B;box-shadow:0 0 0 3px rgba(27,164,107,.25)}
.mode:focus-visible{outline:2px solid #1BA46B;outline-offset:2px}
.mode b{display:flex;align-items:center;gap:8px}.mode b svg{flex:none}
.mode.me{background:rgba(27,164,107,.14);border-color:rgba(126,226,176,.55)}
.mode.me b{color:#7EE2B0}
.mode.biz{background:linear-gradient(135deg,rgba(201,164,92,.28),rgba(201,164,92,.08));border-color:rgba(232,201,138,.6)}
.mode.biz b{color:#F1D79C}.mode.biz .go{margin-left:auto;font-size:18px}
.mode.biz:hover{border-color:#E8C98A}
.mode.me.on{border-color:#1BA46B;box-shadow:0 0 0 3px rgba(27,164,107,.28)}