:root{--brand:#ff9d5c;--brand-light:#ffb77a;--brand-dark:#e07d3a;--bg:#0f0f13;--bg-card:#18181f;--bg-elevated:#20202b;--text:#e8e8ed;--text-muted:#88889a;--border:#2a2a35;--radius:10px;--font:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;height:100vh;line-height:1.5;overflow:hidden}.app{flex-direction:column;height:100vh;display:flex;overflow:hidden}.top-bar{background:var(--bg-card);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:12px;padding:8px 14px;display:flex}.logo{letter-spacing:-.02em;color:var(--text);white-space:nowrap;margin-right:4px;font-size:1.15rem;font-weight:700}.logo span{color:var(--brand)}.toolbar{flex:1;gap:2px;display:flex;overflow-x:auto}.tool-btn{color:var(--text-muted);cursor:pointer;font-size:.8rem;font-family:var(--font);white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:6px;align-items:center;gap:5px;padding:5px 10px;transition:all .15s;display:flex}.tool-btn:hover{background:var(--bg-elevated);color:var(--text)}.tool-btn.active{color:var(--brand);background:#ff9d5c1a;border-color:#ff9d5c40}.tool-swatch{border-radius:3px;flex-shrink:0;width:10px;height:10px}.tool-label{font-size:.78rem;font-weight:500}.top-actions{flex-shrink:0;align-items:center;gap:8px;display:flex}.cell-count{color:var(--text-muted);background:var(--bg-elevated);text-align:center;border-radius:5px;min-width:40px;padding:3px 10px;font-size:.78rem}.action-btn{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;font-size:.78rem;font-family:var(--font);border-radius:6px;padding:5px 14px;font-weight:500;transition:all .15s}.action-btn:hover{border-color:var(--brand);color:var(--text)}.action-btn.danger:hover{color:#f87171;border-color:#f87171}.main{flex:1;display:flex;overflow:hidden}.canvas-wrap{flex:1;position:relative;overflow:hidden}.canvas-wrap canvas{width:100%;height:100%;display:block}.coord-overlay{color:var(--text-muted);pointer-events:none;font-variant-numeric:tabular-nums;background:#0f0f13bf;border-radius:4px;padding:3px 8px;font-size:.72rem;position:absolute;bottom:8px;left:8px}.side-panel{background:var(--bg-card);border-left:1px solid var(--border);flex-direction:column;transition:width .2s;display:flex;position:relative;overflow:hidden}.side-panel.open{width:280px}.side-panel.collapsed{width:32px}.panel-toggle{background:var(--bg-elevated);border:1px solid var(--border);width:24px;height:24px;color:var(--text-muted);cursor:pointer;z-index:2;border-radius:4px;justify-content:center;align-items:center;font-size:.7rem;transition:color .15s;display:flex;position:absolute;top:8px;left:0}.panel-toggle:hover{color:var(--text);border-color:var(--brand)}.side-panel.collapsed .panel-toggle{top:8px;left:4px}.side-panel.open{padding-left:0}.side-panel.open .panel-toggle{top:8px;left:4px}.side-panel>.panel-toggle+*{margin-top:0}.panel-section{border-bottom:1px solid var(--border);overflow-y:auto}.panel-section:last-child{border-bottom:none;flex:1}.panel-section-header{justify-content:space-between;align-items:center;padding:14px 14px 10px 38px;display:flex}.panel-section-header h3{text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);font-size:.8rem;font-weight:600}.small-btn{color:var(--brand);cursor:pointer;font-size:.72rem;font-weight:500;font-family:var(--font);background:#ff9d5c14;border:1px solid #ff9d5c26;border-radius:4px;padding:3px 10px;transition:all .15s}.small-btn:hover{background:#ff9d5c26}.layer-list{padding:0 10px 10px}.layer-item{background:var(--bg);border:1px solid var(--border);border-radius:7px;margin-bottom:6px;overflow:hidden}.layer-head{align-items:center;gap:6px;padding:7px 8px;display:flex}.layer-name{flex:1;font-size:.8rem;font-weight:500}.vis-btn{cursor:pointer;background:0 0;border:none;border-radius:3px;padding:2px 4px;font-size:.7rem;line-height:1;transition:background .15s}.vis-btn:hover{background:var(--bg-elevated)}.vis-btn.off{opacity:.3}.vis-btn.small{padding:1px 3px;font-size:.6rem}.del-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:3px;padding:2px 5px;font-size:.65rem;line-height:1;transition:all .15s}.del-btn:hover{color:#f87171;background:#f871711a}.del-btn.small{padding:1px 3px;font-size:.55rem}.zone-list{border-top:1px solid var(--border);padding:3px 6px 6px 8px}.zone-item{cursor:pointer;border-radius:4px;align-items:center;gap:5px;padding:4px 5px;font-size:.76rem;transition:background .12s;display:flex}.zone-item:hover{background:var(--bg-elevated)}.zone-item.active{background:#ff9d5c12;outline:1px solid #ff9d5c33}.zone-color{border-radius:3px;flex-shrink:0;width:8px;height:8px}.zone-name{text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:.76rem;font-weight:500;overflow:hidden}.zone-name.muted{opacity:.4}.zone-type-label{color:var(--text-muted);white-space:nowrap;margin-right:auto;font-size:.65rem}.add-zone-row{gap:3px;margin-top:5px;padding:2px 0;display:flex}.add-zone-btn{border:1px dashed var(--border);cursor:pointer;background:0 0;border-radius:4px;padding:3px 5px;line-height:1;transition:all .15s}.add-zone-btn:hover{border-color:var(--brand);background:#ff9d5c0d}.add-zone-btn .zone-color{display:block}.prop-list{padding:0 14px 14px 38px}.prop-row{align-items:center;gap:8px;margin-bottom:6px;font-size:.78rem;display:flex}.prop-key{width:52px;color:var(--text-muted);flex-shrink:0}.prop-val{color:var(--text)}.prop-val-cap{color:var(--text);text-transform:capitalize}.prop-row select{background:var(--bg);border:1px solid var(--border);color:var(--text);font-size:.76rem;font-family:var(--font);cursor:pointer;border-radius:4px;flex:1;padding:3px 6px}.prop-row select:focus{border-color:var(--brand);outline:none}.prop-empty{color:var(--text-muted);padding:8px 0;font-size:.76rem}.status-bar{background:var(--bg-card);border-top:1px solid var(--border);color:var(--text-muted);flex-shrink:0;align-items:center;gap:16px;padding:5px 14px;font-size:.72rem;display:flex}.status-msg{color:var(--brand);margin-left:auto}.modal-overlay{z-index:100;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);width:90%;max-width:400px;padding:28px}.modal h3{margin-bottom:10px;font-size:1.1rem;font-weight:600}.modal p{color:var(--text-muted);margin-bottom:20px;font-size:.88rem}.modal-actions{justify-content:flex-end;gap:10px;display:flex}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@media (max-width:768px){.tool-label{display:none}.side-panel.open{width:220px}.top-actions .action-btn{padding:5px 10px;font-size:.72rem}}