/* Página de configurações: só usa as variáveis de cor de /theme.css. */
.cf-title { font-weight: 600; color: var(--sub); padding-left: 14px; border-left: 1px solid var(--line3); }
.cf-back { font-size: 12px; color: var(--sub); border: 1px solid var(--line2); border-radius: 8px; padding: 7px 12px; background: #121418; }
.cf-back:hover { color: var(--text); border-color: var(--line3); }
.cf { display: flex; flex-direction: column; gap: 14px; max-width: 1100px; }
.cf-load { color: var(--dim); padding: 20px 14px; }
.cf-note { margin: 0; font-size: 12px; color: var(--dim); }
.cf-note a { color: var(--accent); }
.notice code { font-family: var(--mono); font-size: 11px; color: var(--sub); background: var(--card); border: 1px solid var(--line2); border-radius: 4px; padding: 0 4px; }

/* caixa de uma seção */
.cf-box { border: 1px solid var(--line2); border-radius: 12px; background: var(--col); overflow: hidden; }
.cf-box > header { padding: 12px 16px; border-bottom: 1px solid var(--line2); background: var(--bar); }
.cf-box h1 { margin: 0; font-size: 15px; font-weight: 700; }
.cf-box header p { margin: 4px 0 0; font-size: 12px; color: var(--dim); }
.cf-box .notice { margin: 12px; }

/* tabela metodologia × webhook */
.cf-scroll { overflow-x: auto; }
.cf-grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.cf-grid th, .cf-grid td { padding: 11px 16px; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; }
.cf-grid thead th { border-top: 0; font-size: 12px; color: var(--sub); font-weight: 500; white-space: nowrap; }
.cf-grid th b { display: block; font-weight: 500; color: var(--text); }
.cf-grid th em { display: block; font-style: normal; font-size: 11px; color: var(--dim); margin-top: 2px; }
.cf-grid th em.bad { color: var(--red2); }
.cf-grid tbody tr:hover { background: #121418; }
.cf-na { color: var(--faint); }

/* liga/desliga */
.cf-sw { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.cf-sw input { position: absolute; opacity: 0; }
.cf-sw span { width: 40px; height: 22px; border-radius: 11px; background: #121418; border: 1px solid var(--line2); position: relative; transition: background .12s; flex: none; }
.cf-sw span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--gray); transition: transform .12s, background .12s; }
.cf-sw input:checked + span { background: var(--accent-bg); border-color: var(--accent-line); }
.cf-sw input:checked + span::after { transform: translateX(18px); background: var(--accent); }
.cf-sw input:focus-visible + span { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.cf-sw i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.cf-sw.on i { color: var(--accent); }

@media (max-width: 640px) {
  .cf-grid th, .cf-grid td { padding: 10px 12px; }
  .cf-sw i { display: none; }
}