:root {
  color-scheme: dark;
  --bg: #060a11;
  --panel: rgba(11, 18, 31, .94);
  --panel-2: #0d1727;
  --line: rgba(149, 169, 199, .17);
  --text: #edf3fb;
  --muted: #8291a6;
  --blue: #1499e6;
  --gold: #d9a51c;
  --green: #25d366;
  --red: #ff4d5f;
  --amber: #f2b84b;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 20% 10%, rgba(20,153,230,.10), transparent 32rem),
    radial-gradient(circle at 85% 90%, rgba(217,165,28,.08), transparent 30rem),
    var(--bg);
  color: var(--text);
}
button, input { font: inherit; }
.shell { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.card, .cockpit {
  width: min(100%, 470px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  padding: 34px;
  backdrop-filter: blur(20px);
}
.cockpit { width: min(100%, 720px); }
.brand { width: 100%; max-width: 360px; display: block; margin: 0 auto 22px; height: auto; }
.eyebrow { color: var(--muted); font-size: 11px; letter-spacing: .22em; font-weight: 700; }
h1 { margin: 8px 0 8px; font-size: clamp(28px, 6vw, 40px); letter-spacing: -.035em; }
.subtle, .cockpit-title p { margin: 0; color: var(--muted); line-height: 1.5; }
form { margin-top: 28px; }
label { display:block; margin: 15px 0 7px; color:#aab6c7; font-size:13px; font-weight:600; }
input {
  width: 100%; border: 1px solid var(--line); background: #080f1b; color: var(--text);
  border-radius: 12px; padding: 14px 15px; outline: none; transition: .15s ease;
}
input:focus { border-color: rgba(20,153,230,.75); box-shadow: 0 0 0 3px rgba(20,153,230,.10); }
button { border: 0; cursor: pointer; }
#loginButton {
  width:100%; margin-top:20px; border-radius:12px; padding:14px 18px; color:white; font-weight:800; letter-spacing:.13em;
  background: linear-gradient(90deg, #0d6da6, #0b4f7e); border:1px solid rgba(93,190,246,.28);
}
#loginButton:disabled { opacity:.55; cursor:wait; }
.message { min-height: 22px; color: #ff8590; font-size: 13px; margin-top: 12px; text-align:center; }
footer { margin-top: 28px; padding-top: 18px; border-top:1px solid var(--line); color:#657287; font-size:10px; text-align:center; letter-spacing:.14em; }
.lamp-row { display:flex; gap:24px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.lamp-row > div { display:flex; align-items:center; gap:8px; color:#aeb8c8; font-size:12px; font-weight:800; letter-spacing:.08em; }
.lamp { width:12px; height:12px; border-radius:50%; display:inline-block; background:#56606f; box-shadow:0 0 0 4px rgba(255,255,255,.025); }
.lamp.green { background:var(--green); box-shadow:0 0 16px rgba(37,211,102,.65); }
.lamp.red { background:var(--red); box-shadow:0 0 16px rgba(255,77,95,.65); }
.lamp.amber { background:var(--amber); box-shadow:0 0 16px rgba(242,184,75,.5); }
.hidden { display:none !important; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding-bottom:20px; border-bottom:1px solid var(--line); }
.topbar img { width:220px; max-width:65%; }
.ghost { background:transparent; color:#aeb8c8; border:1px solid var(--line); padding:9px 12px; border-radius:10px; }
.cockpit-title { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:28px 0 20px; }
.cockpit-title h1 { font-size:32px; }
.user-chip { color:#aeb8c8; background:#091321; border:1px solid var(--line); padding:9px 12px; border-radius:999px; font-size:12px; }
.lamp-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.status-card { display:flex; align-items:center; gap:14px; border:1px solid var(--line); background:var(--panel-2); border-radius:16px; padding:20px; }
.status-card .lamp { width:16px; height:16px; flex:0 0 auto; }
.status-card div { display:flex; flex-direction:column; gap:3px; }
.status-card strong { font-size:13px; letter-spacing:.1em; }
.status-card span:not(.lamp) { color:var(--muted); font-size:13px; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
.metrics article { border:1px solid var(--line); border-radius:14px; padding:16px; background:#091321; min-width:0; }
.metrics span { display:block; color:var(--muted); font-size:11px; margin-bottom:8px; }
.metrics strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:15px; }
.actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.action { text-align:left; border:1px solid var(--line); border-radius:14px; padding:16px; color:#cbd5e3; background:#0a1422; opacity:.7; }
.action span,.action small { display:block; }.action small{ color:var(--muted); margin-top:4px; }
.connection { margin-top:18px; color:#8390a4; font-size:12px; text-align:center; }
@media (max-width:640px){
  .shell{padding:14px}.card,.cockpit{padding:24px;border-radius:20px}.metrics{grid-template-columns:1fr 1fr}.cockpit-title{align-items:flex-start;flex-direction:column}.lamp-grid{grid-template-columns:1fr}.actions{grid-template-columns:1fr}.topbar img{width:190px}
}