/* Rudder DS — componentes (UX plan, #468). Namespace `ds-` para não colidir
 * com as classes globais herdadas de base.html (.card, .btn de telas).
 * Mobile-first: uma coluna; densidade sobe com a largura.
 */

/* ---- cartões e listas ---- */
.ds-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 768px) { .ds-list.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ds-list.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ds-list.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ds-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ds-card h3 { margin: 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.ds-card h3 code { font-size: inherit; }   /* o nome é a string mais importante do card */
.ds-card .ds-why { color: var(--muted); }
.ds-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ds-row.between { justify-content: space-between; }

/* ---- estado: palavra + ponto (a cor nunca é o único sinal) ---- */
.ds-state { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; overflow-wrap: break-word; }
.ds-state .ds-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.ds-state.ok { color: var(--ok); } .ds-state.ok .ds-dot { background: var(--ok); }
.ds-state.err { color: var(--err); } .ds-state.err .ds-dot { background: var(--err); }
.ds-state.warn { color: var(--warn); } .ds-state.warn .ds-dot { background: var(--warn); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 33%, transparent); }

/* ---- chips ---- */
.ds-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ds-chip.on { border-color: var(--accent-text); color: var(--accent-text); }
.ds-card a:not(.ds-btn), .ds-table a:not(.ds-btn), .ds-banner a:not(.ds-btn) { color: var(--accent-text); }   /* 4,43:1 do azul da marca sobre o painel falha AA; --accent-text passa */

/* ---- botões (alvo ≥ 44 px no toque, 36 px compacto) ---- */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--target-comfort); padding: 0 16px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--panel); color: var(--fg); font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; }
.ds-btn:hover { border-color: var(--border-hi); background: var(--panel-hi); text-decoration: none; }
.ds-btn.primary { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.ds-btn.primary:hover { filter: brightness(.92); }   /* escurece: #fff sobre --accent cairia a 3,9:1 */
.ds-btn.danger { border-color: var(--err); color: var(--err); }
.ds-btn.sm { min-height: var(--target-comfort); padding: 0 12px; font-size: 12.5px; }   /* toque: 44 px */
.ds-btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.ds-form-inline { display: inline; margin: 0; }
@media (pointer: fine) { .ds-btn.sm { min-height: 34px; } }   /* mouse: compacto, ainda ≥ 24 px (2.5.8) */
@media (any-pointer: coarse) { .ds-btn.sm { min-height: var(--target-comfort); } }   /* notebook com tela de toque volta a 44 px */

/* ---- menu de ações (details/summary nativos, sem JS — CSP #363) ---- */
/* Abre com um clique ou teclado, fecha fora dele não existe: o summary segura
   o foco e Esc fecha pelo comportamento nativo. O painel é posicionado sobre
   a linha (z-index baixo do shell), com alvos de toque confortáveis. */
.ds-menu { position: relative; display: inline-block; }
.ds-menu > .ds-summary { display: inline-flex; align-items: center; justify-content: center;
  gap: 4px; min-height: var(--target-comfort); padding: 0 12px; font-size: 12.5px; font-weight: 500;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--panel);
  color: var(--fg); cursor: pointer; white-space: nowrap; list-style: none; }
.ds-menu > .ds-summary::-webkit-details-marker { display: none; }
.ds-menu > .ds-summary:hover { border-color: var(--border-hi); background: var(--panel-hi); }
.ds-menu > .ds-summary:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.ds-menu > ul { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
  min-width: 220px; margin: 0; padding: 6px; list-style: none;
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18); }
.ds-menu > ul a { display: flex; align-items: center; min-height: 40px; padding: 0 10px;
  border-radius: 6px; color: var(--fg); text-decoration: none; }
.ds-menu > ul a:hover { background: var(--panel-hi); text-decoration: none; }
@media (pointer: fine) { .ds-menu > .ds-summary { min-height: 34px; } }
@media (any-pointer: coarse) { .ds-menu > .ds-summary { min-height: var(--target-comfort); } }

/* ---- tiles de estatística ---- */
.ds-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 1024px) { .ds-tiles.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ds-tile { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; min-width: 0; text-decoration: none; color: inherit; display: block; }
.ds-tile:hover { border-color: var(--border-hi); text-decoration: none; }
.ds-tile .ds-label, .ds-tile .ds-value, .ds-tile .ds-hint { display: block; }   /* blocos: o nome acessível não cola valor e dica */
.ds-tile .ds-value { font-size: 24px; font-weight: 600; line-height: 1.2; }
.ds-tile .ds-hint { color: var(--muted); font-size: 12px; }
.ds-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; font-weight: 500; }

/* ---- títulos e seções ---- */
.ds-h1 { font-size: 22px; font-weight: 600; margin: 0; }
.ds-h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--accent-text); margin: 0; font-weight: 600; }
.ds-section { display: flex; flex-direction: column; gap: 10px; }
.ds-page { display: flex; flex-direction: column; gap: 18px; }
.ds-empty { color: var(--muted); border: 1px dashed var(--border); border-radius: 10px; padding: 16px; }

/* ---- duas colunas no notebook ---- */
.ds-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1024px) { .ds-two { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }

/* ---- ações de plantão: grade de botões grandes ---- */
.ds-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 1024px) { .ds-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ds-quick .ds-btn { justify-content: flex-start; }
.ds-count { margin-left: auto; color: var(--muted); font-weight: 400; }

/* ---- lista de fatos (dl) ---- */
.ds-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 0; }
.ds-kv dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.ds-kv dd { margin: 0; overflow-wrap: anywhere; }

/* ---- linha do tempo (auditoria, eventos) ---- */
.ds-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.ds-timeline li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--border); overflow-wrap: anywhere; }
.ds-timeline li:last-child { border-bottom: 0; }
.ds-timeline .ds-when { color: var(--muted); font-variant-numeric: tabular-nums; }
.ds-timeline.compact li { grid-template-columns: 72px minmax(0, 1fr); font-size: 11.5px; padding: 2px 0; border-bottom: 0; }
.ds-kv dd.ok { color: var(--ok); } .ds-kv dd.warn { color: var(--warn); } .ds-kv dd.err { color: var(--err); font-weight: 600; }
.ds-spark svg { max-width: 100%; height: auto; }

/* ---- utilitários mínimos (no lugar de style= nos templates) ---- */
.ds-sub { margin: 0; }
.ds-mt { margin-top: 8px; }
.ds-num { font-size: 22px; font-weight: 600; }
.ds-summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; list-style: none; }
.ds-summary::-webkit-details-marker { display: none; }
.ds-summary::before { content: "▸"; margin-right: 8px; transition: transform .15s; }
@supports (content: "a" / "b") { .ds-summary::before { content: "▸" / ""; } }   /* decorativo: fora do nome acessível onde o motor suporta */
.ds-summary > .ds-h2 { margin: 0; }
details[open] > .ds-summary::before { transform: rotate(90deg); }

/* ---- U2 (#481): lista de backends — toolbar, chips, cartões, tabela, barra de ação ---- */
.ds-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: end; }
@media (min-width: 768px) { .ds-toolbar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; } }
.ds-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ds-field > label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.ds-field > label.ds-plain { text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--fg); }
.ds-field .ds-error { color: var(--err); font-size: 13px; margin: 0; }
.ds-input, .ds-select { width: 100%; min-height: var(--target-comfort); padding: 0 12px; font-size: max(16px, 1rem); /* 16 px: o iOS não dá zoom no foco */
  border-radius: 8px; border: 1px solid var(--border-strong); background: var(--panel); color: var(--fg); font-family: inherit; }
@media (pointer: fine) { .ds-input, .ds-select { min-height: 36px; font-size: 0.875rem; } }   /* scales with the user's default */
@media (any-pointer: coarse) { .ds-input, .ds-select, .ds-table .ds-input, .ds-table .ds-select { min-height: var(--target-comfort); font-size: max(16px, 1rem); } }
.ds-input:focus-visible, .ds-select:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.ds-input::placeholder, input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }   /* 5,36:1 by decision, not by browser default (1.4.3) */
.ds-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.ds-chips a, .ds-chips button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--panel); color: var(--fg); text-decoration: none; font-size: 13px; white-space: nowrap; }
.ds-chips a:hover, .ds-chips button:hover { border-color: var(--accent-text); text-decoration: none; }
.ds-chips button { font: inherit; cursor: pointer; }
.ds-chips a[aria-current], .ds-chips button[aria-pressed="true"] { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.ds-chips a[aria-current] .ds-count { color: #fff; }
.ds-chips a:focus-visible, .ds-chips button:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.ds-chips .ds-count { margin-left: 0; }
.ds-chip.err { color: var(--err); border-color: var(--err); }
.ds-chip.warn { color: var(--warn); border-color: var(--warn); }
.ds-chip.ok { color: var(--ok); border-color: var(--ok); }
.ds-card .ds-facts { display: flex; flex-direction: column; gap: 3px; color: var(--muted); font-size: 12.5px; }
.ds-card .ds-facts code { font-size: 12px; overflow-wrap: anywhere; }
.ds-state.none { color: var(--muted); }
.ds-view-toggle { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }   /* wraps below 375 px (#530 review) */
.ds-view-toggle a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; color: var(--fg); text-decoration: none; font-size: 13px; }
.ds-view-toggle a[aria-current] { background: var(--accent-strong); color: #fff; }
.ds-view-toggle a:focus-visible { outline: 2px solid var(--fg); outline-offset: -3px; }   /* visível também sobre o item ativo */
.ds-pager { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.ds-pager .ds-page-n { color: var(--muted); }
.ds-actionbar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 10px; padding: 10px 0 calc(10px + var(--safe-b));
  margin-top: 8px; background: var(--bg); border-top: 1px solid var(--border); }
.ds-actionbar .ds-btn, .ds-actionbar form { flex: 1; min-width: 0; }
.ds-actionbar .ds-btn { white-space: normal; padding: 6px 10px; line-height: 1.2; }   /* três ações cabem em 320 px sem estourar */
.ds-actionbar form { display: flex; }
.ds-actionbar form .ds-btn { width: 100%; }
.ds-actionbar { flex-wrap: wrap; }                                       /* the label takes a row of its own at 320 px (#537 a11y) */
.ds-actionbar > .ds-sub { flex: 1 0 100%; }
.ds-actionbar .ds-btn { flex: 1 1 0; min-width: 6ch; }
@media (min-width: 768px) { .ds-actionbar { display: none; } }
@media (max-width: 767px) { html { scroll-padding-bottom: calc(var(--target-comfort) + 30px + var(--safe-b)); } }   /* 2.4.11 com a barra de ação */
.ds-only-wide { display: none; }
@media (min-width: 768px) { .ds-only-wide { display: inline-flex; } }

/* tabela densa: só para leitura; a região rola, a página não */
.ds-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }   /* relative: .sr-only (absolute) fica contido na região e não alarga o documento */
.ds-table-wrap:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.ds-table { width: 100%; border-collapse: collapse; }
.ds-table caption { text-align: left; padding: 10px 14px; font-weight: 600; }
.ds-table th, .ds-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: top; }
.ds-table tr:last-child td { border-bottom: none; }
.ds-table thead th { background: var(--bg); color: var(--muted); font-weight: 500; text-transform: uppercase; font-size: 11px; letter-spacing: .4px; white-space: nowrap; }
.ds-table tbody th { background: transparent; color: var(--fg); font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 600; }   /* cabeçalho de linha = identificador, não rótulo */
.ds-table tbody tr:hover { background: var(--panel-hi); }
.ds-table code { font-size: 12px; }
.ds-table .ds-form-inline { display: inline-flex; gap: 6px; align-items: center; }
.ds-table .ds-select, .ds-table .ds-input { min-height: 34px; font-size: 13px; width: auto; }
.ds-table .ds-form-inline { flex-wrap: nowrap; }
.ds-table .ds-input.reason { width: 160px; }
.ds-banner { border-radius: 10px; padding: 12px 14px; border: 1px solid var(--border); background: var(--panel); }
.ds-banner.err { border-color: var(--err); background: color-mix(in srgb, var(--err) 10%, var(--panel)); }
.ds-banner.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--panel)); }
.ds-banner h2 { margin: 0 0 4px; font-size: 14px; }
.ds-banner p { margin: 0; }
.ds-banner .muted { color: var(--fg-dim); }   /* --muted sobre o fundo tingido cai a 4,4:1 */
.ds-banner.warn a:not(.ds-btn) { color: #3d9df7; }   /* 4,99:1 sobre o fundo tingido; --accent-text cai a 4,46:1 (#539 a11y) */
.ds-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 768px) { .ds-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ds-mono { font-family: ui-monospace, monospace; overflow-wrap: anywhere; }   /* IPv6 literals and long ids never widen the page (#535 review) */
.ds-org-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ds-org-head h2 { margin: 0; font-size: 15px; font-weight: 600; }

/* ---- U3 (#482): detalhe — migalhas, faixa de resumo, painéis que abrem, ajuda, zona de perigo ---- */
.ds-crumbs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); }
.ds-crumbs [aria-current] code { color: var(--fg); }
.ds-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 12px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
@media (min-width: 768px) { .ds-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* even: dt/dd pairs never split (#528 review) */
@media (min-width: 1024px) { .ds-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ds-strip dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.ds-strip dd { margin: 0; overflow-wrap: anywhere; }
.ds-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 0 16px; }
.ds-panel > .ds-summary { min-height: 48px; }
.ds-panel[open] > .ds-summary { border-bottom: 1px solid var(--border); }
.ds-panel > .ds-summary .ds-count { margin-left: 8px; text-transform: none; letter-spacing: 0; }
.ds-body { display: flex; flex-direction: column; gap: 12px; padding: 12px 0 16px; }
.ds-body h3 { margin: 4px 0 0; font-size: 14px; font-weight: 600; }
.ds-link { display: inline-flex; align-items: center; min-height: 24px; }
.ds-help { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 0; }
.ds-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; padding: 8px 0; border-top: 1px dashed var(--border); }
.ds-toggle > span:first-child { flex: 1 1 260px; min-width: 0; }
.ds-pre:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.ds-pre { position: relative; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; font-size: 11.5px; overflow-x: auto; margin: 8px 0 0; color: var(--fg); }
.ds-dim > td, .ds-dim > th { color: var(--muted); }   /* sem opacity: controles e foco ficam legíveis */
.ds-danger { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid var(--err); border-radius: 10px; }
.ds-btn.danger:hover { background: color-mix(in srgb, var(--err) 12%, var(--panel)); border-color: var(--err); }
.ds-narrow { max-width: 720px; }
.ds-impact { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.ds-body .ds-summary { min-height: 40px; font-size: 12.5px; color: var(--muted); }

/* ---- U4 (#483): alertas — cartões de incidente e painel do selecionado ---- */
.ds-card .ds-meta, .ds-table .ds-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.ds-card .ds-meta > li + li::before, .ds-table .ds-meta > li + li::before { content: "· " / ""; }   /* separador só visual: cada fato é um item da lista */
.ds-card.ds-selected { border-color: var(--accent-text); border-left-width: 4px; background: var(--panel-hi); }   /* cor + forma (1.4.1) */
.ds-state { overflow-wrap: anywhere; }
.ds-table td > .ds-state { overflow-wrap: normal; word-break: keep-all; }   /* a one-word state never breaks mid-word (#537 a11y) */
.ds-table .ds-ident, .ds-table .ds-ident .ds-mono { overflow-wrap: normal; word-break: keep-all; }   /* an identifier or a type word never breaks mid-word: `string` is not `str ing`, and a field name is meant to be copied (#192 a11y) */
.ds-items { gap: 4px; }
.ds-impact li { overflow-wrap: anywhere; }   /* a long host in an impact line never scrolls the page at 320 px (#531 a11y) */
.ds-required-legend { color: var(--muted); font-size: 12px; margin: 0 0 2px; }
.ds-form-grid > .ds-required-legend { grid-column: 1 / -1; }   /* a legend, never a one-third cell */
.ds-error-summary li a { display: inline-block; min-height: 24px; }
/* ---- .ds-table.ds-stack: below 768 px each row is a card and every cell carries its column name (data-label) ---- */
@media (max-width: 767px) {
  .ds-table.ds-stack thead { display: none; }   /* the data-label carries the column name; a hidden header row would be read twice */
  .ds-table-wrap:has(> .ds-table.ds-stack) { overflow: visible; }
  .ds-table.ds-stack, .ds-table.ds-stack tbody, .ds-table.ds-stack tr, .ds-table.ds-stack th, .ds-table.ds-stack td { display: block; }
  .ds-table.ds-stack tr { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; background: var(--panel); }
  .ds-table.ds-stack td, .ds-table.ds-stack th[scope="row"] { border: 0; padding: 4px 0; }
  .ds-table.ds-stack td[data-label]::before, .ds-table.ds-stack th[scope="row"][data-label]::before {
    content: attr(data-label) ": "; color: var(--muted); font-size: 11px; font-variant: all-small-caps; letter-spacing: .4px; }
}
.ds-chip.data { text-transform: none; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; }   /* dados (nome de org), não rótulo */
.ds-h3 { font-size: 14px; font-weight: 600; margin: 4px 0 0; }
@media (any-pointer: coarse) { .ds-chips a, .ds-view-toggle a { min-height: var(--target-comfort); } }
.ds-pane { position: sticky; top: calc(var(--topbar-h) + var(--safe-t) + 16px); }
@media (max-width: 1023px) { .ds-pane { position: static; } }
.ds-two.wide-right { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .ds-two.wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }

/* ---- U5 (#484): passos, resumo de erros, campos ---- */
.ds-stepper { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: step; flex-wrap: wrap; }
.ds-stepper li { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; }
.ds-stepper li::before { counter-increment: step; content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-strong); font-size: 12px; }
.ds-stepper li[aria-current] { color: var(--fg); font-weight: 600; }
.ds-stepper li[aria-current]::before { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.ds-stepper li.done::before { content: "✓"; background: var(--ok); border-color: var(--ok); color: var(--bg); }   /* 8,7:1 */
@supports (content: "a" / "b") { .ds-stepper li.done::before { content: "✓" / ""; } }
.ds-stepper li + li::after { content: ""; display: none; }
.ds-error-summary { border: 1px solid var(--err); border-radius: 10px; padding: 12px 14px; background: color-mix(in srgb, var(--err) 10%, var(--panel)); }
.ds-error-summary h2, .ds-error-summary h3 { margin: 0 0 6px; font-size: 14px; }
.ds-error-summary ul { margin: 0; padding-left: 20px; }
.ds-error-summary a { color: var(--fg); text-decoration: underline; }
.ds-field .ds-hint { color: var(--muted); font-size: 12px; }
.ds-field .ds-input[aria-invalid="true"], .ds-field .ds-select[aria-invalid="true"], .ds-field .ds-textarea[aria-invalid="true"] { border-color: var(--err); }
.ds-textarea { width: 100%; min-height: 120px; padding: 10px 12px; font-size: 16px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--panel); color: var(--fg); font-family: ui-monospace, monospace; resize: vertical; }
@media (pointer: fine) { .ds-textarea { font-size: 14px; } }
@media (any-pointer: coarse) { .ds-textarea { font-size: 16px; } }
.ds-textarea:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.ds-radios { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-radios label { display: inline-flex; align-items: center; gap: 8px; min-height: var(--target-comfort); padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 999px; cursor: pointer; }
.ds-radios.stacked { flex-direction: column; align-items: stretch; }         /* option + its hint stacked, never flex siblings (#537 a11y) */
.ds-radios.stacked .ds-radio-opt > label { display: inline-flex; }
.ds-radios label:has(input:disabled) { color: var(--muted); border-style: dashed; cursor: not-allowed; }
.ds-radios label:has(input:checked) { border-color: var(--accent-strong); background: color-mix(in srgb, var(--accent-strong) 18%, var(--panel)); }
.ds-radios input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.ds-radios label:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: 2px; }
.ds-two.form { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .ds-two.form { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }

/* ---- U6 (#485): zona DNS — postura em segmentos, seleção, valores longos ---- */
.posture { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.posture form { display: contents; }
.posture .pg { min-height: 34px; padding: 0 12px; border: 0; border-right: 1px solid var(--border-strong); background: var(--panel); color: var(--fg); font: inherit; font-size: 12.5px; cursor: pointer; }
.posture .pg:last-child, .posture form:last-child .pg { border-right: 0; }
.posture .pg.sel { background: var(--accent-strong); color: #fff; }
.posture .pg.sel.pending { background: color-mix(in srgb, var(--warn) 30%, var(--panel)); color: var(--fg); }
.posture .pg[disabled] { color: var(--muted); cursor: not-allowed; }
.posture .pg:focus-visible { outline: 2px solid var(--fg); outline-offset: -3px; }
@media (any-pointer: coarse) { .posture .pg { min-height: var(--target-comfort); } }
.ds-check { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--target-comfort); min-width: var(--target-comfort); cursor: pointer; }
.ds-check-row { justify-content: flex-start; }
.ds-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.ds-check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ds-check-row { padding: 8px 0; }
.ds-value-wrap { display: block; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 12.5px; }
.ds-table .ds-value-wrap { display: inline; }

/* ---- #363: server-rendered SVGs carry classes, never style= (the CSP has no 'unsafe-inline') ---- */
.ds-svg-block { display: block; width: 100%; }
.ds-spark svg.ds-svg-h36, svg.ds-svg-h36 { height: 36px; }   /* the fixed heights sparkline_svg() is called with; `.ds-spark svg { height: auto }` must not win */
.ds-spark svg.ds-svg-h60, svg.ds-svg-h60 { height: 60px; }
.ds-chart { display: block; font: 11px ui-sans-serif, system-ui; }

/* ---- #363: htmx no longer injects its <style> (includeIndicatorStyles=false under an enforced CSP) ---- */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .htmx-indicator { transition: none; } }

/* ---- U8 (#472): PWA — banner de nova versão, menu ---- */
.pwa-update[hidden], .user-menu-item[hidden], .user-menu-hint[hidden], .ds-btn[hidden] { display: none; }   /* o atributo vence o display: flex/block (#539 a11y: .ds-btn também) */
.pwa-update { position: fixed; left: max(12px, var(--safe-l)); right: max(12px, var(--safe-r)); bottom: calc(12px + var(--safe-b)); z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--accent-text); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
@media (min-width: 768px) { .pwa-update { left: auto; max-width: 480px; } }
/* while the banner is on screen nothing may sit under it: the sticky action bar and the page end move up (2.5.8 / 2.4.11) */
body.has-pwa-banner { padding-bottom: var(--pwa-banner-h, 92px); }
body.has-pwa-banner .ds-actionbar { bottom: var(--pwa-banner-h, 92px); }
.topbar .user-menu-item#pwa-install { width: 100%; text-align: left; background: transparent; border: none; cursor: pointer; font-family: inherit; }
@media (any-pointer: coarse) { .topbar .user-menu-item#pwa-install { min-height: var(--target-comfort); } }
.user-menu-hint { margin: 6px 12px; color: var(--muted); font-size: 12px; }

/* U10 (#498): account, login, 2FA */
.ds-qr { display: flex; justify-content: center; margin: 12px 0; }
.ds-qr svg { width: 220px; height: 220px; max-width: 100%; background: #fff; padding: 8px; border-radius: 8px; }
.ds-codes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-family: ui-monospace, monospace; font-size: 15px; }
.ds-codes li { background: var(--bg); border: 1px solid var(--border-strong); border-radius: 6px; padding: 10px 12px; letter-spacing: 1px; text-align: center; user-select: all; }
.ds-code-input { font-family: ui-monospace, monospace; font-size: 20px; letter-spacing: 6px; text-align: center; }
.ds-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ds-ua { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; margin: 6px 0 0; }
@media print { .topbar, .sidebar, .skip-link, .ds-actions, .pwa-update, .drawer-toggle { display: none !important; }
  body, .ds-codes li, .ds-card, .ds-banner { background: #fff !important; color: #000 !important; }   /* browsers print without backgrounds: the codes must survive on paper */
  .ds-codes li { border-color: #000 !important; } }
.ds-banner.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--panel)); }
/* Um resumo de erros recebe o foco depois de uma submissão falhada e o utilizador
   acabou de agir, por isso o anel orienta. O título de um banner não: ele é focado
   só para ser anunciado, não é alcançável por Tab (tabindex="-1") e o anel à volta
   dele lê-se como defeito de renderização — foi assim que foi reportado (#554). */
.ds-error-summary h2:focus, .ds-error-summary h3:focus { outline: var(--focus-ring); outline-offset: 2px; }
.ds-error-summary li { padding: 4px 0; }
.ds-error-summary a { text-decoration: underline; }

/* Observability (#501): cards in columns on wide screens, checkbox lists, fieldsets, metric values */
@media (min-width: 768px) { .ds-list.cols { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
.ds-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ds-fieldset legend { padding: 0; margin-bottom: 6px; font-size: 12px; color: var(--fg-dim); font-weight: 500; }
.ds-check-list { display: flex; flex-wrap: wrap; gap: 0 12px; max-height: 40vh; overflow-y: auto; padding: 4px 8px; border: 1px solid var(--border-strong); border-radius: 8px; }
.ds-check-list .ds-check { min-height: 40px; }
@media (any-pointer: coarse) { .ds-check-list .ds-check, .ds-chips button { min-height: var(--target-comfort); } }
.ds-kv .ds-big { font-size: 18px; font-weight: 600; }
.ds-table .ds-cell-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-msg.err { color: var(--err); }
.ds-timeline .ds-state { font-weight: 500; }

/* #507: a third flash kind for partial results (one edge ok, one failed) */
.flash.warn { border: 1px solid var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--panel)); }

/* #509: facts lists also live outside cards (import preview) */
.ds-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }

/* #511: e-mail block — activity strip, plain lists inside kv, the log box */
.ds-activity { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.ds-activity a { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); text-decoration: none; padding: 4px 0; min-height: 24px; }
.ds-activity a:hover, .ds-activity a:focus-visible { color: var(--accent-text); }
.ds-activity .ds-mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ds-activity time { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 11.5px; }
.ds-form-grid > .ds-error-summary { grid-column: 1 / -1; }   /* full width above the fields, never a one-third cell (#511 review) */
.ds-form-grid > .ds-form-grid { display: contents; }         /* a grouping wrapper never becomes a one-third cell (#517 review) */
.ds-plain-list { margin: 0; padding: 0; list-style: none; }
.ds-card h2.ds-h3 { font-size: 16px; }   /* a card's h2 is never smaller than the h3 it contains (#513 review) */
.ds-wrap { overflow-wrap: anywhere; }
.ds-log { max-height: 60vh; overflow: auto; line-height: 1.55; }
.ds-log .err { color: var(--err); }
.ds-log .warn { color: var(--warn); }
.ds-log .info { color: var(--accent-text); }

/* #515: traffic — legend, bars as <meter>, chart, tree, map */
.ds-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 12px; color: var(--fg-dim); }
.ds-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ds-bars { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ds-bars li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 10px; align-items: center; font-size: 12.5px; }
.ds-bar-label { color: var(--fg-dim); overflow-wrap: anywhere; }
.ds-bar-value { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-meter { appearance: none; -webkit-appearance: none; width: 100%; height: 8px; border: 0; background: var(--panel-hi); border-radius: 4px; overflow: hidden; }
.ds-meter::-webkit-meter-bar { background: var(--panel-hi); border: 0; border-radius: 4px; }
.ds-meter::-webkit-meter-optimum-value, .ds-meter::-webkit-meter-suboptimum-value, .ds-meter::-webkit-meter-even-less-good-value { background: var(--accent-strong); border-radius: 4px; }
.ds-meter::-moz-meter-bar { background: var(--accent-strong); border-radius: 4px; }
.ds-chart svg { display: block; width: 100%; height: auto; }
.ds-tree details { margin: 0; }
.ds-tree summary { cursor: pointer; padding: 8px 12px; min-height: 36px; display: flex; align-items: center; gap: 10px; border-radius: 6px; font-size: 13px; }
.ds-tree summary::before { content: "▸" / ""; color: var(--muted); flex: none; transition: transform .15s; }
.ds-tree details[open] > summary::before, .ds-tree[open] > summary::before { transform: rotate(90deg); }
.ds-tree summary:hover { background: var(--panel-hi); }
.ds-tree summary:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.ds-tree .ds-tree-city summary { padding-left: 28px; color: var(--fg-dim); }
.ds-tree .ds-tree-leaves li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 12px 5px 48px; font-size: 12.5px; color: var(--fg-dim); }
.ds-tree .ds-count { margin-left: auto; }
.ds-map { height: 60vh; min-height: 320px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.ds-map .leaflet-interactive:focus-visible { outline: 2px solid var(--fg); }
.ds-details { margin-top: 10px; }
.ds-details > summary { cursor: pointer; min-height: 36px; display: flex; align-items: center; gap: 6px; color: var(--accent-text); font-size: 13px; }
.ds-details > summary::before { content: "▸" / ""; color: var(--muted); flex: none; transition: transform .15s; }
.ds-details[open] > summary::before { transform: rotate(90deg); }
.ds-tree > summary h3 { margin: 0; font-size: 13px; font-weight: 600; display: inline; }
.ds-details > summary:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.ds-map:focus-visible { outline: var(--focus-ring); }

/* #517: security — range sliders, breakdown list, coloured meters */
.ds-range { flex: 1; min-width: 0; accent-color: var(--accent-strong); min-height: 44px; }
.ds-field > .ds-row output { min-width: 3ch; text-align: right; color: var(--muted); }
.ds-breakdown li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; font-size: 12px; color: var(--fg-dim); }
.ds-meter.warn::-webkit-meter-optimum-value, .ds-meter.warn::-webkit-meter-suboptimum-value, .ds-meter.warn::-webkit-meter-even-less-good-value, .ds-meter.warn::-moz-meter-bar { background: var(--warn); }
.ds-meter.err::-webkit-meter-optimum-value, .ds-meter.err::-webkit-meter-suboptimum-value, .ds-meter.err::-webkit-meter-even-less-good-value, .ds-meter.err::-moz-meter-bar { background: var(--err); }

/* #520: a region being refreshed by htmx */
.htmx-request[aria-busy="true"], [data-announce].htmx-request { opacity: .5; transition: opacity .15s; }

/* #521: data inside labels and headings keeps its case */
.ds-check { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--fg); }
.ds-h2.ds-mono { text-transform: none; letter-spacing: 0; }
.ds-chips.compact { gap: 4px; }
.ds-chips.compact li { display: inline-flex; }

/* #523: tiles that pack by width (VLANs) */
.ds-tiles.auto { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.ds-tile .ds-meter { display: block; margin: 8px 0 4px; }

/* #523 review: an htmx-swapped group inside a form grid keeps a box (focus ring, busy dimming, aria-busy) */
.ds-form-grid > .ds-form-sub { display: grid; grid-column: 1 / -1; gap: 10px; grid-template-columns: subgrid; }
@supports not (grid-template-columns: subgrid) { .ds-form-grid > .ds-form-sub { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.ds-form-sub:focus-visible { outline: var(--focus-ring); outline-offset: 4px; border-radius: 6px; }
.ds-btn[disabled], .ds-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
/* #526: a critical cell keeps its word; the colour is extra */
.ds-table .ds-cell-crit { color: var(--err); font-weight: 600; }

/* #530 review: user data (e-mails, names) never widens the page */
.ds-h1 { overflow-wrap: anywhere; min-width: 0; }
.ds-crumbs .ds-btn { white-space: normal; text-align: left; }
.ds-field label code { overflow-wrap: anywhere; }
.ds-tile { position: relative; }
.ds-tile .ds-label { overflow-wrap: anywhere; }
@media (any-pointer: coarse) { .ds-view-toggle a { min-height: var(--target-comfort); } }
.ds-view-toggle a[aria-current] { font-weight: 600; }

/* #533: a policy diff inside a <pre>: added and removed lines keep their sign, the colour is extra */
.ds-pre ins.ds-diff-add { color: var(--ok); text-decoration: none; }
.ds-pre del.ds-diff-del { color: var(--err); text-decoration: none; }

/* #535 review: a disclosure inside a table cell keeps the comfortable target on touch */
@media (any-pointer: coarse) { .ds-details > summary { min-height: var(--target-comfort); display: flex; align-items: center; } }

/* #600: a published host nobody probes from outside. The row is tinted because
   48 of them sat quiet in an alphabetical table and nobody noticed — a gap has
   to be uncomfortable, not merely present. */
.ds-table tr.ds-row-gap > * { background: color-mix(in srgb, var(--err) 10%, transparent); }

/* ── seletor de cliente no topo (#677, épico #676) ───────────────────────
 * O ativo NUNCA é só a laranja: é negrito, tem a palavra "ativo" em texto e
 * carrega aria-current. Errar isso custa dado gravado no cliente errado.
 */
.topbar .tsel { position: relative; display: inline-flex; }
.topbar .tsel-menu { position: relative; }
.topbar .tsel-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 5px 9px; border-radius: 8px; border: 1px solid var(--border-hi);
  background: var(--panel); color: var(--fg); font-size: 12.5px;
  list-style: none; min-height: var(--target-min);
}
.topbar .tsel-chip::-webkit-details-marker { display: none; }
.topbar .tsel-chip:hover { border-color: var(--border-strong); }
.topbar .tsel-menu[open] > .tsel-chip { border-color: var(--accent); }
.topbar .tsel-chip .chev { color: var(--muted); transition: transform .12s ease; }
.topbar .tsel-menu[open] .chev { transform: rotate(180deg); }
.topbar .tsel-chip-name { font-weight: 600; }
.topbar .tsel-chip-more {
  color: var(--bg); background: var(--fg-dim); font-weight: 600;
  border-radius: 999px; padding: 0 6px; font-size: 11px;
}
.topbar .tsel-chip-count { display: none; font-weight: 600; }

/* Ancorado pela DIREITA: o chip mora no canto direito da barra, e um painel
   de 320px preso ao `left: 0` dele termina 4 px depois da janela -- medido em
   producao a 1280 e a 1600, sempre 4 px, com o "Aplicar" encostado na borda.
   `max-width` nao resolvia porque o painel nao e largo demais: e o ponto de
   ancoragem que fica longe demais. */
.topbar .tsel-panel {
  position: absolute; top: calc(100% + 6px); left: auto; right: 0; z-index: 60;
  width: 320px; max-width: calc(100vw - 24px);
  background: var(--topbar); border: 1px solid var(--border-hi);
  border-radius: 10px; padding: 8px; margin: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.topbar .tsel-search { padding: 2px 2px 8px; }
.topbar .tsel-search input {
  width: 100%; box-sizing: border-box; min-height: var(--target-min);
  padding: 6px 8px; border-radius: 7px; border: 1px solid var(--border-hi);
  background: var(--panel); color: var(--fg); font: inherit; font-size: 12.5px;
}
.topbar .tsel-error {
  margin: 0 2px 8px; padding: 6px 8px; border-radius: 7px;
  border: 1px solid var(--err); color: var(--fg); font-size: 12px;
}
.topbar .tsel-list {
  list-style: none; margin: 0; padding: 0;
  max-height: 46vh; overflow-y: auto;
}
.topbar .tsel-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 7px; border-radius: 7px; min-height: var(--target-min);
}
.topbar .tsel-opt:hover { background: var(--panel-hi); }
.topbar .tsel-opt[hidden] { display: none; }
.topbar .tsel-box { width: 15px; height: 15px; accent-color: var(--accent); flex: none; }
.topbar .tsel-name {
  flex: 1; cursor: pointer; color: var(--fg); font-size: 12.5px;
  padding: 3px 4px; border-radius: 5px;
}
/* O ativo: fundo laranja E negrito E a palavra "ativo" ao lado. */
.topbar .tsel-opt.is-active .tsel-name {
  background: var(--brand-warm); color: var(--bg); font-weight: 700;
}
.topbar .tsel-badge {
  font-size: 11px; font-weight: 700; text-transform: lowercase;
  color: var(--bg); background: var(--brand-warm);
  border-radius: 999px; padding: 1px 8px; flex: none;
}
.topbar .tsel-make {
  font: inherit; font-size: 11px; cursor: pointer; flex: none;
  min-height: var(--target-min); padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border-hi); background: transparent; color: var(--fg-dim);
}
.topbar .tsel-make:hover { border-color: var(--brand-warm); color: var(--fg); }
.topbar .tsel-foot {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 2px 4px; border-top: 1px solid var(--border); margin-top: 8px;
}
.topbar .tsel-bulk, .topbar .tsel-apply {
  font: inherit; font-size: 12px; cursor: pointer;
  min-height: var(--target-min); padding: 4px 10px; border-radius: 7px;
  border: 1px solid var(--border-hi); background: var(--panel); color: var(--fg-dim);
}
.topbar .tsel-bulk[hidden] { display: none; }
.topbar .tsel-apply {
  margin-left: auto; background: var(--accent-strong);
  border-color: var(--accent-strong); color: #fff; font-weight: 600;
}
.topbar .tsel-hint { margin: 6px 2px 2px; color: var(--muted); font-size: 11px; }

/* Telefone: o chip vira ícone + contagem e o menu ocupa a largura toda. */
@media (max-width: 767px) {
  .topbar .tsel-chip-name, .topbar .tsel-chip-more { display: none; }
  .topbar .tsel-chip-count { display: inline; }
  .topbar .tsel-panel {
    position: fixed; left: 8px; right: 8px; width: auto; max-width: none;
    top: calc(var(--topbar-h) + var(--safe-t) + 6px);
  }
  body.has-imp-banner .topbar .tsel-panel {
    top: calc(var(--topbar-h) + var(--safe-t) + var(--banner-h) + 6px);
  }
}

/* #808: the maps have no tiles; the ocean is the theme's background, not
   Leaflet's light #ddd default. Id selector so it wins over leaflet.css
   whatever order the two stylesheets load in. */
#trmap { background: var(--bg); }