/* =============================================
   MAX CONTAS — Clean Premium Light (v3)
============================================= */
:root {
    --bg:        #f8f9fb;
    --bg-2:      #f1f3f6;
    --card:      #ffffff;
    --card-2:    #f5f7fa;
    --border:    #e5e7eb;
    --border-2:  rgba(26,86,219,0.18);
    --text:      #111827;
    --muted:     #6b7280;
    --accent:    #1a56db;
    --accent-2:  #3b82f6;
    --accent-3:  #2563eb;
    --green:     #059669;
    --green-2:   #047857;
    --danger:    #dc2626;
    --warn:      #d97706;
    --radius:    16px;
    --radius-sm: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.55;
    overflow-x: hidden;
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
}

a { color: var(--text); text-decoration: none; }
button { font-family: inherit; }

/* ============ TOPBAR ============ */
.topbar {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
}
.topbar-inner {
    display: grid; align-items: center;
    grid-template-columns: 200px 1fr auto auto;
    gap: 24px; height: 72px;
    padding: 0 28px; max-width: 1400px; margin: 0 auto;
}
.logo {
    font-weight: 800; font-size: 19px; letter-spacing: 0.5px;
    display: inline-flex; align-items: center; gap: 8px;
}
.logo-mark {
    width: 28px; height: 28px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-radius: 8px;
    position: relative;
}
.logo-mark::before {
    content: ''; position: absolute; inset: 4px;
    background: var(--card); border-radius: 4px;
}
.logo-mark::after {
    content: '▶'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: var(--accent);
}
.logo-accent {
    color: var(--accent);
}

.search-bar {
    position: relative;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    height: 42px;
    display: flex; align-items: center;
    transition: 0.2s;
}
.search-bar:focus-within {
    border-color: var(--accent-2);
    box-shadow: 0 0 0 4px rgba(59,130,246,0.10);
}
.search-icon {
    padding: 0 14px; color: var(--muted); font-size: 14px;
}
.search-bar input {
    flex: 1; background: transparent; border: 0; outline: 0;
    color: var(--text); font-size: 14px; font-family: inherit;
    padding: 0 14px 0 0;
}

.nav { display: flex; gap: 8px; }
.nav a {
    color: var(--muted); font-weight: 500; font-size: 13px;
    padding: 9px 14px; border-radius: 10px;
    display: inline-flex; align-items: center; gap: 6px;
    transition: 0.2s;
}
.nav a svg { width: 16px; height: 16px; }
.nav a:hover { color: var(--text); background: var(--bg-2); }
.nav a.active {
    color: var(--accent);
    background: rgba(26,86,219,0.08);
    box-shadow: inset 0 0 0 1px var(--border-2);
}

.user-area {
    display: flex; align-items: center; gap: 10px;
    min-height: 40px;
}
.user-card {
    display: flex; align-items: center; gap: 10px;
    background: var(--card); border: 1px solid var(--border);
    padding: 6px 14px 6px 6px; border-radius: 999px;
    cursor: default;
}
.user-card img { width: 32px; height: 32px; border-radius: 50%; }
.user-card .nome { font-size: 13px; font-weight: 600; }
.user-card .role {
    font-size: 9px; color: var(--accent);
    text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700;
}
.btn-logout {
    background: transparent; border: 1px solid var(--border); color: var(--muted);
    padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 12px;
    transition: 0.2s;
}
.btn-logout:hover { color: var(--danger); border-color: var(--danger); }

/* ============ HERO ============ */
main { max-width: 1400px; margin: 0 auto; padding: 0 28px 80px; }
.container-narrow { max-width: 1100px; margin: 0 auto; }

/* ============ HERO V2 ============ */
.hero-v2 {
    margin: 0px 0 32px;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    background: url('/background.webp') center / cover no-repeat;
    background-position: center 42%;
    border-radius: var(--radius);
    padding: 14px 48px;
    position: relative;
    overflow: hidden;
    min-height: 420px;
}
.hero-v2::before {
    content: '';
    position: absolute; inset: 1;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1;
}
.hero-v2 .hero-text { max-width: 560px; position: relative; z-index: 2; }
.hero-v2 h1 {color: #000000;}
.hero-v2 p {color: rgb(0 0 0 / 85%);}
.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgb(255 255 255);
    backdrop-filter: blur(4px);
    color: #000000;
    font-size: 12px;
    font-weight: 600;
    padding: 20px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.25);
    margin-bottom: 16px;
}
.hero-pill::before {
    content: ''; width: 6px; height: 6px;
    background: #60a5fa;
    border-radius: 50%;
}
.hero-v2 h1 {
    font-size: clamp(28px, 4.2vw, 42px);
    margin: 0 0 14px; font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.1;
}
.grad {
    background: linear-gradient(135deg, #1a56db, #002cff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-v2 p {
    font-size: 15px; line-height: 1.6;
    max-width: 480px; margin: 0 0 22px;
}
.hero-stats-v2 {
    display: flex; gap: 32px;
    margin-bottom: 24px;
}
.hero-stats-v2 .item .num {
    font-size: 22px;
    font-weight: 700;
    color: #000000;
    letter-spacing: -0.01em;
}
.hero-stats-v2 .item .num em {
    color: #0f44ea;
    font-style: normal;
}
.hero-stats-v2 .item .lbl {
    font-size: 14px;
    color: rgb(0 0 0);
    margin-top: 2px;
}
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* hero-card destaque */
.hero-v2 .hero-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: 0 12px 40px -16px rgba(26,86,219,0.18);
    position: relative;
    overflow: hidden;
}
.hero-v2 .hero-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.hero-v2 .hero-card .top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px;
}
.hero-v2 .hero-card .badge {
    background: rgba(26,86,219,0.08);
    color: var(--accent);
    font-size: 11px; font-weight: 600;
    padding: 4px 10px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.hero-v2 .hero-card .live {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--green); font-weight: 500;
}
.hero-v2 .hero-card .live::before {
    content: ''; width: 7px; height: 7px;
    background: var(--green); border-radius: 50%;
    animation: pulseDot 1.6s infinite;
}
@keyframes pulseDot {
    0%,100% { box-shadow: 0 0 0 0 rgba(5,150,105,0.5); }
    50%     { box-shadow: 0 0 0 6px rgba(5,150,105,0); }
}
.hero-v2 .hero-card h3 {
    font-size: 17px; font-weight: 600; margin: 0 0 4px;
}
.hero-v2 .hero-card .handle {
    font-size: 13px; color: var(--muted); margin-bottom: 14px;
}
.hero-v2 .hero-card .stats-row {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    background: var(--bg-2);
    border-radius: 10px;
    padding: 12px; margin-bottom: 14px;
}
.hero-v2 .hero-card .stats-row .v {
    font-size: 15px; font-weight: 700; color: var(--text);
}
.hero-v2 .hero-card .stats-row .k {
    font-size: 11px; color: var(--muted); margin-top: 2px;
}
.hero-v2 .hero-card .price-row {
    display: flex; justify-content: space-between; align-items: center;
}
.hero-v2 .hero-card .price {
    font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
    color: var(--text);
}
.hero-v2 .hero-card .go {
    background: var(--text); color: #fff;
    font-size: 13px; font-weight: 600;
    padding: 9px 16px; border-radius: 8px;
    border: none; cursor: pointer;
    transition: background 180ms;
}
.hero-v2 .hero-card .go:hover { background: var(--accent); }

/* ============ TRUST BAR ============ */
.trust-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}
.trust-bar .item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
    transition: border-color 200ms;
}
.trust-bar .item:hover { border-color: var(--border-2); }
.trust-bar .item .ic {
    width: 36px; height: 36px;
    background: rgba(26,86,219,0.08);
    color: var(--accent);
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.trust-bar .item .t { font-size: 13px; font-weight: 600; }
.trust-bar .item .s { font-size: 12px; color: var(--muted); margin-top: 1px; }

/* ============ TOOLBAR V2 ============ */
.toolbar-v2 {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.toolbar-v2 h2 {
    margin: 0; font-size: 22px; font-weight: 700;
    letter-spacing: -0.01em;
}
.toolbar-v2 h2 small {
    color: var(--muted); font-weight: 500; font-size: 14px; margin-left: 6px;
}
.cat-chips {
    list-style: none; padding: 0; margin: 0;
    display: flex; gap: 6px; flex-wrap: wrap;
}
.cat-chips li {
    font-size: 13px; font-weight: 500;
    color: var(--muted);
    background: var(--card);
    border: 1px solid var(--border);
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 180ms;
}
.cat-chips li:hover { color: var(--text); border-color: var(--border-2); }
.cat-chips li.active {
    background: var(--accent); color: #fff; border-color: var(--accent);
}

.section-title { font-size: 26px; margin: 0 0 24px; }

.select-mini, select, input, textarea {
    background: var(--card); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 10px 14px; font-size: 14px; font-family: inherit;
    transition: 0.2s; outline: none;
}
.select-mini { padding: 8px 12px; font-size: 13px; }
input:focus, select:focus, textarea:focus {
    border-color: var(--accent-2);
    box-shadow: 0 0 0 4px rgba(59,130,246,0.10);
}

/* ============ BOTÕES ============ */
.btn-primary {
    background: var(--accent);
    color: white; border: 0; padding: 12px 22px; border-radius: var(--radius-sm);
    font-weight: 600; cursor: pointer; transition: 0.2s; font-size: 14px;
    box-shadow: 0 4px 12px -4px rgba(26,86,219,0.35);
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px rgba(26,86,219,0.45);
    background: var(--accent-2);
}
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primary.btn-sm { padding: 8px 16px; font-size: 13px; }

.btn-ghost {
    background: var(--card); color: var(--text);
    border: 1px solid var(--border); padding: 12px 22px; border-radius: var(--radius-sm);
    cursor: pointer; transition: 0.2s; font-size: 14px; font-weight: 500;
}
.btn-ghost:hover { border-color: var(--accent-2); color: var(--accent); }

.btn-success { background: var(--green); color: white; }
.btn-danger  { background: var(--danger); color: white; }

/* ============ GRID DE PRODUTOS ============ */
.grid {
    display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* paleta por plataforma — usada como acento da capa e do anel */
.produto-card.plat-tiktok    { --plat-1: #ff2c55; --plat-2: #25f4ee; --plat-tint: rgba(255,44,85,.10); }
.produto-card.plat-instagram { --plat-1: #f58529; --plat-2: #dd2a7b; --plat-tint: rgba(221,42,123,.10); }
.produto-card.plat-facebook  { --plat-1: #1877f2; --plat-2: #4267B2; --plat-tint: rgba(24,119,242,.10); }
.produto-card.plat-youtube   { --plat-1: #ff0000; --plat-2: #cc0000; --plat-tint: rgba(255,0,0,.10); }
.produto-card.plat-kwai      { --plat-1: #ff7a00; --plat-2: #ffaa00; --plat-tint: rgba(255,122,0,.10); }
.produto-card.plat-default   { --plat-1: #1a56db; --plat-2: #3b82f6; --plat-tint: rgba(26,86,219,.10); }

.produto-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    display: flex; flex-direction: column;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    transition: transform 320ms cubic-bezier(.2,.8,.2,1),
                box-shadow 320ms cubic-bezier(.2,.8,.2,1),
                border-color 220ms;
    animation: cardIn 480ms cubic-bezier(.2,.8,.2,1) backwards;
    animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes cardIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.produto-card::before {
    content: ''; position: absolute; inset: -1px;
    border-radius: inherit; padding: 1px;
    background: linear-gradient(135deg, var(--plat-1), var(--plat-2));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity 220ms;
    pointer-events: none; z-index: 1;
}
.produto-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px -22px rgba(15,23,42,.30),
                0 6px 14px -10px rgba(15,23,42,.18);
}
.produto-card:hover::before { opacity: .9; }

/* ===== capa ===== */
.produto-card .capa {
    aspect-ratio: 4/5;
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    isolation: isolate;
}
.produto-card .capa-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(120% 80% at 20% 0%, var(--plat-tint), transparent 60%),
        radial-gradient(120% 80% at 100% 100%, var(--plat-tint), transparent 60%),
        linear-gradient(135deg, #f7f9fc, #eef2f7);
    transition: transform 600ms cubic-bezier(.2,.8,.2,1);
}
.produto-card:hover .capa-bg { transform: scale(1.08); }
.produto-card .capa img {
    position: relative; z-index: 1;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}
.produto-card:hover .capa img { transform: scale(1.06); }
.produto-card .capa-fallback {
    position: relative; z-index: 1;
    width: 88px; height: 88px; border-radius: 50%;
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.8);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 30px -12px var(--plat-1);
    transition: transform 600ms cubic-bezier(.2,.8,.2,1);
}
.produto-card:hover .capa-fallback { transform: translateY(-2px) scale(1.05); }
.produto-card .capa-fallback .capa-icon {
    width: 40px; height: 40px; line-height: 0;
    color: var(--plat-1);
    display: inline-flex; align-items: center; justify-content: center;
}
.produto-card .capa-fallback .capa-icon svg { width: 100%; height: 100%; }
.produto-card .capa-overlay {
    position: absolute; inset: auto 0 0 0; height: 50%;
    background: linear-gradient(to top, rgba(15,23,42,.10), transparent);
    z-index: 2; pointer-events: none;
}

/* tag de categoria (canto sup esq) */
.produto-card .tag {
    position: absolute; top: 12px; left: 12px; z-index: 3;
    font-size: 10.5px; font-weight: 700;
    color: var(--plat-1);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(6px);
    padding: 5px 10px; border-radius: 999px;
    letter-spacing: 0.06em; text-transform: uppercase;
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 2px 8px rgba(15,23,42,.06);
}
.produto-card .fav {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    width: 32px; height: 32px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted);
    transition: transform 200ms, color 200ms, background 200ms;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15,23,42,.06);
}
.produto-card .fav:hover { color: #ef4444; transform: scale(1.08); }
.produto-card .fav:active { transform: scale(.94); }

/* badges status (canto inf esq capa) */
.produto-card .badge-status {
    position: absolute; bottom: 12px; left: 12px; z-index: 3;
    font-size: 10px; font-weight: 700;
    color: #fff;
    padding: 5px 10px; border-radius: 999px;
    letter-spacing: 0.06em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 5px;
    box-shadow: 0 4px 12px -2px rgba(15,23,42,.25);
}
.produto-card .badge-status.scarce  { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.produto-card .badge-status.premium { background: linear-gradient(135deg, #facc15, #f59e0b); color: #422006; }
.produto-card .badge-status.premium svg { color: #422006; }

/* badge verificado (canto inf dir capa) */
.produto-card .badge-verificado {
    position: absolute; bottom: 12px; right: 12px; z-index: 3;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(6px);
    color: var(--green);
    border: 1px solid rgba(5,150,105,.25);
    font-size: 10px; font-weight: 700;
    padding: 4px 9px 4px 7px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 4px;
    box-shadow: 0 2px 8px rgba(15,23,42,.06);
}
.produto-card .badge-verificado svg {
    background: var(--green); color: #fff;
    border-radius: 50%; padding: 1px;
    width: 13px; height: 13px;
}

/* ===== conteúdo ===== */
.produto-card .conteudo {
    padding: 14px 14px 14px;
    flex: 1; display: flex; flex-direction: column; gap: 10px;
}
.produto-card .handle {
    font-size: 12px; color: var(--muted);
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 500;
}
.produto-card .handle-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--plat-1);
    box-shadow: 0 0 0 3px var(--plat-tint);
}
.produto-card h4,
.produto-card .title {
    margin: 0; font-size: 15px; font-weight: 700;
    line-height: 1.3; color: var(--text);
    letter-spacing: -0.01em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    text-transform: capitalize;
}

/* legados que coexistem (perfil do vendedor usa .verificado simples) */
.produto-card .verificado {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    background: rgba(255,255,255,.95);
    color: var(--green);
    border: 1px solid rgba(5,150,105,.25);
    font-size: 10px; font-weight: 700;
    padding: 4px 10px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 4px;
    box-shadow: 0 2px 8px rgba(15,23,42,.06);
}
.produto-card .desc {
    color: var(--muted); font-size: 12px; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.produto-card .vendedor { font-size: 11px; color: var(--muted); }
.produto-card .nota-mini {
    font-size: 11px; color: var(--muted);
    display: inline-flex; align-items: center; gap: 4px;
}

/* métricas com ícone */
.produto-card .metrics {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 10px 8px;
    background: linear-gradient(180deg, var(--bg-2), #f1f4f9);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.produto-card .metrics .m {
    display: flex; align-items: center; gap: 7px;
    padding: 0 6px;
    position: relative;
    min-width: 0;
}
.produto-card .metrics .m + .m::before {
    content: ''; position: absolute; left: 0; top: 15%; bottom: 15%;
    width: 1px; background: var(--border);
}
.produto-card .metrics .m .ic {
    width: 22px; height: 22px; border-radius: 6px;
    background: rgba(255,255,255,.9);
    color: var(--plat-1);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.produto-card .metrics .m .vk { min-width: 0; line-height: 1.1; }
.produto-card .metrics .m .v {
    font-size: 12.5px; font-weight: 700; color: var(--text);
    font-feature-settings: 'tnum';
    white-space: nowrap;
}
.produto-card .metrics .m .k {
    font-size: 9.5px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}

/* rodapé com preço + CTA */
.produto-card .foot,
.produto-card .preco-row {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    gap: 10px;
}
.produto-card .preco-box {
    display: flex; flex-direction: column;
    line-height: 1.05; min-width: 0;
}
.produto-card .preco-label {
    font-size: 10px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    font-weight: 600;
}
.produto-card .preco {
    font-size: 20px; font-weight: 800; color: var(--text);
    letter-spacing: -0.02em;
    font-feature-settings: 'tnum';
    margin-top: 2px;
}
.produto-card .parcela {
    font-size: 10.5px; color: var(--muted);
    margin-top: 3px;
    font-feature-settings: 'tnum';
}
.produto-card .btn-buy,
.produto-card .go-btn {
    height: 36px;
    padding: 0 12px;
    background: linear-gradient(135deg, var(--plat-1), var(--plat-2));
    color: #fff;
    border: 0; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: transform 200ms, box-shadow 220ms, gap 220ms;
    box-shadow: 0 6px 16px -8px var(--plat-1);
    flex-shrink: 0;
}
.produto-card .go-btn .go-text {
    max-width: 0; overflow: hidden; opacity: 0;
    white-space: nowrap;
    transition: max-width 260ms cubic-bezier(.2,.8,.2,1), opacity 200ms 60ms;
}
.produto-card:hover .go-btn .go-text { max-width: 80px; opacity: 1; }
.produto-card:hover .go-btn { gap: 8px; transform: translateY(-1px); }
.produto-card .go-btn:active { transform: translateY(0) scale(.97); }

/* ===== skeleton loader ===== */
.produto-card.produto-skeleton {
    cursor: default; pointer-events: none;
    animation: cardIn 480ms cubic-bezier(.2,.8,.2,1) backwards;
}
.produto-card.produto-skeleton::before { display: none; }
.produto-card.produto-skeleton:hover { transform: none; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.sk, .sk-line, .sk-metrics, .sk-pill {
    background: linear-gradient(90deg, #eef2f7 0%, #f6f8fb 50%, #eef2f7 100%);
    background-size: 200% 100%;
    animation: skShimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
}
.produto-card.produto-skeleton .capa.sk { aspect-ratio: 4/5; border-radius: 0; }
.produto-card.produto-skeleton .conteudo { gap: 10px; }
.sk-line { height: 12px; border-radius: 4px; }
.sk-line.w30 { width: 30%; }
.sk-line.w40 { width: 40%; }
.sk-line.w60 { width: 60%; height: 10px; }
.sk-line.w80 { width: 85%; height: 16px; }
.sk-metrics { height: 50px; border-radius: 10px; }
.sk-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--border); }
.sk-pill { width: 70px; height: 32px; border-radius: 10px; }
@keyframes skShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== estado vazio ===== */
.vitrine-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 56px 24px;
    background: linear-gradient(180deg, var(--card), var(--bg-2));
    border: 1px dashed var(--border-2);
    border-radius: 16px;
}
.vitrine-empty-icon {
    width: 64px; height: 64px; margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--bg-2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px;
    box-shadow: inset 0 0 0 1px var(--border);
}
.vitrine-empty h3 { margin: 0 0 6px; font-size: 16px; color: var(--text); }
.vitrine-empty p  { margin: 0; color: var(--muted); font-size: 13px; }

@media (max-width: 1080px) {
    .hero-v2 { padding: 36px 24px; min-height: 320px; }
    .hero-v2 .hero-card { max-width: 480px; }
    .trust-bar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .hero-v2 {
        padding: 28px 20px;
        min-height: auto;
        background-position: center top;
        background-size: cover;
    }
    .hero-v2::before {
        background: linear-gradient(180deg,
            rgba(7, 12, 30, 0.92) 0%,
            rgba(15, 23, 60, 0.86) 45%,
            rgba(26, 36, 90, 0.78) 100%);
        backdrop-filter: blur(2px);
        inset: 0;
    }
    .hero-v2 .hero-text { max-width: 100%; }
    .hero-v2 h1 {
        font-size: 28px;
        color: #ffffff;
        text-shadow: 0 2px 12px rgba(0,0,0,0.5);
    }
    .hero-v2 p {
        color: rgba(255,255,255,0.92);
        font-size: 14.5px;
        text-shadow: 0 1px 6px rgba(0,0,0,0.4);
    }
    .grad {
        background: linear-gradient(135deg, #7aa6ff, #a8c4ff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .hero-pill {
        background: rgba(255,255,255,0.14);
        color: #ffffff;
        border: 1px solid rgba(255,255,255,0.28);
        padding: 8px 14px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    .hero-pill::before { background: #60a5fa; box-shadow: 0 0 8px #60a5fa; }
    .hero-stats-v2 {
        gap: 10px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 14px;
        padding: 14px 10px;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .hero-stats-v2 .item {
        text-align: center;
        background: transparent;
        border: none;
        padding: 0;
        box-shadow: none;
        border-radius: 0;
        display: block;
    }
    .hero-stats-v2 .item .num { color: #ffffff !important; font-size: 20px; }
    .hero-stats-v2 .item .num em { color: #7aa6ff !important; }
    .hero-stats-v2 .item .lbl { color: rgba(255,255,255,0.78) !important; font-size: 12px; }
    .hero-cta .btn-secondary,
    .hero-cta button.btn-secondary {
        background: rgba(255,255,255,0.12);
        color: #ffffff;
        border: 1px solid rgba(255,255,255,0.28);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
    .trust-bar { grid-template-columns: 1fr 1fr; }
    .toolbar-v2 h2 { font-size: 18px; }
    .produto-card h4,
    .produto-card .title { font-size: 13.5px; min-height: 2.4em; }
    .produto-card .preco { font-size: 17px; }
    .produto-card .conteudo { padding: 12px; gap: 8px; }
    .produto-card .metrics { padding: 8px 6px; }
    .produto-card .metrics .m { padding: 0 4px; gap: 5px; }
    .produto-card .metrics .m .ic { width: 20px; height: 20px; }
    .produto-card .metrics .m .v { font-size: 11.5px; }
    .produto-card .metrics .m .k { font-size: 9px; }
    .produto-card .go-btn .go-text { display: none; }
    .produto-card .go-btn { padding: 0 10px; }
}

/* ============ VIEWS ============ */
.view { display: none; padding: 24px 0 64px; }
.view.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============ PAINEL VENDEDOR ============ */
.painel-header {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 16px; margin-bottom: 20px;
}

.kpi-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 24px;
}
.kpi-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 16px 18px;
    display: flex; flex-direction: column; gap: 6px;
    transition: border-color .2s, transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.kpi-card:hover { border-color: var(--accent-2); transform: translateY(-1px); }
.kpi-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.kpi-valor { font-size: 22px; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--text); }

.painel-grid {
    display: grid; gap: 20px;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    align-items: start;
}
.painel-col-form { position: sticky; top: 88px; min-width: 0; overflow: hidden; }
.painel-col-listas { display: grid; gap: 20px; min-width: 0; }
.painel-grid .full { grid-column: 1 / -1; }

.card-header {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}

.card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.card h3 {
    margin: 0 0 18px; font-size: 16px; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
}

/* MP CARD */
.mp-card {
    display: flex; justify-content: space-between; align-items: center;
    background: linear-gradient(135deg, rgba(0,177,234,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(0,177,234,0.2);
    margin-bottom: 24px;
    flex-wrap: wrap; gap: 16px;
}
.mp-card-info {
    display: flex; align-items: center; gap: 16px;
}
.mp-logo { width: 48px; height: 48px; }
.mp-logo svg { width: 100%; height: 100%; }
.mp-card h3 { margin: 0 0 2px; font-size: 16px; }
.mp-card p { margin: 0; color: var(--muted); font-size: 13px; }
.mp-card.conectado {
    background: linear-gradient(135deg, rgba(5,150,105,0.06), rgba(255,255,255,0.02));
    border-color: rgba(5,150,105,0.25);
}

/* ============ FORMS ============ */
.form { display: flex; flex-direction: column; gap: 12px; }
.form .row-2 { display: grid; grid-template-columns: 1fr 160px; gap: 12px; }
.form .row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .form .row-3 { grid-template-columns: 1fr; } }
.login-form { text-align: left; }
.login-form .center { text-align: center; }
.login-form a { color: var(--accent); }
.hint { color: var(--muted); font-size: 12px; margin: 0; }
.hint.center, .center { text-align: center; }

/* ============ UPLOAD ZONE ============ */
.upload-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 24px; text-align: center;
    cursor: pointer; transition: 0.2s;
    background: var(--card);
}
.upload-zone:hover, .upload-zone.dragover {
    border-color: var(--accent-2);
    background: rgba(59,130,246,0.04);
}
.upload-prompt .upload-icon { font-size: 36px; margin-bottom: 8px; }
.upload-prompt strong { display: block; font-size: 14px; margin-bottom: 4px; }
.upload-preview {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px; margin-top: 14px;
}
.upload-preview:empty { display: none; }
.upload-preview .thumb {
    position: relative; aspect-ratio: 1;
    border-radius: 8px; overflow: hidden;
    border: 1px solid var(--border);
}
.upload-preview .thumb img { width: 100%; height: 100%; object-fit: cover; }
.upload-preview .thumb button {
    position: absolute; top: 4px; right: 4px;
    background: rgba(0,0,0,0.6); border: 0; color: white;
    width: 22px; height: 22px; border-radius: 50%;
    cursor: pointer; font-size: 14px;
}

.bloco-tipo {
    display: grid; gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-2);
    margin-bottom: 14px;
    min-width: 0; overflow: hidden;
}
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .row-2 { grid-template-columns: 1fr; } }

/* ============ EXTRAS PÚBLICOS NO MODAL ============ */
.extras-lista {
    list-style: none; padding: 0; margin: 8px 0 12px;
    display: grid; gap: 6px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.extras-lista li {
    background: var(--bg-2);
    border: 1px solid var(--border);
    padding: 8px 10px; border-radius: 8px;
    font-size: 13px;
}

/* ============ ENTREGA POR TIPO ============ */
.campo-entrega { margin: 6px 0; word-break: break-word; }
.campo-entrega code {
    background: var(--bg-2);
    padding: 2px 8px; border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
}
.campo-entrega a { color: var(--accent); text-decoration: underline; }
.conteudo-revelado pre {
    white-space: pre-wrap;
    background: var(--bg-2);
    padding: 10px; border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    margin: 6px 0;
    color: var(--text);
}

/* ============ CATEGORIA CHIPS (home dinâmica) ============ */
.cat-list li.empty { opacity: 0.45; pointer-events: none; }
.cat-list li .cat-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--muted);
    background: var(--bg-2);
    padding: 2px 8px; border-radius: 999px;
}
.cat-list li { display: flex; align-items: center; gap: 6px; }

/* ============ LISTAS ============ */
.lista-compras, .lista-produtos, .lista-vendas, .lista-pendentes {
    display: grid; gap: 12px;
}
.item {
    background: var(--card); border: 1px solid var(--border);
    padding: 18px; border-radius: var(--radius-sm);
    display: flex; flex-direction: column; gap: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.item-header {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 8px;
}
.item-row { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.item-row img {
    width: 64px; height: 64px; border-radius: 8px;
    object-fit: cover; flex-shrink: 0;
}
.badge {
    font-size: 10px; padding: 4px 10px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
}
.item-img-fallback {
    width: 64px; height: 64px; border-radius: 8px;
    background: var(--bg-2); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; opacity: .5; flex-shrink: 0;
}
.item-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.item-titulo-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; flex-wrap: wrap;
}
.item-titulo-row strong {
    font-size: 14px; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis;
}
.item-meta {
    display: flex; flex-wrap: wrap; gap: 6px 12px;
    font-size: 12px; color: var(--muted);
    align-items: center;
}
.item-meta-preco { color: var(--accent); font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.item-meta-estoque { padding: 2px 8px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--border); }
.item-meta-estoque.estoque-baixo  { color: var(--warn); border-color: rgba(217,119,6,0.3); background: rgba(217,119,6,0.06); }
.item-meta-estoque.estoque-zerado { color: var(--danger); border-color: rgba(220,38,38,0.3); background: rgba(220,38,38,0.06); }
.item-acoes { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; border-top: 1px dashed var(--border); }

.motivo-rejeicao {
    padding: 10px 12px; border-radius: 8px;
    background: rgba(220,38,38,0.06); border: 1px solid rgba(220,38,38,0.2);
    color: var(--danger); font-size: 13px;
}

.produto-rejeitado {
    border: 1px solid rgba(220,38,38,0.35) !important;
    box-shadow: 0 0 0 3px rgba(220,38,38,0.06);
    background: linear-gradient(180deg, rgba(220,38,38,0.04), transparent 60%);
}
.motivo-rejeicao-box {
    padding: 12px 14px; border-radius: 10px;
    background: rgba(220,38,38,0.07);
    border: 1px solid rgba(220,38,38,0.25);
    display: flex; flex-direction: column; gap: 6px;
}
.motivo-rejeicao-titulo {
    font-weight: 700; color: var(--danger); font-size: 13px;
}
.motivo-rejeicao-texto {
    color: #7a1d1d; font-size: 14px; line-height: 1.45;
    white-space: pre-wrap; word-break: break-word;
}
.motivo-rejeicao-cta {
    color: var(--text-muted); font-size: 12.5px;
}

.editar-motivo-box {
    padding: 12px 14px; border-radius: 10px;
    background: rgba(220,38,38,0.07);
    border: 1px solid rgba(220,38,38,0.25);
    display: flex; flex-direction: column; gap: 6px;
    margin: 4px 0 8px;
}
.editar-motivo-header { font-weight: 700; color: var(--danger); font-size: 13px; }
.editar-motivo-texto { color: #7a1d1d; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.editar-motivo-cta { color: var(--text-muted); font-size: 12.5px; }

.venda-item { gap: 12px; }
.venda-valores {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 10px 12px; border-radius: 8px;
    background: var(--bg-2); border: 1px solid var(--border);
}
.venda-val { display: flex; flex-direction: column; gap: 2px; }
.venda-val strong { font-family: 'JetBrains Mono', monospace; font-size: 14px; }
.venda-val-receber strong { color: var(--green); }

.badge-pendente   { background: rgba(217,119,6,0.10);  color: var(--warn); }
.badge-aprovado   { background: rgba(5,150,105,0.10);  color: var(--green); }
.badge-rejeitado  { background: rgba(220,38,38,0.10);  color: var(--danger); }
.badge-pago       { background: rgba(5,150,105,0.10);  color: var(--green); }
.badge-aguardando { background: rgba(26,86,219,0.10);  color: var(--accent); }
.badge-cancelado  { background: rgba(220,38,38,0.10);  color: var(--danger); }
.badge-liberado   { background: rgba(5,150,105,0.12);  color: var(--green); }
.badge-arquivado  { background: rgba(107,114,128,0.10); color: var(--muted); }

.conteudo-revelado {
    margin-top: 8px; padding: 14px;
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    border-radius: 10px;
    font-family: 'JetBrains Mono', monospace; font-size: 13px;
    word-break: break-all; color: var(--text);
}

/* ============ ADMIN ============ */
.admin-resumo {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom: 32px;
}
.resumo-card {
    background: var(--card); border: 1px solid var(--border);
    padding: 22px; border-radius: var(--radius);
    transition: 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.resumo-card:hover { border-color: var(--border-2); }
.resumo-card .label {
    color: var(--muted); font-size: 11px;
    text-transform: uppercase; letter-spacing: 1.5px;
}
.resumo-card .valor {
    font-size: 28px; font-weight: 800; margin-top: 6px;
    color: var(--accent);
}

/* ============ MODAL ============ */
.modal {
    display: none; position: fixed; inset: 0; z-index: 100;
    background: rgba(0,0,0,0.45); backdrop-filter: blur(8px);
    align-items: center; justify-content: center; padding: 20px;
    animation: fadeIn 0.2s ease;
}
.modal.show { display: flex; }
.modal-content {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 32px;
    max-width: 460px; width: 100%; position: relative;
    text-align: center; max-height: 92vh; overflow-y: auto;
    box-shadow: 0 20px 60px -20px rgba(0,0,0,0.2);
}
#modalEditar .modal-content {
    max-width: 720px; text-align: left;
}
#modalEditar .form-grid { text-align: left; }
#modalEditar .form-grid textarea { min-height: 110px; }
.modal-close {
    position: absolute; top: 14px; right: 16px; background: transparent;
    border: 0; color: var(--muted); font-size: 28px; cursor: pointer;
    transition: 0.2s; line-height: 1;
}
.modal-close:hover { color: var(--text); }

/* PIX modal */
.pix-modal { max-width: 420px; }
.pix-header {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; margin-bottom: 8px;
}
.pix-icon { font-size: 24px; }
.pix-qr { margin: 16px auto; max-width: 240px; }
.pix-qr img {
    width: 100%; border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
#pixCopiaCola {
    width: 100%; background: var(--bg-2); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px;
    margin-bottom: 12px; resize: none;
}
.status-pix { margin-top: 16px; font-size: 14px; }
.status-pix #pixStatus { font-weight: 700; color: var(--accent); }

/* PIX Timer */
.pix-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 20px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--accent);
}
.pix-timer-icon { font-size: 18px; }
.pix-timer.warning { color: var(--warn); }
.pix-timer.critical { color: var(--danger); animation: pulse 1s ease-in-out infinite; }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.pix-expirado {
    margin-top: 16px;
    padding: 16px;
    background: rgba(220,38,38,0.06);
    border: 1px solid rgba(220,38,38,0.2);
    border-radius: var(--radius-sm);
    color: var(--danger);
    text-align: center;
}
.pix-expirado p { margin: 6px 0 0; font-size: 13px; color: var(--muted); }

.separador {
    text-align: center; color: var(--muted); font-size: 11px;
    margin: 22px 0 14px; letter-spacing: 3px;
    display: flex; align-items: center; gap: 14px;
}
.separador::before, .separador::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}

/* PRODUTO MODAL */
.produto-modal { max-width: 880px; text-align: left; }
.produto-modal-grid {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px;
}
.produto-galeria { display: flex; flex-direction: column; gap: 8px; }
.galeria-main {
    aspect-ratio: 16/10;
    border-radius: var(--radius-sm); overflow: hidden;
    background: var(--bg-2);
    cursor: zoom-in;
}
.galeria-main img { width: 100%; height: 100%; object-fit: cover; }
.galeria-thumbs {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}
.galeria-thumbs .thumb {
    aspect-ratio: 1; border-radius: 6px; overflow: hidden;
    cursor: pointer; opacity: 0.6; transition: 0.2s;
    border: 2px solid transparent;
}
.galeria-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; }
.galeria-thumbs .thumb:hover, .galeria-thumbs .thumb.active {
    opacity: 1; border-color: var(--accent);
}
.produto-info h2 { margin: 6px 0 8px; font-size: 24px; }
.produto-info .vendedor { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.produto-info .desc {
    color: var(--text); opacity: 0.85; font-size: 14px; line-height: 1.6;
    margin: 0 0 24px;
}
.produto-info .cat {
    font-size: 11px; color: var(--accent); font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
}
.produto-modal-cta {
    display: flex; justify-content: space-between; align-items: center;
    gap: 14px; padding-top: 18px; border-top: 1px solid var(--border);
}
.preco-modal {
    font-size: 32px; font-weight: 800; color: var(--green);
}

/* ============ LIGHTBOX ============ */
.lightbox {
    display: none; position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.92);
    align-items: center; justify-content: center;
    padding: 40px;
}
.lightbox.show { display: flex; }
.lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 8px; }
.lightbox-close, .lightbox-prev, .lightbox-next {
    position: absolute; background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.15); color: white;
    width: 48px; height: 48px; border-radius: 50%;
    font-size: 24px; cursor: pointer; transition: 0.2s;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
    background: rgba(255,255,255,0.25);
}
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev  { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 24px; top: 50%; transform: translateY(-50%); }

/* ============ TOAST ============ */
.toast {
    position: fixed; bottom: 24px; left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--card); border: 1px solid var(--border);
    padding: 14px 22px; border-radius: 12px; z-index: 250;
    transition: 0.3s; opacity: 0; pointer-events: none;
    box-shadow: 0 8px 24px -8px rgba(0,0,0,0.12);
    font-size: 14px; font-weight: 500;
    color: var(--text);
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.error { border-color: var(--danger); color: var(--danger); }
.toast.success { border-color: var(--green); color: var(--green); }

/* ============ RESPONSIVO ============ */
@media (max-width: 1024px) {
    .topbar-inner { grid-template-columns: auto 1fr auto; }
    .nav { display: none; }
    .layout-grid { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .cat-list {
        flex-direction: row; overflow-x: auto;
        padding-bottom: 6px;
    }
    .cat-list li { white-space: nowrap; }
    .sidebar-promo { display: none; }
    .painel-grid { grid-template-columns: 1fr; }
    .painel-col-form { position: static; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .produto-modal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .topbar-inner { padding: 0 16px; gap: 12px; }
    .search-bar { display: none; }
    .mobile-search-toggle { display: flex; }
    .hero { padding: 36px 24px; }
    .hero-stats { gap: 18px; }
    .form .row-2 { grid-template-columns: 1fr; }
    main { padding: 0 16px 80px; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .kpi-valor { font-size: 18px; }
}

/* ============ MOBILE SEARCH ============ */
.mobile-search-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    width: 40px; height: 40px;
    border-radius: 10px;
    cursor: pointer;
    align-items: center; justify-content: center;
    transition: 0.2s;
}
.mobile-search-toggle:hover {
    color: var(--text);
    border-color: var(--accent-2);
}

.mobile-search-bar {
    display: none;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    position: sticky;
    top: 72px;
    z-index: 49;
    animation: fadeIn 0.2s ease;
}
.mobile-search-bar.show { display: block; }

.mobile-search-inner {
    display: flex;
    align-items: center;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    height: 44px;
    max-width: 600px;
    margin: 0 auto;
}
.mobile-search-inner .search-icon {
    padding: 0 12px;
    color: var(--muted);
    font-size: 14px;
}
.mobile-search-inner input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    padding: 0 8px 0 0;
}
.mobile-search-close {
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 22px;
    padding: 0 14px;
    cursor: pointer;
    line-height: 1;
}
.mobile-search-close:hover { color: var(--text); }

/* ============ VENDEDOR PERFIL — REDESIGN ============ */
.vendedor-hero {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: var(--bg-1);
    border: 1px solid var(--border);
    box-shadow: 0 8px 32px rgba(0,0,0,0.06);
    margin-bottom: 28px;
}
.vendedor-hero-cover {
    height: 160px;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(99,102,241,0.35), transparent 55%),
        radial-gradient(ellipse at 80% 70%, rgba(236,72,153,0.30), transparent 55%),
        linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    position: relative;
}
.vendedor-hero-cover::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 10% 90%, rgba(255,255,255,0.18) 1px, transparent 1.5px),
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.12) 1px, transparent 1.5px),
        radial-gradient(circle at 70% 60%, rgba(255,255,255,0.15) 1px, transparent 1.5px),
        radial-gradient(circle at 90% 30%, rgba(255,255,255,0.10) 1px, transparent 1.5px);
    background-size: 120px 120px, 80px 80px, 100px 100px, 140px 140px;
}
.vendedor-hero-content {
    display: flex;
    gap: 24px;
    padding: 18px 32px 28px;
    align-items: flex-start;
    position: relative;
}
.vendedor-hero-avatar {
    position: relative;
    flex-shrink: 0;
    margin-top: -84px;
}
.vendedor-hero-avatar img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 5px solid var(--bg-1);
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    background: var(--bg-2);
}
.vendedor-hero-check {
    position: absolute;
    bottom: 8px; right: 8px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid var(--bg-1);
    box-shadow: 0 4px 12px rgba(5,150,105,0.4);
    font-size: 16px;
}
.vendedor-hero-info {
    flex: 1;
    min-width: 0;
    padding-top: 4px;
}
.vendedor-hero-badges {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 8px;
}
.vendedor-nivel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid;
}
.vendedor-nivel.lvl-novato    { background: rgba(148,163,184,0.12); color: #64748b; border-color: rgba(148,163,184,0.3); }
.vendedor-nivel.lvl-confiavel { background: rgba(59,130,246,0.10);  color: #2563eb; border-color: rgba(59,130,246,0.3); }
.vendedor-nivel.lvl-pro       { background: rgba(139,92,246,0.10);  color: #7c3aed; border-color: rgba(139,92,246,0.3); }
.vendedor-nivel.lvl-mestre    { background: rgba(236,72,153,0.10);  color: #db2777; border-color: rgba(236,72,153,0.3); }
.vendedor-nivel.lvl-lendario  { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(245,158,11,0.4); }
.vendedor-badge-verif {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 700;
    background: rgba(5,150,105,0.10);
    color: var(--green);
    border: 1px solid rgba(5,150,105,0.3);
}
.vendedor-hero-nome {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
    word-break: break-word;
}
.vendedor-hero-meta {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 14px;
}
.vendedor-hero-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
}
.vendedor-hero-actions .btn-primary,
.vendedor-hero-actions .btn-ghost {
    font-size: 14px;
    padding: 10px 18px;
}

/* Stats grid */
.vendedor-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}
.vendedor-stat {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 18px;
    text-align: center;
    transition: 0.2s;
    position: relative;
    overflow: hidden;
}
.vendedor-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    border-color: var(--accent);
}
.vendedor-stat-icon {
    font-size: 28px;
    margin-bottom: 8px;
}
.vendedor-stat-valor {
    font-size: 26px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
    margin-bottom: 4px;
}
.vendedor-stat-label {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
}
.vendedor-stat-rating .vendedor-stat-valor {
    color: #f59e0b;
}

/* Sections */
.vendedor-section {
    margin-bottom: 36px;
}
.vendedor-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
}
.vendedor-section-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
}
.vendedor-section-count {
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
    background: var(--bg-2);
    padding: 4px 12px;
    border-radius: 999px;
}

/* Avaliações */
.vendedor-avaliacoes-lista {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.vendedor-aval-card {
    display: flex;
    gap: 14px;
    padding: 18px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: 0.2s;
}
.vendedor-aval-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.vendedor-aval-avatar {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2, #8b5cf6));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-size: 18px;
}
.vendedor-aval-body { flex: 1; min-width: 0; }
.vendedor-aval-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.vendedor-aval-head strong { font-size: 14px; color: var(--text); }
.vendedor-aval-data { font-size: 12px; color: var(--muted); }
.vendedor-aval-stars { margin-bottom: 6px; }
.vendedor-aval-produto {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
}
.vendedor-aval-texto {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .vendedor-hero-cover { height: 110px; }
    .vendedor-hero-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 20px 24px;
        gap: 12px;
    }
    .vendedor-hero-avatar {
        margin-top: -56px;
    }
    .vendedor-hero-avatar img { width: 110px; height: 110px; }
    .vendedor-hero-info { padding-top: 0; }
    .vendedor-hero-nome { font-size: 22px; }
    .vendedor-hero-actions { justify-content: center; }
    .vendedor-hero-badges { justify-content: center; }
    .vendedor-stat-valor { font-size: 22px; }
    .vendedor-section-header h2 { font-size: 17px; }
}

.vendedor-link {
    color: var(--accent) !important;
    text-decoration: none;
    transition: 0.2s;
}
.vendedor-link:hover {
    color: var(--accent-2) !important;
    text-decoration: underline;
}

/* ============ CHAT ============ */
.chat-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 0;
    height: 520px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.chat-conversas {
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 0;
}
.chat-conversa-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: 0.15s;
    border-bottom: 1px solid var(--border);
}
.chat-conversa-item:hover { background: var(--bg-2); }
.chat-conversa-item.active { background: rgba(26,86,219,0.06); }
.chat-conversa-item img {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
}
.chat-conversa-info { flex: 1; min-width: 0; }
.chat-conversa-info .nome {
    font-size: 14px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-conversa-info .preview {
    font-size: 12px; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-conversa-badge {
    background: var(--accent);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}

.chat-painel {
    display: flex; flex-direction: column;
}
.chat-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    display: flex; align-items: center; gap: 12px;
}
.chat-header img {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
}
.chat-mensagens {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg);
}
.chat-msg {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
}
.chat-msg.enviada {
    align-self: flex-end;
    background: var(--accent);
    color: white;
    border-bottom-right-radius: 4px;
}
.chat-msg.recebida {
    align-self: flex-start;
    background: var(--card);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}
.chat-msg .hora {
    display: block;
    font-size: 10px;
    opacity: 0.6;
    margin-top: 4px;
}

.chat-input {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--card);
}
.chat-input input {
    flex: 1;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
}
.chat-input input:focus {
    border-color: var(--accent-2);
}

.chat-badge {
    background: var(--accent);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    margin-left: 4px;
}

@media (max-width: 768px) {
    .chat-layout {
        grid-template-columns: 1fr;
        height: auto;
    }
    .chat-conversas {
        border-right: 0;
        border-bottom: 1px solid var(--border);
        max-height: 200px;
    }
    .chat-mensagens { min-height: 300px; }
}

/* ============ TOGGLE ESTOQUE ROTATIVO ============ */
.form-toggle-row {
    display: flex; align-items: center;
    padding: 10px 0;
}
.toggle-label {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; font-size: 14px; font-weight: 500;
}
.toggle-label input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}
.toggle-text { color: var(--text); }

#campoEstoqueRotativo textarea {
    width: 100%;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    line-height: 1.6;
}

/* ============ AVALIAÇÕES ============ */
.estrelas { color: #f59e0b; letter-spacing: 2px; font-size: 14px; }
.nota-mini { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0; font-size: 13px; }
.nota-mini small { opacity: 0.6; }
.produto-avaliacoes { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.produto-avaliacoes h4 { margin: 0 0 12px; }
.avaliacoes-resumo { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 16px; }
.avaliacao-item { padding: 12px 0; border-bottom: 1px solid var(--border); }
.avaliacao-item:last-child { border-bottom: 0; }
.avaliacao-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.avaliacao-item p { margin: 4px 0 0; font-size: 14px; opacity: 0.85; }
.avaliacao-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding: 14px; border: 1px dashed var(--border); border-radius: 12px; background: var(--card-2); }
.estrelas-input { display: flex; gap: 4px; }
.estrela-input { font-size: 26px; cursor: pointer; color: #d1d5db; transition: color 120ms; user-select: none; }
.estrela-input.on, .estrela-input:hover { color: #f59e0b; }
.avaliacao-feita { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--card-2); display: flex; flex-direction: column; gap: 4px; }
.btn-sm { padding: 8px 14px; font-size: 13px; align-self: flex-start; }

/* ===== Form grid (modal editar) ===== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.form-grid label .hint { font-weight: 400; }
.form-grid label.full { grid-column: 1 / -1; }
.form-grid input, .form-grid textarea { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); }
.form-grid input:focus, .form-grid textarea:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(59,130,246,0.10); }
.form-grid textarea { resize: vertical; min-height: 70px; }
.editar-acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.editar-acoes .btn-primary, .editar-acoes .btn-ghost { padding: 10px 18px; font-size: 14px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid select { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); }
.form-grid select:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(59,130,246,0.10); }

/* ===== Form inputs containment ===== */
.painel-col-form .card { overflow: hidden; }
.painel-col-form input,
.painel-col-form select,
.painel-col-form textarea { width: 100%; max-width: 100%; box-sizing: border-box; }

/* ===== Priority / Destaque badge ===== */
.badge-prioritario {
    background: rgba(245, 158, 11, 0.12); color: #b45309;
    font-size: 10px; padding: 4px 10px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.badge-prioritario-card {
    position: absolute; top: 8px; right: 8px;
    background: rgba(245, 158, 11, 0.9); color: #fff;
    font-size: 10px; padding: 3px 8px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
}

/* ===== Role badges ===== */
.badge-cliente  { background: rgba(107,114,128,0.10); color: #6b7280; }
.badge-vendedor { background: rgba(26,86,219,0.10); color: #1a56db; }
.badge-admin    { background: rgba(220,38,38,0.10); color: #dc2626; }

/* ===== Admin blocos / toolbars ===== */
.admin-bloco { margin-top: 32px; }
.admin-bloco:first-of-type { margin-top: 16px; }
.admin-bloco-header {
    display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px;
}
.admin-bloco-header h3 { margin: 0; }
.admin-bloco-count { color: var(--muted); font-size: 14px; font-weight: 500; }

.admin-toolbar, .admin-usuarios-toolbar {
    display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; align-items: center;
}
.admin-toolbar input[type="text"], .admin-usuarios-toolbar input[type="text"] {
    flex: 1; min-width: 200px; max-width: 400px; padding: 10px 14px;
    border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: var(--card); color: var(--text); font: inherit;
}
.admin-toolbar input[type="text"]:focus, .admin-usuarios-toolbar input[type="text"]:focus {
    outline: none; border-color: var(--accent-2);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
}
.admin-toolbar select, .admin-usuarios-toolbar select {
    padding: 10px 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--card);
    color: var(--text); font: inherit; cursor: pointer;
}
.admin-toolbar select:focus, .admin-usuarios-toolbar select:focus {
    outline: none; border-color: var(--accent-2);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
}
.admin-toolbar-check {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text); font-size: 14px; cursor: pointer; user-select: none;
}
.admin-toolbar-check input { cursor: pointer; }

/* ===== Admin tables ===== */
.admin-tabela-wrap {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.admin-table-scroll { width: 100%; overflow-x: auto; }
.admin-table {
    width: 100%; border-collapse: collapse; font-size: 14px;
}
.admin-table thead th {
    text-align: left; padding: 11px 16px; font-weight: 600;
    color: var(--muted); background: var(--card-2, var(--card));
    border-bottom: 1px solid var(--border);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    white-space: nowrap;
}
.admin-table thead th.th-sortable { cursor: pointer; user-select: none; transition: color 0.12s; }
.admin-table thead th.th-sortable:hover { color: var(--text); }
.admin-table tbody tr.row { cursor: pointer; transition: background 0.12s; }
.admin-table tbody tr.row:hover { background: rgba(59,130,246,0.05); }
.admin-table tbody tr.row.row-aberta { background: rgba(59,130,246,0.07); }
.admin-table td {
    padding: 14px 16px; border-top: 1px solid var(--border);
    vertical-align: middle;
}
.admin-table tbody tr:first-child td { border-top: none; }
.admin-table tbody tr.row + tr.row-detalhe[hidden] + tr.row td { border-top: 1px solid var(--border); }
.admin-table .col-chevron {
    width: 36px; text-align: center; color: var(--muted);
}
.admin-table .chevron {
    display: inline-block; transition: transform 0.15s; font-size: 12px;
}
.admin-table .cell-principal strong {
    display: block; font-size: 14px; font-weight: 600; color: var(--text);
    margin-bottom: 2px;
}
.admin-table .cell-principal .hint { font-size: 12.5px; }

.admin-table tr.row-detalhe td {
    background: rgba(0,0,0,0.025); padding: 18px 20px;
    border-top: 1px solid var(--border);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
}
.detalhe-grid {
    display: grid; gap: 20px;
    grid-template-columns: 1fr 220px;
    align-items: start;
}
.detalhe-info { min-width: 0; word-break: break-word; line-height: 1.55; }
.detalhe-info > div + div { margin-top: 4px; }
.detalhe-acoes {
    display: flex; flex-direction: column; gap: 10px; align-items: stretch;
}
.detalhe-acoes .btn-ghost,
.detalhe-acoes .btn-primary {
    width: 100%; text-align: center; padding: 9px 14px; font-size: 13px;
    font-weight: 500;
}
.detalhe-acoes .top-pos-select {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--card);
}
.detalhe-acoes .top-pos-select .hint { font-size: 13px; }
.detalhe-acoes .top-pos-select select {
    flex: 1; padding: 4px 6px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--card); color: var(--text);
    font: inherit;
}
.btn-ghost.btn-danger {
    background: var(--card);
    color: var(--danger);
    border-color: var(--danger);
}
.btn-ghost.btn-danger:hover {
    background: var(--danger); color: #fff; border-color: var(--danger);
}

@media (max-width: 640px) {
    .admin-table .col-secondary { display: none; }
    .admin-table thead th, .admin-table td { padding: 10px 10px; }
    .detalhe-grid { grid-template-columns: 1fr; }
    .detalhe-acoes { min-width: 0; }
}
.paginacao {
    display: flex; gap: 4px; justify-content: center;
    margin-top: 20px; flex-wrap: wrap; align-items: center;
}
.paginacao button {
    min-width: 36px; height: 36px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--card); color: var(--text);
    cursor: pointer; font: inherit; font-size: 14px; transition: all 0.15s;
}
.paginacao button:hover:not(:disabled):not(.pg-active) {
    background: var(--border);
}
.paginacao button.pg-active {
    background: var(--accent); color: #fff; border-color: var(--accent);
    font-weight: 600;
}
.paginacao button:disabled { opacity: 0.4; cursor: default; }
.paginacao .pg-ellipsis {
    min-width: 36px; height: 36px; display: flex; align-items: center;
    justify-content: center; color: var(--text); opacity: 0.5; font-size: 14px;
}

/* ============ AVISO MP NÃO CONECTADO ============ */
.aviso-mp {
    text-align: center;
    padding: 28px 20px 24px;
    background: linear-gradient(180deg, rgba(0,177,234,0.06) 0%, rgba(0,177,234,0.02) 100%);
    border: 1px dashed rgba(0,177,234,0.35);
    border-radius: var(--radius-sm);
    margin-top: 4px;
}
.aviso-mp-icon {
    font-size: 36px;
    margin-bottom: 8px;
    line-height: 1;
}
.aviso-mp h4 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.aviso-mp p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 16px;
}
.aviso-mp .btn-primary {
    width: 100%;
    background: #00B1EA;
    border-color: #00B1EA;
}
.aviso-mp .btn-primary:hover {
    background: #0099cc;
    border-color: #0099cc;
}

/* ============ FOOTER ============ */
.footer {
    margin-top: 80px;
    background: #ffffff;
    border-top: 1px solid var(--border);
    color: var(--text);
}
.footer-inner {
    max-width: 1280px; margin: 0 auto;
    padding: 56px 32px 32px;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 48px;
}
.footer-col h5 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--muted);
    font-weight: 700;
    margin: 0 0 16px;
}
.footer-col ul {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.footer-col ul a {
    color: var(--text);
    font-size: 14px;
    transition: color 0.15s ease;
}
.footer-col ul a:hover { color: var(--accent); }

.footer-brand .logo { margin-bottom: 14px; display: inline-flex; }
.footer-brand p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
    max-width: 320px;
    margin: 0 0 20px;
}
.footer-social {
    display: flex; gap: 10px;
}
.footer-social a {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: var(--card-2);
    border: 1px solid var(--border);
    color: var(--muted);
    transition: all 0.15s ease;
}
.footer-social a:hover {
    color: var(--accent);
    border-color: var(--border-2);
    transform: translateY(-1px);
}

.footer-bottom {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 32px 32px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    color: var(--muted);
    font-size: 13px;
}
.footer-pix { font-weight: 500; }

@media (max-width: 900px) {
    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        padding: 40px 24px 24px;
    }
    .footer-brand { grid-column: 1 / -1; }
    .footer-bottom { padding: 16px 24px 24px; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
    .footer-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ============ LEGAL PAGES ============ */
.legal-page { max-width: 760px; padding-bottom: 40px; }
.legal-page h3 {
    margin: 32px 0 12px;
    font-size: 18px;
    font-weight: 700;
}
.legal-page p, .legal-page li {
    color: var(--text);
    font-size: 15px;
    line-height: 1.7;
}
.legal-page ul { padding-left: 22px; margin: 8px 0 16px; }
.legal-page li { margin-bottom: 6px; }
.legal-page a { color: var(--accent); text-decoration: underline; }
.legal-updated {
    color: var(--muted);
    font-size: 13px;
    margin-top: -8px;
}

/* FAQ accordion */
.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.faq-item[open] { border-color: var(--border-2); }
.faq-item summary {
    padding: 14px 18px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    font-size: 22px; line-height: 1;
    color: var(--muted);
    transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: '−'; color: var(--accent); }
.faq-item p {
    padding: 0 18px 16px;
    margin: 0;
    color: var(--muted);
}

/* Passos numerados (Como vender / comprar) */
.passos-lista {
    list-style: none;
    counter-reset: passo;
    padding: 0;
    margin: 24px 0;
    display: grid; gap: 16px;
}
.passos-lista li {
    counter-increment: passo;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 18px 20px 18px 64px;
    position: relative;
}
.passos-lista li::before {
    content: counter(passo);
    position: absolute;
    left: 18px; top: 18px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
}
.passos-lista li strong {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
}
.passos-lista li p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

/* ============ TOP VENDEDORES ============ */
.top-vendedores { margin: 32px 0 24px; }
.top-vendedores .section-title {
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}
.top-vendedores-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 860px) {
    .top-vendedores-grid { grid-template-columns: 1fr; }
}

.top-vendedor-card {
    --rank-1: #f5b400;
    --rank-2: #94a3b8;
    --rank-3: #c97435;
    --rank-color: var(--rank-2);
    --rank-glow: rgba(148,163,184,0.18);

    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px 20px 20px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: transform .25s cubic-bezier(.2,.8,.2,1),
                box-shadow .25s cubic-bezier(.2,.8,.2,1),
                border-color .2s ease;
    isolation: isolate;
}
.top-vendedor-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--rank-glow), transparent 55%);
    opacity: .55;
    pointer-events: none;
    z-index: -1;
}
.top-vendedor-card::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--rank-color), transparent);
    opacity: .9;
}
.top-vendedor-card:hover,
.top-vendedor-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(15,23,42,0.10), 0 0 0 1px var(--rank-color);
    border-color: var(--rank-color);
    outline: none;
}

.top-vendedor-card.top-pos-1 {
    --rank-color: var(--rank-1);
    --rank-glow: rgba(245,180,0,0.18);
    background: linear-gradient(180deg, rgba(245,180,0,0.10), var(--card) 55%);
    border-color: rgba(245,180,0,0.40);
}
.top-vendedor-card.top-pos-2 {
    --rank-color: var(--rank-2);
    --rank-glow: rgba(148,163,184,0.18);
}
.top-vendedor-card.top-pos-3 {
    --rank-color: var(--rank-3);
    --rank-glow: rgba(201,116,53,0.18);
}

/* rank pill */
.top-rank {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 8px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 4px 14px rgba(15,23,42,0.06);
}
.top-rank-emoji { font-size: 18px; line-height: 1; }
.top-rank-pos {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: var(--rank-color);
    text-transform: uppercase;
}

/* avatar com aura */
.top-avatar-wrap {
    position: relative;
    width: 92px; height: 92px;
    margin: 4px 0 2px;
    display: flex; align-items: center; justify-content: center;
}
.top-avatar-aura {
    position: absolute; inset: -6px;
    border-radius: 50%;
    background: conic-gradient(from 220deg, var(--rank-color), transparent 70%, var(--rank-color));
    opacity: .55;
    filter: blur(3px);
    animation: topAvatarSpin 8s linear infinite;
}
.top-vendedor-card.top-pos-1 .top-avatar-aura { opacity: .75; }
@keyframes topAvatarSpin {
    to { transform: rotate(360deg); }
}
.top-avatar-img {
    position: relative;
    width: 84px; height: 84px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-2);
    border: 3px solid var(--card);
    box-shadow: 0 6px 18px rgba(15,23,42,0.12);
    z-index: 1;
}

/* nome + verificado */
.top-nome {
    margin: 2px 0 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px;
}
.top-badges {
    display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
    min-height: 22px;
}
.top-badges-spacer { min-height: 22px; }
.top-badge-verificado {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(5,150,105,0.10);
    color: var(--green);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    border: 1px solid rgba(5,150,105,0.25);
}

/* stats */
.top-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    margin-top: 4px;
    padding: 12px 8px;
    border-radius: 12px;
    background: var(--bg-2);
}
.top-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
}
.top-stat-valor {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.top-stat-decor {
    font-size: 14px;
    color: var(--rank-color);
}
.top-stat-vazio { color: var(--muted); font-weight: 600; }
.top-stat-rotulo {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.top-stat-divisor {
    width: 1px;
    align-self: stretch;
    background: var(--border);
}

.top-estrelas {
    display: inline-flex;
    gap: 1px;
    font-size: 14px;
    color: var(--rank-color);
    margin-top: -4px;
}
.top-estrelas .star-empty { color: var(--border); }

.top-cta {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .2s ease;
}
.top-vendedor-card:hover .top-cta { gap: 10px; }

@media (max-width: 480px) {
    .top-avatar-wrap { width: 80px; height: 80px; }
    .top-avatar-img { width: 72px; height: 72px; }
    .top-stat-valor { font-size: 18px; }
}

/* ============ ESCOLHA DE PAGAMENTO ============ */
.escolha-pagamento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 16px;
}
@media (max-width: 520px) {
    .escolha-pagamento { grid-template-columns: 1fr; }
}
.escolha-pagamento button {
    padding: 18px 14px;
    border-radius: 12px;
    border: 1px solid var(--border, #e5e7eb);
    background: var(--surface, #fff);
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color .15s, transform .15s;
}
.escolha-pagamento button:hover {
    border-color: var(--primary, #6366f1);
    transform: translateY(-2px);
}
.escolha-pagamento .ico { font-size: 22px; }
.escolha-pagamento small {
    font-weight: 400;
    color: var(--muted);
    font-size: 12px;
}

/* ============ KYC (verificação de identidade) ============ */
#view-kyc { padding-top: 28px; }

.kyc-hero {
    display: flex; gap: 18px; align-items: flex-start;
    background: linear-gradient(135deg, rgba(26,86,219,0.06), rgba(59,130,246,0.04));
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 16px;
}
.kyc-hero-icon {
    flex: 0 0 56px;
    width: 56px; height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    box-shadow: 0 8px 24px rgba(26,86,219,0.25);
}
.kyc-hero-title { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--text); }
.kyc-hero-sub { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

.kyc-trust {
    list-style: none; margin: 0 0 20px; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px;
}
.kyc-trust li {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px; color: var(--text); font-weight: 500;
}
.kyc-trust li span { font-size: 14px; }

.kyc-status-box {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 18px;
}
.kyc-status-box .kyc-status-icon {
    flex: 0 0 40px; width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    background: var(--bg-2);
}
.kyc-status-rotulo { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.kyc-status-detalhe { margin: 0 0 10px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.kyc-status-body button { margin-top: 4px; }

.kyc-status-muted   .kyc-status-icon { background: rgba(107,114,128,0.10); color: var(--muted); }
.kyc-status-warn    .kyc-status-icon { background: rgba(217,119,6,0.12);  color: var(--warn); }
.kyc-status-warn    { border-color: rgba(217,119,6,0.30); }
.kyc-status-success .kyc-status-icon { background: rgba(5,150,105,0.12);  color: var(--green); }
.kyc-status-success { border-color: rgba(5,150,105,0.30); }
.kyc-status-danger  .kyc-status-icon { background: rgba(220,38,38,0.10);  color: var(--danger); }
.kyc-status-danger  { border-color: rgba(220,38,38,0.30); }

.kyc-form-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}

/* stepper */
.kyc-stepper {
    list-style: none; padding: 0; margin: 0 0 24px;
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    position: relative;
}
.kyc-stepper-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--bg-2);
    color: var(--muted);
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: 0.18s;
    user-select: none;
}
.kyc-stepper-item:hover { background: var(--bg); }
.kyc-step-num {
    flex: 0 0 26px; width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--card);
    border: 1.5px solid var(--border);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.kyc-stepper-item.active {
    background: rgba(26,86,219,0.08);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--border-2);
}
.kyc-stepper-item.active .kyc-step-num {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.kyc-stepper-item.done {
    color: var(--green);
}
.kyc-stepper-item.done .kyc-step-num {
    background: var(--green); border-color: var(--green); color: #fff;
}
.kyc-stepper-item.done .kyc-step-num::before {
    content: '✓'; font-size: 14px;
}
.kyc-stepper-item.done .kyc-step-num > * { display: none; }

@media (max-width: 560px) {
    .kyc-stepper { grid-template-columns: 1fr; }
    .kyc-step-label { display: inline; }
}

/* steps */
.kyc-step {
    display: none;
    border: 0;
    padding: 0;
    margin: 0;
    animation: kycStepIn 220ms cubic-bezier(.2,.8,.2,1);
}
.kyc-step.active { display: block; }
@keyframes kycStepIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.kyc-step-title {
    font-size: 17px; font-weight: 700;
    margin: 0 0 4px; padding: 0;
    color: var(--text);
}
.kyc-step-hint {
    color: var(--muted); font-size: 13.5px;
    margin: 0 0 18px;
}

/* fields */
.kyc-field {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 14px;
}
.kyc-field-label {
    font-size: 12.5px; font-weight: 600;
    color: var(--text);
    text-transform: uppercase; letter-spacing: .4px;
}
.kyc-field input {
    font: inherit;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    transition: 0.15s;
}
.kyc-field input::placeholder { color: var(--muted); opacity: .6; }
.kyc-field input:focus {
    outline: none;
    border-color: var(--accent-2);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
}

/* dropzone */
.kyc-dropzone {
    display: block;
    position: relative;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    background: var(--bg);
    transition: 0.18s;
    margin-bottom: 18px;
}
.kyc-dropzone:hover { border-color: var(--accent-2); background: rgba(59,130,246,0.04); }
.kyc-dropzone.dragover {
    border-color: var(--accent);
    background: rgba(26,86,219,0.08);
    transform: scale(1.005);
}
.kyc-dropzone.preenchida {
    border-style: solid;
    border-color: rgba(5,150,105,0.40);
    background: rgba(5,150,105,0.04);
    cursor: default;
}
.kyc-dropzone-empty {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.kyc-dropzone-icon {
    font-size: 32px;
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--card);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 6px;
}
.kyc-dropzone-empty strong { font-size: 15px; color: var(--text); }
.kyc-dropzone-hint { color: var(--muted); font-size: 12.5px; }

.kyc-dropzone-preview {
    display: flex; gap: 16px; align-items: center;
    text-align: left;
}
.kyc-dropzone-preview img {
    width: 160px; height: 110px; object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-2);
    flex: 0 0 160px;
}
.kyc-dropzone-info {
    flex: 1;
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0;
}
.kyc-dropzone-name {
    font-weight: 600; font-size: 14px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kyc-dropzone-size { color: var(--muted); font-size: 12.5px; }
.kyc-dropzone-remove { white-space: nowrap; }

@media (max-width: 520px) {
    .kyc-dropzone-preview { flex-direction: column; align-items: stretch; text-align: center; }
    .kyc-dropzone-preview img { width: 100%; flex: 0 0 auto; height: 180px; }
}

/* actions */
.kyc-step-actions {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
    margin-top: 8px;
}
.kyc-step-actions-end { justify-content: flex-end; }
.kyc-step-actions .btn-primary { padding: 12px 22px; }
.kyc-step-actions .btn-ghost   { padding: 12px 18px; }

@media (max-width: 480px) {
    .kyc-hero { flex-direction: column; gap: 12px; }
    .kyc-form-card { padding: 18px; }
    .kyc-step-actions { flex-direction: column-reverse; align-items: stretch; }
    .kyc-step-actions .btn-primary, .kyc-step-actions .btn-ghost { width: 100%; }
}

/* ============ MINHAS COMPRAS — REDESIGN ============ */
.compras-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 28px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(236,72,153,0.06));
    border: 1px solid var(--border);
    border-radius: 18px;
    flex-wrap: wrap;
}
.compras-hero-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    box-shadow: 0 6px 18px rgba(99,102,241,0.35);
    flex-shrink: 0;
}
.compras-hero-text { flex: 1; min-width: 220px; }
.compras-hero-text h2 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
}
.compras-hero-text p { margin: 0; color: var(--muted); font-size: 14px; }
.compras-hero-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.compras-stat {
    display: flex; flex-direction: column; align-items: center;
    padding: 8px 16px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    min-width: 72px;
}
.compras-stat-valor {
    font-size: 18px; font-weight: 800; color: var(--text);
    line-height: 1.1;
}
.compras-stat-ok   { color: var(--green); }
.compras-stat-warn { color: var(--warn); }
.compras-stat-label {
    font-size: 11px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-top: 2px;
}

/* card */
.compra-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    transition: 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    position: relative;
}
.compra-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    border-color: var(--border-2, var(--border));
}
.compra-card[data-status="aguardando"] { border-left: 4px solid var(--accent); }
.compra-card[data-status="pago"],
.compra-card[data-status="liberado"]   { border-left: 4px solid var(--green); }
.compra-card[data-status="cancelado"]  { border-left: 4px solid var(--danger); opacity: 0.85; }

.compra-card-head {
    display: flex;
    gap: 16px;
    padding: 18px 20px;
    align-items: flex-start;
    border-bottom: 1px solid var(--border);
}
.compra-card-capa {
    flex-shrink: 0;
    width: 76px; height: 76px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--border);
}
.compra-card-capa img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.compra-capa-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; opacity: 0.5;
}
.compra-card-info { flex: 1; min-width: 0; }
.compra-card-titulo {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    word-break: break-word;
}
.compra-card-meta {
    display: flex; flex-wrap: wrap; gap: 6px 12px;
    align-items: center;
    font-size: 12.5px;
    color: var(--muted);
    margin-bottom: 10px;
}
.compra-meta-cat {
    background: var(--bg-2);
    color: var(--accent);
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.compra-meta-preco {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--text);
    font-size: 14px;
}
.compra-meta-data { color: var(--muted); }
.compra-card-vendedor {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--muted);
}
.compra-card-vendedor strong { color: var(--text); font-weight: 600; }
.compra-vendedor-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #8b5cf6);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}
.compra-status {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid;
    white-space: nowrap;
    align-self: flex-start;
}
.compra-status-aguardando { background: rgba(26,86,219,0.10);  color: var(--accent); border-color: rgba(26,86,219,0.25); }
.compra-status-pago,
.compra-status-liberado   { background: rgba(5,150,105,0.10);  color: var(--green);  border-color: rgba(5,150,105,0.25); }
.compra-status-cancelado  { background: rgba(220,38,38,0.10);  color: var(--danger); border-color: rgba(220,38,38,0.25); }

.compra-card-acoes {
    padding: 12px 20px;
    display: flex; gap: 8px; flex-wrap: wrap;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
}
.btn-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--bg-1);
    color: var(--text);
    border: 1px solid var(--border);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.15s;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}
.btn-mini:hover {
    background: var(--bg-2);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}
.btn-mini:active { transform: translateY(0); }

.btn-mini-warn {
    background: rgba(217,119,6,0.10) !important;
    color: var(--warn) !important;
    border-color: rgba(217,119,6,0.25) !important;
}
.btn-mini-warn:hover {
    background: rgba(217,119,6,0.18) !important;
    color: var(--warn) !important;
}
.btn-mini-ok {
    background: rgba(5,150,105,0.10) !important;
    color: var(--green) !important;
    border-color: rgba(5,150,105,0.25) !important;
}
.btn-mini-whatsapp {
    background: #25D366 !important;
    color: #fff !important;
    border-color: #25D366 !important;
    font-weight: 600;
    text-decoration: none;
}
.btn-mini-whatsapp:hover {
    background: #1ebe57 !important;
    color: #fff !important;
    border-color: #1ebe57 !important;
}
.btn-mini-revelar { font-family: inherit; }

.compra-entrega-acoes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.compra-entrega-credenciais[data-credencial-revelado="false"] .compra-entrega-conteudo {
    color: var(--muted);
    letter-spacing: 2px;
    user-select: none;
}
.compra-entrega-credenciais[data-credencial-revelado="true"] .compra-entrega-conteudo {
    color: var(--text);
    background: rgba(5,150,105,0.04);
}

/* entrega */
.compra-entrega {
    padding: 18px 20px;
}
.compra-entrega-pendente,
.compra-entrega-aguardando {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-2);
    color: var(--muted);
}
.compra-entrega-pendente p,
.compra-entrega-aguardando p { margin: 0; font-size: 14px; }
.compra-entrega-icone { font-size: 22px; }
.compra-entrega-liberada {
    background: linear-gradient(180deg, rgba(5,150,105,0.04), transparent);
}
.compra-entrega-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
    margin-bottom: 12px;
}
.compra-entrega-titulo {
    font-weight: 700;
    color: var(--green);
    font-size: 14px;
}
.compra-entrega-regiao {
    font-size: 12.5px;
    color: var(--muted);
    background: var(--bg-2);
    padding: 4px 10px;
    border-radius: 999px;
}
.compra-entrega-credenciais {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.compra-entrega-credenciais-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px;
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.compra-entrega-conteudo {
    margin: 0;
    padding: 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13.5px;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-all;
    background: transparent;
}
.compra-entrega-aviso {
    margin: 12px 0 0;
    padding: 10px 14px;
    font-size: 12.5px;
    color: var(--warn);
    background: rgba(217,119,6,0.06);
    border: 1px solid rgba(217,119,6,0.2);
    border-radius: 10px;
}

/* avaliação */
.compra-avaliacao-feita,
.compra-avaliacao-form {
    margin: 0 20px 20px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
}
.compra-avaliacao-form {
    border-style: dashed;
    display: flex; flex-direction: column; gap: 10px;
}
.compra-avaliacao-head {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; font-weight: 700; color: var(--text);
}
.compra-avaliacao-stars { font-size: 16px; }
.compra-avaliacao-comentario {
    margin: 8px 0 0;
    color: var(--text);
    font-size: 13.5px;
    font-style: italic;
    line-height: 1.5;
}
.compra-estrelas-input { font-size: 22px; }

/* vazia */
.compras-vazia {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-1);
    border: 1px dashed var(--border);
    border-radius: 18px;
}
.compras-vazia-icone { font-size: 56px; margin-bottom: 12px; opacity: 0.6; }
.compras-vazia h3 { margin: 0 0 6px; font-size: 18px; color: var(--text); }
.compras-vazia p { margin: 0 0 18px; color: var(--muted); }

@media (max-width: 640px) {
    .compras-hero { padding: 18px; gap: 14px; }
    .compras-hero-stats { width: 100%; }
    .compra-card-head { flex-wrap: wrap; }
    .compra-status { order: -1; margin-left: auto; }
    .compra-card-capa { width: 64px; height: 64px; }
    .compra-entrega-head { flex-direction: column; align-items: flex-start; }
    .compra-avaliacao-feita,
    .compra-avaliacao-form { margin: 0 14px 14px; }
}

/* === CAT CARDS === */
.cat-cards-section { margin: 40px 0 28px; }
.cat-cards-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.cat-cards-head-text { flex: 1 1 auto; min-width: 0; }
.cat-cards-head .section-title { margin: 0; }
.cat-cards-head .section-sub {
    color: var(--muted);
    font-size: 14px;
    margin: 6px 0 0;
}
.cat-cards-vertodas {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    padding: 6px 2px;
    transition: color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}
.cat-cards-vertodas:hover {
    color: var(--accent-2);
    transform: translateX(2px);
}
.cat-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}
.cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 22px 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-align: left;
    font-family: inherit;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.cat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 85% 15%, rgba(255,255,255,0.25), transparent 55%),
        radial-gradient(circle at 15% 90%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.cat-card > * { position: relative; z-index: 1; }
.cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px -12px rgba(0, 0, 0, 0.35);
}
.cat-card.active {
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.35), inset 0 0 0 2px rgba(255,255,255,0.7);
}

/* gradientes por marca — suaves, puxados ao branco */
.cat-card[data-card="TODAS"] {
    background: linear-gradient(140deg, #ffffff 0%, #f1f5ff 50%, #e0eaff 100%);
    border-color: rgba(29, 78, 216, 0.18);
}
.cat-card[data-card="TODAS"]::before { background: none; }
.cat-card[data-card="TODAS"] .cat-card-titulo { color: #0f172a; }
.cat-card[data-card="TODAS"] .cat-card-meta { color: #475569; }
.cat-card[data-card="TODAS"] .cat-card-btn {
    background: rgba(29, 78, 216, 0.10);
    border-color: rgba(29, 78, 216, 0.25);
    color: #1d4ed8;
}
.cat-card[data-card="TODAS"]:hover .cat-card-btn { background: rgba(29, 78, 216, 0.18); }
.cat-card[data-cat="FACEBOOK"] {
    background:
        linear-gradient(140deg, #ffffff 0%, #eef4ff 45%, #dbe7ff 100%);
    border-color: rgba(24, 119, 242, 0.18);
}
.cat-card[data-cat="INSTAGRAM"] {
    background:
        linear-gradient(140deg, #ffffff 0%, #fff5ed 35%, #ffe4ec 70%, #f7e1ff 100%);
    border-color: rgba(255, 0, 105, 0.15);
}
.cat-card[data-cat="TIKTOK"] {
    background:
        linear-gradient(140deg, #ffffff 0%, #eafbfb 40%, #f1f3f5 70%, #ffe4ea 100%);
    border-color: rgba(17, 17, 17, 0.12);
}
.cat-card[data-cat="FACEBOOK"]::before,
.cat-card[data-cat="INSTAGRAM"]::before,
.cat-card[data-cat="TIKTOK"]::before {
    background: none;
}
.cat-card[data-cat="FACEBOOK"] .cat-card-titulo,
.cat-card[data-cat="INSTAGRAM"] .cat-card-titulo,
.cat-card[data-cat="TIKTOK"] .cat-card-titulo { color: #0f172a; }
.cat-card[data-cat="FACEBOOK"] .cat-card-meta,
.cat-card[data-cat="INSTAGRAM"] .cat-card-meta,
.cat-card[data-cat="TIKTOK"] .cat-card-meta { color: #475569; }
.cat-card[data-cat="FACEBOOK"] .cat-card-btn {
    background: rgba(24, 119, 242, 0.10);
    border-color: rgba(24, 119, 242, 0.25);
    color: #1d4ed8;
}
.cat-card[data-cat="FACEBOOK"]:hover .cat-card-btn { background: rgba(24, 119, 242, 0.18); }
.cat-card[data-cat="INSTAGRAM"] .cat-card-btn {
    background: rgba(255, 0, 105, 0.08);
    border-color: rgba(255, 0, 105, 0.22);
    color: #c2185b;
}
.cat-card[data-cat="INSTAGRAM"]:hover .cat-card-btn { background: rgba(255, 0, 105, 0.14); }
.cat-card[data-cat="TIKTOK"] .cat-card-btn {
    background: rgba(17, 17, 17, 0.06);
    border-color: rgba(17, 17, 17, 0.18);
    color: #111;
}
.cat-card[data-cat="TIKTOK"]:hover .cat-card-btn { background: rgba(17, 17, 17, 0.10); }

.cat-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cat-card-logo {
    flex: 0 0 auto;
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 14px -6px rgba(0,0,0,0.35);
    transition: transform 0.25s ease;
    overflow: hidden;
}
.cat-card:hover .cat-card-logo { transform: scale(1.06) rotate(-2deg); }
.cat-card-logo svg { display: block; }
.cat-card-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.cat-card-titulo {
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.2px;
}
.cat-card-meta {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}
.cat-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    transition: background 0.2s ease, transform 0.2s ease;
}
.cat-card:hover .cat-card-btn {
    background: rgba(255,255,255,0.32);
    transform: translateX(2px);
}

@media (max-width: 640px) {
    .cat-cards-head { flex-direction: row; align-items: center; }
    .cat-cards-grid { grid-template-columns: 1fr; gap: 14px; }
    .cat-card { padding: 18px 18px 14px; gap: 14px; }
    .cat-card-logo { width: 50px; height: 50px; border-radius: 14px; }
    .cat-card-titulo { font-size: 17px; }
    .cat-card-btn { padding: 10px 14px; font-size: 13px; }
}

/* === MINI BANNER CTA (BLUE PRO) === */
.mini-cta {
    position: relative;
    margin: 18px 0;
    padding: 24px 28px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    overflow: hidden;
    isolation: isolate;
}
.mini-cta-light {
    background:
        radial-gradient(120% 180% at 100% 0%, rgba(96, 165, 250, 0.18) 0%, rgba(96, 165, 250, 0) 55%),
        radial-gradient(120% 180% at 0% 100%, rgba(37, 99, 235, 0.10) 0%, rgba(37, 99, 235, 0) 60%),
        linear-gradient(135deg, #f5f9ff 0%, #ffffff 60%, #eef4ff 100%);
    border: 1px solid rgba(37, 99, 235, 0.18);
    box-shadow:
        0 12px 28px -16px rgba(37, 99, 235, 0.30),
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
    color: #0f172a;
}
.mini-cta-light .mini-cta-icon {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border: 1px solid rgba(37, 99, 235, 0.4);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(37, 99, 235, 0.55), 0 1px 0 rgba(255,255,255,0.35) inset;
}
.mini-cta-light .mini-cta-text h3 { color: #0f172a; }
.mini-cta-light .mini-cta-text p { color: #475569; }

.mini-cta-blue {
    background:
        radial-gradient(120% 180% at 100% 0%, rgba(96, 165, 250, 0.45) 0%, rgba(96, 165, 250, 0) 55%),
        radial-gradient(120% 180% at 0% 100%, rgba(37, 99, 235, 0.55) 0%, rgba(37, 99, 235, 0) 60%),
        linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 45%, #2563eb 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 18px 40px -18px rgba(29, 78, 216, 0.55),
        0 2px 4px rgba(255, 255, 255, 0.08) inset,
        0 -1px 0 rgba(0, 0, 0, 0.15) inset;
    color: #fff;
}
.mini-cta-blue::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 80% at 85% 10%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(40% 60% at 10% 90%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
    z-index: -1;
}
.mini-cta-icon {
    flex: 0 0 auto;
    width: 60px; height: 60px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.25) inset;
}
.mini-cta-text { flex: 1 1 auto; min-width: 0; }
.mini-cta-text h3 {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}
.mini-cta-text p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}
.mini-cta-btn {
    flex: 0 0 auto;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    background: #fff;
    color: #1d4ed8;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.mini-cta-btn:hover {
    transform: translateY(-1px);
    background: #f8fafc;
    box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
@media (max-width: 640px) {
    .mini-cta {
        flex-direction: column;
        text-align: center;
        padding: 22px 18px;
        gap: 14px;
    }
    .mini-cta-btn { width: 100%; text-align: center; }
}

/* ============ NOVO PRODUTO (wizard) ============ */
.novo-produto-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    background: linear-gradient(135deg, #f0f5ff, #ffffff 70%);
    border: 1px solid var(--border-2);
    box-shadow: 0 8px 24px -16px rgba(26, 86, 219, 0.35);
}
.novo-produto-cta-info {
    display: flex; align-items: center; gap: 16px; min-width: 0;
}
.novo-produto-cta-icon {
    width: 52px; height: 52px; flex-shrink: 0;
    border-radius: 14px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(26, 86, 219, 0.6);
}
.novo-produto-cta h3 { margin: 0 0 2px; font-size: 18px; }
.novo-produto-cta p { margin: 0; font-size: 13px; }
.novo-produto-cta .btn-primary {
    padding: 12px 22px; font-weight: 600; white-space: nowrap;
}
@media (max-width: 640px) {
    .novo-produto-cta { flex-direction: column; align-items: stretch; text-align: left; }
    .novo-produto-cta .btn-primary { width: 100%; }
}

.painel-listas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 18px;
}
@media (max-width: 900px) { .painel-listas { grid-template-columns: 1fr; } }

/* Header da página */
.np-header {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "back trust"
        "text text";
    column-gap: 16px;
    row-gap: 12px;
    padding: 20px 0 18px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 22px;
}
.np-back {
    grid-area: back;
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 1px solid var(--border);
    padding: 8px 14px; border-radius: 999px;
    color: var(--text); cursor: pointer; font-size: 13px; font-weight: 500;
    transition: background 0.15s ease, border-color 0.15s ease;
    width: fit-content;
}
.np-back:hover { background: var(--bg-2); border-color: var(--accent-2); color: var(--accent); }
.np-header-text { grid-area: text; }
.np-header-text h2 {
    margin: 0 0 4px; font-size: 28px; font-weight: 800; letter-spacing: -0.02em;
}
.np-header-text p { margin: 0; color: #6b7280; font-size: 14px; }
.np-trust {
    grid-area: trust;
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
}
.np-trust li {
    font-size: 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    padding: 6px 12px; border-radius: 999px;
    color: #4b5563;
}
@media (max-width: 720px) {
    .np-header { grid-template-columns: 1fr; grid-template-areas: "back" "text" "trust"; }
    .np-trust { justify-content: flex-start; }
    .np-header-text h2 { font-size: 22px; }
}

/* Stepper */
.np-stepper {
    list-style: none; margin: 0 0 22px; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0; position: relative;
}
.np-step-item {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    color: #6b7280;
    cursor: default;
    position: relative;
    font-size: 13px; font-weight: 500;
}
.np-step-item:first-child { border-radius: 12px 0 0 12px; }
.np-step-item:last-child  { border-radius: 0 12px 12px 0; }
.np-step-item + .np-step-item { border-left: none; }
.np-step-num {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--bg-2); color: #6b7280;
    display: grid; place-items: center;
    font-size: 13px; font-weight: 700;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.np-step-item.active {
    color: var(--text);
    background: linear-gradient(180deg, #ffffff, #f0f5ff);
    border-color: var(--accent-2);
    box-shadow: inset 0 -3px 0 var(--accent);
}
.np-step-item.active .np-step-num {
    background: var(--accent); color: #fff; border-color: var(--accent);
}
.np-step-item.done { cursor: pointer; color: var(--text); }
.np-step-item.done .np-step-num {
    background: #16a34a; color: #fff; border-color: #16a34a;
}
.np-step-item.done .np-step-num::before { content: "✓"; }
.np-step-item.done .np-step-num > span { display: none; }
@media (max-width: 640px) {
    .np-step-label { display: none; }
    .np-step-item { justify-content: center; padding: 12px; }
}

/* Grid form + preview */
.np-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    align-items: start;
}
@media (max-width: 960px) { .np-grid { grid-template-columns: 1fr; } }

.np-form-col { min-width: 0; }
.np-form {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px 28px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.np-step {
    border: none; padding: 0; margin: 0;
    display: none;
}
.np-step.active { display: block; }
.np-step-title {
    font-size: 18px; font-weight: 700; margin: 0 0 4px; color: var(--text);
    padding: 0;
}
.np-step-hint { color: #6b7280; font-size: 13px; margin: 0 0 20px; }

/* Cards de categoria */
.np-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}
@media (max-width: 640px) { .np-cat-grid { grid-template-columns: 1fr; } }
.np-cat-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 10px;
    padding: 22px 16px 18px;
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.np-cat-card input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.np-cat-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-2);
    box-shadow: 0 12px 24px -16px rgba(26, 86, 219, 0.4);
}
.np-cat-card.selected {
    border-color: var(--accent);
    background: linear-gradient(180deg, #ffffff, #f0f5ff);
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.15);
}
.np-cat-card.selected::after {
    content: "✓"; position: absolute; top: 10px; right: 12px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); color: #fff;
    display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.np-cat-logo {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border-radius: 14px;
    color: #fff;
}
.np-cat-tiktok    { background: #000; }
.np-cat-instagram { background: linear-gradient(135deg, #f58529, #dd2a7b 50%, #8134af); }
.np-cat-facebook  { background: #1877f2; }
.np-cat-nome { font-weight: 700; font-size: 15px; color: var(--text); }
.np-cat-hint { font-size: 12px; color: #6b7280; }

/* Campos */
.np-field { display: block; margin-bottom: 16px; }
.np-field-label {
    display: block;
    font-size: 13px; font-weight: 600; color: var(--text);
    margin-bottom: 6px;
}
.np-field input,
.np-field textarea,
.np-field select {
    width: 100%;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 14px;
    font: inherit;
    color: var(--text);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.np-field input:focus,
.np-field textarea:focus,
.np-field select:focus {
    outline: none;
    border-color: var(--accent-2);
    background: var(--card);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.np-field-meta {
    display: block; margin-top: 6px;
    font-size: 12px; color: #6b7280;
}
.np-field-meta-strong { color: var(--accent); font-weight: 500; }

.np-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
@media (max-width: 640px) { .np-row-3 { grid-template-columns: 1fr; } }

.np-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 4px;
}
@media (max-width: 640px) { .np-row-2 { grid-template-columns: 1fr; } }

/* Radios em "pílulas" (criada por / restrição) */
.np-radio-group {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 4px;
}
.np-radio-pill {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    background: var(--bg-2);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px; font-weight: 500;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.np-radio-pill input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.np-radio-pill:hover {
    border-color: var(--accent-2);
    color: var(--accent);
}
.np-radio-pill:has(input:checked) {
    background: linear-gradient(180deg, #ffffff, #f0f5ff);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.12);
}

/* Público feminino + masculino */
.np-publico-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 640px) { .np-publico-grid { grid-template-columns: 1fr; } }
.np-publico-item {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.np-publico-item:focus-within {
    border-color: var(--accent-2);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    background: var(--card);
}
.np-publico-icon {
    font-size: 18px; font-weight: 700;
    color: var(--accent);
    width: 22px; text-align: center;
    flex-shrink: 0;
}
.np-publico-item input {
    flex: 1; min-width: 0;
    border: none; background: transparent;
    padding: 9px 0;
    font: inherit; font-weight: 600; color: var(--text);
    text-align: right;
}
.np-publico-item input:focus { outline: none; box-shadow: none; }
.np-publico-suffix {
    font-size: 12px; color: #6b7280;
    white-space: nowrap;
}

.np-field-meta-error {
    color: var(--danger);
    font-weight: 500;
}

.np-section-label {
    margin: 18px 0 10px;
    font-size: 13px; font-weight: 600; color: var(--text);
    display: flex; align-items: center; gap: 8px;
}
.np-section-opt {
    font-weight: 400; font-size: 12px; color: #9ca3af;
}

/* Preço com prefixo R$ */
.np-preco-input {
    position: relative;
    display: flex; align-items: stretch;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.np-preco-input:focus-within {
    border-color: var(--accent-2);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.np-preco-prefix {
    padding: 11px 14px;
    background: rgba(26, 86, 219, 0.08);
    color: var(--accent);
    font-weight: 700;
    border-right: 1px solid var(--border);
    display: grid; place-items: center;
}
.np-preco-input input {
    border: none; background: transparent; flex: 1;
    padding: 11px 14px;
    font-size: 16px; font-weight: 600;
    color: var(--text);
}
.np-preco-input input:focus { outline: none; box-shadow: none; }

/* Upload */
.np-upload-zone {
    margin-top: 4px;
}
.np-upload-preview .thumb {
    position: relative;
}
.np-upload-preview .thumb.is-capa {
    box-shadow: 0 0 0 2px var(--accent);
}
.thumb-badge {
    position: absolute; bottom: 4px; left: 4px;
    background: var(--accent); color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 2px 6px; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 0.04em;
}

/* Resumo final */
.np-resumo {
    background: linear-gradient(135deg, #f0fdf4, #ffffff 70%);
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 18px 20px;
    margin: 18px 0 6px;
}
.np-resumo h4 { margin: 0 0 10px; font-size: 15px; color: #166534; }
.np-resumo ul {
    list-style: none; margin: 0 0 10px; padding: 0;
    display: grid; gap: 6px;
    font-size: 13px; color: #166534;
}
.np-resumo .hint { margin: 0; font-size: 12px; }

/* Ações de passo */
.np-step-actions {
    display: flex; justify-content: space-between; gap: 12px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.np-step-actions-end { justify-content: flex-end; }
.np-step-actions .btn-primary,
.np-step-actions .btn-ghost {
    padding: 11px 22px; font-weight: 600;
}

/* Coluna preview */
.np-preview-col { min-width: 0; }
.np-preview-sticky {
    position: sticky; top: 90px;
}
.np-preview-titulo {
    margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--text);
}
.np-preview-sub { margin: 0 0 14px; font-size: 12px; color: #6b7280; }
.np-preview-card {
    pointer-events: none;
    box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.18);
}
.np-preview-img {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #f1f3f6, #e5e7eb);
    color: #9ca3af;
    font-size: 13px;
}
.np-preview-img img {
    width: 100%; height: 100%; object-fit: cover;
    position: absolute; inset: 0;
}
.np-preview-img-empty { padding: 12px; text-align: center; }
.np-preview-foot {
    margin: 12px 0 0; font-size: 11px; color: #9ca3af; text-align: center;
}
@media (max-width: 960px) {
    .np-preview-sticky { position: static; }
    .np-preview-card { max-width: 360px; margin: 0 auto; }
}

/* Tela de sucesso */
.np-sucesso {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 48px 32px;
    text-align: center;
    max-width: 520px;
    margin: 32px auto;
    box-shadow: 0 12px 32px -20px rgba(0, 0, 0, 0.18);
}
.np-sucesso-icon {
    width: 96px; height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #16a34a;
    display: grid; place-items: center;
    margin: 0 auto 22px;
    box-shadow: 0 12px 24px -12px rgba(34, 197, 94, 0.5);
}
.np-sucesso h2 { margin: 0 0 10px; font-size: 24px; font-weight: 800; }
.np-sucesso p { margin: 0 auto 24px; max-width: 420px; color: #4b5563; font-size: 14px; line-height: 1.55; }
.np-sucesso-acoes {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.np-sucesso-acoes .btn-primary,
.np-sucesso-acoes .btn-ghost {
    padding: 11px 22px; font-weight: 600;
}

/* ============================================================
   PÁGINA DO PRODUTO (.pp-*)
============================================================ */
.pp-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 20px 120px;
}
.pp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 18px;
}
.pp-breadcrumb a { color: var(--muted); }
.pp-breadcrumb a:hover { color: var(--accent); }
.pp-breadcrumb span[aria-hidden] { color: var(--border); }

.pp-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 28px;
    align-items: start;
}
.pp-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.pp-bloco {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.pp-bloco-titulo {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

/* Galeria */
.pp-galeria {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.pp-galeria-thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 520px;
    overflow-y: auto;
}
.pp-thumb {
    border: 2px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--card-2);
    cursor: pointer;
    padding: 0;
    width: 76px;
    height: 76px;
    transition: border-color 0.15s, transform 0.15s;
}
.pp-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.pp-thumb:hover { border-color: var(--accent-2); transform: translateY(-1px); }
.pp-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26,86,219,0.12); }

.pp-galeria-main {
    position: relative;
    aspect-ratio: 1 / 1;
    max-height: 520px;
    background: var(--card-2);
    border-radius: 12px;
    overflow: hidden;
    cursor: zoom-in;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pp-galeria-main img {
    width: 100%; height: 100%; object-fit: contain; background: #fff;
}
.pp-galeria-zoom {
    position: absolute;
    top: 12px; right: 12px;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--border);
    border-radius: 999px;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.pp-galeria-empty {
    background: var(--card-2);
    color: var(--muted);
}

/* Título / cabeçalho */
.pp-titulo-bloco h1 {
    margin: 8px 0 10px;
    font-size: 24px;
    line-height: 1.25;
    color: var(--text);
}
.pp-cat-badge {
    display: inline-block;
    background: rgba(26,86,219,0.08);
    color: var(--accent);
    border: 1px solid rgba(26,86,219,0.18);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pp-titulo-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 14px;
}
.pp-titulo-meta .estrelas { color: #f59e0b; letter-spacing: 1px; }
.pp-vendedor-link { color: var(--accent); font-weight: 600; }
.pp-vendedor-link:hover { text-decoration: underline; }
.pp-verificado {
    color: var(--green);
    font-size: 12px;
    font-weight: 700;
    background: rgba(5,150,105,0.10);
    padding: 2px 8px;
    border-radius: 999px;
}

/* Métricas */
.pp-metricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
.pp-metricas:empty { display: none; }
.pp-metrica {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.pp-metrica-ic {
    width: 38px; height: 38px;
    background: rgba(26,86,219,0.08);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.pp-metrica-v {
    font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.1;
}
.pp-metrica-k {
    font-size: 12px; color: var(--muted); margin-top: 2px;
}

.pp-descricao {
    color: var(--text);
    line-height: 1.6;
    white-space: pre-wrap;
    margin: 0;
}

/* Vendedor card */
.pp-vendedor-card { padding: 18px 20px; }
.pp-vendedor-head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.pp-vendedor-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--card-2);
    flex-shrink: 0;
}
.pp-vendedor-avatar-fallback {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff; font-size: 22px; font-weight: 700;
}
.pp-vendedor-info { flex: 1; min-width: 0; }
.pp-vendedor-nome {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 16px; margin-bottom: 4px;
}
.pp-vendedor-stats {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
    color: var(--muted); font-size: 13px;
}
.pp-vendedor-stats .estrelas { color: #f59e0b; }
.pp-dot {
    width: 3px; height: 3px; border-radius: 50%; background: var(--border); display: inline-block;
}

/* Buybox sticky */
.pp-buybox {
    position: sticky;
    top: 84px;
    align-self: start;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(15,23,42,0.06);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pp-buybox-preco {
    border-bottom: 1px solid var(--border);
    padding-bottom: 14px;
    margin-bottom: 4px;
}
.pp-preco-label {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.pp-preco {
    font-size: 32px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
    margin-top: 4px;
}
.pp-parcela {
    font-size: 13px;
    color: var(--green);
    margin-top: 4px;
}
.pp-parcela:empty { display: none; }
.pp-btn-comprar {
    padding: 14px 18px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}
.pp-btn-acao {
    padding: 10px 14px;
    font-size: 14px;
    width: 100%;
}
.pp-trust {
    list-style: none;
    margin: 8px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pp-trust li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    color: var(--text);
}
.pp-trust-ic {
    font-size: 18px;
    flex-shrink: 0;
    width: 28px; height: 28px;
    background: rgba(5,150,105,0.10);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.pp-trust strong { display: block; font-size: 13px; }
.pp-trust span { color: var(--muted); font-size: 12px; }

/* Avaliações resumo */
.avaliacoes-resumo {
    margin-bottom: 12px;
    font-size: 14px;
}

/* Bottom bar mobile (escondida no desktop) */
.pp-bottom-bar { display: none; }

/* Skeleton */
.pp-skeleton {
    background: linear-gradient(90deg, var(--card-2) 0%, var(--bg-2) 50%, var(--card-2) 100%);
    background-size: 200% 100%;
    animation: pp-shimmer 1.4s infinite;
    border-radius: 12px;
}
.pp-skel-galeria { aspect-ratio: 1/1; max-height: 520px; }
@keyframes pp-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Responsivo */
@media (max-width: 980px) {
    .pp-grid { grid-template-columns: 1fr; gap: 16px; }
    .pp-buybox {
        position: static;
        order: -1;
    }
    .pp-galeria { grid-template-columns: 1fr; }
    .pp-galeria-thumbs {
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
        order: 2;
    }
    .pp-thumb { flex-shrink: 0; }
    .pp-galeria-main { order: 1; }
}
@media (max-width: 720px) {
    .pp-container { padding: 12px 14px 90px; }
    .pp-bloco { padding: 16px 18px; border-radius: 12px; }
    .pp-titulo-bloco h1 { font-size: 20px; }
    .pp-preco { font-size: 28px; }
    /* Esconde botão de comprar do buybox no mobile (usa a barra fixa) */
    .pp-buybox .pp-btn-comprar { display: none; }

    .pp-bottom-bar {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 90;
        padding: 10px 14px;
        background: rgba(255,255,255,0.96);
        border-top: 1px solid var(--border);
        backdrop-filter: blur(8px);
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        box-shadow: 0 -4px 16px rgba(15,23,42,0.08);
    }
    .pp-bottom-info { display: flex; flex-direction: column; }
    .pp-bottom-label { font-size: 11px; color: var(--muted); text-transform: uppercase; }
    .pp-bottom-preco { font-size: 20px; font-weight: 800; color: var(--text); line-height: 1.1; }
    .pp-bottom-bar .btn-primary { padding: 12px 20px; font-weight: 700; }
}

/* ============ NIVEL DO VENDEDOR — CARD DE PROGRESSO (PAINEL) ============ */
.vendedor-nivel-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    margin: 0 0 16px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
    position: relative;
    overflow: hidden;
}
.vendedor-nivel-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(236,72,153,0.04));
    pointer-events: none;
    z-index: 0;
}
.vendedor-nivel-card > * { position: relative; z-index: 1; }
.nivel-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.nivel-badge {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid;
    background: var(--bg);
}
.nivel-badge-icon { font-size: 28px; line-height: 1; }
.nivel-badge-rotulo {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--muted); font-weight: 600;
}
.nivel-badge-label {
    font-size: 18px; font-weight: 800; line-height: 1.1;
}
.nivel-badge.lvl-novato    { border-color: rgba(148,163,184,0.3); }
.nivel-badge.lvl-novato    .nivel-badge-label { color: #64748b; }
.nivel-badge.lvl-confiavel { border-color: rgba(59,130,246,0.3); }
.nivel-badge.lvl-confiavel .nivel-badge-label { color: #2563eb; }
.nivel-badge.lvl-pro       { border-color: rgba(139,92,246,0.3); }
.nivel-badge.lvl-pro       .nivel-badge-label { color: #7c3aed; }
.nivel-badge.lvl-mestre    { border-color: rgba(236,72,153,0.3); }
.nivel-badge.lvl-mestre    .nivel-badge-label { color: #db2777; }
.nivel-badge.lvl-lendario  { border-color: transparent; background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 2px 8px rgba(245,158,11,0.4); }
.nivel-badge.lvl-lendario  .nivel-badge-rotulo,
.nivel-badge.lvl-lendario  .nivel-badge-label { color: #fff; }

.nivel-bens {
    display: flex; gap: 10px; flex-wrap: wrap;
}
.nivel-ben {
    display: flex; flex-direction: column; align-items: center;
    padding: 8px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    min-width: 72px;
}
.nivel-ben-k {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--muted); font-weight: 600;
}
.nivel-ben-v {
    font-size: 16px; font-weight: 800; color: var(--text);
}

.nivel-prox-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px;
    font-size: 13px;
}
.nivel-prox-label { color: var(--muted); }
.nivel-prox-label strong { color: var(--text); }
.nivel-prox-pct { font-weight: 700; color: var(--text); }
.nivel-progresso-barra {
    height: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 8px;
}
.nivel-progresso-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #ec4899);
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.nivel-falta {
    margin: 0 0 4px;
    font-size: 13px; font-weight: 600; color: var(--text);
}
.nivel-prox-bonus {
    margin: 0;
    font-size: 12px;
}

/* ============ BADGE DE NIVEL NA VITRINE (PRODUTO-CARD) ============ */
.produto-card .produto-card-nivel {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 3;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(4px);
    border: 1px solid;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.produto-card-nivel.lvl-novato    { color: #64748b; border-color: rgba(148,163,184,0.4); }
.produto-card-nivel.lvl-confiavel { color: #2563eb; border-color: rgba(59,130,246,0.4); }
.produto-card-nivel.lvl-pro       { color: #7c3aed; border-color: rgba(139,92,246,0.4); }
.produto-card-nivel.lvl-mestre    { color: #db2777; border-color: rgba(236,72,153,0.4); }
.produto-card-nivel.lvl-lendario  {
    color: #fff;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-color: transparent;
    box-shadow: 0 1px 4px rgba(245,158,11,0.5);
}

@media (max-width: 640px) {
    .nivel-header { gap: 12px; }
    .nivel-badge { padding: 8px 12px; }
    .nivel-badge-icon { font-size: 22px; }
    .nivel-badge-label { font-size: 15px; }
    .nivel-bens { width: 100%; justify-content: stretch; }
    .nivel-ben { flex: 1; min-width: 0; }
}

/* ============ BANNER LGPD COOKIES ============ */
.cookie-banner {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    max-width: 720px;
    margin: 0 auto;
    background: #1e293b;
    color: #f1f5f9;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    z-index: 9999;
    display: none;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    line-height: 1.5;
}
.cookie-banner.show { display: flex; }
.cookie-banner-text { flex: 1; min-width: 0; }
.cookie-banner-text a {
    color: #93c5fd;
    text-decoration: underline;
}
.cookie-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.cookie-banner .btn-cookie {
    background: #3b82f6;
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 10px 18px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}
.cookie-banner .btn-cookie:hover { background: #2563eb; }

@media (max-width: 640px) {
    .cookie-banner {
        flex-direction: column;
        align-items: stretch;
        bottom: 8px;
        left: 8px;
        right: 8px;
        padding: 14px 16px;
    }
    .cookie-banner-actions { justify-content: flex-end; }
}

/* ============ CARD DE ASSINATURA (painel vendedor) ============ */
.assinatura-card {
    border: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(15,23,42,0.08);
}
.assinatura-hero {
    padding: 28px 28px 24px;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: #f1f5f9;
    position: relative;
}
.assinatura-hero.ativa     { background: linear-gradient(135deg, #065f46 0%, #10b981 100%); }
.assinatura-hero.pendente  { background: linear-gradient(135deg, #92400e 0%, #f59e0b 100%); }
.assinatura-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.18);
    color: #fff;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.assinatura-hero h3 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
}
.assinatura-hero p {
    margin: 0;
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    line-height: 1.55;
}
.assinatura-hero .preco-bloco {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 16px;
    color: #fff;
}
.assinatura-hero .preco-valor { font-size: 32px; font-weight: 800; line-height: 1; }
.assinatura-hero .preco-periodo { font-size: 14px; opacity: 0.8; }

.assinatura-body { padding: 22px 28px 24px; background: #fff; }
.assinatura-beneficios {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: grid;
    gap: 10px;
}
.assinatura-beneficios li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #334155;
    line-height: 1.45;
}
.assinatura-beneficios li::before {
    content: "✓";
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #d1fae5;
    color: #065f46;
    font-weight: 800;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.assinatura-cta {
    width: 100%;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 10px;
    border: 0;
    cursor: pointer;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    transition: transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}
.assinatura-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(37,99,235,0.4); }
.assinatura-cta:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.assinatura-cta.secundario {
    background: transparent;
    color: #64748b;
    border: 1px solid #e2e8f0;
    box-shadow: none;
    font-weight: 600;
}
.assinatura-cta.secundario:hover { background: #f8fafc; color: #475569; transform: none; box-shadow: none; }
.assinatura-rodape {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
    color: #64748b;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.assinatura-rodape strong { color: #1e293b; }

@media (max-width: 480px) {
    .assinatura-hero { padding: 22px 20px 20px; }
    .assinatura-body { padding: 20px; }
    .assinatura-hero h3 { font-size: 20px; }
    .assinatura-hero .preco-valor { font-size: 28px; }
}

/* ============ ADMIN: SELETOR DE MODELO DE MONETIZAÇÃO ============ */
.monet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 16px 0 20px;
}
.monet-card {
    position: relative;
    border: 2px solid #e2e8f0;
    background: #fff;
    border-radius: 14px;
    padding: 18px 18px 16px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.monet-card:hover { border-color: #cbd5e1; }
.monet-card.selecionado {
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.monet-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.monet-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #0f172a;
    font-size: 15px;
}
.monet-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f1f5f9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.monet-card.selecionado .monet-card-icon { background: #dbeafe; }
.monet-card-check {
    margin-left: auto;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 2px solid #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    background: #fff;
}
.monet-card.selecionado .monet-card-check {
    background: #3b82f6;
    border-color: #3b82f6;
}
.monet-card.selecionado .monet-card-check::after { content: "✓"; }
.monet-card-desc {
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}
.monet-card-tag {
    display: inline-block;
    background: #f1f5f9;
    color: #475569;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-top: 4px;
    width: max-content;
}
.monet-card.selecionado .monet-card-tag { background: #dbeafe; color: #1d4ed8; }

.monet-valor {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.monet-valor label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    display: block;
}
.monet-valor-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 8px 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.monet-valor-input-wrap:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.monet-valor-input-wrap .prefix {
    color: #64748b;
    font-weight: 600;
    font-size: 15px;
}
.monet-valor-input-wrap input {
    border: 0;
    outline: 0;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    width: 100%;
    background: transparent;
    padding: 0;
}
.monet-valor-hint { color: #64748b; font-size: 12px; margin: 0; }

.monet-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 640px) {
    .monet-grid { grid-template-columns: 1fr; }
}