:root{--bg-primary:#0a0a0f;--bg-secondary:#12121a;--bg-tertiary:#1a1a2e;--bg-card:#16162a;--bg-card-hover:#1e1e3a;--bg-card-selected:#252550;--text-primary:#e8e8f0;--text-secondary:#9898b0;--text-muted:#606078;--accent-primary:#7c5cfc;--accent-secondary:#5c8cfc;--accent-gradient:linear-gradient(135deg, #7c5cfc, #5c8cfc, #40c0cb);--accent-glow:#7c5cfc4d;--success:#40d080;--warning:#f0c040;--danger:#f04060;--border:#2a2a40;--border-light:#3a3a55;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 4px 16px #0006;--shadow-lg:0 8px 32px #00000080;--shadow-glow:0 0 20px var(--accent-glow);--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "Fira Code", "Cascadia Code", monospace;--transition:.2s ease}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;line-height:1.6}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}::selection{background:var(--accent-primary);color:#fff}.app{flex-direction:column;min-height:100vh;display:flex}.app-header{background:var(--bg-secondary);border-bottom:1px solid var(--border);z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:2rem 2rem 1.5rem;position:sticky;top:0}.header-content{flex-direction:column;align-items:center;gap:.5rem;max-width:1200px;margin:0 auto;display:flex}.logo{align-items:center;gap:.75rem;display:flex}.logo-icon{font-size:2rem;animation:2s ease-in-out infinite pulse-glow}@keyframes pulse-glow{0%,to{filter:drop-shadow(0 0 4px var(--accent-primary))}50%{filter:drop-shadow(0 0 12px var(--accent-primary))}}.logo h1{background:var(--accent-gradient);-webkit-text-fill-color:transparent;letter-spacing:-.02em;-webkit-background-clip:text;background-clip:text;font-size:1.75rem;font-weight:800}.tagline{color:var(--text-secondary);font-size:.95rem}.header-controls{gap:.5rem;margin-top:.5rem;display:flex}.lang-toggle{border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;font-size:.85rem;font-family:var(--font-sans);transition:var(--transition);background:0 0;border-radius:999px;padding:.4rem 1rem}.lang-toggle:hover{border-color:var(--accent-primary);color:var(--text-primary)}.lang-toggle.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff;font-weight:600}.app-main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:2rem}.step{margin-bottom:2rem;position:relative}.step-badge{background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;border-radius:999px;margin-bottom:1rem;padding:.3rem 1rem;font-size:.8rem;font-weight:600;display:inline-block}.step-badge-output{background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));color:#fff;border:none}.section-title{color:var(--text-primary);margin-bottom:1rem;font-size:1.25rem;font-weight:700}.model-category{margin-bottom:1.5rem}.category-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em;margin-bottom:.75rem;font-size:.9rem;font-weight:600}.model-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.75rem;display:grid}.model-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);text-align:left;font-family:var(--font-sans);color:var(--text-primary);flex-direction:column;gap:.5rem;padding:1rem 1.25rem;display:flex}.model-card:hover{background:var(--bg-card-hover);border-color:var(--border-light);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.model-card.selected{background:var(--bg-card-selected);border-color:var(--accent-primary);box-shadow:var(--shadow-glow)}.model-header{align-items:center;gap:.75rem;display:flex}.model-icon{font-size:1.5rem}.model-name{font-size:.95rem;font-weight:600}.model-provider{color:var(--text-muted);font-size:.78rem}.model-strengths{flex-wrap:wrap;gap:.35rem;display:flex}.strength-tag{background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);white-space:nowrap;border-radius:999px;padding:.15rem .5rem;font-size:.7rem}.model-info-banner{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-secondary);align-items:center;gap:.5rem;margin-top:.75rem;padding:.75rem 1.25rem;font-size:.9rem;display:flex}.token-badge{background:var(--accent-primary);color:#fff;border-radius:999px;margin-left:auto;padding:.2rem .6rem;font-size:.75rem;font-weight:600}.template-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.75rem;display:grid}.template-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);text-align:left;font-family:var(--font-sans);color:var(--text-primary);align-items:center;gap:1rem;padding:1rem 1.25rem;display:flex}.template-card:hover{background:var(--bg-card-hover);border-color:var(--border-light);transform:translateY(-1px)}.template-card.selected{background:var(--bg-card-selected);border-color:var(--accent-primary);box-shadow:var(--shadow-glow)}.template-icon{flex-shrink:0;font-size:1.75rem}.template-name{font-size:.95rem;font-weight:600}.template-desc{color:var(--text-secondary);margin-top:.15rem;font-size:.8rem}.input-mode-toggle{gap:.5rem;margin-bottom:1rem;display:flex}.mode-btn{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text-secondary);cursor:pointer;font-family:var(--font-sans);transition:var(--transition);padding:.6rem 1.5rem;font-size:.9rem;font-weight:500}.mode-btn:hover:not(:disabled){border-color:var(--border-light);color:var(--text-primary)}.mode-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.mode-btn:disabled{opacity:.4;cursor:not-allowed}.main-textarea{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);width:100%;min-height:200px;color:var(--text-primary);font-family:var(--font-sans);resize:vertical;transition:var(--transition);padding:1.25rem;font-size:.95rem;line-height:1.7}.main-textarea:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-glow);outline:none}.main-textarea::placeholder{color:var(--text-muted)}.input-footer{justify-content:space-between;align-items:center;margin-top:.75rem;display:flex}.char-count{color:var(--text-muted);font-size:.8rem}.voice-area{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);flex-direction:column;align-items:center;gap:1.5rem;padding:2rem;display:flex}.voice-indicator{text-align:center}.voice-wave{justify-content:center;align-items:center;gap:4px;height:60px;margin-bottom:1rem;display:flex}.voice-wave .bar{background:var(--accent-primary);border-radius:2px;width:4px;height:12px}.listening .voice-wave .bar{animation:.6s ease-in-out infinite wave}.listening .voice-wave .bar:first-child{animation-delay:0s}.listening .voice-wave .bar:nth-child(2){animation-delay:.1s}.listening .voice-wave .bar:nth-child(3){animation-delay:.2s}.listening .voice-wave .bar:nth-child(4){animation-delay:.1s}.listening .voice-wave .bar:nth-child(5){animation-delay:0s}@keyframes wave{0%,to{opacity:.5;height:12px}50%{opacity:1;height:50px}}.voice-status{color:var(--text-secondary);font-size:.95rem}.listening .voice-status{color:var(--accent-primary);font-weight:600}.voice-controls{gap:1rem;display:flex}.voice-transcript{background:var(--bg-tertiary);border-radius:var(--radius-md);border:1px solid var(--border);width:100%;padding:1.25rem}.voice-transcript h4{color:var(--text-secondary);margin-bottom:.5rem;font-size:.85rem}.voice-transcript p{margin-bottom:1rem;font-size:.95rem;line-height:1.6}.voice-error{border:1px solid var(--danger);border-radius:var(--radius-sm);color:var(--danger);background:#f040601a;padding:.75rem 1rem;font-size:.85rem}.btn{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-tertiary);color:var(--text-primary);cursor:pointer;font-family:var(--font-sans);transition:var(--transition);align-items:center;gap:.4rem;padding:.5rem 1.25rem;font-size:.85rem;font-weight:500;display:inline-flex}.btn:hover{background:var(--bg-card-hover);border-color:var(--border-light)}.btn-primary{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.btn-primary:hover{background:#6b4be8}.btn-secondary{background:var(--bg-card);border-color:var(--border)}.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn-success{background:var(--success);border-color:var(--success);color:#fff}.btn-ghost{color:var(--text-secondary);background:0 0;border-color:#0000}.btn-ghost:hover{background:var(--bg-tertiary);color:var(--text-primary)}.btn-sm{padding:.3rem .75rem;font-size:.78rem}.btn-large{border-radius:var(--radius-md);padding:.75rem 2rem;font-size:1rem;font-weight:600}.generate-section{text-align:center;margin:2rem 0 3rem}.btn-generate{background:var(--accent-gradient);border-radius:var(--radius-lg);color:#fff;font-family:var(--font-sans);cursor:pointer;transition:var(--transition);box-shadow:0 4px 20px var(--accent-glow);border:none;align-items:center;gap:.75rem;padding:1rem 3rem;font-size:1.1rem;font-weight:700;display:inline-flex}.btn-generate:hover:not(.disabled){box-shadow:0 8px 30px var(--accent-glow);transform:translateY(-2px)}.btn-generate:active:not(.disabled){transform:translateY(0)}.btn-generate.disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.5)}.generate-icon{font-size:1.3rem}.generate-hint{color:var(--warning);margin-top:.75rem;font-size:.85rem}.shortcut-hint{color:var(--text-muted);margin-top:.5rem;font-size:.78rem}.prompt-output{animation:.3s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.output-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.output-actions{flex-wrap:wrap;gap:.5rem;display:flex}.sections-list{flex-direction:column;gap:.75rem;margin-bottom:2rem;display:flex}.section-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);transition:var(--transition);overflow:hidden}.section-card:hover{border-color:var(--border-light)}.section-card-header{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.75rem;padding:1rem 1.25rem;display:flex}.section-card-header:hover{background:var(--bg-card-hover)}.section-icon{font-size:1.25rem}.section-card-title{flex:1;font-size:.95rem;font-weight:600}.expand-toggle{color:var(--text-muted);font-size:.75rem}.section-card-body{border-top:1px solid var(--border);padding:0 1.25rem 1.25rem}.section-content{background:var(--bg-tertiary);border-radius:var(--radius-sm);font-family:var(--font-mono);color:var(--text-primary);white-space:pre-wrap;word-break:break-word;max-height:400px;margin:.75rem 0;padding:1rem;font-size:.82rem;line-height:1.7;overflow-y:auto}.full-prompt-preview{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.full-prompt-preview h3{border-bottom:1px solid var(--border);padding:1rem 1.25rem;font-size:1rem;font-weight:600}.full-prompt-text{font-family:var(--font-mono);color:var(--text-primary);white-space:pre-wrap;word-break:break-word;max-height:600px;padding:1.25rem;font-size:.82rem;line-height:1.7;overflow-y:auto}.app-footer{text-align:center;border-top:1px solid var(--border);color:var(--text-muted);padding:2rem;font-size:.8rem}.btn-icon{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:var(--transition);background:0 0;padding:.4rem .6rem;font-size:1.1rem;line-height:1}.btn-icon:hover{border-color:var(--accent-primary);color:var(--text-primary);background:var(--bg-tertiary)}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#000000b3;justify-content:center;align-items:center;padding:2rem;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-xl);width:100%;max-width:640px;max-height:85vh;box-shadow:var(--shadow-lg);overflow-y:auto}.modal-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:1.5rem 2rem;display:flex}.modal-header h2{font-size:1.25rem;font-weight:700}.modal-close{border:1px solid var(--border);border-radius:var(--radius-sm);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;transition:var(--transition);background:0 0;justify-content:center;align-items:center;font-size:1.1rem;display:flex}.modal-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}.modal-description{color:var(--text-secondary);padding:1rem 2rem;font-size:.9rem;line-height:1.5}.modal-hint{color:var(--text-muted);font-size:.82rem}.modal-footer{border-top:1px solid var(--border);justify-content:flex-end;padding:1.25rem 2rem;display:flex}.providers-list{flex-direction:column;gap:.75rem;padding:0 2rem 1rem;display:flex}.provider-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);transition:var(--transition);padding:1rem 1.25rem}.provider-card.provider-highlight{border-color:var(--accent-primary);box-shadow:0 0 12px var(--accent-glow)}.provider-header{align-items:center;gap:.75rem;display:flex}.provider-icon{font-size:1.5rem}.provider-info{flex:1}.provider-info h3{font-size:.95rem;font-weight:600}.provider-models{color:var(--text-muted);font-size:.75rem}.provider-status{flex-shrink:0}.status-badge{border-radius:999px;padding:.25rem .75rem;font-size:.75rem;font-weight:600}.status-active{color:var(--success);border:1px solid var(--success);background:#40d08026}.status-env{color:var(--accent-secondary);border:1px solid var(--accent-secondary);background:#5c8cfc26}.status-none{background:var(--bg-tertiary);color:var(--text-muted);border:1px solid var(--border)}.provider-display{justify-content:space-between;align-items:center;gap:.75rem;margin-top:.75rem;display:flex}.api-key-masked{font-family:var(--font-mono);color:var(--text-secondary);background:var(--bg-tertiary);border-radius:var(--radius-sm);border:1px solid var(--border);letter-spacing:.05em;padding:.3rem .75rem;font-size:.82rem}.provider-actions{flex-shrink:0;gap:.25rem;display:flex}.btn-danger-text{color:var(--danger)}.btn-danger-text:hover{background:#f040601a}.provider-edit{flex-direction:column;gap:.5rem;margin-top:.75rem;display:flex}.api-key-input{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);font-family:var(--font-mono);transition:var(--transition);padding:.6rem 1rem;font-size:.85rem}.api-key-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-glow);outline:none}.api-key-input::placeholder{color:var(--text-muted)}.provider-edit-actions{gap:.5rem;display:flex}.send-to-ai-section{justify-content:center;margin:1.5rem 0;display:flex}.btn-ai-send{border-radius:var(--radius-lg);color:#fff;font-family:var(--font-sans);cursor:pointer;transition:var(--transition);background:linear-gradient(135deg,#7c5cfc,#40c0cb);border:none;padding:.8rem 2.5rem;font-size:1rem;font-weight:700;box-shadow:0 4px 20px #7c5cfc4d}.btn-ai-send:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 30px #7c5cfc66}.btn-ai-send:disabled{opacity:.6;cursor:not-allowed}.btn-ai-send.sending{background:var(--bg-tertiary);color:var(--text-secondary)}.no-key-notice{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-secondary);align-items:center;gap:.75rem;padding:.75rem 1.25rem;font-size:.85rem;display:flex}.ai-response{background:var(--bg-card);border:1px solid var(--success);border-radius:var(--radius-lg);margin:1.5rem 0;animation:.3s fadeIn;overflow:hidden}.ai-response-error{border-color:var(--danger)}.ai-response-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:1rem 1.25rem;display:flex}.ai-response-header h3{font-size:1rem;font-weight:600}.token-count{color:var(--text-muted);font-size:.75rem;font-family:var(--font-mono)}.ai-response-body{padding:1.25rem}.ai-response-text{font-family:var(--font-mono);color:var(--text-primary);white-space:pre-wrap;word-break:break-word;max-height:600px;font-size:.82rem;line-height:1.7;overflow-y:auto}.ai-error-text{color:var(--danger);font-size:.85rem;line-height:1.6}.ai-response-actions{padding:0 1.25rem 1rem}@media (width<=768px){.app-header{padding:1.5rem 1rem 1rem}.app-main{padding:1rem}.model-grid,.template-grid{grid-template-columns:1fr}.output-header{flex-direction:column;align-items:flex-start}.btn-generate{justify-content:center;width:100%;padding:1rem 2rem}.logo h1{font-size:1.35rem}.modal-overlay{padding:1rem}.modal-content{max-height:90vh}.providers-list{padding:0 1rem 1rem}.provider-display{flex-direction:column;align-items:flex-start}.provider-actions{justify-content:flex-end;width:100%}.no-key-notice{text-align:center;flex-direction:column}}