:root{--bg-workspace:#f1f5f9;--bg-canvas:#fff;--bg-panel:#fffffff5;--bg-panel-hover:#fff;--border-color:#cbd5e1;--border-color-active:#059669;--text-primary:#0f172a;--text-secondary:#334155;--text-muted:#64748b;--brand-color:#059669;--brand-light:#ecfdf5;--brand-dark:#047857;--tour-color:#059669;--color-danger:#dc2626;--color-success:#059669;--color-warning:#d97706;--font-sans:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--shadow-sm:0 1px 3px 0 #0000000f;--shadow-md:0 4px 12px -2px #00000014, 0 2px 4px -1px #0000000a;--shadow-lg:0 12px 30px -4px #0000001f, 0 4px 8px -2px #0000000f;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;box-sizing:border-box}*,:before,:after{box-sizing:inherit}body{font-family:var(--font-sans);color:var(--text-primary);background-color:var(--bg-workspace);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;overflow:hidden}#root{flex-direction:column;width:100vw;height:100vh;display:flex;overflow:hidden}.app-container{flex-direction:column;width:100%;height:100%;display:flex;position:relative}.top-bar{z-index:100;height:auto;box-shadow:none;pointer-events:none;background-color:#0000;border-bottom:none;justify-content:space-between;align-items:center;padding:0;display:flex;position:absolute;top:12px;left:14px;right:14px}.top-bar-left,.top-bar-center,.bottom-left-dock,.bottom-right-dock,.bottom-center-dock{pointer-events:auto;border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);background-color:#fff;align-items:center;gap:6px;height:38px;padding:4px 10px;display:flex}.top-bar-left{gap:4px;padding:3px 12px 3px 6px}.top-bar-back-pill{color:#64748b;cursor:pointer;background-color:#0000;border:none;border-radius:6px;align-items:center;gap:5px;padding:4px 8px;font-size:.82rem;font-weight:600;text-decoration:none;transition:background-color .15s,color .15s;display:inline-flex}.top-bar-back-pill svg{color:#64748b;transition:transform .15s,color .15s}.top-bar-back-pill:hover{color:#0f172a;background-color:#f1f5f9}.top-bar-back-pill:hover svg{color:#0284c7;transform:translate(-2px)}.top-bar-right{pointer-events:auto;align-items:center;gap:8px;height:38px;display:flex}:is(.top-bar-left:not(:has(*)),.top-bar-center:not(:has(*)),.top-bar-right:not(:has(*))){display:none}.app-logo{color:var(--brand-color);letter-spacing:-.5px;align-items:center;gap:6px;font-size:1.25rem;font-weight:700;display:flex}.top-bar-left .btn-icon-only,.top-bar-center .btn-icon-only,.top-bar-right .btn-icon-only,.bottom-left-dock .btn-icon-only,.bottom-right-dock .btn-icon-only,.bottom-center-dock .btn-icon-only{border-radius:var(--radius-sm);width:auto;min-width:28px;height:28px;color:var(--text-color);background:0 0;border:none;justify-content:center;align-items:center;padding:0 6px;transition:all .15s;display:inline-flex}.top-bar-left .btn-icon-only:hover:not(:disabled),.top-bar-center .btn-icon-only:hover:not(:disabled),.top-bar-right .btn-icon-only:hover:not(:disabled),.bottom-left-dock .btn-icon-only:hover:not(:disabled),.bottom-right-dock .btn-icon-only:hover:not(:disabled),.bottom-center-dock .btn-icon-only:hover:not(:disabled){background-color:var(--bg-hover)}.top-bar-left .btn-icon-only:active:not(:disabled),.top-bar-center .btn-icon-only:active:not(:disabled),.top-bar-right .btn-icon-only:active:not(:disabled),.bottom-left-dock .btn-icon-only:active:not(:disabled),.bottom-right-dock .btn-icon-only:active:not(:disabled),.bottom-center-dock .btn-icon-only:active:not(:disabled){background-color:var(--border-color)}.btn-label{color:var(--text-color);letter-spacing:-.2px;margin-left:5px;font-size:.7rem;font-weight:600}@media (width<=768px){.btn-label{display:none}}.page-indicator{text-align:center;-webkit-user-select:none;user-select:none;min-width:48px;padding:0 6px;font-size:.8rem;font-weight:600}.bottom-left-dock{z-index:100;position:absolute;bottom:16px;left:16px}.bottom-right-dock{z-index:100;position:absolute;bottom:16px;right:16px}.bottom-center-dock{z-index:100;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.floating-panel{background-color:var(--bg-panel);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:5;padding:8px;transition:background-color .2s,border-color .2s}.floating-panel:hover{background-color:var(--bg-panel-hover)}.toolbar-dock{flex-direction:column;gap:6px;display:flex;position:absolute;top:50%;left:16px;transform:translateY(-50%)}.btn-tool{border-radius:var(--radius-md);color:var(--text-secondary);background-color:#0000;border:none;transition:background-color .15s,color .15s,transform .1s;position:relative}.btn-tool:hover{color:var(--text-primary);background-color:#0000000d}.btn-tool.active{background-color:var(--brand-light);color:var(--brand-color);font-weight:600}.tool-shortcut-num{color:var(--text-muted);opacity:.7;-webkit-user-select:none;user-select:none;pointer-events:none;box-shadow:none;background:0 0;border:none;margin:0;padding:0;font-size:.55rem;font-weight:600;line-height:1;position:absolute;bottom:2px;right:4px}.btn-tool:hover .tool-shortcut-num{color:var(--text-primary);opacity:1}.btn-tool.active .tool-shortcut-num{color:var(--brand-color);opacity:1}.properties-dock{z-index:90;flex-direction:column;gap:14px;width:240px;max-height:calc(100% - 32px);padding:14px;display:flex;position:absolute;top:14px;right:16px;overflow-y:auto;transform:none}.panel-drag-handle{cursor:grab;color:var(--text-muted);border-bottom:1px solid var(--border-color);background-color:var(--bg-hover);touch-action:none;border-top-left-radius:12px;border-top-right-radius:12px;justify-content:center;align-items:center;margin:-16px -16px 0;padding:6px;display:flex}.panel-drag-handle:active{cursor:grabbing}.panel-section{flex-direction:column;gap:8px;display:flex}.panel-label{text-transform:uppercase;color:var(--text-secondary);letter-spacing:.5px;font-size:.75rem;font-weight:600}.btn{border-radius:var(--radius-md);border:1px solid var(--border-color);height:36px;color:var(--text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;background-color:#fff;justify-content:center;align-items:center;gap:8px;padding:0 14px;font-size:.875rem;font-weight:500;transition:all .2s;display:inline-flex}.btn:hover:not(:disabled){background-color:#f9fafb;border-color:#d1d5db}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--brand-color);color:#fff;border-color:var(--brand-color)}.btn-primary:hover:not(:disabled){background-color:var(--brand-dark);border-color:var(--brand-dark)}.btn-icon-only{width:36px;padding:0}.color-grid{grid-template-columns:repeat(6,1fr);gap:8px;display:grid}.color-swatch{aspect-ratio:1;cursor:pointer;border:2px solid #fff;border-radius:50%;outline:1px solid #00000026;transition:transform .12s,outline .12s,box-shadow .12s;box-shadow:0 1px 3px #00000014}.color-swatch:hover{outline:2px solid var(--brand-color);transform:scale(1.15);box-shadow:0 2px 6px #00000026}.color-swatch.active{outline:2.5px solid var(--brand-color);outline-offset:1px;transform:scale(1.1);box-shadow:0 2px 8px #0284c740}.swatch-fill{background-image:linear-gradient(45deg,#ccc 25%,#0000 25%),linear-gradient(-45deg,#ccc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ccc 75%),linear-gradient(-45deg,#0000 75%,#ccc 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px}.thickness-option{border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--border-color);background-color:#fff;justify-content:center;align-items:center;height:32px;display:flex}.thickness-option.active{border-color:var(--brand-color);background-color:var(--brand-light);color:var(--brand-color);font-weight:600}.thickness-indicator{background-color:currentColor;border-radius:9999px;width:80%}.font-select{border-radius:var(--radius-md);border:1px solid var(--border-color);height:36px;color:var(--text-primary);cursor:pointer;background-color:#fff;outline:none;width:100%;padding:0 8px;font-size:.875rem}.font-select:focus{border-color:var(--brand-color)}.slider-container{align-items:center;gap:12px;display:flex}.slider{appearance:none;cursor:pointer;background-color:#e5e7eb;border-radius:3px;outline:none;flex:1;height:6px}.slider::-webkit-slider-thumb{appearance:none;background-color:var(--brand-color);width:16px;height:16px;box-shadow:var(--shadow-sm);border:2px solid #fff;border-radius:50%;transition:transform .1s}.slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.workspace-container{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;background-color:var(--bg-workspace);contain:layout paint;background-image:radial-gradient(#00000014 1.5px,#0000 1.5px);background-size:24px 24px;flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.canvas-wrapper{pointer-events:none;contain:strict;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}.workspace-debug-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#f8fafc;pointer-events:none;z-index:100;background:#0f172ad9;border:1px solid #ffffff1a;border-radius:8px;flex-direction:column;gap:2px;padding:8px 12px;font-family:monospace;font-size:.75rem;display:flex;position:absolute;bottom:16px;left:16px;box-shadow:0 10px 15px -3px #0000004d}.canvas-bg{z-index:1;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.canvas-draw{z-index:2;cursor:crosshair;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.canvas-overlay{pointer-events:auto!important}.canvas-draw.cursor-select{cursor:default}.canvas-draw.cursor-pan{cursor:grab}.canvas-draw.cursor-pan:active{cursor:grabbing}.text-editor-overlay{z-index:100;border:1.5px dashed var(--brand-color);-webkit-backdrop-filter:blur(8px);background:#fffffff2;border-radius:8px;flex-direction:column;gap:8px;margin:0;padding:8px 10px;transition:border-color .2s;display:flex;position:absolute;box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.text-editor-overlay:focus-within{border-style:solid;border-color:var(--brand-color)}.text-editor-textarea{resize:none;white-space:pre-wrap;word-wrap:break-word;min-width:240px;height:auto;min-height:40px;color:inherit;font-family:inherit;font-size:inherit;background:0 0;border:none;outline:none;margin:0;padding:0;line-height:1.4;overflow:hidden}.text-editor-controls{border-top:1px solid #0000000f;justify-content:flex-end;align-items:center;gap:6px;margin-top:2px;padding-top:6px;display:flex}.text-control-btn{cursor:pointer;border:none;border-radius:4px;justify-content:center;align-items:center;gap:4px;height:24px;padding:4px 8px;font-size:11px;font-weight:600;transition:all .15s cubic-bezier(.4,0,.2,1);display:inline-flex}.text-control-btn.commit{color:#fff;background-color:#10b981;box-shadow:0 1px 3px #10b98133}.text-control-btn.commit:hover{background-color:#059669;transform:translateY(-.5px)}.text-control-btn.cancel{color:#4b5563;background-color:#f3f4f6}.text-control-btn.cancel:hover{color:#1f2937;background-color:#e5e7eb;transform:translateY(-.5px)}.welcome-card{cursor:pointer;z-index:10;text-align:center;background-color:#0000;flex-direction:column;justify-content:center;align-items:center;gap:16px;max-width:440px;padding:16px;font-family:Caveat,cursive;transition:all .2s;display:flex}.welcome-card:hover{transform:translateY(-2px)}.welcome-card p{font-family:Caveat,cursive}.welcome-description{color:var(--text-primary);margin:0;font-size:1.25rem;line-height:1.35}.file-input{display:none}.toast{background-color:var(--text-primary);color:#fff;box-shadow:var(--shadow-lg);z-index:100;opacity:0;pointer-events:none;border-radius:9999px;align-items:center;gap:10px;padding:10px 20px;font-size:.875rem;font-weight:500;animation:3s forwards toast-fade-in-out;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}@keyframes toast-fade-in-out{0%{opacity:0;transform:translate(-50%,20px)}10%{opacity:1;transform:translate(-50%)}90%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-20px)}}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.tour-guides-container{z-index:99;pointer-events:none;position:fixed;inset:0}.tour-guide-card{pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute}.tour-text{box-shadow:none;text-align:center;pointer-events:none;background-color:#0000;border:none;border-radius:0;max-width:240px;padding:0}.tour-text h3{color:var(--brand-color);margin:0 0 6px;font-family:Caveat,cursive;font-size:1.4rem;font-weight:700}.tour-text p{color:var(--text-primary);margin:0;font-family:Caveat,cursive;font-size:1.15rem;line-height:1.3}.guide-logo{flex-direction:row;align-items:center;top:16px;left:48px}.guide-left-toolbar{flex-direction:row;top:50%;left:90px;transform:translateY(-50%)}.guide-top-center{top:75px;left:50%;transform:translate(-50%)}.guide-top-right{flex-direction:row;top:75px;right:150px}.guide-top-right .tour-arrow{order:2}.guide-top-right .tour-text{order:1}.guide-properties{flex-direction:row;top:50%;right:270px;transform:translateY(-50%)}.guide-properties .tour-arrow{order:2}.guide-properties .tour-text{order:1}.guide-bottom-center{bottom:85px;left:50%;transform:translate(-50%)}.guide-zoom{align-items:flex-start;bottom:75px;left:24px}.guide-rotate{align-items:flex-end;bottom:75px;right:24px}.auth-gate-container{color:#0f172a;box-sizing:border-box;background-color:#f8fafc;background-image:radial-gradient(#0000000f 1.5px,#0000 1.5px);background-size:24px 24px;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;min-height:100vh;padding:16px;display:flex;position:relative;overflow:hidden}.auth-ambient-glow{filter:blur(70px);pointer-events:none;background:radial-gradient(circle,#10b9811f 0%,#38bdf80f 50%,#0000 70%);border-radius:50%;width:550px;height:450px;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)}.auth-card{z-index:10;text-align:center;box-sizing:border-box;background:#fff;border:1px solid #cbd5e1;border-radius:24px;flex-direction:column;gap:24px;width:100%;max-width:420px;padding:38px 32px;display:flex;position:relative;box-shadow:0 20px 40px -15px #00000014,0 0 0 1px #00000005}.auth-header{flex-direction:column;align-items:center;gap:12px;display:flex}.auth-logo{object-fit:contain;width:56px;height:56px}.auth-title{color:#0f172a;letter-spacing:-.03em;margin:0;font-size:24px;font-weight:800}.auth-subtitle{color:#475569;margin:4px 0 0;font-size:14px;font-weight:500;line-height:1.4}.auth-error-banner{color:#b91c1c;text-align:left;background:#fee2e2;border:1px solid #fca5a5;border-radius:12px;padding:10px 14px;font-size:13px}.auth-actions{flex-direction:column;gap:12px;padding-top:4px;display:flex}.btn-auth-primary{color:#fff;cursor:pointer;background:#059669;border:none;border-radius:16px;justify-content:center;align-items:center;gap:10px;width:100%;padding:14px 20px;font-size:15px;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 10px 25px -5px #05966959}.btn-auth-primary:hover:not(:disabled){background:#10b981;transform:translateY(-1px);box-shadow:0 12px 28px -5px #10b98173}.btn-auth-primary:active:not(:disabled){transform:scale(.99)}.btn-auth-primary:disabled{opacity:.75;cursor:not-allowed}.btn-arrow-icon{opacity:.85;transition:transform .2s}.btn-auth-primary:hover:not(:disabled) .btn-arrow-icon{transform:translate(3px)}.btn-spinner{animation:1s linear infinite spin}.auth-loading-body{flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px 0 12px;display:flex}.auth-spinner{color:#10b981;animation:1s linear infinite spin}.auth-loading-text{color:#94a3b8;margin:0;font-size:14px}.auth-footer{color:#64748b;justify-content:center;align-items:center;gap:6px;padding-top:4px;font-size:12px;display:flex}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.canvas-table-row:hover{background-color:#f8fafc}.canvas-table-row:hover td{color:#0f172a}.editable-canvas-name:hover{text-underline-offset:3px;background-color:#e2e8f0;-webkit-text-decoration:underline dashed #059669;text-decoration:underline dashed #059669;color:#059669!important}