:root{--bg:#0e1626;--bg2:#131e33;--card:#18253d;--line:#33445f;--tx:#eaf0f8;--mu:#8d9bb3;--ac:#5ccfc0;--ac2:#3a8f86;--red:#ee6a5f;--yel:#f2c14e;--r:14px}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.4 -apple-system,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
main{max-width:720px;margin:0 auto;padding:max(10px,env(safe-area-inset-top)) 14px calc(96px + env(safe-area-inset-bottom))}
h1{font-size:18px;font-weight:600;text-align:center;margin:10px 0 14px;letter-spacing:.2px}h2{font-size:17px;font-weight:600}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--bg2);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:5}
nav button{flex:1;min-height:56px;background:none;border:0;color:var(--mu);font-size:13px;font-weight:500;position:relative}
nav button.on{color:var(--ac);font-weight:700}nav button.on::before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--ac)}
.btn,button.btn,label.btn{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 16px;margin:8px 0;border-radius:var(--r);background:var(--ac);color:#08211e;font-size:17px;font-weight:600;border:0;width:100%;cursor:pointer}
.btn.sec{background:transparent;color:var(--ac);border:1.5px solid var(--ac)}
input,select{width:100%;min-height:52px;font-size:16px;padding:0 14px;margin:4px 0 10px;border-radius:var(--r);border:1px solid var(--line);background:var(--bg2);color:var(--tx)}
input::placeholder{color:var(--mu)}input:focus{outline:2px solid var(--ac);border-color:var(--ac)}
.view{display:none}.view.on{display:block}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:10px 0}
.stage{position:relative;background:#050a14;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}video,canvas.o,img.p{width:100%;display:block;max-height:60vh;object-fit:contain}
.guide{position:absolute;inset:0;pointer-events:none}.guide i{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1;transform:translate(-50%,-50%);border:2.5px dashed var(--ac);border-radius:50%;box-shadow:0 0 0 999px rgba(5,10,20,.45)}
.guide b{position:absolute;width:9%;aspect-ratio:1;border:3px solid var(--ac)}
table{width:100%;border-collapse:collapse}td,th{padding:10px 4px;border-bottom:1px solid var(--line);text-align:left;font-size:15px;font-variant-numeric:tabular-nums}th{color:var(--mu);font-weight:500;font-size:13px;text-transform:uppercase;letter-spacing:.5px}tr:last-child td{border:0}
.warn{background:#3a3220;border:1px solid var(--yel);color:#f7dd9b;border-radius:var(--r);padding:10px 12px;margin:8px 0}.err{background:#3b1c24;border:1px solid var(--red);border-radius:var(--r);padding:10px 12px}
.row{display:flex;gap:10px}.row>*{flex:1}.item{display:flex;align-items:center;gap:10px;min-height:52px}.item input{width:28px;min-height:28px;margin:0;accent-color:var(--ac)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.tile{border:1.5px solid var(--line);border-radius:var(--r);background:var(--bg2);padding:10px 4px;text-align:center;min-height:72px}
.tile.hl{border-color:var(--ac);background:#1d3a42}.tile small{display:block;color:var(--tx);font-size:13px;font-weight:600}
.tile b{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}.tile b i{font-style:normal;font-size:13px;color:var(--mu);font-weight:400;margin-left:1px}
canvas.h{width:100%;height:auto;background:var(--bg);border:1px solid var(--line);border-radius:var(--r)}
pre,code{white-space:pre-wrap;word-break:break-word}a{color:var(--ac)}ul{padding-left:20px}li{margin:6px 0}
#status{color:var(--mu);text-align:center;font-size:14px}
@media(min-width:900px){main{max-width:860px}}