:root{--color-primary:#4f46e5;--color-primary-hover:#4338ca;--color-primary-light:#eef2ff;--color-primary-glow:#4f46e526;--color-accent:#0284c7;--color-success:#059669;--color-warning:#d97706;--color-danger:#dc2626;--bg-app:#f8fafc;--bg-surface:#fff;--bg-surface-elevated:#f1f5f9;--bg-surface-hover:#e2e8f0;--bg-input:#fff;--header-bg:#ffffffe0;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;--text-inverse:#fff;--border-subtle:#e2e8f0;--border-default:#cbd5e1;--border-focused:#4f46e5;--font-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:24px;--radius-full:9999px;--shadow-sm:0 1px 3px #0f172a0d, 0 1px 2px #0f172a08;--shadow-md:0 4px 16px #0f172a0f, 0 2px 6px #0f172a0a;--shadow-lg:0 12px 32px #0f172a14, 0 4px 12px #0f172a0a;--shadow-glow:0 0 20px var(--color-primary-glow);--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-normal:.25s cubic-bezier(.4, 0, .2, 1)}[data-theme=dark]{--color-primary:#6366f1;--color-primary-hover:#818cf8;--color-primary-light:#6366f129;--color-primary-glow:#6366f147;--color-accent:#38bdf8;--color-success:#10b981;--color-warning:#f59e0b;--color-danger:#ef4444;--bg-app:#0b0f19;--bg-surface:#141c2e;--bg-surface-elevated:#1a253c;--bg-surface-hover:#22304d;--bg-input:#0f1626;--header-bg:#0b0f19e0;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--text-inverse:#0b0f19;--border-subtle:#1e293b;--border-default:#2e3d55;--border-focused:#818cf8;--shadow-sm:0 1px 3px #00000059, 0 1px 2px #0003;--shadow-md:0 6px 20px #0006, 0 2px 8px #00000040;--shadow-lg:0 16px 40px #0000008c, 0 6px 16px #00000059;--shadow-glow:0 0 24px #6366f140}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scrollbar-gutter:stable;min-height:100%;overflow-y:scroll}body{background-color:var(--bg-app);min-height:100%;color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--transition-normal), color var(--transition-fast);line-height:1.5}@media (width>=1025px){body{zoom:.8}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}input,textarea,button,select{font-family:inherit;font-size:inherit;color:inherit}button{cursor:pointer;background:0 0;border:none;outline:none}:focus-visible{outline:2px solid var(--border-focused);outline-offset:2px}.app-header{border-bottom:1px solid var(--border-subtle);background:var(--header-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:50;height:68px;transition:background var(--transition-normal), border-color var(--transition-normal);justify-content:space-between;align-items:center;padding:0 32px;display:flex;position:sticky;top:0;box-shadow:0 1px 2px #0000000d}.brand-wrapper{align-items:center;gap:12px;display:flex}.brand-logo-img{border-radius:var(--radius-sm);width:34px;height:34px;box-shadow:0 2px 6px #4f46e540}.brand-title{letter-spacing:-.03em;color:var(--text-primary);align-items:center;gap:1px;font-size:1.25rem;font-weight:800;display:flex}.brand-title span.accent{color:var(--color-primary);background:linear-gradient(135deg, var(--color-primary) 0%, #06b6d4 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.lang-dropdown-container{display:inline-flex;position:relative}.lang-dropdown-trigger{border-radius:var(--radius-full);background:var(--bg-surface);height:38px;color:var(--text-secondary);border:1px solid var(--border-default);box-shadow:var(--shadow-sm);cursor:pointer;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none;align-items:center;gap:7px;padding:0 12px 0 10px;font-family:inherit;font-size:.8125rem;font-weight:600;display:inline-flex}.lang-dropdown-trigger:hover,.lang-dropdown-trigger.active{color:var(--text-primary);background:var(--bg-surface-hover);border-color:var(--color-primary);box-shadow:0 3px 8px #00000014}.lang-dropdown-trigger.active{box-shadow:0 0 0 3px #6366f126}.lang-dropdown-trigger-label{font-family:var(--font-mono);letter-spacing:.04em;color:var(--text-primary);font-size:.75rem;font-weight:700}.lang-dropdown-chevron{color:var(--text-muted);margin-left:1px;transition:transform .2s cubic-bezier(.4,0,.2,1)}.lang-dropdown-chevron.rotated{color:var(--color-primary);transform:rotate(180deg)}.lang-dropdown-menu{background:var(--bg-surface-elevated,var(--bg-surface));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-default);border-radius:var(--radius-lg);z-index:100;transform-origin:100% 0;min-width:210px;padding:6px;animation:.18s cubic-bezier(.16,1,.3,1) forwards langDropdownIn;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 12px 30px -4px #00000029,0 4px 12px #00000014}@keyframes langDropdownIn{0%{opacity:0;transform:translateY(-6px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}.lang-dropdown-header{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);border-bottom:1px solid var(--border-subtle);margin-bottom:4px;padding:6px 10px 4px;font-size:.6875rem;font-weight:700}.lang-dropdown-list{flex-direction:column;gap:2px;display:flex}.lang-dropdown-item{border-radius:var(--radius-md);width:100%;color:var(--text-secondary);cursor:pointer;text-align:left;background:0 0;border:none;justify-content:space-between;align-items:center;padding:8px 10px;font-size:.8125rem;font-weight:500;transition:all .14s;display:flex}.lang-dropdown-item:hover{background:var(--bg-surface-hover);color:var(--text-primary)}.lang-dropdown-item.selected{color:var(--color-primary);background:#6366f11a;font-weight:600}.lang-dropdown-item-left{align-items:center;gap:10px;display:flex}.lang-dropdown-item-name{line-height:1.2}.lang-dropdown-item-right{align-items:center;gap:6px;display:flex}.lang-dropdown-item-code{font-family:var(--font-mono);letter-spacing:.05em;border-radius:var(--radius-sm);background:var(--bg-surface);color:var(--text-muted);border:1px solid var(--border-subtle);padding:2px 5px;font-size:.6875rem;font-weight:700}.lang-dropdown-item.selected .lang-dropdown-item-code{background:var(--color-primary);color:#fff;border-color:#0000}.lang-dropdown-item-check{color:var(--color-primary);flex-shrink:0}.flag-icon{box-shadow:0 0 0 1px #0000001f,0 1px 2px #00000014}[data-theme=dark] .lang-dropdown-trigger{background:var(--bg-surface-elevated);border-color:var(--border-subtle);box-shadow:0 2px 6px #0000004d}[data-theme=dark] .lang-dropdown-trigger:hover,[data-theme=dark] .lang-dropdown-trigger.active{border-color:var(--color-primary);box-shadow:0 0 0 3px #6366f140}[data-theme=dark] .lang-dropdown-menu{border-color:var(--border-subtle);background:#1e293bf2;box-shadow:0 16px 36px #00000073}[data-theme=dark] .lang-dropdown-item.selected{color:#a5b4fc;background:#6366f133}[data-theme=dark] .flag-icon{box-shadow:0 0 0 1px #ffffff2e,0 1px 3px #0006}.theme-toggle-btn{border-radius:var(--radius-full);background:var(--bg-surface);width:38px;height:38px;color:var(--text-secondary);border:1px solid var(--border-default);transition:all var(--transition-fast);box-shadow:var(--shadow-sm);cursor:pointer;justify-content:center;align-items:center;display:inline-flex}.theme-toggle-btn:hover{color:var(--text-primary);background:var(--bg-surface-hover);border-color:var(--color-primary);transform:translateY(-1px);box-shadow:0 3px 8px #00000014}.theme-toggle-icon{transition:transform var(--transition-normal), color var(--transition-fast)}.theme-toggle-btn:hover .theme-toggle-icon{transform:rotate(20deg)}[data-theme=dark] .theme-toggle-btn{background:var(--bg-surface-elevated);border-color:var(--border-subtle);color:#fbbf24;box-shadow:0 2px 6px #0000004d}[data-theme=dark] .theme-toggle-btn:hover{background:var(--bg-surface-hover);color:#fef08a;border-color:#f59e0b;box-shadow:0 0 12px #f59e0b4d}.header-support-btn{border-radius:var(--radius-full);color:#e11d48;transition:all var(--transition-fast);background:#fff1f2;border:1px solid #fecdd3;align-items:center;gap:8px;padding:8px 16px;font-size:.8125rem;font-weight:700;text-decoration:none;display:inline-flex;box-shadow:0 1px 3px #e11d4814}.header-support-btn:hover{color:#be123c;background:#ffe4e6;border-color:#fda4af;transform:translateY(-1px);box-shadow:0 4px 10px #e11d4826}[data-theme=dark] .header-support-btn{color:#fb7185;background:#e11d481f;border-color:#e11d4847;box-shadow:0 1px 3px #0003}[data-theme=dark] .header-support-btn:hover{color:#fda4af;background:#e11d4838;border-color:#e11d4873;box-shadow:0 4px 12px #e11d4840}.studio-layout{grid-template-columns:minmax(0,1.25fr) minmax(380px,.95fr);align-items:start;gap:32px;max-width:1440px;margin:0 auto;padding:36px 32px;display:grid}.studio-workspace{flex-direction:column;gap:24px;display:flex}.studio-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);padding:24px}.studio-card:hover{border-color:var(--border-default);box-shadow:var(--shadow-md)}.smooth-alert-drawer{grid-template-rows:0fr;margin-top:0;transition:grid-template-rows .28s cubic-bezier(.4,0,.2,1),margin-top .28s cubic-bezier(.4,0,.2,1);display:grid}.smooth-alert-drawer.open{grid-template-rows:1fr;margin-top:16px}.smooth-alert-inner{opacity:0;min-height:0;transition:opacity .22s,transform .22s;overflow:hidden;transform:translateY(-6px)}.smooth-alert-drawer.open .smooth-alert-inner{opacity:1;transition-delay:50ms;transform:translateY(0)}.card-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.card-title-group{align-items:center;gap:12px;display:flex}.card-icon-box{border-radius:var(--radius-md);background:var(--color-primary-light);width:36px;height:36px;color:var(--color-primary);justify-content:center;align-items:center;display:flex}.card-title{letter-spacing:-.015em;color:var(--text-primary);font-size:1.0625rem;font-weight:700}.card-subtitle{color:var(--text-secondary);font-size:.8125rem}.segmented-tabs{background:var(--bg-surface-elevated);border-radius:var(--radius-md);border:1px solid var(--border-subtle);-webkit-user-select:none;user-select:none;gap:4px;margin-bottom:20px;padding:4px;display:flex;position:relative}.tab-slider-indicator{background:var(--bg-surface);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);pointer-events:none;z-index:1;transition:transform .28s cubic-bezier(.34,1.25,.64,1),width .28s cubic-bezier(.34,1.25,.64,1),opacity .2s;position:absolute;top:4px;bottom:4px;left:0;box-shadow:0 1px 4px #00000014,0 1px 1px #0000000a}[data-theme=dark] .tab-slider-indicator{background:var(--bg-surface);border-color:var(--border-default);box-shadow:0 2px 8px #00000059}.tab-btn{color:var(--text-secondary);border-radius:var(--radius-sm);transition:color var(--transition-fast), transform .14s cubic-bezier(.4, 0, .2, 1);z-index:2;cursor:pointer;background:0 0;border:none;outline:none;flex:1;justify-content:center;align-items:center;gap:8px;padding:9px 14px;font-size:.8125rem;font-weight:600;display:flex;position:relative}.tab-btn:hover{color:var(--text-primary)}.tab-btn:active{transform:scale(.96)}.tab-btn.active{color:var(--color-primary);font-weight:700}.tab-content-container{width:100%;position:relative}.tab-content-pane{will-change:transform, opacity;animation:.24s cubic-bezier(.16,1,.3,1) forwards tabPaneFadeSlide}@keyframes tabPaneFadeSlide{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.input-group{flex-direction:column;gap:8px;display:flex;position:relative}.input-label{color:var(--text-secondary);justify-content:space-between;align-items:center;font-size:.8125rem;font-weight:600;display:flex}.input-wrapper{align-items:center;display:flex;position:relative}.text-input,.textarea-input{background:var(--bg-input);border:1.5px solid var(--border-subtle);border-radius:var(--radius-md);width:100%;color:var(--text-primary);transition:all var(--transition-fast);padding:11px 14px;font-size:.875rem;box-shadow:0 1px 2px #00000005}.text-input:focus,.textarea-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow);background:var(--bg-input)}.textarea-input{resize:vertical;min-height:110px}.input-clear-btn{color:var(--text-muted);border-radius:var(--radius-sm);transition:color var(--transition-fast);padding:4px;position:absolute;right:12px}.input-clear-btn:hover{color:var(--text-primary)}.byte-counter-bar{color:var(--text-muted);font-size:.75rem;font-family:var(--font-mono);justify-content:space-between;margin-top:4px;display:flex}.grid-2{grid-template-columns:1fr 1fr;gap:16px;display:grid}.grid-3{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.grid-4{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.tile-group-track{width:100%;position:relative}.tile-active-frame{border-radius:var(--radius-md);border:1.5px solid var(--color-primary);background:var(--color-primary-light);box-shadow:0 0 0 1px var(--color-primary), 0 4px 14px -2px #4f46e540;pointer-events:none;z-index:0;will-change:transform, width, height, opacity;transition:transform .28s cubic-bezier(.34,1.25,.64,1),width .28s cubic-bezier(.34,1.25,.64,1),height .28s cubic-bezier(.34,1.25,.64,1),opacity .18s;position:absolute;top:0;left:0}.selector-tile{background:var(--bg-surface-elevated);border:1.5px solid var(--border-subtle);border-radius:var(--radius-md);text-align:center;color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;z-index:1;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:14px 10px;transition:border-color .24s cubic-bezier(.4,0,.2,1),background-color .24s cubic-bezier(.4,0,.2,1),color .24s cubic-bezier(.4,0,.2,1),transform .22s cubic-bezier(.34,1.4,.64,1);display:flex;position:relative}.selector-tile:hover{border-color:var(--border-default);background:var(--bg-surface-hover);color:var(--text-primary);transform:translateY(-2px)}.selector-tile:active{transition-duration:80ms;transform:scale(.95)}.selector-tile.active{color:var(--color-primary);background:0 0;border-color:#0000;transform:translateY(-1px)}.selector-tile.active:hover{transform:translateY(-2px)}.selector-tile-icon{z-index:2;pointer-events:none;justify-content:center;align-items:center;width:28px;height:28px;transition:transform .28s cubic-bezier(.34,1.56,.64,1),color .24s;display:flex;position:relative}.selector-tile.active .selector-tile-icon{color:var(--color-primary);transform:scale(1.18)}.selector-tile-label{z-index:2;color:inherit;pointer-events:none;font-size:.75rem;font-weight:700;transition:color .24s;position:relative}.selector-tile.active .selector-tile-label{color:var(--color-primary);font-weight:800}.color-picker-control{background:var(--bg-input);border:1.5px solid var(--border-subtle);border-radius:var(--radius-md);transition:border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-normal), opacity .28s cubic-bezier(.4, 0, .2, 1), filter .28s ease;align-items:center;gap:12px;padding:8px 12px;display:flex;box-shadow:0 1px 2px #00000005}.color-picker-control:hover{border-color:var(--border-default)}.color-picker-control:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow)}.color-picker-control.disabled{opacity:.38;pointer-events:none;filter:grayscale(.5)}.color-swatch-input{appearance:none;cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;flex-shrink:0;width:34px;height:34px;transition:transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .18s;overflow:hidden}.color-swatch-input:hover{transform:scale(1.08);box-shadow:0 2px 6px #00000026}.color-swatch-input:active{transform:scale(.95)}.color-swatch-input::-webkit-color-swatch-wrapper{padding:0}.color-swatch-input::-webkit-color-swatch{border:1.5px solid var(--border-default);border-radius:var(--radius-sm);transition:border-color var(--transition-fast)}.color-swatch-input:hover::-webkit-color-swatch{border-color:var(--color-primary)}.hex-text-input{font-family:var(--font-mono);text-transform:uppercase;width:95px;color:var(--text-primary);letter-spacing:.04em;background:0 0;border:none;outline:none;font-size:.875rem;font-weight:700;transition:color .2s}.palette-chips{flex-wrap:wrap;align-items:center;gap:8px;padding:3px 0;transition:opacity .28s cubic-bezier(.4,0,.2,1),filter .28s;display:flex}.palette-chips.disabled{opacity:.38;pointer-events:none;filter:grayscale(.5)}.palette-chip-btn{border:2px solid var(--bg-surface);cursor:pointer;border-radius:50%;outline:none;flex-shrink:0;width:26px;height:26px;transition:transform .24s cubic-bezier(.34,1.4,.64,1),box-shadow .24s cubic-bezier(.34,1.4,.64,1),border-color .2s;position:relative;box-shadow:0 1px 3px #00000026}.palette-chip-btn:hover{z-index:2;transform:scale(1.18);box-shadow:0 3px 8px #00000038}.palette-chip-btn:active{transform:scale(.92)}.palette-chip-btn.active{border-color:var(--bg-surface);box-shadow:0 0 0 2px var(--bg-surface), 0 0 0 4.5px var(--color-primary), 0 4px 10px #00000040;z-index:3;transform:scale(1.22)}[data-theme=dark] .palette-chip-btn{border-color:var(--bg-surface);box-shadow:0 1px 3px #0006}[data-theme=dark] .palette-chip-btn.active{box-shadow:0 0 0 2px var(--bg-surface), 0 0 0 4.5px var(--color-primary), 0 0 14px var(--color-primary-glow)}.palette-chip-btn.bg-chip{box-shadow:inset 0 0 0 1px #00000024,0 1px 3px #0000001f}[data-theme=dark] .palette-chip-btn.bg-chip{box-shadow:inset 0 0 0 1px #ffffff2e,0 1px 3px #00000059}.palette-chip-btn.bg-chip.active{box-shadow:0 0 0 2px var(--bg-surface), 0 0 0 4.5px var(--color-primary), 0 4px 10px #00000040}[data-theme=dark] .palette-chip-btn.bg-chip.active{box-shadow:0 0 0 2px var(--bg-surface), 0 0 0 4.5px var(--color-primary), 0 0 14px var(--color-primary-glow)}.slider-control{flex-direction:column;gap:6px;display:flex}.slider-header{color:var(--text-secondary);justify-content:space-between;font-size:.75rem;display:flex}.slider-input{appearance:none;border-radius:var(--radius-full);background:#e2e8f0;outline:none;width:100%;height:6px}.slider-input::-webkit-slider-thumb{appearance:none;background:var(--color-primary);cursor:pointer;width:18px;height:18px;transition:transform var(--transition-fast), box-shadow var(--transition-fast);border:2px solid #fff;border-radius:50%;box-shadow:0 2px 5px #0003}.slider-input::-webkit-slider-thumb:hover{box-shadow:0 0 8px var(--color-primary-glow);transform:scale(1.15)}.preview-sidebar-sticky{flex-direction:column;gap:14px;max-height:none;display:flex;position:sticky;top:84px;overflow:visible}.preview-sticky-stage{flex-direction:column;width:100%;display:flex}.stage-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);flex-direction:column;align-items:center;padding:24px 24px 20px;display:flex;position:relative;overflow:hidden}.stage-badge-live{text-transform:uppercase;letter-spacing:.08em;color:var(--color-primary);background:var(--color-primary-light);border-radius:var(--radius-full);align-items:center;gap:6px;padding:3px 10px;font-size:.6875rem;font-weight:800;display:flex;position:absolute;top:18px;left:20px}.pulse-dot{background:var(--color-primary);border-radius:50%;width:6px;height:6px;animation:2s ease-in-out infinite pulse-ring}@keyframes pulse-ring{0%{transform:scale(.95);box-shadow:0 0 #4f46e5b3}70%{transform:scale(1);box-shadow:0 0 0 6px #4f46e500}to{transform:scale(.95);box-shadow:0 0 #4f46e500}}.preview-stage-viewport{flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:280px;margin-top:16px;display:flex;position:relative}.cta-badge-drawer{opacity:0;pointer-events:none;grid-template-rows:0fr;width:100%;transition:grid-template-rows .34s cubic-bezier(.34,1.25,.64,1),opacity .24s,margin .34s cubic-bezier(.34,1.25,.64,1);display:grid;overflow:hidden}.cta-badge-drawer.top-drawer{margin-bottom:0}.cta-badge-drawer.top-drawer.open{opacity:1;pointer-events:auto;grid-template-rows:1fr;margin-bottom:12px}.cta-badge-drawer.bottom-drawer{margin-top:0}.cta-badge-drawer.bottom-drawer.open{opacity:1;pointer-events:auto;grid-template-rows:1fr;margin-top:12px}.cta-badge-inner{justify-content:center;align-items:center;min-height:0;padding:2px 0;transition:transform .34s cubic-bezier(.34,1.25,.64,1);display:flex;overflow:hidden;transform:translateY(-10px)scale(.9)}.cta-badge-drawer.bottom-drawer .cta-badge-inner{transform:translateY(10px)scale(.9)}.cta-badge-drawer.open .cta-badge-inner{transform:translateY(0)scale(1)}.cta-top-badge,.cta-bottom-badge{border-radius:var(--radius-full);letter-spacing:.08em;text-transform:uppercase;transition:background-color .28s cubic-bezier(.4, 0, .2, 1), color .28s cubic-bezier(.4, 0, .2, 1), transform var(--transition-fast);cursor:default;-webkit-user-select:none;user-select:none;padding:6px 22px;font-size:.8125rem;font-weight:800;box-shadow:0 4px 12px #0000001f}.qr-frame-wrapper{border-radius:var(--radius-lg);width:280px;box-shadow:none;background:0 0;border:0 solid #0000;flex-direction:column;align-items:center;margin:4px 0;padding:0;transition:width .38s cubic-bezier(.34,1.18,.64,1),padding .38s cubic-bezier(.34,1.18,.64,1),margin .38s cubic-bezier(.34,1.18,.64,1),border-width .38s cubic-bezier(.34,1.18,.64,1),border-radius .38s cubic-bezier(.34,1.18,.64,1),border-color .28s cubic-bezier(.4,0,.2,1),background-color .28s cubic-bezier(.4,0,.2,1),box-shadow .38s cubic-bezier(.34,1.18,.64,1);display:flex;position:relative}.qr-frame-wrapper.phone-mockup-frame{background:var(--bg-surface);border-style:solid;border-width:10px;border-radius:40px;width:292px;margin:6px 0 8px;padding:22px 16px 18px;box-shadow:0 16px 36px -4px #00000040,0 4px 12px -2px #0000001f}.phone-speaker-notch{opacity:0;border-radius:var(--radius-full);background:#00000038;width:50px;height:0;margin-bottom:0;transition:height .3s cubic-bezier(.4,0,.2,1),opacity .24s,margin-bottom .3s cubic-bezier(.4,0,.2,1),transform .34s cubic-bezier(.34,1.25,.64,1);overflow:hidden;transform:scaleX(.4)}[data-theme=dark] .phone-speaker-notch{background:#ffffff4d}.phone-mockup-frame .phone-speaker-notch{opacity:1;height:4.5px;margin-bottom:16px;transform:scaleX(1)}.phone-cta-label{opacity:0;letter-spacing:.06em;text-transform:uppercase;text-align:center;white-space:nowrap;max-height:0;margin-top:0;font-size:.75rem;font-weight:800;transition:max-height .32s cubic-bezier(.4,0,.2,1),opacity .24s,margin-top .32s cubic-bezier(.4,0,.2,1),color .28s cubic-bezier(.4,0,.2,1),transform .34s cubic-bezier(.34,1.25,.64,1);display:block;overflow:hidden;transform:translateY(-8px)}.phone-mockup-frame .phone-cta-label{opacity:1;max-height:28px;margin-top:14px;transform:translateY(0)}.qr-preview-box{border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:#fff;justify-content:center;align-items:center;width:280px;height:280px;margin:0;padding:16px;transition:width .38s cubic-bezier(.34,1.18,.64,1),height .38s cubic-bezier(.34,1.18,.64,1),padding .38s cubic-bezier(.34,1.18,.64,1),border-radius .38s cubic-bezier(.34,1.18,.64,1),box-shadow .38s cubic-bezier(.34,1.18,.64,1),border-color .28s cubic-bezier(.4,0,.2,1),background-color .28s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden;box-shadow:0 4px 16px #00000014}.qr-preview-box.in-phone{width:240px;height:240px;box-shadow:none;border-color:#0000;border-radius:18px;padding:0;overflow:hidden}.qr-canvas-stage{flex-shrink:0;justify-content:center;align-items:center;width:240px;height:240px;display:flex;position:relative}.qr-canvas-live{will-change:transform, opacity;transform-origin:50%;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.qr-canvas-live canvas{max-width:100%;max-height:100%;transition:width .38s cubic-bezier(.34,1.18,.64,1),height .38s cubic-bezier(.34,1.18,.64,1);display:block}.qr-canvas-fade{pointer-events:none;opacity:0;z-index:2;object-fit:contain;will-change:transform, opacity, filter;transform-origin:50%;width:100%;height:100%;display:block;position:absolute;top:0;left:0}.qr-preview-box.transparent-bg{background-image:linear-gradient(45deg,#e2e8f0 25%,#0000 25%),linear-gradient(-45deg,#e2e8f0 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#e2e8f0 75%),linear-gradient(-45deg,#0000 75%,#e2e8f0 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}[data-theme=dark] .qr-preview-box.transparent-bg{background-color:#0f1626;background-image:linear-gradient(45deg,#1e293b 25%,#0000 25%),linear-gradient(-45deg,#1e293b 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#1e293b 75%),linear-gradient(-45deg,#0000 75%,#1e293b 75%)}.metadata-deck{border-top:1px solid var(--border-subtle);grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin-top:14px;padding-top:14px;display:grid}.metadata-item{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:help;transition:all var(--transition-fast);flex-direction:column;gap:3px;padding:10px;display:flex;position:relative}.metadata-item:hover{background:var(--bg-surface-hover);border-color:var(--border-default);transform:translateY(-1px);box-shadow:0 4px 14px #0000001f}.metadata-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;justify-content:space-between;align-items:center;font-size:.6875rem;font-weight:700;display:flex}.metadata-info-icon{opacity:.5;transition:opacity var(--transition-fast), color var(--transition-fast)}.metadata-item:hover .metadata-info-icon{opacity:1;color:var(--color-primary)}.metadata-value{font-size:.8125rem;font-family:var(--font-mono);color:var(--text-primary);transition:color var(--transition-fast), transform var(--transition-fast);font-weight:700}.metadata-tooltip{color:#f8fafc;border-radius:var(--radius-md);text-align:left;pointer-events:none;opacity:0;visibility:hidden;z-index:50;width:220px;font-size:.75rem;line-height:1.45;font-family:var(--font-sans);background:#0f172a;padding:10px 12px;transition:opacity .18s,transform .18s,visibility .18s;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%)translateY(4px);box-shadow:0 10px 25px -5px #0000004d,0 8px 10px -6px #0003}[data-theme=dark] .metadata-tooltip{color:#f1f5f9;background:#1a253c;border:1px solid #2e3d55;box-shadow:0 10px 25px -5px #0009,0 8px 10px -6px #0006}.metadata-tooltip-title{color:#fff;margin-bottom:3px;font-weight:700;display:block}.metadata-tooltip-desc{color:#cbd5e1;font-size:.71875rem;font-weight:400;display:block}.metadata-tooltip:after{content:"";border:6px solid #0000;border-top-color:#0f172a;position:absolute;top:100%;left:50%;transform:translate(-50%)}[data-theme=dark] .metadata-tooltip:after{border-color:#1a253c #0000 #0000}.metadata-item:first-child .metadata-tooltip{left:0;transform:translate(0)translateY(4px)}.metadata-item:first-child:hover .metadata-tooltip{transform:translate(0)translateY(0)}.metadata-item:first-child .metadata-tooltip:after{left:24px}.metadata-item:nth-child(2):hover .metadata-tooltip{transform:translate(-50%)translateY(0)}.metadata-item:last-child .metadata-tooltip{left:auto;right:0;transform:translate(0)translateY(4px)}.metadata-item:last-child:hover .metadata-tooltip{transform:translate(0)translateY(0)}.metadata-item:last-child .metadata-tooltip:after{left:auto;right:24px}.metadata-item:hover .metadata-tooltip{opacity:1;visibility:visible}.contrast-badge{border-radius:var(--radius-full);white-space:nowrap;align-items:center;gap:5px;padding:4px 10px;font-size:.6875rem;font-weight:700;line-height:1.3;transition:background-color .28s cubic-bezier(.4,0,.2,1),color .28s cubic-bezier(.4,0,.2,1),border-color .28s cubic-bezier(.4,0,.2,1),transform .22s cubic-bezier(.34,1.3,.64,1);display:inline-flex}.contrast-badge.pass{color:#059669;background:#ecfdf5;border:1px solid #a7f3d0}.contrast-badge.warning{color:#b45309;background:#fffbeb;border:1px solid #fde68a;transform:scale(1.02)}[data-theme=dark] .contrast-badge.pass{color:#34d399;background:#10b98129;border:1px solid #10b98152}[data-theme=dark] .contrast-badge.warning{color:#fbbf24;background:#f59e0b29;border:1px solid #f59e0b52}.action-grid{grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:0;display:grid}.btn-primary{background:var(--color-primary);color:#fff;border-radius:var(--radius-md);transition:all var(--transition-fast);justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-size:.875rem;font-weight:600;display:flex;box-shadow:0 4px 12px #4f46e540}.btn-primary:hover{background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:0 6px 16px #4f46e559}.btn-secondary{background:var(--bg-surface);border:1.5px solid var(--border-default);color:var(--text-primary);border-radius:var(--radius-md);transition:all var(--transition-fast);justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-size:.875rem;font-weight:600;display:flex;box-shadow:0 1px 2px #0000000a}.btn-secondary:hover{background:var(--bg-surface-hover);border-color:var(--color-primary);color:var(--text-primary);transform:translateY(-1px)}.btn-full{grid-column:span 2}.modal-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:100;background:#000000a6;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);width:100%;max-width:580px;box-shadow:var(--shadow-lg);max-height:90vh;color:var(--text-primary);padding:28px;overflow-y:auto}@page{size:A4 portrait;margin:0}@media print{html,body{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;zoom:1!important;background:#fff!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important}.app-header,.studio-layout,.no-print,.modal-header-bar,.modal-footer-bar{display:none!important}.app-shell{height:auto!important;min-height:0!important;display:block!important}.modal-overlay{background:0 0!important;width:100%!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;display:block!important;position:static!important;overflow:visible!important}.modal-content{width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;box-shadow:none!important;background:0 0!important;border:none!important;margin:0!important;padding:0!important;display:block!important;position:static!important;overflow:visible!important}#print-sheet-preview{text-align:center!important;color:#0f172a!important;width:100%!important;max-width:580px!important;box-shadow:none!important;page-break-inside:avoid!important;break-inside:avoid!important;page-break-after:avoid!important;break-after:avoid!important;page-break-before:avoid!important;break-before:avoid!important;background:#fff!important;border:2px dashed #94a3b8!important;border-radius:20px!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;margin:20px auto 0!important;padding:36px 28px!important;display:flex!important}#print-qr-target{background:#fff!important;border:2px solid #cbd5e1!important;border-radius:16px!important;margin-bottom:20px!important;padding:18px!important}#print-qr-target img{object-fit:contain!important;width:240px!important;height:auto!important;max-height:300px!important;display:block!important}}@media (width<=1024px){.app-header{padding:0 20px}.studio-layout{grid-template-columns:1fr;gap:24px;padding:20px}.preview-sidebar-sticky,.preview-sticky-stage{order:-1;max-height:none;position:static;overflow-y:visible}.qr-preview-box{width:240px;height:240px}}.splash-overlay{z-index:999999;background:var(--bg-app);color:var(--text-primary);-webkit-user-select:none;user-select:none;will-change:opacity, transform, filter;flex-direction:column;justify-content:center;align-items:center;transition:opacity .45s cubic-bezier(.4,0,.2,1),transform .45s cubic-bezier(.34,1.15,.64,1),filter .4s;display:flex;position:fixed;inset:0;overflow:hidden}.splash-overlay.exiting{opacity:0;filter:blur(6px);pointer-events:none;transform:translateY(24px)scale(.98)}.splash-ambient-glow{background:radial-gradient(circle, var(--color-primary-glow) 0%, transparent 70%);filter:blur(50px);pointer-events:none;border-radius:50%;width:440px;height:440px;animation:2.8s ease-in-out infinite alternate splashGlowPulse;position:absolute}@keyframes splashGlowPulse{0%{opacity:.6;transform:scale(.85)}to{opacity:1;transform:scale(1.2)}}.splash-content-wrapper{z-index:2;text-align:center;flex-direction:column;align-items:center;padding:24px;display:flex;position:relative}.splash-logo-card{background:linear-gradient(135deg,#4f46e5 0%,#3b82f6 50%,#06b6d4 100%);border-radius:24px;justify-content:center;align-items:center;width:84px;height:84px;margin-bottom:22px;animation:.6s cubic-bezier(.34,1.45,.64,1) forwards splashLogoPop;display:flex;position:relative;box-shadow:0 16px 36px -6px #4f46e56b,inset 0 0 0 1px #fff3}.splash-logo-img{filter:drop-shadow(0 4px 10px #00000040);border-radius:14px;width:52px;height:52px}.splash-logo-ring{pointer-events:none;border:2px dashed #6366f159;border-radius:30px;animation:12s linear infinite splashRingRotate;position:absolute;inset:-6px}@keyframes splashLogoPop{0%{opacity:0;transform:scale(.65)translateY(16px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes splashRingRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.splash-brand-name{letter-spacing:-.03em;color:var(--text-primary);align-items:center;gap:2px;margin-bottom:6px;font-size:1.875rem;font-weight:800;animation:.5s cubic-bezier(.4,0,.2,1) .12s backwards splashItemFade;display:flex}.splash-brand-name span.accent{color:var(--color-primary);background:linear-gradient(135deg, var(--color-primary) 0%, #06b6d4 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.splash-brand-tagline{color:var(--text-muted);letter-spacing:.02em;margin:0 0 32px;font-size:.8125rem;font-weight:500;animation:.5s cubic-bezier(.4,0,.2,1) .2s backwards splashItemFade}.splash-progress-track{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:9999px;width:240px;height:6px;margin-bottom:12px;animation:.5s cubic-bezier(.4,0,.2,1) .26s backwards splashItemFade;position:relative;overflow:hidden;box-shadow:inset 0 1px 3px #0000000a}.splash-progress-fill{background:linear-gradient(90deg,#4f46e5 0%,#38bdf8 100%);border-radius:9999px;height:100%;transition:width 35ms linear;box-shadow:0 0 12px #6366f199}.splash-status-text{font-size:.75rem;font-family:var(--font-mono);color:var(--text-muted);justify-content:space-between;align-items:center;width:240px;font-weight:600;animation:.5s cubic-bezier(.4,0,.2,1) .32s backwards splashItemFade;display:flex}.splash-percent-badge{color:var(--color-primary);font-weight:700}@keyframes splashItemFade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.app-shell.app-shell-loading{opacity:0;pointer-events:none}.app-shell.app-shell-ready{opacity:1;transition:opacity .55s cubic-bezier(.16,1,.3,1)}.app-shell.app-shell-loading .app-header{opacity:0;transform:translateY(-26px)}.app-shell.app-shell-ready .app-header{opacity:1;transition:opacity .55s cubic-bezier(.16,1,.3,1) 30ms,transform .65s cubic-bezier(.16,1,.3,1) 30ms;transform:translateY(0)}.app-shell.app-shell-loading .studio-layout{opacity:0;filter:blur(2px);transform:translateY(-36px)}.app-shell.app-shell-ready .studio-layout{opacity:1;filter:blur();transition:opacity .6s cubic-bezier(.16,1,.3,1) 80ms,transform .7s cubic-bezier(.16,1,.3,1) 80ms,filter .5s 80ms;transform:translateY(0)}.lang-reload-bar{z-index:999999;pointer-events:none;background:linear-gradient(90deg,#4f46e5 0%,#7c3aed 50%,#06b6d4 100%);border-radius:0 3px 3px 0;width:0%;height:3px;position:fixed;top:0;left:0;box-shadow:0 0 12px #4f46e5b3,0 0 4px #06b6d480}.lang-reload-bar.out{animation:.18s cubic-bezier(.4,0,.2,1) forwards langReloadProgressOut}.lang-reload-bar.in{animation:.29s cubic-bezier(.16,1,.3,1) forwards langReloadProgressIn}@keyframes langReloadProgressOut{0%{opacity:1;width:0%}to{opacity:1;width:70%}}@keyframes langReloadProgressIn{0%{opacity:1;width:70%}80%{opacity:1;width:100%}to{opacity:0;width:100%}}.lang-trans-target{will-change:opacity, transform, filter;transform-origin:top}.lang-trans-target.lang-trans-out{opacity:.2;filter:blur(2px);pointer-events:none;transition:opacity .16s cubic-bezier(.4,0,.2,1),transform .16s cubic-bezier(.4,0,.2,1),filter .16s;transform:translateY(5px)scale(.996)}.lang-trans-target.lang-trans-in{opacity:1;filter:blur();transition:opacity .28s cubic-bezier(.16,1,.3,1),transform .28s cubic-bezier(.16,1,.3,1),filter .24s;transform:translateY(0)scale(1)}.app-footer{border-top:1px solid var(--border-subtle);background:var(--bg-surface);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:10;margin-top:auto;padding:56px 24px 28px;position:relative}.footer-container{grid-template-columns:1.4fr 1fr;align-items:start;gap:52px;max-width:1240px;margin:0 auto;display:grid}@media (width<=880px){.footer-container{grid-template-columns:1fr;gap:36px}}.footer-col-main{flex-direction:column;display:flex}.footer-brand-header{align-items:center;gap:10px;margin-bottom:14px;display:flex}.footer-logo-img{width:30px;height:30px}.footer-brand-title{letter-spacing:-.02em;color:var(--text-primary);font-size:1.25rem;font-weight:800}.footer-brand-title span.accent{color:var(--color-primary);background:linear-gradient(135deg, var(--color-primary) 0%, #06b6d4 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.footer-creator-pill{border-radius:var(--radius-full);color:var(--color-primary);background:#6366f11a;border:1px solid #6366f133;align-items:center;gap:5px;padding:3px 10px;font-size:.75rem;font-weight:600;display:inline-flex}.footer-creator-text{color:var(--text-secondary);margin:0 0 10px;font-size:.9375rem;line-height:1.6}.creator-name-badge{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);color:var(--text-primary);border-radius:6px;align-items:center;gap:6px;padding:2px 8px;font-weight:700;display:inline-flex}.creator-avatar-dot{background:#10b981;border-radius:50%;width:7px;height:7px;display:inline-block;box-shadow:0 0 6px #10b98199}.footer-privacy-text{color:var(--text-muted);max-width:580px;margin:0 0 20px;font-size:.8125rem;line-height:1.6}.footer-social-deck{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.footer-social-btn{border-radius:var(--radius-full);background:var(--bg-surface-elevated);border:1px solid var(--border-default);height:36px;color:var(--text-secondary);box-shadow:var(--shadow-sm);align-items:center;gap:8px;padding:0 14px 0 12px;font-size:.8125rem;font-weight:600;text-decoration:none;transition:all .18s cubic-bezier(.4,0,.2,1);display:inline-flex}.footer-social-btn:hover{color:var(--text-primary);transform:translateY(-2px);box-shadow:0 4px 12px #00000014}.footer-social-btn .social-ext-icon{opacity:.5;transition:transform .18s,opacity .18s}.footer-social-btn:hover .social-ext-icon{opacity:.9;transform:translate(1px,-1px)}.footer-social-btn.github-btn:hover{background:var(--bg-surface);border-color:#24292f}[data-theme=dark] .footer-social-btn.github-btn:hover{border-color:#f0f6fc;box-shadow:0 4px 14px #f0f6fc1f}.footer-social-btn.linkedin-btn:hover{color:#0a66c2;background:#0a66c20f;border-color:#0a66c2;box-shadow:0 4px 14px #0a66c233}[data-theme=dark] .footer-social-btn.linkedin-btn:hover{color:#38bdf8;background:#38bdf81a;border-color:#38bdf8;box-shadow:0 4px 14px #38bdf833}.footer-col-support{flex-direction:column;display:flex}.footer-support-card{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);background:linear-gradient(135deg,#e11d480a 0%,#6366f10a 100%);border:1px solid #e11d4833;flex-direction:column;gap:16px;padding:24px;display:flex}[data-theme=dark] .footer-support-card{background:linear-gradient(135deg,#e11d4814 0%,#6366f114 100%);border-color:#e11d484d}.support-card-header{align-items:flex-start;gap:14px;display:flex}.support-card-icon{background:#e11d481f;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.support-card-title{color:var(--text-primary);margin:0 0 4px;font-size:.9375rem;font-weight:700}.support-card-desc{color:var(--text-muted);margin:0;font-size:.8125rem;line-height:1.5}.footer-support-btn{border-radius:var(--radius-md);color:#fff;cursor:pointer;background:linear-gradient(135deg,#e11d48 0%,#be123c 100%);justify-content:center;align-items:center;gap:8px;width:100%;padding:11px 16px;font-size:.875rem;font-weight:700;text-decoration:none;transition:all .18s cubic-bezier(.4,0,.2,1);display:inline-flex;box-shadow:0 4px 14px #e11d484d}.footer-support-btn:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 6px 20px #e11d4873}.footer-bottom-bar{border-top:1px solid var(--border-subtle);margin-top:44px;padding-top:22px}.footer-bottom-inner{max-width:1240px;color:var(--text-muted);text-align:center;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin:0 auto;font-size:.8125rem;display:flex}.footer-copyright{text-align:center;justify-content:center;align-items:center;gap:6px;display:flex}.footer-signature{color:var(--text-secondary);align-items:center;gap:6px;display:inline-flex}.footer-signature strong{color:var(--text-primary)}.heart-beat{animation:1.4s ease-in-out infinite footerHeartBeat}@keyframes footerHeartBeat{0%,to{transform:scale(1)}50%{transform:scale(1.22)}}