.settings-page{
    --settings-bg:#10131d;
    --settings-panel:#121621;
    --settings-panel-soft:#171b28;
    --settings-border:#2a3041;
    --settings-muted:#8790a8;
    --settings-accent:#8a6cf5;

    width:100%;
    margin-top:24px;
}

.settings-overview{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin-bottom:18px;
}

.settings-kpi{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
    padding:18px;
    border:1px solid var(--settings-border);
    border-radius:16px;
    background:var(--settings-panel);
}

.settings-kpi-icon{
    width:44px;
    height:44px;
    flex:0 0 44px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:#1b2030;
    border:1px solid #32394d;
    font-weight:800;
}

.settings-kpi>div:last-child{
    min-width:0;
}

.settings-kpi span{
    display:block;
    color:var(--settings-muted);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.settings-kpi strong{
    display:block;
    margin-top:4px;
    font-size:15px;
}

.settings-kpi small{
    display:block;
    margin-top:4px;
    color:var(--settings-muted);
    font-size:10px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}


.settings-main-grid{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(280px,.72fr);
    gap:18px;
    align-items:start;
}


.settings-panel{
    overflow:hidden;
    border:1px solid var(--settings-border);
    border-radius:17px;
    background:var(--settings-panel);
}

.settings-panel-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    padding:20px 22px;
    border-bottom:1px solid var(--settings-border);
}

.settings-panel-head.compact{
    padding:18px 20px;
}

.settings-eyebrow{
    display:block;
    margin-bottom:6px;
    color:var(--settings-muted);
    font-size:9px;
    font-weight:800;
    letter-spacing:.1em;
}

.settings-panel-head h2{
    margin:0;
    font-size:16px;
}

.settings-panel-head p{
    margin:6px 0 0;
    color:var(--settings-muted);
    font-size:10px;
    line-height:1.5;
}

.settings-state{
    flex:0 0 auto;
    padding:6px 9px;
    border:1px solid #394055;
    border-radius:999px;
    font-size:9px;
}

.settings-state.active{
    border-color:#347d55;
}

.settings-state.inactive{
    color:var(--settings-muted);
}


.settings-form{
    padding:22px;
}

.settings-field{
    margin-bottom:20px;
}

.settings-field-header{
    display:flex;
    justify-content:space-between;
    gap:18px;
}

.settings-field label{
    display:block;
    margin-bottom:5px;
    font-size:11px;
    font-weight:700;
}

.settings-field small{
    display:block;
    margin-bottom:10px;
    color:var(--settings-muted);
    font-size:9px;
}

#settingsAnnouncementCount{
    color:var(--settings-muted);
    font-size:9px;
}

.settings-field input,
.settings-field textarea{
    box-sizing:border-box;
    width:100%;
    border:1px solid #30374a;
    border-radius:11px;
    background:#0d111b;
    color:inherit;
    padding:12px 13px;
    outline:none;
}

.settings-field textarea{
    min-height:100px;
    resize:vertical;
}

.settings-field input:focus,
.settings-field textarea:focus{
    border-color:var(--settings-accent);
}


.settings-preview-card{
    padding:14px;
    margin:-5px 0 20px;
    border:1px solid #2e3447;
    border-radius:12px;
    background:var(--settings-panel-soft);
}

.settings-preview-label{
    margin-bottom:8px;
    color:var(--settings-muted);
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.settings-preview-content{
    font-size:11px;
    line-height:1.5;
}


.settings-savebar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding-top:18px;
    border-top:1px solid var(--settings-border);
}

.settings-savebar strong{
    display:block;
    font-size:10px;
}

.settings-savebar span{
    display:block;
    margin-top:4px;
    color:var(--settings-muted);
    font-size:8px;
}


.settings-side{
    display:grid;
    gap:18px;
}

.settings-status-list{
    padding:7px 20px 16px;
}

.settings-status-list>div{
    display:flex;
    align-items:center;
    gap:11px;
    padding:13px 0;
    border-bottom:1px solid #252a38;
}

.settings-status-list>div:last-child{
    border-bottom:0;
}

.settings-green-dot{
    width:8px;
    height:8px;
    flex:0 0 8px;
    border-radius:50%;
    background:#55ca86;
    box-shadow:0 0 0 4px rgba(85,202,134,.08);
}

.settings-status-list strong{
    display:block;
    font-size:10px;
}

.settings-status-list small{
    display:block;
    margin-top:3px;
    color:var(--settings-muted);
    font-size:8px;
}


.settings-info-list{
    padding:7px 20px 16px;
}

.settings-info-list>div{
    padding:13px 0;
    border-bottom:1px solid #252a38;
}

.settings-info-list>div:last-child{
    border-bottom:0;
}

.settings-info-list span{
    display:block;
    margin-bottom:5px;
    color:var(--settings-muted);
    font-size:8px;
    text-transform:uppercase;
}

.settings-info-list strong{
    display:block;
    font-size:10px;
    overflow-wrap:anywhere;
}


.settings-audit-panel{
    margin-top:18px;
}

.settings-audit-head{
    align-items:center;
}

.settings-search{
    width:min(100%,340px);
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 11px;
    border:1px solid #30374a;
    border-radius:11px;
    background:#0d111b;
}

.settings-search input{
    width:100%;
    height:38px;
    border:0;
    outline:0;
    background:transparent;
    color:inherit;
    font-size:9px;
}

.settings-audit-count{
    display:flex;
    align-items:baseline;
    gap:5px;
    padding:11px 20px;
    border-bottom:1px solid var(--settings-border);
}

.settings-audit-count strong{
    font-size:14px;
}

.settings-audit-count span{
    color:var(--settings-muted);
    font-size:8px;
}


.settings-audit-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
    gap:12px;
    padding:16px;
}

.settings-audit-item{
    display:flex;
    gap:11px;
    min-width:0;
    padding:13px;
    border:1px solid var(--settings-border);
    border-radius:13px;
    background:#151925;
}

.settings-audit-item[hidden]{
    display:none;
}

.settings-audit-dot{
    width:9px;
    height:9px;
    flex:0 0 9px;
    margin-top:5px;
    border-radius:50%;
    background:#70798f;
}

.settings-audit-dot.admin{
    background:#957af5;
}

.settings-audit-dot.warning{
    background:#d1a04a;
}

.settings-audit-dot.danger{
    background:#dc6670;
}

.settings-audit-dot.info{
    background:#5d9bc8;
}

.settings-audit-body{
    min-width:0;
    flex:1;
}

.settings-audit-meta{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-bottom:7px;
}

.settings-audit-meta span,
.settings-audit-meta time{
    color:var(--settings-muted);
    font-size:8px;
}

.settings-audit-body>strong{
    display:block;
    font-size:9px;
    overflow-wrap:anywhere;
}

.settings-empty{
    grid-column:1/-1;
    padding:35px;
    text-align:center;
    color:var(--settings-muted);
    font-size:10px;
}


@media(max-width:1050px){
    .settings-main-grid{
        grid-template-columns:1fr;
    }

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

@media(max-width:720px){
    .settings-overview,
    .settings-side{
        grid-template-columns:1fr;
    }

    .settings-panel-head,
    .settings-audit-head,
    .settings-savebar{
        flex-direction:column;
        align-items:stretch;
    }

    .settings-search{
        width:100%;
    }

    .settings-audit-grid{
        grid-template-columns:1fr;
    }
}