html,body{height:100%;margin:0}body{background:var(--bg);color:var(--tx);font:13px/1.4 system-ui,sans-serif;display:flex;flex-direction:column}
header{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 10px;background:var(--pn);border-bottom:1px solid var(--bd)}
h1{font-size:14px;margin:0 10px 0 0}
button,.btn,select,input{font:inherit;color:var(--tx);background:var(--pn);border:1px solid var(--bd);border-radius:6px;padding:5px 9px;min-height:30px;box-sizing:border-box}
button,.btn{cursor:pointer}button:hover,.btn:hover{border-color:var(--ac)}button:focus-visible,.btn:focus-within,input:focus-visible,select:focus-visible{outline:2px solid var(--ac);outline-offset:1px}
.pri{background:var(--ac);color:#fff;border-color:var(--ac)}button:disabled{opacity:.45;cursor:default}#steps{display:flex;gap:4px;position:sticky;top:-8px;background:var(--pn);padding:6px 0;z-index:2}#steps button{flex:1;padding:4px 2px;font-size:11px;min-height:28px}#steps .on{background:var(--ac);color:#fff;border-color:var(--ac)}
main{flex:1;min-height:0;display:grid;grid-template-columns:1fr 330px;grid-template-rows:minmax(0,1fr)}#dlg{position:fixed;left:50%;top:25%;transform:translateX(-50%);width:min(480px,92vw);background:var(--pn);border:1px solid var(--bd);border-radius:8px;padding:16px;z-index:10;box-shadow:0 8px 30px rgba(0,0,0,.4)}#dlg[hidden]{display:none}
#vp{position:relative;background:var(--vp);min-height:0}#cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
#vt{position:absolute;top:8px;left:8px;display:flex;gap:4px;flex-wrap:wrap}
#st{position:absolute;left:0;right:0;bottom:0;padding:5px 10px;background:var(--pn);border-top:1px solid var(--bd);font-size:12px}
aside{overflow:auto;background:var(--pn);border-left:1px solid var(--bd);padding:8px 12px}
fieldset{border:0;border-top:1px solid var(--bd);margin:0;padding:8px 0}legend{font-weight:600;padding:0 6px 0 0}
label{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:4px 0}label input,label select{width:140px}input[type=color]{padding:1px;width:60px}input[type=checkbox]{width:auto;min-height:0}
.rep{white-space:pre-wrap;font:12px/1.4 ui-monospace,monospace;color:var(--mu);margin:4px 0}.ok{color:var(--ok)}.wn{color:var(--wn)}.er{color:var(--er)}
@media(max-width:800px){main{grid-template-columns:1fr;grid-template-rows:60vh auto;overflow:auto}aside{border-left:0}button,.btn,select,input{min-height:40px}}
.app-back{color:var(--ac);padding:8px;text-decoration:none;border:1px solid var(--bd);border-radius:6px;min-height:30px;box-sizing:border-box;display:inline-flex;align-items:center}.app-back:focus-visible{outline:2px solid var(--ac);outline-offset:2px}.beta-badge{display:inline-block;font-size:11px;padding:2px 7px;border:1px solid var(--bd);border-radius:4px;color:var(--mu);vertical-align:middle}header h1{flex:1;min-width:190px}@media(pointer:coarse){header button,header .btn,.app-back{min-height:44px}}