/* Mission Control — submarine red-alert / CRT.
   Phase 1 baseline. The polish step extracts more from legacy/index.html. */

:root{
  --void:#000;
  --hull:#050505;
  --panel:#0a0a0a;
  --panel-2:#101010;
  --panel-3:#161616;
  --line:#1c1c1c;
  --line-2:#262626;
  --bone:#ebe6dc;
  --dust:#8a8378;
  --ash:#4a4640;
  --red:#ff1f3d;
  --red-hot:#ff3848;
  --red-deep:#b3011d;
  --amber:#ffb000;
  --green:#00ff88;
  --shadow-red:0 0 24px rgba(255,31,61,.35), 0 0 60px rgba(255,31,61,.15);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  background:var(--void);
  color:var(--bone);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:14px;
  line-height:1.55;
  min-height:100vh;
}

a{ color:var(--bone); text-decoration:none; }
a:hover{ color:var(--red); }
code{ font-family:"JetBrains Mono",ui-monospace,monospace; color:var(--amber); }
.dust{ color:var(--dust); }
.lbl{ font-size:11px; letter-spacing:.18em; color:var(--dust); text-transform:uppercase; }

.crt-scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:.35;
  background:repeating-linear-gradient(to bottom,
    rgba(255,255,255,0) 0 2px, rgba(0,0,0,.45) 3px 3px);
  mix-blend-mode:multiply;
}
.crt-vignette{
  position:fixed;inset:0;pointer-events:none;z-index:9001;
  background:radial-gradient(ellipse at center,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.85) 100%);
}

/* ============ TOP BAR / FOOTER ================================== */
.topbar{
  display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;
  gap:18px;padding:14px 24px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--panel-2) 0%, var(--hull) 100%);
}
.callsign{
  font-family:"Major Mono Display",monospace;font-size:28px;color:var(--red);
  letter-spacing:.05em;text-shadow:var(--shadow-red);
}
.callsign .x{color:var(--bone);margin:0 4px;}
.tb-meta{font-size:11px;color:var(--dust);letter-spacing:.05em;margin-top:4px;}
.tb-meta b{color:var(--bone);}
.tb-center{text-align:center;}
.tb-title{font-family:"Antonio",sans-serif;font-size:24px;letter-spacing:.3em;}
.tb-title b{color:var(--red);}
.tb-strap{font-size:10px;color:var(--dust);letter-spacing:.18em;}
.tb-right{text-align:right;}
.clock{font-family:"VT323",monospace;font-size:24px;color:var(--amber);}
.clock small{display:block;font-size:10px;color:var(--dust);letter-spacing:.18em;}

.footbar{
  padding:12px 24px;border-top:1px solid var(--line);text-align:center;
  font-size:11px;letter-spacing:.18em;color:var(--dust);
}

/* ============ PAGE / PANELS ===================================== */
.page{
  max-width:1200px;margin:0 auto;padding:32px 24px;
  display:flex;flex-direction:column;gap:24px;
}

.panel{
  background:linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  border:1px solid var(--line);border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.6);
}
.panel-head{
  padding:10px 16px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
}
.panel-body{padding:18px 22px;}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media (max-width:720px){ .grid-2{grid-template-columns:1fr;} }

/* ============ AUTH CARDS ======================================== */
.auth-card{max-width:480px;margin:48px auto;}
.auth-card-wide{max-width:640px;}

.stack{display:flex;flex-direction:column;gap:14px;}
.stack label{
  display:flex;flex-direction:column;gap:4px;
  font-size:11px;letter-spacing:.18em;color:var(--dust);
}
.stack input, .stack select, .stack textarea{
  background:var(--hull);color:var(--bone);
  border:1px solid var(--line-2);border-radius:2px;
  padding:10px 12px;font-family:inherit;font-size:14px;
  letter-spacing:0;
}
.stack textarea{resize:vertical;min-height:60px;}
.stack input:focus, .stack select:focus, .stack textarea:focus{
  outline:none;border-color:var(--red);box-shadow:var(--shadow-red);
}
.stack label small{margin-left:8px;text-transform:none;letter-spacing:0;}
.quicknav a.active{color:var(--red);}

.btn-red{
  background:linear-gradient(180deg, var(--red-hot), var(--red-deep));
  color:var(--bone);border:1px solid var(--red);border-radius:2px;
  padding:12px 16px;font:inherit;letter-spacing:.18em;font-weight:700;
  cursor:pointer;
  box-shadow:0 0 0 1px #000 inset, 0 1px 0 rgba(255,255,255,.12) inset;
}
.btn-red:hover{filter:brightness(1.1);}

button.link{
  background:none;border:none;color:var(--bone);font:inherit;
  letter-spacing:.18em;cursor:pointer;padding:0;
}
button.link:hover{color:var(--red);}
.link{color:var(--bone);letter-spacing:.18em;font-size:11px;}
.link:hover{color:var(--red);}

.alert{
  background:rgba(179,1,29,.18);border:1px solid var(--red-deep);
  padding:10px 14px;color:var(--bone);font-size:13px;border-radius:2px;
}
.alert-warn{background:rgba(255,176,0,.12);border-color:var(--amber);}

/* ============ TOTP SETUP ======================================== */
.qr-block{
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;
  margin-bottom:16px;
}
.qr{background:#fff;padding:8px;width:200px;height:200px;}
.qr svg{width:100%;height:100%;display:block;}
.qr-meta{display:flex;flex-direction:column;gap:6px;}
.totp-secret{display:block;font-size:13px;color:var(--amber);word-break:break-all;}

.recovery-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0;
}
.recovery-code{
  display:block;background:var(--hull);border:1px solid var(--line-2);
  padding:10px 14px;color:var(--amber);text-align:center;font-size:15px;
  letter-spacing:.05em;
}

/* ============ HOME ============================================== */
.hero-strip{
  border:1px solid var(--line);background:var(--panel-2);
  padding:18px 22px;border-radius:2px;
}
.hero-empty{font-size:13px;margin-top:8px;}

.svc-list{list-style:none;display:flex;flex-direction:column;gap:8px;}
.svc-list li a{
  display:flex;gap:12px;align-items:baseline;padding:8px 12px;
  border:1px solid var(--line-2);background:var(--hull);
}
.svc-list li a:hover{border-color:var(--red);}
.svc-list small{margin-left:auto;font-size:11px;}

.led{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--ash);box-shadow:0 0 0 1px #000;
}
.led.green{background:var(--green);box-shadow:0 0 6px var(--green);}
.led.amber{background:var(--amber);box-shadow:0 0 6px var(--amber);}

.feed{list-style:none;display:flex;flex-direction:column;gap:6px;}
.feed-row{
  display:grid;grid-template-columns:80px 80px 1fr;gap:10px;
  font-size:12px;align-items:baseline;
  border-bottom:1px dashed var(--line-2);padding-bottom:6px;
}
.feed-row .ts{color:var(--dust);font-family:"VT323",monospace;font-size:14px;}
.feed-row .kind{color:var(--amber);font-weight:700;letter-spacing:.1em;}
.feed-warn .kind{color:var(--amber);}
.feed-error .kind{color:var(--red);}

.command-bar form{display:flex;gap:10px;}
.command-bar input{flex:1;background:var(--hull);color:var(--bone);
  border:1px solid var(--line-2);padding:12px 14px;font:inherit;}
.command-bar input:focus{outline:none;border-color:var(--red);box-shadow:var(--shadow-red);}
.cmd-output{
  margin-top:14px;background:var(--hull);border:1px solid var(--line-2);
  padding:12px 14px;min-height:80px;white-space:pre-wrap;font-size:13px;
  color:var(--bone);
}

.quicknav{
  display:flex;gap:18px;justify-content:center;padding:18px 0;
  border-top:1px solid var(--line);font-size:11px;letter-spacing:.18em;
}

/* ============ TABLES (services / contacts / etc.) =============== */
.tbl{width:100%;border-collapse:collapse;font-size:13px;}
.tbl th, .tbl td{
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-2);
}
.tbl th{
  font-size:10px;letter-spacing:.18em;color:var(--dust);
  text-transform:uppercase;font-weight:600;
}
.tbl tr:hover td{background:rgba(255,31,61,.04);}

.row-actions{display:flex;gap:6px;flex-wrap:wrap;}
.row-actions button, .row-actions a{
  font-size:11px;letter-spacing:.1em;padding:4px 8px;
  border:1px solid var(--line-2);background:var(--hull);
  color:var(--bone);cursor:pointer;
}
.row-actions a:hover, .row-actions button:hover{border-color:var(--red);color:var(--red);}

.metric-list{list-style:none;display:flex;flex-direction:column;gap:6px;}
.metric-list li{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line-2);padding:4px 0;}
.metric-list .amber{color:var(--amber);font-weight:700;}
.amber{color:var(--amber);}
details > summary{cursor:pointer;color:var(--bone);letter-spacing:.18em;font-size:11px;}
details > summary:hover{color:var(--red);}
details[open] > summary{color:var(--red);}

.priority-1{color:var(--red);font-weight:700;}
.priority-2{color:var(--red-hot);}
.priority-3{color:var(--bone);}
.priority-4{color:var(--dust);}
.priority-5{color:var(--ash);}

.tag{
  display:inline-block;font-size:10px;letter-spacing:.1em;padding:2px 6px;
  border:1px solid var(--line-2);background:var(--hull);color:var(--amber);
  margin-right:4px;
}