:root { --bg: #0e0e0e; --fg: #e6e6e6; --dim: #7a7a7a; --line: #262626; --danger: #d66; }
@media (prefers-color-scheme: light) { :root { --bg: #fafafa; --fg: #111; --dim: #777; --line: #e4e4e4; --danger: #b33; } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--fg); font: 15px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; display: flex; flex-direction: column; }
header { display: flex; gap: 1.5rem; align-items: baseline; padding: 1rem 16px; border-bottom: 1px solid var(--line); }
header .brand { font-weight: 600; }
a { color: var(--fg); text-decoration: none; }
a:hover { text-decoration: underline; }
nav a { color: var(--dim); margin-right: 1rem; }
main { flex: 1; padding: 1.25rem 16px; max-width: 56rem; width: 100%; margin: 0 auto; }
main.term { max-width: none; padding: 0; display: flex; flex-direction: column; }
h2 { font-size: 1rem; font-weight: 600; margin: 0 0 .75rem; }
p, .dim { color: var(--dim); margin: 0 0 .75rem; }
button, input { font: inherit; color: var(--fg); background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: .35rem .7rem; }
button { cursor: pointer; }
button:hover { border-color: var(--fg); }
button.danger:hover { border-color: var(--danger); color: var(--danger); }
button.primary { border-color: var(--fg); }
input { width: 100%; }
form.login { max-width: 30rem; margin: 3rem auto; }
form.login input { margin: .75rem 0; }
table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
td, th { text-align: left; padding: .5rem .25rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--dim); font-weight: 500; }
td.actions { text-align: right; white-space: nowrap; }
td.actions button { margin-left: .35rem; }
.row { display: flex; gap: .5rem; align-items: center; margin-bottom: 1.5rem; }
.row input { flex: 1; }
pre { border: 1px solid var(--line); border-radius: 8px; padding: .75rem 1rem; overflow-x: auto; color: var(--fg); margin: 0 0 1.5rem; }
code { color: var(--fg); }
.err { color: var(--danger); margin: .5rem 0; }
.ok { color: var(--dim); margin: .5rem 0; }
.termbar { display: flex; gap: 1rem; align-items: center; padding: .5rem 16px; border-bottom: 1px solid var(--line); color: var(--dim); }
#term { flex: 1; padding: 8px; background: #000; }
.xterm { height: 100%; }
select { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: .35rem .5rem; }