/* ==========================================
SETTINGS
========================================== */

.settings-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px;

}

.settings-card{

background:#0f172a;
border:1px solid rgba(255,255,255,.08);
border-radius:22px;
padding:30px;
transition:.3s;

}

.settings-card:hover{

transform:translateY(-5px);
border-color:#22d3ee;
box-shadow:0 12px 35px rgba(34,211,238,.12);

}

.settings-card h2{

font-size:24px;
margin-bottom:25px;

}

.settings-card input{

width:100%;
height:56px;
margin-bottom:16px;
border:none;
outline:none;
border-radius:14px;
background:#081225;
color:white;
padding:0 18px;
font-size:15px;

}

.settings-card button{

width:100%;
height:56px;
border:none;
border-radius:14px;
background:#22d3ee;
color:white;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:.3s;

}

.settings-card button:hover{

background:#0891b2;

}

.preference-item{

display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
border-bottom:1px solid rgba(255,255,255,.08);

}

.preference-item:last-child{

border:none;

}

.status-pill{

padding:6px 14px;
border-radius:30px;
font-size:13px;
font-weight:600;

}

.status-success{

background:#16a34a;
color:white;

}

.status-warning{

background:#facc15;
color:#111827;

}

.danger-btn{

background:#dc2626 !important;

}

.danger-btn:hover{

background:#b91c1c !important;

}

@media(max-width:900px){

.settings-grid{

grid-template-columns:1fr;

}

}

/* Theme Toggle */

.switch{

position:relative;

display:inline-block;

width:60px;

height:32px;

}

.switch input{

display:none;

}

.slider{

position:absolute;

cursor:pointer;

top:0;

left:0;

right:0;

bottom:0;

background:#334155;

border-radius:30px;

transition:.3s;

}

.slider:before{

position:absolute;

content:"";

height:24px;

width:24px;

left:4px;

bottom:4px;

background:white;

border-radius:50%;

transition:.3s;

}

.switch input:checked + .slider{

background:#22d3ee;

}

.switch input:checked + .slider:before{

transform:translateX(28px);

}