/* Mizan sign-in. Self hosted fonts, no network. */
@font-face { font-family: 'Lexend Deca'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/ui/fonts/lexend-deca-variable.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/ui/fonts/inter-variable.woff2') format('woff2'); }

:root {
  --ink: #111C2E; --ink-2: #36425A; --ink-3: #5E6A80; --ink-4: #8A94A6;
  --line: #DCE2EA; --accent: #0F5FE0; --accent-ink: #0B47AA;
  --stop: #A81E12; --stop-wash: #FCEFED; --stop-line: #F0C5BF;
  --display: 'Lexend Deca', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--body); color: var(--ink-2); background: #fff; -webkit-font-smoothing: antialiased; }

.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr); min-height: 100vh; }

/* ------------------------------------------------------------- brand side */
.brand-side { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 34px;
  padding: 44px 56px 36px; color: #DDE5F2;
  background:
    radial-gradient(900px 520px at 85% 110%, rgba(15, 95, 224, .30), transparent 60%),
    radial-gradient(700px 480px at -10% -10%, rgba(91, 214, 154, .10), transparent 55%),
    linear-gradient(160deg, #0C1526 0%, #111D33 55%, #0E1830 100%); }
.brand-side::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%); }
.brand-top { position: relative; display: flex; align-items: center; gap: 12px; }
.mark { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(160deg, #1F6BFF 0%, #0B47AA 100%); box-shadow: 0 8px 24px rgba(15, 95, 224, .35); }
.mark svg { width: 26px; height: 26px; }
.word { font-family: var(--display); font-weight: 600; font-size: 22px; color: #fff; letter-spacing: -.01em; line-height: 1.1; }
.word-sub { font-size: 12.5px; color: #93A3BE; margin-top: 2px; letter-spacing: .02em; }

.hero { position: relative; max-width: 560px; }
.hero h1 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 38px; line-height: 1.12; color: #fff;
  letter-spacing: -.02em; }
.hero h1 span { color: #9CC0FF; }
.hero p { margin: 16px 0 0; font-size: 15.5px; line-height: 1.6; color: #AFBCD2; max-width: 500px; }

.art { position: relative; max-width: 600px; }
.art svg { width: 100%; height: auto; display: block; overflow: visible; }
.wires path { fill: none; stroke: rgba(160, 185, 230, .28); stroke-width: 1.6; }
.pkts circle { filter: drop-shadow(0 0 5px rgba(120, 170, 255, .9)); }
.n rect, .n circle { stroke-width: 1.4; }
.n text { font-family: var(--body); font-size: 11.5px; font-weight: 600; text-anchor: middle; fill: #E8EEF8; }
.n.src rect { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .18); }
.n.agent circle { fill: rgba(62, 124, 245, .22); stroke: #5B8DEF; }
.n.engine circle { fill: rgba(154, 167, 189, .18); stroke: #9AA7BD; }
.n.person circle { fill: rgba(242, 182, 90, .18); stroke: #E0A84A; }
.n.out circle { fill: rgba(91, 214, 154, .25); stroke: #5BD69A; animation: breathe 2.4s ease-in-out infinite; transform-origin: 540px 95px; }
.labels text { font-family: var(--body); font-size: 11px; fill: #7F90AD; text-anchor: middle; letter-spacing: .04em; }
.n.agent circle, .n.engine circle, .n.person circle { animation: ring 3.6s ease-in-out infinite; }
.n.engine circle { animation-delay: 1.2s; }
.n.person circle { animation-delay: 2.4s; }
@keyframes ring { 0%, 100% { stroke-width: 1.4; } 50% { stroke-width: 3; } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

.points { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 520px; }
.points li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #C9D4E6; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot.b { background: #5B8DEF; box-shadow: 0 0 0 4px rgba(91, 141, 239, .18); }
.dot.s { background: #9AA7BD; box-shadow: 0 0 0 4px rgba(154, 167, 189, .16); }
.dot.a { background: #E0A84A; box-shadow: 0 0 0 4px rgba(224, 168, 74, .18); }
.brand-side footer { position: relative; margin-top: auto; font-size: 12px; color: #6F7F9B; }

/* ------------------------------------------------------------- form side */
.form-side { display: grid; place-items: center; padding: 40px 28px; background:
  radial-gradient(600px 400px at 100% 0%, #F1F5FD, transparent 60%), #fff; }
.card { width: 100%; max-width: 392px; animation: rise .5s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card-mark { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 22px;
  background: linear-gradient(160deg, #1F6BFF 0%, #0B47AA 100%); box-shadow: 0 8px 22px rgba(15, 95, 224, .28); }
.card-mark svg { width: 27px; height: 27px; }
.card h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 26px; color: var(--ink); letter-spacing: -.015em; }
.muted { margin: 8px 0 26px; font-size: 14px; color: var(--ink-3); line-height: 1.5; }
.field { display: block; margin-bottom: 16px; }
.field > span:first-child { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
input { width: 100%; height: 46px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; font: inherit;
  font-size: 14.5px; color: var(--ink); background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
input:hover { border-color: #C8D1DD; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(15, 95, 224, .12); }
.pw { position: relative; display: block; }
.pw input { padding-right: 70px; }
.show { position: absolute; right: 6px; top: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-3); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.show:hover { background: #F1F4F8; color: var(--ink); }
.error { margin: 4px 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--stop-wash); border: 1px solid var(--stop-line);
  color: var(--stop); font-size: 13px; line-height: 1.45; }
.primary { position: relative; width: 100%; height: 48px; margin-top: 6px; border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, #1868EA 0%, #0F5FE0 100%); color: #fff; font: inherit; font-size: 15px; font-weight: 600;
  box-shadow: 0 6px 16px rgba(15, 95, 224, .25); transition: transform .08s, box-shadow .15s, background .15s; }
.primary:hover { background: linear-gradient(180deg, #125DDA 0%, #0B47AA 100%); box-shadow: 0 8px 20px rgba(15, 95, 224, .32); }
.primary:active { transform: translateY(1px); }
.primary .spin { display: none; position: absolute; right: 16px; top: 15px; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .7s linear infinite; }
.primary.busy .spin { display: block; }
.primary.busy { cursor: progress; }
.primary.ok { background: #0B6B45; box-shadow: 0 6px 16px rgba(11, 107, 69, .25); }
@keyframes spin { to { transform: rotate(360deg); } }
.card.shake { animation: shake .36s ease-in-out; }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.fine { margin: 18px 0 0; font-size: 12px; color: var(--ink-4); text-align: center; }

@media (max-width: 980px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .brand-side { padding: 28px 24px; gap: 22px; }
  .hero h1 { font-size: 28px; }
  .art, .points { display: none; }
  .brand-side footer { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}