/* ==========================================================
   VALRYN SETTINGS
   settings.css
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --bg:#05070d;
    --panel:#101827;
    --panel2:#161f32;

    --border:#233250;

    --primary:#2b6fff;
    --primaryHover:#4b82ff;

    --text:#ffffff;
    --muted:#9aa8c4;

    --success:#22c55e;

    --danger:#ef4444;
    --dangerHover:#dc2626;
    --dangerSoft:rgba(239,68,68,.10);
    --dangerBorder:rgba(239,68,68,.38);

    --radius:18px;

}

body{

    font-family:Inter,Arial,sans-serif;

    background:var(--bg);

    color:var(--text);

    min-height:100vh;

    overflow-x:hidden;

}

.settings-background{

    position:fixed;

    inset:0;

    background:
    linear-gradient(rgba(5,7,13,.90),rgba(5,7,13,.95)),
    url("../assets/images/V-HQ.jpg");

    background-size:cover;

    background-position:center;

    z-index:-2;

}

.settings-background::after{

    content:"";

    position:absolute;

    inset:0;

    backdrop-filter:blur(10px);

}

.topbar{

    height:80px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 30px;

    background:rgba(16,24,39,.92);

    border-bottom:1px solid var(--border);

    backdrop-filter:blur(18px);

}

.brand{

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

    text-decoration:none;

}

.brand img{

    width:50px;

    height:50px;

    object-fit:contain;

}

.brand span{

    font-size:1.3rem;

    font-weight:700;

}

.back-button{

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

}

.back-button:hover{

    color:var(--primaryHover);

}

.settings-page{

    max-width:1100px;

    margin:40px auto;

    padding:0 25px 50px;

}

.settings-card{

    background:rgba(16,24,39,.92);

    border:1px solid var(--border);

    border-radius:var(--radius);

    backdrop-filter:blur(18px);

    padding:30px;

    margin-bottom:25px;

}

.eyebrow{

    color:var(--primary);

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:10px;

    font-size:.9rem;

}

.section-header h1{

    margin-bottom:12px;

    font-size:2rem;

}

.section-header p{

    color:var(--muted);

    line-height:1.6;

}

.settings-card h2{

    margin-bottom:22px;

}

.settings-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.setting-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    background:var(--panel2);

    border:1px solid var(--border);

    border-radius:14px;

    padding:22px;

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.setting-item:hover{

    border-color:var(--primary);

    transform:translateY(-2px);

}

.setting-item h3{

    margin-bottom:6px;

}

.setting-item p{

    color:var(--muted);

    line-height:1.5;

}

.setting-item span{

    color:var(--primary);

    font-size:1.35rem;

}

.toggle-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    padding:20px 0;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.toggle-row:last-child{

    border-bottom:none;

}

.toggle-row h3{

    margin-bottom:6px;

}

.toggle-row p{

    color:var(--muted);

    line-height:1.5;

}

.switch{

    position:relative;

    width:60px;

    min-width:60px;

    height:32px;

}

.switch input{

    opacity:0;

    width:0;

    height:0;

}

.slider{

    position:absolute;

    inset:0;

    background:#3a455d;

    border-radius:50px;

    cursor:pointer;

    transition:.3s;

}

.slider::before{

    content:"";

    position:absolute;

    width:24px;

    height:24px;

    left:4px;

    top:4px;

    background:#fff;

    border-radius:50%;

    transition:.3s;

}

.switch input:checked + .slider{

    background:var(--primary);

}

.switch input:focus-visible + .slider{

    outline:3px solid rgba(43,111,255,.35);

    outline-offset:3px;

}

.switch input:checked + .slider::before{

    transform:translateX(28px);

}

.primary-button{

    width:100%;

    padding:16px;

    border:none;

    border-radius:14px;

    background:var(--primary);

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.primary-button:hover:not(:disabled){

    background:var(--primaryHover);

    transform:translateY(-2px);

}

.primary-button:disabled{

    cursor:not-allowed;

    opacity:.72;

}

.danger-card{

    background:
    linear-gradient(
        135deg,
        rgba(239,68,68,.09),
        rgba(16,24,39,.94)
    );

    border-color:var(--dangerBorder);

}

.danger-heading{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

}

.danger-heading h2{

    margin-bottom:10px;

}

.danger-heading p:last-child{

    color:var(--muted);

    line-height:1.6;

    max-width:680px;

}

.danger-eyebrow{

    color:#f87171;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:10px;

    font-size:.9rem;

    font-weight:700;

}

.danger-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:170px;

    padding:14px 20px;

    border:1px solid var(--danger);

    border-radius:12px;

    background:transparent;

    color:#fca5a5;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.danger-button:hover{

    background:var(--danger);

    color:#fff;

    transform:translateY(-2px);

}

@media(max-width:768px){

    .settings-page{

        padding:0 18px 40px;

    }

    .topbar{

        padding:0 18px;

    }

    .brand img{

        width:44px;

        height:44px;

    }

    .toggle-row{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }

    .danger-heading{

        flex-direction:column;

        align-items:flex-start;

    }

    .danger-button{

        width:100%;

    }

}

@media(max-width:480px){

    .topbar{

        height:72px;

    }

    .brand span{

        display:none;

    }

    .settings-page{

        margin-top:25px;

    }

    .settings-card{

        padding:22px;

    }

    .section-header h1{

        font-size:1.7rem;

    }

}
.provider-mode {
    display: grid;
    gap: 10px;
    margin-top: 24px;
    color: var(--muted);
    font-weight: 700;
}

.provider-mode select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    color: inherit;
    font: inherit;
}

.provider-notice {
    margin: 14px 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(59, 130, 246, .1);
    color: var(--muted);
    line-height: 1.5;
}

.provider-list {
    display: grid;
    gap: 12px;
}

.provider-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
}

.provider-item small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
}

.provider-actions {
    display: flex;
    gap: 7px;
}

.provider-actions button {
    min-width: 42px;
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: transparent;
    color: inherit;
}

.provider-health[data-health="available"] {
    color: #4ade80;
}

.provider-health[data-health="unavailable"] {
    color: #f87171;
}

.provider-usage {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.provider-usage span {
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    color: var(--muted);
}

.provider-usage strong {
    display: block;
    margin-top: 5px;
    color: var(--text);
}

@media(max-width:768px) {
    .provider-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .provider-actions {
        grid-column: 1 / -1;
    }

    .provider-usage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}