:root{--bg-darkest: #0a0f13;--bg-main: #101920;--bg-surface: #15222b;--bg-card: #1b2c37;--bg-card-hover: #223744;--bg-active: #284252;--border: #283944;--border-light: #3a5160;--accent: #2ba882;--accent-hover: #34c498;--brass: #d4a359;--brass-light: #f5c77e;--danger: #e05260;--danger-hover: #f06a77;--text-main: #e2edf0;--text-muted: #8b9ea8;--text-dim: #5c707a;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-darkest);color:var(--text-main);font-family:var(--font-family);font-size:13px;line-height:1.4;height:100vh;overflow:hidden;-webkit-user-select:none;user-select:none}header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 20px;background:var(--bg-surface);border-bottom:1px solid var(--border);height:56px;z-index:10}.brand{display:flex;align-items:center;gap:12px}.brand-badge{background:#0f161b;color:var(--brass);font-size:10px;font-weight:700;letter-spacing:1.5px;padding:4px 8px;border-radius:4px;border:1px solid #4a3c22}h1{font-size:17px;font-weight:600;color:#fff;letter-spacing:.5px}.header-center{display:flex;align-items:center;gap:10px}.zone-selector{display:flex;align-items:center;gap:8px}.zone-selector label{color:var(--text-muted);font-size:12px;font-weight:500}.header-actions{display:flex;align-items:center;gap:8px}button,.btn,select,input{font:inherit}button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--bg-card);color:var(--text-main);border:1px solid var(--border-light);border-radius:5px;padding:6px 12px;font-size:12px;font-weight:500;cursor:pointer;transition:all .15s ease;white-space:nowrap}button:hover:not(:disabled),.btn:hover:not(:disabled){background:var(--bg-card-hover);border-color:#4a687a;color:#fff}button:active:not(:disabled),.btn:active:not(:disabled){transform:translateY(1px)}button:disabled,.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:#1b634e;border-color:#2ba882;color:#fff}.btn-primary:hover:not(:disabled){background:#237d63;border-color:#38c89c}.btn-success{background:#256636;border-color:#389e53;color:#fff}.btn-success:hover:not(:disabled){background:#2e7d43}.btn-brass{background:#473618;border-color:#8c6d32;color:var(--brass-light)}.btn-brass:hover:not(:disabled){background:#5a451e;border-color:#b58d41}.btn-danger{background:#4c1d23;border-color:#7d2a34;color:#ffadb6}.btn-danger:hover:not(:disabled){background:#61242c;border-color:#9e3541;color:#fff}.btn-sm{padding:4px 8px;font-size:11px}.btn-icon{padding:6px 9px}select{background:var(--bg-card);color:var(--text-main);border:1px solid var(--border-light);border-radius:5px;padding:6px 10px;font-size:12px;cursor:pointer;outline:none}select:focus,input:focus{border-color:var(--accent)}input[type=number],input[type=text]{background:#0d151c;color:#fff;border:1px solid var(--border-light);border-radius:4px;padding:5px 8px;font-size:12px;outline:none}input[type=number]{width:64px}main{display:grid;grid-template-columns:320px 1fr;height:calc(100vh - 56px);overflow:hidden}aside{background:var(--bg-main);border-right:1px solid var(--border);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:16px;padding:14px}aside::-webkit-scrollbar{width:6px}aside::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}aside::-webkit-scrollbar-thumb:hover{background:var(--border-light)}.sidebar-section{background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;padding:12px;display:flex;flex-direction:column;gap:10px}.section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--brass-light);display:flex;align-items:center;justify-content:space-between}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.tool-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 4px;background:var(--bg-card);border:1px solid var(--border);border-radius:5px;color:var(--text-muted);font-size:11px;font-weight:500;cursor:pointer;transition:all .12s ease;position:relative}.tool-btn:hover{background:var(--bg-card-hover);color:var(--text-main);border-color:var(--border-light)}.tool-btn.active{background:var(--bg-active);color:#fff;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.tool-icon{font-size:15px}.tool-key{position:absolute;top:2px;right:4px;font-size:9px;color:var(--text-dim);font-weight:600}.tool-btn.active .tool-key{color:var(--brass-light)}.brush-sizes{display:flex;align-items:center;gap:6px}.size-btn{flex:1;padding:4px 0;font-size:11px;border-radius:4px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted)}.size-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.palette-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}.tile-btn{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--bg-card);border:1px solid var(--border);border-radius:4px;color:var(--text-main);font-size:11px;cursor:pointer;text-align:left}.tile-btn:hover{background:var(--bg-card-hover);border-color:var(--border-light)}.tile-btn.active{background:#1f3747;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);font-weight:600}.tile-swatch{width:14px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.2);flex-shrink:0}.tile-solid-badge{font-size:9px;color:var(--text-dim);margin-left:auto}.monster-card{display:flex;flex-direction:column;gap:8px}.monster-stats{font-size:11px;color:var(--text-muted);background:#00000040;padding:8px;border-radius:4px;line-height:1.5}.prop-tabs{display:flex;gap:4px;margin-bottom:6px}.prop-tab-btn{flex:1;padding:5px;font-size:11px;background:var(--bg-card);border:1px solid var(--border);border-radius:4px;color:var(--text-muted)}.prop-tab-btn.active{background:var(--bg-active);color:#fff;border-color:var(--accent)}.presets-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;max-height:200px;overflow-y:auto;padding:2px}.preset-card{display:flex;flex-direction:column;align-items:center;padding:8px 4px;background:var(--bg-card);border:1px solid var(--border);border-radius:5px;cursor:pointer;text-align:center;gap:4px;transition:all .12s ease}.preset-card:hover{background:var(--bg-card-hover);border-color:var(--border-light)}.preset-card.active{background:#1e3544;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.preset-thumb{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}.preset-name{font-size:10px;font-weight:500;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.preset-meta{font-size:9px;color:var(--text-dim)}.inspector-body{display:flex;flex-direction:column;gap:8px}.prop-preview-row{display:flex;align-items:center;gap:10px;background:#0003;padding:6px;border-radius:4px}.prop-preview-row img{width:40px;height:40px;object-fit:contain;image-rendering:pixelated;border:1px solid var(--border);background:#090e12;border-radius:4px}.form-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.form-row label{color:var(--text-muted);font-size:11px}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;color:var(--text-main)}.checkbox-label input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px;cursor:pointer}.overlay-toggles{display:grid;grid-template-columns:1fr;gap:6px}.workspace{display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden;background:var(--bg-darkest)}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;background:#101920e6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:5}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:10px}.zoom-controls{display:flex;align-items:center;gap:6px}.zoom-slider{width:80px;accent-color:var(--accent);cursor:pointer}.status-badge{font-size:11px;color:var(--text-muted);display:inline-flex;align-items:center;gap:6px}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}.status-dot.dirty{background:var(--brass-light)}.canvas-viewport{flex:1;overflow:auto;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 50%,#15222b,#0a0f13),repeating-linear-gradient(45deg,#0e151b 0,#0e151b 10px,#101820 10px,#101820 20px);cursor:crosshair}.canvas-viewport.panning{cursor:grab}.canvas-viewport.panning:active{cursor:grabbing}#map{image-rendering:pixelated;touch-action:none;box-shadow:0 10px 40px #000000b3;display:block}.hud-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;background:#101920f2;border-top:1px solid var(--border);font-size:11px;color:var(--text-muted);z-index:5}.hud-info{display:flex;align-items:center;gap:16px}.hud-item{display:flex;align-items:center;gap:5px}.hud-item strong{color:var(--text-main);font-weight:500}.toast-container{position:fixed;bottom:40px;right:24px;z-index:100;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{background:#1b2c37;color:#fff;border:1px solid var(--border-light);border-left:4px solid var(--accent);padding:10px 14px;border-radius:4px;font-size:12px;box-shadow:0 4px 16px #00000080;animation:toastIn .2s ease forwards;pointer-events:auto}.toast.warn{border-left-color:var(--brass)}.toast.error{border-left-color:var(--danger)}@keyframes toastIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center}.modal-content{background:var(--bg-surface);border:1px solid var(--border-light);border-radius:8px;width:90%;max-width:540px;max-height:85vh;overflow-y:auto;box-shadow:0 20px 50px #000c;display:flex;flex-direction:column}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}.modal-header h2{font-size:16px;color:#fff}.modal-body{padding:18px;display:flex;flex-direction:column;gap:16px;font-size:12px;line-height:1.6;color:var(--text-muted)}.shortcut-table{width:100%;border-collapse:collapse}.shortcut-table td{padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05)}.shortcut-table td:first-child{width:120px}kbd{background:var(--bg-card);border:1px solid var(--border-light);border-radius:3px;padding:2px 6px;font-size:11px;color:var(--brass-light);font-family:inherit}@media(max-width:1024px){main{grid-template-columns:280px 1fr}}@media(max-width:768px){header{height:auto;flex-wrap:wrap;padding:10px}main{grid-template-columns:1fr;height:auto}aside{max-height:50vh}.canvas-viewport{height:50vh}}