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

:root {
  --bg-base:       #080b14;
  --bg-surface:    rgba(13, 19, 33, 0.85);
  --bg-card:       rgba(20, 27, 48, 0.75);
  --bg-hover:      rgba(30, 40, 68, 0.9);
  --border:        rgba(99, 102, 241, 0.15);
  --border-bright: rgba(99, 102, 241, 0.4);
  --indigo:  #6366f1;  --cyan:   #22d3ee;  --purple: #a855f7;
  --amber:   #f59e0b;  --green:  #22c55e;  --red:    #ef4444;
  --orange:  #f97316;
  --text-primary:   #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted:     #475569;
  --font-mono: 'JetBrains Mono', monospace;
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px;
}

html, body { height: 100%; overflow: hidden; }
body { font-family: 'Inter', sans-serif; background: var(--bg-base); color: var(--text-primary); font-size: 13px; line-height: 1.5; }

/* ── Background ───────────────────────────────────────────────── */
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(99,102,241,.04) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(99,102,241,.04) 1px,transparent 1px);
  background-size: 40px 40px;
}
.bg-orb { position: fixed; border-radius: 50%; filter: blur(120px); pointer-events:none; z-index:0; animation: drift 18s ease-in-out infinite; }
.orb1 { width:600px;height:600px;background:rgba(99,102,241,.07);top:-200px;left:-100px; }
.orb2 { width:500px;height:500px;background:rgba(34,211,238,.05);top:50%;right:-150px;animation-delay:-6s; }
.orb3 { width:400px;height:400px;background:rgba(168,85,247,.06);bottom:-100px;left:35%;animation-delay:-12s; }
@keyframes drift { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-20px) scale(1.05)} 66%{transform:translate(-20px,25px) scale(.97)} }

/* ── App layout ───────────────────────────────────────────────── */
.app { position:relative; z-index:1; display:flex; flex-direction:column; height:100vh; padding:12px; gap:10px; }

/* ── Header ───────────────────────────────────────────────────── */
.header { display:flex;align-items:center;justify-content:space-between; background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 18px;backdrop-filter:blur(20px);flex-shrink:0; }
.logo { display:flex;align-items:center;gap:10px; }
.logo-icon { display:flex;align-items:center;justify-content:center;width:38px;height:38px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.3);border-radius:10px;animation:logoGlow 3s ease-in-out infinite; }
@keyframes logoGlow { 0%,100%{box-shadow:0 0 10px rgba(99,102,241,.2)} 50%{box-shadow:0 0 22px rgba(99,102,241,.5)} }
.logo-text { font-size:17px;font-weight:700; }
.gradient-text { background:linear-gradient(135deg,var(--indigo),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.version-badge { font-size:9px;font-weight:700;letter-spacing:.8px;padding:2px 7px;background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.3);border-radius:100px;color:var(--indigo); }

.header-center { display:flex;align-items:center;gap:10px; }
.status-badge { display:flex;align-items:center;gap:8px;padding:5px 14px;border-radius:100px;border:1px solid;font-size:10px;font-weight:700;letter-spacing:1.5px;transition:all .5s ease; }
.status-badge.incident  { background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.4);color:#fca5a5; }
.status-badge.recovering{ background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.4);color:#fcd34d; }
.status-badge.resolved  { background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.4);color:#86efac; }
.status-dot { width:7px;height:7px;border-radius:50%;animation:pulse 2s ease-in-out infinite; }
.status-badge.incident .status-dot   { background:var(--red); }
.status-badge.recovering .status-dot { background:var(--amber); }
.status-badge.resolved .status-dot   { background:var(--green); }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

.attack-pill { display:flex;align-items:center;gap:8px;padding:5px 14px;border-radius:100px;background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.5);color:#fca5a5;font-size:10px;font-weight:700;letter-spacing:1.5px;animation:attackFade 1s ease-in-out infinite alternate; }
@keyframes attackFade { from{opacity:.7} to{opacity:1} }
.attack-pulse { width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 1s ease-in-out infinite; }

.header-right { display:flex;align-items:center;gap:14px; }
.episode-info { text-align:right; }
.episode-label { display:block;font-size:9px;letter-spacing:1px;color:var(--text-muted); }
.episode-value { display:block;font-size:20px;font-weight:700;font-family:var(--font-mono);color:var(--cyan); }
.btn-ghost { display:flex;align-items:center;gap:7px;padding:7px 14px;background:transparent;border:1px solid var(--border-bright);border-radius:var(--r-sm);color:var(--text-secondary);font-family:'Inter',sans-serif;font-size:12px;cursor:pointer;transition:all .2s ease; }
.btn-ghost:hover { background:rgba(99,102,241,.1);color:var(--text-primary);border-color:var(--indigo); }
.btn-ghost:active { transform:scale(.97); }

/* ── Main grid ────────────────────────────────────────────────── */
.main-grid { display:grid;grid-template-columns:290px 1fr 310px;gap:10px;flex:1;min-height:0; }

/* ── Section title ────────────────────────────────────────────── */
.section-title { display:flex;align-items:center;gap:8px;font-size:10px;font-weight:600;letter-spacing:1.5px;color:var(--text-muted);text-transform:uppercase;margin-bottom:10px; }
.section-dot { width:6px;height:6px;border-radius:50%;background:var(--indigo);box-shadow:0 0 8px var(--indigo); }

/* ── Left column ─────────────────────────────────────────────── */
.left-column { display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding-right:2px; }
.left-column::-webkit-scrollbar { width:3px; }
.left-column::-webkit-scrollbar-thumb { background:var(--border);border-radius:2px; }

/* Metric card */
.metric-card { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:14px;backdrop-filter:blur(16px);transition:border-color .3s ease;flex-shrink:0; }
.metric-card:hover { border-color:var(--border-bright); }
.metric-card.danger { border-color:rgba(239,68,68,.35); }
.metric-header { display:flex;align-items:center;gap:10px;margin-bottom:12px; }
.metric-icon { width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.cpu-icon { background:rgba(99,102,241,.15);color:var(--indigo);border:1px solid rgba(99,102,241,.25); }
.mem-icon { background:rgba(34,211,238,.12);color:var(--cyan);border:1px solid rgba(34,211,238,.25); }
.metric-label { font-size:12px;font-weight:600; }
.metric-sublabel { font-size:10px;color:var(--text-muted);margin-top:1px; }
.metric-value { margin-left:auto;font-size:22px;font-weight:700;font-family:var(--font-mono);transition:color .4s ease; }
#cpuValue.safe   { color:var(--green); }
#cpuValue.warn   { color:var(--amber); }
#cpuValue.danger { color:var(--red);   }
#memValue { color:var(--cyan); }
.progress-track { height:7px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden; }
.progress-bar { height:100%;border-radius:4px;transition:width .7s cubic-bezier(.4,0,.2,1),background .4s ease; }
.cpu-bar { background:linear-gradient(90deg,var(--indigo),var(--purple));box-shadow:0 0 8px rgba(99,102,241,.5); }
.cpu-bar.warn   { background:linear-gradient(90deg,var(--amber),var(--orange)); }
.cpu-bar.danger { background:linear-gradient(90deg,var(--orange),var(--red)); }
.mem-bar { background:linear-gradient(90deg,var(--cyan),#0ea5e9);box-shadow:0 0 8px rgba(34,211,238,.4); }
.metric-thresholds { display:flex;justify-content:space-between;margin-top:6px;font-size:9px;font-family:var(--font-mono); }
.threshold.good   { color:var(--green); }
.threshold.danger { color:var(--red); }

/* Cloud metrics card */
.cloud-card { background:var(--bg-card);border:1px solid rgba(34,211,238,.2);border-radius:var(--r-md);padding:14px;backdrop-filter:blur(16px);flex-shrink:0; }
.cloud-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.cloud-item { background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 10px;text-align:center;transition:border-color .2s ease; }
.cloud-item:hover { border-color:rgba(34,211,238,.3); }
.cloud-icon-wrap { font-size:16px;margin-bottom:3px; }
.cloud-label { font-size:9px;letter-spacing:.8px;color:var(--text-muted);text-transform:uppercase;margin-bottom:3px; }
.cloud-value { font-size:16px;font-weight:700;font-family:var(--font-mono);color:var(--cyan);transition:color .3s ease; }
.cloud-unit  { font-size:8px;color:var(--text-muted);margin-top:1px; }
.cloud-value.danger { color:var(--red); }
.cloud-value.warn   { color:var(--amber); }

/* Task card */
.task-card { background:var(--bg-card);border:1px solid rgba(245,158,11,.2);border-radius:var(--r-md);padding:14px;backdrop-filter:blur(16px);flex-shrink:0; }
.task-buttons { display:flex;gap:6px;margin-bottom:10px; }
.task-btn { flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 4px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-secondary);font-family:'Inter',sans-serif;font-size:11px;font-weight:500;cursor:pointer;transition:all .2s ease; }
.task-btn:hover { background:rgba(255,255,255,.08);color:var(--text-primary); }
.task-btn.active { border-color:var(--amber);color:var(--amber);background:rgba(245,158,11,.1); }
.task-dot { width:6px;height:6px;border-radius:50%; }
.task-dot.easy   { background:var(--green); }
.task-dot.medium { background:var(--amber); }
.task-dot.hard   { background:var(--red); }
.task-desc { font-size:11px;color:var(--text-secondary); }

/* ── Center column ────────────────────────────────────────────── */
.center-column { display:flex;flex-direction:column;gap:10px;min-height:0;overflow:hidden; }

/* Chart panel */
.chart-panel { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:14px;backdrop-filter:blur(16px);flex-shrink:0;height:210px; }
.chart-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:10px; }
.chart-legend { display:flex;align-items:center;gap:12px;font-size:10px;color:var(--text-secondary); }
.legend-dot { width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px; }
.chart-container { position:relative;height:140px; }

/* Log panel */
.log-panel { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);flex:1;display:flex;flex-direction:column;overflow:hidden;backdrop-filter:blur(16px); }

/* Tabs */
.tab-bar { display:flex;border-bottom:1px solid var(--border);flex-shrink:0; }
.tab-btn { flex:1;padding:9px 12px;background:transparent;border:none;color:var(--text-secondary);font-family:'Inter',sans-serif;font-size:11px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s ease;border-bottom:2px solid transparent;margin-bottom:-1px; }
.tab-btn:hover { color:var(--text-primary);background:rgba(255,255,255,.03); }
.tab-btn.active { color:var(--indigo);border-bottom-color:var(--indigo); }
.log-count { background:rgba(99,102,241,.2);color:var(--indigo);font-size:9px;font-weight:700;padding:1px 6px;border-radius:100px; }

.tab-content { flex:1;overflow:hidden;display:flex;flex-direction:column; }
.tab-content.hidden { display:none; }

/* Log terminal */
.log-terminal { flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:5px; }
.log-terminal::-webkit-scrollbar { width:4px; }
.log-terminal::-webkit-scrollbar-thumb { background:var(--border);border-radius:2px; }
.log-entry { display:flex;align-items:flex-start;gap:7px;padding:7px 10px;border-radius:var(--r-sm);background:rgba(255,255,255,.03);border-left:2px solid transparent;font-family:var(--font-mono);font-size:11px;line-height:1.5;animation:slideIn .3s ease; }
@keyframes slideIn { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)} }
.log-entry.system  { border-color:var(--text-muted); }
.log-entry.restart { border-color:var(--indigo);background:rgba(99,102,241,.06); }
.log-entry.scale   { border-color:var(--green);background:rgba(34,197,94,.05); }
.log-entry.ignore  { border-color:var(--red);background:rgba(239,68,68,.05); }
.log-entry.done    { border-color:var(--cyan);background:rgba(34,211,238,.06); }
.log-entry.agent   { border-color:var(--purple);background:rgba(168,85,247,.05); }
.log-time  { color:var(--text-muted);font-size:9px;white-space:nowrap;padding-top:1px; }
.log-badge { padding:1px 6px;border-radius:4px;font-size:8px;font-weight:700;letter-spacing:.8px;white-space:nowrap;flex-shrink:0; }
.system-badge  { background:rgba(148,163,184,.15);color:var(--text-secondary); }
.restart-badge { background:rgba(99,102,241,.2);color:#a5b4fc; }
.scale-badge   { background:rgba(34,197,94,.2);color:#86efac; }
.ignore-badge  { background:rgba(239,68,68,.2);color:#fca5a5; }
.done-badge    { background:rgba(34,211,238,.2);color:#67e8f9; }
.agent-badge   { background:rgba(168,85,247,.2);color:#d8b4fe; }
.reward-inline { margin-left:auto;font-size:10px;font-weight:700;white-space:nowrap; }
.reward-inline.pos { color:var(--green); }
.reward-inline.neg { color:var(--red); }

/* Incident list */
.incident-list { flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:6px; }
.incident-list::-webkit-scrollbar { width:4px; }
.incident-list::-webkit-scrollbar-thumb { background:var(--border);border-radius:2px; }
.no-incidents { color:var(--text-muted);font-size:12px;text-align:center;padding:30px 0; }
.incident-row { display:grid;grid-template-columns:24px 60px 80px 1fr 80px 80px;align-items:center;gap:8px;padding:8px 12px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:var(--r-sm);font-family:var(--font-mono);font-size:10px;animation:slideIn .3s ease; }
.incident-row.unresolved { border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.04); }
.incident-row.resolved   { border-color:rgba(34,197,94,.2);background:rgba(34,197,94,.03); }
.inc-id { color:var(--text-muted);font-weight:600; }
.inc-time { color:var(--text-secondary); }
.inc-type { font-weight:600; }
.inc-type.ddos  { color:#fca5a5; }
.inc-type.spike { color:#fcd34d; }
.inc-cpu  { color:var(--text-primary); }
.inc-action { color:var(--cyan); }
.inc-status { text-align:right; }
.inc-status .badge-resolved   { background:rgba(34,197,94,.15);color:#86efac;padding:2px 7px;border-radius:100px;font-size:9px; }
.inc-status .badge-unresolved { background:rgba(239,68,68,.15);color:#fca5a5;padding:2px 7px;border-radius:100px;font-size:9px; }

/* ── Right column ─────────────────────────────────────────────── */
.right-column { display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding-left:0; }
.right-column::-webkit-scrollbar { width:3px; }
.right-column::-webkit-scrollbar-thumb { background:var(--border);border-radius:2px; }

/* Action cards */
.action-cards { display:flex;flex-direction:column;gap:6px; }
.action-card { position:relative;overflow:hidden;padding:10px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;text-align:left;color:var(--text-primary);font-family:'Inter',sans-serif;display:flex;align-items:center;gap:10px;transition:all .25s ease;backdrop-filter:blur(16px); }
.action-card:hover { transform:translateX(3px) scale(1.01);border-color:var(--border-bright); }
.action-card:active { transform:scale(.99); }
.action-card:disabled { opacity:.4;cursor:not-allowed;transform:none; }
.action-glow { position:absolute;top:-20px;right:-20px;width:70px;height:70px;border-radius:50%;filter:blur(25px);opacity:.25;transition:opacity .3s;pointer-events:none; }
.action-card:hover .action-glow { opacity:.55; }
.restart-glow { background:var(--indigo); }
.scale-glow   { background:var(--green); }
.ignore-glow  { background:var(--red); }
.action-icon { width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.restart-icon { background:rgba(99,102,241,.15);color:var(--indigo);border:1px solid rgba(99,102,241,.3); }
.scale-icon   { background:rgba(34,197,94,.15);color:var(--green);border:1px solid rgba(34,197,94,.3); }
.ignore-icon  { background:rgba(239,68,68,.12);color:var(--red);border:1px solid rgba(239,68,68,.3); }
.action-label { font-size:13px;font-weight:600;margin-bottom:1px; }
.action-desc  { font-size:10px;color:var(--text-secondary); }
.reward-badge { margin-left:auto;flex-shrink:0;padding:3px 9px;border-radius:100px;font-size:10px;font-weight:700;font-family:var(--font-mono);background:rgba(99,102,241,.15);color:#a5b4fc;border:1px solid rgba(99,102,241,.25); }
.reward-badge.best    { background:rgba(34,197,94,.15);color:#86efac;border-color:rgba(34,197,94,.3); }
.reward-badge.penalty { background:rgba(239,68,68,.12);color:#fca5a5;border-color:rgba(239,68,68,.3); }

/* Stats row */
.stats-row { display:grid;grid-template-columns:repeat(3,1fr);gap:6px; }
.stat-item { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 10px;text-align:center;backdrop-filter:blur(16px); }
.stat-label { font-size:8px;letter-spacing:1px;color:var(--text-muted);text-transform:uppercase;margin-bottom:3px; }
.stat-value { font-size:16px;font-weight:700;font-family:var(--font-mono); }
.stat-value.small { font-size:10px;word-break:break-all; }

/* Auto-agent panel */
.auto-agent-panel { background:var(--bg-card);border:1px solid rgba(168,85,247,.25);border-radius:var(--r-md);padding:14px;backdrop-filter:blur(16px);flex-shrink:0;transition:border-color .3s; }
.auto-agent-panel.active { border-color:rgba(168,85,247,.6);box-shadow:0 0 20px rgba(168,85,247,.1); }
.auto-agent-header { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px; }
.panel-title { font-size:12px;font-weight:700;color:var(--text-primary);margin-bottom:2px; }
.panel-sub   { font-size:10px;color:var(--text-muted); }

/* Toggle button */
.toggle-btn { display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:100px;border:1px solid var(--border-bright);background:transparent;color:var(--text-secondary);font-family:'Inter',sans-serif;font-size:11px;font-weight:600;cursor:pointer;transition:all .25s ease;flex-shrink:0; }
.toggle-btn:hover { border-color:var(--purple);color:var(--text-primary); }
.toggle-btn.on { background:rgba(168,85,247,.15);border-color:var(--purple);color:#d8b4fe; }
.toggle-indicator { width:8px;height:8px;border-radius:50%;background:var(--text-muted);transition:background .25s; }
.toggle-indicator.on { background:var(--purple);box-shadow:0 0 6px var(--purple);animation:pulse 1.5s infinite; }

/* Agent status row */
.agent-status-row { display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:10px;color:var(--text-secondary); }
.agent-status-dot { width:6px;height:6px;border-radius:50%;background:var(--text-muted);flex-shrink:0; }
.agent-status-dot.active { background:var(--purple);animation:pulse 1.5s infinite; }

/* Agent mini-log */
.agent-mini-log { background:rgba(0,0,0,.2);border-radius:var(--r-sm);padding:8px;max-height:90px;overflow-y:auto;display:flex;flex-direction:column;gap:3px; }
.agent-mini-log::-webkit-scrollbar { width:3px; }
.agent-mini-log::-webkit-scrollbar-thumb { background:var(--border);border-radius:2px; }
.mini-log-empty { color:var(--text-muted);font-size:10px;font-family:var(--font-mono); }
.mini-log-entry { display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;color:var(--text-secondary);animation:slideIn .2s ease; }
.mini-log-time   { color:var(--text-muted);flex-shrink:0; }
.mini-log-action { color:var(--purple);font-weight:600; }
.mini-log-cpu    { color:var(--cyan); }
.mini-log-reward { margin-left:auto; }
.mini-log-reward.pos { color:var(--green); }
.mini-log-reward.neg { color:var(--red); }

/* Attack panel */
.attack-panel { background:var(--bg-card);border:1px solid rgba(239,68,68,.2);border-radius:var(--r-md);padding:14px;backdrop-filter:blur(16px);flex-shrink:0; }
.attack-buttons { display:flex;gap:8px;margin:10px 0 8px; }
.attack-btn { flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;border-radius:var(--r-sm);border:1px solid;cursor:pointer;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;transition:all .25s ease;position:relative;overflow:hidden; }
.attack-btn::before { content:'';position:absolute;inset:0;opacity:0;transition:opacity .25s; }
.attack-btn:hover::before { opacity:1; }
.ddos-btn  { background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.4);color:#fca5a5; }
.ddos-btn::before { background:rgba(239,68,68,.06); }
.ddos-btn:hover  { border-color:var(--red);box-shadow:0 0 16px rgba(239,68,68,.2);transform:scale(1.02); }
.spike-btn { background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.4);color:#fcd34d; }
.spike-btn::before { background:rgba(245,158,11,.06); }
.spike-btn:hover { border-color:var(--amber);box-shadow:0 0 16px rgba(245,158,11,.2);transform:scale(1.02); }
.attack-badge { font-size:9px;font-weight:600;opacity:.7; }
.attack-alert { display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.4);border-radius:var(--r-sm);font-size:11px;font-weight:500;color:#fca5a5;animation:alertBlink 1s ease infinite; }
@keyframes alertBlink { 0%,100%{opacity:1} 50%{opacity:.6} }
.alert-icon { font-size:14px; }

/* Done banner */
.done-banner { display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.35);border-radius:var(--r-md);color:var(--green);font-size:12px;font-weight:500;animation:slideIn .4s ease; }
.done-banner.hidden { display:none; }
.hidden { display:none !important; }