:root {
  --bg:#0f1218; --panel:#171b23; --fg:#d7dce5; --muted:#7d8696; --border:#2a303c;
  --accent:#4f8cff; --accent-fg:#fff; --con-bg:#0b0d12; --con-fg:#cfd6e2;
  --err:#ff6b6b; --ok:#4ade80; --warn:#fbbf24; --font:13px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font: 14px/1.4 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.err { color: var(--err); min-height: 1.2em; }
a { color: var(--accent); }
code, .code { font-family: Consolas, "Cascadia Mono", "DejaVu Sans Mono", monospace; }

button, select {
  background: var(--panel); color: var(--fg); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 12px; font: inherit; cursor: pointer; white-space: nowrap;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { color: var(--muted); cursor: default; opacity: .7; }
button.primary { background: var(--accent); color: var(--accent-fg); border: none; font-weight: 600; }
button.danger { background: var(--err); color: #fff; border: none; font-weight: 600; }
button.primary:disabled, button.danger:disabled { background: var(--border); color: var(--muted); }
input[type=text], input[type=search], input[type=password], input[type=file] {
  background: var(--panel); color: var(--fg); border: 1px solid var(--border); border-radius: 6px;
  padding: 7px 9px; font: inherit; width: 100%; min-width: 0;
}
input:focus { outline: none; border-color: var(--accent); }
.row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }

/* login */
.overlay { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); padding: 16px; }
.login-card { width: min(420px, 100%); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.login-card h1 { margin: 0; font-size: 20px; color: var(--accent); }
.login-card p { margin: 0; }
.login-logo { width: 100%; border-radius: 8px; }

/* top */
#app { height: 100%; display: flex; flex-direction: column; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 6px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.brand img { width: 26px; height: 26px; border-radius: 6px; }
.top-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sel { display: flex; gap: 6px; align-items: center; color: var(--muted); }

/* layout */
.layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 10px; padding: 10px; }
.left, .right { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.banner { display: block; height: 118px; border-radius: 10px; overflow: hidden; flex: none; }
.banner img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.tabs { display: flex; border-bottom: 1px solid var(--border); flex: none; }
.tab { background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); }
.tab.active { color: var(--fg); border-bottom-color: var(--accent); }
.tabpage { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.desc { min-height: 2.6em; font-size: 13px; }

.tree, .list { flex: 1; min-height: 120px; overflow: auto; background: var(--panel);
  border: 1px solid var(--border); border-radius: 8px; padding: 4px; }
.grp > .gh { display: flex; align-items: center; gap: 6px; padding: 5px 6px; font-weight: 700; cursor: pointer; user-select: none; border-radius: 6px; }
.grp > .gh:hover { background: var(--border); }
.grp > .gh .car { width: 12px; display: inline-block; color: var(--muted); transition: transform .1s; }
.grp.open > .gh .car { transform: rotate(90deg); }
.grp > .items { display: none; }
.grp.open > .items { display: block; }
.it { padding: 4px 8px 4px 26px; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; gap: 6px; }
.it:hover { background: var(--border); }
.it.sel { background: var(--accent); color: var(--accent-fg); }
.it .x { opacity: .6; padding: 0 4px; }
.it .x:hover { opacity: 1; color: var(--err); }

.hitem { padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--border); }
.hitem:hover { background: var(--border); }
.hitem.sel { background: var(--accent); color: var(--accent-fg); }
.hitem .hcmd { font-family: Consolas, "Cascadia Mono", monospace; word-break: break-all; }
.hitem .htg { font-size: 12px; opacity: .8; }

.agent { padding: 8px; border-bottom: 1px solid var(--border); font-size: 13px; }
.agent b { font-size: 14px; }
.help { padding: 10px 12px; font-size: 13px; flex: none; }
.help h3 { margin: 0 0 6px; font-size: 14px; }
.help ol { margin: 0 0 6px; padding-left: 18px; }
.code { background: var(--con-bg); color: var(--con-fg); padding: 8px; border-radius: 6px; white-space: pre-wrap; word-break: break-all; font-size: 12px; margin: 6px 0; }

/* devices */
.devices { padding: 8px 10px; flex: none; }
.dev-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12px; margin-bottom: 6px; }
.dev-list { max-height: 170px; overflow: auto; }
.dev-agent { padding: 4px 0; }
.dev-agent > label { font-weight: 700; }
.dev { padding-left: 24px; }
.dev-list label { display: flex; gap: 8px; align-items: center; padding: 2px 4px; cursor: pointer; border-radius: 5px; }
.dev-list label:hover { background: var(--border); }
.dev-list .st { color: var(--muted); font-size: 12px; }
.dev-list input { accent-color: var(--accent); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }

/* command + console */
.header { margin: 2px 0 0; font-size: 16px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdbar { display: flex; gap: 6px; align-items: center; }
.cmdbar .adb { color: var(--muted); font-family: Consolas, monospace; }
#cmd { font-family: Consolas, "Cascadia Mono", monospace; }
.console {
  flex: 1; min-height: 200px; overflow: auto; background: var(--con-bg); color: var(--con-fg);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  font: var(--font)/1.45 Consolas, "Cascadia Mono", "DejaVu Sans Mono", monospace;
}
.console .ln { white-space: pre; }
.console .k-err { color: var(--err); }
.console .k-sys, .console .k-head { color: var(--accent); }
.console .k-head { font-weight: 700; margin-top: 4px; }
.console .k-ok { color: var(--ok); }
.console .k-warn { color: var(--warn); }
.console .k-old { color: var(--muted); }
.console .tag { font-weight: 700; }
.console img.prev { display: block; max-height: 260px; max-width: 100%; margin: 4px 0 4px 2ch; border: 1px solid var(--border); border-radius: 6px; }
.stdinbar { display: flex; gap: 6px; }
.status { font-size: 12px; min-height: 1.3em; }

/* dialog */
dialog { background: var(--panel); color: var(--fg); border: 1px solid var(--border); border-radius: 12px; padding: 0; width: min(520px, 94vw); }
dialog::backdrop { background: rgba(0,0,0,.5); }
.dlg { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.dlg h3 { margin: 0; color: var(--accent); }
.fld { display: flex; flex-direction: column; gap: 4px; }
.fld label { font-weight: 600; font-size: 13px; }
.fld .hint { font-size: 12px; color: var(--muted); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 860px) {
  #app { height: auto; min-height: 100%; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .left, .right, .tabpage { min-height: auto; flex: none; }
  .tree, .list { max-height: 45vh; }
  .console { min-height: 50vh; }
  .banner { height: 90px; }
  .cmdbar { flex-wrap: wrap; }
  .cmdbar #cmd { flex: 1 1 100%; order: -1; }
  .cmdbar .adb { display: none; }
}