:root{color-scheme:dark;--canvas: #16181d;--panel: #1b1e24;--raised: #24272e;--border: #2b2f36;--ink: #e9ecef;--muted: #7d8590;--accent: #4dabf7;--accent-bg: #1c3a5e;--danger: #ff6b6b;--radius: 8px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}html,body,#app{margin:0;height:100%;overflow:hidden}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}.layout{display:flex;height:100%}.sidebar{width:240px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}.sidebar-header h1{font-size:16px;margin:0}.canvas-list{flex:1;overflow-y:auto;padding:8px}.canvas-item{display:flex;align-items:center;width:100%;padding:8px 10px;border-radius:var(--radius);text-align:left;gap:6px}.canvas-item:hover{background:var(--raised)}.canvas-item.active{background:var(--accent-bg);color:var(--accent)}.canvas-item .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.canvas-item .delete{color:var(--muted);visibility:hidden;padding:0 2px}.canvas-item:hover .delete{visibility:visible}.canvas-item .delete:hover{color:var(--danger)}.empty-list{padding:24px 16px;color:var(--muted);font-size:14px;text-align:center}.main{flex:1;position:relative;display:flex;flex-direction:column;min-width:0}.toolbar{display:flex;align-items:center;gap:16px;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--panel)}.toolbar .title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toolbar .spacer{flex:1}.tool-group{display:flex;align-items:center;gap:6px}.swatch{width:22px;height:22px;border-radius:50%;border:2px solid transparent;padding:0}.swatch.active{border-color:var(--accent)}.size-btn{width:28px;height:28px;display:grid;place-items:center;border-radius:var(--radius)}.size-btn:hover{background:var(--raised)}.size-btn.active{background:var(--accent-bg)}.size-dot{border-radius:50%;background:var(--ink)}.tool-btn{padding:6px 10px;border-radius:var(--radius)}.tool-btn:hover{background:var(--raised)}.tool-btn:disabled{color:var(--muted);cursor:default;background:none}.menu-wrap{position:relative}.menu-backdrop{position:fixed;inset:0;z-index:5}.menu{position:absolute;top:calc(100% + 6px);right:0;z-index:6;min-width:180px;padding:4px;background:var(--raised);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px #0006;display:flex;flex-direction:column}.menu-item{padding:8px 10px;border-radius:6px;text-align:left;white-space:nowrap}.menu-item:hover{background:var(--accent-bg);color:var(--accent)}.save-status{font-size:13px;color:var(--muted);min-width:70px;text-align:right}.board-wrap{flex:1;position:relative;background:var(--canvas)}.board-wrap canvas{position:absolute;inset:0;touch-action:none;cursor:crosshair}.welcome{flex:1;display:grid;place-items:center;color:var(--muted)}.btn-primary{background:var(--accent);color:#0d1117;font-weight:600;padding:6px 12px;border-radius:var(--radius)}.btn-primary:hover{background:#74c0fc}