/* ============================================================
   TELA 6 · CONFIGURAÇÕES
   rail 214px · panes · set-cards obsidian · header dirty + salvar lime
   DOM atual: .cfg-wrap coluna única
   Fragment: .cfg-topbar + .cfg-shell > .cfg-rail + .cfg-main
   ============================================================ */
[data-theme] #page-configuracoes {
  background: var(--color-void);
  color: var(--color-mist);
}
[data-theme] #page-configuracoes.active:has(.cfg-shell) {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
[data-theme] #page-configuracoes .cfg-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 20px;
  background: var(--color-carbon);
  border-bottom: 1px solid var(--color-graphite);
  flex-shrink: 0;
}
[data-theme] #page-configuracoes .cfg-h1 {
  font-size: 15px;
  font-weight: 510;
  letter-spacing: -.2px;
  color: var(--color-paper);
  margin: 0;
}
[data-theme] #page-configuracoes .cfg-crumb {
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-badge);
  background: var(--lx-wash-hover);
  color: var(--color-fog);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
}
[data-theme] #page-configuracoes .cfg-spacer { flex: 1; }
[data-theme] #page-configuracoes .cfg-dirty {
  font-size: 12px;
  color: var(--color-fog);
}
[data-theme] #page-configuracoes .cfg-dirty.is-dirty {
  color: var(--lx-lime-ink);
  font-family: var(--font-mono);
  letter-spacing: -.013em;
}
[data-theme] #page-configuracoes .cfg-save-all {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-md);
  background: var(--lx-acid-lime);
  border: 1px solid var(--lx-acid-lime);
  color: var(--lx-on-lime);
  font-size: 13px;
  font-weight: 590;
  cursor: pointer;
}
[data-theme] #page-configuracoes .cfg-save-all:hover {
  background: var(--lx-acid-lime-hi);
  border-color: var(--lx-acid-lime-hi);
}

[data-theme] #page-configuracoes .cfg-shell {
  flex: 1;
  display: flex;
  min-height: 0;
}
[data-theme] #page-configuracoes .cfg-rail {
  flex: 0 0 214px;
  width: 214px;
  border-right: 1px solid var(--color-graphite);
  background: var(--color-carbon);
  padding: 14px 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
[data-theme] #page-configuracoes .cfg-rail-block { display: flex; flex-direction: column; gap: 2px; }
[data-theme] #page-configuracoes .cfg-micro {
  display: block;
  padding: 0 8px;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-ash);
}
[data-theme] #page-configuracoes .cfg-rail-item {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--color-fog);
  font-size: 13px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
[data-theme] #page-configuracoes .cfg-rail-item svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
[data-theme] #page-configuracoes .cfg-rail-item:hover {
  background: var(--lx-wash-hover);
  color: var(--color-mist);
}
[data-theme] #page-configuracoes .cfg-rail-item.on {
  background: var(--lx-wash-hover-2);
  color: var(--color-paper);
  font-weight: 510;
}

[data-theme] #page-configuracoes .cfg-wrap {
  max-width: 800px;
  padding: 24px 28px 48px;
}
[data-theme] #page-configuracoes .cfg-main.cfg-wrap {
  max-width: none;
  padding: 0;
  margin: 0;
  flex: 1;
  overflow-y: auto;
  min-width: 0;
}
[data-theme] #page-configuracoes .cfg-pane {
  display: none;
  max-width: none;
  padding: 24px 28px 48px;
  flex-direction: column;
  gap: 2px;
}
[data-theme] #page-configuracoes .cfg-pane.on { display: flex; }
[data-theme] #page-configuracoes .cfg-h2 {
  font-size: 20px;
  font-weight: 590;
  letter-spacing: -.24px;
  color: var(--color-paper);
  margin: 0 0 4px;
}
[data-theme] #page-configuracoes .cfg-cap {
  font-size: 13px;
  color: var(--color-fog);
  margin: 0 0 22px;
}
[data-theme] #page-configuracoes .set-card {
  background: var(--color-obsidian);
  border-radius: var(--r-card);
  box-shadow: var(--sh-subtle);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 10px;
}
[data-theme] #page-configuracoes .set-card .txt { min-width: 0; flex: 1; }
[data-theme] #page-configuracoes .set-t {
  font-size: 14px;
  font-weight: 510;
  color: var(--color-bone);
}
[data-theme] #page-configuracoes .set-d {
  font-size: 13px;
  color: var(--color-fog);
  line-height: 1.5;
  margin-top: 3px;
}
[data-theme] #page-configuracoes .cfg-ghost-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-md);
  background: transparent;
  border: 1px solid var(--color-graphite);
  color: var(--color-mist);
  font-size: 13px;
  cursor: pointer;
  flex: 0 0 auto;
}
[data-theme] #page-configuracoes .cfg-ghost-btn:hover {
  background: var(--lx-wash-hover);
  color: var(--color-bone);
}

[data-theme] #page-configuracoes .cfg-head {
  align-items: center;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-graphite);
  gap: 12px;
}
[data-theme] #page-configuracoes .cfg-head h1 {
  font-size: 20px;
  font-weight: 590;
  letter-spacing: -.24px;
  color: var(--color-paper);
}
[data-theme] #page-configuracoes .cfg-head p {
  font-size: 13px;
  color: var(--color-fog);
  line-height: 1.5;
}
[data-theme] #page-configuracoes .cfg-sec {
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--lx-wash-hover);
  border: 0;
  color: var(--color-fog);
  font-size: 12px;
  font-weight: 400;
}
[data-theme] #page-configuracoes .cfg-oauth { max-width: none; margin: 0 0 10px; }

[data-theme] #page-configuracoes .bill-card,
[data-theme] #page-configuracoes .cfg-card,
[data-theme] #page-configuracoes .cfg-oauth-card,
[data-theme] #page-configuracoes .aw-panel {
  background: var(--color-obsidian);
  border: 0;
  border-radius: var(--r-card);
  box-shadow: var(--sh-subtle);
  padding: 16px 18px;
  margin-bottom: 10px;
}
[data-theme] #page-configuracoes .bill-card h3 {
  font-size: 14px;
  font-weight: 510;
  color: var(--color-bone);
}
[data-theme] #page-configuracoes .bill-card p {
  font-size: 13px;
  color: var(--color-fog);
  line-height: 1.5;
}
[data-theme] #page-configuracoes .cfg-card:hover,
[data-theme] #page-configuracoes .cfg-oauth-card:hover { box-shadow: var(--sh-subtle); }
[data-theme] #page-configuracoes .cfg-card.is-set { box-shadow: var(--sh-subtle); }
[data-theme] #page-configuracoes .cfg-card-top { align-items: center; margin-bottom: 6px; }
[data-theme] #page-configuracoes .cfg-grid { gap: 10px; }
[data-theme] #page-configuracoes .cfg-name {
  font-size: 14px;
  font-weight: 510;
  color: var(--color-bone);
}
[data-theme] #page-configuracoes .cfg-hint {
  font-size: 13px;
  color: var(--color-fog);
  line-height: 1.5;
}
[data-theme] #page-configuracoes .cfg-oauth-title {
  font-size: 14px;
  font-weight: 510;
  color: var(--color-bone);
}
[data-theme] #page-configuracoes .cfg-oauth-title svg { color: var(--color-fog); }
[data-theme] #page-configuracoes .cfg-oauth-sub { color: var(--color-fog); }
[data-theme] #page-configuracoes .awsec { max-width: none; margin: 22px 0 0; }
[data-theme] #page-configuracoes .awsec-head h2 {
  font-size: 20px;
  font-weight: 590;
  letter-spacing: -.24px;
  color: var(--color-paper);
}
[data-theme] #page-configuracoes .awsec-head p { color: var(--color-fog); }

[data-theme] #page-configuracoes .cfg-badge,
[data-theme] #page-configuracoes .aw-pill,
[data-theme] #page-configuracoes .aw-chip,
[data-theme] #page-configuracoes .cfg-oauth-state .pill {
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-badge);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  background: var(--lx-wash-hover);
  color: var(--color-fog);
}
[data-theme] #page-configuracoes .cfg-badge.ok,
[data-theme] #page-configuracoes .aw-pill.on,
[data-theme] #page-configuracoes .cfg-oauth-state .pill {
  background: var(--lx-wash-green);
  color: var(--lx-green-text);
}
[data-theme] #page-configuracoes .cfg-badge.ok .dot,
[data-theme] #page-configuracoes .aw-pill.on .dot,
[data-theme] #page-configuracoes .cfg-oauth-state .pill .dot {
  background: currentColor;
  box-shadow: none;
}
[data-theme] #page-configuracoes .aw-chip {
  background: rgba(var(--lx-lime-rgb),.14);
  color: var(--lx-lime-ink);
  border: 0;
}
[data-theme] #page-configuracoes .aw-pill.rev {
  background: var(--lx-wash-coral);
  color: var(--lx-coral-text);
}
[data-theme] #page-configuracoes .aw-pill.off,
[data-theme] #page-configuracoes .cfg-badge.env,
[data-theme] #page-configuracoes .cfg-badge.empty {
  background: var(--lx-wash-hover);
  color: var(--color-fog);
}

[data-theme] #page-configuracoes .cfg-input,
[data-theme] #page-configuracoes .cfg-oauth-paste input,
[data-theme] #page-configuracoes .aw-field input[type=text] {
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r-md);
  background: var(--lx-wash-hover);
  border: 1px solid var(--lx-wash-active);
  color: var(--color-mist);
  font-size: 13px;
  box-shadow: none;
}
[data-theme] #page-configuracoes .cfg-input:focus,
[data-theme] #page-configuracoes .cfg-oauth-paste input:focus,
[data-theme] #page-configuracoes .aw-field input[type=text]:focus {
  border-color: var(--color-mist);
  box-shadow: none;
}
[data-theme] #page-configuracoes .cfg-input::placeholder,
[data-theme] #page-configuracoes .aw-field input::placeholder { color: var(--color-ash); }
[data-theme] #page-configuracoes .cfg-mask,
[data-theme] #page-configuracoes .cfg-oauth-meta,
[data-theme] #page-configuracoes .aw-mono {
  font-family: var(--font-mono);
  color: var(--color-ash);
}
[data-theme] #page-configuracoes .cfg-msg.ok { color: var(--color-pulse-green); }
[data-theme] #page-configuracoes .cfg-msg.err,
[data-theme] #page-configuracoes .cfg-oauth-msg.err { color: var(--color-coral-red); }

[data-theme] #page-configuracoes .cfg-save,
[data-theme] #page-configuracoes .cfg-oauth-btn,
[data-theme] #page-configuracoes .awsec-add,
[data-theme] #page-configuracoes .aw-confirm {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-md);
  background: var(--color-acid-lime);
  border: 1px solid var(--color-acid-lime);
  color: var(--lx-on-lime);
  font-weight: 590;
  filter: none;
}
[data-theme] #page-configuracoes .cfg-save:hover,
[data-theme] #page-configuracoes .cfg-oauth-btn:hover,
[data-theme] #page-configuracoes .awsec-add:hover,
[data-theme] #page-configuracoes .aw-confirm:hover {
  background: var(--lx-acid-lime-hi);
  border-color: var(--lx-acid-lime-hi);
  color: var(--lx-on-lime);
  filter: none;
}
[data-theme] #page-configuracoes .cfg-oauth-btn.ghost,
[data-theme] #page-configuracoes .aw-cancel,
[data-theme] #page-configuracoes .aw-btn,
[data-theme] #page-configuracoes .aw-copy,
[data-theme] #page-configuracoes .cfg-del {
  background: transparent;
  border: 1px solid var(--color-graphite);
  color: var(--color-mist);
  border-radius: var(--r-md);
  filter: none;
}
[data-theme] #page-configuracoes .cfg-oauth-btn.ghost:hover,
[data-theme] #page-configuracoes .aw-cancel:hover,
[data-theme] #page-configuracoes .aw-btn:hover,
[data-theme] #page-configuracoes .aw-copy:hover {
  background: var(--lx-wash-hover);
  border-color: var(--color-smoke);
  color: var(--color-bone);
}
[data-theme] #page-configuracoes .cfg-del:hover,
[data-theme] #page-configuracoes .aw-btn.danger:hover,
[data-theme] #page-configuracoes .cfg-oauth-btn.danger:hover {
  background: rgba(var(--lx-coral-rgb),.1);
  border-color: rgba(var(--lx-coral-rgb),.45);
  color: var(--color-coral-red);
}

[data-theme] #page-configuracoes .aw-ev {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-graphite);
  border-radius: 0;
  padding: 9px 0;
  color: var(--color-mist);
  font-size: 13px;
}
[data-theme] #page-configuracoes .aw-ev:first-child { border-top: 0; }
[data-theme] #page-configuracoes .aw-evgrid { gap: 0; }
[data-theme] #page-configuracoes .aw-ev input[type="checkbox"],
[data-theme] #page-configuracoes .aw-ev input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--color-smoke);
  background: transparent;
  margin: 0;
}
[data-theme] #page-configuracoes .aw-ev input[type="checkbox"]:checked,
[data-theme] #page-configuracoes .aw-ev input[type="radio"]:checked {
  border-color: var(--color-acid-lime);
  box-shadow: inset 0 0 0 3.5px var(--color-obsidian), inset 0 0 0 7px var(--color-acid-lime);
}

[data-theme] #page-configuracoes table.aw-tbl th {
  background: var(--color-carbon);
  height: 34px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 510;
  letter-spacing: .03em;
  text-transform: none;
  color: var(--color-ash);
  border-bottom: 1px solid var(--color-graphite);
}
[data-theme] #page-configuracoes table.aw-tbl td {
  height: 44px;
  padding: 0 12px;
  border-bottom: 1px solid var(--color-graphite);
  color: var(--color-mist);
  background: var(--color-void);
}
[data-theme] #page-configuracoes table.aw-tbl tr:hover td { background: var(--color-obsidian); }
[data-theme] #page-configuracoes .aw-empty,
[data-theme] #page-configuracoes .cfg-loading { color: var(--color-ash); }
[data-theme] #page-configuracoes .aw-dim { color: var(--color-ash); }

[data-theme] #page-configuracoes .aw-modal {
  background: rgba(8, 9, 10, .45);
  align-items: flex-start;
  padding-top: 56px;
}
[data-theme] #page-configuracoes .aw-modal-box {
  background: var(--color-obsidian);
  border: 0;
  border-radius: var(--r-card);
  box-shadow: var(--sh-subtle), var(--sh-xl);
}
[data-theme] #page-configuracoes .aw-modal-box h3 {
  font-size: 15px;
  font-weight: 510;
  color: var(--color-bone);
}
[data-theme] #page-configuracoes .aw-modal-box .sub { color: var(--color-fog); }
[data-theme] #page-configuracoes .aw-field label { color: var(--color-ash); }
[data-theme] #page-configuracoes .aw-reveal {
  background: var(--lx-wash-hover);
  border: 1px solid var(--color-graphite);
  border-radius: var(--r-md);
}
[data-theme] #page-configuracoes .aw-reveal .val code {
  color: var(--lx-lime-ink);
  font-family: var(--font-mono);
}
[data-theme] #page-configuracoes .aw-reveal .warn { color: var(--lx-amber); }

[data-theme] #page-configuracoes .pal-card {
  background: var(--color-obsidian);
  border: 0;
  border-radius: var(--r-card);
  box-shadow: var(--sh-subtle);
}
[data-theme] #page-configuracoes .pal-card:hover { transform: none; }
[data-theme] #page-configuracoes .pal-card.active {
  box-shadow: var(--sh-subtle), 0 0 0 1px var(--color-acid-lime);
}
[data-theme] #page-configuracoes .pal-name { color: var(--color-fog); }
[data-theme] #page-configuracoes .pal-card.active .pal-name { color: var(--color-paper); }
[data-theme] #page-configuracoes .acct-msg.ok { color: var(--color-pulse-green); }
[data-theme] #page-configuracoes .acct-msg.err { color: var(--color-coral-red); }

/* ── componentes do protótipo: tabs sublinhadas, toggles lime, radios, pills ── */
[data-theme] #page-configuracoes .tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--color-graphite);
  margin: 16px 0 22px;
}
[data-theme] #page-configuracoes .tab {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--color-fog);
  background: transparent;
  border: 0;
  position: relative;
  cursor: pointer;
}
[data-theme] #page-configuracoes .tab:hover { color: var(--color-mist); }
[data-theme] #page-configuracoes .tab.on {
  color: var(--color-paper);
  font-weight: 510;
}
[data-theme] #page-configuracoes .tab.on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--color-paper);
}

[data-theme] #page-configuracoes .set-card-block {
  display: block;
}
[data-theme] #page-configuracoes .tgl {
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--color-graphite);
  border: 0;
  position: relative;
  cursor: pointer;
  transition: background .16s ease;
  margin-left: auto;
}
[data-theme] #page-configuracoes .tgl i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: var(--r-pill);
  background: var(--color-fog);
  transition: transform .16s cubic-bezier(.32, .72, 0, 1), background .16s ease;
}
[data-theme] #page-configuracoes .tgl.on { background: var(--color-acid-lime); }
[data-theme] #page-configuracoes .tgl.on i {
  transform: translateX(16px);
  background: var(--color-void);
}

[data-theme] #page-configuracoes .radio-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--color-graphite);
  font-size: 13px;
  color: var(--color-mist);
}
[data-theme] #page-configuracoes .radio-line:first-of-type { border-top: 0; }
[data-theme] #page-configuracoes .rd {
  width: 15px;
  height: 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--color-smoke);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
[data-theme] #page-configuracoes .rd.on { border-color: var(--color-acid-lime); }
[data-theme] #page-configuracoes .rd.on::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--color-acid-lime);
}

[data-theme] #page-configuracoes .cfg-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--lx-wash-hover);
  color: var(--color-mist);
  font-size: 12px;
  white-space: nowrap;
  flex: 0 0 auto;
}
[data-theme] #page-configuracoes .cfg-pill.mono {
  font-family: var(--font-mono);
  letter-spacing: -.013em;
}
[data-theme] #page-configuracoes .cfg-pill-ok {
  background: var(--lx-wash-green);
  color: var(--lx-green-text);
}

/* grid de provedores vira cartões .int do protótipo (coluna, ação embaixo) */
[data-theme] #page-configuracoes .cfg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
[data-theme] #page-configuracoes .cfg-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 132px;
}
[data-theme] #page-configuracoes .cfg-card .cfg-row {
  margin-top: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
[data-theme] #page-configuracoes .cfg-card .cfg-row .cfg-input { flex: 1; min-width: 0; }
[data-theme] #page-configuracoes .cfg-id {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
@media (max-width: 780px) {
  [data-theme] #page-configuracoes .cfg-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  [data-theme] #page-configuracoes .cfg-shell { flex-direction: column; }
  [data-theme] #page-configuracoes .cfg-rail {
    flex: 0 0 auto;
    width: auto;
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--color-graphite);
  }
}