@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";
:root{--color-primary:#2563eb;--color-primary-hover:#1d4ed8;--color-primary-light:#3b82f6;--color-surface:#fff;--color-surface-secondary:#f8fafc;--color-surface-tertiary:#f1f5f9;--color-text:#0f172a;--color-text-secondary:#475569;--color-text-muted:#94a3b8;--color-border:#e2e8f0;--color-border-hover:#cbd5e1;--color-success:#059669;--color-error:#dc2626;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px -1px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a;--transition:.15s ease}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--color-surface-secondary);color:var(--color-text);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5}.animated-bg{display:none}.app-header{background:var(--color-surface);border-bottom:1px solid var(--color-border);z-index:100;padding:16px 0;position:sticky;top:0}.header-content{justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto;padding:0 24px;display:flex}.logo-section{align-items:center;gap:12px;display:flex}.logo-image-container{border-radius:var(--radius-md);border:1px solid var(--color-border);background:#0f172a;justify-content:center;align-items:center;width:40px;height:40px;display:flex;overflow:hidden}.logo-image{object-fit:cover;width:100%;height:100%}.app-title{color:var(--color-text);font-size:18px;font-weight:600}.app-subtitle{color:var(--color-text-muted);margin-top:2px;font-size:13px}.header-actions{align-items:center;gap:12px;display:flex}.model-badge{background:var(--color-surface-tertiary);border:1px solid var(--color-border);color:var(--color-text-secondary);border-radius:100px;align-items:center;gap:6px;padding:8px 14px;font-size:13px;font-weight:500;display:flex}.model-icon{font-size:14px}.settings-toggle-btn{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition);padding:8px 14px;font-size:13px;font-weight:500}.settings-toggle-btn:hover{background:var(--color-surface-tertiary);border-color:var(--color-border-hover)}.main-container-new{grid-template-columns:420px 1fr;gap:32px;max-width:1400px;min-height:calc(100vh - 80px);margin:0 auto;padding:32px 24px;display:grid}.input-panel,.variants-panel{flex-direction:column;gap:20px;display:flex}.control-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:24px}.card-header{align-items:flex-start;gap:12px;margin-bottom:20px;display:flex}.card-icon{background:var(--color-surface-tertiary);border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:16px;display:flex}.card-title{color:var(--color-text);margin-bottom:2px;font-size:15px;font-weight:600}.card-description{color:var(--color-text-muted);font-size:13px}.model-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.model-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition);text-align:center;flex-direction:column;align-items:center;gap:4px;padding:14px;display:flex}.model-card:hover{border-color:var(--color-border-hover);background:var(--color-surface-tertiary)}.model-card-active{border-color:var(--color-primary);background:#eff6ff}.model-card-active:hover{background:#dbeafe}.model-card-icon{margin-bottom:2px;font-size:22px}.model-card-name{color:var(--color-text);font-size:13px;font-weight:600}.model-card-description{color:var(--color-text-muted);font-size:11px}.input-group{margin-bottom:16px}.input-group:last-child{margin-bottom:0}.input-label{color:var(--color-text);margin-bottom:6px;font-size:13px;font-weight:500;display:block}.input-field,.textarea-field,.select-field{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);width:100%;color:var(--color-text);transition:all var(--transition);outline:none;padding:10px 12px;font-family:inherit;font-size:14px}.input-field:focus,.textarea-field:focus,.select-field:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #2563eb1a}.input-field::placeholder,.textarea-field::placeholder{color:var(--color-text-muted)}.textarea-field{resize:vertical;min-height:80px}.select-field{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:36px}.settings-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.generate-btn-new{background:var(--color-primary);border-radius:var(--radius-md);color:#fff;cursor:pointer;width:100%;transition:all var(--transition);border:none;justify-content:center;align-items:center;gap:8px;padding:14px 20px;font-family:inherit;font-size:14px;font-weight:600;display:flex}.generate-btn-new:hover{background:var(--color-primary-hover)}.generate-btn-new:disabled{opacity:.6;cursor:not-allowed}.btn-icon{font-size:16px}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.6s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.config-display{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:20px;padding:20px}.config-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.config-title{color:var(--color-text);font-size:14px;font-weight:600}.config-close-btn{color:var(--color-text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px;font-size:16px;line-height:1}.config-close-btn:hover{background:var(--color-surface-tertiary);color:var(--color-text)}.config-grid{grid-template-columns:repeat(5,1fr);gap:12px;display:grid}.config-item{background:var(--color-surface-tertiary);border-radius:var(--radius-md);text-align:center;padding:12px}.config-label{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:11px;font-weight:500}.config-value{color:var(--color-text);text-transform:capitalize;font-size:13px;font-weight:600}.variants-grid{flex-direction:column;gap:16px;display:flex}.variant-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);flex-direction:column;padding:0;display:flex}.variant-header{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;margin-bottom:0;padding:16px;display:flex}.variant-badge{background:var(--color-primary);color:#fff;border-radius:100px;padding:4px 10px;font-size:12px;font-weight:600}.copy-btn-new{background:var(--color-surface-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition);padding:6px 12px;font-size:12px;font-weight:500}.copy-btn-new:hover{background:var(--color-surface);border-color:var(--color-border-hover)}.variant-content{background:var(--color-surface-secondary);border-radius:var(--radius-md);color:var(--color-text);white-space:pre-wrap;word-wrap:break-word;flex-grow:1;margin:16px;padding:16px;font-size:14px;line-height:1.7}.empty-state-new,.loading-state-new,.error-state-new{text-align:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:60px 40px}.empty-icon-new{opacity:.4;margin-bottom:16px;font-size:48px}.empty-title-new{color:var(--color-text);margin-bottom:8px;font-size:16px;font-weight:600}.empty-description-new{color:var(--color-text-muted);max-width:360px;margin:0 auto;font-size:14px;line-height:1.6}.loading-spinner-new{border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;width:36px;height:36px;margin:0 auto 16px;animation:.6s linear infinite spin}.loading-text-new{color:var(--color-text-secondary);font-size:14px}.error-icon-new{margin-bottom:16px;font-size:48px}.error-title-new{color:var(--color-error);margin-bottom:8px;font-size:16px;font-weight:600}.error-message-new{color:var(--color-text-muted);font-size:14px}.mode-toggle{background:var(--color-surface-tertiary);border-radius:var(--radius-md);gap:8px;padding:4px;display:flex}.mode-btn{border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition);background:0 0;border:none;flex:1;justify-content:center;align-items:center;gap:6px;padding:10px 16px;font-size:13px;font-weight:500;display:flex}.mode-btn:hover{color:var(--color-text)}.mode-btn-active{background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-sm)}.variant-count-section{border-top:1px solid var(--color-border);margin-top:16px;padding-top:16px}.variant-count-label{color:var(--color-text-secondary);margin-bottom:10px;font-size:13px;font-weight:500;display:block}.variant-count-buttons{gap:8px;display:flex}.variant-count-btn{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);width:40px;height:40px;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition);justify-content:center;align-items:center;font-size:14px;font-weight:600;display:flex}.variant-count-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.variant-count-btn-active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.model-checkbox{border:2px solid var(--color-border);background:var(--color-surface);width:18px;height:18px;transition:all var(--transition);border-radius:4px;justify-content:center;align-items:center;display:flex;position:absolute;top:8px;right:8px}.model-checkbox-checked{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.model-card{position:relative}.model-card-disabled{opacity:.6;cursor:pointer;border-style:dashed}.model-card-disabled:hover{border-color:var(--color-primary);opacity:.8}.model-card-disabled .model-card-icon{opacity:.5}.model-no-key{color:#92400e;text-transform:uppercase;letter-spacing:.3px;background:#fef3c7;border:1px solid #fcd34d;border-radius:4px;align-items:center;gap:4px;padding:3px 6px;font-size:9px;font-weight:600;display:flex;position:absolute;top:6px;right:6px}.prompt-display{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:20px;overflow:hidden}.prompt-toggle{background:var(--color-surface-tertiary);width:100%;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition);border:none;justify-content:space-between;align-items:center;padding:14px 16px;font-size:13px;font-weight:500;display:flex}.prompt-toggle:hover{color:var(--color-text)}.prompt-toggle-left{align-items:center;gap:8px;display:flex}.prompt-content{border-top:1px solid var(--color-border);padding:16px}.prompt-content pre{background:var(--color-surface-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);white-space:pre-wrap;word-wrap:break-word;max-height:300px;margin-bottom:12px;padding:16px;font-family:Menlo,Monaco,Courier New,monospace;font-size:12px;line-height:1.6;overflow-y:auto}.comparison-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;display:grid}.comparison-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.comparison-header{background:var(--color-surface-tertiary);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.comparison-model{color:var(--color-text);align-items:center;gap:8px;font-size:14px;font-weight:600;display:flex}.comparison-content{color:var(--color-text);white-space:pre-wrap;word-wrap:break-word;min-height:150px;padding:16px;font-size:14px;line-height:1.7}.comparison-error{color:var(--color-error);align-items:center;gap:8px;display:flex}.variant-footer,.comparison-footer{border-top:1px solid var(--color-border);background:var(--color-surface-tertiary);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.variant-footer{border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}.evaluation-group{align-items:center;gap:12px;display:flex}.star-rating{align-items:center;gap:2px;display:flex}.star-btn{cursor:pointer;color:#cbd5e1;background:0 0;border:none;padding:2px;transition:color .1s;display:flex}.star-btn:hover,.star-btn.active{color:#f59e0b}.thumbs-group{gap:8px;display:flex}.thumb-btn{border:1px solid var(--color-border);border-radius:var(--radius-sm);width:28px;height:28px;color:var(--color-text-muted);cursor:pointer;transition:all var(--transition);background:0 0;justify-content:center;align-items:center;display:flex}.thumb-btn:hover{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border-hover)}.thumb-btn:active{transform:scale(.95)}.thumb-btn.up.active{color:#059669;background:#ecfdf5;border-color:#059669}.thumb-btn.down.active{color:#dc2626;background:#fef2f2;border-color:#dc2626}.rating-label{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;margin-right:8px;font-size:11px;font-weight:600}.spin{animation:1s linear infinite spin}@media (max-width:1024px){.main-container-new{grid-template-columns:1fr;gap:24px}.config-grid{grid-template-columns:repeat(3,1fr)}.comparison-grid{grid-template-columns:1fr}}.modal-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-container{background:var(--color-surface);border-radius:var(--radius-lg);width:100%;max-width:640px;max-height:90vh;box-shadow:var(--shadow-lg);flex-direction:column;display:flex;overflow:hidden}.modal-header{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.modal-title{color:var(--color-text);font-size:18px;font-weight:600}.modal-close-btn{color:var(--color-text-muted);cursor:pointer;transition:all var(--transition);background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:4px;display:flex}.modal-close-btn:hover{background:var(--color-surface-tertiary);color:var(--color-text)}.modal-tabs{border-bottom:1px solid var(--color-border);gap:4px;padding:16px 24px 0;display:flex}.modal-tab{color:var(--color-text-muted);cursor:pointer;transition:all var(--transition);background:0 0;border:none;border-bottom:2px solid #0000;align-items:center;gap:6px;margin-bottom:-1px;padding:10px 16px;font-size:13px;font-weight:500;display:flex}.modal-tab:hover{color:var(--color-text)}.modal-tab-active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.modal-content{flex:1;padding:24px;overflow-y:auto}.modal-footer{border-top:1px solid var(--color-border);justify-content:flex-end;align-items:center;gap:12px;padding:16px 24px;display:flex}.modal-cancel-btn{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition);padding:10px 20px;font-size:14px;font-weight:500}.modal-cancel-btn:hover{background:var(--color-surface-tertiary);border-color:var(--color-border-hover)}.modal-save-btn{background:var(--color-primary);border-radius:var(--radius-md);color:#fff;cursor:pointer;transition:all var(--transition);border:none;align-items:center;gap:6px;padding:10px 20px;font-size:14px;font-weight:500;display:flex}.modal-save-btn:hover{background:var(--color-primary-hover)}.settings-section{flex-direction:column;gap:20px;display:flex}.api-key-info{border-radius:var(--radius-md);color:#92400e;background:#fef3c7;border:1px solid #fcd34d;align-items:center;gap:8px;padding:12px 16px;font-size:13px;display:flex}.api-key-group{flex-direction:column;gap:8px;display:flex}.api-key-label{color:var(--color-text);align-items:center;gap:8px;font-size:14px;font-weight:500;display:flex}.api-key-input-wrapper{align-items:center;display:flex;position:relative}.api-key-input{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);width:100%;color:var(--color-text);transition:all var(--transition);padding:12px 44px 12px 12px;font-family:Menlo,Monaco,monospace;font-size:14px}.api-key-input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #2563eb1a}.api-key-toggle{color:var(--color-text-muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:8px;display:flex;position:absolute;right:8px}.api-key-toggle:hover{color:var(--color-text)}.api-key-hint{color:var(--color-text-muted);font-size:12px}.prompt-header{background:var(--color-surface-tertiary);border-radius:var(--radius-md);color:var(--color-text-secondary);justify-content:space-between;align-items:center;padding:12px 16px;font-size:13px;display:flex}.reset-prompts-btn{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition);padding:6px 12px;font-size:12px;font-weight:500}.reset-prompts-btn:hover{background:var(--color-surface-tertiary);color:var(--color-text)}.prompt-group{flex-direction:column;gap:8px;display:flex}.prompt-label{color:var(--color-text);font-size:14px;font-weight:500}.prompt-hint{color:var(--color-text-muted);font-size:12px}.prompt-textarea{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);width:100%;color:var(--color-text);resize:vertical;transition:all var(--transition);padding:12px;font-family:Menlo,Monaco,monospace;font-size:13px;line-height:1.6}.prompt-textarea:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #2563eb1a}.config-btn{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition);align-items:center;gap:6px;padding:8px 14px;font-size:13px;font-weight:500;display:flex;position:relative}.config-btn:hover{background:var(--color-surface-tertiary);border-color:var(--color-border-hover)}.config-dot{background:var(--color-success);border:2px solid var(--color-surface);border-radius:50%;width:8px;height:8px;position:absolute;top:-2px;right:-2px}.add-model-form{background:var(--color-surface-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:16px}.add-model-title{color:var(--color-text);margin-bottom:12px;font-size:14px;font-weight:600}.add-model-row{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;display:grid}.add-model-row:last-child{margin-bottom:0}.add-model-field{flex-direction:column;gap:6px;display:flex}.add-model-btn{background:var(--color-primary);border-radius:var(--radius-md);color:#fff;cursor:pointer;transition:all var(--transition);border:none;justify-content:center;align-self:flex-end;align-items:center;gap:6px;padding:10px 16px;font-size:13px;font-weight:500;display:flex}.add-model-btn:hover:not(:disabled){background:var(--color-primary-hover)}.add-model-btn:disabled{opacity:.5;cursor:not-allowed}.custom-models-list{margin-top:20px}.custom-models-title{color:var(--color-text);margin-bottom:12px;font-size:14px;font-weight:600}.no-models-text{color:var(--color-text-muted);text-align:center;background:var(--color-surface-tertiary);border-radius:var(--radius-md);padding:20px;font-size:13px}.models-list{flex-direction:column;gap:8px;display:flex}.model-list-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.model-list-info{align-items:center;gap:12px;display:flex}.model-list-name{color:var(--color-text);font-size:14px;font-weight:500}.model-list-id{color:var(--color-text-muted);background:var(--color-surface-tertiary);border-radius:4px;padding:2px 6px;font-family:Menlo,monospace;font-size:12px}.model-list-provider{text-transform:uppercase;border-radius:4px;align-items:center;gap:4px;padding:3px 8px;font-size:10px;font-weight:600;display:flex}.model-list-provider.openai{color:#2e7d32;background:#e8f5e9}.model-list-provider.anthropic{color:#c2185b;background:#fce4ec}.model-remove-btn{color:var(--color-text-muted);cursor:pointer;transition:all var(--transition);background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:6px;display:flex}.model-remove-btn:hover{color:#dc2626;background:#fee2e2}.model-custom-badge{background:var(--color-primary);color:#fff;text-transform:uppercase;border-radius:4px;padding:2px 6px;font-size:9px;font-weight:600;position:absolute;top:6px;left:6px}@media (max-width:640px){.header-content{flex-direction:column;align-items:flex-start;gap:12px}.header-actions{width:100%}.main-container-new{padding:20px 16px}.control-card{padding:20px}.model-grid,.settings-grid{grid-template-columns:1fr}.config-grid{grid-template-columns:repeat(2,1fr)}.modal-container{max-height:95vh}.modal-content{padding:16px}.add-model-row{grid-template-columns:1fr}}