body{color:#1f2937;background-color:#f3f4f6;margin:0;font-family:Inter,-apple-system,sans-serif;overflow:hidden}.modal-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.setup-modal{background:#fff;border-radius:12px;width:400px;padding:30px;box-shadow:0 20px 25px -5px #0000001a}.setup-modal h2{color:#111827;margin-top:0}.form-group{margin-bottom:20px}.form-group label{color:#4b5563;margin-bottom:8px;font-size:14px;font-weight:600;display:block}.form-group input{box-sizing:border-box;border:1px solid #d1d5db;border-radius:6px;width:100%;padding:10px;font-family:inherit;font-size:16px}.primary-btn{color:#fff;cursor:pointer;background:#8b3dff;border:none;border-radius:6px;padding:10px 20px;font-weight:600;transition:background .2s}.primary-btn:hover{background:#7c33e6}.canva-app{flex-direction:column;height:100vh;display:flex}.canva-topbar{color:#fff;z-index:50;background:linear-gradient(90deg,#00c4cc 0%,#8b3dff 100%);justify-content:space-between;align-items:center;height:56px;padding:0 16px;display:flex}.topbar-left{align-items:center;gap:16px;display:flex}.topbar-center{font-size:14px;font-weight:500}.topbar-right{align-items:center;gap:12px;display:flex}.topbar-btn{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:4px;align-items:center;gap:6px;padding:6px 12px;font-size:14px;font-weight:500;display:flex}.topbar-btn:hover{background:#fff3}.topbar-btn.white{color:#111827;background:#fff}.canva-body{flex:1;display:flex;overflow:hidden}.canva-left-strip{z-index:40;background:#111827;flex-direction:column;align-items:center;gap:8px;width:72px;padding-top:16px;display:flex}.strip-btn{color:#9ca3af;cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:center;gap:4px;width:100%;padding:12px 0;transition:all .2s;display:flex}.strip-btn:hover{color:#fff}.strip-btn.active{color:#fff;background:#1f2937}.strip-btn span{font-size:11px;font-weight:500}.canva-drawer{z-index:30;background:#fff;flex-direction:column;width:340px;display:flex;box-shadow:4px 0 12px #0000000d}.drawer-header{border-bottom:1px solid #f3f4f6;padding:16px 20px}.drawer-header h3{color:#111827;margin:0;font-size:16px}.drawer-content{flex:1;padding:16px 20px;overflow-y:auto}.font-search{border:1px solid #d1d5db;border-radius:6px;width:100%;margin-bottom:16px;padding:10px}.font-list-item{cursor:pointer;border-radius:6px;margin-bottom:4px;padding:12px}.font-list-item:hover{background:#f3f4f6}.canva-workspace{background:#f3f4f6;flex-direction:column;flex:1;display:flex;position:relative}.context-toolbar-container{z-index:20;background:#fff;border-bottom:1px solid #e5e7eb;align-items:center;gap:8px;height:56px;padding:0 16px;display:flex;box-shadow:0 1px 2px #0000000d}.toolbar-divider{background:#e5e7eb;width:1px;height:24px;margin:0 8px}.icon-btn{cursor:pointer;color:#4b5563;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:flex}.icon-btn:hover{color:#111827;background:#f3f4f6}.icon-btn.active{color:#111827;background:#e5e7eb}.toolbar-select{background:#fff;border:1px solid #d1d5db;border-radius:6px;min-width:120px;padding:6px 10px;font-family:inherit}.toolbar-input-number{text-align:center;border:1px solid #d1d5db;border-radius:6px;width:60px;padding:6px}.toolbar-color{cursor:pointer;border:1px solid #d1d5db;border-radius:4px;width:30px;height:30px;padding:0}.canvas-wrapper{flex:1;justify-content:center;align-items:center;padding:50px;display:flex;overflow:auto}.canvas-container{background:#fff;position:relative;box-shadow:0 20px 25px -5px #0000001a}.layer-item{cursor:pointer;background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:10px;display:flex}.layer-item.selected{background:#f5f3ff;border-color:#8b3dff}.layer-actions{gap:4px;display:flex}.layer-btn{cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px}.layer-btn:hover{background:#e5e7eb}.context-menu{z-index:9999;background:#fff;border-radius:8px;width:260px;padding:8px 0;font-size:14px;position:fixed;box-shadow:0 4px 12px #00000026}.context-menu-item{cursor:pointer;color:#1f2937;justify-content:space-between;align-items:center;padding:10px 20px;transition:background .1s;display:flex}.context-menu-item:hover{background:#f3f4f6}.context-menu-item .shortcut{color:#9ca3af;font-size:12px}.context-menu-divider{background:#e5e7eb;height:1px;margin:6px 0}.context-menu-icon{color:#4b5563;margin-right:12px}.context-menu-item.has-submenu{position:relative}.context-submenu{z-index:10000;background:#fff;border-radius:8px;width:260px;margin-left:2px;padding:8px 0;position:absolute;top:-8px;left:100%;box-shadow:0 4px 12px #00000026}.floating-action-bar{z-index:1000;pointer-events:auto;background:#fff;border-radius:8px;align-items:center;padding:4px;transition:opacity .1s;display:flex;position:absolute;box-shadow:0 4px 12px #00000026}.floating-btn{cursor:pointer;color:#374151;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:8px;font-size:14px;font-weight:500;transition:background .2s;display:flex}.floating-btn:hover{background:#f3f4f6}.floating-btn.with-text{padding:8px 12px}.floating-divider{background:#e5e7eb;width:1px;height:24px;margin:0 4px}.element-grid-btn{cursor:pointer;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;padding:16px 8px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.element-grid-btn:hover{background:#f3f4f6;border-color:#8b3dff;transform:translateY(-2px);box-shadow:0 4px 12px #8b3dff1f}.element-grid-btn:active{transform:scale(.96)}.upload-image-card{cursor:pointer;-webkit-user-select:none;user-select:none;background-color:#f9fafb;border:1.5px solid #e5e7eb;border-radius:8px;justify-content:center;align-items:center;height:86px;transition:all .22s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.upload-image-card:hover{border-color:#8b3dff;transform:translateY(-3px)scale(1.02);box-shadow:0 8px 20px -3px #8b3dff38,0 3px 6px -2px #00000014}.upload-image-card:active{transform:scale(.96)}.upload-image-card.is-loading{pointer-events:none;border-color:#8b3dff;animation:1.5s ease-in-out infinite alternate pulseCardBorder;box-shadow:0 0 0 2px #8b3dff59}@keyframes pulseCardBorder{0%{box-shadow:0 0 0 2px #8b3dff33}to{box-shadow:0 0 0 4px #8b3dff80}}.upload-card-thumb{object-fit:contain;width:100%;height:100%;transition:transform .25s cubic-bezier(.4,0,.2,1)}.upload-image-card:hover .upload-card-thumb{transform:scale(1.08)}.upload-card-overlay{opacity:0;pointer-events:none;background:linear-gradient(#8b3dff0a 0%,#8b3dff73 100%);justify-content:center;align-items:flex-end;padding-bottom:6px;transition:opacity .2s;display:flex;position:absolute;inset:0}.upload-image-card:hover:not(.is-loading):not(.is-success) .upload-card-overlay{opacity:1}.upload-add-badge{color:#7c33e6;letter-spacing:.2px;background:#fffffff2;border-radius:9999px;align-items:center;gap:3px;padding:2px 8px;font-size:10px;font-weight:700;display:flex;box-shadow:0 2px 6px #0000002e}.upload-card-loading-overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10;background:#ffffffe0;flex-direction:column;justify-content:center;align-items:center;gap:4px;animation:.15s ease-out fadeInOverlay;display:flex;position:absolute;inset:0}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}.upload-card-spinner{border:2.5px solid #8b3dff33;border-top-color:#8b3dff;border-radius:50%;width:22px;height:22px;animation:.75s linear infinite spinCardLoader}@keyframes spinCardLoader{to{transform:rotate(360deg)}}.upload-card-loading-text{color:#7c33e6;letter-spacing:.2px;font-size:10px;font-weight:700}.upload-card-success-overlay{color:#fff;z-index:10;background:#10b981eb;flex-direction:column;justify-content:center;align-items:center;gap:3px;animation:.28s cubic-bezier(.34,1.56,.64,1) successPop;display:flex;position:absolute;inset:0}@keyframes successPop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.upload-card-success-text{color:#fff;letter-spacing:.2px;font-size:11px;font-weight:700}.upload-card-delete-btn{color:#fff;cursor:pointer;z-index:5;opacity:.8;background:#ef4444e6;border:none;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;transition:all .15s;display:flex;position:absolute;top:5px;right:5px;box-shadow:0 1px 4px #00000040}.upload-image-card:hover .upload-card-delete-btn{opacity:1}.upload-card-delete-btn:hover{background:#dc2626;transform:scale(1.18);box-shadow:0 3px 8px #dc262673}.canvas-status-toast{z-index:1500;pointer-events:none;border-radius:9999px;align-items:center;gap:9px;padding:8px 18px;font-size:13px;font-weight:600;animation:.22s cubic-bezier(.34,1.56,.64,1) slideDownToast;display:flex;position:absolute;top:18px;left:50%;transform:translate(-50%)}.canvas-status-toast.is-loading{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;background:#111827e6;border:1px solid #ffffff1f;box-shadow:0 10px 25px -5px #0000004d,0 4px 10px -2px #0003}.canvas-status-toast.is-success{color:#065f46;background:#fff;border:1.5px solid #10b981;box-shadow:0 10px 25px -5px #10b98140,0 4px 12px -2px #0000001a}@keyframes slideDownToast{0%{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%)}}.toast-spin{animation:.75s linear infinite spinCardLoader}.mask-dropdown-wrapper{display:inline-block;position:relative}.mask-dropdown-menu{z-index:2000;background:#fff;border:1px solid #e5e7eb;border-radius:12px;width:295px;max-height:360px;margin-top:8px;padding:12px;animation:.15s ease-out fadeInOverlay;position:absolute;top:100%;left:50%;overflow-y:auto;transform:translate(-50%);box-shadow:0 12px 30px -5px #00000038,0 4px 12px -2px #0000001a}.mask-dropdown-menu::-webkit-scrollbar{width:4px}.mask-dropdown-menu::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}.mask-menu-header{text-transform:uppercase;color:#6b7280;letter-spacing:.5px;text-align:center;margin-bottom:8px;font-size:11px;font-weight:700}.mask-menu-grid{grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px;display:grid}.mask-option-btn{cursor:pointer;color:#4b5563;background:#f9fafb;border:1px solid #e5e7eb;border-radius:7px;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:8px 2px;transition:all .15s;display:flex}.mask-option-btn:hover{color:#7c33e6;background:#ede9fe;border-color:#8b3dff;transform:translateY(-1px)}.mask-option-btn span{white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:9.5px;font-weight:600;overflow:hidden}.mask-menu-divider{background:#f3f4f6;height:1px;margin:6px 0}.mask-menu-action{cursor:pointer;color:#374151;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:100%;padding:6px 8px;font-size:12px;font-weight:500;transition:background .15s;display:flex}.mask-menu-action:hover{background:#f3f4f6}.mask-menu-action.danger{color:#ef4444}.mask-menu-action.danger:hover{background:#fee2e2}