/* login.html styles */
:root{color-scheme:dark;--bg:#080d17;--panel:#101827;--panel2:#131e30;--line:#202c40;--muted:#8997ad;--text:#edf3ff;--cyan:#53d8e8;--green:#55d6a0;--amber:#f3bb61;--red:#ff7187;--blue:#729bff;--radius:16px}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:30px 22px;background:radial-gradient(ellipse at 18% -10%,#14243a 0,transparent 42%),var(--bg);color:var(--text);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}
button,input{font:inherit}
.wrap{width:min(100%,1080px)}
.login-shell{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(390px,.96fr);min-height:650px;overflow:hidden;border:1px solid rgba(137,151,173,.15);border-radius:var(--radius);background:linear-gradient(160deg,#111b2b,#0e1725);box-shadow:0 18px 48px #0000002e}
.visual-panel{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;min-height:650px;overflow:hidden;padding:38px 42px 30px;border-right:1px solid rgba(137,151,173,.13);background:radial-gradient(ellipse at 55% 28%,#1b304b 0,transparent 55%),linear-gradient(160deg,#111b2b,#101827);color:var(--text)}
.visual-panel:before,.visual-panel:after{position:absolute;z-index:-1;border-radius:50%;content:"";pointer-events:none}
.visual-panel:before{width:510px;height:510px;right:-210px;top:-220px;background:radial-gradient(circle,#4777d955 0,transparent 70%)}
.visual-panel:after{width:440px;height:440px;left:-220px;bottom:-240px;background:radial-gradient(circle,#45cadb33 0,transparent 72%)}
.brand{display:flex;align-items:center;gap:12px}
.brandmark{display:grid;width:38px;height:38px;flex:none;place-items:center;border:1px solid #ffffff18;border-radius:12px;background:linear-gradient(145deg,#38bed1,#2e68af);box-shadow:0 8px 24px #28749b55}
.brandmark svg{width:23px;height:23px}
.brandname{font-size:13px;font-weight:750;letter-spacing:.1em}
.brandmeta{margin-top:2px;color:var(--muted);font-size:10px;letter-spacing:.14em}
.visual-copy{margin-top:70px;max-width:430px}
.visual-eyebrow{display:flex;align-items:center;gap:8px;color:var(--cyan);font-size:10px;font-weight:700;letter-spacing:.17em;text-transform:uppercase}
.visual-eyebrow:before{width:18px;height:1px;background:var(--cyan);content:""}
.visual-copy h2{margin:14px 0 10px;font-size:34px;font-weight:720;letter-spacing:-.045em;line-height:1.23}
.visual-copy h2 span{color:var(--cyan)}
.visual-copy p{max-width:360px;margin:0;color:#aab7ca;font-size:13px;line-height:1.8}
.visual-art{display:grid;flex:1;min-height:260px;align-items:center;margin:14px -24px 0}
.visual-art svg{display:block;width:100%;height:auto;max-height:365px;overflow:visible}
.visual-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:8px;color:var(--muted);font-size:10px;letter-spacing:.04em}
.visual-status{display:inline-flex;align-items:center;gap:7px}
.visual-status i{width:7px;height:7px;border-radius:50%;background:#69dfaf;box-shadow:0 0 0 4px #69dfaf20}
.auth-side{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:56px clamp(34px,6vw,76px);background:transparent}
.locked{display:none;margin-bottom:22px;padding:13px 14px;border:1px solid #773343;border-radius:12px;background:#371d2a}
.locked.show{display:block}
.locked-title{margin-bottom:5px;color:#ff9fb0;font-size:13px;font-weight:700}
.locked-text{margin-bottom:10px;color:#e7a8b4;font-size:11px;line-height:1.6}
.auth-eyebrow{color:var(--cyan);font-size:10px;font-weight:750;letter-spacing:.16em;text-transform:uppercase}
h1{margin:9px 0 5px;font-size:29px;font-weight:730;letter-spacing:-.04em}
.sub{margin:0 0 30px;color:var(--muted);font-size:13px}
.field{display:block;margin-bottom:19px}
.field-label{display:block;margin-bottom:8px;color:#aab7ca;font-size:12px;font-weight:650}
input{width:100%;height:49px;border:1px solid #2b3a51;border-radius:10px;outline:0;background:#0c1421;color:var(--text);padding:0 14px;transition:border-color .15s,box-shadow .15s,background .15s}
input::placeholder{color:#5d6b81}
input:focus{border-color:#3f7f96;background:#0c1421;box-shadow:0 0 0 4px #53d8e81f}
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:66px}
.pw-toggle{position:absolute;top:50%;right:8px;transform:translateY(-50%);border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:11px;padding:6px 9px;cursor:pointer}
.pw-toggle:hover{background:#16243a;color:var(--cyan)}
.submit{width:100%;height:49px;margin-top:3px;border:0;border-radius:10px;background:linear-gradient(135deg,#5fe0ee,#7aa6ff);box-shadow:0 8px 18px #28749b33;color:#04121c;font-weight:680;letter-spacing:.02em;cursor:pointer;transition:filter .15s,transform .1s,box-shadow .15s}
.submit:hover{filter:brightness(1.07);box-shadow:0 10px 22px #28749b44}
.submit:active{transform:translateY(1px)}
.submit:disabled{opacity:.62;cursor:progress}
.error{display:none;margin:0 0 14px;padding:10px 12px;border:1px solid #773343;border-radius:10px;background:#371d2a;color:#ffadba;font-size:12px;line-height:1.55}
.error.show{display:block}
.error.warn{border-color:#7a5c22;background:#3a2d14;color:#f5cd8c}
.forgot{display:flex;justify-content:flex-start;margin-top:14px}
.linkbtn{border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:12px;padding:6px 8px;cursor:pointer;transition:color .15s,background .15s}
.linkbtn:hover{background:#16243a;color:var(--cyan)}
.cmds{margin-top:18px;border:1px solid #27364e;border-radius:16px;background:linear-gradient(160deg,#111b2b,#0e1725);padding:22px 24px 20px;box-shadow:0 18px 48px #00000018;color:#edf3ff}
.cmds[hidden]{display:none}
.cmds-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.cmds .eyebrow{color:#53d8e8;font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase}
.cmds-title{margin-top:5px;font-size:16px;font-weight:700}
.cmdblock{margin-bottom:18px}
.cmdblock:last-child{margin-bottom:0}
.cmdblock-head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.cmdblock-name{color:#dce7f7;font-size:13px;font-weight:680}
.cmdblock-desc{color:#8997ad;font-size:11px}
.cmdline{display:flex;align-items:stretch;gap:0;overflow:hidden;border:1px solid #2b3a51;border-radius:10px;background:#0a1220}
.cmdline code{display:block;flex:1;min-width:0;overflow-x:auto;padding:11px 13px;color:#8ff0c0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.5;white-space:nowrap}
.copy{flex-shrink:0;border:0;border-left:1px solid #2b3a51;background:#16243a;color:#b9c9de;font-size:11px;padding:0 14px;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
.copy:hover{background:#1e3049;color:#53d8e8}
.copy.done{background:#153b32;color:#55d6a0}
.cmdnote{margin-top:8px;color:#8997ad;font-size:11px;line-height:1.6}
.locked .cmdline{border-color:#5d2b38;background:#2a1620}
.locked .cmdline code{color:#ffc2cd}
.locked .copy{border-left-color:#5d2b38;background:#43202c;color:#ffc2cd}
@media(max-width:820px){body{padding:22px}.login-shell{grid-template-columns:1fr}.visual-panel{min-height:490px;padding:30px 36px 22px}.visual-copy{margin-top:48px}.visual-art{min-height:205px;max-height:300px}.visual-art svg{max-height:300px}.visual-foot{margin-top:0}.auth-side{padding:42px clamp(30px,10vw,90px)}}
@media(max-width:560px){body{display:block;padding:12px}.wrap{margin:0 auto}.login-shell{border-radius:18px}.visual-panel{min-height:275px;padding:22px 22px 24px}.brandmark{width:36px;height:36px;border-radius:12px}.brandname{font-size:11px}.brandmeta{font-size:9px}.visual-copy{position:relative;z-index:1;max-width:66%;margin-top:34px}.visual-copy h2{font-size:25px}.visual-copy p{font-size:11px}.visual-art{position:absolute;right:-22px;bottom:4px;width:59%;min-height:0;margin:0;opacity:.78}.visual-foot{display:none}.auth-side{padding:32px 23px 28px}h1{font-size:25px}.sub{margin-bottom:25px}.cmds{padding:18px 16px}.cmdline code{font-size:11px}}
@media(max-width:360px){.visual-copy{max-width:72%}.visual-copy h2{font-size:23px}.visual-art{right:-35px;width:62%}.auth-side{padding-right:18px;padding-left:18px}}
