/* ============================================================
   CIUTEK 1 - VELVET NEXUS  |  ciutek-components.css
   Ponte entre os componentes reais da plataforma e os tokens.
   Cada bloco cita o seletor real medido no navegador antes da troca.
   Nada aqui inventa seletor novo: so reveste o que ja existe.
   ============================================================ */

/* ---------- 1. Superficies de cartao ----------
   antes: fundo #212121, raio 8px, sem borda, sombra preta chapada */
.ctk-app .panel.panel-white,
.ctk-app .panel.post,
.ctk-app .featured-users,
.ctk-app .wow_content.wow_side_loggd_usr,
.ctk-app .alert.alert-dismissible{
  background:var(--ck-superficie) !important;
  border:1px solid var(--ck-borda) !important;
  border-radius:var(--ck-r-cartao) !important;
  box-shadow:var(--ck-sombra-2) !important;
}

/* a publicacao ganha o raio proprio do feed */
.ctk-app .panel.post{ border-radius:18px !important; }

/* ---------- 2. Comentarios ----------
   antes: rodape #2a2a2a raio 0; cabecalho #212121 raio 8px */
.ctk-app .post-footer.post-comments{
  background:var(--ck-superficie-2) !important;
  border-top:1px solid var(--ck-borda) !important;
  border-radius:0 0 18px 18px !important;
}
/* o dark.css do tema define esta cor com 5 classes e !important;
   por isso a regra precisa da mesma profundidade para valer */
.ctk-app .comment-heading,
.ctk-app .post .post-footer .comments-list .comment .comment-heading{
  background:var(--ck-superficie-2) !important;
  border:1px solid var(--ck-borda) !important;
  border-radius:var(--ck-r-campo) !important;
}

/* ---------- 3. Barra superior ----------
   antes: #212121 opaco, sombra preta */
.ctk-app .navbar.navbar-default{
  background:var(--ck-vidro-fundo) !important;
  border-bottom:1px solid var(--ck-vidro-borda) !important;
  box-shadow:var(--ck-sombra-2) !important;
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .ctk-app .navbar.navbar-default{
    -webkit-backdrop-filter:blur(var(--ck-vidro-padrao)) saturate(140%);
            backdrop-filter:blur(var(--ck-vidro-padrao)) saturate(140%);
  }
}

/* ---------- 4. Cores fora da identidade ----------
   antes: bloco on-line em verde-agua rgba(0,192,194,.3)
          bloco convite em bege #6f6449 */
.ctk-app .wow_side_online{
  background:color-mix(in srgb, var(--ck-cor-primaria) 16%, var(--ck-superficie)) !important;
  border:1px solid color-mix(in srgb, var(--ck-cor-primaria) 34%, transparent) !important;
  border-radius:var(--ck-r-cartao) !important;
}
.ctk-app .wow_side_invite{
  background:var(--ck-superficie-2) !important;
  border:1px solid var(--ck-borda) !important;
  border-radius:var(--ck-r-cartao) !important;
}

/* ---------- 5. Botao principal ----------
   antes: #662aff chapado, raio 28px, sem profundidade, fonte do sistema */
.ctk-app .btn-main{
  color:var(--ck-sobre-primaria) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(168deg, var(--ck-roxo-400) 0%, var(--ck-roxo-500) 42%, var(--ck-roxo-700) 100%) !important;
  border:1px solid transparent !important;
  border-top-color:rgba(255,255,255,.34) !important;
  border-bottom-color:rgba(0,0,0,.28) !important;
  border-radius:var(--ck-r-capsula) !important;
  font-family:var(--ck-fonte-texto) !important;
  font-weight:var(--ck-p-botao) !important;
  box-shadow:0 2px 0 rgba(0,0,0,.22), 0 6px 16px rgba(101,40,212,.34) !important;
  transition:transform var(--ck-mov-rapido) var(--ck-curva),
             box-shadow var(--ck-mov-rapido) var(--ck-curva) !important;
}
.ctk-app .btn-main:hover{
  transform:translateY(calc(-1px * var(--ck-mov-fator, 1)));
  box-shadow:0 3px 0 rgba(0,0,0,.22), 0 10px 22px rgba(101,40,212,.42) !important;
}
.ctk-app .btn-main:active{
  transform:translateY(calc(1px * var(--ck-mov-fator, 1)));
  box-shadow:0 1px 0 rgba(0,0,0,.22), 0 4px 10px rgba(101,40,212,.28) !important;
}
.ctk-app .btn-main[disabled],
.ctk-app .btn-main.disabled{
  opacity:.5 !important; transform:none !important;
  box-shadow:var(--ck-sombra-0) !important;
}

/* ---------- 6. Tipografia da interface ----------
   o tema forcava a fonte do sistema em botoes e campos */
.ctk-app button,
.ctk-app input,
.ctk-app select,
.ctk-app textarea{
  font-family:var(--ck-fonte-texto);
}

/* ---------- 7. Foco visivel em toda a interface ---------- */
.ctk-app a:focus-visible,
.ctk-app button:focus-visible,
.ctk-app input:focus-visible,
.ctk-app select:focus-visible,
.ctk-app textarea:focus-visible,
.ctk-app [tabindex]:focus-visible{
  outline:2px solid var(--ck-foco) !important;
  outline-offset:2px !important;
}

/* ---------- 8. Imagens sem salto de layout ---------- */
.ctk-app img{ max-width:100%; }

/* ---------- 9. Barra de rolagem discreta ---------- */
.ctk-app *{ scrollbar-width:thin; scrollbar-color:var(--ck-borda-forte) transparent; }
.ctk-app *::-webkit-scrollbar{ width:10px; height:10px; }
.ctk-app *::-webkit-scrollbar-thumb{
  background:var(--ck-borda-forte); border-radius:var(--ck-r-capsula);
  border:3px solid transparent; background-clip:content-box;
}
.ctk-app *::-webkit-scrollbar-track{ background:transparent; }

/* ---------- 10. Fundo da pagina ----------
   o dark.css do tema fixa body{background:#131313 !important};
   o Ciutek usa o proprio preto arroxeado, entao precisa vencer ali. */
body.ctk-app{
  background:var(--ck-fundo) !important;
  color:var(--ck-texto) !important;
}

/* ---------- 11. Texto secundario ----------
   medido: .ajax-time saia em #9197a3 sobre cartao branco = 2.93:1,
   abaixo do minimo de 4.5:1 para texto normal. Passa a usar o token,
   que foi ajustado para cumprir o minimo nos dois modos. */
.ctk-app .ajax-time,
.ctk-app .ajax-time a,
.ctk-app .small-text,
.ctk-app .text-muted,
.ctk-app .post-meta,
.ctk-app .comment-date{
  color:var(--ck-texto-fraco) !important;
}

/* ---------- 12. Logotipo no modo claro ----------
   O logotipo e roxo claro, pensado para fundo escuro. Sobre o branco
   ele perde forca. Em vez de trocar o arquivo, o roxo e aprofundado:
   mantem a mesma marca, so ganha peso. Se um dia existir um arquivo
   proprio para fundo claro, basta apagar este bloco. */
:root[data-ck-tema="claro"] .ctk-app a.brand img,
:root[data-ck-tema="claro"] .ctk-app .header-brand img{
  filter:brightness(.72) saturate(1.25);
}

/* ---------- 13. Icones claros sobre fundo claro ----------
   No modo claro o cabecalho vira vidro branco, mas os icones do tema
   continuam com traco branco: sumiam. A classe abaixo e posta pelo
   ciutek-toque.js apenas nos icones que o navegador reportou como
   quase brancos, para nao mexer em quem ja estava certo. */
.ctk-app .ck-icone-invisivel{ color:var(--ck-texto) !important; }
.ctk-app .ck-icone-invisivel[data-ck-icone="traco"]{ stroke:currentColor !important; }
.ctk-app .ck-icone-invisivel[data-ck-icone="preenchimento"]{ fill:currentColor !important; }


/* ==========================================================================
   O botao de seguir do Ciutek

   Ate aqui cada tela tinha o seu: no perfil um roxo chapado da plataforma
   (rgb(102,42,255), canto de 8px), na lista de seguidores um laranja
   (canto de 3px) para quem ja e seguido, e na coluna do feed um botao do
   proprio tema escrito "Acompanhar". Tres formatos, tres cores, tres
   palavras para a mesma acao.

   Agora e um so, nos dois estados:

     . seguir      - o gradiente roxo do Ciutek, com brilho no topo
     . seguindo    - o mesmo formato em vidro roxo, sem preenchimento, para
                     ler como "ja esta feito" sem competir com o primeiro

   Quem ja segue e passa o ponteiro ve "Deixar de seguir" em vermelho suave.
   A troca e so de pintura: o texto real do botao continua onde estava, e a
   frase de saida e desenhada por cima com um pseudo-elemento. Nada disso
   toca no que a plataforma faz - o clique continua sendo o Wo_RegisterFollow
   dela, com os mesmos parametros.

   No celular nao existe passar o ponteiro, entao o botao continua dizendo
   "Seguindo" e o toque desfaz, que e o comportamento da propria plataforma.
   ========================================================================== */
/* A classe .btn entra no seletor de proposito. A folha da plataforma tem
   .wo_user_profile .btn-glossy > button com !important; sem esse terceiro
   pedaco, o canto, o tamanho da letra e o recheio do botao continuavam
   sendo os dela. */
.ctk-app .btn.wo_follow_btn,
.ctk-app .btn.wo_following_btn,
.ctk-app .ck-pessoas__seguir {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 11px !important;
  font-family: inherit;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  line-height: 1;
  letter-spacing: .005em;
  cursor: pointer;
  text-shadow: none;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease,
              transform .16s ease, filter .16s ease;
}

/* Estado 1: ainda nao segue. */
.ctk-app .btn.wo_follow_btn,
.ctk-app .ck-pessoas__seguir {
  background: linear-gradient(135deg, #9a6bff 0%, #7a41f0 100%) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 4px 12px rgba(122, 65, 240, .28) !important;
}
.ctk-app .btn.wo_follow_btn:hover,
.ctk-app .ck-pessoas__seguir:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 8px 20px rgba(122, 65, 240, .42) !important;
}
.ctk-app .btn.wo_follow_btn:active,
.ctk-app .ck-pessoas__seguir:active {
  transform: scale(.97);
}

/* Estado 2: ja segue. Mesmo formato, sem preenchimento - o peso visual fica
   com quem ainda nao foi seguido. */
.ctk-app .btn.wo_following_btn,
.ctk-app .ck-pessoas__seguir--feito {
  position: relative;
  background: rgba(150, 96, 255, .13) !important;
  background-image: none !important;
  color: #c9a4ff !important;
  box-shadow: inset 0 0 0 1px rgba(178, 149, 255, .32) !important;
}

/* A frase de saida, so onde existe ponteiro. O texto real fica invisivel mas
   continua ocupando o lugar, entao nada pula. */
@media (hover: hover) and (pointer: fine) {
  .ctk-app .btn.wo_following_btn::after {
    content: "Deixar de seguir";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .16s ease;
    pointer-events: none;
  }
  .ctk-app .btn.wo_following_btn:hover {
    background: rgba(255, 90, 90, .14) !important;
    color: #ff9bab !important;
    box-shadow: inset 0 0 0 1px rgba(255, 120, 120, .34) !important;
  }
  .ctk-app .btn.wo_following_btn:hover > * {
    visibility: hidden;
  }
  .ctk-app .btn.wo_following_btn:hover::after {
    opacity: 1;
  }
}
.ctk-app .btn.wo_following_btn:active {
  transform: scale(.97);
}

/* O icone que a plataforma coloca antes do texto acompanha a cor. */
.ctk-app .btn.wo_follow_btn svg,
.ctk-app .btn.wo_following_btn svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto;
}

/* O envolucro da plataforma nao pinta nem arredonda nada por conta propria. */
.ctk-app .user-follow-button,
.ctk-app .user-follow-button.btn-glossy {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* --------------------------------------------------------------------------
   Tema claro
   -------------------------------------------------------------------------- */
html[data-ck-tema~="claro"] .ctk-app .btn.wo_follow_btn,
html[data-ck-tema~="claro"] .ctk-app .ck-pessoas__seguir {
  background: linear-gradient(135deg, #8b5cf6 0%, #6524cf 100%) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    0 4px 12px rgba(101, 36, 207, .22) !important;
}
html[data-ck-tema~="claro"] .ctk-app .btn.wo_following_btn,
html[data-ck-tema~="claro"] .ctk-app .ck-pessoas__seguir--feito {
  background: rgba(101, 40, 212, .09) !important;
  color: #5a1fb8 !important;
  box-shadow: inset 0 0 0 1px rgba(101, 40, 212, .22) !important;
}
@media (hover: hover) and (pointer: fine) {
  html[data-ck-tema~="claro"] .ctk-app .btn.wo_following_btn:hover {
    background: rgba(179, 36, 63, .09) !important;
    color: #a81f38 !important;
    box-shadow: inset 0 0 0 1px rgba(179, 36, 63, .26) !important;
  }
}

/* ============================================================
   Estado 3: pedido enviado (perfil fechado)
   ------------------------------------------------------------
   Quando o perfil e fechado o Wo_RegisterFollow da plataforma nao
   devolve "Seguindo": ele troca o botao por
   .wo_request_btn .btn-requested com a palavra "Requeridos".
   Esse terceiro estado nunca tinha sido pintado - ficava so com
   .btn .btn-default e herdava o que viesse da folha da plataforma,
   que e de onde saia o botao amarelado.

   Agora ele entra na mesma familia: mesma capsula de 11px, mesma
   altura, mesmo peso de letra. Sem preenchimento e com o contorno
   tracejado, que e o jeito de dizer "ainda esta em espera" sem
   inventar uma cor nova fora da linguagem da plataforma.

   O clique continua sendo o da plataforma (cancela o pedido). Onde
   existe ponteiro, o rotulo de saida aparece por cima com um
   pseudo-elemento, igual ao estado "Seguindo": o texto do DOM nao
   e tocado, entao nada do JavaScript dela quebra.
   ============================================================ */
.ctk-app .btn.wo_request_btn,
.ctk-app .btn.btn-requested {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px !important;
  padding: 0 15px !important;
  border: 1px dashed rgba(178, 149, 255, .38) !important;
  border-radius: 11px !important;
  font-family: inherit;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  line-height: 1;
  letter-spacing: .005em;
  cursor: pointer;
  text-shadow: none;
  background: rgba(150, 96, 255, .08) !important;
  background-image: none !important;
  color: #b9a3e6 !important;
  box-shadow: none !important;
  transition: background .18s ease, color .18s ease,
              border-color .18s ease, transform .16s ease;
}
.ctk-app .btn.wo_request_btn:active,
.ctk-app .btn.btn-requested:active {
  transform: scale(.97);
}

@media (hover: hover) and (pointer: fine) {
  .ctk-app .btn.wo_request_btn::after,
  .ctk-app .btn.btn-requested::after {
    content: "Cancelar pedido";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }
  .ctk-app .btn.wo_request_btn:hover,
  .ctk-app .btn.btn-requested:hover {
    background: rgba(255, 90, 90, .12) !important;
    color: #ff9bab !important;
    border-color: rgba(255, 90, 90, .34) !important;
  }
  .ctk-app .btn.wo_request_btn:hover > *,
  .ctk-app .btn.btn-requested:hover > * {
    visibility: hidden;
  }
  .ctk-app .btn.wo_request_btn:hover::after,
  .ctk-app .btn.btn-requested:hover::after {
    opacity: 1;
  }
}

/* Tema claro - estado 3 */
html[data-ck-tema~="claro"] .ctk-app .btn.wo_request_btn,
html[data-ck-tema~="claro"] .ctk-app .btn.btn-requested {
  background: rgba(101, 40, 212, .06) !important;
  color: #6b52a8 !important;
  border-color: rgba(101, 40, 212, .28) !important;
}
@media (hover: hover) and (pointer: fine) {
  html[data-ck-tema~="claro"] .ctk-app .btn.wo_request_btn:hover,
  html[data-ck-tema~="claro"] .ctk-app .btn.btn-requested:hover {
    background: rgba(179, 36, 63, .08) !important;
    color: #a81f38 !important;
    border-color: rgba(179, 36, 63, .3) !important;
  }
}

/* ============================================================
   A barrinha das notificacoes e o cartao de assinar
   ============================================================ */

/* 1. A barra de rolagem do painel de notificacoes
   Era a barra cinza do navegador. Agora e um roxo em degrade com
   brilho proprio, fina o suficiente para nao competir com a
   leitura. */
.ctk-app .notifications-dropdown,
.ctk-app .ck-topo__sino .dropdown-menu {
  scrollbar-width: thin;
  scrollbar-color: #9a6bff rgba(120, 80, 220, .12);
}
.ctk-app .notifications-dropdown::-webkit-scrollbar,
.ctk-app .ck-topo__sino .dropdown-menu::-webkit-scrollbar {
  width: 8px;
}
.ctk-app .notifications-dropdown::-webkit-scrollbar-track,
.ctk-app .ck-topo__sino .dropdown-menu::-webkit-scrollbar-track {
  background: rgba(120, 80, 220, .10);
  border-radius: 999px;
  margin: 6px 0;
}
.ctk-app .notifications-dropdown::-webkit-scrollbar-thumb,
.ctk-app .ck-topo__sino .dropdown-menu::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, #d9c2ff 0%, #9a6bff 42%, #6528d4 100%);
  box-shadow:
    0 0 8px rgba(154, 107, 255, .85),
    inset 0 1px 0 rgba(255, 255, 255, .45);
}
.ctk-app .notifications-dropdown::-webkit-scrollbar-thumb:hover,
.ctk-app .ck-topo__sino .dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #efe4ff 0%, #b295ff 42%, #7a41f0 100%);
  box-shadow: 0 0 13px rgba(178, 149, 255, 1), inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* 2. O cartao de Mensagens sai da coluna
   A conversa ja tem lugar proprio na barra lateral e no topo; o
   cartao repetia um caminho que ja existe. Fica so o convite para
   assinar, que e o unico dos dois que oferece algo novo. */
.ctk-app .ck-lado--mensagens {
  display: none !important;
}

/* 3. O convite para assinar, em ouro
   O simbolo ganha o mesmo dourado do selo de autoridade - a unica
   cor quente que ja existe na plataforma, entao nada e inventado.
   A placa em volta tem luz no topo e sombra embaixo, e um fio de
   luz caminha pelo traco da estrela (o degrade e desenhado em SVG
   e anda sozinho; quem pede menos movimento no sistema recebe a
   estrela parada). */
.ctk-app .ck-lado--assinar .ck-lado__icone {
  position: relative;
  background:
    radial-gradient(120% 120% at 30% 18%, rgba(255, 245, 214, .22) 0%, rgba(255, 245, 214, 0) 52%),
    linear-gradient(160deg, #4a3a12 0%, #2f2409 62%, #241b06 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 170, .38),
    inset 0 -2px 5px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(240, 205, 104, .48),
    0 6px 16px rgba(150, 110, 20, .34) !important;
}
.ctk-app .ck-lado--assinar .ck-lado__icone svg {
  filter: drop-shadow(0 0 5px rgba(240, 205, 104, .55));
}
.ctk-app .ck-lado--assinar .ck-lado__titulo {
  background: linear-gradient(100deg, #fff3c4 0%, #f0cd68 42%, #ffe7a0 62%, #e0b445 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
@media (prefers-reduced-motion: reduce) {
  .ctk-app .ck-lado--assinar .ck-lado__icone svg { filter: none; }
}


/* ===========================================================================
   CIUTEK - Velvet Nexus: a coluna da direita enxuta

   1. Cartao do proprio usuario: sem arroba, sem postagens, sem seguindo.
      Fica "Seguidores 2" numa linha so e, ao lado, o botao de abrir a conta.
   2. Convite para assinar: caixa roxa escura, fio dourado, letra legivel.
   3. Top 10: sem titulo, so a conta em destaque, selo ao lado do nome e um
      fio de luz dourada que caminha pela borda.
   =========================================================================== */

/* --- 1. Cartao do proprio usuario ---------------------------------------- */
.ctk-app .wow_side_loggd_usr .wow_side_loggd_usr_hdr .title p {
  display: none !important;
}
.ctk-app .wow_side_loggd_usr .wow_side_loggd_usr_hdr .title {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ctk-app .wow_side_loggd_usr .wo_user_side_info > li[data-ck-info="postagens"],
.ctk-app .wow_side_loggd_usr .wo_user_side_info > li[data-ck-info="seguindo"] {
  display: none !important;
}
.ctk-app .wow_side_loggd_usr .wo_user_side_info {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 2px 16px 16px !important;
  border: 0 !important;
  list-style: none !important;
}
.ctk-app .wow_side_loggd_usr .wo_user_side_info > li {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: left !important;
}
.ctk-app .wow_side_loggd_usr .wo_user_side_info > li[data-ck-info="seguidores"] > .menu_list {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  text-decoration: none !important;
}
.ctk-app .wow_side_loggd_usr .wo_user_side_info > li[data-ck-info="seguidores"] .split-link {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ctk-app .wow_side_loggd_usr .wo_user_side_info > li[data-ck-info="seguidores"] b {
  display: inline !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--ck-texto-2, #b9a8dd) !important;
}
.ctk-app .wow_side_loggd_usr .wo_user_side_info > li[data-ck-info="seguidores"] > .menu_list > span:not(.split-link) {
  display: inline !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  color: var(--ck-texto, #ffffff) !important;
}
.ctk-app .wow_side_loggd_usr .wo_user_side_info > li.ck-lateral__acao {
  margin-left: auto !important;
}
.ctk-app .ck-lateral__ver {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 17px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  color: #ffffff !important;
  text-decoration: none !important;
  background: linear-gradient(135deg, #9a6bff 0%, #7a41f0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    0 6px 16px rgba(122, 65, 240, .42);
  transition: filter .16s ease, transform .16s ease;
}
.ctk-app .ck-lateral__ver:hover { filter: brightness(1.07); }
.ctk-app .ck-lateral__ver:active { transform: translateY(1px); }
.ctk-app .ck-lateral__ver:focus-visible {
  outline: 2px solid #c6a6ff;
  outline-offset: 2px;
}
/* --- 2. O convite para assinar, em roxo escuro com fio dourado ----------- */
.ctk-app .ck-lados .ck-lado--assinar {
  position: relative;
  background: linear-gradient(150deg, #251742 0%, #1a1030 100%) !important;
  border: 1px solid rgba(226, 183, 92, .52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, .10),
    0 10px 26px rgba(0, 0, 0, .44) !important;
}
.ctk-app .ck-lados .ck-lado--assinar:hover {
  border-color: rgba(240, 205, 130, .78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, .16),
    0 12px 30px rgba(0, 0, 0, .5),
    0 0 0 1px rgba(226, 183, 92, .18) !important;
}
.ctk-app .ck-lados .ck-lado--assinar .ck-lado__titulo {
  color: #f2d493 !important;
  font-weight: 700 !important;
  letter-spacing: .1px;
}
.ctk-app .ck-lados .ck-lado--assinar .ck-lado__apoio {
  color: #c3b493 !important;
}

/* --- 3. O Top 10 --------------------------------------------------------- */
@property --ck-giro-ouro {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes ck-giro-ouro { to { --ck-giro-ouro: 360deg; } }

/* o titulo antigo e a moldura de lista saem: fica so a conta em destaque */
.ctk-app .featured-users.ck-top10 > .sidebar-title-back,
.ctk-app .featured-users.ck-top10 > .list-group-item {
  display: none !important;
}
.ctk-app .featured-users.ck-top10 {
  position: relative;
  margin: 14px 0 0 !important;
  padding: 20px 16px 18px !important;
  border: 1px solid rgba(226, 183, 92, .18) !important;
  border-radius: 20px !important;
  background: linear-gradient(158deg, #221639 0%, #170e29 100%) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .42) !important;
  overflow: visible !important;
}
/* o fio de luz dourada que caminha pela borda */
.ctk-app .featured-users.ck-top10::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--ck-giro-ouro),
    rgba(226, 183, 92, 0) 0deg,
    rgba(226, 183, 92, 0) 236deg,
    rgba(255, 231, 168, .95) 300deg,
    rgba(226, 183, 92, .30) 342deg,
    rgba(226, 183, 92, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: ck-giro-ouro 7.5s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .ctk-app .featured-users.ck-top10::before { animation: none; }
}
/* a fileira: tres contas por vez, o resto a um arrasto ou a um toque.
   A lista original da plataforma continua no lugar, apenas escondida:
   as contas foram movidas dela para ca, nao copiadas. */
.ctk-app .featured-users.ck-top10 .ck-top10__origem {
  display: none !important;
}
.ctk-app .featured-users.ck-top10 .ck-top10__fila {
  display: flex !important;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ctk-app .featured-users.ck-top10 .ck-top10__fila::-webkit-scrollbar { display: none; }
/* com uma ou duas contas nao ha o que arrastar: a fileira fica no meio,
   em vez de deixar um vazio grande a direita */
.ctk-app .featured-users.ck-top10.ck-top10--cabe .ck-top10__fila {
  justify-content: center !important;
}
.ctk-app .featured-users.ck-top10 .ck-top10__fila--pegando {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.ctk-app .featured-users.ck-top10 .ck-top10__vaga {
  flex: 0 0 calc((100% - 20px) / 3) !important;
  max-width: calc((100% - 20px) / 3) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  scroll-snap-align: start;
  list-style: none !important;
}
.ctk-app .featured-users.ck-top10 .ck-top10__conta {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  text-decoration: none !important;
}
.ctk-app .featured-users.ck-top10 .ck-top10__aro {
  display: block;
  width: 100%;
  max-width: 68px;
  aspect-ratio: 1 / 1;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #e9c67c, #fff0c4, #c79a3c, #e9c67c);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .42);
}
.ctk-app .featured-users.ck-top10 .ck-top10__aro img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #1b1030;
  box-shadow: none !important;
}
.ctk-app .featured-users.ck-top10 .ck-top10__nome {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}
.ctk-app .featured-users.ck-top10 .ck-top10__quem {
  display: block !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.25;
  text-align: center;
  color: var(--ck-texto, #ffffff) !important;
}
.ctk-app .featured-users.ck-top10 .ck-top10__nome > svg {
  flex: 0 0 auto;
  width: 13px !important;
  height: 13px !important;
}
/* as setas so existem quando ha mais de tres contas, e cada uma some
   quando nao ha mais para onde ir daquele lado */
.ctk-app .featured-users.ck-top10 .ck-top10__seta {
  position: absolute;
  top: 46%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(226, 183, 92, .52);
  border-radius: 50%;
  cursor: pointer;
  color: #f2d493;
  background: linear-gradient(150deg, #2a1b47 0%, #1c1132 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
  transition: color .16s ease, border-color .16s ease, opacity .18s ease;
  z-index: 3;
}
.ctk-app .featured-users.ck-top10 .ck-top10__seta:hover {
  color: #ffeab4;
  border-color: rgba(245, 212, 145, .85);
}
.ctk-app .featured-users.ck-top10.ck-top10--tem-mais .ck-top10__seta { display: inline-flex; }
.ctk-app .featured-users.ck-top10.ck-top10--inicio .ck-top10__seta--esquerda { display: none; }
.ctk-app .featured-users.ck-top10.ck-top10--fim .ck-top10__seta--direita { display: none; }
.ctk-app .featured-users.ck-top10 .ck-top10__seta--direita  { right: -13px; }
.ctk-app .featured-users.ck-top10 .ck-top10__seta--esquerda { left: -13px; }

/* --- 4. Os mesmos tres blocos no tema claro ------------------------------
   O tema claro do Ciutek marca o <html> com .ck-claro. As superficies
   escuras do Top 10 e os textos que nasceram para fundo escuro sao
   redesenhados aqui; a caixa dourada de assinante continua roxa escura
   nos dois temas, que e o que o desenho pede. */
html.ck-claro .ctk-app .wow_side_loggd_usr .wow_side_loggd_usr_hdr .title a {
  color: #241638 !important;
}
html.ck-claro .ctk-app .wow_side_loggd_usr .wo_user_side_info > li[data-ck-info="seguidores"] b {
  color: #6b5b8e !important;
}
html.ck-claro .ctk-app .wow_side_loggd_usr .wo_user_side_info > li[data-ck-info="seguidores"] > .menu_list > span:not(.split-link) {
  color: #241638 !important;
}
html.ck-claro .ctk-app .featured-users.ck-top10 {
  border-color: rgba(184, 141, 52, .34) !important;
  background: linear-gradient(158deg, #ffffff 0%, #f6f2ff 100%) !important;
  box-shadow: 0 14px 32px rgba(60, 30, 120, .12) !important;
}
html.ck-claro .ctk-app .featured-users.ck-top10::before {
  background: conic-gradient(from var(--ck-giro-ouro),
    rgba(184, 141, 52, 0) 0deg,
    rgba(184, 141, 52, 0) 236deg,
    rgba(206, 158, 58, .95) 300deg,
    rgba(184, 141, 52, .30) 342deg,
    rgba(184, 141, 52, 0) 360deg);
}
html.ck-claro .ctk-app .featured-users.ck-top10 .ck-top10__aro {
  background: conic-gradient(from 210deg, #c79a3c, #f0d99a, #a97f27, #c79a3c);
  box-shadow: 0 8px 16px rgba(60, 30, 120, .16);
}
html.ck-claro .ctk-app .featured-users.ck-top10 .ck-top10__aro img {
  background: #ffffff;
}
html.ck-claro .ctk-app .featured-users.ck-top10 .ck-top10__quem {
  color: #241638 !important;
}
html.ck-claro .ctk-app .featured-users.ck-top10 .ck-top10__seta {
  color: #8a6a1f;
  border-color: rgba(184, 141, 52, .58);
  background: linear-gradient(150deg, #ffffff 0%, #f3edff 100%);
  box-shadow: 0 8px 18px rgba(60, 30, 120, .16);
}
html.ck-claro .ctk-app .featured-users.ck-top10 .ck-top10__seta:hover {
  color: #6d520f;
  border-color: rgba(184, 141, 52, .9);
}


/* --- 5. Os blocos da lateral no celular ---------------------------------
   No computador esses cartoes vivem numa coluna estreita, entao o alinhamento
   a esquerda funciona. No celular eles ocupam a largura inteira da tela e o
   conteudo encostado na esquerda deixa um vazio grande a direita. Aqui os
   icones e os nomes passam a ficar no meio. */
@media (max-width: 991px) {
  .ctk-app .wow_side_loggd_usr .wo_user_side_info {
    justify-content: center !important;
  }
  .ctk-app .wow_side_loggd_usr .wo_user_side_info > li.ck-lateral__acao {
    margin-left: 0 !important;
  }
  .ctk-app .ck-lados .ck-lado {
    justify-content: center !important;
    text-align: center !important;
  }
  .ctk-app .ck-lados .ck-lado .ck-lado__texto {
    flex: 0 1 auto !important;
    align-items: center !important;
    text-align: center !important;
  }
  .ctk-app .featured-users.ck-top10 .ck-top10__vaga {
    flex-basis: calc((100% - 28px) / 3) !important;
    max-width: calc((100% - 28px) / 3) !important;
  }
  .ctk-app .featured-users.ck-top10 .ck-top10__fila {
    gap: 14px;
  }
  .ctk-app .featured-users.ck-top10 .ck-top10__aro {
    max-width: 88px;
  }
  .ctk-app .featured-users.ck-top10 .ck-top10__quem {
    font-size: 13.5px !important;
  }
  .ctk-app .ck-pessoas .ck-pessoas__topo {
    text-align: center !important;
  }
}


/* ===========================================================================
   A estrela do convite: corpo dourado inteiro, placa roxa escura

   Antes a estrela era so contorno (fill: none) com o fio de luz correndo
   pelo traco. Agora o corpo e pintado de dourado macico e o fio de luz
   continua caminhando pela borda - as duas coisas ao mesmo tempo. A placa
   em volta deixa de ser escura neutra e passa a ser roxa profunda.
   =========================================================================== */
.ctk-app .ck-lados .ck-lado--assinar .ck-lado__icone {
  background-color: #2b1a4e !important;
  background-image:
    radial-gradient(120% 120% at 30% 18%, rgba(255, 245, 214, .20) 0%, rgba(255, 245, 214, 0) 54%),
    linear-gradient(158deg, #33205c 0%, #241542 100%) !important;
  border: 1px solid rgba(226, 183, 92, .40) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, .16),
    0 6px 14px rgba(0, 0, 0, .40) !important;
}
.ctk-app .ck-lados .ck-lado--assinar .ck-lado__icone svg path {
  fill: #e8c274 !important;
  stroke-width: 1.6 !important;
  paint-order: stroke fill;
  filter: drop-shadow(0 1px 1px rgba(60, 30, 0, .45));
}
html.ck-claro .ctk-app .ck-lados .ck-lado--assinar .ck-lado__icone {
  background-color: #2b1a4e !important;
  border-color: rgba(226, 183, 92, .46) !important;
}


/* ===========================================================================
   A faixa de identificacao do TOP 10

   O titulo da plataforma continua escondido (ele vinha como item de lista,
   fora do desenho). No lugar entra esta faixa: marca, nome da secao e a
   linha que explica o que a secao e. A posicao de cada conta aparece num
   selo pequeno no canto da foto - e a informacao que a secao carrega, entao
   ela precisa ser legivel sem competir com o rosto.
   =========================================================================== */
.ctk-app .featured-users.ck-top10 .ck-top10__faixa {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(226, 183, 92, .22);
}
.ctk-app .featured-users.ck-top10 .ck-top10__marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: #f2d493;
  background: linear-gradient(150deg, #33205c 0%, #241542 100%);
  border: 1px solid rgba(226, 183, 92, .40);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .16);
}
.ctk-app .featured-users.ck-top10 .ck-top10__textos {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.ctk-app .featured-users.ck-top10 .ck-top10__titulo {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: #f2d493;
}
.ctk-app .featured-users.ck-top10 .ck-top10__apoio {
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .2px;
  color: var(--ck-texto-2, #b9a8dd);
}

/* o numero da posicao */
.ctk-app .featured-users.ck-top10 .ck-top10__conta { position: relative; }
.ctk-app .featured-users.ck-top10 .ck-top10__posicao {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(calc(-50% - 26px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #2a1b06;
  background: linear-gradient(150deg, #f6dfa6 0%, #d3a751 100%);
  border: 1px solid rgba(120, 88, 24, .35);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .38);
  pointer-events: none;
}

/* no tema claro a faixa acompanha o bege */
html.ck-claro .ctk-app .featured-users.ck-top10 .ck-top10__faixa {
  border-bottom-color: rgba(184, 141, 52, .30);
}
html.ck-claro .ctk-app .featured-users.ck-top10 .ck-top10__titulo {
  color: #8a6a1f;
}
html.ck-claro .ctk-app .featured-users.ck-top10 .ck-top10__apoio {
  color: var(--ck-texto-2, #6a6152);
}

@media (max-width: 991px) {
  .ctk-app .featured-users.ck-top10 .ck-top10__faixa { justify-content: center; }
}


/* o item PAINEL, no topo do menu da conta e so para administradores */
.ctk-app .ck-menu__item--painel > .ck-menu__link {
  border-radius: 10px;
  background: rgba(122, 65, 240, .14);
}
.ctk-app .ck-menu__item--painel > .ck-menu__link:hover {
  background: rgba(122, 65, 240, .24);
}
.ctk-app .ck-menu__item--painel .ck-menu__nome {
  font-weight: 700;
  letter-spacing: .2px;
}
:root[data-ck-tema="claro"] .ctk-app .ck-menu__item--painel > .ck-menu__link {
  background: rgba(101, 40, 212, .10);
}
:root[data-ck-tema="claro"] .ctk-app .ck-menu__item--painel > .ck-menu__link:hover {
  background: rgba(101, 40, 212, .18);
}


/* ===========================================================================
   A fileira de atalhos, o "Mais" e os pedidos de amizade

   A fileira fica logo abaixo da saudacao, no lugar onde estava a barra de
   filtros do feed. Borda preta com fio roxo; cada caminho e um circulo roxo
   escuro com o desenho em roxo claro. Sem rotulo na tela - o nome continua
   no title e no aria-label, entao o balao e o leitor de tela dizem o que e.
   =========================================================================== */
.ctk-app .ck-filtro-antigo { display: none !important; }

.ctk-app .ck-atalhos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid #0a0612;
  border-radius: 18px;
  background: var(--ck-superficie, #171129);
  box-shadow:
    inset 0 0 0 1px rgba(154, 107, 255, .22),
    0 10px 26px rgba(0, 0, 0, .34);
  overflow-x: auto;
  scrollbar-width: none;
}
.ctk-app .ck-atalhos::-webkit-scrollbar { display: none; }

.ctk-app .ck-atalhos__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 3px;
  border-radius: 50%;
  text-decoration: none !important;
  transition: transform .16s ease;
}
.ctk-app .ck-atalhos__item:hover { transform: translateY(-2px); }
.ctk-app .ck-atalhos__item:focus-visible {
  outline: 2px solid #9a6bff;
  outline-offset: 2px;
}

.ctk-app .ck-atalhos__circulo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #b295ff;                     /* o desenho, em roxo claro */
  background: linear-gradient(150deg, #2a1b4e 0%, #1d1236 100%);
  border: 1px solid rgba(154, 107, 255, .30);
  box-shadow: inset 0 1px 0 rgba(178, 149, 255, .18);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.ctk-app .ck-atalhos__item:hover .ck-atalhos__circulo {
  border-color: rgba(178, 149, 255, .70);
  box-shadow:
    inset 0 1px 0 rgba(178, 149, 255, .28),
    0 0 14px rgba(122, 65, 240, .45);
}
.ctk-app .ck-atalhos__circulo svg {
  width: 21px !important;
  height: 21px !important;
  color: inherit;
  stroke: currentColor;
}

/* no tema claro a placa acompanha o bege, e o fio preto vira um contorno
   quente - preto puro sobre bege pesa demais */
:root[data-ck-tema="claro"] .ctk-app .ck-atalhos {
  border-color: rgba(38, 28, 14, .30);
  background: var(--ck-superficie, #fffefb);
  box-shadow:
    inset 0 0 0 1px rgba(101, 40, 212, .14),
    0 8px 20px rgba(60, 30, 120, .10);
}

/* o "Mais" sai do trilho no computador: os caminhos dele agora estao a vista */
@media (min-width: 992px) {
  .ctk-app .ck-trilho__sistema > .ck-mais { display: none !important; }
}

/* os pedidos de amizade nao fazem parte deste tema */
.ctk-app .ck-trilho__sistema > .requests-container { display: none !important; }


/* ===========================================================================
   Contas em Destaque
   Mesmo desenho da coluna: cartao, foto redonda, nome com selo ao lado e
   uma acao clara. O selo usa as classes do sistema de selos, entao ele
   acompanha o nivel e a cor que a administracao definiu.
   =========================================================================== */
/* a coluna tem uma regra que deixa <section> em flex; aqui o bloco precisa
   empilhar cabecalho e lista, senao os dois disputam a mesma linha e a caixa
   transborda (medido: 321 px de conteudo numa caixa de 259) */
.ctk-app .ck-destaques {
  display: block !important;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 16px;
  border: 1px solid var(--ck-borda, rgba(178,149,255,.18));
  border-radius: 18px;
  background: var(--ck-superficie, #171129);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}
.ctk-app .ck-destaques__topo { margin-bottom: 12px; }
.ctk-app .ck-destaques__titulo {
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--ck-texto, #efecf7);
}
.ctk-app .ck-destaques__apoio {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--ck-texto-2, #b9a8dd);
}
.ctk-app .ck-destaques__lista { margin: 0; padding: 0; list-style: none; }
.ctk-app .ck-destaques__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.ctk-app .ck-destaques__item + .ck-destaques__item {
  border-top: 1px solid var(--ck-borda, rgba(178,149,255,.12));
}
.ctk-app .ck-destaques__foto {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ck-superficie-2, #1f1738);
}
.ctk-app .ck-destaques__quem { min-width: 0; flex: 1; }
.ctk-app .ck-destaques__nome {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.ctk-app .ck-destaques__nome > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  color: var(--ck-texto, #efecf7);
}
.ctk-app .ck-destaques__nome > svg { flex: 0 0 auto; width: 14px; height: 14px; }
.ctk-app .ck-destaques__usuario {
  font-size: 12.5px;
  color: var(--ck-texto-2, #b9a8dd);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ctk-app .ck-destaques__ver {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff !important;
  text-decoration: none !important;
  background: linear-gradient(135deg, #9a6bff 0%, #7a41f0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 5px 14px rgba(122,65,240,.36);
  transition: filter .16s ease;
}
.ctk-app .ck-destaques__ver:hover { filter: brightness(1.07); }
.ctk-app .ck-destaques__ver:focus-visible { outline: 2px solid #c6a6ff; outline-offset: 2px; }

@media (max-width: 991px) {
  .ctk-app .ck-destaques__topo { text-align: center; }
}


/* ==========================================================================
   CIUTEK :: criador de publicacao somente texto
   A fileira de acoes (Publicar foto / Criar enquete / Publicar video) sai da
   tela. Ela continua no HTML, entao nada da plataforma quebra e a decisao e
   reversivel apagando este bloco. O cartao passa a ser uma peca unica:
   avatar, nome, campo de texto e o botao de publicar.
   ========================================================================== */

.ctk-app .sun_pub_mid_foot,
.ctk-app .publisher-box .sun_foot_drop_menu {
  display: none !important;
}

/* o campo de texto deixa de ser uma caixa separada e vira o proprio cartao */
.ctk-app .publisher-box .wo_pub_txtara_combo {
  background: transparent !important;
  border: 0 !important;
}
.ctk-app .publisher-box textarea.postText {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  resize: none;
}
.ctk-app .publisher-box textarea.postText:focus {
  outline: 0;
  box-shadow: none !important;
}
/* o foco fica visivel no cartao inteiro, nao numa moldura interna */
.ctk-app .publisher-box .wo_pub_txtara_combo:focus-within {
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(154, 107, 255, .34);
}

/* o rodape com o botao de publicar encosta no campo, sem degrau de cor */
.ctk-app .publisher-box .publisher-box-footer,
.ctk-app .publisher-box .pub-footer-bottom {
  background: transparent !important;
  border-top: 0 !important;
}

/* botao de emoji: circulo discreto, do mesmo conjunto do cartao */
.ctk-app .publisher-box .add-emoticons > .dropdown-toggle {
  background: rgba(154, 107, 255, .14) !important;
  color: var(--ck-texto, #efecf7) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(154, 107, 255, .10);
  box-shadow: inset 0 0 0 1px rgba(154, 107, 255, .22);
  transition: background .18s ease;
}
.ctk-app .publisher-box .add-emoticons > .dropdown-toggle:hover {
  background: rgba(154, 107, 255, .20);
}


/* CIUTEK :: botao principal com corpo
   Estava com fundo transparente: lia-se como texto solto, e no modo claro
   ficava branco sobre branco. Agora tem corpo proprio nos dois modos. */
.ctk-app .btn.btn-main,
.ctk-app button.btn-main {
  background: linear-gradient(135deg, #7a41f0 0%, #5b2fc9 100%) !important;
  border: 0 !important;
  color: #ffffff !important;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(91, 47, 201, .28);
  transition: filter .18s ease, transform .18s ease;
}
.ctk-app .btn.btn-main:hover,
.ctk-app button.btn-main:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}


/* CIUTEK :: grade de opcoes do criador
   Ao focar o campo, a plataforma abria uma grade com Sentir, Gravar voz,
   Fazer upload, localizacao, vender produto, Carregar audio e Momentos.
   O criador da Ciutek e so de texto, entao a grade nao aparece mais.
   Continua no HTML: apagar este bloco devolve tudo. */
.ctk-app .publisher-box .publisher-box-footer .sun_pub_more,
.ctk-app .publisher-box .publisher-box-footer .pub-footer-upper {
  display: none !important;
}
/* sobra a linha do publico e do botao de publicar, encostada no campo */
.ctk-app .publisher-box .publisher-box-footer .pub-footer-bottom {
  padding: 4px 14px 12px !important;
}


/* CIUTEK :: linha de publicar
   O seletor de publico e o contador vinham em cinza chapado do tema antigo. */
.ctk-app .publisher-box .sun_pub_privacy_dropdown {
  background: rgba(154, 107, 255, .14) !important;
  color: var(--ck-texto, #efecf7) !important;
  box-shadow: inset 0 0 0 1px rgba(154, 107, 255, .24);
  border-radius: 999px;
}
.ctk-app .publisher-box .charsLeft-post {
  color: var(--ck-texto-2, #a99bbd) !important;
  font-variant-numeric: tabular-nums;
}


/* o desenho do emoji acompanha o texto do tema */
.ctk-app .publisher-box .add-emoticons > .dropdown-toggle svg,
.ctk-app .publisher-box .add-emoticons > .dropdown-toggle svg path {
  fill: currentColor !important;
}