/* ============================================================
   Agently — Login page (premium, split layout)
   ============================================================ */
:root{
  --bg:#fff; --bg-gray:#f5f5f7; --bg-dark:#0a0a0c;
  --ink:#1d1d1f; --ink-soft:#6e6e73; --ink-faint:#86868b;
  --line:#e7e7ec; --line-strong:#d2d2d7;
  --accent:#7c3aed; --accent-press:#6d28d9; --accent-soft:#f4f0fe;
  --shadow-sm:0 2px 10px rgba(0,0,0,.04);
  --shadow:0 8px 30px rgba(0,0,0,.08);
  --shadow-lg:0 30px 70px rgba(0,0,0,.18);
  --pill:980px; --r:18px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Geist','Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;letter-spacing:-.012em;line-height:1.5}
a{color:inherit;text-decoration:none}
svg{display:block}

.auth{display:grid;grid-template-columns:1.05fr 1fr;min-height:100vh}

/* ---------- left brand panel ---------- */
.brandside{position:relative;overflow:hidden;background:var(--bg-dark);color:#fff;
  display:flex;flex-direction:column;padding:44px clamp(36px,4vw,64px);
  background-image:radial-gradient(120% 80% at 0% 0%, rgba(124,58,237,.45) 0%, rgba(124,58,237,0) 50%),
                   radial-gradient(100% 90% at 100% 100%, rgba(124,58,237,.28) 0%, rgba(124,58,237,0) 55%);}
.bs-brand{display:flex;align-items:center;gap:11px;font-size:20px;font-weight:600;letter-spacing:-.02em}
.bs-mark{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;overflow:hidden;background:#000;box-shadow:0 8px 20px rgba(0,0,0,.45)}
.bs-mark img{width:100%;height:100%;object-fit:cover;display:block}
.bs-mark svg{width:19px;height:19px}
.bs-mark.sm{width:30px;height:30px;border-radius:8px}.bs-mark.sm svg{width:16px;height:16px}
.bs-copy{margin-top:auto;padding-top:48px}
.bs-copy h1{font-size:clamp(30px,3.4vw,46px);font-weight:600;letter-spacing:-.035em;line-height:1.08;max-width:14ch}
.bs-copy p{margin-top:18px;font-size:17px;color:rgba(255,255,255,.66);max-width:42ch;line-height:1.55;font-weight:400}

.bs-preview{margin-top:36px}
.bs-window{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);box-shadow:var(--shadow-lg)}
.bs-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08)}
.bs-bar .d{width:10px;height:10px;border-radius:50%}
.bs-bar .r{background:#ff5f57}.bs-bar .y{background:#febc2e}.bs-bar .g{background:#28c840}
.bs-body{position:relative;height:230px;overflow:hidden;background:rgba(255,255,255,.02);
  background-image:radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1.3px);background-size:22px 22px}
.bs-foot{margin-top:auto;padding-top:36px;font-size:13px;color:rgba(255,255,255,.5);font-weight:400}

/* mini board (dark variant) */
.mboard{position:absolute;inset:0}
.mwire{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.mwire path{fill:none;stroke:var(--accent);stroke-width:2;opacity:.7}
.mcard{position:absolute;width:170px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden;backdrop-filter:blur(8px)}
.mcard .mtop{height:3px;background:var(--accent2,#7c3aed)}
.mcard .mhead{display:flex;align-items:center;gap:7px;padding:9px 10px 5px}
.mcard .mic{width:22px;height:22px;border-radius:6px;background:var(--accent2,#7c3aed);color:#fff;display:grid;place-items:center}
.mcard .mic svg{width:12px;height:12px}
.mcard .mname{font-size:11.5px;font-weight:600;color:#fff}
.mcard .mbody{padding:0 10px 10px;display:flex;flex-direction:column;gap:6px}
.mcard .mmodel{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:500;color:rgba(255,255,255,.7);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:4px 7px}
.mcard .mmodel .md{width:6px;height:6px;border-radius:50%;background:var(--accent2,#7c3aed)}
.mtag{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:600;padding:3px 7px;border-radius:20px;align-self:flex-start}
.mtag .td{width:5px;height:5px;border-radius:50%}
.mtag.run{background:rgba(124,58,237,.25);color:#c4b3ff}.mtag.run .td{background:#c4b3ff}
.mtag.done{background:rgba(40,200,100,.2);color:#7ee2a8}.mtag.done .td{background:#7ee2a8}
.mtag.idle{background:rgba(255,255,255,.1);color:rgba(255,255,255,.7)}.mtag.idle .td{background:rgba(255,255,255,.6)}

/* ---------- right form panel ---------- */
.formside{display:flex;align-items:center;justify-content:center;padding:40px clamp(20px,4vw,48px)}
.form-wrap{width:100%;max-width:380px}
.mobile-brand{display:none;align-items:center;gap:9px;font-weight:600;font-size:18px;margin-bottom:28px}
.form-head h2{font-size:30px;font-weight:600;letter-spacing:-.03em}
.form-head p{margin-top:8px;color:var(--ink-soft);font-size:15px;font-weight:400}

.oauth{display:flex;flex-direction:column;gap:10px;margin-top:30px}
.prov{display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;font-family:inherit;
  font-size:15px;font-weight:500;color:var(--ink);background:#fff;border:1px solid var(--line-strong);
  border-radius:12px;padding:13px 16px;transition:.2s var(--ease)}
.prov:hover{background:var(--bg-gray);border-color:var(--ink-faint)}
.prov:active{transform:scale(.99)}
.prov-ic{width:22px;height:22px;display:grid;place-items:center;flex-shrink:0}
.prov-ic svg{width:22px;height:22px}
.prov-label{flex:1;text-align:center;transform:translateX(-11px)}
.prov.phantom{border-color:transparent;background:var(--accent);color:#fff}
.prov.phantom:hover{background:var(--accent-press)}
.prov[disabled]{opacity:.55;cursor:progress}

.divider{display:flex;align-items:center;gap:14px;margin:24px 0;color:var(--ink-faint);font-size:12.5px}
.divider::before,.divider::after{content:"";height:1px;background:var(--line);flex:1}

.email-form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:7px}
.field>span{font-size:13px;font-weight:500;color:var(--ink-soft)}
.field .row{display:flex;align-items:center;justify-content:space-between}
.forgot{font-size:12.5px;color:var(--accent);font-weight:500}
.forgot:hover{text-decoration:underline}
.field input{font-family:inherit;font-size:15px;color:var(--ink);padding:12px 14px;border:1px solid var(--line-strong);
  border-radius:11px;outline:none;background:#fff;transition:.18s var(--ease);width:100%}
.field input::placeholder{color:var(--ink-faint)}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.field input.bad{border-color:#e5484d;box-shadow:0 0 0 4px #fdecec}

.submit{margin-top:4px;font-family:inherit;font-size:15px;font-weight:500;color:#fff;background:var(--ink);
  border:none;border-radius:11px;padding:13px;cursor:pointer;transition:.2s var(--ease)}
.submit:hover{background:#000}
.submit:active{transform:scale(.99)}

.msg{min-height:18px;margin-top:14px;font-size:13.5px;font-weight:500;text-align:center;transition:.2s}
.msg.err{color:#d23b3b}
.msg.ok{color:#1a8d4a}

.switch{margin-top:18px;text-align:center;font-size:14px;color:var(--ink-soft)}
.switch a{color:var(--accent);font-weight:500}
.switch a:hover{text-decoration:underline}
.legal{margin-top:22px;text-align:center;font-size:12px;color:var(--ink-faint);line-height:1.5}
.legal a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px}

@media (max-width:880px){
  .auth{grid-template-columns:1fr}
  .brandside{display:none}
  .mobile-brand{display:flex}
  .formside{min-height:100vh}
}