/* Copied from Graphics Studio mockup_signin*.html (livestatus_handoff); app additions at the end. */

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;min-height:100%}
body{background:radial-gradient(520px 340px at 85% -5%,#1E7BFF66,transparent),radial-gradient(380px 380px at 0% 70%,#22D3FF1c,transparent),linear-gradient(180deg,#0D1834,#060A18);font-family:Inter,sans-serif;color:#E8EEF7;position:relative;min-height:100vh}
.num{font-family:'Inter Tight',Inter;font-weight:800}
.wrap{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:64px 22px 24px}
.logo{width:96px;height:96px;filter:drop-shadow(0 0 26px #22D3FF99)}
.brand{font-family:'Inter Tight',Inter;font-weight:800;font-size:30px;letter-spacing:.5px;margin-top:10px}.brand span{color:#22D3FF}
.sub{font-size:13px;color:#A9BAD3;margin-top:4px;letter-spacing:.3px}
.card{width:100%;max-width:400px;margin-top:26px;padding:22px 20px 20px;border-radius:24px;background:linear-gradient(180deg,#14265a,#0e1a3d);border:1px solid #1E7BFF66;box-shadow:0 0 40px #1E7BFF30;position:relative;overflow:hidden}
.card:after{content:"";position:absolute;right:-50px;top:-50px;width:190px;height:190px;background:url(/static/auth/logo.png) center/contain no-repeat;opacity:.09;filter:drop-shadow(0 0 20px #22D3FF);pointer-events:none}
h1{font-family:'Inter Tight',Inter;font-weight:800;font-size:23px}
.hint{font-size:13px;color:#A9BAD3;margin-top:4px;line-height:1.4}
.lbl{font-size:10.5px;color:#A9BAD3;text-transform:uppercase;letter-spacing:1.3px;font-weight:700;margin:18px 0 7px}
.field{display:flex;align-items:center;height:52px;border-radius:14px;background:#050a1c;border:1px solid #1E7BFF55;padding:0 14px;gap:10px;font-size:15px}
.field .ph{color:#6f84a8}.field .val{color:#E8EEF7;letter-spacing:1px}
.field svg{width:20px;height:20px;flex:none;stroke:#7FE9FF;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.field .eye{margin-left:auto;cursor:pointer;opacity:.9}
.field.focus{border-color:#22D3FF;box-shadow:0 0 0 3px #22D3FF22,0 0 18px #22D3FF55}
.field.err{border-color:#FF5D7A;box-shadow:0 0 0 3px #FF2D5522}
.btn{margin-top:22px;height:54px;border-radius:16px;background:linear-gradient(90deg,#1E7BFF,#22D3FF);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#04122c;box-shadow:0 0 26px #22D3FF77;letter-spacing:.3px}
.btn.dis{background:#1a2a55;color:#6f84a8;box-shadow:none}
.errbox{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:12px 13px;border-radius:14px;background:#FF2D5518;border:1px solid #FF5D7A88;font-size:13px;line-height:1.4;color:#FFD3DB}
.errbox b{color:#fff;display:block;margin-bottom:1px}
.errbox svg{width:20px;height:20px;flex:none;stroke:#FF8DA1;fill:none;stroke-width:2;stroke-linecap:round}
.errmsg{font-size:12px;color:#FF9DB0;margin-top:6px}
.forgot{width:100%;max-width:400px;text-align:center;font-size:13px;color:#A9BAD3;margin-top:18px;line-height:1.5}
.forgot b{color:#7FE9FF}
.foot{margin-top:auto;font-size:11px;color:#6f84a8;display:flex;align-items:center;gap:6px;padding-top:16px}
.foot i{width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 8px #22C55E}
.rules{margin-top:14px;display:grid;gap:8px}
.rule{display:flex;align-items:center;gap:9px;font-size:13px;color:#A9BAD3}
.rule i{width:18px;height:18px;border-radius:50%;border:1.5px solid #1E7BFF77;flex:none;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;font-weight:800}
.rule.ok{color:#E8EEF7}.rule.ok i{background:#22D3FF;border-color:#22D3FF;color:#04122c;box-shadow:0 0 10px #22D3FF88}
.meter{display:flex;gap:5px;margin-top:10px}.meter span{flex:1;height:5px;border-radius:9px;background:#0a1535}.meter span.on{background:linear-gradient(90deg,#1E7BFF,#22D3FF);box-shadow:0 0 8px #22D3FF88}
.welcome{display:inline-flex;gap:7px;align-items:center;font-size:11px;font-weight:800;color:#7FE9FF;background:#22D3FF1a;border:1px solid #22D3FF66;padding:5px 11px;border-radius:99px;margin-bottom:12px;letter-spacing:.5px}
.desk .wrap{flex-direction:row;justify-content:center;align-items:center;gap:90px;padding:40px 80px}
.desk .left{max-width:480px}.desk .left .logo{width:130px;height:130px}.desk .left .brand{font-size:46px}
.desk .tag{font-size:22px;font-weight:700;margin-top:22px;line-height:1.3}.desk .tag span{color:#22D3FF}
.desk .pts{margin-top:20px;display:grid;gap:10px;color:#A9BAD3;font-size:15px}.desk .pts div:before{content:"◆";color:#22D3FF;margin-right:10px}
.desk .right{width:420px}.desk .card{margin-top:0;max-width:none}

/* --- app additions: real form controls inside the mockup shapes --- */
@font-face{font-family:Inter;src:url(/static/Inter-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:'Inter Tight';src:url(/static/InterTight-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
.field:focus-within{border-color:#22D3FF;box-shadow:0 0 0 3px #22D3FF22,0 0 18px #22D3FF55}
.field input{flex:1;min-width:0;height:100%;background:transparent;border:0;outline:0;color:#E8EEF7;font:inherit;font-size:16px;padding:0}
.field input::placeholder{color:#6f84a8}
.field .eye{background:none;border:0;padding:4px;margin-left:auto;cursor:pointer;display:flex;width:auto;height:auto}
.field .eye svg{width:20px;height:20px}.field .eye .off{display:none}.field.shown .eye .on{display:none}.field.shown .eye .off{display:block}
button.btn{width:100%;border:0;cursor:pointer;font-family:inherit}button.btn:disabled{background:#1a2a55;color:#6f84a8;box-shadow:none;cursor:default}
.errmsg.okm{color:#86EFAC}.errbox.lock{background:#F59E0B18;border-color:#F59E0B88;color:#FDE7B0}.errbox.lock svg{stroke:#FCD34D}
.okbox{background:#22C55E18;border-color:#22C55E88;color:#D1FAE5}.okbox svg{stroke:#86EFAC}
.forgot a,.links a{color:#7FE9FF;text-decoration:none;font-weight:700}.links{display:flex;justify-content:space-between;width:100%;max-width:400px;margin-top:16px;font-size:13px}
.card.wide{max-width:640px}.desk .card.wide{max-width:none}
.urow{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid #1E7BFF33;font-size:14px}.urow:first-of-type{border-top:0}
.urow .nm{font-weight:700}.urow .meta{font-size:12px;color:#A9BAD3;margin-top:2px}.urow form{margin-left:auto}
.urow button{height:36px;padding:0 14px;border-radius:12px;border:1px solid #22D3FF88;background:#22D3FF14;color:#7FE9FF;font-weight:800;font-family:inherit;cursor:pointer}
.tag2{font-size:10px;font-weight:800;padding:2px 7px;border-radius:99px;background:#1E7BFF33;color:#A9D4FF;margin-left:6px;letter-spacing:.4px}.tag2.warn{background:#F59E0B26;color:#FCD34D}
.temp{margin-top:12px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:22px;letter-spacing:2px;text-align:center;padding:14px;border-radius:14px;background:#050a1c;border:1px dashed #22D3FF;color:#fff;user-select:all;word-break:break-all}
@media (min-width:900px){body.auth:not(.nodesk) .wrap{flex-direction:row;justify-content:center;align-items:center;gap:90px;padding:40px 80px}
body.auth:not(.nodesk) .left{max-width:480px}body.auth:not(.nodesk) .left .logo{width:130px;height:130px}body.auth:not(.nodesk) .left .brand{font-size:46px}
body.auth:not(.nodesk) .right{width:420px}body.auth:not(.nodesk) .card{margin-top:0;max-width:none}body.auth .deskonly{display:block}}
.deskonly{display:none}
.left{display:flex;flex-direction:column;align-items:center;text-align:center}.right{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center}
.tag{font-size:22px;font-weight:700;margin-top:22px;line-height:1.3}.tag span{color:#22D3FF}
.pts{margin-top:20px;display:grid;gap:10px;color:#A9BAD3;font-size:15px}.pts div:before{content:"◆";color:#22D3FF;margin-right:10px}
@media (min-width:900px){body.auth:not(.nodesk) .left{align-items:flex-start;text-align:left}body.auth:not(.nodesk) .left .sub{display:none}body.auth:not(.nodesk) .foot{display:none}body.auth:not(.nodesk) .wrap{min-height:100vh}}
body.auth.nodesk .right{max-width:640px}