/* ============================================================
   Ultra Bruxo — UI neutra, moderna e premium.
   Interface 100% neutra (grafite/branco). Cor APENAS nos dados:
   verde = positivo, vermelho = negativo, âmbar = faixa intermediária.
   Suporta tema escuro (padrão) e claro via [data-theme].
   ============================================================ */

/* -------- Tema ESCURO (padrão) -------- */
:root,
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg:            #0B0B0E;
    --bg-soft:       #111114;
    --surface:       #16161B;
    --surface-2:     #1C1C22;
    --surface-hover: #212129;
    --border:        #26262E;
    --border-strong: #36363F;
    --text:          #F4F4F5;
    --text-2:        #A1A1AA;
    --text-3:        #71717A;

    /* dados (sinal) */
    --pos:           #3FBF8F;
    --neg:           #E5706B;
    --warn:          #CFA13E;

    /* chrome neutro */
    --ink-bg:        #F4F4F5;   /* botão primário / marca / avatar */
    --ink-fg:        #16161B;
    --ico-bg:        rgba(255,255,255,.05);

    --shadow:        0 1px 2px rgba(0,0,0,.35), 0 14px 34px -20px rgba(0,0,0,.7);
    --shadow-lift:   0 1px 2px rgba(0,0,0,.4), 0 20px 44px -20px rgba(0,0,0,.8);
}

/* -------- Tema CLARO -------- */
:root[data-theme="light"] {
    color-scheme: light;
    --bg:            #FAFAFA;
    --bg-soft:       #FFFFFF;
    --surface:       #FFFFFF;
    --surface-2:     #F6F6F7;
    --surface-hover: #F1F1F4;
    --border:        #E7E7EA;
    --border-strong: #D4D4DA;
    --text:          #18181B;
    --text-2:        #52525B;
    --text-3:        #8A8A93;

    --pos:           #15A34A;
    --neg:           #DC2626;
    --warn:          #B45309;

    --ink-bg:        #18181B;
    --ink-fg:        #FAFAFA;
    --ico-bg:        rgba(0,0,0,.045);

    --shadow:        0 1px 2px rgba(17,17,20,.05), 0 10px 26px -16px rgba(17,17,20,.16);
    --shadow-lift:   0 1px 3px rgba(17,17,20,.08), 0 18px 40px -18px rgba(17,17,20,.22);
}

:root {
    --r:    16px;
    --r-md: 12px;
    --r-sm: 9px;
    --mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    --ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--ui);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background .2s ease, color .2s ease;
}

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

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.unit { color: var(--text-3); font-size: 0.82em; margin-left: 1px; }

/* sinais (dados) */
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.warn { color: var(--warn); }
.neutral { color: var(--text-3); }
.t2 { color: var(--text-2); }

/* ----------------------------------------------------------------
   Shell: sidebar + main
   ---------------------------------------------------------------- */
.shell { display: flex; align-items: flex-start; min-height: 100vh; }

.sidebar {
    position: sticky; top: 0; height: 100vh;
    flex: 0 0 244px;
    display: flex; flex-direction: column; gap: 6px;
    padding: 22px 16px;
    background: var(--bg-soft);
    border-right: 1px solid var(--border);
}
.brand {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px 18px;
    font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
}
.brand-mark { display: inline-flex; align-items: center; }
.brand-logo { height: 26px; width: auto; display: block; }
.only-light { display: none; }
:root[data-theme="light"] .only-light { display: block; }
:root[data-theme="light"] .only-dark { display: none; }
.login-brand .brand-logo { height: 30px; }

.nav { display: flex; flex-direction: column; gap: 3px; }
.nav-item {
    display: flex; align-items: center; gap: 11px;
    width: 100%;
    padding: 9px 11px;
    border: none; background: transparent;
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-family: var(--ui); font-size: 13.5px; text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.nav-item:hover { background: var(--surface); color: var(--text); }
.nav-item.active { background: var(--surface-hover); color: var(--text); }
.nav-item.active .nav-ico { color: var(--text); }
.nav-ico { display: grid; place-items: center; width: 18px; height: 18px; color: var(--text-3); }
.nav-ico svg { width: 18px; height: 18px; }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 3px; padding-top: 14px; border-top: 1px solid var(--border); }
.user { display: flex; align-items: center; gap: 10px; padding: 6px 11px 10px; }
.user-avatar {
    display: grid; place-items: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    font-size: 12px; font-weight: 600;
    color: var(--ink-fg); background: var(--ink-bg);
}
.user-name { font-size: 13.5px; color: var(--text); }

.main {
    flex: 1 1 auto; min-width: 0; width: 100%;
    max-width: 1360px;
    margin-inline: auto;
    padding: 30px 32px 90px;
}

/* ----------------------------------------------------------------
   Cabeçalho de página
   ---------------------------------------------------------------- */
.topbar {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 24px; flex-wrap: wrap; margin-bottom: 30px;
}
.topbar-left h1 { margin: 2px 0 5px; font-size: 23px; font-weight: 600; letter-spacing: -0.02em; }
.sub { margin: 0; color: var(--text-2); font-size: 13px; }
.topbar-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

.back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; margin-bottom: 6px; transition: color .15s ease; }
.back:hover { color: var(--text); }
.back .arrow { font-size: 15px; }
.navlinks { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ----------------------------------------------------------------
   Botões
   ---------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px;
    background: var(--surface);
    color: var(--text-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-family: var(--ui); font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
}
.btn:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text); }
.btn-sm { padding: 6px 11px; font-size: 12px; }
.btn-ico { width: 15px; height: 15px; display: block; }
.btn-primary {
    color: var(--ink-fg); background: var(--ink-bg);
    border-color: transparent;
}
.btn-primary:hover { color: var(--ink-fg); filter: brightness(.94); }

/* ----------------------------------------------------------------
   Seletor de período
   ---------------------------------------------------------------- */
.period { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.seg-group {
    display: inline-flex;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 3px; gap: 2px;
}
.seg {
    padding: 6px 13px;
    background: transparent; color: var(--text-2);
    border: none; border-radius: 7px;
    font-family: var(--ui); font-size: 13px; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.seg:hover { color: var(--text); }
.seg.active { background: var(--surface-hover); color: var(--text); }

.seg-custom { display: none; align-items: center; gap: 8px; }
.seg-custom.open { display: inline-flex; }
.seg-custom input[type="date"] {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-sm); color: var(--text);
    font-family: var(--mono); font-size: 12px; padding: 7px 9px;
}
.seg-custom .seg { border: 1px solid var(--border); background: var(--surface); }
.seg-custom .dash { color: var(--text-3); }

/* ----------------------------------------------------------------
   Container-pai do cliente / conta + cartões de métrica
   ---------------------------------------------------------------- */
.client-stack { display: flex; flex-direction: column; gap: 18px; margin-bottom: 34px; }

/* Arrastar para reordenar */
.client-row { position: relative; }
.client-row .client-card { padding-left: 32px; }
.drag-grip {
    position: absolute; left: 5px; top: 0; bottom: 0;
    width: 22px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-3); cursor: grab; opacity: .35;
    transition: opacity .15s ease, color .15s ease;
    z-index: 2;
}
.client-row:hover .drag-grip { opacity: .8; }
.drag-grip:active { cursor: grabbing; }
.drag-grip svg { width: 16px; height: 16px; display: block; }
.client-row.dragging { opacity: .55; }
.client-row.dragging .client-card { border-color: var(--border-strong); box-shadow: var(--shadow-lift); }

.client-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 15px;
    box-shadow: var(--shadow);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
a.client-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
a.client-card:hover .cc-chevron { color: var(--text); transform: translateX(3px); }

.cc-head { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.cc-avatar {
    flex: 0 0 auto;
    display: grid; place-items: center;
    width: 33px; height: 33px;
    border-radius: 10px;
    font-size: 14px; font-weight: 600;
    color: var(--ink-fg); background: var(--ink-bg);
    overflow: hidden;
}
.cc-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cc-name { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.cc-sub { font-size: 12px; color: var(--text-3); }
.cc-chevron { margin-left: auto; color: var(--text-3); font-size: 16px; transition: color .15s ease, transform .15s ease; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
.stat {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px 13px; min-width: 0;
}
.stat-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.stat-ico {
    flex: 0 0 auto; width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: var(--ico-bg); color: var(--text-2);
}
.stat-ico svg { width: 14px; height: 14px; display: block; }
.stat-label { flex: 1 1 auto; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-info { flex: 0 0 auto; width: 13px; height: 13px; color: var(--text-3); opacity: .5; }
.stat-info:hover { opacity: 1; }
.stat-val { font-size: 18.5px; font-weight: 600; line-height: 1.1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }

/* ----------------------------------------------------------------
   Blocos / tabela "Dia a dia"
   ---------------------------------------------------------------- */
.block { margin-bottom: 30px; }
.block-title { font-size: 13.5px; font-weight: 600; color: var(--text); margin: 0 0 14px; }
.block-hint { color: var(--text-3); font-weight: 400; }

.table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow-x: auto;
    background: var(--surface);
    box-shadow: var(--shadow);
}
table.daily { width: 100%; border-collapse: collapse; font-size: 13px; }
table.daily thead th {
    font-size: 12px; font-weight: 500; color: var(--text-3);
    text-align: right; padding: 13px 16px;
    border-bottom: 1px solid var(--border); white-space: nowrap;
    background: var(--bg-soft);
}
table.daily thead th.l { text-align: left; }
table.daily tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; color: var(--text); }
table.daily tbody tr:last-child td { border-bottom: none; }
table.daily tbody tr:hover td { background: var(--surface-hover); }
table.daily td.l { text-align: left; }
table.daily td.date { color: var(--text-2); }

/* Cor NOS VALORES (Lucro e ROAS): vence as cores neutras de base.
   Faturamento e Tráfego seguem neutros (sem classe de cor / .t2). */
.stat-val.pos,     table.daily td.pos     { color: var(--pos); }
.stat-val.neg,     table.daily td.neg     { color: var(--neg); }
.stat-val.warn,    table.daily td.warn    { color: var(--warn); }
.stat-val.neutral, table.daily td.neutral { color: var(--text-3); }
.stat-val.t2,      table.daily td.t2      { color: var(--text-2); }
.empty-row { color: var(--text-3); text-align: left; padding: 20px 16px; }

/* ----------------------------------------------------------------
   Últimas vendas
   ---------------------------------------------------------------- */
table.sales { width: 100%; border-collapse: collapse; font-size: 13px; }
table.sales thead th {
    font-size: 12px; font-weight: 500; color: var(--text-3);
    text-align: right; padding: 13px 16px;
    border-bottom: 1px solid var(--border); white-space: nowrap;
    background: var(--bg-soft);
}
table.sales thead th.l { text-align: left; }
table.sales tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; color: var(--text); }
table.sales tbody tr:last-child td { border-bottom: none; }
table.sales tbody tr:hover td { background: var(--surface-hover); }
table.sales td.l { text-align: left; }
table.sales td.date { color: var(--text-2); }
table.sales td.muted { color: var(--text-3); max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
table.sales td.pos { color: var(--pos); }
table.sales td.neg { color: var(--neg); }
table.sales td.neutral { color: var(--text); }

.ob-badge {
    display: inline-block; margin-left: 7px; padding: 1px 6px;
    border-radius: 6px; font-size: 10px; font-weight: 600; letter-spacing: .02em;
    color: var(--warn);
    border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
    background: color-mix(in srgb, var(--warn) 12%, transparent);
    vertical-align: middle;
}
.sale-status {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 500; border: 1px solid var(--border-strong);
    color: var(--text-3);
}
.sale-status.sale-ok    { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 40%, transparent); background: color-mix(in srgb, var(--pos) 12%, transparent); }
.sale-status.sale-neg   { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 40%, transparent); background: color-mix(in srgb, var(--neg) 12%, transparent); }
.sale-status.sale-muted { color: var(--text-3); }

/* ----------------------------------------------------------------
   Listas editáveis (contas / clientes)
   ---------------------------------------------------------------- */
.edit-list { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.edit-row {
    display: grid; grid-template-columns: 1.4fr 1.4fr 0.7fr auto;
    align-items: center; gap: 12px; padding: 11px 16px;
    border-bottom: 1px solid var(--border);
}
.edit-row-client { grid-template-columns: 64px 1.2fr 1.5fr 0.9fr 0.5fr 0.6fr auto; }
.edit-row-client select.inline-input { font-family: var(--ui); }
.edit-row:last-child { border-bottom: none; }
.edit-head { font-size: 12px; color: var(--text-3); background: var(--bg-soft); }
.edit-head .r { text-align: right; }
.row-muted { opacity: 0.5; }

/* Edição no-lugar: em repouso o campo parece TEXTO; a borda/fundo só aparecem
   no hover/foco. Tira a "parede de caixas" e deixa a lista calma e premium. */
.inline-input {
    width: 100%;
    background: transparent; border: 1px solid transparent;
    border-radius: var(--r-sm); color: var(--text);
    font-family: var(--ui); font-size: 13.5px; padding: 8px 10px;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
    cursor: text;
}
.inline-input.num { font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.inline-input:hover { background: var(--bg-soft); border-color: var(--border); }
.inline-input:focus { outline: none; background: var(--bg-soft); border-color: var(--border-strong); cursor: text; }
.inline-input::placeholder { color: var(--text-3); }
/* selects inline: sem cara de <select> em repouso; caret custom no hover */
select.inline-input {
    -webkit-appearance: none; appearance: none; cursor: pointer;
    background-image: none; padding-right: 26px;
}
.edit-row { position: relative; }
select.inline-input:hover, select.inline-input:focus {
    background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
                      linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
    background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

.status-cell { font-size: 12px; }
.actions-cell { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

.pill { display: inline-block; padding: 3px 9px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 11px; color: var(--text-3); }
.pill-pos { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 40%, transparent); background: color-mix(in srgb, var(--pos) 12%, transparent); }
.pill-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.pill-type { color: var(--text-2); border-color: var(--border-strong); background: var(--surface-2); }

.link { color: var(--text-2); border-bottom: 1px solid var(--border-strong); }
.link:hover { color: var(--text); }

.products-table select, .form-row select, .form-row input, .create-form select {
    background: var(--bg-soft); border: 1px solid var(--border);
    border-radius: var(--r-sm); color: var(--text);
    font-family: var(--ui); font-size: 13px; padding: 9px 11px;
}
.products-table select { min-width: 180px; }
.form-row select:focus, .form-row input:focus, .products-table select:focus, .create-form select:focus { outline: none; border-color: var(--border-strong); }

.row-pending td { background: color-mix(in srgb, var(--warn) 8%, transparent); }
.row-here td { background: color-mix(in srgb, var(--pos) 9%, transparent); }
.products-table input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--text); cursor: pointer; }

/* ----------------------------------------------------------------
   Formulários
   ---------------------------------------------------------------- */
.form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.form-row input[type="text"] { flex: 1 1 200px; min-width: 160px; }
.form-actions { margin-top: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.create-form { display: flex; flex-direction: column; gap: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field span { font-size: 12px; color: var(--text-3); }
.create-form .field > input, .create-form .field > select, .act-row input {
    background: var(--bg-soft); border: 1px solid var(--border);
    border-radius: var(--r-sm); color: var(--text);
    font-family: var(--ui); font-size: 13px; padding: 9px 11px; width: 100%;
}
.act-row input.num { font-family: var(--mono); font-size: 12px; }
.create-form .field > input:focus, .create-form .field > select:focus, .act-row input:focus { outline: none; border-color: var(--border-strong); }

.act-rows { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.act-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.hint-line { font-size: 12px; color: var(--text-3); margin: 0; }

/* ----------------------------------------------------------------
   Alertas / webhook / vazio
   ---------------------------------------------------------------- */
.alert { border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px 15px; font-size: 13px; margin-bottom: 20px; color: var(--text-2); background: var(--surface); }
.alert-pos { border-color: color-mix(in srgb, var(--pos) 35%, var(--border)); color: var(--pos); }
.alert-neg { border-color: color-mix(in srgb, var(--neg) 35%, var(--border)); color: var(--neg); }
.alert-info { color: var(--text-2); }

.webhook-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.webhook-box code { font-family: var(--mono); font-size: 12px; color: var(--text); background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 10px; }

.empty { border: 1px dashed var(--border-strong); border-radius: var(--r); padding: 30px; text-align: center; color: var(--text-2); background: var(--surface); }
.empty a { color: var(--text); border-bottom: 1px solid var(--border-strong); }

/* ----------------------------------------------------------------
   Login
   ---------------------------------------------------------------- */
.auth-main { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card {
    width: 100%; max-width: 360px;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--r);
    padding: 30px 28px;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: var(--shadow-lift);
}
.login-brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; }
.login-card .sub { margin-bottom: 6px; }
.login-card .field input {
    background: var(--bg-soft); border: 1px solid var(--border);
    border-radius: var(--r-sm); color: var(--text);
    font-family: var(--ui); font-size: 14px; padding: 11px 13px;
}
.login-card .field input:focus { outline: none; border-color: var(--border-strong); }
.login-card .btn-primary { margin-top: 6px; padding: 12px; }

/* ----------------------------------------------------------------
   Responsivo
   ---------------------------------------------------------------- */
/* Desktop: mobile-bar e backdrop escondidos */
.mobile-bar { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 980px) {
    .shell { flex-direction: column; }

    /* Barra fixa no topo: logo + nome + hambúrguer */
    .mobile-bar {
        display: flex; align-items: center; justify-content: space-between;
        position: sticky; top: 0; z-index: 60;
        padding: 8px 16px; width: 100%;
        background: var(--bg-soft); border-bottom: 1px solid var(--border);
    }
    .mobile-bar .brand { padding: 0; gap: 10px; }
    .mobile-bar .brand-text { display: inline; font-size: 15px; }
    .mobile-bar .nav-toggle {
        display: inline-grid; place-items: center;
        width: 38px; height: 38px; border-radius: 10px;
        border: 1px solid var(--border); background: var(--surface);
        color: var(--text-2); cursor: pointer;
    }
    .mobile-bar .nav-toggle:hover { color: var(--text); border-color: var(--border-strong); }
    .mobile-bar .nav-toggle svg { width: 20px; height: 20px; }

    /* Backdrop escuro */
    .sidebar-backdrop {
        position: fixed; inset: 0; z-index: 69;
        background: rgba(0,0,0,.5); backdrop-filter: blur(2px);
    }
    .sidebar-backdrop[hidden] { display: none; }
    body.menu-open { overflow: hidden; }

    /* Sidebar vira painel fixo que desliza da esquerda */
    .sidebar {
        position: fixed; top: 0; left: -280px; bottom: 0;
        width: 264px; height: 100vh; z-index: 70;
        flex-direction: column; align-items: stretch;
        padding: 22px 16px; gap: 6px;
        border-right: 1px solid var(--border); border-bottom: none;
        transition: left .28s cubic-bezier(.4,0,.2,1);
        box-shadow: none;
    }
    .sidebar.open {
        left: 0;
        box-shadow: 12px 0 40px rgba(0,0,0,.35);
    }
    /* dentro do sidebar slide-in: tudo visível normalmente */
    .sidebar .brand { display: flex; padding: 0 0 6px; }
    .sidebar .brand-text { display: inline; }
    .sidebar .nav { display: flex; flex-direction: column; }
    .sidebar .sidebar-foot { display: flex; flex-direction: column; }
    .nav-item { padding: 12px; width: 100%; justify-content: flex-start; }
    .user { display: none; }
    .js-theme .js-theme-label { display: inline; }
    .main { padding: 20px 16px 70px; }
}
@media (max-width: 860px) {
    .stat-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .topbar-right { align-items: flex-start; width: 100%; }
    .period { align-items: flex-start; width: 100%; }
    .stat-row { grid-template-columns: 1fr 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .act-row { grid-template-columns: 1fr; }
    .edit-row, .edit-row-client { grid-template-columns: 1fr; gap: 8px; }
    .edit-head { display: none; }
    .actions-cell { justify-content: flex-start; }
}

/* ----------------------------------------------------------------
   Engrenagem de configuração (impostos) no card
   ---------------------------------------------------------------- */
.cc-gear {
    position: relative;
    display: inline-grid; place-items: center;
    width: 30px; height: 30px; margin-left: auto;
    border-radius: 8px; cursor: pointer; color: var(--text-3);
    border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.cc-refund-badge + .cc-gear { margin-left: 8px; }
.cc-gear:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border); }
.cc-gear svg { width: 17px; height: 17px; }
.cc-gear-dot {
    position: absolute; top: 3px; right: 3px; width: 7px; height: 7px;
    border-radius: 50%; background: var(--pos);
    box-shadow: 0 0 0 2px var(--surface);
}
a.client-card .cc-gear { z-index: 2; }

/* ----------------------------------------------------------------
   Modal
   ---------------------------------------------------------------- */
body.modal-open { overflow: hidden; }
.modal-backdrop {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-backdrop[hidden] { display: none; }
.modal {
    width: 100%; max-width: 440px; background: var(--surface);
    border: 1px solid var(--border-strong); border-radius: var(--r);
    box-shadow: 0 24px 60px rgba(0,0,0,.45); overflow: hidden;
}
.modal-form { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.modal-x { background: none; border: none; color: var(--text-3); font-size: 15px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.modal-x:hover { background: var(--surface-hover); color: var(--text); }
.modal-switch { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); cursor: pointer; }
.modal-switch input { width: 16px; height: 16px; accent-color: var(--pos); }
.modal-field { display: flex; flex-direction: column; gap: 7px; }
.modal-field > label { font-size: 12px; color: var(--text-2); font-weight: 500; }
.modal-field .muted { color: var(--text-3); font-weight: 400; }
.input-suffix { display: flex; align-items: center; gap: 8px; }
.input-suffix input {
    flex: 1; background: var(--bg-soft); border: 1px solid var(--border);
    border-radius: 9px; padding: 9px 11px; color: var(--text); font-size: 14px;
    font-family: var(--mono);
}
.input-suffix input:focus { outline: none; border-color: var(--border-strong); }
.input-suffix > span { color: var(--text-3); font-size: 13px; }
.modal-hint { font-size: 11px; color: var(--text-3); }
.modal-radios { display: flex; gap: 16px; margin-top: 2px; }
.modal-radios label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.modal-radios input { accent-color: var(--pos); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }

/* ----------------------------------------------------------------
   Faixa de métricas secundárias
   ---------------------------------------------------------------- */
.metrics-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--border); border: 1px solid var(--border);
    border-radius: var(--r); overflow: hidden; margin-bottom: 18px;
}
.ms-item { display: flex; align-items: center; gap: 11px; padding: 13px 15px; background: var(--surface); }
.ms-ico { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; color: var(--text-3); }
.ms-ico svg { width: 17px; height: 17px; }
.ms-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ms-label { font-size: 11.5px; color: var(--text-3); display: flex; align-items: center; gap: 5px; }
.ms-val { font-size: 16.5px; color: var(--text); font-weight: 500; }
.ms-sub { font-size: 12px; color: var(--text-3); }
@media (max-width: 720px) { .metrics-strip { grid-template-columns: repeat(2, 1fr); } }

/* ----------------------------------------------------------------
   Gráficos diários
   ---------------------------------------------------------------- */
.charts-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-bottom: 22px; }
.chart-card { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px 18px 14px; }
.chart-card canvas { max-width: 100%; }
.chart-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 14px; }
.chart-hint { font-size: 12px; font-weight: 400; color: var(--text-3); }
.chart-box { position: relative; height: 260px; }
.chart-empty { height: 120px; display: grid; place-items: center; color: var(--text-3); font-size: 13px; }
@media (max-width: 900px) { .charts-grid { grid-template-columns: 1fr; } }

/* Cabeçalho do gráfico + legenda própria (limpa) */
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.chart-head .chart-title { margin-bottom: 0; }
.chart-legend { display: flex; align-items: center; gap: 16px; }
.cl-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); }
.cl-item i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
@media (max-width: 520px) { .chart-legend { gap: 12px; } .cl-item { font-size: 11px; } }

/* ----------------------------------------------------------------
   Avatar do cliente (foto)
   ---------------------------------------------------------------- */
.cc-avatar.has-img { background: none; padding: 0; }
.cc-avatar img { width: 33px; height: 33px; object-fit: cover; border-radius: 10px; display: block; }

/* Uploader na lista de clientes */
.avatar-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.av-edit {
    position: relative; width: 40px; height: 40px; border-radius: 11px;
    display: grid; place-items: center; cursor: pointer; overflow: hidden;
    background: var(--ink-bg); color: var(--ink-fg); font-weight: 600; font-size: 15px;
    border: 1px solid var(--border);
}
.av-edit img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-ph { pointer-events: none; }
.av-cam {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(0,0,0,.45); color: #fff; opacity: 0; transition: opacity .15s ease;
}
.av-cam svg { width: 16px; height: 16px; }
.av-edit:hover .av-cam, .av-edit:focus-visible .av-cam { opacity: 1; }
.av-edit.is-busy { opacity: .55; pointer-events: none; }
.av-remove {
    background: none; border: none; color: var(--text-3); font-size: 10.5px;
    cursor: pointer; padding: 0; text-decoration: underline;
}
.av-remove:hover { color: var(--neg); }
@media (max-width: 720px) { .avatar-cell { align-items: flex-start; } }

/* ----------------------------------------------------------------
   Página principal: 2 clientes por linha (só no index, via .client-grid)
   ---------------------------------------------------------------- */
.client-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 1600px) {
    /* 2 por linha só quando há largura real para 6 dígitos (R$ 100.000+) caberem */
    .client-grid { grid-template-columns: 1fr 1fr; }
    .client-grid .client-card { padding-left: 26px; }
    .client-grid .stat { padding: 11px 9px; }
    .client-grid .stat-top { margin-bottom: 8px; gap: 6px; }
    .client-grid .stat-ico { width: 26px; height: 26px; }
    .client-grid .stat-ico svg { width: 15px; height: 15px; }
    .client-grid .stat-label { font-size: 12px; }
    .client-grid .stat-row { gap: 10px; }
    .client-grid .stat-val { font-size: 16px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
}

/* ----------------------------------------------------------------
   Mobile: métricas empilhadas (uma embaixo da outra) + menu rolável
   ---------------------------------------------------------------- */
@media (max-width: 600px) {
    .stat-row { grid-template-columns: 1fr; gap: 10px; }
    .cc-name { font-size: 15px; }
    .main { padding: 20px 14px 70px; }
    .seg-group { flex-wrap: wrap; }
}

/* ----------------------------------------------------------------
   Sincronizar como ícone, ao lado do seletor de período
   ---------------------------------------------------------------- */
.period-bar { display: flex; align-items: flex-start; gap: 10px; }
.icon-btn {
    flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: var(--r-sm); border: 1px solid var(--border);
    background: var(--surface); color: var(--text-2); cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }
.icon-btn svg { width: 17px; height: 17px; }

/* ----------------------------------------------------------------
   Calendário de intervalo (Custom)
   ---------------------------------------------------------------- */
.period { position: relative; }
.cal-pop {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
    display: flex;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--r); box-shadow: var(--shadow-lift); overflow: hidden;
}
.cal-pop[hidden] { display: none; }
.cal-presets { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-right: 1px solid var(--border); min-width: 152px; }
.cal-presets button {
    text-align: left; background: none; border: none; cursor: pointer;
    color: var(--text-2); font-size: 13px; padding: 8px 10px; border-radius: 8px;
}
.cal-presets button:hover { background: var(--surface-hover); color: var(--text); }
.cal-main { padding: 14px 16px; }
.cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cal-arrow {
    flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer;
    background: none; border: 1px solid var(--border); border-radius: 8px;
    color: var(--text-2); font-size: 16px; line-height: 1;
}
.cal-arrow:hover { background: var(--surface-hover); color: var(--text); }
.cal-titles { flex: 1 1 auto; display: flex; justify-content: space-around; gap: 16px; font-size: 13px; font-weight: 600; color: var(--text); text-transform: capitalize; }
.cal-months { display: flex; gap: 22px; }
.cal-month { width: 224px; }
.cal-wd, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); column-gap: 0; }
.cal-wd { margin-bottom: 6px; }
.cal-wd span { text-align: center; font-size: 11px; color: var(--text-3); padding: 2px 0; }
.cal-grid { row-gap: 3px; }
.cal-empty { aspect-ratio: 1 / 1; }
.cal-day {
    aspect-ratio: 1 / 1; display: grid; place-items: center;
    background: none; border: none; cursor: pointer; border-radius: 8px;
    color: var(--text); font-size: 12.5px; font-family: var(--mono);
    transition: background .12s ease;
}
.cal-day:hover:not(.is-disabled) { background: var(--surface-hover); }
.cal-day.is-disabled { color: var(--text-3); opacity: .35; cursor: default; }
.cal-day.is-today { box-shadow: inset 0 0 0 1px var(--border-strong); }
.cal-day.in-range { background: color-mix(in srgb, var(--ink-bg) 16%, transparent); border-radius: 0; }
.cal-day.sel-start, .cal-day.sel-end { background: var(--ink-bg); color: var(--ink-fg); font-weight: 600; }
.cal-day.sel-start { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-day.sel-end { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-2); font-family: var(--mono); text-align: center; }

/* ----------------------------------------------------------------
   Mobile: métricas empilhadas, sem alça de arrastar, calendário 1 mês
   ---------------------------------------------------------------- */
@media (max-width: 700px) {
    .stat-row { grid-template-columns: 1fr; gap: 10px; }
    .drag-grip { display: none; }
    .client-row .client-card { padding-left: 18px; }
    .period-bar { width: 100%; }
    .period { width: 100%; align-items: stretch; }
    .seg-group { flex-wrap: wrap; }
}
@media (max-width: 640px) {
    .cal-pop { position: fixed; left: 12px; right: 12px; top: 90px; flex-direction: column; max-height: 78vh; overflow: auto; }
    .cal-presets { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); min-width: 0; }
    .cal-months { flex-direction: column; gap: 16px; }
    .cal-month { width: 100%; }
}

/* ----------------------------------------------------------------
   Botão único de período (mobile)
   ---------------------------------------------------------------- */
.period-trigger {
    display: none; align-items: center; gap: 8px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: 9px 12px; color: var(--text);
    font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.period-trigger svg { width: 16px; height: 16px; color: var(--text-3); flex: 0 0 auto; }
.period-trigger:hover { border-color: var(--border-strong); }

@media (max-width: 720px) {
    .period .seg-group { display: none; }
    .period-trigger { display: inline-flex; flex: 1 1 auto; justify-content: center; }
    .period-bar { width: 100%; }
}

/* Calendário no mobile: mostra 1 mês e presets em 2 colunas */
@media (max-width: 640px) {
    .cal-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .cal-presets button { text-align: center; border: 1px solid var(--border); }
    .cal-months .cal-month:first-child { display: none; }
    .cal-titles .cal-t1 { display: none; }
    .cal-titles { justify-content: center; }
}

/* ----------------------------------------------------------------
   Campanhas (gerenciador de visualização)
   ---------------------------------------------------------------- */
.camp-filters {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-md); padding: 14px 18px;
}
.camp-filter-line {
    display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
}
.camp-filter-left {
    display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; flex: 0 1 auto;
}
.camp-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.camp-field > span { font-size: 11px; color: var(--text-3); font-weight: 500; }
.camp-field select {
    padding: 8px 10px; font: inherit; font-size: 13px;
    color: var(--text); background: var(--surface-2);
    border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer;
}
.camp-field select:focus { outline: none; border-color: var(--border-strong); }
.camp-btns { display: flex; gap: 6px; flex: 0 0 auto; }
.camp-period-right { margin-left: auto; flex: 0 1 auto; }
.camp-period-right .period { margin: 0; }

.camp-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 4px 0 16px; }
.camp-tab {
    padding: 9px 16px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500;
    color: var(--text-2); border: 1px solid transparent; text-decoration: none;
}
.camp-tab:hover { color: var(--text); background: var(--surface); }
.camp-tab.active { color: var(--text); background: var(--surface); border-color: var(--border); }
.camp-tracked { margin-left: auto; font-size: 13px; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.camp-tracked .pos { color: var(--pos); } .camp-tracked .warn { color: var(--warn); } .camp-tracked .neg { color: var(--neg); }

.camp-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
}
.camp-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.camp-table th {
    text-align: left; font-size: 12px; font-weight: 500; color: var(--text-3);
    padding: 11px 14px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.camp-table th.r, .camp-table td.r { text-align: right; }
.camp-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.camp-table tbody tr:hover { background: var(--surface-2); }
.camp-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.camp-table td.pos { color: var(--pos); }
.camp-table td.neg { color: var(--neg); }
.camp-table tfoot td { border-top: 1px solid var(--border-strong); border-bottom: none; font-weight: 600; color: var(--text); }
.camp-name { color: var(--text); font-weight: 500; }
.camp-ctx { color: var(--text-3); font-size: 12px; margin-top: 2px; }
.camp-empty { text-align: center; color: var(--text-2); padding: 30px 16px !important; }

.roas-pill {
    display: inline-block; min-width: 46px; text-align: center;
    padding: 3px 8px; border-radius: 6px; font-size: 13px; font-weight: 600;
    font-variant-numeric: tabular-nums; background: var(--surface-2); color: var(--text-2);
}
.roas-pill.pos  { background: rgba(63,191,143,.16);  color: var(--pos); }
.roas-pill.warn { background: rgba(207,161,62,.16);  color: var(--warn); }
.roas-pill.neg  { background: rgba(229,112,107,.16); color: var(--neg); }

@media (max-width: 720px) {
    /* Filtros: compactos, alinhados à esquerda */
    .camp-filters { padding: 12px; }
    .camp-filter-line { flex-direction: column; align-items: stretch; gap: 8px; }
    .camp-filter-left { flex-direction: column; gap: 6px; align-items: stretch; }
    .camp-field { align-items: stretch; }
    .camp-field > span { text-align: left; font-size: 11px; }
    .camp-field select { width: 100%; padding: 9px 10px; font-size: 14px; text-align: left; -webkit-appearance: none; }
    .camp-btns { display: flex; gap: 6px; }
    .camp-btns .btn { flex: 1; text-align: center; padding: 9px 10px; }
    .camp-period-right { margin-left: 0; }
    .camp-period-right .period { width: 100%; }

    /* Abas: 2 linhas — métricas em cima, atribuição + rastreadas embaixo */
    .camp-tabs {
        flex-wrap: wrap; overflow: visible; gap: 0;
        margin: 4px 0 12px; padding: 0;
    }
    .camp-tab { padding: 7px 10px; font-size: 13px; flex: 0 0 auto; }
    .camp-tab-sep { display: none; }
    .camp-tab-attr { margin-top: 6px; margin-right: 12px; }
    .camp-tracked {
        margin-left: 0; flex: 1 0 auto; margin-top: 6px;
        font-size: 12px; text-align: right;
    }

    /* Tabela */
    .camp-table { min-width: 560px; font-size: 13px; }
    .camp-table th, .camp-table td { padding: 9px 10px; }
    .camp-name { white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
    .camp-toolbar { justify-content: flex-start; }
}

/* ----------------------------------------------------------------
   Atribuição manual (Fase 2)
   ---------------------------------------------------------------- */
.attr-filter-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.attr-filter-btn {
    padding: 7px 14px; border-radius: var(--r-sm); font-size: 13px; font-weight: 500;
    color: var(--text-2); border: 1px solid var(--border); text-decoration: none; background: transparent;
}
.attr-filter-btn:hover { color: var(--text); border-color: var(--border-strong); }
.attr-filter-btn.active { color: var(--text); background: var(--surface); border-color: var(--border-strong); }
.attr-count { margin-left: auto; font-size: 13px; color: var(--text-3); }

.attr-table td { vertical-align: middle; }
.attr-product { font-weight: 500; color: var(--text); font-size: 13px; }
.attr-meta { color: var(--text-3); font-size: 12px; margin-top: 2px; }
.attr-origin {
    display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500;
    background: var(--surface-2); color: var(--text-2);
}
.attr-utm {
    margin-top: 4px; font-family: ui-monospace, monospace; font-size: 11px;
    color: var(--text-3); word-break: break-all; max-width: 280px; line-height: 1.4;
}

.attr-form { display: flex; gap: 6px; align-items: center; }
.attr-sel {
    padding: 6px 8px; font: inherit; font-size: 12px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
    min-width: 0; max-width: 180px;
}
.attr-sel:disabled { opacity: .4; cursor: not-allowed; }
.attr-sel:focus { outline: none; border-color: var(--border-strong); }

.attr-actions {
    display: flex; gap: 6px; align-items: center; justify-content: flex-start;
    white-space: nowrap; min-height: 32px; width: 110px;
}
.attr-actions .btn-sm { height: 30px; display: inline-flex; align-items: center; flex: 0 0 auto; }
.attr-table th.c, .attr-table td.c { width: 130px; }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text-3); width: 30px; justify-content: center; padding: 5px; }
.btn-ghost:hover { color: var(--neg); border-color: var(--neg); }
/* Reserva o espaço do botão remover mesmo quando ele não existe */
.attr-actions .btn-spacer { width: 30px; flex: 0 0 auto; }

/* Indicador visual de status */
tr.attr-none td:first-child { border-left: 3px solid var(--neg); }
tr.attr-auto td:first-child { border-left: 3px solid var(--pos); }
tr.attr-manual td:first-child { border-left: 3px solid #7c5cff; }

@media (max-width: 720px) {
    .attr-form { flex-direction: column; align-items: stretch; gap: 4px; }
    .attr-sel { max-width: 100%; }
    .attr-filter-bar { gap: 4px; }
    .attr-count { flex-basis: 100%; margin-left: 0; margin-top: 4px; }
}

/* Separador visual entre abas de métricas e atribuição */
.camp-tab-sep { width: 1px; height: 20px; background: var(--border); margin: 0 6px; flex: 0 0 auto; }
.camp-tab-attr {
    border: 1px dashed var(--border) !important; color: var(--text-2) !important;
    font-style: italic;
}
.camp-tab-attr.active {
    border-style: solid !important; border-color: #7c5cff !important;
    color: #7c5cff !important; background: rgba(124,92,255,.08) !important;
    font-style: normal;
}
.camp-tab-attr:hover { border-color: #7c5cff !important; color: #7c5cff !important; }

/* Sort headers */
.sort-hdr { color: var(--text-3); text-decoration: none; white-space: nowrap; cursor: pointer; }
.sort-hdr:hover { color: var(--text); }
.sort-active { color: var(--text) !important; font-weight: 600; }

/* Toolbar (CSV export etc.) */
.camp-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }

/* Export dropdown */
.export-drop { position: relative; display: inline-block; }
.export-menu {
    position: absolute; top: 100%; right: 0; z-index: 20; margin-top: 4px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
    box-shadow: 0 8px 24px rgba(0,0,0,.3); min-width: 280px; overflow: hidden;
}
.export-menu[hidden] { display: none; }
.export-opt {
    display: block; padding: 10px 14px; font-size: 13px; color: var(--text);
    text-decoration: none; border-bottom: 1px solid var(--border);
}
.export-opt:last-child { border-bottom: none; }
.export-opt:hover { background: var(--surface-2); }

/* Status dot (bolinha ligado/desligado) */
.status-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    margin-right: 6px; vertical-align: middle; flex: 0 0 7px;
}
.dot-on  { background: var(--pos); }
.dot-off { background: var(--neg); opacity: .7; }
.btn-active-on { border-color: var(--pos) !important; color: var(--pos) !important; }

/* ----------------------------------------------------------------
   Insights AI
   ---------------------------------------------------------------- */
.insights-bar { display: flex; justify-content: flex-end; margin-top: 16px; }
.insights-panel {
    margin-top: 12px; padding: 18px; border-radius: var(--r-md);
    background: var(--surface); border: 1px solid var(--border);
}
.insights-header {
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 600; font-size: 15px; color: var(--text); margin-bottom: 12px;
}
.insights-ctx { margin-bottom: 12px; }
.insights-textarea {
    width: 100%; padding: 10px 12px; font: inherit; font-size: 13px; resize: vertical;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface-2); color: var(--text);
}
.insights-textarea:focus { outline: none; border-color: var(--border-strong); }
.insights-textarea::placeholder { color: var(--text-3); }
.insights-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.insights-status { font-size: 13px; color: var(--text-2); }
.insights-result {
    font-size: 14px; line-height: 1.6; color: var(--text);
    max-height: 600px; overflow-y: auto;
}
.insights-result h3 { font-size: 15px; margin: 16px 0 6px; color: var(--text); }
.insights-result h4 { font-size: 14px; margin: 12px 0 4px; color: var(--text-2); }
.insights-result strong { color: var(--text); }
@media (max-width: 720px) {
    .insights-panel { padding: 14px; }
}

/* Checkboxes e filtro por seleção */
.camp-table .js-check-all, .camp-table .js-row-check { cursor: pointer; width: 16px; height: 16px; accent-color: #7c5cff; }
.camp-filter-active {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px;
    background: rgba(124,92,255,.08); border: 1px solid rgba(124,92,255,.25);
    border-radius: var(--r-sm); margin-bottom: 10px; font-size: 13px; color: var(--text);
}
.camp-filter-info { font-size: 13px; color: var(--text-2); }
.camp-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.camp-toolbar-left { display: flex; align-items: center; gap: 8px; }

/* Insights AI - cards por seção */
.ins-card {
    border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 16px 18px; margin-bottom: 12px; background: var(--surface);
}
.ins-card-title {
    font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--text-2); margin-bottom: 10px;
    padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.ins-card-body { font-size: 14px; line-height: 1.6; color: var(--text); }
.ins-card-body p { margin: 0; }
.ins-card-body strong { color: var(--text); }

.ins-line {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.ins-line:last-child { border-bottom: none; }
.ins-dot { flex: 0 0 auto; font-size: 14px; line-height: 1.5; }

.ins-campaigns { border-left: 3px solid #7c5cff; }
.ins-adsets { border-left: 3px solid #3b82f6; }
.ins-ads { border-left: 3px solid #8b5cf6; }
.ins-summary {
    border-left: 3px solid var(--pos);
    background: rgba(63,191,143,.04);
}
.ins-error { border-left: 3px solid var(--neg); background: rgba(229,112,107,.04); }

.ins-green .ins-dot { color: var(--pos); }
.ins-yellow .ins-dot { color: var(--warn); }
.ins-red .ins-dot { color: var(--neg); }

/* Indicador de reembolso no header do card */
.cc-refund-badge {
    font-size: 11px; font-weight: 500; color: var(--text-3);
    margin-left: auto; padding: 2px 8px; border-radius: 4px;
    background: var(--surface-2);
}

/* Select de tipo de produto na tela de produtos */
.select-type {
    font: inherit; font-size: 12px; padding: 4px 8px;
    background: var(--surface); color: var(--text-2); border: 1px solid var(--border);
    border-radius: 6px; cursor: pointer;
}
.select-type:focus { border-color: var(--accent); outline: none; }

/* Linha de vendas orgânicas na tabela de campanhas */
.camp-organic-row td { border-top: 1px dashed var(--border); }
.camp-organic-label { font-size: 12px; color: var(--text-3); font-style: italic; }

/* ── Loading overlay — premium on-brand loader ──────────────────
   Green (#3ce6a0) is used ONLY as signal/light: a thin neutral ring
   with a single glowing green arc that rotates. Pure CSS, no markup
   change — spinner is drawn entirely with pseudo-elements.            */
.loading-overlay {
    display: none; position: fixed; inset: 0; z-index: 9999;
    justify-content: center; align-items: center; flex-direction: column; gap: 20px;
    /* tasteful dark dim that respects the active theme */
    background: color-mix(in srgb, var(--bg) 66%, rgba(0,0,0,.6));
    -webkit-backdrop-filter: blur(9px) saturate(118%);
            backdrop-filter: blur(9px) saturate(118%);
    animation: loadOverlayIn .3s ease both;
}
.loading-overlay.active { display: flex; }
@keyframes loadOverlayIn { from { opacity: 0; } to { opacity: 1; } }

/* container only — the ring is painted by ::before (track) + ::after (arc) */
.loading-spinner {
    --ld-size: 46px;
    --ld-ring: 3px;
    position: relative;
    width: var(--ld-size); height: var(--ld-size);
}
.loading-spinner::before,
.loading-spinner::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-ring)), #000 calc(100% - var(--ld-ring)));
            mask: radial-gradient(farthest-side, transparent calc(100% - var(--ld-ring)), #000 calc(100% - var(--ld-ring)));
}
/* faint neutral track — reads on both dark and light themes */
.loading-spinner::before { background: conic-gradient(var(--border), var(--border)); }
/* the glowing green arc that sweeps around (green as light) */
.loading-spinner::after {
    background: conic-gradient(from 0deg,
        transparent 0deg,
        rgba(60,230,160,.10) 120deg,
        #1c8a63 275deg,
        #3ce6a0 352deg,
        transparent 360deg);
    filter: drop-shadow(0 0 6px rgba(60,230,160,.45)) drop-shadow(0 0 2px rgba(60,230,160,.55));
    animation: loadSpin .95s linear infinite;
}
@keyframes loadSpin { to { transform: rotate(360deg); } }

.loading-text {
    color: var(--text-2); font-size: 13px; font-weight: 500; letter-spacing: .04em;
    animation: loadTextPulse 1.9s ease-in-out infinite;
}
@keyframes loadTextPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .loading-overlay { animation: none; }
    .loading-spinner::after { animation-duration: 2.6s; }
    .loading-text { animation: none; opacity: .8; }
}

/* Meta columns styling */
.camp-meta-col { color: var(--text-3); font-size: 12px; }
thead .camp-meta-col { font-size: 11px; }

/* ── Toggle switches ──────────────────────────────────────── */
.camp-toggles { display: flex; align-items: center; gap: 12px; }
.camp-toggle {
    display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px;
    border-radius: 20px; font-size: 13px; text-decoration: none;
    color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border);
    transition: background .15s, border-color .15s, color .15s;
}
.camp-toggle:hover { color: var(--text); border-color: var(--border-hover, var(--border)); }
.camp-toggle.is-on { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); }
.tgl-track {
    width: 28px; height: 16px; border-radius: 8px; flex-shrink: 0;
    background: var(--surface-3); position: relative; transition: background .2s;
}
.camp-toggle.is-on .tgl-track { background: var(--accent); }
.tgl-thumb {
    position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2);
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.camp-toggle.is-on .tgl-thumb { transform: translateX(12px); }
.tgl-label { font-size: 12px; font-weight: 500; }

/* ── Drill-down link nos nomes ────────────────────────────── */
.camp-drill {
    color: inherit; text-decoration: none;
    border-bottom: 1px solid transparent; transition: border-color .15s, color .15s;
}
.camp-drill:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Δ diff column ────────────────────────────────────────── */
.camp-meta-col { color: var(--text-3) !important; font-size: 12px; }
thead .camp-meta-col { font-size: 11px; }

/* ============================================================
   Analytics — dashboard nativa (tokens do app; light + dark)
   ============================================================ */
.an-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:16px 0 14px;border-bottom:1px solid var(--border);}
.an-tab{padding:9px 14px;font-size:13px;font-weight:500;color:var(--text-3);border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:8px 8px 0 0;transition:.12s;}
.an-tab:hover{color:var(--text);background:var(--surface-hover);}
.an-tab.active{color:var(--text);border-bottom-color:var(--accent);font-weight:600;}
.an-body{display:flex;flex-direction:column;gap:14px;}

/* helpers escopados */
.an-body .strong{font-weight:600;} .an-body .mono{font-family:var(--mono);}
.an-body td.l,.an-body th.l{text-align:left;}
.an-dim{color:var(--text-3);} .an-pos{color:var(--pos);} .an-neg{color:var(--neg);} .an-warn{color:var(--warn);}

.an-block-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.an-block-h h3{font-size:14px;font-weight:600;color:var(--text);margin:0;}
.an-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:980px){.an-two{grid-template-columns:1fr;}}

/* KPIs */
.an-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
@media (max-width:1200px){.an-kpis{grid-template-columns:repeat(3,1fr);}}
@media (max-width:680px){.an-kpis{grid-template-columns:repeat(2,1fr);}}
.an-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r,14px);padding:14px 16px;}
.an-kpi-l{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);margin-bottom:8px;}
.an-kpi-v{font-size:23px;font-weight:700;color:var(--text);line-height:1.1;font-family:var(--mono);}
.an-kpi-s{font-size:12px;color:var(--text-3);margin-top:5px;}

/* métricas */
.an-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-sm,10px);overflow:hidden;}
.an-metric{background:var(--surface);padding:11px 13px;}
.an-metric-l{font-size:11.5px;color:var(--text-3);margin-bottom:4px;}
.an-metric-v{font-size:16px;font-weight:600;color:var(--text);font-family:var(--mono);}
.an-metric-s{font-size:11px;color:var(--text-3);margin-top:2px;}

/* funil */
.an-funnel{display:flex;flex-direction:column;gap:0;}
.an-funnel-row{display:flex;}
.an-funnel-block{background:var(--surface-2,var(--surface-hover));border:1px solid var(--border);border-radius:var(--r-sm,10px);padding:12px 14px;min-width:0;transition:width .3s;}
.an-funnel-block.is-final{background:var(--accent-soft,rgba(0,0,0,.04));border-color:var(--accent);}
.an-funnel-block.is-mute{opacity:.5;}
.an-funnel-name{display:block;font-size:12px;color:var(--text-2);margin-bottom:4px;}
.an-funnel-bottom{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.an-funnel-bottom b{font-size:19px;font-weight:700;font-family:var(--mono);color:var(--text);}
.an-funnel-conv{display:flex;justify-content:center;font-size:11px;color:var(--text-3);padding:5px 0;}

/* barras (ROAS / mix / take) */
.an-bars{display:flex;flex-direction:column;gap:11px;}
.an-bar-row{display:grid;grid-template-columns:180px 1fr 64px;align-items:center;gap:10px;}
.an-bar-label{font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.an-bar-track{height:14px;background:var(--surface-hover);border-radius:7px;overflow:hidden;}
.an-bar-track.sm{height:10px;}
.an-bar-fill{height:100%;border-radius:7px;}
.an-bar-fill.win{background:var(--pos);} .an-bar-fill.ok{background:var(--text-2);} .an-bar-fill.bad{background:var(--neg);}
.an-bar-val{font-size:13px;font-weight:600;font-family:var(--mono);text-align:right;}
.an-bar-val.win{color:var(--pos);} .an-bar-val.bad{color:var(--neg);}
@media (max-width:680px){.an-bar-row{grid-template-columns:110px 1fr 54px;}.an-bar-label{font-size:11px;}}

.an-legend{font-size:11px;color:var(--text-3);display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.an-dot{width:9px;height:9px;border-radius:3px;display:inline-block;vertical-align:middle;margin-right:2px;}
.an-dot.win{background:var(--pos);} .an-dot.ok{background:var(--text-2);} .an-dot.bad{background:var(--neg);}

/* ofertas */
.an-offer{display:flex;flex-direction:column;gap:6px;}
.an-offer-top{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;}
.an-offer-foot{display:flex;gap:14px;font-size:11.5px;}
.an-ticket-hero{text-align:center;padding:18px 0 10px;}
.an-ticket-main{font-size:34px;font-weight:700;font-family:var(--mono);color:var(--text);}
.an-ticket-total{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:8px;font-size:14px;}
.an-ticket-total b{font-family:var(--mono);}

/* OB por oferta */
.an-obo{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
@media (max-width:980px){.an-obo{grid-template-columns:1fr;}}
.an-obo-card{border:1px solid var(--border);border-radius:var(--r-sm,10px);padding:12px;}
.an-obo-head{display:flex;justify-content:space-between;font-size:13px;margin-bottom:10px;}
.an-obo-row{display:grid;grid-template-columns:1fr 90px 48px 52px;align-items:center;gap:8px;font-size:12px;margin-bottom:7px;}
.an-obo-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* tabela */
.an-table-wrap{overflow-x:auto;margin:0 -2px;}
.an-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.an-table th{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-3);font-weight:600;padding:8px 10px;text-align:right;border-bottom:1px solid var(--border);white-space:nowrap;}
.an-table td{padding:9px 10px;text-align:right;border-bottom:1px solid var(--border);color:var(--text);font-family:var(--mono);white-space:nowrap;}
.an-table td.l,.an-table th.l{text-align:left;font-family:inherit;}
.an-table tr:hover td{background:var(--surface-hover);}
.an-table .an-total td{font-weight:700;border-top:2px solid var(--border-strong,var(--border));}

.an-pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:12px;font-weight:600;font-family:var(--mono);border:1px solid transparent;}
.an-pill.win{color:var(--pos);background:var(--pos-soft,rgba(22,163,74,.1));border-color:var(--pos);}
.an-pill.ok{color:var(--text-2);border-color:var(--border-strong,var(--border));}
.an-pill.bad{color:var(--neg);background:var(--neg-soft,rgba(220,38,38,.1));border-color:var(--neg);}
.an-pill.an-warn{color:var(--warn);border-color:var(--warn);}
.an-pill.an-neg{color:var(--neg);border-color:var(--neg);}
.an-pill.an-dim{color:var(--text-3);border-color:var(--border);}

/* simulador */
.an-sim{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:start;}
@media (max-width:980px){.an-sim{grid-template-columns:1fr;}}
.an-fields{display:flex;flex-direction:column;gap:14px;}
.an-field{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--text-2);}
.an-field input[type=number]{padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-family:var(--mono);font-size:14px;}
.an-field input[type=range]{width:100%;accent-color:var(--accent);}
.an-sim-out{position:sticky;top:14px;}
.an-sim-results{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.an-res{border-left:3px solid var(--border);padding:6px 0 6px 11px;}
.an-res-k{font-size:11px;color:var(--text-3);}
.an-res-v{font-size:20px;font-weight:700;font-family:var(--mono);color:var(--text);}
.an-res-b{font-size:11px;color:var(--text-3);margin-top:2px;}
.an-sim-chain{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:12.5px;text-align:center;}

/* IA */
.an-ia .btn{margin-top:6px;}
.an-ia-status{font-size:12px;color:var(--text-3);margin-left:10px;}
.an-insights{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.an-insight{border:1px solid var(--border);border-radius:var(--r-sm,10px);padding:13px 15px;background:var(--surface);}
.an-insight-top{display:flex;align-items:center;gap:9px;margin-bottom:7px;}
.an-insight-n{font-family:var(--mono);font-size:12px;color:var(--text-3);}
.an-insight-t{font-weight:600;font-size:14px;color:var(--text);flex:1;}
.an-insight-d{font-size:13px;color:var(--text-2);line-height:1.5;}
.an-insight-a{font-size:13px;color:var(--text);margin-top:7px;font-weight:500;}
.an-insight-r{font-size:12.5px;color:var(--text-2);margin-top:7px;padding-top:7px;border-top:1px dashed var(--border);}

/* ===== Analytics v2 — ajustes: funil skill-like, métricas 3-col, ticket bars, sim/AB ===== */
.an-metrics{grid-template-columns:repeat(3,1fr);}
@media (max-width:1100px){.an-metrics{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.an-metrics{grid-template-columns:1fr;}}

/* funil centralizado, blocos afunilando */
.an-funnel{display:flex;flex-direction:column;align-items:center;gap:0;}
.an-funnel-block{margin:0 auto;}
.an-funnel-conv{display:flex;align-items:center;gap:10px;width:60%;padding:7px 0;}
.an-funnel-conv-l{flex:1;height:1px;background:var(--border);}
.an-funnel-conv-p{font-size:11px;color:var(--text-3);white-space:nowrap;}

/* barras de ticket por oferta */
.an-ticket-split{display:flex;align-items:flex-end;justify-content:center;gap:14px;height:120px;margin:14px 0 6px;padding:0 6px;}
.an-tsplit{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;max-width:90px;height:100%;justify-content:flex-end;}
.an-tsplit-bar-wrap{display:flex;align-items:flex-end;height:80px;width:34px;}
.an-tsplit-bar{width:100%;background:var(--accent,var(--text-2));border-radius:6px 6px 0 0;min-height:6px;}
.an-tsplit-v{font-size:12px;font-weight:600;font-family:var(--mono);color:var(--text);}
.an-tsplit-l{font-size:10.5px;color:var(--text-3);text-align:center;line-height:1.2;}

/* critério de campeão */
.an-champ-form{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;}
.an-field-inline{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--text-2);}
.an-field-inline input{width:110px;padding:7px 9px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-family:var(--mono);}

/* simulador */
.an-sim{display:grid;grid-template-columns:1fr .9fr;gap:14px;align-items:start;}
@media (max-width:980px){.an-sim{grid-template-columns:1fr;}}
.an-sim-inputs{display:flex;flex-direction:column;gap:14px;}
.an-sim-out{position:sticky;top:14px;}
.an-row-edit{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.an-nm{flex:1;min-width:0;padding:7px 9px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:13px;}
.an-mini{display:flex;flex-direction:column;gap:2px;}
.an-mini span{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.03em;}
.an-mini input{width:74px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-family:var(--mono);font-size:13px;}
.an-x{width:30px;height:30px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-3);cursor:pointer;flex-shrink:0;align-self:flex-end;}
.an-x:hover{color:var(--neg);border-color:var(--neg);}
.an-sim-foot{margin-top:10px;font-size:12px;}

/* A/B */
.an-ab-visit{width:90px;padding:5px 7px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text);font-family:var(--mono);text-align:right;}
.an-table tr.an-ab-win td{background:var(--pos-soft,rgba(22,163,74,.08));}
.an-ab-verdict{margin-top:14px;padding:11px 14px;border:1px solid var(--pos);border-radius:var(--r-sm,10px);background:var(--pos-soft,rgba(22,163,74,.07));font-size:13px;color:var(--text);}

.an-funnel-note{margin-top:12px;font-size:11.5px;line-height:1.5;max-width:540px;}
.an-funnel-conv-p.is-gap{color:var(--warn);}

/* ===== Analytics v3 — funil estilo skill + cores de bom/ruim funcionando ===== */

/* ---- CORES: precisam vencer o color base de .an-kpi-v / .an-metric-v ---- */
.an-kpi-v.an-pos,    .an-metric-v.an-pos,   .an-metric-s.an-pos,
.an-kpi-s.an-pos,    .an-funnel-value.an-pos { color: var(--pos) !important; }
.an-kpi-v.an-neg,    .an-metric-v.an-neg,   .an-metric-s.an-neg,
.an-kpi-s.an-neg,    .an-funnel-value.an-neg { color: var(--neg) !important; }

/* ---- FUNIL: centralizado, afunilando, badges em pílula (igual skill) ---- */
.an-funnel{display:flex;flex-direction:column;align-items:center;width:100%;padding:4px 0;gap:0;}
.an-funnel-block{
    display:flex;flex-direction:column;
    margin:0 auto;min-width:210px;max-width:100%;
    background:linear-gradient(180deg,var(--surface),var(--surface-2,var(--surface-hover)));
    border:1px solid var(--border);border-radius:14px;padding:14px 22px;
    transition:width .5s cubic-bezier(.4,0,.2,1);
    box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.an-funnel-block.is-mute{opacity:.6;}
.an-funnel-block.is-final{
    background:linear-gradient(180deg,var(--pos-soft,rgba(22,163,74,.10)),rgba(22,163,74,.03));
    border-color:var(--pos);
    box-shadow:0 4px 14px -8px rgba(22,163,74,.4);
}
.an-funnel-name{
    display:block;margin-bottom:9px;font-family:var(--mono);font-size:10.5px;
    color:var(--text-3);text-transform:uppercase;letter-spacing:.14em;font-weight:600;
}
.an-funnel-block.is-final .an-funnel-name{color:var(--pos);}
.an-funnel-bottom{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;}
.an-funnel-bottom b{font-family:var(--mono);font-size:30px;font-weight:500;color:var(--text);letter-spacing:-.025em;line-height:1;}
.an-funnel-block.is-final .an-funnel-bottom b{color:var(--pos);}
.an-funnel-bottom .an-dim{font-family:var(--mono);font-size:10.5px;margin-left:auto;white-space:nowrap;}

.an-funnel-conv{display:flex;align-items:center;gap:10px;padding:9px 0;width:210px;max-width:80%;}
.an-funnel-conv-l{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);}
.an-funnel-conv-p{
    font-family:var(--mono);font-size:11px;font-weight:600;color:var(--text-2);
    background:var(--surface);border:1px solid var(--border);
    padding:3px 11px;border-radius:999px;white-space:nowrap;
}
.an-funnel-conv-p.is-gap{color:var(--warn);border-color:var(--warn);}

/* cor de bom/ruim vale em qualquer lugar (vence o color base dos cards) */
.an-pos{color:var(--pos)!important;}
.an-neg{color:var(--neg)!important;}

/* ===== Simulador: slider custom (bonito) + botão adicionar no fim ===== */
.an-field input[type=range]{
    -webkit-appearance:none; appearance:none;
    width:100%; height:6px; border-radius:999px; margin:10px 0 2px;
    background:var(--surface-hover); outline:none; cursor:pointer;
}
.an-field input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:18px; height:18px; border-radius:50%;
    background:var(--accent,var(--text)); border:2px solid var(--surface);
    box-shadow:0 1px 4px rgba(0,0,0,.35); cursor:pointer; transition:transform .1s ease;
}
.an-field input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.18); }
.an-field input[type=range]::-webkit-slider-thumb:active{ transform:scale(1.05); }
.an-field input[type=range]::-moz-range-thumb{
    width:18px; height:18px; border-radius:50%;
    background:var(--accent,var(--text)); border:2px solid var(--surface);
    box-shadow:0 1px 4px rgba(0,0,0,.35); cursor:pointer;
}
.an-field input[type=range]::-moz-range-track{ height:6px; border-radius:999px; background:var(--surface-hover); }
.an-field input[type=range]:focus{ outline:none; }
.an-field span b[data-lbl]{ color:var(--accent,var(--text)); font-family:var(--mono); }

.an-add{ margin-top:10px; width:100%; }

/* ===== Anotações ===== */
.an-note-form { display:flex; flex-direction:column; gap:12px; }
.an-note-row { display:flex; gap:12px; flex-wrap:wrap; }
.an-note-field { display:flex; flex-direction:column; gap:4px; flex:1; min-width:160px; }
.an-note-field span { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.an-note-field input, .an-note-field select, .an-note-field textarea {
    background:var(--surface); border:1px solid var(--border); color:var(--text);
    border-radius:6px; padding:8px 10px; font:inherit; font-size:14px; resize:vertical;
}
.an-note-field textarea { min-height:60px; }
.an-note-full { width:100%; }
.an-note-actions { display:flex; gap:8px; padding-top:4px; }

.an-notes-list { display:flex; flex-direction:column; gap:16px; }
.an-note-card {
    background:var(--surface); border:1px solid var(--border); border-radius:8px;
    padding:16px; display:flex; flex-direction:column; gap:10px;
}
.an-note-card-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.an-note-card-info { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.an-note-card-actions { display:flex; gap:6px; }
.an-note-badge {
    font-size:11px; text-transform:uppercase; letter-spacing:.5px; padding:2px 8px;
    border-radius:4px; background:var(--accent,var(--text)); color:var(--bg);
    font-weight:600;
}
.an-note-date { font-size:13px; color:var(--muted); font-family:var(--mono); }
.an-note-title { font-size:16px; font-weight:600; margin:0; }
.an-note-desc { font-size:14px; color:var(--muted); line-height:1.5; }
.an-note-content { font-size:14px; line-height:1.6; white-space:pre-wrap; }

/* card colapsado por padrão */
.an-note-body { display:none; margin-top:8px; }
.an-note-card.an-note-open .an-note-body { display:block; }
.an-note-toggle { font-size:10px; color:var(--muted); transition:transform .2s; margin-left:4px; }
.an-note-card.an-note-open .an-note-toggle { transform:rotate(180deg); }
.an-note-card-head:hover .an-note-toggle { color:var(--text); }

.an-note-ba { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px) { .an-note-ba { grid-template-columns:1fr; } }
.an-note-ba-col {
    background:var(--bg); border:1px solid var(--border); border-radius:6px;
    padding:12px; display:flex; flex-direction:column; gap:6px;
}
.an-note-ba-label {
    font-size:11px; text-transform:uppercase; letter-spacing:.5px; font-weight:600;
    color:var(--muted);
}
.an-note-ba-content { font-size:14px; line-height:1.6; white-space:pre-wrap; }

.an-note-img-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; margin-top:4px; }
.an-note-img-item { position:relative; border-radius:6px; overflow:hidden; background:var(--surface-hover); }
.an-note-img-item img { width:100%; display:block; cursor:pointer; }
.an-note-img-obs { font-size:12px; color:var(--muted); padding:6px 8px; line-height:1.4; }
.an-note-img-del { position:absolute; top:4px; right:4px; }

.an-note-upload { display:flex; flex-direction:column; gap:6px; }
#an-note-upload-area { position:relative; }
#an-note-upload-area input[type=file] { font-size:14px; }
#an-note-previews { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-top:8px; }
.an-note-preview-item { display:flex; flex-direction:column; gap:4px; }
.an-note-preview-item img { width:100%; border-radius:4px; max-height:120px; object-fit:cover; }
.an-note-obs-input {
    font-size:12px; padding:4px 6px; background:var(--surface); border:1px solid var(--border);
    color:var(--text); border-radius:4px;
}
.an-note-existing-imgs { margin-bottom:8px; }

.btn-danger { background:var(--neg,#e74c3c) !important; color:#fff !important; border:none; }

/* ============================================================
   DEU ROI — rebrand premium · camada de material (auth)
   Verde só como SINAL. Escopo: tela de login (auth). As páginas
   internas recebem o sistema numa passada separada.
   ============================================================ */
:root{ --brand:#3ce6a0; --brand-dim:#1c8a63; --brand-glow:rgba(60,230,160,.16); }
:root[data-theme="light"]{ --brand:#0b8a4e; --brand-glow:rgba(11,138,78,.13); }

/* fundo do login: usa a camada global de luz+grão (body::before/::after) */
.auth-main{ position:relative; }

/* card material: hairline + highlight interno + sombra em camadas */
.login-card{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.4), 0 30px 64px -30px rgba(0,0,0,.92);
  padding:28px 26px; }

/* logo + wordmark */
.login-brand{ font-size:16px; font-weight:700; letter-spacing:-.02em; gap:11px; margin-bottom:2px; }
.brand-tok{ width:36px; height:36px; flex:0 0 36px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(160deg,#12241c,#0c1613);
  border:1px solid rgba(60,230,160,.24);
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 6px 18px -8px rgba(60,230,160,.4), inset 0 1px 0 rgba(255,255,255,.07); }
.wm{ font-weight:700; letter-spacing:-.03em; }
.wm-d{ color:var(--text-2); font-weight:600; }
.wm-r{ color:var(--brand); }
.login-card .sub{ color:var(--text-3); font-size:13px; }

/* inputs: superfície funda, foco em anel verde */
.login-card .field span{ color:var(--text-3); font-weight:500; }
.login-card .field input{
  background:var(--bg-soft); border:1px solid var(--border); border-radius:10px; padding:11px 12px;
  color:var(--text); font-family:var(--ui); font-size:14px;
  transition:border-color .15s ease, box-shadow .15s ease; }
.login-card .field input:focus{ outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }

/* CTA verde-marca (o único "preenchimento" verde: entrar = ver seu ROI) */
.login-card .btn-primary{
  background:linear-gradient(180deg,#33dd97,#1fae76);
  color:#06130c; border:1px solid rgba(60,230,160,.5); font-weight:600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 22px -10px var(--brand-glow);
  transition:filter .15s ease, box-shadow .15s ease, transform .05s ease; }
.login-card .btn-primary:hover{ color:#06130c; filter:brightness(1.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 12px 30px -8px var(--brand-glow); }
.login-card .btn-primary:active{ transform:translateY(.5px); }

/* ---- internas (shell): material + verde-marca ---- */
:root{ --pos:#35c98c; }
:root[data-theme="light"]{ --pos:#0f9d58; }

/* luz ambiente + grão — GLOBAL, atrás de tudo (z-index:-1: não altera layout algum) */
body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(54% 44% at 90% 3%, var(--brand-glow), transparent 74%); }
body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.02; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E"); }

/* marca na sidebar: mark em token verde + wordmark two-tone */
.brand .brand-mark{ width:30px; height:30px; flex:0 0 30px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(160deg,#12241c,#0c1613); border:1px solid rgba(60,230,160,.24);
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 6px 16px -8px rgba(60,230,160,.4), inset 0 1px 0 rgba(255,255,255,.07); }
.brand .brand-mark svg{ width:18px; height:18px; }
.brand-text{ letter-spacing:-.02em; }

/* cards de cliente: material (gradiente + hairline highlight + sombra) */
.client-card{ background:linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), var(--shadow); }
.client-card:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--shadow-lift); }
.stat{ box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }

/* avatar: token vivo em vez de branco chapado */
.cc-avatar:not(.has-img), .user-avatar{
  background:conic-gradient(from 210deg,#256045,#3ce6a0,#1c8a63,#256045) !important;
  color:#06130c !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }

/* glassmorphism: containers translúcidos deixam a luz ambiente vazar por trás */
.client-card{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 74%, transparent),
    color-mix(in srgb, var(--surface) 74%, transparent));
  backdrop-filter:blur(18px) saturate(1.25); -webkit-backdrop-filter:blur(18px) saturate(1.25); }
.icon-btn, .period-trigger, .seg-group{
  background:color-mix(in srgb, var(--surface) 84%, transparent) !important;
  backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }

/* ---- painel do cliente (visão restrita) + login email-first ---- */
.client-main{ width:100%; max-width:1080px; margin-inline:auto; padding:0 24px 80px; }
.client-topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:64px; position:sticky; top:0; z-index:30; margin:0 -24px 6px; padding:0 24px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--bg) 88%, transparent), color-mix(in srgb,var(--bg) 52%, transparent));
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--border); }
.client-top-right{ display:flex; align-items:center; gap:12px; }
.client-hello{ padding:28px 0 16px; }
.client-hello h1{ font-size:26px; font-weight:700; letter-spacing:-.03em; }
.client-hello .sub{ margin-top:6px; }
.login-id{ gap:4px; }
.login-id-val{ font-size:14px; color:var(--text-2); padding:2px 0; }
.login-back{ display:inline-block; margin-top:12px; font-size:12.5px; color:var(--text-3); text-decoration:none; }
.login-back:hover{ color:var(--text); }

/* ================================================================
   Clientes / Contas — diagramação premium (organização + hierarquia)
   ================================================================ */

/* CTA primário = verde-marca em todo o app (coerência com o login) */
.btn-primary{
  background:linear-gradient(180deg,#33dd97,#1fae76);
  color:#06130c; border:1px solid rgba(60,230,160,.5); font-weight:600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 22px -12px var(--brand-glow);
  transition:filter .15s ease, box-shadow .15s ease, transform .05s ease; }
.btn-primary:hover{ color:#06130c; filter:brightness(1.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 12px 30px -10px var(--brand-glow); }
.btn-primary:active{ transform:translateY(.5px); }

/* Formulário de criação dentro de um card material (deixa de flutuar solto) */
.create-form, .block > .form-row{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 82%, transparent),
    color-mix(in srgb, var(--surface) 82%, transparent));
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--border); border-radius:14px;
  padding:18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.045), var(--shadow); }
.create-form{ gap:13px; }

/* Rótulos de campo mais legíveis */
.field span{ color:var(--text-3); font-weight:500; letter-spacing:.005em; }

/* Foco verde-marca em TODOS os campos (igual ao login) */
.create-form .field > input:focus, .create-form .field > select:focus,
.act-row input:focus, .form-row input:focus, .form-row select:focus,
.inline-input:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }

/* "+ adicionar outra conta": botão discreto (não uma barra vazia) */
.act-rows + .btn, .field > .btn-sm{
  align-self:flex-start; color:var(--text-3);
  border-style:dashed; background:transparent; }
.act-rows + .btn:hover, .field > .btn-sm:hover{
  color:var(--text); border-color:var(--brand); border-style:solid;
  background:color-mix(in srgb, var(--brand) 8%, transparent); }

/* Nova conta de anúncio: proporções controladas (nada esticado demais) */
.block > .form-row{ gap:12px; padding:16px 18px; }
.block > .form-row select{ flex:0 0 auto; min-width:170px; }
.block > .form-row input[type="text"]{ flex:1 1 180px; min-width:150px; max-width:none; }
.block > .form-row .btn-primary{ flex:0 0 auto; margin-left:auto; }

/* ---- Listas editáveis: material, cabeçalho e hover ---- */
.edit-list{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 82%, transparent),
    color-mix(in srgb, var(--surface) 82%, transparent));
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), var(--shadow); }
.edit-row{ padding:12px 18px; }
.edit-head{
  background:color-mix(in srgb, var(--surface-2) 60%, transparent);
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-3); padding-top:10px; padding-bottom:10px; }
.edit-row:not(.edit-head):hover{ background:var(--surface-hover); }
.edit-row.row-muted:hover{ background:transparent; }

/* Inputs inline: superfície funda, altura consistente */
.inline-input{ padding:9px 11px; }

/* Ações: agrupadas à direita, sem quebrar linha, Salvar em destaque sutil */
.actions-cell{ flex-wrap:nowrap; gap:6px; }
.actions-cell .btn{ padding:6px 10px; }
.actions-cell button[type="submit"], .actions-cell .btn-save{
  color:var(--text); border-color:var(--border-strong); }
.actions-cell button[type="submit"]:hover, .actions-cell .btn-save:hover{
  border-color:var(--brand); color:var(--text);
  background:color-mix(in srgb, var(--brand) 8%, transparent); }

/* Coluna "Contas" (número) alinhada e discreta */
.edit-row-client .num{ color:var(--text-2); }
.edit-row-client .num .link{ border-bottom-color:var(--border); }
/* ================================================================
   Clientes / Contas — REPAGINAÇÃO (diagramação premium v2)
   Objetivo: lista calma "editável no lugar", linhas com ritmo,
   ações discretas agrupadas, form de criação estruturado.
   ================================================================ */

/* ---- Roster: linha calma de "lista", densidade alinhada ao dashboard ---- */
.edit-list{ border-radius:14px; }
.edit-row{ padding:9px 16px; gap:12px; align-items:center; transition:background-color .14s ease; }
.edit-row:not(.edit-head){ min-height:50px; }
.edit-head{ min-height:0; padding-top:9px; padding-bottom:9px; }
.edit-row:not(.edit-head):hover{ background:color-mix(in srgb, var(--surface-2) 55%, transparent); }

/* Nome = âncora visual da linha */
.edit-row-client input[name="name"], .edit-row input[name="name"]{
  font-weight:600; font-size:13px; letter-spacing:-.01em; }

/* Colunas do cliente: proporções equilibradas + status/contas centrados.
   Coluna de ações FIXA: sem isso o cabeçalho (texto curto "Ações") e as linhas
   (3 botões) resolvem larguras `fr` diferentes → colunas desalinham entre header
   e dados. Fixar a última coluna alinha tudo perfeitamente. */
.edit-row-client{ grid-template-columns:48px 1.15fr 1.15fr 160px 92px 78px 232px; }
.actions-cell{ overflow:visible; }
/* IMPORTANTE: centralizar SÓ o número de contas (span.num), NÃO o input do
   hottok (que também tem classe .num). O hottok fica à esquerda. */
.inline-input{ text-align:left; }
.edit-row-client > span.num, .edit-row-client .status-cell{ text-align:center; }
.edit-row-client > span.num a{ display:inline-block; }
.edit-head span{ display:flex; align-items:center; }
.edit-row-client.edit-head span:nth-child(5),
.edit-row-client.edit-head span:nth-child(6){ justify-content:center; }

/* Contas de anúncio (funnels): colunas equilibradas */
.edit-row:not(.edit-row-client){ grid-template-columns:1.4fr 1.1fr 84px 228px; }
.edit-row:not(.edit-row-client) .status-cell{ text-align:center; }
.edit-row.edit-head:not(.edit-row-client) span:nth-child(3){ justify-content:center; }

/* ---- Avatar na lista: proporcional, "remover" só no hover (sem poluir) ---- */
.avatar-cell{ gap:0; }
.av-edit{ width:36px; height:36px; border-radius:10px; font-size:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.av-remove{ position:absolute; margin-top:2px; font-size:10.5px; opacity:0; transform:translateY(-2px);
  transition:opacity .14s ease, transform .14s ease; pointer-events:none; }
.avatar-cell:hover .av-remove:not([hidden]){ opacity:.75; transform:none; pointer-events:auto; }
.avatar-cell{ position:relative; padding-bottom:0; }

/* ---- Ações: chips calmos agrupados; primária (Abrir) em destaque sutil ---- */
.actions-cell{ gap:6px; }
.actions-cell .btn{
  padding:5px 10px; font-size:11.5px; border-radius:8px;
  color:var(--text-3); border:1px solid transparent; background:transparent;
  transition:color .14s ease, border-color .14s ease, background-color .14s ease; }
.edit-row:hover .actions-cell .btn{ border-color:var(--border); color:var(--text-2); }
.actions-cell .btn:hover{ color:var(--text); border-color:var(--border-strong);
  background:var(--surface-hover); }
/* "Abrir" (link) = ação primária da linha */
.edit-row-client .actions-cell a.btn{
  color:var(--brand); border-color:color-mix(in srgb, var(--brand) 30%, transparent);
  background:color-mix(in srgb, var(--brand) 8%, transparent); }
.edit-row-client:hover .actions-cell a.btn{ border-color:color-mix(in srgb, var(--brand) 45%, transparent); }
.edit-row-client .actions-cell a.btn:hover{ color:#06130c;
  background:linear-gradient(180deg,#33dd97,#1fae76); border-color:transparent; }

/* ---- "Novo cliente": form estruturado (labels fortes, sub-bloco de contas) ---- */
.create-form .block-sub{ font-size:12px; color:var(--text-3); margin-top:-6px; }
.field > span{ font-size:11.5px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; color:var(--text-3); }
.field .hint-line{ text-transform:none; letter-spacing:0; font-weight:400; }
.create-form .field > input, .create-form .field > select{ padding:9px 11px; font-size:13px; }
.field{ gap:6px; }
/* Sub-bloco "Contas de anúncio" vira um painel embutido */
.create-form > .field:has(.act-rows){
  background:color-mix(in srgb, var(--bg-soft) 60%, transparent);
  border:1px solid var(--border); border-radius:11px; padding:14px; gap:9px; }
.act-rows{ margin:2px 0 0; }
.form-actions{ margin-top:4px; }
.form-actions .btn-primary{ padding:10px 18px; font-size:13px; border-radius:10px; }

/* ---- Webhook: faixa de config compacta (não um "alerta") ---- */
.webhook-box{ background:color-mix(in srgb, var(--surface-2) 60%, transparent);
  border:1px dashed var(--border-strong); border-radius:12px; padding:12px 16px;
  color:var(--text-3); font-size:12.5px; }
.webhook-box code{ font-size:12px; }
.webhook-box .btn{ margin-left:auto; }

/* ================================================================
   CONSISTÊNCIA GLOBAL (glass + tokens) — 29/07
   (1) --accent/--accent-soft estavam INDEFINIDOS mas usados em ~12
       lugares (aba ativa, funil-final, toggles, sliders) → caíam em
       fallback cinza. Alias p/ a verde-marca = consistência.
   (2) Material glass (mesmo do dashboard) nos filter bars, KPIs e
       estados vazios — antes eram flat var(--surface).
   ================================================================ */
:root{ --accent: var(--brand); --accent-soft: color-mix(in srgb, var(--brand) 14%, transparent); }

/* Glass reutilizável = material do dashboard */
.camp-filters, .an-kpi, .empty, .tags-empty{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 82%, transparent),
    color-mix(in srgb, var(--surface) 82%, transparent));
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), var(--shadow); }
.camp-filters{ border-radius:14px; }
.an-kpi{ border-radius:14px; }
.empty{ border-style:solid; }

/* KPIs e blocos do analytics: leitura de card material coerente */
.an-funnel-block{ background:color-mix(in srgb, var(--surface-2) 78%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.an-funnel-block.is-final{ background:color-mix(in srgb, var(--brand) 10%, transparent);
  border-color:color-mix(in srgb, var(--brand) 45%, transparent); }

/* ================================================================
   Dropdown custom (.cs) — substitui o popup nativo do <select>
   (feio/quadradão/azul do SO). O <select> nativo fica escondido só
   para a lógica (value + submit); a UI é esta lista glass.
   ================================================================ */
.cs{ position:relative; display:inline-block; vertical-align:top; }
.cs-native{ position:absolute; left:0; top:0; width:1px; height:1px; opacity:0; pointer-events:none; }
.cs-trigger{
  display:inline-flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; min-width:170px; padding:8px 12px; font:inherit; font-size:13px; line-height:1.3;
  color:var(--text); background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-sm); cursor:pointer; text-align:left;
  transition:border-color .14s ease, background-color .14s ease, box-shadow .14s ease; }
.cs-trigger:hover{ border-color:var(--border-strong); background:var(--surface-hover); }
.cs.is-open .cs-trigger{ border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.cs-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs-caret{ display:inline-flex; flex:0 0 auto; color:var(--text-3); transition:transform .18s ease; }
.cs.is-open .cs-caret{ transform:rotate(180deg); color:var(--text-2); }
.cs-caret svg{ width:14px; height:14px; display:block; }
.cs-panel{
  position:fixed; width:max-content; max-width:min(420px,86vw);
  z-index:3000; max-height:min(320px,58vh); overflow:auto; padding:6px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 94%, transparent),
    color-mix(in srgb, var(--surface) 96%, transparent));
  backdrop-filter:blur(18px) saturate(1.35); -webkit-backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid var(--border-strong); border-radius:12px;
  box-shadow:var(--shadow-lift); animation:cs-in .14s cubic-bezier(.2,.7,.3,1); }
.cs-panel[hidden]{ display:none; }
.cs-panel.cs-up{ top:auto; bottom:calc(100% + 6px); }
@keyframes cs-in{ from{opacity:0; transform:translateY(-5px) scale(.985);} to{opacity:1; transform:none;} }
.cs-option{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 11px; border-radius:8px; font-size:13px; color:var(--text-2); cursor:pointer;
  white-space:nowrap; transition:background-color .1s ease, color .1s ease; }
.cs-option:hover, .cs-option.is-active{ background:var(--surface-hover); color:var(--text); }
.cs-option.is-sel{ color:var(--brand); font-weight:500; }
.cs-option.is-sel::after{ content:''; width:15px; height:15px; flex:0 0 auto;
  background:var(--brand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }
.cs-option:not(.is-sel)::after{ content:''; width:15px; flex:0 0 auto; }
.cs-option.is-dis{ opacity:.4; cursor:default; }

/* ================================================================
   Caixa de integração (Clientes) — deixa claro que é a integração
   ESPECÍFICA do Hotmart (info-produtos), não a única/universal.
   ================================================================ */
.integ-box{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 82%, transparent),
    color-mix(in srgb, var(--surface) 82%, transparent));
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--border); border-radius:14px; padding:16px 18px; margin-bottom:20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), var(--shadow); }
.integ-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.integ-plat{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--text); }
.integ-plat svg{ width:16px; height:16px; color:var(--brand); }
.integ-plat b{ color:var(--brand); }
.integ-for{ font-size:11.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.04em; }
.integ-for b{ color:var(--text-2); font-weight:600; }
.integ-body{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:12.5px; color:var(--text-3); }
.integ-body code{ font-family:var(--mono); font-size:12px; color:var(--text);
  background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--r-sm); padding:7px 10px; }
.integ-body .btn{ margin-left:auto; }
.integ-note{ margin:12px 0 0; font-size:11.5px; color:var(--text-3); line-height:1.5; }
.integ-note::before{ content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--text-3); opacity:.5; margin-right:7px; vertical-align:middle; }

/* ================================================================
   Clientes — botão danger, contador de contas, overlays/modais,
   wizard de novo cliente, cards de tipo e de integração (logos).
   ================================================================ */
.btn-danger{ color:var(--neg); }
.edit-row:hover .actions-cell .btn-danger{ border-color:color-mix(in srgb, var(--neg) 35%, transparent); color:var(--neg); }
.actions-cell .btn-danger:hover{ color:#fff; border-color:transparent;
  background:linear-gradient(180deg,#e5706b,#c8453f); }
.btn-danger.btn-solid{ color:#fff; border:1px solid transparent;
  background:linear-gradient(180deg,#e5706b,#c8453f); font-weight:600; }
.btn-danger.btn-solid:hover{ filter:brightness(1.06); color:#fff; }

/* Contador de contas = botão discreto (abre o gerenciador) */
/* Botão de gerenciar contas — afração VISÍVEL (o usuário precisa perceber que
   dá pra adicionar/gerir contas por aqui). Borda + fundo em repouso, verde no hover. */
.acc-count{ display:inline-flex; align-items:center; gap:6px; font:inherit;
  font-family:var(--mono); font-size:12.5px; color:var(--text-2); cursor:pointer;
  background:color-mix(in srgb, var(--bg-soft) 60%, transparent);
  border:1px solid var(--border); border-radius:8px; padding:5px 10px;
  transition:border-color .14s ease, color .14s ease, background-color .14s ease; }
.acc-count svg{ color:var(--brand); }
.acc-count:hover{ color:var(--text); border-color:var(--brand);
  background:color-mix(in srgb, var(--brand) 10%, transparent); }

/* ---- Overlay / modal genérico ---- */
.ov{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(6,8,10,.62); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  animation:ov-fade .16s ease; }
.ov[hidden]{ display:none; }
@keyframes ov-fade{ from{opacity:0;} to{opacity:1;} }
.ov-card{ width:100%; max-width:620px; max-height:90vh; display:flex; flex-direction:column;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 96%, transparent),
    color-mix(in srgb, var(--surface) 97%, transparent));
  backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--border-strong); border-radius:18px; box-shadow:var(--shadow-lift);
  animation:ov-pop .18s cubic-bezier(.2,.7,.3,1); overflow:hidden; }
.ov-sm{ max-width:460px; }
@keyframes ov-pop{ from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:none;} }
.ov-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:18px 20px; border-bottom:1px solid var(--border); }
.ov-head h3{ margin:0; font-size:16px; font-weight:600; color:var(--text); }
.ov-sub{ margin:4px 0 0; font-size:12.5px; color:var(--text-3); }
.ov-x{ background:transparent; border:none; color:var(--text-3); font-size:16px; cursor:pointer;
  width:30px; height:30px; border-radius:8px; flex:0 0 auto; transition:.14s; }
.ov-x:hover{ background:var(--surface-hover); color:var(--text); }
.ov-body{ padding:20px; overflow:auto; }
.ov-foot{ display:flex; align-items:center; gap:10px; padding:16px 20px; border-top:1px solid var(--border); }
.ov-foot .btn:first-child{ margin-right:auto; }

/* ---- Excluir ---- */
.del-warn{ display:flex; gap:14px; align-items:flex-start; }
.del-warn svg{ color:var(--neg); flex:0 0 auto; margin-top:2px; }
.del-warn p{ margin:0; font-size:13.5px; color:var(--text-2); line-height:1.55; }
.del-warn b{ color:var(--text); }

/* ---- Gerenciar contas ---- */
.acc-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.acc-item{ display:grid; grid-template-columns:1.3fr 1fr auto auto; gap:8px; align-items:center;
  padding:8px; border:1px solid var(--border); border-radius:10px;
  background:color-mix(in srgb, var(--bg-soft) 55%, transparent); }
.acc-item.is-off{ opacity:.55; }
.acc-item input{ background:var(--bg-soft); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font:inherit; font-size:13px; padding:7px 9px; width:100%; }
.acc-item input.num{ font-family:var(--mono); font-size:12px; }
.acc-item input:focus{ outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.acc-empty{ text-align:center; color:var(--text-3); font-size:13px; padding:18px 0; }
.acc-add{ border-top:1px dashed var(--border-strong); padding-top:14px; }
.acc-add-fields{ display:flex; gap:8px; flex-wrap:wrap; }
.acc-add-fields input{ flex:1 1 160px; min-width:130px; background:var(--bg-soft);
  border:1px solid var(--border); border-radius:8px; color:var(--text); font:inherit; font-size:13px; padding:8px 10px; }
.acc-add-fields input.num{ font-family:var(--mono); font-size:12px; }
.acc-add-fields .btn{ flex:0 0 auto; }

/* ---- Wizard ---- */
.ov-wiz{ max-width:640px; }
.wiz-steps{ display:flex; gap:7px; padding:14px 20px 0; }
.wiz-dot{ height:4px; flex:1 1 0; border-radius:2px; background:var(--border); transition:background .2s ease; }
.wiz-dot.is-on{ background:var(--brand); }
.wiz-body{ min-height:280px; }
.wiz-step{ display:none; animation:wiz-in .2s ease; }
.wiz-step.is-active{ display:block; }
@keyframes wiz-in{ from{opacity:0; transform:translateX(8px);} to{opacity:1; transform:none;} }
.wiz-hint{ margin:0 0 14px; font-size:13px; color:var(--text-3); line-height:1.55; }
.field-label{ display:block; font-size:11.5px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; color:var(--text-3); margin:14px 0 8px; }
.wiz-foot .wiz-spacer{ flex:1 1 auto; }
.wiz-foot .btn:first-child{ margin-right:0; }

/* Tipo — cards selecionáveis */
.type-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.type-card{ position:relative; display:flex; flex-direction:column; gap:3px; cursor:pointer;
  padding:13px 14px; border:1px solid var(--border); border-radius:12px;
  background:color-mix(in srgb, var(--bg-soft) 50%, transparent); transition:.14s; }
.type-card:hover{ border-color:var(--border-strong); background:var(--surface-hover); }
.type-card input{ position:absolute; opacity:0; pointer-events:none; }
.type-ic{ font-size:20px; line-height:1; }
.type-t{ font-size:13.5px; font-weight:600; color:var(--text); }
.type-d{ font-size:11.5px; color:var(--text-3); line-height:1.4; }
.type-card:has(input:checked){ border-color:var(--brand);
  background:color-mix(in srgb, var(--brand) 9%, transparent);
  box-shadow:0 0 0 1px var(--brand) inset; }

/* Integração — cards com "logo" */
.integ-cards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.integ-card{ display:flex; align-items:center; gap:10px; cursor:pointer; text-align:left;
  padding:14px 16px; border:1px solid var(--border); border-radius:12px; background:var(--bg-soft);
  transition:.14s; }
.integ-card:hover{ border-color:var(--border-strong); transform:translateY(-1px); }
.integ-card.is-active{ border-color:var(--brand); box-shadow:0 0 0 1px var(--brand) inset; }
.integ-card-t{ font-size:11.5px; color:var(--text-3); }
.integ-card-arrow{ margin-left:auto; color:var(--text-3); font-size:18px; }
.integ-logo{ font-weight:800; font-size:16px; letter-spacing:-.02em; }
.integ-logo.hotmart{ color:#ff5c35; }
.integ-logo.yampi{ color:#c026d3; }
.integ-guide{ margin-top:14px; border:1px solid var(--border); border-radius:12px; padding:16px;
  background:color-mix(in srgb, var(--bg-soft) 55%, transparent); animation:wiz-in .18s ease; }
.guide-steps{ display:flex; flex-direction:column; gap:14px; }
.guide-step{ display:flex; gap:12px; font-size:13px; color:var(--text-2); line-height:1.5; }
.guide-step b{ color:var(--text); }
.guide-n{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:600; color:var(--brand);
  background:color-mix(in srgb, var(--brand) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 35%, transparent); }
.guide-code{ display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.guide-code code{ font-family:var(--mono); font-size:11.5px; color:var(--text);
  background:var(--bg-soft); border:1px solid var(--border); border-radius:8px; padding:7px 9px;
  overflow:auto; max-width:100%; }
.guide-input{ display:block; margin-top:8px; width:100%; background:var(--bg-soft);
  border:1px solid var(--border); border-radius:8px; color:var(--text); font:inherit;
  font-family:var(--mono); font-size:12px; padding:8px 10px; }
.guide-input:focus{ outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.guide-soon b{ color:var(--text); font-size:13.5px; }
.guide-soon p{ margin:8px 0 0; font-size:12.5px; color:var(--text-3); line-height:1.55; }

/* Revisão final */
.wiz-review{ margin-top:16px; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.wiz-review-row{ display:flex; justify-content:space-between; gap:12px; padding:10px 14px;
  font-size:13px; border-bottom:1px solid var(--border); }
.wiz-review-row:last-child{ border-bottom:none; }
.wiz-review-row span{ color:var(--text-3); }
.wiz-review-row b{ color:var(--text); font-weight:600; }

@media (max-width:560px){
  .type-grid, .integ-cards{ grid-template-columns:1fr; }
  .acc-item{ grid-template-columns:1fr 1fr; }
}

/* [hidden] deve sempre ocultar, mesmo com .btn{display:...} (senão botões hidden vazam no wizard). */
[hidden]{ display:none !important; }

/* Estado vazio (ex: cliente sem contas) precisa respirar antes da próxima seção. */
.empty{ margin-bottom:30px; }

/* Input (busca) dentro do filter bar padrão — mesmo visual do select. */
.camp-field input[type=search], .camp-field input[type=text]{
  padding:8px 10px; font:inherit; font-size:13px; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm);
  min-width:200px; }
/* Input (busca) dentro do filter bar padrão — mesmo visual do select. */
.camp-field input[type=search], .camp-field input[type=text]{
  padding:8px 10px; font:inherit; font-size:13px; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm);
  min-width:200px; }
.camp-field input[type=search]:focus, .camp-field input[type=text]:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }

/* ================================================================
   Usuário na sidebar (clicável) + Modal de perfil
   ================================================================ */
.user{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:transparent; border:1px solid transparent; border-radius:10px; padding:7px 9px;
  cursor:pointer; font:inherit; color:inherit; transition:background-color .14s ease, border-color .14s ease; }
.user:hover{ background:var(--surface); border-color:var(--border); }
.user-avatar{ flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  overflow:hidden; font-weight:600; font-size:13px; color:var(--ink-fg); background:var(--ink-bg); }
.user-avatar.has-img{ background:none; }
.user-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.user-name{ flex:1 1 auto; font-size:13px; font-weight:500; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-edit{ flex:0 0 auto; color:var(--text-3); opacity:0; transition:opacity .14s ease; }
.user:hover .user-edit{ opacity:.8; }

/* Modal de perfil */
.pf-photo{ display:flex; align-items:center; gap:14px; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--border); }
.pf-av{ position:relative; width:64px; height:64px; border-radius:16px; flex:0 0 auto; cursor:pointer;
  display:grid; place-items:center; overflow:hidden; color:var(--ink-fg); background:var(--ink-bg);
  font-size:24px; font-weight:600; border:1px solid var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.pf-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.pf-av-cam{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.45);
  color:#fff; opacity:0; transition:opacity .14s ease; }
.pf-av-cam svg{ width:20px; height:20px; }
.pf-av:hover .pf-av-cam, .pf-av:focus-visible .pf-av-cam{ opacity:1; }
.pf-av.is-busy{ opacity:.55; pointer-events:none; }
.pf-photo-info{ display:flex; flex-direction:column; gap:4px; }
.pf-photo-info b{ font-size:13.5px; color:var(--text); font-weight:600; }
.pf-photo-remove{ align-self:flex-start; background:none; border:none; color:var(--text-3); cursor:pointer;
  font-size:12px; padding:0; text-decoration:underline; text-underline-offset:2px; }
.pf-photo-remove:hover{ color:var(--neg); }

.pf-form{ display:flex; flex-direction:column; gap:12px; }
.pf-form .field{ display:flex; flex-direction:column; gap:6px; }
.pf-form .field > span{ font-size:11.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--text-3); }
.pf-form .field input{ background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--r-sm);
  color:var(--text); font:inherit; font-size:13.5px; padding:10px 12px; width:100%; }
.pf-form .field input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.pf-actions{ display:flex; justify-content:flex-end; margin-top:2px; }
.pf-pass{ margin-top:18px; padding-top:18px; border-top:1px solid var(--border); }
.pf-sec-title{ font-size:12.5px; font-weight:600; color:var(--text-2); margin-bottom:2px; }

/* Link "Produtos & custo" no modal de gerenciar contas */
.acc-products{ display:flex; align-items:center; gap:12px; margin-top:16px; padding:12px 14px;
  border:1px solid var(--border); border-radius:11px; text-decoration:none; color:inherit;
  background:color-mix(in srgb, var(--bg-soft) 55%, transparent); transition:border-color .14s ease, background-color .14s ease; }
.acc-products:hover{ border-color:var(--brand); background:color-mix(in srgb, var(--brand) 8%, transparent); }
.acc-products-ic{ flex:0 0 auto; color:var(--brand); display:grid; place-items:center; }
.acc-products-t{ display:flex; flex-direction:column; gap:2px; }
.acc-products-t b{ font-size:13px; color:var(--text); font-weight:600; }
.acc-products-t span{ font-size:11.5px; color:var(--text-3); }
.acc-products-arrow{ margin-left:auto; color:var(--text-3); font-size:16px; }
.acc-products:hover .acc-products-arrow{ color:var(--brand); }

/* Na tela de Produtos, os campos de custo/nome devem parecer inputs de verdade
   (não a edição-no-lugar sutil), pra data-entry ficar claro. */
.products-table .inline-input{ background:var(--bg-soft); border:1px solid var(--border); }
.products-table .inline-input:hover{ border-color:var(--border-strong); }

/* ================================================================
   Tema — consistência e suavização
   - sidebar com a MESMA cor do canvas (antes destoava dos containers)
   - light menos branco (canvas cinza claro, cards brancos "flutuam")
   - sombras bem mais leves no light (não ficam feias)
   - logo (funil) adapta a cor ao tema
   ================================================================ */
/* Sidebar com a cor dos CONTAINERS (cards) — mesmo tom dos painéis do meio. */
.sidebar{ background: var(--surface); border-right: 1px solid var(--border); }
.brand .brand-mark{ color:#3ce6a0; }

/* Remove o ícone de info (ⓘ) dos cards de métrica → sobra espaço p/ o rótulo
   inteiro (ex.: "Faturamento" deixa de cortar). */
.stat .stat-info{ display:none; }
.stat-label{ letter-spacing:-.01em; }

:root[data-theme="light"]{
  --bg:            #EEF0F3;
  --bg-soft:       #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F6F7F9;
  --surface-hover: #EDEFF3;
  --shadow:        0 1px 2px rgba(20,22,28,.045), 0 4px 12px -8px rgba(20,22,28,.10);
  --shadow-lift:   0 1px 3px rgba(20,22,28,.06), 0 10px 24px -12px rgba(20,22,28,.14);
}

/* Logo no light: quadrado verde-claro + funil verde-escuro (contraste certo) */
:root[data-theme="light"] .brand .brand-mark{
  color:#0b8a4e;
  background:linear-gradient(160deg,#e9f7ef,#d7f0e2);
  border:1px solid rgba(11,138,78,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }

/* No light o avatar verde não precisa de sombra escura */
:root[data-theme="light"] .cc-avatar:not(.has-img),
:root[data-theme="light"] .user-avatar{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }

/* Suaviza o highlight interno branco dos cards no light (fica sujo no branco) */
:root[data-theme="light"] .client-card,
:root[data-theme="light"] .stat{ box-shadow: var(--shadow); }
:root[data-theme="light"] .stat{ box-shadow: none; }