/* Brasil Simulator — tema claro */
:root {
  --bg: #eef2f8; --bg2: #f6f8fc; --panel: #ffffff; --panel2: #f3f6fb; --panel3: #e8eef7;
  --line: #dde4ef; --line2: #c8d3e3; --ink: #18243a; --muted: #5f6c82;
  --navy: #173a6b; --navy2: #0f2b55; --gold: #f2b01e; --gold2: #a86f00; --accent: #1f9d55;
  --good: #188a4a; --bad: #d23f3f; --warn: #c27800; --blue: #2563eb;
  --shadow: 0 2px 10px rgba(23, 42, 80, .08); --radius: 14px;
  --fh: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box }
html, body { margin: 0; color: var(--ink); font: 15px/1.45 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; min-height: 100% }
body { background: radial-gradient(1000px 500px at 50% -120px, #dce7f7 0%, transparent 70%), var(--bg); background-attachment: fixed }
a { color: var(--blue) }
h1, h2, h3 { font-family: var(--fh); letter-spacing: .3px; margin: .1em 0 .55em; line-height: 1.15 }
h2 { font-size: 1.22rem; text-transform: uppercase; color: var(--navy) }
h3 { font-size: 1.05rem; color: var(--ink) }
.muted { color: var(--muted) } .small { font-size: .84rem } .good { color: var(--good) } .bad { color: var(--bad) } .warn { color: var(--warn) }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0 }
details summary { cursor: pointer; color: var(--blue); margin: 6px 0 }

/* Botões */
button { font: inherit; cursor: pointer; color: var(--ink); border: 1px solid var(--line2); border-radius: 10px; padding: 8px 14px; background: #fff; box-shadow: 0 1px 2px rgba(23, 42, 80, .06); transition: transform .08s, border-color .15s, background .15s }
button:hover:not(:disabled) { border-color: var(--blue); background: #f5f8ff }
button:active:not(:disabled) { transform: translateY(1px) }
button:disabled { opacity: .45; cursor: not-allowed }
button.primary { background: linear-gradient(180deg, #ffd76a, var(--gold)); color: #3a2600; border-color: #e6a20f; font-weight: 700; font-family: var(--fh); letter-spacing: .4px; text-transform: uppercase }
button.primary:hover:not(:disabled) { background: linear-gradient(180deg, #ffe08a, #f7bb34); border-color: #d99500 }
button.sel { border-color: var(--blue); background: #eaf1ff; box-shadow: 0 0 0 2px rgba(37, 99, 235, .18) }
input, select { font: inherit; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line2); background: #fff; color: var(--ink); max-width: 100% }
input:focus, select:focus { outline: 2px solid var(--blue); outline-offset: 1px }
input[type=range] { accent-color: var(--blue); padding: 0 }

/* Painéis */
.wrap { max-width: 1440px; margin: 0 auto; padding: 16px 16px 112px }
.card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--shadow); margin-bottom: 14px; min-width: 0 }
.card::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--navy), var(--blue)); opacity: .85 }
.card h2 { display: flex; align-items: center; gap: 8px }
.grid { display: grid; gap: 14px; grid-template-columns: minmax(260px, 310px) minmax(0, 1fr) minmax(270px, 340px) }
.grid2 { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
@media (max-width: 1150px) { .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) } .grid > .col-c { grid-column: 1 / -1; order: -1 } }
@media (max-width: 760px) { .grid, .grid2 { grid-template-columns: minmax(0, 1fr) } }

/* Barra superior */
header.top { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 18px; padding: 8px 18px 10px;
  background: linear-gradient(180deg, var(--navy), var(--navy2)); color: #fff; border-bottom: 3px solid var(--gold); box-shadow: 0 4px 16px rgba(15, 43, 85, .25) }
@media (max-width: 900px) { header.top { grid-template-columns: 1fr } }
.idt { display: flex; align-items: center; gap: 10px; min-width: 0 }
.emblem { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: #fff; border: 2px solid var(--gold); flex-shrink: 0; display: grid; place-items: center }
.nm { font-family: var(--fh); font-weight: 700; font-size: 1.18rem; line-height: 1.1 }
.sub2 { font-size: .8rem; color: #c9d6ec }
.tks { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px }
.tk > div { min-width: 0 }
.tk { display: flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: 10px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); min-width: 0 }
.tk .i { font-size: 17px }
.tk small { display: block; font-size: .68rem; color: #c9d6ec; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tk b { display: block; font-family: var(--fh); font-size: 1.08rem; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.turn { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end }
.date { text-align: center; font-family: var(--fh); line-height: 1.05; min-width: 150px }
.date b { font-size: 1.2rem; display: block; color: #ffe08a }
.date span { font-size: .75rem; color: #c9d6ec }
.mbar { width: 140px; height: 5px; margin: 4px auto; background: rgba(255, 255, 255, .2); border-radius: 4px; overflow: hidden }
.mbar i { display: block; height: 100%; background: var(--gold) }
.speed { display: flex; gap: 3px; background: rgba(255, 255, 255, .1); padding: 3px; border-radius: 10px }
.speed button { padding: 5px 9px; background: transparent; border-color: transparent; color: #fff; box-shadow: none }
.speed button:hover:not(:disabled) { background: rgba(255, 255, 255, .15); border-color: transparent }
.speed button.sel { background: var(--gold); color: #3a2600; box-shadow: none }
.apbox { text-align: center; line-height: 1 }
.apbox small { display: block; font-size: .68rem; color: #c9d6ec; text-transform: uppercase }
.apbox b { font-family: var(--fh); font-size: 1.25rem; color: #fff } .apbox b span { font-size: .9rem; color: #c9d6ec }
.ap { display: flex; gap: 3px; justify-content: center; margin-top: 3px }
.ap span { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--gold); background: transparent }
.ap span.on { background: var(--gold) }
.gear { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); color: #fff }

/* Menu inferior */
nav.dock { position: fixed; z-index: 9; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 4px; padding: 6px; border-radius: 18px; background: rgba(255, 255, 255, .97); border: 1px solid var(--line2); box-shadow: 0 8px 28px rgba(23, 42, 80, .18); max-width: calc(100% - 24px); overflow-x: auto }
nav.dock button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 80px; padding: 6px 8px; border-radius: 12px; font-size: .74rem; font-weight: 600; color: var(--muted); background: transparent; border-color: transparent; box-shadow: none }
nav.dock button .i { font-size: 22px; line-height: 1.1 }
nav.dock button.sel { background: #eaf1ff; color: var(--navy); border-color: #bcd0f5 }
nav.dock .dot { position: absolute; top: 5px; right: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px #fff }
@media (max-width: 600px) { nav.dock button { min-width: 62px; font-size: .68rem } }
.subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px }
.subtabs button { border-radius: 999px; padding: 6px 14px; font-weight: 600 }

/* Chips, barras */
.chip { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: .78rem; font-weight: 700; color: #fff; background: var(--c, #666); white-space: nowrap }
.tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: .76rem; border: 1px solid var(--line2); background: var(--panel2); color: var(--muted) }
.bar { height: 9px; border-radius: 6px; background: var(--panel3); overflow: hidden }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), #3fb7ff); border-radius: 6px }
.stat { margin: 9px 0 }
.stat .row { display: flex; justify-content: space-between; gap: 8px; font-size: .88rem; margin-bottom: 3px }
.stat .row b { font-family: var(--fh); font-size: 1.02rem }
.hrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px }
.stack { display: flex; height: 20px; border-radius: 6px; overflow: hidden; background: var(--panel3) }
.stack i { display: block; height: 100% }

/* Ações */
.acts { display: grid; grid-template-columns: 1fr; gap: 7px }
.act { display: grid; grid-template-columns: 40px 1fr; gap: 1px 10px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 12px }
.act .i { grid-row: span 3; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; background: #eef3fb; border: 1px solid var(--line) }
.act b { font-family: var(--fh); font-size: 1rem; line-height: 1.1; color: var(--navy) }
.act small { color: var(--muted); font-size: .75rem; line-height: 1.25 }
.act .cost { color: var(--gold2); font-weight: 600 }
.grp { font-family: var(--fh); text-transform: uppercase; letter-spacing: 1px; font-size: .8rem; color: var(--muted); margin: 12px 0 6px; display: flex; align-items: center; gap: 8px }
.grp::after { content: ""; flex: 1; height: 1px; background: var(--line) }

/* Candidato */
.cand-top { display: flex; align-items: center; gap: 14px; margin-bottom: 8px }
.cand-top svg { flex-shrink: 0 }
.cand-nome { font-family: var(--fh); font-weight: 700; font-size: 1.3rem; color: var(--navy); line-height: 1.1 }
.rival { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 10px 0; background: var(--bg2) }
.rival .btns { margin-top: 6px; gap: 6px }
.rival button.small, .hrow button.small { padding: 5px 10px; font-size: .8rem }

/* Mapa */
.mapwrap { position: relative }
.mapa { width: 100%; height: auto; display: block; max-height: 64vh }
.mapa path { stroke: #fff; stroke-width: 1.6; cursor: pointer; transition: filter .15s }
.mapa path:hover { filter: brightness(1.12) saturate(1.2) }
.mapa path.me { stroke: var(--gold); stroke-width: 4.5 }
.mapa path.selu { stroke: var(--navy); stroke-width: 3.5 }
.mapa text { font: 700 17px var(--fh); fill: #fff; paint-order: stroke; stroke: rgba(15, 30, 55, .7); stroke-width: 3.5px; pointer-events: none }
.mapmodes { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px }
.mapmodes button { padding: 4px 11px; font-size: .8rem; border-radius: 999px }
.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .78rem; color: var(--muted); margin-top: 6px }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 4px; vertical-align: -1px }
.ufinfo { position: absolute; left: 6px; bottom: 6px; width: 260px; max-width: 60%; background: rgba(255, 255, 255, .96); border: 1px solid var(--line2); border-left: 4px solid var(--gold); border-radius: 12px; padding: 10px 12px; font-size: .82rem; box-shadow: var(--shadow) }
.ufinfo h3 { margin: 0 0 4px; color: var(--navy) }
@media (max-width: 600px) { .ufinfo { position: static; width: auto; max-width: none; margin-top: 8px } }

/* Medidores */
.gauges { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px }
.gauge { text-align: center; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 4px }
.gauge svg { width: 74px; height: 74px; display: block; margin: 0 auto }
.gauge .lbl { font-size: .8rem; color: var(--muted) }
.gauge .d { font-size: .75rem }

/* Notícias */
.news { max-height: 620px; overflow: auto; padding-right: 4px }
.news .it { padding: 8px 10px; margin-bottom: 7px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); border-left: 4px solid var(--line2); font-size: .86rem }
.news .it.bom { border-left-color: var(--good) } .news .it.ruim { border-left-color: var(--bad) }
.news .d { display: block; color: var(--gold2); font-family: var(--fh); font-size: .78rem; letter-spacing: .4px; font-weight: 700 }
.paper { font-family: Georgia, "Times New Roman", serif; text-align: center; border-bottom: 3px double var(--line2); margin-bottom: 10px; padding-bottom: 4px; color: var(--navy) }
.paper b { font-size: 1.35rem; letter-spacing: 1px } .paper small { display: block; color: var(--muted); font-size: .72rem }
.log { max-height: 520px; overflow: auto; font-size: .88rem }
.log div { padding: 6px 0; border-bottom: 1px dashed var(--line) }
.log .d { color: var(--gold2); font-size: .75rem; margin-right: 6px; font-family: var(--fh); font-weight: 700 }

/* Tabelas */
table { border-collapse: collapse; width: 100%; font-size: .85rem }
th, td { padding: 6px 7px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top }
th { font-weight: 600; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; background: var(--bg2) }
tr:hover td { background: #f8fafe }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums }
td:first-child { white-space: nowrap }
.tscroll { overflow-x: auto }
.heat td.h { text-align: center; font-weight: 700; color: #102033 }

/* Modais */
.modal { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 34px 12px; background: rgba(20, 35, 60, .45); backdrop-filter: blur(3px) }
.modal.hidden { display: none }
.modal-box { width: 100%; max-width: 860px; border-radius: 18px; padding: 0 20px 18px; background: #fff; border: 1px solid var(--line2); box-shadow: 0 20px 60px rgba(15, 30, 60, .3); animation: pop .18s ease-out }
@keyframes pop { from { transform: scale(.97); opacity: 0 } to { transform: none; opacity: 1 } }
.mhead { display: flex; align-items: center; gap: 12px; margin: 0 -20px 14px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, #eaf1ff, #fff 70%); border-radius: 18px 18px 0 0 }
.mhead .i { font-size: 30px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: #fff; border: 2px solid var(--gold); flex-shrink: 0 }
.mhead h2 { margin: 0; font-size: 1.35rem }
.btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px }
.opt { display: block; width: 100%; text-align: left; margin: 7px 0; padding: 11px 13px }
.opt b { font-family: var(--fh); font-size: 1.05rem; color: var(--navy) }
.opt small { display: block; color: var(--muted); margin-top: 2px }
.hbar { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: .88rem }
.hbar .l { width: 230px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.hbar .b { flex: 1; background: var(--panel3); height: 18px; border-radius: 5px; overflow: hidden }
.hbar .b i { display: block; height: 100%; border-radius: 5px }
.hbar .v { width: 130px; text-align: right; font-variant-numeric: tabular-nums }
.hbar.me .l { color: var(--gold2) }
.hbar.me .b { outline: 2px solid var(--gold); outline-offset: 1px }
@media (max-width: 600px) { .hbar .l { width: 110px } .hbar .v { width: 84px } }
.kpi { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 8px 0 }
.kpi > div { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: .78rem; color: var(--muted) }
.kpi b { display: block; font-size: 1.15rem; color: var(--ink); font-family: var(--fh) }
.pick { display: flex; flex-wrap: wrap; gap: 7px }

/* Tela inicial */
.start { max-width: 1100px; margin: 0 auto; padding: 22px 16px 40px }
.hero { position: relative; overflow: hidden; text-align: center; padding: 34px 20px 26px; border-radius: 22px; margin-bottom: 18px; color: #fff;
  background: radial-gradient(600px 300px at 50% 0%, rgba(255, 215, 106, .35), transparent 70%), linear-gradient(135deg, #2457a0, var(--navy)); box-shadow: 0 10px 30px rgba(23, 58, 107, .25) }
.hero svg.bgmap { position: absolute; right: -60px; top: -40px; width: 460px; opacity: .16; pointer-events: none }
.big { font-family: var(--fh); font-weight: 700; font-size: clamp(2.2rem, 6vw, 3.6rem); letter-spacing: 3px; line-height: 1; color: #ffe08a; text-shadow: 0 2px 0 rgba(0, 0, 0, .15) }
.hero .sub { color: #dbe6f7; max-width: 620px; margin: 10px auto 16px }
.step { display: flex; align-items: center; gap: 10px; font-family: var(--fh); font-size: 1.12rem; text-transform: uppercase; color: var(--navy); margin: 18px 0 10px; letter-spacing: .5px; font-weight: 700 }
.step .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #3a2600; font-weight: 700 }
.cards { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) }
.ccard { text-align: center; padding: 12px 8px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 4px }
.ccard .i { font-size: 30px }
.ccard b { font-family: var(--fh); font-size: 1rem; color: var(--navy) }
.ccard small { color: var(--muted); font-size: .74rem }
.pcard { text-align: left; padding: 9px 11px; border-radius: 12px; border-left: 5px solid var(--c) }
.pcard b { font-family: var(--fh); font-size: 1.05rem }
.pcard small { display: block; color: var(--muted); font-size: .74rem }
.form label { display: block; font-weight: 600; margin: 12px 0 5px }

/* Votação animada */
.vgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) }
.vhouse { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; text-align: center }
.vsvg { width: 100%; max-width: 420px; display: block; margin: 0 auto }
.vsvg circle { transition: fill .25s; transform-box: fill-box; transform-origin: center }
.vsvg circle.pop { animation: seat .35s ease-out }
@keyframes seat { 0% { transform: scale(1.9) } 100% { transform: scale(1) } }
.vcount { display: flex; justify-content: center; gap: 18px; font-family: var(--fh); font-size: 1.05rem; margin: 6px 0 }
.vcount b { font-size: 1.6rem; margin-left: 4px; font-variant-numeric: tabular-nums }
.vcount .vs b { color: var(--good) } .vcount .vn b { color: var(--bad) } .vcount .va b { color: var(--muted) }
.vbar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--panel3); margin: 4px 0 6px }
.vbar i { display: block; height: 100%; transition: width .1s linear }
.stamp-wrap { margin-top: 12px; min-height: 64px; display: flex; align-items: center; justify-content: center }
.stamp { font-family: var(--fh); font-weight: 700; font-size: 2rem; letter-spacing: 4px; padding: 4px 18px; border: 5px solid; border-radius: 10px; transform: rotate(-7deg); background: rgba(255, 255, 255, .85); animation: stamp .45s cubic-bezier(.2, 1.6, .4, 1) }
.stamp.ok { color: var(--good); border-color: var(--good) }
.stamp.no { color: var(--bad); border-color: var(--bad) }
.stamp.t2 { color: var(--warn); border-color: var(--warn) }
@keyframes stamp { 0% { transform: rotate(-7deg) scale(3); opacity: 0 } 100% { transform: rotate(-7deg) scale(1); opacity: 1 } }

/* Apuração */
.apuracao { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; margin: 8px 0 }
.apu-head { font-family: var(--fh); font-size: 1.05rem; color: var(--muted); margin-bottom: 6px; cursor: pointer }
.apu-head b { color: var(--gold2); font-size: 1.35rem; font-variant-numeric: tabular-nums }
svg text { fill: var(--ink) }
.mapa text { fill: #fff }

/* Treino em andamento */
.treino { margin-top: 5px }
.treino-bar { height: 12px; border-radius: 7px; background: #fff3d6; border: 1px solid #f1d089; overflow: hidden }
.treino-bar i { display: block; height: 100%; border-radius: 7px; transition: width .4s linear;
  background: repeating-linear-gradient(45deg, #f2b01e 0 10px, #ffd76a 10px 20px); background-size: 28px 28px; animation: listras .8s linear infinite }
@keyframes listras { from { background-position: 0 0 } to { background-position: 28px 0 } }
.treino-txt { color: var(--gold2); font-weight: 600 }
#toasts { position: fixed; right: 16px; bottom: 96px; z-index: 40; display: flex; flex-direction: column; gap: 8px; max-width: 340px }
.toast { background: #fff; border: 1px solid var(--line2); border-left: 5px solid var(--good); border-radius: 12px; padding: 10px 14px; box-shadow: 0 8px 24px rgba(15, 30, 60, .2); font-weight: 600; animation: entra .25s ease-out; transition: opacity .5s, transform .5s }
.toast.sai { opacity: 0; transform: translateX(30px) }
@keyframes entra { from { opacity: 0; transform: translateX(30px) } to { opacity: 1; transform: none } }

/* Quadro das pesquisas no gráfico */
.pchart { position: relative }
.pzona { cursor: crosshair }
.ptip { position: absolute; top: 4px; z-index: 5; min-width: 250px; max-width: 340px; background: #fff; border: 1px solid var(--line2); border-top: 4px solid var(--gold); border-radius: 10px; padding: 8px 10px; box-shadow: 0 10px 28px rgba(15, 30, 60, .22); pointer-events: none; font-size: .82rem }
.ptip table { font-size: .82rem; margin: 4px 0 }
.ptip td { padding: 3px 4px; border-bottom: 1px solid var(--line) }
.ptip-h { font-family: var(--fh); font-weight: 700; color: var(--navy); font-size: .95rem }

/* cores de destaque dentro dos quadros de indicadores */
.kpi b.good { color: var(--good) } .kpi b.bad { color: var(--bad) } .kpi b.warn { color: var(--warn) }

/* Personagem no centro do Gabinete */
.persona { text-align: center; padding-top: 22px }
.persona .cand-nome { font-size: 1.6rem; margin-top: 4px }
.persona-av { display: flex; justify-content: center; margin-top: 4px }
.persona-tag { margin-top: 10px; font-size: .82rem; padding: 4px 10px }
.balao { position: relative; display: inline-block; max-width: 90%; background: #fff; border: 2px solid var(--line2); border-radius: 16px; padding: 8px 16px; font-weight: 600; color: var(--navy); box-shadow: var(--shadow) }
.balao::after { content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); border: 9px solid transparent; border-top-color: var(--line2); border-bottom: 0 }
.av-anim .av-corpo { animation: respira 3.6s ease-in-out infinite; transform-origin: 60px 118px }
.av-anim .av-olhos { animation: piscar 4.5s infinite; transform-box: fill-box; transform-origin: center }
@keyframes respira { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-1.6px) } }
@keyframes piscar { 0%, 93%, 100% { transform: scaleY(1) } 95% { transform: scaleY(.1) } }

/* Criação do político em etapas */
.wiz { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px }
.wiz-step { display: flex; align-items: center; gap: 7px; border-radius: 999px; padding: 6px 14px 6px 6px; font-weight: 600 }
.wiz-step .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--panel3); font-size: .8rem }
.wiz-step.sel .n { background: var(--gold); color: #3a2600 }
.wiz-step.feito .n { background: var(--good); color: #fff }
.grid-cria { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) 300px; align-items: start }
.cria-prev { position: sticky; top: 14px }
@media (max-width: 860px) { .grid-cria { grid-template-columns: minmax(0, 1fr) } .cria-prev { position: static; order: -1 } }
.swatch { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 2px solid var(--line2) }
.swatch.sel { box-shadow: 0 0 0 3px var(--blue); border-color: #fff }

.minibar { display: inline-block; width: 50px; height: 7px; border-radius: 4px; background: var(--panel3); overflow: hidden; vertical-align: middle }
.minibar i { display: block; height: 100% }

.ap { flex-wrap: wrap; max-width: 92px }