* { box-sizing: border-box; }
html, body, #app { height: 100%; margin: 0; }
body { background: #111; color: #ddd; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }

#app { position: relative; overflow: hidden; }
#c { width: 100%; height: 100%; display: block; }

#ui { position: absolute; left: 0; top: 0; width: 100%; padding: 8px 10px; pointer-events: none; }
#ui .row { display: flex; gap: 12px; align-items: center; pointer-events: auto; }
#ui .row.small { font-size: 12px; opacity: 0.8; margin-top: 6px; }
#ui .group { background: rgba(0,0,0,0.45); padding: 6px 8px; border-radius: 8px; display: flex; gap: 6px; align-items: center; }
#ui .group label { opacity: 0.8; margin-right: 4px; font-size: 12px; }
#ui button { appearance: none; border: 1px solid #333; background: #1c1c1c; color: #ddd; padding: 6px 10px; border-radius: 6px; cursor: pointer; transition: background .15s ease, color .15s ease; }
#ui button:hover { background: #2a2a2a; }
#ui button:active { background: #3a3a3a; }

.highlight { outline: 2px solid #6cf; outline-offset: 2px; }