:root {
  color-scheme: dark;
  --bg: #07100f;
  --panel: rgba(12, 27, 23, 0.86);
  --line: rgba(178, 255, 225, 0.14);
  --text: #eefbf6;
  --muted: #829b92;
  --lime: #c9ff4a;
  --mint: #64f7c5;
  --danger: #ff737d;
  --mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; min-height: 100%; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  font-family: var(--sans);
  background:
    linear-gradient(rgba(100, 247, 197, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 247, 197, 0.026) 1px, transparent 1px),
    radial-gradient(circle at 18% 10%, rgba(57, 157, 130, 0.2), transparent 38%),
    radial-gradient(circle at 92% 80%, rgba(201, 255, 74, 0.08), transparent 34%),
    var(--bg);
  background-size: 48px 48px, 48px 48px, auto, auto, auto;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 65%, rgba(255,255,255,.05) 0 1px, transparent 1px);
  background-size: 11px 13px, 17px 19px;
}

.ambient { position: fixed; border-radius: 999px; filter: blur(110px); pointer-events: none; opacity: .18; }
.ambient-one { width: 420px; height: 420px; top: 8%; left: -220px; background: var(--mint); }
.ambient-two { width: 360px; height: 360px; right: -160px; bottom: -120px; background: var(--lime); }

.login-shell {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 48px));
  min-height: calc(100vh - 82px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(380px, .72fr);
  align-items: center;
  gap: clamp(56px, 8vw, 118px);
  padding: 56px 0 40px;
}

.login-intro { min-height: 580px; display: flex; flex-direction: column; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 14px; width: fit-content; color: inherit; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; display: block; object-fit: cover; border-radius: 11px 3px 11px 3px; box-shadow: 0 0 32px rgba(201,255,74,.2); }
.brand-copy { display: grid; gap: 3px; }
.brand-copy strong { font-size: 19px; letter-spacing: .08em; }
.brand-copy strong span { color: var(--lime); }
.brand-copy small { color: var(--muted); font: 8px var(--mono); letter-spacing: .2em; }

.intro-copy { margin: 70px 0; }
.eyebrow { margin: 0 0 20px; color: var(--muted); font: 10px var(--mono); letter-spacing: .16em; }
.eyebrow span { color: var(--lime); }
h1 { margin: 0; max-width: 700px; font-size: clamp(52px, 6.2vw, 84px); line-height: .94; letter-spacing: -.055em; }
h1 em { color: var(--lime); font-style: normal; }
.lede { max-width: 590px; margin: 26px 0 0; color: #97ada5; font-size: 14px; line-height: 1.85; }
.feature-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.feature-row span { padding: 7px 10px; border: 1px solid rgba(178,255,225,.12); border-radius: 6px; color: #738b82; background: rgba(13,26,24,.46); font: 9px var(--mono); letter-spacing: .08em; }
.network-line { display: flex; justify-content: space-between; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font: 9px var(--mono); letter-spacing: .1em; }
.network-line span { display: flex; align-items: center; gap: 8px; }
.network-line i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.network-line b { color: rgba(201,255,74,.66); }

.access-panel { position: relative; overflow: hidden; padding: 30px; border: 1px solid rgba(178,255,225,.17); border-radius: 20px; background: linear-gradient(145deg, rgba(17,38,33,.96), rgba(8,19,17,.9)); box-shadow: inset 0 1px rgba(255,255,255,.03), 0 34px 90px rgba(0,0,0,.3); }
.access-panel::after { content: ""; position: absolute; width: 190px; height: 190px; right: -95px; top: -100px; border-radius: 50%; background: var(--lime); filter: blur(65px); opacity: .11; pointer-events: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font: 9px var(--mono); letter-spacing: .14em; }
.panel-head b { color: var(--lime); }
.access-symbol { position: relative; width: 72px; height: 72px; margin: 48px 0 30px; display: flex; align-items: flex-end; justify-content: center; gap: 5px; padding: 17px; border: 1px solid rgba(201,255,74,.2); border-radius: 20px 5px 20px 5px; background: rgba(201,255,74,.09); }
.access-symbol span { position: absolute; width: 26px; height: 22px; top: 10px; border: 4px solid var(--lime); border-bottom: 0; border-radius: 15px 15px 0 0; }
.access-symbol i { display: block; width: 6px; background: var(--lime); border-radius: 1px; }
.access-symbol i:nth-of-type(1) { height: 11px; }
.access-symbol i:nth-of-type(2) { height: 19px; }
.access-symbol i:nth-of-type(3) { height: 14px; }
.access-copy p { margin: 0 0 9px; color: var(--mint); font: 9px var(--mono); letter-spacing: .14em; }
.access-copy h2 { margin: 0; font-size: 27px; letter-spacing: -.03em; }
.access-copy > span { display: block; margin-top: 11px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.access-form { margin-top: 29px; }
.access-form label { display: block; margin: 0 0 9px; color: #9cb2aa; font: 10px var(--mono); letter-spacing: .08em; }
.password-field { height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 15px; border: 1px solid rgba(178,255,225,.14); border-radius: 9px; background: rgba(5,14,12,.66); transition: 160ms ease; }
.password-field:focus-within { border-color: rgba(201,255,74,.7); box-shadow: 0 0 0 3px rgba(201,255,74,.07), 0 0 30px rgba(201,255,74,.05); }
.password-field span { color: var(--lime); font: 11px var(--mono); letter-spacing: .1em; }
.password-field input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; font: 14px var(--mono); letter-spacing: .12em; }
.password-field input::placeholder { color: #526a61; letter-spacing: .03em; }
.form-error { min-height: 18px; margin: 9px 0 0; color: var(--danger); font-size: 11px; }
.form-error[data-state="hidden"] { visibility: hidden; }
.access-form button { width: 100%; min-height: 50px; margin-top: 13px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border: 1px solid var(--lime); border-radius: 9px; cursor: pointer; color: #08120f; background: var(--lime); font-size: 13px; font-weight: 720; transition: 160ms ease; }
.access-form button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(201,255,74,.14); }
.access-form button:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.access-form button b { font: 18px var(--mono); }
.access-note { display: flex; align-items: flex-start; gap: 8px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: #62786f; font-size: 10px; line-height: 1.6; }
.access-note i { flex: 0 0 auto; width: 6px; height: 6px; margin-top: 5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px rgba(100,247,197,.7); }

footer { position: relative; z-index: 1; width: min(1180px, calc(100% - 48px)); min-height: 82px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: #526a61; font: 9px var(--mono); letter-spacing: .1em; }

@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; gap: 42px; padding-top: 34px; }
  .login-intro { min-height: auto; }
  .intro-copy { margin: 66px 0 46px; }
  .access-panel { max-width: 520px; width: 100%; }
}

@media (max-width: 560px) {
  .login-shell, footer { width: calc(100% - 28px); }
  .login-shell { padding-top: 24px; }
  .intro-copy { margin: 52px 0 36px; }
  h1 { font-size: clamp(44px, 14vw, 64px); }
  .lede { font-size: 13px; }
  .network-line { align-items: flex-start; flex-direction: column; gap: 10px; }
  .access-panel { padding: 24px 20px; }
  .access-symbol { margin-top: 38px; }
  footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}