:root{--bg: #171717;--panel: #262626;--panel-hi: #333;--fg: #fff;--fg-dim: #bbb;--accent: #f15b22;--accent-soft: rgba(241, 91, 34, .3);--danger-bg: rgba(100, 20, 20, .95);--danger-hi: rgba(140, 30, 30, .85)}*{box-sizing:border-box}html,body{margin:0;padding:0;width:100%;height:100%;background:var(--bg);color:var(--fg);font-family:Segoe UI,Tahoma,sans-serif;font-size:13px;overflow:hidden}.canvasWrapper,.canvasLayer{position:absolute;top:0;left:0;width:100%;height:100%}.panel{position:absolute;background:var(--panel);box-shadow:0 2px 6px #00000080;padding:6px;z-index:10}.panel-left{top:12px;left:12px;display:flex;flex-direction:column;gap:8px;width:88px}.tool-group{display:flex;flex-direction:column;gap:4px}.tool-group-label{margin:0;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--fg-dim)}.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3px}.panel-left button{background:var(--panel-hi);color:var(--fg);border:1px solid transparent;padding:8px;border-radius:3px;cursor:pointer;font-size:14px}.panel-left button.active,.panel-left button:hover{border-color:var(--accent)}.expand-flyout{position:fixed;background:var(--panel);box-shadow:0 2px 8px #0009;padding:4px;border-radius:4px;z-index:20}.expand-flyout.hidden{display:none}.expand-flyout.contract{background:var(--danger-bg)}.compass-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.compass-grid button{background:var(--panel-hi);color:var(--fg);border:1px solid transparent;padding:6px 8px;border-radius:3px;cursor:pointer;font-size:14px;min-width:30px}.expand-flyout.contract .compass-grid button{background:var(--danger-hi)}.compass-grid button:hover{border-color:var(--accent)}.panel-right{top:12px;right:12px;width:220px;max-height:calc(100% - 24px);overflow-y:auto}.panel-right header{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.panel-right h2{margin:0;font-size:14px;color:var(--fg-dim)}.panel-right select{background:var(--panel-hi);color:var(--fg);border:1px solid #555;padding:3px;border-radius:2px}.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.chips .chip{width:100%;padding-bottom:100%;border-radius:3px;border:2px solid transparent;cursor:pointer;position:relative}.chips .chip.active{border-color:var(--accent)}.chips .chip:after{content:attr(data-idx);position:absolute;top:2px;left:4px;font-size:10px;color:#00000080}#statusBar{position:absolute;bottom:0;left:0;right:0;height:24px;line-height:24px;padding:0 12px;background:#0006;color:var(--fg-dim);font-size:11px;z-index:5}#inventoryPanel{position:absolute;bottom:12px;right:12px;background:#000000a6;color:var(--fg);padding:8px 10px;border-radius:4px;font-size:12px;z-index:10;pointer-events:none;max-width:220px}#inventoryPanel.hidden{display:none}.inventory-vendor{font-weight:700;margin-top:6px;margin-bottom:2px;color:var(--fg-dim);font-size:11px;text-transform:uppercase;letter-spacing:.05em}.inventory-vendor:first-child{margin-top:0}.inventory-row{display:flex;align-items:center;gap:5px;margin-bottom:2px}.inventory-swatch{display:inline-block;width:8px;height:8px;border-radius:1px;flex-shrink:0}.inventory-empty{color:var(--fg-dim);font-style:italic}