@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root,.dark{--bg-color:#020617;--surface-color:#0f172a;--surface-color-light:#1e293b;--border-color:#ffffff14;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent-blue:#3b82f6;--accent-blue-transparent:#3b82f624;--accent-purple:#8b5cf6;--accent-rose:#e11d48;--accent-amber:#f59e0b;--accent-green:#10b981;--note-yellow:#fef08a;--note-green:#bbf7d0;--note-blue:#bfdbfe;--note-pink:#fbcfe8;--note-purple:#e9d5ff;--note-text:#0f172a;--shadow-sm:0 4px 6px -1px #00000080, 0 2px 4px -1px #0000004d;--shadow-md:0 10px 15px -3px #00000080, 0 4px 6px -2px #0000004d;--shadow-lg:0 20px 25px -5px #00000080, 0 10px 10px -5px #0000004d;--shadow-glow:0 0 20px #3b82f64d;--glass-bg:#0f172aa6;--glass-panel-bg:#1e293b80;--hover-bg:#ffffff1a;--scale-factor:1;--tool-size:48px;--panel-width:320px}.light{--bg-color:#f8fafc;--surface-color:#fff;--surface-color-light:#e2e8f0;--border-color:#0000001a;--text-primary:#0f172a;--text-secondary:#475569;--accent-blue-transparent:#3b82f61f;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d;--shadow-glow:0 0 20px #3b82f626;--glass-bg:#ffffffa6;--glass-panel-bg:#f1f5f9a6;--hover-bg:#0000000d}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,-apple-system,sans-serif;overflow:hidden}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}input,textarea{color:inherit;font-family:inherit}.glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);box-shadow:var(--shadow-md)}.glass-panel{background:var(--glass-panel-bg);-webkit-backdrop-filter:blur(8px);border:1px solid var(--border-color);border-radius:12px}.toolbar-btn{width:48px;height:48px;color:var(--text-secondary);border-radius:12px;justify-content:center;align-items:center;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.toolbar-btn:hover{background:var(--hover-bg);color:var(--text-primary);transform:translateY(-2px)}.toolbar-btn.active{background:var(--accent-blue);color:#fff;box-shadow:var(--shadow-glow)}.toolbar-btn:disabled{opacity:.38;cursor:not-allowed;transform:none}.toolbar-btn:disabled:hover{color:var(--text-secondary);background:0 0;transform:none}.panel-icon-btn{border:1px solid var(--border-color);background:var(--hover-bg);width:30px;height:30px;color:var(--text-secondary);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:background .15s,color .15s,border-color .15s;display:inline-flex}.panel-icon-btn:hover:not(:disabled){background:var(--surface-color-light);color:var(--text-primary)}.panel-icon-btn:disabled{opacity:.4;cursor:not-allowed}.panel-section-toggle{width:100%;color:var(--text-primary);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:6px;padding:6px 0;font-size:12px;font-weight:600;display:flex}.panel-section-toggle:hover{color:var(--accent-blue)}.panel-divider{background:var(--border-color);opacity:.65;height:1px;margin:4px 0}.panel-primary-action{border:1px dashed var(--border-color);background:var(--hover-bg);width:100%;color:var(--text-primary);border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:8px 10px;font-size:12px;font-weight:600;transition:border-color .15s,background .15s;display:inline-flex}.panel-primary-action:hover{border-color:var(--accent-blue);background:var(--accent-blue-transparent)}.layer-stack-item{border:1px solid var(--border-color);background:#ffffff05;border-radius:10px;margin-bottom:8px;overflow:hidden}.light .layer-stack-item{background:#00000005}.layer-stack-item--active{border-color:var(--accent-blue);background:var(--accent-blue-transparent)}.layer-stack-item__header{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px;padding:8px 8px 8px 10px;display:grid}.layer-stack-item__actions{flex-flow:row;flex-shrink:0;align-items:center;gap:4px;display:flex}.layer-stack-item__elements{border-top:1px solid var(--border-color);scrollbar-width:thin;flex-direction:column;gap:4px;max-height:min(220px,38vh);padding:4px 8px 8px 10px;display:flex;overflow-y:auto}.layer-element-row{color:var(--text-primary);text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;align-items:center;gap:8px;width:100%;padding:6px 8px;font-size:12px;transition:background .12s,border-color .12s;display:flex}.layer-element-row:hover{background:var(--hover-bg)}.layer-element-row--selected{border-color:var(--accent-blue);background:var(--accent-blue-transparent)}.canvas-panel-fab{border:1px solid var(--border-color);background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);width:40px;height:40px;color:var(--text-primary);box-shadow:var(--shadow-md);border-radius:10px;justify-content:center;align-items:center;transition:transform .15s,border-color .15s;display:flex}.canvas-panel-fab:hover{border-color:var(--accent-blue);transform:translateY(-1px)}.sticky-note{box-shadow:var(--shadow-sm);color:var(--note-text);border-radius:4px;flex-direction:column;display:flex;position:absolute;overflow:hidden}.sticky-note-header{cursor:grab;opacity:0;background:#0000000d;justify-content:flex-end;align-items:center;height:24px;padding:0 8px;transition:opacity .2s;display:flex}.sticky-note:hover .sticky-note-header{opacity:1}.sticky-note-header:active{cursor:grabbing}.sticky-note-content{resize:none;background:0 0;border:none;outline:none;flex:1;width:100%;height:100%;padding:12px;font-size:16px}.sticky-note-delete{width:20px;height:20px;color:var(--note-text);background:#0000001a;border-radius:50%;justify-content:center;align-items:center;font-size:14px;display:flex}.sticky-note-delete:hover{background:#0003}::selection{background:var(--accent-blue);color:#fff}.canvas-bg{z-index:-1;background-image:radial-gradient(var(--surface-color-light) 1px, transparent 1px);opacity:.3;background-size:40px 40px;width:100vw;height:100vh;position:absolute;top:0;left:0}@media (width<=640px){:root{--tool-size:42px;--panel-width:100vw}.toolbar-btn{height:var(--tool-size);width:var(--tool-size)}}@media (width<=280px){:root{--scale-factor:.7;--tool-size:32px}body{font-size:11px}.glass-panel{border-radius:6px}.watch-hidden{display:none!important}}.app-container{width:100vw;height:100vh;position:relative;overflow:hidden}.board-container{width:100%;height:100%;position:absolute;top:0;left:0}.layers-panel-scroll{max-height:min(72vh,560px);overflow:hidden auto}.board-canvas{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.board-canvas>*{pointer-events:auto}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.w-full{width:100%}.text-center{text-align:center}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-black{font-weight:900}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-accent-blue{color:var(--accent-blue)}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}.border{border:1px solid var(--border-color)}.border-b{border-bottom:1px solid var(--border-color)}.border-t{border-top:1px solid var(--border-color)}.shadow-lg{box-shadow:var(--shadow-md)}.shadow-2xl{box-shadow:var(--shadow-lg)}.grid{display:grid}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:scale-105:hover{transform:scale(1.05)}.active\:scale-95:active{transform:scale(.95)}.export-panel-trigger{z-index:1000;position:fixed;top:24px;right:24px}.premium-panel{background:var(--glass-panel-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-color);box-shadow:var(--shadow-lg);border-radius:24px}.premium-button{cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.premium-button:hover{transform:translateY(-1px)}.premium-button:active{transform:translateY(0)}.export-hide{transition:opacity .2s}.is-exporting .export-hide,.is-exporting .toolbar-btn,.is-exporting .glass-panel,.is-exporting .properties-panel,.is-exporting .layers-panel,.is-exporting .library-panel,.is-exporting .export-panel-trigger{opacity:0!important;visibility:hidden!important;pointer-events:none!important}.is-exporting .export-hide-svg{opacity:0!important;stroke:#0000!important;fill:#0000!important}.is-exporting .export-text-selected{box-shadow:none!important;border-color:#0000!important}