/* Sign up / log in, ported from the Graphics Designer's v2/signup.html + login.html */
body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh;background:var(--bg)}
.l{position:relative;overflow:hidden;background:#000;border-right:1px solid var(--line);padding:40px 56px;display:flex;flex-direction:column;min-height:100vh}
.l canvas{position:absolute;left:0;right:0;top:38%;transform:translateY(-50%);width:100%;height:220px;opacity:.9}
.l .q{margin-top:auto;position:relative}
.l h2{font-family:'Barlow Condensed';font-weight:800;font-size:clamp(48px,4.6vw,64px);line-height:.92;text-transform:uppercase}
.l h2 em{font-style:normal;color:var(--cy)}
.l .feats{display:flex;gap:18px;margin-top:26px;flex-wrap:wrap;font-size:12px}
.r{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:radial-gradient(60% 50% at 50% 30%,rgba(0,225,255,.05),transparent 70%),var(--bg)}
.form{width:100%;max-width:400px}
.mlogo{display:none;margin-bottom:28px}
.tabs{display:flex;background:var(--p);border:1px solid var(--line);border-radius:10px;padding:4px;margin-bottom:30px}
.tabs a{flex:1;text-align:center;padding:10px;border-radius:7px;font-size:14px;font-weight:600;color:var(--m)}
.tabs a:hover{color:var(--t)}
.tabs .on{background:var(--p2);color:var(--t);box-shadow:inset 0 0 0 1px #2A2D35}
.form h1{font-family:'Barlow Condensed';font-weight:800;font-size:44px;text-transform:uppercase;line-height:1}
.lead{font-size:15px;margin-top:6px}
.lbl{display:block;font-family:'JetBrains Mono';font-size:11px;letter-spacing:1.2px;color:var(--m);margin:18px 0 8px}
.in{width:100%;background:#000;border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:15px;color:var(--t);outline:none;transition:border-color .15s,box-shadow .15s}
.in::placeholder{color:#4A4F5A}
.in:focus{border-color:rgba(0,225,255,.6);box-shadow:0 0 0 3px rgba(0,225,255,.10)}
.in[type=password]{letter-spacing:2px}
.in[type=password]::placeholder{letter-spacing:0}
.hint{font-size:12px;color:var(--m);margin-top:8px;display:flex;gap:6px;align-items:center}
.meter{display:flex;gap:4px;margin-top:10px}.meter i{flex:1;height:4px;border-radius:4px;background:#22252C;transition:background .2s}
.meter[data-s="1"] i:nth-child(-n+1){background:var(--rd)}
.meter[data-s="2"] i:nth-child(-n+2){background:var(--or)}
.meter[data-s="3"] i:nth-child(-n+3){background:var(--gr)}
.meter[data-s="4"] i{background:var(--gr)}
.row{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:13px}
.chk{display:flex;gap:8px;align-items:center;color:#C9CDD6;cursor:pointer;user-select:none}
.chk input{appearance:none;width:16px;height:16px;border-radius:4px;border:1px solid #2A2D35;background:#000;cursor:pointer;display:grid;place-content:center;margin:0}
.chk input:checked{background:var(--cy);border-color:var(--cy)}
.chk input:checked:after{content:"";width:8px;height:4px;border-left:2px solid #001418;border-bottom:2px solid #001418;transform:rotate(-45deg) translate(1px,-1px)}
.cy-u{color:var(--cy);text-decoration:underline}
.go{width:100%;margin-top:26px;padding:15px;font-size:15px}
.fine{font-size:12px;text-align:center;margin-top:16px;line-height:1.5}
.fine u,.fine a{color:var(--t)}
.err{display:flex;gap:10px;align-items:flex-start;margin-top:20px;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,45,85,.45);background:rgba(255,45,85,.08);color:#FFC2CE;font-size:14px;line-height:1.4}
.err:before{content:"!";flex:none;width:18px;height:18px;border-radius:50%;background:var(--rd);color:#000;font-weight:700;font-size:12px;display:grid;place-content:center}
.note{margin-top:20px;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,122,26,.4);background:rgba(255,122,26,.07);font-size:13px;color:#E8D3C2;line-height:1.45}
.note b{color:var(--or)}
@media(max-width:900px){
 body{grid-template-columns:minmax(0,1fr)}
 .l{display:none}
 .mlogo{display:flex}
 .r{align-items:flex-start;padding:28px 20px 40px;min-height:100vh}
}