/* =========================================================
   GimmyClues — Application CSS
   Tokens alinhados ao Sentinela UI Kit
   ========================================================= */

/* ---------- Fontes locais Mulish ---------- */
@font-face { font-family:"Mulish"; src:url("../fonts/Mulish-Light.ttf") format("truetype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Mulish"; src:url("../fonts/Mulish-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Mulish"; src:url("../fonts/Mulish-Italic.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Mulish"; src:url("../fonts/Mulish-Medium.ttf") format("truetype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Mulish"; src:url("../fonts/Mulish-SemiBold.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Mulish"; src:url("../fonts/Mulish-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Mulish"; src:url("../fonts/Mulish-ExtraBold.ttf") format("truetype"); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:"Mulish"; src:url("../fonts/Mulish-Black.ttf") format("truetype"); font-weight:900; font-style:normal; font-display:swap; }

/* ---------- Tokens (GimmyClues UI Kit) ----------
   Azul Principal / Azul de Apoio / Laranja de Destaque / Laranja de Apoio /
   Cinza Claro / Verde Sucesso — paleta oficial do produto. */
:root {
    --blue-primary:        #006ABB; /* Ações principais, CTAs, links, elementos ativos */
    --btn-primary-bg:      #00C0EF; /* Fundo do .btn-primary no hover (normal usa --blue-primary-dark) */
    --blue-primary-dark:   #008EDD; /* Azul de Apoio: confiança, navegação, headers, hover do primário */
    --blue-primary-light:  #E3F4FC;
    --blue-primary-tint:   #BEE7F8;
    --btn-secondary-bg:    #E9EBF8; /* Fundo do .btn-secondary (ex: Change Name/Email/Password) */
    --btn-secondary-purple-bg:   #EAE4F6; /* Fundo do .btn-secondary-purple ("botao gelo roxo") */
    --btn-secondary-purple-text: #7C55AC; /* Texto do .btn-secondary-purple ("botao gelo roxo") */
    --blue-navy-dark:      #0D2645; /* Fundo escuro do player de audio */
    --player-accent:       var(--purple); /* Progresso do player, slider de velocidade - era azul (--blue-happy), virou roxo 31/07/2026 */
    --blue-player-track:    #2F405E; /* Barra do trecho ainda nao reproduzido no player */
    --orange-highlight:    #FF4D00; /* Laranja de Destaque: uso pontual (pill de "sistema atualizado" no terminal de update) */
    --orange-highlight-dark: #CC3D00; /* Hover/rodando da bolinha flutuante de update - mesmo valor do --orange-dark do sentinela */
    --orange-support:      #FF4630; /* Laranja de Apoio: so pro alerta generico de "warning" - nunca pra destaque de marca */
    --dark:            #212121;
    --gray:            #424242;
    --gray-light:      #6B6B6B;
    --gray-soft:       #9A9A9A;
    --gray-pale:       #cccccc;
    --gray-surface:    #EBEBEB; /* Cinza Claro: fundos, divisórias, superfícies neutras */
    --sidebar-bg:      #fff; /* Fundo do rail e sidebar */
    --border-subtle:   #E1E1E1; /* Bordas sutis: rail, dropdown, dividers */
    --field-bg:        #FAFAFA; /* Fundo de inputs e selects */
    --field-border:    #E0E0E0; /* Borda de inputs e selects */
    --tab-active-bg:   #F1F4FA; /* Fundo da aba ativa */
    --text-input:      #333333; /* Cor do texto dentro de inputs */
    --focus-ring-color: rgba(0,149,217,0.10); /* Anel de foco */
    --overlay-bg:      rgba(0,0,0,0.5);       /* Overlay de modais */
    --stripe-bg:       rgba(0,0,0,0.02);      /* Zebra stripe em tabelas */
    --green-success-tint: rgba(37,211,102,0.12); /* Tint verde suave */
    --blue-primary-tint-subtle: rgba(0,106,187,0.06); /* Tint azul para blockquote */
    --blue-primary-glow: rgba(0,106,187,0.35); /* Pulso do botao "Gerar Narracao" quando a selecao ainda nao foi aplicada */
    --purple:          #7B61C7; /* Acento roxo - cor de destaque/marca (faz parte do logotipo), substitui o antigo laranja de destaque */
    --purple-dark:     #5B3FA0;
    --purple-light:    #EDE7F6; /* Tint roxo */
    --pink:            #D6588C; /* Acento rosa */
    --pink-light:      #FCE4EC; /* Tint rosa */
    --terminal-bg:     #0A0A0A; /* Fundo terminal/code block */
    --terminal-green:  #00FF41; /* Texto terminal */
    --navbar-glass:    rgba(36,34,30,0.92);    /* Navbar glass bg */
    --navbar-glass-border: rgba(255,255,255,0.06); /* Navbar border sutil */
    --white-glass-sm:  rgba(255,255,255,0.15); /* Ícone sobre fundo colorido */
    --white-glass-md:  rgba(255,255,255,0.4);  /* Dot sobre fundo colorido */
    --white-glass-text: rgba(255,255,255,0.85); /* Texto sobre fundo colorido */
    --white:           #FFFFFF;
    --white-soft:      #F4F7FE; /* Fundo do corpo principal (main#snt-main), levemente off-white */
    --green-success:       #25D366;
    --green-success-dark:  #1FB859;
    --green-success-light: #DFF6EC; /* Tint verde-água, item de menu concluído */
    --green-celebrate-bg:  #CEFFDE; /* Fundo do modal de pagamento confirmado */
    /* Cores de badge por plano - mesma paleta dos cards de preco (site e
       Billing do app), fonte unica em app\models\PlanTier::COLORS. */
    --plan-starter-green:  #01D686; /* Badge do plano Starter em Manage Users */
    --plan-pro-blue:       #048DF8; /* Badge do plano Pro em Manage Users */
    --plan-creators-orange: #F9B030; /* Badge do plano Creators em Manage Users */
    --plan-agency-navy:    #001139; /* Badge do plano Agency em Manage Users */
    --yellow:          #FFD500;
    --yellow-tint:     #FFF1A8;
    --red:             #E10600;
    --red-dark:        #B80500;
    --gemini-purple:    #8C73C1; /* Icone "Uso do Gemini" na tela de Settings */
    --translation-blue: #2E93D7; /* Icone "Traduções" na tela de Settings */
    --language-blue:    #3182BD; /* Icone "Línguas" na tela de Settings */
    --voice-blue-dark:  #08519C; /* Icone "Vozes" na tela de Settings */
    --facebook-blue:    #0766FF; /* Icone Facebook no Social Connect */
    --linkedin-blue:    #0A66C2; /* Icone LinkedIn no Social Connect */
    --instagram-purple: #6926AD; /* Icone + botoes "Post to Instagram" (Social Connect, My Videos, Criar Video/Character) */
    --tiktok-black:     #010101; /* Icone/botoes TikTok no Social Connect - tambem reaproveitada como preto puro do bezel de celular nas modais TikTok/YouTube */
    --tiktok-cyan:      #25F4EE; /* Ciano oficial da marca TikTok - borda da modal "Post on TikTok" */
    --tiktok-cyan-dark: #12B8AC; /* Ciano escurecido - botao "Postar" da modal (contraste com texto branco) */
    --dark-modal-bg:    #202123; /* Fundo das modais "Post on TikTok"/"Post on YouTube" (diferente do --terminal-bg de code block) */
    --navbar-dark:     #24221E;
    --border:          rgba(66,66,66,0.12);
    --border-strong:   rgba(66,66,66,0.35);
    --border-on-dark:  rgba(255,255,255,0.14); /* Borda sutil clara sobre fundo escuro (ex. modal do YouTube) */
    --google-btn-gradient: linear-gradient(to bottom, #ffffff 0%, #f1f1f1 31%, #e1e1e1 56%, #f1f1f1 74%, #f6f6f6 100%);
    --grid-hover-gradient: linear-gradient(90deg, #F7ECFD 0%, #E1C7F7 100%); /* "Roxinho de grid" - hover dos cards de lista (Manage/Settings/Docs/etc.) */
    --shadow-sm:       0 2px 6px rgba(0,0,0,0.05);
    --shadow-md:       0 4px 24px rgba(0,0,0,0.06);
    --shadow-lg:       0 12px 40px rgba(0,0,0,0.10);
    --radius-sm:       6px;
    --radius-md:       8px;
    --radius-lg:       12px;
    --radius-full:     50px;
    --font:            "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Estado padrão: desabilitado (botões e campos) ---------- */
button:disabled,
.btn:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--gray-pale);
    border-color: var(--gray-pale);
    color: var(--gray-soft);
    cursor: not-allowed;
    opacity: 1;
}

/* ---------- Reset / base ---------- */
html {
    /* Reserva sempre o espaco da barra de rolagem vertical, mesmo em paginas
       curtas - sem isso, navegar entre telas (ou trocar de aba, ex.
       Termos/Glossario em Traducoes) com alturas de conteudo bem diferentes
       faz a largura visivel do conteudo "pular" alguns pixels toda vez que a
       barra aparece/some, deixando cards que deveriam ter a mesma largura
       visualmente desalinhados. */
    scrollbar-gutter: stable;
}

html, body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    background: var(--gray-surface);
    -webkit-font-smoothing: antialiased;
}

.snt-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--gray-surface);
}


html, body, div, p, table, td, ul, li, select, label, input, a, button {
    font-family: var(--font);
    font-size: 14px;
    color: var(--gray);
    /* Sem isso, enquanto o Mulish (peso 600/700/etc.) ainda esta carregando,
       o navegador sintetiza um negrito falso na fonte de fallback do sistema
       pra aproximar aquele peso - fica visualmente mais pesado que o Mulish
       de verdade, dando a impressao de "flash de negrito que depois afina"
       assim que a fonte customizada termina de carregar. */
    font-synthesis: none;
}

/* ---------- Tipografia ---------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font);
    font-weight: 800;
    color: var(--gray);
}
h3, h4, h5, h6 { color: var(--gray-light); font-weight: 700; }

h1 { font-size: 32px; letter-spacing: -0.01em; }
h2 { font-size: 28px; }

/* ---------- Container — larguras alinhadas ao Bootstrap 3 (sentinela) ---------- */
@media (min-width: 768px)  { .container { max-width: 750px; } }
@media (min-width: 992px)  { .container { max-width: 970px; } }
@media (min-width: 1200px) { .container { max-width: 1170px; } }

/* ---------- Navbar (fallback exibido só quando deslogado) ---------- */
#snt-navbar {
    background-color: var(--navbar-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: none;
    border-bottom: 1px solid var(--navbar-glass-border);
}

#snt-logo { display: flex; align-items: center; padding-top: 0; padding-bottom: 0; }
#snt-logo img { max-height: 60px !important; max-width: 100% !important; width: auto !important; height: auto !important; }

main#snt-main {
    flex: 1 0 auto;
}
main#snt-main > .container {
    padding-top: 20px;
}

/* ---------- App shell (sidebar lateral + topbar) ---------- */
.snt-app-shell {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.snt-icon-rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 75px;
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 0;
    box-sizing: border-box;
    z-index: 101;
}

.snt-icon-rail::after {
    content: "";
    position: absolute;
    top: 30px;
    bottom: 30px;
    right: 0;
    width: 1px;
    background: var(--border-subtle);
}

.snt-rail-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-soft);
    font-size: 16px;
    text-decoration: none;
}

.snt-rail-icon:hover {
    background: var(--gray-surface);
    color: var(--gray);
}

.snt-rail-icon-lg {
    font-size: 18px;
}

.snt-rail-icon-xl {
    font-size: 21px;
}

.snt-rail-icon:focus,
.snt-rail-icon:focus-visible {
    outline: none;
}

.snt-rail-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: auto;
}

/* ---------- Bandeira redonda (SVGs do projeto circle-flags, github.com/HatScripts/circle-flags) ---------- */
.snt-rail-flag-icon {
    display: inline-block;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.snt-rail-flag-icon-md { width: 26px; height: 26px; } /* mesmo tamanho do .main-header__lang__flag do site */
.snt-rail-flag-icon-sm { width: 20px; height: 20px; margin-right: 0; }

.snt-flag-en-US { background-image: url(../images/flags/en-US.svg); }
.snt-flag-pt-BR { background-image: url(../images/flags/pt-BR.svg); }

.snt-sidebar {
    position: fixed;
    top: 0;
    left: 75px;
    bottom: 0;
    width: 256px;
    background: var(--sidebar-bg);
    padding: 24px 32px 24px 28px;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 100;
}

.snt-sidebar-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0 8px;
    margin-bottom: 24px;
}

.snt-sidebar-brand img {
    max-height: 60px;
    max-width: 100%;
    width: auto;
    height: auto;
}

.snt-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.snt-sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--radius-full);
    color: var(--gray-light);
    font-size: 14px;
    font-weight: 600;
    -webkit-text-stroke: 0.15px currentColor;
    text-decoration: none;
}

.snt-sidebar-item i {
    width: 18px;
    text-align: center;
    font-size: 15px;
}

.snt-sidebar-item:hover {
    background: var(--gray-surface);
    color: var(--gray);
}

.snt-sidebar-item.active {
    background: var(--btn-secondary-purple-bg);
    color: var(--btn-secondary-purple-text);
}

.snt-sidebar-item.snt-sidebar-item-done {
    background: var(--green-success-light);
    color: var(--green-success-dark);
}

.snt-sidebar-item.snt-sidebar-item-done:hover {
    background: var(--green-success-light);
    color: var(--green-success-dark);
}

/* Pagina atual (active) vence o "concluido" (done) quando os dois se
   aplicam ao mesmo item - ex.: Create Video ja tem video gerado (done) e
   e' a tela aberta agora (active). */
.snt-sidebar-item.active.snt-sidebar-item-done {
    background: var(--btn-secondary-purple-bg);
    color: var(--btn-secondary-purple-text);
}

.snt-sidebar-divider {
    margin: 20px 14px 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-soft);
}

.snt-app-content {
    margin-left: 331px;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--sidebar-bg);
}

.snt-topbar {
    flex: 0 0 auto;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 32px;
    background: transparent;
}

/* Nome do projeto editavel - fica dentro do #top-bar (card branco) de cada
   tela do Character, flutuando a direita do h2.title, nao no header global.
   Cor de fundo e tipografia iguais ao .snt-media-col-label (rotulo de
   secao dentro dos cards) - mesmo padrao visual do resto da tela.
   Largura e' controlada via JS (sntInitTopbarProjectName, em
   gimmyclues.js), que mede o texto de verdade num canvas - nem o atributo
   size nem a unidade ch acertam a largura aqui, porque os dois calculam
   com base no "0" do font normal, e bold rende cada caractere mais largo
   que isso. */
.snt-topbar-project {
    float: right;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Acao extra opcional do #top-bar (ver views/_partials/top-bar.php, $extra) -
   float:right + clear:right empilha SEMPRE abaixo de .snt-topbar-project,
   qualquer que seja a altura real dele, sem pixel fixo/chutado. */
.snt-topbar-extra {
    float: right;
    clear: right;
    margin-top: 32px;
}

.snt-topbar-project-label {
    font-size: 13px;
    color: var(--gray-soft);
}

.snt-topbar-project-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-soft);
    background: var(--gray-surface);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 8px 14px;
    max-width: 60vw;
    cursor: text;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.snt-topbar-project-name:hover {
    border-color: var(--blue-primary);
}

.snt-topbar-project-name:focus {
    outline: none;
    border-color: var(--blue-primary);
    box-shadow: 0 0 0 3px var(--focus-ring-color);
}

/* Tela "New Idea" (character/index, passo niche) no padrao roxo - titulo e
   caixa de texto ficam como estao, o resto (pill de projeto, toolbar,
   pills Search/Ideas, botao de enviar) vira roxo. Escopado pra nao afetar
   outras telas que reusam os mesmos componentes genericos. Estendido pro
   resto do pipeline Character (.snt-character-panel: Script Creation,
   Images, Narration, Video) pra manter o mesmo pill roxo em toda a jornada. */
.snt-app-content main#snt-main:has(#character-step-niche) .snt-topbar-project-name,
.snt-app-content main#snt-main:has(.snt-character-panel) .snt-topbar-project-name {
    background: var(--btn-secondary-purple-bg);
    color: var(--btn-secondary-purple-text);
}

.snt-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.snt-topbar-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 14px;
    border-radius: var(--radius-full);
    color: var(--gray-soft);
    font-size: 15px;
    text-decoration: none;
}

.snt-topbar-bell:hover {
    background: var(--gray-surface);
    color: var(--gray);
}

/* Seletor de idioma do topbar - mesmo layout/espacamento do .main-header__lang
   do site (bandeira 26px + texto + chevron, gap 8px), cores adaptadas pro
   topbar claro do app (o site usa fundo escuro). */
.snt-topbar-lang {
    gap: 8px;
    font-size: 14px;
}

.snt-topbar-lang-text {
    font-weight: 600;
}

/* Mesmo .main-header__login-divider do site (1px x 20px), cor adaptada pro
   topbar claro do app via --border-subtle em vez do rgba(white) do site. */
.snt-topbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border-subtle);
}

.snt-notif-badge {
    position: absolute;
    top: 4px;
    right: 6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: var(--red);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.snt-notif-dropdown {
    width: 340px;
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
}

.snt-notif-item {
    display: block;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-weight: 400;
    white-space: normal;
}

.snt-notif-item-unread {
    background: var(--btn-secondary-bg);
}

.snt-notif-item .snt-notif-message {
    display: block;
    color: var(--dark);
    font-size: 14px;
}

.snt-notif-item .snt-notif-date {
    display: block;
    margin-top: 2px;
    color: var(--gray-soft);
    font-size: 12px;
}

.snt-notif-empty {
    margin: 0;
    padding: 14px;
    color: var(--gray-soft);
    font-size: 14px;
    text-align: center;
}

.snt-account-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--radius-full);
    text-decoration: none;
    outline: none;
    box-shadow: none;
}

.snt-account-toggle:hover {
    background: var(--gray-surface);
}

.snt-account-toggle:focus,
.snt-account-toggle:focus-visible,
.snt-account-toggle:active {
    outline: none;
    box-shadow: none;
}

/* ---------- Dropdown (submenu da conta/idioma) — mesmo padrão visual do menu lateral ---------- */
.dropdown-menu {
    background: var(--sidebar-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 8px;
    min-width: 200px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--radius-full);
    color: var(--gray-light);
    font-size: 14px;
    font-weight: 600;
}

.dropdown-item i {
    width: 18px;
    text-align: center;
    font-size: 15px;
}

.snt-dropdown-icon-blue {
    color: var(--blue-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--gray-surface);
    color: var(--gray);
}

.dropdown-divider {
    border-color: var(--border-subtle);
    margin: 8px 0;
}

.snt-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--blue-primary-light);
    color: var(--blue-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    flex-shrink: 0;
    overflow: hidden;
}

.snt-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.snt-avatar-lg {
    width: 120px;
    height: 120px;
    font-size: 40px;
}

.snt-avatar-xs {
    width: 24px;
    height: 24px;
    font-size: 10px;
}

.snt-account-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    text-align: left;
}

.snt-account-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.snt-account-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray);
}

.snt-admin-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--orange-highlight);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.snt-admin-badge-affiliate { background: var(--yellow); color: var(--gray); }

.snt-account-email {
    font-size: 14px;
    color: var(--gray-soft);
}


.snt-app-content main#snt-main {
    flex: 1 0 auto;
    background: linear-gradient(to right, var(--white-soft) 0%, var(--white-soft) 35%, rgba(123, 97, 199, 0.18) 100%);
    border-radius: 28px;
    margin: 0 24px 8px 24px;
    box-sizing: border-box;
}

.snt-app-content main#snt-main > .container-fluid {
    padding: 24px 32px;
}

.snt-app-content .footer {
    flex: 0 0 auto;
}

/* ---------- Cabeçalho de página (bloco branco) ---------- */
h2.title { margin: 0; }

.page-subtitle {
    font-size: 14px;
    color: var(--gray);
    margin: 4px 0 0 0;
}

#top-bar {
    margin-bottom: 20px;
    padding: 15px;
    min-height: 90px;
}
#top-bar::after { content: ""; display: block; clear: both; }

#buttons { display: flex; align-items: center; gap: 8px; margin-top: 10px; float: right; }

/* Bloco titulo+subtitulo do #top-bar, quando ha um #buttons ao lado (flutua
   junto em vez de empilhar embaixo) - reaproveitar em vez de inline style. */
.snt-top-bar-heading { float: left; }

.snt-top-bar-heading { float: left; }

/* ---------- Card segmentado (cantos arredondados, mesmo padrao do #top-bar) ---------- */
.snt-card {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    margin-bottom: 20px;
    transition: background 0.15s ease;
}

/* Cards de lista tipo hub (Manage, Character Video Rules, Avatar Settings,
   Help - 1 .snt-setting-row por card) ganham o degrade "roxinho de grid" no
   hover. O :not(:has(+)) exclui estruturalmente cards que agrupam VARIAS
   linhas (Docs, Settings) sem precisar de classe por pagina - nesses o
   hover acenderia o bloco inteiro em vez de so' a linha. */
.snt-card:has(.snt-setting-row):not(:has(.snt-setting-row + .snt-setting-row)):hover {
    background: var(--grid-hover-gradient);
}

/* Social Connect e' 1 linha por card (nao cai na exclusao estrutural acima),
   mas nao deve ter o hover mesmo assim - .snt-social-connect-list ja existia
   como wrapper de layout dessa tela antes disso (18/07/2026). Selector
   precisa repetir as mesmas condicoes :has()/:not() da regra acima - um
   :hover simples aqui tem especificidade menor e perde pra ela mesmo vindo
   depois no arquivo (bug real: o roxo continuava aparecendo apesar dessa
   "exclusao"). */
.snt-social-connect-list .snt-card:has(.snt-setting-row):not(:has(.snt-setting-row + .snt-setting-row)):hover {
    background: var(--white);
}

.snt-card-gray { background: var(--gray-surface); }

/* ---------- Composer estilo chat (Create Idea) ---------- */
.snt-character-hero {
    text-align: center;
    padding: 40px 20px 24px;
}

.snt-character-hero-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--dark);
    margin: 0 0 24px;
}

.snt-chat-composer {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
    background: var(--gray-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 28px;
    padding: 0 0 12px;
    overflow: hidden;
}

.snt-chat-composer-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: none;
    background: var(--white);
    border-radius: 28px 28px 0 0;
    resize: none;
    outline: none;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    color: var(--dark);
    min-height: 73px;
    max-height: 200px;
    padding: 16px 26px 12px;
    margin-bottom: 12px;
}

.snt-chat-composer-input::placeholder {
    color: var(--gray-soft);
}

.snt-chat-composer-input-wrap {
    position: relative;
}

/* Overlay do efeito typewriter (ver character/index.php) - mesma
   posicao/fonte do textarea real por baixo, so texto (sem fundo), pra nao
   tampar o cursor real quando o campo esta focado (fica vazio nesse
   momento). */
.snt-chat-composer-input-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-size: 16px;
    line-height: 1.4;
    color: var(--gray-soft);
    padding: 16px 26px 12px;
    pointer-events: none;
    white-space: pre-wrap;
}

.snt-chat-composer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 18px;
}

.snt-chat-composer-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.snt-chat-tool {
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--blue-primary-tint);
    color: var(--blue-primary-dark);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    cursor: default;
}

.snt-chat-tool i {
    font-size: 13px;
}

.snt-chat-tool-has-tip {
    position: relative;
    cursor: help;
}

.snt-chat-tool-action {
    cursor: pointer;
}

.snt-chat-tool-tip {
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--dark);
    color: var(--white);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    padding: 8px 12px;
    border-radius: var(--radius-full);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 5;
}

.snt-chat-tool-has-tip:hover .snt-chat-tool-tip,
.snt-chat-tool-has-tip:focus .snt-chat-tool-tip {
    opacity: 1;
}

.snt-chat-composer-send {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--blue-primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
}

.snt-chat-composer-send:hover {
    background: var(--blue-primary-dark);
}

#character-step-niche .snt-chat-composer {
    background: var(--btn-secondary-purple-bg);
}
#character-step-niche .snt-chat-tool {
    background: var(--white);
    color: var(--btn-secondary-purple-text);
}
#character-step-niche .snt-chat-composer-send {
    background: var(--purple);
}
#character-step-niche .snt-chat-composer-send:hover {
    background: var(--purple-dark);
}

/* Combo "Selecione o tipo de ideia" - pill vira toggle de dropdown (mesmo
   componente Bootstrap do menu de conta/idioma, ver .dropdown-menu no
   topo do arquivo), roxo pra combinar com o resto do composer. */
#character-step-niche .snt-chat-tool:hover,
#character-step-niche .snt-chat-tool[aria-expanded="true"] {
    background: var(--btn-secondary-purple-bg);
}
.snt-required-mark { color: var(--red); margin-left: 2px; }
.snt-chat-tool-invalid { outline: 2px solid var(--red); outline-offset: 1px; }
.snt-idea-niche-menu { max-height: 320px; overflow-y: auto; }
.snt-idea-niche-menu .dropdown-item:hover,
.snt-idea-niche-menu .dropdown-item:focus {
    background: var(--btn-secondary-purple-bg);
    color: var(--btn-secondary-purple-text);
}
.snt-idea-niche-menu .dropdown-item i { color: var(--purple); }

/* ---------- My Videos (site/first-access, abaixo dos 3 cards) ---------- */
.snt-video-section-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--dark);
    margin: 0 0 16px;
}

.snt-video-section-title-spaced {
    margin-top: 32px;
}

/* "Meus Videos" - uma linha por video (miniatura pequena + texto + acoes),
   cada linha e' seu proprio card branco com espacamento entre elas (18/07/2026,
   trocado do zebrado/lista continua pra dar mais destaque a cada linha). */
.snt-video-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Altura minima pra pagina com poucas linhas "Posted on" (cards mais
       baixos) nao empurrar a barra de paginacao pra cima - ela fica sempre
       na mesma posicao entre paginas, independente de quantas redes cada
       video tem postado. */
    min-height: 540px;
}

/* Connect Social Media - um card por rede, mesmo padrao de espacamento do
   .snt-video-list (18/07/2026), em vez de um .snt-card unico com varias
   .snt-setting-row separadas por borda. */
.snt-social-connect-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.snt-social-connect-list .snt-card {
    margin-bottom: 0;
}

.snt-video-card {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 12px 16px;
    box-shadow: var(--shadow-sm);
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.snt-video-card:hover {
    background: var(--grid-hover-gradient);
}

.snt-video-card-media {
    /* Altura FIXA (nao aspect-ratio, nao stretch) - titulo e' 1 linha so'
       (ellipsis, ver .snt-video-card-title), entao o corpo do card
       (titulo + linha de status + botoes) tem sempre a mesma altura em
       todo card. 120px cobre essa altura + as margens negativas abaixo,
       flush em cima E embaixo sem o risco de "esticar" via stretch (que
       quebrou o layout numa tentativa anterior - img com height:100%
       dentro de um container sem altura propria vira loop de resolucao
       de tamanho no flexbox e explode pro tamanho intrinseco da imagem). */
    align-self: flex-start;
    position: relative;
    width: 170px;
    height: 104px;
    overflow: hidden;
    flex-shrink: 0;
    /* Flush no topo/esquerda/embaixo do card (sem respiro) - so' arredonda os
       cantos esquerdos, cancelando o padding do card nesses 3 lados via
       margem negativa. A direita mantem o gap normal (separa da area de texto). */
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    margin: -12px 0 -12px -16px;
    background: var(--gray-surface);
    cursor: pointer;
}

.snt-video-card-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overlay-bg);
    color: var(--white);
    border-radius: var(--radius-full);
    font-size: 15px;
    pointer-events: none;
}

.snt-video-card-play-btn i {
    margin-left: 3px;
}

.snt-video-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.snt-video-card-placeholder-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-soft);
    font-size: 28px;
}

.snt-video-card-duration {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0,0,0,0.65);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.snt-video-card-premium-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: var(--yellow);
    color: var(--dark);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

/* Overlay giratorio sobre a miniatura enquanto o video esta sendo postado
   (ver sntStartInstagramPolling em gimmyclues.js) - mesmo criterio de
   "so aparece quando esse card especifico esta processando" do botao
   .snt-video-card-instagram-btn logo abaixo, so que sobre a thumbnail. */
.snt-video-card-posting-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--overlay-bg);
}

.snt-video-card-posting-overlay.is-visible {
    display: flex;
}

.snt-video-card-posting-overlay .fa-spinner {
    font-size: 36px;
    color: var(--white);
}

.snt-video-card-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    min-width: 0;
}

.snt-video-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.3;
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Confirmacao de que o video ja foi postado no Instagram (SocialPost, ver
   SiteController::appendVideoCard) - fica entre o titulo e os botoes. */
.snt-video-card-instagram-posted {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 12px;
    color: var(--gray-soft);
    margin-bottom: 8px;
}

.snt-video-card-posted-handle {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-full);
    background: var(--blue-primary-tint);
    color: var(--blue-primary-dark);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
}

.snt-video-card-instagram-posted-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--white);
}

.snt-video-card-instagram-posted-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Botoes de acao (WhatsApp/Instagram) lado a lado, no lugar de onde ficavam
   as estatisticas de visualizacao (removidas). */
.snt-video-card-buttons {
    display: flex;
    align-items: center;
    align-self: flex-end;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.snt-video-card-whatsapp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 14px;
    background: var(--btn-secondary-purple-bg);
    color: var(--green-success-dark);
    border: none;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.snt-video-card-whatsapp-btn i {
    -webkit-text-stroke: 0.5px currentColor;
}

.snt-video-card-whatsapp-btn:hover {
    background: var(--green-success);
    color: var(--white);
}

.snt-video-card-instagram-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 14px;
    background: var(--btn-secondary-purple-bg);
    color: var(--instagram-purple);
    border: none;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.snt-video-card-instagram-btn:hover {
    background: var(--instagram-purple);
    color: var(--white);
}

.snt-video-card-linkedin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 14px;
    background: var(--btn-secondary-purple-bg);
    color: var(--linkedin-blue);
    border: none;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.snt-video-card-linkedin-btn:hover {
    background: var(--linkedin-blue);
    color: var(--white);
}

.snt-video-card-linkedin-btn:disabled {
    background: var(--btn-secondary-purple-bg);
    color: var(--linkedin-blue);
    opacity: 0.85;
}

.snt-video-card-tiktok-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 14px;
    background: var(--btn-secondary-purple-bg);
    color: var(--tiktok-black);
    border: none;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.snt-video-card-tiktok-btn:hover {
    background: var(--tiktok-black);
    color: var(--white);
}

.snt-video-card-tiktok-btn:disabled {
    background: var(--btn-secondary-purple-bg);
    color: var(--tiktok-black);
    opacity: 0.85;
}

.snt-video-card-instagram-btn:disabled {
    background: var(--btn-secondary-purple-bg);
    color: var(--instagram-purple);
    opacity: 0.85;
    cursor: not-allowed;
}

.snt-video-card-youtube-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 14px;
    background: var(--btn-secondary-purple-bg);
    color: var(--red);
    border: none;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.snt-video-card-youtube-btn:hover {
    background: var(--red);
    color: var(--white);
}

.snt-video-card-youtube-btn:disabled {
    background: var(--btn-secondary-purple-bg);
    color: var(--red);
    opacity: 0.85;
    cursor: not-allowed;
}

/* ---------- Modal "Post on YouTube" (visual proprio, fundo escuro) ---------- */

.snt-modal.snt-youtube-modal {
    background: var(--terminal-bg);
    text-align: left;
    max-width: 480px;
}

.snt-youtube-modal .snt-modal-close {
    background: rgba(255,255,255,0.08);
    color: var(--white);
}

.snt-youtube-modal .snt-modal-close:hover {
    background: rgba(255,255,255,0.16);
}

/* Logo primeiro (alinhado com o X via .snt-youtube-modal-logo-row, mesma
   geometria -16px/32px de altura do .snt-tiktok-modal-logo-row), titulo
   normal logo abaixo - mesma disposicao/tamanho da modal do TikTok, pedido
   do usuario 06/08/2026 (tambem resolve o desalinhamento que o titulo tinha
   antes, quando ELE precisava bater com o X em vez do logo). */
.snt-youtube-modal-logo-row,
.snt-tiktok-modal-logo-row {
    margin: -16px 0 8px 0;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.snt-youtube-modal-brand-logo,
.snt-tiktok-modal-logo-img {
    height: 40px;
    width: auto;
}

.snt-youtube-modal-title,
.snt-tiktok-modal-title {
    margin: 0 0 20px 0;
    text-align: center;
    color: var(--white);
    font-size: 20px;
    font-weight: 800;
}

.snt-youtube-modal-field {
    margin-bottom: 16px;
}

.snt-youtube-modal-field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.snt-youtube-modal-field-label-row label {
    color: var(--gray-soft);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.snt-youtube-modal-counter {
    color: var(--gray-soft);
    font-size: 14px;
}

.snt-youtube-modal-input {
    display: block;
    width: 100%;
    background: var(--dark);
    border: 1px solid var(--border-on-dark);
    border-radius: var(--radius-md);
    color: var(--white);
    font-size: 15px;
    padding: 10px 14px;
    box-sizing: border-box;
    outline: none;
}

.snt-youtube-modal-input::placeholder {
    color: var(--gray-soft);
}

.snt-youtube-modal-input:focus {
    border-color: var(--gray-soft);
}

.snt-youtube-modal-textarea {
    resize: vertical;
    min-height: 100px;
}

.snt-youtube-modal-textarea-wrap {
    position: relative;
}

.snt-youtube-modal-textarea-wrap .snt-youtube-modal-counter {
    position: absolute;
    right: 12px;
    bottom: 10px;
}

.snt-youtube-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    gap: 12px;
    flex-wrap: wrap;
}

.snt-youtube-modal-privacy {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gray-soft);
    font-size: 14px;
}

.snt-youtube-modal-actions {
    display: flex;
    gap: 10px;
}

.snt-youtube-modal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.snt-youtube-modal-btn-secondary {
    background: rgba(255,255,255,0.08);
    color: var(--white);
}

.snt-youtube-modal-btn-secondary:hover {
    background: rgba(255,255,255,0.16);
}

.snt-youtube-modal-btn-primary {
    background: var(--white);
    color: var(--dark);
}

.snt-youtube-modal-btn-primary:hover {
    opacity: 0.9;
}

.snt-youtube-modal-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.snt-youtube-modal .snt-whatsapp-feedback {
    text-align: left;
}

.snt-youtube-modal .snt-whatsapp-feedback.is-success {
    color: var(--green-success);
}

/* ---------- Modais "Post on TikTok" / "Post on YouTube" (visual proprio,
   layout 2 colunas compartilhado - conta/campos/preview em forma de celular
   sao as mesmas classes .snt-youtube-modal-* pras duas, so' a cor de
   destaque (ciano TikTok / vermelho YouTube) muda, escopada por
   .snt-tiktok-modal/.snt-youtube-modal) ---------- */

.snt-modal.snt-tiktok-modal,
.snt-modal.snt-youtube-modal {
    background: var(--dark-modal-bg);
    text-align: left;
    max-width: 620px;
}

.snt-tiktok-modal .snt-modal-close,
.snt-youtube-modal .snt-modal-close {
    background: rgba(255,255,255,0.08);
    color: var(--white);
}

.snt-tiktok-modal .snt-modal-close:hover,
.snt-youtube-modal .snt-modal-close:hover {
    background: rgba(255,255,255,0.16);
}

.snt-youtube-modal-body {
    display: flex;
    gap: 20px;
}

.snt-youtube-modal-form {
    flex: 1;
    min-width: 0;
}

.snt-youtube-modal-account-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--dark);
    border: 1px solid var(--border-on-dark);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin-bottom: 14px;
}

.snt-youtube-modal-account-row .snt-avatar {
    background: rgba(255,255,255,0.1);
    color: var(--gray-soft);
}

.snt-youtube-modal-account-handle {
    color: var(--white);
    font-weight: 700;
    flex: 1;
}

.snt-youtube-modal-account-change {
    color: var(--gray-soft);
    font-size: 13px;
    text-decoration: underline;
}

.snt-youtube-modal-account-select-wrap {
    margin-bottom: 14px;
}

.snt-youtube-modal-account-select-wrap .snt-select {
    background-color: var(--dark);
    border-color: var(--border-on-dark);
    color: var(--white);
}

.snt-youtube-modal-account-select-wrap .snt-select-arrow {
    color: var(--gray-soft);
}

.snt-youtube-modal-preview {
    flex-shrink: 0;
    width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* separa do rodape (Cancelar/Postar) - sem isso o celular fica colado
       nos botoes quando ele e' mais alto que a coluna do formulario. */
    margin-bottom: 26px;
}

/* Moldura de "celular" - UMA div so' com a borda colorida da marca envolvendo
   badge + video juntos (fundo preto, cantos bem arredondados), badge
   centralizado horizontalmente dentro dela - pedido do usuario 06/08/2026
   pra bater com o mockup real de cada rede. Cor da borda por rede logo
   abaixo (ciano TikTok / vermelho YouTube). */
.snt-youtube-modal-preview-phone {
    width: 100%;
    padding: 10px;
    background: var(--tiktok-black);
    border: 2px solid;
    border-radius: 26px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.snt-tiktok-modal .snt-youtube-modal-preview-phone { border-color: var(--tiktok-cyan); }
.snt-youtube-modal .snt-youtube-modal-preview-phone { border-color: var(--red); }

.snt-youtube-modal-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--tiktok-black);
    color: var(--white);
    border-radius: var(--radius-full);
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
}

.snt-youtube-modal-preview-badge img {
    height: 12px;
    width: auto;
}

.snt-youtube-modal-preview-media {
    position: relative;
    width: 100%;
    height: 220px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.snt-youtube-modal-preview-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bolinha decorativa (canto inferior direito) - mesmo detalhe do mockup de
   referencia, so visual, sem interacao. */
.snt-youtube-modal-preview-dot {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
}

.snt-youtube-modal-preview-ratio {
    position: absolute;
    left: 8px;
    bottom: 8px;
    background: rgba(0,0,0,0.6);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

/* footer so' tem o grupo de botoes (privacidade mora dentro do
   .snt-youtube-modal-form, nas duas modais) - manda pra direita. */
.snt-tiktok-modal .snt-youtube-modal-footer,
.snt-youtube-modal .snt-youtube-modal-footer {
    justify-content: flex-end;
}

.snt-tiktok-modal .snt-youtube-modal-btn-primary {
    background: var(--tiktok-cyan-dark);
    color: var(--white);
}

.snt-tiktok-modal .snt-youtube-modal-btn-primary:hover {
    opacity: 0.9;
}

.snt-youtube-modal .snt-youtube-modal-btn-primary {
    background: var(--red);
    color: var(--white);
}

.snt-youtube-modal .snt-youtube-modal-btn-primary:hover {
    opacity: 0.9;
}

.snt-whatsapp-phone-group {
    display: flex;
    align-items: stretch;
}

.snt-whatsapp-phone-prefix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    height: 44px;
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    font-size: 17px;
    font-weight: 700;
    color: var(--text-input);
    box-sizing: border-box;
}

.snt-whatsapp-phone-group .form-control {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.snt-whatsapp-feedback {
    min-height: 18px;
    font-size: 13px;
    font-weight: 600;
    margin-top: -10px;
    margin-bottom: 10px;
    text-align: left;
}

.snt-whatsapp-feedback.is-error {
    color: var(--red);
}

.snt-whatsapp-feedback.is-success {
    color: var(--green-success);
}

@media (max-width: 1100px) {
    .snt-video-card { flex-wrap: wrap; }
}

/* ---------- Setting rows (icon + title/desc + button - ex: Character Video Rules hub) ---------- */
.snt-setting-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
}

.snt-setting-row:first-child {
    padding-top: 0;
}

.snt-setting-row:last-child {
    padding-bottom: 0;
}

.snt-setting-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 18px;
    flex-shrink: 0;
}

.snt-setting-icon-blue   { background: var(--blue-primary); }
/* Icone "Manage Users" (views/manage/index.php) - azul CLARO especifico,
   pedido do usuario 02/08/2026 (o --blue-primary do .snt-setting-icon-blue
   normal e' escuro/naval demais). So' essa instancia usa essa variante. */
.snt-setting-icon-blue-light { background: var(--blue-primary-dark); }
.snt-setting-icon-purple { background: var(--purple); }
.snt-setting-icon-pink   { background: var(--pink); }
.snt-setting-icon-green  { background: var(--green-success); }
.snt-setting-icon-orange { background: var(--orange-highlight); }
.snt-setting-icon-yellow { background: var(--yellow); }
.snt-setting-icon-red    { background: var(--red); }
.snt-setting-icon-gray   { background: var(--gray-light); }
.snt-setting-icon-dark   { background: var(--dark); }
.snt-setting-icon-gemini      { background: var(--gemini-purple); }
.snt-setting-icon-translation { background: var(--translation-blue); }
.snt-setting-icon-language    { background: var(--language-blue); }
.snt-setting-icon-voice       { background: var(--voice-blue-dark); }
.snt-setting-icon-facebook    { background: var(--facebook-blue); }
.snt-setting-icon-linkedin    { background: var(--linkedin-blue); }
.snt-setting-icon-instagram   { background: var(--instagram-purple); }
.snt-setting-icon-tiktok      { background: var(--tiktok-black); }

.snt-setting-info {
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.snt-setting-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--dark);
    margin: 0 0 4px;
}

.snt-setting-desc {
    font-size: 14px;
    color: var(--gray-light);
    margin: 0;
}

.snt-setting-connected {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--green-success-dark);
    font-weight: 600;
}

/* Uma linha por conta conectada (texto + Disconnect dela, juntos) mais uma
   linha final so' pro botao de conectar - varias contas da mesma rede (ex:
   dois Instagrams) viram varias linhas, cada Disconnect ao lado do proprio
   "Connected as", sem ambiguidade de qual botao e' de qual conta. */
.snt-setting-account-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--field-bg);
    padding: 4px 4px 4px 12px;
    border-radius: var(--radius-full);
}

.snt-setting-account-line + .snt-setting-account-line {
    margin-top: 8px;
}

.snt-setting-account-line-connect {
    justify-content: flex-end;
    background: none;
    padding: 0;
}

.snt-setting-connected-icon {
    color: var(--green-success);
    font-size: 15px;
}

.snt-setting-username {
    font-weight: 700;
    color: var(--blue-primary-dark);
    background: var(--btn-secondary-bg);
    padding: 2px 10px;
    border-radius: var(--radius-full);
}

.snt-setting-btn {
    flex-shrink: 0;
}

/* ---------- Generic textarea line-number gutter (ex: Character script editor) ---------- */
.snt-textarea-numbered-wrap {
    display: flex;
    position: relative;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    resize: vertical;
}

/* sntHighlightTextareaLine() - flashes over the offending line for 3s. */
.snt-textarea-line-highlight {
    position: absolute;
    background: var(--red);
    opacity: 0.35;
    pointer-events: none;
    transition: opacity 0.4s ease-out;
    z-index: 1;
}

.snt-textarea-numbered-gutter {
    flex-shrink: 0;
    padding: 6px 10px;
    text-align: right;
    color: var(--gray-soft);
    background: var(--gray-surface);
    border-right: 1px solid var(--border-subtle);
    overflow: hidden;
    user-select: none;
}

.snt-textarea-numbered-gutter div {
    white-space: nowrap;
}

.snt-textarea-numbered-input {
    flex: 1;
    min-width: 0;
    height: 100% !important;
    resize: none !important;
    border: none !important;
    border-radius: 0 !important;
    /* No soft-wrap: the gutter numbering and sntHighlightTextareaLine() math
       (gimmyclues.js) both assume 1 logical line = 1 visual row. */
    white-space: pre !important;
    overflow-x: auto;
}

/* ---------- Generic option list (radio group + description, ex: video duration choice) ---------- */
.snt-option-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    margin-top: 12px;
}

.snt-option-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: 17px;
    cursor: pointer;
}

.snt-option-item:has(input:checked) {
    border-color: var(--blue-primary);
    background: var(--blue-primary-light);
}

.snt-option-item--disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.snt-option-item--disabled input {
    cursor: not-allowed;
}

.snt-coming-soon-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--white);
    background: var(--red);
    padding: 2px 9px;
    border-radius: 10px;
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ---------- Profile ---------- */
.snt-profile-photo-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.snt-profile-photo-text {
    flex: 1;
}

.snt-profile-photo-text strong {
    display: block;
    font-size: 15px;
    color: var(--gray);
}

.snt-profile-photo-text p {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--gray-soft);
}

.snt-profile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
}

.snt-profile-row strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-soft);
    margin-bottom: 4px;
}

.snt-profile-row p {
    margin: 0;
    font-size: 15px;
    color: var(--gray);
}

.snt-profile-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 8px 0;
}

/* So o primeiro separador (logo abaixo da foto) precisa de mais respiro -
   os demais (entre Nome/Email/Senha) ficam grudados uns nos outros com o
   mesmo valor, ver profile.php. */
.snt-profile-divider-first {
    margin-bottom: 20px;
}

/* Layout de 2 colunas da tela de perfil - card principal (foto/nome/email)
   maior, coluna lateral (ex: contas conectadas) menor - reaproveitar pra
   qualquer outra tela que precise dessa mesma proporcao 2:1. */
.snt-profile-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.snt-profile-layout > .snt-profile-main { flex: 2 1 0; min-width: 0; }
.snt-profile-layout > .snt-profile-sidebar { flex: 1 1 0; min-width: 0; }

@media (max-width: 900px) {
    .snt-profile-layout { flex-direction: column; }
}

/* Card compacto "Connect" (contas sociais conectadas) - uma linha por rede. */
.snt-connect-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}
.snt-connect-row-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 13px;
    flex-shrink: 0;
}
.snt-connect-row-name {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray);
}
.snt-connect-row-status {
    font-size: 13px;
    color: var(--blue-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
.snt-connect-row-status.snt-connect-row-disconnected {
    color: var(--gray-soft);
}

/* Tela de Profile inteira no padrao roxo (botoes ja trocados nas views) -
   labels flutuantes, dropdowns e status do Social Connect tambem viram
   roxo, escopado a .snt-profile-layout pra nao vazar pro cadastro/outras
   telas que reusam os mesmos componentes genericos. */
.snt-profile-layout .snt-field-floating .form-control:focus + label,
.snt-profile-layout .snt-field-floating .form-control:not(:placeholder-shown) + label {
    color: var(--purple);
}
.snt-profile-layout .snt-select {
    background-color: var(--btn-secondary-purple-bg);
    color: var(--btn-secondary-purple-text);
}
.snt-profile-layout .snt-select-arrow {
    color: var(--btn-secondary-purple-text);
}
.snt-profile-layout .snt-select:focus {
    border-color: var(--purple);
}
.snt-profile-layout .snt-connect-row-status:not(.snt-connect-row-disconnected) {
    color: var(--purple);
}

/* Tela de Regras de Ideias (combo de nicho) no padrao roxo - mesmo
   tratamento de dropdown do Profile, escopado a .snt-idea-rules-layout. */
.snt-idea-rules-layout .snt-select {
    background-color: var(--btn-secondary-purple-bg);
    color: var(--btn-secondary-purple-text);
}
.snt-idea-rules-layout .snt-select-arrow {
    color: var(--btn-secondary-purple-text);
}
.snt-idea-rules-layout .snt-select:focus {
    border-color: var(--purple);
}

/* Busca da aba Termos - dentro do proprio card da tabela, largura compacta
   em vez de esticar o card inteiro (ver views/translation/index.php). */
.snt-translations-search { max-width: 220px; }
.snt-translations-search.snt-field-icon i { left: auto; right: 14px; }
.snt-translations-search.snt-field-icon .form-control { padding-left: 20px; padding-right: 38px; }
.snt-translations-toolbar { margin-bottom: 16px; }

/* Combo Sistema + label "Sistema:" no #top-bar, ao lado do botao "Atualizar
   Idioma" - largura compacta (o wrap nativo e' width:100%, que dentro do
   #buttons flex esticaria demais sem isso). */
.snt-buttons-label { font-size: 14px; font-weight: 600; color: var(--gray-soft); }
#buttons .snt-select-wrap.snt-translations-system-inline { flex: 0 0 140px; width: auto; }

/* Tela de Traducoes no padrao roxo - combo de Sistema, aba ativa e foco do
   campo de busca, escopado a .snt-translations-layout. */
.snt-translations-layout .snt-select {
    background-color: var(--btn-secondary-purple-bg);
    color: var(--btn-secondary-purple-text);
}
.snt-translations-layout .snt-select-arrow {
    color: var(--btn-secondary-purple-text);
}
.snt-translations-layout .snt-select:focus {
    border-color: var(--purple);
}
.snt-translations-layout .snt-field .form-control:focus {
    border-color: var(--purple);
}
.snt-translations-layout .snt-tab.is-active {
    color: var(--purple);
    border-bottom-color: var(--purple);
}
.snt-translations-layout .snt-translation-redo-btn:hover {
    background-color: var(--purple);
}

/* Campo de formulario (label+input+ajuda) dentro de uma .snt-profile-row -
   ex: input de Email ao lado do botao "Edit Email" - ocupa o espaco
   disponivel em vez do tamanho minimo do conteudo. */
.snt-profile-row .snt-signup-field {
    flex: 1;
    min-width: 0;
}

/* Titulo dentro de um .snt-card sem o espaco extra em cima (reaproveitar em
   vez de inline style toda vez que um h4 for o primeiro elemento do card). */
.snt-card > h4:first-child {
    margin-top: 0;
}

.snt-card > label {
    display: block;
    font-weight: 700;
    margin-bottom: 10px;
}

.snt-card .snt-select-wrap {
    max-width: 320px;
}

/* ---------- Select (native <select>, ver views/site/_dropdown.php) ----------
   appearance:none tira a seta nativa do navegador; a seta visivel e um <i>
   real (.snt-select-arrow), nao um background-image -- autofill do
   navegador pode sobrescrever o background do <select> e apagar uma seta
   que dependesse so disso. */
.snt-select-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.snt-select {
    display: block;
    width: 100%;
    height: 44px;
    margin: 0;
    background-color: var(--btn-secondary-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-md);
    padding: 0 36px 0 14px;
    font-size: 17px;
    color: var(--blue-primary-dark);
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
    transition: 0.2s border-color ease-in-out, 0.2s background-color ease-in-out;
}

.snt-select-arrow {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: var(--blue-primary-dark);
    font-size: 14px;
    pointer-events: none;
}

.snt-select:focus {
    border-color: var(--blue-primary);
    background-color: var(--white);
    box-shadow: 0 0 0 3px var(--focus-ring-color);
}

.snt-select:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.snt-select.snt-save-success {
    border-color: var(--green-success);
}

.snt-select.snt-save-error {
    border-color: var(--red);
}

/* ---------- Translations admin table ---------- */
.snt-translations-table {
    width: 100%;
    border-collapse: collapse;
}

.snt-translations-table th {
    text-align: center;
    padding: 10px 12px;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.snt-translations-table th .snt-translate-all-btn {
    margin-left: 12px;
}

.snt-translations-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    text-align: center;
    vertical-align: middle;
}

.snt-translations-table tbody tr:hover {
    background-color: var(--gray-surface);
}

/* Tabelas que usam o "roxinho de grid" na linha, em vez do cinza padrao da tabela. */
.snt-table-grid-hover tbody tr:hover {
    background: var(--grid-hover-gradient);
}

/* Coluna de Acoes dessa tabela nao pode quebrar linha - a coluna auto-encolhe
   pro tamanho do cabecalho ("Acoes"), menor que os dois botoes juntos. */
.snt-translations-table .snt-actions-center {
    flex-wrap: nowrap;
}

/* Linha de tabela clicavel (navega pra edicao) - cursor generico, reaproveitar
   em qualquer lista admin com essa interacao. */
.snt-clickable-row {
    cursor: pointer;
}
.snt-clickable-row:hover {
    background-color: var(--gray-surface);
}

.snt-translations-table .translation-cell {
    width: 100%;
    min-width: 240px;
    box-sizing: border-box;
}

.snt-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
    flex-wrap: wrap;
    color: var(--gray-light);
    font-size: 14px;
}

/* ---------- Paginacao numerada padrao (views/_partials/pagination.php) - pilula
   cinza com setas circulares + numeros, pagina atual em circulo roxo cheio. ---------- */
.snt-pager {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 20px;
    width: 100%;
    background: var(--gray-surface);
    border-radius: var(--radius-full);
    padding: 6px;
}

.snt-pager-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--gray-light);
    font-size: 13px;
    text-decoration: none;
    flex-shrink: 0;
}

.snt-pager-arrow-active {
    background: var(--purple);
    color: var(--white);
}

.snt-pager-arrow-active:hover {
    background: var(--purple-dark);
    color: var(--white);
}

.snt-pager-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: 50%;
    color: var(--gray);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.snt-pager-page:hover {
    background: var(--white);
    color: var(--gray);
}

.snt-pager-page-active,
.snt-pager-page-active:hover {
    background: var(--purple);
    color: var(--white);
}

.snt-pager-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 32px;
    color: var(--gray-soft);
    font-weight: 700;
}

.translation-cell.snt-save-success {
    border-color: var(--green-success);
}

.translation-cell.snt-save-error {
    border-color: var(--red);
}

.snt-translation-source-cell {
    background: var(--gray-surface);
    color: var(--gray);
    cursor: not-allowed;
}

/* ---------- Billing (mock) ---------- */
.snt-billing-methods {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.snt-payment-method {
    position: relative;
    flex: 1 1 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 16px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: center;
    transition: 0.2s border-color ease-in-out, 0.2s box-shadow ease-in-out;
}

.snt-payment-method input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.snt-payment-method-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--blue-primary);
    color: var(--white);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.snt-payment-method-icon {
    font-size: 28px;
    color: var(--gray-soft);
}

.snt-payment-method-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--gray-light);
}

.snt-payment-method input:checked ~ .snt-payment-method-check {
    display: flex;
}

.snt-payment-method input:checked ~ .snt-payment-method-icon,
.snt-payment-method input:checked ~ .snt-payment-method-label {
    color: var(--blue-primary);
}

.snt-payment-method:has(input:checked) {
    border-color: var(--blue-primary);
    box-shadow: 0 0 0 3px var(--focus-ring-color);
}

.snt-billing-grid {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.snt-billing-main {
    flex: 2 1 0;
    min-width: 0;
}

.snt-billing-side {
    flex: 1 1 0;
    min-width: 0;
}

.snt-saved-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}

.snt-saved-card:first-of-type {
    border-top: none;
}

.snt-card-number-field {
    position: relative;
}

.snt-card-brand-badge {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 800;
    color: var(--blue-primary-dark);
    background: var(--blue-primary-light);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
}

.snt-billing-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--gray-light);
    cursor: pointer;
}

.snt-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: var(--gray-light);
}

.snt-summary-total {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 12px;
    font-weight: 800;
    color: var(--gray);
    font-size: 16px;
}

.snt-billing-accept-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-soft);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 20px 0 10px;
}

.snt-billing-card-icons {
    display: flex;
    gap: 14px;
    font-size: 26px;
    color: var(--gray-soft);
    margin-bottom: 16px;
}

.snt-billing-security {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gray-soft);
    margin-bottom: 20px;
}

.snt-billing-security i {
    color: var(--green-success-dark);
    margin-top: 2px;
}

/* ---------- First access / welcome screen ---------- */
.snt-welcome-screen {
    text-align: center;
    padding: 60px 20px 40px;
}

.snt-welcome-date {
    font-size: 14px;
    color: var(--gray-soft);
    margin: 0 0 8px;
}

.snt-welcome-title {
    font-size: 36px;
    font-weight: 300;
    color: var(--gray);
    margin: 0 0 48px;
}

.snt-welcome-cards {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.snt-welcome-card {
    display: block;
    background: var(--blue-primary-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 32px 24px;
    width: 260px;
    text-align: left;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}

.snt-welcome-card:hover {
    background: var(--blue-primary-tint);
}

.snt-welcome-card-center {
    text-align: center;
}

.snt-welcome-card-center .snt-welcome-card-icon,
.snt-welcome-card-center .snt-welcome-card-icon-grid {
    margin: 0 auto 20px;
}

.snt-welcome-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 0 20px;
    font-size: 22px;
}

.snt-welcome-card-icon-solid {
    background: var(--white);
    color: var(--dark);
    box-shadow: var(--shadow-sm);
}

.snt-welcome-card-icon-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 64px;
    height: 64px;
    margin: 0 0 20px;
    font-size: 18px;
    color: var(--dark);
}

.snt-welcome-card-icon-grid i,
.snt-welcome-card-icon-grid svg {
    display: flex;
    align-items: center;
    justify-content: center;
}

.snt-welcome-card-icon-grid svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.snt-welcome-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--blue-primary-dark);
    margin: 0 0 8px;
}

.snt-welcome-card p {
    font-size: 14px;
    color: var(--blue-primary-dark);
    line-height: 1.5;
    margin: 0;
}

/* Home no padrao roxo (mesmo espirito da Profile/Social Connect), escopado
   a .snt-welcome-screen pra nao afetar o modal de formato de imagem que
   reusa .snt-welcome-card. */
.snt-welcome-screen .snt-welcome-card {
    background: var(--btn-secondary-purple-bg);
    box-shadow: var(--shadow-sm), inset 0 0 0 3px transparent;
    transition: transform 0.2s, box-shadow 0.2s;
}
.snt-welcome-screen .snt-welcome-card:hover {
    box-shadow: var(--shadow-sm), inset 0 0 0 3px var(--purple);
    transform: scale(1.04);
}
.snt-welcome-screen .snt-welcome-card h4 {
    color: var(--dark);
}
.snt-welcome-screen .snt-welcome-card p {
    color: var(--btn-secondary-purple-text);
}

/* ---------- Footer ---------- */
.footer {
    height: auto;
    border-top: none;
    padding-top: 4px;
    padding-bottom: 12px;
    background-color: transparent;
    color: var(--gray-soft);
    text-align: center;
}
.footer p { margin: 0; }

/* ---------- Login ---------- */
.snt-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    box-sizing: border-box;
    background: var(--gray-surface);
}

.snt-login-card {
    width: 100%;
    max-width: 900px;
    display: flex;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    box-sizing: border-box;
}

.snt-login-illustration {
    flex: 1 1 45%;
    background: linear-gradient(135deg, var(--blue-primary), var(--blue-primary-dark));
    color: var(--white);
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: left;
}

.snt-login-slide {
    display: none;
    flex-direction: column;
    align-items: center;
}

.snt-login-slide.active { display: flex; }

.snt-login-illustration-icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--white-glass-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin-bottom: 28px;
}

.snt-login-slide h2 {
    color: var(--white);
    font-size: 24px;
    align-self: flex-start;
    margin: 0 0 8px 0;
}

.snt-login-slide p {
    color: var(--white-glass-text);
    font-size: 14px;
    align-self: flex-start;
    margin: 0;
}

.snt-login-dots {
    align-self: flex-start;
    display: flex;
    gap: 6px;
    margin-top: 28px;
}

.snt-login-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--white-glass-md);
}

.snt-login-dots span.active { background: var(--white); }

.snt-login-form-panel {
    flex: 1 1 55%;
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.snt-login-form-panel h3 {
    font-size: 28px;
    font-weight: 800;
    color: var(--blue-primary);
    margin: 0 0 6px 0;
}

.snt-form-subtitle {
    font-size: 16px;
    color: var(--gray-light);
    margin: 0 0 30px 0;
    line-height: 1.6;
}

.snt-signup-error {
    background: var(--purple-light);
    color: var(--purple-dark);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 14px;
    margin: 0 0 20px 0;
}

.snt-signup-link {
    font-size: 16px;
    color: var(--blue-primary);
    font-weight: 700;
    text-decoration: none;
}

.snt-signup-link:hover { text-decoration: underline; }

.snt-field { margin-bottom: 16px; }

.snt-field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray);
    margin-bottom: 6px;
}

.snt-field .form-control {
    width: 100%;
    height: 44px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius-md);
    padding: 0 14px;
    font-size: 17px;
    color: var(--text-input);
    background: var(--field-bg);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    box-shadow: none;
}

.snt-field .form-control:focus {
    border-color: var(--blue-primary);
    background: var(--white);
    box-shadow: 0 0 0 3px var(--focus-ring-color);
}

/* O Chrome reduz a fonte (e troca o fundo) de inputs autocompletados,
   ignorando o font-size do autor — força de volta pro tamanho normal. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    font-size: 17px !important;
    font-family: var(--font) !important;
    line-height: normal !important;
    -webkit-text-fill-color: var(--text-input) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* O Chrome às vezes só obedece o font-size do autofill via ::first-line
   (bug conhecido: https://issues.chromium.org/issues/41457553) */
.form-control:-webkit-autofill::first-line {
    font-size: 17px !important;
}

.snt-field-icon { position: relative; }

.snt-field-icon i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-soft);
    font-size: 14px;
}

.snt-field-icon .form-control { padding-left: 38px; }

/* Variante pilula do campo com icone (ex: busca da tela de Traducoes) - so o border-radius muda. */
.snt-field-pill .form-control { border-radius: var(--radius-full); }

.snt-input-narrow { max-width: 140px; }

/* Barra de scroll horizontal generica pra tabelas largas dentro de .snt-card
   (substitui o style="overflow-x:auto;" inline que varias telas repetiam). */
.snt-table-scroll { overflow-x: auto; }

/* Abas genericas (ex: Termos/Glossario em Traducoes) - nav com sublinhado na
   aba ativa; cor de destaque default e' o azul, sobrescrita por tela quando
   precisar (ver .snt-translations-layout .snt-tab.is-active). */
.snt-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--gray-surface);
    margin-bottom: 16px;
}
.snt-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 10px 2px;
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-soft);
    cursor: pointer;
}
.snt-tab.is-active {
    color: var(--dark);
    border-bottom-color: var(--blue-primary-dark);
}

.snt-field .help-block {
    font-size: 14px;
    color: var(--red);
    margin: 4px 0 0 0;
}

.snt-login-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 6px;
}

.snt-remember {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--gray-soft);
    white-space: nowrap;
    cursor: pointer;
}

.snt-forgot-password {
    display: block;
    text-align: center;
    margin-top: 18px;
    font-size: 14px;
    color: var(--blue-primary);
    text-decoration: none;
}

.snt-forgot-password:hover { text-decoration: underline; }

.snt-btn-login {
    height: 48px;
    padding: 0 32px;
    background: var(--blue-primary);
    color: var(--white);
    border: none;
    border-radius: var(--radius-full);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: background 0.2s;
    white-space: nowrap;
}

.snt-btn-login:hover { background: var(--blue-primary-dark); }

.snt-btn-login.snt-btn-success { background: var(--green-success); }
.snt-btn-login.snt-btn-success:hover { background: var(--green-success-dark); }
.snt-btn-login.snt-btn-success:disabled { background: var(--green-success); color: var(--white); opacity: 0.85; }

.snt-btn-login.snt-btn-danger { background: var(--red); }
.snt-btn-login.snt-btn-danger:hover { background: var(--red-dark); }
.snt-btn-login.snt-btn-danger:disabled { background: var(--red); color: var(--white); opacity: 0.85; }

@media (max-width: 720px) {
    .snt-login-illustration { display: none; }
    .snt-login-form-panel { padding: 40px 28px; }
}

/* ---------- Cadastro (wizard, etapa 1) ---------- */
.snt-signup-card {
    width: calc(100% - 32px);
    max-width: 1760px;
    min-height: calc(100vh - 64px);
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 40px 56px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.snt-signup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.snt-signup-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.snt-signup-content {
    width: 100%;
    max-width: 500px;
}

.snt-btn-google {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--google-btn-gradient);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    color: var(--gray);
    cursor: pointer;
    margin-bottom: 20px;
    text-decoration: none;
}

.snt-btn-google:hover { background: var(--field-bg); }

.snt-divider-or {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--gray-soft);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
}

.snt-divider-or::before,
.snt-divider-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--field-border);
}

.snt-divider-or span { padding: 0 12px; }

.snt-field-floating { position: relative; }

.snt-signup-field.snt-field-floating .form-control { height: 56px; padding-top: 8px; padding-bottom: 10px; }

.snt-signup-field.snt-field-floating .form-control:read-only { background: var(--field-bg); cursor: not-allowed; }

.snt-signup-field.snt-field-floating label {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 17px;
    font-weight: 400;
    color: var(--gray-soft);
    background: var(--white);
    padding: 0 4px;
    margin-bottom: 0;
    pointer-events: none;
    transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease;
}

.snt-field-floating .form-control:focus + label,
.snt-field-floating .form-control:not(:placeholder-shown) + label {
    top: 0;
    font-size: 12px;
    color: var(--blue-primary);
}

.snt-field-floating.snt-field-password-toggle .form-control { padding-right: 44px; }

.snt-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gray-soft);
    cursor: pointer;
    padding: 4px;
}

.snt-mini-logo {
    display: flex;
    align-items: center;
}

.snt-mini-logo img { height: 32px; width: auto; }

.snt-signup-success-icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--green-success-tint);
    color: var(--green-success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    margin: 0 auto 24px;
}

.snt-progress-bar { display: flex; gap: 8px; }

.snt-progress-bar span {
    width: 48px;
    height: 4px;
    border-radius: 2px;
    background: var(--gray-pale);
}

.snt-progress-bar span.active { background: var(--blue-primary); }

.snt-signup-body h3 {
    font-size: 26px;
    font-weight: 800;
    color: var(--gray);
    margin: 0 0 8px 0;
    text-align: center;
}

.snt-signup-subtitle {
    font-size: 16px;
    color: var(--gray-soft);
    text-align: center;
    margin: 0 0 28px 0;
}

.snt-form-row { display: flex; gap: 16px; }
.snt-form-row .snt-signup-field,
.snt-form-row .form-group,
.snt-form-row .snt-field,
.snt-form-row .snt-select-wrap,
.snt-form-row .snt-card { flex: 1 1 0; min-width: 0; }

/* Modificador pra linha com campos de altura diferente (input/select/botao)
   que precisam ficar centralizados verticalmente em vez de esticados -
   default do .snt-form-row (sem essa classe) continua stretch. */
.snt-form-row-align-center { align-items: center; }
.snt-form-row-align-center .form-group,
.snt-form-row-align-center .snt-field { margin-bottom: 0; }

/* Input + botao agrupados dentro do MESMO campo (ex: "Last Name"+Save,
   Phone+"Edit Phone") - ocupam juntos a largura de uma .snt-signup-field da
   linha, garantindo que a divisao 50/50 entre os dois campos da linha
   fique sempre no mesmo ponto (o botao nao conta como um 3o item disputando
   espaco a parte). */
.snt-input-with-button { display: flex; align-items: center; gap: 8px; }
.snt-input-with-button .form-control { flex: 1; min-width: 0; }

/* Link de indicacao (views/affiliate/link.php) - so leitura, fundo azul gelo pra
   destacar que e' o valor a copiar, id ja unico na tela. */
#affiliate-referral-link { background: var(--blue-primary-light); }

.snt-usage-chart-wrap { position: relative; height: 220px; }

/* Card de estatistica com sparkline pequeno (ex: Manage > Orders) - variante
   compacta do .snt-usage-chart-wrap, que e' alto demais pra um numero+grafico
   de resumo lado a lado. */
.snt-stat-card { display: flex; flex-direction: column; gap: 4px; }
.snt-stat-card-label { color: var(--gray-soft); font-size: 14px; }
.snt-stat-card-value { font-size: 28px; font-weight: 700; }
.snt-stat-card-sparkline { position: relative; height: 40px; margin-top: 8px; }

/* Abas de filtro por status com contador (ex: Manage > Orders) - generico
   o suficiente pra reusar em qualquer outra listagem admin com abas. */
.snt-filter-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 20px; }
.snt-filter-tabs a {
    display: inline-block;
    padding: 10px 14px;
    color: var(--gray-soft);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.snt-filter-tabs a:hover { color: var(--dark); }
.snt-filter-tabs a.active { color: var(--blue-primary); border-bottom-color: var(--blue-primary); }
.snt-filter-tabs a .snt-filter-count { color: inherit; opacity: 0.7; }

.snt-usage-helper-text {
    color: var(--gray-soft);
    font-size: 14px;
}

.snt-usage-balance-row { align-items: flex-end; }

.snt-usage-balance-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--dark);
    margin: 0;
}
.snt-usage-balance-value.snt-usage-balance-low { color: var(--red); }

.snt-usage-balance-updated {
    font-size: 13px;
    color: var(--gray-soft);
    margin: 4px 0 0;
}

.snt-usage-balance-alert {
    font-size: 14px;
    font-weight: 600;
    color: var(--red);
    margin: 8px 0 0;
}

.snt-usage-balance-form {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.snt-usage-balance-form .snt-signup-field { margin-bottom: 0; width: 160px; }

/* Campo de e-mail inline na linha do card "Invite Affiliate" (views/manage/affiliates.php),
   mesma tecnica do .snt-usage-balance-form acima - id ja unico na tela, sem classe nova. */
#snt-affiliate-invite-form .snt-signup-field { flex-shrink: 0; margin-bottom: 0; width: 240px; }

/* .snt-setting-row:first-child (abaixo) nao pega aqui porque o hidden input
   de csrf do Html::beginForm() vem antes dela no DOM - forca padding-top 0
   direto pelo id do form, unico na tela. */
#snt-affiliate-invite-form .snt-setting-row { padding-top: 0; }

.snt-usage-model-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.snt-usage-model-total {
    color: var(--gray-light);
    font-size: 14px;
    font-weight: 600;
    margin: 2px 0 8px;
}
.snt-usage-model-total-brl {
    color: var(--gray-soft);
    font-weight: 400;
    font-size: 14px;
}

.snt-usage-model-card { position: relative; }
.snt-usage-model-card .snt-media-col-label { margin-bottom: 2px; }
.snt-usage-model-card > .snt-usage-helper-text { margin: 0 0 8px; }
.snt-usage-provider-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gray-pale);
    color: var(--white);
}

/* ═══════════════════════════════════════════════════════════════
   AI USAGE — Filtro de periodo (Diario/Semanal/Quinzenal/Mensal +
   range customizado De/Ate), mesmo efeito/funcionalidade do
   componente equivalente do projeto sentinela
   (views/charts/grafico-periodo.php), com a paleta roxa do app no
   lugar do laranja original - ver Docs/harmonizacao.md no vault.
   ═══════════════════════════════════════════════════════════════ */
.snt-usage-period-filter {
    float: right;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.snt-usage-period-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1.5px dashed var(--purple);
    background: rgba(123, 97, 199, .06);
    color: var(--purple);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.snt-usage-period-pill:hover { background: rgba(123, 97, 199, .12); }

.snt-usage-period-tabs {
    display: flex;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    overflow: hidden;
}
.snt-usage-period-tab {
    padding: 7px 13px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray);
    background: var(--white);
    cursor: pointer;
    border: none;
    border-right: 1px solid var(--border-subtle);
    transition: background .12s;
}
.snt-usage-period-tab:last-child       { border-right: none; }
.snt-usage-period-tab.active           { background: var(--purple); color: var(--white); }
.snt-usage-period-tab:hover:not(.active) { background: var(--gray-pale); }

.snt-usage-period-panel {
    display: none;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 15px;
    margin: -10px 0 20px;
    background: var(--purple-light);
    border: 1px solid rgba(123, 97, 199, .25);
    border-radius: var(--radius-lg);
}
.snt-usage-period-panel.open  { display: flex; }
.snt-usage-period-panel label { font-size: 13px; font-weight: 600; color: var(--gray); }
.snt-usage-period-days-info   { font-size: 12px; color: var(--gray-soft); }

/* Badge/gatilho da modal com o grafico completo do periodo - escondido por
   padrao, so aparece quando o periodo filtrado passa dos PREVIEW_DAYS fixos
   do mini-grafico (classe setada em <body> via JS, ver views/ai-usage/index.php). */
.snt-usage-view-more {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    border: none;
    background: none;
    padding: 0;
    color: var(--purple);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.snt-usage-view-more:hover               { color: var(--purple-dark); text-decoration: underline; }
.snt-usage-period-gt7 .snt-usage-view-more { display: inline-flex; }
.snt-usage-period-gt7 .snt-usage-chart-wrap { cursor: pointer; }

.snt-usage-chart-wrap-lg { height: 380px; }

/* Dia selecionado no calendario flatpickr (painel De/Ate acima) - roxo no
   lugar do azul padrao do flatpickr. */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--purple) !important;
    border-color: var(--purple) !important;
    color: var(--white) !important;
}

/* Cabecalho "Agosto 2026" do calendario - mes/ano com a MESMA fonte
   (tamanho+peso) da linha de dias da semana logo abaixo (Dom/Seg/.../Sab,
   ver .flatpickr-weekday no vendor: font-size:90% de 14px = 12.6px,
   font-weight:bolder), em vez de cada um herdar um padrao diferente do
   flatpickr (pedido do usuario, 08/08/2026 - "carnaval" de fontes
   diferentes). O nome do mes e' um <select class="flatpickr-monthDropdown-
   months"> por padrao aqui (monthSelectorType default), NAO um
   <span class="cur-month"> - selecionar o elemento errado foi o motivo do
   ajuste anterior nunca ter pegado. !important porque o <link> do flatpickr
   e' carregado no <body> (depois do gimmyclues.css no <head>), entao o CSS
   padrao dele venceria por ordem de cascata senao. */
.flatpickr-current-month {
    display: flex !important;
    align-items: center !important;
    padding: 10px 14px 0 14px !important;
}
.flatpickr-current-month .numInputWrapper {
    margin-left: auto !important;
    width: 4.5em !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font-size: 12.6px !important;
    font-weight: bolder !important;
    font-family: inherit !important;
    padding-top: 4px !important;
}

/* UI de horario do flatpickr (agendamento de postagem, primeiro uso de
   enableTime no projeto) - colunas Horas/Minutos empilhadas (rotulo em
   cima, seta pra cima, numero num box, seta pra baixo), reproduzindo o
   padrao pedido pelo usuario (08/08/2026) em vez do spinner lateral padrao
   do flatpickr. Mesmo motivo do !important de sempre (ver acima). */
.flatpickr-time {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 24px !important;
    height: auto !important;
    max-height: none !important;
    padding: 14px 0 !important;
}
.flatpickr-time .flatpickr-time-separator {
    align-self: center !important;
    margin-top: 26px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}
.flatpickr-time .numInputWrapper {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
}
/* "Hours"/"Minutes" nao existe como texto no markup do flatpickr - injetado
   via ::before (nth-of-type conta os 2 <div class="numInputWrapper">
   irmaos, na ordem hora depois minuto, ja que ":" e' um <span> separado). */
.flatpickr-time .numInputWrapper::before {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--gray-soft) !important;
    margin-bottom: 6px !important;
}
.flatpickr-time .numInputWrapper:nth-of-type(1)::before { content: "Hours"; }
.flatpickr-time .numInputWrapper:nth-of-type(2)::before { content: "Minutes"; }
.flatpickr-time input {
    order: 2 !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    width: 56px !important;
    height: 44px !important;
    margin: 4px 0 !important;
    border: 1px solid var(--gray-soft) !important;
    border-radius: 8px !important;
    background: var(--white) !important;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus {
    border-color: var(--purple) !important;
    background: var(--white) !important;
}
.flatpickr-time .numInputWrapper span {
    position: relative !important;
    display: block !important;
    order: 1 !important;
    width: 100% !important;
    height: 16px !important;
    border: none !important;
    opacity: 1 !important;
    cursor: pointer !important;
}
.flatpickr-time .numInputWrapper span.arrowDown { order: 3 !important; }
.flatpickr-time .numInputWrapper span:hover { background: transparent !important; }
.flatpickr-time .numInputWrapper span:after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-left: 6px solid transparent !important;
    border-right: 6px solid transparent !important;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
    border-top: none !important;
    border-bottom: 8px solid var(--gray-soft) !important;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
    border-bottom: none !important;
    border-top: 8px solid var(--gray-soft) !important;
}
.flatpickr-time .numInputWrapper span.arrowUp:hover:after   { border-bottom-color: var(--purple) !important; }
.flatpickr-time .numInputWrapper span.arrowDown:hover:after { border-top-color: var(--purple) !important; }

/* Botao de agendamento (reloginho ao lado do Post, ver views/layouts/main.php)
   - mesmo icone/interacao nos 4 modais de postagem, tamanho casado com o
   botao vizinho de cada rodape (48px nas modais claras Instagram/LinkedIn,
   38px nas modais escuras YouTube/TikTok). */
.snt-schedule-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--gray-soft);
    border-radius: var(--radius-full);
    color: var(--gray-soft);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.snt-schedule-btn:hover        { color: var(--purple); border-color: var(--purple); }
.snt-schedule-btn.is-active    { color: var(--purple); border-color: var(--purple); }
.snt-schedule-btn.snt-schedule-btn-locked { opacity: 0.5; cursor: not-allowed; }
.snt-schedule-btn.snt-schedule-btn-locked:hover { color: var(--gray-soft); border-color: var(--gray-soft); }

.snt-modal-btn-col-post {
    display: flex;
    align-items: center;
    gap: 8px;
}
.snt-modal-btn-col-post .snt-schedule-btn { width: 48px; height: 48px; font-size: 16px; }
.snt-modal-btn-col-post .snt-btn-login    { flex: 1 1 0; }

.snt-youtube-modal-actions .snt-schedule-btn { width: 38px; height: 38px; font-size: 14px; }

.snt-schedule-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--purple);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    cursor: pointer;
}
.snt-schedule-label-clear {
    cursor: pointer;
    color: var(--gray-soft);
}
.snt-schedule-label-clear:hover { color: var(--red); }

/* Link "Cancel scheduled post" - so' aparece reabrindo a modal de um item
   ja agendado (ver sntInitSchedulePicker em gimmyclues.js). */
.snt-schedule-cancel-link {
    display: block;
    font-size: 12px;
    color: var(--gray-soft);
    text-decoration: underline;
    margin-bottom: 8px;
}
.snt-schedule-cancel-link:hover { color: var(--red); }

/* Modal unica "Schedule post" (#snt-schedule-modal, ver views/layouts/main.php)
   - mesma classe .snt-modal-overlay/.snt-modal de sempre, so' precisa de
   z-index maior porque abre por cima de uma modal de postagem ja visivel
   (mesmo motivo do #snt-modal-generic acima). */
#snt-schedule-modal {
    z-index: 1001;
}
.snt-schedule-modal-summary {
    color: var(--gray-soft);
    font-size: 14px;
    margin-bottom: 16px;
}

.snt-signup-field { margin-bottom: 18px; }

.snt-signup-field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray);
    margin-bottom: 6px;
}

.snt-signup-field .form-control {
    width: 100%;
    height: 44px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius-md);
    padding: 0 14px;
    font-size: 17px;
    color: var(--text-input);
    background: var(--field-bg);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    box-shadow: none;
}

.snt-signup-field .form-control:focus {
    border-color: var(--blue-primary);
    background: var(--white);
    box-shadow: 0 0 0 3px var(--focus-ring-color);
}

/* intl-tel-input's wrapper is inline-block by default (shrinks to content
   width), so the phone field looked narrower than the row above it. */
.snt-signup-field .iti {
    display: block;
    width: 100%;
}

.snt-btn-block {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-transform: uppercase;
    margin-top: 36px;
}

.snt-signup-footer-link { text-align: center; margin: 24px 0 0 0; }

.snt-signup-step { display: none; }
.snt-signup-step.active { display: block; }

.snt-signup-field-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.snt-optional-tag {
    font-size: 14px;
    color: var(--gray-soft);
}

.snt-signup-back {
    display: block;
    text-align: center;
    margin-top: 16px;
    font-size: 16px;
    color: var(--gray-soft);
    text-decoration: none;
}

.snt-signup-back:hover { color: var(--blue-primary); }

@media (max-width: 560px) {
    .snt-signup-card { padding: 24px 24px 32px; min-height: auto; }
    .snt-form-row { flex-direction: column; gap: 0; }
}

/* ---------- Botão genérico (ex: tela de atualização) ---------- */
.snt-btn-update {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--green-success);
    color: var(--white);
    border: none;
    border-radius: var(--radius-full);
    padding: 11px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.snt-btn-update:hover { background: var(--green-success-dark); }
.snt-btn-update:disabled { opacity: 0.8; cursor: default; color: var(--white); }

/* Botão pequeno de copiar (ex: terminal da tela de atualização) */
.snt-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    background: transparent;
    color: var(--gray-soft);
    border: 1px solid var(--gray-light);
    border-radius: var(--radius-full);
    padding: 4px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.snt-copy-btn:hover { background: rgba(255,255,255,0.08); color: var(--white); }

/* Badge de status generico (ex: lista de chamados) - mesmas 4 cores semanticas do sntShowFlash */
.snt-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
    white-space: nowrap;
}
.snt-status-badge-info    { background: var(--blue-primary); }
.snt-status-badge-purple  { background: var(--purple); }
.snt-status-badge-success { background: var(--green-success); }
.snt-status-badge-warning { background: var(--yellow); color: var(--dark); }
.snt-status-badge-affiliate { background: var(--yellow); color: var(--gray); }
.snt-status-badge-danger  { background: var(--red); }
.snt-status-badge-muted   { background: var(--gray-light); }
.snt-status-badge-orange  { background: var(--orange-highlight); }
.snt-status-badge-green-light { background: var(--green-success-light); color: var(--green-success-dark); }
.snt-status-badge-ice { background: var(--btn-secondary-bg); color: var(--blue-primary-dark); }
.snt-status-badge-plan-starter { background: var(--plan-starter-green); }
.snt-status-badge-plan-pro     { background: var(--plan-pro-blue); }
.snt-status-badge-plan-creators { background: var(--plan-creators-orange); }
.snt-status-badge-plan-agency  { background: var(--plan-agency-navy); }

/* Card inteiro clicavel sem sublinhado (ex: tile de estatistica que filtra ao clicar) */
.snt-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Tile de estatistica com icone grande semi-transparente de fundo (ex: contadores da lista de chamados) */
.snt-stat-tile {
    position: relative;
    overflow: hidden;
}
.snt-stat-tile > p {
    position: relative;
    z-index: 1;
}
.snt-stat-tile-icon {
    position: absolute;
    right: -14px;
    bottom: -20px;
    font-size: 110px;
    color: var(--gray-surface);
    z-index: 0;
}

/* Variante compacta do .snt-select (ex: coluna editavel de uma lista, RNF de tabela densa) */
.snt-select-narrow { max-width: 160px; }
.snt-select-narrow .snt-select {
    height: 36px;
    font-size: 14px;
    padding: 0 30px 0 10px;
}
.snt-select-narrow .snt-select-arrow { right: 10px; font-size: 14px; }

/* Alinha uma acao (ex: botao "Reset filters") na base de uma barra de filtros,
   na mesma altura dos <select> ao lado (que tem label acima, esse nao tem) */
.snt-filter-actions {
    display: flex;
    align-items: flex-end;
}

/* Avatar 44px (ex: linha de lista densa - maior que o .snt-avatar padrao de 36px do topbar) */
.snt-avatar-md { width: 44px; height: 44px; font-size: 16px; }

/* Tabela densa com celulas editaveis (ex: lista de chamados) - cabecalho e linhas
   compartilham o mesmo grid-template-columns pra ficar tudo alinhado. Cada select
   editavel e' seu proprio <form data-auto-submit>. */
.snt-list-table-header,
.snt-list-row {
    display: grid;
    grid-template-columns: 24px 44px minmax(220px, 1fr) 150px 150px 170px 120px 120px;
    align-items: center;
    gap: 24px;
}

.snt-list-table-header {
    padding: 0 0 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--gray-soft);
    font-size: 15px;
    font-weight: 700;
}

.snt-list-table-header-col { text-align: center; }

.snt-sort-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.snt-sort-link:hover { color: var(--blue-primary-dark); }

.snt-sort-icon { font-size: 20px; color: var(--gray-pale); }
.snt-sort-icon-active { color: var(--blue-primary); }

.snt-list-row {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.snt-list-row:last-child { border-bottom: none; }

.snt-list-row-checkbox { flex-shrink: 0; }

.snt-list-cell-select { display: flex; align-items: center; }

.snt-list-dot {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}
.snt-list-dot-info    { background: var(--blue-primary); }
.snt-list-dot-purple  { background: var(--purple); }
.snt-list-dot-success { background: var(--green-success); }
.snt-list-dot-warning { background: var(--yellow); }
.snt-list-dot-danger  { background: var(--red); }
.snt-list-dot-muted   { background: var(--gray-light); }

.snt-list-row-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--gray-soft);
    white-space: nowrap;
}
.snt-list-row-meta i { font-size: 14px; }

.snt-login-footer {
    text-align: center;
    font-size: 14px;
    color: var(--gray-pale);
    margin-top: 24px;
}

/* ---------- Modal (ex: confirmacao de email) ---------- */
.snt-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    box-sizing: border-box;
}

/* sntConfirm() (#snt-modal-generic) pode ser chamado com uma modal de
   postagem ja aberta atras (ex. reloginho de agendamento bloqueado por
   plano) - sem esse z-index maior as duas ficam empatadas e a modal de
   postagem, mais tarde no DOM, pintava por cima escondendo o aviso. */
#snt-modal-generic {
    z-index: 1001;
}

.snt-modal {
    position: relative;
    width: 100%;
    max-width: 540px;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 32px;
    box-sizing: border-box;
    text-align: center;
}

/* .snt-modal centraliza texto por padrao - campos de formulario dentro dele
   (label + input) devem ficar alinhados a esquerda, como em qualquer form. */
.snt-modal .snt-signup-field {
    text-align: left;
}

.snt-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gray-surface);
    font-size: 20px;
    color: var(--gray);
    cursor: pointer;
    text-decoration: none;
}

.snt-modal-close:hover {
    background: var(--gray-pale);
}

.snt-modal h3 {
    font-size: 28px;
    font-weight: 800;
    color: var(--gray);
    margin: 0 0 40px 0;
}

.snt-modal .snt-form-subtitle {
    margin-bottom: 20px;
}

.snt-modal-celebrate {
    display: flex;
}

.snt-modal-celebrate .snt-modal {
    background: var(--green-celebrate-bg);
}

.snt-modal-celebrate-icon {
    width: 160px;
    height: auto;
    margin: 0 auto 20px;
    display: block;
}

/* #snt-modal-generic-message tem font-size:17px (.snt-form-subtitle), mas
   isso não desce pros filhos: a regra global "p, ul, li {font-size:14px}"
   (topo do arquivo) bate direto neles e vence a herança. Reforça aqui pra
   qualquer messageHtml injetado nesse modal (atual ou futuro) sair no
   padrão certo, em vez de precisar lembrar de fixar isso em cada chamador. */
#snt-modal-generic-message p,
#snt-modal-generic-message ul,
#snt-modal-generic-message li,
#snt-modal-generic-message label {
    font-size: 17px;
}

#snt-modal-generic-message label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Checkbox "Tentar outros modelos se falhar" (views/character-images/index.php,
   modal "Escolher modelo") - espaco acima, direto colada no select senao. */
.snt-regenerate-fallback-label {
    margin-top: 12px;
    justify-content: flex-start;
}

.snt-modal-status-list {
    list-style: disc;
    text-align: left;
    margin: 0 auto;
    padding-left: 20px;
}

.snt-modal-status-list li {
    margin-bottom: 4px;
    white-space: nowrap;
}

.snt-modal .snt-form-row {
    gap: 24px;
}

.snt-modal-btn-col {
    flex: 1 1 0;
    min-width: 0;
}

.snt-modal .snt-btn-login {
    padding: 0 10px;
    font-size: 14px;
    white-space: normal;
}

/* ---------- Botões genéricos (override do Bootstrap) ---------- */
.btn-primary, .btn-primary-purple, .btn-secondary, .btn-secondary-purple, .btn-success, .btn-danger, .btn-instagram {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--radius-full);
    font-size: 15px;
    font-weight: 600;
}

.btn-primary.btn-sm, .btn-primary-purple.btn-sm, .btn-secondary.btn-sm, .btn-secondary-purple.btn-sm, .btn-success.btn-sm, .btn-danger.btn-sm, .btn-instagram.btn-sm {
    padding: 4px 14px;
    font-size: 14px;
}

.btn-primary {
    background-color: var(--blue-primary-dark);
    border-color: var(--blue-primary-dark);
    color: var(--white);
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--white);
    transform: scale(1.04);
}
.btn-primary-purple {
    background-color: var(--purple);
    border-color: var(--purple);
    color: var(--white);
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-primary-purple:hover, .btn-primary-purple:focus, .btn-primary-purple:active {
    background-color: var(--purple-dark);
    border-color: var(--purple-dark);
    color: var(--white);
    transform: scale(1.04);
}
.btn-secondary {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-bg);
    color: var(--blue-primary-dark);
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--white);
    transform: scale(1.04);
}
.btn-secondary-purple {
    background-color: var(--btn-secondary-purple-bg);
    border-color: var(--btn-secondary-purple-bg);
    color: var(--btn-secondary-purple-text);
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-secondary-purple:hover, .btn-secondary-purple:focus, .btn-secondary-purple:active {
    background-color: var(--purple);
    border-color: var(--purple);
    color: var(--white);
    transform: scale(1.04);
}

.btn-success {
    background-color: var(--green-success);
    border-color: var(--green-success);
    color: var(--white);
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
    background-color: var(--green-success-dark);
    border-color: var(--green-success-dark);
    color: var(--white);
}

.btn-instagram {
    background: var(--instagram-purple);
    border: none;
    color: var(--white);
}
.btn-instagram:hover, .btn-instagram:focus, .btn-instagram:active {
    opacity: 0.9;
    color: var(--white);
}

.btn-linkedin {
    background: var(--linkedin-blue);
    border: none;
    color: var(--white);
}
.btn-linkedin:hover, .btn-linkedin:focus, .btn-linkedin:active {
    opacity: 0.9;
    color: var(--white);
}

.btn-tiktok {
    background: var(--tiktok-black);
    border: none;
    color: var(--white);
}
.btn-tiktok:hover, .btn-tiktok:focus, .btn-tiktok:active {
    opacity: 0.9;
    color: var(--white);
}

.btn-danger {
    background-color: var(--red);
    border-color: var(--red);
    color: var(--white);
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    background-color: var(--red-dark);
    border-color: var(--red-dark);
    color: var(--white);
}

/* Pulso no botao de gerar narracao quando a voz/velocidade selecionada
   ainda nao foi aplicada ao player (usuario trocou o combo mas nao clicou
   ainda) - ver views/character-narration/index.php. */
@keyframes snt-btn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--blue-primary-glow); }
    50%      { box-shadow: 0 0 0 8px transparent; }
}

.snt-btn-pending {
    animation: snt-btn-pulse 1.4s ease-out infinite;
}

/* ---------- Alertas (toast flutuante, nao empurra o conteudo) ---------- */
@keyframes snt-alert-in {
    from { opacity: 0; transform: translate(-50%, -12px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.alert {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    width: calc(100% - 48px);
    max-width: 720px;
    margin: 0;
    padding: 14px 20px;
    font-size: 15px;
    line-height: 1.35;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    animation: snt-alert-in 0.25s ease-out;
    opacity: 1;
    transition: opacity 0.6s ease-out;
    white-space: pre-line;
}

.alert.snt-alert-fade-out {
    opacity: 0;
}

/* Self-contained close (x) button: Bootstrap's .btn-close only gets styled
   when Bootstrap's CSS is loaded (dashboard pages), but .alert is also used
   standalone on layout=false pages (login, signup) that don't load it. */
.alert.alert-dismissible {
    padding-right: 48px;
}

.alert .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 1.25rem 1rem;
    color: inherit;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e") center / 1em auto no-repeat;
    border: 0;
    border-radius: var(--radius-md);
    opacity: 0.8;
    cursor: pointer;
}

.alert .btn-close:hover {
    opacity: 1;
}

.alert-info {
    border: none;
    background-color: var(--blue-primary);
    color: var(--white);
}

.alert-success {
    background-color: var(--green-success);
    color: var(--white);
    font-weight: bold;
    border: none;
}

.alert-danger {
    background-color: var(--red);
    color: var(--white);
    font-weight: bold;
    border: none;
}

.alert-danger-copyable {
    cursor: pointer;
}

.alert-orange {
    background-color: var(--orange-highlight);
    color: var(--white);
    font-weight: bold;
    border: none;
}

.alert-purple {
    background-color: var(--purple-dark);
    color: var(--white);
    font-weight: bold;
    border: none;
}

/* ---------- Content Generator ---------- */
.content-tab-btn {
    padding: 10px 20px;
    border: 1px solid var(--border-subtle);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: var(--gray-surface);
    color: var(--gray-soft);
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
}

.content-tab-btn .check-icon { opacity: 0.4; }

.content-tab-btn.active {
    background: var(--tab-active-bg);
    border-bottom: 3px solid var(--tab-active-bg);
    color: var(--gray);
    font-weight: 700;
}

.content-tab-btn.active .check-icon { opacity: 1; }

.content-block { margin-bottom: 0; border-top-left-radius: 0; }

.content-block .field-script { min-height: 120px; }
.content-block .field-scenario { min-height: 156px; }
.content-block .field-adjustment  { min-height: 70px; }

.content-block textarea:read-only {
    background-color: var(--gray-pale);
    border-color: var(--gray-pale);
    color: var(--gray-soft);
    cursor: not-allowed;
}

.snt-media-script-panel textarea:read-only {
    background-color: var(--gray-surface);
    border-color: var(--gray-surface);
    color: var(--gray);
    cursor: default;
}

#field-enriched-text, .content-block .form-control, .snt-media-script-panel .form-control, .snt-character-panel .form-control, .snt-character-panel .snt-chat-composer-input { font-size: 17px; }

.snt-character-panel textarea:read-only {
    background-color: var(--gray-surface);
    border-color: var(--gray-surface);
    color: var(--gray);
    cursor: default;
}

.snt-character-columns {
    display: flex;
    align-items: stretch;
    gap: 20px;
    margin-top: 16px;
}
.snt-character-columns > .snt-character-adjustment-col { flex: 3 1 0; min-width: 0; }

/* Coluna do botao "Finalize and Create Narration" - mesma largura relativa
   que o card de Contexto ocupava antes (removido, o botao ficou no lugar
   dele em vez de embaixo, sozinho, ocupando a largura toda). align-items:stretch
   no pai (acima) faz essa coluna esticar ate a altura da coluna de ajuste ao
   lado, daqui centraliza o botao dentro dessa altura. */
.snt-character-finalize-col {
    flex: 2 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.snt-character-adjustment-col .snt-chat-composer { max-width: none; margin: 0; }

@media (max-width: 767px) {
    .snt-character-columns { flex-direction: column; }
}

.content-block > label { font-size: 18px; margin-bottom: 2px; color: var(--blue-primary); }

.counter-characters { display: block; text-align: right; padding-top: 4px; }
.counter-characters.text-danger  { color: var(--red) !important; }
.counter-characters.text-success { color: var(--green-success-dark) !important; }

/* Contador FORA da caixa do chat composer (ver views/character/index.php) -
   mesma largura/centralizacao do .snt-chat-composer, pra alinhar a borda
   direita com o botao de enviar em vez de esticar pra largura do hero. */
.snt-chat-composer-counter {
    max-width: 720px;
    margin: 8px auto 0;
    padding-right: 4px;
    box-sizing: border-box;
}

.snt-media-col-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-soft);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 10px;
}

/* AI Usage: titulos de secao em roxo, so nessa tela - escopado via #snt-recent-projects-body,
   id que ja existia nessa view, sem precisar de wrapper/classe nova. */
.snt-app-content main#snt-main:has(#snt-recent-projects-body) .snt-media-col-label {
    color: var(--purple);
}

/* Script Creation (Character): titulos "Script"/"Adjustment instruction" em roxo, so nessa
   tela - escopado via #counter-character-script, id que ja existia nessa view. */
.snt-app-content main#snt-main:has(#counter-character-script) .snt-media-col-label {
    color: var(--purple);
}

.snt-usage-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.snt-usage-stat i { color: var(--gray-soft); }

.snt-voice-gender-row {
    display: flex;
    gap: 10px;
}

.snt-voice-controls-subcard {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--gray-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 24px;
    margin-top: 20px;
}

.snt-voice-ctrl-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 24px;
}


.snt-voice-ctrl-group:first-child {
    padding-left: 0;
}

.snt-voice-ctrl-group:last-child {
    padding-right: 0;
}

.snt-voice-ctrl-divider {
    width: 1px;
    align-self: stretch;
    background: var(--border);
    flex-shrink: 0;
}

.snt-narration-locked .snt-voice-controls-subcard,
.snt-narration-locked .snt-audio-player {
    opacity: .45;
    pointer-events: none;
    filter: grayscale(40%);
}

.snt-character-video-columns {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    margin-top: 16px;
}

.snt-character-video-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.snt-character-video-square {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--white);
    border: 1px dashed var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.snt-character-video-placeholder {
    color: var(--gray-soft);
    font-size: 40px;
}

.snt-character-video-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.snt-character-video-expand-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overlay-bg);
    color: var(--white);
    border: none;
    font-size: 13px;
    cursor: pointer;
}

.snt-character-video-expand-btn:hover {
    background-color: var(--blue-primary);
}

.snt-character-video-transition-row {
    display: flex;
    justify-content: center;
}

.snt-character-video-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* Fileira generica de botoes centralizados - reaproveitar em vez de inline style. */
.snt-actions-center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Mesma fileira de botoes, alinhada a esquerda (ex: Upload/Remove foto de perfil). */
.snt-actions-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}

/* Espaco acima da fileira de acoes, quando ela vem logo depois de um campo de
   formulario (textarea/input) - nao usar dentro de tabela (linha ja centraliza
   sozinha via vertical-align: middle no td). */
.snt-card form > .snt-actions-center {
    margin-top: 12px;
}

.snt-audio-player + .snt-actions-center {
    margin-top: 40px;
}

.snt-setting-row + .snt-actions-center {
    margin-top: 20px;
    margin-bottom: 10px;
}

.snt-character-video-history {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.snt-character-video-history-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
    cursor: pointer;
}

.snt-character-scenes-col {
    flex: 1 1 0;
    min-width: 0;
}

.snt-character-scenes-card.snt-character-scenes-scroll {
    max-height: 460px;
    overflow-y: auto;
    margin-top: 0;
}

.snt-character-scenes-card {
    background: var(--gray-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 24px;
    margin-top: 16px;
    position: relative;
}

.snt-character-scenes-copy-btn {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
    background: var(--gray-surface);
}
.snt-character-scenes-copy-btn:hover {
    background: var(--blue-primary-light);
    border-color: var(--blue-primary);
    color: var(--blue-primary);
}

.snt-character-scenes-list {
    margin-top: 30px;
}

.snt-character-motion-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--blue-primary);
    font-weight: 600;
    margin-bottom: 12px;
}

.snt-character-scene-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.snt-character-scene-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.snt-character-scene-index {
    flex-shrink: 0;
    width: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 4px;
    text-align: center;
}

.snt-character-scene-number {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-soft);
}

.snt-character-scene-time-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    width: 52px;
    margin-top: 4px;
}

.snt-character-scene-time {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-pale);
}

.snt-character-scene-info-icon {
    font-size: 13px;
}

/* Numero de sequencia da cena - so um marcador discreto (tipo marca d'agua)
   pra localizar rapido, nunca deve competir visualmente com o time/prompt. */
.snt-character-scene-number {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: var(--gray-pale);
}

.snt-tooltip-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    color: var(--gray-pale);
}

.snt-tooltip-trigger:hover,
.snt-tooltip-trigger:focus-visible {
    color: var(--blue-primary);
}

.snt-tooltip-trigger .snt-tooltip-content {
    display: none;
}

.snt-tooltip-trigger:hover .snt-tooltip-content,
.snt-tooltip-trigger:focus-visible .snt-tooltip-content {
    display: block;
}

.snt-tooltip-content {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    width: 320px;
    max-width: 80vw;
    margin-top: 6px;
    padding: 10px 12px;
    background: var(--gray);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    text-align: left;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

.snt-character-scene-media {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.snt-character-scene-thumb-wrap {
    position: relative;
    flex-shrink: 0;
}

.snt-character-scene-history {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    width: 160px;
}

.snt-character-scene-history-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--white);
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}

.snt-character-scene-history-thumb:hover {
    border-color: var(--blue-primary);
    transform: scale(1.05);
}

.snt-character-scene-thumb {
    display: block;
    width: 160px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--white);
    border: 1px solid var(--border);
    cursor: pointer;
}

.snt-character-scene-redo-btn {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overlay-bg);
    color: var(--white);
    border: none;
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity .15s ease, transform .15s ease, background-color .15s ease;
}

.snt-character-scene-thumb-wrap:hover .snt-character-scene-redo-btn,
.snt-character-scene-placeholder:hover .snt-character-scene-redo-btn,
.snt-character-scene-redo-btn:focus-visible {
    opacity: 1;
    transform: scale(1);
}

.snt-character-scene-redo-btn:hover {
    background-color: var(--blue-primary);
}

/* Mesmo botao redondo do redo, mas empilhado logo acima dele - abre o modal
   de escolher uma imagem ja gerada de outra cena deste projeto. */
.snt-character-scene-folder-btn {
    position: absolute;
    bottom: 38px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overlay-bg);
    color: var(--white);
    border: none;
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity .15s ease, transform .15s ease, background-color .15s ease;
}

.snt-character-scene-thumb-wrap:hover .snt-character-scene-folder-btn,
.snt-character-scene-placeholder:hover .snt-character-scene-folder-btn,
.snt-character-scene-folder-btn:focus-visible {
    opacity: 1;
    transform: scale(1);
}

.snt-character-scene-folder-btn:hover {
    background-color: var(--blue-primary);
}

/* Mesmo botao redondo, empilhado acima do redo - toca o clipe de video ja gerado desta cena. */
.snt-character-scene-play-btn {
    position: absolute;
    bottom: 38px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overlay-bg);
    color: var(--white);
    border: none;
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity .15s ease, transform .15s ease, background-color .15s ease;
}

.snt-character-scene-thumb-wrap:hover .snt-character-scene-play-btn,
.snt-character-scene-play-btn:focus-visible {
    opacity: 1;
    transform: scale(1);
}

.snt-character-scene-play-btn:hover {
    background-color: var(--blue-primary);
}

.snt-character-scene-redo-btn:disabled {
    opacity: 1;
    transform: scale(1);
    cursor: not-allowed;
}

/* Estado "rodando" compartilhado - fundo roxo escuro + icone branco enquanto
   uma acao assincrona de sync esta em andamento. */
.snt-character-scene-redo-btn.snt-btn-running,
.snt-character-scene-redo-btn:disabled.snt-btn-running,
.snt-character-scene-regenerate-prompt-btn.snt-btn-running,
.snt-character-scene-regenerate-prompt-btn:disabled.snt-btn-running,
.snt-character-scene-save-prompt-btn.snt-btn-running,
.snt-character-scene-save-prompt-btn:disabled.snt-btn-running,
.snt-translation-redo-btn.snt-btn-running,
.snt-translation-redo-btn:disabled.snt-btn-running {
    background-color: var(--purple-dark);
    color: var(--white);
    border-color: var(--purple-dark);
}

/* Botao de "redo" por linha na tela de Traducoes (views/translation/_rows.php) -
   mesmo circulo/icone/estado "rodando" do redo de cena do Character
   (.snt-character-scene-redo-btn acima), so sem posicionamento absoluto:
   aqui e' uma celula normal de tabela, sempre visivel, nao um overlay sobre
   thumbnail que só aparece no hover. */
.snt-translation-redo-cell {
    width: 1%;
    white-space: nowrap;
}

/* Largura fixa (cabe os 2 botoes + gap) pra alinhar sempre igual, tenha a
   linha 1 ou 2 icones - text-align:center sozinho no <td> nao garante isso
   de forma consistente entre linhas com quantidade diferente de botoes. */
.snt-translation-redo-cell-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 64px;
}

.snt-translation-redo-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-surface);
    color: var(--gray-soft);
    border: none;
    font-size: 12px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.snt-translation-redo-btn:hover {
    background-color: var(--blue-primary);
    color: var(--white);
}

.snt-translation-redo-btn .fa-spin {
    animation-duration: 0.7s;
}

/* SVG inline com o path exato do glifo fa-sync-alt da Font Awesome Free
   5.15.1 (mesma versao usada no website-gimmyclues/sentinela) - a v7
   empacotada no app redesenhou esse glifo mais "grosso", entao usar a
   classe fas/fa-sync-alt normal aqui ficava visualmente diferente das
   outras duas propriedades mesmo com o mesmo nome de icone. */
.snt-floating-update-icon {
    display: block;
}

/* Bolinha flutuante "Atualizar Sistema" (canto inferior esquerdo) - mesma
   dimensao/cor do app sentinela (.snt-floating-update-btn la), pra ficar
   igual nas duas telas em vez do icone dentro do rail que tinha antes.
   left:59px (nao 24px como no sentinela) pra nao ficar colada/sobrepondo a
   faixa fina lateral (.snt-icon-rail, 75px de largura) - o sentinela nao
   tem essa faixa, so o app.gimmyclues precisa desse ajuste (24px iniciais,
   +10px e depois -5px pedidos pelo usuario 06/08/2026). */
.snt-floating-update-btn {
    position: fixed;
    left: 57px;
    bottom: 24px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--orange-highlight);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    z-index: 1000;
}

.snt-floating-update-btn:hover,
.snt-floating-update-btn.snt-floating-update-running {
    background: var(--orange-highlight-dark);
}

.snt-floating-update-btn:focus,
.snt-floating-update-btn:focus-visible {
    outline: none;
}

/* .snt-character-scene-save-prompt-btn e um botao Bootstrap normal
   (retangular, com texto) - so vira circulo igual aos outros icon-buttons
   quando esta rodando (nesse momento o conteudo vira so o icone spinner). */
.snt-character-scene-save-prompt-btn.snt-btn-running,
.snt-character-scene-save-prompt-btn:disabled.snt-btn-running {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.snt-character-scene-redo-btn .fa-spin {
    animation-duration: 0.7s;
}

.snt-character-lightbox {
    flex-direction: column;
    gap: 16px;
}

.snt-character-lightbox-img {
    max-width: 100%;
    max-height: 90vh;
    min-width: 0;
    border-radius: 8px;
}

.snt-character-lightbox-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* Envolve so a foto (nao as setas/o body inteiro) com position:relative, pra
   o pill do nome ancorar no canto da IMAGEM. Sem botao de fechar - fechar e'
   so por Cancelar ou clicando fora da foto (ver JS). */
#snt-character-choose-lightbox .snt-character-choose-img-wrap {
    position: relative;
    display: flex;
    max-width: 100%;
    max-height: 90vh;
}

/* Nome do personagem no lightbox "Usar este personagem?" (views/character/index.php) -
   pill estilo "handle" (@nome) no canto superior esquerdo da foto, mesmo par
   cor azul-claro/azul-escuro ja usado em outros badges (ex. .snt-card-brand-badge). */
.snt-character-choose-name-pill {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--blue-primary-light);
    color: var(--blue-primary-dark);
    font-size: 14px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--radius-full);
}

.snt-character-lightbox-select-btn,
.snt-character-lightbox-delete-btn {
    flex-shrink: 0;
}

.snt-character-lightbox-body {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 100%;
}

.snt-character-lightbox-nav {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: var(--white-glass-md);
    color: var(--white);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.snt-character-lightbox-nav:hover {
    background: var(--white-glass-text);
    color: var(--dark);
}

.snt-character-scene-placeholder {
    position: relative;
    flex-shrink: 0;
    width: 160px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--gray-soft);
    font-size: 20px;
}

.snt-character-scene-placeholder.snt-character-scene-processing {
    border: 1px solid var(--blue-primary);
    color: var(--blue-primary);
}

.snt-character-scene-thumb.snt-character-scene-processing {
    border: 2px solid var(--blue-primary);
    box-shadow: 0 0 0 3px var(--blue-primary-glow);
}

.snt-character-panel[data-image-format="vertical"] .snt-character-scene-thumb,
.snt-character-panel[data-image-format="vertical"] .snt-character-scene-placeholder {
    width: 90px;
    height: 160px;
}

.snt-character-panel[data-image-format="vertical"] .snt-character-scene-media {
    flex-direction: row;
    align-items: flex-start;
}

.snt-character-panel[data-image-format="vertical"] .snt-character-scene-history {
    order: -1;
    width: auto;
    grid-template-columns: none;
    grid-template-rows: repeat(5, 29px);
    grid-auto-flow: column;
    grid-auto-columns: 29px;
}

.snt-character-images-counter {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: var(--radius-full);
    background: var(--gray-surface);
    border: 1px solid var(--border);
    font-size: 15px;
    font-weight: 700;
    color: var(--gray);
}

.snt-character-images-counter .fa-spinner {
    color: var(--blue-primary);
}

.snt-character-scene-text {
    flex: 1;
    min-width: 0;
}

.snt-character-scene-transcript {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gray);
    line-height: 1.5;
}

.snt-character-scene-prompt {
    margin: 0;
    font-size: 14px;
    font-style: italic;
    color: var(--gray-light);
    line-height: 1.5;
}

.snt-character-scene-prompt-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.snt-character-scene-prompt-row .snt-character-scene-prompt {
    flex: 1;
}

.snt-character-scene-prompt-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.snt-character-scene-edit-prompt-btn,
.snt-character-scene-view-english-btn,
.snt-character-scene-regenerate-prompt-btn {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--gray-soft);
    font-size: 12px;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.snt-character-scene-edit-prompt-btn:hover,
.snt-character-scene-edit-prompt-btn:focus-visible,
.snt-character-scene-view-english-btn:hover,
.snt-character-scene-view-english-btn:focus-visible,
.snt-character-scene-regenerate-prompt-btn:hover,
.snt-character-scene-regenerate-prompt-btn:focus-visible {
    color: var(--blue-primary);
    background: var(--gray-surface);
}

.snt-character-scene-regenerate-prompt-btn:disabled {
    color: var(--blue-primary);
    cursor: not-allowed;
}

.snt-character-scene-regenerate-prompt-btn .fa-spin {
    animation-duration: 0.7s;
}

.snt-character-scene-edit-box {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 8px;
}

.snt-character-scene-model-badge-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.snt-character-scene-model-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-soft);
    background: var(--gray-surface);
    padding: 2px 9px;
    border-radius: 10px;
}

.snt-character-scene-edit-box .snt-character-scene-prompt-edit-textarea {
    flex: 1;
    min-width: 200px;
    font-size: 14px;
    resize: vertical;
}

.snt-pill-disabled {
    opacity: .5;
    cursor: default;
}

.snt-voice-panel {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.snt-voice-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 18px;
    border-radius: 20px;
    border: 2px solid var(--blue-primary);
    cursor: pointer;
    font-size: 15px;
    color: var(--blue-primary);
    transition: border-color .15s, color .15s, background .15s;
    user-select: none;
}

.snt-voice-pill input[type="radio"] { display: none; }

.snt-voice-pill.snt-pill-female {
    border-color: var(--pink);
    color: var(--pink);
}

.snt-voice-pill.selected {
    background: var(--blue-primary);
    color: var(--white);
}

.snt-voice-pill.selected.snt-pill-female {
    background: var(--pink);
    border-color: var(--pink);
    color: var(--white);
}

/* Icone de genero (masculino/feminino) fora dos pills - ex.: linhas da tela
   admin de Voices. Mesma convencao de cor: azul pro masculino, rosa pro
   feminino. */
.snt-gender-icon-male   { color: var(--blue-primary); }
.snt-gender-icon-female { color: var(--pink); }

/* "Select Voice" (Character Narration) no padrao roxo, mesma convencao da Profile. */
.snt-voice-select {
    background-color: var(--btn-secondary-purple-bg);
    color: var(--btn-secondary-purple-text);
}
.snt-voice-select ~ .snt-select-arrow {
    color: var(--btn-secondary-purple-text);
}
.snt-voice-select:focus {
    border-color: var(--purple);
}

.snt-voice-status {
    font-size: 14px;
    color: var(--gray-soft);
}

.snt-voice-audio {
    display: none;
}

.snt-audio-player {
    width: 100%;
    margin: 36px 0;
}

.snt-audio-player-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 999px;
    background-color: var(--gray-surface);
}

.snt-audio-player-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--player-accent);
    color: var(--white);
    cursor: pointer;
}

.snt-audio-player-time,
.snt-audio-player-duration {
    flex-shrink: 0;
    min-width: 34px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gray);
}

.snt-audio-player-duration {
    text-align: right;
}

.snt-audio-player-bar {
    position: relative;
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background-color: var(--blue-player-track);
    cursor: pointer;
}

.snt-audio-player-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    border-radius: 4px;
    background-color: var(--player-accent);
    pointer-events: none;
}

/* Bolinha no fim do trecho tocado - deixa visualmente claro que da pra arrastar */
.snt-audio-player-fill::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--player-accent);
    box-shadow: var(--shadow-sm);
    transform: translateY(-50%);
}

.snt-speed-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.snt-speed-slider {
    flex: 0 0 160px;
    accent-color: var(--player-accent);
    cursor: pointer;
}

.snt-voice-ctrl-group .snt-media-col-label {
    color: var(--purple);
}

.snt-speed-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-soft);
    min-width: 40px;
}

.snt-narration-locked-label {
    font-size: 15px;
    color: var(--green-success);
    font-weight: 600;
}

.snt-voice-unlock-btn {
    font-size: 15px;
    color: var(--gray-soft);
    padding: 0 8px;
}

/* ── Avatar grid (Create Video) ─────────────────────────────────────────── */
.snt-avatar-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
}

.snt-avatar-card {
    width: 140px;
    border: 2px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    text-align: center;
}

.snt-avatar-card:hover {
    border-color: var(--blue-primary);
    box-shadow: var(--shadow-sm);
}

.snt-avatar-card.selected {
    border-color: var(--blue-primary);
    border-width: 3px;
    box-shadow: 0 0 0 3px var(--blue-primary-tint);
    background: var(--blue-primary-light);
}

.snt-status-icon-ok { color: var(--green-success); }
.snt-status-icon-missing { color: var(--red); }

.snt-form-row .snt-card.selected {
    border-color: var(--blue-primary);
    border-width: 2px;
    box-shadow: 0 0 0 3px var(--blue-primary-tint);
    background: var(--blue-primary-light);
}

/* Variante verde - especificamente pro plano ATIVO/pago (payment/billing),
   distinta do azul "selecionado" generico usado em outras telas. */
.snt-form-row .snt-card.plan-active {
    border-color: var(--green-success);
    border-width: 2px;
    box-shadow: 0 0 0 3px var(--green-success-tint);
    background: var(--green-success-light);
}

/* ---------- Resumo do plano atual (payment/billing) - duas colunas lado a
   lado (plano+creditos / proximo pagamento), estilo cartao SaaS. ---------- */
.snt-plan-summary-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.snt-plan-summary-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.snt-plan-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.snt-plan-summary-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-soft);
    margin: 0;
}

.snt-plan-summary-status {
    font-size: 12px;
    font-weight: 700;
    color: var(--green-success-dark);
    text-transform: capitalize;
}

.snt-plan-summary-price {
    font-size: 32px;
    font-weight: 800;
    color: var(--dark);
    margin: 0;
}

.snt-plan-summary-price span {
    font-size: 13px;
    font-weight: 400;
    color: var(--gray-soft);
}

.snt-plan-summary-credits p {
    font-size: 13px;
    color: var(--gray-soft);
    margin: 0 0 6px;
}

.snt-plan-progress {
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--blue-primary-light);
    overflow: hidden;
}

.snt-plan-progress-fill {
    height: 100%;
    background: var(--blue-primary);
    border-radius: var(--radius-full);
}

.snt-plan-summary-date {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    margin: 0;
}

.snt-plan-summary-action {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 6px;
}

.snt-has-loading {
    position: relative;
}

.snt-loading-overlay {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(255,255,255,0.75);
    border-radius: var(--radius-lg);
    z-index: 10;
}

.snt-loading-overlay .fa-spinner {
    font-size: 64px;
    color: var(--blue-primary);
}

.snt-page-loading-overlay {
    position: fixed;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(255,255,255,0.9);
    z-index: 900;
}

.snt-page-loading-overlay .fa-spinner {
    font-size: 72px;
    color: var(--blue-primary);
}

.snt-page-loading-icon {
    display: none;
    width: 350px;
    height: 350px;
    object-fit: contain;
    transition: transform .4s ease, opacity .4s ease;
}

/* Troca de figura em slide up: a atual sobe e some (snt-slide-out), depois a
   nova entra de baixo pra cima (snt-slide-in-prep, aplicado sem transition
   pra "teletransportar" a figura pra baixo antes de remover a classe e
   deixar a transition padrao acima animar a subida) - ver
   sntShowPageLoading()/sntSlideLoadingIcon() em gimmyclues.js. */
.snt-page-loading-icon.snt-slide-out {
    transform: translateY(-24px);
    opacity: 0;
}

.snt-page-loading-icon.snt-slide-in-prep {
    transition: none;
    transform: translateY(24px);
    opacity: 0;
}

.snt-page-loading-overlay p {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--gray);
}

.snt-loading-overlay p {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--gray);
}

.snt-video-player-wrap {
    margin-top: 24px;
}

.snt-video-player-wrap video {
    width: 100%;
    border-radius: var(--radius-md);
    background: var(--dark);
    display: block;
}

.snt-avatar-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

.snt-avatar-placeholder {
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-surface);
    font-size: 48px;
    color: var(--gray-soft);
}

.snt-avatar-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray);
    padding: 8px 6px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.snt-avatar-admin-card {
    width: 180px;
}

.snt-avatar-heygen-name {
    font-size: 11px;
    color: var(--gray-soft);
    padding: 4px 6px 2px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.snt-avatar-name-lang {
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-soft);
    text-transform: uppercase;
    padding: 4px 8px 0;
    margin: 0;
}

.snt-avatar-name-input {
    display: block;
    width: calc(100% - 16px);
    margin: 2px 8px;
    padding: 4px 6px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--dark);
    background: var(--white);
    box-sizing: border-box;
    transition: border-color .15s;
}

.snt-avatar-name-input:focus {
    outline: none;
    border-color: var(--blue-primary);
}

.snt-avatar-name-input.snt-saving {
    border-color: var(--gray-soft);
    opacity: 0.6;
}

.snt-avatar-name-input.snt-saved {
    border-color: var(--green-success);
}

.snt-avatar-swap-btn {
    display: block;
    width: calc(100% - 16px);
    margin: 0 8px 8px;
    padding: 5px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue-primary);
    background: var(--gray-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
}

.snt-avatar-swap-btn:hover {
    background: var(--gray-pale);
}

.snt-modal.snt-modal-wide {
    max-width: 900px;
    text-align: left;
}

.snt-avatar-picker-body {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}

/* ── Markdown rendered docs ─────────────────────────────────────────────── */
.snt-docs-content {
    max-width: 860px;
    padding-bottom: 48px;
}

.snt-docs-content h1,
.snt-docs-content h2,
.snt-docs-content h3,
.snt-docs-content h4 {
    color: var(--blue-primary);
    margin-top: 2em;
    margin-bottom: .5em;
    font-weight: 700;
}

.snt-docs-content h1 { font-size: 1.8rem; margin-top: 0; }
.snt-docs-content h2 { font-size: 1.35rem; border-bottom: 2px solid var(--gray-pale); padding-bottom: 6px; }
.snt-docs-content h3 { font-size: 1.1rem; }
.snt-docs-content h4 { font-size: 1rem; }

.snt-docs-content p,
.snt-docs-content li { font-size: 15px; line-height: 1.7; color: var(--dark); }

.snt-docs-content ul,
.snt-docs-content ol { padding-left: 1.5em; margin-bottom: 1em; }

.snt-docs-content li { margin-bottom: .25em; }

.snt-docs-content code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    background: var(--gray-surface);
    color: var(--dark);
    padding: 1px 5px;
    border-radius: 3px;
}

.snt-docs-content pre {
    background: var(--terminal-bg);
    color: var(--terminal-green);
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.6;
    padding: 16px 20px;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-bottom: 1.25em;
}

.snt-docs-content pre code {
    background: none;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

.snt-docs-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.25em;
    font-size: 14px;
}

.snt-docs-content th,
.snt-docs-content td {
    border: 1px solid var(--gray-pale);
    padding: 8px 12px;
    text-align: left;
}

.snt-docs-content th {
    background: var(--gray-pale);
    font-weight: 700;
    color: var(--blue-primary);
}

.snt-docs-content tr:nth-child(even) td { background: var(--stripe-bg); }

.snt-docs-content blockquote {
    border-left: 4px solid var(--blue-primary);
    margin: 0 0 1em;
    padding: 8px 16px;
    background: var(--blue-primary-tint-subtle);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.snt-docs-content blockquote p { margin: 0; }

.snt-docs-content hr {
    border: none;
    border-top: 2px solid var(--gray-pale);
    margin: 2em 0;
}

.snt-docs-content a { color: var(--blue-primary); text-decoration: underline; }

/* Script textarea auto-save */
.snt-script-wrap {
    position: relative;
}
.snt-script-textarea.snt-saved {
    border-color: var(--green-success);
    transition: border-color 0.3s;
}
.snt-script-saved-badge {
    position: absolute;
    bottom: 7px;
    right: 30px;
    background: var(--green-success);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 5px 16px;
    border-radius: 20px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s;
    white-space: nowrap;
}
.snt-script-saved-badge.snt-badge-visible {
    opacity: 1;
}

/* ElevenLabs Credits page */
.snt-elevenlabs-balance-row {
    display: flex;
    gap: 40px;
    margin-bottom: 16px;
}
.snt-elevenlabs-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.snt-elevenlabs-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--blue-primary);
}
.snt-elevenlabs-stat-label {
    font-size: 13px;
    color: var(--gray-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.snt-elevenlabs-bar-wrap {
    width: 100%;
    height: 8px;
    background: var(--gray-pale);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}
.snt-elevenlabs-bar-fill {
    height: 100%;
    background: var(--blue-primary);
    border-radius: 4px;
    transition: width 0.4s ease;
}
.snt-elevenlabs-bar-label {
    font-size: 13px;
    color: var(--gray-soft);
    margin: 0;
}

/* ---------- Job bar (RNF15) — barra laranja global de "algo esta rodando
   em background", topo da pagina, 100% largura. Componente generico -
   ver sntShowJobBar()/sntHideJobBar() em gimmyclues.js. Empurra o shell
   fixo (rail + sidebar, ambos top:0) pra baixo em vez de sobrepor, senao
   cobriria os icones do topo deles enquanto visivel. Uma linha
   (.snt-job-bar-row) por job ativo - altura total (--snt-job-bar-height)
   calculada em JS pra empurrar o shell certo com 1, 2 ou mais jobs
   simultaneos, em vez de um numero fixo chumbado aqui. ---------- */
.snt-job-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1150;
    display: none;
    flex-direction: column;
    background: var(--orange-highlight);
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.snt-job-bar.is-visible {
    display: flex;
}

.snt-job-bar-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 40px;
    /* Sem isso, a regra global "html, body, div, p, ..." bate direto nessa
       div (color: var(--gray)) e vence o branco herdado de .snt-job-bar -
       regra direta sempre ganha de valor herdado, mesmo com especificidade
       menor. Mesmo gotcha do padrao de 17px (ver REQUIREMENTS.md/memoria). */
    color: var(--white);
}

.snt-job-bar-row + .snt-job-bar-row {
    border-top: 1px solid var(--white-glass-sm);
}

.snt-job-bar-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 0 4px var(--white-glass-sm);
    flex-shrink: 0;
    animation: sntJobBarPulse 1.4s ease-in-out infinite;
}

@keyframes sntJobBarPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

body.snt-job-bar-active {
    padding-top: var(--snt-job-bar-height, 40px);
}

body.snt-job-bar-active .snt-icon-rail,
body.snt-job-bar-active .snt-sidebar {
    top: var(--snt-job-bar-height, 40px);
}

body.snt-job-bar-active .alert {
    top: calc(var(--snt-job-bar-height, 40px) + 24px);
}

/* ---------- Modal "Escolha o formato da imagem" (Estagio 3 Character) ----------
   Cards reaproveitam .snt-welcome-card/.snt-welcome-cards (mesmo estilo da tela
   de boas-vindas) - aqui so o necessario pra virar selecionavel + a imagem de
   referencia (fig-formato-horizontal.png/fig-formato-vertical.png). */
#snt-image-format-modal .snt-image-format-modal-inner {
    max-width: 640px;
}

#snt-image-format-modal h3 {
    margin-bottom: 32px;
}

/* Mesmo espaco entre o ultimo campo e o botao "Next"/"Get Started" do
   cadastro (.snt-signup-field tem margin-bottom:18px, o botao la nao tem
   margin-top proprio) - aqui quem faz esse papel e' o bloco de cards. */
#snt-image-format-modal .snt-welcome-cards {
    margin-bottom: 18px;
}

.snt-image-format-card {
    box-sizing: border-box;
    border: 3px solid transparent;
    cursor: pointer;
}

.snt-image-format-card.is-selected {
    border-color: var(--purple);
}

/* Paleta roxa desse modal (era azul) - cards, titulo do modelo, dropdown e
   botao Continue, escopados a #snt-image-format-modal pra nao afetar as
   telas que reusam os mesmos componentes genericos (Home/.snt-welcome-screen,
   login/signup, Profile). */
#snt-image-format-modal .snt-welcome-card {
    background: var(--gray-soft);
}
#snt-image-format-modal .snt-welcome-card.is-selected {
    background: var(--grid-hover-gradient);
}
#snt-image-format-modal .snt-welcome-card h4 {
    color: var(--dark);
}
#snt-image-format-modal .snt-welcome-card p {
    color: var(--purple-dark);
}
#snt-image-format-modal .snt-media-col-label {
    color: var(--purple);
}
#snt-image-format-modal .snt-select {
    background-color: var(--btn-secondary-purple-bg);
    color: var(--btn-secondary-purple-text);
}
#snt-image-format-modal .snt-select-arrow {
    color: var(--btn-secondary-purple-text);
}
#snt-image-format-modal .snt-select:focus {
    border-color: var(--purple);
}
#snt-image-format-modal .snt-btn-login {
    background: var(--purple);
    transition: background 0.2s, transform 0.2s ease;
}
#snt-image-format-modal .snt-btn-login:hover {
    background: var(--purple-dark);
    transform: scale(1.04);
}

.snt-image-format-card-img {
    display: block;
    height: 110px;
    width: auto;
    margin: 0 auto 16px;
}

.snt-image-format-model-row {
    margin-bottom: 18px;
}

.snt-reorder-group {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.snt-reorder-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--white);
    color: var(--gray);
    cursor: pointer;
}

.snt-reorder-btn:hover:not(:disabled) {
    border-color: var(--blue-primary);
    color: var(--blue-primary);
}

.snt-reorder-btn:disabled {
    color: var(--gray-pale);
    cursor: default;
}

/* Setas de Ordem em Tipos de Animacao (views/character-group/index.php) -
   roxinhas mesmo em repouso, nao so no hover (pedido do usuario). */
.snt-character-group-row .snt-reorder-btn:not(:disabled) {
    border-color: var(--purple);
    color: var(--purple);
}

.snt-character-group-row .snt-reorder-btn:hover:not(:disabled) {
    border-color: var(--purple-dark);
    color: var(--purple-dark);
}

.snt-voice-admin-row-male {
    background: var(--blue-primary-light);
}

.snt-voice-admin-row-female {
    background: var(--pink-light);
}

.snt-voice-gender-gap td {
    height: 16px;
    padding: 0;
    border: none;
}

/* ---------- Character Type admin: thumbnail de foto na lista + preview no form ---------- */
.snt-character-type-thumb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.snt-character-type-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-surface);
    color: var(--gray-soft);
    font-size: 16px;
}

.snt-character-type-photo-preview {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--radius-md);
    display: block;
    margin-bottom: 8px;
}

/* ---------- Wizard generico de passos (troca de tela sem reload/AJAX) ----------
   Mesma tecnica de views/site/signup.php (.snt-signup-step/.active), so que com
   nome generico pra qualquer fluxo de passos futuro reaproveitar - primeiro uso
   real: "Nova Ideia" (Character), passos niche -> character -> ideas. */
.snt-wizard-step { display: none; }
.snt-wizard-step.active { display: block; }

/* Padding horizontal padrao (mesmo indent que o #top-bar contribuiria - ver
   views/_partials/top-bar.php) pros passos do wizard que nao usam esse
   partial (hideTitle=true) e ficariam encostados na borda sem isso. */
.snt-wizard-step-padded { padding: 24px 20px 0; }

/* ---------- Passo "Escolher personagem" (Character - Nova Ideia) ---------- */
.snt-character-picker {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-top: 24px;
}

.snt-character-picker-content {
    flex: 3;
    min-width: 0;
}

/* Nome da categoria (grupo) acima da grade de personagens - aparece tanto
   no estado padrao (uma secao por grupo em destaque, empilhadas) quanto no
   estado filtrado (categoria escolhida na lista da direita). */
.snt-character-picker-section-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--dark);
    margin: 0 0 16px;
}

/* Espaco entre as secoes empilhadas dos grupos em destaque
   (renderFeaturedSections(), estado padrao da tela). */
.snt-character-picker-section + .snt-character-picker-section {
    margin-top: 32px;
}

.snt-character-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

.snt-character-picker-card {
    background: var(--white);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s;
}

.snt-character-picker-card:hover {
    border-color: var(--blue-primary);
}

.snt-character-picker-card img,
.snt-character-picker-card-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 12px;
}

.snt-character-picker-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-surface);
    color: var(--gray-soft);
    font-size: 28px;
}

.snt-character-picker-card p {
    margin: 0;
    font-weight: 600;
    color: var(--dark);
    font-size: 14px;
}

.snt-character-picker-groups {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.snt-character-picker-group-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--gray);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.snt-character-picker-group-tab.active {
    border-color: var(--blue-primary);
    background: var(--blue-primary-light);
    color: var(--blue-primary-dark);
}

.snt-character-picker-group-count {
    background: var(--gray-surface);
    color: var(--gray);
    border-radius: var(--radius-full);
    padding: 2px 9px;
    font-size: 12px;
    font-weight: 700;
}

.snt-character-picker-group-tab.active .snt-character-picker-group-count {
    background: var(--white);
    color: var(--blue-primary-dark);
}

@media (max-width: 900px) {
    .snt-character-picker { flex-direction: column-reverse; }
    .snt-character-picker-groups { flex-direction: row; flex-wrap: wrap; min-width: 0; }
}

.snt-character-ideas-waiting {
    text-align: center;
    padding: 60px 0;
    font-size: 17px;
    color: var(--gray);
}

.snt-character-ideas-waiting i {
    margin-right: 8px;
    color: var(--blue-primary);
}

/* ---------- Formulario "Character Type" - grid: nome/tipo/regras a
   esquerda (regras ocupa a largura de nome+tipo+foto de rosto), foto de
   rosto ao lado de nome/tipo, corpo inteiro ocupando a altura toda a
   direita ---------- */
.snt-character-form-layout {
    display: grid;
    grid-template-columns: 260px 232px 232px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "nametype face  body"
        "rules    rules body";
    gap: 20px;
}

.snt-character-form-name-type-group { grid-area: nametype; }

.snt-character-form-name-input {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.snt-character-form-animation-type {
    margin-top: 16px;
}

.snt-character-form-animation-type .snt-signup-field { margin-bottom: 0; }

.snt-character-form-description-box {
    grid-area: rules;
    background: var(--gray-surface);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.snt-character-form-description-box .snt-signup-field {
    margin-bottom: 0;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.snt-character-form-description-box .snt-signup-field label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gray-soft);
    font-weight: 700;
    margin-bottom: 10px;
}

.snt-character-form-description-box textarea.form-control {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    height: auto;
    min-height: 0;
}

/* Generic tall-textarea override for .snt-signup-field forms - the base
   .form-control height:44px (line ~2061) is meant for single-line inputs
   and clips any textarea's rows attribute otherwise. */
.snt-textarea-tall textarea.form-control {
    height: auto;
    min-height: 260px;
}

.snt-character-form-upload-group {
    min-width: 0;
}

.snt-character-form-face-group { grid-area: face; }
.snt-character-form-body-group { grid-area: body; }

.snt-character-form-face-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.snt-character-form-face-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.snt-character-form-body-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.snt-character-form-body-photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 800px) {
    .snt-character-form-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "nametype"
            "face"
            "rules"
            "body";
    }
}

/* ---------- Dropzone generica de upload (drag-and-drop + progresso) ----------
   Ver sntEnableFileDropzone() em gimmyclues.js - componente 100% generico,
   primeiro uso real: fotos de rosto/corpo em character-type/form.php. */
.snt-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--white);
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.snt-dropzone.has-error {
    border-color: var(--red);
}

.snt-dropzone-idle,
.snt-dropzone-progress {
    width: 100%;
}

.snt-dropzone.is-dragover {
    border-color: var(--blue-primary);
    background: var(--blue-primary-light);
}

.snt-dropzone.has-file {
    border-style: solid;
    border-color: var(--green-success);
}

.snt-dropzone.is-uploading {
    cursor: default;
}

.snt-dropzone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 auto 12px;
    border-radius: var(--radius-md);
    background: var(--blue-primary-light);
    color: var(--blue-primary);
    font-size: 18px;
}

.snt-dropzone-label {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gray-soft);
}

.snt-dropzone-idle p {
    margin: 0;
    font-size: 14px;
    color: var(--gray);
}

.snt-dropzone-browse {
    color: var(--blue-primary);
    font-weight: 700;
    text-decoration: underline;
}

.snt-dropzone-hint {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    color: var(--gray-soft);
}

/* Lista de arquivos escolhidos na variante multi-arquivo (.snt-dropzone-multi) */
.snt-dropzone-filelist {
    width: 100%;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.snt-dropzone-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--gray-surface);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--dark);
    text-align: left;
}
.snt-dropzone-file-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snt-dropzone-file-remove {
    background: none;
    border: none;
    color: var(--gray-soft);
    cursor: pointer;
    font-size: 14px;
    padding: 2px;
}
.snt-dropzone-file-remove:hover { color: var(--red); }

.snt-dropzone-filename {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--green-success-dark);
}

.snt-dropzone-filename i {
    margin-right: 4px;
}

/* Nas dropzones de foto (rosto/corpo), a propria imagem em tela cheia ja
   comunica sucesso do upload - esconde o texto "enviado" pra nao sobrepor. */
.snt-character-form-body-photo.has-file .snt-dropzone-filename,
.snt-character-form-face-photo.has-file .snt-dropzone-filename {
    display: none;
}

.snt-dropzone-progress {
    text-align: left;
}

.snt-dropzone-progress-track {
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--gray-surface);
    overflow: hidden;
}

.snt-dropzone-progress-fill {
    height: 100%;
    width: 0;
    background: var(--blue-primary);
    transition: width 0.15s linear;
}

.snt-dropzone-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}

.snt-dropzone-progress-label {
    font-size: 13px;
    color: var(--gray);
}

.snt-dropzone-cancel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: var(--gray-surface);
    color: var(--gray);
    cursor: pointer;
    flex-shrink: 0;
}

.snt-dropzone-cancel-btn:hover {
    background: var(--red);
    color: var(--white);
}

/* ---------- Switch generico com label dentro (.snt-labeled-switch) ----------
   Customizavel sem CSS novo por USO, mas sempre via classe (nunca inline
   style, ver .snt-labeled-switch-danger abaixo como exemplo de variante):
   - cor desligado/ligado: --snt-switch-off / --snt-switch-on (redefinidas
     por uma classe modificadora tipo .snt-labeled-switch-danger)
   - texto desligado/ligado: data-label-off / data-label-on (no track)
   Primeiro uso real: "Private Character" na listagem de Character Type
   (views/character-type/index.php) - ver sntEnableAjaxToggle() em
   gimmyclues.js pro POST automatico ao mudar de estado. */
.snt-labeled-switch {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    --snt-switch-off: var(--gray-soft);
    --snt-switch-on:  var(--blue-primary);
}

/* Variante "perigo": desligado fica azul (estado normal/compartilhado),
   ligado fica vermelho (estado restritivo) - primeiro uso: "Private
   Character" na listagem de Character Type. Novas cores = nova variante
   pequena aqui, nunca inline style por instancia. */
.snt-labeled-switch-danger {
    --snt-switch-off: var(--blue-primary);
    --snt-switch-on:  var(--red);
}

.snt-labeled-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.snt-labeled-switch-track {
    position: relative;
    display: block;
    width: var(--snt-switch-track-width, 92px);
    /* Mesma altura renderizada de .btn-sm (padding 4px + font-size 14px * line-height
       1.5 + border 1px, dos dois lados) - pra ficar do mesmo tamanho dos botoes
       Editar/Excluir quando os dois aparecem lado a lado numa linha de tabela. */
    height: 31px;
    border-radius: var(--radius-full);
    background: var(--snt-switch-off);
    transition: background-color 0.2s;
    box-sizing: border-box;
    --snt-switch-thumb-size:       22px;
    --snt-switch-thumb-offset:     3px;
    --snt-switch-thumb-top-offset: 4.5px;
}

/* Variante com trilha mais larga, pra labels mais longos (ex: "Internal note"/
   "Public reply" na resposta de chamado) sem ficar abaixo dos 14px minimos. */
.snt-labeled-switch-lg {
    --snt-switch-track-width: 170px;
}
.snt-labeled-switch-lg .snt-labeled-switch-track::before,
.snt-labeled-switch-lg .snt-labeled-switch-track::after {
    font-size: 14px;
}

.snt-labeled-switch-track::before,
.snt-labeled-switch-track::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    white-space: nowrap;
}

/* Thumb fica a esquerda quando desligado - o label desligado ("Shared") fica
   do lado OPOSTO (direita), alinhado a propria borda direita da trilha -
   nunca perto/embaixo do thumb. */
.snt-labeled-switch-track::before {
    content: attr(data-label-off);
    right: 10px;
    text-align: right;
}

/* Thumb fica a direita quando ligado - o label ligado ("Private") fica do
   lado OPOSTO (esquerda), alinhado a propria borda esquerda da trilha. */
.snt-labeled-switch-track::after {
    content: attr(data-label-on);
    left: 10px;
    text-align: left;
}

.snt-labeled-switch-input:not(:checked) ~ .snt-labeled-switch-track::before {
    opacity: 1;
}

.snt-labeled-switch-input:checked ~ .snt-labeled-switch-track {
    background: var(--snt-switch-on);
}

.snt-labeled-switch-input:checked ~ .snt-labeled-switch-track::after {
    opacity: 1;
}

.snt-labeled-switch-input:focus-visible ~ .snt-labeled-switch-track {
    box-shadow: 0 0 0 3px var(--focus-ring-color);
}

.snt-labeled-switch-thumb {
    position: absolute;
    top: var(--snt-switch-thumb-top-offset);
    left: var(--snt-switch-thumb-offset);
    width: var(--snt-switch-thumb-size);
    height: var(--snt-switch-thumb-size);
    border-radius: 50%;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s;
}

.snt-labeled-switch-input:checked ~ .snt-labeled-switch-track .snt-labeled-switch-thumb {
    /* largura da trilha - thumb - as duas margens do thumb (esquerda/direita) */
    transform: translateX(calc(var(--snt-switch-track-width, 92px) - var(--snt-switch-thumb-size) - 2 * var(--snt-switch-thumb-offset)));
}

/* ---------- Personagem escolhido (foto + nome) no passo "ideas" da tela
   Nova Ideia - lembrete visual de qual personagem esta em uso a partir
   dali (views/character/index.php). ---------- */
.snt-character-chosen {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.snt-character-chosen-photo {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.snt-character-chosen-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-surface);
    color: var(--gray-soft);
    font-size: 36px;
}

.snt-character-chosen-name {
    font-size: 28px;
    font-weight: 800;
    color: var(--dark);
    margin: 0;
}

#counter-character-narration { margin-bottom: 20px; }

/* Billing (payment/billing) e Home (core/home) - mesmo gradiente da secao "plans" do website
   (website-gimmyclues/css/gimmyclues.css, .testimonials-one__bg--plans-gradient), nao mais a
   imagem greetings-bg (08/08/2026). Aplicado no main#snt-main (o painel arredondado que envolve
   TODO o container-fluid, titulo incluso), nao num card interno - senao vira uma caixa flutuando
   dentro do corpo da pagina. */
.snt-app-content main#snt-main:has(#snt-payment-plan-selection),
.snt-app-content main#snt-main:has(.snt-welcome-screen) {
    background-color: var(--white-soft);
    background-image: linear-gradient(90deg, #C0D9F2 0%, #CCCFF4 20%, #D4CAF5 28%, #E4C4E5 38%, #F4BCD5 50%, #F4CDD1 63%, #F2DDCA 75%, #EFDFDA 88%, #ECDFEA 100%);
}

/* Cards de plano (Starter/Pro/Creator Global) - mesma cor por plano dos
   cards .pricing-plans__card do website (uma cor fixa por posicao na fila,
   nao mais um gradiente escuro->claro). */
.snt-plan-tier-card {
    color: var(--white);
    border: none;
    border-radius: 24px;
    background-color: #01D686;
}
#snt-plan-tiers .snt-plan-tier-card:nth-child(2) { background-color: #048DF8; }
#snt-plan-tiers .snt-plan-tier-card:nth-child(3) { background-color: #F9B030; }
#snt-plan-tiers .snt-plan-tier-card:nth-child(4) { background-color: #001139; }

.snt-plan-tier-name {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    color: var(--white);
}

.snt-plan-tier-price {
    margin-top: 24px;
    font-size: 36px;
    font-weight: 800;
    color: var(--white);
}

.snt-plan-tier-price-note {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
}

.snt-plan-tier-features {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}
.snt-plan-tier-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--white);
}
.snt-plan-tier-features li + li { margin-top: 12px; }
.snt-plan-tier-features i {
    color: var(--white);
    font-size: 12px;
}

.snt-plan-tier-action {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* "Current plan" e' um pill laranja nao-clicavel (nao usa .btn-secondary-purple
   pra nao herdar hover/inchadinha - o pill nao faz nada, entao nao pode reagir
   a mouse over). */
.snt-plan-tier-current {
    display: inline-flex;
    align-items: center;
    padding: 11px 20px;
    border-radius: var(--radius-full);
    font-size: 15px;
    font-weight: 600;
    background-color: var(--orange-highlight);
    color: var(--white);
    cursor: default;
}

/* Assinar/Trocar de plano (botoes de verdade, ao contrario do pill "Current
   plan" acima) viram laranja no hover - mesmo padrao do .pricing-plans__btn
   do website (inchadinha ja vem do .btn-secondary-purple base). */
.snt-plan-tier-action .btn-secondary-purple:hover,
.snt-plan-tier-action .btn-secondary-purple:focus,
.snt-plan-tier-action .btn-secondary-purple:active {
    background-color: var(--orange-highlight);
    border-color: var(--orange-highlight);
    color: var(--white);
}