/* ArchiUs — authentication pages (login / register)
   Ported from the approved design. Pure CSS, no framework needed. */

:root{
  --ink:#0b1220; --ink-1:#0f172a; --ink-2:#1e293b; --ink-3:#334155;
  --slate:#64748b; --slate-2:#94a3b8;
  --line:#e2e8f0; --line-2:#eef2f7;
  --surface:#ffffff; --canvas:#f6f8fb;
  --accent:#f97316; --accent-strong:#ea580c; --accent-tint:rgba(249,115,22,.13);
  --radius:14px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.05);
  --shadow-md:0 10px 30px -12px rgba(15,23,42,.18);
  --shadow-lg:0 30px 60px -25px rgba(15,23,42,.35);
  --font:"Plus Jakarta Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);color:var(--ink-3);background:var(--canvas);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--accent-tint);color:var(--ink-1)}
a{color:inherit}

/* ---------- Shell ---------- */
.shell{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh;background:var(--surface)}

/* ---------- Brand / showcase ---------- */
.brand{position:relative;overflow:hidden;color:#e9eef6;display:flex;flex-direction:column;justify-content:space-between;padding:44px 48px;
  background:
    radial-gradient(120% 90% at 85% 8%, #213149 0%, rgba(33,49,73,0) 55%),
    radial-gradient(130% 120% at 12% 100%, #0b1426 0%, rgba(11,20,38,0) 60%),
    linear-gradient(160deg,#0f1d33 0%,#0a1322 60%,#070d18 100%);}
.brand::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(148,163,184,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.10) 1px,transparent 1px),
    linear-gradient(rgba(148,163,184,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.045) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,24px 24px,24px 24px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 35%,#000 40%,transparent 92%);
  mask-image:radial-gradient(120% 100% at 50% 35%,#000 40%,transparent 92%);}
.brand-top,.brand-bottom{position:relative;z-index:3}

.logo{display:flex;align-items:center;gap:13px}
.logo .mark{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--accent),var(--accent-strong));
  box-shadow:0 10px 24px -8px var(--accent-strong),inset 0 1px 0 rgba(255,255,255,.35)}
.logo .name{font-weight:800;letter-spacing:.2px;font-size:1.18rem;color:#fff}
.logo .name b{color:var(--accent)}
.logo .sub{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.32em;color:var(--slate-2);text-transform:uppercase;margin-top:2px}

/* iso stage */
.stage{position:absolute;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none}
.scene{perspective:1200px;width:340px;height:340px;display:grid;place-items:center;opacity:.96;transform:translateY(-7%)}
.rig{position:relative;width:200px;height:200px;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(-34deg);animation:spin 30s linear infinite}
.rig.paused{animation:none}
@keyframes spin{to{transform:rotateX(-24deg) rotateY(326deg)}}
.box{position:absolute;transform-style:preserve-3d}
.face{position:absolute;border:1px solid rgba(148,179,222,.5);
  background:
    linear-gradient(rgba(124,160,214,.07),rgba(124,160,214,.07)),
    repeating-linear-gradient(rgba(148,179,222,.18) 0 1px,transparent 1px 25px),
    repeating-linear-gradient(90deg,rgba(148,179,222,.18) 0 1px,transparent 1px 25px)}
.face.glow{border-color:rgba(249,115,22,.85);box-shadow:0 0 18px -2px rgba(249,115,22,.45) inset}
.floor{position:absolute;width:520px;height:520px;left:50%;top:50%;
  transform:translate(-50%,-50%) rotateX(90deg) translateZ(-104px);
  background-image:linear-gradient(rgba(148,179,222,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(148,179,222,.22) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 8%,transparent 62%);
  mask-image:radial-gradient(circle at 50% 50%,#000 8%,transparent 62%)}

.annot{position:absolute;z-index:2;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:#aebfd6;
  border:1px solid rgba(148,179,222,.28);background:rgba(13,24,43,.45);backdrop-filter:blur(4px);
  padding:5px 9px;border-radius:7px;display:flex;align-items:center;gap:7px;white-space:nowrap}
.annot .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.a1{top:19%;left:8%}.a2{top:30%;right:10%}.a3{top:50%;left:7%}

.brand-copy{position:relative;z-index:3;max-width:430px}
.eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent)}
.brand-copy h1{font-size:clamp(1.9rem,2.6vw,2.55rem);line-height:1.12;font-weight:800;color:#fff;letter-spacing:-.01em}
.brand-copy p{margin-top:16px;color:#a9b7cc;font-size:1.02rem;line-height:1.55;max-width:390px}
.trust{display:flex;gap:28px;margin-top:30px;position:relative;z-index:3}
.trust .stat .n{font-size:1.32rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.trust .stat .l{font-size:.74rem;color:var(--slate-2);margin-top:2px;letter-spacing:.02em}
.trust .sep{width:1px;background:rgba(148,163,184,.22)}

/* ---------- Form panel ---------- */
.panel{position:relative;display:flex;flex-direction:column;background:var(--surface)}
.panel-bar{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:26px 44px;font-size:.86rem;color:var(--slate)}
.panel-bar a{color:var(--ink-1);font-weight:700;text-decoration:none;white-space:nowrap}
.panel-bar a:hover{color:var(--accent)}
.panel-logo{display:none;align-items:center;gap:10px;margin-right:auto}
.panel-logo .mark{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;background:linear-gradient(150deg,var(--accent),var(--accent-strong))}
.panel-logo b{color:var(--ink-1);font-weight:800}

.panel-body{flex:1;display:flex;align-items:center;justify-content:center;padding:8px 44px 44px}
.form-wrap{width:100%;max-width:392px;animation:rise .5s cubic-bezier(.22,1,.36,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.form-head h2{font-size:1.72rem;font-weight:800;color:var(--ink-1);letter-spacing:-.015em}
.form-head p{margin-top:8px;color:var(--slate);font-size:.96rem}

/* alerts */
.alert{margin-top:22px;padding:12px 14px;border-radius:var(--radius-sm);font-size:.86rem;font-weight:500;display:flex;align-items:center;gap:10px}
.alert svg{flex:none}
.alert-error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.alert-ok{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}

/* google + sso */
.sso{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.btn-google{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:13px 16px;border-radius:var(--radius);
  border:1px solid var(--line);background:#fff;cursor:pointer;text-decoration:none;
  font-family:var(--font);font-size:.96rem;font-weight:600;color:var(--ink-1);
  transition:border-color .18s,box-shadow .18s,transform .05s,background .18s}
.btn-google:hover{border-color:#cdd7e3;box-shadow:var(--shadow-sm);background:#fcfdff}
.btn-google:active{transform:translateY(1px)}
.btn-google svg{width:19px;height:19px;flex:none}

.divider{display:flex;align-items:center;gap:14px;margin:24px 0;color:var(--slate-2)}
.divider::before,.divider::after{content:"";height:1px;flex:1;background:var(--line)}
.divider span{font-size:.74rem;font-family:var(--mono);letter-spacing:.18em;text-transform:uppercase}

/* fields */
.field{margin-bottom:16px}
.field label{display:block;font-size:.8rem;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.control{position:relative;display:flex;align-items:center}
.control .lead{position:absolute;left:14px;color:var(--slate-2);display:flex;pointer-events:none}
.control input{width:100%;font-family:var(--font);font-size:.95rem;color:var(--ink-1);
  padding:13px 14px 13px 42px;border-radius:var(--radius);border:1px solid var(--line);background:#fff;
  transition:border-color .16s,box-shadow .16s}
.control input::placeholder{color:var(--slate-2)}
.control input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)}
.field.bad input{border-color:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.1)}
.control .reveal{position:absolute;right:8px;border:none;background:transparent;cursor:pointer;color:var(--slate);padding:8px;border-radius:8px;display:flex}
.control .reveal:hover{color:var(--ink-1);background:var(--line-2)}
.err{display:none;color:#dc2626;font-size:.78rem;margin-top:6px;font-weight:500}
.field.bad .err{display:block}

/* strength */
.strength{display:flex;gap:5px;margin:-6px 0 6px}
.strength i{height:4px;flex:1;border-radius:3px;background:var(--line);transition:background .25s}
.strength.s1 i:nth-child(1){background:#ef4444}
.strength.s2 i:nth-child(-n+2){background:#f59e0b}
.strength.s3 i:nth-child(-n+3){background:#eab308}
.strength.s4 i{background:#16a34a}
.strength-label{font-size:.72rem;color:var(--slate);margin-bottom:14px;font-family:var(--mono);letter-spacing:.04em}

.row-between{display:flex;align-items:center;justify-content:space-between;margin:4px 0 22px}
.check{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:.86rem;color:var(--ink-3);user-select:none}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--line);display:grid;place-items:center;transition:.15s;color:#fff}
.check input:checked + .box{background:var(--accent);border-color:var(--accent)}
.check .box svg{opacity:0;transform:scale(.6);transition:.15s}
.check input:checked + .box svg{opacity:1;transform:scale(1)}
.link-accent{color:var(--accent);font-weight:700;text-decoration:none;font-size:.86rem}
.link-accent:hover{color:var(--accent-strong);text-decoration:underline}

.btn-primary{width:100%;padding:14px 18px;border-radius:var(--radius);border:none;cursor:pointer;
  font-family:var(--font);font-weight:700;font-size:.98rem;color:#fff;
  background:linear-gradient(180deg,var(--ink-2),var(--ink-1));box-shadow:var(--shadow-md);
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .05s,box-shadow .18s,filter .18s}
.btn-primary:hover{filter:brightness(1.08);box-shadow:var(--shadow-lg)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary[disabled]{opacity:.7;cursor:default}
.btn-primary .spin{width:17px;height:17px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.btn-arrow{transition:transform .18s}
.btn-primary:hover .btn-arrow{transform:translateX(3px)}

.switch{text-align:center;margin-top:26px;font-size:.92rem;color:var(--slate)}
.switch a{color:var(--accent);font-weight:700;text-decoration:none}
.switch a:hover{color:var(--accent-strong);text-decoration:underline}
.legal{margin-top:30px;text-align:center;font-size:.74rem;color:var(--slate-2);line-height:1.6}
.legal a{color:var(--slate);text-decoration:underline;text-underline-offset:2px}

/* responsive */
@media (max-width:920px){
  .shell{grid-template-columns:1fr}
  .brand{display:none}
  .panel-logo{display:flex}
  .panel-bar{padding:22px 24px}
  .panel-body{padding:4px 24px 36px}
}