*{box-sizing:border-box}html,body{margin:0;height:100%;background:#000;color:#fff;font:16px -apple-system,system-ui,sans-serif}
body{display:flex;flex-direction:column}#stage{position:relative;flex:1;overflow:hidden}
video,#ov{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}#ov{touch-action:none}
#badge{position:absolute;top:env(safe-area-inset-top,0);left:0;right:0;margin:10px auto;width:min(92%,560px);border-radius:18px;padding:12px 16px;text-align:center;box-shadow:0 4px 20px #0008}
#bState{font-size:clamp(28px,8vw,56px);font-weight:800;letter-spacing:.5px}#bReason{font-size:clamp(14px,3.5vw,22px);opacity:.9}
.Idle{background:#37474f}.Cooking{background:#2e7d32}.Unattended{background:#ef6c00}.Warning{background:#f9a825;color:#000}.Danger{background:#c62828;animation:fl .6s infinite alternate}
@keyframes fl{to{background:#ff1744}}
#info{position:absolute;bottom:6px;left:8px;font-size:12px;opacity:.7}
#zoneHint{position:absolute;bottom:40px;left:0;right:0;text-align:center;background:#000a;padding:8px}
#bar{display:flex;gap:8px;padding:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0));background:#111;flex-wrap:wrap}
button{flex:1;min-width:110px;padding:14px 10px;border:0;border-radius:12px;background:#333;color:#fff;font-size:16px;font-weight:600}
.primary{background:#1565c0}.danger{background:#c62828}
dialog{background:#1b1b1b;color:#fff;border:0;border-radius:16px;width:min(94vw,520px);max-height:90vh;overflow:auto}
dialog label{display:block;margin:10px 0}input,select{font-size:16px;padding:6px;border-radius:8px;border:1px solid #555;background:#222;color:#fff}
#topic{width:100%}input[type=number]{width:70px}.row{display:flex;gap:8px;margin-top:8px}.small{font-size:13px;opacity:.85}
#qr{background:#fff;display:inline-block;padding:8px;border-radius:8px}#qr img{display:block}a{color:#90caf9;word-break:break-all}