:root {
  --bg: #0d1117; --surface: #161b22; --surface2: #21262d;
  --border: #30363d; --text: #c9d1d9; --text-dim: #8b949e;
  --accent: #2f81f7; --accent-hover: #1f6feb;
  --green: #3fb950; --red: #f85149; --yellow: #d29922;
  --radius: 6px; --mono: "Cascadia Code", "Consolas", monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:-apple-system,"Segoe UI",sans-serif; font-size:14px; }
a { color:var(--accent); text-decoration:none; }
button { background:var(--surface2); color:var(--text); border:1px solid var(--border);
  padding:6px 14px; border-radius:var(--radius); cursor:pointer; font-size:13px; transition:.15s; }
button:hover { border-color:var(--accent); background:#30363d; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.primary:hover { background:var(--accent-hover); }
button.danger { border-color:var(--red); color:var(--red); }
button.sm { padding:3px 8px; font-size:12px; }
input,select,textarea { background:var(--surface); color:var(--text); border:1px solid var(--border);
  padding:6px 10px; border-radius:var(--radius); font-size:13px; outline:none; }
input:focus,select:focus,textarea:focus { border-color:var(--accent); }
pre { font-family:var(--mono); font-size:12px; white-space:pre-wrap; word-break:break-all; }
table { width:100%; border-collapse:collapse; }
th,td { padding:8px 12px; text-align:left; border-bottom:1px solid var(--border); }
th { color:var(--text-dim); font-weight:600; font-size:12px; text-transform:uppercase; }
tr:hover td { background:var(--surface2); }

.layout { display:flex; height:100vh; }
.sidebar { width:220px; background:var(--surface); border-right:1px solid var(--border);
  padding:16px 0; flex-shrink:0; overflow-y:auto; }
.sidebar .logo { padding:0 20px 20px; font-size:16px; font-weight:700; color:var(--text); }
.sidebar .logo span { color:var(--accent); }
.nav-item { display:flex; align-items:center; gap:8px; padding:10px 20px; cursor:pointer;
  color:var(--text-dim); font-size:13px; transition:.15s; border-left:3px solid transparent; }
.nav-item:hover { background:var(--surface2); color:var(--text); }
.nav-item.active { color:var(--accent); border-left-color:var(--accent); background:var(--surface2); }
.nav-item .ico { width:16px; text-align:center; }
.main { flex:1; overflow-y:auto; padding:24px; }
.badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; }
.badge.online { background:rgba(63,185,80,.15); color:var(--green); }
.badge.offline { background:rgba(248,81,73,.15); color:var(--red); }
.badge.running { background:rgba(47,129,247,.15); color:var(--accent); }
.badge.done { background:rgba(63,185,80,.15); color:var(--green); }
.badge.failed { background:rgba(248,81,73,.15); color:var(--red); }

.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.page-header h2 { font-size:18px; }
.toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.checkbox-col { width:32px; text-align:center; }
.host-name { font-weight:600; }
.host-ip { color:var(--text-dim); font-size:12px; font-family:var(--mono); }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex;
  align-items:center; justify-content:center; z-index:1000; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:8px;
  width:90%; max-width:800px; max-height:85vh; overflow:hidden; display:flex; flex-direction:column; }
.modal-header { display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border); }
.modal-header h3 { font-size:16px; }
.modal-body { padding:20px; overflow-y:auto; flex:1; }
.modal-close { background:none; border:none; font-size:20px; cursor:pointer; color:var(--text-dim); }
.modal-close:hover { color:var(--text); }
.modal-footer { padding:12px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }

/* Tree */
.tree-node { padding:4px 0; }
.tree-label { display:flex; align-items:center; gap:6px; cursor:pointer; padding:3px 6px;
  border-radius:4px; transition:.1s; }
.tree-label:hover { background:var(--surface2); }
.tree-children { margin-left:20px; border-left:1px solid var(--border); padding-left:8px; }
.tree-icon { font-size:14px; }
.tree-cls { color:var(--text-dim); font-size:11px; font-family:var(--mono); }

/* Keylog */
.keylog-table td { font-family:var(--mono); font-size:12px; }
.keylog-table .keys { color:var(--yellow); }

/* Screen viewer */
.screen-viewer { background:#000; border-radius:8px; overflow:hidden; }
.screen-viewer img { display:block; max-width:100%; }

/* Tabs */
.tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:16px; }
.tab { padding:8px 16px; cursor:pointer; color:var(--text-dim); font-size:13px;
  border-bottom:2px solid transparent; }
.tab:hover { color:var(--text); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab-content { display:none; }
.tab-content.active { display:block; }

.empty { text-align:center; padding:40px; color:var(--text-dim); }
.loading { text-align:center; padding:40px; color:var(--accent); }