/* Nimbus: identidade visual.
   Regras do sistema, para toda tela nova:
   - base quase neutra (grafite), um acento só (verde-água), usado com parcimônia: marca, ação principal, foco, aba ativa;
   - verde, âmbar e vermelho são só de estado (ok, atenção, perigo);
   - uma fonte (Inter) para texto; a mono só em rótulos curtos, contagens e dados técnicos (como no site);
   - tamanhos: 12.5 (apoio), 14 (texto), 16 (título de quadro), 26 (título de página e números grandes);
   - espaços em múltiplos de 4; raio 14 em quadro e 10 em controle; nunca quadro com borda dentro de quadro com borda;
   - estado é um ponto colorido com texto, não uma etiqueta cheia;
   - o fundo tem um brilho verde-água discreto no alto, o mesmo do site (site/index.html).
   As mesmas cores estão no app Android (android/app/src/main/res/values/themes.xml).
   Fonte: Inter (SIL Open Font License 1.1), subconjunto latino, embutida para não depender de nada de fora. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('inter.woff2') format('woff2');
}

:root {
  color-scheme: dark;
  --fundo: #0b0d10;
  --sup: #12151a;
  --sup2: #1a1e25;
  --sup3: #232831;
  --linha: #1f232b;
  --linha-forte: #2c323c;
  --texto: #eceef2;
  --texto2: #9aa1ad;
  --texto3: #6c7380;
  --acento: #2dd4bf;
  --acento-claro: #5eead4;
  --acento-fundo: #2dd4bf1f;
  --sobre-acento: #04221e;
  --ok: #3ecf8e;
  --atencao: #f5b83d;
  --perigo: #f2686b;
  --perigo-fundo: #f2686b1a;
  --veu: #05070acc;
  --raio: 14px;
  --raio-p: 10px;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, 'Roboto Mono', monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
[hidden] { display: none !important; }
body {
  min-height: 100vh;
  font: 400 14px/1.5 var(--sans);
  font-feature-settings: 'cv11', 'ss03';
  letter-spacing: -.005em;
  color: var(--texto);
  background: radial-gradient(1000px 420px at 85% -10%, #2dd4bf12, transparent 70%) no-repeat, var(--fundo);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { text-wrap: balance; }

/* Rótulo curto em mono, no acento (como os do site): o que é a seção, em poucas palavras. */
.rotulo-mono { font: 500 12px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--acento); }
h1, h2, h3, p { margin: 0; }

/* Marca: o símbolo (a casa do player dentro da nuvem) e o nome. A arte sai de scripts/icone.py. */
.marca { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 650; letter-spacing: -.02em; color: var(--texto); }
.marca svg { flex: none; width: 24px; height: 24px; color: var(--acento); }

/* Quadro: a única superfície com borda. Dentro dele, as partes se separam por linha, não por outra caixa. */
.quadro { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px; }
.titulo { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.quadro > .titulo { margin-bottom: 12px; }
.contagem { margin-left: 8px; font: 400 12.5px var(--mono); letter-spacing: 0; color: var(--texto3); font-variant-numeric: tabular-nums; }
.dica { margin-top: 12px; font-size: 12.5px; color: var(--texto2); }
.erro { margin-top: 12px; font-size: 12.5px; font-weight: 500; color: var(--perigo); }
.forte { font-weight: 550; }
.dica-vao { font-size: 12.5px; color: var(--texto2); }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums; }

/* Lista dentro de quadro: vai de borda a borda, com linhas finas entre os itens. */
.vao { margin: 0 -20px; }
.quadro > .vao:first-child { margin-top: -20px; }
.quadro > .vao:first-child > :first-child { border-top: 0; }
.quadro > .vao:last-child { margin-bottom: -20px; }
.quadro.liso > .vao { margin: 0; }
.cab-quadro + .vao > :first-child { border-top: 0; }
.vao > * { padding: 12px 20px; border-top: 1px solid var(--linha); }
.vazio { font-size: 14px; color: var(--texto3); }

/* Estado: um ponto colorido e o texto. */
.ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--texto3); }
.ponto.ok { background: var(--ok); box-shadow: 0 0 0 4px #3ecf8e24; }
.ponto.ruim { background: var(--perigo); box-shadow: 0 0 0 4px #f2686b24; }
.selo { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texto2); white-space: nowrap; }
.selo::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--texto3); }
.selo.ok::before { background: var(--ok); }
.selo.atencao { color: var(--atencao); }
.selo.atencao::before { background: var(--atencao); }
.selo.perigo { color: var(--perigo); }
.selo.perigo::before { background: var(--perigo); }

/* Conta: nome, estado e uma ação. */
.conta { display: flex; align-items: center; gap: 12px; }
.conta .nome { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; }
.conta .nick { font-weight: 550; overflow: hidden; text-overflow: ellipsis; }
.motivo { flex-basis: 100%; font-size: 12.5px; color: var(--texto3); }

/* Botões: um principal por tela (acento). O resto é discreto ("apagado"); "perigo" só ganha cor forte ao confirmar. */
.btn {
  height: 36px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--raio-p); cursor: pointer; white-space: nowrap; text-decoration: none;
  font: 600 14px var(--sans); letter-spacing: -.01em; color: var(--sobre-acento); background: var(--acento);
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover:not(:disabled) { background: var(--acento-claro); }
.btn:focus-visible, .campo:focus-visible, .aba:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.btn:disabled { opacity: .4; cursor: default; }
.btn.apagado { color: var(--texto); background: transparent; border-color: var(--linha-forte); }
.btn.apagado:hover:not(:disabled) { background: var(--sup3); }
.btn.perigo { color: var(--perigo); background: transparent; border-color: var(--linha-forte); }
.btn.perigo:hover:not(:disabled) { background: var(--perigo-fundo); border-color: #f2686b66; }
.btn.mini { height: 32px; padding: 0 12px; font-size: 12.5px; }
.btn.largo { width: 100%; height: 46px; margin-top: 16px; }
.btn.largo + .btn.largo { margin-top: 8px; }

/* Campo e formulário. */
.campo {
  flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--linha-forte); border-radius: var(--raio-p);
  font: inherit; color: var(--texto); background: var(--fundo);
}
.campo::placeholder { color: var(--texto3); }
.linha-form { display: flex; gap: 8px; margin-top: 16px; }

/* Confirmação e aviso. */
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; background: var(--veu); backdrop-filter: blur(3px); }
.modal-caixa { width: min(420px, 100%); background: var(--sup2); border-color: var(--linha-forte); box-shadow: 0 24px 64px #000a; }
.modal-caixa p { margin-bottom: 20px; font-size: 14px; color: var(--texto2); }
.modal-caixa .btn.perigo { color: #fff; background: #d9484c; border-color: transparent; }
.modal-caixa .btn.perigo:hover { background: #e55d61; }
.acoes { display: flex; justify-content: flex-end; gap: 8px; }
.aviso {
  position: fixed; bottom: 24px; left: 16px; right: 16px; z-index: 60; margin: 0 auto; width: fit-content; max-width: 420px;
  padding: 10px 16px; border-radius: 99px; font-size: 14px; font-weight: 500;
  color: var(--fundo); background: var(--texto); box-shadow: 0 12px 36px #0009;
}

/* Casca: menu lateral fixo e o conteúdo ao lado. Uma página por assunto; o menu marca onde se está. */
.casca { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.lateral {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 16px;
  padding: 16px 12px; border-right: 1px solid var(--linha); background: #0b0d10b3;
}
.lateral .marca { height: 32px; padding: 0 8px; }
.marca small { margin-left: 2px; font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--texto3); }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a {
  display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 8px; border-radius: var(--raio-p);
  font-weight: 500; color: var(--texto2); text-decoration: none; white-space: nowrap; transition: background .12s, color .12s;
}
.menu a svg { flex: none; width: 18px; height: 18px; }
.menu a:hover { color: var(--texto); background: var(--sup); }
.menu a.on { color: var(--texto); background: var(--sup2); }
.menu a:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.menu a.breve { color: var(--texto3); pointer-events: none; }
.menu .nota { margin-left: auto; font: 400 12px var(--mono); color: var(--texto3); font-variant-numeric: tabular-nums; }
.menu .nota.perigo { color: var(--perigo); }
.pe-lateral { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 8px 0; border-top: 1px solid var(--linha); }
.pe-lateral .quem { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; color: var(--texto2); }
.conteudo { min-width: 0; padding: 32px 40px 64px; }
.pagina { display: flex; flex-direction: column; gap: 16px; max-width: 1120px; }
.pagina.estreita { max-width: 560px; }

/* Título da página. */
.cab-pagina { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; margin-bottom: 4px; }
.cab-pagina h1 { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.035em; }
.apoio { font-size: 12.5px; color: var(--texto3); font-variant-numeric: tabular-nums; }
.caminho { display: flex; align-items: center; gap: 8px; font: 500 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--texto3); }
.caminho span:last-child { color: var(--acento); }
.caminho a { color: var(--texto2); text-decoration: none; }
.caminho a:hover { color: var(--texto); }

/* Tabela: dentro de um quadro sem miolo (.quadro.liso). */
.quadro.liso { padding: 0; overflow: hidden; }
.rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th {
  text-align: left; padding: 10px 20px; white-space: nowrap;
  font: 500 11.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--texto3); border-bottom: 1px solid var(--linha);
}
.tabela th.ordena { cursor: pointer; user-select: none; }
.tabela th.ordena:hover, .tabela th.ativa { color: var(--texto); }
.tabela td { padding: 12px 20px; border-bottom: 1px solid var(--linha); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--sup2); }
.tabela tr.clicavel { cursor: pointer; }
.tabela td.fraco { color: var(--texto2); }
.tabela td.quebra { white-space: normal; }
.tabela a { color: inherit; text-decoration: none; font-weight: 550; }
.rodape-tabela { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--linha); }

/* Tela de entrada: sem menu, um quadro no meio. */
.fora { display: grid; place-items: start center; min-height: 100vh; padding: 14vh 16px 32px; }
.entrada { width: min(420px, 100%); padding: 32px; border-color: var(--linha-forte); background: #12151ae6; }
.entrada .marca { margin-bottom: 20px; }
.entrada .dica { margin-top: 8px; }

/* Tela estreita: o menu sai da lateral. Por padrão vira uma faixa rolável no topo; com .abas-embaixo
   (painel do player, usado no celular) vira a barra de abas de baixo. */
@media (max-width: 800px) {
  .casca { display: block; }
  .lateral {
    position: sticky; top: 0; z-index: 20; height: auto; flex-direction: row; align-items: center; gap: 8px;
    padding: 8px 16px; border-right: 0; border-bottom: 1px solid var(--linha); background: #0b0d10eb; backdrop-filter: blur(10px);
  }
  .lateral .marca small { display: none; }
  .menu { flex-direction: row; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .menu a { padding: 0 10px; gap: 8px; }
  .menu a svg, .menu a.breve { display: none; }
  .pe-lateral { margin: 0; padding: 0; border: 0; }
  .pe-lateral .quem { display: none; }
  .conteudo { padding: 20px 16px 48px; }

  /* Sem desfoque aqui: backdrop-filter faz a barra virar a referência do position: fixed, e o menu de baixo
     ficava preso no topo junto com ela. */
  .abas-embaixo .lateral { justify-content: space-between; padding-top: calc(8px + env(safe-area-inset-top)); backdrop-filter: none; background: var(--fundo); }
  .abas-embaixo .menu {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; flex: none; justify-content: space-around; gap: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); background: #0b0d10f5; backdrop-filter: blur(10px);
  }
  .abas-embaixo .menu a { flex: 1; max-width: 120px; height: 48px; flex-direction: column; justify-content: center; gap: 2px; padding: 0; font-size: 11.5px; background: none; }
  .abas-embaixo .menu a svg { display: block; width: 22px; height: 22px; }
  .abas-embaixo .menu a.on { color: var(--acento); }
  .abas-embaixo .menu .nota { display: none; }
  .abas-embaixo .conteudo { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .abas-embaixo ~ .aviso { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Seletor em abas (filtros, períodos): botões soltos com borda, como as abas do site. */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button {
  height: 34px; padding: 0 14px; border: 1px solid var(--linha); border-radius: var(--raio-p); cursor: pointer; white-space: nowrap;
  font: 500 13.5px var(--sans); color: var(--texto2); background: transparent; transition: background .12s, color .12s, border-color .12s;
}
.seg button:hover { color: var(--texto); }
.seg button.on { color: var(--texto); background: var(--sup2); border-color: var(--linha-forte); }
.seg button:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }