:root{
  --bg:#0b0c0f; --panel:#111318; --soft:#191c22; --text:#e6e6e6; --muted:#a2a8b3;
  --accent:#ffb400; --accent-2:#56d364; --accent-3:#00b3ff; --danger:#ff4d4d;
  --radius:18px; --shadow:0 20px 40px rgba(0,0,0,.45); --grid: minmax(0, 1100px);
}
*{box-sizing:border-box}
html,body{
  margin:0;
  background-color: var(--bg);
  background-image: radial-gradient(1200px 800px at 80% -10%, rgba(255,180,0,.08), rgba(0,0,0,0));
  background-repeat:no-repeat;
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
}
a{color:var(--text); text-decoration:none}
.wrap{max-width:1100px; margin:0 auto; padding:0 20px}

.section-title{display:flex; align-items:center; gap:10px; font-size:12px; text-transform:uppercase; letter-spacing:.2em; color:var(--muted); margin:28px 0 16px}
.section-title .bar{height:1px; flex:1; background:linear-gradient(90deg, var(--accent), transparent)}

.panel{background:linear-gradient(180deg, #0f1217, #0c0e12); border:1px solid #1b212c; border-radius:18px; box-shadow:var(--shadow)}
.panel.pad{padding:22px}

.grid{display:grid; gap:18px}
.grid.cols-4{grid-template-columns: repeat(4, minmax(0,1fr))}
.grid.cols-3{grid-template-columns: repeat(3, minmax(0,1fr))}
.grid.cols-2{grid-template-columns: repeat(2, minmax(0,1fr))}
@media (max-width: 1050px){ .grid.cols-4{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 900px){ .grid.cols-3, .grid.cols-2{grid-template-columns: 1fr} }

.card{border:1px solid #1b212c; background:linear-gradient(180deg, #0f1217, #0b0d11); border-radius:16px; padding:18px; position:relative; overflow:hidden; transition: transform .08s ease, border-color .12s ease}
.card:hover{ transform: translateY(-2px); border-color:#242a35 }
.card .click{ position:absolute; inset:0; z-index:1 }

.h2{font-size:18px; font-weight:800; margin:4px 0 6px}
.p{color:#c6ccd7}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.muted{color:var(--muted)}

.statusline{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted)}
.dot{width:10px;height:10px;border-radius:50%}
.dot.ok{background:var(--accent-2); box-shadow:0 0 8px 1px rgba(86,211,100,.6)}
.dot.bad{background:var(--danger); box-shadow:0 0 8px 1px rgba(255,77,77,.6)}

.btn{padding:10px 14px; border-radius:12px; font-weight:700; border:1px solid #232a35; background:#12161c; color:#fff; cursor:pointer; position:relative; z-index:2}
.btn.primary{background:linear-gradient(180deg, #ffb400, #b37b00); color:#0b0c0f; border-color:#ffb400}
.btn.ghost{background:#0f1319; border-color:#242a35}
.btn[disabled]{opacity:.6; cursor:not-allowed}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}

.header{position:sticky; top:0; z-index:5; backdrop-filter:saturate(120%) blur(6px); background:linear-gradient(180deg, rgba(11,12,15,.9), rgba(11,12,15,.6)); border-bottom:1px solid #16181f}
.header .inner{display:flex; align-items:center; justify-content:space-between; height:60px}
.title{letter-spacing:.16em; font-weight:800}

.spark{width:100%; height:54px; display:block; background:#0c0f14; border:1px solid #161b24; border-radius:10px}
.spark svg{display:block; width:100%; height:100%}
.spark path{fill:none; stroke:rgba(255,180,0,.8); stroke-width:2}
.spark .grid line{stroke:#1a1f26; stroke-width:1}

.kv{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:8px}
.kv div{font-size:12px; color:var(--muted)}

.meta{font-size:13px; color:#c6ccd7; margin-top:8px}
.meta b{color:#eaeef5; font-weight:700}
.meta .sep{opacity:.4; padding:0 6px}
.time{color:var(--muted)}

.footerline{margin-top:8px; display:flex; gap:12px; align-items:center; justify-content:space-between}

.donut{width:140px; height:140px}
.kv2{display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin-top:8px; font-size:13px; color:#c6ccd7}
.kv2 .label{color:var(--muted)}
.bar{height:12px; background:#0c0f14; border:1px solid #161b24; border-radius:999px; overflow:hidden}
.bar > i{display:block; height:100%; background:linear-gradient(90deg, var(--accent-2), var(--accent-2)); width:0%}
.hidden{display:none !important}

.drawer{position:fixed; inset:0; display:none; z-index:40; background:rgba(0,0,0,.55); backdrop-filter: blur(2px)}
.drawer.show{display:block}
.sheet{position:absolute; right:0; top:0; height:100%; width:min(520px, 100%); background:#0b0c0f; border-left:1px solid #16181f; box-shadow: -10px 0 30px rgba(0,0,0,.6); display:flex; flex-direction:column}
.sheet .head{padding:16px 18px; border-bottom:1px solid #16181f; display:flex; align-items:center; justify-content:space-between}
.sheet .body{padding:18px; overflow:auto}
.sheet .foot{padding:14px 18px; border-top:1px solid #16181f; display:flex; gap:10px; justify-content:flex-end}
.in{width:100%; margin-top:6px; background:#0c0f14; border:1px solid #161b24; color:#e6e6e6; padding:12px 14px; border-radius:12px; outline:none}
.in:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,180,0,.08)}
label{display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:10px}
.small{font-size:12px; color:var(--muted)}

.kebab{position:relative; z-index:3}
.kebab button{width:36px; height:36px; border-radius:10px}
.menu{position:absolute; right:0; top:40px; min-width:180px; background:#0f1217; border:1px solid #1b212c; border-radius:12px; box-shadow:var(--shadow); display:none}
.menu.show{display:block}
.menu a{display:block; padding:10px 12px; color:#c6ccd7}
.menu a:hover{background:#12161c}

.stat-card .big{font-size:36px; font-weight:800; letter-spacing:.02em}
.stat-card .label{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.14em}
.pills{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.pill{display:inline-flex; gap:6px; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid #242a35; background:#0f1319; color:#cfd5e0; font-size:12px; cursor:pointer}
.pill b{color:#fff}
.pill.active{border-color:rgba(255,180,0,.55); box-shadow:0 0 0 2px rgba(255,180,0,.12) inset}
.seg{display:inline-flex; gap:6px; padding:6px; border-radius:999px; background:#0f1319; border:1px solid #242a35; margin-left:auto}
.seg button{border:0; background:transparent; color:#cfd5e0; font-size:12px; padding:6px 10px; border-radius:999px; cursor:pointer}
.seg button.active{background:#12161c; color:#fff; border:1px solid #242a35}

.os-card{margin-top:18px}
.os-card .top{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.os-card .label{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.14em}
.os-card .pills{margin-top:8px}

#machines-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
#filter-banner{display:none; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid #242a35; background:#0f1319; color:#cfd5e0; font-size:12px}
#filter-banner.show{display:inline-flex}
#btn-reset-filter{padding:6px 10px; border-radius:999px; border:1px solid #242a35; background:#0f1319; color:#cfd5e0; font-size:12px; cursor:pointer}
#empty{display:none; color:var(--muted); text-align:center; padding:20px 0}
#empty.show{display:block}

.codewrap{position:relative}
.copybtn{position:absolute; top:8px; right:8px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; border:1px solid #242a35; background:#0f1319; border-radius:999px; padding:6px 10px; cursor:pointer}
.copybtn.copied{border-color:rgba(86,211,100,.6); box-shadow:0 0 0 2px rgba(86,211,100,.15) inset}
pre.code{background:#0c0f14; border:1px solid #161b24; padding:14px; border-radius:12px; overflow:auto; color:#d6d9e0; margin:0}
pre.code code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

.help{font-size:12px; color:var(--muted); margin-top:6px}
.inline{display:inline-flex; align-items:center; gap:8px}

.update-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid #242a35;background:#0f1319;color:#cfd5e0;font-size:11px;margin-left:6px}
.update-pill .dot{width:8px;height:8px}




/* Logout button styling */
.topbar .logout-btn{ margin-left: 8px; }
@media (max-width: 900px){
  .topbar .logout-btn{ display:none; } /* hide on small screens where nav collapses */
}

/* Settings modal fallback */
.bm-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;z-index:1000}
.bm-modal-backdrop.show{display:block}
.bm-modal{position:fixed;inset:0;display:none;place-items:center;z-index:1001}
.bm-modal.show{display:grid}
.bm-modal .panel{max-width:860px;width:92%;}
.bm-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bm-tabs{display:flex;gap:8px;margin-bottom:12px}
.bm-tab{padding:8px 12px;border:1px solid #242a35;border-radius:999px;background:#0f1319;cursor:pointer}
.bm-tab.active{color:var(--accent);border-color:rgba(255,180,0,.5);box-shadow:0 0 0 2px rgba(255,180,0,.08) inset}
.bm-table{width:100%;border-collapse:separate;border-spacing:0 8px}
.bm-table td,.bm-table th{padding:8px 10px}
.bm-table .row{background:linear-gradient(180deg,#0f1217,#0b0d11);border:1px solid #1b212c;border-radius:12px}
.bm-right{margin-left:auto}

/* Login header sizing: larger logo icon, normal text */

/* --- Themed Login (matches dashboard/blackmesa site) --- */
:root{
  --bg:#0b0c0f; --panel:#111318; --soft:#191c22; --text:#e6e6e6; --muted:#a2a8b3;
  --accent:#ffb400; --accent-2:#56d364; --accent-3:#00b3ff; --danger:#ff4d4d;
  --radius:18px; --shadow:0 20px 40px rgba(0,0,0,.45);
}
body.login{
  margin:0; min-height:100dvh; color:var(--text);
  background-color: var(--bg);
  background-image: radial-gradient(1200px 800px at 80% -10%, rgba(255,180,0,.08), rgba(0,0,0,0));
  background-repeat:no-repeat;
  display:grid; place-items:center;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
}
.login-shell{ width:min(560px, 94vw); padding:10px }
.login-card{ background:linear-gradient(180deg, #0f1217, #0c0e12); border:1px solid #1b212c; border-radius:var(--radius); box-shadow:var(--shadow); padding:18px }
.brand{display:flex; gap:12px; align-items:center}
.badge{width:34px;height:34px;border-radius:50%; display:grid; place-items:center; background:conic-gradient(from 210deg, rgba(255,180,0,.2), rgba(0,0,0,0) 40%) , var(--panel); border:1px solid rgba(255,180,0,.22)}
.badge svg{width:22px;height:22px}
.logotype{letter-spacing:.12em; font-weight:700}
.logotype small{color:var(--muted); font-weight:600; letter-spacing:.18em}
.h2{font-size:18px; font-weight:800; margin:10px 0 8px}
.in{width:100%; margin-top:6px; background:#0c0f14; border:1px solid #161b24; color:var(--text); padding:12px 14px; border-radius:12px; outline:none}
.in:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,180,0,.08)}
.btn{padding:12px 16px; border-radius:12px; font-weight:700; border:1px solid #232a35; background:#12161c; color:var(--text); cursor:pointer}
.btn:hover{border-color:rgba(255,180,0,.5); box-shadow:0 0 0 2px rgba(255,180,0,.08) inset}
.hero-cta{display:flex; gap:10px; justify-content:flex-end}
.muted{ color: var(--muted); }

/* Hide floating fallback buttons on login screen */
body.login #bm-fallback-settings,
body.login #bm-fallback-logout{ display:none !important; }


/* --- Quick Commands + Deploy (minimal) --- */
.os-switch { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 10px; }
.chip { background: var(--panel, #1a1a1a); color: var(--fg, #ddd); border:1px solid rgba(255,255,255,.08); padding:6px 10px; border-radius:999px; cursor:pointer; }
.chip.active { outline:2px solid var(--accent,#ffb400); }
.command-buttons { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.command-buttons .btn { padding:6px 10px; }
.deploy-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.input { background:#0c0c0c; border:1px solid rgba(255,255,255,.08); color:var(--fg,#ddd); padding:6px 10px; border-radius:6px; }

/* === 0.3.5a Remote Access tidy (stacked, full width) === */
.ra-card { margin-top: 12px; }
.ra-card .card-header { display:flex; align-items:center; justify-content:space-between; }
.ra-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px; }
.ra-pane { border:1px solid #222; border-radius:8px; background:#0b0b0b; }
#raTerminal { height: 340px; }
#raVncFrame { width:100%; height: 520px; border:1px solid #222; border-radius:8px; display:none; }
#bm-ssh-form-slot .form-row,
#bm-ssh-form-slot .row { margin-bottom:8px; }
.bm-legacy-remote-label { display:none !important; }

/* BLACK MESA V3 / Operations Network skin. Functional selectors above remain intact. */
:root{--bg:#080a0b;--panel:#0e1112;--soft:#171c1d;--text:#e7e9e4;--muted:#89918c;--accent:#f2a900;--accent-2:#7cab62;--accent-3:#7298a5;--danger:#d95d45;--radius:3px;--shadow:0 18px 55px rgba(0,0,0,.42)}
html,body{background:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),radial-gradient(900px 520px at 75% 0,rgba(242,169,0,.07),transparent 62%),#080a0b;background-size:100% 4px,auto;font-family:"Arial Narrow","Roboto Condensed",Inter,system-ui,sans-serif}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{max-width:1180px}.header{background:rgba(8,10,11,.95);border-color:#252a27;backdrop-filter:blur(14px)}.header .inner{height:68px}.title{font:800 13px/1 ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase}.title::before{content:"BM-ON/03  ";color:var(--accent)}
.panel,.card{border-radius:3px;border-color:#272d2a;background:linear-gradient(145deg,#111514,#0b0e0d);box-shadow:none}.card::before{content:"";position:absolute;left:0;top:0;width:28px;height:2px;background:#4b534e}.card:hover{border-color:#3a423d;box-shadow:0 18px 35px rgba(0,0,0,.2)}
.btn,.in,.pill,.seg,.seg button,.sheet,.menu,pre.code,.spark,.bar,.bm-tab{border-radius:2px}.btn{background:#121615;border-color:#333a36;text-transform:uppercase;font-size:10px;letter-spacing:.12em}.btn.primary{background:var(--accent);border-color:var(--accent)}.section-title{font:10px/1 ui-monospace,monospace;letter-spacing:.22em}.section-title::before{content:"//";color:var(--accent)}
body.login{position:relative;overflow:hidden;background:radial-gradient(circle at 72% 45%,rgba(242,169,0,.075),transparent 25%),linear-gradient(90deg,transparent 49.9%,rgba(255,255,255,.025) 50%,transparent 50.1%),#080a0b}
body.login::after{content:"BLACK MESA OPERATIONS NETWORK\A FACILITY CONTROL TERMINAL 03\A\A AUTHORIZED PERSONNEL ONLY\A ALL ACCESS IS MONITORED";white-space:pre;position:fixed;left:34px;bottom:30px;color:#555e58;font:9px/1.75 ui-monospace,monospace;letter-spacing:.17em}
.login-shell{width:min(480px,calc(100vw - 28px));position:relative}.login-shell::before{content:"BM-ON // SECURE ACCESS";display:block;color:#717a74;font:9px/1 ui-monospace,monospace;letter-spacing:.2em;margin:0 0 10px 1px}.login-card{padding:30px;border-radius:3px;border-color:#303632;background:linear-gradient(145deg,#111514,#0a0d0c);position:relative}.login-card::after{content:"03";position:absolute;right:-1px;top:-1px;background:var(--accent);color:#090a09;padding:5px 8px;font:800 10px/1 ui-monospace,monospace}.login-card .badge{border-radius:2px;width:43px;height:43px}.login-card .h2{font-size:26px;text-transform:uppercase;letter-spacing:.04em;margin-top:28px}.login-card .h2::after{content:"Enter assigned facility credentials";display:block;color:#707872;font:9px/1.4 ui-monospace,monospace;letter-spacing:.15em;margin-top:7px}.login-card label{font:9px/1 ui-monospace,monospace;letter-spacing:.17em}.login-card .in{padding:13px 14px}.login-card .btn{width:100%;background:var(--accent);border-color:var(--accent);color:#090a09}.login-card .hero-cta{margin-top:18px!important}
@media(max-width:600px){body.login::after{display:none}.login-card{padding:24px}.header .inner{height:60px}}