:root{
    --dc-base:      #0F172A;  /* sidebar, cabeçalhos, texto sobre claro */
    --dc-secondary: #185FA5;  /* divisórias, hover, blocos             */
    --dc-accent:    #378ADD;  /* ações: botões, links, ícones          */
    --dc-neutral:   #F1EFE8;  /* fundos claros                         */

    --dc-positive:  #1F9D55;  /* lucro positivo, ROAS acima do alvo    */
    --dc-negative:  #D64545;  /* prejuízo, alertas                     */
    --dc-warning:   #B7791F;  /* alertas de atenção (não críticos)     */

    --dc-font-title: "Sora", "Space Grotesk", sans-serif;
    --dc-font-body:  "Inter", "Poppins", sans-serif;
    --dc-font-mono:  "JetBrains Mono", monospace;   /* números, valores, IDs */

    --dc-surface:    #FFFFFF;
    --dc-border:     rgba(15, 23, 42, .10);
    --dc-muted:      rgba(15, 23, 42, .60);
    --dc-sidebar-w:  248px;
    --dc-radius:     10px;
}

/* ---------- base ---------- */
body{
    font-family: var(--dc-font-body);
    background: var(--dc-neutral);
    color: var(--dc-base);
}
h1, h2, h3, h4, h5, .dc-card-title, .dc-page-title{ font-family: var(--dc-font-title); }
a{ color: var(--dc-accent); }
a:hover{ color: var(--dc-secondary); }
.dc-mono{ font-family: var(--dc-font-mono); }
.dc-positive{ color: var(--dc-positive); }
.dc-negative{ color: var(--dc-negative); }

/* ---------- wordmark ---------- */
.dc-wordmark{
    display: inline-flex; align-items: center; gap: .65rem;
    color: #fff; text-decoration: none;
}
.dc-wordmark:hover{ color: #fff; }
.dc-wordmark-mark{
    display: inline-grid; place-items: center;
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--dc-accent); color: #fff;
    font-family: var(--dc-font-title); font-weight: 700; font-size: .9rem; letter-spacing: .02em;
}
.dc-wordmark-text{
    font-family: var(--dc-font-title); font-weight: 600;
    font-size: .8rem; line-height: 1.15; letter-spacing: .08em; text-transform: uppercase;
}
.dc-wordmark-dark, .dc-wordmark-dark:hover{ color: var(--dc-base); }

/* ---------- sidebar ---------- */
.dc-sidebar{
    background: var(--dc-base); color: #fff;
    width: var(--dc-sidebar-w);
}
.dc-sidebar.offcanvas-lg{ --bs-offcanvas-width: var(--dc-sidebar-w); --bs-offcanvas-bg: var(--dc-base); }
.dc-sidebar-head{
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem 1.25rem 1rem;
}
.dc-menu{ display: flex; flex-direction: column; padding: .5rem .75rem 1.5rem; overflow-y: auto; }
.dc-menu-item{
    display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: 8px;
    color: rgba(255, 255, 255, .72); text-decoration: none; font-size: .925rem;
}
.dc-menu-item:hover{ color: #fff; background: rgba(255, 255, 255, .06); }
.dc-menu-item.active{ color: #fff; background: var(--dc-secondary); font-weight: 500; }
.dc-menu-item .bi, .dc-menu-group .bi{ font-size: 1rem; opacity: .85; }
.dc-menu-group{
    display: flex; align-items: center; gap: .5rem;
    margin: 1.25rem .75rem .4rem;
    font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}
.dc-menu-sub{ padding-left: 1.25rem; }

@media (min-width: 992px){
    .dc-sidebar{
        position: fixed; inset: 0 auto 0 0; z-index: 1030;
        display: flex; flex-direction: column;
        background-color: var(--dc-base) !important;   /* bootstrap zera o fundo do offcanvas-lg */
    }
    .dc-main{ margin-left: var(--dc-sidebar-w); }
}

/* ---------- navbar ---------- */
.dc-main{ min-height: 100vh; display: flex; flex-direction: column; }
.dc-navbar{
    position: sticky; top: 0; z-index: 1020;
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
    padding: .85rem 1.5rem;
    background: var(--dc-surface); border-bottom: 1px solid var(--dc-border);
}
.dc-page-title{ font-size: 1.15rem; font-weight: 600; margin: 0; flex: 1 1 auto; }
.dc-navbar-filters{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.dc-store-select, .dc-period-select{ width: auto; min-width: 150px; }
.dc-period-custom{ display: flex; align-items: center; gap: .4rem; }
.dc-period-custom.d-none{ display: none !important; }
.dc-period-custom input{ width: 150px; }
.dc-content{ padding: 1.5rem; flex: 1 1 auto; }

@media (max-width: 575.98px){
    .dc-navbar{ padding: .75rem 1rem; }
    .dc-content{ padding: 1rem; }
    .dc-navbar-filters{ width: 100%; }
    .dc-store-select, .dc-period-select{ flex: 1 1 140px; }
    .dc-period-custom{ width: 100%; }
    .dc-period-custom input{ flex: 1 1 0; width: auto; min-width: 0; }
}

/* ---------- botões ---------- */
.dc-btn-primary{ background: var(--dc-accent); border-color: var(--dc-accent); color: #fff; }
.dc-btn-primary:hover, .dc-btn-primary:focus{ background: var(--dc-secondary); border-color: var(--dc-secondary); color: #fff; }
.dc-btn-outline{ border: 1px solid var(--dc-accent); color: var(--dc-accent); background: transparent; }
.dc-btn-outline:hover{ background: var(--dc-accent); color: #fff; }
.dc-btn-ghost{ border: 1px solid var(--dc-border); color: var(--dc-base); background: transparent; }
.dc-btn-ghost:hover{ background: var(--dc-neutral); }
.form-control:focus, .form-select:focus{ border-color: var(--dc-accent); box-shadow: 0 0 0 .2rem rgba(55, 138, 221, .2); }

/* ---------- cards ---------- */
.dc-card{
    background: var(--dc-surface); border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius); padding: 1.25rem;
}
.dc-card-title{ font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }
.dc-kpi{ height: 100%; }
.dc-kpi-label{ font-size: .8rem; color: var(--dc-muted); margin-bottom: .35rem; }
.dc-kpi-value{ font-size: 1.4rem; font-weight: 500; }
.dc-alert{ background: var(--dc-surface); border: 1px solid var(--dc-border); border-left: 4px solid var(--dc-accent); }

/* ---------- tabelas ---------- */
.dc-table th{ font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--dc-muted); font-weight: 500; }
.dc-table td{ vertical-align: middle; }

/* ---------- formulários inline ---------- */
.dc-input-num{ font-family: var(--dc-font-mono); text-align: right; width: 110px; }
.dc-input-currency{ font-family: var(--dc-font-mono); text-transform: uppercase; width: 76px; }
.dc-input-country{ min-width: 220px; }
.dc-input-name{ min-width: 180px; }
.dc-thumb{ width: 36px; height: 36px; object-fit: cover; border-radius: 6px; border: 1px solid var(--dc-border); background: var(--dc-neutral); }
.dc-thumb-sm{ width: 28px; height: 28px; }
.dc-group-row > td{ background: var(--dc-neutral); }
.dc-badge-negative{ background: var(--dc-negative); color: #fff; font-weight: 500; }
.dc-badge-accent{ background: var(--dc-accent); color: #fff; font-weight: 500; }
.dc-text-negative{ color: var(--dc-negative); }
.dc-warning{ color: var(--dc-base); background: rgba(214, 69, 69, .08); border-left: 3px solid var(--dc-negative); padding: .3rem .6rem; border-radius: 4px; }
.dc-text-negative:hover{ color: var(--dc-negative); background: rgba(214, 69, 69, .08); }
.dc-tfoot-label{ font-weight: 500; font-size: .85rem; }

/* ---------- kits ---------- */
.dc-bundle-group{ font-size: .9rem; font-weight: 600; margin: 1rem 0 .5rem; }
.dc-bundle{ border: 1px solid var(--dc-border); border-radius: 8px; padding: .75rem; margin-bottom: .5rem; }
.dc-bundle-extra{ display: flex; gap: .4rem; align-items: center; margin-bottom: .35rem; max-width: 440px; }
.dc-bundle-extra .form-select{ flex: 1 1 auto; min-width: 0; }
.dc-bundle-extra .dc-input-num{ width: 70px; }

/* ---------- checklist ---------- */
.dc-checklist{ list-style: none; padding: 0; margin: 0; }
.dc-checklist li{ display: flex; align-items: center; gap: .65rem; padding: .55rem 0; border-top: 1px solid var(--dc-border); }
.dc-checklist li:first-child{ border-top: 0; }
.dc-checklist .bi{ font-size: 1.1rem; }

/* ---------- telas sem layout (login, erro) ---------- */
.dc-center{ min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.dc-login{
    width: 100%; max-width: 380px;
    background: var(--dc-surface); border: 1px solid var(--dc-border);
    border-radius: 14px; padding: 2rem;
}
.dc-oauth{ max-width: 460px; }
.dc-login-sub{ color: var(--dc-muted); font-size: .9rem; margin: .75rem 0 1.5rem; }
.dc-error{ text-align: center; }
.dc-error-status{ font-family: var(--dc-font-mono); font-size: 3rem; font-weight: 500; color: var(--dc-secondary); }

/* ---------- toast ---------- */
.dc-toast-error{ border-left: 4px solid var(--dc-negative); }
.dc-toast-success{ border-left: 4px solid var(--dc-positive); }

/* ---------- visão geral ---------- */
.dc-alerts{ display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.dc-alert-item{
    display: flex; align-items: center; gap: .6rem;
    background: var(--dc-surface); border: 1px solid var(--dc-border); border-left: 4px solid var(--dc-negative);
    border-radius: 8px; padding: .55rem .85rem; font-size: .9rem;
}
.dc-alert-item .bi{ color: var(--dc-negative); }
.dc-alert-item[data-severity="warning"]{ border-left-color: var(--dc-warning); }
.dc-alert-item[data-severity="warning"] .bi{ color: var(--dc-warning); }
.dc-alert-item[data-severity="info"]{ border-left-color: var(--dc-accent); }
.dc-alert-item[data-severity="info"] .bi{ color: var(--dc-accent); }
.dc-kpi .dc-kpi-value{ font-size: 1.3rem; white-space: nowrap; }
.dc-kpi-delta{ font-size: .78rem; margin-top: .25rem; }
.dc-kpi-sub{ font-size: .72rem; margin-top: .15rem; }
.dc-kpi-sub:empty{ display: none; }
.dc-kpi-delta .bi{ font-size: 1rem; vertical-align: -2px; }
.dc-chart{ position: relative; height: 280px; }
.dc-spin{ display: inline-block; animation: dc-spin 1s linear infinite; }
@keyframes dc-spin{ to{ transform: rotate(360deg); } }

/* ---------- pedidos ---------- */
.dc-btn-icon{ border: 0; background: transparent; color: var(--dc-muted); padding: .1rem .35rem; }
.dc-btn-icon:hover{ color: var(--dc-accent); }
.dc-flags .bi{ margin-right: .35rem; }
.dc-row-cancelled td{ color: var(--dc-muted); }
.dc-row-cancelled [c-id="order-name"]{ text-decoration: line-through; }
.dc-order-detail > td{ background: var(--dc-neutral); padding: 1rem 1.25rem; }
.dc-detail-title{ font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dc-muted); font-weight: 600; margin-bottom: .5rem; }
.dc-dl{ display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; margin: 0; font-size: .875rem; }
.dc-dl dt{ font-weight: 500; }
.dc-dl dd{ margin: 0; text-align: right; font-family: var(--dc-font-mono); }
.dc-dl-wrap dd{ text-align: left; font-family: var(--dc-font-body); word-break: break-all; }
.dc-items{ list-style: none; padding: 0; margin: 0; font-size: .875rem; }
.dc-items li{ display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; border-bottom: 1px dashed var(--dc-border); }
.dc-badge-muted{ background: var(--dc-surface); color: var(--dc-base); border: 1px solid var(--dc-border); font-weight: 500; }

/* ---------- campanhas ---------- */
.dc-utm-notice{
    display: flex; gap: .75rem; align-items: flex-start;
    background: var(--dc-surface); border: 1px solid var(--dc-border); border-left: 4px solid var(--dc-accent);
    border-radius: 8px; padding: .75rem 1rem; font-size: .9rem;
}
.dc-utm-notice > .bi{ color: var(--dc-accent); font-size: 1.1rem; }
.dc-utm-pattern{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.dc-utm-pattern code{ background: var(--dc-neutral); color: var(--dc-base); padding: .3rem .5rem; border-radius: 4px; font-family: var(--dc-font-mono); font-size: .8rem; word-break: break-all; }
.dc-campaigns{ font-size: .8rem; }
.dc-campaigns td, .dc-campaigns th{ white-space: nowrap; padding-left: .45rem; padding-right: .45rem; }
.dc-campaigns .dc-name-cell{ max-width: 240px; }
.dc-campaigns [c-id="row-name"]{ overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 200px; vertical-align: middle; }
/* nome fixo à esquerda ao rolar as colunas */
.dc-campaigns tr > :first-child{ position: sticky; left: 0; z-index: 1; background: var(--dc-surface); box-shadow: 1px 0 0 var(--dc-border); }
.dc-campaigns .dc-level-1 > :first-child, .dc-campaigns .dc-level-2 > :first-child{ background: #F8F7F3; }
.dc-group-head th{ font-size: .7rem; text-align: center; border-bottom: 0; padding-bottom: 0; }
.dc-col-group{ border-left: 2px solid var(--dc-border); }
.dc-col-real{ background: rgba(31, 157, 85, .04); }
.dc-sort{ border: 0; background: none; padding: 0; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; white-space: nowrap; }
.dc-sort:hover, .dc-sort.active{ color: var(--dc-accent); }
.dc-level-0 td{ font-weight: 500; }
.dc-level-1 .dc-name-cell [c-id="row-indent"]{ padding-left: 1.25rem; }
.dc-level-2 .dc-name-cell [c-id="row-indent"]{ padding-left: 2.5rem; }
.dc-level-1 td, .dc-level-2 td{ background-color: rgba(241, 239, 232, .45); }
.dc-level-2 td{ color: rgba(15, 23, 42, .8); }
.dc-unattributed td{ font-style: italic; }
.dc-total-row td{ font-weight: 600; border-top: 2px solid var(--dc-base); }

/* ---------- público ---------- */
.dc-heatmap td{ transition: background-color .2s; }
.dc-heatmap th[scope="row"]{ font-weight: 500; font-family: var(--dc-font-mono); }

/* ---------- tarefas ---------- */
.dc-column{ background: rgba(15, 23, 42, .04); border: 1px solid var(--dc-border); border-radius: var(--dc-radius); padding: .75rem; min-height: 220px; height: 100%; display: flex; flex-direction: column; transition: background .15s; }
.dc-column.dc-drop{ background: rgba(55, 138, 221, .10); border-color: var(--dc-accent); }
.dc-column-head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; font-family: var(--dc-font-title); }
.dc-column-body{ display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; }
.dc-column-empty{ text-align: center; padding: 1.5rem 0; }
.dc-column-foot{ display: flex; justify-content: space-between; align-items: center; margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--dc-border); }
.dc-task{ background: var(--dc-surface); border: 1px solid var(--dc-border); border-radius: 8px; padding: .65rem .75rem; cursor: pointer; }
.dc-task:hover, .dc-task:focus{ border-color: var(--dc-accent); outline: none; }
.dc-task.dc-dragging{ opacity: .5; }
.dc-task-overdue{ border-left: 3px solid var(--dc-negative); }
.dc-task-done .dc-task-title{ text-decoration: line-through; color: var(--dc-muted); }
.dc-task-icon{ color: var(--dc-accent); font-size: 1.05rem; margin-top: .1rem; }
.dc-task-title{ font-weight: 500; line-height: 1.3; word-break: break-word; }
.dc-task-meta{ display: flex; flex-wrap: wrap; gap: .2rem .7rem; color: var(--dc-muted); margin-top: .25rem; }
.dc-task-progress{ display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }
.dc-task-progress .progress{ flex: 1 1 auto; height: 6px; }
.dc-task-progress .progress-bar{ background: var(--dc-positive); }
.dc-task-actions{ display: flex; justify-content: flex-end; gap: .25rem; margin-top: .35rem; }
.dc-badge-claude{ background: var(--dc-base); color: #fff; font-weight: 500; }
.min-w-0{ min-width: 0; }
.dc-checklist-edit{ list-style: none; padding: 0; margin: 0 0 .25rem; }
.dc-checklist-edit li{ display: flex; align-items: center; gap: .5rem; padding: .2rem 0; }
.dc-checklist-edit .form-check-input{ flex: 0 0 auto; margin: 0; width: 1.15rem; height: 1.15rem; }

.dc-task-summary{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding: .85rem 1.25rem; }
.dc-task-summary-item{ font-size: .9rem; color: var(--dc-muted); }
.dc-task-summary-item .dc-mono{ font-size: 1.15rem; font-weight: 600; color: var(--dc-base); margin-right: .2rem; }
.dc-task-summary-item .dc-mono.dc-negative{ color: var(--dc-negative); }

/* ---------- personas ---------- */
.dc-heat-cell{ cursor: pointer; }
.dc-heat-cell:focus{ outline: 2px solid var(--dc-accent); outline-offset: -2px; }
.dc-cell-selected{ box-shadow: inset 0 0 0 2px var(--dc-base); font-weight: 600; }
.dc-persona{ display: flex; flex-direction: column; }
.dc-persona-suggestion{ border: 1px dashed var(--dc-accent); border-radius: 8px; padding: .75rem; background: rgba(55, 138, 221, .04); }
.dc-persona-metrics{ display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .25rem 0 .5rem; }
.dc-persona-metrics dt{ font-size: .7rem; font-weight: 500; color: var(--dc-muted); text-transform: uppercase; letter-spacing: .04em; }
.dc-persona-metrics dd{ margin: 0; font-size: .9rem; }

/* ---------- tokens ---------- */
.dc-command{ display: flex; align-items: center; gap: .5rem; }
.dc-command code{ flex: 1 1 auto; background: var(--dc-neutral); color: var(--dc-base); padding: .45rem .6rem; border-radius: 6px; font-family: var(--dc-font-mono); font-size: .8rem; word-break: break-all; }

/* ---------- Google Ads ---------- */
.dc-hide-views .dc-col-views{ display: none; }
.dc-platform-badge{ font-size: .65rem; font-weight: 600; letter-spacing: .03em; vertical-align: middle; }
.dc-platform-meta{ background: var(--dc-secondary); color: #fff; }
.dc-platform-google{ background: var(--dc-positive); color: #fff; }
.dc-remainder [c-id="row-name"]{ font-style: italic; color: var(--dc-muted); }
.dc-utm-label{ flex: 0 0 100%; color: var(--dc-muted); }
.dc-tabs .nav-link{ color: var(--dc-base); padding: .35rem .9rem; }
.dc-tabs .nav-link.active{ color: var(--dc-accent); font-weight: 600; }

/* ---------- equilíbrio (campanhas) ---------- */
.dc-campaigns tr.dc-be-above > td:first-child{ box-shadow: inset 4px 0 0 var(--dc-positive); }
.dc-campaigns tr.dc-be-below > td:first-child{ box-shadow: inset 4px 0 0 var(--dc-negative); }

/* ---------- análises: funil ---------- */
.dc-funnel-step{ margin-bottom: .85rem; }
.dc-funnel-bar{ height: 10px; background: var(--dc-neutral); border-radius: 5px; overflow: hidden; margin: .25rem 0; }
.dc-funnel-bar > div{ height: 100%; background: var(--dc-accent); border-radius: 5px; transition: width .3s; }
.dc-funnel-bar > div.dc-funnel-worst{ background: var(--dc-negative); }

/* números e valores não quebram linha nas tabelas */
.dc-table td.dc-mono{ white-space: nowrap; }
.dc-goals select{ min-width: 140px; }

/* ---------- diagnóstico por IA ---------- */
.dc-ai-summary{ font-size: 1.02rem; }
.dc-ai-quality{
    display: flex; gap: .6rem; background: var(--dc-surface); border: 1px solid var(--dc-border);
    border-left: 4px solid var(--dc-warning); border-radius: 8px; padding: .65rem .9rem; font-size: .9rem;
}
.dc-ai-quality .bi{ color: var(--dc-warning); }
.dc-ai-quality ul{ padding-left: 1rem; }
.dc-notice-warning{ border-left-color: var(--dc-warning) !important; }
.dc-finding{ border-left: 4px solid var(--dc-accent); }
.dc-finding[data-severity="critical"]{ border-left-color: var(--dc-negative); }
.dc-finding[data-severity="warning"]{ border-left-color: var(--dc-warning); }
.dc-finding[data-severity="opportunity"]{ border-left-color: var(--dc-positive); }
.dc-sev-critical{ background: var(--dc-negative); color: #fff; }
.dc-sev-warning{ background: var(--dc-warning); color: #fff; }
.dc-sev-opportunity{ background: var(--dc-positive); color: #fff; }
.dc-sev-info{ background: var(--dc-accent); color: #fff; }
.dc-chip{
    display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 999px;
    background: var(--dc-neutral); border: 1px solid var(--dc-border); font-size: .82rem;
}
.dc-clickable{ cursor: pointer; }
.dc-clickable.dc-selected td{ background: rgba(55, 138, 221, .08); }

/* utilitários (sem style inline: a CSP não permite) */
.dc-maxw-90{ max-width: 90px; }
.dc-minw-0{ min-width: 0; }