/* ============================================================
   AUDAX — Skin global baseado no painel de referência (8089)
   Tokens + fundo animado + glass + componentes.
   Carregado POR ULTIMO em todas as páginas.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    --bg-primary: #070a08;
    --bg-secondary: #0b100d;
    --bg-tertiary: #101613;
    --bg-card: rgba(10, 14, 12, .82);
    --bg-input: #0e1411;
    --bg-hover: #16201b;
    --border: rgba(255, 255, 255, .07);
    --border-light: rgba(255, 255, 255, .12);
    --text-primary: #ececec;
    --text-secondary: #8b8f96;
    --text-muted: #5a615c;
    --accent: #4dffb0;
    --accent-hover: #00cc6a;
    --accent-glow: rgba(77, 255, 176, .28);
    --success: #4dffb0;
    --danger: #e07a74;
    --warning: #f59e0b;
    --info: #60a5fa;
    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 16px;
    --shadow: 0 4px 24px rgba(0, 0, 0, .5);
    --transition: all .2s ease;

    /* aliases usados pelo projeto */
    --bg: #070a08;
    --primary: #4dffb0;
    --primary-hover: #00cc6a;
    --accent-primary: #4dffb0;
    --accent-secondary: #4dffb0;
    --accent-light: #4dffb0;
    --accent-dim: rgba(77, 255, 176, .12);
    --accent-gradient: linear-gradient(135deg, #00cc6a, #4dffb0);
    --accent-gradient-strong: linear-gradient(135deg, #00b367, #4dffb0);
    --text: #ececec;
    --text-secondary: #8b8f96;
    --muted: #8b8f96;
    --muted2: #8b8f96;
    --primary-bg: rgba(77, 255, 176, .1);
    --primary-ring: rgba(77, 255, 176, .28);
    --primary-solid: #0b8248;
    --glass-bg: rgba(10, 14, 12, .82);
    --glass-border: rgba(255, 255, 255, .07);
}

html, body {
    background: #070a08 !important;
    color: #ececec !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ---- (fundo animado removido a pedido) ---- */

/* ---- Tipografia mono ---- */
code, pre, kbd, .mono, [class*="__code"], [class*="-code"] {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

/* ---- Glass: apenas containers/cards reais ---- */
.card, .modal, .panel, .wl-modal-box, .auth-card,
.recent-cards-card, .chart-card, .upload-card, .table-panel, .announce-card {
    background: linear-gradient(180deg, rgba(16, 22, 19, .82), rgba(8, 12, 10, .86)) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 30px rgba(0, 0, 0, .35) !important;
}

/* ---- Inputs ---- */
.form-input, .form-control, .cfg-input, .prv-input, .input, .nav-search input,
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="tel"], select, textarea {
    background: var(--bg-input) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    color: var(--text-primary) !important;
    font-family: inherit !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}
.form-input:focus, .form-control:focus, .cfg-input:focus, .prv-input:focus,
input:focus, select:focus, textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
    outline: none !important;
}

/* ---- Botões ---- */
.btn, .cfg-save-btn, .dash-save-btn, .wl-btn, .auth-submit {
    border-radius: var(--radius) !important;
    font-family: inherit !important;
    transition: var(--transition) !important;
}
.btn-accent, .btn-primary, .btn-success {
    background: linear-gradient(135deg, #00cc6a, #4dffb0) !important;
    color: #04140c !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(77, 255, 176, .28) !important;
}
.btn-accent:hover, .btn-primary:hover, .btn-success:hover {
    box-shadow: 0 10px 28px rgba(77, 255, 176, .42) !important;
    transform: translateY(-1px);
}
.btn-ghost {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
}
.btn-ghost:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; }

/* ---- Tabelas ---- */
th {
    font-weight: 600; color: var(--text-secondary);
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
    background: rgba(255, 255, 255, .02); border-bottom: 1px solid var(--border);
}
td { color: var(--text-primary); border-bottom: 1px solid var(--border); }
tbody tr:hover td { background: rgba(77, 255, 176, .045) !important; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(77, 255, 176, .18); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(77, 255, 176, .35); background-clip: padding-box; }

/* ============================================================
   Modais unificados — overlay glass dark + card (padrão notif)
   ============================================================ */
.cart-modal, .sup-modal, .wl-modal, .dobro-overlay, .sc-overlay,
.captcha-overlay, .notif-mini-overlay, .notif-modal-overlay {
    background: rgba(0, 0, 0, .72) !important;
    -webkit-backdrop-filter: blur(24px) saturate(55%) !important;
    backdrop-filter: blur(24px) saturate(55%) !important;
}
.cart-modal-content, .sup-modal-box, .wl-modal-box, .captcha-modal, .dobro-card {
    background: linear-gradient(180deg, rgba(16, 22, 19, .96), rgba(8, 12, 10, .97)) !important;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: 20px !important;
    box-shadow: 0 28px 70px -18px rgba(0, 0, 0, .92) !important;
    -webkit-backdrop-filter: blur(26px) saturate(160%) !important;
    backdrop-filter: blur(26px) saturate(160%) !important;
}

/* ============================================================
   Adicionar Saldo (carteira) — redesign profissional
   ============================================================ */
.wl-methods { display: grid; gap: .9rem; }
.wl-method {
    background: linear-gradient(180deg, rgba(16,22,19,.74), rgba(8,12,10,.80)) !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    padding: 1.15rem 1.05rem !important;
    transition: transform .22s cubic-bezier(.2,.9,.25,1), border-color .22s ease, box-shadow .22s ease !important;
}
.wl-method:hover {
    transform: translateY(-3px);
    border-color: rgba(77,255,176,.30) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.wl-method-icon { width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 13px !important; font-size: 1.2rem !important; }
.wl-method-icon-xmr { width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 13px !important; }
.wl-method-title { font-size: .88rem !important; letter-spacing: -.01em; }
.wl-method-sub { font-size: .66rem !important; line-height: 1.4; }
.wl-method-feats li { font-size: .66rem !important; }
.wl-method-btn {
    border-radius: 12px !important;
    padding: .62rem 1rem !important;
    font-size: .74rem !important;
    min-height: 40px !important;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}
.wl-method-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 8px 22px rgba(0,0,0,.4); }

/* escolha de valor */
.wl-amt-head { text-align: center; margin-bottom: 1.2rem; }
.wl-amt-field {
    border-radius: 16px !important;
    border: 1px solid var(--border) !important;
    background: rgba(0,0,0,.28) !important;
}
.wl-amt-field:focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 4px var(--accent-glow) !important; }
.wl-amt-quick button { border-radius: 12px !important; transition: all .15s ease !important; }
.wl-amt-quick button:hover { border-color: rgba(77,255,176,.35) !important; }
.wl-amt-quick button.picked { border-color: rgba(77,255,176,.55) !important; box-shadow: 0 0 0 3px rgba(77,255,176,.12) !important; }
.wl-amt-limit { border-radius: 12px !important; }
.wl-amt-cta { border-radius: 14px !important; min-height: 46px !important; font-weight: 800 !important; }
.wl-amt-cta { background: linear-gradient(135deg, #00cc6a, #4dffb0) !important; color: #04140c !important; box-shadow: 0 10px 28px rgba(77,255,176,.28) !important; }
.wl-amt-cta:disabled { opacity: .5 !important; box-shadow: none !important; }
.wl-amt-cta:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(77,255,176,.42) !important; }

/* ===== Etapa escolher valor (Adicionar Saldo) — remodelado ===== */
.wl-amt-head { text-align: center; margin-bottom: 1.35rem; }
.wl-amt-title { font-size: 1.18rem; font-weight: 800; letter-spacing: -.02em; }
.wl-amt-sub { color: var(--text-secondary); font-size: .74rem; margin-top: .28rem; }
.wl-amt-field {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    background: rgba(0,0,0,.30) !important; border: 1px solid var(--border) !important;
    border-radius: 18px !important; padding: 1.05rem 1.2rem !important; margin-bottom: 1.4rem !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.wl-amt-field:focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 4px var(--accent-glow) !important; }
.wl-amt-currency { font-size: 1.15rem !important; font-weight: 800 !important; color: var(--accent) !important; }
.wl-amt-input { font-family: 'JetBrains Mono', monospace !important; font-size: 2.2rem !important; font-weight: 800 !important; }
.wl-amt-quick-label { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); margin-bottom: .6rem; }
.wl-amt-quick { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: .55rem !important; margin-bottom: 1.15rem !important; }
.wl-amt-quick button {
    position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    padding: .8rem .3rem !important; border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(20,26,22,.7), rgba(10,14,12,.82)) !important;
    border: 1px solid var(--border) !important; cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}
.wl-amt-quick button b { font-size: .98rem; font-weight: 800; color: var(--text); letter-spacing: -.02em; line-height: 1; }
.wl-amt-quick button i { font-style: normal; font-size: .54rem; font-weight: 700; color: var(--text-muted); letter-spacing: .06em; margin-top: 3px; }
.wl-amt-quick button:hover { transform: translateY(-2px); border-color: rgba(77,255,176,.4) !important; box-shadow: 0 12px 26px rgba(0,0,0,.4); }
.wl-amt-quick button:hover b { color: var(--accent); }
.wl-amt-quick button.picked { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-glow), 0 12px 26px rgba(0,0,0,.4) !important; }
.wl-amt-quick button.picked b { color: var(--accent); }

/* ===== Valor — display limpo SEM caixa (estilo fintech) ===== */
.wl-amt-field {
    background: transparent !important; border: none !important; box-shadow: none !important;
    padding: 0 !important; gap: .5rem !important; margin-bottom: 1.7rem !important;
}
.wl-amt-field:focus-within { border: none !important; box-shadow: none !important; }
.wl-amt-currency { font-size: 1.5rem !important; font-weight: 800 !important; color: var(--text-muted) !important; }
.wl-amt-input { font-size: 3rem !important; font-weight: 800 !important; letter-spacing: -.03em !important; }
.wl-amt-input::placeholder { color: rgba(255,255,255,.10) !important; }
.wl-amt-input { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
.wl-amt-currency { background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; }
.wl-amt-field .wl-amt-input { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; outline: none !important; }
.wl-modal .wl-amt-field { background: transparent !important; border: none !important; box-shadow: none !important; }

/* ===== Mobile: 2 cards de CC por linha ===== */
@media (max-width: 768px) {
    .cards-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .5rem !important; }
    .card-body { padding: .5rem .55rem !important; }
    .card-header { padding: .5rem .55rem !important; }
    .card-footer { padding: .45rem .55rem !important; }
    .card-logo { width: 24px !important; height: 18px !important; }
    .card-info h3 { font-size: .68rem !important; }
    .card-bin { font-size: .56rem !important; }
    .card-type-badge { font-size: .5rem !important; padding: .1rem .3rem !important; }
    .card-detail { font-size: .56rem !important; gap: .22rem !important; }
    .card-detail .detail-value { font-size: .5rem !important; padding: .05rem .22rem !important; }
    .card-price { font-size: .78rem !important; }
    .card-button { font-size: .6rem !important; padding: .35rem .45rem !important; }
}

/* BIN do cartão — verde mint, bem nítido */
.card-bin, .card-info .card-bin {
    color: var(--accent, #4dffb0) !important;
    font-weight: 800 !important;
    font-size: .68rem !important;
    letter-spacing: .6px !important;
    text-shadow: 0 0 12px rgba(77,255,176,.45) !important;
    opacity: 1 !important;
}

/* Cards de método (adicionar saldo) — mais compactos */
.wl-method { padding: .8rem .85rem !important; gap: .4rem !important; border-radius: 14px !important; }
.wl-method-icon, .wl-method-icon-xmr { width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 10px !important; font-size: .95rem !important; }
.wl-method-head { gap: .55rem !important; }
.wl-method-title { font-size: .8rem !important; }
.wl-method-sub { font-size: .6rem !important; }
.wl-method-feats { gap: .12rem !important; }
.wl-method-feats li { font-size: .6rem !important; gap: .25rem !important; }
.wl-method-btn { min-height: 34px !important; padding: .48rem .7rem !important; font-size: .68rem !important; border-radius: 10px !important; }

/* Card do QR / depósito — mais glass */
.wl-dep-card {
    background: linear-gradient(180deg, rgba(24,32,27,.52), rgba(10,14,12,.60)) !important;
    -webkit-backdrop-filter: blur(30px) saturate(165%) !important;
    backdrop-filter: blur(30px) saturate(165%) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.6) !important;
}

/* Card do QR/depósito — mesmo estilo do modal de carrinho */
.wl-dep-card {
    background: linear-gradient(180deg, rgba(16,22,19,.96), rgba(8,12,10,.97)) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 20px !important;
    box-shadow: 0 28px 70px -18px rgba(0,0,0,.92) !important;
    -webkit-backdrop-filter: blur(26px) saturate(160%) !important;
    backdrop-filter: blur(26px) saturate(160%) !important;
}

/* Ícone do botão do card (carrinho) — texto escuro junto */
.card-button i,
.card-button:hover i { color: #04140c !important; }
.card-button:hover { color: #04140c !important; }

/* Carrinho branco quando desabilitado (botão em si fica como estava) */
.card-button:disabled i { color: #fff !important; }

/* ===== Navbar mobile (baixo) — floating glass 2026 ===== */
.mobile-nav {
    background: transparent !important;
    border-top: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: .5rem .9rem calc(env(safe-area-inset-bottom, 0px) + .75rem) !important;
    pointer-events: none;
}
.mobile-nav-container {
    pointer-events: auto;
    max-width: 460px !important;
    background: rgba(14,18,16,.82) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06) !important;
    padding: .4rem .5rem !important;
    gap: .3rem !important;
}
.mobile-nav-item { border-radius: 16px !important; padding: .5rem .3rem !important; }
.mobile-nav-item.active { background: rgba(77,255,176,.12) !important; color: var(--accent, #4dffb0) !important; }
.mobile-nav-item.active .mobile-nav-icon { transform: translateY(-1px) scale(1.06) !important; color: var(--accent, #4dffb0) !important; }
.mobile-nav-icon { font-size: 1.25rem !important; }
.mobile-nav-text { font-size: .56rem !important; }
.mobile-nav-container { max-width: min(440px, calc(100vw - 1.8rem)) !important; box-sizing: border-box !important; }

/* Card mobile: footer com espaço + botão compacto (não encosta no valor) */
@media (max-width: 768px) {
    .card-footer { gap: .35rem !important; padding: .42rem .5rem !important; }
    .card-price { font-size: .8rem !important; flex-shrink: 0 !important; }
    .card-button {
        font-size: .55rem !important; padding: .3rem .42rem !important;
        min-width: 0 !important; gap: .25rem !important; flex-shrink: 1 !important;
    }
    .card-button i { font-size: .6rem !important; }
    .card-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}