:root{--color-bg:#f1f5f9;--color-bg-elevated:#ffffff;--color-surface:#ffffff;--color-surface-muted:#f8fafc;--color-border:#e2e8f0;--color-border-strong:#cbd5e1;--color-text:#0f172a;--color-text-muted:#64748b;--color-text-faint:#94a3b8;--color-text-on-light:#0f172a;--color-primary:#2563eb;--color-primary-hover:#1d4ed8;--color-primary-soft:#eff6ff;--color-danger:#dc2626;--color-danger-hover:#b91c1c;--color-selection:#2563eb;--color-handle:#ffffff;--color-shadow:rgba(15, 23, 42, 0.12);--header-height:56px;--tools-width:88px;--props-width:300px;--bottom-bar-height:64px;--ad-height:60px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:22px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--font-body:'Cairo', system-ui, -apple-system, "Segoe UI", Tahoma, Arial, "Noto Sans", sans-serif;--font-size-xs:12px;--font-size-sm:13px;--font-size-md:14px;--font-size-lg:16px;--font-size-xl:18px;--shadow-sm:0 1px 2px rgba(15, 23, 42, 0.08);--shadow-md:0 4px 14px rgba(15, 23, 42, 0.10);--shadow-lg:0 10px 32px rgba(15, 23, 42, 0.16);--shadow-sheet:0 -8px 30px rgba(15, 23, 42, 0.16);--transition-fast:140ms ease;--transition-med:220ms ease;--touch-min:44px;--canvas-bg:#0b1220;--design-canvas-bg:#ffffff;--safe-top:env(safe-area-inset-top, 0px);--safe-bottom:env(safe-area-inset-bottom, 0px);--safe-left:env(safe-area-inset-left, 0px);--safe-right:env(safe-area-inset-right, 0px);--kb-inset:0px;--sheet-max:70vh;--sheet-h:0px;}[data-theme="dark"]{--color-bg:#0f172a;--color-bg-elevated:#1e293b;--color-surface:#1e293b;--color-surface-muted:#162032;--color-border:#334155;--color-border-strong:#475569;--color-text:#f1f5f9;--color-text-muted:#94a3b8;--color-text-faint:#64748b;--color-text-on-light:#0f172a;--color-primary:#3b82f6;--color-primary-hover:#60a5fa;--color-primary-soft:#1e3a5f;--color-danger:#ef4444;--color-danger-hover:#f87171;--color-selection:#3b82f6;--color-handle:#f1f5f9;--color-shadow:rgba(0, 0, 0, 0.4);--shadow-sm:0 1px 2px rgba(0, 0, 0, 0.3);--shadow-md:0 4px 14px rgba(0, 0, 0, 0.35);--shadow-lg:0 10px 32px rgba(0, 0, 0, 0.45);--shadow-sheet:0 -8px 30px rgba(0, 0, 0, 0.45);--canvas-bg:#020617;--design-canvas-bg:#ffffff;}*, *::before, *::after{box-sizing:border-box;margin:0;padding:0;}html, body{height:100%;}body{font-family:var(--font-body);font-size:var(--font-size-md);color:var(--color-text);background:var(--color-bg);line-height:1.45;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;}button, input, select{font-family:inherit;font-size:inherit;color:inherit;}button{background:none;border:none;cursor:pointer;}button:disabled{cursor:not-allowed;opacity:0.4;}img{display:block;max-width:100%;}svg{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}[hidden]{display:none !important;}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;}::selection{background:var(--color-primary-soft);}::-webkit-scrollbar{width:8px;height:8px;}::-webkit-scrollbar-thumb{background:var(--color-border-strong);border-radius:4px;}::-webkit-scrollbar-track{background:transparent;}.no-scroll{overflow:hidden;touch-action:none;}[data-tooltip]{position:relative;}[data-tooltip]::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) scale(0.95);background:rgba(0, 0, 0, 0.85);color:#fff;font-size:12px;font-weight:500;padding:6px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.2s, transform 0.2s;z-index:1000;}[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after{opacity:1;transform:translateX(-50%) scale(1);}[dir="rtl"] [data-tooltip]::after{left:50%;transform:translateX(-50%) scale(0.95);}[dir="rtl"] [data-tooltip]:hover::after, [dir="rtl"] [data-tooltip]:focus-visible::after{transform:translateX(-50%) scale(1);}.app{display:flex;flex-direction:column;height:100%;width:100%;}.app.kb-open{height:calc(100% - var(--kb-inset));}.app-header{flex:0 0 auto;height:var(--header-height);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-4);background:var(--color-surface);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-sm);position:relative;z-index:40;padding-top:var(--safe-top);}.app-body{flex:1 1 auto;display:flex;min-height:0;position:relative;overflow:hidden;transition:padding-bottom var(--transition-med);}.app.sheet-open .app-body{padding-bottom:var(--sheet-h);}.tools-panel{display:none;flex:0 0 var(--tools-width);background:var(--color-surface);border-inline-end:1px solid var(--color-border);padding:var(--space-3) var(--space-2);flex-direction:column;gap:var(--space-1);overflow-y:auto;z-index:10;}.tool-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--space-3) var(--space-2);border-radius:var(--radius-md);color:var(--color-text-muted);transition:background var(--transition-fast), color var(--transition-fast);font-size:var(--font-size-xs);font-weight:600;}.tool-btn svg{width:22px;height:22px;}.tool-btn:hover{background:var(--color-surface-muted);color:var(--color-text);}.tool-btn.active{background:var(--color-primary-soft);color:var(--color-primary);}.canvas-wrap{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0;position:relative;background:radial-gradient(circle at 20% 20%, rgba(37, 99, 235, 0.06), transparent 40%), radial-gradient(circle at 80% 80%, rgba(37, 99, 235, 0.05), transparent 40%), var(--color-bg);overflow:hidden;touch-action:none;}.canvas-stage{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;position:relative;touch-action:none;}.empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);text-align:center;padding:var(--space-4);z-index:5;}.empty-state.hidden{display:none;}.empty-icon{width:64px;height:64px;color:var(--color-text-faint);margin-bottom:var(--space-1);}.empty-icon svg{width:100%;height:100%;}.empty-state h2{font-size:22px;font-weight:700;color:var(--color-text);}.empty-state p{color:var(--color-text-muted);max-width:260px;}.empty-templates{width:100%;max-width:340px;}.empty-templates[hidden]{display:none;}.empty-templates-row{display:flex;gap:var(--space-2);overflow-x:auto;justify-content:center;padding:var(--space-1);}.empty-template{flex:0 0 auto;width:100px;display:flex;flex-direction:column;gap:var(--space-1);background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;padding:var(--space-1);cursor:pointer;}.empty-template img{width:100%;aspect-ratio:3 / 4;object-fit:cover;border-radius:8px;background:var(--color-bg);}.empty-template span{font-size:var(--font-size-xs);color:var(--color-text);text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em;line-height:1.2;}#btnEmptyTemplate{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);}#btnEmptyTemplate svg{flex:0 0 auto;}.empty-actions{display:flex;gap:var(--space-2);margin-top:var(--space-1);}.empty-state .btn-primary{max-width:340px;}@media (max-height:600px){.empty-state{gap:var(--space-2);padding:var(--space-4);justify-content:flex-start;padding-top:var(--space-5);overflow-y:auto;}.empty-state h2{font-size:18px;}.empty-state p{font-size:var(--font-size-sm);}.empty-template{width:64px;}}@media (min-width:1100px){.empty-templates{max-width:420px;}}.props-panel{display:none;flex:0 0 var(--props-width);background:var(--color-surface);border-inline-start:1px solid var(--color-border);overflow-y:auto;z-index:10;}.props-empty{padding:var(--space-8) var(--space-5);color:var(--color-text-muted);font-size:var(--font-size-sm);text-align:center;}.bottom-toolbar{display:flex;flex:0 0 auto;height:calc(var(--bottom-bar-height) + var(--safe-bottom));background:var(--color-surface);border-top:1px solid var(--color-border);box-shadow:var(--shadow-md);z-index:30;padding-bottom:var(--safe-bottom);min-width:0;}.ad-banner{flex:0 0 auto;height:var(--ad-height);min-height:0;display:flex;align-items:center;justify-content:center;background:var(--color-surface-muted);border-top:1px dashed var(--color-border);color:var(--color-text-faint);font-size:var(--font-size-xs);letter-spacing:1px;text-transform:uppercase;user-select:none;z-index:5;}.template-attribution{flex:0 0 auto;text-align:center;padding:var(--space-1) var(--space-3);font-size:var(--font-size-xs);color:var(--color-text-muted);}.template-attribution[hidden]{display:none;}.template-attribution a{color:var(--color-primary);font-weight:700;text-decoration:none;}.template-attribution a:hover{text-decoration:underline;}.empty-state h2{color:#212529 !important;}.empty-state p{color:#666666 !important;}.canvas-stage canvas{display:block;background:var(--design-canvas-bg);box-shadow:var(--shadow-lg);border-radius:2px;touch-action:none;cursor:default;user-select:none;-webkit-user-select:none;}.ad-banner span{padding:6px 14px;border:1px dashed var(--color-border-strong);border-radius:var(--radius-sm);}.empty-state{pointer-events:auto;}.inline-text-editor{position:absolute;top:0;left:0;z-index:12;pointer-events:none;}.inline-text-editor .inline-text-input{display:block;box-sizing:border-box;margin:0;padding:0;border:1.5px dashed var(--color-primary);border-radius:4px;background:#ffffff;color:var(--color-text);text-align:center;vertical-align:middle;resize:none;overflow:hidden;outline:none;box-shadow:var(--shadow-md);font-family:inherit;line-height:1.2;caret-color:var(--color-primary);-webkit-appearance:none;appearance:none;pointer-events:auto;}.app.crop-mode .el-quickbar{display:none;}.app.crop-mode .bottom-sheet, .app.crop-mode .sheet-backdrop{visibility:hidden;}.crop-toolbar{position:absolute;top:var(--space-3);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-2);background:var(--color-surface);border:1px solid var(--color-border);border-radius:999px;box-shadow:var(--shadow-lg);z-index:47;max-width:calc(100% - var(--space-6));}.crop-size{font-size:var(--font-size-xs);font-weight:700;color:var(--color-text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;padding:0 var(--space-1);min-width:72px;text-align:center;}.crop-btn{width:var(--touch-min);height:var(--touch-min);flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-text);font-size:18px;line-height:1;cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);}.crop-btn:active{transform:translateY(1px);}.crop-confirm{background:#16a34a;border-color:#16a34a;color:#fff;}.crop-confirm:hover{background:#15803d;border-color:#15803d;}.crop-cancel:hover{background:var(--color-surface-muted);border-color:var(--color-border-strong);}.crop-aspects{display:flex;align-items:center;gap:4px;padding:0 var(--space-1);border-inline-start:1px solid var(--color-border);border-inline-end:1px solid var(--color-border);}.crop-aspect{border:1px solid transparent;background:transparent;color:var(--color-text-muted);font-size:var(--font-size-xs);font-weight:700;border-radius:999px;padding:6px 10px;cursor:pointer;white-space:nowrap;}.crop-aspect.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}.crop-btn-icon{font-size:18px;line-height:1;}.header-actions{display:flex;align-items:center;gap:var(--space-2);}.header-brand{display:flex;align-items:center;gap:var(--space-2);min-width:0;flex-shrink:0;}.brand-mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg, var(--color-primary), #7c3aed);flex-shrink:0;position:relative;}.brand-mark::after{content:"";position:absolute;inset:6px;border-radius:5px;border:2px solid rgba(255, 255, 255, 0.55);}.brand-name{font-weight:700;font-size:var(--font-size-lg);letter-spacing:-0.02em;white-space:nowrap;flex-shrink:0;}.btn-icon{width:var(--touch-min);height:var(--touch-min);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);color:var(--color-text);transition:background var(--transition-fast), color var(--transition-fast);}.btn-icon svg{width:22px;height:22px;}.btn-icon:hover:not(:disabled){background:var(--color-surface-muted);color:var(--color-primary);}.btn-accent{height:var(--touch-min);padding:0 var(--space-4);display:inline-flex;align-items:center;gap:var(--space-2);border-radius:var(--radius-md);background:var(--color-primary);color:#fff;font-weight:600;transition:background var(--transition-fast), transform var(--transition-fast);box-shadow:0 2px 8px rgba(37, 99, 235, 0.3);}.btn-accent svg{width:20px;height:20px;}.btn-accent:hover{background:var(--color-primary-hover);}.btn-accent:active{transform:translateY(1px);}.bottom-tool{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--color-text-muted);font-size:var(--font-size-xs);font-weight:600;border-radius:var(--radius-md);transition:color var(--transition-fast), background var(--transition-fast);position:relative;}.bottom-tool > span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.bottom-tool svg{width:24px;height:24px;}.bottom-tool:hover{color:var(--color-text);}.bottom-tool.active{color:var(--color-primary);}.bottom-tool.active::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:32px;height:3px;border-radius:0 0 3px 3px;background:var(--color-primary);}.el-quickbar{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);position:absolute;top:var(--space-3);left:50%;transform:translateX(-50%);z-index:46;max-width:calc(100% - var(--space-6));}.quick-btn{flex:0 0 auto;width:var(--touch-min);height:var(--touch-min);display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);}.quick-btn svg{width:22px;height:22px;}.quick-btn:hover{background:var(--color-surface-muted);color:var(--color-primary);border-color:var(--color-border-strong);}.quick-btn:active{transform:translateY(1px);}.quick-btn.danger:hover{color:var(--color-danger);background:rgba(220, 38, 38, 0.08);}.context-menu{display:none;position:fixed;z-index:60;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-2);min-width:180px;}.context-menu.open{display:block;}.context-menu button{display:flex;width:100%;align-items:center;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-size:var(--font-size-sm);color:var(--color-text);text-align:start;transition:background var(--transition-fast);}.context-menu button:hover{background:var(--color-primary-soft);color:var(--color-primary);}.toast{position:fixed;bottom:calc(var(--bottom-bar-height) + var(--safe-bottom) + var(--space-4));left:50%;transform:translateX(-50%) translateY(16px);background:var(--color-text);color:#fff;padding:var(--space-3) var(--space-5);border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-weight:500;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity var(--transition-med), transform var(--transition-med);z-index:70;max-width:calc(100% - var(--space-8));text-align:center;}.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}.toast.error{background:var(--color-danger);}.toast.success{background:#16a34a;}.lang-fab{position:absolute;top:calc(var(--header-height) + var(--space-2));inset-inline-end:var(--space-3);z-index:35;display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);font-size:var(--font-size-xs);font-weight:700;color:var(--color-text-muted);background:var(--color-surface);border:1px solid var(--color-border);border-radius:999px;box-shadow:var(--shadow-sm);cursor:pointer;}.lang-fab svg{width:16px;height:16px;}.theme-fab{position:absolute;top:calc(var(--header-height) + var(--space-2));inset-inline-start:var(--space-3);z-index:35;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;color:var(--color-text-muted);background:var(--color-surface);border:1px solid var(--color-border);border-radius:999px;box-shadow:var(--shadow-sm);cursor:pointer;}.theme-fab svg{width:18px;height:18px;}.clear-all-fab{position:absolute;bottom:var(--space-3);left:50%;transform:translateX(-50%);z-index:25;display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);font-weight:700;color:var(--color-danger);background:var(--color-surface);border:1px solid var(--color-danger);border-radius:999px;box-shadow:var(--shadow-md);cursor:pointer;}.clear-all-fab[hidden]{display:none;}.clear-all-fab svg{width:18px;height:18px;}.sheet-close{position:absolute;top:var(--space-2);inset-inline-end:var(--space-3);z-index:2;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--color-text-muted);background:var(--color-surface-muted);border:none;border-radius:999px;cursor:pointer;}.sheet-close svg{width:16px;height:16px;}.sheet-open .el-quickbar{display:none;}.gallery-modal-backdrop{position:fixed;inset:0;background:rgba(0, 0, 0, 0.5);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;}.gallery-modal{background:var(--color-surface);border-radius:20px;width:100%;max-width:600px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0, 0, 0, 0.3);}.gallery-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--color-border);flex-shrink:0;}.gallery-modal-title{font-size:17px;font-weight:800;color:var(--color-text);}.gallery-modal-close{width:36px;height:36px;border-radius:50%;border:none;background:var(--color-surface-muted);color:var(--color-text);display:flex;align-items:center;justify-content:center;cursor:pointer;}.gallery-modal-body{overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch;}.gallery-modal-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:3px;}.gallery-modal-tools{padding:8px 12px;border-bottom:1px solid var(--border-color, #e0e0e0);display:flex;flex-direction:column;gap:8px;}.gallery-search{width:100%;padding:8px 12px;border:1px solid var(--border-color, #ddd);border-radius:8px;font-size:14px;background:var(--bg-color, #fff);color:var(--text-color, #333);}.gallery-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;}.gallery-tab{flex:0 0 auto;padding:6px 14px;border:1px solid var(--border-color, #ddd);border-radius:20px;background:var(--bg-color, #fff);color:var(--text-color, #333);font-size:13px;cursor:pointer;white-space:nowrap;}.gallery-tab.active{background:var(--primary-color, #007bff);color:#fff;border-color:var(--primary-color, #007bff);}.gallery-empty{grid-column:1 / -1;text-align:center;padding:40px 20px;color:var(--text-muted, #999);font-size:14px;}.btn-show-more{width:100%;padding:12px;margin-top:8px;border:1px dashed var(--color-border);border-radius:12px;background:transparent;color:var(--color-primary);font-weight:700;font-size:14px;cursor:pointer;transition:background 0.2s;}.btn-show-more:hover{background:var(--color-primary-soft);}.gallery-preview{display:flex;flex-direction:column;}.sheet-open .el-quickbar{display:none;}.panel{display:flex;flex-direction:column;padding:var(--space-4);gap:var(--space-4);}.panel-title{font-size:var(--font-size-md);font-weight:700;color:var(--color-text);display:flex;align-items:center;gap:var(--space-2);}.panel-subtitle{font-size:var(--font-size-xs);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--space-2);}.panel-subgroup{font-size:var(--font-size-sm);font-weight:700;color:var(--color-text);margin:var(--space-3) 0 var(--space-2);padding-inline-start:var(--space-1);border-inline-start:3px solid var(--color-primary);}.collapsible-head{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;padding:var(--space-2) 0;cursor:pointer;}.collapsible-title{font-size:var(--font-size-sm);font-weight:700;color:var(--color-text);}.collapsible-chev{width:9px;height:9px;flex:0 0 auto;margin-inline-end:var(--space-2);border-right:2px solid var(--color-text-muted);border-bottom:2px solid var(--color-text-muted);transform:rotate(45deg);transition:transform 0.2s ease;}.collapsible-head.open .collapsible-chev{transform:rotate(-135deg);}.collapsible-body.collapsed{display:none;}.category-head{display:flex;align-items:center;gap:var(--space-2);border-inline-start:none;padding-inline-start:0;}.category-parent{font-weight:700;margin-top:var(--space-2);}.category-child{padding-inline-start:var(--space-3);color:var(--color-text-muted);font-size:var(--font-size-sm);}.category-thumb{width:40px;height:40px;border-radius:10px;overflow:hidden;flex:0 0 auto;background:var(--color-border);}.category-thumb img{width:100%;height:100%;object-fit:cover;}.template-thumb-img{border-radius:10px;background:var(--color-border);}.template-thumb-img img{width:100%;height:100%;object-fit:cover;}.sect{padding:var(--space-4) 0;border-bottom:1px solid var(--color-border);}.sect:last-child{border-bottom:none;padding-bottom:0;}.field{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4);}.field:last-child{margin-bottom:0;}.field-label{font-size:var(--font-size-xs);font-weight:600;color:var(--color-text-muted);}.field-row{display:flex;align-items:center;gap:var(--space-2);}.field-row > *{flex:1 1 0;}.field-row .grow-2{flex:2 1 0;}.input{width:100%;height:var(--touch-min);padding:0 var(--space-3);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);font-size:var(--font-size-sm);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);}.input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft);}.input-num{width:76px;text-align:center;flex:0 0 76px !important;}select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:36px;}[dir="rtl"] select.input{background-position:left 12px center;padding-right:var(--space-3);padding-left:36px;}.asset-cats{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-2);}.asset-cats .chip{flex:0 0 auto;padding:0 var(--space-4);}.asset-status{padding:var(--space-5);text-align:center;color:var(--color-text-muted);font-size:var(--font-size-sm);border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);}.asset-status.error{color:var(--color-danger);}.range-wrap{display:flex;align-items:center;gap:var(--space-3);}input[type="range"]{flex:1 1 auto;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:var(--color-border-strong);outline:none;}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--color-primary);border:3px solid #fff;box-shadow:0 1px 4px rgba(15, 23, 42, 0.3);cursor:pointer;}input[type="range"]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--color-primary);border:3px solid #fff;box-shadow:0 1px 4px rgba(15, 23, 42, 0.3);cursor:pointer;}input[type="range"]:disabled{opacity:0.5;}.color-field{display:flex;align-items:center;gap:var(--space-2);}input[type="color"]{width:46px;height:var(--touch-min);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);padding:3px;cursor:pointer;}.color-swatch{width:34px;height:34px;border-radius:var(--radius-md);border:2px solid var(--color-border);flex-shrink:0;}.color-swatches{display:grid;grid-template-columns:repeat(auto-fill, minmax(32px, 1fr));gap:var(--space-2);}.color-chip{width:100%;aspect-ratio:1 / 1;min-height:30px;padding:0;border-radius:var(--radius-sm);border:2px solid var(--color-border-strong);cursor:pointer;transition:border-color var(--transition-fast), transform var(--transition-fast);}.color-chip:hover{border-color:var(--color-primary);}.color-chip.active{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-soft);}.color-palette .color-field{padding-top:var(--space-1);}.color-btn{display:flex;align-items:center;gap:var(--space-2);width:100%;height:var(--touch-min);padding:var(--space-1);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);cursor:pointer;transition:border-color var(--transition-fast);}.color-btn:hover{border-color:var(--color-primary);}.color-btn-checker{width:34px;height:34px;border-radius:var(--radius-sm);border:2px solid var(--color-border);flex-shrink:0;background-image:linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);background-size:8px 8px;background-position:0 0, 0 4px, 4px -4px, -4px 0;background-color:var(--color-surface);overflow:hidden;}.color-btn-checker .color-btn-fill{display:block;width:100%;height:100%;}.color-btn-caret{color:var(--color-text-muted);margin-inline-start:auto;padding-inline-end:var(--space-2);font-size:14px;}.color-picker-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(15, 23, 42, 0.5);display:flex;align-items:center;justify-content:center;padding:var(--space-4);}.color-picker-card{width:min(420px, 100%);max-height:88vh;overflow-y:auto;background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:0 12px 48px rgba(15, 23, 42, 0.35);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);}.color-picker-head{display:flex;align-items:center;justify-content:space-between;}.color-picker-head .panel-title{margin:0;}.color-picker-close{border:none;background:none;color:var(--color-text-muted);font-size:16px;cursor:pointer;width:var(--touch-min);height:var(--touch-min);}.color-picker-current{display:flex;align-items:center;gap:var(--space-3);}.color-picker-preview{width:44px;height:44px;border-radius:var(--radius-sm);border:2px solid var(--color-border);overflow:hidden;background-image:linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);background-size:10px 10px;background-position:0 0, 0 5px, 5px -5px, -5px 0;flex-shrink:0;}.color-picker-preview-fill{display:block;width:100%;height:100%;}.color-picker-current-meta{display:flex;flex-direction:column;gap:var(--space-1);}.color-picker-hex{font-variant-numeric:tabular-nums;font-weight:600;}.color-picker-native input[type="color"]{width:100%;}.color-picker-opacity .range-wrap{align-items:center;}.color-picker-pct{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;}.color-picker-actions{display:flex;gap:var(--space-2);}.color-picker-actions .btn-primary, .color-picker-actions .btn-ghost{flex:1;}.switch-field{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-2);}.switch-field .field-label{margin:0;}.btn-primary{height:var(--touch-min);padding:0 var(--space-5);border-radius:var(--radius-md);background:var(--color-primary);color:#fff;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);transition:background var(--transition-fast), transform var(--transition-fast);box-shadow:0 2px 8px rgba(37, 99, 235, 0.3);width:100%;}.btn-primary svg{width:20px;height:20px;}.btn-primary:hover{background:var(--color-primary-hover);}.btn-primary:active{transform:translateY(1px);}.btn-ghost{height:var(--touch-min);padding:0 var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-border-strong);color:var(--color-text);font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);background:var(--color-surface);transition:background var(--transition-fast), border-color var(--transition-fast);}.btn-ghost svg{width:18px;height:18px;}.btn-ghost:hover{background:var(--color-surface-muted);border-color:var(--color-text-faint);}.btn-danger{height:var(--touch-min);padding:0 var(--space-4);border-radius:var(--radius-md);background:rgba(220, 38, 38, 0.1);color:var(--color-danger);font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);transition:background var(--transition-fast);}.btn-danger svg{width:18px;height:18px;}.btn-danger:hover{background:rgba(220, 38, 38, 0.18);}.option-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(72px, 1fr));gap:var(--space-2);}.options-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(76px, 1fr));gap:var(--space-2);}.option-cell{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-2);border-radius:var(--radius-md);border:2px solid var(--color-border);background:var(--color-surface);transition:border-color var(--transition-fast), transform var(--transition-fast);min-height:72px;}.option-cell:hover{border-color:var(--color-border-strong);}.option-cell.active{border-color:var(--color-primary);}.option-thumb{width:44px;height:44px;display:flex;align-items:center;justify-content:center;overflow:hidden;}.option-thumb img{max-width:100%;max-height:100%;object-fit:contain;}.option-label{font-size:var(--font-size-xs);color:var(--color-text-muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}.filter-strip{display:grid !important;grid-template-columns:repeat(3, 1fr) !important;gap:12px !important;overflow:visible !important;}.filter-item{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-1);background:none;border:none;padding:0;cursor:pointer;}.filter-preview{width:64px;height:64px;border-radius:12px;object-fit:cover;background:var(--color-border);border:2px solid transparent;}.filter-item.active .filter-preview{border-color:var(--color-primary);box-shadow:0 0 0 2px color-mix(in srgb, var(--color-primary) 30%, transparent);}.filter-label{font-size:var(--font-size-xs);color:var(--color-text-muted);font-weight:600;white-space:nowrap;}.filter-item.active .filter-label{color:var(--color-primary);}.template-thumb{background:linear-gradient(135deg, var(--color-primary) 0%, #7c3aed 100%);border-radius:10px;}.template-layers{color:#fff;font-size:var(--font-size-xs);font-weight:700;text-align:center;line-height:1.3;padding:0 4px;}.shape-preview{display:block;width:30px;height:30px;background:var(--color-text-muted);}.shape-rect{border-radius:2px;}.shape-rounded{border-radius:8px;}.shape-square{width:26px;height:26px;}.shape-circle{width:28px;height:28px;border-radius:50%;}.shape-ellipse{width:34px;height:22px;border-radius:50%;}.shape-triangle{width:0;height:0;background:none;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:28px solid var(--color-text-muted);}.shape-line{height:3px;border-radius:2px;transform:rotate(-45deg);width:34px;}.font-list{display:flex;flex-direction:column;gap:var(--space-1);}.font-item{display:flex;align-items:center;justify-content:center;min-height:var(--touch-min);padding:var(--space-2) var(--space-3);border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);transition:border-color var(--transition-fast);}.font-item:hover{border-color:var(--color-border-strong);}.font-item.active{border-color:var(--color-primary);}.font-sample{font-size:var(--font-size-sm);font-weight:600;line-height:1.15;width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.chip-group{display:flex;gap:var(--space-2);}.chip{flex:1 1 0;height:var(--touch-min);border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);background:var(--color-surface);font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-muted);transition:all var(--transition-fast);}.chip.active{background:var(--color-primary-soft);border-color:var(--color-primary);color:var(--color-primary);}.icon-row{display:flex;flex-wrap:wrap;gap:var(--space-2);}.icon-row .field{flex:1 1 0;margin:0;}.icon-btn{width:44px;height:44px;border-radius:var(--radius-md);border:1px solid var(--color-border-strong);display:inline-flex;align-items:center;justify-content:center;background:var(--color-surface);color:var(--color-text);transition:all var(--transition-fast);}.icon-btn svg{width:20px;height:20px;}.icon-btn:hover{background:var(--color-surface-muted);color:var(--color-primary);border-color:var(--color-primary);}.list-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--color-border);}.list-row:last-child{border-bottom:none;}.list-row .list-label{font-weight:600;font-size:var(--font-size-sm);}.list-actions{display:flex;gap:var(--space-1);}.switch{position:relative;width:46px;height:26px;flex-shrink:0;}.switch input{opacity:0;width:0;height:0;}.switch .slider{position:absolute;inset:0;border-radius:13px;background:var(--color-border-strong);transition:background var(--transition-fast);cursor:pointer;}.switch .slider::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(15, 23, 42, 0.3);transition:transform var(--transition-fast);}.switch input:checked + .slider{background:var(--color-primary);}.switch input:checked + .slider::before{transform:translateX(20px);}.frame-preview{border:1px solid var(--color-border);border-radius:var(--radius-md);background:linear-gradient(45deg, var(--color-border) 25%, transparent 25%, transparent 75%, var(--color-border) 75%), linear-gradient(45deg, var(--color-border) 25%, transparent 25%, transparent 75%, var(--color-border) 75%);background-size:12px 12px;background-position:0 0, 6px 6px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:6px;}.frame-preview img{max-width:100%;max-height:100%;object-fit:contain;}.sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;}.toggle-row{display:flex;align-items:center;justify-content:space-between;}.layers-panel{gap:var(--space-2);padding:var(--space-3);}.layers-panel .panel-title{font-size:var(--font-size-md);}.layer-list{display:flex;flex-direction:column;gap:var(--space-2);max-height:min(46vh, 420px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:var(--space-1);}.layer-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-muted);min-height:56px;}.layer-row.selected{border-color:var(--color-primary);background:var(--color-primary-soft);}.layer-row.hidden-layer .layer-thumb{opacity:0.4;}.layer-main{display:flex;align-items:center;gap:var(--space-2);flex:1 1 0;min-width:0;padding:var(--space-1);border-radius:var(--radius-sm);cursor:pointer;}.layer-thumb{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--radius-sm);background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-muted);font-size:var(--font-size-xs);font-weight:700;}.layer-thumb img{width:100%;height:100%;object-fit:cover;display:block;}.layer-info{min-width:0;flex:1 1 auto;}.layer-name{font-size:var(--font-size-sm);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.layer-name.faded{opacity:0.5;}.layer-name.locked-name::after{content:' 🔒';font-size:var(--font-size-xs);}.layer-meta{font-size:var(--font-size-xs);color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.layer-actions{display:flex;align-items:center;gap:var(--space-1);flex:0 0 auto;margin-inline-start:auto;padding:var(--space-1);}.layer-icon-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-muted);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast);}.layer-icon-btn:hover{background:var(--color-border);color:var(--color-text);}.layer-icon-btn.on{color:var(--color-primary);}.layer-icon-btn.off{color:var(--color-text-faint);}.layer-options{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--space-2);flex:1 1 100%;width:100%;padding:var(--space-2) 0 0;border-top:1px solid var(--color-border);background:transparent;}.layer-option{display:flex;align-items:center;justify-content:center;gap:var(--space-1);min-height:36px;padding:0 var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-muted);color:var(--color-text);font-size:var(--font-size-xs);font-weight:600;cursor:pointer;}.layer-option:disabled{opacity:0.4;cursor:default;}.layer-option:not(:disabled):hover{border-color:var(--color-primary);color:var(--color-primary);}.layer-option-icon{display:inline-flex;align-items:center;}.layer-rename-input{width:100%;font-size:var(--font-size-sm);}.panel-notice{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-muted);color:var(--color-text-muted);font-size:var(--font-size-xs);font-weight:600;}.selection-panel{gap:var(--space-3);}.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-2);}.btn-row-item{display:inline-flex;align-items:center;gap:var(--space-1);flex:1 1 auto;justify-content:center;min-height:40px;}.btn-row-item:disabled{opacity:0.45;cursor:default;}.btn-row-icon{display:inline-flex;align-items:center;}.layer-name-line{display:flex;align-items:center;gap:var(--space-1);min-width:0;}.layer-group-tag{flex-shrink:0;padding:0 6px;border-radius:999px;background:var(--color-primary-soft);color:var(--color-primary);font-size:10px;font-weight:700;line-height:16px;}.text-sheet{display:flex;flex-direction:column;gap:24px;padding:24px 20px;background:var(--color-surface);border-radius:24px 24px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,0.08);}.text-sheet .panel-title-icon{display:flex;align-items:center;gap:8px;}.text-sheet .sect-padded{padding:0 8px;}.text-quick{display:flex;flex-direction:column;gap:20px;}.text-quick-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--color-border);padding-bottom:20px;}.text-sheet .field{display:flex;flex-direction:column;gap:10px;}.text-sheet .field-label-row{display:flex;align-items:center;justify-content:space-between;padding:0 4px;}.text-sheet .field-label{font-weight:600;font-size:var(--font-size-md);color:var(--color-text-muted);}.text-sheet .slider-val{background:var(--color-primary-soft);color:var(--color-primary);font-weight:700;padding:4px 10px;border-radius:8px;font-size:var(--font-size-sm);min-width:36px;text-align:center;}.text-sheet .range-wrap-single input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:var(--color-border);outline:none;cursor:pointer;}.text-sheet .range-wrap-single input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--color-primary);border:2px solid #fff;box-shadow:0 2px 6px rgba(124, 58, 237, 0.4);cursor:pointer;transition:transform 0.1s;}.text-sheet .range-wrap-single input[type="range"]::-webkit-slider-thumb:active{transform:scale(1.1);}.text-sheet .range-wrap-single input[type="range"]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--color-primary);border:2px solid #fff;box-shadow:0 2px 6px rgba(124, 58, 237, 0.4);cursor:pointer;}.text-sheet .color-btn{width:48px;height:48px;border-radius:50%;border:2px solid var(--color-border);padding:0;overflow:hidden;flex-shrink:0;position:relative;cursor:pointer;background:var(--color-text);box-shadow:0 1px 2px rgba(0,0,0,0.05);}.text-sheet .color-btn-fill{position:absolute;inset:0;border-radius:50%;}.text-sheet .color-btn-caret, .text-sheet .color-btn-checker{display:none;}.text-sheet .chip-group{display:flex;background:var(--color-surface-muted);border-radius:12px;padding:4px;gap:4px;flex:1;}.text-sheet .chip-group .chip{flex:1;border:none;background:transparent;border-radius:8px;padding:10px 8px;font-weight:600;color:var(--color-text-muted);cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;}.text-sheet .chip-group .chip.active{background:#fff;color:var(--color-primary);box-shadow:0 1px 3px rgba(0,0,0,0.1);font-weight:700;}.text-accordion{border:1px solid var(--color-border);border-radius:16px;background:var(--color-surface-muted);overflow:hidden;transition:all 0.3s ease;}.text-accordion-head{display:flex;align-items:center;justify-content:space-between;padding:16px;cursor:pointer;font-weight:700;font-size:var(--font-size-md);color:var(--color-text);list-style:none;user-select:none;}.text-accordion-head::-webkit-details-marker{display:none;}.text-accordion-head::after{content:'';width:8px;height:8px;border-left:2px solid var(--color-text-muted);border-bottom:2px solid var(--color-text-muted);transform:rotate(-45deg);transition:transform 0.3s ease;flex-shrink:0;margin-inline-start:10px;}.text-accordion[open] .text-accordion-head::after{transform:rotate(135deg);}.text-accordion-title{display:flex;align-items:center;gap:10px;}.text-accordion-body{padding:16px;padding-top:16px;display:flex;flex-direction:column;gap:16px;border-top:1px solid var(--color-border);margin-top:8px;}.text-sheet .switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0;}.text-sheet .switch input{opacity:0;width:0;height:0;}.text-sheet .switch .slider{position:absolute;inset:0;border-radius:99px;background:#D1D5DB;transition:0.3s;cursor:pointer;}.text-sheet .switch .slider::before{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;inset-inline-start:3px;transition:0.3s;box-shadow:0 1px 2px rgba(0,0,0,0.2);}.text-sheet .switch input:checked + .slider{background:var(--color-primary);}.text-sheet .switch input:checked + .slider::before{transform:translateX(-20px);}[dir="ltr"] .text-sheet .switch input:checked + .slider::before{transform:translateX(20px);}.text-sheet .btn-danger{width:100%;padding:14px;border-radius:16px;background:#FEF2F2;color:var(--color-danger);font-weight:700;font-size:var(--font-size-md);border:none;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;margin-top:8px;transition:background-color 0.2s ease;}.text-sheet .btn-danger:hover{background:#FEE2E2;}.text-sheet .btn-danger:active{transform:scale(0.98);}.text-sheet .icon-row{display:flex;gap:8px;flex-wrap:wrap;}.text-sheet .icon-row button{width:44px;height:44px;border-radius:12px;background:var(--color-surface-muted);border:none;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);cursor:pointer;transition:all 0.2s ease;}.text-sheet .icon-row button:hover{background:#E5E7EB;color:var(--color-text);}.text-sheet .icon-row button:active{transform:scale(0.95);}.text-sheet .btn-primary{display:flex;align-items:center;justify-content:center;gap:8px;transition:transform 0.2s ease, background-color 0.2s ease;}.text-sheet .btn-primary:hover{background:#0056b3;}.text-sheet .select-input{outline:none;transition:border-color 0.2s, box-shadow 0.2s;}.text-sheet .select-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-soft);}[data-panel="frames"] .panel-subtitle, [data-panel="frames"] .collapsible-title{font-size:var(--font-size-sm);font-weight:700;}[data-panel="frames"] .option-label{font-size:var(--font-size-sm);}.template-loader-overlay{position:absolute;inset:0;background:rgba(255, 255, 255, 0.85);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.2s, visibility 0.2s;z-index:100;}.template-loader-overlay.visible{opacity:1;visibility:visible;pointer-events:all;}.template-loader-card{text-align:center;padding:24px;}.template-loader-spinner{width:48px;height:48px;margin:0 auto 16px;border:4px solid #e5e7eb;border-top-color:#2563eb;border-radius:50%;animation:template-spin 0.8s linear infinite;}@keyframes template-spin{to{transform:rotate(360deg);}}.template-loader-bar{width:200px;height:8px;margin:0 auto 12px;background:#e5e7eb;border-radius:4px;overflow:hidden;}.template-loader-fill{height:100%;width:0%;background:#2563eb;border-radius:4px;transition:width 0.2s;}.template-loader-text{font-size:14px;color:#4b5563;}.template-loader-overlay{position:absolute;inset:0;background:rgba(255, 255, 255, 0.85);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.2s, visibility 0.2s;z-index:100;}.template-loader-overlay.visible{opacity:1;visibility:visible;pointer-events:all;}.template-loader-card{text-align:center;padding:24px;}.template-loader-spinner{width:48px;height:48px;margin:0 auto 16px;border:4px solid #e5e7eb;border-top-color:#2563eb;border-radius:50%;animation:template-spin 0.8s linear infinite;}@keyframes template-spin{to{transform:rotate(360deg);}}.template-loader-bar{width:200px;height:8px;margin:0 auto 12px;background:#e5e7eb;border-radius:4px;overflow:hidden;}.template-loader-fill{height:100%;width:0%;background:#2563eb;border-radius:4px;transition:width 0.2s;}.template-loader-text{font-size:14px;color:#4b5563;}[data-theme="dark"] .current-size-card{background:var(--color-bg-elevated);}[data-theme="dark"] .current-size-card .current-size-text h3, [data-theme="dark"] .current-size-card .current-size-text p{color:var(--color-text-on-light) !important;}[data-theme="dark"] .panel .sect > .panel-subtitle, [data-theme="dark"] .panel .sect > .field-label, [data-theme="dark"] .panel .field > .field-label, [data-theme="dark"] .panel .panel-section > .panel-title, [data-theme="dark"] .panel .panel-section-title{color:var(--color-text) !important;}.bottom-sheet{position:fixed;left:0;right:0;bottom:var(--kb-inset);background:var(--color-surface);border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:var(--shadow-sheet);z-index:50;transform:translateY(100%);transition:transform var(--transition-med);max-height:var(--sheet-max);display:flex;flex-direction:column;visibility:hidden;padding-bottom:var(--safe-bottom);}.bottom-sheet.open{transform:translateY(0);visibility:visible;}.sheet-handle{width:40px;height:4px;border-radius:2px;background:var(--color-border-strong);margin:var(--space-3) auto var(--space-1);flex-shrink:0;}.sheet-backdrop{position:fixed;inset:0 0 var(--kb-inset) 0;background:rgba(15, 23, 42, 0.4);opacity:0;pointer-events:none;transition:opacity var(--transition-med);z-index:45;}.sheet-backdrop.open{opacity:1;pointer-events:auto;}.filter-chip{height:38px;padding:0 var(--space-3);border-radius:19px;border:1px solid var(--color-border-strong);background:var(--color-surface);font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-muted);white-space:nowrap;transition:all var(--transition-fast);flex-shrink:0;}.filter-chip.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}.chip-scroll{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-2);}.size-presets{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--space-2);}.size-preset{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-1);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);font-size:var(--font-size-xs);font-weight:600;color:var(--color-text-muted);transition:all var(--transition-fast);}.size-preset .ratio-box{width:28px;height:28px;border:2px solid currentColor;border-radius:4px;opacity:0.7;}.size-preset:hover{border-color:var(--color-primary);color:var(--color-primary);}.size-preset.active{background:var(--color-primary-soft);border-color:var(--color-primary);color:var(--color-primary);}.size-preset-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.custom-size-row{display:flex;gap:var(--space-2);margin-top:var(--space-2);}.custom-size-field{flex:1 1 0;min-width:0;}.custom-size-field .input-num{width:100%;}.spacer{flex:1 1 auto;}.pd-modal{position:fixed;inset:0;background:rgba(15, 23, 42, 0.45);display:flex;align-items:center;justify-content:center;padding:var(--space-4);z-index:60;}.pd-modal[hidden]{display:none;}.pd-modal-card{width:min(560px, 100%);max-height:min(80vh, 720px);display:flex;flex-direction:column;background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;}.confirm-backdrop{position:fixed;inset:0;background:rgba(15, 23, 42, 0.45);display:flex;align-items:center;justify-content:center;padding:var(--space-4);z-index:80;}.confirm-dialog{width:min(340px, 100%);background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-5);text-align:center;}.confirm-message{margin:0 0 var(--space-4);color:var(--color-text);font-size:var(--font-size-base);line-height:1.6;}.confirm-actions{display:flex;gap:var(--space-2);justify-content:center;}.confirm-actions .btn-primary, .confirm-actions .btn-ghost{flex:1;}.pd-modal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4);border-bottom:1px solid var(--color-border);}.pd-modal-title{font-size:var(--font-size-lg);font-weight:700;}.pd-modal-head-actions{display:flex;align-items:center;gap:var(--space-2);}.pd-project-list{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);}.pd-project{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-muted);}.pd-project.current{border-color:var(--color-primary);background:var(--color-primary-soft);}.pd-project-info{display:flex;align-items:center;gap:var(--space-3);min-width:0;}.pd-project-info-edit{flex:1 1 auto;}.pd-project-info-icon{display:flex;align-items:center;color:var(--color-text-muted);flex-shrink:0;}.pd-project-info-text{min-width:0;}.pd-project-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.pd-project-meta{font-size:var(--font-size-xs);color:var(--color-text-muted);}.pd-badge{display:inline-block;margin-inline-start:var(--space-2);padding:2px var(--space-2);border-radius:999px;background:var(--color-primary);color:#fff;font-size:var(--font-size-xs);font-weight:600;}.pd-project-actions{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;}.pd-modal-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-top:1px solid var(--color-border);background:var(--color-surface-muted);}.pd-modal-note{font-size:var(--font-size-xs);color:var(--color-text-muted);}.tg-modal{position:fixed;inset:0;background:rgba(15, 23, 42, 0.5);display:flex;align-items:center;justify-content:center;padding:var(--space-4);z-index:70;}.tg-card{width:min(920px, 100%);max-height:min(92vh, 860px);display:flex;flex-direction:column;background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;}.tg-head{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);}.tg-title{font-size:var(--font-size-lg);font-weight:700;white-space:nowrap;}.tg-search{flex:1 1 auto;height:40px;padding:0 var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);font-size:var(--font-size-sm);min-width:0;}.tg-chips{display:flex;gap:var(--space-2);padding:var(--space-2) var(--space-4);overflow-x:auto;border-bottom:1px solid var(--color-border);scrollbar-width:none;}.tg-chips-sub{padding-top:var(--space-1);}.tg-chips-sub:empty{display:none;}.tg-chips-sub .tg-chip{height:30px;font-size:12px;}.tg-chips::-webkit-scrollbar{display:none;}.tg-chip{flex:0 0 auto;height:36px;padding:0 var(--space-4);border-radius:999px;border:1px solid var(--color-border);background:var(--color-bg);font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-muted);}.tg-chip.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}.tg-grid-wrap{flex:1 1 auto;overflow-y:auto;padding:var(--space-4);min-height:0;}.tg-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:var(--space-2);}@media (min-width:700px){.tg-grid{grid-template-columns:repeat(5, 1fr);gap:var(--space-3);}}@media (min-width:1000px){.tg-grid{grid-template-columns:repeat(6, 1fr);}}@media (max-width:480px){.tg-modal{padding:var(--space-2);}.tg-card{max-height:94vh;}.tg-head{padding:var(--space-2) var(--space-3);}.tg-grid-wrap{padding:var(--space-2);}.tg-name{font-size:11px;}}.tg-card-btn{display:flex;flex-direction:column;gap:var(--space-1);padding:0;border:none;background:none;cursor:pointer;text-align:center;border-radius:var(--radius-md);}.tg-thumb{display:block;aspect-ratio:3 / 4;border-radius:var(--radius-md);overflow:hidden;background:var(--color-bg);border:1px solid var(--color-border);}.tg-thumb-img{width:100%;height:100%;object-fit:cover;display:block;}.tg-thumb-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:32px;}.tg-name{font-size:var(--font-size-xs);color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 var(--space-1);}.tg-empty{grid-column:1 / -1;text-align:center;color:var(--color-text-muted);padding:var(--space-6) 0;}.tg-sentinel{height:1px;}.pd-btn{min-height:38px;}.pd-icon-btn{min-width:38px;min-height:38px;display:inline-flex;align-items:center;justify-content:center;}.pd-icon-btn.danger{color:var(--color-danger);}@media (max-width:1023px){.pd-modal{padding:0;align-items:flex-end;}.pd-modal-card{width:100%;max-height:88vh;border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding-bottom:var(--safe-bottom);}.pd-project{flex-wrap:wrap;}}.panel[data-panel="size"] .brand-icon{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:20px;flex:0 0 auto;box-shadow:0 2px 8px rgba(0,0,0,0.15);}.panel[data-panel="size"] .size-preset-dims{font-size:10px;color:#888;direction:ltr;}.panel[data-panel="size"] .crop-subtle-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;font-size:13px;border:1px solid #e0e0e0;border-radius:10px;background:#fafafa;color:#333;}.panel[data-panel="size"] .crop-subtle-btn .crop-btn-icon{font-size:14px;}.panel[data-panel="size"] .current-size-card{display:flex;align-items:center;justify-content:space-between;background:#f8f7ff;border-radius:16px;padding:14px 16px;margin-bottom:8px;}.panel[data-panel="size"] .current-size-label{font-size:13px;color:#666;}.panel[data-panel="size"] .current-size-value{font-size:15px;font-weight:700;color:#1a1a1a;direction:ltr;}.panel[data-panel="size"] .apply-size-btn{padding:10px 24px;font-size:14px;white-space:nowrap;}.size-panel{font-size:0.9rem;}.size-panel .panel-subtitle{font-size:0.9rem;font-weight:700;margin-bottom:10px;color:#111827;}.size-panel .current-size-card{background:#f5f0ff;border-radius:14px;padding:14px 16px;margin-bottom:10px;}.size-panel .doc-icon{width:28px;height:38px;border:2px solid #8b3dff;border-radius:5px;background:white;flex-shrink:0;}.size-panel .current-size-text h3{font-size:0.9rem;margin:0 0 2px 0;}.size-panel .current-size-text p{font-size:0.9rem;margin:0;}.size-panel .custom-size-row{display:flex;gap:8px;align-items:stretch;}.size-panel .input-group{flex:1.5;position:relative;}.size-panel .input-group label{position:absolute;top:-9px;right:10px;background:white;padding:0 5px;font-size:0.8rem;color:#6b7280;z-index:1;}.size-panel .input-group .input-num{width:100%;font-size:1rem;padding:12px;text-align:center;border:1.5px solid #d1d5db;border-radius:10px;}.size-panel .apply-size-btn{flex:1;font-size:0.95rem !important;padding:12px 16px !important;}.size-panel .vertical-list{display:flex;flex-direction:column;gap:8px;}.size-panel .vertical-list .size-preset{display:flex;flex-direction:row;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:none;width:100%;}.size-panel .sect:nth-of-type(4) .vertical-list .size-preset{background:#e8f0fe;}.size-panel .sect:nth-of-type(5) .vertical-list .size-preset{background:#f3e8ff;}.size-panel .vertical-list .brand-icon{width:40px;height:40px;font-size:1.2rem;flex-shrink:0;}.size-panel .vertical-list .size-preset-label{font-size:0.9rem;font-weight:600;flex:1;}.size-panel .vertical-list .size-preset-dims{font-size:0.85rem;color:#4b5563;}.size-panel .vertical-list .size-preset.active{box-shadow:0 0 0 2px #8b3dff;}.size-panel .radio-group{display:flex;gap:10px;margin-bottom:10px;}.size-panel .radio-card{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:12px;border:2px solid #e5e7eb;background:white;cursor:pointer;transition:all 0.15s ease;}.size-panel .radio-card.selected{border-color:#8b3dff;background:#f5f0ff;}.size-panel .radio-card input[type="radio"]{accent-color:#8b3dff;width:18px;height:18px;margin:0;}.size-panel .radio-card .radio-label{font-size:0.9rem;font-weight:600;color:#111827;}.size-panel .crop-subtle-btn{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;background:#f3f4f6;color:#111827;border:1px solid #e5e7eb;font-size:0.9rem;font-weight:600;width:100%;cursor:pointer;}.size-panel .crop-subtle-btn:hover{background:#e5e7eb;}.size-panel .crop-subtle-btn .crop-btn-icon{font-size:1.1rem;color:#6b7280;}.drawer{position:fixed;top:0;bottom:0;width:220px;max-width:85vw;background:var(--color-surface, #fff);z-index:1000;display:flex;flex-direction:column;transition:transform 0.3s ease;box-shadow:0 0 20px rgba(0,0,0,0.15);}[dir="rtl"] .drawer{right:0;transform:translateX(100%);border-radius:20px 0 0 20px;}[dir="rtl"] .drawer.open{transform:translateX(0);}[dir="ltr"] .drawer{left:0;transform:translateX(-100%);border-radius:0 20px 20px 0;}[dir="ltr"] .drawer.open{transform:translateX(0);}.drawer-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);z-index:999;opacity:0;pointer-events:none;transition:opacity 0.3s ease;}.drawer-backdrop.open{opacity:1;pointer-events:auto;}#app{transition:transform 0.3s ease;}[dir="rtl"] #app.drawer-open{transform:translateX(-220px);}[dir="ltr"] #app.drawer-open{transform:translateX(220px);}@media (max-width:330px){[dir="rtl"] #app.drawer-open{transform:translateX(-85vw);}[dir="ltr"] #app.drawer-open{transform:translateX(85vw);}}.drawer-header{display:flex;align-items:center;gap:12px;padding:20px 16px;border-bottom:1px solid var(--color-border, #e5e7eb);}.drawer-logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg, #8b3dff, #6c2bd9);color:white;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;}.drawer-title{flex:1;font-weight:800;font-size:0.95rem;}.drawer-close{width:32px;height:32px;border-radius:50%;border:none;background:#f3f4f6;cursor:pointer;font-size:1rem;color:#6b7280;}.drawer-items{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;}.drawer-item{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:12px;border:none;background:none;font-size:0.9rem;font-weight:600;color:var(--color-text, #111827);cursor:pointer;text-align:start;width:100%;}.drawer-item:hover{background:#f3f4f6;}.drawer-item .drawer-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;}.drawer-footer{padding:16px;border-top:1px solid var(--color-border, #e5e7eb);display:flex;flex-direction:column;gap:12px;}.drawer-setting{display:flex;align-items:center;gap:12px;font-size:0.95rem;font-weight:600;}.drawer-setting .drawer-icon{font-size:1.2rem;}.drawer-setting span:nth-child(2){flex:1;}.toggle-switch{position:relative;width:48px;height:28px;flex-shrink:0;}.toggle-switch input{opacity:0;width:0;height:0;}.toggle-slider{position:absolute;inset:0;border-radius:28px;background:#d1d5db;transition:0.2s;cursor:pointer;}.toggle-slider:before{content:'';position:absolute;width:22px;height:22px;border-radius:50%;background:white;top:3px;left:3px;transition:0.2s;box-shadow:0 2px 4px rgba(0,0,0,0.2);}.toggle-switch input:checked + .toggle-slider{background:#8b3dff;}.toggle-switch input:checked + .toggle-slider:before{transform:translateX(20px);}[dir="rtl"] .toggle-switch input:checked + .toggle-slider:before{transform:translateX(-20px);}.lang-btn{padding:8px 16px;border-radius:20px;border:1px solid #e5e7eb;background:white;font-size:0.85rem;font-weight:600;cursor:pointer;}.lang-btn:hover{border-color:#8b3dff;}[data-theme="dark"] .drawer{background:#1f2937;color:#f9fafb;}[data-theme="dark"] .drawer-title{color:#f9fafb;}[data-theme="dark"] .drawer-item{color:#f9fafb;}[data-theme="dark"] .drawer-item:hover{background:#374151;}[data-theme="dark"] .drawer-header{border-bottom-color:#374151;}[data-theme="dark"] .drawer-footer{border-top-color:#374151;}[data-theme="dark"] .drawer-setting{color:#f9fafb;}[data-theme="dark"] .drawer-close{background:#374151;color:#d1d5db;}[data-theme="dark"] .lang-btn{background:#374151;border-color:#4b5563;color:#f9fafb;}.app-header{display:flex;align-items:center;gap:8px;}#btnMenu{flex-shrink:0;}.header-brand{flex-shrink:0;}.header-actions{flex:1;display:flex;align-items:center;gap:8px;justify-content:flex-end;}[dir="rtl"] #btnUndo svg, [dir="rtl"] #btnRedo svg{transform:scaleX(-1);}.drawer{font-family:inherit;}.drawer-item{font-size:0.85rem !important;}.drawer-title{font-size:0.9rem !important;}.drawer-setting{font-size:0.85rem !important;}[data-theme="dark"] .drawer-footer{background:#1f2937;border-top:1px solid #374151;}[data-theme="dark"] .drawer-setting .drawer-icon{color:#f9fafb;}.drawer-items{flex:1 1 auto !important;min-height:0 !important;overflow-y:auto !important;}.drawer-footer{flex-shrink:0 !important;min-height:fit-content;}.drawer-header{flex-shrink:0 !important;}.toggle-switch{position:relative;width:44px;height:24px;flex-shrink:0;display:inline-block;}.toggle-switch input{opacity:0;width:0;height:0;position:absolute;}.toggle-slider{position:absolute;inset:0;border-radius:24px;background:#d1d5db;transition:background 0.2s;cursor:pointer;}.toggle-slider:before{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:white;top:3px;inset-inline-start:3px;transition:transform 0.2s;box-shadow:0 1px 3px rgba(0,0,0,0.3);}.toggle-switch input:checked + .toggle-slider{background:#8b3dff;}.toggle-switch input:checked + .toggle-slider:before{transform:translateX(20px);}[dir="rtl"] .toggle-switch input:checked + .toggle-slider:before{transform:translateX(-20px);}.drawer-setting span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.drawer{height:100vh;height:100dvh;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;}.drawer-backdrop{height:100vh;height:100dvh;}.brand-logo{width:32px;height:32px;border-radius:50%;flex-shrink:0;object-fit:cover;}.header-brand{display:flex;align-items:center;gap:8px;}.panel .add-image-dashed{width:100%;padding:20px 16px;border:2px dashed var(--border-color, #d1d5db);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:transparent;color:var(--text-secondary, #6b7280);font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s ease;}.panel .add-image-dashed:hover{border-color:var(--accent, #3b82f6);color:var(--accent, #3b82f6);background:color-mix(in srgb, var(--accent, #3b82f6) 5%, transparent);}.panel .add-image-dashed svg{width:28px;height:28px;}[data-theme="dark"] .panel .add-image-dashed{border-color:#4b5563;color:#9ca3af;}[data-theme="dark"] .panel .add-image-dashed:hover{border-color:#3b82f6;color:#3b82f6;}.panel .img-section-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-secondary, #6b7280);margin-bottom:12px;}.panel .img-card{background:var(--bg-secondary, #f3f4f6);border-radius:12px;padding:12px;}[data-theme="dark"] .panel .img-card{background:#252525;}.panel .transform-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:8px;}.panel .transform-grid .icon-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:8px;background:var(--bg-secondary, #f3f4f6);font-size:10px;}[data-theme="dark"] .panel .transform-grid .icon-btn{background:#252525;}.panel .transform-grid .icon-btn:hover{background:var(--bg-hover, #e5e7eb);}[data-theme="dark"] .panel .transform-grid .icon-btn:hover{background:#374151;}.panel .ratio-chips{display:flex;flex-wrap:wrap;gap:8px;}.panel .ratio-chip{padding:6px 16px;border-radius:999px;background:var(--bg-secondary, #f3f4f6);font-size:12px;font-weight:600;cursor:pointer;transition:all 0.2s;}[data-theme="dark"] .panel .ratio-chip{background:#252525;color:#d1d5db;}.panel .ratio-chip.active{background:var(--accent, #3b82f6);color:white;}.panel .filter-strip{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;}.panel .filter-strip::-webkit-scrollbar{display:none;}.panel .filter-item{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;flex-shrink:0;opacity:0.7;transition:opacity 0.2s;}.panel .filter-item:hover, .panel .filter-item.active{opacity:1;}.panel .filter-item .filter-thumb{width:56px;height:56px;border-radius:50%;overflow:hidden;}.panel .filter-item.active .filter-thumb{outline:2px solid var(--accent, #3b82f6);outline-offset:2px;}.panel .filter-item .filter-label{font-size:12px;}.panel .filter-item.active .filter-label{color:var(--accent, #3b82f6);font-weight:600;}.panel .shape-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;}.panel .shape-grid button{padding:10px;display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:8px;background:var(--bg-secondary, #f3f4f6);font-size:12px;}[data-theme="dark"] .panel .shape-grid button{background:#252525;color:#d1d5db;}.panel .shape-grid button.active{background:var(--accent, #3b82f6);color:white;}.panel .img-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:8px;margin-bottom:12px;}.panel .img-grid-item{aspect-ratio:1;border-radius:10px;overflow:hidden;border:2px solid transparent;cursor:pointer;padding:0;background:var(--bg-secondary, #f3f4f6);}.panel .img-grid-item img{width:100%;height:100%;object-fit:cover;}.panel .img-grid-item.selected{border-color:var(--accent, #3b82f6);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent, #3b82f6) 30%, transparent);}.panel .replace-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:linear-gradient(135deg, #8b5cf6, #3b82f6);color:white;font-size:12px;font-weight:600;border:none;cursor:pointer;transition:transform 0.15s, box-shadow 0.15s;}.panel .replace-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(139, 92, 246, 0.4);}.panel .replace-btn svg{width:16px;height:16px;}.panel .transform-grid .icon-btn:nth-child(1) svg{color:#f59e0b;}.panel .transform-grid .icon-btn:nth-child(2) svg{color:#f59e0b;}.panel .transform-grid .icon-btn:nth-child(3) svg{color:#8b5cf6;}.panel .transform-grid .icon-btn:nth-child(4) svg{color:#8b5cf6;}.panel .transform-grid .icon-btn:nth-child(5) svg{color:#10b981;}.panel .transform-grid .icon-btn:nth-child(6) svg{color:#3b82f6;}.panel .transform-grid .icon-btn:nth-child(7) svg{color:#3b82f6;}.panel .transform-grid .icon-btn:nth-child(8) svg{color:#ef4444;}.panel .section-header-split{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}.panel .section-header-split .panel-subtitle{margin-bottom:0;}.panel .reset-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--bg-secondary, #f3f4f6);border:none;cursor:pointer;color:var(--text-secondary, #6b7280);transition:all 0.2s;}.panel .reset-btn:hover{background:#fef3c7;color:#f59e0b;transform:rotate(-30deg);}[data-theme="dark"] .panel .reset-btn{background:#252525;}.panel .field-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}.panel .slider-val{font-size:12px;font-weight:600;color:var(--accent, #3b82f6);min-width:44px;text-align:end;}.panel .range-wrap-single input[type="range"]{width:100%;}.panel .shape-field .chip-group{display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;}.panel .shape-field .chip{padding:12px 8px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:600;border:2px solid transparent;transition:all 0.2s;}.panel .shape-field .chip:nth-child(1){background:#dbeafe;color:#1d4ed8;}.panel .shape-field .chip:nth-child(2){background:#fce7f3;color:#be185d;}.panel .shape-field .chip:nth-child(3){background:#d1fae5;color:#047857;}[data-theme="dark"] .panel .shape-field .chip:nth-child(1){background:#1e3a8a33;color:#93c5fd;}[data-theme="dark"] .panel .shape-field .chip:nth-child(2){background:#83184333;color:#f9a8d4;}[data-theme="dark"] .panel .shape-field .chip:nth-child(3){background:#065f4633;color:#6ee7b7;}.panel .shape-field .chip.active{border-color:currentColor;box-shadow:0 2px 8px rgba(0,0,0,0.15);transform:scale(1.02);}.panel .section-title-with-icon{display:inline-flex;align-items:center;gap:8px;font-weight:600;}.panel .section-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;}.panel .section-icon.border-icon{background:#dbeafe;color:#2563eb;}.panel .section-icon.shadow-icon{background:#e0e7ff;color:#4f46e5;}[data-theme="dark"] .panel .section-icon.border-icon{background:#1e3a8a55;color:#93c5fd;}[data-theme="dark"] .panel .section-icon.shadow-icon{background:#312e8155;color:#a5b4fc;}.panel .delete-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;margin-top:16px;border-radius:12px;background:#fef2f2;color:#dc2626;font-size:14px;font-weight:600;border:1px solid #fecaca;cursor:pointer;transition:all 0.2s;}.panel .delete-btn:hover{background:#fee2e2;border-color:#fca5a5;}[data-theme="dark"] .panel .delete-btn{background:#7f1d1d33;border-color:#7f1d155;color:#fca5a5;}.panel .delete-btn svg{width:18px;height:18px;}.panel[data-panel="image"] .panel-subtitle, .panel .img-section-title{font-size:0.9rem !important;font-weight:700;}.panel[data-panel="image"] .field-label, .panel .field-label-row .field-label{font-size:0.85rem !important;font-weight:600;}.panel[data-panel="image"]{font-size:0.9rem;}.panel .transform-grid .icon-btn svg{width:22px;height:22px;flex-shrink:0;}.panel .transform-grid .icon-btn:nth-child(3), .panel .transform-grid .icon-btn:nth-child(4){background:#f3e8ff;}[data-theme="dark"] .panel .transform-grid .icon-btn:nth-child(3), [data-theme="dark"] .panel .transform-grid .icon-btn:nth-child(4){background:#4c1d9533;}.panel .transform-grid .icon-btn:nth-child(3) svg, .panel .transform-grid .icon-btn:nth-child(4) svg{color:#7c3aed !important;stroke-width:2;}.panel .transform-grid .icon-btn span{font-size:10px;font-weight:600;color:var(--text-primary, #111827);}[data-theme="dark"] .panel .transform-grid .icon-btn span{color:#e5e7eb;}.panel .replace-btn{margin-inline-start:12px;}.panel .add-image-dashed svg{color:var(--accent, #3b82f6);transition:transform 0.2s ease, color 0.2s ease;}.panel .add-image-dashed:hover svg, .panel .add-image-dashed:active svg{transform:scale(1.15);color:#2563eb;}.panel .add-image-dashed:active{transform:scale(0.98);background:color-mix(in srgb, var(--accent, #3b82f6) 10%, transparent);}@media (hover:none){.panel .add-image-dashed:active svg{transform:scale(1.2);}}.suggest-backdrop{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;padding:16px;}.suggest-card{background:var(--card-bg, #fff);border-radius:16px;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,0.2);}.suggest-head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border, #eee);}.suggest-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-muted, #666);}.suggest-body{padding:16px;display:flex;flex-direction:column;gap:8px;}.suggest-body .field-label{margin-top:8px;font-weight:600;}.suggest-input, .suggest-textarea{width:100%;padding:10px 12px;border:1px solid var(--border, #ddd);border-radius:8px;font-size:15px;background:var(--input-bg, #fff);color:var(--text, #222);}.suggest-textarea{resize:vertical;min-height:80px;}.suggest-captcha-row{display:flex;gap:12px;align-items:center;}.suggest-captcha-code{font-family:monospace;font-size:24px;font-weight:bold;letter-spacing:8px;padding:8px 16px;background:var(--bg-muted, #f3f4f6);border-radius:8px;color:var(--text-primary, #1f2937);user-select:none;direction:ltr;}.suggest-captcha-row .suggest-input{flex:1;}.suggest-voice-row{display:flex;gap:8px;}.suggest-record-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;}.suggest-record-btn.recording{background:#fee2e2;border-color:#ef4444;color:#b91c1c;animation:pulse 1.5s infinite;}@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.7;}}.suggest-record-status{font-size:13px;color:var(--text-muted, #666);min-height:18px;}.suggest-audio-preview{width:100%;margin-top:8px;}.suggest-error{background:#fee2e2;color:#b91c1c;padding:10px 12px;border-radius:8px;font-size:14px;}.suggest-actions{display:flex;gap:12px;padding:16px;border-top:1px solid var(--border, #eee);}.suggest-actions button{flex:1;}.suggest-notice{text-align:center;padding:32px 24px;}.suggest-notice-icon{font-size:48px;margin-bottom:16px;}.suggest-notice-icon.suggest-success{font-size:56px;}.suggest-notice-title{font-size:20px;font-weight:bold;margin-bottom:12px;color:#1f2937;}.suggest-notice-text{font-size:15px;line-height:1.6;margin-bottom:20px;color:#4b5563;}.websearch-box{margin-top:12px;}.websearch-row{display:flex;gap:8px;align-items:stretch;}.websearch-row .suggest-input{flex:1 1 0% !important;min-width:0 !important;width:auto !important;}.websearch-row .btn-primary{flex:0 0 auto !important;width:auto !important;}.websearch-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;margin-top:12px;}.websearch-item{border:none;background:none;padding:0;cursor:pointer;border-radius:8px;overflow:hidden;}.websearch-item img{width:100%;height:90px;object-fit:cover;display:block;border-radius:8px;}.websearch-item:active{opacity:0.7;}.websearch-status{text-align:center;color:var(--text-muted, #6c757d);font-size:13px;padding:12px;}.websearch-hint{font-size:12px;color:var(--text-muted, #6c757d);margin-top:8px;text-align:center;}.export-modal{max-width:340px;padding:20px !important;background:#ffffff;}.export-modal .suggest-head{margin-bottom:16px;font-size:18px;font-weight:bold;color:#212529;}.export-field{margin-bottom:14px;}.export-label{display:block;font-size:13px;font-weight:bold;margin-bottom:6px;color:#495057;}.export-select{width:100%;padding:10px 12px;border:1px solid #dee2e6;border-radius:10px;font-size:14px;background:#ffffff;color:#212529;}.export-quality-row{display:flex;align-items:center;gap:10px;}.export-slider{flex:1;}.export-quality-value{min-width:50px;text-align:end;font-size:14px;font-weight:bold;color:#212529;}.export-dims{text-align:center;font-size:12px;color:#6c757d;margin:10px 0 4px;}[data-theme="dark"] .export-modal{background:#1f2937;}[data-theme="dark"] .export-modal .suggest-head{color:#f9fafb;}[data-theme="dark"] .export-label{color:#d1d5db;}[data-theme="dark"] .export-select{background:#374151;border-color:#4b5563;color:#f9fafb;}[data-theme="dark"] .export-quality-value{color:#f9fafb;}[data-theme="dark"] .export-dims{color:#9ca3af;}.canvas-wrap{flex:1 1 auto;}.canvas-stage{padding:var(--space-3);}.ad-banner{display:flex;height:clamp(50px, 8vh, 90px);}.props-panel{display:none;}.tools-panel{display:none;}.bottom-toolbar{display:flex;}@media (max-width:420px){.app-header{padding:0 var(--space-2);gap:var(--space-1);}.header-brand{gap:var(--space-1);}.brand-mark{width:24px;height:24px;}.brand-name{font-size:var(--font-size-md);}.header-actions{gap:var(--space-1);}.header-actions .btn-icon{width:36px;height:36px;}.header-actions .btn-accent{padding:0 var(--space-2);font-size:var(--font-size-sm);}.bottom-tool{font-size:11px;gap:2px;padding:0 2px;}}@media (min-width:768px){.tools-panel{display:flex;}}@media (min-width:1024px){.tools-panel{display:flex;flex:0 0 96px;}.props-panel{display:block;}.bottom-toolbar{display:none;}.bottom-sheet{display:none;}.sheet-backdrop{display:none;}.canvas-stage{padding:var(--space-6);}.ad-banner{display:flex;height:72px;}.toast{bottom:calc(var(--ad-height) + var(--space-4));}}@media (min-width:1400px){.props-panel{flex-basis:320px;}.tools-panel{flex-basis:104px;}}@media (max-height:520px) and (orientation:landscape){.app-header{height:48px;}.bottom-toolbar{height:52px;}}@media (min-width:600px){#btnEmptyAddImage{width:auto;max-width:280px;}}@media (min-width:1024px){#btnEmptyAddImage{max-width:260px;}}@media (pointer:coarse){.tool-btn, .bottom-tool{min-height:var(--touch-min);}}@media (prefers-reduced-motion:reduce){*, *::before, *::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;}}.tour-overlay{position:fixed;inset:0;background:rgba(0, 0, 0, 0.6);z-index:9998;animation:tour-fade-in 0.3s ease;}.tour-spotlight{position:absolute;border-radius:12px;box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.6);border:2px solid var(--color-primary, #2563eb);pointer-events:none;transition:all 0.3s ease;animation:tour-pulse 2s ease-in-out infinite;}@keyframes tour-pulse{0%, 100%{border-color:var(--color-primary, #2563eb);}50%{border-color:rgba(37, 99, 235, 0.4);}}@keyframes tour-fade-in{from{opacity:0;}to{opacity:1;}}.tour-tooltip{position:absolute;z-index:9999;background:var(--color-bg-elevated, #ffffff);border-radius:16px;padding:20px;box-shadow:0 20px 60px rgba(0, 0, 0, 0.3);max-width:320px;opacity:0;transform:translateY(10px);transition:opacity 0.25s ease, transform 0.25s ease;direction:inherit;}.tour-tooltip.tour-visible{opacity:1;transform:translateY(0);}.tour-progress{font-size:12px;font-weight:600;color:var(--color-text-muted, #64748b);margin-bottom:8px;letter-spacing:0.5px;}.tour-title{font-size:18px;font-weight:700;color:var(--color-text, #0f172a);margin:0 0 8px 0;}.tour-desc{font-size:14px;line-height:1.6;color:var(--color-text-muted, #64748b);margin:0 0 16px 0;}.tour-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;}.tour-nav{display:flex;gap:8px;}.tour-btn{padding:10px 18px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;border:1px solid var(--color-border, #e2e8f0);background:transparent;color:var(--color-text, #0f172a);transition:all 0.2s ease;}.tour-btn:hover{background:var(--color-surface-muted, #f8fafc);}.tour-btn.tour-primary{background:var(--color-primary, #2563eb);border-color:var(--color-primary, #2563eb);color:#ffffff;}.tour-btn.tour-primary:hover{background:var(--color-primary-hover, #1d4ed8);}.tour-btn.tour-skip{border:none;color:var(--color-text-muted, #64748b);padding:10px 8px;}[data-theme="dark"] .tour-tooltip{background:#1e293b;box-shadow:0 20px 60px rgba(0, 0, 0, 0.5);}[data-theme="dark"] .tour-title{color:#f1f5f9;}[data-theme="dark"] .tour-desc{color:#94a3b8;}[data-theme="dark"] .tour-btn{border-color:#334155;color:#f1f5f9;}[data-theme="dark"] .tour-btn:hover{background:#334155;}@media (max-width:480px){.tour-tooltip{max-width:calc(100vw - 32px);left:16px !important;right:16px;padding:16px;}.tour-tooltip.tour-reminder{transform:none !important;top:50% !important;margin-top:-100px;}.tour-title{font-size:16px;}}.tour-reminder{min-width:300px;text-align:center;}.tour-reminder .tour-actions{justify-content:center !important;gap:12px;flex-wrap:nowrap;}.tour-reminder .tour-btn{flex:1;white-space:nowrap;min-width:120px;}.ads-anchor{position:fixed;top:0;left:0;right:0;z-index:9000;display:flex;align-items:center;gap:var(--space-2);min-height:var(--ad-height);padding:var(--space-1) var(--space-2);background:var(--color-bg-elevated);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-sm);}.ads-anchor-label{flex:0 0 auto;font-size:var(--font-size-xs);color:var(--color-text-faint);text-transform:uppercase;letter-spacing:0.04em;}.ads-anchor-unit{flex:1 1 auto;min-width:0;overflow:hidden;}.ads-anchor-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--color-text-muted);cursor:pointer;}.ads-anchor-close:hover{background:var(--color-surface-muted);color:var(--color-text);}.ads-anchor-close svg{display:block;}.ads-infeed-unit{display:block;width:100%;margin:var(--space-3) 0;}#adBanner{display:flex;justify-content:center;align-items:center;width:100%;max-width:320px;height:50px;max-height:50px;margin:0 auto;overflow:hidden;flex-shrink:0;}#adBanner:empty{display:none;}#adBanner ins.adsbygoogle{max-width:320px !important;max-height:50px !important;}#templateAttribution{margin:2px auto 4px !important;padding:0 !important;line-height:1.2;}#adBanner{margin-top:4px !important;margin-bottom:12px !important;}.splash{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, #007bff, #0062cc);opacity:1;transition:opacity 0.45s ease;}.splash.hidden{opacity:0;pointer-events:none;}.splash-inner{display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px;text-align:center;}.splash-logo{width:72px;height:72px;animation:splash-pop 0.6s ease both;}.splash-brand{font-family:'Cairo', system-ui, sans-serif;font-size:26px;font-weight:800;color:#ffffff;}.splash-spinner{width:40px;height:40px;border-radius:50%;border:4px solid rgba(255, 255, 255, 0.35);border-top-color:#ffffff;animation:splash-spin 0.9s linear infinite;}.splash-text{font-family:'Cairo', system-ui, sans-serif;font-size:14px;color:rgba(255, 255, 255, 0.9);}@keyframes splash-spin{to{transform:rotate(360deg);}}@keyframes splash-pop{from{transform:scale(0.7);opacity:0;}to{transform:scale(1);opacity:1;}}[data-theme="dark"] .splash{background:linear-gradient(135deg, #0056b3, #003d80);}@media (prefers-reduced-motion:reduce){.splash-spinner{animation:none;}.splash-logo{animation:none;}.splash{transition:none;}}