.settings-page{
justify-content:flex-start;
padding-top:40px;
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);
border:1px solid var(--bg3);
border-radius:var(--br1);
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;
border:1px solid var(--bg3);
border-radius:var(--br2);
cursor:pointer;
transition:border-color 150ms,background 150ms;
}
.model-option:hover{
border-color:var(--bc2);
background:rgba(255,255,255,0.02);
}
.model-option:has(input:checked){
border-color:var(--ac1);
background:rgba(240,85,51,0.05);
}
.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);
border-radius:var(--br2);
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 200ms,transform 200ms;
pointer-events:none;
z-index:1000;
}
.settings-saved-toast.visible{
opacity:1;
transform:translateX(-50%) translateY(0);
}
@media(max-width:600px){
.settings-page{
padding:20px 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;
}
.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:2px;
overflow:hidden;
min-width:40px;
}
.metric-fill{
display:block;
height:100%;
border-radius:2px;
}
.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:600px){
.model-metrics{
flex-direction:column;
gap:6px;
}
}
.settings-login-btn{
margin-top:16px;
padding:10px 24px;
font-size:15px;
border-radius:8px;
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:4px;
margin-left:auto;
}