html,body,#app,#viewer{margin:0;width:100%;height:100%;overflow:hidden;font-family:system-ui,Arial,sans-serif}
header{position:absolute;top:env(safe-area-inset-top,8px);left:10px;right:10px;z-index:10;background:#102136e9;color:white;border-radius:13px;padding:12px;display:flex;gap:8px;justify-content:space-between;align-items:center;box-shadow:0 4px 18px #0006}
header strong{font-size:14px}header small{display:block;font-size:10px;color:#b7c9d6;margin-top:3px}
#status{font-size:11px;color:#a9e6cd;text-align:right;max-width:46%}
aside{position:absolute;z-index:10;bottom:28px;left:10px;right:10px;background:#10263de8;color:#fff;border-radius:13px;padding:12px;box-shadow:0 5px 20px #0006;max-height:40vh;overflow:auto}
.panel-head{display:flex;align-items:center;justify-content:space-between}
.panel-head b{font-size:15px}
button{border:0;border-radius:8px;background:#2477a7;color:#fff;font-weight:600;padding:9px 12px;cursor:pointer}
#collapse{background:#34506a;padding:5px 12px;font-size:18px}
.buttons{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.switches{display:flex;gap:14px}
label{font-size:12px;display:inline-block;margin:6px 0}input{accent-color:#55c8ee}
#metrics{font-size:12px;color:#d3e7f5;margin:10px 0}
.note{font-size:10px;color:#b8cbd6}
.collapsed #controls{display:none}
#credit{position:absolute;bottom:2px;left:4px;color:white;background:#1021369c;padding:3px;font-size:9px}
@media(min-width:750px){aside{left:16px;right:auto;width:310px;bottom:25px}}

.gateway{margin:8px 0;display:grid;gap:5px}
.gateway label{margin:0}
.gateway input{box-sizing:border-box;width:100%;border:1px solid #56768a;border-radius:6px;padding:10px;background:#f4faff;color:#102136;font-size:12px}
.gateway button{justify-self:start}