.settings-page{
background:var(--bgc);
color:var(--cl1);
min-height:100vh;
}
.stg-wrap{
max-width:var(--pw3);
margin:var(--gap) auto;
padding:0 20px 80px;
}
.stg-top{
height:var(--gt2);
display:flex;
align-items:center;
gap:16px;
margin-bottom:28px;
}
.stg-heading{
font-size:var(--fz1);
font-weight:700;
color:#fff;
margin:0;
}
.stg-section{
background:var(--cbg);
border:var(--bt1) solid var(--cbo);
border-radius:var(--br1);
box-shadow:var(--csh);
margin-bottom:16px;
overflow:hidden;
}
.stg-section-title{
font-size:var(--fz5);
font-weight:700;
text-transform:uppercase;
letter-spacing:.8px;
color:var(--cl2);
padding:22px 28px 12px;
}
.stg-row{
display:flex;
align-items:center;
gap:16px;
padding:16px 28px;
transition:background 100ms;
}
.stg-row:hover{
background:rgba(255,255,255,0.015);
}
.stg-row-text{
flex:1;
min-width:0;
}
.stg-row-label{
font-size:var(--fz4);
font-weight:600;
color:#ddd;
margin-bottom:2px;
}
.stg-row-desc{
font-size:var(--fz5);
color:#666;
line-height:1.4;
}
.stg-toggle{
position:relative;
flex-shrink:0;
cursor:pointer;
}
.stg-toggle input{
position:absolute;
opacity:0;
pointer-events:none;
}
.stg-toggle-track{
display:block;
width:50px;
height:28px;
background:#333;
border-radius:14px;
position:relative;
transition:background 150ms;
}
.stg-toggle-track::after{
content:'';
position:absolute;
top:3px;
left:3px;
width:22px;
height:22px;
background:#888;
border-radius:50%;
transition:transform 150ms,background 150ms;
}
.stg-toggle input:checked+.stg-toggle-track{
background:var(--ac1);
}
.stg-toggle input:checked+.stg-toggle-track::after{
transform:translateX(22px);
background:#fff;
}
.stg-toggle input:disabled+.stg-toggle-track{
opacity:0.3;
cursor:not-allowed;
}
.stg-badge-soon{
flex-shrink:0;
font-size:11px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.5px;
color:#555;
background:#1a1a1a;
border:1px solid #2a2a2a;
border-radius:6px;
padding:3px 8px;
}
.stg-action-btn{
flex-shrink:0;
padding:8px 20px;
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.1);
border-radius:var(--br2);
color:#ccc;
font-size:var(--fz5);
font-weight:600;
font-family:inherit;
cursor:pointer;
transition:background 100ms;
}
.stg-action-btn:hover{
background:rgba(255,255,255,0.1);
}
.stg-action-btn:disabled{
opacity:0.3;
cursor:not-allowed;
}
.stg-action-danger{
color:#ef4444;
border-color:rgba(239,68,68,0.2);
background:rgba(239,68,68,0.06);
}
.stg-action-danger:hover{
background:rgba(239,68,68,0.12);
}
.stg-danger{
color:#ef4444;
}
@media(max-width:480px){
.stg-wrap{
padding:0 16px 60px;
}
.stg-row{
padding:14px 20px;
}
.stg-section-title{
padding:18px 20px 10px;
}
}