:root {
  color-scheme: dark;
  --bg: #010718;
  --line: rgba(28,158,255,.32);
  --line-strong: rgba(32,218,255,.68);
  --cyan: #20d9ff;
  --blue: #347dff;
  --text: #eefaff;
  --muted: #648bb2;
  --danger: #ff526f;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  min-width: 320px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 43%, rgba(20,91,210,.34), transparent 38%),
    radial-gradient(circle at 8% 78%, rgba(22,91,210,.2), transparent 30%),
    radial-gradient(circle at 92% 22%, rgba(24,135,219,.16), transparent 29%),
    radial-gradient(circle, rgba(113,197,255,.26) 0 1px, transparent 1.2px),
    radial-gradient(circle, rgba(63,127,255,.2) 0 1px, transparent 1.2px),
    #010718;
  background-size: auto, auto, auto, 89px 89px, 137px 137px;
  background-position: center, center, center, 7px 11px, 39px 22px;
  color: var(--text);
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
}

#network-field, .grid-field, .scan-beam, .noise { position: fixed; inset: 0; pointer-events: none; }
#network-field { width: 100vw; height: 100dvh; z-index: 0; opacity: .96; }
.grid-field {
  z-index: 1;
  background-image: linear-gradient(rgba(16,71,132,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(16,71,132,.1) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at center, #000 4%, rgba(0,0,0,.72) 46%, transparent 92%);
}
.scan-beam { z-index: 4; height: 1px; background: linear-gradient(90deg, transparent, rgba(38,202,255,.5), transparent); box-shadow: 0 0 18px #168cff; animation: scan 8s linear infinite; }
@keyframes scan { from { top: -2px; } to { top: 100vh; } }
.noise { z-index: 5; opacity: .14; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); }
.mesh-orbit, .mesh-readout { position: fixed; z-index: 1; pointer-events: none; }
.mesh-orbit { width: min(38vw, 520px); aspect-ratio: 1; border: 1px solid rgba(34,155,255,.13); border-radius: 50%; opacity: .5; animation: mesh-orbit-spin 34s linear infinite; }
.mesh-orbit::before, .mesh-orbit::after { content: ""; position: absolute; border-radius: 50%; border: 1px dashed rgba(32,217,255,.15); }
.mesh-orbit::before { inset: 13%; }
.mesh-orbit::after { inset: 31%; border-style: solid; }
.mesh-orbit i { width: 1px; height: 100%; position: absolute; left: 50%; top: 0; background: linear-gradient(transparent, rgba(50,177,255,.18), transparent); }
.mesh-orbit i:nth-child(2) { transform: rotate(60deg); }
.mesh-orbit i:nth-child(3) { transform: rotate(120deg); }
.mesh-orbit-left { left: -17vw; bottom: -24vh; }
.mesh-orbit-right { right: -17vw; top: -25vh; animation-direction: reverse; animation-duration: 42s; }
@keyframes mesh-orbit-spin { to { transform: rotate(360deg); } }
.mesh-readout { top: 51%; display: flex; align-items: center; gap: 7px; color: #345f88; font: 8px "SFMono-Regular", Consolas, monospace; letter-spacing: .17em; writing-mode: vertical-rl; }
.mesh-readout::before { content: ""; width: 1px; height: 62px; background: linear-gradient(transparent, #20d9ff, transparent); box-shadow: 0 0 9px rgba(32,217,255,.55); }
.mesh-readout b { color: #3d91b7; font-weight: 500; }
.mesh-readout-left { left: 12px; transform: rotate(180deg); }
.mesh-readout-right { right: 12px; }

.login-fullscreen-button { min-width: 112px; height: 34px; display: flex; align-items: center; justify-content: center; gap: 9px; position: fixed; z-index: 7; right: 24px; top: 22px; padding: 0 12px; border: 1px solid rgba(32,185,255,.34); background: rgba(5,31,73,.68); color: #70acd0; cursor: pointer; font: 10px Inter, "PingFang SC", sans-serif; letter-spacing: .1em; backdrop-filter: blur(8px); transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.login-fullscreen-button:hover, .login-fullscreen-button:focus-visible { color: #effbff; border-color: var(--line-strong); background: rgba(18,92,170,.48); outline: none; box-shadow: 0 0 15px rgba(32,217,255,.2); }
.login-fullscreen-button.active { color: #a1f5ff; border-color: rgba(32,217,255,.72); background: rgba(17,105,184,.5); box-shadow: 0 0 16px rgba(32,217,255,.28), inset 0 0 10px rgba(32,217,255,.1); }
.login-fullscreen-button:disabled { opacity: .45; cursor: wait; }
.fullscreen-icon { width: 14px; height: 12px; display: inline-block; position: relative; flex: none; border: 1px solid currentColor; }
.fullscreen-icon::before { content: ""; position: absolute; inset: 3px; border: 1px solid currentColor; opacity: .48; }
.login-fullscreen-button.active .fullscreen-icon { transform: scale(.8); box-shadow: 0 0 6px currentColor; }

.login-stage { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; place-items: center; padding: clamp(20px,4vh,42px) 20px 22px; position: relative; z-index: 2; }
.system-brand { display: flex; align-items: center; gap: 17px; }
.system-brand p, .system-brand h1 { margin: 0; text-align: center; }
.system-brand p { color: #32cfff; font-size: 9px; font-weight: 700; letter-spacing: .18em; text-indent: .18em; white-space: nowrap; text-shadow: 0 0 10px rgba(35,197,255,.72); }
.system-brand h1 { margin-top: 4px; color: #f4fbff; font-size: clamp(24px,2.2vw,35px); font-weight: 650; letter-spacing: .2em; text-indent: .2em; text-shadow: 0 0 15px rgba(102,181,255,.66); }
.brand-mark { width: 54px; height: 54px; display: grid; place-items: center; position: relative; flex: none; border: 1px solid var(--line-strong); transform: rotate(45deg); box-shadow: 0 0 24px rgba(28,154,255,.16), inset 0 0 18px rgba(33,130,255,.12); }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--line); }
.brand-mark::after { inset: 16px; background: var(--cyan); box-shadow: 0 0 17px var(--cyan); animation: core-pulse 2s ease-in-out infinite; }
@keyframes core-pulse { 50% { opacity: .55; transform: scale(.78); } }

.login-card { width: min(460px, calc(100vw - 32px)); position: relative; padding: 0 28px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(3,20,59,.95), rgba(1,8,28,.93)); box-shadow: 0 0 55px rgba(8,91,215,.25), inset 0 0 38px rgba(22,102,218,.1); backdrop-filter: blur(10px); }
.login-card::before { content: ""; position: absolute; z-index: -1; inset: 14px -32px; border: 1px solid rgba(39,145,244,.1); background: rgba(3,18,52,.23); clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px); }
.corner { width: 18px; height: 18px; position: absolute; pointer-events: none; }
.corner.top-left { left: -2px; top: -2px; border-left: 2px solid var(--cyan); border-top: 2px solid var(--cyan); }
.corner.top-right { right: -2px; top: -2px; border-right: 2px solid var(--cyan); border-top: 2px solid var(--cyan); }
.corner.bottom-left { left: -2px; bottom: -2px; border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); }
.corner.bottom-right { right: -2px; bottom: -2px; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); }

.card-heading { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 -28px 22px; padding: 16px 28px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(18,83,170,.18), transparent); }
.card-heading small { display: block; color: #4c7cab; font-size: 9px; letter-spacing: .18em; }
.card-heading h2 { margin: 5px 0 0; color: #eefaff; font-size: 23px; letter-spacing: .18em; }
.gateway-state { display: flex; align-items: center; gap: 7px; color: #648eb5; font-size: 10px; white-space: nowrap; }
.gateway-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: status-pulse 1.5s ease-in-out infinite; }
.gateway-state.error i { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
@keyframes status-pulse { 50% { opacity: .35; transform: scale(.7); } }

form > label { display: block; margin: 14px 0 6px; color: #789fc4; font-size: 11px; letter-spacing: .12em; }
.field { height: 48px; display: grid; grid-template-columns: 43px minmax(0,1fr) 42px; align-items: center; position: relative; border: 1px solid rgba(38,137,226,.3); background: rgba(1,10,34,.72); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.field:focus-within { border-color: var(--cyan); background: rgba(6,35,77,.74); box-shadow: 0 0 14px rgba(32,217,255,.13), inset 0 0 14px rgba(24,106,218,.1); }
.field input { width: 100%; min-width: 0; height: 100%; padding: 0 6px; border: 0; outline: 0; background: transparent; color: #e9f8ff; font: 14px "SFMono-Regular", Consolas, monospace; }
.field input::placeholder { color: #3f658a; }
.field > i { justify-self: center; position: relative; color: #53bddd; opacity: .82; }
.user-icon { width: 13px; height: 13px; border: 1px solid currentColor; border-radius: 50%; transform: translateY(-4px); }
.user-icon::after { content: ""; width: 20px; height: 9px; position: absolute; left: 50%; top: 15px; transform: translateX(-50%); border: 1px solid currentColor; border-bottom: 0; border-radius: 10px 10px 0 0; }
.key-icon { width: 15px; height: 15px; border: 1px solid currentColor; border-radius: 50%; }
.key-icon::after { content: ""; width: 13px; height: 1px; position: absolute; left: 12px; top: 7px; background: currentColor; box-shadow: 7px 3px 0 currentColor; }
.password-toggle { width: 42px; height: 46px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: #5482aa; cursor: pointer; }
.password-toggle:hover, .password-toggle:focus-visible { color: var(--cyan); outline: none; }
.password-toggle i { width: 16px; height: 9px; position: relative; border: 1px solid currentColor; border-radius: 50% / 65%; }
.password-toggle i::after { content: ""; width: 4px; height: 4px; position: absolute; left: 50%; top: 50%; border-radius: 50%; background: currentColor; transform: translate(-50%,-50%); }
.password-toggle.visible i::before { content: ""; width: 20px; height: 1px; position: absolute; left: -3px; top: 4px; z-index: 1; background: currentColor; transform: rotate(-35deg); }

.login-message { min-height: 33px; display: flex; align-items: center; margin-top: 12px; color: #587da1; font-size: 10px; letter-spacing: .05em; }
.login-message.error { color: #ff7189; }
.login-message.success { color: #67e6ff; }
.login-submit { width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; gap: 12px; position: relative; margin: 2px 0 25px; overflow: hidden; border: 1px solid rgba(32,217,255,.62); background: linear-gradient(90deg, rgba(21,95,190,.62), rgba(19,147,218,.56), rgba(21,95,190,.62)); color: #f1fbff; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .18em; box-shadow: inset 0 0 18px rgba(32,217,255,.12), 0 0 16px rgba(25,133,255,.13); }
.login-submit::before { content: ""; width: 65px; position: absolute; inset: 0 auto 0 -90px; transform: skewX(-25deg); background: linear-gradient(90deg, transparent, rgba(126,232,255,.3), transparent); animation: button-scan 3.2s ease-in-out infinite; }
@keyframes button-scan { 45%,100% { left: calc(100% + 40px); } }
.login-submit:hover, .login-submit:focus-visible { outline: none; border-color: #b6f5ff; background: linear-gradient(90deg, rgba(29,118,222,.78), rgba(21,176,230,.72), rgba(29,118,222,.78)); box-shadow: 0 0 22px rgba(32,217,255,.25); }
.login-submit:disabled { opacity: .55; cursor: wait; }
.login-submit i { color: #77eaff; font: normal 18px "SFMono-Regular", Consolas, monospace; }

.card-footer { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -28px; padding: 0 28px; border-top: 1px solid rgba(34,121,213,.18); color: #456b91; font-size: 9px; letter-spacing: .08em; }
.card-footer span:first-child { display: flex; align-items: center; gap: 6px; }
.card-footer i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.telemetry { width: min(700px, calc(100vw - 40px)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #3f6387; font: 9px "SFMono-Regular", Consolas, monospace; letter-spacing: .11em; }
.telemetry span:first-child { justify-self: start; display: flex; align-items: center; gap: 7px; }
.telemetry span:last-child { justify-self: end; }
.telemetry span i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.telemetry b { color: #5f8eb7; font-weight: 500; letter-spacing: .16em; }

@media (max-width: 620px) {
  .login-stage { padding: 20px 16px 18px; }
  .system-brand { gap: 12px; }
  .brand-mark { width: 40px; height: 40px; }
  .brand-mark::before { inset: 6px; }
  .brand-mark::after { inset: 12px; }
  .system-brand p { font-size: 6.6px; }
  .system-brand h1 { font-size: 21px; letter-spacing: .12em; text-indent: .12em; }
  .login-card { padding: 0 20px; }
  .login-card::before { display: none; }
  .card-heading { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
  .gateway-state b { display: none; }
  .card-footer { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
  .telemetry span:last-child { display: none; }
  .telemetry { grid-template-columns: 1fr auto; }
  .mesh-readout { display: none; }
  .mesh-orbit { width: 340px; opacity: .32; }
  .mesh-orbit-left { left: -230px; bottom: -120px; }
  .mesh-orbit-right { right: -240px; top: -150px; }
  .login-fullscreen-button { min-width: 38px; width: 38px; right: 12px; top: 12px; padding: 0; }
  .login-fullscreen-button span { display: none; }
}

@media (max-height: 700px) {
  .login-stage { grid-template-rows: auto 1fr; padding-top: 14px; }
  .system-brand { transform: scale(.82); }
  .login-card { align-self: center; }
  .card-heading { min-height: 68px; margin-bottom: 12px; padding-top: 10px; padding-bottom: 10px; }
  form > label { margin-top: 8px; }
  .field { height: 42px; }
  .password-toggle { height: 40px; }
  .login-submit { height: 42px; margin-bottom: 15px; }
  .card-footer { min-height: 42px; }
  .telemetry { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scan-beam, .brand-mark::after, .gateway-state i, .login-submit::before, .mesh-orbit { animation: none; }
}