:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  letter-spacing: 0;
  --ink: #08090b;
  --paper: #f4f1e9;
  --muted: #9ca5a2;
  --cyan: #48efd2;
  --coral: #ff6d63;
  --amber: #f5c451;
  --line: rgba(255,255,255,.14);
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
body { margin: 0; overflow-x: hidden; background: var(--ink); color: var(--paper); }
.login-icp { position: fixed; z-index: 3; bottom: 14px; left: 50%; transform: translateX(-50%); }
.login-icp a { color: #747e7a; font-size: 10px; text-decoration: none; white-space: nowrap; }
.login-icp a:hover, .login-icp a:focus-visible { color: var(--cyan); }
button, input { font: inherit; letter-spacing: 0; }
svg { width: 19px; height: 19px; }

#signal-field, .archive-image, .login-grid { position: fixed; inset: 0; }
#signal-field { z-index: 0; width: 100%; height: 100%; }
.archive-image { z-index: -2; background: linear-gradient(90deg, rgba(8,9,11,.34), rgba(8,9,11,.9) 68%), url("../downloads/preview_主路线蓝图.png") center / cover no-repeat; opacity: .34; filter: saturate(.45) contrast(1.16); }
.login-grid { z-index: -1; background-image: linear-gradient(rgba(72,239,210,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(72,239,210,.07) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(90deg, #000, transparent 70%); }

.login-shell { position: relative; z-index: 2; width: min(1180px, calc(100% - 48px)); min-height: 100vh; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, .65fr); align-items: center; gap: 88px; padding: 48px 0; }
.login-brand { align-self: center; }
.brand-code { color: var(--cyan); font: 700 12px/1.4 Consolas, monospace; }
.login-brand h1 { max-width: 720px; margin: 24px 0 16px; font-size: 84px; line-height: .96; font-weight: 800; }
.login-brand p { margin: 0; color: #d7dad6; font-size: 21px; }
.archive-signal { width: fit-content; display: flex; align-items: center; gap: 10px; margin-top: 42px; color: var(--muted); font: 11px/1.3 Consolas, monospace; }
.archive-signal span { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); animation: signal 1.8s ease-in-out infinite; }

.login-panel { position: relative; padding: 34px; border: 1px solid var(--line); border-radius: 6px; background: rgba(12,14,16,.82); box-shadow: 0 30px 80px rgba(0,0,0,.42); backdrop-filter: blur(18px); }
.login-panel::before { content: ""; position: absolute; inset: -1px auto auto -1px; width: 88px; height: 2px; background: var(--coral); }
.panel-index { color: var(--coral); font: 700 11px/1 Consolas, monospace; }
.login-panel h2 { margin: 15px 0 32px; font-size: 26px; }
.login-panel label { display: block; margin: 18px 0 8px; color: var(--muted); font-size: 12px; }
.field { height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--line); background: rgba(5,6,7,.64); }
.field:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(72,239,210,.1); }
.field > svg { color: var(--cyan); }
.field input { min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--paper); }
.reveal-button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.reveal-button:hover { color: var(--paper); }
.login-error { margin: 14px 0 0; color: var(--coral); font-size: 12px; }
.login-button { width: 100%; height: 50px; display: flex; align-items: center; justify-content: space-between; margin-top: 26px; padding: 0 18px; border: 0; background: var(--paper); color: var(--ink); font-weight: 750; cursor: pointer; }
.login-button:hover { background: var(--cyan); }
.panel-foot { display: flex; align-items: center; gap: 8px; margin-top: 20px; color: #747e7a; font-size: 11px; }
.panel-foot svg { width: 15px; }

@keyframes signal { 50% { opacity: .35; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

@media (max-width: 820px) {
  .login-shell { width: min(100% - 32px, 560px); grid-template-columns: 1fr; align-content: center; gap: 36px; padding: 38px 0; }
  .login-brand h1 { font-size: 58px; }
  .login-brand p { font-size: 17px; }
  .archive-signal { margin-top: 24px; }
  .login-panel { padding: 28px 24px; }
}

@media (max-width: 480px) {
  .login-shell { width: calc(100% - 24px); }
  .login-brand h1 { font-size: 44px; overflow-wrap: anywhere; }
  .login-panel { padding: 26px 20px; }
}