/* ==========================================================================
   VITRINE — Design System
   Tema: cyberpunk suave — lilás, azul elétrico e preto profundo.
   Um único arquivo CSS carrega todo o projeto.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
    /* Superfícies */
    --bg: #08070d;
    --bg-soft: #0d0c16;
    --bg-elevated: #131120;
    --bg-card: #16142438;
    --bg-card-solid: #16142a;
    --border: rgba(167, 139, 250, 0.16);
    --border-strong: rgba(167, 139, 250, 0.34);

    /* Marca */
    --lilac: #a78bfa;
    --lilac-bright: #c9b6ff;
    --lilac-dim: #7c6bb0;
    --blue: #3ec5f7;
    --blue-deep: #5b6ee8;
    --grad-brand: linear-gradient(120deg, var(--blue) 0%, var(--lilac) 55%, #d68bff 100%);
    --grad-brand-soft: linear-gradient(120deg, rgba(62, 197, 247, .16), rgba(167, 139, 250, .16));

    /* Texto */
    --text: #eeecfb;
    --text-muted: #a8a3c4;
    --text-dim: #6d6889;

    /* Estado */
    --success: #3ee6a8;
    --warning: #f6c95c;
    --danger: #ff7b8a;

    /* Tipografia */
    --font-display: 'Space Grotesk', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Métricas */
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 22px;
    --container: 1180px;
    --shadow-glow: 0 0 0 1px var(--border), 0 24px 60px -20px rgba(94, 63, 210, 0.45);
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.7);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

button {
    font-family: inherit;
    cursor: pointer;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.12;
    margin: 0;
    letter-spacing: -0.01em;
}

p {
    margin: 0;
}

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

.admin-dashboard-grid {
    grid-template-columns: 2fr 1fr;
}

.vt-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 60;
}

.vt-hamburger span {
    display: block;
    height: 2px;
    width: 22px;
    background: #ffffff;
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}

.vt-hamburger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.vt-hamburger.is-open span:nth-child(2) {
    opacity: 0;
}

.vt-hamburger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.alert-warning {
    background: rgba(255, 200, 87, 0.08);
    border-color: rgba(255, 200, 87, 0.3);
    color: #ffe3a8;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Fundo cyberpunk (grade + neblina) ---------- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(rgba(167, 139, 250, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(167, 139, 250, 0.06) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
    pointer-events: none;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(680px 420px at 12% -6%, rgba(91, 110, 232, 0.28), transparent 60%),
        radial-gradient(560px 380px at 92% 8%, rgba(167, 139, 250, 0.24), transparent 60%),
        var(--bg);
    pointer-events: none;
}

/* ---------- Layout utilitário ---------- */
.wrap {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: 96px 0;
}

.section-tight {
    padding: 56px 0;
}

.grid {
    display: grid;
    gap: 24px;
}

.pix-grid {
    grid-template-columns: 1fr 1fr;
}

.center {
    text-align: center;
}

.stack-sm>*+* {
    margin-top: 12px;
}

.stack {
    >*+* {
        margin-top: 20px;
    }
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 10px 2px var(--blue);
}

.lede {
    color: var(--text-muted);
    font-size: 18px;
    max-width: 560px;
}

.text-gradient {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Toast (feedback rápido, ex: "Link copiado!") ---------- */
.toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 999;
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    background: var(--bg-card-solid);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-card);
    animation: toast-in .2s ease;
    max-width: calc(100vw - 32px);
    text-align: center;
}

.toast-success {
    border-color: rgba(62, 230, 168, 0.4);
    color: var(--success);
}

.toast-error {
    border-color: rgba(255, 123, 138, 0.4);
    color: var(--danger);
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translate(-50%, 8px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* ---------- Botões ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    padding: 13px 24px;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
    white-space: nowrap;
}

.btn:active {
    transform: translateY(1px) scale(0.99);
}

.btn-primary {
    background: var(--grad-brand);
    color: #08060f;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 14px 30px -10px rgba(120, 110, 255, 0.55);
}

.btn-primary:hover {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset, 0 18px 40px -8px rgba(120, 110, 255, 0.75);
    transform: translateY(-1px);
}

.btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--border-strong);
}

.btn-ghost:hover {
    border-color: var(--lilac);
    background: rgba(167, 139, 250, 0.08);
}

.btn-block {
    width: 100%;
}

.btn-lg {
    padding: 15px 30px;
    font-size: 16px;
}

.btn-sm {
    padding: 9px 16px;
    font-size: 13.5px;
}

.btn-danger {
    background: rgba(255, 123, 138, 0.12);
    color: var(--danger);
    border-color: rgba(255, 123, 138, 0.35);
}

/* ---------- Navegação ---------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--border);
    background: rgba(8, 7, 13, 0.72);
    backdrop-filter: blur(14px);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
}

.brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--grad-brand);
    position: relative;
    box-shadow: 0 0 22px -4px var(--lilac);
}

.brand-mark::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1.5px solid #08060f;
    border-radius: 4px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    font-size: 14.5px;
    color: var(--text-muted);
}

.nav-links a:hover {
    color: var(--text);
}

.nav-cta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.nav-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--text, #fff);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.nav-cta-mobile {
    display: none;
}

/* ---------- Rodapé ---------- */
.footer {
    border-top: 1px solid var(--border);
    padding: 56px 0 32px;
    color: var(--text-dim);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 32px;
}

.footer-col h4 {
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
    font-family: var(--font-mono);
    font-weight: 500;
}

.footer-col a {
    display: block;
    color: var(--text-dim);
    font-size: 14px;
    padding: 5px 0;
}

.footer-col a:hover {
    color: var(--lilac-bright);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-credit {
    font-family: var(--font-mono);
    color: var(--text-dim);
}

.footer-credit strong {
    color: var(--lilac-bright);
    font-weight: 500;
}

/* ---------- Hero ---------- */
.hero {
    padding: 88px 0 40px;
    position: relative;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
}

.hero h1 {
    font-size: clamp(38px, 5.2vw, 60px);
    margin: 18px 0 20px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.hero-meta {
    display: flex;
    gap: 24px;
    margin-top: 34px;
    flex-wrap: wrap;
}

.hero-meta div {
    font-size: 13px;
    color: var(--text-dim);
    font-family: var(--font-mono);
}

.hero-meta strong {
    display: block;
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--text);
    font-weight: 600;
}

/* Signature element: janela de vitrine (mock de storefront neon) */
.showcase {
    position: relative;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong);
    background: linear-gradient(180deg, var(--bg-elevated), var(--bg-soft));
    box-shadow: var(--shadow-glow);
    padding: 18px;
    overflow: hidden;
}

.showcase::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: conic-gradient(from 180deg, transparent 0 60%, rgba(167, 139, 250, 0.35) 72%, transparent 84%);
    animation: spin 9s linear infinite;
    opacity: .5;
}

.showcase-inner {
    position: relative;
    background: var(--bg-card-solid);
    border-radius: calc(var(--radius-lg) - 8px);
    padding: 20px;
    border: 1px solid var(--border);
}

/* Foto do produto (produto.html) — parecido com .showcase, mas sem o glow
   giratório (que é o mockup decorativo da home) e com largura limitada,
   senão a imagem quadrada esticava até 1040px e empurrava as informações
   (nome, descrição, preço) pra muito longe do topo da página. */
.product-photo {
    max-width: 360px;
    margin: 0 auto 28px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong);
    background: var(--bg-card-solid);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.product-photo img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
}

.showcase-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.showcase-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-dim);
    opacity: .5;
}

.showcase-url {
    margin-left: 8px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.03);
    padding: 5px 10px;
    border-radius: 999px;
    flex: 1;
}

.window-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.window-card {
    min-width: 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--tema-card-bg, linear-gradient(160deg, rgba(167, 139, 250, 0.08), rgba(62, 197, 247, 0.03)));
    padding: 12px;
    transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease, background .25s ease;
}

.window-card:hover {
    border-color: var(--tema-accent, var(--lilac));
    box-shadow: 0 0 24px -6px var(--tema-accent, var(--lilac));
    transform: translateY(-2px);
}

.window-thumb {
    aspect-ratio: 4/3;
    border-radius: 7px;
    margin-bottom: 10px;
    background: var(--tema-thumb-grad, var(--grad-brand-soft));
    position: relative;
    overflow: hidden;
}

.window-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.14) 50%, transparent 60%);
    animation: scan 3.2s ease-in-out infinite;
}

.window-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--tema-text, var(--text));
    overflow-wrap: break-word;
}

.window-price {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--tema-accent, var(--blue));
    margin-top: 4px;
}

@keyframes scan {

    0%,
    100% {
        transform: translateX(-120%);
    }

    50% {
        transform: translateX(120%);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Cartões / Recursos ---------- */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: var(--shadow-card);
    transition: border-color .2s ease, transform .2s ease;
}

.card:hover {
    border-color: var(--border-strong);
    transform: translateY(-3px);
}

.card-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--grad-brand-soft);
    border: 1px solid var(--border);
    margin-bottom: 16px;
    color: var(--lilac-bright);
}

.card h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.card p {
    color: var(--text-muted);
    font-size: 14.5px;
}

.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ---------- Passos numerados (uso apenas onde há sequência real) ---------- */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    counter-reset: step;
}

.step {
    position: relative;
    padding-left: 8px;
}

.step-num {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--blue);
    display: block;
    margin-bottom: 14px;
}

.step h3 {
    font-size: 17px;
    margin-bottom: 8px;
}

.step p {
    color: var(--text-muted);
    font-size: 14.5px;
}

/* ---------- Preços ---------- */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 880px;
    margin: 0 auto;
}

.plan {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-card);
    padding: 34px;
    position: relative;
}

.plan-pro {
    border-color: var(--border-strong);
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.09), var(--bg-card) 60%);
    box-shadow: var(--shadow-glow);
}

.plan-badge {
    position: absolute;
    top: -13px;
    right: 28px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--grad-brand);
    color: #08060f;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 600;
}

.plan-name {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.plan-price {
    font-family: var(--font-display);
    font-size: 44px;
    margin: 12px 0 4px;
}

.plan-price>span:last-child {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-dim);
    font-weight: 400;
}

.plan-desc {
    color: var(--text-muted);
    font-size: 14.5px;
    margin-bottom: 24px;
}

.plan-features {
    margin: 26px 0 30px;
}

.plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 14.5px;
    color: var(--text);
    border-top: 1px solid var(--border);
}

.plan-features li:first-child {
    border-top: none;
}

.check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(62, 197, 247, 0.15);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    margin-top: 1px;
}

.plan-pro .check {
    background: rgba(167, 139, 250, 0.2);
    color: var(--lilac-bright);
}

.plan-price-value {
    font: inherit;
    font-family: inherit;
    font-size: inherit !important;
    font-weight: inherit;
    color: inherit;
}

/* ---------- FAQ ---------- */
.faq-item {
    border-top: 1px solid var(--border);
    padding: 22px 0;
}

.faq-item:last-child {
    border-bottom: 1px solid var(--border);
}

.faq-item h3 {
    font-size: 16px;
    margin-bottom: 8px;
    font-family: var(--font-body);
    font-weight: 600;
}

.faq-item p {
    color: var(--text-muted);
    font-size: 14.5px;
    max-width: 640px;
}

/* ---------- Formulários / Auth ---------- */
.auth-shell {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr;
}

.auth-side {
    display: none;
    position: relative;
    padding: 48px;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(165deg, var(--bg-elevated), var(--bg) 70%);
    border-right: 1px solid var(--border);
    overflow: hidden;
}

.auth-side::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(420px 320px at 20% 10%, rgba(91, 110, 232, 0.32), transparent 60%),
        radial-gradient(420px 320px at 90% 90%, rgba(167, 139, 250, 0.28), transparent 60%);
}

.auth-side-content {
    position: relative;
    z-index: 1;
}

.auth-quote {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.4;
    max-width: 420px;
}

.auth-quote small {
    display: block;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text-dim);
}

.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.auth-box {
    width: 100%;
    max-width: 400px;
}

.auth-box h1 {
    font-size: 28px;
    margin-bottom: 8px;
}

.auth-box .lede {
    font-size: 15px;
    margin-bottom: 32px;
}

.field {
    margin-bottom: 18px;
}

.field-nome-produto {
    max-width: 420px;
}

.field label {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 7px;
    font-family: var(--font-mono);
    letter-spacing: .02em;
}

.input,
select.input,
textarea.input {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 13px 14px;
    font-size: 14.5px;
    font-family: var(--font-body);
    transition: border-color .18s ease, box-shadow .18s ease;
}

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

.input:focus {
    border-color: var(--lilac);
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.16);
    outline: none;
}

.field-hint {
    font-size: 12.5px;
    color: var(--text-dim);
    margin-top: 6px;
}

.field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    margin-bottom: 20px;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-muted);
}

.checkbox-row input {
    accent-color: var(--lilac);
    width: 15px;
    height: 15px;
}

.link-accent {
    color: var(--blue);
    font-weight: 500;
}

.link-accent:hover {
    text-decoration: underline;
}

.divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 26px 0;
    color: var(--text-dim);
    font-size: 12.5px;
    font-family: var(--font-mono);
}

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

.auth-foot {
    text-align: center;
    margin-top: 26px;
    font-size: 14px;
    color: var(--text-muted);
}

.alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 13px 15px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    margin-bottom: 20px;
    border: 1px solid;
}

.alert-info {
    background: rgba(62, 197, 247, 0.08);
    border-color: rgba(62, 197, 247, 0.28);
    color: #bdeaff;
}

.alert-success {
    background: rgba(62, 230, 168, 0.08);
    border-color: rgba(62, 230, 168, 0.3);
    color: #bdf5de;
}

.alert-error {
    background: rgba(255, 123, 138, 0.08);
    border-color: rgba(255, 123, 138, 0.3);
    color: #ffd2d8;
}

/* ---------- Onboarding ---------- */
.onboard-shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.onboard-header {
    padding: 22px 0;
    border-bottom: 1px solid var(--border);
}

.onboard-progress {
    display: flex;
    gap: 8px;
    margin-top: 18px;
}

.progress-bar {
    height: 4px;
    flex: 1;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}

.progress-bar>span {
    display: block;
    height: 100%;
    background: var(--grad-brand);
    border-radius: inherit;
}

.onboard-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

.onboard-card {
    width: 100%;
    max-width: 560px;
}

.onboard-step-label {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 12px;
}

.onboard-card h1 {
    font-size: 30px;
    margin-bottom: 10px;
}

.onboard-card .lede {
    max-width: none;
    margin-bottom: 32px;
}

.option-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 30px;
}

.option-card {
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 18px;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.option-card:hover {
    border-color: var(--lilac);
    transform: translateY(-2px);
}

.option-card.is-selected {
    border-color: var(--lilac);
    background: rgba(167, 139, 250, 0.1);
    box-shadow: 0 0 0 1px var(--lilac) inset;
}

.option-emoji {
    font-size: 22px;
    margin-bottom: 10px;
    display: block;
}

.option-card strong {
    display: block;
    font-size: 14.5px;
    margin-bottom: 3px;
}

.option-card span {
    font-size: 12.5px;
    color: var(--text-dim);
}

.onboard-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.onboard-skip {
    font-size: 13.5px;
    color: var(--text-dim);
}

.onboard-skip:hover {
    color: var(--text-muted);
}

/* ---------- Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.badge-lilac {
    color: var(--lilac-bright);
    border-color: rgba(167, 139, 250, 0.4);
    background: rgba(167, 139, 250, 0.08);
}

/* ==========================================================================
   PAINEL — App shell (dashboard, produtos, editor, etc.)
   ========================================================================== */
.app-shell {
    display: grid;
    grid-template-columns: 264px 1fr;
    min-height: 100dvh;
}

/* Sidebar */
.sidebar {
    border-right: 1px solid var(--border);
    background: var(--bg-soft);
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100dvh;
}

.sidebar .brand {
    padding: 6px 8px 22px;
}

.sidebar-group {
    margin-bottom: 22px;
}

.sidebar-label {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-dim);
    padding: 0 10px;
    margin-bottom: 8px;
    display: block;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 14.5px;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}

.notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    margin-left: auto;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(255, 123, 138, 0.18);
}

.sidebar-link .ic {
    width: 18px;
    text-align: center;
    opacity: .85;
}

.sidebar-link:hover {
    background: rgba(167, 139, 250, 0.08);
    color: var(--text);
}

.sidebar-link.is-active {
    background: rgba(167, 139, 250, 0.14);
    color: var(--lilac-bright);
    box-shadow: 0 0 0 1px var(--border-strong) inset;
}

.sidebar-foot {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--radius-sm);
}

.sidebar-user:hover {
    background: rgba(167, 139, 250, 0.08);
}

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--grad-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: #08060f;
    flex-shrink: 0;
}

.sidebar-user-name {
    font-size: 13.5px;
    font-weight: 600;
}

.sidebar-user-plan {
    font-size: 11.5px;
    color: var(--text-dim);
    font-family: var(--font-mono);
}

/* Área principal */
.app-main {
    min-width: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 32px;
    border-bottom: 1px solid var(--border);
    background: rgba(8, 7, 13, 0.75);
    backdrop-filter: blur(12px);
}

.topbar-sub {
    font-size: 13px;
    color: var(--text-dim);
    margin-top: 2px;
    font-family: var(--font-mono);
}

.topbar h1 {
    font-size: 21px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-actions .btn {
    white-space: normal;
    text-align: center;
    max-width: 110px;
    line-height: 1.2;
}

.topbar-title-group {
    min-width: 0;
    overflow: hidden;
}

.topbar-title-group h1,
.topbar-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-content {
    padding: 32px;
}



/* Cards de estatística */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 32px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
}

.stat-label {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.stat-value {
    font-family: var(--font-display);
    font-size: 30px;
    margin: 10px 0 6px;
}

.stat-delta {
    font-size: 12.5px;
    font-weight: 600;
}

.stat-delta.up {
    color: var(--success);
}

.stat-delta.down {
    color: var(--danger);
}

/* Painel / bloco de conteúdo */
.panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.panel-head h2 {
    font-size: 16.5px;
}

.panel-body {
    padding: 20px 24px;
    overflow-x: hidden;
}

.panel-body * {
    max-width: 100%;
}

.panel-body .field-nome-produto {
    max-width: 420px;
}

/* Barra de ferramentas (busca + filtros + ação) */
.toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.search-input {
    position: relative;
    flex: 1;
    min-width: 220px;
}

.search-input .input {
    padding-left: 38px;
}

.search-input::before {
    content: "🔍";
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    opacity: .6;
}

.select-input {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 14px;
    font-family: var(--font-body);
}

/* Tabela */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-dim);
    font-weight: 500;
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--border);
}

.table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    vertical-align: middle;
}

.table td,
.table th {
    white-space: nowrap;
}

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

.table tr:hover td {
    background: rgba(167, 139, 250, 0.04);
}

.prod-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.prod-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background-color: var(--border);
    flex-shrink: 0;
}

.prod-name {
    font-weight: 600;
    font-size: 14px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prod-info {
    min-width: 0;
    flex: 1;
}

.prod-cell>div:last-child {
    min-width: 0;
    flex: 1;
}

.prod-cat {
    font-size: 12.5px;
    color: var(--text-dim);
}

.row-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
}

.icon-btn.menu-toggle {
    display: none;
}

.icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: transparent;
}

.icon-btn:hover {
    border-color: var(--lilac);
    color: var(--lilac-bright);
}

/* Pílulas de status */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
}

.pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.pill-success {
    background: rgba(62, 230, 168, 0.12);
    color: var(--success);
}

.pill-warning {
    background: rgba(246, 201, 92, 0.12);
    color: var(--warning);
}

.pill-muted {
    background: rgba(168, 163, 196, 0.12);
    color: var(--text-muted);
}

/* Estado vazio */
.empty-state {
    text-align: center;
    padding: 64px 24px;
}

.empty-state .card-icon {
    margin: 0 auto 18px;
}

.empty-state h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.empty-state p {
    color: var(--text-muted);
    font-size: 14.5px;
    max-width: 340px;
    margin: 0 auto 22px;
}

/* Formulário de produto */
.form-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 28px;
    align-items: start;
}

.dropzone {
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: 30px 18px;
    text-align: center;
    color: var(--text-dim);
    font-size: 13.5px;
    background: var(--bg-elevated);
    transition: border-color .18s ease, background .18s ease;
}

.dropzone:hover {
    border-color: var(--lilac);
    background: rgba(167, 139, 250, 0.05);
}

.dropzone .card-icon {
    margin: 0 auto 14px;
}

.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-top: 1px solid var(--border);
}

.switch-row:first-child {
    border-top: none;
}

.switch-row strong {
    display: block;
    font-size: 14px;
}

.switch-row span {
    font-size: 12.5px;
    color: var(--text-dim);
}

.switch {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    flex-shrink: 0;
    cursor: pointer;
}

.switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-dim);
    transition: transform .18s ease, background .18s ease;
}

.switch.is-on {
    background: rgba(167, 139, 250, 0.25);
    border-color: var(--lilac);
}

.switch.is-on::after {
    transform: translateX(18px);
    background: var(--lilac-bright);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.url-paste {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}

.url-paste .input {
    flex: 1;
}

/* ==========================================================================
   EDITOR DE VITRINE, ESTATÍSTICAS E ASSINATURA
   ========================================================================== */

/* Editor: layout com preview ao vivo */
.editor-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 24px;
    align-items: start;
}

.editor-panels {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.editor-panels .panel {
    display: none;
}

.editor-panels .panel.is-active {
    display: block;
}

.theme-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.theme-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    cursor: pointer;
    transition: border-color .18s ease, transform .18s ease;
    min-width: 0;
}

.theme-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 6px;
    margin-top: 8px;
}

.theme-card-row .badge,
.theme-card-row .pill {
    white-space: nowrap;
}

.theme-card:hover {
    transform: translateY(-2px);
}

.theme-card.is-selected {
    border-color: var(--lilac);
    box-shadow: 0 0 0 1px var(--lilac) inset;
}

.theme-card.is-locked {
    cursor: not-allowed;
    opacity: .5;
}

.theme-card.is-locked:hover {
    transform: none;
}

/* ---------------------------------------------------------------------
   Temas aplicados na pré-visualização do editor (e futuramente na
   vitrine pública) — o atributo data-theme é setado via JS no elemento
   [data-preview] do editor, ou no container da loja pública.
   --------------------------------------------------------------------- */
.preview-screen {
    --tema-bg: var(--bg-soft);
    --tema-card-bg: linear-gradient(160deg, rgba(167, 139, 250, 0.08), rgba(62, 197, 247, 0.03));
    --tema-thumb-grad: var(--grad-brand-soft);
    --tema-accent: var(--lilac);
    --tema-text: var(--text);
    --tema-text-muted: var(--text-muted);
}

.store-page {
    --tema-bg: var(--bg);
    --tema-card-bg: var(--bg-card);
    --tema-thumb-grad: var(--grad-brand-soft);
    --tema-accent: var(--lilac);
    --tema-text: var(--text);
    --tema-text-muted: var(--text-muted);
}

[data-theme="minimal"] {
    --tema-bg: #f4f2fa;
    --tema-card-bg: linear-gradient(160deg, rgba(167, 139, 250, 0.14), rgba(62, 197, 247, 0.07));
    --tema-thumb-grad: linear-gradient(135deg, #d8cff2, #a78bfa);
    --tema-accent: #7c6bb0;
    --tema-text: #221f33;
    --tema-text-muted: #6a6486;
}

[data-theme="sunset"] {
    --tema-bg: #2a1030;
    --tema-card-bg: linear-gradient(160deg, rgba(255, 138, 92, 0.16), rgba(255, 210, 122, 0.06));
    --tema-thumb-grad: linear-gradient(135deg, #ff8a5c, #ffd27a);
    --tema-accent: #ff8a5c;
    --tema-text: #fbe9dd;
    --tema-text-muted: #d8b3a6;
}

[data-theme="black"] {
    --tema-bg: #050505;
    --tema-card-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    --tema-thumb-grad: linear-gradient(135deg, #2a2a2a, #050505);
    --tema-accent: #ffffff;
    --tema-text: #f5f5f5;
    --tema-text-muted: #a3a3a3;
}

[data-theme="editorial"] {
    --tema-bg: #060606;
    --tema-card-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    --tema-thumb-grad: linear-gradient(135deg, #2c2c2c, #060606);
    --tema-accent: #e8e8e8;
    --tema-text: #f4f4f4;
    --tema-text-muted: #9a9a9a;
}

.theme-swatch {
    height: 56px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.theme-swatch.t-neon {
    background: linear-gradient(135deg, #08070d, #3ec5f7 60%, #a78bfa);
}

.theme-swatch.t-minimal {
    background: linear-gradient(135deg, #f4f2fa, #d8cff2);
}

.theme-swatch.t-sunset {
    background: linear-gradient(135deg, #2a1030, #ff8a5c, #ffd27a);
}

.theme-swatch.t-black {
    background: linear-gradient(135deg, #050505, #2a2a2a, #ffffff);
}

.theme-swatch.t-editorial {
    background: linear-gradient(135deg, #060606, #2c2c2c);
}

.theme-swatch[style*="linear-gradient"] {
    /* preview de tema com cor customizada já vem com background inline via JS */
}

[data-theme]:not([data-theme="neon"]):not([data-theme="minimal"]):not([data-theme="sunset"]):not([data-theme="editorial"]) {
    background: var(--tema-bg, inherit);
}

[data-theme] .btn-primary,
[data-theme] .destaque {
    background: var(--tema-text, #fff);
    color: var(--tema-accent, #000);
}

[data-theme] .destaque:hover {
    background: var(--tema-accent, inherit);
}

.theme-card strong {
    font-size: 13px;
}

.color-row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.color-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    cursor: pointer;
}

.editor-preview {
    position: sticky;
    top: 88px;
}

.preview-frame {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong);
    background: var(--bg-elevated);
    padding: 14px;
    box-shadow: var(--shadow-glow);
}

.preview-screen {
    background: var(--tema-bg);
    border-radius: calc(var(--radius-lg) - 8px);
    padding: 22px;
    min-height: 480px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    transition: background .25s ease;
}

/* Estatísticas: gráfico de barras simples em CSS */
.chart-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.chart-tab {
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    color: var(--text-muted);
    border: 1px solid var(--border);
    white-space: nowrap;
    flex-shrink: 0;
}

.chart-tab.is-active {
    background: rgba(167, 139, 250, 0.14);
    color: var(--lilac-bright);
    border-color: var(--border-strong);
}

.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 200px;
    padding: 10px 4px 0;
}

.bar-chart .bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 8px;
}

.bar-chart .bar {
    width: 100%;
    max-width: 32px;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, var(--lilac), var(--blue-deep));
    box-shadow: 0 0 16px -4px var(--lilac);
}

.bar-chart .bar-label {
    font-size: 11px;
    color: var(--text-dim);
    font-family: var(--font-mono);
}

.source-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    min-width: 0;
}

.source-row>span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.source-row:last-child {
    border-bottom: none;
}

.source-bar-bg {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--bg-elevated);
    margin: 0 14px;
    overflow: hidden;
    min-width: 0
}

.source-bar-bg>span {
    display: block;
    height: 100%;
    background: var(--grad-brand);
}

/* Assinatura */
.plan-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.plan-current-info h2 {
    font-size: 20px;
    margin-bottom: 6px;
}

.qr-box {
    width: 168px;
    height: 168px;
    border-radius: var(--radius);
    background: repeating-conic-gradient(#eeecfb 0% 25%, #08070d 0% 50%) 0 0/16px 16px;
    margin: 0 auto 18px;
    border: 6px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.qr-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: calc(var(--radius) - 4px);
}

.pix-key {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-muted);
}

.billing-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.billing-row:last-child {
    border-bottom: none;
}

.billing-row .label {
    color: var(--text-dim);
    font-size: 12px;
    font-family: var(--font-mono);
    display: block;
    margin-bottom: 3px;
}

/* ==========================================================================
   VITRINE PÚBLICA (template do usuário) E CONFIGURAÇÕES
   ========================================================================== */

/* Página pública da vitrine */
.store-page {
    max-width: 1040px;
    margin: 0 auto;
    padding: 56px 24px 80px;
    background: var(--tema-bg, transparent);
    transition: background .25s ease;
}

.store-header {
    position: relative;
    text-align: center;
}

.store-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--tema-thumb-grad, var(--grad-brand));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    color: #08060f;
    margin: 0 auto 16px;
    box-shadow: 0 0 30px -6px var(--lilac);
}

.store-header h1 {
    font-size: 24px;
    margin-bottom: 8px;
    color: var(--tema-text, var(--text));
}

.store-header p {
    color: var(--tema-text-muted, var(--text-muted));
    font-size: 14.5px;
    max-width: 420px;
    margin: 0 auto;
}

.store-socials {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.store-socials a,
.store-mobile-menu-socials a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--tema-accent, var(--border));
    color: var(--tema-text, var(--text));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.store-socials a:hover,
.store-mobile-menu-socials a:hover {
    border-color: var(--tema-accent, var(--lilac));
    color: var(--tema-accent, var(--lilac-bright));
}

.store-search {
    position: relative;
    margin-bottom: 18px;
}

.store-search input {
    background: var(--tema-card-bg, var(--bg-card-solid));
    color: var(--tema-text, var(--text));
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 12px 16px 12px 40px;
    font-size: 14px;
    font-family: var(--font-body);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.store-search input::placeholder {
    color: var(--tema-text-muted, var(--text-dim));
}

.store-search input:focus {
    border-color: var(--tema-accent, var(--lilac));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tema-accent, #a78bfa) 16%, transparent);
    outline: none;
}

.store-search::before {
    content: "🔍";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12.5px;
    opacity: .55;
    pointer-events: none;
}

.store-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 26px;
}

.store-filters .chip {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}

.store-filters .chip.is-active {
    background: color-mix(in srgb, var(--tema-accent, #ff8a5c) 16%, transparent);
    border-color: var(--tema-accent, var(--border-strong));
    color: var(--tema-accent, var(--lilac-bright));
}

.store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 16px;
}

.store-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--tema-card-bg, var(--bg-card));
    overflow: hidden;
    transition: border-color .2s ease, transform .2s ease, background .25s ease;
}

.store-card:hover {
    border-color: var(--tema-accent, var(--lilac));
    transform: translateY(-3px);
}

.store-thumb {
    aspect-ratio: 1/1;
    background: var(--tema-thumb-grad, var(--grad-brand-soft));
    position: relative;
}

.store-thumb .featured-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    background: rgba(8, 7, 13, 0.7);
    color: var(--tema-accent, var(--lilac-bright));
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid var(--tema-accent, var(--border-strong));
}

.store-share {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(8, 7, 13, 0.65);
    border: 1px solid var(--border-strong);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.store-share:hover {
    background: rgba(8, 7, 13, 0.85);
    border-color: var(--tema-accent, var(--lilac));
    transform: scale(1.08);
}

.store-info {
    padding: 12px;
}

.store-info .name {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 8px;
    min-height: calc(1.35em * 2);
    color: var(--tema-text, var(--text));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.store-info .price {
    font-family: var(--font-mono);
    color: var(--tema-accent, var(--blue));
    font-size: 13px;
    margin-bottom: 20px;
}

.store-info .btn {
    width: 100%;
    padding: 9px;
    font-size: 12.5px;
}

.store-footer {
    text-align: center;
    margin-top: 48px;
}

.footer-break {
    display: none;
}

@media (max-width: 480px) {
    .footer-break {
        display: inline;
    }
}

.store-footer a {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-dim);
    text-underline-offset: 3px;
}

.store-footer a strong {
    color: var(--tema-accent, var(--lilac-bright));
}

.store-footer a:hover {
    color: var(--tema-accent, var(--lilac-bright));
    opacity: 0.85;

}

/* Configurações: sub-navegação em abas */
.settings-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.settings-tab {
    padding: 12px 6px;
    margin-right: 20px;
    font-size: 14.5px;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
    font-family: inherit;
}

.settings-tab.is-active {
    color: var(--text);
    border-color: var(--lilac);
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    border-top: 1px solid var(--border);
    gap: 20px;
}

.settings-row:first-child {
    border-top: none;
}

.settings-row strong {
    display: block;
    font-size: 14.5px;
    margin-bottom: 3px;
}

.settings-row span {
    font-size: 13px;
    color: var(--text-dim);
}

.danger-zone {
    border: 1px solid rgba(255, 123, 138, 0.3);
    border-radius: var(--radius);
    background: rgba(255, 123, 138, 0.05);
}

.danger-zone .panel-head {
    border-color: rgba(255, 123, 138, 0.25);
}

.danger-zone .panel-head h2 {
    color: var(--danger);
}

/* ---------- Responsivo ---------- */
@media (max-width: 980px) {
    .vt-hamburger {
        display: flex;
    }

    .nav-cta {
        display: none;
    }

    .admin-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cols-3,
    .cols-4 {
        grid-template-columns: 1fr 1fr;
    }

    .steps {
        grid-template-columns: 1fr;
    }

    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-side {
        display: none;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform .2s ease;
        width: 264px;
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

    .icon-btn.menu-toggle {
        display: inline-flex;
    }

    .editor-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .editor-panels,
    .editor-preview,
    .chart-tabs {
        min-width: 0;
    }

    .chart-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .editor-preview {
        position: static;
    }

    .billing-row {
        grid-template-columns: 1fr 1fr;
        row-gap: 8px;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-cta {
        display: none;
    }

    .nav-links {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        background: #14141c;
        border-bottom: 1px solid var(--border);
        padding: 16px 24px 24px;
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: transform .18s ease, opacity .18s ease;
        z-index: 40;
    }

    .nav-links.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .nav-links a {
        padding: 10px 0;
        width: 100%;
    }

    .nav-cta-mobile {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--border);
    }

    .nav-cta-mobile .btn {
        width: 100%;
        text-align: center;
    }

    .nav-inner {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 480px) {
    .store-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }

    .settings-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .panel-head,
    .panel-body {
        padding: 16px;
    }

    .topbar {
        padding: 14px 16px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .topbar-actions {
        flex-wrap: wrap;
        max-width: 100%;
        width: 100%;
    }

    .topbar-actions .btn {

        font-size: 13px;
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
        max-width: none;
    }

    .topbar-actions .badge {
        white-space: normal;
        max-width: 100%;
        text-align: right;
    }



    .topbar>div:first-child {
        min-width: 0;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .icon-btn.menu-toggle {
        flex-shrink: 0;
    }
}

@media (max-width: 680px) {
    .table thead {
        display: none;
    }

    .table,
    .table tbody,
    .table tr,
    .table td {
        display: block;
        width: 100%;
    }

    .table tr {
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px 14px;
        margin-bottom: 10px;
    }

    .table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
        border-bottom: 1px solid var(--border);
        text-align: right;
    }

    .table td:last-child {
        border-bottom: none;
    }

    .table td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        color: var(--muted, #666);
        flex: 0 0 auto;
    }



    /* Célula "Produto" tem layout próprio (imagem + nome), sem rótulo */
    .table td[data-label="Produto"] {
        justify-content: flex-start;
    }

    .table td[data-label="Produto"]::before {
        display: none;
    }

    .table td[data-label="Produto"] .prod-cell {
        width: 100%;
    }

    .table td[data-label="Ações"] .row-actions {
        justify-content: flex-end;
    }

    .table td[data-label="Destaque"] {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 6px;
    }

    .pix-grid {
        grid-template-columns: 1fr;
    }


    .plan-current {
        flex-direction: column;
        align-items: flex-start;
    }

    .plan-current a.btn {
        width: 100%;
        text-align: center;
    }

    .billing-row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 12px 0;
    }

    .billing-row>div {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .billing-row .label {
        margin-bottom: 0;
    }

    .switch-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    .switch-row>div:first-child {
        min-width: 0;
        flex: 1 1 200px;
    }

    .switch-row>div:first-child>span {
        display: block;
        font-size: 13px;
        color: var(--text-muted);
    }

}

.option-card.is-locked {
    opacity: 0.5;
    cursor: not-allowed;
    position: relative;
}

.option-pro-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--accent, #7c5cff);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
}

/*Login*/

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

.password-wrap .input {
    width: 100%;
    padding-right: 44px;
}

.toggle-senha {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #6b7280;
    border-radius: 6px;
    padding: 0;
}

.toggle-senha:hover {
    color: #374151;
    background: rgba(0, 0, 0, 0.04);
}

.toggle-senha:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.toggle-senha svg {
    width: 20px;
    height: 20px;
}

.grid-2col-responsive {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    /* ajuste conforme o gap que você já usa em .grid */
}

.table-scroll thead th {
    position: sticky;
    top: 0;
    background: var(--bg-card, #fff);
    z-index: 1;
    max-height: 640px;
    overflow-y: auto;
}

.table-scroll {
    max-height: 600px;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .grid-2col-responsive {
        grid-template-columns: 1fr;
    }

    .app-content {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .app-content>.grid-2col-responsive {
        display: contents;
    }

    .panel-acessos-mobile-last {
        order: 2;
    }
}

/* ---------- Modal de detalhes ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 7, 13, 0.72);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
    animation: modal-fade-in .15s ease;
}

@keyframes modal-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-box {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--bg-card-solid);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glow);
    padding: 32px;
    color: var(--text);
    font-family: var(--font-body);
}

.modal-box h2 {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text);
}

.modal-box h3 {
    font-family: var(--font-display);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin: 24px 0 8px;
}

.modal-box p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.modal-box code {
    font-family: var(--font-mono);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    font-size: 13px;
    color: var(--lilac-bright);
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
}

.modal-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    padding: 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.modal-grid strong {
    display: inline-block;
    min-width: 140px;
    flex-shrink: 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-dim);
    font-weight: 600;
    margin-bottom: 0;
}

.modal-grid>div {
    font-size: 14px;
    color: var(--text);
    display: flex;
    gap: 8px;
    align-items: baseline;
}

/* Banner fallback quando não há imagem */
.store-banner {
    background: var(--tema-thumb-grad, var(--grad-brand));
}

/* Layout lado a lado: avatar/descrição à esquerda, banner à direita */
.store-top {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 34px;
}

@media (min-width: 769px) {
    .store-top {
        flex-direction: row-reverse;
        align-items: flex-start;
        gap: 32px;
        margin-bottom: 44px;
    }

    .store-top .store-banner {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 0;
        aspect-ratio: 16/7;
    }

    .store-top .store-header {
        flex: 1;
        text-align: center;
        margin-bottom: 0;
    }

    .store-top .store-header p {
        margin: 0 auto;
    }

    .store-top .store-avatar {
        margin: 0 auto 12px;
    }
}

/* Menu hambúrguer — só mobile */
.store-menu-toggle {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    background: none;
    border: none;
    font-size: 22px;
    color: var(--tema-text, var(--text));
    cursor: pointer;
}

.store-mobile-menu {
    display: none;
    position: fixed;
    top: 16px;
    left: 16px;
    width: min(300px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    z-index: 1000;
    background: var(--tema-bg, var(--bg-card-solid));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    padding: 20px;
    overflow-y: auto;
}

.store-mobile-menu.is-open {
    display: block;
}

.store-mobile-menu-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--tema-text, var(--text));
    position: absolute;
    right: 16px;
    top: 16px;
    cursor: pointer;
}

.store-mobile-menu-socials {
    display: flex;
    gap: 14px;
    margin: 32px 0 20px;
}

.store-mobile-menu-categorias {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.store-mobile-menu-categorias button {
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
    font-size: 15px;
    color: var(--tema-text, var(--text));
    cursor: pointer;
}

.store-mobile-menu-categorias button.is-active {
    color: var(--tema-accent, var(--lilac-bright));
    font-weight: 600;
}

/* Botão flutuante voltar ao topo */
.store-back-to-top {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--tema-card-bg, var(--bg-card-solid));
    color: var(--tema-text, var(--text));
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
    z-index: 500;
}

.store-back-to-top.is-visible {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .store-menu-toggle {
        display: block;
    }
}