:root { --bg:#1e1e2e; --card:#313244; --text:#cdd6f4; --muted:#a6adc8; --yellow:#f9e2af; --blue:#89b4fa; --grey:#7f849c; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
       padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
header { display:flex; align-items:baseline; justify-content:space-between; padding:16px 16px 8px; }
h1 { margin:0; font-size:22px; }
#state { color:var(--muted); font-size:13px; }
#state.bad { color:#f38ba8; }
ul { list-style:none; margin:0; padding:0 12px 24px; }
li { display:flex; align-items:center; gap:12px; background:var(--card); border-radius:12px; padding:14px; margin:8px 0;
     border-left:4px solid var(--c, var(--grey)); }
li.fork { margin-left: calc(var(--d) * 18px); }
li.active .name { font-weight:600; }
.mark { width:22px; text-align:center; font-size:18px; }
.waiting .mark { color:var(--yellow); }
.running .mark { color:var(--blue); animation: spin 1s linear infinite; }
.exited .mark { color:var(--grey); }
@keyframes spin { to { transform: rotate(360deg); } }
.body { flex:1; min-width:0; }
.name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meta { color:var(--muted); font-size:13px; }
#empty { color:var(--muted); text-align:center; }
.signin { padding: 8px 16px; display: flex; flex-direction: column; gap: 14px; }
button, input { font: inherit; border-radius: 10px; border: 1px solid #45475a; padding: 12px 14px; background: var(--card); color: var(--text); }
button.primary { background: var(--blue); color: #11111b; border: 0; font-weight: 600; }
details { background: var(--card); border-radius: 12px; padding: 12px 14px; }
details[open] { display: flex; flex-direction: column; gap: 10px; }
summary { cursor: pointer; }
details input, details button { width: 100%; margin-top: 8px; background: var(--bg); }
.hint { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
code { background: var(--bg); padding: 1px 5px; border-radius: 4px; }
#msg { color: var(--muted); min-height: 1.4em; }
#msg.bad { color: #f38ba8; }
#signout { background: transparent; border: 0; color: var(--muted); padding: 0; font-size: 13px; }