/* Conto de Tracia: tinta escura, latão e linhas finas */
:root {
  --tinta: #07090e; --tinta-2: #0c1016; --tinta-3: #131923;
  --fio: rgba(201, 168, 106, 0.2); --fio-forte: rgba(201, 168, 106, 0.42); --fio-leve: rgba(201, 168, 106, 0.09);
  --papel: #ece6d8; --suave: #979dab; --latao: #c9a86a; --latao-claro: #ecdcb4; --hex: #62e6e0; --perigo: #ea9184; --ok: #8fd3a6;
  --display: 'Italiana', 'Times New Roman', serif;
  --corpo: 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --margem: clamp(1.1rem, 3vw, 2.5rem);
  --largura: 1240px;
  --borda: max(var(--margem), calc((100% - var(--largura)) / 2 + var(--margem)));
  --curva: cubic-bezier(0.19, 1, 0.22, 1);
  --mesa: #0a0e14;
  color-scheme: dark;
}
:root[data-tema='prata'] {
  --tinta: #0a0d13; --tinta-2: #10141c; --tinta-3: #182030;
  --fio: rgba(214, 196, 150, 0.22); --fio-forte: rgba(214, 196, 150, 0.48); --fio-leve: rgba(214, 196, 150, 0.1);
  --papel: #f2f0ea; --suave: #a3aab8; --latao: #d6c496; --latao-claro: #f5ecd2; --hex: #7aa6ff; --mesa: #0c111b;
}
:root[data-tema='musgo'] {
  --tinta: #070b09; --tinta-2: #0c120f; --tinta-3: #131c17;
  --fio: rgba(126, 214, 104, 0.2); --fio-forte: rgba(126, 214, 104, 0.45); --fio-leve: rgba(126, 214, 104, 0.09);
  --papel: #e2eddc; --suave: #8fa194; --latao: #8fd36a; --latao-claro: #cdf3b4; --hex: #c86bff; --perigo: #ff8a7a; --mesa: #08100b;
}
:root[data-tema='rubi'] {
  --tinta: #0b0707; --tinta-2: #120b0b; --tinta-3: #1c1112;
  --fio: rgba(214, 72, 64, 0.24); --fio-forte: rgba(214, 72, 64, 0.5); --fio-leve: rgba(214, 72, 64, 0.1);
  --papel: #efe3e0; --suave: #a8918f; --latao: #d94a40; --latao-claro: #f2b2a8; --hex: #e8c06a; --perigo: #ff9b7e; --mesa: #100909;
}
:root[data-tema='ametista'] {
  --tinta: #0b0810; --tinta-2: #110d18; --tinta-3: #1a1424;
  --fio: rgba(232, 150, 190, 0.22); --fio-forte: rgba(232, 150, 190, 0.48); --fio-leve: rgba(232, 150, 190, 0.1);
  --papel: #f1e8f0; --suave: #a99bb0; --latao: #e896be; --latao-claro: #f8d3e5; --hex: #8fe0c8; --perigo: #ff9a8f; --mesa: #0e0a14;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--tinta); overflow-y: scroll; }
body { margin: 0; background: var(--tinta); color: var(--papel); font: 400 1.0625rem/1.6 var(--corpo); -webkit-font-smoothing: antialiased; }
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--fio-forte) transparent; } }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background-color: var(--fio-forte); background-clip: padding-box; border: 3px solid transparent; border-radius: 99px; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; color: var(--papel); line-height: 1.05; margin: 0 0 0.45em; }
h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 2.3vw, 1.9rem); margin-top: 1.5em; }
h3 { font-size: 1.45rem; margin-top: 1.2em; }
p { margin: 0 0 0.85em; }
ul, ol { margin: 0 0 0.9em; padding-left: 1.2em; }
li::marker { color: var(--latao); }
a { color: var(--latao-claro); text-underline-offset: 3px; text-decoration-thickness: 1px; }
strong { font-weight: 600; }
small { color: var(--suave); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.45; }
:focus-visible { outline: 1px solid var(--hex); outline-offset: 3px; }
::selection { background: var(--latao); color: var(--tinta); }
code { font: 0.86em var(--mono); color: var(--latao-claro); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tela-escura { min-height: 100vh; background: var(--tinta); }

/* tipografia de apoio */
.rotulo { font: 500 0.72rem/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--latao); }
.meta { color: var(--suave); font-size: 0.92rem; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.intro { color: var(--suave); max-width: 62ch; font-size: 1.1rem; }
.erro { color: var(--perigo); }
.aviso { border-left: 1px solid var(--latao); padding: 0.2em 0 0.2em 1em; margin: 0 0 1.2em; }
.aviso .rotulo { display: block; margin-bottom: 0.2em; }
.voltar { font: 500 0.72rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--suave); text-decoration: none; }
.voltar:hover { color: var(--latao-claro); }
.link { background: none; border: 0; padding: 0; color: var(--latao-claro); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link-mono { background: none; border: 0; padding: 0; font: 500 0.72rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--suave); text-decoration: none; }
.link-mono:hover { color: var(--latao-claro); }
.perigo { color: var(--perigo); }

/* botões */
.btn {
  position: relative; display: inline-flex; flex-shrink: 0; justify-content: center; align-items: center; overflow: hidden; isolation: isolate;
  min-height: 44px; background: transparent; color: var(--tinta); border: 1px solid var(--latao); padding: 0.85em 1.7em;
  font: 500 0.76rem/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  transition: color 0.45s var(--curva);
}
.btn::before { content: ''; position: absolute; inset: 0; background: var(--latao); z-index: -1; transform-origin: left; transition: transform 0.55s var(--curva); }
.btn:hover:not(:disabled)::before { transform: scaleX(0); transform-origin: right; }
.btn:hover:not(:disabled) { color: var(--latao-claro); }
.btn-fantasma { color: var(--latao-claro); border-color: var(--fio-forte); }
.btn-fantasma::before { transform: scaleX(0); transform-origin: right; }
.btn-fantasma:hover:not(:disabled)::before { transform: scaleX(1); transform-origin: left; }
.btn-fantasma:hover:not(:disabled) { color: var(--tinta); }
.btn-perigo { color: var(--perigo); border-color: rgba(234, 145, 132, 0.5); }
.btn-perigo::before { background: var(--perigo); transform: scaleX(0); }
.btn-perigo:hover:not(:disabled)::before { transform: scaleX(1); }
.btn-perigo:hover:not(:disabled) { color: var(--tinta); }
.largo { width: 100%; }

/* botão de rolagem dentro do texto */
.rolar {
  display: inline-flex; align-items: center; gap: 0.6em; min-height: 40px; margin: 0.1em 0 1.1em; padding: 0.35em 0.9em 0.35em 0.7em;
  background: none; border: 1px solid var(--fio-forte); color: var(--latao-claro);
  font: 500 0.72rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; transition: border-color 0.25s, color 0.25s;
}
.rolar::before { content: ''; width: 11px; height: 12px; background: var(--latao); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background 0.25s; }
.rolar:hover { border-color: var(--hex); color: var(--hex); }
.rolar:hover::before { background: var(--hex); }

/* formulários */
label { display: flex; flex-direction: column; gap: 0.15rem; font: 500 0.7rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--latao); }
label input, label select, label textarea { color: var(--papel); font: 400 1.0625rem var(--corpo); letter-spacing: 0; text-transform: none; }
input, select, textarea {
  width: 100%; min-width: 0; min-height: 42px; background: transparent; border: 0; border-bottom: 1px solid var(--fio-forte);
  border-radius: 0; padding: 0.45em 0.1em; transition: border-color 0.3s;
}
select { background: var(--tinta-2); padding-inline: 0.4em; }
select option { background: var(--tinta-2); }
textarea { border: 1px solid var(--fio); padding: 0.7em; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--hex); }
input[type='checkbox'] { width: 16px; min-height: 16px; height: 16px; accent-color: var(--latao); }
input[type='number'] { -moz-appearance: textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.alternar { flex-direction: row; align-items: center; gap: 0.6em; font: 400 0.95rem var(--corpo); letter-spacing: 0; text-transform: none; color: var(--papel); cursor: pointer; }

/* acesso */
.acesso { min-height: 100vh; display: flex; padding: 2rem 1rem; background:
  radial-gradient(ellipse 70% 60% at 50% 45%, color-mix(in srgb, var(--hex) 7%, transparent), transparent 70%),
  radial-gradient(ellipse 90% 80% at 50% 50%, var(--tinta-2) 0%, var(--tinta) 75%); position: relative; overflow: hidden; }
.acesso::before { content: ''; position: absolute; inset: 0; opacity: 0.35; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%23c9a86a' stroke-opacity='.13' stroke-width='1'/%3E%3C/svg%3E");
  mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%); }
.acesso-topo { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-between; padding: 1.2rem var(--margem); z-index: 2; }
.painel {
  position: relative; z-index: 2; margin: auto; width: min(410px, 100%); padding: 2.2rem 2rem 1.7rem; text-align: center;
  background: rgba(7, 9, 14, 0.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--fio);
}
.painel::before, .painel::after { content: ''; position: absolute; width: 14px; height: 14px; border: solid var(--latao); }
.painel::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.painel::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.painel-marca { font: 400 clamp(2.6rem, 10vw, 3.4rem)/1 var(--display); color: var(--latao-claro); margin: 0 0 0.15em; letter-spacing: 0.02em; }
.painel-sub { color: var(--suave); font-size: 0.95rem; margin: 0 0 1.2rem; }
.painel-regua { height: 1px; background: var(--latao); margin-bottom: 1.3rem; }
.painel-abas { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 1.3rem; }
.painel-abas a { border-bottom: 1px solid var(--fio); padding: 0.6em 0; color: var(--suave); font: 500 0.74rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; transition: color 0.3s, border-color 0.3s; }
.painel-abas a.ativo { color: var(--latao-claro); border-color: var(--latao); }
.painel form { display: flex; flex-direction: column; gap: 1.05rem; text-align: left; }
.painel .btn { margin-top: 0.4rem; width: 100%; }
.painel-nota { color: var(--suave); font-size: 0.86rem; margin: -0.5rem 0 0; text-transform: none; letter-spacing: 0; font-family: var(--corpo); font-weight: 400; }
.painel-erro { color: var(--perigo); margin: 0; font-size: 0.95rem; }
.senha { position: relative; }
.senha input { padding-right: 4.5rem; }
.senha button { position: absolute; right: 0; bottom: 0.45em; background: none; border: 0; color: var(--suave); font: 500 0.66rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; padding: 0.2em 0; }
.senha button:hover { color: var(--latao-claro); }

/* estrutura */
.app { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; outline: none; animation: aparecer 0.25s ease-out; }
@keyframes aparecer { from { opacity: 0; } }
.pular { position: fixed; left: 1rem; top: -4rem; z-index: 80; background: var(--latao); color: var(--tinta); padding: 0.5em 1em; }
.pular:focus { top: 1rem; }
.nav { position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0.7rem var(--borda); background: var(--tinta); border-bottom: 1px solid var(--fio); }
.nav-marca { font: 400 1.45rem/1.2 var(--display); letter-spacing: 0.06em; color: var(--latao-claro); text-decoration: none; justify-self: start; white-space: nowrap; }
.nav-links { display: flex; gap: 2.2rem; }
.nav-links a, .nav-conta a { position: relative; color: var(--suave); text-decoration: none; font: 500 0.74rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; padding: 0.3em 0; transition: color 0.2s; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--latao); transform: scaleX(0); transition: transform 0.25s ease-out; }
.nav-links a:hover, .nav-links a.ativo, .nav-conta a:hover, .nav-conta a.ativo { color: var(--latao-claro); }
.nav-links a.ativo::after { transform: scaleX(1); }
.nav-conta { justify-self: end; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rodape { margin-top: 3.5rem; border-top: 1px solid var(--fio); padding: 1rem max(6rem, var(--borda)) 1rem var(--borda); display: flex; justify-content: space-between; align-items: center; gap: 0.6rem 2rem; flex-wrap: wrap; color: var(--suave); font-size: 0.82rem; }
.rodape p { margin: 0; }
.rodape .linha { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.rodape label { flex-direction: row; align-items: center; gap: 0.6em; color: var(--suave); }
.rodape select { width: auto; min-height: 32px; font-size: 0.85rem; padding: 0.2em 0.4em; }
.rodape .link { color: var(--suave); font-size: 0.82rem; }
.rodape .link:hover { color: var(--latao-claro); }

.pagina { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 2.2rem var(--margem) 1rem; }
.pagina-estreita { max-width: 760px; }
.titulo-acoes { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.titulo-acoes h1 { margin: 0; }
.vazio-grande { text-align: center; padding: 4.5rem 1rem; border-top: 1px solid var(--fio); }
.vazio-grande h2 { margin-top: 0; }
.vazio-grande .btn { margin-top: 0.9rem; }

/* compêndio de regras */
.compendio { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 3rem; width: 100%; max-width: var(--largura); margin: 0 auto; padding: 2.2rem var(--margem) 0; }
.compendio-menu { position: sticky; top: 5rem; align-self: start; display: flex; flex-direction: column; }
.compendio-menu a { display: flex; gap: 0.85rem; color: var(--suave); text-decoration: none; padding: 0.45rem 0; border-top: 1px solid var(--fio); transition: color 0.3s, padding-left 0.5s var(--curva); }
.compendio-menu a span { font: 500 0.7rem/2.1 var(--mono); color: var(--latao); }
.compendio-menu a:hover { color: var(--papel); padding-left: 0.3rem; }
.compendio-menu a.ativo { color: var(--latao-claro); }
.compendio-menu a.ativo span { color: var(--hex); }
.busca { display: block; margin: 0 0 1.2rem; }
.busca input { font-size: 0.95rem; }
.busca-res { display: flex; flex-direction: column; margin: -0.6rem 0 1.2rem; }
.busca-res a { padding: 0.3rem 0; border-bottom: 1px solid var(--fio-leve); text-decoration: none; font-size: 0.95rem; }
.busca-res p { margin: 0; }
.secao { min-width: 0; max-width: 820px; }
.secao > h1 { margin-bottom: 0.25em; }
.secao-num { display: block; margin-bottom: 0.6rem; }
.secao .intro { margin-bottom: 1.6rem; }
.secao-corpo > :first-child { margin-top: 0; }
.formula { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.25em 0.6em; margin: 0.4rem 0 1.6rem; padding: 1.3rem 1rem; border-block: 1px solid var(--fio-forte); font: 400 clamp(1.5rem, 3.6vw, 2.2rem)/1.2 var(--display); color: var(--latao-claro); text-align: center; }
.formula i { font-style: normal; color: var(--suave); font-family: var(--mono); font-size: 0.55em; }
.passos { list-style: none; padding: 0; counter-reset: passo; margin-bottom: 1.4rem; }
.passos li { counter-increment: passo; display: grid; grid-template-columns: 2.4rem 1fr; padding: 0.5rem 0; border-bottom: 1px solid var(--fio-leve); }
.passos li::before { content: counter(passo, decimal-leading-zero); font: 500 0.72rem/2.2 var(--mono); color: var(--latao); }
.exemplo { border-left: 1px solid var(--hex); padding: 0.2em 0 0.2em 1.1em; margin: 0 0 1.2em; }
.exemplo .rotulo { color: var(--hex); display: block; margin-bottom: 0.25em; }
.nota { color: var(--suave); font-size: 0.92rem; }
.termo { border-bottom: 1px dotted var(--latao); cursor: help; position: relative; }
.termo::after { content: attr(data-dica); position: absolute; left: 0; top: calc(100% + 8px); z-index: 5; width: min(270px, 70vw); padding: 0.6em 0.8em; background: var(--tinta-3); border: 1px solid var(--fio-forte); color: var(--papel); font: 400 0.88rem/1.45 var(--corpo); display: none; }
.termo:hover::after, .termo:focus::after, .termo.aberta::after { display: block; }
.tabela-rolagem { overflow-x: auto; margin-bottom: 1.6rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.97rem; font-variant-numeric: tabular-nums; }
th { text-align: left; font: 500 0.68rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--latao); white-space: nowrap; }
th, td { padding: 0.55rem 1rem 0.55rem 0; border-bottom: 1px solid var(--fio); vertical-align: top; }
tbody th { font: 400 0.97rem var(--corpo); letter-spacing: 0; text-transform: none; color: var(--papel); }
tbody tr { transition: background 0.3s; }
tbody tr:hover { background: var(--tinta-2); }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 2rem; margin-bottom: 1.4rem; }
.card { border-top: 1px solid var(--fio-forte); padding: 0.9rem 0 1.3rem; }
.card h3 { margin: 0 0 0.3em; font-size: 1.55rem; }
.card p:last-child { margin-bottom: 0; }
.dados-painel header .link { font-size: 0.86rem; }
.fatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.2rem; margin: 0.4rem 0 0.8rem; }
.fatos dt { font: 500 0.64rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--latao); }
.fatos dd { margin: 0; font-size: 0.95rem; }
.etiquetas { list-style: none; padding: 0; margin: 0.3rem 0 0.7rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.etiquetas li { border: 1px solid var(--fio-forte); padding: 0.05em 0.65em; font-size: 0.9rem; }
.selo { font: 500 0.64rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.15em 0.6em; border: 1px solid var(--fio-forte); color: var(--latao); white-space: nowrap; }
details { border: 1px solid var(--fio); margin-bottom: 1.2rem; }
details[open] { border-color: var(--fio-forte); }
summary { list-style: none; cursor: pointer; display: flex; gap: 0.7rem; align-items: baseline; padding: 0.65rem 0.9rem; font: 500 0.74rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--latao-claro); }
summary::-webkit-details-marker { display: none; }
summary::before { content: '▸'; color: var(--latao); transition: transform 0.2s; }
details[open] summary::before { transform: rotate(90deg); }
details > :not(summary) { margin-inline: 0.9rem; }
.paginacao { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--fio); }
.paginacao a { display: flex; flex-direction: column; gap: 0.1rem; text-decoration: none; color: var(--papel); max-width: 48%; }
.paginacao a span { font: 500 0.66rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--latao); }
.paginacao a strong { font: 400 1.35rem/1.15 var(--display); transition: color 0.3s; }
.paginacao a:hover strong { color: var(--latao-claro); }
.paginacao .prox { margin-left: auto; text-align: right; }

/* lista de fichas */
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 0.9rem; }
.cartao { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 0.2rem 1rem; padding: 0.95rem 1rem; background: var(--tinta-2); border: 1px solid var(--fio); color: inherit; text-decoration: none; transition: border-color 0.2s; }
.cartao:hover, .cartao:focus-visible { border-color: var(--fio-forte); }
.cartao:hover h2 { color: var(--latao-claro); }
.monograma { grid-row: span 2; aspect-ratio: 3 / 4; border: 1px solid var(--fio); display: grid; place-items: center; font: 400 1.8rem var(--display); color: var(--latao); }
.cartao h2 { margin: 0; font-size: 1.5rem; overflow-wrap: anywhere; transition: color 0.3s; }
.cartao .meta { margin: 0; font-size: 0.88rem; }
.cartao-numeros { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4rem; margin: 0.8rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--fio-leve); text-align: center; }
.cartao-numeros dt { font: 500 0.6rem var(--mono); letter-spacing: 0.1em; color: var(--latao); }
.cartao-numeros dd { margin: 0; font: 300 1.15rem var(--corpo); font-variant-numeric: tabular-nums; }

/* ficha */
.ficha { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 1.3rem var(--margem) 1rem; }
.ficha-barra { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.estado { font: 500 0.7rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--suave); }
.estado.erro { color: var(--perigo); }
.ficha-cabecalho { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 1.6rem; align-items: end; margin-bottom: 1.8rem; }
.ficha-cabecalho .monograma { font-size: 3.4rem; border-color: var(--fio-forte); }
.ficha-nome { font: 400 clamp(2rem, 4.4vw, 3.2rem)/1.1 var(--display) !important; color: var(--papel) !important; border-bottom: 1px solid var(--fio); padding: 0; margin-bottom: 1rem; min-height: 0; }
.ficha-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.7rem 1.4rem; }
.ficha-campos small { font: 400 0.84rem/1.4 var(--corpo); letter-spacing: 0; text-transform: none; color: var(--suave); margin-top: 0.3rem; }
.ficha-stats-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-top: 1px solid var(--fio-forte); padding-top: 0.65rem; margin-bottom: 0.6rem; }
.ficha-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; margin-bottom: 1.8rem; }
.hex { position: relative; aspect-ratio: 100 / 112; width: 100%; max-width: 140px; justify-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05rem; }
.hex-forma { position: absolute; inset: 0; width: 100%; height: 100%; }
.hex-forma polygon { fill: var(--tinta-2); stroke: var(--fio-forte); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke 0.3s; }
.hex:hover .hex-forma polygon, .hex:focus-within .hex-forma polygon { stroke: var(--latao); }
.hex > :not(.hex-forma) { position: relative; }
.hex label { font: 500 0.64rem var(--mono); letter-spacing: 0.12em; color: var(--latao); }
.hex-mod { font: 300 clamp(1.5rem, 3.2vw, 2.3rem)/1.1 var(--corpo); font-variant-numeric: tabular-nums; background: none; border: 0; padding: 0; color: var(--papel); transition: color 0.3s; }
.hex-mod:hover { color: var(--hex); }
.hex input { width: 48px; min-height: 26px; text-align: center; padding: 0; font: 500 0.82rem var(--mono); border-bottom-color: var(--fio); }
.hex small { font: 400 0.66rem var(--mono); color: var(--suave); min-height: 1em; }
.ficha-vitais { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--fio-forte); margin-bottom: 1.8rem; }
.vital { background: none; border: 0; border-left: 1px solid var(--fio); padding: 0.8rem 0.4rem; text-align: center; display: flex; flex-direction: column; color: var(--papel); }
.vital:first-child { border-left: 0; }
button.vital:hover strong { color: var(--hex); }
.vital small { font: 500 0.64rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--latao); }
.vital strong { font: 300 1.9rem/1.25 var(--corpo); font-variant-numeric: tabular-nums; transition: color 0.3s; font-weight: 300; }
.vital em { font: 400 0.8rem var(--corpo); color: var(--suave); font-style: normal; }
.ficha-colunas { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 2.8rem; align-items: start; }
.coluna { display: flex; flex-direction: column; gap: 1.8rem; min-width: 0; }
.bloco { border-top: 1px solid var(--fio-forte); padding-top: 0.65rem; display: flex; flex-direction: column; gap: 0.7rem; }
.bloco > h2 { font: 500 0.72rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 0.1rem; color: var(--latao); }
.bloco .meta { margin: 0; }
.escolhas { display: grid; gap: 0.6rem; }
.pericias-lista { list-style: none; margin: 0; padding: 0; columns: 2 230px; column-gap: 2rem; }
.pericias-lista li { break-inside: avoid; }
.pericias-grupo { margin: 0 0 0.9rem; }
.pericias-grupo > span { display: block; padding-bottom: 0.15rem; }
.pericia { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 0.55rem; align-items: center; width: 100%; padding: 0.3rem 0; background: none; border: 0; border-bottom: 1px solid var(--fio-leve); text-align: left; color: var(--papel); }
.pericia .marca { width: 9px; height: 9px; border: 1px solid var(--suave); transform: rotate(45deg); justify-self: center; transition: background 0.25s, border-color 0.25s; }
.pericia.treinada .marca { background: var(--hex); border-color: var(--hex); }
.pericia small { font: 400 0.75rem var(--mono); }
.pericia strong { font: 500 0.95rem var(--mono); font-variant-numeric: tabular-nums; min-width: 2.6ch; text-align: right; transition: color 0.2s; }
.pericia:hover strong { color: var(--hex); }
.ataque { display: grid; gap: 0.55rem; }
.ataque-linha { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; }
.valor { background: none; border: 0; border-bottom: 1px solid var(--fio-forte); padding: 0 0.2em 0.15em; display: flex; flex-direction: column; text-align: left; font: 400 1.1rem/1.25 var(--corpo); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--papel); transition: color 0.15s, border-color 0.15s; }
.valor small { font: 500 0.58rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--latao); }
button.valor:hover { color: var(--hex); border-color: var(--hex); }
.tracos { list-style: none; margin: 0; padding: 0; font-size: 0.95rem; }
.tracos li { padding: 0.25rem 0; border-bottom: 1px solid var(--fio-leve); }
.tracos strong { font-weight: 500; color: var(--latao-claro); }
.ficha-rodape { display: flex; justify-content: flex-end; margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--fio); }

/* conta */
.opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 1.5rem; }
.opcao { text-align: left; background: none; border: 0; border-top: 1px solid var(--fio); padding: 0.75rem 0 1rem; display: flex; flex-direction: column; gap: 0.45rem; color: var(--papel); transition: border-color 0.3s; }
.opcao strong { font: 400 1.4rem var(--display); transition: color 0.3s; }
.opcao:hover strong { color: var(--latao-claro); }
.opcao.ativo { border-color: var(--latao); }
.opcao.ativo strong { color: var(--hex); }
.amostra { display: flex; gap: 4px; }
.amostra i { width: 22px; height: 6px; }

/* dados */
.dados-abrir { position: fixed; right: 1.1rem; bottom: 1.1rem; width: 58px; height: 64px; background: var(--latao); border: 0; color: var(--tinta); font: 500 0.82rem var(--mono); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); z-index: 45; transition: background 0.3s, transform 0.4s var(--curva); }
.dados-abrir:hover { background: var(--latao-claro); transform: rotate(30deg); }
.dados-painel { position: fixed; right: 1.1rem; bottom: 1.1rem; width: min(370px, calc(100vw - 2.2rem)); max-height: calc(100vh - 6rem); display: flex; flex-direction: column; gap: 0.75rem; background: var(--tinta-2); border: 1px solid var(--fio-forte); padding: 0.95rem; z-index: 45; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55); }
.dados-painel header { display: flex; justify-content: space-between; align-items: center; }
.dados-painel header .linha { display: flex; gap: 1rem; }
.dados-bandeja { position: relative; flex: none; height: 190px; background: var(--mesa); border: 1px solid var(--fio); overflow: hidden; }
.dados-bandeja::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5'%3E%3Cpath d='M14 0 28 8v16L14 32 0 24V8zM14 32v16.5' fill='none' stroke='%23c9a86a' stroke-opacity='.09' stroke-width='1'/%3E%3C/svg%3E"); }
.dados-bandeja canvas { position: relative; display: block; width: 100%; height: 100%; }
.dados-botoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3rem; }
.dados-botoes button { background: none; border: 1px solid var(--fio); min-height: 34px; padding: 0.3em 0; font: 500 0.76rem var(--mono); color: var(--papel); transition: border-color 0.2s, color 0.2s; }
.dados-botoes button:hover { border-color: var(--latao); color: var(--latao-claro); }
.dados-form { display: grid; grid-template-columns: minmax(0, 1fr) 64px auto; gap: 0.6rem; align-items: end; }
.dados-form .btn { padding-inline: 1.2em; }
.dados-form input { font-family: var(--mono); font-size: 0.95rem; }
.dados-opcoes { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.dados-opcoes .alternar { font-size: 0.85rem; color: var(--suave); }
.dados-log { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.55rem; min-height: 2rem; }
.dados-log li { display: grid; grid-template-columns: 3ch minmax(0, 1fr); gap: 0.8rem; align-items: center; padding-top: 0.5rem; border-top: 1px solid var(--fio-leve); }
.dados-log li:first-child { border-top: 0; padding-top: 0; }
.dados-log div { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.dados-log strong { font-weight: 500; font-size: 0.95rem; }
.dados-log small { font: 400 0.74rem var(--mono); }
.dados-total { font: 300 1.85rem/1 var(--corpo); color: var(--hex); text-align: right; font-variant-numeric: tabular-nums; }
.dados-log .tag { font: 500 0.62rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; margin-right: 0.6em; }
.tag.ok { color: var(--ok); }
.tag.falha { color: var(--perigo); }
.tag.dobles { color: var(--latao-claro); }
.dados-log .vazio { display: block; color: var(--suave); font-size: 0.9rem; border: 0; }

/* movimento reduzido */
.calmo *, .calmo *::before, .calmo *::after { animation: none !important; transition-duration: 0.01ms !important; }

@media (max-width: 960px) {
  .compendio { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding-top: 1.2rem; }
  .compendio-menu { position: static; flex-direction: row; overflow-x: auto; gap: 1.2rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--fio); }
  .compendio-menu a { border-top: 0; white-space: nowrap; }
  .ficha-colunas { grid-template-columns: minmax(0, 1fr); }
  .ficha-stats { grid-template-columns: repeat(3, 1fr); row-gap: 0.8rem; }
}
@media (max-width: 680px) {
  body { font-size: 1rem; }
  .app { padding-bottom: 3.4rem; }
  .nav { grid-template-columns: 1fr auto; }
  .nav-links { position: fixed; inset: auto 0 0; z-index: 40; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--tinta-2); border-top: 1px solid var(--fio-forte); padding-bottom: env(safe-area-inset-bottom); }
  .nav-links a { text-align: center; padding: 1.05rem 0; }
  .nav-links a::after { bottom: -1px; left: 25%; right: 25%; }
  .dados-abrir { bottom: 4.4rem; right: 0.9rem; }
  .dados-painel { right: 0; left: 0; bottom: 3.45rem; width: auto; max-height: calc(100vh - 7.5rem); border-inline: 0; border-bottom: 0; }
  .dados-bandeja { height: 170px; }
  .pagina { padding-top: 1.4rem; }
  .cartoes { grid-template-columns: minmax(0, 1fr); }
  .ficha-cabecalho { grid-template-columns: 76px minmax(0, 1fr); gap: 0.9rem; }
  .ficha-cabecalho .monograma { font-size: 2.2rem; }
  .ficha-identidade { display: contents; }
  .ficha-nome { grid-column: 2; align-self: end; margin: 0 !important; }
  .ficha-campos { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
  .ficha-vitais { grid-template-columns: repeat(2, 1fr); }
  .vital:nth-child(3) { border-left: 0; }
  .vital:nth-child(n+3) { border-top: 1px solid var(--fio); }
  .pericias-lista { columns: 1; }
  .rodape { padding-right: var(--borda); }
  .paginacao a strong { font-size: 1.15rem; }
}