:root{
  color-scheme:dark;
  --bg:#000814;
  --bg2:#020b1b;
  --panel:rgba(5,17,39,.82);
  --panel-border:rgba(114,158,219,.34);
  --field:#071631;
  --field-border:#254878;
  --text:#f7fbff;
  --muted:#9aabc4;
  --cyan:#16bfff;
  --blue:#167bff;
  --violet:#764dff;
  --magenta:#d444f3;
  --danger:#ff7188;
  --success:#40dda4;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);-webkit-font-smoothing:antialiased}
body{min-height:100dvh;overflow-x:hidden}
button,input{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.auth-shell{min-height:100dvh;background:
 radial-gradient(ellipse at 30% -10%,rgba(18,78,171,.13),transparent 36%),
 radial-gradient(ellipse at 92% 18%,rgba(31,78,184,.08),transparent 24%),
 linear-gradient(180deg,#020b1d 0%,#000814 48%,#000611 100%);position:relative;overflow:hidden}
.auth-shell:before{content:"";position:fixed;inset:0;pointer-events:none;background:
 linear-gradient(145deg,transparent 0 23%,rgba(25,84,186,.09) 23.2%,transparent 43%),
 radial-gradient(circle at 83% 8%,rgba(35,105,255,.13) 0 1px,transparent 2px);opacity:.75}
.auth-shell:after{content:"";position:fixed;left:-14vw;right:-12vw;bottom:-150px;height:250px;pointer-events:none;background:
 radial-gradient(ellipse at 54% 105%,rgba(31,130,255,.18),transparent 49%),
 radial-gradient(ellipse at 76% 100%,rgba(151,66,255,.11),transparent 50%);filter:blur(12px)}
.auth-stage{width:100%;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:max(24px,env(safe-area-inset-top)) 18px max(28px,env(safe-area-inset-bottom));position:relative;z-index:1}
.ambient,.energy-streak{display:none}
.auth-card{width:min(100%,382px);margin:auto 0;display:flex;flex-direction:column;align-items:stretch;position:relative}
.brand-area{width:100%;display:flex;justify-content:center;margin:0 auto 14px;overflow:visible}
.approved-brand-lockup{display:block;width:176px;height:auto;mix-blend-mode:normal;filter:drop-shadow(0 0 16px rgba(29,153,255,.08));border-radius:0}
.auth-heading{order:2;text-align:center;margin:0;padding:20px 22px 3px;border:1px solid var(--panel-border);border-bottom:0;border-radius:22px 22px 0 0;background:linear-gradient(180deg,rgba(8,23,50,.84),rgba(3,12,29,.82));box-shadow:0 -8px 35px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.018);backdrop-filter:blur(13px)}
.auth-heading h1{font-size:15px;line-height:1.25;margin:0;font-weight:750;letter-spacing:-.015em;color:#fff}
.auth-heading>p:last-child{font-size:11px;line-height:1.4;color:#9aaac2;margin:5px 0 0}
.form-stage{order:3;padding:13px 20px 16px;border-left:1px solid var(--panel-border);border-right:1px solid var(--panel-border);background:linear-gradient(180deg,rgba(3,12,29,.82),rgba(2,9,22,.87));backdrop-filter:blur(13px)}
.auth-form{animation:formIn .24s ease both}
@keyframes formIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.input-group{position:relative;margin-bottom:11px}
.input-group>label,.label-line label{display:block;font-size:10px;color:#d8e1ef;margin:0 0 5px;font-weight:520}
.label-line{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}
.label-line label{margin:0}
.inline-link{border:0;background:none;color:var(--cyan);font-size:10px;font-weight:600;padding:0;white-space:nowrap}
.input-box{height:53px;border:1px solid var(--field-border);border-radius:10px;background:linear-gradient(180deg,rgba(7,22,49,.95),rgba(5,17,39,.98));display:flex;align-items:center;position:relative;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;overflow:hidden}
.input-box:focus-within{border-color:#397bca;box-shadow:0 0 0 3px rgba(30,137,255,.08),0 0 22px rgba(38,118,255,.07)}
.field-icon{width:38px;height:100%;display:grid;place-items:center;flex:0 0 38px;color:#18baff}
.field-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.input-box input{min-width:0;flex:1;height:100%;border:0;outline:0;background:transparent;color:#f6faff;padding:0 12px 0 0;font-size:12px}
.input-box input::placeholder{color:#697c99}
.input-box input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 1000px #071631 inset;transition:background-color 9999s ease-out}
.password-toggle{border:0;background:none;color:#8ea4c4;font-size:9px;padding:8px 10px;white-space:nowrap}
.primary-button{width:100%;height:50px;border:0;border-radius:14px;color:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;position:relative;margin-top:12px;background:linear-gradient(100deg,#0cbcff 0%,#167cff 35%,#7650ff 70%,#d648ee 100%);box-shadow:0 12px 30px rgba(61,75,255,.18),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .14s ease,filter .18s ease}
.primary-button:active{transform:scale(.986)}
.primary-button:disabled{opacity:.58;cursor:default}
.primary-button svg{position:absolute;right:15px;width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.secondary-button{width:100%;height:44px;border-radius:13px;border:1px solid #35598a;color:#e9f3ff;background:rgba(5,18,40,.84);margin-top:9px}
.mode-switch{text-align:center;margin:22px 0 1px;font-size:10px;color:#9aaac2}
.mode-switch button{border:0;background:none;color:#17c0fa;font-weight:650;padding:5px;font-size:10px}
.back-link{display:block;margin:15px auto 0;border:0;background:none;color:#1abcfb;font-size:10px}
.terms-row{display:flex;gap:9px;align-items:flex-start;margin:10px 1px 2px;color:#9eafc8;font-size:10px;line-height:1.4}
.terms-row input{accent-color:#536bff;margin-top:2px}
.signup-grid{display:grid;grid-template-columns:1fr;gap:0}
.field-hint{font-size:9px;min-height:0;margin-top:4px;color:#8293ad}.field-hint.ok{color:var(--success)}.field-hint.bad{color:var(--danger)}
.step-note,.success-note{display:flex;gap:10px;padding:11px 12px;margin:0 0 13px;border:1px solid rgba(57,105,163,.3);border-radius:12px;background:rgba(8,26,54,.6);color:#9eb0c8;font-size:10px;line-height:1.45}
.note-icon{color:#24c2ff}.note-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.step-note p,.success-note p{margin:0}.reset-code-note>span{width:25px;height:25px;border-radius:8px;background:linear-gradient(135deg,#13bbff,#8455ff);display:grid;place-items:center;color:#fff;font-weight:800}
.success-state{text-align:center;padding:14px 0 4px}.success-orb{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;background:linear-gradient(135deg,rgba(20,191,255,.3),rgba(116,75,255,.36));border:1px solid rgba(82,175,255,.45)}.success-orb svg{width:27px;height:27px;fill:none;stroke:#fff;stroke-width:2}.success-state h2{margin:0;font-size:18px}.success-state p{color:#98a9c0;font-size:11px;line-height:1.5;margin:8px auto;max-width:290px}
.error-msg{order:4;min-height:12px;text-align:center;color:#ff7c91;font-size:10px;line-height:1.4;padding:0 20px 12px;border:1px solid var(--panel-border);border-top:0;border-radius:0 0 22px 22px;background:rgba(2,9,22,.87)}
.error-msg:not(:empty){padding-top:5px;padding-bottom:5px}.error-msg.is-success{color:#4bdfa8}
.auth-footer{display:none}
.footer-lock svg{width:12px;height:12px;fill:none;stroke:#647893;stroke-width:1.6}
.preview-badge{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);padding:6px 10px;border-radius:999px;border:1px solid rgba(83,126,188,.34);background:rgba(2,10,23,.84);color:#7990ad;font-size:9px;backdrop-filter:blur(12px)}
@media(max-width:480px){
 .auth-stage{padding-left:14px;padding-right:14px;justify-content:flex-start}
 .auth-card{margin:2px 0 24px;width:min(100%,360px)}
 .approved-brand-lockup{width:166px}
 .auth-heading{padding-top:18px}
 .form-stage{padding-left:17px;padding-right:17px}
}
@media(max-width:350px){.auth-stage{padding-left:10px;padding-right:10px}.approved-brand-lockup{width:150px}.form-stage{padding-left:13px;padding-right:13px}.auth-heading{padding-left:14px;padding-right:14px}}
@media(min-width:700px){
 .auth-stage{padding-top:38px;padding-bottom:38px}
 .auth-card{width:365px}
 .approved-brand-lockup{width:174px;margin-bottom:0}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}


/* ===== V3 Native-first visual layer ===== */
html,body{background:#010712}
body{min-height:100dvh}
.auth-shell{min-height:100dvh;background:#020a18}
.auth-shell:before{background:radial-gradient(circle at 50% 5%,rgba(15,92,206,.16),transparent 34%),linear-gradient(180deg,rgba(6,23,54,.25),transparent 30%);opacity:1}
.auth-shell:after{left:-20%;right:-20%;bottom:-90px;height:220px;background:radial-gradient(ellipse at 46% 100%,rgba(20,121,255,.23),transparent 48%),radial-gradient(ellipse at 72% 96%,rgba(148,64,255,.17),transparent 46%);filter:blur(20px)}
.auth-stage{min-height:100dvh;padding:max(20px,env(safe-area-inset-top)) 18px max(22px,env(safe-area-inset-bottom));justify-content:flex-start}
.auth-card{width:min(100%,420px);margin:0 auto;min-height:calc(100dvh - max(20px,env(safe-area-inset-top)) - max(22px,env(safe-area-inset-bottom)));display:flex;justify-content:center;padding:2vh 0 3vh}
.brand-area{margin:0 auto 18px}
.approved-brand-lockup{width:168px;filter:drop-shadow(0 0 18px rgba(28,158,255,.16));image-rendering:auto}
.auth-heading{order:2;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;padding:4px 10px 16px}
.auth-heading h1{font-size:19px;line-height:1.2;font-weight:760;letter-spacing:-.025em}
.auth-heading>p:last-child{font-size:12px;margin-top:5px;color:#93a7c4}
.form-stage{order:3;border:0;background:transparent;backdrop-filter:none;padding:0}
.input-group{margin-bottom:14px}
.input-group>label,.label-line label{font-size:12px;margin-bottom:7px;color:#c7d4e6;font-weight:600}
.inline-link{font-size:11px}
.input-box{height:58px;border-radius:16px;border:1px solid rgba(59,105,170,.72);background:linear-gradient(180deg,rgba(7,23,52,.96),rgba(5,16,38,.98));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.input-box:focus-within{border-color:#3386df;box-shadow:0 0 0 3px rgba(36,145,255,.08),0 0 26px rgba(35,111,255,.09)}
.field-icon{width:46px;flex-basis:46px}.field-icon svg{width:19px;height:19px}
.input-box input{font-size:15px;padding-right:14px}.input-box input::placeholder{color:#617797}
.password-toggle{font-size:11px;padding-right:14px}
.primary-button{height:56px;border-radius:17px;font-size:14px;margin-top:16px;background:linear-gradient(96deg,#10c3ff 0%,#1b7eff 35%,#754eff 70%,#d448ef 100%);box-shadow:0 16px 38px rgba(72,72,255,.22),inset 0 1px 0 rgba(255,255,255,.25)}
.mode-switch{margin-top:22px;font-size:12px}.mode-switch button{font-size:12px}
.error-msg{order:4;border:0;background:transparent;border-radius:0;padding:8px 0 0;font-size:11px}
.preview-badge{bottom:max(10px,env(safe-area-inset-bottom))}

/* Real mobile app behavior: no outer card/container chrome */
@media(max-width:699px){
  .auth-stage{padding-left:20px;padding-right:20px}
  .auth-card{width:100%;max-width:430px;padding-top:clamp(8px,3vh,30px)}
  .brand-area{margin-top:0}
  .approved-brand-lockup{width:clamp(154px,44vw,184px)}
  .auth-heading{padding-bottom:18px}
  .signup-grid{display:block}
}

/* Desktop is just a phone-like preview, never a wide web login */
@media(min-width:700px){
  .auth-stage{padding:26px}
  .auth-card{width:430px;min-height:min(860px,calc(100dvh - 52px));max-height:calc(100dvh - 52px);padding:30px 28px 34px;border-radius:42px;background:linear-gradient(180deg,rgba(2,12,29,.98),rgba(1,8,20,.99));border:1px solid rgba(67,100,148,.34);box-shadow:0 32px 90px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.03);overflow:auto;scrollbar-width:none}
  .auth-card::-webkit-scrollbar{display:none}
  .approved-brand-lockup{width:174px}
}

/* Native splash */
.native-splash{position:fixed;inset:0;z-index:5000;background:linear-gradient(180deg,#020b1d 0%,#010713 72%,#01050c 100%);display:grid;place-items:center;overflow:hidden;opacity:1;transition:opacity .36s ease,transform .36s ease}
.native-splash.is-leaving{opacity:0;transform:scale(1.015);pointer-events:none}
.splash-brand{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;transform:translateY(-2vh);opacity:0}.native-splash.is-running .splash-brand{animation:splashBrandIn .62s cubic-bezier(.2,.8,.2,1) forwards}
.splash-brand img{width:112px;height:auto;filter:drop-shadow(0 0 26px rgba(46,163,255,.34))}
.splash-brand strong{font-size:33px;line-height:1;margin-top:5px;letter-spacing:-.045em}.splash-brand span{margin-top:9px;color:#19bfff;font-size:10px;font-weight:700;letter-spacing:.34em}
.splash-progress{position:absolute;left:50%;bottom:max(42px,calc(env(safe-area-inset-bottom) + 24px));transform:translateX(-50%);width:92px;height:3px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}.splash-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#12c5ff,#6a57ff,#d24af2);border-radius:inherit}.native-splash.is-running .splash-progress i{animation:splashProgress 1.05s ease-out forwards}
.splash-energy{position:absolute;left:-18%;right:-18%;height:140px;bottom:-38px;border-radius:50%;filter:blur(14px);opacity:.6}.splash-energy-a{background:radial-gradient(ellipse at 42% 50%,rgba(21,126,255,.35),transparent 48%)}.splash-energy-b{background:radial-gradient(ellipse at 70% 50%,rgba(145,61,255,.25),transparent 42%);transform:translateY(18px)}
@keyframes splashBrandIn{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:translateY(-2vh) scale(1)}}
@keyframes splashProgress{0%{width:0}70%{width:72%}100%{width:100%}}
@media(prefers-reduced-motion:reduce){.native-splash{display:none!important}}


/* ===== V4 Native splash + approved app icon ===== */
.native-splash{background:#020916;display:flex;align-items:center;justify-content:center;padding:0}
.native-splash-art{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;background:#020916}
@media(min-width:700px){
  .native-splash{padding:18px;background:rgba(1,6,15,.96)}
  .native-splash-art{width:min(430px,100%);height:auto;max-height:calc(100dvh - 36px);aspect-ratio:863/1822;object-fit:contain;border-radius:42px;box-shadow:0 28px 90px rgba(0,0,0,.58), 0 0 0 1px rgba(78,113,171,.24)}
}
/* hide old splash composition if any remains */
.splash-energy,.splash-brand,.splash-progress{display:none !important}


/* ===== Signup/Reset overflow fix ===== */
.auth-card.mode-signup,
.auth-card.mode-reset{justify-content:flex-start}
@media(min-width:700px){
  .auth-card.mode-signup,
  .auth-card.mode-reset{padding-top:20px;padding-bottom:28px}
  .auth-card.mode-signup .brand-area,
  .auth-card.mode-reset .brand-area{margin-bottom:10px}
  .auth-card.mode-signup .approved-brand-lockup,
  .auth-card.mode-reset .approved-brand-lockup{width:158px}
  .auth-card.mode-signup .auth-heading,
  .auth-card.mode-reset .auth-heading{padding-bottom:12px}
  .auth-card.mode-signup .auth-heading h1,
  .auth-card.mode-reset .auth-heading h1{font-size:17px}
  .auth-card.mode-signup .auth-heading>p:last-child,
  .auth-card.mode-reset .auth-heading>p:last-child{font-size:11px}
  .auth-card.mode-signup .input-group,
  .auth-card.mode-reset .input-group{margin-bottom:11px}
  .auth-card.mode-signup .input-box,
  .auth-card.mode-reset .input-box{height:54px}
  .auth-card.mode-signup .terms-row{margin-top:6px}
  .auth-card.mode-signup .primary-button{margin-top:10px}
}