@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

/* Visual do relatório de uso do Cliff: fundo cinza-azulado, painéis brancos, cartões com a faixa da área.
   Cores = bolinhas da papelaria da Score + roxo, laranja, grafite e teal do relatório. */
:root {
  --fundo: #F3F5FA;
  --painel: #FFFFFF;
  --cartao: #F9FAFC;
  --borda: #E3E7EF;
  --trilho: #ECEFF6;
  --tinta: #141A2E;
  --suave: #687089;
  --marca: #394AE0;
  --marca-hover: #26319D;
  --sombra: 0 1px 2px rgba(20, 26, 46, .04), 0 10px 30px rgba(20, 26, 46, .04);
  --memoji: #DCE1FA;
  --logo-filtro: brightness(0);
  --titulo: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --texto: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
html[data-tema="escuro"] {
  --fundo: #0D1018;
  --painel: #151924;
  --cartao: #1B2030;
  --borda: #282E40;
  --trilho: #222839;
  --tinta: #ECEEF5;
  --suave: #9AA2B6;
  --marca: #4D5CF0;
  --marca-hover: #6A78FF;
  --sombra: none;
  --memoji: #2A3150;
  --logo-filtro: none;
  color-scheme: dark;
}
.cor-azul { --cor: #394AE0; }
.cor-ciano { --cor: #42B9E4; }
.cor-verde { --cor: #44AC3B; }
.cor-amarelo { --cor: #ECB51C; }
.cor-vermelho { --cor: #D8191E; }
.cor-roxo { --cor: #8E58D9; }
.cor-laranja { --cor: #EE7F2D; }
.cor-grafite { --cor: #545E6B; }
.cor-teal { --cor: #17A79B; }
.cor-marinho { --cor: #26319D; }
.cor-branco { --cor: #FFFFFF; }
.cor-cinza { --cor: #B4B8C6; }
html[data-tema="escuro"] .cor-grafite { --cor: #8D97A6; }
html[data-tema="escuro"] .cor-marinho { --cor: #5A66D8; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--fundo); }
body { margin: 0; font: 400 16px/1.55 var(--texto); color: var(--tinta); background: var(--fundo); }
h1, h2, h3 { font-family: var(--titulo); font-weight: 700; margin: 0; line-height: 1.15; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 12px; top: -60px; background: var(--painel); padding: 10px 16px; border-radius: 10px; z-index: 50; }
.pular:focus { top: 12px; }
.logo { filter: var(--logo-filtro); }
html[data-tema="escuro"] .so-claro, html:not([data-tema="escuro"]) .so-escuro { display: none; }

/* ---------- barra de cima */
.topo { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--painel) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borda); }
.topo-in { max-width: 1240px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 28px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.marca img { height: 24px; width: auto; display: block; }
.marca span { font: 700 16px/1 var(--titulo); padding-left: 12px; border-left: 1.5px solid var(--borda); }
.nav { display: flex; gap: 4px; }
.nav a { text-decoration: none; color: var(--suave); font-weight: 700; font-size: 14.5px; padding: 8px 14px; border-radius: 10px; white-space: nowrap; }
.nav a:hover { color: var(--tinta); background: var(--cartao); }
.nav a[aria-current="page"] { color: var(--tinta); background: var(--trilho); }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tema-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--borda); background: var(--cartao); color: var(--tinta); cursor: pointer; display: grid; place-items: center; }
.tema-btn:hover { border-color: var(--suave); }
.tema-btn .icone { display: block; }
.nav-eu { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 14.5px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid var(--borda); background: var(--cartao); }
.nav-eu[aria-current="page"] { border-color: var(--marca); }
.nav-eu .bola { outline: none; }

/* ---------- painéis e cartões */
.conteudo { max-width: 1240px; margin: 0 auto; padding: 28px 24px 96px; display: flex; flex-direction: column; gap: 22px; }
.painel { background: var(--painel); border-radius: 22px; padding: 30px 32px; box-shadow: var(--sombra); border: 1px solid transparent; }
html[data-tema="escuro"] .painel { border-color: var(--borda); }
.painel h1 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.02em; }
.painel h2 { font-size: 24px; }
.painel-cab { margin-bottom: 22px; }
.painel-cab:last-child { margin-bottom: 0; }
.painel-cab-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.sub { margin-top: 6px; color: var(--suave); font-size: 16px; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; padding: 20px 22px; }
.cartao h3 { font-size: 17px; margin-bottom: 14px; }
.faixa-cor { position: relative; overflow: hidden; }
.faixa-cor::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--cor); }

.hero h1 { font-size: clamp(34px, 4.6vw, 54px); letter-spacing: -.03em; line-height: 1.02; }
.hero .sub { font-size: 17px; max-width: 60ch; margin-top: 10px; }
.ferramentas { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.busca { flex: 0 1 480px; }
.busca input {
  width: 100%; height: 50px; border: 1px solid var(--borda); border-radius: 14px; padding: 0 18px 0 48px; font-size: 16px; color: var(--tinta);
  background: var(--cartao) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23687089' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px 50% / 20px;
}
.busca input::placeholder { color: var(--suave); }
.busca input:focus { outline: 3px solid color-mix(in srgb, var(--marca) 25%, transparent); border-color: var(--marca); }

.modo { display: inline-flex; padding: 4px; border-radius: 14px; background: var(--trilho); }
.modo button { border: 0; background: none; color: var(--suave); height: 42px; padding: 0 18px; border-radius: 10px; cursor: pointer; font: 700 14px var(--titulo); }
.modo button[aria-pressed="true"] { background: var(--painel); color: var(--tinta); box-shadow: 0 1px 3px rgba(20, 26, 46, .12); }

/* ---------- bolas: foto redonda com anel na cor da área */
.bola { position: relative; display: inline-block; flex: none; border-radius: 50%; overflow: hidden; background: var(--trilho); outline: 3px solid var(--cor, #B4B8C6); outline-offset: 3px; vertical-align: middle; }
.bola img { display: block; width: 100%; height: 100%; object-fit: cover; }
.b-ini { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-family: var(--titulo); font-weight: 700; color: var(--tinta); background: color-mix(in srgb, var(--cor, #B4B8C6) 22%, var(--painel)); }
.bola .b-memoji { display: none; background: var(--memoji); }
html[data-modo="memoji"] .bola.tem-memoji .b-foto, html[data-modo="memoji"] .bola.tem-memoji .b-ini { display: none; }
html[data-modo="memoji"] .bola.tem-memoji .b-memoji { display: block; }
.bola-xs { width: 32px; height: 32px; outline-width: 2px; outline-offset: 2px; }
.bola-xs .b-ini { font-size: 12px; }
.bola-s { width: 40px; height: 40px; outline-width: 2px; outline-offset: 2px; }
.bola-s .b-ini { font-size: 14px; }
.bola-m { width: 104px; height: 104px; }
.bola-m .b-ini { font-size: 30px; }
.bola-l { width: 132px; height: 132px; }
.bola-l .b-ini { font-size: 38px; }
.bola-xl { width: 200px; height: 200px; outline-width: 4px; outline-offset: 5px; }
.bola-xl .b-ini { font-size: 58px; }

/* ---------- cartões de área (como "Por área, em números") */
.areas-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.area-cartao { position: relative; display: flex; flex-direction: column; text-decoration: none; background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; padding: 20px 22px 18px 26px; overflow: hidden; transition: border-color .15s; }
.area-cartao::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--cor); }
.area-cartao:hover { border-color: var(--cor); }
.area-cartao-nome { font: 700 20px/1.2 var(--titulo); }
.area-cartao-gente { margin-top: 4px; color: var(--suave); font-size: 15px; min-height: 1.55em; }
.area-cartao-rodape { margin-top: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pilha { display: flex; align-items: center; }
.pilha .bola { outline: 3px solid var(--cartao); outline-offset: 0; margin-left: -6px; }
.pilha .bola:first-child { margin-left: 0; }
.numero { display: flex; flex-direction: column; }
.numero b { font: 700 28px/1.05 var(--titulo); letter-spacing: -.01em; }
.numero small { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.area-cartao .numero { align-items: flex-end; }
.area-cartao .numero b { color: var(--cor); }
html:not([data-tema="escuro"]) .cor-amarelo .numero b { color: #C89400; }

/* ---------- barras (como "Por área") */
.barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.barra-linha { display: grid; grid-template-columns: 150px minmax(0, 1fr) 220px; gap: 16px; align-items: center; text-decoration: none; }
.barra-rotulo { text-align: right; font-weight: 700; color: var(--suave); font-size: 15px; }
.barra-trilho { position: relative; display: flex; align-items: center; height: 38px; background: var(--trilho); border-radius: 10px; }
.barra { height: 100%; background: var(--cor); border-radius: 10px; flex: none; }
.barra-valor { margin-left: 12px; font: 700 16px var(--titulo); white-space: nowrap; }
.barra-nota { color: var(--suave); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-linha:hover .barra-rotulo { color: var(--tinta); }
.larg-5 { width: 5%; }
.larg-10 { width: 10%; }
.larg-15 { width: 15%; }
.larg-20 { width: 20%; }
.larg-25 { width: 25%; }
.larg-30 { width: 30%; }
.larg-35 { width: 35%; }
.larg-40 { width: 40%; }
.larg-45 { width: 45%; }
.larg-50 { width: 50%; }
.larg-55 { width: 55%; }
.larg-60 { width: 60%; }
.larg-65 { width: 65%; }
.larg-70 { width: 70%; }
.larg-75 { width: 75%; }
.larg-80 { width: 80%; }
.larg-85 { width: 85%; }
.larg-90 { width: 90%; }
.larg-95 { width: 95%; }
.larg-100 { width: 100%; }

/* ---------- pessoas */
.pessoas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 14px; }
.pessoa { height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; padding: 24px 14px 18px; transition: border-color .15s; }
.pessoa:hover { border-color: var(--cor); }
.pessoa .bola { margin-bottom: 16px; }
.pessoa-nome { font: 700 16px/1.25 var(--titulo); }
.rotulo { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 8px; font: 700 12.5px/1.5 var(--titulo); color: var(--cor, var(--marca)); background: color-mix(in srgb, var(--cor, var(--marca)) 14%, transparent); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:not([data-tema="escuro"]) .cor-amarelo .rotulo { color: #9A7300; }
.rotulo-grande { margin-top: 12px; font-size: 15px; padding: 4px 12px; }
.pessoa-cargo { margin-top: 4px; font-size: 13.5px; color: var(--suave); line-height: 1.35; }
.pessoa-area { margin-top: 8px; font: 700 13px var(--titulo); color: var(--cor); }
html:not([data-tema="escuro"]) .cor-amarelo .pessoa-area { color: #B98A00; }
.vazio { color: var(--suave); padding: 12px 0; }
.vazio a { color: var(--marca); }

.destaques { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.minis { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 24px; }
.mini { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.mini span:last-child { display: flex; flex-direction: column; font-size: 13px; color: var(--suave); line-height: 1.3; }
.mini b { font-size: 15px; color: var(--tinta); }
.mini:hover b { text-decoration: underline; }
.hoje { font-style: normal; font-weight: 700; color: #141A2E; background: #ECB51C; border-radius: 10px; padding: 0 8px; align-self: flex-start; }

/* ---------- perfil */
.perfil-topo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 48px; align-items: center; padding: 36px 40px 36px 46px; }
.perfil-bolas { position: relative; padding: 10px; }
.sticker { position: absolute; right: -16px; bottom: -2px; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; background: var(--memoji); border: 5px solid var(--painel); box-shadow: 0 6px 16px rgba(20, 26, 46, .12); }
.sticker img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sticker-vazio { display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; font: 700 12px/1.25 var(--titulo); color: var(--marca); text-decoration: none; background: var(--cartao); border: 2px dashed var(--borda); box-shadow: none; }
.sticker-vazio:hover { border-color: var(--marca); }
.perfil-id h1 { font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -.03em; line-height: 1.02; }
.perfil-cargo { margin-top: 10px; font-size: 18px; color: var(--suave); }
.area-selo { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 14px 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--cor) 14%, transparent); font: 700 14px var(--titulo); text-decoration: none; }
.area-selo::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cor); }
a.area-selo:hover { background: color-mix(in srgb, var(--cor) 24%, transparent); }
.area-selo-p { margin-top: 0; font-size: 13px; padding: 4px 12px 4px 8px; }
.numeros { display: flex; flex-wrap: wrap; gap: 14px 44px; margin-top: 26px; }
.perfil-id .botao { margin-top: 28px; }
.perfil-grade { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.perfil-grade .painel > h2 { font-size: 20px; margin-bottom: 8px; }
.bloco + .bloco { margin-top: 32px; }
.bloco h2 { font-size: 20px; margin-bottom: 14px; }
.sobre { font-size: 17px; line-height: 1.65; max-width: 64ch; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; padding: 7px 15px; border-radius: 999px; background: var(--trilho); text-decoration: none; font-size: 15px; }
a.tag:hover { background: var(--borda); }
.tag-n { margin-left: 8px; font: 700 12px/1 var(--titulo); color: #fff; background: var(--marca); border-radius: 10px; padding: 4px 7px; }
.spotify { width: 100%; border: 0; border-radius: 14px; display: block; }
.redes { list-style: none; margin: 0; padding: 0; }
.redes a { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--borda); text-decoration: none; font-size: 15px; word-break: break-all; }
.redes li:last-child a { border-bottom: 0; }
.redes a:hover span { text-decoration: underline; }
.redes span { display: flex; flex-direction: column; line-height: 1.3; }
.redes small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.icone { flex: none; }

.aviso { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 40; background: var(--tinta); color: var(--painel); padding: 14px 24px; border-radius: 999px; font: 700 14px var(--titulo); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.aviso-fixo { margin-top: 24px; padding: 14px 18px; border-radius: 12px; background: color-mix(in srgb, #ECB51C 22%, var(--painel)); font-weight: 700; }

/* ---------- botões e campos */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 22px; border-radius: 12px; border: 1px solid var(--marca); background: var(--marca); color: #fff; font: 700 15px/1.2 var(--titulo); text-decoration: none; cursor: pointer; text-align: center; }
.botao:hover { background: var(--marca-hover); border-color: var(--marca-hover); }
.botao-sec { background: var(--painel); color: var(--tinta); border-color: var(--borda); }
.botao-sec:hover { background: var(--cartao); border-color: var(--suave); }
.botao-grande { min-height: 54px; padding: 12px 30px; font-size: 16px; border-radius: 14px; }
.botao[disabled] { opacity: .5; cursor: progress; }
.link { background: none; border: 0; padding: 0; color: var(--marca); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 15px; }
.linha-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 20px; }
.linha-botoes-fim { justify-content: flex-end; }
.dica { font-size: 14px; color: var(--suave); }

.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.campo { display: flex; flex-direction: column; gap: 7px; border: 0; padding: 0; margin: 0; min-width: 0; }
.campo-largo { margin-top: 20px; }
.campo-rotulo { font-size: 14px; font-weight: 700; padding: 0; }
fieldset.campo legend { margin-bottom: 7px; }
.campo input, .campo select, .campo textarea, .prefixo { width: 100%; border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao); padding: 12px 14px; font-size: 16px; min-height: 48px; }
.campo textarea { resize: vertical; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .prefixo:focus-within { border-color: var(--marca); outline: 3px solid color-mix(in srgb, var(--marca) 22%, transparent); outline-offset: 0; }
.campo input[type="range"] { border: 0; padding: 0; min-height: 0; background: none; accent-color: var(--marca); }
.campo input[type="range"]:focus { outline: none; }
.campo-par { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.prefixo { display: flex; align-items: center; padding: 0 0 0 14px; }
.prefixo > span { color: var(--suave); }
.prefixo input { border: 0; min-height: 46px; padding-left: 4px; background: none; }
.prefixo input:focus { outline: none; }
.campo-compacto { margin-top: 6px; }
.campo-compacto input { min-height: 42px; padding: 9px 12px; font-size: 15px; }
.contador { font-size: 13px; color: var(--suave); align-self: flex-end; }
.tags-edit { margin-bottom: 8px; }
.tags-edit:empty { display: none; }
.tag-edit { padding: 6px 6px 6px 14px; gap: 4px; }
.tag-x { border: 0; background: none; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; color: var(--suave); }
.tag-x:hover { background: var(--borda); color: var(--tinta); }
.erros { margin-top: 16px; padding: 14px 18px; border-left: 4px solid #D8191E; background: color-mix(in srgb, #D8191E 10%, var(--painel)); border-radius: 10px; }
.erros p { font-weight: 700; }
.erros ul { margin: 8px 0 0; padding-left: 20px; }
.ficha { display: flex; flex-direction: column; gap: 22px; }
.ficha-salvar { position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 24px; padding: 14px 18px; background: var(--painel); border: 1px solid var(--borda); border-radius: 18px; box-shadow: 0 10px 30px rgba(20, 26, 46, .12); }
.sair { margin-top: 24px; }
.tema-opcoes { display: flex; flex-wrap: wrap; gap: 12px; }
.tema-opcao { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 14px 18px; border: 1px solid var(--borda); border-radius: 14px; background: var(--cartao); cursor: pointer; min-width: 160px; font-weight: 700; }
.tema-opcao small { grid-column: 2; font-weight: 400; font-size: 13px; color: var(--suave); }
.tema-opcao:has(input:checked) { border-color: var(--marca); box-shadow: 0 0 0 2px color-mix(in srgb, var(--marca) 30%, transparent); }
.tema-opcao input { accent-color: var(--marca); margin: 0; }

.imagens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.imagem { display: flex; gap: 22px; align-items: flex-start; }
.imagem > .bola { margin: 6px; }
.imagem-acoes { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.imagem-acoes h3 { font-size: 17px; margin: 0; }
.imagem-acoes .botao { max-width: 100%; }
.imagem-acoes label.botao { position: relative; }
.bola-memoji { background: var(--memoji); outline: 2px dashed var(--borda); outline-offset: 3px; }
.b-vazio { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 13px; color: var(--suave); }
.ajuda { font-size: 14px; color: var(--suave); }
.ajuda summary { cursor: pointer; color: var(--marca); text-decoration: underline; text-underline-offset: 3px; }
.ajuda ol { margin: 10px 0 0; padding-left: 20px; }
.ajuda .botao { margin-top: 10px; }
.imagem-msg { margin-top: 16px; font-size: 15px; font-weight: 700; min-height: 1.5em; }
.imagem-msg.erro { color: #D8191E; }
.memoji-gerado { margin-top: 16px; display: flex; align-items: center; gap: 28px; }
.memoji-gerado-img { flex: none; width: 160px; height: 160px; border-radius: 50%; overflow: hidden; background: var(--memoji); position: relative; }
.memoji-gerado-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.memoji-gerado-img.gerando::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 5px solid transparent; border-top-color: var(--marca); border-right-color: #42B9E4; animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.memoji-gerado-txt { display: flex; flex-direction: column; gap: 4px; }
.recorte { border: 0; border-radius: 22px; padding: 28px; width: min(380px, 94vw); background: var(--painel); color: var(--tinta); }
.recorte::backdrop { background: rgba(0, 0, 0, .62); }
.recorte h2 { font-size: 20px; margin-bottom: 6px; }
.recorte canvas { display: block; width: 300px; height: 300px; max-width: 100%; margin: 20px auto 16px; border-radius: 50%; background: var(--cartao); cursor: grab; touch-action: none; }
.recorte canvas:active { cursor: grabbing; }

/* ---------- montador de memoji */
.montador { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 36px; align-items: start; }
.montador > * { min-width: 0; }
.montador-previa { position: sticky; top: 92px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.montador-previa .linha-botoes { justify-content: center; margin-bottom: 8px; }
.previa { width: 320px; height: 320px; max-width: 100%; border-radius: 50%; overflow: hidden; box-shadow: 0 12px 34px rgba(20, 26, 46, .14); }
.previa svg { display: block; width: 100%; height: 100%; }
.abas { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; background: var(--trilho); border-radius: 14px; }
.aba { border: 0; background: none; padding: 9px 14px; border-radius: 10px; font: 700 14px var(--titulo); color: var(--suave); cursor: pointer; white-space: nowrap; }
.aba:hover { color: var(--tinta); }
.aba[aria-selected="true"] { background: var(--painel); color: var(--tinta); box-shadow: 0 1px 3px rgba(20, 26, 46, .12); }
.paleta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.paleta:empty { display: none; }
.amostra { width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; background: var(--amostra); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.amostra[aria-checked="true"] { outline: 3px solid var(--marca); outline-offset: 3px; }
.opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; margin-top: 22px; }
.opcao { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 6px 12px; border-radius: 16px; border: 1px solid var(--borda); background: var(--cartao); cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--tinta); }
.opcao:hover { border-color: var(--suave); }
.opcao[aria-checked="true"] { border-color: var(--marca); box-shadow: 0 0 0 2px var(--marca); }
.opcao-img { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; }
.opcao-img svg { display: block; width: 100%; height: 100%; }

/* ---------- admin */
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabela th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); padding: 10px 12px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela td { padding: 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela input:not([type="checkbox"]), .tabela select { border: 1px solid var(--borda); border-radius: 10px; padding: 8px 10px; background: var(--cartao); width: 100%; min-width: 120px; }
.tabela input.curto { width: 76px; min-width: 0; }
.t-pessoa { display: flex; align-items: center; gap: 12px; }
.t-pessoa span { display: flex; flex-direction: column; line-height: 1.3; }
.t-pessoa small { color: var(--suave); font-size: 13px; }
.t-cor { display: flex; align-items: center; gap: 8px; }
.cor-amostra { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--cor); }
.t-acoes { white-space: nowrap; }
.t-acoes > * { margin-right: 14px; }
.t-acoes form { display: inline; }
.t-acoes a { color: var(--marca); }
.situacao { display: inline-block; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 10px; white-space: nowrap; }
.s-ok { background: color-mix(in srgb, #44AC3B 18%, var(--painel)); }
.s-pend { background: color-mix(in srgb, #ECB51C 26%, var(--painel)); }
.s-off { background: var(--trilho); color: var(--suave); }

/* ---------- entrar */
.pg-entrar .topo .marca { visibility: hidden; }
.entrar { max-width: 620px; width: 100%; margin: 6vh auto 0; padding: 48px 44px; }
.entrar-logo { width: 150px; height: auto; display: block; }
.entrar h1 { margin-top: 36px; font-size: clamp(40px, 7vw, 64px); letter-spacing: -.035em; line-height: 1; }
.entrar .sub { font-size: 18px; margin-top: 14px; max-width: 36ch; }
.entrar .botao { margin-top: 30px; }
.entrar-dev { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding-top: 22px; border-top: 1px dashed var(--borda); }
.entrar-dev .campo { flex: 1 1 260px; }
.bolinhas { display: flex; gap: 10px; margin-top: 40px; }
.bolinhas i { width: 16px; height: 16px; border-radius: 50%; background: var(--cor); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }

/* ---------- telas menores */
@media (max-width: 980px) {
  .perfil-grade, .montador { grid-template-columns: minmax(0, 1fr); }
  .montador-previa { position: static; }
  .barra-linha { grid-template-columns: 110px minmax(0, 1fr); }
  .barra-nota { display: none; }
}
@media (max-width: 760px) {
  .topo-in { padding: 10px 16px; gap: 12px; flex-wrap: wrap; }
  .marca img { height: 20px; }
  .marca span { font-size: 14px; padding-left: 10px; }
  .nav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; }
  .nav::-webkit-scrollbar { display: none; }
  .nav-eu-txt { display: none; }
  .nav-eu { padding: 3px; }
  .tema-btn { width: 38px; height: 38px; }
  .conteudo { padding: 16px 12px 80px; gap: 14px; }
  .painel { padding: 22px 18px; border-radius: 18px; }
  .painel h2 { font-size: 21px; }
  .busca { flex-basis: 100%; }
  .pessoas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pessoa { padding: 18px 10px 14px; }
  .bola-m { width: 84px; height: 84px; }
  .bola-m .b-ini { font-size: 26px; }
  .perfil-topo { grid-template-columns: 1fr; gap: 26px; padding: 26px 20px 26px 26px; }
  .bola-xl { width: 160px; height: 160px; }
  .sticker { width: 82px; height: 82px; right: -18px; }
  .numeros { gap: 14px 28px; }
  .numero b { font-size: 22px; }
  .campos, .imagens { grid-template-columns: 1fr; }
  .imagem { gap: 16px; }
  .bola-l { width: 100px; height: 100px; }
  .memoji-gerado { flex-direction: column; align-items: flex-start; }
  .previa { width: 240px; height: 240px; }
  .abas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .opcoes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .opcao-img { width: 76px; height: 76px; }
  .entrar { padding: 32px 22px; margin-top: 2vh; }
  .ficha-salvar { bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- perfil com cara de Orkut */
.orkut { display: grid; grid-template-columns: 290px minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.orkut-esq, .orkut-dir, .orkut-meio { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.orkut-esq { position: sticky; top: 84px; }
.cartao-perfil { padding: 22px 22px 18px 28px; }
.retrato { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--memoji); box-shadow: inset 0 0 0 1px var(--borda); }
.quadro, .quadro img, .quadro-ini, .quadro-vazio { width: 100%; height: 100%; }
.quadro img { display: block; object-fit: cover; }
.quadro-ini { display: flex; align-items: center; justify-content: center; font: 700 76px var(--titulo); color: var(--tinta); background: color-mix(in srgb, var(--cor) 22%, var(--painel)); }
.quadro-vazio { display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; font: 700 15px var(--titulo); color: var(--marca); text-decoration: none; border: 2px dashed var(--borda); border-radius: 18px; background: var(--cartao); }
.seta { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #141A2E; background: rgba(255, 255, 255, .9); box-shadow: 0 4px 14px rgba(0, 0, 0, .2); opacity: 0; transition: opacity .15s; }
.seta-esq { left: 10px; }
.seta-dir { right: 10px; }
.retrato:hover .seta, .retrato:focus-within .seta { opacity: 1; }
@media (hover: none) { .seta { opacity: .92; } }
.pontos { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; }
.pontos i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.pontos i.ativo { background: #fff; }
.perfil-nome { margin-top: 18px; font-size: 26px; letter-spacing: -.02em; line-height: 1.1; }
.cartao-perfil .perfil-cargo { margin-top: 6px; font-size: 15px; }
.cartao-perfil .area-selo { margin-top: 10px; }
.perfil-local { margin-top: 8px; font-size: 14px; color: var(--suave); }
.menu-perfil { display: flex; flex-direction: column; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--borda); }
.menu-perfil a { display: flex; justify-content: space-between; padding: 9px 10px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 14.5px; }
.menu-perfil a:hover { background: var(--cartao); }
.menu-perfil b { color: var(--suave); }
.contadores { display: flex; flex-wrap: wrap; gap: 8px; }
.contadores span { padding: 5px 12px; border-radius: 10px; background: var(--trilho); font-size: 13px; color: var(--suave); }
.contadores b { color: var(--tinta); font-family: var(--titulo); }
.social { margin: 0; }
.social-linha { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--borda); }
.social-linha:first-child { border-top: 0; padding-top: 0; }
.social dt { text-align: right; color: var(--suave); font-size: 14px; font-weight: 700; padding-top: 2px; }
.social dd { margin: 0; font-size: 15.5px; line-height: 1.6; }
.tags-p .tag { font-size: 14px; padding: 4px 12px; }
.tag-cliente { background: color-mix(in srgb, var(--marca) 12%, transparent); font-weight: 700; }
.tags-p:has(.tag-cliente) { gap: 5px; }
.tags-p .tag-cliente { font-size: 12.5px; padding: 3px 10px; }
.painel h2 small { color: var(--suave); font-size: .75em; }
.pendentes { margin-bottom: 22px; padding: 18px 20px; border-radius: 16px; border: 2px solid color-mix(in srgb, #ECB51C 60%, transparent); background: color-mix(in srgb, #ECB51C 9%, var(--painel)); }
.pendentes h3 { font-size: 17px; }
.escrever { margin-bottom: 18px; }
.escrever textarea { width: 100%; border: 1px solid var(--borda); border-radius: 14px; background: var(--cartao); padding: 12px 14px; font-size: 16px; line-height: 1.5; resize: vertical; }
.escrever textarea:focus { border-color: var(--marca); outline: 3px solid color-mix(in srgb, var(--marca) 22%, transparent); }
.escrever .linha-botoes { margin-top: 10px; justify-content: flex-end; }
.escrever .contador { display: block; text-align: right; }
.itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--borda); }
.item-foto { padding: 4px; }
.item-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14.5px; }
.item-cab a { text-decoration: none; }
.item-cab a:hover b { text-decoration: underline; }
.item-cab .rotulo { margin-top: 0; }
.item-cab time { color: var(--suave); font-size: 13px; }
.item-texto { margin-top: 6px; font-size: 15.5px; line-height: 1.6; overflow-wrap: anywhere; }
.item-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 8px; }
.item-acoes form { display: inline; }
.item-acoes .link { font-size: 13.5px; color: var(--suave); }
.amigos { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; }
.amigos a { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; font-size: 13px; font-weight: 700; text-align: center; }
.amigos .bola-m { width: 70px; height: 70px; }
.amigos .bola-m .b-ini { font-size: 22px; }
.amigos a:hover span { text-decoration: underline; }
.amigos-p { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; gap: 12px 6px; }
.amigos-p a { gap: 6px; font-size: 12px; }
.equipe { display: flex; flex-direction: column; gap: 18px; }
.equipe-nome { display: inline-block; margin-bottom: 10px; font: 700 14px var(--titulo); text-decoration: none; padding: 3px 10px; border-radius: 8px; background: color-mix(in srgb, var(--marca) 12%, transparent); }
.comunidades { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.comunidade { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--borda); text-decoration: none; }
.comunidades li:first-child .comunidade { border-top: 0; padding-top: 0; }
.comunidade-icone { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--cor); background: color-mix(in srgb, var(--cor) 16%, transparent); }
html:not([data-tema="escuro"]) .comunidade-icone.cor-amarelo { color: #B98A00; }
.comunidade-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.comunidade-txt b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comunidade-txt small { font-size: 12.5px; color: var(--suave); }
.comunidade:hover b { text-decoration: underline; }
.comunidade .pilha .bola { outline-color: var(--painel); margin-left: -8px; }
.comunidade .pilha .bola:first-child { margin-left: 0; }
.selo-n { margin-left: 2px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #D8191E; color: #fff; font: 700 12px/20px var(--titulo); text-align: center; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.check { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao); cursor: pointer; font-size: 14.5px; font-weight: 700; }
.check:has(input:checked) { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 10%, var(--cartao)); }
.check input { accent-color: var(--marca); margin: 0; }
.escolha-linha { display: flex; flex-wrap: wrap; gap: 8px; }
.so-quem-joga { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1180px) {
  .orkut { grid-template-columns: 270px minmax(0, 1fr); }
  .orkut-dir { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
@media (max-width: 760px) {
  .orkut { grid-template-columns: minmax(0, 1fr); }
  .orkut-esq { position: static; }
  .orkut-dir { display: flex; }
  .social-linha { grid-template-columns: 1fr; gap: 4px; }
  .social dt { text-align: left; }
}

.campo .check input { width: auto; min-height: 0; padding: 0; border: 0; background: none; flex: none; }
.campo .check input:focus { outline: 2px solid var(--marca); outline-offset: 2px; }
.check span { white-space: nowrap; }
.pets { display: flex; flex-direction: column; gap: 10px; }
.pet-linha { display: grid; grid-template-columns: auto minmax(150px, 1fr) 110px auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--borda); border-radius: 14px; background: var(--cartao); }
.pet-emoji { font-size: 28px; line-height: 1; width: 34px; text-align: center; }
.pet-qtd { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--suave); }
.pet-nomes { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.bichos + .bichos { margin-top: 10px; }
.bichos ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bichos li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: 999px; background: var(--trilho); font-size: 14.5px; }
.bichos li span { font-size: 20px; line-height: 1; }
.bichos-so { display: block; font-size: 22px; margin-top: 4px; letter-spacing: 2px; }
.campo .pet-linha input, .campo .pet-linha select { min-width: 0; }
[data-pet-novo] { margin-top: 10px; align-self: flex-start; }
@media (max-width: 760px) {
  .pet-linha { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pet-qtd { grid-column: 2; }
  .pet-nomes { grid-column: 1 / -1; }
}

.acoes-perfil { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.acoes-perfil .botao { width: 100%; }

/* faixa de contadores do Orkut */
.orkut-stats { display: flex; flex-wrap: nowrap; gap: 6px 14px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--borda); }
.stat { display: flex; flex-direction: column; gap: 4px; text-decoration: none; margin: 0; }
.stat small { font-size: 12px; color: var(--suave); font-weight: 700; }
.stat > span, .stat-botao { display: flex; align-items: center; gap: 6px; }
.stat b { font: 700 16px var(--titulo); color: var(--tinta); }
a.stat:hover b { text-decoration: underline; }
.stat-botao { border: 0; background: none; padding: 0; cursor: pointer; color: inherit; border-radius: 8px; }
.stat-botao:not(.ativo) .emoji { filter: grayscale(1); opacity: .55; }
.stat-botao:hover .emoji { filter: none; opacity: 1; }
.notas { display: flex; gap: 2px; }
.notas form { display: contents; }
.nota { display: inline-flex; border: 0; background: none; padding: 1px; cursor: default; border-radius: 6px; }
button.nota { cursor: pointer; }
.nota .emoji { filter: grayscale(1); opacity: .35; transition: transform .1s; }
.nota.cheia .emoji { filter: none; opacity: 1; }
button.nota:hover .emoji { filter: none; opacity: 1; transform: scale(1.15); }
.nota.minha { box-shadow: 0 2px 0 var(--marca); border-radius: 4px; }

/* gostos: quadradinhos com ícone */
.gostos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 6px; }
.gostos a { gap: 5px; }
.gostos a { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.gosto-capa { container-type: inline-size; width: 48px; aspect-ratio: 1; overflow: hidden; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--cor) 72%, #fff), var(--cor)); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); }
.gosto-capa svg { width: 46%; height: 46%; }
.gosto-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gosto-nome { font-size: 10.5px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: normal; word-break: normal; hyphens: none; }
.gostos small { white-space: nowrap; }
.gostos small { font-size: 10px; color: var(--suave); margin-top: -4px; }
.gostos a:hover .gosto-nome { text-decoration: underline; }

/* aniversário */
.parabens { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px 24px; border-radius: 20px; color: #fff; background: linear-gradient(110deg, #394AE0, #8E58D9 45%, #E36AA6 75%, #ECB51C); box-shadow: 0 10px 30px rgba(57, 74, 224, .25); }
.parabens > div { flex: 1 1 240px; display: flex; flex-direction: column; }
.parabens b { font: 700 22px/1.2 var(--titulo); }
.parabens span { opacity: .92; }
.parabens-emoji { font-size: 34px; letter-spacing: 4px; animation: festa 1.6s ease-in-out infinite alternate; }
.parabens .botao { background: #fff; color: #26319D; border-color: #fff; }
@keyframes festa { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-5px) rotate(4deg); } }
.tempo-casa { color: var(--suave); }
.orkut-stats .emoji { width: 18px; height: 18px; }
.orkut-stats .stat small { white-space: nowrap; }
.orkut-stats .notas { gap: 0; }

/* mapa */
.mapa-grade { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.mapa-caixa { background: var(--cartao); border: 1px solid var(--borda); border-radius: 18px; padding: 18px; }
.mapa-br { width: 100%; height: auto; display: block; }
.uf { vector-effect: non-scaling-stroke; stroke: var(--painel); stroke-width: 1.2; fill: var(--trilho); transition: fill .15s; cursor: pointer; }
.uf-1 { fill: color-mix(in srgb, #394AE0 30%, var(--trilho)); }
.uf-2 { fill: color-mix(in srgb, #394AE0 52%, var(--trilho)); }
.uf-3 { fill: color-mix(in srgb, #394AE0 76%, var(--trilho)); }
.uf-4 { fill: #394AE0; }
.mapa-br a:hover .uf, .mapa-br a:focus .uf { fill: #42B9E4; }
.uf-sel { stroke: #ECB51C; stroke-width: 3; fill: #42B9E4; }
.mapa-legenda { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--suave); }
.mapa-legenda i { width: 22px; height: 10px; border-radius: 3px; background: var(--trilho); }
.mapa-legenda i.uf-1 { background: color-mix(in srgb, #394AE0 30%, var(--trilho)); }
.mapa-legenda i.uf-2 { background: color-mix(in srgb, #394AE0 52%, var(--trilho)); }
.mapa-legenda i.uf-3 { background: color-mix(in srgb, #394AE0 76%, var(--trilho)); }
.mapa-legenda i.uf-4 { background: #394AE0; }
.mapa-lista-titulo { font-size: 18px; margin-bottom: 12px; }
.lugares { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lugar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--cartao); border: 1px solid var(--borda); text-decoration: none; font-weight: 700; }
.lugar:hover, .lugar-sel { border-color: var(--marca); }
.lugar b { font-family: var(--titulo); color: var(--marca); }
a.perfil-local { display: block; text-decoration: none; }
a.perfil-local:hover { text-decoration: underline; }
@media (max-width: 860px) { .mapa-grade { grid-template-columns: 1fr; } }
.gosto-emoji { font-size: 34px; font-size: 54cqw; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18)); }
.gosto-capa .gosto-emoji svg { width: 1em; height: 1em; display: block; }
a.perfil-cargo { display: block; text-decoration: none; }
a.perfil-cargo:hover { text-decoration: underline; }
/* gostos centralizados na coluna: sobra igual dos dois lados */
.gostos a { align-items: center; text-align: center; }
.gostos .gosto-nome { width: 100%; }

/* coluna da direita: gostos por categoria */
.categoria + .categoria { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--borda); }
.categoria h2 { font-size: 17px; margin-bottom: 12px; }
.categoria h2 small { color: var(--suave); font-size: .8em; }

.categoria-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.categoria-cab h2 { margin: 0; }
.categoria-cab h2 a { text-decoration: none; }
.categoria-cab h2 a:hover { text-decoration: underline; }
.categoria-mais { width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center; text-decoration: none; font: 700 18px/1 var(--titulo); color: var(--marca); background: color-mix(in srgb, var(--marca) 14%, transparent); }
.categoria-mais:hover { background: var(--marca); color: #fff; }
.categoria-convite { display: block; margin-top: 18px; padding: 10px; border: 1.5px dashed var(--borda); border-radius: 12px; text-align: center; text-decoration: none; font-size: 13px; font-weight: 700; color: var(--suave); }
.categoria-convite:hover { border-color: var(--marca); color: var(--marca); }
/* ao chegar pelo link da categoria, o campo não fica escondido atrás da barra do topo */
.ficha [id], #estilos { scroll-margin-top: 110px; }
.campo-destaque { outline: 3px solid var(--marca); outline-offset: 6px; border-radius: 12px; transition: outline-color 1.2s; }

.personagens { display: flex; flex-direction: column; gap: 8px; }
.personagem-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.tag-obra { margin-left: 8px; font-size: 12px; color: var(--suave); }
@media (max-width: 760px) { .personagem-linha { grid-template-columns: minmax(0, 1fr) auto; } .personagem-linha input[name="personagem_de"] { grid-column: 1; } }