*{box-sizing:border-box;margin:0;padding:0}:root{--bg-color:#f8f9fa;--text-color:#212529;--text-muted:#868e96;--panel-bg:#ffffffe0;--panel-border:#00000014;--panel-shadow:0 4px 20px -2px #00000014, 0 2px 6px -1px #0000000a;--accent-color:#6965db;--accent-hover:#5853d4;--accent-light:#ecebfa;--hover-bg:#0000000d;--active-bg:#6965db1f;--danger-color:#fa5252;--danger-bg:#fff5f5;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}[data-theme=dark]{--bg-color:#121212;--text-color:#e9ecef;--text-muted:#909296;--panel-bg:#1e1e1ee0;--panel-border:#ffffff1a;--panel-shadow:0 4px 24px -2px #0006, 0 2px 8px -1px #0000004d;--accent-color:#8480eb;--accent-hover:#9693ed;--accent-light:#8480eb33;--hover-bg:#ffffff12;--active-bg:#8480eb40;--danger-color:#ff8787;--danger-bg:#fa525226}html,body,#root{overscroll-behavior:none;width:100%;height:100%;font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-color);-webkit-user-select:none;user-select:none;overflow:hidden}.app-root{width:100%;height:100%;position:relative}.board{background-color:var(--bg-color);width:100%;height:100%;position:fixed;inset:0}.board canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;position:absolute;inset:0}.board canvas.static{z-index:1}.board canvas.interactive{z-index:2;outline:none}.ui-layer{z-index:3;pointer-events:none;position:absolute;inset:0}.ui-layer>*{pointer-events:auto}.glass-panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);box-shadow:var(--panel-shadow);border-radius:var(--radius-md)}.top-nav{pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;top:12px;left:14px;right:14px}.nav-left,.nav-right{pointer-events:auto;align-items:center;gap:10px;display:flex}.brand-title{background:var(--panel-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--panel-border);border-radius:var(--radius-md);letter-spacing:-.2px;color:var(--text-color);align-items:center;gap:8px;padding:6px 12px;font-size:14px;font-weight:600;display:flex;box-shadow:0 1px 4px #0000000a}.brand-logo{font-size:16px}.nav-btn{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--radius-md);height:38px;color:var(--text-color);cursor:pointer;justify-content:center;align-items:center;gap:6px;padding:0 12px;font-size:13px;font-weight:500;transition:all .15s;display:flex}.nav-btn:hover{background:var(--hover-bg);border-color:#00000026}.nav-btn.active{background:var(--active-bg);color:var(--accent-color);border-color:var(--accent-color)}.export-nav-btn{background:var(--accent-color);color:#fff;border-color:#0000}.export-nav-btn:hover{background:var(--accent-hover);color:#fff}.zoom-controls{border-radius:var(--radius-md);align-items:center;height:38px;padding:0 4px;display:flex}.zoom-btn{width:30px;height:30px;color:var(--text-color);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:background .15s;display:flex}.zoom-btn:hover{background:var(--hover-bg)}.zoom-percent-btn{color:var(--text-color);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;align-items:center;height:30px;padding:0 8px;font-size:12px;font-weight:600;display:flex}.zoom-percent-btn:hover{background:var(--hover-bg)}.menu-wrapper{position:relative}.dropdown-menu{z-index:10;flex-direction:column;gap:2px;min-width:180px;padding:6px;display:flex;position:absolute;top:calc(100% + 8px);left:0}.dropdown-item{color:var(--text-color);border-radius:var(--radius-sm);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:10px;padding:8px 12px;font-size:13px;transition:background .15s;display:flex}.dropdown-item:hover{background:var(--hover-bg)}.toolbar-container{pointer-events:none;position:absolute;top:14px;left:50%;transform:translate(-50%)}.toolbar-panel{pointer-events:auto;align-items:center;gap:2px;padding:4px;display:flex}.tool-group,.undo-redo-group{align-items:center;gap:2px;display:flex}.toolbar-divider{background-color:var(--panel-border);width:1px;height:22px;margin:0 4px}.toolbar-btn{width:38px;height:38px;color:var(--text-color);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:all .15s;display:flex;position:relative}.toolbar-btn:hover:not(:disabled){background:var(--hover-bg)}.toolbar-btn:disabled{opacity:.35;cursor:default}.toolbar-btn.active{background:var(--active-bg);color:var(--accent-color)}.tool-key{color:var(--text-muted);font-size:9px;font-weight:600;line-height:1;position:absolute;bottom:2px;right:3px}.lock-btn.active{color:var(--accent-color)}.style-panel{flex-direction:column;gap:14px;width:230px;max-height:calc(100vh - 84px);padding:14px;font-size:12px;display:flex;position:absolute;top:70px;left:14px;overflow-y:auto}.style-panel::-webkit-scrollbar{width:4px}.style-panel::-webkit-scrollbar-thumb{background:#00000026;border-radius:4px}.style-section{flex-direction:column;gap:6px;display:flex}.style-label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);font-size:11px;font-weight:600}.color-swatches{flex-wrap:wrap;gap:6px;display:flex}.color-swatch{cursor:pointer;border:1px solid #00000026;border-radius:4px;width:22px;height:22px;transition:transform .15s,box-shadow .15s}.color-swatch:hover{transform:scale(1.15)}.color-swatch.active{outline:2px solid var(--accent-color);outline-offset:1px}.color-swatch.transparent-swatch{background-image:linear-gradient(45deg,#ddd 25%,#0000 25%),linear-gradient(-45deg,#ddd 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ddd 75%),linear-gradient(-45deg,#0000 75%,#ddd 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px}.button-group{background:var(--hover-bg);border-radius:var(--radius-sm);gap:2px;padding:2px;display:flex}.style-toggle-btn{color:var(--text-color);text-transform:capitalize;cursor:pointer;background:0 0;border:none;border-radius:4px;flex:1;justify-content:center;align-items:center;padding:6px 4px;font-size:11px;font-weight:500;transition:all .12s;display:flex}.style-toggle-btn:hover{background:#ffffff80}[data-theme=dark] .style-toggle-btn:hover{background:#ffffff1a}.style-toggle-btn.active{background:var(--panel-bg);color:var(--accent-color);font-weight:600;box-shadow:0 1px 3px #0000001a}.style-slider{width:100%;accent-color:var(--accent-color);cursor:pointer}.selection-actions-panel{border-top:1px solid var(--panel-border);flex-direction:column;gap:6px;padding-top:10px;display:flex}.actions-button-grid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.action-btn{border:1px solid var(--panel-border);color:var(--text-color);border-radius:var(--radius-sm);cursor:pointer;background:0 0;align-items:center;gap:6px;padding:6px 8px;font-size:11px;font-weight:500;transition:background .15s;display:flex}.action-btn:hover{background:var(--hover-bg)}.action-btn.danger{color:var(--danger-color)}.action-btn.danger:hover{background:var(--danger-bg)}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background:#00000073;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-dialog{flex-direction:column;gap:16px;width:90%;max-width:440px;padding:20px;display:flex}.modal-header{justify-content:space-between;align-items:center;display:flex}.modal-header h3{font-size:16px;font-weight:600}.close-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px}.close-btn:hover{background:var(--hover-bg);color:var(--text-color)}.modal-body{flex-direction:column;gap:16px;display:flex}.export-options{flex-direction:column;gap:12px;display:flex}.option-row{justify-content:space-between;align-items:center;font-size:13px;display:flex}.checkbox-row label{cursor:pointer;align-items:center;gap:8px;display:flex}.export-actions{flex-direction:column;gap:8px;display:flex}.export-btn{border:1px solid var(--panel-border);background:var(--hover-bg);color:var(--text-color);border-radius:var(--radius-sm);cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:10px 14px;font-size:13px;font-weight:500;transition:all .15s;display:flex}.export-btn:hover{filter:brightness(.97);border-color:#0003}.export-btn.primary{background:var(--accent-color);color:#fff;border-color:#0000}.export-btn.primary:hover{background:var(--accent-hover)}.export-btn.secondary{border-style:dashed}