:root{color-scheme:light;--ink:#17213a;--muted:#7d879e;--line:#e8eaf2;--brand-blue:#006fc8;--brand-cyan:#00a6d9;--pale:#f3f9fd}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink)}
body{min-height:100vh;min-height:100svh;background:radial-gradient(ellipse 40rem 28rem at 4% 0%,rgba(0,145,220,.16),transparent 73%),radial-gradient(ellipse 36rem 26rem at 98% 88%,rgba(0,169,224,.16),transparent 72%),linear-gradient(135deg,#fff 0%,#f4faff 55%,#eff8fd 100%);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.26;background-image:radial-gradient(#b6c4d1 .65px,transparent .65px);background-size:17px 17px;mask-image:linear-gradient(115deg,#000,transparent 74%)}
button,input{font:inherit}
.page{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:36px}
.shell{width:min(1180px,100%);min-height:700px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);overflow:hidden;border:1px solid rgba(224,228,240,.95);border-radius:30px;background:rgba(255,255,255,.88);box-shadow:0 30px 90px rgba(52,65,111,.12),0 3px 10px rgba(52,65,111,.035);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.story{position:relative;display:flex;flex-direction:column;padding:38px 48px 30px;overflow:hidden;background:linear-gradient(145deg,rgba(250,249,255,.98),rgba(245,248,255,.94));border-right:1px solid #eceef5}
.story:before{content:"";position:absolute;width:400px;height:400px;right:-188px;top:245px;border-radius:50%;border:1px solid rgba(0,133,204,.10);box-shadow:0 0 0 36px rgba(0,133,204,.025),0 0 0 78px rgba(0,133,204,.02);pointer-events:none}
.story:after{content:"";position:absolute;width:250px;height:250px;left:-142px;bottom:-168px;border-radius:50%;background:rgba(28,160,218,.11);filter:blur(20px);pointer-events:none}
.brandbar{position:relative;z-index:1;display:flex;align-items:center;gap:12px}
.logo{width:50px;height:50px;display:grid;place-items:center;border:1px solid #d7eaf5;border-radius:14px;background:linear-gradient(145deg,#fff 0%,#ebf7fc 56%,#e7f5fb 100%);box-shadow:0 8px 20px rgba(0,111,200,.12),inset 0 1px 0 #fff}
.logo img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit}
.wordmark{font-weight:820;letter-spacing:.11em;font-size:15px;color:#202944}.wordmark small{display:block;margin-top:2px;color:#8c94a9;font-size:9px;font-weight:720;letter-spacing:.22em}
.version{margin-left:auto;padding:8px 11px;border:1px solid #d4eaf6;border-radius:999px;color:#006fb7;background:linear-gradient(90deg,#f2f9fd,#eaf6fb);font-size:10px;font-weight:760;letter-spacing:.12em}
.hero{position:relative;z-index:1;margin:auto 0;padding:46px 0 25px;max-width:610px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid #e0eaf1;border-radius:999px;background:rgba(255,255,255,.78);color:#66718b;font-size:10px;font-weight:720;letter-spacing:.13em;text-transform:uppercase;box-shadow:0 4px 12px rgba(65,75,112,.035)}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--brand-cyan);box-shadow:0 0 0 4px rgba(16,175,212,.13)}
h1{margin:21px 0 14px;font-size:clamp(39px,4.8vw,60px);line-height:1.04;letter-spacing:-.055em;font-weight:780;color:#19243d}
h1 span{display:block;background:linear-gradient(95deg,#006fc8 4%,#007fd0 58%,#0092c5 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{max-width:460px;margin:0;color:#69748d;font-size:14px;line-height:1.75}
.feature-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:21px}
.feature{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid #e9ebf3;border-radius:10px;background:rgba(255,255,255,.76);color:#56627d;font-size:10px;font-weight:620;box-shadow:0 3px 8px rgba(50,65,105,.025)}
.feature svg{width:14px;height:14px;color:#0079be}
.preview{position:relative;margin-top:27px;max-width:555px;padding:15px;border:1px solid rgba(224,227,240,.98);border-radius:18px;background:rgba(255,255,255,.85);box-shadow:0 18px 42px rgba(68,78,123,.10),inset 0 1px 0 #fff;transform:perspective(1000px) rotateY(-1.5deg);animation:rise .7s ease both}
.preview-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;color:#8b94a9;font-size:9px;font-weight:760;letter-spacing:.13em;text-transform:uppercase}
.preview-title{display:flex;align-items:center;gap:8px;color:#293650;font-size:11px;font-weight:740;letter-spacing:0;text-transform:none}
.mini-dot{width:8px;height:8px;border-radius:3px;background:linear-gradient(135deg,#0074c8,#08a8dd);box-shadow:0 0 8px rgba(0,111,203,.22)}
.demo-tag{padding:5px 8px;border:1px solid #dbeaf3;border-radius:999px;background:#f5fafe;color:#0075b6;font-size:8px;letter-spacing:.1em}
.preview-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:10px}
.tile{min-height:105px;padding:13px;border:1px solid #edf0f6;border-radius:13px;background:linear-gradient(145deg,#fff,#fbfbff)}
.tile-label{color:#8490a7;font-size:9px;font-weight:650}.tile-value{margin-top:7px;color:#26334e;font-size:12px;font-weight:740;line-height:1.35}.tile-sub{margin-top:5px;color:#8d96aa;font-size:8px}
.spark{height:29px;margin-top:8px;width:100%}.spark path{fill:none;stroke:url(#sparkGradient);stroke-width:2.3;stroke-linecap:round}
.progress-list{display:grid;gap:11px;margin-top:12px}.progress-row{display:grid;grid-template-columns:76px 1fr 21px;align-items:center;gap:7px;color:#68748d;font-size:8px}.bar{height:5px;border-radius:9px;background:#edf0f7;overflow:hidden}.bar i{display:block;width:var(--w);height:100%;border-radius:inherit;background:linear-gradient(90deg,#0073c8,#14b1df)}.progress-row b{color:#8c95a9;font-size:8px;font-weight:650;text-align:right}
.story-footer{position:relative;z-index:1;margin-top:auto;display:flex;align-items:center;justify-content:space-between;color:#929bb0;font-size:9px;font-weight:680;letter-spacing:.08em}.secure{display:flex;align-items:center;gap:6px}.secure svg{width:14px;height:14px;color:#10a8cf}
.auth-side{display:grid;place-items:center;padding:42px 48px;background:rgba(255,255,255,.7)}
.auth-card{width:min(100%,410px);padding:31px 30px 25px;border:1px solid rgba(231,233,242,.97);border-radius:23px;background:rgba(255,255,255,.96);box-shadow:0 20px 54px rgba(59,71,112,.09),0 2px 8px rgba(59,71,112,.035);animation:rise .65s .08s ease both}
.auth-kicker{margin:0 0 9px;color:#006fb6;font-size:10px;font-weight:780;letter-spacing:.17em;text-transform:uppercase}
.auth-card h2{margin:0;color:#1f2a43;font-size:29px;line-height:1.15;letter-spacing:-.04em}
.auth-desc{margin:10px 0 25px;color:#7b859a;font-size:12px;line-height:1.7}
.field{display:block;margin:0 0 16px}.field-label{display:flex;justify-content:space-between;margin:0 0 8px;color:#46516a;font-size:10px;font-weight:720}
.input-wrap{position:relative;display:block;width:100%}
.input-wrap input{width:100%;height:49px;padding:0 44px 0 43px;border:1px solid #e3e7ef;border-radius:11px;outline:none;background:#fff;color:#25304a;font-size:12px;transition:border-color .2s,box-shadow .2s,background .2s}
.input-wrap input::placeholder{color:#aab1c0}.input-wrap input:focus{border-color:#168ac9;background:#fbfeff;box-shadow:0 0 0 3px rgba(0,126,202,.14)}
.input-icon{position:absolute;top:50%;left:14px;width:16px;height:16px;transform:translateY(-50%);color:#929bb0;pointer-events:none}
.eye{position:absolute;top:50%;right:9px;display:grid;place-items:center;width:32px;height:32px;transform:translateY(-50%);border:0;border-radius:8px;background:transparent;color:#929bb0;cursor:pointer}.eye:hover{background:#eaf6fb;color:#0069aa}.eye svg{width:17px;height:17px}
.form-options{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:1px 0 20px;font-size:10px}
.remember{display:flex;align-items:center;gap:7px;color:#768198;cursor:pointer}.remember input{width:14px;height:14px;margin:0;accent-color:#0072c5}
.text-link{color:#006caf;text-decoration:none;font-weight:720}.text-link:hover{color:#00598f;text-decoration:underline}
.submit{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:50px;border:1px solid rgba(255,255,255,.8);border-radius:11px;background:linear-gradient(100deg,#0066c6 0%,#0072ce 55%,#007db8 100%);box-shadow:0 9px 20px rgba(0,102,198,.22),inset 0 1px 0 rgba(255,255,255,.28);color:#fff;font-size:12px;font-weight:780;letter-spacing:.02em;cursor:pointer;transition:transform .2s,box-shadow .2s,filter .2s}
.submit:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 12px 24px rgba(0,102,198,.30),inset 0 1px 0 rgba(255,255,255,.32)}.submit:active{transform:translateY(0)}.submit svg{width:16px;height:16px;color:#c3f3ff}
.divider{display:flex;align-items:center;gap:11px;margin:20px 0 16px;color:#a1a9b8;font-size:9px;font-weight:650}.divider:before,.divider:after{content:"";height:1px;flex:1;background:#edf0f5}
.protected{display:flex;align-items:center;justify-content:center;gap:7px;color:#8290a5;font-size:9px}.protected svg{width:14px;height:14px;color:#0ea5cd}
.prototype-note{margin:17px 0 0;text-align:center;color:#a5adbb;font-size:8px;font-weight:680;letter-spacing:.09em}
.toast{position:fixed;z-index:5;left:50%;bottom:24px;transform:translate(-50%,18px);padding:11px 15px;border:1px solid #e2e5ef;border-radius:11px;background:#fff;box-shadow:0 12px 32px rgba(39,51,91,.15);color:#34415e;font-size:11px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.page{padding:20px}.shell{grid-template-columns:1fr;max-width:620px;min-height:auto}.story{padding:27px 30px 16px;border-right:0;border-bottom:1px solid #eceef5}.hero{margin:0;padding:34px 0 18px}.hero h1{font-size:43px}.lead{font-size:13px}.preview{display:none}.story-footer{display:none}.auth-side{padding:25px 26px 30px}.auth-card{max-width:490px}}
@media(max-width:720px){
  .page{padding:0;display:block;min-height:100svh}
  .shell{width:100%;min-height:100svh;display:flex;flex-direction:column;border:0;border-radius:0;box-shadow:none;background:rgba(255,255,255,.92)}
  .story{display:contents}
  .brandbar{padding:22px 21px 10px;justify-content:center}
  .logo{width:42px;height:42px;border-radius:12px}
  .version{display:none}
  .hero,.story-footer{display:none}
  .auth-side{width:100%;flex:1;min-height:0;padding:10px 22px 30px;display:grid;place-items:center;background:transparent}
  .auth-card{width:100%;max-width:420px;padding:18px 4px;border:0;border-radius:0;background:transparent;box-shadow:none;animation:none}
  .auth-kicker,.auth-desc,.divider,.protected,.prototype-note{display:none}
  .auth-card h2{margin:0 0 26px;text-align:center;font-size:26px}
  .field{margin-bottom:17px}.field-label{font-size:11px}.input-wrap input{height:51px;font-size:13px;border-radius:12px}
  .form-options{margin:2px 0 22px;font-size:10px}
  .submit{height:52px;border-radius:12px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Real PHP form and authentication states. */
.auth-card form{margin-top:24px}
.auth-card form>.field{margin:0 0 16px}
.auth-card .form-options{justify-content:flex-end;margin:1px 0 20px}
.eye svg[hidden]{display:none}
.field-label{display:flex;justify-content:space-between;margin:0 0 8px;color:#46516a;font-size:10px;font-weight:720}
.input-wrap input{padding-right:44px}
.code-input{text-align:center;font-size:20px!important;font-weight:800!important;letter-spacing:.42em}
.alert{display:flex;align-items:flex-start;gap:10px;margin:12px 0 0;padding:12px 14px;border:1px solid #f3d4d2;border-radius:12px;background:#fff3f2;color:#ad3440;font-size:12px;font-weight:700;line-height:1.5}
.alert svg{width:17px;height:17px;flex:none;margin-top:1px;stroke:currentColor}
.step-links{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:2px}
.step-links button,.step-links a{min-height:40px;padding:10px 4px;border:0;background:none;color:#69748d;font:700 11px/1.4 Inter,ui-sans-serif,system-ui,sans-serif;cursor:pointer;text-decoration:none}
.step-links button:hover,.step-links a:hover{color:#0069aa}
.auth-card .submit:disabled{cursor:wait;opacity:.72;box-shadow:none}
#toastZone{position:relative;z-index:20}
#toastZone .toast{opacity:1;transform:translate(-50%,0)}
.legal{color:#a5adbb;font-size:8px;font-weight:600;letter-spacing:.02em}
.story-footer{flex-wrap:wrap;gap:8px 12px}
@media(max-width:720px){
  .auth-card form{margin-top:20px}
  body.twofa-mode .auth-kicker,body.twofa-mode .auth-desc{display:block!important}
  body.twofa-mode .auth-card h2{margin-bottom:8px}
  body.twofa-mode .auth-desc{margin:8px 0 18px}
  .step-links{gap:8px}
}