/*
  As mesmas fichas da extensão, com os mesmos nomes e os mesmos valores.

  Não é economia de digitação: é o que garante que "tema claro" queira dizer
  exatamente a mesma coisa nas duas telas. Quem escolhe o tema aqui e abre a
  extensão depois vê o mesmo azul, o mesmo cinza e o mesmo respiro.

  Quem resolve o "automático" e escreve `data-vigente` é `lib/aparencia.js`,
  o MESMO arquivo que a extensão usa. Por isso não há `prefers-color-scheme`
  neste CSS: ele brigaria com a escolha explícita da pessoa.
*/
:root {
  --fundo: #0b1220; --cartao: #131c2e; --realce: #16253c; --linha: #23304a;
  --texto: #e8eefc; --apagado: #8fa2c4;
  --marca: #3675b2; --sobre-marca: #ffffff;
  --ok: #3ddc97; --erro: #f2545b; --alerta: #f5b544;
  --toque: #ffffff0f;
  --alt-linha: 13px;
  --cod-linha: 24px;
}

:root[data-vigente="claro"] {
  --fundo: #f7f9fd; --cartao: #ffffff; --realce: #eef3fb; --linha: #d8e0ee;
  --texto: #111a2b; --apagado: #5a6b87;
  --ok: #1c8757; --erro: #c22c33; --alerta: #9a6a06;
  --toque: #0b12200d;
}
/* Branco sobre cinza claro é um degrau pequeno demais: a borda devolve a
   separação sem transformar a linha numa caixa. */
:root[data-vigente="claro"] .cofre li { border-color: var(--linha); }

:root[data-densidade="compacta"] { --alt-linha: 9px; --cod-linha: 21px; }

/*
  Tamanho da interface: `zoom`, pelo mesmo motivo da extensao. Escalar so a
  fonte deixaria texto grande com alvo pequeno, que e o pior dos dois mundos
  para quem precisou aumentar.
*/
:root[data-escala="pequena"] { zoom: 0.9; }
:root[data-escala="grande"] { zoom: 1.15; }
:root[data-escala="maior"] { zoom: 1.3; }
:root[data-densidade="compacta"] .cofre li { margin-bottom: 4px; }
* { box-sizing: border-box; }
body {
  margin: 0; padding: 20px 16px 40px; background: var(--fundo); color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
header, section { max-width: 520px; margin: 0 auto; }
header { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.marca { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; letter-spacing: .04em; }
.estado { margin-left: auto; font-size: 13px; color: var(--apagado); }
h1 { font-size: 1.3rem; margin: 0 0 6px; }
.apoio { color: var(--apagado); font-size: 13px; margin: 0 0 16px; text-wrap: pretty; }
label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--apagado); }
input, select {
  display: block; width: 100%; margin-top: 5px; padding: 11px 13px;
  background: #0000; border: 1px solid var(--linha); border-radius: 10px;
  color: var(--texto); font: inherit; font-size: 16px;
}
input:focus, select:focus { outline: none; border-color: var(--marca); }
input[readonly] { background: var(--toque); font-family: ui-monospace, Menlo, monospace; font-size: 14px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
button {
  width: 100%; padding: 12px; margin-bottom: 8px; border-radius: 10px;
  font: inherit; cursor: pointer;
}
.principal { background: var(--marca); border: 0; color: var(--sobre-marca); font-weight: 600; }
.vazio { background: #0000; border: 1px solid var(--linha); color: var(--apagado); }
.vazio:hover { color: var(--texto); }
.perigo { background: none; border: 0; color: var(--apagado); font-size: 13px;
          text-decoration: underline; text-underline-offset: 3px; }
.perigo:hover { color: var(--erro); }
.icone { width: auto; padding: 6px 12px; font-size: 13px; background: none;
         border: 1px solid var(--linha); color: var(--apagado); }
.erro { color: var(--erro); font-size: 13px; min-height: 18px; margin: 4px 0 0; }
.recado { font-size: 13px; min-height: 18px; }
.recado.bom { color: var(--ok); } .recado.ruim { color: var(--erro); }
.ou { display: flex; align-items: center; gap: 10px; color: var(--apagado); font-size: 13px; margin: 18px 0; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
hr { border: 0; border-top: 1px solid var(--linha); margin: 18px 0; }
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.barra { display: flex; gap: 8px; margin-bottom: 14px; }
.barra input { margin-top: 0; }
.barra button { width: auto; white-space: nowrap; margin-bottom: 0; }

ul { list-style: none; margin: 0; padding: 0; }
#lista li {
  border: 1px solid var(--linha); border-radius: 12px; background: var(--cartao);
  padding: 12px 14px; margin-bottom: 10px;
}
.topo { display: flex; align-items: center; gap: 10px; }
.nome { font-weight: 600; }
.usuario { color: var(--apagado); font-size: 13px; }
.codigo { font: 600 30px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
          letter-spacing: .12em; margin: 10px 0 8px; }
.tempo { height: 3px; border-radius: 999px; background: var(--linha); overflow: hidden; }
.tempo > i { display: block; height: 100%; background: var(--marca); transition: width 1s linear; }
.tempo > i.acabando { background: var(--alerta); }
.acoes { display: flex; gap: 8px; margin-top: 10px; }
.acoes button { width: auto; padding: 7px 12px; font-size: 13px; margin: 0; }
#achadas li { display: flex; align-items: center; gap: 10px; border: 1px solid var(--linha);
              border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
#achadas input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
#achadas li.repetida { opacity: .55; }
[hidden] { display: none !important; }

/* Documento de texto corrido (privacidade). */
.documento { max-width: 640px; }
.documento h2 { font-size: 1rem; margin: 22px 0 6px; }
.documento p { color: var(--apagado); margin: 0 0 10px; text-wrap: pretty; }
.documento b { color: var(--texto); }

/* A marca: símbolo + palavra, juntos e alinhados pela caixa. */
.marca-simbolo { display: block; flex: 0 0 auto; }
header { gap: 8px; }

/* ---------- o padrão novo: linhas ---------- */

/*
  Cartão de 165px passava um por tela de 812. A linha tem 64 e passam seis.
  O que muda não é a estética: é quantas contas você vê sem rolar.
*/
.cofre li {
  display: flex; align-items: center; gap: 14px;
  padding: var(--alt-linha) 14px; margin: 0 0 6px;
  border: 1px solid transparent; border-radius: 12px;
  background: var(--cartao); cursor: pointer;
}
.cofre li:hover { border-color: var(--linha); }
#lista li.escolhida { border-color: var(--marca); background: var(--realce); }
.cofre li.vazia { color: var(--apagado); cursor: default; justify-content: center; }
.cofre .quem { min-width: 0; flex: 1; }
.cofre .nome { font-weight: 600; }
.cofre .usuario { font-size: 13px; color: var(--apagado); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cofre .agora { text-align: right; }
.cofre .codigo {
  font: 600 var(--cod-linha)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em; margin: 0;
}
.cofre .tempo { height: 2px; width: 104px; margin-top: 6px; border-radius: 999px; background: var(--linha); overflow: hidden; }
.cofre .tempo > i {
  display: block; height: 100%; width: 0;
  background: var(--marca); transition: width 1s linear;
}

/* A LARGURA VEM DE CLASSE, E NAO DE `style`.

   A CSP desta pagina e `style-src 'self'`: estilo em atributo e bloqueado, e
   `barra.style.width = ...` nao pintava nada — a barra ficava parada perto do
   cheio, dizendo que sobrava tempo quando nao sobrava.

   Degraus de 5%: com `transition: width 1s linear` acima, o navegador anima
   entre um degrau e outro, e o movimento na tela e continuo. */
.cofre .tempo > i.p0 { width: 0%; }
.cofre .tempo > i.p5 { width: 5%; }
.cofre .tempo > i.p10 { width: 10%; }
.cofre .tempo > i.p15 { width: 15%; }
.cofre .tempo > i.p20 { width: 20%; }
.cofre .tempo > i.p25 { width: 25%; }
.cofre .tempo > i.p30 { width: 30%; }
.cofre .tempo > i.p35 { width: 35%; }
.cofre .tempo > i.p40 { width: 40%; }
.cofre .tempo > i.p45 { width: 45%; }
.cofre .tempo > i.p50 { width: 50%; }
.cofre .tempo > i.p55 { width: 55%; }
.cofre .tempo > i.p60 { width: 60%; }
.cofre .tempo > i.p65 { width: 65%; }
.cofre .tempo > i.p70 { width: 70%; }
.cofre .tempo > i.p75 { width: 75%; }
.cofre .tempo > i.p80 { width: 80%; }
.cofre .tempo > i.p85 { width: 85%; }
.cofre .tempo > i.p90 { width: 90%; }
.cofre .tempo > i.p95 { width: 95%; }
.cofre .tempo > i.p100 { width: 100%; }
.cofre .tempo > i.acabando { background: var(--alerta); }
/* Em repouso a linha só informa. As ações aparecem na escolhida.
   Preso a `#lista` de propósito: na lista de equipe não há escolha nem
   edição, e herdar isto esconderia o único botão que existe lá. */
#lista li:not(.escolhida) .acoes { display: none; }
#lista li.escolhida .agora { display: none; }
.cofre .acoes { display: flex; gap: 8px; }
.cofre .acoes button { width: auto; margin: 0; padding: 10px 14px; font-size: 13px; }
.cofre .acoes .copiar { width: 44px; padding: 0; display: grid; place-items: center; }

/* A ação principal fica no rodapé, ao alcance do polegar. */
.rodape { position: sticky; bottom: 0; padding-top: 10px; background: var(--fundo); }
.rodape button { margin: 0; }

/* Busca sozinha na largura inteira — antes dividia a faixa e sobravam 90px. */
#busca { margin-bottom: 14px; }

.cuidado {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 22px;
  border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px;
  background: var(--cartao); color: var(--alerta);
}
.cuidado p { margin: 0; font-size: 13px; color: var(--apagado); }
.cuidado svg { flex: 0 0 auto; margin-top: 2px; }

/* ---------- selo da conta ---------- */

/*
  O mesmo selo da extensão, com as mesmas regras de cor e de iniciais — elas
  vêm de `lib/aparencia.js`, que os dois lados compartilham. Como a cor e as
  letras moram DENTRO do bloco cifrado, junto com a conta, elas atravessam a
  sincronização sozinhas: personalizar aqui personaliza lá.
*/
.selo-conta {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--cor-conta, var(--marca));
  color: #fff;
  font: 600 14px/1 system-ui, sans-serif;
  box-shadow: inset 0 0 0 1px #0000001f;
  user-select: none;
}
:root[data-densidade="compacta"] .selo-conta { width: 32px; height: 32px; font-size: 12px; }

/* ---------- aparência ---------- */

/*
  A aparência mora atrás de um botão do cabeçalho, e não numa página à parte.

  É um punhado de escolhas visuais que a pessoa quer ver acontecendo na
  própria lista — mandá-la para outra tela custaria a ida e a volta a cada
  experimento.
*/
#painel-aparencia {
  max-width: 520px; margin: 0 auto 16px;
  border: 1px solid var(--linha); border-radius: 14px;
  padding: 14px; background: var(--cartao);
}
#painel-aparencia .secao {
  display: block; margin: 12px 0 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--apagado); text-transform: uppercase;
}
#painel-aparencia .secao:first-child { margin-top: 0; }

.faixa {
  display: flex; gap: 4px; padding: 4px;
  border: 1px solid var(--linha); border-radius: 12px; background: var(--fundo);
}
.faixa button {
  flex: 1 1 0; min-width: 0; width: auto; margin: 0;
  padding: 9px 6px; font-size: 13px; border: 0; border-radius: 9px;
  background: none; color: var(--apagado);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.faixa button:hover { color: var(--texto); }
.faixa button[aria-pressed="true"] {
  background: var(--marca); color: var(--sobre-marca); font-weight: 600;
}

.cores { display: flex; gap: 9px; flex-wrap: wrap; }
.cores button {
  width: 34px; height: 34px; padding: 0; margin: 0; flex: 0 0 auto;
  border: 0; border-radius: 50%; outline-offset: 3px;
}
.cores button[aria-pressed="true"] { outline: 2px solid var(--texto); }

/* No formulário da conta, o selo e as cores dividem a linha. */
.escolha-cor { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.escolha-cor .cores button { width: 26px; height: 26px; }
#c-inicial { width: 68px; flex: 0 0 auto; margin: 0; text-align: center; }

/* O botão de aparência é ícone: o cabeçalho tem 375px e três coisas. */
#aparencia { display: grid; place-items: center; padding: 7px 10px; }

/* Marcar simples, na largura da linha: alvo grande, rótulo clicável. */
.marcar {
  display: flex; align-items: center; gap: 10px; margin: 4px 0 14px;
  color: var(--texto); font-size: 14px; cursor: pointer;
}
.marcar input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }

/* A faixa de escolha, e o aviso sobre o que o site não pode fazer. */
.secao {
  display: block; margin: 18px 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--apagado); text-transform: uppercase;
}
.linha-sites { display: flex; gap: 8px; margin-bottom: 12px; }
.linha-sites button { width: auto; margin: 0; }
.aviso-permissao {
  border-left: 3px solid var(--marca); padding-left: 10px; margin-top: -4px;
}