@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..700;1,14..32,300..700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Sora:wght@400;600;700&display=swap";:root{--primary-color:#5851b8;--primary-hover:#4439a0;--primary-active:#342c7e;--primary-subtle:#f3f2fe;--primary-text:#5851b8;--brand-gradient:linear-gradient(135deg, #d4537e, #7f77dd);--bg-base:#f9fafb;--bg-surface:#fff;--bg-sunken:#f3f4f6;--bg-elevated:#fff;--bg-hover:#f3f4f6;--bg-overlay:#0006;--bg-sidebar:#fff;--text-primary:#111827;--text-secondary:#6b7280;--text-tertiary:#6b7280;--text-muted:#6b7280;--text-disabled:#d1d5db;--white:#fff;--text-inverse:#fff;--text-on-primary:#fff;--text-link:#5851b8;--text-link-hover:#4439a0;--border-default:#e5e7eb;--border-subtle:#f3f4f6;--border-strong:#d1d5db;--border-focus:#5851b8;--border-error:#fca5a5;--border-hover:#d1d5db;--shadow-xs:0 1px 2px #0000000d;--shadow-sm:0 1px 3px #0000001a, 0 1px 2px #0000000f;--shadow-md:0 4px 6px #00000012, 0 2px 4px #0000000f;--shadow-lg:0 10px 15px #0000001a, 0 4px 6px #0000000d;--shadow-xl:0 20px 25px #0000001a, 0 10px 10px #0000000a;--shadow-2xl:0 25px 50px #00000040;--shadow-card:0 2px 8px #0000000f, 0 1px 3px #0000000a;--shadow-card-hover:0 8px 24px #5851b81f, 0 2px 8px #0000000f;--shadow-modal:0 20px 60px #00000026, 0 4px 16px #00000014;--shadow-dropdown:0 4px 16px #00000014, 0 1px 4px #0000000a;--shadow-focus:0 0 0 3px #5851b833;--radius-xs:2px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:20px;--radius-3xl:24px;--radius-btn:12px;--radius-full:9999px;--color-success:#22c55e;--color-success-bg:#f0fdf4;--color-success-border:#bbf7d0;--color-success-text:#15803d;--color-error:#ef4444;--color-error-bg:#fef2f2;--color-error-border:#fecaca;--color-error-text:#dc2626;--color-warning:#f59e0b;--color-warning-bg:#fffbeb;--color-warning-border:#fde68a;--color-warning-text:#d97706;--color-info:#3b82f6;--color-info-bg:#eff6ff;--color-info-border:#bfdbfe;--color-info-text:#1d4ed8;--color-focus-ring:#5851b8;--input-bg:#fff;--input-border:#e5e7eb;--input-text:#111827;--input-placeholder:#9ca3af;--dropdown-bg:#fff;--modal-bg:#fff;--tooltip-bg:#1f2937;--tooltip-text:#fff;--tag-bg:#f1f5f9;--tag-color:#475569;--tag-bg-primary:#f3f2fe;--tag-color-primary:#5851b8;--color-icon-ai-video-bg:#ede9fe;--color-icon-ai-video-fg:#7c3aed;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--gray-950:#030712;--space-0:0px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:28px;--space-8:32px;--space-10:40px;--space-12:48px;--text-2xs:10px;--text-xs:12px;--text-sm:13px;--text-base:15px;--text-lg:17px;--text-xl:20px;--text-2xl:24px;--text-3xl:30px;--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-ui:var(--font-sans);--weight-normal:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--tracking-normal:0em;--tracking-wide:.025em;--tracking-wider:.05em;--icon-xs:12px;--icon-sm:16px;--icon-md:20px;--icon-lg:24px;--icon-xl:32px;--icon-2xl:48px;--icon-stroke-ui:1.5;--icon-stroke-emph:2;--icon-stroke-bold:2.5;--transition-fast:.1s cubic-bezier(.4, 0, .2, 1);--transition-normal:.2s cubic-bezier(.4, 0, .2, 1);--transition-slow:.3s cubic-bezier(.4, 0, .2, 1);--transition-main:.3s cubic-bezier(.4, 0, .2, 1);--ease-spring:cubic-bezier(.34, 1.2, .64, 1);--z-base:1;--z-dropdown:100;--z-sticky:200;--z-overlay:900;--z-modal:1000;--z-toast:2000;--z-tooltip:3000;--z-max:10000;--bg-color:var(--bg-base);--sidebar-bg:var(--bg-sidebar);--panel-bg:var(--bg-sunken);--card-bg:var(--bg-surface);--hover-bg:var(--bg-hover);--surface-elevated:var(--bg-elevated);--border-color:var(--border-default);--bg-secondary:var(--bg-sunken);--color-accent:#d4537e;--color-accent-dark:#b04a6e;--color-accent-darker:#963d5e;--brand-purple:#7f77dd;--brand-purple-light:#b8b2f6;--brand-violet:#a855f7;--progress-track-bg:var(--border-subtle);--progress-fill-color:var(--primary-color);--progress-fill-hover:var(--primary-hover);--progress-track-height-xs:2px;--progress-track-height-sm:3px;--progress-track-height-md:4px;--progress-track-height-lg:6px;--progress-track-height-xl:8px;--progress-track-height-2xl:12px;--slider-track-bg:var(--border-subtle);--slider-fill-color:var(--primary-color);--slider-thumb-size:16px;--slider-thumb-size-sm:12px;--slider-thumb-size-lg:20px;--slider-thumb-bg:var(--primary-color);--slider-thumb-border:2px solid var(--bg-surface);--slider-thumb-shadow:var(--shadow-sm);--slider-thumb-active-shadow:var(--shadow-md);--stepper-step-size:32px;--stepper-step-size-sm:24px;--stepper-step-size-lg:40px;--stepper-step-bg:var(--bg-surface);--stepper-step-border:var(--border-default);--stepper-step-color:var(--text-tertiary);--stepper-active-bg:linear-gradient(135deg, #6b63ce 0%, #7f77dd 100%);--stepper-active-border:#6b63ce;--stepper-active-color:#fff;--stepper-completed-bg:linear-gradient(135deg, #22c55e 0%, #4ade80 100%);--stepper-completed-border:#22c55e;--stepper-completed-color:#fff;--stepper-step-icon-size:14px;--stepper-step-gap:12px;--header-height:48px;--sidebar-width:216px;--sidebar-width-collapsed:48px}.is-hidden{display:none!important}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sr-only-focusable:focus{width:auto;height:auto;padding:var(--space-2) var(--space-4);clip:auto;white-space:normal;background:var(--primary-color);color:var(--text-inverse);border-radius:var(--radius-lg);font-size:var(--text-sm);z-index:var(--z-max);box-shadow:var(--shadow-lg);margin:0;font-weight:600;text-decoration:none;position:fixed;top:8px;left:8px;overflow:visible}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-base);color:var(--text-primary);flex-direction:column;height:100vh;display:flex;overflow:hidden}.icon{width:var(--icon-md);height:var(--icon-md);fill:none;stroke:currentColor;stroke-width:var(--icon-stroke-ui);stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;flex-shrink:0;display:inline-block}.icon-xs{width:var(--icon-xs);height:var(--icon-xs)}.icon-sm{width:var(--icon-sm);height:var(--icon-sm)}.icon-lg{width:var(--icon-lg);height:var(--icon-lg);stroke-width:var(--icon-stroke-emph)}.icon-xl{width:var(--icon-xl);height:var(--icon-xl);stroke-width:var(--icon-stroke-bold)}.icon-2xl{width:var(--icon-2xl);height:var(--icon-2xl);stroke-width:var(--icon-stroke-bold)}.icon-primary{color:var(--primary-color)}.icon-muted{color:var(--text-muted)}.icon-success{color:var(--color-success)}.icon-error{color:var(--color-error)}.icon-warning{color:var(--color-warning)}.icon-outline{fill:none;stroke:currentColor;stroke-width:2px}.icon-solid{fill:currentColor;stroke:none}.slider{appearance:none;width:100%;height:var(--progress-track-height-md);background:var(--slider-track-bg);border-radius:var(--radius-full);transition:height var(--transition-fast);outline:none}.slider::-webkit-slider-thumb{appearance:none;width:var(--slider-thumb-size);height:var(--slider-thumb-size);background:var(--slider-thumb-bg);border-radius:var(--radius-full);cursor:pointer;box-shadow:var(--slider-thumb-shadow);border:var(--slider-thumb-border);transition:box-shadow var(--transition-fast), transform var(--transition-fast)}.slider::-webkit-slider-thumb:hover{box-shadow:var(--slider-thumb-active-shadow);transform:scale(1.1)}.slider::-moz-range-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size);background:var(--slider-thumb-bg);border-radius:var(--radius-full);cursor:pointer;box-shadow:var(--slider-thumb-shadow);border:var(--slider-thumb-border);transition:box-shadow var(--transition-fast), transform var(--transition-fast)}.slider::-moz-range-thumb:hover{box-shadow:var(--slider-thumb-active-shadow);transform:scale(1.1)}.badge{background:var(--tag-bg-primary);color:var(--tag-color-primary);font-size:var(--text-2xs);padding:2px var(--space-1);border-radius:var(--radius-sm);margin-left:var(--space-1)}.btn{justify-content:center;align-items:center;gap:var(--space-2,8px);padding:var(--space-2,8px) var(--space-5,20px);border-radius:var(--radius-btn,12px);font-family:var(--font-ui,inherit);font-size:var(--text-sm,14px);letter-spacing:var(--tracking-normal,0);cursor:pointer;white-space:nowrap;transition:background var(--transition-fast,.1s ease), border-color var(--transition-fast,.1s ease), color var(--transition-fast,.1s ease), box-shadow var(--transition-normal,.2s ease), transform var(--transition-normal,.2s ease);border:1px solid #0000;outline:none;font-weight:600;line-height:1.25;text-decoration:none;display:inline-flex}.btn:hover{transform:translateY(-1px)}.btn:active{transition-duration:50ms;transform:translateY(0)}.btn:focus-visible{box-shadow:var(--shadow-focus)}.btn:disabled,.btn.disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none;box-shadow:none!important;transform:none!important}.btn-primary{background:var(--primary-color);color:var(--text-on-primary,var(--white));border-color:#0000}.btn-primary:hover{background:var(--primary-hover);box-shadow:var(--shadow-lg)}.btn-primary:active{background:var(--primary-active)}.btn-secondary{color:var(--text-primary);border-color:var(--border-color,var(--border-default));background:0 0}.btn-secondary:hover{background:var(--hover-bg,var(--bg-hover));border-color:var(--primary-color);color:var(--text-primary)}.btn-ghost{color:var(--text-tertiary);background:0 0;border-color:#0000}.btn-ghost:hover{background:var(--hover-bg,var(--bg-hover));color:var(--text-secondary)}.btn-danger{background:var(--color-error);color:var(--text-on-primary,var(--white));border-color:#0000}.btn-danger:hover{background:var(--color-error-text)}.btn-danger:focus-visible{box-shadow:0 0 0 2px var(--white), 0 0 0 4px var(--color-error)}.btn-text{color:var(--text-secondary);padding:var(--space-2,8px) var(--space-4,16px);background:0 0;border-color:#0000}.btn-text:hover{color:var(--primary-color);background:0 0}.btn-sm{padding:var(--space-1,4px) var(--space-3,12px);font-size:var(--text-xs,12px);border-radius:var(--radius-md,8px)}.btn-lg{padding:var(--space-3,12px) var(--space-6,24px);font-size:var(--text-base,16px);border-radius:var(--radius-xl,16px)}.btn-pill{border-radius:var(--radius-full,9999px)}.btn-rounded{border-radius:var(--radius-md,8px)}.btn-icon{border-radius:var(--radius-md,8px);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;transition:background var(--transition-fast,.1s ease), color var(--transition-fast,.1s ease), transform var(--transition-fast,.1s ease);background:0 0;border:none;outline:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.btn-icon:hover{background:var(--hover-bg,var(--bg-hover));color:var(--text-primary);transform:none}.btn-icon:active{background:var(--hover-bg,var(--bg-hover));transition-duration:var(--duration-instant,50ms);transform:scale(.95)}.btn-icon:focus-visible{box-shadow:var(--shadow-focus);outline:none}.btn-icon:disabled,.btn-icon[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}.btn-icon.btn-icon-primary{background:var(--primary-color);color:var(--text-on-primary,var(--white))}.btn-icon.btn-icon-primary:hover{background:var(--primary-hover)}.btn-icon.btn-icon-danger:hover{background:var(--color-error-bg,#ef44441a);color:var(--color-error)}.btn-icon svg{flex-shrink:0;width:16px;height:16px}.btn-icon-sm svg{width:14px;height:14px}.btn-icon-sm{width:28px;height:28px}.btn-icon-lg{width:44px;height:44px}.close-btn{border-radius:var(--radius-full,9999px);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;transition:background var(--transition-fast,.1s ease), color var(--transition-fast,.1s ease);background:0 0;border:none;outline:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.close-btn:hover{background:var(--hover-bg,var(--bg-hover));color:var(--text-primary)}.close-btn:active{transition-duration:50ms;transform:scale(.9)}.close-btn:focus-visible{box-shadow:var(--shadow-focus);outline:none}.close-btn:disabled,.close-btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}.close-btn svg{flex-shrink:0;width:16px;height:16px}.close-btn-sm{width:28px;height:28px}.close-btn-lg{width:40px;height:40px}.back-btn{padding:var(--space-1,4px);border-radius:var(--radius-sm,4px);color:var(--text-secondary);cursor:pointer;transition:background var(--transition-fast,.1s ease), color var(--transition-fast,.1s ease), transform var(--transition-fast,.1s ease);background:0 0;border:none;outline:none;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.back-btn:hover{background:var(--hover-bg,var(--bg-hover));color:var(--text-primary)}.back-btn:active{transition-duration:50ms;transform:translate(-2px)}.back-btn:focus-visible{box-shadow:var(--shadow-focus);outline:none}.icon-btn{border-radius:var(--radius-full,9999px);cursor:pointer;color:var(--text-secondary);transition:background var(--transition-fast,.1s ease), transform var(--transition-normal,.2s ease), box-shadow var(--transition-normal,.2s ease);background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:inline-flex}.icon-btn:hover{background:var(--hover-bg,var(--bg-hover));color:var(--text-primary);transform:scale(1.05)}.icon-btn:active{transform:scale(.95)}.icon-btn:focus-visible{box-shadow:var(--shadow-focus)}.icon-btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.icon-btn-sm{width:28px;height:28px}.icon-btn-md{width:36px;height:36px}.icon-btn-lg{width:44px;height:44px}.icon-btn-xl{width:56px;height:56px}.icon-btn-primary{background:var(--primary-color);color:var(--text-inverse,var(--white));box-shadow:var(--shadow-md)}.icon-btn-primary:hover{background:var(--primary-hover);box-shadow:var(--shadow-lg);transform:scale(1.06)}.icon-btn-primary:active{transform:scale(.97)}.icon-btn-outline{border:1px solid var(--border-default);color:var(--text-secondary)}.icon-btn-outline:hover{border-color:var(--primary-color);color:var(--primary-color);background:var(--hover-bg,var(--bg-hover))}@keyframes btn-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn.loading{opacity:.7;cursor:not-allowed;pointer-events:none;box-shadow:none!important;transform:none!important}.btn-spinner{border:2px solid;border-right-color:#0000;border-radius:50%;width:14px;height:14px;animation:.6s linear infinite btn-spin;display:inline-block}.generate-btn{background:linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);color:var(--text-inverse,var(--white));padding:var(--space-2) var(--space-6);border-radius:var(--radius-3xl,24px);font-weight:600;font-size:var(--text-sm);cursor:pointer;align-items:center;gap:var(--space-2);transition:all var(--transition-main,.2s ease);border:none;display:flex;box-shadow:0 4px 12px #5851b84d}.generate-btn:hover{background:linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-active) 100%);transform:translateY(-1px);box-shadow:0 6px 16px #5851b866}.generate-btn:disabled,.generate-btn.loading,.generate-btn.disabled{color:#ffffffb3;cursor:not-allowed;box-shadow:none;border-radius:var(--radius-3xl,24px);transform:none;background:linear-gradient(135deg,#c9b8f0 0%,#b8a6e8 100%)!important}.generate-btn-content{align-items:center;gap:var(--space-1-5);flex-direction:row;display:flex}.generate-btn-cost{opacity:.78;letter-spacing:0;font-size:11px;font-weight:400;line-height:1}.generate-btn-cost:before{content:"·";margin-right:var(--space-1-5)}.btn-secondary.generate-btn{background:var(--panel-bg,var(--bg-sunken));color:var(--text-primary);border:1px solid var(--border-color,var(--border-default));box-shadow:none}.btn-secondary.generate-btn:hover{background:var(--hover-bg,var(--bg-hover));transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.generate-btn-pill{background:linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);color:var(--text-inverse,var(--white));padding:var(--space-2) var(--space-6);border-radius:var(--radius-full,9999px);font-weight:600;font-size:var(--text-sm);cursor:pointer;align-items:center;gap:var(--space-2);transition:all var(--transition-main,.2s ease);border:none;display:flex;box-shadow:0 4px 12px #5851b84d}.generate-btn-pill:hover{background:linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-active) 100%);transform:translateY(-1px);box-shadow:0 6px 16px #5851b866}.generate-btn-pill:active{transform:translateY(0)}.generate-btn-pill:disabled,.generate-btn-pill.loading,.generate-btn-pill.disabled{color:#ffffffb3;cursor:not-allowed;box-shadow:none;transform:none;background:linear-gradient(135deg,#c9b8f0 0%,#b8a6e8 100%)!important}.generate-btn-purple{background:linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 80%, #fff) 0%, var(--primary-color) 100%);color:var(--text-inverse,var(--white));border-radius:var(--radius-md,8px);padding:var(--space-3) var(--space-6);cursor:pointer;align-items:center;gap:var(--space-2);transition:all var(--transition-main,.2s ease);font-weight:600;font-size:var(--text-sm);border:none;display:flex}.generate-btn-purple:hover{box-shadow:0 4px 12px color-mix(in srgb, var(--primary-color) 40%, transparent);transform:translateY(-1px)}.generate-btn-purple:disabled,.generate-btn-purple.loading{color:var(--text-disabled);cursor:not-allowed;box-shadow:none;transform:none;background:color-mix(in srgb, var(--primary-color) 35%, var(--bg-surface))!important}.tool-btn{justify-content:center;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);color:var(--text-secondary);font-family:var(--font-ui);font-size:var(--text-sm);cursor:pointer;white-space:nowrap;transition:background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-normal) var(--ease-spring);background:0 0;border:1px solid #0000;outline:none;display:inline-flex}.tool-btn:hover{background:var(--bg-hover);border-color:var(--border-default);color:var(--text-primary)}.tool-btn:active{transition-duration:var(--duration-instant);transform:scale(.97)}.tool-btn:focus-visible{box-shadow:var(--shadow-focus)}.tool-btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.tool-btn svg{width:var(--icon-sm);height:var(--icon-sm);flex-shrink:0}.tool-btn.selected{background:var(--primary-subtle);border-color:var(--primary-color);color:var(--primary-color)}.tool-btn-danger:hover{background:var(--color-error-bg);border-color:var(--color-error);color:var(--color-error)}.tool-btn-compact{padding:var(--space-1);min-width:28px;min-height:28px}.tool-btn-stacked{padding:var(--space-2);flex-direction:column;gap:2px}.tool-btn-stacked span{letter-spacing:var(--tracking-wider);font-size:10px}.tool-btn-sm{padding:2px var(--space-1);font-size:var(--text-xs)}.tool-btn-sm svg{width:var(--icon-xs);height:var(--icon-xs)}.tool-btn-lg{padding:var(--space-2) var(--space-3);font-size:var(--text-base)}.tool-btn-lg svg{width:var(--icon-md);height:var(--icon-md)}
