/*
 * ============================================================
 *  HelpTI — Design System v1.0
 *  Tokens, classes utilitárias e padrões globais de UI
 *  Autor: PageUp Sistemas
 *  Importado via layout.php — NÃO editar sem documentar
 * ============================================================
 *
 *  PILARES
 *  1. Paleta de cores: tokens semânticos estritamente mapeados
 *  2. Tipografia: escala baseada em 14 px base, razão 1.25
 *  3. Espaçamento: múltiplos de 4 px  (4 / 8 / 12 / 16 / 24 / 32)
 *  4. Border-radius: --radius-sm 6px | --radius-md 8px | --radius-lg 12px
 *  5. Ícones: Bootstrap Icons (bi bi-*) EXCLUSIVAMENTE — nunca misturar
 *  6. Botões: 3 tamanhos  .btn-xs | .btn-sm (padrão) | .btn-md
 *  7. Badges/tags: .ht-badge + modificador semântico
 *  8. Tabelas: classe .ht-table — cabeçalho fixo, alinhamentos canônicos
 *  9. Estados vazios: .empty-state padronizado
 * 10. Acessibilidade: contraste mínimo WCAG AA em todos os tokens
 * ============================================================
 */

/* ═══════════════════════════════════════════════════════════
   1. TOKENS GLOBAIS — TEMA CLARO
   ═══════════════════════════════════════════════════════════ */
:root {

  /* — Raio de cantos (corporate-modern: arredondado mas sóbrio) — */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* — Escala tipográfica — */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13.5px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;

  /* — Espaçamento (4 px grid) — */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* — Alturas de elementos de formulário — */
  --input-h:    36px;   /* input / select padrão           */
  --input-h-sm: 30px;   /* input-sm / select-sm             */
  --input-h-lg: 44px;   /* usado em buscas e modais grandes */

  /* — Sombras — */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.12);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.16);

  /* ── PALETA DE MARCA ─────────────────────────────────── */
  /* Azul Técnico HelpTI */
  --brand:        #1D3557;   /* ação primária, nav ativo, links       */
  --brand-mid:    #457B9D;   /* hover de botões, ícones secundários   */
  --brand-light:  #A8DADC;   /* fundo de nav ativo (sutil)            */
  --brand-xlight: #EFF6FF;   /* fundo de badge "Aberto"               */

  /* ── CORES SEMÂNTICAS (estados de TI) ───────────────── */

  /* Sucesso / Ativo Disponível / Concluído */
  --sem-success-bg:  #DCFCE7;
  --sem-success-tx:  #14532D;
  --sem-success-bdr: #BBF7D0;

  /* Aviso / SLA em alerta / Em Manutenção */
  --sem-warn-bg:  #FEF3C7;
  --sem-warn-tx:  #78350F;
  --sem-warn-bdr: #FDE68A;

  /* Crítico / SLA estourado / Erro / Pendente */
  --sem-danger-bg:  #FEE2E2;
  --sem-danger-tx:  #7F1D1D;
  --sem-danger-bdr: #FECACA;

  /* Informação / Em Andamento / Aberto */
  --sem-info-bg:  #DBEAFE;
  --sem-info-tx:  #1E3A8A;
  --sem-info-bdr: #BFDBFE;

  /* Neutro / Descartado / Inativo */
  --sem-neutral-bg:  #F1F5F9;
  --sem-neutral-tx:  #475569;
  --sem-neutral-bdr: #E2E8F0;

  /* ── CORES NEUTRAS DE LAYOUT ─────────────────────────── */
  --bg-page:        #F1FAEE;   /* fundo da página                     */
  --bg-surface:     #FFFFFF;   /* cards, modais, topbar, sidebar       */
  --bg-surface-alt: #F8F9FA;   /* zebra de tabela, fundo de inputs     */
  --bg-hover:       #F1F5F9;   /* hover de tr, item de lista           */

  /* ── BORDAS ──────────────────────────────────────────── */
  --border:       #E5E9F2;
  --border-light: #F1F5F9;

  /* ── TEXTO (3 variações) ─────────────────────────────── */
  --tx-primary:   #111111;   /* cabeçalhos, valores de dados          */
  --tx-secondary: #5A6472;   /* labels, descrições                    */
  --tx-muted:     #6C757D;   /* legendas, textos desabilitados        */
  --tx-faint:     #94A3B8;   /* placeholders, ícones decorativos      */
  --tx-nav:       #ADB5BD;   /* rótulos de seção do nav               */

  /* ── TABELAS ─────────────────────────────────────────── */
  --table-th-bg: #F8F9FA;
  --table-th-tx: #6C757D;

  /* ── BUSCA ───────────────────────────────────────────── */
  --busca-bg: #F8FAFC;
}

/* ═══════════════════════════════════════════════════════════
   1b. TOKENS — TEMA ESCURO
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --brand:        #457B9D;
  --brand-light:  #1E3A5F;
  --brand-xlight: #0C1E40;

  --sem-success-bg:  #052E16; --sem-success-tx: #86EFAC; --sem-success-bdr: #14532D;
  --sem-warn-bg:     #422006; --sem-warn-tx:    #FDE68A; --sem-warn-bdr:    #78350F;
  --sem-danger-bg:   #450A0A; --sem-danger-tx:  #FCA5A5; --sem-danger-bdr:  #7F1D1D;
  --sem-info-bg:     #0C1E40; --sem-info-tx:    #93C5FD; --sem-info-bdr:    #1E3A5F;
  --sem-neutral-bg:  #1E293B; --sem-neutral-tx: #94A3B8; --sem-neutral-bdr: #334155;

  --bg-page:        #0F172A;
  --bg-surface:     #1E293B;
  --bg-surface-alt: #263347;
  --bg-hover:       #2D3F55;

  --border:       #2D3F55;
  --border-light: #1E293B;

  --tx-primary:   #E2E8F0;
  --tx-secondary: #94A3B8;
  --tx-muted:     #94A3B8;
  --tx-faint:     #64748B;
  --tx-nav:       #64748B;

  --table-th-bg: #263347;
  --table-th-tx: #94A3B8;
  --busca-bg:    #263347;
}

/* ═══════════════════════════════════════════════════════════
   2. FORMULÁRIOS — ALTURA CANÔNICA
   ═══════════════════════════════════════════════════════════ */

/* Altura padrão de todos os inputs e selects */
.form-control,
.form-select {
  height: var(--input-h);
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--text-base);
  border-radius: var(--radius-md);
  border-color: var(--border);
  background: var(--bg-surface);
  color: var(--tx-primary);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--brand);
  background: var(--bg-surface);
  color: var(--tx-primary);
  box-shadow: 0 0 0 3px rgba(29,53,87,.10);
}
textarea.form-control { height: auto; padding-top: var(--sp-2); padding-bottom: var(--sp-2); }

.form-control-sm, .form-select-sm {
  height: var(--input-h-sm);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--tx-primary);
  margin-bottom: var(--sp-1);
}
.form-text  { font-size: var(--text-xs); color: var(--tx-muted); }

/* ═══════════════════════════════════════════════════════════
   3. BOTÕES — 3 TAMANHOS CANÔNICOS
   ═══════════════════════════════════════════════════════════
   .btn-xs  →  ações inline de tabela  (h=26px, txt=11px)
   .btn-sm  →  toolbar / filtros       (h=32px, txt=12px)  [Bootstrap padrão ajustado]
   .btn-md  →  formulários, CTAs       (h=36px, txt=13px)  [novo padrão]
   ─────────────────────────────────────────────────────────── */
.btn { border-radius: var(--radius-md); font-weight: 500; transition: .15s; }

/* xs — tabelas */
.btn-xs {
  height: 26px;
  padding: 0 var(--sp-2);
  font-size: var(--text-xs);
  line-height: 26px;
  border-radius: var(--radius-sm);
}

/* sm — toolbar padrão (sobrescreve Bootstrap) */
.btn-sm {
  height: 32px;
  padding: 0 var(--sp-3);
  font-size: var(--text-sm);
  line-height: 32px;
}

/* md — formulários / ações primárias */
.btn-md {
  height: 36px;
  padding: 0 var(--sp-4);
  font-size: var(--text-base);
  line-height: 36px;
}

/* Cores de marca */
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-mid); border-color: var(--brand-mid); color: #fff; }
.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover { background: var(--brand); color: #fff; }

/* Dark-mode overrides */
[data-theme="dark"] .btn-outline-primary  { color: #93C5FD; border-color: #457B9D; }
[data-theme="dark"] .btn-outline-primary:hover { background: #457B9D; color: #fff; }
[data-theme="dark"] .btn-outline-secondary { color: var(--tx-secondary); border-color: var(--border); }
[data-theme="dark"] .btn-outline-secondary:hover { background: var(--bg-hover); color: var(--tx-primary); }
[data-theme="dark"] .btn-outline-danger    { color: #F87171; border-color: #7F1D1D; }
[data-theme="dark"] .btn-outline-danger:hover { background: #7F1D1D; color: #fff; }
[data-theme="dark"] .btn-outline-warning   { color: #FDE68A; border-color: #92400E; }
[data-theme="dark"] .btn-outline-warning:hover { background: #92400E; color: #fff; }

/* ═══════════════════════════════════════════════════════════
   4. BADGES / TAGS SEMÂNTICOS (classe .ht-badge)
   ═══════════════════════════════════════════════════════════
   Substituem o mix atual de estilos inline + bootstrap.badge
   ─────────────────────────────────────────────────────────── */
.ht-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* Estados canônicos — use APENAS estes */
.ht-badge-success  { background: var(--sem-success-bg); color: var(--sem-success-tx); border-color: var(--sem-success-bdr); }
.ht-badge-warn     { background: var(--sem-warn-bg);    color: var(--sem-warn-tx);    border-color: var(--sem-warn-bdr); }
.ht-badge-danger   { background: var(--sem-danger-bg);  color: var(--sem-danger-tx);  border-color: var(--sem-danger-bdr); }
.ht-badge-info     { background: var(--sem-info-bg);    color: var(--sem-info-tx);    border-color: var(--sem-info-bdr); }
.ht-badge-neutral  { background: var(--sem-neutral-bg); color: var(--sem-neutral-tx); border-color: var(--sem-neutral-bdr); }

/* Mapeamento de status de chamado → .ht-badge-* */
/* Aberto       → info    */
/* Em Andamento → warn    */
/* Pendente     → danger  */
/* Concluído    → success */

/* Mapeamento de status de ativo → .ht-badge-* */
/* Em Uso       → success  */
/* Disponível   → info     */
/* Em Manutenção→ warn     */
/* Descartado   → neutral  */

/* — Aliases de compatibilidade (legado → novo sistema) — */
.badge-aberto     { background: var(--sem-info-bg);    color: var(--sem-info-tx);    border: 1px solid var(--sem-info-bdr); }
.badge-andamento  { background: var(--sem-warn-bg);    color: var(--sem-warn-tx);    border: 1px solid var(--sem-warn-bdr); }
.badge-pendente   { background: var(--sem-danger-bg);  color: var(--sem-danger-tx);  border: 1px solid var(--sem-danger-bdr); }
.badge-concluido  { background: var(--sem-success-bg); color: var(--sem-success-tx); border: 1px solid var(--sem-success-bdr); }
.badge-nivel-baixa{ background: var(--sem-success-bg); color: var(--sem-success-tx); border: 1px solid var(--sem-success-bdr); }
.badge-nivel-media{ background: var(--sem-warn-bg);    color: var(--sem-warn-tx);    border: 1px solid var(--sem-warn-bdr); }
.badge-nivel-alta { background: var(--sem-danger-bg);  color: var(--sem-danger-tx);  border: 1px solid var(--sem-danger-bdr); }

/* Todos os badges de status têm o mesmo tamanho/peso — Bootstrap sobrescrito */
.badge {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}

/* ═══════════════════════════════════════════════════════════
   5. TABELAS (padrão HelpTI)
   ═══════════════════════════════════════════════════════════
   Regra canônica de alinhamento:
     • Texto descritivo  → text-start (padrão — não marcar)
     • Números / datas   → .ht-col-num
     • Ações             → .ht-col-act  (sempre last-child)
   ─────────────────────────────────────────────────────────── */
.ht-table { font-size: var(--text-base); border-collapse: collapse; width: 100%; }
.ht-table th {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--table-th-tx);
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--table-th-bg);
  border-bottom: 2px solid var(--border);
  padding: var(--sp-2) var(--sp-3);
  white-space: nowrap;
  vertical-align: middle;
}
.ht-table td {
  padding: var(--sp-2) var(--sp-3);
  vertical-align: middle;
  border-bottom: 1px solid var(--border-light);
  color: var(--tx-primary);
}
.ht-table tbody tr:hover td { background: var(--bg-hover); }

/* Alinhamentos canônicos */
.ht-col-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.ht-col-act { text-align: right !important; white-space: nowrap; width: 1%; }
.ht-col-ctr { text-align: center !important; }

/* Dark mode table */
[data-theme="dark"] .ht-table th { background: var(--table-th-bg); color: var(--table-th-tx); }
[data-theme="dark"] .ht-table td { color: var(--tx-primary); border-color: var(--border-light); }
[data-theme="dark"] .ht-table tbody tr:hover td { background: var(--bg-hover); }

/* ═══════════════════════════════════════════════════════════
   6. CARDS
   ═══════════════════════════════════════════════════════════ */
.card {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: var(--bg-surface);
}
.card-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-md);
  font-weight: 600;
  padding: var(--sp-3) var(--sp-4);
  color: var(--tx-primary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card-body   { color: var(--tx-primary); padding: var(--sp-4); }
.card-footer {
  background: var(--bg-surface) !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: var(--sp-3) var(--sp-4);
}

/* Cabeçalhos coloridos por severidade */
.card-header-danger  { background: var(--sem-danger-bg);  color: var(--sem-danger-tx); }
.card-header-warn    { background: var(--sem-warn-bg);    color: var(--sem-warn-tx);   }
.card-header-success { background: var(--sem-success-bg); color: var(--sem-success-tx);}
.card-header-info    { background: var(--sem-info-bg);    color: var(--sem-info-tx);   }

/* Alias legado */
.card-header-warning { background: var(--sem-warn-bg); color: var(--sem-warn-tx); }

/* ═══════════════════════════════════════════════════════════
   7. STAT CARDS (dashboard, métricas rápidas)
   ═══════════════════════════════════════════════════════════ */
.stat-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, transform .15s;
}
a.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-num   { font-size: var(--text-2xl); font-weight: 700; line-height: 1; }
.stat-label { font-size: var(--text-xs); color: var(--tx-muted); margin-top: var(--sp-1); }

/* ═══════════════════════════════════════════════════════════
   8. ESTADO VAZIO (empty-state)
   ═══════════════════════════════════════════════════════════ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-4);
  color: var(--tx-faint);
  text-align: center;
}
.empty-state i {
  font-size: 36px;
  opacity: .35;
  display: block;
}
.empty-state p {
  font-size: var(--text-base);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   9. LABELS DE FORMULÁRIO — PADRÃO GLOBAL
   ═══════════════════════════════════════════════════════════
   Elimina os style="font-size:13px" inline espalhados nos templates
   ─────────────────────────────────────────────────────────── */
.form-label.ht-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--tx-primary);
}
/* Asterisco obrigatório */
.ht-required::after { content: ' *'; color: var(--sem-danger-tx); }

/* ═══════════════════════════════════════════════════════════
   10. CABEÇALHO DE PÁGINA — page-header padronizado
   ═══════════════════════════════════════════════════════════ */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.page-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--tx-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.page-title i { color: var(--brand); }
.page-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════
   11. FILTROS DE TABELA — toolbar-filter padronizado
   ═══════════════════════════════════════════════════════════ */
.ht-filters {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface-alt);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.ht-filters .form-control,
.ht-filters .form-select { height: var(--input-h-sm); font-size: var(--text-sm); }

/* ═══════════════════════════════════════════════════════════
   12. PAGINAÇÃO
   ═══════════════════════════════════════════════════════════ */
.pagination { justify-content: flex-end !important; margin-bottom: 0; }
.page-link  {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--brand) !important;
  font-size: var(--text-sm);
  padding: var(--sp-1) var(--sp-2);
}
.page-link:hover  { background: var(--bg-hover) !important; }
.page-item.active .page-link {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  box-shadow: none;
}
.page-item.disabled .page-link { background: var(--bg-surface-alt) !important; color: var(--tx-faint) !important; }

/* ═══════════════════════════════════════════════════════════
   13. MODAIS
   ═══════════════════════════════════════════════════════════ */
.modal-content {
  background: var(--bg-surface);
  color: var(--tx-primary);
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.modal-header { border-color: var(--border); padding: var(--sp-4) var(--sp-5); }
.modal-footer { border-color: var(--border); padding: var(--sp-3) var(--sp-5); }
.modal-body   { padding: var(--sp-4) var(--sp-5); }
.modal-title  { font-size: var(--text-lg); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   14. UPLOAD / DROP ZONE
   ═══════════════════════════════════════════════════════════ */
.drop-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-5) var(--sp-4);
  cursor: pointer;
  transition: .15s;
  text-align: center;
  background: var(--bg-surface-alt);
}
.drop-zone:hover { border-color: var(--brand-mid); }
.drop-zone i { font-size: 24px; color: var(--tx-faint); display: block; margin-bottom: var(--sp-1); }
.drop-zone-label { font-size: var(--text-base); color: var(--tx-muted); }
.drop-zone-hint  { font-size: var(--text-xs); color: var(--tx-faint); }

/* ═══════════════════════════════════════════════════════════
   15. UTILITÁRIOS GERAIS
   ═══════════════════════════════════════════════════════════ */
.text-primary  { color: var(--brand) !important; }
.bg-primary    { background-color: var(--brand) !important; }
.text-muted    { color: var(--tx-muted) !important; }
.border        { border-color: var(--border) !important; }
.border-bottom { border-color: var(--border) !important; }
hr             { border-color: var(--border); }

/* Rótulo de seção no nav */
.section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--tx-nav);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Texto semântico */
.tx-success { color: var(--sem-success-tx) !important; }
.tx-warn    { color: var(--sem-warn-tx)    !important; }
.tx-danger  { color: var(--sem-danger-tx)  !important; }
.tx-info    { color: var(--sem-info-tx)    !important; }
/* Alias legado */
.tx-warning { color: var(--sem-warn-tx) !important; }

/* Fundo semântico */
.bg-success-soft { background: var(--sem-success-bg) !important; }
.bg-warn-soft    { background: var(--sem-warn-bg)    !important; }
.bg-danger-soft  { background: var(--sem-danger-bg)  !important; }
.bg-info-soft    { background: var(--sem-info-bg)    !important; }

/* Botão de copiar inline */
.btn-copy {
  background: none;
  border: none;
  padding: 0 var(--sp-1);
  color: var(--tx-faint);
  cursor: pointer;
  font-size: var(--text-xs);
  vertical-align: middle;
  transition: .15s;
}
.btn-copy:hover  { color: var(--brand); }
.btn-copy.copiado{ color: #22C55E; }

/* Linha clicável (tr[data-href]) */
tr[data-href]        { cursor: pointer; }
tr[data-href]:hover td { background: var(--bg-hover); }

/* field-label (chamado.php) */
.field-label {
  font-size: var(--text-xs);
  color: var(--tx-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Toast */
.toast-container-fixed {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}
.toast-container-fixed .toast {
  pointer-events: all;
  min-width: 300px;
  max-width: 420px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: none;
  font-size: var(--text-base);
}

/* Datas de vencimento */
.venc-vencido { font-size: var(--text-xs); color: var(--sem-danger-tx); margin-top: 2px; }
.venc-alerta  { font-size: var(--text-xs); color: var(--sem-warn-tx);   margin-top: 2px; }
.venc-ok      { font-size: var(--text-xs); color: var(--tx-muted);      margin-top: 2px; }

.linha-vencida { background: var(--sem-danger-bg); }
.linha-alerta  { background: var(--sem-warn-bg); }
[data-theme="dark"] .linha-vencida { background: #2A1A1A !important; }
[data-theme="dark"] .linha-alerta  { background: #27200E !important; }

/* code inline */
code {
  background: var(--bg-surface-alt);
  color: var(--sem-info-tx);
  padding: .1em .4em;
  border-radius: var(--radius-sm);
  font-size: .85em;
}
[data-theme="dark"] code { background: #263347; color: #7DD3FC; }