:root { color-scheme: dark; --bg:#090d0b; --surface:#111713; --surface-2:#18211c; --line:#29362f; --text:#e7eee9; --muted:#87938b; --green:#51d89a; --red:#ff8585; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",sans-serif; }
button, input, textarea { font:inherit; }
button, a { touch-action:manipulation; }
.topbar { min-height:58px; padding:max(10px,env(safe-area-inset-top)) 16px 10px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:var(--surface); }
.topbar strong { letter-spacing:.02em; }
.subtitle { display:inline-block; margin-left:9px; color:var(--muted); font-size:12px; max-width:min(58vw,700px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
.quiet, .card-actions button { color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:8px; padding:7px 11px; }
.primary { display:inline-flex; align-items:center; justify-content:center; color:#062316!important; font-weight:750; text-decoration:none; background:var(--green)!important; border:0!important; border-radius:9px; padding:10px 15px; }
.danger { color:var(--red)!important; }

.dashboard { width:min(1100px,100%); margin:auto; padding:26px 18px 80px; }
.dashboard-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.dashboard h1 { margin:0 0 5px; font-size:28px; }
.dashboard-head p { margin:0; color:var(--muted); }
#notice { display:block; min-height:24px; color:var(--green); }
#notice.error, #form-error { color:var(--red); }
.terminal-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr)); gap:14px; }
.terminal-card { padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:14px; }
.card-top { display:flex; justify-content:space-between; align-items:start; gap:12px; }
.card-top h2 { margin:0 0 6px; font-size:19px; }
.slug { color:var(--green); font-size:12px; }
.badge { flex:none; padding:4px 8px; color:var(--muted); background:var(--surface-2); border-radius:999px; font-size:11px; }
.badge[data-status="running"] { color:var(--green); }
.workspace { min-height:44px; margin:17px 0 5px; color:var(--text); font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; }
.meta { margin:0 0 14px; color:var(--muted); font-size:12px; }
.card-actions { display:flex; flex-wrap:wrap; gap:7px; }
.card-actions button, .card-actions a { font-size:12px; }

dialog { width:min(540px,calc(100% - 28px)); padding:0; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:15px; box-shadow:0 25px 80px #000a; }
dialog::backdrop { background:#000a; backdrop-filter:blur(3px); }
#editor-form { display:grid; gap:16px; padding:20px; }
#editor-form header { display:flex; align-items:center; justify-content:space-between; }
#editor-form h2 { margin:0; }
#editor-form label { display:grid; gap:7px; color:var(--muted); font-size:13px; }
#editor-form input, .login-card input { width:100%; padding:11px 12px; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:8px; outline:0; }
#editor-form input:focus, .login-card input:focus { border-color:var(--green); }
.slug-field { display:flex; align-items:center; background:var(--bg); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.slug-field span { padding-left:11px; color:var(--muted); font:12px ui-monospace,SFMono-Regular,Menlo,monospace; }
.slug-field input { border:0!important; padding-left:3px!important; }
.form-help { margin:-4px 0; color:var(--muted); font-size:12px; line-height:1.5; }

.terminal-page { height:100dvh; display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; overflow:hidden; }
.terminal-title { display:flex; align-items:center; min-width:0; }
.terminal-title > a { margin-right:11px; color:var(--green); font-size:32px; line-height:1; text-decoration:none; }
.terminal-title > div { min-width:0; }
.connection { color:var(--muted); font-size:12px; }
.connection.online { color:var(--green); }
.terminal-stack { position:relative; min-height:0; }
.terminal-panel { position:absolute; inset:0; padding:8px 8px 2px; overflow:hidden; }
.terminal-panel > div, .xterm { height:100%; }
.xterm-viewport { scrollbar-width:thin; }
.keybar { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:7px 8px; border-top:1px solid var(--line); background:var(--surface); }
.keybar button { min-height:36px; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:7px; }
.composer { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:8px; padding:8px 8px max(8px,env(safe-area-inset-bottom)); background:var(--surface); }
.composer textarea { resize:none; max-height:120px; padding:10px 12px; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:10px; outline:0; }
.composer textarea:focus { border-color:var(--green); }
.composer button, .login-card button { min-height:42px; padding:0 18px; color:#062316; font-weight:750; background:var(--green); border:0; border-radius:10px; }

.login-page { min-height:100dvh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 50% 0%,#153326 0,var(--bg) 48%); }
.login-card { width:min(100%,390px); padding:30px; background:#111713e8; border:1px solid var(--line); border-radius:18px; box-shadow:0 20px 70px #0008; }
.mark { width:48px; height:48px; display:grid; place-items:center; color:#062316; font-weight:900; background:var(--green); border-radius:13px; }
.login-card h1 { margin:18px 0 6px; font-size:26px; }
.login-card p { margin:0 0 24px; color:var(--muted); }
.login-card form { display:grid; gap:16px; }
.login-card label { display:grid; gap:7px; color:var(--muted); font-size:13px; }
#error { min-height:20px; color:var(--red); font-size:13px; }
@media(max-width:620px) { .dashboard-head { align-items:stretch; flex-direction:column; } .dashboard-head .primary { align-self:start; } .subtitle { display:block; margin:3px 0 0; } }