/* ==========================================================================
   Batalha do N9V — estilos das partes novas do site próprio
   (contas de artista, página de artistas, sugestões, painel, ranking em cartões no celular).
   O visual base continua em app.css, igual ao site original.
   ========================================================================== */

body{margin:0;min-height:100vh;overflow-x:hidden}
img{max-width:100%}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.obr{color:var(--roxo-claro)}
.selo{display:inline-block;justify-self:start;font:700 .64rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;background:var(--roxo);color:#fff;padding:5px 7px}

/* ---------- cabeçalho: link da conta ---------- */
.conta-link{flex:none;color:var(--fg);text-decoration:none;font:600 .78rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--roxo-claro);padding:8px 11px;white-space:nowrap}
.conta-link:hover{background:var(--roxo);border-color:var(--roxo)}
@media (max-width:600px){
  .top .wrap{gap:12px}
  .top img{height:26px}
  .conta-link{padding:7px 9px;font-size:.7rem}
}

/* ---------- barra do administrador ---------- */
.admin-bar{position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;background:var(--roxo);color:#fff;padding:8px max(16px,env(safe-area-inset-left,0px));font:600 .8rem/1.2 var(--body)}
.admin-bar span{flex:1 1 auto}
.admin-bar-btn{appearance:none;background:#fff;color:#2a124d;border:0;font:700 .74rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:8px 10px;text-decoration:none;cursor:pointer}
.is-admin .top{top:36px}
.editando [data-k]{outline:1px dashed var(--roxo-claro);outline-offset:2px;cursor:text;min-width:1ch}
.editando [data-k]:focus{outline:2px solid #fff;background:color-mix(in srgb,var(--roxo) 18%,transparent)}
.editando [data-k].mudou{outline-color:#46d38a}
.ed-textos-barra{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--panel);border-top:2px solid var(--roxo);padding:12px max(16px,env(safe-area-inset-left,0px)) calc(12px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ed-textos-barra p{margin:0;flex:1 1 260px;font-size:.85rem;color:var(--muted)}

/* ---------- rodapé ---------- */
.rodape-links{display:flex;flex-wrap:wrap;gap:8px 20px;width:100%}
.rodape-links a{color:var(--muted);text-decoration:none}
.rodape-links a:hover{color:var(--fg)}

/* ---------- artistas da cena (página inicial) ---------- */
#artistas-cena .head-side{display:flex;flex-wrap:wrap;gap:10px;justify-items:start}
#artistas-cena .head-side .btn{text-decoration:none}
.cena-trilho{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,190px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.cena-trilho .art-card{scroll-snap-align:start}
.art-card{display:grid;gap:6px;align-content:start;text-decoration:none;color:var(--fg);background:var(--panel);border:1px solid var(--line);padding:8px 8px 12px;min-width:0}
.art-card:hover{border-color:var(--roxo-claro)}
.art-foto{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--ink);position:relative}
.art-foto img{width:100%;height:100%;object-fit:cover;display:block}
.art-ini{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:3.4rem;color:var(--roxo-claro);background:linear-gradient(160deg,color-mix(in srgb,var(--roxo) 32%,var(--ink)),var(--ink))}
.art-nome{font-family:var(--display);font-weight:800;font-size:1.35rem;text-transform:uppercase;line-height:1;overflow-wrap:anywhere}
.art-areas{color:var(--muted);font-size:.78rem}
.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
@media (max-width:420px){.art-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.art-nome{font-size:1.15rem}}

/* ---------- páginas internas ---------- */
.pagina{padding-block:40px 72px}
.pagina h1{font-size:clamp(2.6rem,8vw,4.6rem);font-weight:900}
.pagina .lead{margin-top:12px}
.estreito{max-width:720px}
.voltar{display:inline-block;margin-bottom:18px;color:var(--muted);text-decoration:none;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
.voltar:hover{color:var(--fg)}
.aviso-box{border:1px solid var(--roxo-claro);background:color-mix(in srgb,var(--roxo) 12%,var(--panel));padding:14px 16px;margin:16px 0;font-size:.92rem}
.aviso-box.erro{border-color:#ff7a8a;background:color-mix(in srgb,#ff4d6a 12%,var(--panel))}
.aviso-box.ok{border-color:#46d38a;background:color-mix(in srgb,#46d38a 10%,var(--panel))}
.aviso-box p{margin:0}

/* ---------- formulários ---------- */
.form-card{border:1px solid var(--line);background:var(--panel);padding:22px;display:grid;gap:16px;min-width:0}
.form-card h2{font-size:clamp(1.8rem,5vw,2.4rem)}
.form-card h3{font-size:1.5rem;font-weight:800}
.campo{display:grid;gap:6px;min-width:0}
.campo>span{font-size:.86rem;font-weight:600;color:var(--fg)}
.campo>span small{color:var(--muted);font-weight:400}
.campo input,.campo select,.campo textarea{background:var(--ink);border:1px solid var(--line);color:var(--fg);font:inherit;font-size:16px;padding:12px;width:100%;min-width:0;border-radius:0}
.campo textarea{resize:vertical;min-height:110px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--roxo-claro);outline-offset:0;border-color:var(--roxo-claro)}
.campo .ajuda{font-size:.8rem;color:var(--muted);margin:0}
.campo .erro-campo{font-size:.8rem;color:#ff8a9a;margin:0}
.campos-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.campos-3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
@media (max-width:640px){.campos-2,.campos-3{grid-template-columns:1fr}}
.opcoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.opcao{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--ink);padding:12px;cursor:pointer;font-size:.92rem;min-height:48px}
.opcao input{width:20px;height:20px;accent-color:var(--roxo);flex:none;margin:0}
.opcao:has(input:checked){border-color:var(--roxo-claro);background:color-mix(in srgb,var(--roxo) 16%,var(--ink))}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem}
.check input{width:20px;height:20px;accent-color:var(--roxo);flex:none;margin-top:2px}
.form-card .btn{min-height:46px}
.form-card .ed-bar{gap:12px}
.links-form{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.9rem}
.links-form a{color:var(--roxo-claro)}
.privado{font-size:.8rem;color:var(--muted);display:flex;gap:6px;align-items:center}
.privado::before{content:"";width:14px;height:16px;flex:none;background:var(--roxo-claro);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M3 7V5a4 4 0 0 1 8 0v2h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm2 0h4V5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M3 7V5a4 4 0 0 1 8 0v2h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1zm2 0h4V5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E") center/contain no-repeat}

/* cadastro em etapas */
.passos{display:flex;gap:4px;margin:6px 0 4px}
.passos span{flex:1;height:5px;background:var(--line)}
.passos span.feito{background:var(--roxo)}
.passo-rot{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--roxo-claro);font-weight:600}
.etapa[hidden]{display:none!important}
.form-card section.etapa{padding:0;border:0;display:grid;gap:16px}
.form-card .campo + .campo,.form-card .campos-2 + .campo,.form-card .campo + .campos-2{margin-top:2px}
.foto-escolha{display:grid;grid-template-columns:140px 1fr;gap:16px;align-items:center}
.foto-escolha .art-foto{width:140px}
@media (max-width:420px){.foto-escolha{grid-template-columns:1fr}.foto-escolha .art-foto{width:160px}}

/* ---------- perfil público do artista ---------- */
.perfil{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;align-items:start}
.perfil-foto{border:1px solid var(--line);aspect-ratio:4/5;overflow:hidden;background:var(--panel);position:relative}
.perfil-foto img{width:100%;height:100%;object-fit:cover;display:block}
.perfil-corpo{display:grid;gap:16px;min-width:0}
.perfil-corpo h1{overflow-wrap:anywhere}
.perfil-bio{white-space:pre-line;margin:0;font-size:1.05rem}
.perfil-links{display:flex;flex-wrap:wrap;gap:8px}
.perfil-links .btn{text-decoration:none}
.perfil-dados{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--muted);font-size:.9rem}
@media (max-width:760px){.perfil{grid-template-columns:1fr;gap:20px}.perfil-foto{max-width:420px}}

/* ---------- filtros da página de artistas ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 18px}
.filtros a{border:1px solid var(--line);background:var(--panel);color:var(--fg);text-decoration:none;font:600 .82rem/1 var(--body);padding:10px 12px}
.filtros a[aria-current="true"]{background:var(--roxo);border-color:var(--roxo);color:#fff}
.filtros select{background:var(--panel);border:1px solid var(--line);color:var(--fg);font:inherit;padding:9px 10px;font-size:16px}

/* ---------- quadro do MC (links extras) ---------- */
.mc-links{display:flex;flex-wrap:wrap;gap:8px}
.mc-links .btn{text-decoration:none}
.mc-bio a{color:var(--roxo-claro)}

/* ---------- sugestões ---------- */
#rk-sugestao .form-card{max-width:760px}

/* ---------- ranking em cartões no celular ---------- */
@media (max-width:600px){
  #rk-ranking .table-box{border:0;background:none;overflow:visible}
  #rk-ranking table{min-width:0;display:block}
  #rk-ranking thead{display:block}
  #rk-ranking thead tr{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:10px}
  #rk-ranking thead tr::-webkit-scrollbar{display:none}
  #rk-ranking thead th{position:static;background:var(--panel);border:1px solid var(--line);padding:9px 10px;white-space:nowrap;flex:none;font-size:.66rem;width:auto!important}
  #rk-ranking thead th:first-child{display:none}
  #rk-ranking thead th[aria-sort="ascending"],#rk-ranking thead th[aria-sort="descending"]{border-color:var(--roxo-claro);color:var(--fg)}
  #rk-ranking tbody{display:grid;gap:8px}
  #rk-ranking tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;border:1px solid var(--line);background:var(--panel);padding:12px 14px}
  #rk-ranking tbody tr::after{content:"";order:4;flex-basis:100%;height:0}
  #rk-ranking tbody tr.top4{border-color:var(--roxo)}
  #rk-ranking td{border:0;padding:0;white-space:normal;width:auto!important;text-align:left}
  #rk-ranking td.pos{order:1;font-family:var(--display);font-weight:900;font-size:1.5rem;min-width:2.2ch}
  #rk-ranking td.mc{order:2;flex:1 1 0;min-width:0;font-size:1.25rem!important}
  #rk-ranking td.tot{order:3;font-size:1.7rem!important;color:var(--roxo-claro)}
  #rk-ranking td.tot::after{content:" pts";font-family:var(--body);font-size:.7rem;color:var(--muted);font-weight:600}
  #rk-ranking td:nth-child(n+4){order:5;display:inline-flex;gap:4px;align-items:baseline;font-size:.92rem;font-weight:700}
  #rk-ranking td:nth-child(n+4)::after{content:attr(data-l);font-size:.7rem;font-weight:500;color:var(--muted)}
  #rk-ranking td.empty{flex-basis:100%;text-align:center}
}

/* ---------- página de erro ---------- */
.erro-pagina{min-height:60vh;display:grid;align-content:center;gap:16px}

.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.texto-longo{display:grid;gap:12px;margin-top:20px}
.texto-longo p{margin:0;color:var(--fg)}
.texto-longo .lead{color:var(--muted)}
.texto-longo h3{margin-top:14px}
.texto-longo a{color:var(--roxo-claro)}

/* área do artista */
.form-card.centro{text-align:center;justify-items:center}
.form-card.centro .lead{margin-inline:auto}
.icone-grande{font-size:2.6rem;line-height:1;color:var(--roxo-claro)}
.linha-form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.conta-topo{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.conta-topo h1{font-size:clamp(2.2rem,8vw,3.4rem)}
.conta-topo .muted{margin:4px 0 0}
.art-foto.grande{width:120px;flex:0 0 120px;border:1px solid var(--line)}
.art-foto .art-ini{display:grid;place-items:center;height:100%;font:900 2.4rem var(--display);color:var(--roxo-claro)}
.status-lista{display:grid;gap:8px;margin:8px 0 4px}
.status-item{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);background:var(--panel);padding:12px 14px;font-size:.92rem}
.chip{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border:1px solid currentColor;white-space:nowrap}
.chip.ok{color:#46d38a}.chip.esp{color:#ffc65c}.chip.erro{color:#ff7a8a}
.conta-menu{display:grid;gap:10px;margin:22px 0}
.conta-menu a{display:grid;gap:4px;border:1px solid var(--line);background:var(--panel);padding:16px 18px;color:var(--fg);text-decoration:none;position:relative;padding-right:44px}
.conta-menu a::after{content:"→";position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--roxo-claro)}
.conta-menu a:hover{border-color:var(--roxo-claro)}
.conta-menu b{font-weight:700}
.conta-menu span{color:var(--muted);font-size:.88rem}
.conta-menu a.perigo b{color:#ff9aa6}
.btn.perigo{border-color:#ff7a8a;color:#ff9aa6}
.btn.perigo:hover{background:#ff7a8a;color:var(--ink)}
@media (min-width:760px){.conta-menu{grid-template-columns:1fr 1fr}}
/* celular: o menu de cima rola para o lado, com um esmaecido mostrando que tem mais */
@media (max-width:700px){
  .top nav{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);padding-right:18px}
  .conta-link .so-largo{display:none}
}
a.btn{text-decoration:none;display:inline-block}