.settings-page{
justify-content:flex-start;
max-width:var(--pw1);
margin:0 auto;
width:100%;
}
.settings-title{
font-size:1.6rem;
font-weight:700;
font-family:var(--ff2);
color:var(--cl1);
margin-bottom:32px;
}
.settings-card{
background:var(--bg2);
padding:24px;
}
.settings-section-title{
font-size:1.1rem;
font-weight:600;
font-family:var(--ff2);
color:var(--cl1);
margin-bottom:8px;
}
.settings-desc{
font-size:0.9rem;
color:var(--cl3);
font-family:var(--ff2);
line-height:1.5;
margin-bottom:20px;
}
.model-options{
display:flex;
flex-direction:column;
gap:8px;
}
.model-option{
display:flex;
align-items:flex-start;
gap:12px;
padding:14px 16px;
cursor:pointer;
transition:background 100ms;
}
.model-option:hover{
background:rgba(255,255,255,0.02);
}
.model-option:has(input:checked){
background:rgba(240,85,51,0.08);
}
.model-option input[type="radio"]{
margin-top:3px;
accent-color:var(--ac1);
flex-shrink:0;
}
.model-option-inner{
display:flex;
flex-direction:column;
gap:4px;
flex:1;
min-width:0;
}
.model-option-header{
display:flex;
align-items:center;
gap:8px;
}
.model-option-name{
font-size:1rem;
font-weight:600;
font-family:var(--ff2);
color:var(--cl1);
}
.model-option-tag{
font-size:0.65rem;
padding:2px 8px;
border-radius:100px;
font-weight:600;
letter-spacing:0.5px;
text-transform:uppercase;
font-family:var(--ff2);
}
.tag-default{
background:rgba(255,255,255,0.08);
color:var(--cl3);
}
.tag-opus{
background:rgba(180,130,220,0.15);
color:#b07ad4;
}
.tag-sonnet{
background:rgba(130,160,220,0.15);
color:#7a9fd4;
}
.tag-haiku{
background:rgba(130,200,130,0.15);
color:#6ab06a;
}
.model-option-desc{
font-size:0.85rem;
color:var(--cl3);
font-family:var(--ff2);
line-height:1.4;
}
.fallback-note{
display:flex;
align-items:flex-start;
gap:8px;
margin-top:16px;
padding:12px 16px;
background:rgba(255,255,255,0.03);
font-size:0.8rem;
color:var(--cl3);
font-family:var(--ff2);
line-height:1.5;
}
.fallback-note svg{
flex-shrink:0;
margin-top:1px;
opacity:0.5;
}
.settings-saved-toast{
position:fixed;
bottom:24px;
left:50%;
transform:translateX(-50%) translateY(20px);
background:var(--bg2);
border:1px solid var(--bg3);
color:var(--cl1);
padding:10px 24px;
border-radius:100px;
font-size:0.9rem;
font-family:var(--ff2);
font-weight:600;
opacity:0;
transition:opacity 100ms,transform 100ms;
pointer-events:none;
z-index:1000;
}
.settings-saved-toast.visible{
opacity:1;
transform:translateX(-50%) translateY(0);
}
@media(max-width:1000px){
.settings-page{
padding:0 16px;
}
.settings-card{
padding:16px;
}
}.model-divider{
display:flex;
align-items:center;
gap:12px;
margin:16px 0 8px;
color:var(--cl3);
font-size:0.75rem;
font-family:var(--ff2);
text-transform:uppercase;
letter-spacing:0.5px;
opacity:0.6;
}
.model-divider::before,.model-divider::after{
content:'';
flex:1;
height:1px;
background:var(--bg3);
}
.tag-gemini{
background:rgba(66,133,244,0.15);
color:#4285f4;
}
.tag-gpt{
background:rgba(16,163,127,0.15);
color:#10a37f;
}
.tag-deepseek{
background:rgba(71,118,230,0.15);
color:#4776e6;
}
.tag-grok{
background:rgba(255,255,255,0.12);
color:#e4e4e4;
}
.tag-mistral{
background:rgba(255,123,0,0.15);
color:#ff7b00;
}
.tag-llama{
background:rgba(0,122,204,0.15);
color:#007acc;
}
.tag-qwen{
background:rgba(107,63,255,0.15);
color:#6b3fff;
}
.tag-cohere{
background:rgba(57,179,120,0.15);
color:#39b378;
}
.tag-perplexity{
background:rgba(32,170,200,0.15);
color:#20aac8;
}
.tag-kimi{
background:rgba(255,200,80,0.15);
color:#ffc850;
}
.tag-glm{
background:rgba(220,120,80,0.15);
color:#dc7850;
}
.tag-nvidia{
background:rgba(118,185,0,0.15);
color:#76b900;
}
.tag-minimax{
background:rgba(122,92,255,0.15);
color:#7a5cff;
}
.tag-seed{
background:rgba(0,180,140,0.15);
color:#00b48c;
}
.tag-mimo{
background:rgba(255,105,0,0.15);
color:#ff6900;
}
.tag-nova{
background:rgba(255,153,0,0.15);
color:#ff9900;
}
.tag-phi{
background:rgba(0,120,215,0.15);
color:#0078d7;
}
.model-metrics{
display:flex;
gap:12px;
margin-top:8px;
}
.metric{
display:flex;
align-items:center;
gap:5px;
flex:1;
}
.metric-label{
font-size:0.7rem;
color:var(--cl3);
font-family:var(--ff2);
opacity:0.7;
white-space:nowrap;
width:40px;
flex-shrink:0;
}
.metric-bar{
flex:1;
height:4px;
background:rgba(255,255,255,0.08);
border-radius:0;
overflow:hidden;
min-width:40px;
}
.metric-fill{
display:block;
height:100%;
border-radius:0;
}
.mf-q{
background:#b07ad4;
}
.mf-v{
background:#39b378;
}
.mf-s{
background:#4285f4;
}
.metric-val{
font-size:0.7rem;
font-weight:600;
color:var(--cl2);
font-family:var(--ff2);
width:14px;
text-align:right;
flex-shrink:0;
}
@media(max-width:1000px){
.model-metrics{
flex-direction:column;
gap:6px;
}
}
.settings-login-btn{
margin-top:16px;
padding:10px 24px;
font-size:15px;
border-radius:0;
cursor:pointer;
}
.model-locked{
opacity:0.45;
pointer-events:none;
position:relative;
}
.model-locked .model-option-inner{
filter:grayscale(0.5);
}
.paid-lock{
background:var(--accent);
color:#fff;
font-size:0.7rem;
padding:2px 8px;
border-radius:0;
margin-left:auto;
}.settings-card + .settings-card{margin-top:24px;}
.settings-field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;}
.settings-field:last-child{margin-bottom:0;}
.settings-label{font-size:0.9rem;font-weight:600;font-family:var(--ff2);color:var(--cl1);}
.settings-input{font-family:var(--ff2);font-size:0.95rem;color:var(--cl1);background:var(--bg1);border:1px solid var(--bg3);border-radius:0;padding:10px 12px;width:100%;max-width:420px;outline:none;transition:border-color 100ms,background 100ms;}
.settings-input:focus{border-color:var(--accent);background:var(--bg2);}
select.settings-input{cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23888' d='M6 8L0 0h12z'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;}
.settings-input-wrap{display:flex;align-items:stretch;max-width:420px;border:1px solid var(--bg3);border-radius:0;background:var(--bg1);overflow:hidden;transition:border-color 100ms;}
.settings-input-wrap:focus-within{border-color:var(--accent);}
.settings-input-prefix{display:flex;align-items:center;padding:0 12px;color:var(--cl3);font-family:var(--ff2);font-size:0.95rem;background:var(--bg2);border-right:1px solid var(--bg3);}
.settings-input.settings-input-prefixed{border:none;background:transparent;border-radius:0;}
.settings-help{font-size:0.8rem;color:var(--cl3);font-family:var(--ff2);line-height:1.4;}
.settings-readonly{font-family:var(--ff2);font-size:0.95rem;color:var(--cl2);padding:10px 12px;background:var(--bg1);border:1px solid var(--bg3);border-radius:0;max-width:420px;}
.settings-field-status{font-size:0.8rem;font-family:var(--ff2);min-height:1.1em;}
.settings-field-status.ok{color:#2a9d5a;}
.settings-field-status.err{color:#c0392b;}