:root{--color-canvas: #0F0F0F;--color-surface: #18181B;--color-surface-raised: #27272A;--color-surface-hover: #3F3F46;--color-text-primary: #F4F4F5;--color-text-secondary: #A1A1AA;--color-text-tertiary: #71717A;--color-text-inverse: #000000;--color-border: #27272A;--color-border-strong: #3F3F46;--color-accent-red-bg: #4C1D1F;--color-accent-red-text: #FCA5A5;--color-accent-blue-bg: #1E3A5F;--color-accent-blue-text: #93C5FD;--color-accent-green-bg: #1C3A24;--color-accent-green-text: #86EFAC;--color-accent-yellow-bg: #4D3C10;--color-accent-yellow-text: #FDE047;--color-primary: #FFFFFF;--color-primary-hover: #E4E4E7;--color-primary-active: #D4D4D8;--color-success: #86EFAC;--color-error: #FCA5A5;--color-warning: #FDE047;--font-sans: "SF Pro Display", "Geist Sans", "Helvetica Neue", "Switzer", system-ui, sans-serif;--font-serif: "Newsreader", "Instrument Serif", "Playfair Display", serif;--font-mono: "Geist Mono", "SF Mono", "JetBrains Mono", monospace;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 40px;--space-2xl: 64px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);--shadow-md: 0 2px 8px rgba(0, 0, 0, .5);--shadow-hover: 0 4px 12px rgba(0, 0, 0, .6);--ease-out: cubic-bezier(.16, 1, .3, 1);--duration-fast: .15s;--duration-normal: .2s;--duration-slow: .6s}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:var(--font-sans);color:var(--color-text-primary);background-color:var(--color-canvas);line-height:1.6;min-height:100vh}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3{font-family:var(--font-serif);font-weight:400;letter-spacing:-.02em;line-height:1.1;color:var(--color-text-primary)}h1{font-size:2.5rem;letter-spacing:-.04em}h2{font-size:1.5rem;letter-spacing:-.03em}h3{font-size:1.125rem}p{line-height:1.6;color:var(--color-text-secondary)}code,kbd{font-family:var(--font-mono);font-size:.85em}kbd{display:inline-block;padding:2px 6px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-raised);font-size:.75rem}.card{background:var(--color-canvas);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg);transition:box-shadow var(--duration-normal) var(--ease-out)}.card:hover{box-shadow:var(--shadow-hover)}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:10px 20px;background:var(--color-primary);color:var(--color-text-inverse);border:none;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:.875rem;font-weight:500;cursor:pointer;transition:background var(--duration-normal) ease;white-space:nowrap}.btn-primary:hover{background:var(--color-primary-hover)}.btn-primary:active{transform:scale(.98)}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:10px 20px;background:transparent;color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--duration-normal) ease;white-space:nowrap}.btn-secondary:hover{background:var(--color-surface-raised);border-color:var(--color-border-strong)}.btn-secondary:active{transform:scale(.98)}.tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:9999px;font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em}.tag--success{background:var(--color-accent-green-bg);color:var(--color-accent-green-text)}.tag--error{background:var(--color-accent-red-bg);color:var(--color-accent-red-text)}.tag--info{background:var(--color-accent-blue-bg);color:var(--color-accent-blue-text)}.tag--warning{background:var(--color-accent-yellow-bg);color:var(--color-accent-yellow-text)}.divider{border:none;border-top:1px solid var(--color-border);margin:var(--space-lg) 0}.input{display:block;width:100%;padding:10px 14px;font-family:var(--font-sans);font-size:.875rem;color:var(--color-text-primary);background:var(--color-canvas);border:1px solid var(--color-border);border-radius:var(--radius-md);outline:none;transition:border-color var(--duration-fast) ease}.input:focus{border-color:var(--color-border-strong)}.input::placeholder{color:var(--color-text-tertiary)}textarea.input{resize:vertical;min-height:80px;line-height:1.5}.app-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);min-height:100vh;padding:var(--space-lg)}.panel{display:flex;flex-direction:column;gap:var(--space-md)}.panel-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--space-md);border-bottom:1px solid var(--color-border)}.panel-title{font-family:var(--font-sans);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-tertiary)}.scroll-enter{opacity:0;transform:translateY(12px);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out)}.scroll-enter.visible{opacity:1;transform:translateY(0)}.stagger-item{opacity:0;transform:translateY(8px);animation:staggerIn var(--duration-slow) var(--ease-out) forwards;animation-delay:calc(var(--index, 0) * 80ms)}@keyframes staggerIn{to{opacity:1;transform:translateY(0)}}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-dot--connected{background:var(--color-accent-green-text);box-shadow:0 0 0 3px var(--color-accent-green-bg)}.status-dot--disconnected{background:var(--color-text-tertiary);box-shadow:0 0 0 3px var(--color-surface-raised)}.status-dot--error{background:var(--color-accent-red-text);box-shadow:0 0 0 3px var(--color-accent-red-bg)}.status-dot--syncing{background:var(--color-accent-yellow-text);box-shadow:0 0 0 3px var(--color-accent-yellow-bg);animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--space-sm)}.image-grid-item{position:relative;aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-border);cursor:pointer;transition:box-shadow var(--duration-normal) var(--ease-out)}.image-grid-item:hover{box-shadow:var(--shadow-hover)}.image-grid-item img{width:100%;height:100%;object-fit:cover}.drop-zone{border:2px dashed var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-sm);cursor:pointer;transition:all var(--duration-normal) ease;color:var(--color-text-tertiary);text-align:center}.drop-zone:hover,.drop-zone.active{border-color:var(--color-border-strong);background:var(--color-surface);color:var(--color-text-secondary)}.drop-zone-icon{font-size:1.5rem;opacity:.5}.drop-zone-label{font-size:.8125rem;font-weight:500}.drop-zone-hint{font-size:.6875rem;color:var(--color-text-tertiary)}.chip-group{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.chip{display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;font-size:.8125rem;font-weight:500;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-canvas);color:var(--color-text-secondary);cursor:pointer;transition:all var(--duration-fast) ease;-webkit-user-select:none;user-select:none}.chip:hover{background:var(--color-surface-raised);border-color:var(--color-border-strong)}.chip.selected{background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-border-strong)}.image-remove-btn{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:none;background:#0009;color:#fff;font-size:.625rem;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity var(--duration-fast) ease}.image-grid-item:hover .image-remove-btn{opacity:1}.image-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;gap:var(--space-sm);opacity:0;transition:opacity var(--duration-normal) var(--ease-out)}.image-grid-item:hover .image-overlay{opacity:1}.image-overlay-btn{width:36px;height:36px;border-radius:50%;border:none;background:#ffffffe6;color:#000;font-size:.875rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform var(--duration-fast) ease}.image-overlay-btn:hover{transform:scale(1.1)}.image-meta{position:absolute;bottom:0;left:0;right:0;padding:4px 8px;background:linear-gradient(transparent,#00000080);font-family:var(--font-mono);font-size:.5625rem;color:#fffc;opacity:0;transition:opacity var(--duration-normal) ease}.image-grid-item:hover .image-meta{opacity:1}.fullscreen-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:#000000d9;display:flex;align-items:center;justify-content:center;animation:fadeIn var(--duration-normal) var(--ease-out)}.fullscreen-content{max-width:90vw;max-height:90vh;display:flex;flex-direction:column;gap:var(--space-md);align-items:center}.fullscreen-content img{max-width:100%;max-height:80vh;border-radius:var(--radius-md);object-fit:contain}.fullscreen-actions{display:flex;gap:var(--space-sm)}.fullscreen-actions .btn-secondary{background:#ffffff1a;border-color:#fff3;color:#fff}.fullscreen-actions .btn-secondary:hover{background:#fff3}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.prompt-history{position:relative}.prompt-history-list{list-style:none;position:absolute;bottom:100%;left:0;min-width:280px;max-height:200px;overflow-y:auto;background:var(--color-canvas);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);margin-bottom:4px;z-index:10}.prompt-history-item{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px 12px;border:none;background:transparent;cursor:pointer;text-align:left;font-family:var(--font-sans);transition:background var(--duration-fast) ease}.prompt-history-item:hover{background:var(--color-surface-hover)}.prompt-history-text{font-size:.8125rem;color:var(--color-text-primary)}.prompt-history-meta{font-family:var(--font-mono);font-size:.625rem;color:var(--color-text-tertiary);flex-shrink:0;margin-left:var(--space-sm)}.spin-icon{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.generate-button-row{display:flex;gap:var(--space-sm);align-items:stretch}.btn-generating{background:var(--color-primary);animation:pulseBtn 1.5s ease-in-out infinite}@keyframes pulseBtn{0%,to{opacity:1}50%{opacity:.7}}.btn-complete{background:var(--color-success)}.btn-error{background:var(--color-error)}.btn-cancel{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;background:var(--color-accent-red-bg);color:var(--color-accent-red-text);border:1px solid rgba(252,165,165,.2);border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:.8125rem;font-weight:500;cursor:pointer;white-space:nowrap;transition:all var(--duration-fast) ease;animation:fadeIn var(--duration-normal) var(--ease-out)}.btn-cancel:hover{background:#6b2123;border-color:#fca5a559}.btn-cancel:active{transform:scale(.97)}.pipeline-bar{margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);animation:fadeIn var(--duration-normal) var(--ease-out)}.pipeline-steps{display:flex;gap:var(--space-md);margin-bottom:var(--space-sm)}.pipeline-step{display:flex;align-items:center;gap:4px;font-size:.6875rem;font-weight:500;color:var(--color-text-tertiary);transition:color var(--duration-fast) ease}.pipeline-step--running{color:var(--color-accent-yellow-text)}.pipeline-step--done{color:var(--color-accent-green-text)}.pipeline-step--error{color:var(--color-accent-red-text)}.pipeline-step-label{font-family:var(--font-mono);font-size:.625rem;text-transform:uppercase;letter-spacing:.04em}.pipeline-progress-track{height:2px;background:var(--color-border);border-radius:1px;overflow:hidden}.pipeline-progress-fill{height:100%;background:var(--color-primary);border-radius:1px;transition:width var(--duration-normal) var(--ease-out)}.pipeline-progress-info{display:flex;justify-content:space-between;align-items:center;margin-top:4px}.pipeline-progress-text{font-family:var(--font-mono);font-size:.5625rem;color:var(--color-text-tertiary)}.pipeline-progress-detail{font-family:var(--font-mono);font-size:.5625rem;color:var(--color-accent-blue-text);text-align:right;animation:fadeIn var(--duration-fast) ease}.queue-panel{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);background:var(--color-surface)}.queue-panel .panel-header{padding-bottom:var(--space-sm);border-bottom:1px solid var(--color-border);margin-bottom:var(--space-sm)}.queue-list{list-style:none;display:flex;flex-direction:column;gap:2px}.queue-item{display:flex;align-items:center;gap:var(--space-sm);padding:6px 0;border-bottom:1px solid var(--color-border)}.queue-item:last-child{border-bottom:none}.queue-item-prompt{flex:1;font-size:.8125rem;color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-item-meta{font-family:var(--font-mono);font-size:.625rem;color:var(--color-text-tertiary);flex-shrink:0}.queue-item-action{background:none;border:none;color:var(--color-text-tertiary);cursor:pointer;padding:2px;font-size:.75rem;display:flex;align-items:center;transition:color var(--duration-fast) ease}.queue-item-action:hover{color:var(--color-text-primary)}.toast-container{position:fixed;bottom:var(--space-lg);right:var(--space-lg);z-index:2000;display:flex;flex-direction:column;gap:var(--space-sm);pointer-events:none}.toast{display:flex;align-items:center;gap:var(--space-sm);padding:10px 16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);font-size:.8125rem;color:var(--color-text-primary);pointer-events:auto;cursor:pointer;animation:toastSlideIn var(--duration-normal) var(--ease-out);max-width:360px}.toast--success{border-left:3px solid var(--color-success)}.toast--error{border-left:3px solid var(--color-error)}.toast--info{border-left:3px solid var(--color-accent-blue-text)}.toast-message{flex:1}@keyframes toastSlideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.mode-selector{display:flex;gap:2px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:2px}.mode-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border:none;border-radius:calc(var(--radius-md) - 2px);background:transparent;color:var(--color-text-tertiary);font-family:var(--font-sans);font-size:.8125rem;font-weight:500;cursor:pointer;transition:all var(--duration-fast) ease}.mode-tab:hover{color:var(--color-text-secondary);background:var(--color-surface-raised)}.mode-tab.active{background:var(--color-primary);color:var(--color-text-inverse)}.settings-panel{border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.settings-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px var(--space-md);background:var(--color-surface);border:none;color:var(--color-text-secondary);cursor:pointer;font-family:var(--font-sans);font-size:.8125rem;transition:background var(--duration-fast) ease}.settings-toggle:hover{background:var(--color-surface-raised)}.settings-body{padding:var(--space-md);border-top:1px solid var(--color-border);display:flex;flex-direction:column;gap:var(--space-md)}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}.setting-label{font-size:.75rem;color:var(--color-text-secondary);white-space:nowrap;flex-shrink:0;min-width:120px}.toggle{position:relative;width:36px;height:20px;border-radius:10px;border:1px solid var(--color-border);background:var(--color-surface-raised);cursor:pointer;padding:0;transition:all var(--duration-fast) ease;flex-shrink:0}.toggle.active{background:var(--color-primary);border-color:var(--color-primary)}.toggle-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--color-text-tertiary);transition:all var(--duration-fast) ease}.toggle.active .toggle-thumb{left:18px;background:var(--color-text-inverse)}.range-input{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:var(--color-border);border-radius:2px;outline:none}.range-input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:none}.range-input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:none}.flow-banner{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--color-accent-yellow-bg);border:1px solid rgba(253,224,71,.15);border-radius:var(--radius-md);animation:fadeIn var(--duration-normal) var(--ease-out)}.flow-banner__icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;font-size:1.25rem;color:var(--color-accent-yellow-text)}.flow-banner__content{flex:1;min-width:0}.flow-banner__title{font-family:var(--font-sans);font-size:.8125rem;font-weight:600;color:var(--color-accent-yellow-text);letter-spacing:0;margin-bottom:2px}.flow-banner__description{font-size:.75rem;color:#fde047b3;line-height:1.4}.flow-banner__action{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--color-accent-green-text);color:#000;border:none;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:.8125rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:all var(--duration-fast) ease;flex-shrink:0}.flow-banner__action:hover{background:#a7f3d0;transform:translateY(-1px)}.flow-banner__action:active{transform:scale(.97)}.flow-banner__actions{display:flex;gap:var(--space-sm);margin-top:var(--space-sm)}.flow-banner__action--primary{background:var(--color-accent-green-text);color:#000;border:none}.flow-banner__action--primary:hover{background:#a7f3d0}.flow-banner__action--secondary{background:transparent;color:var(--color-accent-yellow-text);border:1px solid rgba(253,224,71,.25)}.flow-banner__action--secondary:hover{background:#fde0471a;border-color:#fde04766}