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

.settings-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
}

.settings-state{
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}

.settings-state.is-on{
    background:#EAF4FF;
    color:#07316A;
}

.settings-state.is-off{
    background:#F1F5F9;
    color:#475569;
}

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

.settings-switch-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--neutral);
}

.settings-switch-row input[type="checkbox"]{
    width:22px;
    height:22px;
    accent-color:#1D8EED;
}

@media(max-width:650px){
    .settings-heading,
    .settings-switch-row{
        align-items:flex-start;
        flex-direction:column;
    }
}


.template-list{
    display:grid;
    gap:18px;
    margin-top:18px;
}

.template-card{
    display:grid;
    gap:18px;
}

.template-card-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
}

.template-form{
    display:grid;
    gap:16px;
}

.template-placeholders{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:14px;
}

.template-placeholders > div{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--neutral);
}

.template-placeholders code{
    color:var(--hw-navy);
    font-weight:800;
}

@media(max-width:650px){
    .template-card-head{
        flex-direction:column;
    }

    .template-placeholders{
        grid-template-columns:1fr;
    }
}