@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Share+Tech+Mono&family=VT323&family=Barlow+Condensed:wght@300;400;600;700&family=JetBrains+Mono:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root {
  /* NASA / Mission Control — deep space blue, professional */
  --nasa-blue: #0B3D91;
  --nasa-red: #FC3D21;
  --g0: #050a14;
  --g1: #0a1225;
  --g2: #0f1a35;
  --green: #00d4ff;   /* Iron Man: use cyan for success (JARVIS) */
  --green-b: #00b8e6;
  --green-d: #006680;
  --green-f: rgba(0,212,255,.04);
  --green-glow: 0 0 8px rgba(0,212,255,.5), 0 0 20px rgba(0,212,255,.15);
  --green-glow-s: 0 0 12px rgba(0,212,255,.7), 0 0 32px rgba(0,212,255,.25);
  --green-glow-xl: 0 0 18px rgba(0,212,255,.4), 0 0 50px rgba(0,212,255,.12);
  --white: #e8f4ff;
  --white-d: rgba(232,244,255,.85);
  --white-dd: rgba(232,244,255,.55);
  --cyan: #4fc3f7;
  --cyan-glow: 0 0 10px rgba(79,195,247,.5), 0 0 4px rgba(79,195,247,.25);
  --cyan-glow-s: 0 0 14px rgba(79,195,247,.6), 0 0 30px rgba(79,195,247,.15);
  --gold: #ffc107;
  --gold-glow: 0 0 10px rgba(255,179,0,.5);
  --yellow: #ffd740;
  --yellow-glow: 0 0 8px rgba(255,215,64,.55);
  --red: #ff1744;
  --red-glow: 0 0 8px rgba(255,23,68,.6);
  --orange: #ff6d00;
  --magenta: #e040fb;
  --magenta-glow: 0 0 10px rgba(224,64,251,.5);
  --lime: #00e676;
  --lime-glow: 0 0 8px rgba(0,230,118,.5);
  --coral: #ff6e40;
  --coral-glow: 0 0 8px rgba(255,110,64,.5);
  --mint: #69f0ae;
  --mint-glow: 0 0 8px rgba(105,240,174,.4);
  --panel: rgba(11,61,145,.15);
  --panel-glass: rgba(11,61,145,.12);
  --border: rgba(79,195,247,.25);
  --border-hi: rgba(79,195,247,.5);
  --border-glow: rgba(0,212,255,.1);
  --metal: linear-gradient(165deg, rgba(11,61,145,.25) 0%, rgba(5,20,50,.98) 50%, rgba(11,61,145,.2) 100%);
  --data-bg: rgba(79,195,247,.05);
}

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

html, body {
  width:100%; height:100%; overflow:hidden;
  background: var(--g0);
  color: var(--cyan);
  font-family: 'Share Tech Mono', 'JetBrains Mono', monospace;
}

/* Noise texture overlay */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9992;
  opacity:.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* CRT scanlines — subtle mission control tint */
.scanlines {
  position:fixed; inset:0; pointer-events:none; z-index:9990;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 1px,
    rgba(79,195,247,.008) 1px,
    rgba(79,195,247,.008) 2px
  );
}

/* Vignette — NASA mission control edge glow */
.vignette {
  position:fixed; inset:0; pointer-events:none; z-index:9989;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(79,195,247,.03) 60%, rgba(255,193,7,.02) 70%, rgba(11,61,145,.04) 80%, rgba(0,0,0,.4) 100%);
}


/* Animations */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes pulse-slow { 0%,100%{opacity:.85} 50%{opacity:.4} }
@keyframes data-flicker {
  0%,100%{opacity:1} 8%{opacity:.88} 12%{opacity:1} 60%{opacity:1} 63%{opacity:.92} 65%{opacity:1}
}
@keyframes cursor-blink { 0%,50%{opacity:1} 51%,100%{opacity:0} }

/* Iron Man HUD animations */
@keyframes hud-corner-glow {
  0%, 100% { opacity: .85; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.15); }
}
@keyframes panel-shimmer {
  0% { background-position: 0% 50%; opacity: .45; }
  100% { background-position: 200% 50%; opacity: .6; }
}
@keyframes value-glow {
  0%, 100% { text-shadow: 0 0 12px rgba(0,212,255,.7), 0 0 32px rgba(0,212,255,.2); }
  50% { text-shadow: 0 0 18px rgba(0,212,255,.9), 0 0 40px rgba(0,212,255,.3); }
}
@keyframes value-glow-yw {
  0%, 100% { text-shadow: 0 0 12px rgba(255,179,0,.6), 0 0 32px rgba(255,179,0,.15); }
  50% { text-shadow: 0 0 18px rgba(255,179,0,.85), 0 0 40px rgba(255,179,0,.25); }
}
@keyframes met-pulse {
  0%, 100% { opacity: .9; }
  50% { opacity: 1; }
}
@keyframes gauge-shimmer {
  0% { box-shadow: 0 0 8px var(--cyan); }
  50% { box-shadow: 0 0 14px var(--cyan), 0 0 4px rgba(79,195,247,.5); }
  100% { box-shadow: 0 0 8px var(--cyan); }
}
@keyframes dash-appear {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mission-id-glow {
  0%, 100% { text-shadow: 0 0 12px rgba(79,195,247,.7), 0 0 32px rgba(79,195,247,.2); }
  50% { text-shadow: 0 0 16px rgba(79,195,247,.9), 0 0 40px rgba(79,195,247,.25); }
}
@keyframes chip-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(255,179,0,.2); }
  50% { box-shadow: 0 0 10px rgba(255,179,0,.35), 0 0 4px rgba(0,212,255,.15); }
}
@keyframes gauge-shimmer-yw {
  0%, 100% { box-shadow: 0 0 8px var(--gold); }
  50% { box-shadow: 0 0 14px var(--gold), 0 0 4px rgba(255,179,0,.5); }
}
@keyframes pt-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.pdot {
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--cyan); box-shadow:var(--cyan-glow);
  animation: pulse 2s ease infinite;
}
.pdot.red { background:var(--red); box-shadow:var(--red-glow); animation-duration:.8s; }
.pdot.yellow { background:var(--yellow); box-shadow:var(--yellow-glow); }
.pdot.cyan { background:var(--cyan); box-shadow:var(--cyan-glow); }

/* ════════════════════════════════
   STARFIELD
════════════════════════════════ */
#sf { position:fixed; inset:0; pointer-events:none; z-index:0; }

/* ════════════════════════════════
   LOGIN
════════════════════════════════ */
#login {
  position:fixed; inset:0; z-index:500;
  display:flex; flex-direction:column;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(79,195,247,.15), transparent 50%),
    radial-gradient(ellipse at 85% 70%, rgba(255,193,7,.12), transparent 45%),
    radial-gradient(ellipse at 50% 85%, rgba(252,61,33,.05), transparent 40%),
    radial-gradient(ellipse at 70% 20%, rgba(11,61,145,.2), transparent 35%),
    radial-gradient(ellipse at 10% 80%, rgba(79,195,247,.06), transparent 30%),
    var(--g0);
  transition: opacity .85s ease;
}
#login.out { opacity:0; pointer-events:none; }

.login-grid {
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
}
.login-grid svg {
  width:100%; height:100%; opacity:.12;
  animation: login-grid-pulse 4s ease-in-out infinite;
}
@keyframes login-grid-pulse {
  0%, 100% { opacity:.08; }
  50% { opacity:.18; }
}

.login-full {
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  min-height:100vh; width:100%; z-index:1;
  animation: login-appear .8s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes login-appear {
  from { opacity:0; transform:scale(.98); }
  to { opacity:1; transform:scale(1); }
}

.login-left { animation: login-left-in .9s cubic-bezier(.22,1,.36,1) .15s both; }
.login-right { animation: login-right-in .9s cubic-bezier(.22,1,.36,1) .25s both; }
@keyframes login-left-in {
  from { opacity:0; transform:translateX(-24px); }
  to { opacity:1; transform:translateX(0); }
}
@keyframes login-right-in {
  from { opacity:0; transform:translateX(24px); }
  to { opacity:1; transform:translateX(0); }
}

.hero h1 { animation: login-title-glow 2.5s ease-in-out infinite; }
@keyframes login-title-glow {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(0,212,255,.5)) drop-shadow(0 0 4px rgba(255,179,0,.3)); }
  50% { filter: drop-shadow(0 0 20px rgba(0,212,255,.8)) drop-shadow(0 0 12px rgba(255,179,0,.5)); }
}

.login-form .fld { animation: login-field-in .5s cubic-bezier(.22,1,.36,1) both; }
.login-form .fld:nth-child(1) { animation-delay:.5s; }
.login-form .fld:nth-child(2) { animation-delay:.6s; }
.login-form .fld:nth-child(3) { animation-delay:.7s; }
.login-form .fld:nth-child(4) { animation-delay:.8s; }
.login-form .lbtn { animation: login-field-in .5s cubic-bezier(.22,1,.36,1) .9s both; }
@keyframes login-field-in {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:translateY(0); }
}
@media (max-width:900px) {
  .login-full { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
}

.login-left {
  display:flex; flex-direction:column; justify-content:center;
  padding:48px 48px 48px 64px;
  border-right:1px solid var(--border);
  box-shadow: 4px 0 32px rgba(0,212,255,.08), -4px 0 20px rgba(255,179,0,.05);
  position:relative;
}
.login-left::after {
  content:''; position:absolute; top:0; right:-1px; width:2px; height:100%;
  background: linear-gradient(180deg, var(--cyan), var(--gold), rgba(255,23,68,.5), var(--cyan));
  opacity:.9;
}
.login-right {
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:48px 64px;
}
.login-hdr {
  font-size:9px; letter-spacing:3.5px;
  background: linear-gradient(90deg, var(--cyan), var(--gold), rgba(255,23,68,.8));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family:'Barlow Condensed',sans-serif; font-weight:600;
  text-transform:uppercase; margin-bottom:32px;
}
.hero { text-align:left; margin-bottom:24px; }
.sat-art {
  font-family:'VT323',monospace; font-size:14px;
  color:rgba(255,179,0,.85); line-height:1.4;
  display:inline-block; letter-spacing:1px;
  text-shadow: 0 0 12px rgba(255,179,0,.3), 0 0 4px rgba(0,212,255,.2);
}
.hero h1 {
  font-family:'Orbitron',sans-serif; font-size:28px; font-weight:900;
  letter-spacing:8px;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan) 50%, var(--gold) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 12px rgba(0,212,255,.5)) drop-shadow(0 0 4px rgba(255,179,0,.3));
  margin-top:12px;
}
.hero .sub {
  font-family:'Barlow Condensed',sans-serif; font-weight:300;
  font-size:11px; letter-spacing:6px; color:rgba(255,215,64,.7); margin-top:6px;
  text-shadow: 0 0 8px rgba(255,179,0,.15);
}

#boot {
  font-family:'VT323',monospace; font-size:14px;
  line-height:1.8; min-height:80px; margin-top:8px;
  border-left:2px solid;
  border-image: linear-gradient(180deg, var(--cyan), var(--gold), var(--cyan)) 1;
  padding-left:14px;
  color:rgba(0,212,255,.75);
}
#boot .hi { color:var(--cyan); text-shadow:0 0 8px rgba(0,212,255,.4); }
#boot .ok { color:var(--cyan); text-shadow:0 0 8px rgba(0,212,255,.4); }
#boot .wn { color:var(--gold); text-shadow:0 0 8px rgba(255,179,0,.35); }
.boot-cursor { animation:cursor-blink 1s step-end infinite; color:var(--cyan); display:inline-block; }

.login-form { width:100%; max-width:320px; }
.fld { margin-bottom:18px; }
.flbl {
  display:block; font-family:'Barlow Condensed',sans-serif;
  font-weight:700; font-size:9px; letter-spacing:3px;
  margin-bottom:6px; text-transform:uppercase;
}
.fld:first-child .flbl { color:rgba(0,212,255,.65); }
.fld:nth-child(2) .flbl { color:rgba(255,179,0,.7); }
.irow { display:flex; align-items:center; gap:8px; }
.fld:first-child .prm { color:var(--cyan); text-shadow:var(--cyan-glow); }
.fld:nth-child(2) .prm { color:var(--gold); text-shadow:var(--gold-glow); }
.prm { font-size:15px; flex-shrink:0; }
input.ti {
  flex:1; background:rgba(0,212,255,.03); border:none;
  border-bottom:1px solid rgba(0,212,255,.35);
  color:var(--cyan); font-family:'Share Tech Mono',monospace;
  font-size:15px; padding:6px 2px; outline:none;
  caret-color:var(--cyan); letter-spacing:2px;
  transition:border-color .3s, background .3s;
}
input.ti:focus {
  border-bottom-color:var(--cyan);
  background:rgba(0,212,255,.06);
  box-shadow: 0 1px 0 rgba(0,212,255,.4);
}
input.ti::placeholder { color:rgba(0,212,255,.25); }

#lerr { font-size:10px; color:var(--red); letter-spacing:1px; min-height:15px; margin:3px 0 6px; text-shadow:var(--red-glow); }

.lbtn {
  width:100%; margin-top:18px; background:transparent;
  border:1px solid var(--cyan);
  color:var(--cyan);
  font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:4px; padding:12px; cursor:pointer; text-transform:uppercase;
  box-shadow: 0 0 12px rgba(0,212,255,.4), 0 0 4px rgba(255,179,0,.25);
  transition:all .25s;
  position:relative; overflow:hidden;
}
.lbtn::after {
  content:''; position:absolute; inset:-1px; z-index:-1;
  background: linear-gradient(90deg, transparent 0%, rgba(255,179,0,.15) 50%, transparent 100%);
  opacity:0; transition:opacity .25s;
}
.lbtn:hover::after { opacity:1; }
.lbtn::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(0,212,255,.15), rgba(255,179,0,.1), transparent);
  transition:left .5s;
}
.lbtn:hover::before { left:100%; }
.lbtn:hover { background:rgba(0,212,255,.08); box-shadow:var(--cyan-glow-s); }
.lbtn:active { transform:scale(.99); }
.lbtn.busy { color:var(--gold); border-color:var(--gold); box-shadow:var(--gold-glow); }
.lbtn.ok2 { color:var(--cyan); border-color:var(--cyan); box-shadow:var(--cyan-glow-s); }
.lbtn.err2 { color:var(--red); border-color:var(--red); box-shadow:var(--red-glow); }

.login-ftr {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:28px; width:100%; max-width:320px;
  animation: login-field-in .5s cubic-bezier(.22,1,.36,1) 1s both;
  font-size:9px; letter-spacing:1px;
}
.login-ftr > div:first-child { color:rgba(0,212,255,.6); }
.login-ftr > div:last-child { color:rgba(255,179,0,.7); }

/* ════════════════════════════════
   DASHBOARD
════════════════════════════════ */
#dash {
  display:none; opacity:0; position:fixed; inset:0;
  flex-direction:column; gap:4px; padding:4px;
  z-index:100; transition:opacity .8s ease;
}
#dash.show { display:flex; }
#dash.vis { opacity:1; }
#dash.vis .mgrid { animation: dash-appear .6s cubic-bezier(.22,1,.36,1) forwards; }

/* ── NAVBAR (HUD strip) ── */
.nb {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 16px; flex-shrink:0;
  background: linear-gradient(180deg, rgba(11,61,145,.35) 0%, rgba(5,20,50,.98) 50%, rgba(11,61,145,.2) 100%);
  border:1px solid var(--border);
  border-top:none;
  position:relative;
}
.nb::after {
  content:''; position:absolute; bottom:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent 5%, rgba(79,195,247,.25) 50%, transparent 95%);
}

.nb-left { display:flex; align-items:center; gap:0; }
.nb-tabs { display:flex; gap:4px; margin-right:16px; }
.nb-tab {
  background:transparent; border:1px solid rgba(0,212,255,.25);
  color:rgba(0,212,255,.6); font-family:'Barlow Condensed',sans-serif;
  font-weight:700; font-size:9px; letter-spacing:2px;
  padding:5px 12px; cursor:pointer; transition:all .25s; text-transform:uppercase;
}
.nb-tab:hover { border-color:var(--cyan); color:var(--cyan); }
.nb-tab.act { border-color:var(--cyan); color:var(--cyan); background:rgba(0,212,255,.1); box-shadow:var(--cyan-glow); }
.nb-missionid {
  font-family:'Orbitron',sans-serif; font-size:13px; font-weight:900;
  letter-spacing:4px; color:var(--cyan);
  text-shadow:var(--cyan-glow-s);
  padding-right:14px; border-right:1px solid var(--border);
  animation: mission-id-glow 2.5s ease-in-out infinite;
}
.nb-mode-toggle {
  display:flex; align-items:center; gap:6px;
  padding-right:14px; border-right:1px solid var(--border);
}
.mode-btn {
  background:transparent; border:1px solid transparent;
  color:rgba(0,212,255,.4); font-family:'Barlow Condensed',sans-serif;
  font-weight:700; font-size:9px; letter-spacing:2px;
  padding:4px 10px; cursor:pointer; transition:all .25s; text-transform:uppercase;
}
.mode-btn:hover { color:rgba(0,212,255,.85); border-color:var(--border); }
.mode-btn.act {
  color:var(--cyan); border-color:var(--cyan);
  box-shadow:var(--cyan-glow);
}
.mode-sep { font-size:10px; color:rgba(0,212,255,.25); }
.nb-meta { padding-left:14px; display:flex; flex-direction:column; gap:2px; }
.nb-meta-top {
  font-family:'Barlow Condensed',sans-serif; font-weight:600;
  font-size:9px; letter-spacing:3px; color:rgba(0,212,255,.55);
}
.nb-meta-bot {
  font-family:'Share Tech Mono',monospace; font-size:9px;
  letter-spacing:1px; color:rgba(0,212,255,.4);
}

.nb-right { display:flex; align-items:center; gap:14px; }
.nstat { text-align:center; }
.nstat .nv {
  display:block; font-family:'Orbitron',sans-serif; font-size:11px;
  font-weight:700; color:var(--cyan); text-shadow:var(--cyan-glow);
}
.nstat:nth-of-type(2) .nv { color: var(--lime); text-shadow: var(--lime-glow); }
.nstat:nth-of-type(3) .nv { color: var(--coral); text-shadow: var(--coral-glow); }
.nstat .nl { font-size:8px; letter-spacing:2px; color:var(--white-dd); font-family:'Barlow Condensed',sans-serif; font-weight:600; }

.nb-div { width:1px; height:28px; background:var(--border); }

.nusr {
  display:flex; align-items:center; gap:7px;
  padding:4px 10px; border:1px solid var(--border);
  background:var(--data-bg); font-size:10px;
  backdrop-filter:blur(4px);
}
.uico { color:var(--cyan); font-size:12px; text-shadow:var(--cyan-glow); }
.unm { font-size:10px; letter-spacing:2px; color:var(--cyan); font-family:'Share Tech Mono',monospace; }
.url2 { font-size:7px; letter-spacing:2px; color:var(--white-dd); font-family:'Barlow Condensed',sans-serif; font-weight:700; }
.badge-a {
  background:var(--cyan); color:var(--g0);
  font-family:'Orbitron',sans-serif; font-size:7px; font-weight:900;
  letter-spacing:1px; padding:2px 6px;
  box-shadow: var(--cyan-glow);
}
.badge-g {
  background:rgba(255,179,0,.1); color:var(--gold);
  border:1px solid rgba(255,179,0,.35);
  font-family:'Orbitron',sans-serif; font-size:7px; font-weight:900;
  letter-spacing:1px; padding:2px 6px;
}
.nbtn {
  background:transparent; border:1px solid var(--border);
  color:rgba(0,212,255,.5); font-family:'Barlow Condensed',sans-serif;
  font-weight:700; font-size:10px; letter-spacing:2px;
  padding:5px 12px; cursor:pointer; transition:all .25s; text-transform:uppercase;
}
.nbtn:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(0,212,255,.06); box-shadow:var(--cyan-glow); }
.nbtn.pri { border-color:rgba(0,212,255,.45); color:var(--cyan); }

/* ── MAIN GRID ── */
.mgrid {
  display:grid;
  grid-template-columns: 270px 1fr 270px;
  grid-template-rows: 1fr 1fr minmax(100px, auto);
  gap:4px; flex:1; min-height:0;
}
/* ── PANEL (HUD style) ── */
.pnl {
  background: var(--metal);
  border:1px solid var(--border);
  padding:12px 14px;
  position:relative; overflow:hidden;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow: inset 0 0 40px rgba(0,212,255,.03), inset 0 0 20px rgba(255,179,0,.01);
}
.pnl::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent 5%, var(--cyan) 30%, var(--gold) 50%, var(--cyan) 70%, transparent 95%);
  background-size:200% 100%;
  animation: panel-shimmer 4s ease-in-out infinite;
}
.pnl::after {
  content:''; position:absolute; top:0; left:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--cyan), var(--gold), rgba(0,212,255,.15), transparent);
  opacity:.4;
}

/* HUD corner brackets — Iron Man glow pulse */
.pnl .hud-tl, .pnl .hud-tr, .pnl .hud-bl, .pnl .hud-br {
  position:absolute; width:12px; height:12px; z-index:2;
  animation: hud-corner-glow 3s ease-in-out infinite;
}
.pnl .hud-tl { top:0; left:0; border-top:2px solid var(--cyan); border-left:2px solid var(--cyan); box-shadow: var(--cyan-glow); }
.pnl .hud-tr { top:0; right:0; border-top:2px solid var(--cyan); border-right:2px solid var(--cyan); box-shadow: var(--cyan-glow); }
.pnl .hud-bl { bottom:0; left:0; border-bottom:2px solid var(--cyan); border-left:2px solid var(--cyan); box-shadow: var(--cyan-glow); }
.pnl .hud-br { bottom:0; right:0; border-bottom:2px solid var(--cyan); border-right:2px solid var(--cyan); box-shadow: var(--cyan-glow); }

/* Panel accent variants — more color (MS5611=lime, TMP=magenta, telemetry=cyan, IMU=coral) */
#view-cubesat > .pnl:nth-child(1) .hud-tl, #view-cubesat > .pnl:nth-child(1) .hud-tr,
#view-cubesat > .pnl:nth-child(1) .hud-bl, #view-cubesat > .pnl:nth-child(1) .hud-br {
  border-color: var(--lime); box-shadow: var(--lime-glow);
}
#view-cubesat > .pnl:nth-child(2) .hud-tl, #view-cubesat > .pnl:nth-child(2) .hud-tr,
#view-cubesat > .pnl:nth-child(2) .hud-bl, #view-cubesat > .pnl:nth-child(2) .hud-br {
  border-color: var(--magenta); box-shadow: var(--magenta-glow);
}
#view-cubesat > .pnl:nth-child(3) .hud-tl, #view-cubesat > .pnl:nth-child(3) .hud-tr,
#view-cubesat > .pnl:nth-child(3) .hud-bl, #view-cubesat > .pnl:nth-child(3) .hud-br {
  border-color: var(--cyan); box-shadow: var(--cyan-glow);
}
#view-cubesat > .pnl:nth-child(4) .hud-tl, #view-cubesat > .pnl:nth-child(4) .hud-tr,
#view-cubesat > .pnl:nth-child(4) .hud-bl, #view-cubesat > .pnl:nth-child(4) .hud-br {
  border-color: var(--coral); box-shadow: var(--coral-glow);
}

/* Gold-accent panels (CPU, Battery) */
.pnl-gold .hud-tl, .pnl-gold .hud-tr { border-color: var(--gold); box-shadow: var(--gold-glow); }
.pnl-gold .hud-bl, .pnl-gold .hud-br { border-color: var(--gold); box-shadow: var(--gold-glow); }
.pnl-gold::before { background: linear-gradient(90deg, transparent 5%, var(--gold) 50%, transparent 95%); }

/* Gyro panel — mint accent */
.pnl-gyro .hud-tl, .pnl-gyro .hud-tr { border-color: var(--mint); box-shadow: var(--mint-glow); }
.pnl-gyro .hud-bl, .pnl-gyro .hud-br { border-color: var(--mint); box-shadow: var(--mint-glow); }
.pnl-gyro .gyro-v { color: var(--mint); text-shadow: var(--mint-glow); }
.pnl-gyro .gyro-item { background: rgba(105,240,174,.06); border-color: rgba(105,240,174,.25); }
.sys-strip { align-items:stretch; }
.pnl-sys { padding:10px 12px; }
.gyro-strip { display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.gyro-item { display:flex; flex-direction:column; gap:1px; padding:6px 10px; background:rgba(0,212,255,.05); border:1px solid rgba(0,212,255,.2); }
.gyro-l { font-size:7px; letter-spacing:1px; color:var(--white-dd); font-family:'Barlow Condensed',sans-serif; font-weight:700; }
.gyro-v { font-family:'Orbitron',sans-serif; font-size:14px; font-weight:700; color:var(--cyan); text-shadow:var(--cyan-glow); }
.gyro-v.yw { color:var(--gold); text-shadow:var(--gold-glow); }

.pt {
  font-family:'Orbitron',sans-serif; font-weight:700;
  font-size:10px; letter-spacing:4px;
  margin-bottom:10px; text-transform:uppercase;
  display:flex; align-items:center; gap:8px;
  background: linear-gradient(90deg, var(--cyan), var(--gold), var(--cyan));
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: pt-shimmer 5s linear infinite;
}
.pt .chip {
  font-size:7px; letter-spacing:1.5px; padding:2px 8px;
  background:linear-gradient(135deg, rgba(255,179,0,.15), rgba(0,212,255,.08));
  border:1px solid rgba(255,179,0,.4);
  color:var(--gold);
  -webkit-text-fill-color: var(--gold);
  box-shadow: 0 0 6px rgba(255,179,0,.2);
  animation: chip-glow 2.5s ease-in-out infinite;
}
.pt .status-led {
  width:6px; height:6px; border-radius:50%;
  background:var(--cyan); box-shadow:var(--cyan-glow);
  animation:pulse 2.5s ease infinite;
  margin-left:2px;
}
.pt::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--border), transparent); }

/* Big values — high contrast, easy to scan, subtle glow */
.bv {
  font-family:'Orbitron',sans-serif; font-size:36px; font-weight:700;
  color:var(--cyan); text-shadow:var(--cyan-glow-s); line-height:1.1;
  letter-spacing:2px;
  animation: value-glow 3s ease-in-out infinite;
}
.bv.cy { color:var(--cyan); text-shadow:var(--cyan-glow-s); }
.bv.yw { color:var(--gold); text-shadow:var(--gold-glow); animation: value-glow-yw 3s ease-in-out infinite; }
.bu { font-size:12px; color:rgba(255,179,0,.8); margin-left:4px; }
.bl { font-family:'Barlow Condensed',sans-serif; font-size:9px; letter-spacing:2.5px; color:rgba(0,212,255,.4); margin-top:4px; text-transform:uppercase; }

/* Data rows — label dim, value bright */
.sr {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 0; border-bottom:1px solid rgba(0,212,255,.06);
  gap:12px;
}
.sr:last-child { border-bottom:none; }
.sl { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:9px; letter-spacing:2px; color:rgba(255,179,0,.6); text-transform:uppercase; flex-shrink:0; }
.sr:nth-child(odd) .sl { color:var(--white-dd); }
.sv { font-family:'JetBrains Mono', 'Share Tech Mono', monospace; font-size:13px; font-weight:500; color:var(--cyan); text-shadow:var(--cyan-glow); letter-spacing:1px; }
.sv.cy { color:var(--cyan); text-shadow:var(--cyan-glow); }
.sv.gn { color:var(--green); text-shadow:var(--green-glow); }
.sv.yw { color:var(--gold); text-shadow:var(--gold-glow); }
.sv.rd { color:var(--red); text-shadow:var(--red-glow); }
.sv.mt { color:rgba(0,212,255,.4); }

/* Gauge — NASA mission control instrument style */
.gb {
  height:6px; margin-top:6px; overflow:visible; position:relative;
  background: linear-gradient(90deg,
    rgba(11,61,145,.4) 0%,
    rgba(79,195,247,.08) 20%,
    rgba(79,195,247,.12) 50%,
    rgba(255,193,7,.06) 80%,
    rgba(11,61,145,.3) 100%
  );
  border:1px solid rgba(79,195,247,.2);
  border-radius:3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
}
.gb::before {
  content:''; position:absolute; inset:0;
  background: rgba(79,195,247,.02);
  border-radius:2px; pointer-events:none;
}
.gf {
  height:100%; border-radius:2px; min-width:4px;
  background: linear-gradient(90deg, rgba(79,195,247,.7), var(--cyan));
  box-shadow: 0 0 10px var(--cyan), inset 0 0 8px rgba(79,195,247,.4);
  transition: width 1.2s cubic-bezier(.23,1,.32,1);
  position:relative;
  animation: gauge-shimmer 2.5s ease-in-out infinite;
}
.gf::after {
  content:''; position:absolute; right:0; top:-2px; bottom:-2px; width:5px;
  background: linear-gradient(180deg, var(--cyan), rgba(79,195,247,.9));
  border-radius:1px;
  box-shadow: 0 0 10px var(--cyan), 0 0 4px rgba(79,195,247,.6);
}
.gf.cy {
  background: linear-gradient(90deg, rgba(79,195,247,.7), var(--cyan));
  box-shadow: 0 0 10px var(--cyan), inset 0 0 8px rgba(79,195,247,.4);
}
.gf.cy::after { background: linear-gradient(180deg, var(--cyan), rgba(79,195,247,.9)); box-shadow: 0 0 10px var(--cyan); }
.gf.yw {
  background: linear-gradient(90deg, rgba(255,193,7,.6), var(--gold));
  box-shadow: 0 0 10px var(--gold), inset 0 0 8px rgba(255,193,7,.3);
  animation: gauge-shimmer-yw 2.5s ease-in-out infinite;
}
.gf.yw::after {
  background: linear-gradient(180deg, var(--gold), rgba(255,193,7,.9));
  box-shadow: 0 0 10px var(--gold), 0 0 4px rgba(255,193,7,.5);
}

/* IMU cells — clear label / value */
.imgrid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:6px; }
.icell {
  padding:8px 10px; border:1px solid rgba(0,212,255,.2);
  background:linear-gradient(135deg, rgba(0,212,255,.08), rgba(255,179,0,.03));
  transition:border-color .25s, box-shadow .25s;
}
.icell:hover { border-color:rgba(255,179,0,.4); box-shadow: 0 0 14px rgba(0,212,255,.1), 0 0 6px rgba(255,179,0,.08); }
.ic-l { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:8px; letter-spacing:2px; color:rgba(232,244,255,.45); text-transform:uppercase; }
.ic-v { font-family:'JetBrains Mono', 'Share Tech Mono', monospace; font-size:15px; font-weight:600; color:var(--cyan); text-shadow:var(--cyan-glow); margin-top:4px; letter-spacing:1px; }
.ic-v.gn { color:var(--green); text-shadow:var(--green-glow); }
.icu { font-size:9px; color:rgba(255,179,0,.6); }

/* Sparkline */
.spwrap { margin-top:8px; }
.splbl { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:8px; letter-spacing:2px; color:rgba(255,179,0,.6); margin-bottom:3px; text-transform:uppercase; }
canvas.sp { display:block; width:100%; height:32px; }

/* Telem log — readable stream */
.tlog {
  height:100%; overflow-y:auto;
  font-family:'JetBrains Mono', 'Share Tech Mono', monospace; font-size:10px; line-height:1.9;
  color:rgba(0,212,255,.55);
}
.tlog::-webkit-scrollbar { width:4px; }
.tlog::-webkit-scrollbar-track { background:rgba(0,212,255,.04); }
.tlog::-webkit-scrollbar-thumb { background:rgba(0,212,255,.25); border-radius:2px; }
.tlog::-webkit-scrollbar-thumb:hover { background:rgba(0,212,255,.45); }
.tr2 { display:flex; gap:10px; padding:2px 4px; transition:background .15s; }
.tr2:hover { background:rgba(0,212,255,.05); }
.tts { color:rgba(0,212,255,.25); flex-shrink:0; }
.tok { color:var(--lime); text-shadow:0 0 6px rgba(0,230,118,.4); }
.tinf { color:var(--magenta); text-shadow:0 0 6px rgba(224,64,251,.4); }
.twn { color:var(--gold); text-shadow:0 0 6px rgba(255,179,0,.5); }
.terr { color:var(--red); text-shadow:0 0 6px rgba(255,23,68,.3); }
.tsys { color:rgba(0,212,255,.4); }

/* Bottom bar */
.bbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:5px 16px; flex-shrink:0;
  background: linear-gradient(180deg, rgba(11,61,145,.25) 0%, rgba(5,20,50,.98) 100%);
  border:1px solid var(--border);
  border-bottom:none;
  position:relative;
}
.rawstr { font-family:'JetBrains Mono', 'Share Tech Mono', monospace; font-size:10px; color:rgba(0,212,255,.4); }
.rawstr span { color:var(--cyan); }
.pstat { display:flex; align-items:center; gap:6px; color:var(--cyan); font-size:9px; letter-spacing:1.5px; font-family:'Barlow Condensed',sans-serif; font-weight:700; }
.data-mode {
  font-family:'Orbitron',sans-serif; font-size:7px; font-weight:900;
  letter-spacing:1.5px; padding:3px 8px; margin-left:8px;
}
.data-mode.sim {
  display:none;  /* Hide when offline / no Adafruit connection */
}
.data-mode.cloud {
  background:rgba(0,212,255,.12); color:var(--cyan);
  border:1px solid rgba(0,212,255,.4);
  box-shadow:var(--cyan-glow);
}
.data-mode.live {
  background:rgba(0,212,255,.1); color:var(--cyan);
  border:1px solid rgba(0,212,255,.45);
  box-shadow:var(--cyan-glow);
  animation:pulse 2s ease infinite;
}
.data-mode.offline {
  background:rgba(252,61,33,.15); color:var(--nasa-red);
  border:1px solid rgba(252,61,33,.5);
  box-shadow:0 0 8px rgba(252,61,33,.4);
}
.reconnect-btn {
  background:transparent; border:1px solid var(--border);
  color:rgba(0,212,255,.5); font-family:'Barlow Condensed',sans-serif;
  font-weight:700; font-size:9px; letter-spacing:1.5px;
  padding:3px 10px; margin-left:8px; cursor:pointer;
  transition:all .25s; text-transform:uppercase;
}
.reconnect-btn:hover {
  border-color:var(--cyan); color:var(--cyan);
  background:rgba(0,212,255,.08); box-shadow:var(--cyan-glow);
}
.reconnect-btn.trying {
  color:var(--gold); border-color:var(--gold);
  box-shadow:var(--gold-glow); pointer-events:none;
}

/* ════════════════════════════════
   ADMIN MODAL
════════════════════════════════ */
#admin {
  display:none; position:fixed; inset:0; z-index:800;
  align-items:center; justify-content:center;
  background:rgba(5,20,50,.94); backdrop-filter:blur(12px);
}
#admin.show { display:flex; }
.mbox {
  width:600px; max-width:95vw; max-height:88vh;
  background:rgba(11,61,145,.12); border:1px solid var(--border-hi);
  box-shadow:var(--cyan-glow-s), 0 0 40px rgba(11,61,145,.15);
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}
.mbox::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent 5%,var(--cyan) 50%,transparent 95%); }
.mhdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:rgba(0,212,255,.04); border-bottom:1px solid var(--border);
}
.mhdr h2 { font-family:'Orbitron',sans-serif; font-size:11px; font-weight:900; letter-spacing:4px; color:var(--cyan); text-shadow:var(--cyan-glow); }
.mclose {
  background:transparent; border:1px solid var(--border); color:rgba(0,212,255,.5);
  font-size:13px; width:24px; height:24px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .25s;
}
.mclose:hover { border-color:var(--red); color:var(--red); box-shadow:var(--red-glow); }
.mbody { padding:14px 16px; overflow-y:auto; flex:1; }

.tabs { display:flex; gap:4px; margin-bottom:12px; border-bottom:1px solid var(--border); padding-bottom:8px; }
.tb {
  background:transparent; border:1px solid transparent;
  color:rgba(0,212,255,.45); font-family:'Barlow Condensed',sans-serif;
  font-weight:700; font-size:10px; letter-spacing:2px; padding:5px 14px;
  cursor:pointer; transition:all .25s; text-transform:uppercase;
}
.tb.act { border-color:var(--border-hi); color:var(--cyan); background:rgba(0,212,255,.08); box-shadow:var(--cyan-glow); }
.tb:hover:not(.act) { color:rgba(0,212,255,.75); border-color:var(--border); }
.tpane { display:none; }
.tpane.act { display:block; }

.utbl { width:100%; border-collapse:collapse; }
.utbl th {
  font-family:'Barlow Condensed',sans-serif; font-size:8px; letter-spacing:2px; font-weight:700;
  color:var(--white-dd); padding:5px 8px; border-bottom:1px solid var(--border); text-align:left;
}
.utbl td {
  padding:6px 8px; border-bottom:1px solid rgba(0,212,255,.06);
  font-size:11px; color:rgba(0,212,255,.75); font-family:'Share Tech Mono',monospace;
}
.utbl tr:hover td { background:rgba(0,212,255,.04); }
.rtag { font-family:'Orbitron',sans-serif; font-size:7px; font-weight:900; letter-spacing:1px; padding:2px 6px; }
.ra { background:var(--cyan); color:var(--g0); box-shadow:var(--cyan-glow); }
.rg { background:rgba(255,179,0,.12); color:var(--gold); border:1px solid rgba(255,179,0,.3); }
.delbtn {
  background:transparent; border:1px solid rgba(255,23,68,.25); color:rgba(255,23,68,.5);
  font-size:9px; padding:3px 8px; cursor:pointer; font-family:'Share Tech Mono',monospace;
  letter-spacing:1px; transition:all .25s;
}
.delbtn:hover { border-color:var(--red); color:var(--red); background:rgba(255,23,68,.07); box-shadow:var(--red-glow); }

.aform .fgrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ff { margin-bottom:10px; }
.ff label { display:block; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:9px; letter-spacing:2px; color:rgba(0,212,255,.5); margin-bottom:4px; text-transform:uppercase; }
.ff input, .ff select {
  width:100%; background:rgba(0,212,255,.04); border:1px solid var(--border);
  border-bottom-color:rgba(0,212,255,.4); color:var(--cyan);
  font-family:'Share Tech Mono',monospace; font-size:13px; padding:6px 8px;
  outline:none; transition:border-color .25s, box-shadow .25s; caret-color:var(--cyan);
}
.ff input:focus, .ff select:focus { border-color:var(--cyan); box-shadow:0 0 8px rgba(0,212,255,.2); }
.ff select option { background:#050810; }
.ferr { font-size:9px; color:var(--red); letter-spacing:1px; min-height:14px; margin-bottom:5px; text-shadow:var(--red-glow); }
.addbtn {
  width:100%; background:transparent; border:1px solid var(--cyan);
  color:var(--cyan); font-family:'Orbitron',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:3px; padding:9px; cursor:pointer; box-shadow:var(--cyan-glow);
  transition:all .25s; text-transform:uppercase;
}
.addbtn:hover { background:rgba(0,212,255,.08); box-shadow:var(--cyan-glow-s); }

/* ── DATA LOG VIEW ── */
.view-datalog { display:flex; flex:1; min-height:0; }
.datalog-container { flex:1; overflow-y:auto; }
.datalog-empty {
  font-family:'Barlow Condensed',sans-serif; font-size:14px; letter-spacing:2px;
  color:rgba(0,212,255,.4); text-align:center; padding:48px 24px;
}
.datalog-header {
  margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--border);
}
.datalog-title {
  font-family:'Orbitron',sans-serif; font-size:12px; font-weight:900; letter-spacing:4px;
  color:var(--cyan); text-shadow:var(--cyan-glow); margin-bottom:8px; text-transform:uppercase;
}
.datalog-datetime { display:flex; flex-direction:column; gap:4px; }
.datalog-date {
  font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:600;
  color:var(--white-d); letter-spacing:2px;
}
.datalog-time {
  font-family:'JetBrains Mono',monospace; font-size:18px; font-weight:700;
  color:var(--gold); text-shadow:var(--gold-glow);
}
.datalog-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px;
}
.datalog-section {
  background:var(--panel); border:1px solid var(--border); padding:14px 16px;
}
.datalog-section-title {
  font-family:'Orbitron',sans-serif; font-size:9px; font-weight:700; letter-spacing:3px;
  color:var(--cyan); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid rgba(0,212,255,.2);
  text-transform:uppercase;
}
.datalog-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 0; border-bottom:1px solid rgba(0,212,255,.06);
  font-size:12px;
}
.datalog-row span:first-child { color:rgba(0,212,255,.6); font-family:'Barlow Condensed',sans-serif; }
.datalog-row span:last-child { color:var(--cyan); font-family:'JetBrains Mono',monospace; font-weight:600; }

.met-strip {
  display:flex; gap:14px; align-items:center;
  padding: 3px 0; font-size:9px; letter-spacing:2px;
}
.met-item { display:flex; flex-direction:column; align-items:center; }
.met-v { font-family:'Orbitron',sans-serif; font-size:14px; font-weight:700; color:var(--cyan); text-shadow:var(--cyan-glow); animation: met-pulse 2s ease-in-out infinite; }
.met-l { font-size:7px; letter-spacing:1px; color:var(--white-dd); font-family:'Barlow Condensed',sans-serif; font-weight:700; }
.met-sep { font-family:'Orbitron',sans-serif; font-size:16px; color:var(--gold); margin-top:-6px; animation:pulse 2s ease infinite; text-shadow:var(--gold-glow); }