:root{
  --green:#0B2D28;--green2:#123B34;--orange:#F15A24;--orange2:#D94B18;
  --beige:#EFE4D6;--graphite:#232426;--off:#F8F5EF;--muted:#766F67;--line:#D9CFC2;
  --neon-orange:#FF7A45;--neon-green:#25E6A4;--success:#1DBE78;--error:#DC5A5A;
  --shadow:0 28px 76px rgba(20,26,24,.18);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--off);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--graphite);-webkit-font-smoothing:antialiased}
button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.app{height:100dvh;width:100vw;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(430px,.94fr);background:var(--off)}

/* left */
.brand{position:relative;overflow:hidden;background:radial-gradient(circle at 80% 18%,rgba(241,90,36,.16),transparent 22%),radial-gradient(circle at 14% 82%,rgba(37,230,164,.10),transparent 24%),linear-gradient(145deg,#071f1b 0%,var(--green) 54%,#123a33 100%);color:#fff;padding:clamp(28px,4vw,54px);display:flex;flex-direction:column;min-height:0}
.brand:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(120deg,#000 0%,transparent 72%);pointer-events:none}
.brand:after{content:"";position:absolute;width:560px;height:560px;right:-270px;bottom:-280px;border-radius:50%;border:1px solid rgba(37,230,164,.12);box-shadow:0 0 0 70px rgba(37,230,164,.025),0 0 0 142px rgba(241,90,36,.016);pointer-events:none}
.logo{width:min(250px,35vw);max-width:250px;height:auto;display:block;position:relative;z-index:3;filter:drop-shadow(0 7px 16px rgba(0,0,0,.16))}
.brand-main{position:relative;z-index:3;margin:auto 0;max-width:680px;padding:12px 0}
.eyebrow{font-size:11px;letter-spacing:.21em;text-transform:uppercase;font-weight:800;color:#F6C9B6;margin-bottom:16px}
.brand h1{margin:0;font-size:clamp(43px,5.15vw,74px);line-height:.96;letter-spacing:-.047em;font-weight:840;max-width:660px}.brand h1 span{color:var(--orange);text-shadow:0 0 24px rgba(241,90,36,.12)}
.neon-dot{position:absolute;z-index:2;width:8px;height:8px;border-radius:50%;background:var(--neon-green);box-shadow:0 0 10px rgba(37,230,164,.95),0 0 26px rgba(37,230,164,.42);animation:float 5s ease-in-out infinite}.neon-dot.orange{background:var(--neon-orange);box-shadow:0 0 11px rgba(255,122,69,.95),0 0 28px rgba(255,122,69,.36);animation-delay:1.1s}@keyframes float{0%,100%{transform:translateY(0);opacity:.86}50%{transform:translateY(-8px);opacity:1}}
.neon-line{position:absolute;z-index:2;height:1px;background:linear-gradient(90deg,transparent,rgba(255,122,69,.85),transparent);filter:drop-shadow(0 0 7px rgba(255,122,69,.5));opacity:.7}

/* motivational banner */
.motivation{position:relative;z-index:3;width:min(620px,100%);min-height:154px;margin-top:28px;border:1px solid rgba(255,255,255,.10);border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 18px 36px rgba(0,0,0,.08);backdrop-filter:blur(14px);padding:22px 24px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.motivation:before{content:"";position:absolute;inset:auto -50px -70px auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(241,90,36,.13),transparent 68%)}
.quote-stage{position:relative;min-height:76px}.quote{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity .48s ease,transform .48s ease;display:grid;align-content:center}.quote.active{opacity:1;transform:none}.quote strong{display:block;font-size:22px;line-height:1.2;letter-spacing:-.025em;color:#fff;font-weight:760}.quote small{display:block;margin-top:8px;color:rgba(248,245,239,.64);font-size:12px;line-height:1.5}.quote-nav{display:flex;gap:7px;margin-top:14px}.quote-dot{width:22px;height:3px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}.quote-dot i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),#ffa276);border-radius:inherit}.quote-dot.active i{animation:quoteProgress 4.4s linear forwards}@keyframes quoteProgress{to{width:100%}}
.brand-foot{position:relative;z-index:3;display:flex;align-items:center;gap:10px;color:rgba(248,245,239,.55);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}.brand-foot:before{content:"";width:32px;height:2px;background:var(--orange);border-radius:3px;box-shadow:0 0 9px rgba(241,90,36,.35)}

/* auth */
.auth{position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(22px,3.5vw,48px);min-width:0;background:radial-gradient(circle at 100% 0,rgba(239,228,214,.72),transparent 32%),linear-gradient(180deg,var(--off),#F3ECE3)}
.auth:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(35,36,38,.055) .7px,transparent .7px);background-size:18px 18px;mask-image:linear-gradient(to bottom,#0005,transparent 72%);pointer-events:none}
.card{position:relative;z-index:1;width:min(520px,100%);border:1px solid rgba(35,36,38,.10);background:rgba(248,245,239,.975);border-radius:30px;padding:clamp(24px,3vw,34px);box-shadow:var(--shadow);overflow:hidden;transform-style:preserve-3d}
.card:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--orange),#ff996e,var(--orange));box-shadow:0 0 18px rgba(241,90,36,.12)}
.card:after{content:"";position:absolute;width:150px;height:150px;right:-55px;bottom:-55px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,69,.12),transparent 70%);pointer-events:none}
.card.switching{animation:cardPulse .54s cubic-bezier(.2,.8,.2,1)}@keyframes cardPulse{0%{transform:scale(1);filter:blur(0)}45%{transform:scale(.982);filter:blur(1px)}100%{transform:scale(1);filter:blur(0)}}
.step{animation:fadeIn .32s ease}@keyframes fadeIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.kicker{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:850;color:#A24B2A;margin-bottom:12px}
h2{margin:0;font-size:clamp(31px,3.2vw,43px);line-height:1.02;letter-spacing:-.04em;font-weight:820}.lead{margin:10px 0 22px;color:var(--muted);font-size:13px;line-height:1.55;max-width:390px}
.field{display:grid;gap:7px;margin-bottom:13px}.field label{font-size:11px;font-weight:760;color:#3C3834}.input{position:relative}.input input{width:100%;height:52px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--graphite);padding:0 45px 0 14px;font-size:13px;transition:.18s}.input input:focus{border-color:rgba(241,90,36,.66);box-shadow:0 0 0 4px rgba(241,90,36,.09),0 0 20px rgba(255,122,69,.10);outline:0}.eye{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:transparent;color:#6C665F;border-radius:8px}.row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 17px}.remember{display:flex;align-items:center;gap:8px;font-size:10px;color:#625D57}.remember input{accent-color:var(--green)}.link{border:0;background:transparent;color:var(--orange);font-size:10px;font-weight:800;padding:0}
.primary{position:relative;overflow:hidden;width:100%;height:52px;border:0;border-radius:14px;background:linear-gradient(180deg,var(--orange),var(--orange2));color:#fff;font-weight:850;font-size:13px;box-shadow:0 13px 26px rgba(241,90,36,.22);transition:.16s}.primary:hover{transform:translateY(-1px);filter:brightness(1.035)}.primary:after{content:"";position:absolute;inset:0;transform:translateX(-140%) skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:sweep 4.2s ease-in-out infinite}@keyframes sweep{0%,72%,100%{transform:translateX(-140%) skewX(-18deg)}88%{transform:translateX(140%) skewX(-18deg)}}.primary.loading{pointer-events:none}.primary.loading .btn-label{opacity:0}.btn-loader{position:absolute;inset:0;display:grid;place-items:center;opacity:0}.primary.loading .btn-loader{opacity:1}.btn-loader:before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.34);border-top-color:#fff;animation:spin .85s linear infinite}.btn-label,.btn-loader{transition:.18s}
.meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(35,36,38,.08);color:#7B746C;font-size:9px}.meta strong{color:#4B4641}.back{border:0;background:transparent;color:#605B55;font-size:10px;font-weight:750;padding:0 0 14px;display:inline-flex;align-items:center;gap:6px}

/* mfa */
.mfa-icon{width:48px;height:48px;border-radius:16px;background:linear-gradient(180deg,#FFF1E8,#F9E0D2);color:var(--orange);display:grid;place-items:center;font-size:20px;margin-bottom:15px;position:relative}.mfa-icon:after{content:"";position:absolute;inset:-7px;border-radius:21px;border:1px solid rgba(241,90,36,.18);animation:ring 2.4s ease-out infinite}@keyframes ring{0%{transform:scale(.84);opacity:0}35%{opacity:1}100%{transform:scale(1.16);opacity:0}}
.otp-wrap{position:relative;margin:18px 0 17px;height:56px}.otp-input{position:absolute;inset:0;width:100%;height:100%;z-index:5;opacity:.001;border:0;background:transparent;color:transparent;caret-color:transparent;font-size:16px}.otp-visual{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;z-index:1}.otp-cell{height:56px;display:grid;place-items:center;border:1px solid var(--line);border-radius:13px;background:#fff;color:var(--green);font-size:22px;font-weight:850;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;transition:border-color .15s,box-shadow .15s,background .15s,opacity .15s}.otp-wrap:focus-within .otp-cell.current{border-color:var(--orange);box-shadow:0 0 0 3px rgba(241,90,36,.09),0 0 14px rgba(255,122,69,.09)}.otp-cell.filled{border-color:#E7A17F;background:#FFF9F5}.otp-visual.verifying{z-index:4}.otp-visual.verifying .otp-cell{pointer-events:none}.otp-orb{position:absolute;left:50%;top:50%;width:74px;height:74px;transform:translate(-50%,-50%) scale(.72);border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#F8F1E9);border:1px solid rgba(35,36,38,.09);box-shadow:0 20px 34px rgba(20,26,24,.15),0 0 26px rgba(255,122,69,.10);display:grid;place-items:center;opacity:0;z-index:8;transition:opacity .22s,transform .28s;color:var(--orange);font-size:26px;font-weight:900}.otp-orb.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.otp-orb:before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:conic-gradient(from 0deg,rgba(241,90,36,0),rgba(241,90,36,.62),rgba(37,230,164,.15),rgba(241,90,36,0));mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;padding:2px;animation:spin .9s linear infinite}.otp-orb.success{color:var(--success);box-shadow:0 20px 34px rgba(20,26,24,.13),0 0 30px rgba(29,190,120,.16)}.otp-orb.success:before{background:conic-gradient(from 0deg,rgba(29,190,120,0),rgba(29,190,120,.72),rgba(29,190,120,.1),rgba(29,190,120,0))}.otp-orb.error{color:var(--error);box-shadow:0 20px 34px rgba(20,26,24,.13),0 0 28px rgba(220,90,90,.14)}.otp-orb.error:before{background:conic-gradient(from 0deg,rgba(220,90,90,0),rgba(220,90,90,.72),rgba(220,90,90,.1),rgba(220,90,90,0))}.otp-message{min-height:17px;margin-top:2px;text-align:center;font-size:10px;font-weight:700;color:#847D74}.otp-message.error{color:var(--error)}.otp-message.success{color:#168D5A}.mfa-links{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;flex-wrap:wrap}.mfa-links button{border:0;background:transparent;color:var(--orange);font-size:10px;font-weight:800;padding:3px}.small-note{margin-top:13px;text-align:center;color:#847D74;font-size:9px;line-height:1.45}

/* transition overlay */
.transition{position:absolute;inset:0;z-index:12;display:grid;place-items:center;background:rgba(248,245,239,.84);backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:opacity .22s}.transition.show{opacity:1;pointer-events:auto}.transition-box{display:grid;justify-items:center;gap:12px;text-align:center}.transition-orb{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 32% 28%,#fff,#F6EEE5);border:1px solid rgba(35,36,38,.08);box-shadow:0 22px 40px rgba(20,26,24,.14);font-size:28px;color:var(--orange);position:relative}.transition-orb:before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:conic-gradient(from 0deg,rgba(241,90,36,0),rgba(241,90,36,.65),rgba(37,230,164,.17),rgba(241,90,36,0));mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;padding:2px;animation:spin .9s linear infinite}.transition-orb span{position:relative;z-index:1}.transition.success .transition-orb{color:var(--success)}.transition.error .transition-orb{color:var(--error)}.transition-title{font-size:23px;font-weight:820;letter-spacing:-.03em}.transition-copy{font-size:11px;color:#746D65;max-width:280px;line-height:1.5}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shake{15%{transform:translateX(-5px)}45%{transform:translateX(5px)}75%{transform:translateX(-3px)}100%{transform:none}}

.success-step{text-align:center;padding:14px 0}.success-mark{width:76px;height:76px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;background:#EFFBF5;border:1px solid rgba(29,190,120,.18);color:var(--success);font-size:31px;box-shadow:0 0 36px rgba(29,190,120,.13);animation:successPop .46s cubic-bezier(.2,1.5,.4,1)}@keyframes successPop{from{transform:scale(.55);opacity:0}to{transform:none;opacity:1}}

@media(max-width:900px){.app{grid-template-columns:1fr;grid-template-rows:35% 65%}.brand{padding:18px 22px}.logo{width:170px;position:absolute;top:18px;left:22px}.brand-main{margin:auto 0 0;padding:0}.eyebrow,.brand-foot{display:none}.brand h1{font-size:clamp(30px,8vw,44px);max-width:560px}.motivation{min-height:104px;margin-top:14px;padding:15px 17px}.quote-stage{min-height:54px}.quote strong{font-size:16px}.quote small{font-size:10px;margin-top:4px}.quote-nav{margin-top:8px}.auth{padding:11px 14px 14px;align-items:flex-start}.card{padding:18px 18px 16px;border-radius:22px;width:min(560px,100%);max-height:100%;overflow:hidden}h2{font-size:32px}.lead{margin-bottom:14px}.field{margin-bottom:9px}.input input{height:46px}.primary{height:47px}.row{margin-bottom:11px}.meta{margin-top:11px;padding-top:10px}.otp-wrap{height:48px;margin:13px 0}.otp-cell{height:48px;font-size:19px}}
@media(max-height:720px) and (min-width:901px){.brand{padding:24px 34px}.brand-main{padding:4px 0}.brand h1{font-size:clamp(38px,4.5vw,58px)}.motivation{min-height:120px;margin-top:18px;padding:16px 18px}.quote-stage{min-height:58px}.quote strong{font-size:18px}.auth{padding:18px 28px}.card{padding:22px 26px 20px}h2{font-size:34px}.lead{margin-bottom:14px}.field{margin-bottom:9px}.input input{height:46px}.row{margin-bottom:11px}.primary{height:47px}.otp-wrap{height:48px;margin:13px 0}.otp-cell{height:48px}.meta{margin-top:11px;padding-top:10px}}
@media(max-width:520px){.app{grid-template-rows:31% 69%}.brand{padding:15px 16px}.logo{width:145px;top:14px;left:16px}.brand h1{font-size:31px}.motivation{min-height:84px;margin-top:10px;padding:12px 14px}.quote-stage{min-height:44px}.quote strong{font-size:14px}.quote small{display:none}.quote-nav{margin-top:6px}.auth{padding:8px 10px 10px}.card{padding:15px 14px 12px;border-radius:18px}h2{font-size:28px}.lead{font-size:11px;margin:7px 0 12px}.otp-visual{gap:5px}.otp-wrap{height:43px;margin:11px 0}.otp-cell{height:43px;font-size:18px;border-radius:10px}.meta{font-size:8px}}

.login-neon-a{top:17%;right:16%}.login-neon-b{bottom:16%;left:10%;width:7px;height:7px}.login-neon-line{top:29%;right:9%;width:100px}.success-lead{margin-inline:auto}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}