*{box-sizing:border-box}html,body{margin:0;font-family:system-ui,sans-serif;background:#111;color:#fff}
header{background:#00695c;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:8px 12px}h1{margin:0;font-size:1.5rem}
.hbtn{font-size:1.1rem;font-weight:700;padding:10px 14px;border-radius:14px;border:2px solid #fff;background:transparent;color:#fff;min-height:48px}
#app{display:flex;flex-direction:column}
#stageWrap{position:sticky;top:0;z-index:2;background:#111}
#stage{position:relative;width:100%;aspect-ratio:4/3;max-height:62vh;background:#000;overflow:hidden;touch-action:none}
#stage video,#stage #frozen{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:50% 50%}
#overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#overlay.active{pointer-events:auto}
#startBox{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:20px;background:#000}
#startBox[hidden]{display:none}
#badge{position:absolute;top:8px;left:8px;background:#d32f2f;color:#fff;font-weight:800;font-size:1.3rem;padding:6px 14px;border-radius:12px}
.status{margin:0;padding:4px 10px;min-height:1.6em;font-size:1.1rem;color:#80cbc4;text-align:center}
#controls{padding:12px;display:flex;flex-direction:column;gap:12px}
.card{border:2px solid #37474f;border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:10px;background:#1b1f22}
.card h2{margin:0;font-size:1.3rem}.card small{color:#b0bec5;font-weight:400;font-size:1rem}
.big{font-size:1.35rem;font-weight:700;padding:14px;border-radius:16px;border:3px solid #26a69a;background:#1b1f22;color:#e0f2f1;width:100%;min-height:64px;touch-action:manipulation}
.big.primary{background:#00897b;border-color:#00897b;color:#fff}.big.on{background:#ffd600;border-color:#f9a825;color:#111}
.big.danger{border-color:#e57373;color:#ffcdd2}.big:active{filter:brightness(1.3)}
.row,.row3,.row4{display:grid;gap:10px}.row{grid-template-columns:1fr 1fr}.row3{grid-template-columns:1fr 1fr 1fr}.row4{grid-template-columns:repeat(4,1fr)}
.row:has(> [hidden]){grid-template-columns:1fr}
.zb.sel{background:#ffd600;color:#111;border-color:#f9a825}
input[type=range]{width:100%;height:44px;accent-color:#26a69a}
label{display:flex;flex-direction:column;font-size:1.15rem;font-weight:600;gap:2px}
select,input[type=number]{font-size:1.3rem;padding:12px;border-radius:12px;border:2px solid #90a4ae;width:100%;background:#fff;color:#111}
select option.ext{font-weight:700}select.ext{border-color:#ffd600;box-shadow:0 0 0 3px rgba(255,214,0,.4)}
.note{margin:0;font-size:1rem;color:#b0bec5}.foot{text-align:center;color:#90a4ae}.foot a{color:#80cbc4}
.msg{font-size:1.3rem;text-align:center;margin:0}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:8;background:#1b1f22;border-top:3px solid #26a69a;padding:12px;display:flex;flex-direction:column;gap:10px}
.sheet[hidden],.full[hidden]{display:none}
.full{position:fixed;inset:0;z-index:9;background:#000;display:flex;flex-direction:column;gap:12px;padding:12px;overflow:auto}
.ghead{display:flex;align-items:center;gap:12px}.ghead h2{flex:1;margin:0}.ghead .big{width:auto}
#galList{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
#galList img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:2px solid #37474f}
#viewImg{max-width:100%;max-height:75vh;object-fit:contain;margin:auto}
@media (orientation:landscape) and (min-width:700px){
 #app{flex-direction:row;height:calc(100vh - 64px)}
 #stageWrap{flex:1.6;position:static;display:flex;flex-direction:column;justify-content:center}
 #stage{max-height:calc(100vh - 100px);height:100%;aspect-ratio:auto}
 #controls{flex:1;overflow-y:auto;max-width:440px}
 .sheet{left:auto;width:440px}
}
body.hands #controls .card:not(.keep){opacity:.9}
.hb{display:flex;gap:8px}.help{text-decoration:none;display:flex;align-items:center;font-size:1.3rem;background:#ffd600;color:#111;border-color:#ffd600}
.linkbtn{display:block;text-align:center;text-decoration:none;box-sizing:border-box}.welcome{font-size:1.8rem;text-align:center;color:#80cbc4}
#firstRun{justify-content:center;max-width:600px;margin:auto}.note a{color:#ffd600;font-weight:700}

.camList{margin-top:10px;display:flex;flex-direction:column;gap:8px;text-align:left}
.camList .camPick{width:100%;text-align:left;font-size:1.1rem;padding:14px}
.camList .camPick.on{outline:3px solid #ffd400}