:root {
  --bg: #f6f7f9; --card: #ffffff; --texto: #1c1f26; --muted: #5b6270; --linha: #e3e6eb;
  --polo-a: rgba(199,91,122,.55); --polo-b: rgba(76,132,196,.55); --neutro-trilho: rgba(140,148,160,.25); --polo-a-texto: #a8546e; --polo-b-texto: #3a6ea8;
  --primaria: #1e3a5f; --primaria-2: #2c5282; --ok: #2f6f4e; --alerta: #8a6d1f; --ruim: #9b2c3a;
  --raio: 6px; --sombra: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --polo-a: rgba(224,138,164,.45); --polo-b: rgba(122,167,216,.45); --neutro-trilho: rgba(154,161,173,.20); --polo-a-texto: #e39ab0; --polo-b-texto: #8fb6e0; --bg: #131519; --card: #1b1e24; --texto: #e9ebef; --muted: #9aa1ad; --linha: #2a2e36; --primaria: #5b8fc9; --primaria-2: #7aa7d8; }
}
:root[data-theme="dark"] { --polo-a: rgba(224,138,164,.45); --polo-b: rgba(122,167,216,.45); --neutro-trilho: rgba(154,161,173,.20); --polo-a-texto: #e39ab0; --polo-b-texto: #8fb6e0; --bg: #131519; --card: #1b1e24; --texto: #e9ebef; --muted: #9aa1ad; --linha: #2a2e36; --primaria: #5b8fc9; --primaria-2: #7aa7d8; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--texto); }
a { color: var(--primaria); }
.marca img { vertical-align: -4px; }
.topo { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--linha); background: var(--card); }
.marca { font-weight: 700; text-decoration: none; color: var(--texto); font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; }
.tag { font-size: .8rem; color: var(--muted); }
.app { max-width: 880px; margin: 0 auto; padding: 24px 16px 60px; }
.rodape { max-width: 880px; margin: 0 auto; padding: 24px 16px 40px; color: var(--muted); font-size: .85rem; border-top: 1px solid var(--linha); }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 8px; letter-spacing: -.01em; }
h2 { font-size: 1.35rem; margin: 28px 0 10px; }
h3 { font-size: 1.05rem; margin: 18px 0 6px; }
p.lead { color: var(--muted); font-size: 1.05rem; margin: 0 0 20px; }
.card { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px; margin-bottom: 16px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cargo-card { display: block; text-decoration: none; color: inherit; transition: transform .1s; }
@media (hover: hover) and (pointer: fine) { .cargo-card:hover { transform: translateY(-2px); } }
.cargo-card .n { font-size: .85rem; color: var(--muted); }
.cargo-card h3 { margin: 4px 0 6px; }
.cargo-card.desativado { opacity: .5; pointer-events: none; }
.btn { display: inline-block; padding: 10px 18px; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--card); color: var(--texto); cursor: pointer; font-size: .95rem; text-decoration: none; }
.btn.primario { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.btn.primario:disabled { opacity: .45; cursor: not-allowed; }
.btn.link { border: none; background: none; color: var(--muted); text-decoration: underline; padding: 6px; }
.barra-progresso { height: 6px; background: var(--linha); border-radius: 3px; overflow: hidden; margin: 6px 0 18px; }
.barra-progresso > div { height: 100%; background: var(--primaria); transition: width .2s; }
.linha-tema { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.tema-badge.prio { color: var(--primaria-2); margin-bottom: 10px; }
.tema-badge { display: inline-block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.pergunta { font-size: 1.3rem; font-weight: 600; line-height: 1.35; margin: 0 0 6px; }
.explicacao { color: var(--muted); margin: 0 0 8px; font-size: .95rem; }
.explicacao:last-of-type { margin-bottom: 18px; }
.explicacao.direcao { padding-left: 10px; border-left: 2px solid var(--linha); }
.explicacao.direcao b { color: var(--texto); font-weight: 600; }
.escala { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.escala button { -webkit-tap-highlight-color: transparent; padding: 14px 6px; font-weight: 500; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--card); color: var(--texto); cursor: pointer; font-size: .82rem; line-height: 1.2; }
@media (hover: hover) and (pointer: fine) { .escala button:hover { border-color: var(--primaria-2); } }
.escala button.ativo { border-color: var(--primaria); background: var(--primaria); color: #fff; }
.escala button b { display: block; font-size: 1.25rem; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .escala { grid-template-columns: repeat(5, 1fr); } .escala button { font-size: .7rem; padding: 10px 2px; } }
.peso { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--linha); }
.peso .rotulo { font-size: .9rem; color: var(--muted); margin-bottom: 8px; }
.peso input[type=range] { width: 100%; accent-color: var(--primaria); margin: 6px 0; }
.nav { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; gap: 10px; flex-wrap: wrap; }
.ranking .item { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.ranking .item:last-child { border-bottom: none; }
.ranking .pos { font-size: 1.4rem; font-weight: 700; color: var(--muted); text-align: center; }
.ranking .nome { font-weight: 600; }
.ranking .sub { color: var(--muted); font-size: .85rem; }
.ranking .pct { font-size: 1.5rem; font-weight: 700; }
.ranking .barra { height: 6px; background: var(--linha); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.ranking .barra > div { height: 100%; }
.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th, .tabela td { padding: 8px 10px; border-bottom: 1px solid var(--linha); text-align: left; }
.tabela th { color: var(--muted); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; }
.tabela td.num { text-align: right; font-variant-numeric: tabular-nums; }
.scroll { overflow-x: auto; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.chip.alta { background: rgba(46,139,87,.15); color: var(--ok); }
.chip.media { background: rgba(184,134,11,.15); color: var(--alerta); }
.chip.baixa { background: rgba(178,58,72,.15); color: var(--ruim); }
.chip.na { background: var(--bg); color: var(--muted); border: 1px solid var(--linha); }
details.pq { border: 1px solid var(--linha); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; background: var(--card); }
details.pq summary { cursor: pointer; font-weight: 600; }
details.pq summary .sua { color: var(--muted); font-weight: 400; font-size: .9rem; }
.posicao { padding: 10px 0; border-top: 1px solid var(--linha); }
.posicao .cab { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.posicao .just { font-size: .93rem; margin: 4px 0; }
.posicao .cit { font-size: .88rem; color: var(--muted); font-style: italic; margin: 4px 0; padding-left: 10px; border-left: 3px solid var(--linha); }
.posicao .fonte { font-size: .82rem; }
.legenda-cor { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
canvas { max-width: 100%; }
.grafico { position: relative; height: 380px; }
.aviso { background: rgba(184,134,11,.1); border: 1px solid rgba(184,134,11,.4); border-radius: 8px; padding: 10px 14px; font-size: .9rem; }
.mini { font-size: .85rem; color: var(--muted); }
kbd { font-family: inherit; background: var(--bg); border: 1px solid var(--linha); border-radius: 4px; padding: 0 5px; font-size: .8rem; }

.modo .rotulo { font-weight: 600; margin-bottom: 8px; }
.modo .opcoes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.modo label { padding: 8px 14px; border-radius: var(--raio); border: 1px solid var(--linha); cursor: pointer; }
.modo label.ativo { background: var(--primaria); color: #fff; border-color: var(--primaria); }
.modo input[type=radio] { display: none; }
.pct.apagado { opacity: .4; }
.cit-mini { font-style: italic; max-width: 320px; margin-top: 4px; }
.ref { opacity: .7; font-weight: 400; text-transform: none; letter-spacing: 0; }

.resposta { display: flex; gap: 16px; align-items: stretch; }
.escala button { height: 100%; }
.resposta .escala { flex: 1; }
.peso-v { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 56px; padding: 4px 0; border-left: 1px dashed var(--linha); }
.peso-v .rotulo { font-size: .8rem; color: var(--muted); }
input[type=range].vertical { appearance: slider-vertical; -webkit-appearance: slider-vertical; writing-mode: vertical-lr; direction: rtl; width: 28px; height: 72px; accent-color: var(--primaria); margin: 6px 0; }
.modo input[type=range]:not(.vertical) { width: 100%; accent-color: var(--primaria); margin: 6px 0; }
.eixos-peso { margin-top: 12px; }
.eixos-peso summary { cursor: pointer; font-weight: 600; }
.grade-eixos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 20px; margin: 10px 0; }
.grade-eixos label { display: grid; grid-template-columns: 1fr 120px 44px; gap: 8px; align-items: center; font-size: .9rem; }
.grade-eixos input { accent-color: var(--primaria); }
.grade-eixos b { text-align: right; font-variant-numeric: tabular-nums; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--texto); color: var(--bg); padding: 10px 16px; border-radius: 8px; font-size: .9rem; box-shadow: var(--sombra); z-index: 10; }
@media (max-width: 640px) {
  .resposta { flex-direction: column; gap: 12px; }
  .escala { gap: 5px; }
  .escala button { padding: 10px 2px; font-size: .68rem; border-radius: 8px; }
  .escala button b { font-size: 1.1rem; }
  .peso-v { flex-direction: row; width: 100%; padding: 10px 0 0; border-left: none; border-top: 1px dashed var(--linha); gap: 12px; align-items: center; }
  .peso-v .rotulo { font-size: .9rem; }
  input[type=range].vertical { appearance: auto; -webkit-appearance: auto; writing-mode: horizontal-tb; direction: ltr; width: 100%; height: auto; flex: 1; margin: 0; }
  .peso-v b { min-width: 44px; text-align: right; }
}

.opcoes-inicio { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.opcoes-inicio .mini { flex-basis: 100%; }
.lista-eixos { display: flex; flex-direction: column; gap: 10px; }
.eixo-item { display: grid; grid-template-columns: 1fr 160px 48px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.eixo-item:last-child { border-bottom: none; }
.eixo-item input { accent-color: var(--primaria); }
.eixo-item .valor { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .eixo-item { grid-template-columns: 1fr 100px 44px; } }

.nav-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nav-2 .btn { width: 100%; text-align: center; }


.modos { display: flex; flex-direction: column; gap: 10px; }
.modo-op { display: block; padding: 14px 16px; border: 2px solid var(--linha); border-radius: 12px; cursor: pointer; }
.modo-op.ativo { border-color: var(--primaria); }
.modo-op input { margin-right: 8px; }
.modo-op b { font-size: 1.05rem; }

/* ---- calibração ---- */
.centro { text-align: center; }
.intro { text-align: center; max-width: 640px; margin: 0 auto; }
.intro h1 { text-wrap: balance; }
.lista-temas { text-align: left; max-width: 520px; margin: 22px auto 26px; }
.rotulo-sec { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.lista-temas ol { columns: 2; column-gap: 28px; margin: 0; padding-left: 20px; font-size: .92rem; line-height: 1.7; }
@media (max-width: 520px) { .lista-temas ol { columns: 1; } }
.btn.grande { display: block; width: 100%; max-width: 420px; margin: 0 auto 14px; padding: 14px 22px; font-size: 1.05rem; font-weight: 600; text-align: center; }
.btn.ghost { border: 1px solid var(--linha); background: transparent; color: var(--muted); }
.btn.ghost.ativo { border-color: var(--primaria); color: var(--texto); }
@media (hover: hover) and (pointer: fine) { .btn.ghost:hover { border-color: var(--primaria); color: var(--texto); } }
.topo-passo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.topo-passo .btn.link { padding: 6px 0; text-decoration: none; }
.duelo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 14px; }
.duelo-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 140px; padding: 20px 16px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--card); color: var(--texto); cursor: pointer; text-align: center; transition: border-color .08s; }
@media (hover: hover) and (pointer: fine) { .duelo-btn:hover { border-color: var(--primaria-2); } }
.duelo-btn b { font-size: 1.1rem; line-height: 1.25; text-wrap: balance; }
.duelo-btn.ativo { border-color: var(--primaria); background: var(--primaria); color: #fff; }
.duelo-btn.ativo .mini { color: rgba(255,255,255,.85); }
@media (max-width: 640px) { .duelo { gap: 10px; } .duelo-btn { min-height: 120px; padding: 16px 10px; } .duelo-btn b { font-size: .98rem; } }

/* calibração em uma tela só, sem rolagem */
body.tela-cheia .rodape { display: none; }
body.tela-cheia .app { padding-top: 12px; padding-bottom: 12px; }
.cabe-na-tela { display: flex; flex-direction: column; gap: 8px; min-height: calc(100dvh - 92px); }
.intro.compacta { margin: 0 auto; }
.intro.compacta h1 { font-size: clamp(1.15rem, 4.2vw, 1.6rem); margin: 0 0 4px; }
.intro.compacta .lead { font-size: .88rem; margin: 0; }
.cabe-na-tela .faixas { flex: 0 0 auto; margin: 0; gap: 6px; }
.cabe-na-tela .faixa { display: flex; flex-direction: column; min-height: 0; padding: 5px 9px 6px; }

.cabe-na-tela .faixa-topo { margin-bottom: 4px; }
.cabe-na-tela .alvo { min-height: 0; gap: 6px; overflow: visible; align-content: start; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cabe-na-tela .alvo .vazio { display: none; }
.cabe-na-tela .faixa:not(:has(.chip-tema)) .alvo { min-height: 4px; }
.cabe-na-tela .chip-tema { padding: 6px 9px; font-size: .84rem; gap: 6px; }
.cabe-na-tela .chip-tema .ico { font-size: .95rem; }
.cabe-na-tela .contagem { margin: 0; font-size: .8rem; }
.cabe-na-tela .btn.grande { margin-bottom: 6px; padding: 11px 18px; font-size: 1rem; }
.cabe-na-tela .acoes-sec .btn { padding: 7px 12px; font-size: .85rem; }
.cabe-na-tela .acoes-sec .btn .mini { display: none; }
@media (max-width: 640px) {
  .cabe-na-tela { min-height: calc(100dvh - 76px); gap: 6px; }
  .cabe-na-tela .faixa-topo .mini { display: none; }
  .cabe-na-tela .chip-tema { padding: 5px 7px; font-size: .78rem; gap: 4px; }
  .cabe-na-tela .faixa-nome { font-size: .85rem; }
}
@media (max-height: 720px) {
  .intro.compacta .lead { display: none; }
  .intro.compacta h1 { font-size: clamp(1.05rem, 3.8vw, 1.3rem); }
  .cabe-na-tela .contagem { font-size: .76rem; }
  .cabe-na-tela .chip-tema { padding: 5px 8px; }
  .cabe-na-tela .faixa { padding: 4px 9px 5px; }
}

/* faixas de bônus por tema (calibração) */
.faixas { display: flex; flex-direction: column; gap: 10px; margin: 22px 0 14px; }
.faixa { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--card); padding: 10px 12px 12px; }
.faixa.sobre { border-color: var(--primaria); box-shadow: inset 0 0 0 1px var(--primaria); }
.faixa-topo { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.faixa-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; border: 1px solid var(--linha); font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--primaria-2); }
.faixa-nome { font-weight: 600; font-size: .95rem; }
.faixa-bonus { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--primaria-2); }
.faixa-topo .mini { margin-left: auto; }
.alvo { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; min-height: 42px; align-content: start; }
.alvo .vazio { color: var(--muted); font-size: .85rem; padding: 10px 2px; }
.chip-tema { -webkit-tap-highlight-color: transparent; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--bg); color: var(--texto); font-size: .9rem; cursor: grab; touch-action: none; user-select: none; }
@media (hover: hover) and (pointer: fine) { .chip-tema:hover { border-color: var(--primaria-2); } }
.chip-tema .ico { font-size: 1.1rem; line-height: 1; }
.pegar { color: var(--muted); font-size: .95rem; line-height: 1; letter-spacing: -1px; }
.chip-tema.ativo .pegar { color: rgba(255,255,255,.75); }
@media (hover: hover) and (pointer: fine) { .chip-tema:hover .pegar { color: var(--primaria-2); } }
.chip-tema b { font-weight: 600; }
.chip-tema .ex { color: var(--muted); font-size: .78em; line-height: 1.15; }
.chip-tema.ativo .ex { color: rgba(255,255,255,.8); }
.chip-tema.fantasma { opacity: .35; }
.chip-tema.voando { position: fixed; z-index: 20; pointer-events: none; cursor: grabbing; border-color: var(--primaria); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.duelo-btn .ico { font-size: 1.7rem; line-height: 1; }
.contagem { text-align: center; color: var(--muted); font-size: .85rem; margin: 0 0 18px; }
.contagem b { color: var(--texto); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .faixa { padding: 8px 10px 10px; }
  .faixa-topo { flex-wrap: wrap; gap: 6px; }
  .faixa-topo .mini { margin-left: 0; flex-basis: 100%; }
  .chip-tema { padding: 8px 10px; font-size: .85rem; gap: 6px; }
}

/* peso na mesma linha do tema, discreto */
.peso-inline { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: .76rem; color: var(--muted); }
.peso-inline label { text-transform: none; letter-spacing: 0; }
.peso-inline input[type=range] { width: 86px; accent-color: var(--primaria); margin: 0; }
.peso-inline b { color: var(--texto); font-variant-numeric: tabular-nums; min-width: 0; white-space: nowrap; }
@media (max-width: 430px) { .peso-inline { font-size: .68rem; gap: 5px; } .peso-inline input[type=range] { width: 70px; } .tema-badge { font-size: .66rem; } }

/* transição entre perguntas */
.pergunta-card { will-change: opacity, transform; }
.pergunta-card.entrando { animation: perguntaEntra .18s ease-out both; }
.pergunta-card.saindo { animation: perguntaSai .16s ease-in both; }
@keyframes perguntaEntra { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes perguntaSai { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-16px); } }
@media (prefers-reduced-motion: reduce) { .pergunta-card.entrando, .pergunta-card.saindo { animation: none; } }
.escala button.ativo { transition: background-color .1s ease-out; }

/* aperta mais quando a janela é baixa, para os 13 temas caberem com os exemplos */
.cabe-na-tela .faixa:not(:has(.chip-tema)) { padding: 3px 9px; }
.cabe-na-tela .faixa:not(:has(.chip-tema)) .faixa-topo { margin-bottom: 0; }
.cabe-na-tela .faixa-num { width: 20px; height: 20px; font-size: .78rem; }
@media (max-height: 720px) {
  .cabe-na-tela { gap: 4px; }
  .cabe-na-tela .faixas { gap: 4px; }
  .cabe-na-tela .faixa-nome { font-size: .82rem; }
  .cabe-na-tela .faixa:not(:has(.chip-tema)) { padding: 2px 8px; }
  .cabe-na-tela .chip-tema { padding: 5px 8px; font-size: .8rem; }
  .cabe-na-tela .alvo { gap: 3px; }
  .intro.compacta h1 { margin: 0 0 2px; }
  .cabe-na-tela .btn.grande { padding: 9px 16px; font-size: .95rem; margin-bottom: 4px; }
  .cabe-na-tela .acoes-sec .btn { padding: 6px 10px; font-size: .8rem; }
}

/* o botão de seguir fica sempre à vista, mesmo com a lista longa */
.rodape-calib { position: sticky; bottom: 0; z-index: 3; margin-top: auto; padding: 10px 0 6px; background: linear-gradient(to bottom, transparent, var(--bg) 22%); }
.rodape-calib .contagem { margin-bottom: 8px; }
@media (max-width: 430px) {
  .cabe-na-tela .chip-tema { font-size: .72rem; padding: 5px 6px; gap: 4px; }
  .cabe-na-tela .chip-tema .ex { font-size: .74em; }
  .cabe-na-tela .alvo { gap: 5px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.linha-voce { background: rgba(122,167,216,.10); }
.linha-voce td { border-bottom: 2px solid var(--primaria-2); }

.painel-share { margin: 6px 0 18px; }
.painel-share .rotulo-sec { margin-top: 12px; }
.painel-share .rotulo-sec:first-child { margin-top: 0; }
.opcao { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: .95rem; cursor: pointer; }
.opcao input { width: 18px; height: 18px; accent-color: var(--primaria); }

/* bússola de quatro quadrantes */
.bussola { position: relative; width: 100%; max-width: 460px; margin: 6px auto 10px; aspect-ratio: 1; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.quadrante { position: absolute; width: 50%; height: 50%; display: flex; align-items: flex-start; padding: 6px 8px; }
.quadrante span { font-size: .62rem; color: var(--muted); line-height: 1.2; }
.q1 { left: 0; top: 0; background: rgba(224,138,147,.10); }
.q2 { right: 0; top: 0; background: rgba(122,167,216,.12); }
.q3 { left: 0; bottom: 0; background: rgba(127,201,162,.10); }
.q4 { right: 0; bottom: 0; background: rgba(214,183,116,.10); }
.q2 span, .q4 span { margin-left: auto; text-align: right; }
.q3, .q4 { align-items: flex-end; }
.eixo-h { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--linha); }
.eixo-v { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--linha); }
.ponto { position: absolute; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); }
.ponto.voce { width: 20px; height: 20px; background: var(--texto); border: 3px solid var(--bg); z-index: 3; }
.ponto.cand { opacity: .9; z-index: 2; }
.bussola .rot { position: absolute; font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.rot.esq { left: 6px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; }
.rot.dir { right: 6px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: right center; }
.rot.cima { top: 4px; left: 50%; transform: translateX(-50%); }
.rot.baixo { bottom: 4px; left: 50%; transform: translateX(-50%); }
.voce-coord { text-align: center; font-size: .95rem; margin: 4px 0 10px; }
.voce-coord b { color: var(--primaria-2); }

/* mapa dos eixos: onde o eleitor cai em cada um */
.eixos-mapa { display: flex; flex-direction: column; gap: 14px; margin: 14px 0 10px; }
.eixo-linha { display: flex; flex-direction: column; gap: 5px; }
.eixo-nome { font-size: .88rem; font-weight: 600; }
.eixo-trilho { position: relative; height: 12px; border-radius: 6px; background: linear-gradient(to right, var(--polo-a), var(--neutro-trilho) 50%, var(--polo-b)); }
.ponto-eixo { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--card); }
.ponto-eixo.voce { background: var(--texto); width: 18px; height: 18px; z-index: 3; box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--texto); }
.ponto-eixo.cand { opacity: 1; z-index: 2; }
.eixo-polos { display: flex; justify-content: space-between; font-size: .72rem; gap: 12px; }
.eixo-polos span:first-child { color: var(--polo-a-texto); }
.eixo-polos span:last-child { color: var(--polo-b-texto); text-align: right; }
.legenda-mapa { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); margin-top: 12px; }
.legenda-mapa .ponto-eixo { position: static; transform: none; display: inline-block; }

/* filtro de quanto a ausência de proposta pune */
.filtro-punicao { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.filtro-punicao .btn { flex: 1 1 auto; min-width: 120px; text-align: center; font-size: .88rem; padding: 9px 12px; }

/* respostas salvas e ações de arquivo */
.linha-salvar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.linha-salvar input { flex: 1; min-width: 220px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--bg); color: var(--texto); font-size: .95rem; }
.lista-salvos { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.salvo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.salvo:last-child { border-bottom: none; }
.acoes-item { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 520px) { .salvo { align-items: flex-start; flex-direction: column; } .acoes-item .btn { padding: 8px 12px; font-size: .88rem; } }

.acoes-sec { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.acoes-sec .btn { text-align: center; }
.acoes-sec .btn .mini { display: block; }

/* ---- resultado ---- */
h2 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 30px 0 10px; }
.ajustes { margin-top: 16px; }
.ajustes summary { cursor: pointer; font-weight: 600; }
.ajuste { margin-top: 16px; }
.ajuste .rotulo { margin: 6px 0; }
.ajuste input[type=range]:not([data-tema]) { width: 100%; accent-color: var(--primaria); }
.ranking .item { grid-template-columns: 40px 1fr auto; }
.ranking .pos { font-size: 1.1rem; }
.ranking .pct { font-size: 1.35rem; }

/* o clique não deixa anel de foco preso; teclado continua com foco visível */
.escala button:focus:not(:focus-visible), .chip-tema:focus:not(:focus-visible), .btn:focus:not(:focus-visible) { outline: none; }