@charset "utf-8";

:root {
  color-scheme: light;
  --bg: #f4f7f9;
  --surface: #ffffff;
  --surface-alt: #edf2f6;
  --border: #d7e0e7;
  --border-strong: #b9c9d4;
  --text: #111820;
  --muted: #56616f;
  --faint: #8994a2;
  --accent: #007f9d;
  --accent-rgb: 0,127,157;
  --violet: #7558ff;
  --violet-rgb: 117,88,255;
  --success: #087f5b;
  --error: #c43c52;
  --display: "Space Grotesk", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --body: "Segoe UI", "Microsoft YaHei", sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
body { margin: 0; color: var(--text); background: var(--bg); font: 14px/1.7 var(--body); }
button, input { font: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }

.login-shell { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); min-height: 100vh; overflow: hidden; }
.signal-stage { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; padding: clamp(28px, 4vw, 62px); overflow: hidden; }
.signal-stage::after { content: ""; position: absolute; z-index: 0; top: -12vh; right: -10vw; width: 38vw; height: 125vh; border-left: 1px solid rgba(var(--accent-rgb), .2); background: linear-gradient(135deg, transparent 20%, rgba(var(--accent-rgb), .035) 20% 55%, rgba(var(--violet-rgb), .04) 55%); transform: skewX(-8deg); pointer-events: none; }
.login-brand { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 11px; width: max-content; color: var(--text); text-decoration: none; }
.brand-mark { display: grid; grid-template-columns: repeat(3, 4px); align-items: end; gap: 3px; width: 27px; height: 27px; padding: 5px; border: 1px solid rgba(var(--accent-rgb), .55); border-radius: 8px; background: rgba(var(--accent-rgb), .07); }
.brand-mark i { width: 4px; border-radius: 4px; background: var(--accent); }
.brand-mark i:nth-child(1) { height: 7px; opacity: .55; }.brand-mark i:nth-child(2) { height: 13px; }.brand-mark i:nth-child(3) { height: 9px; opacity: .78; }
.login-brand strong, .login-brand small { display: block; line-height: 1.2; }.login-brand strong { font: 700 17px/1.1 var(--display); }.login-brand small { margin-top: 2px; color: var(--faint); font: 500 9px/1.4 var(--mono); letter-spacing: .08em; }

.signal-copy { position: relative; z-index: 2; align-self: center; max-width: 670px; padding: 8vh 0 28vh; }
.protocol-kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 17px; color: var(--accent); font: 600 10px/1.4 var(--mono); letter-spacing: .11em; }.protocol-kicker span { width: 28px; height: 1px; background: var(--accent); }
.signal-copy h1 { margin: 0; font: 700 clamp(50px, 6vw, 88px)/1.01 var(--display); letter-spacing: -.035em; }.signal-copy h1 em { color: var(--accent); font-style: normal; }
.signal-copy > p:last-child { max-width: 570px; margin: 24px 0 0; color: var(--muted); font-size: 15px; line-height: 1.9; }

.relay-gate { position: absolute; z-index: 3; right: clamp(30px, 5vw, 85px); bottom: 14vh; display: grid; grid-template-columns: repeat(3, 112px); gap: 15px; align-items: center; transform: rotate(-8deg); }
.gate-line { position: absolute; z-index: -1; top: 31px; right: 45px; left: 45px; height: 1px; overflow: hidden; background: var(--border-strong); }.gate-line i { display: block; width: 80px; height: 100%; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: relay 2.8s ease-in-out infinite; }
.gate-node { display: grid; grid-template-columns: 34px 1fr; align-items: center; min-height: 64px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.83); box-shadow: 0 12px 34px rgba(26,39,52,.08); backdrop-filter: blur(8px); transform: rotate(8deg); }
.gate-node b { grid-row: 1 / 3; color: var(--faint); font: 700 14px/1 var(--mono); }.gate-node span { font: 700 11px/1.3 var(--body); }.gate-node small { color: var(--faint); font: 500 8px/1.2 var(--mono); letter-spacing: .07em; }.gate-node.is-ready { border-color: rgba(var(--accent-rgb), .35); }.gate-node.is-ready b, .gate-node.is-ready small { color: var(--accent); }
.gate-core { position: absolute; top: -85px; left: 135px; display: grid; place-items: center; width: 82px; height: 82px; border: 1px solid rgba(var(--violet-rgb), .42); border-radius: 26px; color: var(--violet); background: rgba(var(--violet-rgb), .07); box-shadow: 0 0 0 10px rgba(var(--violet-rgb), .025); transform: rotate(53deg); }.gate-core span { font: 700 20px/1 var(--display); transform: rotate(-45deg); }.gate-core i { position: absolute; top: 10px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 13px rgba(8,127,91,.65); }
.signal-meta { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; color: var(--faint); font: 500 9px/1.4 var(--mono); letter-spacing: .06em; }.signal-meta span:first-child { color: var(--success); }.signal-meta i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; }

.credential-stage { position: relative; z-index: 4; display: grid; place-items: center; min-height: 100vh; padding: clamp(24px, 5vw, 72px); border-left: 1px solid var(--border); background: rgba(255,255,255,.68); backdrop-filter: blur(14px); }
.credential-card { width: min(430px, 100%); padding: clamp(27px, 4vw, 42px); border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: 0 24px 80px rgba(26,39,52,.12); }
.credential-card header > p { margin: 0 0 9px; color: var(--accent); font: 600 9px/1.4 var(--mono); letter-spacing: .14em; }.credential-card h2 { margin: 0; font: 700 29px/1.2 var(--display); }.credential-card header > span { display: block; margin-top: 10px; color: var(--muted); font-size: 12px; }
form { margin-top: 29px; }.credential-card label { display: block; margin: 17px 0 7px; color: var(--muted); font-size: 11px; font-weight: 700; }
.field-shell { display: grid; grid-template-columns: 38px 1fr; align-items: center; min-height: 45px; border: 1px solid var(--border); border-radius: 10px; background: #f8fafc; transition: border-color .18s, box-shadow .18s; }.field-shell:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .1); }.field-shell > span { display: grid; place-items: center; height: 24px; border-right: 1px solid var(--border); color: var(--faint); font: 600 10px/1 var(--mono); }.field-shell input { width: 100%; min-width: 0; height: 43px; padding: 0 12px; border: 0; outline: 0; color: var(--text); background: transparent; font: 11px/1 var(--mono); }
.login-error { display: grid; gap: 2px; margin-top: 15px; padding: 11px 12px; border: 1px solid rgba(196,60,82,.28); border-radius: 9px; color: var(--error); background: rgba(196,60,82,.055); }.login-error b { font-size: 11px; }.login-error span { color: var(--muted); font-size: 10px; }
#loginButton { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 46px; margin-top: 20px; padding: 0 15px; border: 1px solid var(--accent); border-radius: 10px; color: #fff; background: var(--accent); font-size: 11px; font-weight: 700; cursor: pointer; transition: background .18s, border-color .18s, transform .15s; }#loginButton:hover { border-color: #005f78; background: #005f78; }#loginButton:active { transform: scale(.99); }#loginButton:disabled { opacity: .62; cursor: wait; }.button-state { font: 20px/1 var(--display); }
.credential-card > footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 15px; border-top: 1px solid var(--border); color: var(--faint); font: 500 8px/1.4 var(--mono); }.credential-card > footer span { color: var(--success); }.credential-card > footer i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: currentColor; }

@keyframes relay { 0%,100% { transform: translateX(-80px); } 50% { transform: translateX(320px); } }
@media (max-width: 940px) { .login-shell { grid-template-columns: 1fr; }.signal-stage { min-height: 46vh; padding-bottom: 120px; }.signal-copy { padding: 10vh 0 0; }.signal-copy h1 { font-size: clamp(45px, 10vw, 68px); }.relay-gate { right: 6vw; bottom: 35px; transform: scale(.8) rotate(-8deg); transform-origin: right bottom; }.credential-stage { min-height: 54vh; border-top: 1px solid var(--border); border-left: 0; }.credential-card { margin-top: -54px; } }
@media (max-width: 560px) { .signal-stage { min-height: 420px; padding: 24px 18px 135px; }.signal-copy { padding-top: 65px; }.signal-copy > p:last-child { font-size: 13px; }.relay-gate { right: -25px; bottom: 30px; transform: scale(.68) rotate(-8deg); }.signal-meta { display: none; }.credential-stage { padding: 22px 14px 38px; }.credential-card { padding: 25px 19px; border-radius: 14px; }.credential-card h2 { font-size: 25px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }