/* ============================================================
   settings.css — Configurações: conta global e por comunidade.
   ============================================================ */

.settings-layout {
  display: grid;
  grid-template-columns: 240px minmax(0,1fr);
  gap: var(--s-5);
  align-items: start;
}
.settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--s-5); }
.settings-nav__item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); border-radius: var(--r-md);
  color: var(--text-dim); font-weight: var(--fw-medium);
}
.settings-nav__item:hover { background: var(--surface-2); color: var(--text); }
.settings-nav__item.is-active { background: var(--accent-soft); color: var(--accent); }

.settings-section { display: flex; flex-direction: column; gap: var(--s-4); }
.settings-block {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-5);
}
.settings-block__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.settings-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }
.settings-row__label { font-weight: var(--fw-semibold); }
.settings-row__desc { color: var(--text-mute); font-size: var(--fs-sm); }

/* paleta de acento (customização visual independente) */
.swatches { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.swatch {
  width: 38px; height: 38px; border-radius: var(--r-md);
  border: 2px solid transparent; cursor: pointer; position: relative;
}
.swatch.is-active { border-color: var(--text); }
.swatch.is-active::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 12px; height: 12px; border-radius: 50%; background: #fff; mix-blend-mode: difference;
}

.theme-toggle { display: flex; gap: var(--s-2); }

.danger-zone { border-color: var(--danger); }
.danger-zone .settings-block__title { color: var(--danger); }

@media (max-width: 1023px) {
  .settings-layout { grid-template-columns: minmax(0,1fr); }
  .settings-nav { position: static; flex-direction: row; overflow-x: auto; }
  .settings-nav__item { white-space: nowrap; }
}

/* ---- Abas Usuário / Administração (config de comunidade) ---- */
.settings-scope {
  display: flex; gap: var(--s-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 4px; width: fit-content;
}
.settings-scope__tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  color: var(--text-mute); font-weight: var(--fw-semibold);
  transition: background var(--t-fast), color var(--t-fast);
}
.settings-scope__tab:hover { color: var(--text); }
.settings-scope__tab.is-active { background: var(--accent); color: var(--on-accent); }

/* painel de informações da comunidade (admin) */
.admin-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
  gap: var(--s-2);
}
.admin-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-3); border-radius: var(--r-md);
  background: var(--surface-2);
}
.admin-stat__num { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.admin-stat__label { font-size: var(--fs-xs); color: var(--text-mute); }

/* ============================================================
   Configuração de comunidade em TELA CHEIA
   ============================================================ */
.cset {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
  background: var(--bg);
}
.cset-header {
  flex: none;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(8px);
}
.cset-header__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.cset-header__sub { color: var(--text-mute); font-size: var(--fs-xs); }

.cset-scope-wrap {
  flex: none;
  display: flex; justify-content: center;
  padding: var(--s-4) var(--s-4) var(--s-2);
}
.cset-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--s-3) var(--s-4) var(--s-7);
  max-width: 1100px; width: 100%; margin: 0 auto;
}

/* lista de bloqueados/silenciados */
.block-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  background: var(--surface-2);
}
.block-row__tag {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  padding: 2px 10px; border-radius: var(--r-pill);
  background: var(--danger-soft); color: var(--danger);
}

/* configurador de abas */
.tabcfg { display: flex; flex-direction: column; gap: var(--s-2); }
.tabcfg__row { display: flex; align-items: center; gap: var(--s-2); }
.tabcfg__key { width: 28px; color: var(--text-mute); font-weight: var(--fw-bold); font-size: var(--fs-sm); flex: none; }
.tabcfg__row .icon-btn:first-of-type svg.icon { transform: rotate(90deg); }
.tabcfg__row .icon-btn:last-of-type svg.icon { transform: rotate(90deg); }