/* ================================
   NFT Boards + seletor de seção
   ================================
   Carregado depois de styles.css. Tudo aqui usa o prefixo .nftb- ou .ms-, porque o
   CSS do painel tem regras com !important em .container/.stat-card/.modal-content
   que capturariam qualquer elemento genérico que caísse dentro delas.

   Regra do dourado, para a tela não virar um borrão amarelo:
     - preenchimento dourado sólido só em ação (botão principal, seção ativa);
     - no resto, dourado é borda discreta ou texto sobre preto;
     - os nove estados dos projetos têm cores próprias, de baixa saturação. */

:root {
    --nft-alta:      #FF6B6B;
    --nft-media:     #FFA500;
    --nft-baixa:     rgba(255,255,255,.35);
    --nft-acompanha: #64B4FF;
    --nft-conviccao: #B57BFF;
    --nft-mintado:   #00C864;
    --nft-espera:    #FFA500;
    --nft-ganho:     #00C864;
    --nft-neutro:    rgba(255,255,255,.35);

    --nft-painel:    rgba(0,0,0,.92);
    --nft-borda:     rgba(255,255,255,.10);
    --nft-borda-ouro: rgba(255,215,0,.18);

    /* Fundo dos controles. Precisa ser praticamente opaco: o favo de mel animado
       fica ATRÁS de todo o conteúdo, e um fundo translúcido deixa os hexágonos
       dourados atravessarem o campo, o texto some junto. */
    --nft-controle:  rgba(10,10,10,.94);
}

/* Os pickers nativos de data e hora abrem brancos sem isto. */
:root { color-scheme: dark; }

/* O favo de mel animado passa por trás de tudo. Desfocá-lo sob cada bloco mantém
   a textura visível nos vãos, que é o bonito, sem competir com o texto por cima,
   é o mesmo recurso que a tela de login já usa. */
.nftb-metrica,
.nftb-foco-item,
.nftb-tabela-wrap,
.nftb-vazio,
.nftb-busca,
.nftb-select,
.nftb-tab,
.nftb-limpar {
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
}

/* ---------- cabeçalho comum ---------- */

#appHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* ---------- seletor de seção ---------- */

.module-switcher { position: relative; }

.ms-trigger {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 15px;
    background: rgba(0,0,0,.5);
    border: 1px solid rgba(255,215,0,.35);
    border-radius: 999px;
    color: #F0EDE4;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.ms-trigger:hover { border-color: rgba(255,215,0,.6); background: rgba(255,215,0,.06); }
.ms-trigger:focus-visible { outline: 2px solid #FFD700; outline-offset: 2px; }

.ms-brand { font-weight: 800; color: #FFD700; letter-spacing: .06em; }
.ms-sep { color: #55503f; }
.ms-current { font-weight: 600; }
.ms-chev { font-size: 10px; color: #8B8477; transition: transform .2s; }
.ms-trigger[aria-expanded="true"] .ms-chev { transform: rotate(180deg); }

.ms-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 262px;
    /* Fundo sólido: translúcido sobre o favo de mel animado não deixa ler. */
    background: #111;
    border: 1px solid rgba(255,215,0,.2);
    border-radius: 12px;
    padding: 6px;
    z-index: 1001;
    box-shadow: 0 18px 40px rgba(0,0,0,.6);
}

.ms-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}
.ms-item:hover { background: rgba(255,255,255,.05); }
.ms-item b { display: block; font-size: 14px; font-weight: 600; color: #E6E1D4; }
.ms-item span { display: block; font-size: 12px; color: #8B8477; margin-top: 2px; }
.ms-item.on { background: rgba(255,215,0,.12); }
.ms-item.on b { color: #FFD700; }

/* ---------- barra de voltar dentro das telas ---------- */

.page-topbar { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.page-topbar-loose { padding: 24px 30px 0; }
.page-topbar h1 { font-size: 24px; }
.back-btn {
    padding: 9px 16px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--nft-borda);
    border-radius: 10px;
    color: rgba(255,255,255,.8);
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    transition: all .2s;
}
.back-btn:hover { border-color: rgba(255,215,0,.4); color: #FFD700; }

/* ---------- área do módulo ---------- */

.nftb-wrap { max-width: 1180px; margin: 0 auto; padding: 26px 24px 80px; }

.nftb-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin-bottom: 20px;
}
/* A sombra descola o texto do padrão de hexágonos que passa por trás. */
.nftb-title {
    font-size: 21px; font-weight: 700; color: #fff; line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,.9);
}
.nftb-sub {
    font-size: 13px; color: rgba(255,255,255,.62); margin-top: 3px;
    text-shadow: 0 1px 8px rgba(0,0,0,.9);
}

/* Classe própria: `.tabs` é varrida globalmente pelo showTab() do painel. */
.nftb-tabs { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 22px; }
.nftb-tab {
    padding: 8px 15px;
    background: var(--nft-controle);
    border: 1px solid var(--nft-borda);
    border-radius: 9px;
    color: rgba(255,255,255,.62);
    font-size: 13px; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: all .2s;
}
.nftb-tab:hover { color: #fff; border-color: rgba(255,215,0,.3); }
.nftb-tab.active {
    color: #000;
    background: linear-gradient(135deg, #FFD700, #FFC107);
    border-color: transparent;
    box-shadow: 0 3px 12px rgba(255,215,0,.28);
}

/* ---------- métricas ---------- */

.nftb-metricas {
    display: grid; gap: 10px; margin-bottom: 30px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.nftb-metrica {
    display: flex; flex-direction: column; gap: 4px;
    padding: 15px 15px; text-align: left;
    background: var(--nft-painel);
    border: 1px solid var(--nft-borda-ouro);
    border-radius: 12px;
    cursor: pointer; font-family: inherit;
    transition: transform .2s, border-color .2s;
}
.nftb-metrica:hover { transform: translateY(-2px); border-color: rgba(255,215,0,.35); }
.nftb-metrica-valor { font-size: 24px; font-weight: 700; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.nftb-metrica-rotulo { font-size: 11.5px; color: rgba(255,255,255,.6); line-height: 1.3; }

/* Só o total leva o dourado da marca: seis números dourados não destacam nada. */
.nftb-cor-ouro     .nftb-metrica-valor { color: #FFD700; }
.nftb-cor-vermelho .nftb-metrica-valor { color: var(--nft-alta); }
.nftb-cor-ambar    .nftb-metrica-valor { color: var(--nft-media); }
.nftb-cor-verde    .nftb-metrica-valor { color: var(--nft-mintado); }
.nftb-cor-azul     .nftb-metrica-valor { color: var(--nft-acompanha); }
.nftb-cor-roxo     .nftb-metrica-valor { color: var(--nft-conviccao); }

/* Campo ainda não anunciado. Fica visivelmente mais apagado que um valor real,
   para a linha não dar a impressão de que a informação existe. */
.nftb-tba {
    font-size: 11px; font-weight: 600; letter-spacing: .04em;
    color: rgba(255,255,255,.32);
}

/* Marca o projeto que entrou sozinho por uma WL ganha no Alphabot. */
.nftb-origem {
    display: inline-block; margin-left: 6px; padding: 1px 6px;
    border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
    color: var(--nft-ganho);
    background: rgba(0,200,100,.12);
    border: 1px solid rgba(0,200,100,.3);
    vertical-align: middle;
}

/* ---------- blocos ---------- */

.nftb-bloco-titulo {
    font-size: 15px; font-weight: 600; color: #fff;
    text-shadow: 0 1px 8px rgba(0,0,0,.9);
}
.nftb-bloco-sub {
    font-size: 12.5px; color: rgba(255,255,255,.58); margin: 2px 0 13px;
    text-shadow: 0 1px 8px rgba(0,0,0,.9);
}

.nftb-foco { display: flex; flex-direction: column; gap: 7px; }
.nftb-foco-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    background: var(--nft-painel);
    border: 1px solid var(--nft-borda);
    border-radius: 11px;
    cursor: pointer; transition: border-color .2s, background .2s;
}
.nftb-foco-item:hover { border-color: rgba(255,215,0,.3); background: rgba(255,215,0,.04); }
.nftb-foco-texto { flex: 1; min-width: 0; }
.nftb-foco-nome { font-size: 13.5px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nftb-foco-motivo { font-size: 11.5px; color: #FFD700; margin-top: 2px; }
.nftb-foco-dir { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }

.nftb-adiar {
    padding: 5px 10px; font-size: 11.5px; font-family: inherit;
    background: transparent; border: 1px solid var(--nft-borda);
    border-radius: 7px; color: rgba(255,255,255,.6); cursor: pointer; transition: all .2s;
}
.nftb-adiar:hover { color: #FFD700; border-color: rgba(255,215,0,.4); }

/* Botão de excluir. Fica discreto até o mouse passar por cima: some quando você
   está só olhando a lista, e aparece quando você quer agir. */
.nftb-excluir {
    width: 26px; height: 26px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent; border-radius: 7px;
    color: rgba(255,255,255,.3); font-size: 13px; font-family: inherit;
    cursor: pointer; transition: all .15s;
}
.nftb-excluir:hover {
    color: #ef5350;
    background: rgba(244,67,54,.12);
    border-color: rgba(244,67,54,.4);
}
.nftb-excluir:focus-visible { outline: 2px solid #ef5350; outline-offset: 1px; }

.nftb-acao { text-align: right; width: 1%; white-space: nowrap; }

/* ---------- já mintados: resultado ---------- */

.nftb-resultados {
    display: grid; gap: 12px; margin-bottom: 22px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.nftb-resultado {
    background: var(--nft-painel);
    border: 1px solid var(--nft-borda-ouro);
    border-radius: 12px;
    padding: 15px 17px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.nftb-res-moeda {
    font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: #FFD700; margin-bottom: 11px;
}
.nftb-res-linha {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 12.5px; color: rgba(255,255,255,.6); padding: 3px 0;
}
.nftb-res-linha b { color: rgba(255,255,255,.9); font-variant-numeric: tabular-nums; font-weight: 600; }

/* O valor em dólar é o número principal da tela. */
.nftb-res-grande {
    font-size: 23px; font-weight: 700; line-height: 1.15;
    color: rgba(255,255,255,.95);
    font-variant-numeric: tabular-nums;
}
.nftb-res-grande b { font-weight: 700; }
.nftb-res-destaque { border-color: rgba(255,215,0,.35); }

/* O equivalente em cripto fica ao lado, menor: confere sem competir. */
.nftb-res-detalhe { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 8px; }
.nftb-por-moeda {
    font-size: 11px; color: rgba(255,255,255,.45);
    font-variant-numeric: tabular-nums;
}
.nftb-cotacao-nota {
    font-size: 11px; color: rgba(255,255,255,.38);
    margin: -12px 0 18px; text-shadow: 0 1px 8px rgba(0,0,0,.9);
}
.nftb-em-dolar {
    display: block; margin-top: 3px; font-style: normal;
    font-size: 10.5px; color: rgba(255,255,255,.4);
    font-variant-numeric: tabular-nums;
}
.nftb-em-cripto {
    display: block; margin-top: 2px; font-style: normal;
    font-size: 10px; color: rgba(255,255,255,.35);
    font-variant-numeric: tabular-nums;
}

/* Verde e vermelho aqui são leitura de resultado, não estado de projeto. */
.nftb-res-positivo b, span.nftb-res-positivo b { color: var(--nft-ganho); }
.nftb-res-negativo b, span.nftb-res-negativo b { color: var(--nft-alta); }
.nftb-res-neutro   b, span.nftb-res-neutro   b { color: rgba(255,255,255,.75); }
.nftb-res-celula { font-variant-numeric: tabular-nums; }

/* Campos editáveis dentro da tabela: parecem texto até você clicar. */
.nftb-valor, .nftb-moeda {
    width: 78px; padding: 6px 9px;
    background: rgba(255,255,255,.04);
    border: 1px solid transparent;
    border-radius: 6px;
    color: #fff; font-size: 12.5px; font-family: inherit;
    font-variant-numeric: tabular-nums;
}
.nftb-moeda { width: 62px; text-transform: uppercase; }
.nftb-valor::placeholder { color: rgba(255,255,255,.22); }
.nftb-valor:hover, .nftb-moeda:hover { border-color: rgba(255,255,255,.16); }
.nftb-valor:focus, .nftb-moeda:focus {
    outline: none; background: rgba(255,255,255,.07);
    border-color: rgba(255,215,0,.5);
}
.nftb-posicao { padding: 6px 9px; font-size: 12px; border-radius: 6px; }

.nftb-voltar {
    width: 26px; height: 26px; margin-right: 3px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent; border-radius: 7px;
    color: rgba(255,255,255,.3); font-size: 13px; font-family: inherit;
    cursor: pointer; transition: all .15s;
}
.nftb-voltar:hover { color: #FFD700; background: rgba(255,215,0,.1); border-color: rgba(255,215,0,.35); }

/* Concluir é a ação principal da linha, então tem texto e não só ícone: some da
   lista sem sumir da conta, e isso precisa ficar claro antes do clique. */
.nftb-concluir {
    padding: 5px 11px; margin-right: 4px;
    background: rgba(0,200,100,.1);
    border: 1px solid rgba(0,200,100,.3);
    border-radius: 7px;
    color: var(--nft-ganho);
    font-size: 11.5px; font-weight: 600; font-family: inherit;
    white-space: nowrap; cursor: pointer; transition: all .15s;
}
.nftb-concluir:hover { background: rgba(0,200,100,.2); border-color: rgba(0,200,100,.55); }

/* ---------- calendário ---------- */

.nftb-cal-topo {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px; flex-wrap: wrap;
}
.nftb-cal-titulo {
    font-size: 17px; font-weight: 600; color: #fff;
    min-width: 170px; text-align: center;
    text-shadow: 0 1px 8px rgba(0,0,0,.9);
}
.nftb-cal-nav {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: var(--nft-controle);
    border: 1px solid var(--nft-borda);
    border-radius: 8px;
    color: rgba(255,255,255,.7);
    font-size: 17px; font-family: inherit; cursor: pointer; transition: all .2s;
}
.nftb-cal-nav:hover { color: #FFD700; border-color: rgba(255,215,0,.4); }
.nftb-cal-hoje { margin-left: auto; padding: 7px 14px; font-size: 12.5px; }

.nftb-cal-grade {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;
}
.nftb-cal-dow {
    text-align: center; padding: 6px 0;
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
    color: rgba(255,255,255,.35);
}
.nftb-cal-cel {
    position: relative;
    min-height: 62px;
    padding: 7px 8px;
    background: var(--nft-painel);
    border: 1px solid var(--nft-borda);
    border-radius: 9px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: all .15s;
}
.nftb-cal-cel.vazia { background: transparent; border-color: transparent; backdrop-filter: none; }
.nftb-cal-cel.tem-mint { cursor: pointer; border-color: rgba(255,215,0,.3); }
.nftb-cal-cel.tem-mint:hover { border-color: rgba(255,215,0,.6); background: rgba(255,215,0,.06); }
.nftb-cal-cel.hoje { border-color: rgba(255,215,0,.55); box-shadow: inset 0 0 0 1px rgba(255,215,0,.25); }
.nftb-cal-cel.aberta { background: rgba(255,215,0,.12); border-color: #FFD700; }

.nftb-cal-dia {
    font-size: 12px; font-weight: 600; color: rgba(255,255,255,.55);
    font-variant-numeric: tabular-nums;
}
.nftb-cal-cel.hoje .nftb-cal-dia { color: #FFD700; }
/* A quantidade aparece porque um ponto só não diferencia 1 mint de 5. */
.nftb-cal-qtd {
    position: absolute; left: 8px; bottom: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FFD700, #FFC107);
    color: #000; font-size: 11px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.nftb-cal-detalhe { margin-top: 20px; }
.nftb-link { color: #FFD700; cursor: pointer; text-decoration: underline; }

.nftb-ajustes-acoes { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- registrar trade ---------- */

.nftb-modal-curto { max-width: 540px; }
.nftb-opcional { color: rgba(255,255,255,.3); font-weight: 400; }
/* Mostra o resultado enquanto se digita, para conferir antes de salvar. */
.nftb-dica {
    font-size: 12.5px; color: rgba(255,255,255,.45);
    margin: 2px 0 0; font-variant-numeric: tabular-nums;
}
.nftb-dica b { font-weight: 700; }

@media (max-width: 560px) {
    .nftb-cal-cel { min-height: 48px; padding: 5px; }
    .nftb-cal-titulo { min-width: 130px; font-size: 15px; }
    .nftb-cal-hoje { margin-left: 0; }
}

/* ---------- carteira da WL ---------- */
/* Fica sob o nome do projeto, curta e clicável: na hora do mint o que se quer é
   copiar o endereço sem ter que abrir o Alphabot. */

.nftb-wallet { margin-top: 4px; }
.nftb-wallet-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 8px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    color: rgba(255,255,255,.5);
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10.5px;
    cursor: pointer; transition: all .15s;
}
.nftb-wallet-btn:hover {
    color: #FFD700;
    border-color: rgba(255,215,0,.35);
    background: rgba(255,215,0,.07);
}
.nftb-wallet-btn.copiado {
    color: var(--nft-ganho);
    border-color: rgba(0,200,100,.4);
    background: rgba(0,200,100,.1);
}
.nftb-wallet-ico { font-size: 11px; opacity: .7; }

/* ---------- WLs ganhas ---------- */

.nftb-wl-secao { margin-bottom: 30px; }
.nftb-wl-cab { margin-bottom: 11px; }
.nftb-wl-num {
    display: inline-block; margin-left: 6px; padding: 1px 8px;
    border-radius: 999px; font-size: 11px; font-weight: 700;
    color: rgba(255,255,255,.6);
    background: rgba(255,255,255,.07);
    vertical-align: middle;
}
/* O aviso explica por que essa seção existe: é o buraco que o Alphabot deixa. */
.nftb-wl-aviso {
    font-size: 12px; line-height: 1.5;
    color: var(--nft-conviccao);
    background: rgba(181,123,255,.08);
    border: 1px solid rgba(181,123,255,.25);
    border-radius: 10px;
    padding: 10px 14px; margin-bottom: 11px;
}

.nftb-mint-barra {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 11px;
}
.nftb-mint-barra .nftb-contagem { margin: 0; }

.nftb-ver-hist {
    padding: 7px 13px;
    background: var(--nft-controle);
    border: 1px solid var(--nft-borda);
    border-radius: 8px;
    color: rgba(255,255,255,.6);
    font-size: 12px; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: all .2s; white-space: nowrap;
}
.nftb-ver-hist:hover { color: #fff; border-color: rgba(255,215,0,.3); }
.nftb-ver-hist.ativo { color: #FFD700; border-color: rgba(255,215,0,.4); background: rgba(255,215,0,.08); }

/* A linha do arquivado não abre formulário ao clicar: os campos são editados nela. */
.nftb-tabela-mint tbody tr { cursor: default; }
/* Na tabela, só aparece de verdade quando o mouse está na linha. */
.nftb-tabela tbody .nftb-excluir { opacity: .35; }
.nftb-tabela tbody tr:hover .nftb-excluir { opacity: 1; }

/* ---------- avatar ---------- */

.nftb-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0;
    letter-spacing: .02em;
}
.nftb-avatar-sm { width: 26px; height: 26px; font-size: 10px; }

/* ---------- estados (ponto + texto neutro) ---------- */

.nftb-estado { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(255,255,255,.85); white-space: nowrap; }
.nftb-ponto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.nftb-prioridade-high   { background: var(--nft-alta);      box-shadow: 0 0 7px rgba(255,107,107,.5); }
.nftb-prioridade-medium { background: var(--nft-media); }
.nftb-prioridade-low    { background: var(--nft-baixa); }
.nftb-situacao-watching        { background: var(--nft-acompanha); }
.nftb-situacao-high_conviction { background: var(--nft-conviccao); }
.nftb-situacao-minted          { background: var(--nft-mintado); }
.nftb-wl-none    { background: var(--nft-neutro); }
.nftb-wl-pending { background: var(--nft-espera); }
.nftb-wl-won     { background: var(--nft-ganho); }

/* ---------- filtros ---------- */

.nftb-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.nftb-busca, .nftb-select {
    padding: 9px 12px;
    background: var(--nft-controle);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 8px;
    color: #fff; font-size: 12.5px; font-family: inherit; line-height: 1.4;
}
.nftb-busca { flex: 1; min-width: 190px; }
.nftb-busca::placeholder { color: rgba(255,255,255,.45); }
.nftb-busca:hover, .nftb-select:hover { border-color: rgba(255,255,255,.26); }
.nftb-busca:focus, .nftb-select:focus {
    outline: none; border-color: rgba(255,215,0,.55);
    box-shadow: 0 0 0 3px rgba(255,215,0,.10);
}
.nftb-select { cursor: pointer; color: rgba(255,255,255,.9); }
.nftb-select option { background: #111; color: #fff; }
.nftb-limpar {
    padding: 9px 13px; background: var(--nft-controle);
    border: 1px solid rgba(255,215,0,.38); border-radius: 8px;
    color: #FFD700; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.nftb-limpar:hover { background: rgba(255,215,0,.12); border-color: rgba(255,215,0,.55); }
.nftb-contagem {
    font-size: 12px; color: rgba(255,255,255,.55); margin-bottom: 11px;
    text-shadow: 0 1px 8px rgba(0,0,0,.9);
}

/* ---------- tabela ---------- */

/* O painel não tem nenhuma regra de rolagem lateral para tabelas: sem este
   contêiner, sete colunas ficam cortadas no celular. */
.nftb-tabela-wrap {
    overflow-x: auto;
    background: var(--nft-painel);
    border: 1px solid var(--nft-borda);
    border-radius: 14px;
}
.nftb-tabela { width: 100%; border-collapse: collapse; min-width: 800px; }
.nftb-tabela th {
    position: sticky; top: 0;
    text-align: left; padding: 11px 15px;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: #FFD700; background: #0a0a0a;
    border-bottom: 1px solid rgba(255,215,0,.15);
    white-space: nowrap;
}
.nftb-tabela td {
    padding: 11px 15px; font-size: 12.5px; color: rgba(255,255,255,.85);
    border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle;
    white-space: nowrap;
}
.nftb-tabela tbody tr { cursor: pointer; transition: background .15s; }
.nftb-tabela tbody tr:hover { background: rgba(255,215,0,.04); }
.nftb-tabela tbody tr:last-child td { border-bottom: none; }

.nftb-proj { display: flex; align-items: center; gap: 10px; }
.nftb-proj-nome { font-size: 13.5px; font-weight: 600; color: #fff; }
.nftb-proj-links { display: flex; gap: 8px; margin-top: 2px; }
.nftb-proj-links a { font-size: 10.5px; color: rgba(255,255,255,.5); text-decoration: none; }
.nftb-proj-links a:hover { color: #FFD700; text-decoration: underline; }

.nftb-muted { color: rgba(255,255,255,.4); }

.nftb-selo {
    display: inline-block; margin-left: 5px; padding: 2px 7px;
    border-radius: 999px; font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; vertical-align: middle;
}
/* Único destaque dourado por linha, e não faz vizinhança com outro dourado. */
.nftb-selo-hoje   { background: linear-gradient(135deg,#FFD700,#FFC107); color: #000; }
.nftb-selo-perto  { background: rgba(100,180,255,.14); color: var(--nft-acompanha); border: 1px solid rgba(100,180,255,.3); }
.nftb-selo-passou { background: rgba(255,255,255,.05); color: rgba(255,255,255,.35); }

.nftb-vazio {
    padding: 38px 22px; text-align: center;
    font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.58);
    background: var(--nft-painel);
    border: 1px solid var(--nft-borda);
    border-radius: 12px;
}

/* ---------- botões ---------- */

.nftb-btn {
    padding: 9px 17px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--nft-borda);
    border-radius: 8px;
    color: rgba(255,255,255,.85);
    font-size: 13px; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: all .2s;
}
.nftb-btn:hover { border-color: rgba(255,215,0,.35); }
.nftb-btn-primary {
    background: linear-gradient(135deg,#FFD700,#FFC107);
    border-color: transparent; color: #000;
}
.nftb-btn-primary:hover { box-shadow: 0 6px 18px rgba(255,215,0,.35); }
.nftb-btn-perigo { background: rgba(244,67,54,.1); border-color: rgba(244,67,54,.35); color: #ef5350; margin-right: auto; }
.nftb-btn-perigo:hover { background: rgba(244,67,54,.2); border-color: rgba(244,67,54,.5); }

/* ---------- modal ---------- */

/* Cabeçalho fixo, corpo que rola, rodapé fixo, a mesma anatomia dos modais que o
   painel já usa. Sem isso o conteúdo fica solto contra as bordas. */
/* .udm-content já é flex-column com max-height 88vh e overflow hidden; o form
   precisa ser o item flexível para o corpo rolar em vez de estourar a caixa. */
.nftb-modal { max-width: 620px; width: 94%; }
.nftb-modal > form { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; }

.nftb-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}
.nftb-modal-head h2 {
    font-size: 18px; font-weight: 700; color: #FFD700; margin: 0; line-height: 1.2;
}
.nftb-fechar {
    width: 28px; height: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.07); border: none; border-radius: 6px;
    color: #aaa; font-size: 14px; cursor: pointer; transition: all .15s;
}
.nftb-fechar:hover { background: rgba(255,255,255,.14); color: #fff; }

.nftb-modal-body {
    padding: 18px 22px;
    overflow-y: auto;
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; gap: 16px;
}

.nftb-modal-foot {
    display: flex; align-items: center; gap: 9px; justify-content: flex-end;
    padding: 14px 22px;
    border-top: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}

/* Agrupar por assunto evita o campo de Discord aparecer ao lado da data do mint. */
.nftb-secao { display: flex; flex-direction: column; gap: 9px; }
.nftb-secao > h3 {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: rgba(255,255,255,.38); margin: 0;
}

.nftb-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nftb-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.nftb-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.nftb-campo > span {
    font-size: 12px; font-weight: 500; color: rgba(255,255,255,.55); line-height: 1.2;
}
.nftb-campo input, .nftb-campo select, .nftb-campo textarea {
    width: 100%; padding: 9px 11px; box-sizing: border-box;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px;
    color: #fff; font-size: 13.5px; font-family: inherit; line-height: 1.35;
}
.nftb-campo input::placeholder, .nftb-campo textarea::placeholder {
    color: rgba(255,255,255,.26);
}
.nftb-campo input:focus, .nftb-campo select:focus, .nftb-campo textarea:focus {
    outline: none;
    border-color: rgba(255,215,0,.5);
    box-shadow: 0 0 0 3px rgba(255,215,0,.08);
}
.nftb-campo textarea { resize: vertical; min-height: 68px; }
.nftb-campo select { cursor: pointer; }
.nftb-campo select option { background: #111; }

/* ---------- celular ---------- */

@media (max-width: 768px) {
    /* O painel vira o cabeçalho em coluna e perde o sticky nesta largura, o que
       tiraria o seletor do canto superior. Aqui ele continua onde deve. */
    #appHeader {
        flex-direction: row;
        position: sticky;
        top: 0;
        text-align: left;
        padding: 14px 16px;
    }
    #appHeader .header-actions { gap: 8px; }
    #appHeader #userEmail { display: none; }

    .nftb-wrap { padding: 20px 14px 60px; }
    .nftb-metricas { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
    .ms-menu { width: calc(100vw - 32px); max-width: 300px; }

    /* Três e quatro colunas não cabem: viram duas, e o modal ocupa a tela. */
    .nftb-grid-3, .nftb-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .nftb-modal { width: 100%; max-width: none; max-height: 100vh; border-radius: 0; }
    .nftb-modal-head, .nftb-modal-body, .nftb-modal-foot { padding-left: 16px; padding-right: 16px; }
    .nftb-modal-foot { flex-wrap: wrap; }
    .nftb-modal-foot .nftb-btn { flex: 1; }
    .nftb-btn-perigo { flex-basis: 100%; margin-right: 0; order: 3; }
}

@media (max-width: 420px) {
    .nftb-grid-3, .nftb-grid-4 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .nftb-metrica, .nftb-foco-item, .nftb-tab, .nftb-btn, .ms-chev { transition: none; }
}

/* ---------- confirmacao dentro do site ---------- */
/* Substitui a caixa nativa do navegador, que aparecia com "alphacw3.com diz" e os
   botoes do Chrome, destoando de todo o resto do painel. */

.confirm-box {
    max-width: 420px;
    width: 92%;
    /* Acima dos outros modais: costuma ser aberta a partir de um deles. */
    z-index: 1002;
}
#confirmModal { z-index: 1002; }

.confirm-head {
    padding: 18px 22px 0;
}
.confirm-head h2 {
    font-size: 17px;
    font-weight: 700;
    color: #FFD700;
    margin: 0;
}
.confirm-body {
    padding: 10px 22px 4px;
}
.confirm-body p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255,255,255,.8);
    /* Nome de projeto pode ser longo e sem espaco. */
    overflow-wrap: anywhere;
}
.confirm-foot {
    display: flex;
    gap: 9px;
    justify-content: flex-end;
    padding: 18px 22px 20px;
}
.confirm-foot .nftb-btn { min-width: 96px; }

/* Acao destrutiva: vermelho preenchido, para nao ser confundida com o botao
   dourado, que no painel inteiro significa acao normal. */
.nftb-btn-perigo-cheio {
    background: #C0392B;
    border-color: #C0392B;
    color: #fff;
}
.nftb-btn-perigo-cheio:hover {
    background: #D64535;
    border-color: #D64535;
    box-shadow: 0 4px 14px rgba(192,57,43,.35);
}
.nftb-btn-perigo-cheio:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Quando a WL foi ganha. Discreto, mas e o que permite ver de relance o que ja
   esta velho na lista de espera e pode ser descartado. */
.nftb-ganha-em {
    margin-top: 3px;
    font-size: 10.5px;
    color: rgba(255,255,255,.42);
}