:root {
  color-scheme: dark;
  --bg: #090a0b;
  --panel: #111315;
  --line: #292d30;
  --line-soft: #1b1e20;
  --text: #f2f3f4;
  --muted: #858b90;
  --brand: #faee13;
  --green: #3dc77e;
  --red: #ef5757;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: var(--bg); color: var(--text); }
body { min-height: 100vh; overflow: hidden; }
button, input { font: inherit; }

#network-field { position: fixed; inset: 0; width: 100%; height: 100%; opacity: 0.4; }
body::before, body::after { content: ""; position: fixed; pointer-events: none; }
body::before { inset: 18px; border: 1px solid #16191b; }
body::after { top: 0; bottom: 0; left: 50%; width: 1px; background: #121416; }

.login-brand { position: fixed; top: 34px; left: 42px; z-index: 2; display: flex; align-items: center; gap: 12px; }
.login-brand img { width: 38px; height: 38px; object-fit: contain; }
.login-brand span { display: grid; gap: 3px; }
.login-brand strong { font-size: 14px; letter-spacing: 0; }
.login-brand small { color: var(--muted); font-size: 9px; font-weight: 750; }

.login-stage { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 94px 28px 64px; }
.access-panel { width: min(440px, 100%); padding: 30px; border: 1px solid var(--line); border-radius: 8px; background: rgba(17, 19, 21, 0.96); box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42); }
.environment-label { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 9px; border: 1px solid #33340f; border-radius: 4px; color: var(--brand); background: #181807; font-size: 9px; font-weight: 800; }
.environment-label i, .access-meta i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.access-heading { margin: 28px 0 26px; }
.section-index { color: #62686d; font-size: 9px; font-weight: 800; }
.access-heading h1 { margin: 10px 0 8px; font-size: 28px; line-height: 1.2; letter-spacing: 0; }
.access-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

#login-form { display: grid; gap: 15px; }
.field { display: grid; gap: 7px; }
.field > span:first-child { color: #a1a6aa; font-size: 10px; font-weight: 700; }
.field input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 5px; outline: none; background: #0c0e0f; color: var(--text); font-size: 13px; transition: border-color 150ms ease, background-color 150ms ease; }
.field input:hover { border-color: #3b4044; }
.field input:focus { border-color: var(--brand); background: #101213; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 44px; }
.password-field button { position: absolute; top: 5px; right: 5px; width: 32px; height: 32px; border: 0; border-radius: 4px; background: transparent; color: #70767b; cursor: pointer; }
.password-field button:hover { background: #181a1c; color: var(--text); }
.login-error { min-height: 16px; margin: -2px 0 0; color: var(--red); font-size: 10px; }
.login-submit { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border: 0; border-radius: 5px; background: var(--brand); color: #0a0b0c; cursor: pointer; font-size: 12px; font-weight: 800; }
.login-submit:hover { background: #fff419; }
.login-submit:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.login-submit:disabled { cursor: wait; opacity: 0.65; }
.login-submit b { font-size: 18px; font-weight: 500; }

.access-meta { display: flex; align-items: center; gap: 12px; margin-top: 25px; padding-top: 16px; border-top: 1px solid var(--line-soft); color: #666c71; font-size: 9px; }
.access-meta span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--green); }
.access-meta i { background: var(--green); }
.system-mark { position: fixed; right: 42px; bottom: 34px; z-index: 2; display: grid; gap: 4px; color: #52575b; font-size: 8px; font-weight: 750; text-align: right; }

@media (max-width: 700px) {
  body { overflow: auto; }
  body::before { inset: 10px; }
  body::after { display: none; }
  .login-brand { top: 26px; left: 24px; }
  .login-stage { padding: 100px 18px 74px; }
  .access-panel { padding: 24px 20px; }
  .access-heading h1 { font-size: 24px; }
  .system-mark { right: 24px; bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}