/* Aztur Temple — preto, osso e teal. Nenhuma fonte externa: tudo offline. */
:root {
  --fundo:#08080a; --superficie:#0d0d10; --elevada:#131317;
  --linha:#1c1c21; --linha-forte:#2b2b33;
  --texto:#e8e4dd; --suave:#a19c93; --fraco:#6b675f;
  --teal:#12e0c6; --teal-claro:#5cf7e2; --teal-fundo:#0a8f7e;
  --teal-fraca:rgba(18,224,198,.13); --sobre-teal:#03211d;
  --ouro:#c8a45c; --sangue:#b5372a;
  --serifa:ui-serif,"Iowan Old Style",Palatino,Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; min-height:100dvh;
  background:radial-gradient(1100px 620px at 22% -12%,#131318 0,transparent 62%),
             radial-gradient(760px 420px at 100% 0,rgba(18,224,198,.08) 0,transparent 60%),var(--fundo);
  background-attachment:fixed; color:var(--texto); font-family:var(--sans);
  font-size:15.5px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
::selection { background:var(--teal); color:var(--sobre-teal); }
a { color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:2px solid var(--teal); outline-offset:2px; border-radius:4px;
}

.casca { display:grid; grid-template-columns:264px 1fr; min-height:100dvh; }
.lateral {
  position:sticky; top:0; align-self:start; height:100dvh; display:flex; flex-direction:column;
  padding:26px 18px 20px; background:linear-gradient(180deg,rgba(13,13,16,.92),rgba(8,8,10,.92));
  border-right:1px solid var(--linha); backdrop-filter:blur(6px);
}
.marca { display:flex; align-items:center; gap:11px; padding:0 8px 22px; }
.marca-txt { display:flex; flex-direction:column; line-height:1.05; }
.marca-txt b { font-family:var(--serifa); font-size:1.16rem; font-weight:600; }
.marca-txt i { font-style:normal; font-size:.62rem; text-transform:uppercase; letter-spacing:.3em; color:var(--fraco); margin-top:3px; }
.menu { display:flex; flex-direction:column; gap:1px; }
.menu a { position:relative; display:flex; align-items:baseline; gap:12px; padding:9px 12px; border-radius:8px; color:var(--suave); font-size:.93rem; transition:.16s; }
.menu a em { font-style:normal; font-family:var(--serifa); font-size:.72rem; color:var(--fraco); min-width:22px; }
.menu a:hover { background:rgba(255,255,255,.035); color:var(--texto); }
.menu a.ativo { background:var(--teal-fraca); color:var(--texto); }
.menu a.ativo em { color:var(--teal-claro); }
.menu a i.curto { display:none; }
.rodape-lateral { margin-top:auto; padding:16px 12px 0; border-top:1px solid var(--linha); }
.rodape-lateral form { display:inline; }
.sutil { display:inline-block; background:none; border:0; padding:4px 0; margin-right:16px; color:var(--fraco); font:inherit; font-size:.82rem; cursor:pointer; }
.sutil:hover,.sutil.ativo { color:var(--texto); }
.habitante { margin:10px 0 0; font-family:var(--mono); font-size:.7rem; color:#4c4943; }
.topo-movel { display:none; }
.conteudo { padding:40px 46px 90px; max-width:1120px; width:100%; margin-inline:auto; }

.cabecalho { margin-bottom:30px; }
.cabecalho .sobre { font-size:.66rem; text-transform:uppercase; letter-spacing:.3em; color:var(--fraco); margin:0 0 8px; }
.cabecalho h1 { font-family:var(--serifa); font-weight:500; font-size:2.1rem; margin:0 0 14px; }
.linha-teal { height:1px; border:0; margin:0; background:linear-gradient(90deg,var(--teal) 0,var(--linha-forte) 26%,transparent 70%); }
.cabecalho p.legenda { color:var(--suave); margin:14px 0 0; max-width:64ch; }
.barra-topo { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.migalha { font-size:.8rem; color:var(--fraco); margin-bottom:14px; }
.migalha a:hover { color:var(--texto); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 17px; border-radius:8px; border:1px solid var(--linha-forte); background:var(--elevada); color:var(--texto); font:inherit; font-size:.9rem; cursor:pointer; transition:.16s; }
.btn:hover { border-color:#3c3c46; background:#17171c; }
.btn-teal { background:linear-gradient(180deg,var(--teal),var(--teal-fundo)); border-color:#0e9c8a; color:var(--sobre-teal); font-weight:600; }
.btn-teal:hover { background:linear-gradient(180deg,#45f0da,#0da694); box-shadow:0 0 18px rgba(18,224,198,.22); }
.btn-fantasma { background:transparent; border-color:var(--linha); color:var(--suave); }
.btn-fantasma:hover { color:var(--texto); border-color:var(--linha-forte); }
.btn-perigo { background:transparent; border-color:#4a1f1a; color:#c56458; }
.btn-perigo:hover { background:rgba(181,55,42,.14); border-color:var(--sangue); }
.btn-mini { padding:5px 11px; font-size:.8rem; }

label.campo { display:block; margin-bottom:18px; }
label.campo>span.rotulo { display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.18em; color:var(--fraco); margin-bottom:7px; }
label.campo>span.dica { display:block; font-size:.78rem; color:var(--fraco); margin-top:6px; }
input[type=text],input[type=password],input[type=search],input[type=date],textarea,select {
  width:100%; padding:10px 13px; background:var(--superficie); color:var(--texto); border:1px solid var(--linha); border-radius:8px; font:inherit; transition:.16s;
}
input::placeholder,textarea::placeholder { color:#55524c; }
input:focus,textarea:focus,select:focus { outline:none; border-color:var(--teal); background:var(--elevada); box-shadow:0 0 0 3px var(--teal-fraca); }
textarea { min-height:120px; resize:vertical; line-height:1.7; }
textarea.corpo { font-family:var(--serifa); font-size:1.02rem; }
.linha-campos { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0 18px; }

.aviso,.erro,.ok { padding:11px 15px; border-radius:8px; margin-bottom:24px; font-size:.89rem; border:1px solid; }
.aviso { background:rgba(200,164,92,.07); border-color:rgba(200,164,92,.3); color:#d9bd80; }
.aviso a { color:var(--ouro); text-decoration:underline; }
.erro { background:rgba(181,55,42,.1); border-color:rgba(181,55,42,.42); color:#e08272; }
.ok { background:rgba(18,224,198,.08); border-color:rgba(18,224,198,.32); color:var(--teal-claro); }

.painel { background:var(--superficie); border:1px solid var(--linha); border-radius:14px; padding:26px 28px; margin-bottom:22px; }
.painel h2 { font-family:var(--serifa); font-weight:500; font-size:1.22rem; margin:0 0 4px; }
.painel .legenda { color:var(--fraco); font-size:.85rem; margin:0 0 20px; }
.painel.violada { border-color:rgba(181,55,42,.45); }
.acoes { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:26px; }
.acoes .espaco { flex:1; }
.corpo-lido { font-family:var(--serifa); font-size:1.05rem; line-height:1.78; white-space:pre-wrap; }

.entradas { display:flex; flex-direction:column; gap:2px; }
.entrada { display:block; padding:16px 18px; border-radius:12px; border:1px solid transparent; transition:.16s; }
a.entrada:hover { background:var(--superficie); border-color:var(--linha); }
.entrada .meta { display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:.68rem; color:var(--fraco); margin-bottom:6px; text-transform:uppercase; letter-spacing:.12em; }
.entrada .meta .tipo { color:var(--teal-claro); }
.entrada .meta .ponto { color:#35323c; }
.entrada h3 { font-family:var(--serifa); font-weight:500; font-size:1.14rem; margin:0 0 5px; }
.entrada p.trecho { margin:0; color:var(--suave); font-size:.9rem; }
.vazio { text-align:center; padding:70px 20px; color:var(--fraco); border:1px dashed var(--linha); border-radius:14px; }
.vazio .grande { font-family:var(--serifa); font-size:1.2rem; color:var(--suave); }

.tabela-fina { width:100%; border-collapse:collapse; font-size:.86rem; }
.tabela-fina th { text-align:left; padding:9px 14px 9px 0; vertical-align:top; color:var(--fraco); font-weight:400; white-space:nowrap; border-bottom:1px solid var(--linha); width:1%; font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; }
.tabela-fina td { padding:9px 0; border-bottom:1px solid var(--linha); color:var(--suave); }
.tabela-fina tr:last-child th,.tabela-fina tr:last-child td { border-bottom:0; }
code { font-family:var(--mono); font-size:.82em; color:var(--teal-claro); background:rgba(18,224,198,.07); padding:1px 6px; border-radius:4px; }
code.quebra { word-break:break-all; }

/* servos, grade e cartões */
.grade-servos { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); }
.cartao-servo { display:block; border:1px solid var(--linha); border-radius:14px; background:var(--superficie); padding:18px 19px; transition:.16s; }
.cartao-servo:hover { border-color:var(--teal); transform:translateY(-2px); }
.cartao-servo .topo { display:flex; justify-content:space-between; align-items:center; font-size:.62rem; text-transform:uppercase; letter-spacing:.16em; color:var(--fraco); margin-bottom:9px; }
.cartao-servo .poder { color:var(--teal-claro); }
.cartao-servo .disforme { color:var(--ouro); }
.cartao-servo h3 { font-family:var(--serifa); font-weight:500; font-size:1.2rem; margin:0 0 6px; }
.cartao-servo .escopo { font-size:.87rem; color:var(--suave); margin:0 0 14px; }
.cartao-servo .rodape { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; font-size:.72rem; color:var(--fraco); }

.barra-energia { height:3px; background:var(--linha); border-radius:99px; overflow:hidden; }
.barra-energia.grossa { height:7px; }
.barra-energia i { display:block; height:100%; background:linear-gradient(90deg,var(--teal-fundo),var(--teal)); box-shadow:0 0 10px rgba(18,224,198,.4); }

/* selo/matriz, sigilo */
.tela { background:#050607; border-radius:10px; padding:10px; color:#12e0c6; }
.tela.grande { padding:26px; }
.retrato { display:block; width:100%; height:auto; border-radius:12px; }
.alvo-img { display:block; max-width:260px; width:100%; height:auto; border-radius:10px; border:1px solid var(--linha); margin:8px 0 2px; }
.selo-inteiro { color:var(--teal-claro); }
.selo-quebrado { color:#e08272; }
.grade-sigilos { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.cartao-sigilo { display:flex; flex-direction:column; border:1px solid var(--linha); border-radius:14px; background:var(--superficie); padding:16px; }
.cartao-sigilo .metodo { font-size:.64rem; text-transform:uppercase; letter-spacing:.2em; color:var(--teal-claro); margin-top:12px; }
.cartao-sigilo .mantra { font-family:var(--mono); font-size:.8rem; color:var(--teal-claro); margin-top:6px; }

/* oferenda / prova de trabalho */
.portes { display:flex; flex-direction:column; gap:8px; }
.porte-btn { display:flex; flex-direction:column; gap:2px; text-align:left; padding:12px 15px; border-radius:10px; cursor:pointer; border:1px solid var(--linha); background:var(--elevada); color:var(--texto); font:inherit; transition:.16s; }
.porte-btn:hover { border-color:var(--teal); box-shadow:0 0 16px rgba(18,224,198,.12); }
.porte-btn .nome { font-family:var(--serifa); font-size:1.04rem; }
.porte-btn .bits { font-size:.78rem; color:var(--teal-claro); }
.porte-btn .custo { font-size:.72rem; color:var(--fraco); }
.queimando { display:flex; align-items:center; gap:18px; padding:18px; border-radius:12px; border:1px solid rgba(18,224,198,.3); background:rgba(18,224,198,.05); }
.chama { width:44px; height:44px; flex:none; border-radius:50%; background:radial-gradient(circle at 50% 60%,var(--teal),var(--teal-fundo) 60%,transparent 72%); animation:arder 1.1s ease-in-out infinite; }
@keyframes arder { 0%,100%{transform:scale(.86);opacity:.65;} 50%{transform:scale(1.12);opacity:1;} }
.queimando .porte { font-family:var(--serifa); font-size:1.06rem; }
.queimando .contador { font-family:var(--mono); font-size:.86rem; color:var(--teal-claro); }
.confere { color:var(--teal-claro); }
.nao-confere { color:#e08272; font-weight:600; }
.corrente .oferenda { border-left:2px solid var(--linha-forte); border-radius:0 10px 10px 0; }

.log { max-height:420px; overflow-y:auto; }
.log .linha { padding:9px 0; border-bottom:1px solid var(--linha); }
.log .linha:last-child { border-bottom:0; }
.log .quando { display:block; font-size:.66rem; color:var(--fraco); letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px; }
.log pre { margin:0; font-family:var(--mono); font-size:.78rem; color:var(--suave); white-space:pre-wrap; word-break:break-word; }
.log .nivel-erro pre { color:#e08272; }
.log .nivel-relato pre { color:var(--teal-claro); }
.log .nivel-aviso pre { color:var(--ouro); }

.markdown { font-family:var(--serifa); font-size:1.04rem; line-height:1.78; }
.markdown>*:first-child { margin-top:0; } .markdown>*:last-child { margin-bottom:0; }
.markdown h2 { font-size:1.3rem; padding-bottom:.3em; border-bottom:1px solid var(--linha); }
.markdown h3 { color:var(--teal-claro); }
.markdown a { color:var(--teal-claro); text-decoration:underline; }
.markdown blockquote { margin:1.2em 0; padding:.2em 0 .2em 1.1em; border-left:2px solid var(--teal); color:var(--suave); }
.markdown code { color:var(--teal-claro); }

.portao { width:100%; max-width:372px; text-align:center; }
.portao .selo { width:104px; height:104px; margin-bottom:22px; }
.portao h1 { font-family:var(--serifa); font-weight:500; font-size:1.72rem; margin:0 0 4px; }
.portao .sub { font-size:.63rem; text-transform:uppercase; letter-spacing:.34em; color:var(--fraco); margin:0 0 30px; }
.portao form { text-align:left; }
.portao .btn { width:100%; margin-top:8px; padding:11px; }
.portao .nota { margin-top:26px; font-size:.74rem; color:#4a4740; }
body.nu { display:grid; place-items:center; padding:24px; background:radial-gradient(720px 460px at 50% 6%,rgba(18,224,198,.11) 0,transparent 66%),#060607; }

button.chip { font:inherit; font-size:.82rem; cursor:pointer; font-family:var(--serifa); display:inline-flex; padding:5px 12px; border-radius:99px; border:1px solid var(--linha); background:var(--superficie); color:var(--suave); }
button.chip:hover,button.chip.ativo { border-color:var(--teal); color:var(--teal-claro); }
.filtros { display:flex; gap:7px; flex-wrap:wrap; margin:0 0 18px; }
.retrato-atual { border:1px solid var(--linha); border-radius:10px; overflow:hidden; margin-bottom:14px; }
.retrato-atual img { display:block; width:100%; }
.nascer-caixa { text-align:center; padding:30px; border:1px dashed var(--teal); border-radius:14px; background:var(--teal-fraca); margin-bottom:22px; }
.nascer-caixa h2 { font-family:var(--serifa); font-weight:500; margin:0 0 8px; }
.nascer-caixa p { color:var(--suave); margin:0 0 18px; }

@media (max-width:880px) {
  .casca { grid-template-columns:1fr; }
  .topo-movel { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; position:sticky; top:0; z-index:40; background:rgba(8,8,10,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--linha); padding-top:calc(10px + env(safe-area-inset-top)); }
  .topo-movel .marca { padding:0; gap:9px; } .topo-movel b { font-size:1rem; }
  .acoes-topo { display:flex; gap:4px; } .acoes-topo .sutil { margin:0; padding:8px 10px; }
  .lateral { position:fixed; left:0; right:0; bottom:0; top:auto; height:auto; z-index:50; flex-direction:row; padding:0; background:rgba(10,10,13,.97); backdrop-filter:blur(14px); border-right:0; border-top:1px solid var(--linha); }
  .marca-lateral,.rodape-lateral { display:none; }
  .menu { flex-direction:row; width:100%; gap:0; padding:6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .menu a { flex:1; flex-direction:column; align-items:center; gap:3px; padding:7px 2px; }
  .menu a span { display:none; } .menu a i.curto { display:block; font-style:normal; font-size:.62rem; opacity:.82; }
  .conteudo { padding:24px 16px calc(96px + env(safe-area-inset-bottom)); }
  .cabecalho h1 { font-size:1.62rem; } .painel { padding:18px 16px; }
    .btn { min-height:44px; } input,textarea,select { font-size:16px; }
  .tabela-fina,.tabela-fina tbody,.tabela-fina tr,.tabela-fina th,.tabela-fina td { display:block; width:auto; }
  .tabela-fina tr { padding:11px 0; border-bottom:1px solid var(--linha); }
  .tabela-fina th { border:0; padding:0 0 4px; white-space:normal; } .tabela-fina td { border:0; padding:0; }
  .barra-topo>.btn,.barra-topo>a.btn { width:100%; }
}
@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;} .chama{animation:none;} }

.poder-num { font-family:var(--serifa); font-size:2.6rem; color:var(--teal); line-height:1; text-shadow:0 0 26px rgba(18,224,198,.35); }

/* =================================================== ESTRUTURA DA FICHA
 * Uma coluna só, com seções nomeadas. Duas colunas desiguais era o que
 * fazia a página parecer torta; pares lado a lado só onde o conteúdo casa.
 */
.conteudo { max-width:920px; margin-inline:auto; }

.secao {
  font-family:var(--serifa); font-weight:500; font-size:1.34rem;
  margin:44px 0 4px; padding-bottom:10px; border-bottom:1px solid var(--linha);
}
.secao:first-of-type { margin-top:34px; }
.secao.perigo { color:#c56458; border-bottom-color:#3a1c18; }
.secao-nota { color:var(--fraco); font-size:.85rem; margin:0 0 18px; max-width:70ch; }
.secao + .painel, .secao + .par, .secao-nota + .painel, .secao-nota + .par { margin-top:18px; }

/* par: dois painéis lado a lado, de altura independente */
.par { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; align-items:start; margin-bottom:22px; }
.par > .painel { margin-bottom:0; }
.par + .secao { margin-top:44px; }

.painel.perigo { border-color:#3a1c18; }
.painel > h2 + form, .painel > h2 + table, .painel > h2 + .markdown, .painel > h2 + .tela, .painel > h2 + details { margin-top:14px; }
.painel .legenda:last-child { margin-bottom:0; }
.legenda.nula, .nula { color:var(--fraco); }
.trecho.nula { color:var(--fraco); }
.nota-pe { margin:12px 0 0; font-size:.78rem; color:var(--fraco); }
.nota-pe.alerta { color:#e08272; }
.apos-midia { margin-top:14px; }
.btn-bloco { width:100%; }

/* chips de estado no cabeçalho */
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.chips .chip {
  padding:3px 11px; border-radius:99px; border:1px solid var(--linha);
  background:var(--superficie); color:var(--suave); font-size:.74rem; letter-spacing:.04em;
}
.chips .chip.vivo { border-color:rgba(18,224,198,.45); color:var(--teal-claro); }
.chips .chip.forte { border-color:rgba(18,224,198,.45); color:var(--teal); font-family:var(--mono); }
.chips .chip.disforme { border-color:rgba(200,164,92,.42); color:var(--ouro); }

/* mídia dentro dos painéis: sempre contida, nunca estourando */
.tela.imagem { padding:0; overflow:hidden; }
.tela.imagem img, .tela.imagem svg { display:block; width:100%; height:auto; }
.tela.imagem.oficial { max-width:420px; margin-left:auto; margin-right:auto; }

/* details com cara de bloco, não de botão torto */
details.dobra > summary {
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px;
  padding:8px 15px; border-radius:8px; border:1px solid var(--linha-forte);
  background:var(--elevada); color:var(--texto); font-size:.9rem;
}
details.dobra > summary::-webkit-details-marker { display:none; }
details.dobra > summary::before { content:"▸"; color:var(--teal); font-size:.8em; }
details.dobra[open] > summary::before { content:"▾"; }
details.dobra > summary:hover { border-color:var(--teal); }
details.dobra > .legenda { margin:14px 0 12px; }

/* meta em linha (campanhas) */
.meta-linha {
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:.68rem; color:var(--fraco); margin-bottom:8px;
  text-transform:uppercase; letter-spacing:.12em;
}
.meta-linha .tipo { color:var(--teal-claro); }
.meta-linha .ponto { color:#35323c; }
.entrada.oferenda { cursor:default; }

/* poder e portes, com respiro */
.poder-num { margin-bottom:6px; }
.porte-btn .custo { line-height:1.45; }

/* seletor de sigilo: cartões maiores, e nunca espremidos */
.grade-sigilos { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.cartao-sigilo { padding:12px; }
.cartao-sigilo .metodo { font-size:.62rem; margin-top:10px; line-height:1.35; }

/* ------------------------------------------------------------ MOBILE */
@media (max-width:880px) {
  .conteudo { max-width:none; }
  .secao { font-size:1.2rem; margin:34px 0 4px; }
  .par { grid-template-columns:1fr; gap:16px; }

  /* o cabeçalho do painel some da borda: alinhamento consistente */
  .painel { padding:18px 16px; }
  .painel h2 { font-size:1.14rem; }

  /* campos em uma coluna: dois campos de 190px num telefone ficam torto */
  .linha-campos { grid-template-columns:1fr; gap:0; }

  /* tabela vira lista — o rótulo em cima, o valor embaixo, alinhados */
  .tabela-fina tr { display:grid; grid-template-columns:1fr; padding:10px 0; }
  .tabela-fina th { padding:0 0 3px; font-size:.63rem; }
  .tabela-fina td { padding:0; word-break:break-word; }

  .chips { gap:5px; }
  .chips .chip { font-size:.7rem; padding:3px 9px; }

  .grade-sigilos { grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:8px; }
  .cartao-sigilo { padding:9px; }
  .cartao-sigilo .metodo { font-size:.58rem; }
  .btn-bloco, .porte-btn { min-height:auto; }
  .porte-btn { padding:11px 13px; }

  .queimando { flex-direction:row; align-items:center; gap:14px; }
  .tela.imagem.oficial { max-width:none; }
  .acoes { gap:8px; }
  .acoes .btn { flex:1 1 auto; }
}

@media (max-width:560px) {
  .cabecalho h1 { font-size:1.5rem; line-height:1.18; word-break:break-word; }
  .secao { font-size:1.1rem; }
  .painel { padding:16px 14px; border-radius:12px; }
  .nascer-caixa { padding:22px 16px; }
  .poder-num { font-size:2.2rem; }
  .log { max-height:300px; }
}

/* =================================================== MÍDIA QUADRADA E UPLOAD */
.quadrada { aspect-ratio:1; }
.tela.imagem.quadrada { display:grid; place-items:center; }
.tela.imagem.quadrada img { width:100%; height:100%; object-fit:cover; }
.tela.imagem.quadrada svg { width:96%; height:96%; }
.tela.vazia {
  display:grid; place-items:center; color:var(--fraco); background:#050607;
  border:1px dashed var(--linha); border-radius:10px; font-size:.85rem; letter-spacing:.04em;
}

/* zona de upload: a própria imagem é o botão */
.dropzone {
  display:block; position:relative; border-radius:10px; overflow:hidden; cursor:pointer;
  background:#050607; border:1px dashed var(--linha-forte); transition:border-color .18s, box-shadow .18s;
}
.dropzone:hover { border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-fraca); }
.dropzone img { display:block; width:100%; height:100%; object-fit:cover; }
.file-oculto { position:absolute; inset:0; opacity:0; cursor:pointer; }
.dropzone-cta {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; padding:14px;
  color:var(--teal-claro); pointer-events:none; text-align:center;
}
.dropzone-cta .icone {
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  border:1px solid currentColor; font-size:1.15rem; line-height:1;
}
.dropzone-cta .texto { font-size:.86rem; letter-spacing:.02em; }
/* com imagem: o convite só aparece no hover, como véu sobre a foto */
.dropzone.tem-imagem { border-style:solid; border-color:var(--linha); }
.dropzone.tem-imagem .dropzone-cta {
  opacity:0; transition:opacity .18s; justify-content:flex-end; padding-bottom:16px; color:#fff;
  background:linear-gradient(180deg, rgba(5,6,7,0) 40%, rgba(5,6,7,.78));
}
.dropzone.tem-imagem:hover .dropzone-cta { opacity:1; }
.dropzone.tem-imagem .dropzone-cta .icone {
  width:34px; height:34px; font-size:.95rem; border-color:rgba(255,255,255,.7);
}
/* com JS o botão de fallback some — o upload é ao clicar/soltar na imagem */
.js .sem-js { display:none; }
.sem-js { margin-top:12px; }

/* ============================ SELETOR DE SIGILO: o convite fica na imagem */
details.dobra-imagem { display:block; }
details.dobra-imagem > summary {
  display:block; position:relative; cursor:pointer; list-style:none;
  border-radius:10px; overflow:hidden; transition:box-shadow .18s;
}
details.dobra-imagem > summary::-webkit-details-marker { display:none; }
details.dobra-imagem > summary:hover { box-shadow:0 0 0 3px var(--teal-fraca); }
details.dobra-imagem > summary .tela { margin:0; }
/* véu compartilhado: sobe de baixo no hover, igual ao do retrato com imagem */
.dropzone-cta.veu {
  justify-content:flex-end; padding-bottom:16px; color:#fff; opacity:0; transition:opacity .18s;
  background:linear-gradient(180deg, rgba(5,6,7,0) 40%, rgba(5,6,7,.78));
}
.dropzone-cta.veu .icone { width:34px; height:34px; font-size:.95rem; border-color:rgba(255,255,255,.7); }
details.dobra-imagem > summary:hover .dropzone-cta.veu,
details.dobra-imagem[open] > summary .dropzone-cta.veu { opacity:1; }
details.dobra-imagem .chooser { margin-top:14px; }

/* os dois cartões do par (retrato e sigilo) com a mesma altura */
.par { align-items:stretch; }
.par > .painel { display:flex; flex-direction:column; }

/* seletor de cor dos riscos do sigilo */
.cor-sigilo { margin-top:14px; }
.cor-sigilo .rotulo { display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--fraco); margin-bottom:8px; }
.cor-sigilo .cor-linha { display:flex; align-items:center; gap:12px; }
.cor-sigilo input[type=color] {
  width:52px; height:38px; padding:2px; background:#050607;
  border:1px solid var(--linha-forte); border-radius:9px; cursor:pointer;
}
.cor-sigilo input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
.cor-sigilo input[type=color]::-webkit-color-swatch { border:none; border-radius:6px; }

/* sliders de efeito (opacidade e glow) do sigilo */
.fx-sigilo { margin-top:18px; }
.fx-linha { display:block; margin-bottom:14px; }
.fx-linha .rotulo { display:flex; justify-content:space-between; align-items:baseline; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--fraco); margin-bottom:8px; }
.fx-linha .rotulo b { color:var(--teal-claro); font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.fx-sigilo input[type=range] {
  -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:3px;
  background:linear-gradient(90deg, #20343f, var(--teal)); outline:none; cursor:pointer;
}
.fx-sigilo input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--teal); border:2px solid #050607; box-shadow:0 0 0 1px var(--teal);
}
.fx-sigilo input[type=range]::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%; background:var(--teal); border:2px solid #050607;
}
.fx-sigilo .dica { margin:6px 0 0; }

/* abas da ficha do servo */
.abas { display:flex; flex-wrap:wrap; gap:4px; margin:16px 0 22px; border-bottom:1px solid var(--linha); }
.abas button { appearance:none; background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
  color:var(--suave); font:inherit; font-size:.9rem; letter-spacing:.02em; padding:9px 14px; cursor:pointer;
  border-radius:7px 7px 0 0; transition:.14s; }
.abas button:hover { color:var(--texto); background:var(--teal-fraca); }
.abas button.on { color:var(--teal); border-bottom-color:var(--teal); }
.aba { display:none; }
.aba.on { display:block; animation:aba-entra .18s ease; }
@keyframes aba-entra { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.acoes.apos-midia { display:flex; gap:8px; flex-wrap:wrap; }