:root {
  --bg: #0d1117; --panel: #161b22; --line: #30363d; --fg: #c9d1d9;
  --dim: #8b949e; --accent: #58a6ff; --red: #f85149; --green: #3fb950;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.app { display: grid; grid-template-columns: 280px 1fr; height: 100vh; }
aside { background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; }
aside header { padding: 10px 12px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; color: var(--dim); text-transform: uppercase; font-size: 11px;
  letter-spacing: .08em; }
aside header button { background: none; border: 0; color: var(--dim);
  cursor: pointer; font-size: 14px; }
aside header button:hover { color: var(--fg); }
#sessions { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
#sessions li { padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
#sessions li:hover { background: #1f242c; }
#sessions li.active { background: #1f6feb33; border-left: 2px solid var(--accent);
  padding-left: 10px; }
#sessions .sid { color: var(--accent); font-weight: 600; }
#sessions .meta { color: var(--dim); font-size: 11px; }
#sessions .dead { color: var(--red); }
#sessions .empty { color: var(--dim); cursor: default; }
main { display: flex; flex-direction: column; min-width: 0; }
#session-header { padding: 8px 12px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--panel); flex-wrap: wrap; }
#sel-info { color: var(--dim); font-size: 12px; }
#actions { display: flex; gap: 4px; flex-wrap: wrap; }
#actions button { background: #21262d; color: var(--fg); border: 1px solid var(--line);
  padding: 4px 10px; border-radius: 4px; cursor: pointer; font: inherit; font-size: 12px; }
#actions button:hover { background: #30363d; }
#actions button.danger { color: var(--red); }
#actions button.primary { color: var(--accent); }
#output { flex: 1; overflow-y: auto; margin: 0; padding: 12px;
  white-space: pre-wrap; word-break: break-all; }
#output .prompt-line { color: var(--accent); }
#output .err { color: var(--red); }
#output .dim { color: var(--dim); }
#output .ok { color: var(--green); }
#cmd-form { display: flex; border-top: 1px solid var(--line); padding: 8px 12px;
  background: var(--panel); gap: 8px; }
#prompt { color: var(--accent); white-space: nowrap; }
#cmd-input { flex: 1; background: transparent; border: 0; color: var(--fg);
  font: inherit; outline: none; }
.login { max-width: 320px; margin: 20vh auto; padding: 24px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; }
.login h1 { font-size: 14px; margin: 0 0 16px; color: var(--dim);
  text-transform: uppercase; letter-spacing: .08em; }
.login input { width: 100%; padding: 8px 10px; background: var(--bg);
  border: 1px solid var(--line); color: var(--fg); font: inherit; border-radius: 4px; }
.login button { margin-top: 12px; width: 100%; padding: 8px; background: var(--accent);
  color: var(--bg); border: 0; border-radius: 4px; cursor: pointer; font: inherit;
  font-weight: 600; }
.login .err { color: var(--red); margin-top: 8px; font-size: 12px; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.9);
  display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal.hidden { display: none; }
.modal-body { background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; width: 94vw; height: 94vh; display: flex;
  flex-direction: column; overflow: hidden; }
.modal-header { padding: 8px 12px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; font-size: 12px; }
.modal-header .ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.modal-header label { color: var(--dim); display: inline-flex; align-items: center; gap: 4px; }
.modal-header select, .modal-header input[type="range"] {
  background: var(--bg); color: var(--fg); border: 1px solid var(--line);
  font: inherit; font-size: 12px; padding: 2px 6px; border-radius: 4px; }
.modal-header input[type="range"] { padding: 0; width: 80px; }
.modal-header button { background: #21262d; color: var(--fg);
  border: 1px solid var(--line); padding: 3px 10px; border-radius: 4px;
  cursor: pointer; font: inherit; font-size: 12px; }
.modal-header button:hover { background: #30363d; }
#screen-status { color: var(--green); font-weight: 600; }
#screen-status.err { color: var(--red); }
.modal-content { flex: 1; overflow: hidden; display: flex;
  align-items: center; justify-content: center; background: #000;
  padding: 8px; min-height: 0; }
#screen-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }