/* ============================================================
   safe-theme.css — Design System SAFE Escola de Aviação
   SAFE Hub
   ============================================================ */

/* Fonte única do Hub. A Escala CCO e a Escala PAV carregavam esse mesmo
   par por um <link> próprio, com outros pesos, e por isso pesavam
   diferente das demais telas. Os pesos 800/900 de Montserrat entraram
   aqui para que as duas passem a se servir daqui, sem link duplicado. */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700;800;900&family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

/* ── Variáveis ─────────────────────────────────────────────── */
:root {
  /* Cores SAFE */
  --navy:        #1D2951;
  --navy-deep:   #141d3a;
  --navy-light:  #253463;
  --blue:        #5BAEE2;
  --blue-light:  #7ec3ea;
  --blue-dark:   #3d8cc4;
  --teal:        #60C0BF;
  --teal-light:  #80d4d3;
  --teal-dark:   #44a8a7;
  --mid-blue:    #80B8B8;

  /* Neutros */
  --white:       #FFFFFF;
  --off-white:   #F4F7FC;
  --gray-100:    #EEF2F8;
  --gray-200:    #DDE4EF;
  --gray-300:    #BCC8DC;
  --gray-400:    #8EA4C0;
  --gray-500:    #5E7A9A;
  --gray-600:    #3E5475;
  --black:       #000000;

  /* Semânticas */
  --success:     #2ECC71;
  --warning:     #F39C12;
  --danger:      #E74C3C;
  --info:        var(--blue);

  /* Sidebar */
  --sidebar-w:        240px;
  --sidebar-w-collapsed: 68px;

  /* Layout */
  --topbar-h:    64px;
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;

  /* Sombras */
  --shadow-sm:   0 1px 4px rgba(29,41,81,.08);
  --shadow-md:   0 4px 16px rgba(29,41,81,.12);
  --shadow-lg:   0 8px 32px rgba(29,41,81,.18);
  --shadow-card: 0 2px 12px rgba(29,41,81,.10);

  /* Tipografia */
  --font-title:  'Raleway', sans-serif;
  --font-body:   'Montserrat', sans-serif;

  /* Transições */
  --transition:  all .2s cubic-bezier(.4,0,.2,1);
}

/* ── Camada semântica ──────────────────────────────────────────
   As variáveis acima são a PALETA: nomes de cor, valor fixo, iguais
   nos dois modos. As de baixo são o PAPEL que a cor cumpre na tela,
   e só elas mudam entre claro e escuro.

   Regra ao escrever CSS novo: componente usa papel, nunca paleta.
   `background: var(--surface)`, não `var(--white)`. A paleta continua
   válida para o que é marca de verdade e não deve inverter: o azul de
   um botão primário, o verde de sucesso, o vermelho de erro.

   Os dois tokens que mais enganam:
   `--navy` era cor de texto em 71 lugares e fundo de marca em 17. Como
   texto virou `--text`, como fundo virou `--brand-surface`. `--white`
   era fundo em 41 e texto sobre marca em 39: viraram `--surface` e
   `--text-on-brand`. Se você escrever `--navy` num texto novo, ele fica
   ilegível no escuro, e só no escuro, que é o jeito mais fácil de o
   erro passar despercebido. */
:root {
  color-scheme: light;

  --bg:            var(--off-white);
  --surface:       var(--white);
  --surface-2:     var(--gray-100);
  --surface-3:     var(--gray-200);
  --surface-sunken: var(--gray-100);

  --text:          var(--navy);
  --text-2:        var(--gray-600);
  --text-muted:    var(--gray-400);
  --text-subtle:   var(--gray-300);
  --text-on-brand: var(--white);

  --border:        var(--gray-200);
  --border-strong: var(--gray-300);

  --brand-surface:       var(--navy);
  --brand-surface-hover: var(--navy-light);

  /* Blocos de estado (aprovado / erro / aviso / info). O padrão antigo era
     um par de hex do Tailwind escrito à mão em cada página, tipo fundo
     `#f0fdf4` com texto `#166534`, repetido em seis arquivos. O fundo em
     rgba funciona nos dois modos porque é translúcido: assenta sobre a
     superfície de baixo em vez de impor a sua. Só a tinta precisa virar. */
  --tint-ok:     rgba(46,204,113,.12);
  --tint-erro:   rgba(231,76,60,.10);
  --tint-aviso:  rgba(243,156,18,.12);
  --tint-info:   rgba(91,174,226,.12);
  --ink-ok:      #166534;
  --ink-erro:    #991b1b;
  --ink-aviso:   #92400e;
  --ink-info:    #245f8c;

  /* Azul e verde da marca usados como TEXTO. No claro sao exatamente os
     mesmos tons de antes, entao nada muda; no escuro clareiam. Sem isto,
     `--blue-dark` sobre superficie escura fica em ~3,7:1 e nao passa no
     AA. Mesmo problema de duplo uso do `--navy`: como fundo continua
     `--blue-dark`, como tinta usa estes. */
  --ink-blue:    var(--blue-dark);
  --ink-teal:    var(--teal-dark);
}

/* Claro é o padrão do Hub e não segue o sistema operacional: só entra no
   escuro quem pedir pelo menu do usuário. Por isso não existe bloco
   `@media (prefers-color-scheme: dark)` aqui, e não deve passar a existir.
   Quem carimba o atributo é a guarda anti-flash no <head> de cada página,
   antes da primeira pintura. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0b1120;
  --surface:       #141d33;
  --surface-2:     #1c2745;
  --surface-3:     #26345c;
  --surface-sunken: #0e1628;

  --text:          #eaf0fb;
  --text-2:        #c2cee6;
  --text-muted:    #8fa1c2;
  --text-subtle:   #6d7fa3;
  --text-on-brand: #ffffff;

  --border:        #273354;
  --border-strong: #37456d;

  /* Um navy mais claro que o da paleta: o #1D2951 original quase some
     contra o fundo #0b1120 e os blocos de marca perdiam o contorno. */
  --brand-surface:       #243766;
  --brand-surface-hover: #2e457c;

  /* As sombras da paleta são rgba de navy, que no escuro não aparece.
     Trocadas por preto, com mais opacidade para compensar. */
  --shadow-sm:   0 1px 4px rgba(0,0,0,.35);
  --shadow-md:   0 4px 16px rgba(0,0,0,.45);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.55);
  --shadow-card: 0 2px 12px rgba(0,0,0,.40);

  /* Semânticas ganham versão mais clara: o verde e o vermelho da paleta
     foram escolhidos contra fundo branco e no escuro ficam abafados. */
  --success:     #3ddc84;
  --warning:     #f5b445;
  --danger:      #ff6b5b;

  /* Os fundos sobem um pouco (translúcido sobre escuro rende menos) e a
     tinta inverte: os verdes/vermelhos escuros do modo claro somem aqui. */
  --tint-ok:     rgba(61,220,132,.16);
  --tint-erro:   rgba(255,107,91,.16);
  --tint-aviso:  rgba(245,180,69,.16);
  --tint-info:   rgba(91,174,226,.18);
  --ink-ok:      #6ee7a4;
  --ink-erro:    #ff9d92;
  --ink-aviso:   #f7c777;
  --ink-info:    #8fc7ee;
  --ink-blue:    var(--blue-light);
  --ink-teal:    var(--teal-light);
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ⚠️ Zoom automático em celular: o Safari do iPhone AMPLIA a página inteira ao
   focar um campo cujo font-size seja MENOR que 16px. O tema nunca definiu
   tamanho para campo, então cada página escolheu o seu, e medido em 2026-07-28
   havia 78 campos abaixo de 16px em 11 telas, o login incluído (15,2px): na
   prática, todo formulário do Hub dava esse solavanco no iPhone.

   `pointer: coarse` restringe a regra a dispositivo de toque, então o desktop
   fica intocado e nenhuma tela muda no computador. O `!important` é necessário
   e proposital: as regras de página são mais específicas (`.notam-busca input`
   vale 0,1,1 contra 0,0,1 daqui) e venceriam. Não é um ajuste estético, é o
   que impede a tela de saltar quando a pessoa vai digitar.

   A saída ERRADA para isto seria `maximum-scale=1` ou `user-scalable=no` no
   viewport: resolve o solavanco impedindo QUALQUER zoom, inclusive o que a
   pessoa dá de propósito para enxergar. Foi justamente o que a auditoria de
   2026-07-26 removeu da Escala CCO e da PAV. Não reintroduza. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea { font-size: 16px !important; }
}

/* ── Tipografia ────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }

.text-sm    { font-size: .85rem; }
.text-xs    { font-size: .75rem; }
.text-muted { color: var(--text-muted); }
.text-white { color: var(--text-on-brand); }
.text-blue  { color: var(--blue); }
.text-teal  { color: var(--teal); }
.fw-600     { font-weight: 600; }
.fw-700     { font-weight: 700; }

/* ── Botões ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 600;
  transition: var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--blue);
  color: var(--text-on-brand);
}
.btn-primary:hover {
  background: var(--blue-dark);
  box-shadow: 0 4px 12px rgba(91,174,226,.35);
  transform: translateY(-1px);
}

.btn-navy {
  background: var(--brand-surface);
  color: var(--text-on-brand);
}
.btn-navy:hover {
  background: var(--navy-deep);
  transform: translateY(-1px);
}

.btn-teal {
  background: var(--teal);
  color: var(--text-on-brand);
}
.btn-teal:hover {
  background: var(--teal-dark);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

.btn-danger {
  background: var(--danger);
  color: var(--text-on-brand);
}
.btn-danger:hover { background: #c0392b; }

.btn-sm { padding: 7px 14px; font-size: .8rem; }
.btn-lg { padding: 13px 28px; font-size: 1rem; }
.btn-icon { padding: 9px; border-radius: var(--radius-sm); }

.btn:disabled {
  opacity: .5;
  pointer-events: none;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.card-title {
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

/* KPI Card */
.kpi-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
}
.kpi-label {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.kpi-value {
  font-family: var(--font-title);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.kpi-sub {
  font-size: .78rem;
  color: var(--text-muted);
}
.kpi-icon {
  position: absolute;
  top: 20px; right: 20px;
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.kpi-icon.blue  { background: rgba(91,174,226,.12); color: var(--blue); }
.kpi-icon.teal  { background: rgba(96,192,191,.12); color: var(--teal); }
.kpi-icon.navy  { background: rgba(29,41,81,.08);   color: var(--text); }
.kpi-icon.green { background: rgba(46,204,113,.12); color: var(--success); }

/* ── Formulários ───────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.form-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.form-control {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  color: var(--text);
  background: var(--surface);
  transition: var(--transition);
  outline: none;
}
.form-control:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(91,174,226,.15);
}
.form-control::placeholder { color: var(--text-subtle); }
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 16px;
}

/* ── Tabelas ───────────────────────────────────────────────── */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-md);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.table thead th {
  background: var(--brand-surface);
  color: var(--text-on-brand);
  font-family: var(--font-title);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 12px 16px;
  text-align: left;
  white-space: nowrap;
}
.table thead th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.table thead th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }
.table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}
.table tbody tr:hover { background: var(--bg); }
.table tbody td {
  padding: 12px 16px;
  color: var(--text);
  vertical-align: middle;
}
.table tbody tr:last-child { border-bottom: none; }

/* ── Badges ────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.badge-blue   { background: rgba(91,174,226,.12);  color: var(--ink-blue); }
.badge-teal   { background: rgba(96,192,191,.12);  color: var(--ink-teal); }
.badge-navy   { background: rgba(29,41,81,.08);    color: var(--text); }
.badge-green  { background: rgba(46,204,113,.12);  color: #27ae60; }
.badge-orange { background: rgba(243,156,18,.12);  color: #d68910; }
.badge-red    { background: rgba(231,76,60,.12);   color: #c0392b; }

/* ── Modal ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14,20,40,.55);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(20px) scale(.97);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal-header {
  padding: 24px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-body    { padding: 20px 24px; }
/* `flex-wrap` porque em tela de 360px um par como "Voltar" + "Confirmar
   salvamento" (fechamento-horas) estoura os ~240px úteis do rodapé e os botões
   se espremem um sobre o outro. */
.modal-footer  { padding: 0 24px 24px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.modal-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: var(--transition);
}
.modal-close:hover { background: var(--surface-2); color: var(--text); }

/* ── Toast / Alertas ───────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  max-width: 380px;
  font-size: .875rem;
  font-weight: 500;
  animation: toastIn .3s cubic-bezier(.4,0,.2,1);
  border-left: 4px solid var(--blue);
}
.toast.success { border-color: var(--success); }
.toast.error   { border-color: var(--danger); }
.toast.warning { border-color: var(--warning); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* No celular o toast tinha `min-width: 280px` preso à direita, sem limite à
   esquerda: em tela estreita ele encosta na borda e a mensagem longa fica
   apertada. A Escala CCO já resolvia isso no CSS dela; aqui é o mesmo ajuste
   para o resto do Hub. */
@media (max-width: 480px) {
  .toast-container { left: 16px; right: 16px; bottom: 16px; }
  .toast { min-width: 0; max-width: none; }
}

/* ── Loading ───────────────────────────────────────────────── */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: var(--surface);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.spinner.dark {
  border-color: rgba(29,41,81,.15);
  border-top-color: var(--brand-surface);
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  z-index: 10;
}

/* ── Utilitários ───────────────────────────────────────────── */
.d-flex  { display: flex; }
.d-none  { display: none !important; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8   { gap: 8px; }
.gap-12  { gap: 12px; }
.gap-16  { gap: 16px; }
.mt-4    { margin-top: 4px; }
.mt-8    { margin-top: 8px; }
.mt-16   { margin-top: 16px; }
.mt-24   { margin-top: 24px; }
.mb-16   { margin-bottom: 16px; }
.mb-24   { margin-bottom: 24px; }
.w-100   { width: 100%; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.cursor-pointer { cursor: pointer; }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}
.empty-state .icon {
  font-size: 3rem;
  margin-bottom: 12px;
  opacity: .4;
}
.empty-state p { font-size: .9rem; }

/* Divider */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

/* Scrollbar customizada */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Garante que nada vaze */
*, *::before, *::after { box-sizing: border-box; }

/* ============================================================
   Tabela — estratégia única, zoom-safe
   Sem table-layout: fixed. Colunas fluem pelo conteúdo.
   Colunas desnecessárias somem progressivamente.
   ============================================================ */

.table-wrapper {
  overflow-x: auto;
  width: 100%;
  border-radius: var(--radius-md);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  table-layout: auto; /* deixa o browser calcular — zoom-safe */
}

.table thead th {
  white-space: nowrap;
  padding: 12px 14px;
}

.table tbody td {
  padding: 12px 14px;
  vertical-align: middle;
  white-space: nowrap;
}

/* Cliente e curso podem quebrar linha se precisar */
.table tbody td:nth-child(3),
.table tbody td.col-curso {
  white-space: normal;
  word-break: break-word;
}

/* Breakpoints: colunas somem progressivamente */
@media (max-width: 1100px) { .col-origem  { display: none !important; } }
@media (max-width:  860px) { .col-lead    { display: none !important; } }
@media (max-width:  680px) { .col-pac     { display: none !important; } }
@media (max-width:  500px) { .col-curso   { display: none !important; } }

/* ── Ajustes de componente no escuro ───────────────────────────
   Tudo que a camada semântica não resolve sozinha mora AQUI, num
   bloco só, para não voltar a espalhar seletor de tema por 18
   arquivos como era antes de 2026-07-27.

   O que não se resolve por token: tint de cor de marca escrito em
   `rgba(...)` cru. Uma pastilha `rgba(91,174,226,.12)` foi calibrada
   contra branco; sobre `--surface` escuro ela some, e o texto, que é
   a variante ESCURA da cor, fica ilegível. A correção é sempre a
   mesma dupla: sobe a opacidade do fundo e troca o texto pela
   variante CLARA da mesma cor. */

/* Pastilhas de status */
:root[data-theme="dark"] .badge-blue   { background: rgba(91,174,226,.20); color: var(--blue-light); }
:root[data-theme="dark"] .badge-teal   { background: rgba(96,192,191,.20); color: var(--teal-light); }
:root[data-theme="dark"] .badge-navy   { background: rgba(255,255,255,.10); color: var(--text-2); }
:root[data-theme="dark"] .badge-green  { background: rgba(61,220,132,.18);  color: #6ee7a4; }
:root[data-theme="dark"] .badge-orange { background: rgba(245,180,69,.18);  color: #f7c777; }
:root[data-theme="dark"] .badge-red    { background: rgba(255,107,91,.18);  color: #ff9d92; }

/* Ícones de KPI */
:root[data-theme="dark"] .kpi-icon.blue  { background: rgba(91,174,226,.20); }
:root[data-theme="dark"] .kpi-icon.teal  { background: rgba(96,192,191,.20); }
:root[data-theme="dark"] .kpi-icon.navy  { background: rgba(255,255,255,.10); }
:root[data-theme="dark"] .kpi-icon.green { background: rgba(61,220,132,.18); }

/* O spinner escuro nasceu para girar sobre fundo claro. No modo escuro
   o nome engana: quem precisa de aro claro é ele. */
:root[data-theme="dark"] .spinner.dark {
  border-color: rgba(255,255,255,.18);
  border-top-color: var(--text);
}

/* Cor de seleção de texto: a padrão do navegador assume fundo claro. */
:root[data-theme="dark"] ::selection { background: rgba(91,174,226,.32); color: var(--text); }