/* Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #120808;  --bg2: #1a0a0a;  --bg3: #2e1414;
  --border: #3a1515;  --text: #e0c8c8;  --text2: #996666;
  --red: #ff3333;  --red-glow: rgba(255,51,51,0.4);
  --cyan: #ff6644;  --cyan-glow: rgba(255,102,68,0.25);
  --green: #4caf50;  --yellow: #ffc107;
}
body { background:var(--bg); color:var(--text); font-family:'Orbitron',monospace,sans-serif; display:flex; height:100vh; overflow:hidden; }

/* Sidebar */
.sidebar { width:220px; background:var(--bg2); border-right:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; }
.sidebar-logo { padding:20px 16px; border-bottom:1px solid var(--border); text-align:center; }
.sidebar-logo h1 { font-size:1.1em; font-weight:900; color:var(--red); letter-spacing:3px; text-shadow:0 0 15px var(--red-glow); }
.sidebar-logo span { display:block; font-size:0.55em; color:var(--text2); letter-spacing:2px; margin-top:4px; }
.nav { flex:1; padding:12px 0; }
.nav-item { display:flex; align-items:center; gap:10px; padding:12px 20px; color:var(--text2); font-size:0.65em; font-weight:600; letter-spacing:1.5px; cursor:pointer; border-left:3px solid transparent; transition:all 0.15s; }
.nav-item:hover { color:var(--text); background:rgba(255,255,255,0.03); }
.nav-item.active { color:var(--red); border-left-color:var(--red); background:rgba(255,51,51,0.08); }
.nav-item .dot { width:8px; height:8px; border-radius:50%; background:#333; flex-shrink:0; }
.nav-item .dot.on { background:var(--green); box-shadow:0 0 6px var(--green); }
.nav-item .dot.off { background:#555; }

/* Main */
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.header { padding:16px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.header h2 { font-size:0.85em; font-weight:800; color:var(--text); letter-spacing:3px; }
.content { flex:1; overflow-y:auto; padding:24px; }

/* Panels */
.panel { display:none; }
.panel.active { display:block; }

/* Cards */
.card { background:var(--bg2); border:1px solid var(--border); border-radius:6px; padding:20px; margin-bottom:16px; }
.card h3 { font-size:0.7em; font-weight:700; color:var(--red); letter-spacing:2px; margin-bottom:12px; }

/* Status Badge */
.status-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:12px; font-size:0.6em; font-weight:700; letter-spacing:1px; }
.status-badge.running { background:rgba(76,175,80,0.15); color:var(--green); border:1px solid rgba(76,175,80,0.3); }
.status-badge.stopped { background:rgba(255,255,255,0.05); color:#666; border:1px solid #333; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border:none; border-radius:4px; font-family:'Orbitron',monospace; font-size:0.6em; font-weight:700; letter-spacing:1.5px; cursor:pointer; transition:all 0.15s; }
.btn:disabled { opacity:0.4; cursor:not-allowed; }
.btn-primary { background:var(--red); color:#fff; }
.btn-primary:hover:not(:disabled) { background:#ff5555; box-shadow:0 0 15px var(--red-glow); }
.btn-secondary { background:var(--bg3); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover:not(:disabled) { border-color:var(--red); color:var(--red); }
.btn-success { background:var(--green); color:#fff; }
.btn-success:hover:not(:disabled) { background:#66bb6a; }
.btn-stop { background:#333; color:var(--red); border:1px solid #444; }
.btn-stop:hover:not(:disabled) { background:#422; border-color:var(--red); }
.btn-launch { background:linear-gradient(135deg,var(--red) 0%,#cc2200 100%); color:#fff; font-size:0.75em; padding:12px 28px; letter-spacing:3px; }
.btn-launch:hover:not(:disabled) { box-shadow:0 0 25px var(--red-glow); transform:translateY(-1px); }
.btn-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* Forms */
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:0.55em; font-weight:600; color:var(--text2); letter-spacing:1.5px; margin-bottom:6px; }
.form-group input,.form-group select,.form-group textarea { width:100%; padding:8px 12px; background:var(--bg); border:1px solid var(--border); border-radius:4px; color:var(--text); font-family:'Courier New',monospace; font-size:13px; outline:none; transition:border-color 0.15s; }
.form-group input:focus,.form-group textarea:focus { border-color:var(--red); }
.form-group input[type="number"] { width:120px; }
.form-row { display:flex; gap:14px; }
.form-row .form-group { flex:1; }

/* Log Box */
.log-box { background:#050508; border:1px solid var(--border); border-radius:4px; padding:12px; height:180px; overflow-y:auto; font-family:'Courier New',monospace; font-size:11px; line-height:1.5; color:#7a7; }
.log-box .log-error { color:var(--red); }
.log-box .log-info { color:#ff8866; }

/* Progress Bar */
.progress-wrap { background:var(--bg); border:1px solid var(--border); border-radius:4px; height:24px; overflow:hidden; margin:12px 0; }
.progress-bar { height:100%; background:linear-gradient(90deg,var(--red),#ff6644); width:0%; transition:width 0.3s; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; letter-spacing:1px; }

/* Dashboard Grid */
.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.dash-stat { text-align:center; padding:20px; }
.dash-stat .value { font-size:1.4em; font-weight:900; color:var(--red); }
.dash-stat .label { font-size:0.55em; color:var(--text2); letter-spacing:2px; margin-top:6px; }

/* Scrollbar */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:#333; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#555; }

/* Utility */
.mt-12 { margin-top:12px; }
.mb-8 { margin-bottom:8px; }
.text-muted { color:var(--text2); font-size:0.55em; letter-spacing:1px; }
.text-green { color:var(--green); }
.text-red { color:var(--red); }