:root{--bg: #f0f2f8;--bg-card: #ffffff;--bg-glass: rgba(255,255,255,.7);--bg-hover: #f4f5fa;--bg-active: #ebedf5;--border: #e4e6f0;--border-light: #eff0f5;--text: #1a1c2e;--text-secondary: #5b5f78;--text-muted: #9498b0;--gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);--gradient-subtle: linear-gradient(135deg, rgba(99,102,241,.04) 0%, rgba(168,85,247,.04) 100%);--gradient-hero: linear-gradient(135deg, #6366f1 0%, #4f46e5 30%, #7c3aed 70%, #9333ea 100%);--primary: #6366f1;--primary-hover: #4f46e5;--primary-light: #eef0ff;--primary-glow: rgba(99,102,241,.25);--accent-blue: #3b82f6;--accent-orange: #f97316;--accent-green: #10b981;--accent-pink: #ec4899;--accent-teal: #14b8a6;--success: #10b981;--warning: #f59e0b;--shadow-xs: 0 1px 2px rgba(0,0,0,.03);--shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03);--shadow-md: 0 4px 12px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.03);--shadow-lg: 0 12px 32px rgba(0,0,0,.07), 0 4px 8px rgba(0,0,0,.04);--shadow-glow: 0 0 0 3px var(--primary-glow), 0 4px 16px rgba(99,102,241,.12);--radius-xs: 6px;--radius-sm: 10px;--radius: 14px;--radius-lg: 20px;--radius-xl: 24px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .4s cubic-bezier(.4, 0, .2, 1)}[data-theme=dark]{--bg: #0f0f1a;--bg-card: #1a1a2e;--bg-glass: rgba(26,26,46,.8);--bg-hover: #222240;--bg-active: #2a2a50;--border: #2a2a48;--border-light: #222240;--text: #e8e8f5;--text-secondary: #a0a0c0;--text-muted: #6a6a88;--gradient-subtle: linear-gradient(135deg, rgba(99,102,241,.08) 0%, rgba(168,85,247,.08) 100%);--primary-light: #1e1e40;--primary-glow: rgba(99,102,241,.35);--shadow-xs: 0 1px 2px rgba(0,0,0,.15);--shadow-sm: 0 1px 3px rgba(0,0,0,.2);--shadow-md: 0 4px 12px rgba(0,0,0,.25);--shadow-lg: 0 12px 32px rgba(0,0,0,.35);--shadow-glow: 0 0 0 3px var(--primary-glow), 0 4px 20px rgba(99,102,241,.2)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,Noto Sans SC,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{min-height:100vh;display:flex;flex-direction:column;background-image:radial-gradient(ellipse at 20% 0%,rgba(99,102,241,.04) 0%,transparent 50%),radial-gradient(ellipse at 80% 100%,rgba(168,85,247,.03) 0%,transparent 50%);transition:background-image var(--transition-slow)}[data-theme=dark] .app{background-image:radial-gradient(ellipse at 20% 0%,rgba(99,102,241,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 100%,rgba(168,85,247,.06) 0%,transparent 50%)}.header{display:flex;align-items:center;justify-content:space-between;padding:12px 28px;background:var(--bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-light);box-shadow:var(--shadow-xs);position:sticky;top:0;z-index:100;transition:all var(--transition)}.header-left{display:flex;align-items:center;gap:12px}.logo{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--gradient-primary);border-radius:var(--radius-sm);box-shadow:0 2px 8px var(--primary-glow)}.brand-text{display:flex;flex-direction:column}.title{font-size:18px;font-weight:750;letter-spacing:-.4px;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2}.subtitle{font-size:11px;color:var(--text-muted);font-weight:500;letter-spacing:.8px;text-transform:uppercase}.theme-toggle{background:var(--bg);border:1.5px solid var(--border);border-radius:50%;width:40px;height:40px;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}.theme-toggle:hover{background:var(--bg-hover);border-color:var(--primary);transform:rotate(20deg) scale(1.05);box-shadow:0 2px 8px var(--primary-glow)}.main-layout{display:flex;flex:1;overflow:hidden;gap:0}@media(max-width:960px){.main-layout{flex-direction:column}}.config-panel{width:440px;min-width:440px;padding:24px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:22px;height:calc(100vh - 68px);scroll-behavior:smooth}@media(max-width:960px){.config-panel{width:100%;min-width:unset;height:auto;max-height:55vh;padding:16px;gap:16px}}.config-section{display:flex;flex-direction:column;gap:12px}.section-title{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.2px;padding-left:2px}.category-tabs{display:flex;flex-wrap:wrap;gap:6px}.category-tab{display:flex;align-items:center;gap:6px;padding:7px 14px;border:1.5px solid transparent;border-radius:24px;background:var(--bg-card);cursor:pointer;font-size:13px;font-weight:550;color:var(--text-secondary);transition:all var(--transition);white-space:nowrap;box-shadow:var(--shadow-xs)}.category-tab:hover{color:var(--text);background:var(--bg-hover);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.category-tab.active{background:var(--gradient-primary);color:#fff;box-shadow:0 2px 10px var(--primary-glow);font-weight:600}.cat-icon{font-size:15px}.template-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:310px;overflow-y:auto;padding:2px}@media(max-width:960px){.template-list{max-height:200px}}.template-card{padding:14px;border:1.5px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all var(--transition);background:var(--bg-card);box-shadow:var(--shadow-xs);position:relative;overflow:hidden}.template-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--gradient-subtle);opacity:0;transition:opacity var(--transition)}.template-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.template-card:hover:before{opacity:1}.template-card.selected{border-color:var(--primary);background:var(--primary-light);box-shadow:var(--shadow-glow)}.template-card.selected:before{opacity:1}.template-name{font-size:13px;font-weight:650;margin-bottom:5px;position:relative;z-index:1}.template-desc{font-size:11px;color:var(--text-muted);line-height:1.45;position:relative;z-index:1}.param-form{display:flex;flex-direction:column;gap:14px}.param-field{display:flex;flex-direction:column;gap:5px}.param-label{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}.optional-tag{font-size:10px;background:var(--bg-hover);color:var(--text-muted);padding:2px 8px;border-radius:12px;font-weight:500}.param-input{padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13px;background:var(--bg);color:var(--text);outline:none;transition:all var(--transition);font-family:inherit}.param-input:focus{border-color:var(--primary);background:var(--bg-card);box-shadow:0 0 0 4px #6366f114}.param-input::placeholder{color:var(--text-muted)}.param-textarea{padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13px;background:var(--bg);color:var(--text);outline:none;transition:all var(--transition);font-family:Cascadia Code,JetBrains Mono,Fira Code,Consolas,monospace;resize:vertical;min-height:72px;line-height:1.6}.param-textarea:focus{border-color:var(--primary);background:var(--bg-card);box-shadow:0 0 0 4px #6366f114}.param-textarea::placeholder{color:var(--text-muted);font-family:inherit}.model-selector{display:flex;flex-direction:column;gap:6px}.model-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);background:var(--bg-card);box-shadow:var(--shadow-xs)}.model-card:hover{border-color:var(--primary);transform:translate(3px);box-shadow:var(--shadow-sm)}.model-card.selected{border-color:var(--primary);background:var(--primary-light);box-shadow:var(--shadow-glow)}.model-icon{font-size:26px;flex-shrink:0;width:36px;text-align:center}.model-name{font-size:14px;font-weight:650}.model-desc{font-size:11px;color:var(--text-muted);margin-top:1px}.generate-btn{padding:15px 20px;border:none;border-radius:var(--radius);background:var(--gradient-primary);color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:all var(--transition);font-family:inherit;letter-spacing:.3px;box-shadow:0 4px 16px var(--primary-glow);position:relative;overflow:hidden}.generate-btn:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.generate-btn:hover:not(:disabled):after{left:100%}.generate-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 24px var(--primary-glow)}.generate-btn:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px var(--primary-glow)}.generate-btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(20%)}.preview-panel{flex:1;display:flex;flex-direction:column;background:var(--bg);overflow:hidden;padding:20px 24px 24px;gap:0}@media(max-width:960px){.preview-panel{padding:12px 16px 16px}}.preview-tabs{display:flex;gap:4px;margin-bottom:16px}.preview-tab{padding:9px 20px;border:none;border-radius:24px;background:var(--bg-card);font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all var(--transition);font-family:inherit;box-shadow:var(--shadow-xs)}.preview-tab:hover{color:var(--text);box-shadow:var(--shadow-sm)}.preview-tab.active{background:var(--primary);color:#fff;box-shadow:0 2px 8px var(--primary-glow)}.preview-content{flex:1;display:flex;flex-direction:column;overflow:hidden;animation:fadeSlideIn .35s ease}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.preview-actions{display:flex;gap:8px;padding-bottom:14px}.action-btn{padding:9px 18px;border:1.5px solid var(--border);border-radius:24px;background:var(--bg-card);color:var(--text);font-size:13px;font-weight:550;cursor:pointer;transition:all var(--transition);font-family:inherit;display:flex;align-items:center;gap:6px;box-shadow:var(--shadow-xs)}.action-btn:hover{background:var(--bg-hover);border-color:var(--primary);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.prompt-output{flex:1;overflow-y:auto;padding:24px;background:#1e1e2e;border:1px solid #2a2a40;border-radius:var(--radius-lg);box-shadow:inset 0 2px 8px #00000026;position:relative}[data-theme=dark] .prompt-output{background:#141420;border-color:#1e1e30;box-shadow:inset 0 2px 8px #0000004d}.prompt-output:before{content:"";position:absolute;top:14px;left:14px;width:8px;height:8px;background:#ff5f57;border-radius:50%;box-shadow:18px 0 #ffbd2e,36px 0 #27ca40;opacity:.5}.prompt-output pre{white-space:pre-wrap;word-wrap:break-word;font-family:Cascadia Code,JetBrains Mono,Fira Code,SF Mono,Consolas,monospace;font-size:13.5px;line-height:1.85;color:#e0e0f0;margin-top:8px}[data-theme=dark] .prompt-output pre{color:#d0d0e8}.preview-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--text-muted);text-align:center;padding:40px;animation:fadeSlideIn .5s ease}.empty-icon{font-size:64px;margin-bottom:4px;opacity:.5;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.preview-empty h3{font-size:20px;font-weight:700;color:var(--text-secondary)}.preview-empty p{font-size:14px;max-width:320px;line-height:1.7}.history-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;animation:fadeSlideIn .3s ease}.history-item{padding:14px 18px;background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow-xs)}.history-item:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.history-header{display:flex;align-items:center;gap:10px;margin-bottom:7px}.history-template{font-size:13px;font-weight:700}.history-model{font-size:10px;background:var(--primary-light);color:var(--primary);padding:3px 10px;border-radius:12px;font-weight:600}.history-preview{font-size:12px;color:var(--text-secondary);font-family:Cascadia Code,JetBrains Mono,Fira Code,Consolas,monospace;margin-bottom:6px;line-height:1.5}.history-time{font-size:11px;color:var(--text-muted)}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}::selection{background:#6366f140;color:var(--text)}