:root{--bg:#0f0f23;--surface:#1a1a2e;--surface-hover:#252540;--accent-bg:#7c3aed1f;--border:#2a2a4a;--text:#e0e0ff;--text-muted:#88b;--accent:#7c3aed;--accent-hover:#8b5cf6;--error:#ef4444;--radius:12px;--shadow:0 4px 20px #0006;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}body{min-height:100vh;margin:0}#root{flex-direction:column;min-height:100vh;display:flex}.app-container{flex-direction:column;gap:1.5rem;width:100%;max-width:900px;margin:0 auto;padding:2rem 1rem;display:flex}header{text-align:center}header h1{margin:0;font-size:1.75rem;font-weight:700}header p{color:var(--text-muted);margin:.25rem 0 0;font-size:.9rem}.language-selector{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;display:flex}.language-selector select{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;padding:.6rem 1rem;font-size:1rem}.swap-btn{border:1px solid var(--border);background:var(--surface);width:40px;height:40px;color:var(--text);cursor:pointer;border-radius:50%;place-items:center;font-size:1.25rem;transition:background .2s;display:grid}.swap-btn:hover{background:var(--surface-hover)}.translation-panel{grid-template-columns:1fr 1fr;gap:1rem;display:grid}@media (width<=640px){.translation-panel{grid-template-columns:1fr}}.panel-input,.panel-output{flex-direction:column;gap:.75rem;display:flex}textarea{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);width:100%;color:var(--text);resize:vertical;outline:none;padding:1rem;font-size:1rem}textarea:focus{border-color:var(--accent)}textarea::placeholder{color:var(--text-muted)}textarea:read-only{cursor:default}.panel-input button{border-radius:var(--radius);background:var(--accent);color:#fff;cursor:pointer;border:none;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;transition:background .2s}.panel-input button:hover:not(:disabled){background:var(--accent-hover)}.panel-input button:disabled{opacity:.5;cursor:not-allowed}.model-loader{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:.5rem;padding:1rem;display:flex}.loader-text{color:var(--text-muted);font-size:.85rem}.progress-bar{background:var(--border);border-radius:4px;height:8px;overflow:hidden}.progress-fill{background:var(--accent);border-radius:4px;height:100%;transition:width .3s}.progress-fill.indeterminate{width:40%;animation:1.5s ease-in-out infinite indeterminate}@keyframes indeterminate{0%{transform:translate(-100%)}50%{transform:translate(150%)}to{transform:translate(-100%)}}.progress-percent{color:var(--text-muted);text-align:right;font-size:.8rem}.error-banner{border:1px solid var(--error);color:var(--error);border-radius:var(--radius);background:#ef444426;padding:.75rem 1rem;font-size:.9rem}footer{text-align:center;color:var(--text-muted);margin-top:auto;padding-top:1rem;font-size:.8rem}.webgpu-warning{border-radius:var(--radius);color:#fbbf24;background:#eab3081f;border:1px solid #eab308;padding:1rem 1.25rem}.webgpu-warning h3{margin:0 0 .5rem;font-size:1.05rem}.webgpu-warning p{margin:0 0 .5rem;font-size:.9rem;line-height:1.5}.webgpu-warning ul{margin:0 0 .5rem;padding-left:1.2rem;font-size:.85rem;line-height:1.6}.webgpu-warning li{margin-bottom:.3rem}.webgpu-warning code{background:#0000004d;border-radius:4px;padding:.15rem .35rem;font-size:.8rem}.webgpu-warning .muted{color:var(--text-muted);font-size:.8rem}.header-row{justify-content:center;align-items:center;gap:1rem;display:flex;position:relative}.settings-icon{cursor:pointer;opacity:.7;background:0 0;border:none;padding:.25rem;font-size:1.5rem;transition:opacity .2s;position:absolute;top:50%;right:0;transform:translateY(-50%)}.settings-icon:hover{opacity:1}.settings-page{flex-direction:column;gap:2rem;width:100%;max-width:900px;margin:0 auto;padding:2rem 1rem;display:flex}.settings-header{border-bottom:1px solid var(--border);align-items:center;gap:1rem;padding-bottom:1rem;display:flex}.settings-header h2{margin:0;font-size:1.5rem}.back-btn{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);cursor:pointer;padding:.5rem 1rem;font-size:.9rem;transition:background .2s}.back-btn:hover{background:var(--surface-hover)}.settings-section h3{color:var(--text);margin:0 0 .75rem;font-size:1.1rem}.settings-desc{color:var(--text-muted);margin:0 0 .75rem;font-size:.85rem;line-height:1.5}.settings-desc code{background:var(--surface);border-radius:4px;padding:.15rem .4rem;font-size:.8rem}.preset-list{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;display:grid}.preset-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;padding:1rem;transition:border-color .2s,background .2s}.preset-card:hover{border-color:var(--accent)}.preset-card.active{border-color:var(--accent);background:var(--accent-bg)}.preset-header{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.preset-name{font-size:1rem;font-weight:600}.preset-badge{background:var(--accent);color:#fff;border-radius:999px;padding:.2rem .5rem;font-size:.7rem}.preset-bestfor{color:var(--accent);margin-bottom:.25rem;font-size:.75rem;font-weight:600}.preset-desc{color:var(--text-muted);margin:0 0 .5rem;font-size:.85rem;line-height:1.4}.preset-meta{color:var(--text-muted);gap:1rem;margin-bottom:.5rem;font-size:.8rem;display:flex}.preset-ratings{color:var(--text-muted);flex-wrap:wrap;gap:.75rem;font-size:.8rem;display:flex}.custom-model-row{flex-wrap:wrap;gap:.75rem;display:flex}.custom-input{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);min-width:240px;color:var(--text);outline:none;flex:1;padding:.6rem 1rem;font-size:1rem}.custom-input:focus{border-color:var(--accent)}.save-btn{border-radius:var(--radius);background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;border:none;padding:.6rem 1.25rem;font-weight:600;transition:background .2s}.save-btn:hover:not(:disabled){background:var(--accent-hover)}.save-btn:disabled{opacity:.5;cursor:not-allowed}.validation-error{color:var(--error);border-radius:var(--radius);background:#ef44441a;margin-top:.5rem;padding:.5rem .75rem;font-size:.85rem}.reset-btn{border-radius:var(--radius);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;background:0 0;padding:.6rem 1.25rem;font-size:.9rem;transition:all .2s}.reset-btn:hover{color:var(--text);border-color:var(--accent)}.fallback-banner{border:1px solid var(--accent);border-radius:var(--radius);text-align:center;background:#7c3aed1f;padding:.75rem 1rem;font-size:.9rem}.link-btn{color:var(--accent);cursor:pointer;font-weight:600;font-size:inherit;background:0 0;border:none;padding:0;text-decoration:underline}.link-btn:hover{color:var(--accent-hover)}.mode-badge{color:var(--accent);font-weight:600}.ollama-status{text-align:center;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.5rem .75rem;font-size:.8rem}.ollama-config{flex-direction:column;gap:1rem;max-width:600px;margin:0 auto;padding:2rem 1rem;display:flex}.ollama-config h3{margin:0;font-size:1.3rem}.ollama-config label{color:var(--text-muted);flex-direction:column;gap:.35rem;font-size:.9rem;display:flex}.ollama-config input{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);outline:none;padding:.6rem 1rem;font-size:1rem}.ollama-config input:focus{border-color:var(--accent)}.ollama-config .hint{color:var(--text-muted);margin:0;font-size:.8rem}.ollama-config .hint code{background:var(--bg);border-radius:4px;padding:.15rem .35rem}.ollama-config .btn-row{flex-wrap:wrap;gap:.75rem;display:flex}.ollama-config .btn-row button{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;padding:.6rem 1.25rem;transition:all .2s}.ollama-config .btn-row button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.ollama-config .btn-row button.primary:hover{background:var(--accent-hover)}.ollama-config .btn-row button:disabled{opacity:.5;cursor:not-allowed}.ollama-config .test-ok{color:#22c55e;font-size:.85rem}.ollama-config .test-error{color:var(--error);font-size:.85rem}.ollama-config .close-btn{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;align-self:flex-start;padding:.5rem 1rem}.ollama-config .close-btn:hover{background:var(--surface-hover)}.history-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem}.history-header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.history-header h2{margin:0;font-size:1.1rem;font-weight:600}.clear-btn{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:6px;padding:.4rem .8rem;font-size:.8rem;transition:all .2s}.clear-btn:hover{color:var(--error);border-color:var(--error)}.history-list{flex-direction:column;gap:.5rem;max-height:320px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.history-item{background:var(--bg);border:1px solid var(--border);border-radius:8px;align-items:flex-start;gap:.5rem;padding:.6rem;display:flex}.history-content{text-align:left;color:inherit;cursor:pointer;font:inherit;background:0 0;border:none;flex:1;padding:0}.history-content:hover .history-source{color:var(--text)}.history-meta{color:var(--text-muted);justify-content:space-between;align-items:center;margin-bottom:.25rem;font-size:.75rem;display:flex}.history-langs{font-weight:500}.history-source{color:var(--text-muted);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;font-size:.85rem;line-height:1.4;display:-webkit-box;overflow:hidden}.history-target{color:var(--text);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:.2rem 0 0;font-size:.85rem;line-height:1.4;display:-webkit-box;overflow:hidden}.history-delete{width:28px;height:28px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;place-items:center;font-size:1.1rem;transition:all .2s;display:grid}.history-delete:hover{color:var(--error);background:#ef444426}.first-run-overlay{background:var(--bg);z-index:100;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0;overflow-y:auto}.first-run-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:720px;box-shadow:var(--shadow);flex-direction:column;gap:1.5rem;padding:2rem;display:flex}.first-run-header{text-align:center}.first-run-header h1{margin:0 0 .5rem;font-size:1.6rem}.first-run-header p{color:var(--text-muted);margin:0;font-size:.95rem;line-height:1.5}.first-run-sub{margin-top:.5rem!important;font-size:.85rem!important}.preset-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;display:grid}.setup-preset-btn{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;text-align:left;color:var(--text);flex-direction:column;gap:.5rem;padding:1.25rem;font-family:inherit;transition:border-color .2s,transform .15s;display:flex}.setup-preset-btn:hover{border-color:var(--accent);transform:translateY(-2px)}.setup-preset-btn:active{transform:translateY(0)}.setup-preset-top{flex-direction:column;gap:.25rem;display:flex}.setup-preset-name{font-size:1.05rem;font-weight:700}.setup-preset-best{color:var(--accent);font-size:.75rem;font-weight:600}.setup-preset-desc{color:var(--text-muted);margin:0;font-size:.85rem;line-height:1.4}.setup-preset-meta{color:var(--text-muted);flex-wrap:wrap;gap:.5rem .75rem;margin-top:.25rem;font-size:.75rem;display:flex}.setup-custom-section{border-top:1px solid var(--border);padding-top:1rem}.setup-custom-toggle{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:0;font-family:inherit;font-size:.9rem}.setup-custom-toggle:hover{color:var(--text)}.setup-custom-box{flex-direction:column;gap:.5rem;margin-top:.75rem;display:flex}.setup-custom-hint{color:var(--text-muted);margin:0;font-size:.8rem;line-height:1.5}.setup-custom-hint code{background:var(--bg);border-radius:4px;padding:.15rem .35rem;font-size:.8rem}.setup-custom-row{flex-wrap:wrap;gap:.75rem;display:flex}.setup-custom-input{border-radius:var(--radius);border:1px solid var(--border);background:var(--bg);min-width:240px;color:var(--text);outline:none;flex:1;padding:.6rem 1rem;font-size:1rem}.setup-custom-input:focus{border-color:var(--accent)}.setup-custom-save{border-radius:var(--radius);background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;border:none;padding:.6rem 1.25rem;font-weight:600;transition:background .2s}.setup-custom-save:hover:not(:disabled){background:var(--accent-hover)}.setup-custom-save:disabled{opacity:.5;cursor:not-allowed}.setup-custom-error{color:var(--error);border-radius:var(--radius);background:#ef44441a;padding:.5rem .75rem;font-size:.85rem}.setup-footer{text-align:center}.setup-skip-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:0;font-family:inherit;font-size:.85rem;text-decoration:underline}.setup-skip-btn:hover{color:var(--text)}