:root { color-scheme: dark; font-family: system-ui, sans-serif; background:#11100f; color:#fff8f2 }
* { box-sizing:border-box }
html,body { width:100%; min-width:240px; height:100%; min-height:282px; margin:0; overflow:hidden; overscroll-behavior:none }
body { background:radial-gradient(circle at 90% 0,rgba(255,79,0,.24),transparent 40%),#11100f }
.shell { width:100%; height:100%; min-height:282px; padding:9px; display:grid; grid-template-rows:38px 30px 1fr 18px; gap:6px }
header { display:flex; align-items:center; gap:7px }
.mark { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:#ff4f00; color:#17100d; font-size:22px; font-weight:900 }
h1 { margin:0; font-size:15px; line-height:1 }
p { margin:3px 0; color:#bdb5ae; font-size:9px }
nav { display:grid; grid-template-columns:repeat(6,1fr); gap:2px }
button { border:0; color:#fff8f2; font:inherit; touch-action:manipulation }
.tab { border-radius:6px; background:#292522; font-size:8px }
.tab.active { background:#ff4f00; color:#17100d; font-weight:800 }
.panel { display:none; min-height:0; align-content:center; gap:7px }
.panel.active { display:grid }
.touchpad { position:relative; height:130px; overflow:hidden; display:grid; place-items:center; border:1px dashed #776b63; border-radius:12px; background:#201d1b; color:#857b74; font-size:11px; touch-action:none }
.touchpad i { position:absolute; display:none; width:18px; height:18px; margin:-9px 0 0 -9px; border:3px solid #ff6a25; border-radius:50%; pointer-events:none }
.action { min-height:42px; border-radius:10px; background:#ff4f00; color:#17100d; font-size:11px; font-weight:800 }
.small { min-height:36px; border-radius:8px; background:#3a3430; font-size:10px }
.small:disabled { opacity:.35 }
button:active { transform:scale(.97) }
output { min-height:14px; overflow:hidden; color:#e7ddd5; font-size:9px; text-align:center; text-overflow:ellipsis; white-space:nowrap }
.meter { height:35px; overflow:hidden; border:1px solid #3b3531; border-radius:9px; background:#201d1b }
.meter i { display:block; width:0; height:100%; background:linear-gradient(90deg,#42d77d,#ffd24a,#ff4f00); transition:width .06s linear }
video { width:100%; height:116px; border-radius:9px; background:#050505; object-fit:cover }
.camera-actions { display:grid; grid-template-columns:1fr 48px; gap:5px }
small { color:#776e68; font-size:8px; text-align:center }
footer { display:flex; justify-content:space-between; color:#776e68; font-size:8px }
#event { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
@media (min-width:320px),(min-height:400px) { .shell { width:240px; height:282px; margin:20px auto; border:1px solid #38322e; border-radius:16px } }