:root { --bg:#07100f; --panel:#111616; --line:#4d5857; --title:#25302f; --ink:#edf4f2; --muted:#9bacaa; --mint:#88c8c4; --amber:#edb83f; --green:#69d6a7; --red:#e06c6c; }
* { box-sizing:border-box; }
html, body { height:100%; margin:0; }
body { background:var(--bg); color:var(--ink); font:14px/1.4 Arial, Helvetica, sans-serif; display:flex; flex-direction:column; overflow:hidden;
  background-image:linear-gradient(#1c39331f 1px,transparent 1px),linear-gradient(90deg,#1c39331f 1px,transparent 1px); background-size:28px 28px; }
button { font:inherit; color:inherit; cursor:pointer; }
.topbar { height:52px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 16px; background:#0c1413; border-bottom:1px solid #2a3534; }
.brand { font-weight:800; letter-spacing:.04em; }
.brand small { margin-left:10px; color:var(--muted); font-weight:400; letter-spacing:0; }
.session { display:flex; align-items:center; gap:8px; }
.session button { border:1px solid #394745; border-radius:4px; padding:7px 11px; background:#101817; color:#b9c5c2; }
.session button:hover { color:#fff; border-color:#6b7a77; }
.pill { cursor:pointer; border:1px solid #80692f; border-radius:99px; padding:6px 12px; font-size:11px; font-weight:800; letter-spacing:.1em; color:#f1c972; }
.pill::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; background:var(--amber); box-shadow:0 0 8px var(--amber); vertical-align:middle; }
.pill.ready { color:#b9f0d8; border-color:#3f7a5f; } .pill.ready::before { background:var(--green); box-shadow:0 0 8px var(--green); }
.pill.off { color:#9aa5a3; border-color:#3a4443; } .pill.off::before { background:#6a7573; box-shadow:none; }
.pill.err { color:#f0b0b0; border-color:#7a3f3f; } .pill.err::before { background:var(--red); box-shadow:0 0 8px var(--red); }
.desktop { position:relative; flex:1 1 auto; overflow:hidden; }
.win { position:absolute; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:7px; background:var(--panel); box-shadow:0 22px 60px #000a; overflow:hidden; }
.win.focused { border-color:#7fa8a3; box-shadow:0 26px 70px #000c, 0 0 0 1px #3f5f5b; }
.win.minimized { display:none; }
.win.maximized { left:0 !important; top:0 !important; width:100% !important; height:100% !important; border-radius:0; }
.win-title { height:36px; flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:0 8px 0 13px; background:var(--title); border-bottom:1px solid #465250; font-size:10px; font-weight:800; letter-spacing:.12em; cursor:move; user-select:none; touch-action:none; }
.win-sub { color:var(--muted); font-weight:600; letter-spacing:.04em; flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.win-btns button { width:28px; height:24px; margin-left:4px; border:1px solid #56716b; border-radius:3px; background:#13221f; color:#b9d8d2; }
.win-body { position:relative; flex:1 1 auto; min-height:0; }
.win-body iframe { display:block; width:100%; height:100%; border:0; background:#111; }
.dragging .win-body iframe { pointer-events:none; }
.win-cover { position:absolute; inset:0; display:grid; place-items:center; padding:24px; text-align:center; color:#c9d6d3; background:#0b1110ee; }
.win-cover[hidden] { display:none; }
.win-cover h2 { margin:0 0 8px; font-size:18px; }
.win-cover p { margin:0; max-width:520px; color:var(--muted); }
.console { display:flex; flex-direction:column; background:#050b0a; }
#console-out { flex:1 1 auto; margin:0; padding:10px 12px; overflow:auto; color:#9ad6b6; font:12px/1.35 ui-monospace, Menlo, Consolas, monospace; white-space:pre-wrap; word-break:break-all; scrollbar-color:#45645f #0b100f; }
#console-form { display:flex; gap:6px; padding:8px; border-top:1px solid #293b37; }
#console-in { flex:1 1 auto; padding:7px 9px; border:1px solid #394745; border-radius:3px; background:#0c1110; color:#e3e9e7; font:12px ui-monospace, Menlo, Consolas, monospace; }
#console-form button { border:1px solid #394745; border-radius:3px; padding:0 12px; background:#101817; }
.placeholder { padding:18px; color:var(--muted); }
.resize { position:absolute; z-index:5; }
.resize.n { top:-3px; left:8px; right:8px; height:6px; cursor:ns-resize; } .resize.s { bottom:-3px; left:8px; right:8px; height:6px; cursor:ns-resize; }
.resize.e { right:-3px; top:8px; bottom:8px; width:6px; cursor:ew-resize; } .resize.w { left:-3px; top:8px; bottom:8px; width:6px; cursor:ew-resize; }
.resize.ne { top:-3px; right:-3px; width:12px; height:12px; cursor:nesw-resize; } .resize.sw { bottom:-3px; left:-3px; width:12px; height:12px; cursor:nesw-resize; }
.resize.nw { top:-3px; left:-3px; width:12px; height:12px; cursor:nwse-resize; } .resize.se { bottom:-3px; right:-3px; width:12px; height:12px; cursor:nwse-resize; }
.taskbar { height:34px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 12px; background:#0c1413; border-top:1px solid #2a3534; font-size:11px; color:var(--muted); }
.taskbar button { margin-right:6px; border:1px solid #394745; border-radius:3px; padding:4px 10px; background:#101817; color:#b9c5c2; font-size:11px; letter-spacing:.06em; }
@media (max-width: 900px) { .brand small { display:none; } }

.modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; background:#02060699; backdrop-filter:blur(2px); }
.modal[hidden] { display:none; }
.modal-card { width:min(560px, 92vw); padding:22px 24px; border:1px solid #4d5857; border-radius:8px; background:#111616; box-shadow:0 30px 80px #000c; }
.modal-card h2 { margin:0 0 10px; font-size:20px; letter-spacing:.02em; }
.modal-card p { margin:0 0 16px; color:var(--muted); line-height:1.5; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; }
.modal-actions button { border:1px solid #394745; border-radius:4px; padding:9px 14px; background:#101817; color:#b9c5c2; }
.modal-actions button.primary { color:#07100f; background:var(--mint); border-color:var(--mint); font-weight:800; }
.win { touch-action:none; }
.boot-steps { list-style:none; margin:0 0 12px; padding:0; }
.boot-steps li { display:grid; grid-template-columns:22px 1fr; column-gap:10px; padding:7px 0; border-bottom:1px solid #1f2a29; color:#7f8f8c; }
.boot-steps li::before { content:"○"; color:#55716d; font-size:15px; line-height:1.2; }
.boot-steps li b { display:block; color:#b9c5c2; font-weight:700; }
.boot-steps li span { grid-column:2; font-size:12px; color:var(--muted); }
.boot-steps li.active { color:var(--ink); } .boot-steps li.active::before { content:"◔"; color:var(--amber); animation:spin 1.2s linear infinite; }
.boot-steps li.done::before { content:"●"; color:var(--green); } .boot-steps li.done b { color:#b9f0d8; }
.boot-steps li.fail::before { content:"✕"; color:var(--red); }
@keyframes spin { to { transform:rotate(360deg); } }
.boot-note { min-height:1.4em; margin:0 0 12px !important; font-size:12px; }