/* Acabamento visual (2026-10-15). Carrega por ÚLTIMO e unifica o que as folhas anteriores deixavam desencontrado:
   1) tipografia de produto: Inter para a interface, Montserrat só na marca (logo ASTRO);
   2) tema padrão em camadas de preto-grafite (não mais preto chapado), mantendo a identidade preto e branco;
   3) estados consistentes (hover, selecionado, foco), controles com a mesma altura/raio e sombras discretas.
   Não muda estrutura nem comportamento: só aparência. Os outros temas (grafite, cinza, claro) continuam valendo. */

:root {
  --ui-font: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --brand-font: 'Montserrat', sans-serif;
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
  --ring: 0 0 0 2px rgba(var(--fg), .9);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- 2) tema padrão ASTRO: preto em camadas ---------- */
html:not([data-theme]) {
  --bg0: #0a0a0c;      /* fundo do trilho e da barra de título */
  --bg1: #111114;      /* listas laterais */
  --bg2: #16161a;      /* área principal, painéis */
  --bg3: #1e1e23;      /* campos, cartões, hover forte */
  --pop: #18181c;      /* menus e diálogos */
  --side: #111114;
  --line: rgba(255, 255, 255, .07);
  --hover: rgba(255, 255, 255, .05);
  --sel: rgba(255, 255, 255, .09);
  --muted: rgba(255, 255, 255, .58);
}
html:not([data-theme]) .sv-main, html:not([data-theme]) .home, html:not([data-theme]) .sv { background: var(--bg2); }

/* ---------- 1) tipografia ---------- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body, body :where(*:not(svg, svg *, i, .material-icons, code, pre, kbd, samp)) { font-family: var(--ui-font) !important; letter-spacing: -.003em; }
body :where(code, pre, kbd, samp) { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace !important; }
/* a marca continua em Montserrat, com o espaçamento largo de sempre */
.logo, .logo *, .brand, .brand *, .gate-logo, .gate-logo *, .ds-brand, .ds-brand *, .tb-title .brand { font-family: var(--brand-font) !important; letter-spacing: .16em !important; }
/* títulos de seção em caixa alta: pequenos, discretos, levemente espaçados (padrão de apps de chat) */
.chh, .ds-sec, .sv-members .chh, .fhead, .fcount { letter-spacing: .02em !important; }
h1, h2, h3 { letter-spacing: -.015em; }

/* ---------- 3) superfícies e divisórias ---------- */
.topbar { background: var(--bg0) !important; }
.rail { background: var(--bg0); }
.menu, .sv-side { background: var(--bg1) !important; }
.sv-head, .sv-top, .dhead, .ds-top { border-bottom-color: rgba(0, 0, 0, .35) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .04); }
.sv-members { background: var(--bg1); }

/* ---------- itens de lista (canais, DMs, menu inicial, membros) ---------- */
.chn, .menu a, .menu a.ds-item, .sv-members .mrow, .frow { transition: background-color .12s var(--ease), color .12s var(--ease); }
.chn, .menu a, .menu a.ds-item { color: var(--muted); }
.chn:hover, .menu a:hover, .menu a.ds-item:hover { background: var(--hover) !important; color: rgba(var(--fg), .92); }
.chn.on, .chn.active, .chn.sel, .menu a.on, .menu a.active, .menu a.sel, .menu a[aria-current="page"] { background: var(--sel) !important; color: rgb(var(--fg)) !important; }
.sv-members .mrow:hover, .frow:hover { background: var(--hover) !important; }

/* ---------- trilho de servidores ---------- */
.rail .sv-ico, .rail .rb, .rail > button, .rail > a { transition: border-radius .18s var(--ease), background-color .18s var(--ease), transform .18s var(--ease); }

/* ---------- botões ---------- */
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: none !important; box-shadow: var(--ring) !important; border-radius: var(--r-sm); }
.btn, .pbtn, .gbtn, .card button.main, .gate .go, .gate button[type="submit"] {
  min-height: 36px; border-radius: var(--r-md) !important; font-weight: 600 !important; font-size: 14px !important; letter-spacing: 0 !important;
  transition: background-color .15s var(--ease), opacity .15s var(--ease), transform .08s var(--ease);
}
.btn:active, .pbtn:active, .gbtn:active, .gate .go:active { transform: translateY(1px); }

/* ---------- campos ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input:not([type]), textarea, select {
  font-size: 14px; border-radius: var(--r-md);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input:not([type]):focus, textarea:focus, select:focus {
  outline: none; border-color: rgba(var(--fg), .35) !important; box-shadow: 0 0 0 3px rgba(var(--fg), .08);
}
::placeholder { color: rgba(var(--fg), .38) !important; opacity: 1; }
.ds-find, .fsearch input { background: var(--bg0) !important; border-color: transparent !important; font-size: 13px !important; height: 30px; }

/* ---------- caixa de mensagem ---------- */
.sv-comp .box { background: var(--bg3) !important; border-color: transparent !important; }
.sv-comp .box:focus-within { box-shadow: 0 0 0 1px rgba(var(--fg), .14); }

/* ---------- mensagens ---------- */
.cm:hover { background: rgba(0, 0, 0, .14) !important; }
.mn { letter-spacing: -.005em; }
.mtime, .gut { color: rgba(var(--fg), .42) !important; }
.mt { color: rgba(var(--fg), .9); }

/* ---------- menus, diálogos e cartões flutuantes ---------- */
.card, .pop, .menu-pop, .ctx, .mx-menu, .x-card, .pf-card, #overlay .card {
  border-color: rgba(255, 255, 255, .08) !important;
  box-shadow: var(--shadow-pop) !important;
}
.overlay:not(.gate) { background: rgba(0, 0, 0, .62) !important; backdrop-filter: blur(2px); }

/* ---------- painel do usuário ---------- */
.upanel { background: #0d0d10 !important; border-color: rgba(255, 255, 255, .06) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
html[data-theme] .upanel { background: var(--bg2) !important; }

/* ---------- abas (Amigos: Disponível / Todos / Pendente…) ---------- */
.dhead button, .ftab { font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; border-radius: var(--r-sm) !important; }

/* ---------- estados vazios ---------- */
.ds-empty, .fempty, .empty { color: var(--muted) !important; font-size: 13px !important; line-height: 1.5 !important; letter-spacing: 0 !important; }

/* ---------- barras de rolagem finas e discretas ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
html[data-theme="claro"] * { scrollbar-color: rgba(0, 0, 0, .2) transparent; }

/* ---------- seleção de texto ---------- */
::selection { background: rgba(var(--fg), .22); }

/* ---------- tela de entrar ---------- */
#gate .card, .gate .card { border-radius: 16px !important; }
.gate label, .gate .lbl { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .02em !important; text-transform: uppercase; color: var(--muted) !important; }
.gate h1, .gate h2 { font-family: var(--ui-font) !important; letter-spacing: -.02em !important; }

@media (prefers-reduced-motion: reduce) { html:not(.motion-on) * { transition-duration: 0s !important; } }

/* ---------- detalhes de tela ---------- */
/* separador do trilho (entre Início e os servidores) */
.rail .rsep { width: 32px !important; height: 2px !important; border-radius: 1px; background: rgba(255, 255, 255, .08) !important; margin: 0 auto !important; }

/* "Eventos": ícone desenhado no lugar do emoji */
.chn.evbtn i { font-size: 0 !important; width: 20px; height: 20px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / 20px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / 20px no-repeat; }

/* começo do canal: como nos apps de chat, alinhado à esquerda, perto da caixa de texto, com um selo grande */
.sv-empty { display: flex !important; flex-direction: column; align-items: flex-start !important; justify-content: flex-end !important; text-align: left !important;
  margin: 0 !important; padding: 16px 16px 8px !important; min-height: 100%; box-sizing: border-box; color: var(--muted) !important; font-size: 15px !important; line-height: 1.4 !important; }
.sv-empty::before { content: '#'; display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 8px; border-radius: 50%;
  background: var(--bg3); color: rgb(var(--fg)); font: 300 40px/1 var(--ui-font); }
.sv-empty b { display: block; margin-bottom: 4px; color: rgb(var(--fg)); font-size: 28px !important; font-weight: 700 !important; letter-spacing: -.02em !important; }

/* estados vazios da tela inicial (Amigos): selo com o círculo do ASTRO + texto */
.fempty { display: flex !important; flex-direction: column; align-items: center; gap: 14px; padding: 72px 24px !important; text-align: center; }
.fempty::before { content: ''; width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.9) 0 18%, rgba(255,255,255,.18) 34%, rgba(255,255,255,0) 66%), var(--bg3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
html[data-theme="claro"] .fempty::before { background: radial-gradient(circle, rgba(0,0,0,.85) 0 18%, rgba(0,0,0,.12) 34%, rgba(0,0,0,0) 66%), var(--bg3); }

/* cartão "Ativo agora" e seus vazios */
.ds-empty { padding: 4px 8px; }

/* nome do servidor no topo da lista */
.sv-head { transition: background-color .12s var(--ease); } .sv-head:hover { background: var(--hover) !important; }
.sv-empty { max-width: none !important; width: 100% !important; }
.sv-empty b { max-width: 640px; }
@media (min-width: 701px) { html:not([data-theme]) .sv-members { box-shadow: inset 0 48px 0 var(--bg2), inset 0 49px 0 rgba(0, 0, 0, .35) !important; } }
/* a caixa de texto do compositor não ganha moldura própria (quem destaca é a caixa inteira) */
.sv-comp textarea, .sv-comp textarea:focus, .sv-comp input, .sv-comp input:focus { border: 0 !important; box-shadow: none !important; background: transparent !important; }
/* conversa curta fica encostada na caixa de texto (como nos apps de chat), não no topo */
.sv-msgs { display: flex; flex-direction: column; }
.sv-msgs > :first-child { margin-top: auto; }
.sv-comp .box:focus-within { border-color: transparent !important; outline: none !important; box-shadow: 0 0 0 1px rgba(var(--fg), .16) !important; }

/* títulos e rótulos pequenos: sem espaçamento exagerado entre letras e com tamanho legível */
h2:not(.brand):not(.gate-logo), h3, .lk-h, .us-h, .tpl-h, .orsep, label, .tag {
  letter-spacing: .02em !important;
}
.lk-h, .us-h, .tpl-h, .orsep, #overlay label, .card label { font-size: 12px !important; font-weight: 600 !important; color: var(--muted); }
#overlay .card.us h2, .us-nav h2 { font-size: 12px !important; font-weight: 700 !important; color: var(--muted) !important; }
input.u3 { letter-spacing: .5em !important; }  /* campo de código (000 000): espaçado de propósito */
/* configurações em tela cheia: navegação e textos de ajuda legíveis */
.us-nav button { font-size: 15px !important; font-weight: 500 !important; min-height: 34px; padding: 6px 10px !important; border-radius: var(--r-sm) !important; color: var(--muted); letter-spacing: 0 !important; }
.us-nav button:hover { background: var(--hover) !important; color: rgba(var(--fg), .92); }
.us-nav button.on { background: var(--sel) !important; color: rgb(var(--fg)) !important; }
.hnote, .field .note, .field small { font-size: 12px !important; line-height: 1.45 !important; color: var(--muted) !important; letter-spacing: 0 !important; }
.field input, .field textarea, .field select { min-height: 40px; background: var(--bg0) !important; border-color: transparent !important; }
.field textarea { padding-top: 10px; }
/* tela de entrar: título do QR e ação "mostrar" legíveis */
.gate h2, #gate h2 { font-size: 20px !important; font-weight: 700 !important; color: rgb(var(--fg)) !important; text-transform: none !important; letter-spacing: -.015em !important; }
.gate .peek, .gate .show, .gate button.eye { font-size: 12px !important; }
@media (max-width: 700px) {
  .dhead { padding-right: 64px !important; }   /* as abas não passam por baixo do botão da caixa de entrada */
  .bell { background: transparent !important; }
}

/* ---------- lista de membros e chamada (computador/tablet) ---------- */
@media (min-width: 701px) {
  /* lista de membros oculta pelo botão do cabeçalho (lembrado por aparelho) ou durante a chamada */
  body:not(.dm-mode).members-off .sv, body:not(.dm-mode) .sv:has(.sv-main.callmode) { grid-template-columns: 240px minmax(0, 1fr) !important; }
  /* conversas diretas não têm a coluna de canais: a chamada (e a conversa sem membros) ocupa a largura toda */
  body.dm-mode.members-off .sv, body.dm-mode .sv:has(.sv-main.callmode) { grid-template-columns: minmax(0, 1fr) !important; }
  body.members-off .sv-members, .sv:has(.sv-main.callmode) .sv-members { display: none !important; }
  .sv:has(.sv-main.callmode) .sv-top { padding-right: 8px !important; }
  #svMembersBtn.on { color: rgb(var(--fg)) !important; }
  .sv:has(.sv-main.callmode) #svMembersBtn { display: none; }   /* na chamada a lista não abre (como no Discord) */

  /* chat ao lado da chamada: chamada à esquerda, conversa do canal numa coluna de 400 px à direita */
  .sv-main.callmode.chatside { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: auto minmax(0, 1fr) auto auto auto; }
  .sv-main.callmode.chatside > * { grid-column: 2; }
  .sv-main.callmode.chatside > .sv-top { grid-column: 1 / -1; grid-row: 1; }
  .sv-main.callmode.chatside > .callview { grid-column: 1; grid-row: 2 / -1; min-height: 0; }
  .sv-main.callmode.chatside > .sv-msgs { display: flex !important; grid-row: 2; min-height: 0; overflow-y: auto; border-left: 1px solid var(--line); background: var(--bg2); }
  .sv-main.callmode.chatside > .sv-typing { grid-row: 3; border-left: 1px solid var(--line); background: var(--bg2); }
  .sv-main.callmode.chatside > .sv-comp { display: block !important; grid-row: 4; border-left: 1px solid var(--line); background: var(--bg2); }
  .sv-main.callmode.chatside > .sv-err { grid-row: 5; border-left: 1px solid var(--line); }
  .sv-main.callmode.chatside .cm { padding-right: 16px; }
  #cbChat.on { background: rgb(var(--fg)) !important; color: rgb(var(--inv)) !important; }
}

/* começo do chat de um canal de voz: alto-falante no lugar do "#" */
.sv-main[data-kind="voice"] .sv-empty::before, .sv-main[data-kind="stage"] .sv-empty::before { content: ''; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") center / 34px no-repeat, var(--bg3); }
html[data-theme="claro"] .sv-main[data-kind="voice"] .sv-empty::before, html[data-theme="claro"] .sv-main[data-kind="stage"] .sv-empty::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318181b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") center / 34px no-repeat, var(--bg3); }

/* ---------- Painel do ASTRO (só administradores) ---------- */
.adm h3 { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .02em !important; margin: 20px 0 8px; }
.adm .adm-me { margin: 0; font-size: 15px; font-weight: 600; }
.adm .adm-q { width: 100%; height: 40px; padding: 0 12px; background: var(--bg0); border: 1px solid transparent; color: rgb(var(--fg)); }
.adm-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.adm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px; border-radius: var(--r-md); background: var(--bg3); }
.adm-who { display: flex; flex-direction: column; min-width: 0; } .adm-who b { font-size: 15px; } .adm-who span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-stat { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.adm-pill { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: rgba(var(--fg), .08); white-space: nowrap; } .adm-pill.on { background: rgba(var(--fg), .9); color: rgb(var(--inv)); }
.adm-tools { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.adm-tools .adm-n { width: 110px; height: 32px; padding: 0 8px; background: var(--bg0); border: 1px solid transparent; color: rgb(var(--fg)); }
.adm-tools .adm-d { height: 32px; background: var(--bg0); color: rgb(var(--fg)); border: 1px solid transparent; border-radius: var(--r-md); padding: 0 8px; }
.adm-b { height: 32px; padding: 0 12px; border-radius: var(--r-md); border: 0; background: rgb(var(--fg)); color: rgb(var(--inv)); font-weight: 600; font-size: 13px; cursor: pointer; }
.adm-b.dng { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.adm-b:disabled { opacity: .4; cursor: default; }
.adm-empty { color: var(--muted); font-size: 13px; margin: 6px 0; }
.adm-log { display: flex; flex-direction: column; } .adm-ev { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .adm-ev time { color: var(--muted); white-space: nowrap; }
@media (max-width: 700px) { .adm-row { grid-template-columns: 1fr; } .adm-stat { justify-content: flex-start; } }

/* ---------- chamada: botão de volume da pessoa no rótulo (abre o menu com volume 0–200% e "silenciar para mim") ---------- */
.tile .lab.pick { cursor: pointer; }
.tile .lab.pick::after { content: ''; width: 14px; height: 14px; flex: none; margin-left: 2px; background: currentColor; opacity: .85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%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 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- chamada no celular: grade organizada (nada se sobrepõe) ---------- */
@media (max-width: 700px) {
  .sv-main.callmode .callgrid, .sv-main.callmode .callgrid.stage {
    display: grid !important; grid-template-columns: 1fr 1fr !important; grid-auto-rows: auto !important; grid-template-rows: none !important;
    align-content: start !important; justify-content: stretch !important; gap: 10px !important; overflow-y: auto; padding: 8px 12px 200px !important;
  }
  .sv-main.callmode .callgrid .tile { grid-column: auto !important; grid-row: auto !important; order: 0; aspect-ratio: auto !important; height: calc((100vw - 34px) / 2) !important; min-height: 0 !important; }
  /* transmissão de tela e quem está em destaque: largura toda, 16:9, primeiro da lista */
  .sv-main.callmode .callgrid .tile.screen, .sv-main.callmode .callgrid .tile.main { grid-column: 1 / -1 !important; height: calc((100vw - 24px) * 9 / 16) !important; order: -1; }
  /* chamada a dois (ou uma pessoa só): blocos grandes, um embaixo do outro */
  .sv-main.callmode .callgrid:not(:has(> .tile:nth-child(3))) { grid-template-columns: 1fr !important; align-content: center !important; }
  .sv-main.callmode .callgrid:not(:has(> .tile:nth-child(3))) .tile:not(.screen):not(.main) { height: min(36dvh, calc((100vw - 24px) * 3 / 4)) !important; }
  .sv-main.callmode .callgrid .tile .bigav { width: 64px; height: 64px; font-size: 24px; }
  .sv-main.callmode .callgrid .tile .lab { font-size: 12px; }
  /* botões do bloco (tela cheia, foco, janela flutuante) menores e sem cobrir o selo AO VIVO */
  .sv-main.callmode .tile .tctl button { width: 30px; height: 30px; border-radius: 8px; }
}

/* tela cheia girada (iPhone ou quando o navegador não deixa travar a orientação) */
body.scr-rot { overflow: hidden; }
.tile.rot, .sv-main.callmode .callgrid .tile.rot { position: fixed !important; z-index: 200; top: 0; left: 0; width: 100dvh !important; height: 100dvw !important; max-width: none; aspect-ratio: auto !important;
  transform-origin: top left; transform: rotate(90deg) translateY(-100%); border: 0 !important; border-radius: 0 !important; background: #000 !important; }
.tile.rot video { object-fit: contain !important; }
.tile.rot .tctl, .tile.rot .tag { display: none !important; }
.rot-close { position: absolute; top: 12px; right: 12px; z-index: 3; height: 34px; padding: 0 14px; border-radius: 999px; border: 0; background: rgba(0,0,0,.7); color: #fff; font: 600 13px var(--ui-font); cursor: pointer; }

/* botão Voltar da Loja / Plus / Missões / Presentes: só no celular */
.x-back { display: none; }
@media (max-width: 700px) {
  .x-head { flex-wrap: wrap; }
  .x-back { display: inline-flex; align-items: center; gap: 4px; flex-basis: 100%; width: max-content; margin: 0 0 6px -6px; padding: 6px 10px 6px 4px; border: 0; border-radius: var(--r-md); background: none; color: rgb(var(--fg)); font: 600 15px var(--ui-font); cursor: pointer; }
  .x-back:active { background: var(--hover); }
  .x-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
}

/* ---------- ASTRO Plus: coroa dourada ao lado do nome (no lugar do selo de texto "Plus") ---------- */
.tagp.crown { display: inline-block; width: 18px; height: 18px; margin-left: 4px; padding: 0 !important; vertical-align: -3px; flex: none;
  background: url("/assets/img/badges/plus-crown.webp") center / contain no-repeat !important; border-radius: 0 !important; font-size: 0 !important; color: transparent !important;
  filter: drop-shadow(0 0 4px rgba(255, 196, 64, .45)); }
.pf-n .tagp.crown { width: 22px; height: 22px; vertical-align: -4px; }
.pc-n .tagp.crown { align-self: center; margin: 2px 0; }

/* ---------- insígnias de perfil: pequenas, embaixo do nome ---------- */
.pf-badges { gap: 6px !important; padding: 3px 6px !important; background: rgba(var(--fg), .06) !important; align-items: center; }
.pf-ins { width: 22px; height: 22px; object-fit: contain; display: block; cursor: help; }
.adm-ins { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.adm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: 999px; background: rgba(var(--fg), .06); font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: inset 0 0 0 1px transparent; }
.adm-chip.on { box-shadow: inset 0 0 0 1px rgba(var(--fg), .5); }
.adm-chip input { margin: 0; }
.tagp.crown { border: 0 !important; box-shadow: none !important; }
html[data-theme="claro"] .tagp.crown { filter: drop-shadow(0 0 1px rgba(150, 95, 0, .9)) drop-shadow(0 1px 2px rgba(150, 95, 0, .45)) saturate(1.4) brightness(.92); }