:root{--bg:#e9eceb;--panel:#f7f8f8;--line:#c9cfce;--ink:#1f2a2a;--muted:#66716f;--teal:#0b6e6e;--teal-soft:#0b6e6e22;--amber:#d9820b;--wall:#101418}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);background:var(--bg);margin:0;font:13px/1.4 Segoe UI,system-ui,sans-serif}#app{grid-template-rows:44px 32px 1fr 26px;grid-template-columns:1fr 280px;height:100%;display:grid}#sheetbar{border-bottom:1px solid var(--line);background:#e1e5e4;grid-column:1/3;align-items:center;gap:6px;padding:0 10px;font-size:12px;display:flex}#sheetbar .tab{border:1px solid var(--line);cursor:pointer;-webkit-user-select:none;user-select:none;background:#fff;border-radius:4px 4px 0 0;padding:3px 10px}#sheetbar .tab.active{background:var(--teal);color:#fff;border-color:var(--teal)}#sheetbar .tab.level{background:#f7f8f8;border-radius:4px}#sheetbar .tab.level.active{color:#fff;background:#0b6e6e}#sheetbar .lbl{color:var(--muted);margin-left:8px}#sheetbar select,#sheetbar button{padding:3px 8px;font-size:12px}header{background:var(--panel);border-bottom:1px solid var(--line);grid-column:1/3;align-items:center;gap:6px;padding:0 10px;display:flex}header .title{margin-right:14px;font-weight:600}header .sep{background:var(--line);width:1px;height:24px;margin:0 6px}button,label.btn{border:1px solid var(--line);color:var(--ink);cursor:pointer;font:inherit;background:#fff;border-radius:4px;padding:5px 10px}button:hover,label.btn:hover{border-color:#9aa3a1}button.tool.active{background:var(--teal);color:#fff;border-color:var(--teal)}button:focus-visible,input:focus-visible{outline:2px solid var(--amber);outline-offset:1px}button kbd{opacity:.55;margin-left:4px;font:11px monospace}input[type=file]{display:none}#stage{background:#3a3f42;position:relative;overflow:hidden}canvas{cursor:crosshair;display:block}canvas.pan{cursor:grab}canvas.select{cursor:default}aside{background:var(--panel);border-left:1px solid var(--line);padding:12px;overflow:auto}aside h2{color:var(--muted);margin:14px 0 6px;font-size:12px;font-weight:600}aside h2:first-child{margin-top:0}.row{align-items:center;gap:8px;margin:5px 0;display:flex}.row label{color:var(--muted);flex:1}.row input[type=number],.row input[type=text]{border:1px solid var(--line);width:90px;font:inherit;border-radius:3px;padding:4px 6px}.row input[type=range]{width:110px}#zones{margin:0;padding:0;list-style:none}#zones li{border:1px solid #0000;border-radius:4px;align-items:center;gap:6px;padding:5px 6px;display:flex}#zones li.sel{background:var(--teal-soft);border-color:var(--teal)}#zones li input{border:1px solid var(--line);min-width:0;font:inherit;border-radius:3px;flex:1;padding:3px 5px}#zones li select{padding:2px;font-size:11px}#zones li button{padding:2px 6px}#zones .empty{color:var(--muted);padding:6px}#labelEdit{border:1px solid var(--amber);resize:none;text-align:center;white-space:pre;background:#fff;border-radius:3px;min-width:80px;padding:2px 4px;font:13px/1.2 Arial,sans-serif;display:none;position:absolute;overflow:hidden}footer{background:var(--panel);border-top:1px solid var(--line);color:var(--muted);grid-column:1/3;align-items:center;gap:18px;padding:0 10px;font-size:12px;display:flex}footer .hint{flex:1}.toggle{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;display:flex}.toggle input{accent-color:var(--teal)}#exportBtn{background:var(--teal);color:#fff;border-color:var(--teal);width:100%;padding:8px;font-weight:600}
