:root {
  --obsidian: #0A0C10;
  --deep: #0D1B2D;
  --violet: #5B21B6;
  --blue: #0066FF;
  --cyan: #21E6FF;
  --white: #E6F0FF;
  --muted: #8290AF;
  --panel: rgba(8, 14, 25, .78);
  --line: rgba(33, 230, 255, .32);
  --ok: #23f59b;
  --warn: #ffcc33;
  --fail: #ff3657;
  --grey: #60708f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 22%, rgba(0,102,255,.14), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(91,33,182,.16), transparent 24%),
    linear-gradient(135deg, #030407, #081223 56%, #020308);
  color: var(--white);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

.bg-orb {
  position: fixed;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(90px);
  opacity: .25;
}
.orb-a { top: -120px; right: -120px; background: var(--blue); }
.orb-b { bottom: -180px; left: -160px; background: var(--violet); }

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .08;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black, transparent 92%);
}

.scanline {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(33,230,255,.075), transparent);
  height: 18vh;
  animation: scan 6s linear infinite;
  opacity: .32;
}
@keyframes scan { from { transform: translateY(-20vh); } to { transform: translateY(120vh); } }

.hidden { display: none !important; }

.entry {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.splash {
  letter-spacing: .22em;
  color: var(--cyan);
  text-transform: uppercase;
  font-size: 13px;
  line-height: 2.25;
  animation: fadeIn .5s ease both;
}
.splash-logo {
  font-size: 22px;
  color: var(--white);
  margin-bottom: 26px;
  letter-spacing: .34em;
}
.boot-lines div {
  opacity: 0;
  animation: bootLine .36s ease forwards;
}
.boot-lines div:nth-child(1) { animation-delay: .15s; }
.boot-lines div:nth-child(2) { animation-delay: .48s; }
.boot-lines div:nth-child(3) { animation-delay: .82s; }
.boot-lines div:nth-child(4) { animation-delay: 1.16s; }
.boot-lines div:nth-child(5) { animation-delay: 1.5s; }

@keyframes bootLine {
  to { opacity: 1; transform: translateX(0); }
  from { opacity: 0; transform: translateX(-18px); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.seal-screen {
  width: min(1040px, 95vw);
  min-height: 76vh;
  display: grid;
  place-items: center;
  position: relative;
  animation: fadeIn .8s ease both;
}
.brand-top {
  position: absolute;
  top: 0;
  left: 0;
}
.brand-name, .dash-title {
  font-size: clamp(30px, 4.2vw, 58px);
  letter-spacing: .18em;
  font-weight: 500;
}
.brand-name span, .dash-title span { color: var(--cyan); }
.brand-sub, .dash-sub {
  margin-top: 12px;
  color: #2D6BFF;
  letter-spacing: .28em;
  font-size: 13px;
}

.seal {
  width: min(410px, 80vw);
  aspect-ratio: 1;
  border: 0;
  background: transparent;
  position: relative;
  cursor: pointer;
  filter: drop-shadow(0 0 42px rgba(0,102,255,.58));
  transition: transform .25s ease, filter .25s ease;
}
.seal:hover {
  transform: scale(1.035);
  filter: drop-shadow(0 0 56px rgba(33,230,255,.68));
}
.seal-glow {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(33,230,255,.16), transparent 62%);
}
.seal-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--line);
}
.ring-a {
  inset: 0;
  border-top-color: var(--cyan);
  border-right-color: var(--blue);
  border-bottom-color: var(--violet);
  box-shadow: 0 0 34px rgba(33,230,255,.35), inset 0 0 34px rgba(0,102,255,.13);
  animation: rotate 14s linear infinite;
}
.ring-b {
  inset: 34px;
  border-left-color: var(--violet);
  border-right-color: var(--cyan);
  opacity: .82;
  animation: rotateReverse 20s linear infinite;
}
.ring-c {
  inset: 68px;
  border-top-color: rgba(230,240,255,.5);
  border-bottom-color: rgba(0,102,255,.65);
  opacity: .5;
  animation: rotate 28s linear infinite;
}
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes rotateReverse { to { transform: rotate(-360deg); } }

.prophet-hood {
  position: absolute;
  inset: 83px;
  border-radius: 40% 40% 42% 42%;
  background: linear-gradient(150deg, #141c2d 0%, #05070c 55%, #0b1020 100%);
  clip-path: polygon(50% 0%, 88% 20%, 82% 72%, 50% 100%, 18% 72%, 12% 20%);
  box-shadow:
    inset 0 0 35px rgba(230,240,255,.08),
    0 0 36px rgba(0,102,255,.38);
}
.hood-top {
  position: absolute;
  inset: -3% 5% 18%;
  background: linear-gradient(160deg, rgba(230,240,255,.18), transparent 38%, rgba(91,33,182,.26));
  clip-path: polygon(50% 0, 100% 30%, 78% 100%, 50% 80%, 22% 100%, 0 30%);
}
.mask-plate {
  position: absolute;
  inset: 27% 28% 13%;
  background: linear-gradient(160deg, #263349, #03050a);
  clip-path: polygon(50% 0, 100% 30%, 80% 100%, 50% 76%, 20% 100%, 0 30%);
  box-shadow: inset 0 0 18px rgba(255,255,255,.07);
}
.mask-line {
  position: absolute;
  background: rgba(230,240,255,.34);
  box-shadow: 0 0 12px rgba(33,230,255,.34);
}
.mask-line.center {
  width: 2px;
  height: 68%;
  left: 50%;
  top: 18%;
}
.mask-line.left {
  width: 2px;
  height: 34%;
  left: 37%;
  top: 50%;
  transform: rotate(-28deg);
}
.mask-line.right {
  width: 2px;
  height: 34%;
  right: 37%;
  top: 50%;
  transform: rotate(28deg);
}
.prophet-eye {
  position: absolute;
  top: 45%;
  width: 21%;
  height: 7%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  box-shadow: 0 0 20px var(--cyan), 0 0 30px var(--blue);
}
.eye-l { left: 24%; transform: skewY(17deg); }
.eye-r { right: 24%; transform: skewY(-17deg); }

.touch-text {
  position: absolute;
  bottom: 6%;
  color: var(--muted);
  letter-spacing: .24em;
  font-size: 12px;
}
.entry-note {
  position: absolute;
  bottom: 1%;
  color: rgba(130,144,175,.55);
  letter-spacing: .16em;
  font-size: 11px;
}
.seal-exit { animation: sealExit .62s ease both; }
@keyframes sealExit { to { transform: scale(1.08); opacity: 0; filter: blur(8px); } }

.login-panel {
  width: min(500px, 94vw);
  animation: fadeIn .55s ease both;
}
.panel, .bios-panel, .hero-card {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 0 34px rgba(0,102,255,.13), inset 0 0 18px rgba(33,230,255,.05);
  backdrop-filter: blur(16px);
}
.panel {
  padding: 30px;
  clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.access-panel {
  position: relative;
}
.access-panel:after {
  content: "";
  position: absolute;
  right: -1px;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(transparent, var(--cyan), transparent);
}
.panel-title, .section-title {
  color: var(--cyan);
  letter-spacing: .22em;
  font-size: 13px;
  margin-bottom: 10px;
}
.panel-sub {
  color: var(--muted);
  margin-bottom: 24px;
  font-size: 13px;
}
label {
  display: block;
  color: var(--muted);
  letter-spacing: .12em;
  margin: 14px 0 8px;
  text-transform: uppercase;
  font-size: 12px;
}
input {
  width: 100%;
  padding: 14px;
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(33,230,255,.28);
  color: var(--white);
  outline: none;
}
input:focus { border-color: var(--cyan); box-shadow: 0 0 18px rgba(33,230,255,.22); }
button[type=submit], .mini-button {
  margin-top: 22px;
  padding: 14px;
  color: white;
  background: linear-gradient(90deg, var(--blue), var(--violet));
  border: 0;
  letter-spacing: .18em;
  cursor: pointer;
}
button[type=submit] { width: 100%; }
.mini-button {
  margin-top: 10px;
  padding: 9px 12px;
  font-size: 11px;
}
.login-error {
  color: var(--fail);
  margin-top: 18px;
  font-size: 13px;
}

.dash-body { padding: 22px; }
.dash-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  padding: 18px 20px;
  border: 1px solid rgba(33,230,255,.18);
  background: rgba(0,0,0,.22);
}
.header-right { text-align: right; }
.clock {
  color: var(--cyan);
  letter-spacing: .16em;
}
.logout {
  display: inline-block;
  margin-top: 10px;
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .16em;
}
.dashboard {
  max-width: 1480px;
  margin: 22px auto;
  display: grid;
  gap: 18px;
}
.hero-card {
  display: grid;
  grid-template-columns: 100px 1fr 170px;
  align-items: center;
  gap: 24px;
  padding: 22px;
}
.mini-seal {
  width: 92px;
  height: 92px;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(33,230,255,.3);
  position: relative;
}
.mini-hood {
  position: absolute;
  inset: 18px;
  background: #060a12;
  clip-path: polygon(50% 0%, 88% 25%, 76% 100%, 50% 78%, 24% 100%, 12% 25%);
}
.mini-eye {
  position: absolute;
  top: 43%;
  width: 18px;
  height: 5px;
  background: var(--blue);
  box-shadow: 0 0 12px var(--cyan);
}
.mini-eye.left { left: 10px; transform: skewY(18deg); }
.mini-eye.right { right: 10px; transform: skewY(-18deg); }
.hero-kicker {
  color: var(--muted);
  letter-spacing: .2em;
  font-size: 12px;
}
.overall {
  font-size: clamp(38px, 6vw, 80px);
  letter-spacing: .16em;
  margin: 4px 0;
}
.overall.ok { color: var(--ok); text-shadow: 0 0 28px rgba(35,245,155,.35); }
.overall.warn { color: var(--warn); }
.overall.fail { color: var(--fail); text-shadow: 0 0 28px rgba(255,54,87,.35); }
.summary { color: var(--muted); }
.hero-readout {
  color: var(--muted);
  display: grid;
  gap: 6px;
  font-size: 12px;
  letter-spacing: .12em;
}
.hero-readout strong { color: var(--cyan); }

.server-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card {
  min-height: 230px;
  padding: 18px;
  background: rgba(8,14,25,.74);
  border: 1px solid rgba(33,230,255,.22);
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.card:before {
  content: "";
  position: absolute;
  inset: -60%;
  background: radial-gradient(circle, rgba(0,102,255,.18), transparent 45%);
  opacity: .55;
}
.card > * { position: relative; }
.card-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-size: 20px;
  letter-spacing: .08em;
}
.badge {
  font-size: 12px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.16);
}
.badge.OK { color: var(--ok); border-color: rgba(35,245,155,.35); }
.badge.WARN { color: var(--warn); border-color: rgba(255,204,51,.35); }
.badge.FAIL { color: var(--fail); border-color: rgba(255,54,87,.35); }
.item-list {
  margin-top: 18px;
  display: grid;
  gap: 8px;
}
.item {
  color: var(--muted);
  font-size: 14px;
}
.item strong { color: var(--white); }
.two-col {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
}
.bios-panel {
  padding: 18px;
  clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
pre {
  margin: 12px 0 0;
  white-space: pre-wrap;
  color: var(--muted);
  font-size: 12px;
  max-height: 360px;
  overflow: auto;
}
details summary {
  color: var(--muted);
  cursor: pointer;
  margin-top: 14px;
}
.load-box, .problems {
  color: var(--muted);
  line-height: 1.7;
}
.problem { color: var(--fail); }

.wg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.wg-peer {
  border: 1px solid rgba(33,230,255,.18);
  background: rgba(0,0,0,.22);
  padding: 12px;
}
.wg-peer.online { border-color: rgba(35,245,155,.35); }
.wg-peer.offline { border-color: rgba(255,54,87,.25); opacity: .82; }
.wg-name {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  display: inline-block;
  background: var(--grey);
  box-shadow: 0 0 10px currentColor;
}
.dot.online { background: var(--ok); color: var(--ok); }
.dot.offline { background: var(--fail); color: var(--fail); }
.wg-meta {
  color: var(--muted);
  font-size: 12px;
  margin-top: 8px;
  line-height: 1.55;
}

@media (max-width: 1000px) {
  .server-grid, .two-col, .wg-grid { grid-template-columns: 1fr; }
  .hero-card { grid-template-columns: 1fr; }
  .hero-readout { grid-template-columns: repeat(2, auto); }
  .dash-header { flex-direction: column; }
  .brand-top { position: static; align-self: start; }
  .seal-screen { min-height: 82vh; }
}