/* =====================================================================
   AUREUM - folha de estilo

   Direcao visual: tela cheia, sem moldura falsa de sistema operacional.
   O logo vira marca-d'agua gigante no fundo; o conteudo respira sobre ela.
   Ouro usado com parcimonia - fio, indicador, botao. Nada mais.

   Sumario
   1.  Tokens
   2.  Reset e base
   3.  Marca-d'agua e ambiente
   4.  Painel (telas de acesso)
   5.  Marca e titulos
   6.  Formularios
   7.  Botoes
   8.  Seletor de perfil
   9.  Avisos
   10. Codigo 2FA
   11. Shell do painel (rail + topbar)
   12. Cartoes e tabela
   13. Utilitarios
   14. Responsivo
   ===================================================================== */

/* ------------------------------------------------------------------
   0. Tipografia

   Inter variavel, hospedada no proprio projeto (assets/fonts). Nenhuma
   requisicao externa: a CSP so libera 'self' e o projeto nao usa CDN.
   Um unico arquivo cobre todos os pesos de 100 a 900.
   ------------------------------------------------------------------ */
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-variable.woff2") format("woff2");
}

@font-face {
    font-family: "Inter Variable";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-variable-italic.woff2") format("woff2");
}

/* ------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------ */
:root {
    --gold: #f5c518;
    --gold-soft: #ffd75e;
    --gold-deep: #d9ab08;

    /* Preto levemente frio: separa melhor as camadas que o cinza puro */
    --ink-1000: #060608;
    --ink-900: #0a0a0d;
    --ink-850: #101014;
    --ink-800: #16161b;

    --white: #ffffff;
    --text: #ececed;
    --text-muted: #9b9ba4;
    --text-dim: #64646e;

    --line: rgba(255, 255, 255, 0.06);
    --line-strong: rgba(255, 255, 255, 0.11);
    --fill: rgba(255, 255, 255, 0.04);
    --fill-hover: rgba(255, 255, 255, 0.07);

    --ok: #4fb87c;
    --danger: #e2685a;

    --r-xl: 20px;
    --r-lg: 14px;
    --r-md: 10px;
    --r-sm: 8px;

    /* Inter primeiro; o resto so entra se o arquivo local falhar */
    --font: "Inter Variable", "Segoe UI Variable Text", "Segoe UI",
            "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console",
                 "Courier New", monospace;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);

    --shell-w: 1180px;
    --topbar-h: 62px;
    --foot-h: 32px;
}

/* ------------------------------------------------------------------
   2. Reset e base
   ------------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    background: var(--ink-1000);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Alternativas de desenho da Inter: 'a' e 'g' de andar unico, 'l' com
       cauda e '1' sem serifa. Deixa o texto mais limpo em tela. */
    font-optical-sizing: auto;
    font-feature-settings: "cv02" 1, "cv03" 1, "cv04" 1, "cv11" 1;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: var(--gold);
    text-decoration: none;
    transition: color 0.15s var(--ease);
}

a:hover {
    color: var(--gold-soft);
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection {
    background: rgba(245, 197, 24, 0.26);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
    background-clip: content-box;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ------------------------------------------------------------------
   3. Marca-d'agua e ambiente

   O logo ocupa a tela inteira atras do conteudo. O filtro zera a cor
   original e devolve tudo em branco; a opacidade minima deixa apenas
   o desenho insinuado, funcionando como textura.
   ------------------------------------------------------------------ */
.watermark {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: grid;
    place-items: center;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(900px 520px at 50% -10%, rgba(245, 197, 24, 0.06), transparent 68%),
        var(--ink-1000);
}

.watermark img {
    width: min(98vh, 32.5vw);
    max-width: none;
    filter: brightness(0) invert(1);
    opacity: 0.025;
}

/* ------------------------------------------------------------------
   4. Painel (telas de acesso)
   ------------------------------------------------------------------ */
.page {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.auth {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 48px 24px;
}

.panel {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 40px 38px 34px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: 0 30px 80px -32px rgba(0, 0, 0, 0.9);
    animation: rise 0.4s var(--ease) both;
}

/* Fio dourado na aresta superior: assinatura da marca, sem enfeite */
.panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 26px;
    right: 26px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.55;
}

.panel--wide {
    max-width: 520px;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

/* ------------------------------------------------------------------
   5. Marca e titulos
   ------------------------------------------------------------------ */
.brand {
    display: flex;
    justify-content: center;
    margin-bottom: 26px;
}

.brand__logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

.title {
    margin: 0 0 6px;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--white);
}

.title--sm {
    font-size: 15px;
    letter-spacing: 0;
}

.subtitle {
    margin: 0 0 26px;
    font-size: 14px;
    color: var(--text-muted);
}

.subtitle--tight {
    margin-bottom: 14px;
}

.eyebrow {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.divider {
    height: 1px;
    margin: 28px 0;
    background: var(--line);
    border: 0;
}

/* ------------------------------------------------------------------
   6. Formularios
   ------------------------------------------------------------------ */
.form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field__label {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text-muted);
}

.field__control {
    position: relative;
    display: flex;
    align-items: center;
}

.field__input {
    width: 100%;
    height: 48px;
    padding: 0 15px;
    font: inherit;
    font-size: 15px;
    color: var(--text);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
    appearance: none;
}

.field__input::placeholder {
    color: var(--text-dim);
}

.field__input:hover {
    background: rgba(0, 0, 0, 0.36);
}

.field__input:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.42);
    border-color: var(--gold);
}

/* Preenchimento automatico do navegador nao pode voltar ao azul padrao */
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px #0d0d10 inset;
    caret-color: var(--text);
}

/* Campo com botao de mostrar senha reserva espaco a direita */
.field__control--action .field__input {
    padding-right: 48px;
}

.field__toggle {
    position: absolute;
    right: 9px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
}

.field__toggle:hover {
    color: var(--text);
    background: var(--fill);
}

.field__toggle svg {
    width: 17px;
    height: 17px;
}

/* Indicador de forca: quatro blocos, nao uma barra continua */
.strength {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.strength__bar {
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    transition: background 0.25s var(--ease);
}

.strength[data-level="1"] .strength__bar:nth-child(-n + 1) { background: var(--danger); }
.strength[data-level="2"] .strength__bar:nth-child(-n + 2) { background: #d9a03f; }
.strength[data-level="3"] .strength__bar:nth-child(-n + 3) { background: var(--gold); }
.strength[data-level="4"] .strength__bar               { background: var(--ok); }

/* ------------------------------------------------------------------
   7. Botoes
   ------------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 22px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;

    /* Requisito do projeto: texto preto sobre o amarelo */
    color: #000000;

    background: var(--gold);
    border: 0;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background 0.15s var(--ease), transform 0.12s var(--ease),
                opacity 0.15s var(--ease);
}

.btn:hover {
    /* Fixa a cor: sem isto o a:hover global tingiria o texto do botao */
    color: #000000;
    background: var(--gold-soft);
}

.btn:active {
    background: var(--gold-deep);
    transform: translateY(1px);
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.btn--block {
    width: 100%;
}

.btn--ghost {
    color: var(--text);
    background: var(--fill);
    border: 1px solid var(--line);
}

.btn--ghost:hover {
    color: var(--white);
    background: var(--fill-hover);
    border-color: var(--line-strong);
}

.btn--ghost:active {
    background: var(--fill);
}

.btn--sm {
    height: 36px;
    padding: 0 15px;
    font-size: 13px;
}

/* Botao quadrado, so com o icone. O rotulo vive no aria-label e no title. */
.btn--icone {
    width: 36px;
    height: 36px;
    padding: 0;
    flex: none;
}

.btn--icone svg {
    width: 17px;
    height: 17px;
}

.btn--confirmado {
    color: var(--ok);
    border-color: rgba(79, 184, 124, 0.45);
}

.btn-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-row--center {
    justify-content: center;
}

/* ------------------------------------------------------------------
   8. Seletor de perfil - cartoes empilhados, nao abas apertadas
   ------------------------------------------------------------------ */
.choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.choice input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.choice__face {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-size: 13.5px;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 0.15s var(--ease), background 0.15s var(--ease),
                color 0.15s var(--ease);
}

/* Ponto que acende quando o perfil esta escolhido */
.choice__face::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    transition: background 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.choice:hover .choice__face {
    color: var(--text);
    border-color: var(--line-strong);
    background: var(--fill);
}

.choice input:checked ~ .choice__face {
    color: var(--white);
    border-color: rgba(245, 197, 24, 0.55);
    background: rgba(245, 197, 24, 0.07);
}

.choice input:checked ~ .choice__face::before {
    background: var(--gold);
    box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.18);
}

.choice input:focus-visible ~ .choice__face {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.choice__lock {
    margin-left: auto;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* Chave de autorizacao: aparece conforme o perfil escolhido */
.authkey {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: -18px;
    transition: grid-template-rows 0.3s var(--ease), opacity 0.22s var(--ease),
                margin 0.3s var(--ease);
}

.authkey > div {
    overflow: hidden;
    min-height: 0;
}

.authkey.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 0;
}

/* ------------------------------------------------------------------
   9. Avisos
   ------------------------------------------------------------------ */
.alert {
    display: flex;
    gap: 10px;
    padding: 13px 15px;
    margin-bottom: 22px;
    font-size: 13.5px;
    line-height: 1.5;
    border-radius: var(--r-md);
    border: 1px solid transparent;
}

.alert::before {
    content: "";
    flex: none;
    width: 3px;
    margin: 1px 0;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.85;
}

.alert ul {
    margin: 0;
    padding-left: 18px;
}

.alert--error {
    color: #f0aca2;
    background: rgba(226, 104, 90, 0.09);
    border-color: rgba(226, 104, 90, 0.25);
}

.alert--success {
    color: #a4ddbe;
    background: rgba(79, 184, 124, 0.09);
    border-color: rgba(79, 184, 124, 0.25);
}

.alert--info {
    color: #f0dca4;
    background: rgba(245, 197, 24, 0.08);
    border-color: rgba(245, 197, 24, 0.24);
}

.alert.is-leaving {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

/* ------------------------------------------------------------------
   10. Codigo 2FA
   ------------------------------------------------------------------ */
.code {
    display: flex;
    justify-content: center;
    gap: 9px;
}

.code__digit {
    width: 50px;
    height: 62px;
    font-family: var(--font-mono);
    font-size: 25px;
    font-weight: 500;
    text-align: center;
    color: var(--white);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
    appearance: none;
}

.code__digit:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.45);
    border-color: var(--gold);
}

.code__digit.is-filled {
    color: var(--gold);
    border-color: var(--line-strong);
}

.countdown {
    margin-top: 14px;
    font-size: 12.5px;
    text-align: center;
    color: var(--text-dim);
}

/* QR Code: fundo branco obrigatorio, senao o leitor nao enxerga */
.qr {
    display: grid;
    place-items: center;
    padding: 14px;
    margin: 0 auto;
    width: fit-content;
    background: #ffffff;
    border-radius: var(--r-lg);
    box-shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.85);
}

.qr svg {
    display: block;
}

/* Alternativa dobravel: a chave digitada, para quem nao usa a camera */
.fallback {
    margin-top: 18px;
    border-top: 1px solid var(--line);
    padding-top: 16px;
}

.fallback > summary {
    font-size: 12.5px;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
    text-align: center;
}

.fallback > summary::-webkit-details-marker {
    display: none;
}

.fallback > summary:hover {
    color: var(--gold);
}

.fallback[open] > summary {
    margin-bottom: 14px;
    color: var(--text);
}

/* Cartao da chave secreta */
.secret {
    padding: 18px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    text-align: center;
}

.secret__label {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.secret__value {
    margin: 0 0 16px;
    font-family: var(--font-mono);
    font-size: 16px;
    letter-spacing: 0.14em;
    color: var(--gold);
    word-break: break-all;
}

.steps {
    margin: 0;
    padding-left: 20px;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--text-muted);
}

.steps strong {
    color: var(--text);
    font-weight: 500;
}

/* ------------------------------------------------------------------
   11. Shell do painel - barra de navegacao no topo
   ------------------------------------------------------------------ */
.shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Barra de navegacao: flutua centralizada, descolada do topo, e leva
   apenas os links das secoes. Nada de marca ou dados de usuario aqui. */
.navbar {
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    justify-content: center;
    padding: 14px 20px 4px;
}

.navbar__pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 6px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.95);
    overflow-x: auto;
    scrollbar-width: none;
}

.navbar__pill::-webkit-scrollbar {
    display: none;
}
.navbar__pill.nav--oculto {
    display: none;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

/* O icone herda a cor do item, entao acompanha hover e estado ativo */
.nav-item svg {
    width: 15px;
    height: 15px;
    flex: none;
}

.nav-item:hover {
    background: var(--fill-hover);
    color: var(--white);
}

.nav-item.is-active {
    /* Texto preto sobre o amarelo */
    color: #000000;
    background: var(--gold);
}

.nav-item.is-active:hover {
    background: var(--gold-soft);
    color: #000000;
}

.avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 12.5px;
    font-weight: 600;

    /* Texto preto sobre o amarelo */
    color: #000000;

    background: var(--gold);
}

/* Identificacao fixa na borda de baixo. O rodape so posiciona; o fundo e
   os cantos arredondados ficam na propria etiqueta do usuario. */
.page-foot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}

.page-foot__user {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 5px 10px;
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    transition: background 0.15s var(--ease);
}

.page-foot__user:hover {
    background: rgba(255, 255, 255, 0.075);
}

/* A etiqueta do rodape usa metade do tamanho padrao; o avatar precisa de
   regra propria para nao encolher o das mensagens do chat. */
.page-foot__user .avatar {
    width: 17px;
    height: 17px;
    font-size: 9px;
}

.page-foot__name {
    font-size: 11px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
}

.page-main {
    flex: 1;
    width: 100%;
    max-width: var(--shell-w);
    margin: 0 auto;
    /* A folga de baixo reserva o espaco do rodape fixo */
    padding: 34px 24px calc(var(--foot-h) + 28px);
}

.content__head {
    margin-bottom: 26px;
}

/* Pagina ainda sem conteudo definido */
.placeholder {
    display: grid;
    place-items: center;
    gap: 6px;
    padding: 64px 24px;
    text-align: center;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-lg);
    color: var(--text-dim);
}

.placeholder__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.placeholder p {
    margin: 0;
    font-size: 13.5px;
    max-width: 46ch;
}

/* ------------------------------------------------------------------
   12. Cartoes e tabela
   ------------------------------------------------------------------ */
.grid {
    display: grid;
    gap: 12px;
}

.grid--stats {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.card {
    padding: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: border-color 0.18s var(--ease);
}

.card:hover {
    border-color: var(--line-strong);
}

.card__label {
    margin: 0 0 8px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.card__value {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--white);
}

.card__note {
    margin: 7px 0 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

.card--hero {
    display: flex;
    align-items: center;
    gap: 18px;
}

.card--hero img {
    width: 46px;
    height: 46px;
    flex: none;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    vertical-align: middle;
}

.badge--gold {
    /* Texto preto sobre o amarelo */
    color: #000000;
    background: var(--gold);
}

.badge--ok {
    color: #a4ddbe;
    background: rgba(79, 184, 124, 0.13);
}


.badge--perigo {
    color: #f08080;
    background: rgba(220, 80, 80, 0.13);
}

.form-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.badge--muted {
    color: var(--text-muted);
    background: var(--fill);
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    /* Numeros de mesma largura: as colunas de IP e data param de dancar */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.table th {
    padding: 11px 16px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.022);
    border-bottom: 1px solid var(--line);
}

.table td {
    padding: 13px 16px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--line);
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.018);
}

.table__event {
    color: var(--text);
    font-weight: 500;
}

.table__empty {
    padding: 34px;
    text-align: center;
    color: var(--text-dim);
}

/* ------------------------------------------------------------------
   12b. Publi - portal de noticias
   ------------------------------------------------------------------ */
.content__head--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.posts {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.post {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

/* Miniatura a esquerda, quadrada e recortada para nao deformar */
.post__miniatura {
    flex: none;
    display: block;
    width: 132px;
    height: 132px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.post__miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s var(--ease);
}

.post__miniatura:hover img {
    transform: scale(1.05);
}

.post__conteudo {
    flex: 1;
    min-width: 0;
}

.post__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.post__identificacao {
    min-width: 0;
}

/* ---- Menu de tres pontos ---- */
.menu {
    position: relative;
    flex: none;
}

.menu__gatilho {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--r-sm);
    color: var(--text-dim);
    cursor: pointer;
    list-style: none;
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
}

.menu__gatilho::-webkit-details-marker {
    display: none;
}

.menu__gatilho svg {
    width: 17px;
    height: 17px;
}

.menu__gatilho:hover,
.menu[open] .menu__gatilho {
    color: var(--white);
    background: var(--fill);
}

.menu__painel {
    position: absolute;
    top: 35px;
    right: 0;
    z-index: 15;
    min-width: 150px;
    padding: 5px;
    background: var(--ink-800);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.95);
    animation: fade-in 0.14s var(--ease) both;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

.menu__form {
    margin: 0;
}

.menu__item {
    display: block;
    width: 100%;
    padding: 8px 11px;
    font: inherit;
    font-size: 13px;
    text-align: left;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.menu__item:hover {
    color: var(--white);
    background: var(--fill);
}

.menu__item--perigo:hover {
    color: #f0aca2;
    background: rgba(226, 104, 90, 0.12);
}

/* ---- Curtir e comentar ---- */
.post__rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.reacao {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dim);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.reacao::-webkit-details-marker {
    display: none;
}

.reacao svg {
    width: 15px;
    height: 15px;
}

.reacao:hover {
    color: var(--text);
    border-color: var(--line-strong);
}

.reacao--ativa {
    color: var(--gold);
    border-color: rgba(245, 197, 24, 0.45);
    background: rgba(245, 197, 24, 0.08);
}

.comentarios {
    flex: 1 1 auto;
    min-width: 0;
}

.comentarios__lista {
    margin-top: 12px;
}

.comentarios__vazio {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text-dim);
}

.comentario {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}

.comentario__avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text);
    background: var(--fill-hover);
}

.comentario__corpo {
    flex: 1;
    min-width: 0;
}

.comentario__cabecalho {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 2px;
}

.comentario__autor {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.comentario__quando {
    font-size: 11px;
    color: var(--text-dim);
}

.comentario__texto {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.comentario__remover {
    flex: none;
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 17px;
    line-height: 1;
    color: var(--text-dim);
    background: transparent;
    border: 0;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
}

.comentario__remover:hover {
    color: #f0aca2;
    background: rgba(226, 104, 90, 0.12);
}

.comentarios__form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.comentarios__form .field__input {
    height: 40px;
    font-size: 13.5px;
}

.comentarios__form .btn {
    flex: none;
}

/* ------------------------------------------------------------------
   12f. Editores - formularios de publicacao
   ------------------------------------------------------------------ */
.editor {
    max-width: 780px;
    gap: 0;
}

.editor__cartao {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 26px 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.editor__secao {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.editor__legenda {
    margin: 0;
    padding-bottom: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    border-bottom: 1px solid var(--line);
}

.editor__dupla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

/* Barra de acoes, separada do conteudo */
.editor__acoes {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.editor__acoes .btn-sobra {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--text-dim);
}

/* ---- Campo de arquivo com previa ---- */
.campo-arquivo {
    position: relative;
}

/* O input continua acessivel pelo teclado, so nao aparece */
.campo-arquivo input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.campo-arquivo__area {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}

.campo-arquivo__area:hover {
    border-color: rgba(245, 197, 24, 0.5);
    background: rgba(0, 0, 0, 0.36);
}

.campo-arquivo input[type="file"]:focus-visible + .campo-arquivo__area {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.campo-arquivo.tem-arquivo .campo-arquivo__area {
    border-style: solid;
    border-color: rgba(245, 197, 24, 0.45);
}

.campo-arquivo__previa {
    display: grid;
    place-items: center;
    flex: none;
    width: 60px;
    height: 60px;
    overflow: hidden;
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--r-sm);
}

.campo-arquivo__previa svg {
    width: 22px;
    height: 22px;
}

.campo-arquivo__previa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.campo-arquivo__texto {
    min-width: 0;
}

.campo-arquivo__nome {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    overflow-wrap: anywhere;
}

.campo-arquivo.tem-arquivo .campo-arquivo__nome {
    color: var(--gold);
}

.campo-arquivo__dica {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-dim);
}

/* ---- Imagem ja publicada, na edicao ---- */
.imagem-atual {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.imagem-atual img {
    width: 74px;
    height: 74px;
    flex: none;
    object-fit: cover;
    border-radius: var(--r-sm);
}

.imagem-atual__lado {
    min-width: 0;
}

.imagem-atual__rotulo {
    display: block;
    margin-bottom: 8px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.imagem-atual__remover {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
}

.imagem-atual__remover input {
    accent-color: var(--gold);
}

.post__title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--white);
}

.post__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    font-size: 12.5px;
    color: var(--text-dim);
}

.post__author {
    font-weight: 500;
    color: var(--gold);
}

.post__editado {
    font-style: italic;
}

.post__body {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.btn--perigo:hover {
    color: #f0aca2;
    border-color: rgba(226, 104, 90, 0.45);
    background: rgba(226, 104, 90, 0.1);
}

/* Area de texto do editor */
.field__input--area {
    height: auto;
    padding: 14px 15px;
    line-height: 1.7;
    resize: vertical;
    min-height: 220px;
}

.editor {
    max-width: 760px;
}

/* ------------------------------------------------------------------
   12d. Screen - cards das paginas publicadas
   ------------------------------------------------------------------ */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.cartao {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.cartao:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
}

.cartao__alvo {
    display: block;
    color: inherit;
}

.cartao__alvo:hover {
    color: inherit;
}

/* Miniatura da pagina: render reduzido, sem interacao e sem scripts */
.cartao__previa {
    display: flex;
    width: 100%;
    aspect-ratio: 9 / 16;
    background: #000;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

.cartao__previa iframe {
    display: block;
    width: 100%;
    border: 0;
    pointer-events: none;
    /* align-items: stretch (default) faz o iframe preencher a altura do flex container */
}

.cartao__corpo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px 12px;
    flex: 1;
}

.cartao__titulo {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.cartao__descricao {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-muted);
}

.cartao__meta {
    display: none;
}

.cartao__menu {
    position: absolute;
    top: 8px;
    right: 8px;
}

.cartao__menu .menu__gatilho {
    background: rgba(6, 6, 8, 0.72);
    backdrop-filter: blur(6px);
    color: var(--text);
}

/* Palco: a pagina publicada, em tamanho de leitura */
.palco {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.palco__quadro {
    display: block;
    width: 100%;
    height: calc(100vh - 300px);
    min-height: 420px;
    border: 0;
}

@supports (height: 100dvh) {
    .palco__quadro {
        height: calc(100dvh - 300px);
    }
}

.field__input--codigo {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.65;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}

/* ------------------------------------------------------------------
   12e. Downloads
   ------------------------------------------------------------------ */
.baixaveis {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.baixavel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: border-color 0.18s var(--ease), transform 0.18s var(--ease),
                box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}

/* Fio dourado que surge na borda esquerda ao passar o mouse */
.baixavel::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--gold);
    opacity: 0;
    transition: opacity 0.18s var(--ease);
}

.baixavel:hover {
    transform: translateY(-2px);
    border-color: rgba(245, 197, 24, 0.30);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.85);
}

.baixavel:hover::before {
    opacity: 0.7;
}

/* Logo e icone compartilham a mesma moldura */
.baixavel__logo,
.baixavel__icone {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
}

.baixavel__logo {
    display: block;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--line-strong);
}

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

.baixavel__icone {
    display: grid;
    place-items: center;
    color: var(--gold);
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(245, 197, 24, 0.16), rgba(245, 197, 24, 0.04));
    border: 1px solid rgba(245, 197, 24, 0.22);
}

.baixavel__icone svg {
    width: 26px;
    height: 26px;
}

.baixavel__corpo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.baixavel__nome {
    margin: 0;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.baixavel__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 12px;
    color: var(--text-dim);
}

.baixavel__numeros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.contador {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    font-size: 11.5px;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.contador svg {
    width: 13px;
    height: 13px;
    color: var(--text-dim);
}

.contador strong {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--gold);
}

.baixavel__acoes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex: none;
}

/* Em telas estreitas as acoes descem para uma linha propria */
@media (max-width: 560px) {
    .baixavel {
        flex-wrap: wrap;
    }

    .baixavel__acoes {
        width: 100%;
        justify-content: flex-end;
        margin-top: 4px;
        padding-top: 12px;
        border-top: 1px solid var(--line);
    }
}

/* ---- Pagina publica do pacote ----
   Estrutura de ficha de aplicativo: icone grande, linha de numeros
   divididos, acao em destaque e detalhes abaixo. */
.app {
    width: 100%;
    max-width: 560px;
    padding: 30px 32px 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: 0 30px 80px -32px rgba(0, 0, 0, 0.9);
    animation: rise 0.4s var(--ease) both;
}

.app__topo {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 26px;
}

.app__icone {
    flex: none;
    width: 96px;
    height: 96px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--line);
    /* Cantos arredondados largos, como icone de aplicativo */
    border-radius: 22px;
}

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

.app__identidade {
    min-width: 0;
}

.app__nome {
    margin: 0 0 5px;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--white);
    overflow-wrap: anywhere;
}

.app__editor {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gold);
}

.app__marcador {
    display: inline-block;
    margin: 0;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    background: var(--fill);
    border-radius: 999px;
}

/* Faixa de numeros separados por fios verticais */
.numeros {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 0 24px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.numeros__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    text-align: center;
}

.numeros__item + .numeros__item {
    border-left: 1px solid var(--line);
}

.numeros dt {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--white);
}

.numeros dd {
    margin: 0;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.app__acoes {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 26px;
}

.app__bloco {
    margin-bottom: 22px;
}

.app__subtitulo {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--white);
}

/* Aviso de instalacao fora da loja */
.aviso {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    padding: 14px 16px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-muted);
    background: rgba(245, 197, 24, 0.06);
    border: 1px solid rgba(245, 197, 24, 0.2);
    border-radius: var(--r-md);
}

.aviso svg {
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    color: var(--gold);
}

.aviso strong {
    color: var(--text);
    font-weight: 600;
}

.ficha {
    margin: 0;
    border-top: 1px solid var(--line);
}

.ficha__linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 2px;
    border-bottom: 1px solid var(--line);
}

.ficha dt {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.ficha dd {
    margin: 0;
    font-size: 13.5px;
    text-align: right;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------
   12c. Chat global
   ------------------------------------------------------------------ */
/* O bloco ocupa a altura que sobra da janela. Sem isto o campo de escrita
   escorregava para baixo da borda, porque a lista tinha altura propria e
   somava com o cabecalho, a barra e o rodape fixo. */
.chat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: calc(100vh - 208px);
    min-height: 320px;
    max-height: 900px;
}

@supports (height: 100dvh) {
    .chat {
        height: calc(100dvh - 208px);
    }
}

/* Sem titulo, o cabecalho desta tela encosta mais no chat */
.chat-topo {
    align-items: center;
    margin-bottom: 12px;
}

.chat__estado {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.chat__estado--ok {
    color: var(--ok);
}

.chat__estado--erro {
    color: var(--danger);
}

.chat__avisos:empty {
    display: none;
}

.chat__avisos .alert {
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

/* A moldura envolve conversa e campo de escrita: os dois viram um bloco so */
.chat__quadro {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

/* Wallpaper da conversa.
   Feito so com gradientes: a CSP nao permite imagem externa, e um padrao
   desenhado em CSS nao custa requisicao nem pesa no carregamento.
   Duas manchas de cor ao fundo e uma trama cruzada bem fraca por cima. */
.chat__janela {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Cresce para preencher o quadro; min-height 0 e o que permite encolher
       dentro do flex em vez de estourar para fora. */
    flex: 1;
    min-height: 0;
    padding: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;

    background-color: #08080b;
    background-image:
        radial-gradient(circle at 16% 20%, rgba(245, 197, 24, 0.06), transparent 44%),
        radial-gradient(circle at 84% 80%, rgba(108, 128, 255, 0.045), transparent 44%),
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.014) 0 1.5px, transparent 1.5px 13px),
        repeating-linear-gradient(-45deg,
            rgba(255, 255, 255, 0.014) 0 1.5px, transparent 1.5px 13px);
}

/* Sobre a trama, a mensagem precisa de um fundo proprio para continuar
   legivel; sem isso o texto disputa espaco com o padrao. */
.tela-chat .msg:hover {
    background: rgba(255, 255, 255, 0.04);
}

.tela-chat .msg__texto {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* O fundo da propria pagina ganha profundidade nesta tela */
.tela-chat .watermark {
    background:
        radial-gradient(760px 420px at 12% 0%, rgba(245, 197, 24, 0.07), transparent 62%),
        radial-gradient(700px 480px at 88% 100%, rgba(108, 128, 255, 0.055), transparent 62%),
        var(--ink-1000);
}

.tela-chat .watermark img {
    opacity: 0.018;
}

.chat__vazio {
    margin: auto;
    font-size: 13.5px;
    color: var(--text-dim);
}

.msg {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    padding: 3px 4px;
}

/* Minha mensagem: avatar e balao vao para a direita (estilo WhatsApp) */
.msg--propria {
    flex-direction: row-reverse;
}

/* Na minha propria mensagem o avatar e dispensavel */
.msg--propria .msg__avatar {
    display: none;
}

.msg__avatar {
    display: block;
    flex: none;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--ink-800);
}

.msg__avatar img,
.msg__avatar svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback quando o avatar da biblioteca nao carrega: inicial no circulo */
.msg__avatar--texto {
    display: grid;
    place-items: center;
    font-size: 12.5px;
    font-weight: 600;
    color: #000000;
    background: var(--gold);
}

/* Balao da mensagem */
.msg__corpo {
    min-width: 0;
    flex: 0 1 auto;
    max-width: 74%;
    padding: 7px 12px 8px;
    background: var(--ink-800);
    border: 1px solid var(--line);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
}

.msg--propria .msg__corpo {
    background: rgba(245, 197, 24, 0.13);
    border-color: rgba(245, 197, 24, 0.28);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 4px;
}

.msg__cabecalho {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 3px;
}

/* Do lado direito, o cabecalho tambem se inverte */
.msg--propria .msg__cabecalho {
    flex-direction: row-reverse;
}

/* Na minha propria mensagem o nome e redundante */
.msg--propria .msg__autor {
    display: none;
}

.msg__autor {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--white);
}

.msg__cargo {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.msg__hora,
.msg__editado {
    font-size: 11px;
    color: var(--text-dim);
}

.msg__editado {
    font-style: italic;
}

.msg__texto {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.msg__texto--removido {
    font-style: italic;
    color: var(--text-dim);
}

.msg--apagada:hover {
    background: transparent;
}

/* Acoes aparecem ao passar o mouse, para nao poluir a conversa */
.msg__acoes {
    display: flex;
    gap: 4px;
    margin-top: 5px;
    opacity: 0;
    transition: opacity 0.15s var(--ease);
}

.msg:hover .msg__acoes,
.msg:focus-within .msg__acoes {
    opacity: 1;
}

.msg__acao {
    padding: 3px 9px;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.msg__acao:hover {
    color: var(--white);
    border-color: var(--line-strong);
}

.msg__acao[data-acao="banir"]:hover,
.msg__acao[data-acao="apagar"]:hover {
    color: #f0aca2;
    border-color: rgba(226, 104, 90, 0.45);
}

.msg__editor {
    width: 100%;
    margin-top: 4px;
}

.chat__compositor {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex: none;
    padding: 10px;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.02);
}

.chat__compositor--oculto {
    display: none;
}

.chat__entrada {
    flex: 1;
    min-height: 42px;
    max-height: 140px;
    padding: 11px 14px;
    font: inherit;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--text);
    background: transparent;
    border: 0;
    border-radius: var(--r-md);
    resize: none;
}

.chat__entrada::placeholder {
    color: var(--text-dim);
}

.chat__entrada:focus {
    outline: none;
}

/* Botao de enviar: so o icone */
.chat__botao {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: var(--r-md);

    /* Texto preto sobre o amarelo */
    color: #000000;

    background: var(--gold);
    cursor: pointer;
    transition: background 0.15s var(--ease), transform 0.12s var(--ease);
}

.chat__botao svg {
    width: 18px;
    height: 18px;
}

.chat__botao:hover {
    background: var(--gold-soft);
}

.chat__botao:active {
    background: var(--gold-deep);
    transform: translateY(1px);
}

/* Dentro do quadro o bloqueio ocupa o lugar do campo de escrita */
.chat__quadro .chat__bloqueio {
    flex: none;
    border: 0;
    border-top: 1px solid rgba(226, 104, 90, 0.25);
    border-radius: 0;
}

.chat__bloqueio {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px;
    font-size: 13.5px;
    color: #f0aca2;
    background: rgba(226, 104, 90, 0.09);
    border: 1px solid rgba(226, 104, 90, 0.25);
    border-radius: var(--r-md);
}

.chat__bloqueio--oculto,
.chat__erro--oculto,
.modal__erro--oculto {
    display: none;
}

.chat__erro {
    margin: 0;
    font-size: 13px;
    color: #f0aca2;
}

/* Caixa de moderacao */
.modal {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
}

.modal::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(1px);
}

.modal__caixa {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(420px, 92vw);
    padding: 26px;
    background: var(--ink-850);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-xl);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.95);
}

.modal__titulo {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--white);
}

.modal__alvo {
    margin: -8px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.modal__msg {
    margin: 0;
    font-size: 14px;
    color: var(--text);
    line-height: 1.5;
}

.modal__acoes {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
}

.modal__erro {
    margin: 0;
    font-size: 13px;
    color: #f0aca2;
}

/* ------------------------------------------------------------------
   13. Utilitarios
   ------------------------------------------------------------------ */
.text-center { text-align: center; }
.text-muted  { color: var(--text-muted); }
.text-dim    { color: var(--text-dim); }
.text-gold   { color: var(--gold); }
.mt-8   { margin-top: 8px; }
.mt-16  { margin-top: 16px; }
.mt-24  { margin-top: 24px; }
.mb-0   { margin-bottom: 0; }
.mb-16  { margin-bottom: 16px; }
.mb-24  { margin-bottom: 24px; }
.mb-32  { margin-bottom: 32px; }

/* Rodape do formulario: texto discreto, link pequeno e trabalhado */
.form-footer {
    margin: 26px 0 0;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-dim);
}

.form-footer a {
    position: relative;
    display: inline-block;
    padding-bottom: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Sublinhado que cresce do centro no hover */
.form-footer a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--gold);
    transform: translateX(-50%);
    transition: width 0.25s var(--ease);
}

.form-footer a:hover {
    color: var(--gold);
}

.form-footer a:hover::after {
    width: 100%;
}

.inline-form {
    display: block;
}

.error-code {
    margin: 0;
    font-size: 72px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--gold);
}

/* ------------------------------------------------------------------
   14. Responsivo
   ------------------------------------------------------------------ */
@media (max-width: 940px) {
    .navbar {
        padding: 20px 14px 4px;
        justify-content: flex-start;
    }

    .page-main {
        padding: 26px 16px 40px;
    }
}

@media (max-width: 620px) {
    .nav-item {
        gap: 6px;
        padding: 9px 13px;
        letter-spacing: 0.05em;
    }

    /* A miniatura passa para cima do texto */
    .post {
        flex-direction: column;
        gap: 14px;
    }

    .post__miniatura {
        width: 100%;
        height: 180px;
    }

    .comentarios__form {
        flex-direction: column;
    }

    .comentarios__form .btn {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .auth {
        padding: 28px 16px;
    }

    .panel {
        padding: 32px 24px 28px;
    }

    .app {
        padding: 24px 20px 22px;
    }

    .app__topo {
        gap: 15px;
    }

    .app__icone {
        width: 74px;
        height: 74px;
        border-radius: 17px;
    }

    .app__nome {
        font-size: 21px;
    }

    /* Quatro colunas nao cabem: viram duas */
    .numeros {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 0;
    }

    .numeros__item:nth-child(odd) {
        border-left: 0;
    }

    .code {
        gap: 6px;
    }

    .code__digit {
        width: 44px;
        height: 56px;
        font-size: 22px;
    }
}

/* ------------------------------------------------------------------
   15. Modal de envio de APK (secao Android)
   ------------------------------------------------------------------ */
.apk-modal {
    position: relative;
    width: min(400px, 92vw);
    padding: 40px 38px 34px;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: 0 30px 80px -32px rgba(0, 0, 0, 0.9);
    animation: rise 0.4s var(--ease) both;
}

/* Fio dourado na aresta superior, igual ao painel de login */
.apk-modal::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 26px;
    right: 26px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.55;
}

.apk-modal__fechar {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
}

.apk-modal__fechar svg {
    width: 18px;
    height: 18px;
}

.apk-modal__fechar:hover {
    color: var(--white);
    background: var(--fill-hover);
}

.apk-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Sem isto, o display:flex acima venceria o atributo hidden e os dois
   passos apareceriam juntos. */
.apk-step[hidden] {
    display: none;
}

.apk-step .modal__alvo {
    margin: 0;
}

.apk-step .field,
.apk-step .btn-row {
    width: 100%;
}

/* Botao "Build" ocupa a largura toda, igual ao campo de idioma */
.apk-step .btn-row .btn {
    width: 100%;
    height: 42px;
}

/* Alvo de arrastar: o robo no centro, pulso saindo de tras */
.apk-drop {
    position: relative;
    display: grid;
    place-items: center;
    width: 150px;
    height: 150px;
    margin: 14px auto 4px;
    border-radius: 50%;
    cursor: pointer;
}

.apk-drop input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.apk-drop__robo {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    color: var(--gold);
    border-radius: 50%;
    transition: transform 0.18s var(--ease), background 0.18s var(--ease),
                border-color 0.18s var(--ease);
}

.apk-drop__robo svg {
    width: 46px;
    height: 46px;
}

/* Aneis que pulsam para fora do robo, um atras do outro */
.apk-drop__pulso {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 1px solid rgba(245, 197, 24, 0.55);
    transform: translate(-50%, -50%) scale(1);
    animation: apk-pulso 2.4s var(--ease) infinite;
    pointer-events: none;
}

.apk-drop__pulso--2 {
    animation-delay: 0.8s;
}

.apk-drop__pulso--3 {
    animation-delay: 1.6s;
}

@keyframes apk-pulso {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.75);
        opacity: 0;
    }
}

/* Hover e arraste por cima realcam o robo e apressam o pulso */
.apk-drop:hover .apk-drop__robo,
.apk-drop.is-dragover .apk-drop__robo {
    transform: scale(1.06);
    background: rgba(245, 197, 24, 0.16);
    border-color: rgba(245, 197, 24, 0.65);
}

.apk-drop.is-dragover .apk-drop__pulso {
    animation-duration: 1.2s;
}

/* Arquivo escolhido: para o pulso e fica solido */
.apk-drop.tem-arquivo .apk-drop__pulso {
    animation: none;
    opacity: 0;
}

.apk-drop.tem-arquivo .apk-drop__robo {
    background: rgba(245, 197, 24, 0.20);
    border-color: var(--gold);
}

.apk-drop__nome {
    margin: 6px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    overflow-wrap: anywhere;
}

.apk-drop.tem-arquivo + .apk-drop__nome {
    color: var(--gold);
}

.apk-drop__dica {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--text-dim);
}

@media (prefers-reduced-motion: reduce) {
    .apk-drop__pulso {
        animation: none;
        opacity: 0;
    }
}

/* ------------------------------------------------------------------
   16. Aba Android: selo de estado, botao publicar e terminal de build
   ------------------------------------------------------------------ */

/* Selo de estado do APK (buildado / aguardando) */
.selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
}

.selo svg {
    width: 14px;
    height: 14px;
}

.selo--ok {
    color: #3ddc84;
    background: rgba(61, 220, 132, 0.12);
    border-color: rgba(61, 220, 132, 0.35);
}

.selo--espera {
    color: var(--text-muted);
    background: var(--fill);
    border-color: var(--line-strong);
}

.selo--build {
    color: var(--gold);
    background: rgba(245, 197, 24, 0.10);
    border-color: rgba(245, 197, 24, 0.35);
    animation: build-pulse 1.4s ease-in-out infinite;
}

@keyframes build-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}

/* Botao "Tentar de novo" injetado na lista apos build falhar */
.btn--retry:hover {
    color: var(--gold);
    border-color: rgba(245, 197, 24, 0.45);
    background: rgba(245, 197, 24, 0.1);
}

/* Botao de acao "publicar": realce discreto em verde */
.btn--ok:hover {
    color: #3ddc84;
    border-color: rgba(61, 220, 132, 0.45);
    background: rgba(61, 220, 132, 0.1);
}

/* Modal de build: mais largo para caber o log */
.build-modal {
    width: min(680px, 94vw);
    text-align: left;
}

/* Terminal com a saida do Gradle */
.build-term {
    margin: 4px 0 0;
    padding: 16px;
    height: min(52vh, 420px);
    overflow-y: auto;
    font-family: "SF Mono", "Cascadia Code", "Consolas", ui-monospace, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    color: #d6d6da;
    background: #0b0b0e;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    scrollbar-width: thin;
}

.build-term__vazio {
    color: var(--text-dim);
}

/* Linhas com marca de sucesso ou falha */
.build-term__ok {
    color: #3ddc84;
    font-weight: 600;
}

.build-term__erro {
    color: #f0aca2;
    font-weight: 600;
}

/* ------------------------------------------------------------------
   17. Chat: anexos (imagem/audio), gravacao e lightbox
   ------------------------------------------------------------------ */

/* Botoes de anexar / gravar, ao lado do campo de texto */
.chat__anexo {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    padding: 0;
    color: var(--text-muted);
    background: var(--fill);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: color 0.15s var(--ease), background 0.15s var(--ease),
                border-color 0.15s var(--ease);
}

.chat__anexo svg {
    width: 19px;
    height: 19px;
}

.chat__anexo:hover {
    color: var(--white);
    background: var(--fill-hover);
    border-color: var(--line-strong);
}

/* Microfone gravando: pulsa em vermelho */
.chat__anexo.is-gravando {
    color: #f0aca2;
    border-color: rgba(226, 104, 90, 0.5);
    background: rgba(226, 104, 90, 0.12);
    animation: chat-grav 1.1s var(--ease) infinite;
}

@keyframes chat-grav {
    50% { background: rgba(226, 104, 90, 0.26); }
}

/* display:grid/inline-flex venceriam o atributo hidden sem isto */
.chat__anexo[hidden],
.chat__gravando[hidden] {
    display: none;
}

/* Faixa de status enquanto grava */
.chat__gravando {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding: 0 6px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.chat__gravando-ponto {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e2685a;
    animation: chat-grav-ponto 1s ease-in-out infinite;
}

@keyframes chat-grav-ponto {
    50% { opacity: 0.25; }
}

/* Imagem dentro da mensagem: miniatura clicavel */
.msg__imagem {
    display: block;
    max-width: min(260px, 60vw);
    margin-top: 6px;
    padding: 0;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    cursor: zoom-in;
    transition: border-color 0.15s var(--ease);
}

.msg__imagem:hover {
    border-color: var(--line-strong);
}

.msg__imagem img {
    display: block;
    width: 100%;
    max-height: 300px;
    object-fit: cover;
}

/* Player de audio */
.msg__audio {
    display: block;
    width: min(300px, 68vw);
    height: 38px;
    margin-top: 6px;
}

/* Lightbox: imagem em tela cheia */
.lightbox {
    padding: 0;
    max-width: 96vw;
    max-height: 94vh;
    background: transparent;
    border: 0;
    overflow: visible;
}

.lightbox::backdrop {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}

.lightbox img {
    display: block;
    max-width: 96vw;
    max-height: 94vh;
    border-radius: var(--r-md);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9);
}

.lightbox__fechar {
    position: absolute;
    top: -14px;
    right: -14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--white);
    background: var(--ink-800);
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    cursor: pointer;
}

.lightbox__fechar svg {
    width: 18px;
    height: 18px;
}

/* Botao "Criar" na aba Android: ghost com acento dourado */
.btn--criar-android {
    height: 36px;
    padding: 0 15px;
    font-size: 13px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    transition: border-color 0.18s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn--criar-android:hover {
    border-color: rgba(245, 197, 24, 0.30);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.85);
    color: var(--text);
}

/* Modal de confirmacao generico */
.modal-confirmar__caixa {
    max-width: 380px;
    text-align: center;
}
.modal-confirmar__msg {
    margin-bottom: 20px;
    font-size: 15px;
}

/* ── Screen: bloco de embed ─────────────────────────────────────────────── */
.screen-embed {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    margin-bottom: 20px;
    min-width: 0;
}

.screen-embed__legenda { display: none; }

.screen-embed__linha {
    display: contents;
}

.screen-embed__codigo {
    flex: 1;
    min-width: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    font-family: 'Courier New', monospace;
    font-size: 11.5px;
    color: var(--gold);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.screen-embed__copiar {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 11px;
}

.screen-embed__copiar svg {
    width: 13px;
    height: 13px;
}

.screen-embed__dica { display: none; }

/* ── Screen: botao ativar no cartao ────────────────────────────────────── */
.cartao__ativar-form {
    border-top: 1px solid var(--line);
    background: rgba(0,0,0,0.18);
    flex: none;
}

.cartao__ativar {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.cartao__ativar:hover {
    color: var(--text);
    background: rgba(255,255,255,0.04);
}

/* Toggle switch (trilho + bolinha) */
.cartao__ativar-bolinha {
    flex: none;
    position: relative;
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid var(--line-strong);
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.cartao__ativar-bolinha::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-dim);
    transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}

/* Estado ON */
.cartao__ativar--on {
    color: #4ade80;
}

.cartao__ativar--on .cartao__ativar-bolinha {
    background: rgba(74,222,128,0.25);
    border-color: rgba(74,222,128,0.5);
}

.cartao__ativar--on .cartao__ativar-bolinha::after {
    transform: translateX(16px);
    background: #4ade80;
}

/* Card com screen ativa: borda sutil verde */
.cartao--ativa {
    border-color: rgba(74,222,128,0.30) !important;
}

.cartao {
    position: relative;
}

/* ── Cards mobile ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .cartao__corpo {
        padding: 8px 10px 10px;
    }

    .cartao__titulo {
        font-size: 12px;
    }

    .cartao__descricao {
        font-size: 10.5px;
    }

    /* Menu de opcoes (admin) */
    .cartao__menu {
        top: 6px;
        right: 6px;
    }
}

/* Telas muito pequenas: 1 coluna */
@media (max-width: 360px) {
    .cards {
        grid-template-columns: 1fr;
    }
}


/* ─── Página /painel/usuarios ───────────────────────────────────────── */

/* ─── Página /painel/usuarios ───────────────────────────────────────── */

/* Wrapper da barra de busca */
.usuarios-filtro {
    margin-bottom: 24px;
}

/* Campo de busca com ícone — mesma linguagem visual dos field__input do projeto */
.usuarios-busca {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    max-width: 380px;
}

.usuarios-busca__icone {
    position: absolute;
    left: 13px;
    width: 15px;
    height: 15px;
    color: var(--text-dim);
    pointer-events: none;
    flex-shrink: 0;
    transition: color 0.15s;
}

.usuarios-busca__input {
    width: 100%;
    height: 42px;
    padding: 0 14px 0 38px;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-md);
    transition: border-color 0.15s, background 0.15s;
    appearance: none;
    -webkit-appearance: none;
}

.usuarios-busca__input::placeholder {
    color: var(--text-dim);
}

.usuarios-busca__input:hover {
    background: rgba(0, 0, 0, 0.36);
}

.usuarios-busca__input:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.42);
    border-color: var(--gold);
}

/* Ícone fica dourado quando o campo está em foco */
.usuarios-busca:focus-within .usuarios-busca__icone {
    color: var(--gold);
}

/* Ocultar o botão X nativo do type="search" — já temos clear implícito */
.usuarios-busca__input::-webkit-search-cancel-button,
.usuarios-busca__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* Badges de contagem no cabeçalho */
.usuarios-contadores {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* Div de botões de ação por linha */
.usuarios-acoes {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Texto "Você" na linha do próprio admin */
.usuarios-voce {
    color: var(--text-dim);
    font-size: 12px;
}

/* Mensagem de lista vazia após filtro */
.usuarios-vazio {
    display: none;
    text-align: center;
    color: var(--text-dim);
    padding: 32px 0;
    font-size: 14px;
}

/* Badge inline no h1 (contagem total) */
.badge--titulo {
    font-size: 13px;
    font-weight: 500;
    vertical-align: middle;
    margin-left: 6px;
}

/* Colunas de data e id ficam mais discretas */
.table .table__data {
    white-space: nowrap;
    font-size: 13px;
    color: var(--text-dim);
}
/* ─── form-control / form-label (campos genéricos de painel) ────────── */

.form-label {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text-muted);
}

.form-control {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-md);
    transition: border-color 0.15s, background 0.15s;
    appearance: none;
    -webkit-appearance: none;
}

.form-control:hover {
    background: rgba(0, 0, 0, 0.36);
}

.form-control:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.42);
    border-color: var(--gold);
}

.form-control::placeholder {
    color: var(--text-dim);
}

/* Select: seta customizada */
select.form-control {
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364646e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

/* input[type=date]: ocultar o ícone nativo no Chrome */
input[type="date"].form-control::-webkit-calendar-picker-indicator {
    opacity: 0.4;
    cursor: pointer;
    filter: invert(1);
}

/* Modificadores de tamanho para form-group dentro de form-row */
.form-group--lg  { flex: 2; min-width: 160px; }
.form-group--md  { flex: 1; min-width: 140px; }
.form-group--action { align-self: flex-end; }

.mt-12 { margin-top: 12px; }
/* ─── Anexo de arquivo genérico no chat ─────────────────────────────── */
.msg__arquivo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--r-md);
    background: var(--fill);
    border: 1px solid var(--line);
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    max-width: 280px;
    transition: background 0.15s, border-color 0.15s;
}

.msg__arquivo:hover {
    background: var(--fill-hover);
    border-color: var(--line-strong);
}

.msg__arquivo svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

.msg__arquivo-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
/* ─── Combo de busca (select substituível) ──────────────────────────── */
.select-wrap__caixa {
    position: relative;
}

.select-wrap__lista {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 224px;
    overflow-y: auto;
    background: var(--ink-800);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    z-index: 200;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
}

.select-wrap__item {
    padding: 8px 12px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    border-radius: 0;
    transition: background 0.1s;
}

.select-wrap__item:hover,
.select-wrap__item.is-ativo {
    background: var(--fill-hover);
}

.select-wrap__vazio {
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-dim);
}

.select-wrap__input--erro {
    border-color: var(--danger) !important;
}
/* ─── Modal de seleção de usuário (/painel/planos) ──────────────────── */
.modal-plano__caixa {
    width: min(460px, 94vw);
    gap: 12px;
}

.modal-plano-lista {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: rgba(0, 0, 0, 0.2);
}

.modal-plano-item {
    padding: 9px 14px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    transition: background 0.1s;
    border-radius: 0;
}

.modal-plano-item:hover,
.modal-plano-item.is-ativo {
    background: var(--fill-hover);
    color: var(--white);
}

.modal-plano-vazio {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-dim);
}
/* ------------------------------------------------------------------
   Página /painel/seguranca
   ------------------------------------------------------------------ */
.seg-section {
    margin-bottom: 36px;
}

.seg-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.seg-section__titulo {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--white);
}

.seg-section__desc {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.seg-stat-card {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 24px 28px;
    background: var(--ink-850);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-xl);
    width: fit-content;
}

.seg-stat-card__numero {
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.seg-stat-card__label {
    font-size: 14px;
    color: var(--text-muted);
}

.seg-vazio {
    margin: 0;
    padding: 20px 0;
    font-size: 14px;
    color: var(--text-muted);
}

.seg-slug {
    font-family: monospace;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--ink-800);
    padding: 2px 6px;
    border-radius: 4px;
}

.seg-domain-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 560px;
}

.seg-domain-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.seg-domain-input {
    flex: 1;
}

.seg-domain-preview {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

/* ------------------------------------------------------------------
   Screen — filtros de categoria
   ------------------------------------------------------------------ */
.screen-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.screen-filtro {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--ink-850);
    border: 1px solid var(--line-strong);
    text-decoration: none;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}

.screen-filtro:hover {
    color: var(--white);
    border-color: rgba(255,255,255,.25);
}

.screen-filtro--ativo {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(212,175,55,.08);
}

.screen-filtro--gerenciar {
    padding: 5px 10px;
}

/* ── Editor: seletor de categoria ────────────────────────── */
.screen-cat-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 420px;
}

.screen-cat-selecao {
    display: flex;
    gap: 8px;
    align-items: center;
}

.screen-cat-select {
    flex: 1;
}

.screen-cat-nova-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

.screen-cat-criar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.screen-cat-criar-input {
    flex: 1;
    min-width: 160px;
}

/* ── Modal de categorias ─────────────────────────────────── */
.modal-cats__caixa {
    width: min(400px, 94vw);
}

.modal-cats-lista {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
}

.modal-cats-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line-strong);
}

.modal-cats-item:last-child {
    border-bottom: none;
}

.modal-cats-item__nome {
    font-size: 14px;
    color: var(--white);
}

/* ── Badge de categoria no cartao ───────────────────────── */
.cartao__categoria {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gold);
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(212,175,55,.1);
    margin: 0;
}

.btn--desabilitado,
.btn--desabilitado:hover {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

.screen-cat-criar-dica { font-size: 12px; }