*{box-sizing:border-box}html,body{margin:0;height:100%;background:#111315;color:#cfd3d8;font:12px system-ui,sans-serif;overflow:hidden}
body{display:grid;grid-template-columns:220px 1fr 270px;grid-template-rows:38px 1fr 110px;grid-template-areas:"t t t" "l v r" "b b b"}
#top{grid-area:t;display:flex;gap:14px;align-items:center;padding:0 10px;background:#181b1f;border-bottom:1px solid #2a2e34;overflow-x:auto}
.logo{letter-spacing:3px;color:#d8483a}.grp{display:flex;gap:3px}
button,select,input{background:#22262b;color:#cfd3d8;border:1px solid #333840;border-radius:3px;padding:4px 8px;font:inherit}
button:hover{background:#2d3238}button.on{background:#7a2a22;border-color:#d8483a}
#left,#right{background:#181b1f;overflow:auto;padding:8px}#left{grid-area:l;border-right:1px solid #2a2e34}#right{grid-area:r;border-left:1px solid #2a2e34}
h3{margin:0 0 6px;font-size:11px;text-transform:uppercase;color:#868c95}
#search{width:100%;margin-bottom:6px}#tree{list-style:none;margin:0;padding:0}
#tree li{display:flex;gap:4px;padding:3px 4px;cursor:pointer;border-radius:3px}#tree li.sel{background:#7a2a22}#tree li span{flex:1;overflow:hidden;text-overflow:ellipsis}
#tree li.empty{color:#666;cursor:default}
#view{grid-area:v;position:relative;min-width:0;min-height:0}#c{width:100%;height:100%;display:block}
#hud{position:absolute;left:8px;bottom:6px;color:#8a919a;pointer-events:none}
#bottom{grid-area:b;background:#14161a;border-top:1px solid #2a2e34;overflow:auto;padding:6px;font:11px monospace}
.row{display:flex;gap:4px;align-items:center;margin:4px 0}.row label{width:70px;color:#868c95}.row input[type=number],.row input[type=text]{flex:1;min-width:0;width:0}
.row input[type=color]{padding:0;height:22px;width:40px;flex:none}.sec{margin:10px 0 2px;color:#d8483a;font-weight:600}
#loading{position:fixed;inset:0;background:#111315;display:flex;align-items:center;justify-content:center;z-index:9;font-size:14px}