*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}body{margin:0;font-family:-apple-system,system-ui,"PingFang SC",sans-serif;background:#f2f2f7;color:#111;height:100vh;overflow:hidden}
.hidden{display:none!important}
.screen{height:100vh;padding:20px;display:flex;flex-direction:column;gap:14px;align-items:center;overflow:auto}
h1{color:#123867;margin:10px 0}
.card{background:#fff;border-radius:16px;padding:16px;width:min(560px,100%);display:grid;gap:12px}
label{display:grid;gap:6px;font-size:15px;color:#555}
input{font-size:20px;padding:12px;border:1px solid #ddd;border-radius:10px}
.logo input{font-size:14px;border:0;padding:0}
button,.link{border:0;border-radius:14px;font-size:18px;font-weight:600;padding:14px;background:#fff;color:#123867;text-align:center;text-decoration:none}
button:disabled{opacity:.4}
.big{font-size:24px;padding:20px;width:min(560px,100%)}
.navy{background:#123867;color:#fff}.red{background:#c8000b;color:#fff}.yellow{background:#fdd100;color:#123867}
.hint{color:#666;font-size:14px;text-align:center;margin:0}.err{color:#c8000b}
#rec{flex-direction:row;padding:8px;gap:8px;background:#000}
#cv{flex:1;min-width:0;max-height:100%;object-fit:contain;background:#000}
.side{width:240px;display:flex;flex-direction:column;gap:8px}
.side .big{width:100%;flex:1;font-size:30px}.side span{font-size:15px;display:block;font-weight:500}
.row{display:flex;gap:6px}.row button{flex:1;padding:12px 4px}
.status{color:#fff;text-align:center;font-size:16px}#st.on{color:#ff453a}
.small{font-size:14px;padding:8px;background:#333;color:#ccc}
#pv{width:min(720px,100%);max-height:50vh;background:#000;border-radius:12px}
@media (orientation:portrait){#rec{flex-direction:column}.side{width:100%;flex-direction:row;flex-wrap:wrap}.side>*{flex:1 1 45%}}

.seg{display:flex;gap:6px;background:#eee;border-radius:12px;padding:4px}.segb{flex:1;background:transparent;padding:10px}.segb.on{background:#123867;color:#fff}
.tline{display:flex;gap:10px;align-items:center}.tline input{flex:1;min-width:0}
.lg{width:44px;height:44px;flex:none;border-radius:50%;background:#123867 center/contain no-repeat;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.lg.img{background-color:transparent}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;max-height:34vh;overflow:auto}
.tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;font-size:13px;font-weight:500;color:#111;border:2px solid transparent;background:#f6f6f9}
.tile.on{border-color:#c8000b}.tile .lg{width:48px;height:48px}
#setup .card{width:min(720px,100%)}

#rec{position:fixed;inset:0;height:100dvh;padding:0;display:block;background:#000}
#cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-height:none}
#rec .side{position:absolute;z-index:2;display:flex;gap:8px;top:calc(env(safe-area-inset-top) + 8px);bottom:calc(env(safe-area-inset-bottom) + 8px);right:calc(env(safe-area-inset-right) + 8px);width:200px;flex-direction:column}
#rec .side>*{opacity:.92}.status{background:rgba(0,0,0,.45);border-radius:10px;padding:4px}
.a2hs{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 10px);background:rgba(255,255,255,.95);color:#123867;border-radius:12px;padding:8px 8px 8px 14px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;white-space:nowrap}
.a2hs button{padding:4px 10px;background:#eee}
@media (orientation:portrait){#rec .side{top:auto;left:calc(env(safe-area-inset-left) + 8px);right:calc(env(safe-area-inset-right) + 8px);width:auto;height:auto;flex-direction:row;flex-wrap:wrap;bottom:calc(env(safe-area-inset-bottom) + 8px)}
 #rec .side>*{flex:1 1 45%}#rec .side .big{flex:1 1 45%;font-size:28px;padding:16px}#rec .side .row,#rec .side .status{flex:1 1 100%}.a2hs{bottom:auto;top:calc(env(safe-area-inset-top) + 150px)}}
@media (orientation:landscape) and (max-height:500px){#rec .side{gap:5px;width:190px}#rec .side .big{font-size:24px;padding:6px}#rec .side .mid{padding:8px}.small{padding:5px}}
/* v5 setup fit-one-screen */
#setup{height:100dvh;overflow:hidden;gap:8px;padding:calc(env(safe-area-inset-top) + 6px) calc(env(safe-area-inset-right) + 12px) calc(env(safe-area-inset-bottom) + 6px) calc(env(safe-area-inset-left) + 12px)}
#setup h1{margin:0;font-size:22px;flex:none}
#setup .card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px;padding:10px;overflow:hidden}
#setup .card>*{flex:none}
#setup label{gap:3px;font-size:13px}
#setup input{font-size:17px;padding:8px}#setup .logo input{font-size:12px;padding:0}
#setup .lg{width:36px;height:36px}
#setup .segb{padding:8px}
#setup .grid{flex:1 1 auto;min-height:60px;max-height:none;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px;align-content:start}
#setup .tile{padding:5px 2px;font-size:12px}#setup .tile .lg{width:38px;height:38px}
#setup .big{flex:none;padding:14px;font-size:22px}
#setup .hint{flex:none;font-size:12px}#setup .err{margin:0;flex:none}
#setup .err:empty{display:none}
#chg{flex:none;padding:10px;font-size:16px;background:#eef1f7}
#setup .grid:has(.tile:only-child){flex:none;min-height:0}
#setup{position:relative}.ver{position:absolute;top:calc(env(safe-area-inset-top) + 8px);right:calc(env(safe-area-inset-right) + 12px);font-size:11px;color:#aaa}
#chg{width:100%;padding:16px;font-size:20px;font-weight:700;background:#c8000b;color:#fff;border-radius:12px}