* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; font-family: system-ui, "Segoe UI", Roboto, sans-serif; background: #0e0f12; color: #e8e8ea; }
body { display: flex; flex-direction: column; }

#bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #16181d; border-bottom: 1px solid #23252b; font-size: 14px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #666; }
.dot.on { background: #2ec26b; } .dot.off { background: #c0392b; } .dot.wait { background: #e0a030; }
.badge { margin-left: auto; background: #e0a030; color: #111; font-weight: 700; padding: 1px 8px; border-radius: 8px; font-size: 12px; }

main { flex: 1; overflow: auto; padding: 10px; }
.tab { display: none; } .tab.active { display: block; }

#screen-wrap { position: relative; width: 100%; background: #000; border-radius: 8px; overflow: hidden; min-height: 120px; }
#screen { width: 100%; height: auto; display: block; user-select: none; }
#touch { position: absolute; inset: 0; touch-action: none; }

.row { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.row label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #b8b8be; }
button { background: #2b6cff; color: #fff; border: 0; border-radius: 8px; padding: 10px 14px; font-size: 14px; min-width: 44px; }
button:active { filter: brightness(0.85); }
input, textarea, select { background: #1c1e24; color: #e8e8ea; border: 1px solid #2c2f37; border-radius: 8px; padding: 9px; font-size: 14px; flex: 1; min-width: 0; }
input[type=range] { padding: 0; }

#log { background: #0a0b0e; border: 1px solid #23252b; border-radius: 8px; padding: 8px; font-size: 12px; white-space: pre-wrap; word-break: break-word; max-height: 180px; overflow: auto; margin-top: 10px; }
#preview { width: 100%; margin-top: 8px; border-radius: 8px; }

#tabs { display: flex; border-top: 1px solid #23252b; background: #16181d; }
#tabs button { flex: 1; background: transparent; color: #b8b8be; border-radius: 0; padding: 12px 4px; font-size: 13px; min-width: 0; }
#tabs button.active { color: #fff; border-top: 2px solid #2b6cff; }