/* ==========================================================================
   LifeOS — design system
   Metáfora: placa de circuito à noite. Superfícies são máscara de solda,
   ações são pads dourados, divisórias são trilhas. Cantos chanfrados, não arredondados.
   Tipografia: B612 (fonte de cockpit da Airbus) no corpo; Chakra Petch nos títulos.
   ========================================================================== */

@font-face { font-family: "B612"; src: url("../fonts/b612-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "B612"; src: url("../fonts/b612-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("../fonts/chakra-petch-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("../fonts/chakra-petch-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* Cores */
  --mask: #0B1A16;          /* fundo: máscara de solda */
  --mask-alto: #10241E;     /* superfícies */
  --mask-mais: #163029;     /* campos, superfícies internas */
  --trilha: #24443A;        /* divisórias (decorativas) */
  --trilha-forte: #427A69;  /* contorno de campos (contraste 3:1) */
  --silk: #E8EEE6;          /* texto principal: serigrafia */
  --silk-2: #A7BBB2;        /* texto secundário */
  --silk-3: #7A9087;        /* texto terciário */
  --pad: #E7B54E;           /* dourado dos pads: ação principal */
  --pad-claro: #F2CC78;
  --pad-fundo: #2A2412;
  --led: #62C9F5;           /* links e informação */
  --falha: #FF7A6B;         /* erros, despesas */
  --ok: #7ED9A6;            /* sucesso, receitas */

  /* Tipografia (escala clássica: 13, 14, 16, 18, 21, 24, 36, 60) */
  --fonte: "B612", "Segoe UI", system-ui, sans-serif;
  --fonte-titulo: "Chakra Petch", "B612", system-ui, sans-serif;
  --t-xs: 0.8125rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.125rem;
  --t-lg: 1.3125rem;
  --t-xl: 1.5rem;
  --t-2xl: 2.25rem;

  /* Espaço e forma */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
  --chanfro: 12px;
  --chanfro-p: 7px;
  --largura: 640px;
  --nav-altura: 64px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--mask);
  color: var(--silk);
  font-family: var(--fonte);
  font-size: var(--t-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  letter-spacing: 0.01em;
}
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }

p { margin: 0 0 var(--e3); }
p:last-child { margin-bottom: 0; }

a { color: var(--led); text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--pad);
  outline-offset: 2px;
}

::selection { background: var(--pad); color: var(--mask); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.ico { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------------------
   Estrutura
   -------------------------------------------------------------------------- */

.app { padding-bottom: calc(var(--nav-altura) + env(safe-area-inset-bottom) + var(--e4)); }

.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 56px;
  padding: calc(env(safe-area-inset-top) + var(--e2)) var(--e4) var(--e2);
  background: rgba(11, 26, 22, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trilha);
}
.topo-titulo { flex: 1; min-width: 0; font-size: var(--t-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-voltar, .topo-acao {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: -4px; color: var(--silk-2);
}
.topo-marca { display: inline-flex; align-items: center; gap: var(--e2); color: var(--silk); text-decoration: none; }
.topo-marca svg { width: 26px; height: 26px; }

.pagina {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: var(--e4);
}

.secao { margin-top: var(--e6); }
.secao:first-child { margin-top: 0; }
.secao-cabeca {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3);
  margin-bottom: var(--e3);
}
.secao-cabeca h2 { font-size: var(--t-md); }
.secao-cabeca a { font-size: var(--t-sm); white-space: nowrap; }
.secao-intro { color: var(--silk-2); font-size: var(--t-sm); margin-top: calc(var(--e2) * -1); margin-bottom: var(--e3); }

/* Painel chanfrado: o canto superior direito cortado lembra a borda de uma placa. */
.painel {
  background: var(--mask-alto);
  padding: var(--e4);
  clip-path: polygon(0 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro), 100% 100%, 0 100%);
}
.painel + .painel { margin-top: var(--e3); }
.painel--pad { background: linear-gradient(90deg, var(--pad) 0 3px, var(--mask-alto) 3px); }

/* --------------------------------------------------------------------------
   Navegação inferior
   -------------------------------------------------------------------------- */

.nav-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  height: calc(var(--nav-altura) + env(safe-area-inset-bottom));
  padding: 0 var(--e2) env(safe-area-inset-bottom);
  background: var(--mask);
  border-top: 1px solid var(--trilha);
}
.nav-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: var(--nav-altura);
  color: var(--silk-3);
  font-size: 0.6875rem;
  text-decoration: none;
}
.nav-item.ativo { color: var(--silk); }
.nav-item.ativo::before {
  content: ""; position: absolute; top: 6px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--pad); box-shadow: 0 0 8px rgba(231, 181, 78, 0.8);
}
.nav-capturar { justify-content: flex-start; }
.nav-capturar .nav-pad {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-top: -14px;
  background: var(--pad); color: var(--mask);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.nav-capturar .nav-pad .ico { width: 26px; height: 26px; stroke-width: 2.2; }

@media (min-width: 900px) {
  .nav-inferior { left: 50%; right: auto; width: var(--largura); transform: translateX(-50%); border-left: 1px solid var(--trilha); border-right: 1px solid var(--trilha); }
}

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 44px; padding: 10px 18px;
  border: 0; background: var(--pad); color: var(--mask);
  font-family: var(--fonte-titulo); font-size: var(--t-base); font-weight: 600; letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--chanfro-p)) 0, 100% var(--chanfro-p), 100% 100%, var(--chanfro-p) 100%, 0 calc(100% - var(--chanfro-p)));
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.botao:active { transform: translateY(1px); }
.botao .ico { width: 18px; height: 18px; stroke-width: 2; }

.botao--secundario { background: var(--mask-mais); color: var(--silk); box-shadow: inset 0 0 0 1px var(--trilha-forte); }
.botao--fantasma { background: transparent; color: var(--led); padding-left: var(--e2); padding-right: var(--e2); }
.botao--perigo { background: transparent; color: var(--falha); box-shadow: inset 0 0 0 1px rgba(255, 122, 107, 0.5); }
.botao--bloco { display: flex; width: 100%; }
.botao--pequeno { min-height: 36px; padding: 6px 12px; font-size: var(--t-sm); }

.acoes { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; margin-top: var(--e4); }
.acoes--fim { justify-content: flex-end; }
.acoes--espalhadas { justify-content: space-between; }

/* --------------------------------------------------------------------------
   Formulários
   -------------------------------------------------------------------------- */

.campo { display: block; margin-bottom: var(--e4); }
.rotulo { display: block; margin-bottom: 6px; font-size: var(--t-sm); color: var(--silk-2); }
.rotulo strong { color: var(--silk); font-weight: 700; }
.ajuda { display: block; margin-top: 6px; font-size: var(--t-xs); color: var(--silk-3); }

.entrada {
  display: block; width: 100%;
  min-height: 46px; padding: 11px 12px;
  background: var(--mask-mais); color: var(--silk);
  border: 1px solid var(--trilha-forte); border-radius: 2px;
  font-family: var(--fonte); font-size: var(--t-base); line-height: 1.45;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.entrada::placeholder { color: var(--silk-3); }
.entrada:focus { outline: none; border-color: var(--pad); box-shadow: 0 0 0 3px rgba(231, 181, 78, 0.18); }
textarea.entrada { min-height: 96px; resize: vertical; }
textarea.entrada--grande { min-height: 55vh; font-size: var(--t-sm); line-height: 1.6; }
select.entrada { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A7BBB2' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }

.caixa-marcar { display: flex; align-items: center; gap: var(--e3); min-height: 44px; cursor: pointer; color: var(--silk-2); font-size: var(--t-sm); }
.caixa-marcar input { width: 20px; height: 20px; accent-color: var(--pad); }

.linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }

/* Chips: escolhas rápidas com rádio (tipo de captura, energia) */
.chips { display: flex; flex-wrap: wrap; gap: var(--e2); border: 0; padding: 0; margin: 0 0 var(--e4); }
.chips legend { padding: 0; margin-bottom: 6px; font-size: var(--t-sm); color: var(--silk-2); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 40px; padding: 8px 14px;
  background: var(--mask-mais); color: var(--silk-2);
  box-shadow: inset 0 0 0 1px var(--trilha-forte);
  font-size: var(--t-sm); cursor: pointer; user-select: none;
}
.chip input:checked + span { background: var(--pad-fundo); color: var(--pad); box-shadow: inset 0 0 0 1px var(--pad); }
.chip input:focus-visible + span { outline: 2px solid var(--pad); outline-offset: 2px; }

/* Abas segmentadas (links) */
.abas { display: flex; gap: 2px; margin-bottom: var(--e4); background: var(--trilha); padding: 2px; }
.abas a {
  flex: 1; text-align: center; padding: 9px 6px; min-height: 40px;
  color: var(--silk-2); text-decoration: none; font-size: var(--t-sm); background: var(--mask);
}
.abas a.ativo { background: var(--mask-mais); color: var(--silk); box-shadow: inset 0 -2px 0 var(--pad); }

/* --------------------------------------------------------------------------
   Mensagens
   -------------------------------------------------------------------------- */

.flashes { display: grid; gap: var(--e2); margin-bottom: var(--e4); }
.flash {
  padding: var(--e3) var(--e4);
  background: var(--mask-alto); border-left: 3px solid var(--led);
  font-size: var(--t-sm);
}
.flash--sucesso { border-left-color: var(--ok); }
.flash--erro { border-left-color: var(--falha); }
.flash--aviso { border-left-color: var(--pad); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-altura) + env(safe-area-inset-bottom) + var(--e4)); z-index: 40;
  max-width: calc(100% - 32px); padding: var(--e3) var(--e4);
  background: var(--silk); color: var(--mask); font-size: var(--t-sm); font-weight: 700;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.visivel { opacity: 1; transform: translate(-50%, 0); }

.vazio { padding: var(--e5) var(--e4); text-align: left; color: var(--silk-2); background: var(--mask-alto); }
.vazio p { margin-bottom: var(--e3); }

/* --------------------------------------------------------------------------
   Listas
   -------------------------------------------------------------------------- */

.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { border-bottom: 1px solid var(--trilha); }
.lista > li:last-child { border-bottom: 0; }
.linha {
  display: flex; align-items: center; gap: var(--e3);
  min-height: 56px; padding: var(--e3) 0;
  color: inherit; text-decoration: none;
}
.linha-corpo { flex: 1; min-width: 0; }
.linha-titulo { display: block; color: var(--silk); overflow-wrap: anywhere; }
.linha-meta { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--silk-3); }
.linha-valor { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.linha-acoes { display: flex; gap: var(--e1); flex: none; }
.linha-acoes form { margin: 0; }

.botao-icone {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  background: transparent; border: 0; color: var(--silk-3); cursor: pointer;
}
.botao-icone .ico { width: 20px; height: 20px; }

.tag {
  display: inline-block; padding: 1px 7px; margin-right: 4px;
  font-size: 0.75rem; color: var(--silk-2); background: var(--mask-mais);
  box-shadow: inset 0 0 0 1px var(--trilha);
}
.tag--pad { color: var(--pad); box-shadow: inset 0 0 0 1px rgba(231, 181, 78, 0.45); background: var(--pad-fundo); }

/* --------------------------------------------------------------------------
   Início: anel do dia (reator)
   -------------------------------------------------------------------------- */

.saudacao { margin-bottom: var(--e4); }
.saudacao h1 { font-size: var(--t-xl); }
.saudacao p { color: var(--silk-2); font-size: var(--t-sm); margin-top: 4px; }

.reator { display: grid; justify-items: center; margin: var(--e2) 0 var(--e4); }
.reator svg { width: min(78vw, 280px); height: auto; overflow: visible; }
.reator .trilho { stroke: var(--trilha); stroke-width: 12; fill: none; }
.reator .carga { stroke: var(--pad); stroke-width: 12; fill: none; stroke-dasharray: 100 100; stroke-dashoffset: 0; filter: drop-shadow(0 0 5px rgba(231, 181, 78, 0.45)); }
.reator .tique { stroke: var(--trilha); stroke-width: 3; stroke-linecap: round; }
.reator .tique--feito { stroke: var(--pad); }
.reator .tique--hoje { stroke: var(--led); stroke-width: 4; }
.reator .tique--futuro { stroke: #183229; }
.reator .nucleo { fill: var(--mask-alto); }
.reator .nucleo-borda { fill: none; stroke: var(--trilha); stroke-width: 1; }
.reator .dia-num { font-family: var(--fonte-titulo); font-weight: 600; font-size: 60px; fill: var(--silk); }
.reator .dia-texto { font-family: var(--fonte); font-size: 13px; fill: var(--silk-2); }

@media (prefers-reduced-motion: no-preference) {
  .reator .carga { animation: carregar 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .reator .carga--2 { animation-delay: 0.12s; }
  .reator .carga--3 { animation-delay: 0.24s; }
  @keyframes carregar { from { stroke-dashoffset: 100; } }
}

.status-dia { list-style: none; margin: 0 0 var(--e5); padding: 0; display: grid; gap: 1px; background: var(--trilha); }
.status-dia a {
  display: flex; align-items: center; gap: var(--e3);
  min-height: 52px; padding: var(--e2) var(--e4);
  background: var(--mask-alto); color: var(--silk); text-decoration: none;
}
.status-dia .led { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--trilha-forte); }
.status-dia .led--ok { background: var(--pad); box-shadow: 0 0 8px rgba(231, 181, 78, 0.7); }
.status-dia .rotulo-status { flex: 1; }
.status-dia .valor-status { font-size: var(--t-sm); color: var(--silk-2); }
.status-dia .valor-status--acao { color: var(--pad); }

.captura-rapida { display: flex; gap: var(--e2); }
.captura-rapida .entrada { flex: 1; }
.captura-rapida .botao { flex: none; padding-left: 14px; padding-right: 14px; }

/* Grade de IAs */
.ia-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--e2); }
.ia-botao {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--e3);
  min-height: 92px; padding: var(--e3);
  background: var(--mask-alto); color: var(--silk); text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.ia-botao .sigla {
  display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--t-sm);
  color: var(--pad); box-shadow: inset 0 0 0 1px rgba(231, 181, 78, 0.5);
}
.ia-botao .nome { font-size: var(--t-sm); }
.ia-botao .dica { font-size: 0.6875rem; color: var(--silk-3); display: block; }

/* Pilares ativos */
.pilares { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* Foco da semana: lista numerada é prioridade, portanto ordem */
.foco { margin: 0; padding-left: 1.4em; }
.foco li { padding: 4px 0; }
.foco li::marker { color: var(--pad); font-family: var(--fonte-titulo); font-weight: 600; }

/* --------------------------------------------------------------------------
   Diário: linha do tempo com vias
   -------------------------------------------------------------------------- */

.mes-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); margin-bottom: var(--e4); }
.mes-nav h2 { font-size: var(--t-md); text-transform: none; }
.mes-nav a { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--silk-2); background: var(--mask-alto); }
.mes-nav .desativado { visibility: hidden; }

.constancia { display: flex; gap: var(--e4); margin-bottom: var(--e4); font-size: var(--t-sm); color: var(--silk-2); }
.constancia strong { color: var(--silk); font-family: var(--fonte-titulo); font-size: var(--t-lg); display: block; }

.trilha-dias { list-style: none; margin: 0; padding: 0; position: relative; }
.trilha-dias::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; background: var(--trilha); }
.dia { position: relative; padding-left: 40px; }
.dia > a { display: block; padding: var(--e3) 0; color: inherit; text-decoration: none; min-height: 48px; }
.via {
  position: absolute; left: 3px; top: 16px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--mask); box-shadow: inset 0 0 0 2px var(--trilha-forte);
}
.dia--feito .via { background: var(--pad); box-shadow: 0 0 0 4px var(--mask), 0 0 10px rgba(231, 181, 78, 0.5); }
.dia--feito .via::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--mask); }
.dia--hoje .via { box-shadow: inset 0 0 0 2px var(--led); }
.dia--hoje.dia--feito .via { box-shadow: 0 0 0 4px var(--mask), 0 0 12px rgba(98, 201, 245, 0.6); background: var(--led); }
.dia-data { display: block; font-family: var(--fonte-titulo); font-weight: 600; color: var(--silk); }
.dia-data small { font-family: var(--fonte); font-weight: 400; color: var(--silk-3); font-size: var(--t-xs); margin-left: 6px; }
.dia-resumo { display: block; margin-top: 2px; color: var(--silk-2); font-size: var(--t-sm); }
.dia--vazio .dia-resumo { color: var(--silk-3); }

.entrada-diario dt { font-size: var(--t-sm); color: var(--silk-2); margin-top: var(--e4); }
.entrada-diario dt:first-child { margin-top: 0; }
.entrada-diario dd { margin: 4px 0 0; }

/* --------------------------------------------------------------------------
   Finanças
   -------------------------------------------------------------------------- */

.fin-resumo { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--trilha); margin-bottom: var(--e5); }
.fin-resumo > div { background: var(--mask-alto); padding: var(--e3) var(--e4); }
.fin-resumo .rotulo-num { font-size: var(--t-xs); color: var(--silk-3); display: block; }
.fin-resumo .num { font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--t-lg); font-variant-numeric: tabular-nums; }
.fin-resumo .fin-saldo { grid-column: 1 / -1; }
.fin-resumo .fin-saldo .num { font-size: var(--t-2xl); }
.num--receita { color: var(--ok); }
.num--despesa, .num--negativo { color: var(--falha); }
.valor--receita { color: var(--ok); }
.valor--despesa { color: var(--silk); }

.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.barra-rotulo { display: flex; justify-content: space-between; gap: var(--e3); font-size: var(--t-sm); margin-bottom: 4px; }
.barra-rotulo span:last-child { font-variant-numeric: tabular-nums; color: var(--silk-2); }
.barra-trilho { height: 8px; background: var(--mask-mais); }
.barra-carga { height: 100%; width: var(--p, 0%); background: var(--pad); }

/* --------------------------------------------------------------------------
   Contexto Mestre e Markdown
   -------------------------------------------------------------------------- */

.markdown { overflow-wrap: anywhere; }
.markdown h2 { font-size: var(--t-lg); margin: var(--e5) 0 var(--e2); }
.markdown h3 { font-size: var(--t-md); margin: var(--e4) 0 var(--e2); }
.markdown h4 { font-size: var(--t-base); margin: var(--e4) 0 var(--e2); }
.markdown > :first-child { margin-top: 0; }
.markdown ul, .markdown ol { margin: 0 0 var(--e3); padding-left: 1.3em; }
.markdown li { margin: 3px 0; }
.markdown li::marker { color: var(--pad); }
.markdown blockquote { margin: 0 0 var(--e3); padding: var(--e2) var(--e3); border-left: 3px solid var(--trilha-forte); color: var(--silk-2); background: var(--mask-alto); }
.markdown code { font-size: 0.9em; padding: 1px 5px; background: var(--mask-mais); }
.markdown pre { padding: var(--e3); background: var(--mask-mais); overflow-x: auto; }
.markdown pre code { padding: 0; background: none; }
.markdown hr { border: 0; border-top: 1px solid var(--trilha); margin: var(--e5) 0; }

textarea.texto-pacote { font-size: var(--t-xs); line-height: 1.55; min-height: 40vh; }

.meta { font-size: var(--t-xs); color: var(--silk-3); }
.muted { color: var(--silk-2); }

.codigo-bloco {
  display: block; padding: var(--e3); background: var(--mask-mais); box-shadow: inset 0 0 0 1px var(--pad);
  color: var(--pad); font-size: var(--t-sm); overflow-wrap: anywhere; user-select: all;
}

/* --------------------------------------------------------------------------
   Menu "Mais"
   -------------------------------------------------------------------------- */

.menu-grupo + .menu-grupo { margin-top: var(--e5); }
.menu-grupo h2 { font-size: var(--t-sm); color: var(--silk-3); font-family: var(--fonte); font-weight: 400; margin-bottom: var(--e2); }
.menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--trilha); }
.menu a, .menu button {
  display: flex; align-items: center; gap: var(--e3); width: 100%;
  min-height: 56px; padding: var(--e2) var(--e4);
  background: var(--mask-alto); color: var(--silk); text-decoration: none; text-align: left;
  border: 0; font: inherit; cursor: pointer;
}
.menu .ico { color: var(--pad); }
.menu .menu-texto { flex: 1; }
.menu .menu-texto small { display: block; font-size: var(--t-xs); color: var(--silk-3); }
.menu form { margin: 0; }

/* --------------------------------------------------------------------------
   Páginas simples (login, instalador, erro)
   -------------------------------------------------------------------------- */

.corpo-simples { display: grid; place-items: start center; padding: max(env(safe-area-inset-top), 24px) var(--e4) var(--e6); }
.simples { width: 100%; max-width: 440px; }
.simples-marca { display: flex; align-items: center; gap: var(--e3); margin: var(--e6) 0 var(--e5); }
.simples-marca svg { width: 44px; height: 44px; }
.simples-marca span { font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--t-xl); }
.simples h1 { margin-bottom: var(--e2); }
.simples .intro { color: var(--silk-2); margin-bottom: var(--e5); }
.simples fieldset { border: 0; padding: 0; margin: 0 0 var(--e5); }
.simples legend { font-family: var(--fonte-titulo); font-weight: 600; font-size: var(--t-md); margin-bottom: var(--e3); padding: 0; }

.requisitos { list-style: none; margin: 0 0 var(--e5); padding: 0; }
.requisitos li { display: flex; gap: var(--e3); align-items: flex-start; padding: var(--e2) 0; border-bottom: 1px solid var(--trilha); font-size: var(--t-sm); }
.requisitos .marca-ok { color: var(--ok); }
.requisitos .marca-falha { color: var(--falha); }
.requisitos .marca-opcional { color: var(--pad); }
.requisitos small { display: block; color: var(--silk-3); }

.erro-pagina { max-width: 440px; margin: 20vh auto 0; padding: 0 var(--e4); }
.erro-codigo { font-family: var(--fonte-titulo); font-size: 60px; font-weight: 600; color: var(--pad); line-height: 1; margin-bottom: var(--e3); }
.erro-pagina h1 { margin-bottom: var(--e3); }
.erro-pagina p { color: var(--silk-2); margin-bottom: var(--e5); }
.erro-detalhe { white-space: pre-wrap; font-size: var(--t-xs); background: var(--mask-alto); padding: var(--e3); color: var(--falha); }

@media (min-width: 700px) {
  .pagina { padding: var(--e5) var(--e4); }
}
.menu .ico.seta { color: var(--silk-3); width: 18px; height: 18px; }

/* Hover só em aparelhos com mouse: no celular o toque deixaria o destaque "grudado". */
@media (hover: hover) {
  a:hover { color: #9BDDFA; }
  .topo-voltar:hover, .topo-acao:hover { color: var(--silk); }
  .nav-item:hover { color: var(--silk-2); }
  .nav-capturar:hover .nav-pad { background: var(--pad-claro); }
  .botao:hover { background: var(--pad-claro); color: var(--mask); }
  .botao--secundario:hover { background: var(--trilha); color: var(--silk); }
  .botao--fantasma:hover { background: var(--mask-mais); color: var(--led); }
  .botao--perigo:hover { background: rgba(255, 122, 107, 0.12); color: var(--falha); }
  a.linha:hover .linha-titulo { color: var(--pad); }
  .botao-icone:hover { color: var(--pad); background: var(--mask-mais); }
  .status-dia a:hover { background: var(--mask-mais); }
  .ia-botao:hover { background: var(--mask-mais); color: var(--silk); }
  .mes-nav a:hover { color: var(--pad); }
  .dia > a:hover .dia-data { color: var(--pad); }
  .menu a:hover, .menu button:hover { background: var(--mask-mais); }
}