*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #1a1a2e;--surface: #16213e;--surface-hover: #1a2744;--border: #2a3a5c;--text: #e0e0e0;--text-dim: #8892a4;--accent: #3b82f6;--accent-hover: #2563eb;--element-fill: rgba(59, 130, 246, .15);--element-stroke: rgba(59, 130, 246, .7);--element-selected: rgba(59, 130, 246, .35);--guide: rgba(255, 50, 50, .6);--font: "SF Mono", "Cascadia Code", "Fira Code", monospace}html,body,#root{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none}.app{display:flex;flex-direction:column;height:100%}.sidebar{width:220px;min-width:220px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto}.game-group{border-bottom:1px solid var(--border)}.game-label{padding:10px 16px;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim);cursor:pointer}.game-label:hover{color:var(--text)}.screen-item{padding:7px 16px 7px 28px;cursor:pointer;color:var(--text-dim);font-size:12px}.screen-item:hover{background:var(--surface-hover);color:var(--text)}.screen-item.active{background:#3b82f61f;color:var(--accent)}.canvas-toolbar{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--border);font-size:12px;color:var(--text-dim)}.toolbar-logo{font-size:14px;font-weight:600;color:var(--accent);letter-spacing:.5px}.canvas-toolbar button{background:var(--surface-hover);border:1px solid var(--border);color:var(--text);padding:4px 12px;border-radius:4px;cursor:pointer;font-family:var(--font);font-size:12px}.canvas-toolbar button:hover{background:var(--accent);border-color:var(--accent)}.canvas-content{flex:1;display:flex;overflow:hidden}.canvas-container{flex:1;overflow:auto;display:flex;padding:24px}.canvas-wrapper{position:relative;margin:auto;flex-shrink:0;background:#000;box-shadow:0 4px 24px #00000080}.canvas-wrapper canvas{display:block}.properties{width:240px;min-width:240px;flex-shrink:0;background:var(--surface);border-left:1px solid var(--border);overflow-y:auto;padding:12px}.properties-header{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim);margin-bottom:16px}.prop-group{margin-bottom:16px}.prop-label{font-size:11px;color:var(--text-dim);margin-bottom:4px}.prop-row{display:flex;gap:8px;margin-bottom:8px}.prop-field{flex:1;display:flex;flex-direction:column;gap:2px}.prop-field input,.prop-field select{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:4px 8px;border-radius:3px;font-family:var(--font);font-size:12px;width:100%}.prop-field input:focus,.prop-field select:focus{outline:none;border-color:var(--accent)}.prop-field label{font-size:10px;color:var(--text-dim)}.element-type-badge{display:inline-block;font-size:10px;padding:2px 6px;border-radius:3px;background:#3b82f633;color:var(--accent);margin-bottom:12px}.no-selection{color:var(--text-dim);font-size:12px;text-align:center;padding-top:40px}.element-list{border-top:1px solid var(--border);padding-top:8px}.element-list-header{padding:8px 16px;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim)}.element-item{padding:5px 16px 5px 28px;cursor:pointer;color:var(--text-dim);font-size:12px;display:flex;align-items:center;gap:6px}.element-item:hover{background:var(--surface-hover);color:var(--text)}.element-item.selected{background:#3b82f61f;color:var(--accent)}.element-type-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}.context-backdrop{position:fixed;inset:0;z-index:1000}.context-menu{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:4px 0;min-width:160px;box-shadow:0 8px 24px #00000080;z-index:1001}.context-menu button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text);padding:6px 14px;font-family:var(--font);font-size:12px;cursor:pointer}.context-menu button:hover{background:var(--accent);color:#fff}.dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:20px;min-width:320px;box-shadow:0 12px 40px #0009;z-index:1001}.dialog-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:8px}.dialog-body{font-size:12px;color:var(--text-dim);margin-bottom:16px}.dialog-actions{display:flex;gap:8px;justify-content:flex-end}.dialog-actions button{background:var(--surface-hover);border:1px solid var(--border);color:var(--text);padding:6px 14px;border-radius:4px;cursor:pointer;font-family:var(--font);font-size:12px}.dialog-actions button:hover{background:var(--border)}.dialog-actions .dialog-primary{background:var(--accent);border-color:var(--accent);color:#fff}.dialog-actions .dialog-primary:hover{background:var(--accent-hover)}