:root { --bg:#f4f5f7; --card:#fff; --fg:#1d1f23; --muted:#6b7280; --acc:#2563eb; --line:#e5e7eb; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; justify-content:space-between; align-items:center; padding:12px 20px; background:#111827; color:#fff; flex-wrap:wrap; gap:10px; }
header h1 { font-size:20px; margin:0; }
#conn { display:flex; align-items:center; gap:8px; }
.pill { padding:3px 10px; border-radius:999px; font-size:12px; }
.pill.off { background:#4b5563; } .pill.on { background:#16a34a; } .pill.busy { background:#d97706; }
main { display:grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap:16px; padding:16px; max-width:1400px; margin:auto; }
.card { background:var(--card); border-radius:12px; padding:14px 18px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
#debugCard { grid-column: 1 / -1; }
h2 { font-size:16px; margin:0 0 10px; } h3 { font-size:13px; margin:14px 0 6px; color:#374151; text-transform:uppercase; letter-spacing:.03em; }
.row { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin:6px 0; }
.row.wrap button { margin-bottom:4px; }
label { display:flex; flex-direction:column; font-size:12px; color:var(--muted); gap:3px; }
label.chk { flex-direction:row; align-items:center; gap:5px; color:var(--fg); font-size:13px; padding-bottom:6px; }
label.grow { flex:1; min-width:220px; }
input[type=number] { width:80px; } input, select, textarea { font:inherit; padding:5px 7px; border:1px solid #d1d5db; border-radius:6px; background:#fff; color:var(--fg); }
textarea { width:100%; resize:vertical; font-size:15px; }
button { font:inherit; padding:6px 12px; border-radius:7px; border:1px solid #d1d5db; background:#fff; cursor:pointer; }
button:hover:not(:disabled) { background:#f3f4f6; }
button:disabled { opacity:.45; cursor:not-allowed; }
button.primary { background:var(--acc); border-color:var(--acc); color:#fff; } button.primary:hover:not(:disabled) { background:#1d4ed8; }
button.big { font-size:16px; padding:9px 22px; } button.small { padding:1px 8px; font-size:11px; text-transform:none; }
#previewWrap { background:repeating-conic-gradient(#e5e7eb 0% 25%, #f9fafb 0% 50%) 50%/16px 16px; padding:16px; border-radius:8px; display:flex; justify-content:center; overflow:auto; }
#preview { image-rendering: pixelated; box-shadow:0 2px 8px rgba(0,0,0,.25); background:#fff; }
.muted { color:var(--muted); font-size:12px; }
pre { background:#f9fafb; border:1px solid var(--line); border-radius:6px; padding:8px; white-space:pre-wrap; word-break:break-all; font:11px/1.4 Menlo, monospace; max-height:260px; overflow:auto; }
#log { max-height:340px; color:#111; }
#progress { height:8px; background:#e5e7eb; border-radius:4px; overflow:hidden; margin-top:8px; } #bar { height:100%; width:0; background:var(--acc); transition:width .1s; }
.warn { background:#fef3c7; color:#92400e; padding:10px 20px; }
footer { text-align:center; padding:16px; }
summary { cursor:pointer; }
[hidden] { display:none !important; }
#preview { max-width:100%; height:auto !important; }