/* ===== CUBIE FX — AUTH PAGES ===== */
:root{
  --bg:#070912;
  --bg2:#0B0E1A;
  --card:#0F1320;
  --field:rgba(var(--sheen),.035);
  --line:rgba(var(--sheen),.09);
  --line2:rgba(var(--sheen),.16);
  --ink:var(--ink);
  --muted:var(--muted);
  --muted2:#6B7389;
  --pu:var(--pu);
  --pu2:var(--pu2);
  --bl:#4A8CFF;
  --grad:linear-gradient(100deg,var(--pu),var(--pu-mid));
  --green:#22C55E;
  --red:#EF4444;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;display:flex;align-items:center;justify-content:center;padding:28px 18px}
h1,h2,b,strong{font-family:"Manrope",system-ui,sans-serif;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
p{margin:0}
:focus-visible{outline:2px solid var(--pu);outline-offset:2px;border-radius:8px}

/* ambient glow */
body::before,body::after{content:"";position:fixed;border-radius:50%;filter:blur(150px);pointer-events:none;z-index:0}
body::before{width:520px;height:520px;background:rgba(109,92,255,.22);top:-180px;left:-140px}
body::after{width:460px;height:460px;background:rgba(168,85,247,.16);bottom:-180px;right:-140px}

/* ===== CARD ===== */
.auth{position:relative;z-index:1;width:100%;max-width:460px;
  background:var(--card);border:1px solid var(--line);border-radius:22px;
  padding:34px 34px 30px;box-shadow:0 40px 90px rgba(var(--shade),.6)}
.auth.split{max-width:920px;padding:0;display:grid;grid-template-columns:.85fr 1fr;overflow:hidden}
.auth.wide{max-width:520px}
.pane{position:relative;background:linear-gradient(160deg,#0D1222,#0A0D18);overflow:hidden;
  display:grid;place-items:center;padding:26px;border-right:1px solid var(--line)}
.pane svg{width:100%;height:auto;display:block}
.pane-body{padding:34px 34px 30px}

/* brand */
.brand{display:flex;align-items:center;gap:10px;margin-bottom:26px}
.brand img{width:30px;height:30px;object-fit:contain}
.brand span{font-family:"Manrope",sans-serif;font-weight:800;font-size:18px}

h1{font-size:26px;font-weight:800;margin:0 0 8px}
.gt{background:linear-gradient(100deg,#7C8BFF,#C084FC);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted2);font-size:13.5px;margin-bottom:24px}
.center{text-align:center}

/* ===== FIELDS ===== */
.field{margin-bottom:15px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:7px}
.inp{position:relative;display:flex;align-items:center}
.inp input{width:100%;background:var(--field);border:1px solid var(--line);border-radius:11px;
  padding:12px 14px;color:var(--ink);font-family:"Inter",sans-serif;font-size:14px;transition:border-color .16s,background .16s}
.inp input::placeholder{color:var(--muted2)}
.inp input:focus{outline:none;border-color:var(--pu);background:rgba(124,92,255,.06)}
.inp.has-eye input{padding-right:42px}
.eye{position:absolute;right:6px;background:none;border:0;color:var(--muted2);
  padding:8px;cursor:pointer;display:grid;border-radius:8px}
.eye:hover{color:var(--ink)}
.eye svg{width:17px;height:17px}

/* validation */
.field.bad input{border-color:var(--red);background:rgba(239,68,68,.06);color:#FCA5A5}
.field.bad .mark{position:absolute;right:14px;color:var(--red);font-size:15px;pointer-events:none}
.field.has-eye.bad .mark{right:40px}
.hint{display:none;align-items:center;gap:6px;font-size:11.5px;color:#F87171;margin-top:7px}
.field.bad .hint{display:flex}
.hint::before{content:"⊘"}

/* alert */
.alert{display:none;align-items:flex-start;gap:10px;background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.32);border-radius:12px;padding:12px 14px;margin-bottom:18px}
.alert.show{display:flex}
.alert p{font-size:12.5px;color:#FCA5A5}
.alert .x{margin-left:auto;color:#F87171;cursor:pointer;font-size:15px;line-height:1;background:none;border:0;padding:0}

/* row */
.row{display:flex;align-items:center;gap:10px;margin:4px 0 20px}
.check{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);cursor:pointer;user-select:none}
.check input{appearance:none;width:16px;height:16px;border-radius:5px;border:1px solid var(--line2);
  background:var(--field);cursor:pointer;flex:none;position:relative;margin:0}
.check input:checked{background:var(--grad);border-color:transparent}
.check input:checked::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.check a{color:var(--bl);font-weight:600}
.check a:hover{text-decoration:underline}
.row .right{margin-left:auto;font-size:12.5px;color:var(--bl);font-weight:600}
.row .right:hover{text-decoration:underline}
.terms{align-items:flex-start;margin-bottom:20px}
.terms input{margin-top:2px}

/* buttons */
.btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 20px;border-radius:12px;font-family:"Manrope",sans-serif;font-weight:700;font-size:14.5px;
  border:0;cursor:pointer;transition:transform .16s,box-shadow .2s,opacity .2s}
.btn.grad{background:var(--grad);color:#fff;box-shadow:0 10px 30px rgba(109,92,255,.3)}
.btn.grad:hover{transform:translateY(-2px)}
.btn.outline{background:transparent;border:1px solid var(--line2);color:var(--ink)}
.btn.outline:hover{border-color:rgba(var(--sheen),.3);background:rgba(var(--sheen),.04)}
.btn[disabled]{opacity:.75;cursor:default;transform:none}
.spin{width:15px;height:15px;border:2px solid rgba(var(--sheen),.35);border-top-color:#fff;
  border-radius:50%;animation:sp .7s linear infinite;display:none}
.btn.loading .spin{display:block}
@keyframes sp{to{transform:rotate(360deg)}}

/* divider + social */
.or{display:flex;align-items:center;gap:12px;margin:22px 0 16px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.social{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.soc{display:flex;align-items:center;justify-content:center;gap:9px;padding:11px;
  background:var(--field);border:1px solid var(--line);border-radius:11px;font-size:13.5px;font-weight:600;
  transition:border-color .16s,background .16s}
.soc:hover{border-color:var(--line2);background:rgba(var(--sheen),.055)}
.soc svg{width:17px;height:17px}

.foot{text-align:center;font-size:13px;color:var(--muted2);margin-top:22px}
.foot a{color:var(--bl);font-weight:600}
.foot a:hover{text-decoration:underline}
.back{display:block;text-align:center;font-size:13px;color:var(--bl);font-weight:600;margin-top:18px}
.back:hover{text-decoration:underline}

/* illustration blocks */
.art{display:grid;place-items:center;margin:6px 0 22px}
.art svg{width:180px;height:auto}
.mail-to{color:var(--bl);font-weight:600}
.lead{color:var(--muted);font-size:13.5px;margin-bottom:20px}

/* password rules */
.rules{list-style:none;padding:0;margin:4px 0 20px;display:grid;gap:7px}
.rules li{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted2)}
.rules li::before{content:"✓";font-size:11px;color:var(--muted2);
  width:15px;height:15px;display:grid;place-items:center;border-radius:50%;background:rgba(var(--sheen),.06)}
.rules li.ok{color:#4ADE80}
.rules li.ok::before{color:#4ADE80;background:rgba(34,197,94,.16)}

@media (max-width:820px){
  .auth.split{grid-template-columns:1fr;max-width:460px}
  .pane{display:none}
  .pane-body{padding:32px 26px 28px}
}
@media (max-width:480px){
  .auth{padding:28px 22px 24px;border-radius:18px}
  h1{font-size:23px}
  .social{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}