/* ============================================================
   AfiliadoFlow — design system (v2: sidebar + dropdown)
   ============================================================ */

:root {
    --color-bg: #f6f7fb;
    --color-surface: #ffffff;
    --color-surface-2: #f1f5f9;
    --color-surface-3: #eef2f7;
    --color-border: #e5e7eb;
    --color-border-strong: #cbd5e1;

    --color-text: #0f172a;
    --color-text-muted: #475569;
    --color-text-soft: #94a3b8;

    --color-primary: #4f46e5;
    --color-primary-hover: #4338ca;
    --color-primary-soft: #eef2ff;

    --color-success: #16a34a;
    --color-success-hover: #15803d;
    --color-success-soft: #ecfdf5;

    --color-warning: #d97706;
    --color-warning-soft: #fef3c7;

    --color-danger: #dc2626;
    --color-danger-hover: #b91c1c;
    --color-danger-soft: #fee2e2;

    --color-info: #0284c7;
    --color-info-soft: #e0f2fe;

    --sidebar-w: 248px;
    --sidebar-w-collapsed: 72px;
    /* Scrollbar global (light mode — usado pelo container e body) */
    --scrollbar-thumb: rgba(15, 23, 42, 0.18);
    --scrollbar-thumb-hover: rgba(15, 23, 42, 0.36);
    --scrollbar-thumb-dark: rgba(255, 255, 255, 0.16);
    --scrollbar-thumb-dark-hover: rgba(255, 255, 255, 0.32);

    color-scheme: light;

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Apple Color Emoji",
                 "Segoe UI Emoji", sans-serif;

    /* Escala de bordas — refinada 2026: menos arredondado, mais sóbrio
       (estilo "linear/notion" em vez de "iOS bubbly").
       Antes: 8/12/16/20 — Agora: 4/6/8/10 */
    --radius-xs: 3px;
    --radius-sm: 4px;
    --radius:    6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-full: 9999px;

    /* Sombras mais discretas — menos "puffy" */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.07);
    --shadow-lg: 0 12px 36px rgba(15, 23, 42, 0.10);

    --t-fast: 120ms ease;
    --t: 200ms ease;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--t-fast);
}
a:hover { color: var(--color-primary-hover); text-decoration: underline; }

code {
    background: var(--color-surface-2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    color: #334155;
}

/* ============================================================
   Layout: sidebar + main
   ============================================================ */

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
}

body.sidebar-collapsed .app-shell { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

.sidebar {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    color: #cbd5e1;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 4px 0 18px rgba(15, 23, 42, 0.06);
    z-index: 40;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.01em;
    font-size: 1.05rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.sidebar-brand .logo {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #818cf8, #c084fc);
    color: #fff;
    font-size: 1.05rem;
    flex: 0 0 32px;
    box-shadow: 0 4px 12px rgba(129, 140, 248, 0.32);
}

.sidebar-brand .brand-text {
    background: linear-gradient(135deg, #c7d2fe, #f5d0fe);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sidebar-toggle {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: #94a3b8;
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 6px;
    transition: background var(--t-fast), color var(--t-fast);
    font-size: 0.9rem;
    line-height: 1;
}
.sidebar-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; }

.sidebar-nav {
    flex: 1 1 0;
    min-height: 0;            /* permite que overflow-y funcione dentro do flex */
    overflow-y: auto;
    padding: 12px 10px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Filhos diretos da nav nunca comprimem — o que sobra rola */
.sidebar-nav > *,
.sidebar-nav > .nav-group,
.sidebar-nav > .nav-group > .nav-group-toggle,
.sidebar-nav > .nav-group > .nav-group-children {
    flex-shrink: 0;
}

.sidebar-nav .nav-section {
    margin-top: 16px;
    padding: 0 10px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    white-space: nowrap;
}
.sidebar-nav .nav-section:first-child { margin-top: 4px; }

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--radius);
    color: #cbd5e1;
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
    white-space: nowrap;
    overflow: hidden;
}
.sidebar-nav a:hover { background: rgba(255,255,255,0.06); color: #fff; text-decoration: none; }
.sidebar-nav a.active {
    background: linear-gradient(135deg, rgba(99,102,241,0.22), rgba(168,85,247,0.18));
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(199, 210, 254, 0.18);
}

/* Grupos colapsáveis (Canais com sub-itens Dashboard/Disparo) */
.nav-group { display: flex; flex-direction: column; }
.nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--radius);
    color: #cbd5e1;
    font-size: 0.92rem;
    font-weight: 500;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background var(--t-fast), color var(--t-fast);
    white-space: nowrap;
    overflow: hidden;
    font-family: inherit;
}
.nav-group-toggle:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-group-toggle .icon {
    flex: 0 0 22px;
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}
.nav-group-toggle .label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav-group-toggle .badge-soon {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    background: rgba(251, 191, 36, 0.18);
    color: #fbbf24;
    border-radius: 999px;
}
.nav-group-toggle .caret {
    flex: 0 0 14px;
    color: #64748b;
    font-size: 0.72rem;
    transition: transform var(--t-fast);
}
.nav-group.open .nav-group-toggle .caret { transform: rotate(180deg); color: #cbd5e1; }
.nav-group.open .nav-group-toggle { color: #fff; }

.nav-group-children {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 240ms ease;
}
.nav-group-children > div { overflow: hidden; }
.nav-group.open .nav-group-children { grid-template-rows: 1fr; }

.nav-group-children a {
    padding: 7px 12px 7px 44px;  /* indent pra dar hierarquia */
    font-size: 0.86rem;
    color: #94a3b8;
    border-radius: var(--radius-sm);
    margin-left: 8px;
}
.nav-group-children a:hover { color: #cbd5e1; background: rgba(255,255,255,0.05); }
.nav-group-children a.active {
    background: rgba(99,102,241,0.16);
    color: #fff;
}
.nav-group-children a .icon {
    flex: 0 0 18px;
    width: 18px; height: 18px;
    font-size: 0.92rem;
}
.nav-group-children a.disabled {
    color: #475569;
    cursor: not-allowed;
    pointer-events: none;
}

/* Sidebar collapsed: esconde labels e fecha grupos */
body.sidebar-collapsed .nav-group-toggle .label,
body.sidebar-collapsed .nav-group-toggle .badge-soon,
body.sidebar-collapsed .nav-group-toggle .caret,
body.sidebar-collapsed .nav-group-children { display: none; }
body.sidebar-collapsed .nav-group-toggle { justify-content: center; padding: 10px 0; }
.sidebar-nav a .icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}
.sidebar-nav a .label { overflow: hidden; text-overflow: ellipsis; }

.sidebar-foot {
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.12));
}
.sidebar-foot .user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius);
    color: #cbd5e1;
    font-size: 0.86rem;
    background: rgba(255,255,255,0.04);
    overflow: hidden;
    white-space: nowrap;
}
.sidebar-foot .user-chip .avatar {
    flex: 0 0 30px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
}
/* Foto de perfil no lugar da inicial. `object-fit: cover` porque a imagem já
   sai quadrada do servidor, mas um arquivo antigo (ou um recorte futuro
   diferente) não pode esticar o rosto de ninguém. */
.sidebar-foot .user-chip .avatar--foto {
    background: none;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.14);
}
.sidebar-foot .user-chip .meta { overflow: hidden; }
.sidebar-foot .user-chip .meta strong { display: block; color: #f1f5f9; font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; }
.sidebar-foot .user-chip .meta span { color: #94a3b8; font-size: 0.74rem; }

.sidebar-foot a.logout-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--radius);
    color: #cbd5e1;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background var(--t-fast), border-color var(--t-fast),
                color var(--t-fast);
    letter-spacing: 0.01em;
}
.sidebar-foot a.logout-link:hover {
    background: rgba(220, 38, 38, 0.14);
    border-color: rgba(248, 113, 113, 0.28);
    color: #fff;
    text-decoration: none;
}
.sidebar-foot a.logout-link .icon {
    flex: 0 0 18px;
    font-size: 0.95rem;
}

/* Sidebar collapsed: hide labels */
body.sidebar-collapsed .sidebar-brand .brand-text,
body.sidebar-collapsed .sidebar-nav a .label,
body.sidebar-collapsed .sidebar-nav .nav-section,
body.sidebar-collapsed .sidebar-foot .user-chip .meta,
body.sidebar-collapsed .sidebar-foot .logout-link .label {
    display: none;
}
body.sidebar-collapsed .sidebar-nav a { justify-content: center; padding: 10px 0; }
body.sidebar-collapsed .sidebar-foot .logout-link { justify-content: center; }
body.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 18px 8px 14px; }
body.sidebar-collapsed .sidebar-toggle { display: none; }

/* Main column */
.main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(246, 247, 251, 0.85);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--color-border);
    padding: 12px 28px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.topbar .mobile-toggle {
    display: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 8px 10px;
    cursor: pointer;
    font-size: 1rem;
}

/* Toggle UNIFICADO — sempre visivel, age conforme viewport */
.topbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    cursor: pointer;
    color: var(--color-text);
    flex-shrink: 0;
    padding: 0;
    transition: background var(--t-fast), border-color var(--t-fast),
                box-shadow var(--t-fast);
}
.topbar-toggle:hover {
    background: var(--color-surface-2);
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}
.topbar-toggle:focus-visible {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.topbar-toggle-icon {
    font-size: 1.05rem;
    line-height: 1;
    color: var(--color-text);
}
/* Quando recolhido, o icone gira (visualmente sugere "abrir") */
body.sidebar-collapsed .topbar-toggle-icon { color: var(--color-primary); }
body.sidebar-open .topbar-toggle-icon { color: var(--color-primary); }

.topbar .page-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.topbar .page-title small {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.topbar .topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Alternador de área: somente para usuários também aprovados como afiliados. */
.site-switcher { position: relative; flex: 0 0 auto; }
.site-switcher > summary {
    min-height: 40px; display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px; border: 1px solid var(--color-border);
    border-radius: 10px; background: var(--color-surface); color: var(--color-text);
    cursor: pointer; list-style: none; font-size: .78rem; font-weight: 750;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.site-switcher > summary::-webkit-details-marker { display: none; }
.site-switcher > summary:hover, .site-switcher[open] > summary {
    background: var(--color-surface-2); border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.site-switcher__mark { width: 26px; height: 26px; display: grid; place-items: center;
    border-radius: 7px; color: #fff; background: linear-gradient(135deg,#6366f1,#8b5cf6); }
.site-switcher__chevron { color: var(--color-text-muted); transition: transform .16s; }
.site-switcher[open] .site-switcher__chevron { transform: rotate(180deg); }
.site-switcher__menu {
    position: absolute; z-index: 80; right: 0; top: calc(100% + 9px); width: 260px;
    padding: 8px; border: 1px solid var(--color-border); border-radius: 12px;
    background: var(--color-surface); box-shadow: 0 18px 45px rgba(15,23,42,.18);
}
.site-switcher__label { display: block; padding: 5px 8px 7px; color: var(--color-text-muted);
    font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.site-switcher__menu a { display: grid; grid-template-columns: 28px 1fr auto; align-items: center;
    gap: 9px; padding: 9px; border-radius: 9px; color: var(--color-text); text-decoration: none; }
.site-switcher__menu a:hover { background: var(--color-surface-2); }
.site-switcher__menu a.is-active { background: var(--color-primary-soft); color: var(--color-primary); }
.site-switcher__menu strong, .site-switcher__menu small { display: block; }
.site-switcher__menu strong { font-size: .78rem; }
.site-switcher__menu small { margin-top: 1px; color: var(--color-text-muted); font-size: .65rem; }
@media (max-width: 640px) {
    .site-switcher__current { display: none; }
    .site-switcher > summary { padding: 6px; gap: 3px; }
    .site-switcher__menu { position: fixed; top: 64px; right: 10px; left: 10px; width: auto; }
}

.container {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    /* padding fluido: 14px em mobile pequeno → 28px desktop */
    padding: clamp(14px, 2.6vw, 28px);
}

/* Ultra-wide: dá mais respiro pro conteúdo em monitores grandes */
@media (min-width: 1600px) { .container { max-width: 1440px; padding: 32px; } }
@media (min-width: 1920px) { .container { max-width: 1560px; padding: 36px; } }
@media (min-width: 2400px) { .container { max-width: 1720px; padding: 40px; } }

.panel {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow);
    border: 1px solid var(--color-border);
}

.panel + .panel { margin-top: 18px; }

.panel-section {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--color-border);
}
.panel-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

h1 {
    font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem);
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}
h2 {
    font-size: clamp(0.98rem, 0.9rem + 0.4vw, 1.2rem);
    font-weight: 700;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}
h3 {
    font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1.05rem);
    font-weight: 600;
    margin: 0 0 8px;
}
p  { margin: 0 0 12px; color: var(--color-text-muted); }

.muted { color: var(--color-text-muted); }
.hint  { color: var(--color-text-soft); font-size: 0.85rem; }

/* ============================================================
   Stats grid
   ============================================================ */

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.card {
    padding: 20px 22px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--color-surface-2), #fff);
    border: 1px solid var(--color-border);
    transition: transform var(--t), box-shadow var(--t);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card strong {
    display: block;
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.05;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}
.card span {
    color: var(--color-text-muted);
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* ============================================================
   Buttons
   ============================================================ */

.button-row,
.status-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.button,
.button-small,
.button-link,
button:not([class*="academy-"]):not(.big-cta):not(.button-secondary):not(.vcard):not(.feature-card):not(.lightbox__close):not(.af-dropdown-trigger):not(.tab-btn):not(.channel-card):not(.dest-btn):not(.day-chip):not(.modal-close):not(.sidebar-toggle):not(.mobile-toggle):not(.topbar-toggle):not(.tpl-card):not(.tpl-chip):not(.nav-group-toggle):not(.theme-toggle):not(.wa-fab):not(.chat-widget-close):not(.chat-choice):not(.mk-priority-handle):not(.af-tree-toggle):not(.eg-post-card):not(.eg-selector__toggle):not(.eg-search-clear):not(.period-pill):not(.cln-tab):not(.cln-btn):not(.cln-pick):not(.cln-acct):not(.cln-chip__x):not(.cln-sheet__x):not(.cln-q-skip):not(.cln-ob-clear):not(.cln-ob-toggle):not(.cln-modal-x):not(.cln-modal-btn):not(.cln-route-dest--add):not(.pl-cycle__opt):not(.app-bottom-nav__item):not(.app-more__backdrop):not(.app-more__close):not(.app-more__logout-button):not(.af-bv-link):not(.af-bv-opt):not(.af-bv-sound):not(.af-bv-min):not(.cw-botao):not(.pf-botao) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-fast), transform var(--t-fast),
                box-shadow var(--t-fast);
    box-shadow: var(--shadow-sm);
}

.button:hover,
.button-small:hover,
button:not([class*="academy-"]):not(.big-cta):not(.button-secondary):not(.vcard):not(.feature-card):not(.lightbox__close):not(.button-link):not(.af-dropdown-trigger):not(.tab-btn):not(.channel-card):not(.dest-btn):not(.day-chip):not(.modal-close):not(.sidebar-toggle):not(.mobile-toggle):not(.topbar-toggle):not(.tpl-card):not(.tpl-chip):not(.nav-group-toggle):not(.theme-toggle):not(.wa-fab):not(.chat-widget-close):not(.chat-choice):not(.mk-priority-handle):not(.af-tree-toggle):not(.eg-post-card):not(.eg-selector__toggle):not(.eg-search-clear):not(.period-pill):not(.cln-tab):not(.cln-btn):not(.cln-pick):not(.cln-acct):not(.cln-chip__x):not(.cln-sheet__x):not(.cln-q-skip):not(.cln-ob-clear):not(.cln-ob-toggle):not(.cln-modal-x):not(.cln-modal-btn):not(.cln-route-dest--add):not(.pl-cycle__opt):not(.app-bottom-nav__item):not(.app-more__backdrop):not(.app-more__close):not(.app-more__logout-button):not(.af-bv-link):not(.af-bv-opt):not(.af-bv-sound):not(.af-bv-min):not(.cw-botao):not(.pf-botao):hover {
    background: var(--color-primary-hover);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--shadow);
}

button:active,
.button:active { transform: translateY(1px); }

button:disabled,
.button:disabled { opacity: 0.5; cursor: not-allowed; }

.button-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.button-secondary:hover {
    background: var(--color-surface-2);
    border-color: var(--color-border-strong);
    color: var(--color-text); /* FIX: sem isso, .button-small:hover (base) impõe #fff -> texto branco some no cinza-claro */
    text-decoration: none;
}

.button-small { padding: 7px 12px; font-size: 0.85rem; border-radius: var(--radius-sm); }

.button-link {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    box-shadow: none;
}
.button-link:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary-hover);
}

.button-danger {
    background: var(--color-danger) !important;
    color: #fff !important;
}
.button-danger:hover { background: var(--color-danger-hover) !important; }

.button-success {
    background: var(--color-success) !important;
    color: #fff !important;
}
.button-success:hover { background: var(--color-success-hover) !important; }

/* ============================================================
   SISTEMA DE BOTÕES PADRONIZADO (v3) — tokens oficiais do tema claro
   ------------------------------------------------------------
   Padroniza as variantes .button-* (a convenção REAL do projeto) e
   adiciona as que faltavam (outline/ghost/warning/telegram) + focus-ring
   + disabled LEGÍVEL (sem opacity baixa). NÃO mexe em .btn/.btn-primary/
   .btn-secondary — essas têm estilo PRÓPRIO por página (affiliate_panel
   inline; login.css isolado) e os componentes usam prefixo próprio
   (.cln-btn/.tk-btn/.dest-btn...). Aliases .btn-* só pras variantes NOVAS.
   Listas explícitas (sem [class*="button-"]) pra não pegar .button-row etc.
   ============================================================ */

/* Layout base — só pras variantes/aliases NOVOS (os antigos já têm) */
.button-primary, .button-outline, .button-ghost, .button-warning, .button-telegram,
.btn-outline, .btn-ghost, .btn-warning, .btn-telegram {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; padding: 10px 18px; border-radius: var(--radius-sm);
    font-size: 0.92rem; font-weight: 600; line-height: 1.2;
    white-space: nowrap; cursor: pointer; text-decoration: none;
    border: 1px solid transparent;
    transition: background var(--t-fast), border-color var(--t-fast),
                color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

/* 1. PRIMARY (.button-primary = igual ao .button) */
.button-primary {
    background: var(--color-primary); color: #fff;
    border-color: var(--color-primary); box-shadow: var(--shadow-sm);
}
.button-primary:hover {
    background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: #fff;
}

/* 3. OUTLINE */
.button-outline, .btn-outline {
    background: transparent; color: var(--color-primary); border-color: var(--color-primary); box-shadow: none;
}
.button-outline:hover, .btn-outline:hover {
    background: var(--color-primary-soft); color: var(--color-primary-hover); border-color: var(--color-primary);
}

/* 4. GHOST */
.button-ghost, .btn-ghost {
    background: transparent; color: var(--color-text-muted); border-color: transparent; box-shadow: none;
}
.button-ghost:hover, .btn-ghost:hover {
    background: var(--color-surface-2); color: var(--color-text); border-color: transparent;
}

/* 7. WARNING — fundo claro + texto âmbar escuro (nunca branco) */
.button-warning, .btn-warning {
    background: var(--color-warning-soft); color: #92400e; border-color: #f59e0b;
}
.button-warning:hover, .btn-warning:hover { background: #fde68a; color: #92400e; border-color: #f59e0b; }

/* 8. TELEGRAM — só em contexto Telegram */
.button-telegram, .btn-telegram {
    background: var(--tg-accent-3); color: #fff; border-color: var(--tg-accent-3);
}
.button-telegram:hover, .btn-telegram:hover { background: #1677a4; border-color: #1677a4; color: #fff; }

/* ---- ESTADOS GLOBAIS (todas as variantes — lista explícita) ---- */

/* :active */
.button:active, .button-secondary:active, .button-link:active, .button-small:active,
.button-outline:active, .button-ghost:active, .button-danger:active, .button-success:active,
.button-warning:active, .button-telegram:active,
.btn-outline:active, .btn-ghost:active, .btn-warning:active, .btn-telegram:active {
    transform: translateY(1px);
}

/* :focus-visible — ring acessível sem quebrar layout */
.button:focus-visible, .button-secondary:focus-visible, .button-link:focus-visible, .button-small:focus-visible,
.button-outline:focus-visible, .button-ghost:focus-visible, .button-success:focus-visible,
.button-warning:focus-visible,
.button-primary:focus-visible,
.btn-outline:focus-visible, .btn-ghost:focus-visible, .btn-warning:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(79, 70, 229, .22);
}
.button-danger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(220, 38, 38, .22); }
.button-telegram:focus-visible, .btn-telegram:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(42, 171, 238, .22); }

/* :disabled / [disabled] / .disabled / aria-disabled — LEGÍVEL (sem opacity baixa) */
.button:disabled, .button[disabled], .button.disabled, .button[aria-disabled="true"],
.button-secondary:disabled, .button-secondary[disabled], .button-secondary.disabled, .button-secondary[aria-disabled="true"],
.button-link:disabled, .button-primary:disabled, .button-outline:disabled, .button-ghost:disabled,
.button-danger:disabled, .button-danger[disabled], .button-danger.disabled, .button-danger[aria-disabled="true"],
.button-success:disabled, .button-success[disabled], .button-success.disabled, .button-success[aria-disabled="true"],
.button-warning:disabled, .button-telegram:disabled, .button-telegram[disabled], .button-telegram.disabled,
.btn-outline:disabled, .btn-ghost:disabled, .btn-warning:disabled, .btn-telegram:disabled {
    background: var(--color-surface-2) !important;
    color: var(--color-text-soft) !important;
    border-color: var(--color-border) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* ============================================================
   Forms
   ============================================================ */

.form-grid {
    display: grid;
    gap: 14px;
}

.form-grid label {
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--color-text);
    display: block;
}

.form-grid > label + .af-dropdown,
.form-grid > label + input,
.form-grid > label + select,
.form-grid > label + textarea { margin-top: -6px; }

.form-grid input,
.form-grid select,
.form-grid textarea,
.form-grid button:not(.af-dropdown-trigger) {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-strong);
    font-size: 0.95rem;
    font-family: inherit;
    box-sizing: border-box;
    background: #fff;
    color: var(--color-text);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus,
.form-grid button:not(.af-dropdown-trigger):focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.form-grid input[readonly] { background: var(--color-surface-2); color: var(--color-text-muted); }

.form-grid textarea {
    resize: vertical;
    min-height: 84px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85rem;
}

.form-grid input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary);
    cursor: pointer;
    padding: 0;
}

.form-grid button:not(.af-dropdown-trigger):not(.button-secondary):not(.button-danger):not(.button-success) {
    background: var(--color-primary);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-weight: 600;
    padding: 12px 18px;
    transition: background var(--t-fast);
}
.form-grid button:not(.af-dropdown-trigger):not(.button-secondary):not(.button-danger):not(.button-success):hover {
    background: var(--color-primary-hover);
}

.form-grid small {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    margin-top: -6px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.form-row > .full { grid-column: 1 / -1; }

/* Switch (toggle) */
.switch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: border-color var(--t-fast), background var(--t-fast);
    user-select: none;
}
.switch:hover { border-color: var(--color-border-strong); }
.switch input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #cbd5e1;
    position: relative;
    cursor: pointer;
    transition: background var(--t-fast);
    flex: 0 0 38px;
    margin: 0;
    padding: 0;
    border: 0;
}
.switch input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15,23,42,0.25);
    transition: transform var(--t-fast);
}
.switch input[type="checkbox"]:checked { background: var(--color-primary); }
.switch input[type="checkbox"]:checked::after { transform: translateX(16px); }

/* ============================================================
   AF Dropdown (custom multi/single select)
   ============================================================ */

.af-dropdown {
    position: relative;
    display: block;
    width: 100%;
}

.af-dropdown-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-strong);
    background: #fff;
    color: var(--color-text);
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    line-height: 1.3;
}
.af-dropdown-trigger:hover { border-color: var(--color-border-strong); }
.af-dropdown.open .af-dropdown-trigger,
.af-dropdown-trigger:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.af-dropdown-trigger .af-dropdown-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
}
.af-dropdown-trigger .af-dropdown-label.placeholder { color: var(--color-text-soft); font-weight: 500; }

.af-dropdown-trigger .af-dropdown-count {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    padding: 1px 8px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
}

.af-dropdown-trigger .caret {
    flex: 0 0 12px;
    color: var(--color-text-soft);
    transition: transform var(--t-fast);
    font-size: 0.72rem;
}
.af-dropdown.open .af-dropdown-trigger .caret { transform: rotate(180deg); color: var(--color-primary); }

.af-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    max-height: 320px;
    display: none;
    flex-direction: column;
    gap: 6px;
    animation: ddIn 140ms ease-out;
}
.af-dropdown.open .af-dropdown-menu { display: flex; }

/* Rodapé "Confirmar" (multi-select): fecha a lista ao clicar. Fica no fundo do
   menu (flex column) enquanto as opções rolam acima. */
.af-dropdown-foot {
    flex: 0 0 auto;
    padding-top: 8px;
    margin-top: 2px;
    border-top: 1px solid var(--color-border);
}
.af-dropdown-confirm {
    width: 100%;
    padding: 10px 14px;
    background: var(--color-primary);
    color: #fff;
    border: 0;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.16s;
}
.af-dropdown-confirm:hover { background: var(--color-primary-hover); }

@keyframes ddIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.af-dropdown-search {
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--color-text);
}
.af-dropdown-search:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-soft);
    background: #fff;
}

.af-dropdown-toolbar {
    display: flex;
    gap: 6px;
    padding: 0 2px;
}
.af-dropdown-toolbar button {
    flex: 1;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.af-dropdown-toolbar button:hover { background: var(--color-primary-soft); color: var(--color-primary-hover); }

.af-dropdown-options {
    overflow-y: auto;
    max-height: 240px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 2px;
}
.af-dropdown-options::-webkit-scrollbar { width: 8px; }
.af-dropdown-options::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 4px;
}

.af-dropdown-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--t-fast);
}
.af-dropdown-option:hover { background: var(--color-primary-soft); color: var(--color-text); }
.af-dropdown-option.hidden { display: none; }

.af-dropdown-option input[type="checkbox"],
.af-dropdown-option input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
    margin: 0;
    padding: 0;
    flex: 0 0 16px;
}

.af-dropdown-option .opt-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─────────── Tree-view 3 níveis (Macro → Galho → Folha) ─────────── */
.af-tree { padding-right: 4px; }
.af-tree-root,
.af-tree-children {
    list-style: none;
    margin: 0;
    padding: 0;
}
.af-tree-children {
    padding-left: 28px;
    position: relative;
}
.af-tree-children[hidden] { display: none !important; }

.af-tree-li {
    position: relative;
    margin-top: 4px;
}
.af-tree-li.hidden { display: none !important; }

.af-tree-children > .af-tree-li::before {
    content: "";
    position: absolute;
    top: 19px;
    left: -15px;
    width: 12px;
    border-top: 1.5px solid #cbd5e1;
}
.af-tree-children > .af-tree-li::after {
    content: "";
    position: absolute;
    top: -8px;
    bottom: 0;
    left: -15px;
    border-left: 1.5px solid #cbd5e1;
}
.af-tree-children > .af-tree-li:last-child::after {
    bottom: auto;
    height: 28px;
}

.af-tree-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 4px 6px;
    border-radius: 8px;
    background: var(--color-surface, #fff);
    transition: background var(--t-fast);
    position: relative;
    z-index: 1;
}
.af-tree-row:hover { background: var(--color-primary-soft, #eef2ff); color: var(--color-text); }

.af-tree-row button.af-tree-toggle {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-soft, #64748b);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: none;
    transition: color var(--t-fast), background var(--t-fast);
}
.af-tree-row button.af-tree-toggle:hover,
.af-tree-row button.af-tree-toggle:focus-visible {
    background: rgba(99, 102, 241, 0.12);
    color: var(--color-primary, #4f46e5);
    outline: none;
}

.af-tree-toggle--leaf {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-flex;
    visibility: hidden;
    pointer-events: none;
}

.af-tree-toggle .chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease-in-out;
}
.af-tree-toggle .chevron.open { transform: rotate(90deg); }

.af-tree-label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    user-select: none;
}

.af-tree-label .opt-label {
    flex: 1;
    min-width: 0;
    font-size: 0.88rem;
    line-height: 1.3;
    color: var(--color-text, #1f2937);
    white-space: normal;
    word-break: break-word;
}
.af-tree-label .opt-label--macro {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.8rem;
}
.af-tree-label .opt-label--branch { font-weight: 600; }
.af-tree-label .opt-label--leaf {
    /* fix contraste: --color-text-soft (#94a3b8) dava 2.6:1 sobre branco.
       --color-text-muted (#475569) = 7:1, legível (AA/AAA). */
    color: var(--color-text-muted);
    font-size: 0.84rem;
}
.af-tree-row:hover .opt-label { color: var(--color-primary-hover); }

/* Em formulários, regras globais de .form-grid sobrescrevem label/input.
   Reforça o alinhamento correto da árvore (checkbox + texto na mesma linha). */
.form-grid .af-tree-label {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    font-weight: 500;
}

.form-grid .af-tree-label input.custom-checkbox {
    width: 17px;
    height: 17px;
    min-width: 17px;
    padding: 0;
    margin: 0;
    align-self: center;
    vertical-align: middle;
}

.custom-checkbox {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border: 1.5px solid #cbd5e1;
    border-radius: 4px;
    background-color: #fff;
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: all 0.18s ease-in-out;
}
.custom-checkbox::before {
    content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    transition: transform 120ms ease-in-out;
    box-shadow: inset 1em 1em #fff;
    background: #fff;
    transform-origin: center;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.custom-checkbox:checked {
    background-color: var(--color-primary, #4f46e5);
    border-color: var(--color-primary, #4f46e5);
}
.custom-checkbox:checked::before { transform: scale(1); }
.custom-checkbox:indeterminate {
    background-color: var(--color-primary, #4f46e5);
    border-color: var(--color-primary, #4f46e5);
}
.custom-checkbox:indeterminate::before {
    transform: scale(1);
    clip-path: polygon(10% 40%, 90% 40%, 90% 60%, 10% 60%);
}
.af-dropdown-option .opt-meta {
    color: var(--color-text-soft);
    font-size: 0.75rem;
    flex: 0 0 auto;
}

.af-dropdown-empty {
    padding: 10px;
    text-align: center;
    color: var(--color-text-soft);
    font-size: 0.85rem;
    font-style: italic;
}

/* ============================================================
   Tables
   ============================================================ */

.table-wrap { overflow-x: auto; border-radius: var(--radius); }

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 14px;
    background: var(--color-surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

thead th {
    text-align: left;
    padding: 12px 14px;
    background: var(--color-surface-2);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

tbody td {
    padding: 13px 14px;
    border-top: 1px solid var(--color-border);
    font-size: 0.9rem;
    color: var(--color-text);
}

tbody tr { transition: background var(--t-fast); }
tbody tr:hover { background: var(--color-surface-2); }

dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 18px;
    margin: 0;
}
dt { font-weight: 600; color: var(--color-text-muted); font-size: 0.86rem; }
dd { margin: 0; color: var(--color-text); font-size: 0.92rem; }

/* Status badges (table cells) */
.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.badge-status::before { content: "●"; font-size: 0.7em; }
.badge-status.pending { background: var(--color-warning-soft); color: #854d0e; }
.badge-status.sent { background: var(--color-success-soft); color: #065f46; }
.badge-status.failed { background: var(--color-danger-soft); color: #991b1b; }
.badge-status.cancelled { background: var(--color-surface-2); color: var(--color-text-soft); }

/* ============================================================
   Flash messages
   ============================================================ */

.flash {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 14px;
    font-weight: 500;
    font-size: 0.92rem;
    border: 1px solid transparent;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.flash-success { background: var(--color-success-soft); color: #065f46; border-color: #6ee7b7; }
.flash-warning { background: var(--color-warning-soft); color: #854d0e; border-color: #fcd34d; }
.flash-danger  { background: var(--color-danger-soft);  color: #991b1b; border-color: #fca5a5; }
.flash-info    { background: var(--color-info-soft);    color: #075985; border-color: #7dd3fc; }

/* ============================================================
   Status bar (settings/dashboard)
   ============================================================ */

.status-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 16px 0 24px;
}

.status-item {
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: transform var(--t-fast);
}
.status-item:hover { transform: translateY(-1px); }
.status-item strong { font-size: 0.95rem; font-weight: 700; }
.status-item span {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.status-item.ok    { background: var(--color-success-soft); border-color: #6ee7b7; color: #065f46; }
.status-item.ok::before { content: "✓ "; font-weight: 800; color: var(--color-success); }
.status-item.warn  { background: var(--color-warning-soft); border-color: #fcd34d; color: #854d0e; }
.status-item.warn::before { content: "! "; font-weight: 800; color: var(--color-warning); }
.status-item.info  { background: var(--color-primary-soft); border-color: #c7d2fe; color: #3730a3; }

/* ============================================================
   Quick import
   ============================================================ */

.quick-import {
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    border: 1px solid #c7d2fe;
    border-radius: var(--radius);
    padding: 18px 20px;
}
.quick-import h3 { margin-top: 0; font-size: 1.02rem; color: #3730a3; }
.quick-import.success {
    background: linear-gradient(135deg, #f0fdf4, #bbf7d0);
    border-color: #86efac;
}
.quick-import.success h3 { color: #14532d; }
.quick-import textarea,
.quick-import input[type="text"] {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-strong);
    box-sizing: border-box;
    resize: vertical;
    background: #fff;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.quick-import textarea:focus,
.quick-import input:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
.quick-import button {
    background: var(--color-primary);
    color: #fff;
    border: 0;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background var(--t-fast);
}
.quick-import button:hover { background: var(--color-primary-hover); }

/* ============================================================
   Details
   ============================================================ */

details > summary {
    cursor: pointer;
    padding: 10px 14px;
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    color: var(--color-text-muted);
    font-weight: 500;
    transition: background var(--t-fast);
    list-style: none;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform var(--t-fast);
    color: var(--color-text-soft);
}
details[open] > summary::before { transform: rotate(90deg); }
details > summary:hover { background: var(--color-border); color: var(--color-text); }
details[open] > summary { margin-bottom: 10px; }

/* ============================================================
   Big CTA
   ============================================================ */

.post-all-form { margin: 18px 0; }

.big-cta {
    width: 100%;
    padding: 16px 22px;
    border: 0;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--color-success) 0%,
                                #22c55e 50%, #4ade80 100%);
    color: #fff;
    font-size: 1.02rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(16, 163, 74, 0.28);
    transition: transform var(--t-fast), box-shadow var(--t-fast),
                filter var(--t-fast);
    letter-spacing: 0.01em;
}
.big-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(16, 163, 74, 0.36); filter: brightness(1.04); }
.big-cta:active { transform: translateY(0); }

/* ============================================================
   WhatsApp grids
   ============================================================ */

.wa-session-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.wa-session-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    overflow: hidden;
    transition: transform var(--t-fast), box-shadow var(--t-fast),
                border-color var(--t-fast);
}
.wa-session-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}
.wa-session-card.connected { border-left: 4px solid var(--color-success); }
.wa-session-card.pending   { border-left: 4px solid var(--color-warning); }

.wa-session-link {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    text-decoration: none;
    color: var(--color-text);
    flex: 1;
}
.wa-session-link:hover { text-decoration: none; color: var(--color-text); }

.wa-session-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.wa-session-state { font-size: 0.78rem; color: var(--color-text-muted); }
.wa-session-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.wa-session-actions {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-2);
    flex-wrap: wrap;
}
.wa-session-actions form { flex: 0 0 auto; }
.wa-session-actions .button-small { padding: 6px 12px; font-size: 0.8rem; }

.wa-dest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

/* ============================================================
   WhatsApp HUB — cards inline com QR + info por sessão
   ============================================================ */

.wa-hub-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
}
.wa-hub-head .wa-hub-title h1 { margin: 0 0 4px 0; }
.wa-hub-head .wa-hub-title p  { margin: 0; }
.wa-hub-stats {
    display: flex;
    gap: 18px;
}
.wa-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    min-width: 70px;
}
.wa-stat strong {
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--color-text);
}
.wa-stat span {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wa-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 14px;
    margin-top: 4px;
    align-items: start;            /* cards nao esticam pra match a altura do maior */
}

/* respeita o atributo HTML `hidden` mesmo com display custom abaixo */
.wa-cards-grid [hidden] { display: none !important; }

.wa-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    overflow: hidden;
    transition: border-color var(--t-fast), box-shadow var(--t-fast),
                transform var(--t-fast);
}
.wa-card.is-connected { border-left: 4px solid var(--color-success); }
.wa-card.is-pending   { border-left: 4px solid var(--color-warning); }
.wa-card.is-offline   { border-left: 4px solid var(--color-text-muted); }
.wa-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.wa-card-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
}

.wa-card-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.wa-card.is-connected .wa-card-avatar {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: #fff;
    font-weight: 700;
}
.wa-avatar-letter {
    font-size: 1.1rem;
    line-height: 1;
}

.wa-card-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.wa-card-label {
    font-size: 0.96rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wa-card-id {
    font-size: 0.74rem;
    color: var(--color-text-muted);
}
.wa-card-id code {
    font-size: 0.74rem;
    background: transparent;
    padding: 0;
}

.wa-card-state {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    text-align: right;
}

/* ─── Estado pending: QR code inline ─── */
.wa-card-pending {
    padding: 14px;
    text-align: center;
    background: var(--color-surface-2);
}
.wa-card-qr {
    display: block;
    width: 200px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: var(--radius-sm);
    background: #fff;
    padding: 8px;
    border: 1px solid var(--color-border);
}
.wa-qr-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 200px;
    height: 200px;
    max-width: 100%;
    margin: 0 auto;
    background: #fff;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 0.85rem;
}
.wa-qr-placeholder .spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: wa-spin 0.8s linear infinite;
}
@keyframes wa-spin {
    to { transform: rotate(360deg); }
}
.wa-qr-help {
    margin: 10px 0 0 0;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

/* ─── Estado offline: minimalista, sem QR ─── */
.wa-card-offline {
    padding: 28px 18px;
    text-align: center;
    color: var(--color-text-muted);
}
.wa-offline-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 8px;
    opacity: 0.6;
}
.wa-card-offline p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* ─── Estado connected: info interna ─── */
.wa-card-info {
    padding: 14px;
}
.wa-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
}
.wa-info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.wa-info-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.wa-info-value {
    font-size: 0.92rem;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Footer de ações ─── */
.wa-card-actions {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-2);
    flex-wrap: wrap;
}
.wa-card-actions form { flex: 0 0 auto; margin: 0; }
.wa-card-actions .button-small,
.wa-card-actions a.button-small {
    padding: 6px 12px;
    font-size: 0.8rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

/* ─── Card "+ adicionar nova" ─── */
.wa-card-add {
    border-style: dashed;
    background: transparent;
}
.wa-card-add.is-editing {
    border-style: solid;
    background: var(--color-surface);
}
/* Estado "limite atingido" — visual de bloqueio com call-to-action pra /planos */
.wa-card-add--locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    min-height: 220px;
    padding: 22px 20px;
    border-style: solid;
    border-color: rgba(249,115,22,0.45);
    background: linear-gradient(135deg, rgba(249,115,22,0.10), rgba(245,158,11,0.06));
    color: #9a3f07;
    cursor: pointer;
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
[data-theme="dark"] .wa-card-add--locked {
    color: #fed7aa;
    border-color: rgba(249,115,22,0.55);
    background: linear-gradient(135deg, rgba(249,115,22,0.14), rgba(245,158,11,0.08));
}
.wa-card-add--locked:hover {
    transform: translateY(-2px);
    border-color: #f97316;
    box-shadow: 0 12px 28px -10px rgba(249,115,22,0.45);
}
.wa-card-add--locked .wa-card-add-icon {
    font-size: 2.4rem;
    filter: drop-shadow(0 2px 6px rgba(249,115,22,0.35));
}
.wa-card-add--locked strong {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}
.wa-card-add--locked small {
    font-size: 0.78rem;
    opacity: 0.85;
    text-align: center;
}
.wa-card-add-upgrade {
    margin-top: 8px;
    background: linear-gradient(135deg, #f97316, #fb923c);
    color: #fff;
    font-weight: 800;
    font-size: 0.82rem;
    padding: 8px 16px;
    border-radius: 999px;
    box-shadow: 0 6px 16px -4px rgba(249,115,22,0.55);
    letter-spacing: 0.02em;
}
.wa-card-add-trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 220px;             /* match com altura tipica de card pendente */
    padding: 20px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-text-muted);
    border-radius: inherit;
    transition: color var(--t-fast), background var(--t-fast);
}
.wa-card-add-trigger:hover {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}
/* Forca hidden mesmo com display custom acima (especificidade ganha do [hidden]
   default). Sem isso, o CSS do trigger vence e ele continua aparecendo. */
.wa-card-add-trigger[hidden] { display: none !important; }
.wa-card-add-form[hidden]    { display: none !important; }

.wa-card-add-icon {
    font-size: 2.2rem;
    line-height: 1;
}
.wa-card-add-trigger strong { font-size: 0.95rem; }
.wa-card-add-trigger small  { font-size: 0.78rem; }

.wa-card-add-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}
.wa-card-add-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}
.wa-card-add-form input {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9rem;
}
.wa-card-add-form input:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
    border-color: var(--color-primary);
}
.wa-card-add-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

.wa-dest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.wa-dest-item:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.wa-dest-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--color-primary);
}
.wa-dest-item div { display: flex; flex-direction: column; overflow: hidden; }
.wa-dest-item strong { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-dest-item span { color: var(--color-text-muted); font-size: 0.78rem; }

/* ============================================================
   Product grid
   ============================================================ */

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.product-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--t), box-shadow var(--t),
                border-color var(--t-fast);
    box-shadow: var(--shadow-sm);
}
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}
.product-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
    transition: transform var(--t);
}
.product-card:hover img { transform: scale(1.03); }
.product-card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.marketplace-badge {
    display: inline-block;
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.marketplace-mercadolivre { background: #fef3c7; color: #92400e; }
.marketplace-amazon       { background: #e0f2fe; color: #075985; }
.marketplace-shopee       { background: #ffe4e6; color: #be123c; }

.product-card h3 {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card .price {
    color: var(--color-success);
    font-weight: 800;
    font-size: 1.15rem;
    margin: 4px 0 0;
    letter-spacing: -0.01em;
}
.product-card .original-price {
    color: var(--color-text-soft);
    text-decoration: line-through;
    font-size: 0.85rem;
    margin: 0;
}

.product-card-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}
.product-card-actions form,
.product-card-actions a { flex: 1; }
.product-card-actions .button-small {
    width: 100%;
    text-align: center;
    border: 0;
    cursor: pointer;
    font-size: 0.82rem;
    padding: 8px 10px;
}

/* ============================================================
   Auth pages
   ============================================================ */

body.auth-wrapper { background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 50%, #fff 100%); }
body.auth-wrapper .container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}
body.auth-wrapper .panel {
    max-width: 440px;
    width: 100%;
    margin: 0;
    padding: 36px;
    box-shadow: var(--shadow-lg);
}
body.auth-wrapper h1 { text-align: center; margin-bottom: 8px; }
body.auth-wrapper .auth-sub { text-align: center; margin-top: 0; margin-bottom: 24px; color: var(--color-text-muted); }
body.auth-wrapper p { text-align: center; margin-top: 18px; color: var(--color-text-muted); }
body.auth-wrapper .brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}
body.auth-wrapper .brand-mark .logo {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #818cf8, #c084fc);
    color: #fff;
    font-size: 1.4rem;
    box-shadow: 0 8px 18px rgba(129, 140, 248, 0.32);
}

/* ============================================================
   Form sections (rule_form_fields macro) — agrupamento visual
   ============================================================ */

/* ── Rule sections: cartoes minimalistas tipo Linear ──
   Uma faixa vertical sutil na borda esquerda + header tipografico.
   Sem fundo cinza pesado (deixa o panel respirar). */
.rule-section {
    position: relative;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 12px;
    transition: border-color var(--t-fast);
}
.rule-section:hover { border-color: var(--color-border-strong); }
.rule-section + .rule-section { margin-top: 0; }

/* Inputs dentro de rule-section / cfg-master herdam o look de form-grid.
   O macro reaproveita inputs em forms que NAO tem class="form-grid" (e
   por isso ficavam quadrados/sem padding). Estilo o mesmo do form-grid. */
.rule-section input[type="text"],
.rule-section input[type="number"],
.rule-section input[type="email"],
.rule-section input[type="password"],
.rule-section input[type="search"],
.rule-section select,
.rule-section textarea,
.cfg-master input[type="text"],
.cfg-master input[type="number"],
.cfg-master input[type="email"],
.cfg-master input[type="password"],
.cfg-master input[type="search"],
.cfg-master select,
.cfg-master textarea {
    width: 100%;
    padding: 10px 13px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.92rem;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.rule-section input[type="text"]:focus,
.rule-section input[type="number"]:focus,
.rule-section input[type="email"]:focus,
.rule-section input[type="password"]:focus,
.rule-section input[type="search"]:focus,
.rule-section select:focus,
.rule-section textarea:focus,
.cfg-master input[type="text"]:focus,
.cfg-master input[type="number"]:focus,
.cfg-master input[type="email"]:focus,
.cfg-master input[type="password"]:focus,
.cfg-master input[type="search"]:focus,
.cfg-master select:focus,
.cfg-master textarea:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.rule-section input.input-compact,
.cfg-master input.input-compact { max-width: 160px; }
.rule-section textarea,
.cfg-master textarea {
    resize: vertical;
    min-height: 84px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85rem;
}

/* Labels dentro de rule-section / cfg-master: peso medio, espacamento */
.rule-section label:not(.switch):not(.day-chip):not(.af-dropdown-option):not(.af-tree-label),
.cfg-master label:not(.switch):not(.day-chip):not(.af-dropdown-option):not(.af-tree-label) {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
    letter-spacing: -0.005em;
}
.rule-section label .hint,
.cfg-master label .hint {
    font-weight: 400;
    margin-left: 4px;
}
.rule-section small.hint,
.cfg-master small.hint {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--color-text-soft);
}

[data-theme="dark"] .rule-section input[type="text"],
[data-theme="dark"] .rule-section input[type="number"],
[data-theme="dark"] .rule-section input[type="email"],
[data-theme="dark"] .rule-section input[type="password"],
[data-theme="dark"] .rule-section input[type="search"],
[data-theme="dark"] .rule-section select,
[data-theme="dark"] .rule-section textarea,
[data-theme="dark"] .cfg-master input[type="text"],
[data-theme="dark"] .cfg-master input[type="number"],
[data-theme="dark"] .cfg-master input[type="email"],
[data-theme="dark"] .cfg-master input[type="password"],
[data-theme="dark"] .cfg-master input[type="search"],
[data-theme="dark"] .cfg-master select,
[data-theme="dark"] .cfg-master textarea {
    background: var(--color-surface-2);
    border-color: var(--color-border);
}

.rule-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: 14px;
}
.rule-section-head .ico {
    font-size: 0.95rem;
    opacity: 0.7;
    text-transform: none;
    letter-spacing: 0;
}
.rule-section-head .hint {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-text-soft);
    text-transform: none;
    letter-spacing: 0;
}

.rule-section-sub {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}
.rule-section-sub-head {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-soft);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Chips de dia da semana — toggle visual via :has + label estilizado */
.day-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.day-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 7px 12px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    transition: background var(--t-fast), color var(--t-fast),
                border-color var(--t-fast);
    user-select: none;
}
.day-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.day-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.day-chip:has(input:checked) {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.24);
}

.day-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.day-presets .button-small {
    padding: 5px 12px;
    font-size: 0.78rem;
}

/* Inputs curtos (horas, percentuais) ficam compactos */
.input-compact {
    max-width: 140px;
}

/* ============================================================
   Cfg blocks — layout helpers para Auto-Pilot / WhatsApp config
   ============================================================ */

/* Header de pagina/secao com titulo + meta inline + acoes a direita */
.cfg-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.cfg-page-head h1 { margin: 0 0 4px; }
.cfg-page-head p  { margin: 0; max-width: 720px; }
.cfg-page-head .head-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* "Configuracao padrao" — card destacado vs cards de regra individual.
   Borda inicial mais forte na esquerda + gradient sutil indica que e o
   master template. */
.cfg-master {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    background:
        linear-gradient(180deg, var(--color-primary-soft) 0%, transparent 60%),
        var(--color-surface);
    margin-top: 4px;
}
.cfg-master::before {
    content: "";
    position: absolute;
    left: 0; top: 14px; bottom: 14px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--color-primary);
}
.cfg-master-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.cfg-master-head h2 { margin: 0; }
.cfg-master-head .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cfg-master > p {
    margin: 0 0 18px;
    font-size: 0.88rem;
    color: var(--color-text-muted);
}

/* Section toolbar — h2 + counter + actions inline (em vez de blocos
   separados com margens descontroladas) */
.cfg-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.cfg-toolbar h2 { margin: 0; }
.cfg-toolbar .toolbar-meta {
    color: var(--color-text-soft);
    font-size: 0.82rem;
    font-weight: 500;
}
.cfg-toolbar .toolbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Form actions: botao principal alinhado a direita, sem inline style */
.cfg-form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}
.cfg-form-actions.left { justify-content: flex-start; }

/* Caixa para o toggle global "Ativar piloto" — fica visivelmente destacado.
   Compoe com .switch (label.switch.cfg-master-switch). Reordena pra o
   toggle ficar a direita e o texto preencher a linha. */
.cfg-master-switch.switch,
.cfg-master-switch {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-weight: 500;
}
.cfg-master-switch .label-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.cfg-master-switch .label-text strong {
    font-size: 0.95rem;
    color: var(--color-text);
    font-weight: 600;
}
.cfg-master-switch .label-text .muted,
.cfg-master-switch .label-text span:not(:first-child) {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    font-weight: 400;
}

/* Trends box: o container ja vive em `.trends-box` original (perto do
   final do arquivo). Aqui adiciono so as regras dos descendentes novos
   (status row + pills) que sao usadas no novo layout. */
.trends-box .trend-status-row {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-size: 0.84rem;
}
.trends-box .trend-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 500;
}
.trends-box .trend-status-pill.ok      { background: var(--color-success-soft); color: var(--color-success-hover); }
.trends-box .trend-status-pill.warn    { background: var(--color-warning-soft); color: var(--color-warning); }
.trends-box .trend-status-pill.danger  { background: var(--color-danger-soft);  color: var(--color-danger-hover); }
.trends-box .trend-status-pill.info    { background: var(--color-info-soft);    color: var(--color-info); }
.trends-box .trend-status-pill.muted   { background: var(--color-surface-2);    color: var(--color-text-muted); }

/* Bloco "Acoes" do auto-pilot (rodar agora / parar) com icone, sem h3 enorme */
.cfg-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-top: 10px;
}
.cfg-action-row + .cfg-action-row { margin-top: 8px; }
.cfg-action-row.danger { border-color: #fecaca; background: #fef2f2; }
[data-theme="dark"] .cfg-action-row.danger { background: #2a1414; border-color: #5b1f1f; }
.cfg-action-row .info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.cfg-action-row .info strong {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text);
}
.cfg-action-row.danger .info strong { color: var(--color-danger-hover); }
.cfg-action-row .info span {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}
.cfg-action-row > form,
.cfg-action-row > .button-row {
    margin: 0;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .cfg-action-row {
        flex-direction: column;
        align-items: stretch;
    }
    .cfg-action-row > form,
    .cfg-action-row > .button-row { width: 100%; }
    .cfg-action-row > form > button { width: 100%; }
}

/* Status pill geral (verde "Pronto", amarelo "Falta", neutra) — usada
   acima do master da config padrao tambem */
.cfg-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cfg-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.cfg-pill.ok    { background: var(--color-success-soft); color: var(--color-success-hover); }
.cfg-pill.warn  { background: var(--color-warning-soft); color: var(--color-warning); }
.cfg-pill.muted { background: var(--color-surface-2);    color: var(--color-text-muted); }

[data-theme="dark"] .cfg-master {
    background:
        linear-gradient(180deg, rgba(99, 102, 241, 0.08) 0%, transparent 60%),
        var(--color-surface);
}
[data-theme="dark"] .cfg-master-switch,
[data-theme="dark"] .cfg-action-row,
[data-theme="dark"] .trends-box {
    background: var(--color-surface-2);
}

/* ============================================================
   Marketplace priority bar — stacked horizontal com drag handles
   v2 (2026-05-22): cores sóbrias alinhadas ao dark theme, hierarquia
   tipográfica clara, presets uniformes, hint final inequívoca.
   ============================================================ */

.mk-priority {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background:
        radial-gradient(circle at top left, rgba(99,102,241,.06), transparent 50%),
        var(--color-surface);
    position: relative;
}
.mk-priority::before {
    content: ""; position: absolute;
    inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg, #facc15 0%, #f97316 50%, #ef4444 100%);
    opacity: .55;
    border-radius: 12px 12px 0 0;
}

.mk-priority-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.mk-priority-head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-text);
    text-transform: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mk-priority-head h3::before {
    content: "⚖️"; font-size: 1rem;
}
.mk-priority-head .hint {
    font-size: 0.8rem;
    color: var(--color-text-soft);
    font-style: italic;
}

.mk-priority-bar {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    background: var(--color-surface-2);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.25),
        0 1px 0 rgba(255,255,255,0.04);
    border: 1px solid rgba(0,0,0,0.2);
    --w-ml: 33;
    --w-az: 33;
    --w-sh: 34;
}

.mk-priority-section {
    flex-grow: var(--mk-w, 1);
    flex-shrink: 1;
    flex-basis: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.18s ease;
    pointer-events: none;
    position: relative;
}
/* Cores oficiais dos marketplaces mas com saturação reduzida + overlay
   escuro sutil pra dialogar com o dark theme. */
.mk-section-ml {
    background: linear-gradient(180deg, #f5c000 0%, #e3a800 100%);
    color: #1a1a1a;
    --mk-w: var(--w-ml);
}
.mk-section-az {
    background: linear-gradient(180deg, #f08800 0%, #d97706 100%);
    color: #fff;
    --mk-w: var(--w-az);
}
.mk-section-sh {
    background: linear-gradient(180deg, #e63e1a 0%, #c12d10 100%);
    color: #fff;
    --mk-w: var(--w-sh);
}
/* Sombra interna sutil pra atenuar aspecto neon — via box-shadow,
   NÃO via ::after pra não interferir no hit-test dos handles. */
.mk-priority-section {
    box-shadow:
        inset 0 8px 12px -8px rgba(255, 255, 255, 0.18),
        inset 0 -8px 12px -8px rgba(0, 0, 0, 0.18);
}

.mk-section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1;
    position: relative;
    z-index: 1;
}
.mk-section-name {
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 0 rgba(0,0,0,0.10);
}
.mk-section-pct {
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Seção apertada (<14% width): some o nome, mantém só o % */
.mk-priority-section[data-narrow] .mk-section-name { display: none; }
.mk-priority-section[data-narrow] .mk-section-label { padding: 0 4px; }

/* Handles entre seções.
   Hit-area expandida via ::before invisível 24px wide (12px pra cada lado
   do handle width-zero) — sem isso, com width: 0, browsers tinham hit-test
   inconsistente em cima do grip que tem position:absolute. */
.mk-priority-handle {
    flex: 0 0 0;
    width: 0;
    position: relative;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: ew-resize;
    align-self: stretch;
    z-index: 3;
    overflow: visible;
    pointer-events: auto;
}
.mk-priority-handle::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -12px; right: -12px;
    cursor: ew-resize;
}
.mk-handle-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 36px;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, #fafafa 0%, #e5e5e5 100%);
    border: 1px solid rgba(15, 23, 42, 0.25);
    border-radius: 4px;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.32),
        0 1px 2px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    pointer-events: none;  /* visual only — clicks vão pro ::before do handle */
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
/* Grip lines verticais (3 traços) — visual de handle profissional */
.mk-handle-grip::before,
.mk-handle-grip::after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    width: 1.5px;
    background: rgba(15, 23, 42, 0.55);
    border-radius: 2px;
}
.mk-handle-grip::before { left: 5px; }
.mk-handle-grip::after  { right: 5px; }

.mk-priority-handle:hover .mk-handle-grip,
.mk-priority-handle:focus-visible .mk-handle-grip {
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.42),
        0 2px 4px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.mk-priority-handle.dragging .mk-handle-grip {
    transform: translate(-50%, -50%) scale(1.16);
    background: linear-gradient(180deg, #818cf8 0%, #6366f1 100%);
    border-color: #4f46e5;
    box-shadow:
        0 8px 24px rgba(99, 102, 241, 0.55),
        0 2px 6px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.mk-priority-handle.dragging .mk-handle-grip::before,
.mk-priority-handle.dragging .mk-handle-grip::after {
    background: rgba(255, 255, 255, 0.95);
}

/* Pílulas dos % — uniformes entre as 3 seções */
.mk-section-pct-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: rgba(15, 23, 42, 0.65);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    text-shadow: none;
}
.mk-section-sh .mk-section-pct-pill {
    background: rgba(15, 23, 42, 0.65);
    color: #fff;
}

/* ─── Footer: presets + hint ───────────────────────────────── */
.mk-priority-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.mk-priority-presets {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.mk-priority-presets--solo {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.mk-priority-presets--solo .mk-preset-btn {
    min-height: 38px;
    padding: 8px 10px;
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary-soft) 72%, var(--color-surface));
    color: var(--color-primary);
    font-weight: 750;
}
.mk-priority-presets .preset-label {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 6px;
}
.mk-preset-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    white-space: nowrap;
    line-height: 1.2;
}
.mk-preset-btn:hover {
    border-color: rgba(99, 102, 241, 0.55);
    background: rgba(99, 102, 241, 0.10);
    color: var(--color-text);
    transform: translateY(-1px);
}
.mk-preset-btn:active {
    transform: translateY(0);
}
.mk-priority-foot > .hint {
    font-size: 0.76rem;
    color: var(--color-text-soft);
    margin: 0;
    font-style: italic;
}

/* Dark theme refinements (já é o tema padrão na maioria das telas) */
[data-theme="dark"] .mk-priority {
    background:
        radial-gradient(circle at top left, rgba(99,102,241,.08), transparent 55%),
        var(--color-surface);
}
[data-theme="dark"] .mk-priority-bar {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(0,0,0,0.5);
}

/* ─── Mobile ───────────────────────────────────────────────── */
@media (max-width: 720px) {
    .mk-priority { padding: 14px 14px; }
    .mk-priority-head h3 { font-size: 0.88rem; }
    .mk-priority-head .hint { display: none; }  /* economiza espaço, hint principal vai no foot */
    .mk-priority-bar { height: 50px; }
    .mk-section-pct-pill { font-size: 0.70rem; padding: 2px 7px; }
    .mk-priority-presets .preset-label { display: none; }
    .mk-preset-btn { padding: 5px 10px; font-size: 0.76rem; }
}
@media (max-width: 480px) {
    .mk-section-name { display: none; }  /* só % na barra */
    .mk-priority-bar { height: 46px; }
    .mk-priority-presets--solo { gap: 6px; }
    .mk-priority-presets--solo .mk-preset-btn { min-height: 40px; padding-inline: 5px; font-size: .7rem; }
}

/* Linhas de form com proporções específicas */
.form-row.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-row.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-row.cols-money {
    grid-template-columns: 2fr 2fr 1fr 1fr 1fr;
}

@media (max-width: 860px) {
    .form-row.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .form-row.cols-3, .form-row.cols-money { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .form-row.cols-3, .form-row.cols-4, .form-row.cols-money { grid-template-columns: 1fr; }
}

/* ============================================================
   Search hero (página /search)
   ============================================================ */

.search-form { display: flex; flex-direction: column; gap: 18px; }

.search-hero {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 24px;
    background: linear-gradient(135deg, var(--color-primary-soft) 0%,
                                #f5f3ff 60%, #fdf4ff 100%);
    border: 1px solid #c7d2fe;
    border-radius: var(--radius-lg);
}
.search-hero-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #4338ca;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.search-hero-input {
    width: 100%;
    padding: 14px 18px !important;
    border-radius: var(--radius) !important;
    border: 1px solid var(--color-border-strong) !important;
    background: #fff !important;
    font-size: 1.05rem !important;
    font-weight: 500;
    color: var(--color-text);
    box-sizing: border-box;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.search-hero-input::placeholder { color: var(--color-text-soft); font-weight: 400; }
.search-hero-input:focus {
    outline: 0;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.18) !important;
}

.search-submit { margin-top: 4px; }
.search-btn { font-size: 1rem; }

/* ============================================================
   Modal (overlay + box) — usado para edição por grupo etc
   ============================================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    /* Acima do menu inferior do app (9500), do botao de suporte (9550) e da
       gaveta "Mais" (9600) — ver app-bottom-nav.css. Com o antigo 100, um
       modal de tela cheia ficava POR BAIXO da barra do aplicativo e o botao
       de suporte cobria os botoes dele. */
    z-index: 9700;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
    animation: modalFadeIn 160ms ease-out;
}
.modal-overlay.open { display: flex; }

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 760px;
    margin: auto;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 80px);
    animation: modalSlideIn 220ms cubic-bezier(.2, .9, .3, 1.1);
    overflow: hidden;
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-12px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal > form { display: flex; flex-direction: column; min-height: 0; flex: 1; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.modal-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.modal-close {
    background: transparent;
    border: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    transition: background var(--t-fast), color var(--t-fast);
    line-height: 1;
}
.modal-close:hover { background: var(--color-surface-2); color: var(--color-text); }

.modal-body {
    padding: 22px 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.modal-footer {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 14px 24px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.modal-footer > .button-danger { margin-right: auto; }

/* Lista de "grupos selecionados" — cards horizontais minimalistas */
.dest-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 8px;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.dest-row:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.dest-row.has-custom {
    border-color: var(--color-primary);
    background: linear-gradient(90deg, var(--color-primary-soft) 0%, var(--color-surface) 28%);
}
.dest-row > .info { flex: 1; min-width: 0; }
.dest-row > .info strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dest-row > .info .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: var(--color-text-muted);
    font-size: 0.78rem;
}
.dest-row > .info .meta > span:not(.badge-status) {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
}
.dest-row .actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ============================================================
   Dashboard analítico — KPIs, channel strip, charts, heatmap
   ============================================================ */

.dash-hero-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.dash-range {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    padding: 3px;
    gap: 2px;
}
.dash-range-btn {
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
}
.dash-range-btn:hover { color: var(--color-text); text-decoration: none; }
.dash-range-btn.active {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.28);
}

/* ─── KPI grid (4 cards) ─── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}
@media (max-width: 860px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kpi-grid { grid-template-columns: 1fr; } }

.kpi-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    transition: transform var(--t-fast), box-shadow var(--t-fast),
                border-color var(--t-fast);
    position: relative;
    overflow: hidden;
}
a.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.kpi-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
}
.kpi-sent::before    { background: linear-gradient(180deg, #10b981, #059669); }
.kpi-rate::before    { background: linear-gradient(180deg, #6366f1, #4f46e5); }
.kpi-pending::before { background: linear-gradient(180deg, #f59e0b, #d97706); }
.kpi-failed::before  { background: linear-gradient(180deg, #ef4444, #dc2626); }

.kpi-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.kpi-sent    .kpi-icon { background: #d1fae5; }
.kpi-rate    .kpi-icon { background: #e0e7ff; }
.kpi-pending .kpi-icon { background: #fef3c7; }
.kpi-failed  .kpi-icon { background: #fee2e2; }

.kpi-value {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--color-text);
}
.kpi-value small { font-size: 0.95rem; font-weight: 700; color: var(--color-text-muted); margin-left: 2px; }
.kpi-sent    .kpi-value { color: #047857; }
.kpi-rate    .kpi-value { color: #4338ca; }
.kpi-pending .kpi-value { color: #b45309; }
.kpi-failed  .kpi-value { color: #b91c1c; }

.kpi-label {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

/* ─── Section head com título + hint à direita ─── */
.dash-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.dash-section-head h2 { margin: 0; }
.dash-section-head .muted { font-size: 0.82rem; }

/* ─── Channel strip (4 canais) ─── */
.ch-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}
@media (max-width: 720px) { .ch-strip { grid-template-columns: 1fr; } }

.ch-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    gap: 4px 12px;
    align-items: center;
}
.ch-card .ch-icon {
    grid-row: 1 / 3;
    width: 40px; height: 40px;
    border-radius: var(--radius);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    color: #fff;
}
.ch-telegram .ch-icon  { background: #0088cc; }
.ch-whatsapp .ch-icon  { background: #25d366; }
.ch-youtube .ch-icon   { background: #ff0000; }

.ch-stats { display: flex; flex-direction: column; gap: 2px; }
.ch-value {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}
.ch-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ch-bar {
    grid-column: 1 / -1;
    height: 4px;
    background: var(--color-surface-2);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 6px;
}
.ch-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 600ms ease-out;
}
.ch-telegram .ch-bar-fill  { background: #0088cc; }
.ch-whatsapp .ch-bar-fill  { background: #25d366; }
.ch-youtube .ch-bar-fill   { background: #ff0000; }

.ch-soon { opacity: 0.7; }
.ch-soon .ch-value { color: var(--color-text-soft); }
.ch-soon-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    background: var(--color-warning-soft);
    color: #92400e;
    border-radius: var(--radius-full);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ─── Grid 2 colunas pra paineis lado a lado ─── */
.dash-grid-2 {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 18px;
}
@media (max-width: 960px) { .dash-grid-2 { grid-template-columns: 1fr; } }

/* ─── Chart wrappers ─── */
.chart-wrap {
    position: relative;
    height: 260px;
    margin-top: 12px;
}
.chart-donut { height: 220px; }

/* legenda do donut */
.legend-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}
.legend-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    text-transform: capitalize;
}
.legend-list li strong { font-weight: 600; flex: 1; }
.legend-dot {
    width: 12px; height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}
.mk-mercadolivre { background: #fbbf24; }
.mk-amazon       { background: #0ea5e9; }
.mk-shopee       { background: #f97316; }
.mk-desconhecido { background: #94a3b8; }

/* ─── Top categorias (barras horizontais) ─── */
.topcat-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.topcat-row {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) 3fr auto;
    gap: 12px;
    align-items: center;
}
.topcat-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topcat-bar {
    height: 22px;
    background: var(--color-surface-2);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.topcat-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #818cf8, #a78bfa);
    border-radius: var(--radius-sm);
    transition: width 600ms ease-out;
}
.topcat-count {
    font-weight: 700;
    color: var(--color-text);
    font-size: 0.92rem;
    min-width: 32px;
    text-align: right;
}

/* ─── Heatmap ─── */
.heatmap {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.heatmap-hours {
    display: grid;
    grid-template-columns: 36px repeat(24, 1fr);
    gap: 3px;
    margin-bottom: 4px;
}
.heatmap-hour-label {
    font-size: 0.66rem;
    color: var(--color-text-soft);
    text-align: center;
}
.heatmap-row {
    display: grid;
    grid-template-columns: 36px repeat(24, 1fr);
    gap: 3px;
}
.heatmap-day {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    align-self: center;
}
.heatmap-cell {
    aspect-ratio: 1;
    border-radius: 3px;
    background: hsl(238, 70%, calc(96% - var(--ratio, 0) * 50%));
    transition: transform 120ms ease;
    min-height: 14px;
    cursor: default;
}
.heatmap-cell:hover { transform: scale(1.4); z-index: 2; box-shadow: 0 2px 8px rgba(15,23,42,0.18); }

.heatmap-legend {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    font-size: 0.74rem;
}
.heatmap-legend .heatmap-cell { width: 14px; height: 14px; min-height: 14px; cursor: default; }
.heatmap-legend .heatmap-cell:hover { transform: none; box-shadow: none; }

/* ============================================================
   Dashboard — hero, stats, integrações, quick actions, empty
   ============================================================ */

.dash-hero {
    background: linear-gradient(135deg, #fdfcff 0%, #f5f3ff 50%, #fef3f8 100%);
    border-color: #e0e7ff;
}
.dash-hero h1 {
    font-size: 1.6rem;
    margin-bottom: 4px;
}
.dash-hero p {
    margin-bottom: 18px;
    color: var(--color-text-muted);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}
@media (max-width: 720px) {
    .stat-grid { grid-template-columns: 1fr; }
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    transition: transform var(--t-fast), box-shadow var(--t-fast),
                border-color var(--t-fast);
    position: relative;
    overflow: hidden;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    text-decoration: none;
}
.stat-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
}
.stat-pending::before { background: linear-gradient(180deg, #f59e0b, #d97706); }
.stat-sent::before    { background: linear-gradient(180deg, #10b981, #059669); }
.stat-failed::before  { background: linear-gradient(180deg, #ef4444, #dc2626); }
.stat-pending:hover { border-color: #fcd34d; }
.stat-sent:hover    { border-color: #6ee7b7; }
.stat-failed:hover  { border-color: #fca5a5; }

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.stat-pending .stat-icon { background: #fef3c7; }
.stat-sent .stat-icon    { background: #d1fae5; }
.stat-failed .stat-icon  { background: #fee2e2; }

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-text);
}
.stat-pending .stat-value { color: #b45309; }
.stat-sent    .stat-value { color: #047857; }
.stat-failed  .stat-value { color: #b91c1c; }

.stat-label {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

/* ─── Pilot card ─── */
.dash-pilot {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.dash-pilot-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #818cf8, #a78bfa);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 6px 14px rgba(129, 140, 248, 0.32);
}
.dash-pilot-body {
    flex: 1;
    min-width: 240px;
}
.dash-pilot-body > strong {
    display: block;
    font-size: 1.02rem;
    color: var(--color-text);
}
.dash-pilot-body > span {
    display: block;
    font-size: 0.86rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}
.dash-pilot-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.dash-pilot-meta {
    margin-top: 6px;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}
.dash-pilot-meta code { font-size: 0.78rem; }

.dash-pilot-active {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    border-color: #86efac;
}
.dash-pilot-active .dash-pilot-icon {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 6px 14px rgba(16, 185, 129, 0.32);
}
.dash-pilot-pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: apPulse 2s infinite;
    flex-shrink: 0;
}

.dash-pilot-cta { background: linear-gradient(135deg, #faf5ff, #f5f3ff); border-color: #c7d2fe; }

/* ─── Integration pills ─── */
.integ-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.integ-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    transition: transform var(--t-fast), box-shadow var(--t-fast),
                border-color var(--t-fast);
}
.integ-pill:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    border-color: var(--color-border-strong);
}
.integ-pill .integ-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.integ-pill .integ-text strong { font-size: 0.92rem; }
.integ-pill .integ-text span { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 2px; }
.integ-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--color-text-soft);
}
.integ-ok      { background: #f0fdf4; border-color: #6ee7b7; }
.integ-ok      .integ-dot { background: #10b981; box-shadow: 0 0 0 3px #d1fae5; }
.integ-warn    { background: #fffbeb; border-color: #fcd34d; }
.integ-warn    .integ-dot { background: #d97706; box-shadow: 0 0 0 3px #fef3c7; }
.integ-info    { background: #eff6ff; border-color: #93c5fd; }
.integ-info    .integ-dot { background: #2563eb; box-shadow: 0 0 0 3px #dbeafe; }
.integ-neutral { background: var(--color-surface-2); }
.integ-neutral .integ-dot { background: var(--color-text-soft); }

/* ─── Quick actions grid ─── */
.dash-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.dash-quick {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    transition: transform var(--t-fast), box-shadow var(--t-fast),
                border-color var(--t-fast);
}
.dash-quick:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--color-primary);
    text-decoration: none;
}
.dash-quick-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--color-primary-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: background var(--t-fast);
}
.dash-quick:hover .dash-quick-icon { background: var(--color-primary); }
.dash-quick > div { display: flex; flex-direction: column; }
.dash-quick strong { font-size: 0.95rem; color: var(--color-text); }
.dash-quick span { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 2px; }

/* ─── Pílula de categoria na tabela ─── */
.cat-pill {
    display: inline-block;
    padding: 2px 10px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 600;
}

/* ─── Empty state ─── */
.dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 24px;
    color: var(--color-text-muted);
}
.dash-empty-icon {
    font-size: 2.4rem;
    margin-bottom: 8px;
}
.dash-empty strong {
    display: block;
    font-size: 1rem;
    color: var(--color-text);
    margin-bottom: 4px;
}

/* ============================================================
   YouTube AutoPoster — header, tabs, jobs, accounts, quota
   ============================================================ */

.yt-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    background: linear-gradient(135deg, #fff5f5 0%, #fff 60%);
    border-color: #fecaca;
}
@media (max-width: 720px) { .yt-head { grid-template-columns: 1fr; } }

.yt-head-icon {
    width: 64px; height: 64px;
    border-radius: var(--radius-xl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: #ff0000;
    color: #fff;
    box-shadow: 0 8px 22px rgba(255, 0, 0, 0.32);
}
.yt-head-text h1 { margin: 0 0 4px; }
.yt-head-text p { margin: 0; font-size: 0.92rem; }

.yt-env-warn {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    background: var(--color-warning-soft);
    border: 1px solid #fcd34d;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: #854d0e;
}
.yt-env-warn strong { font-size: 0.85rem; }
.yt-env-warn a {
    margin-top: 4px;
    font-weight: 700;
    color: #b45309;
}

/* Tabs do YouTube — barra horizontal scrollable */
.yt-tabs-wrap { padding: 8px; background: var(--color-surface-2); border: 1px solid var(--color-border); }
.yt-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.yt-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
}
.yt-tab:hover { background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.yt-tab.active {
    background: #ff0000;
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.28);
}
.yt-tab .ico { font-size: 1.05rem; }

/* Quota da API — barra de progresso */
.yt-quota { display: flex; flex-direction: column; gap: 8px; }
.yt-quota-bar {
    height: 12px;
    background: var(--color-surface-2);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.yt-quota-fill {
    height: 100%;
    background: var(--color-success);
    border-radius: 999px;
    transition: width 600ms ease-out;
}
.yt-quota-meta {
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* Jobs na fila — cards com progress */
.yt-jobs { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.yt-job {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-text-soft);
    border-radius: var(--radius);
    padding: 14px 18px;
    transition: box-shadow var(--t-fast);
}
.yt-job:hover { box-shadow: var(--shadow-sm); }
.yt-job-pending     { border-left-color: var(--color-text-soft); }
.yt-job-downloading { border-left-color: #0ea5e9; }
.yt-job-converting  { border-left-color: #f59e0b; }
.yt-job-uploading   { border-left-color: #ff0000; }

.yt-job-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.yt-job-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.yt-job-title strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
}
.yt-job-icon { font-size: 1.1rem; }
.yt-job-url {
    font-size: 0.78rem;
    color: var(--color-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 8px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.yt-job-progress { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.yt-job-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--color-surface-2);
    border-radius: 999px;
    overflow: hidden;
}
.yt-job-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff0000, #f97316);
    border-radius: 999px;
    transition: width 400ms ease-out;
}
.yt-job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}
.yt-job-actions {
    margin-top: 10px;
    display: flex;
    gap: 6px;
}

/* Accounts — cards */
.yt-accounts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.yt-account-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.yt-account-card.is-default {
    border-color: #ff0000;
    box-shadow: 0 0 0 1px #ff0000, 0 4px 12px rgba(255, 0, 0, 0.16);
}
.yt-account-head { display: flex; gap: 12px; align-items: center; }
.yt-account-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--color-surface-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    font-size: 1.4rem;
}
.yt-account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.yt-account-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.yt-account-info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
}
.yt-account-info .muted {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
}
.yt-account-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.active-filter { background: var(--color-primary-soft) !important; }

/* ============================================================
   Channel pages (/channel/<x>/<action>) — header + tabs + dispatch
   ============================================================ */

.channel-page-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--ch-color, var(--color-primary)) 8%, white),
        white);
    border-color: color-mix(in srgb, var(--ch-color, var(--color-primary)) 30%, var(--color-border));
}
@media (max-width: 720px) {
    .channel-page-head { grid-template-columns: 1fr; text-align: center; }
}

.channel-page-icon {
    width: 64px; height: 64px;
    border-radius: var(--radius-xl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: var(--ch-color, var(--color-primary));
    color: #fff;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--ch-color, var(--color-primary)) 30%, transparent);
}
.channel-page-text h1 { margin: 0 0 4px; }
.channel-page-text p { margin: 0; font-size: 0.92rem; }

.channel-page-tabs {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 4px;
    gap: 2px;
}
.channel-tab {
    padding: 7px 16px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
    white-space: nowrap;
}
.channel-tab:hover { color: var(--color-text); text-decoration: none; }
.channel-tab.active {
    background: var(--ch-color, var(--color-primary));
    color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ch-color, var(--color-primary)) 30%, transparent);
}

/* "Em breve" card de canal */
.ch-soon-card {
    text-align: center;
    padding: 40px 24px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--ch-color, var(--color-primary)) 5%, white),
        white);
    border: 1px dashed color-mix(in srgb, var(--ch-color, var(--color-primary)) 35%, var(--color-border));
    border-radius: var(--radius-lg);
}
.ch-soon-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    display: inline-block;
    width: 80px; height: 80px;
    line-height: 80px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ch-color, var(--color-primary)) 12%, white);
}
.ch-soon-card h2 { margin-bottom: 8px; }
.ch-soon-card p {
    max-width: 540px;
    margin: 0 auto 8px;
}

/* Lista de destinos no disparo (pílulas) */
.ch-dest-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding: 12px;
    background: var(--color-surface-2);
    border-radius: var(--radius);
    max-height: 200px;
    overflow-y: auto;
}
.ch-dest-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    color: var(--color-text);
}
.ch-dest-pill.group   { border-color: #6ee7b7; background: #ecfdf5; color: #065f46; }
.ch-dest-pill.contact { border-color: #c7d2fe; background: #eef2ff; color: #3730a3; }

/* ============================================================
   Auto-Pilot — chips de seleção + previews em formato mensagem
   ============================================================ */

/* Chips compactos pra ativar/desativar templates */
.tpl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.tpl-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 10px;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    transition: all var(--t-fast);
    user-select: none;
}
.tpl-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.tpl-chip input[type="checkbox"] {
    position: absolute;
    width: 0; height: 0;
    opacity: 0;
    pointer-events: none;
}
.tpl-chip-tick {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--color-border-strong);
    background: #fff;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    transition: all var(--t-fast);
    flex-shrink: 0;
}
.tpl-chip.selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.28);
}
.tpl-chip.selected .tpl-chip-tick {
    background: #fff;
    border-color: #fff;
    color: var(--color-primary);
}

/* Toolbar de ações */
.tpl-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 10px 12px;
    background: var(--color-surface-2);
    border-radius: var(--radius);
}
.tpl-counter {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text-muted);
    padding: 4px 12px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    transition: all var(--t-fast);
}
.tpl-counter.has-selection {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Header da seção de previews */
.tpl-previews-head {
    margin: 24px 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.tpl-previews-head h3 { font-size: 0.95rem; }

/* Grid lado-a-lado dos previews */
.tpl-previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
    margin-top: 14px;
}

.tpl-previews-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 24px;
    color: var(--color-text-muted);
    background: var(--color-surface-2);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius);
}
.tpl-previews-empty .empty-icon { font-size: 2.4rem; margin-bottom: 8px; }
.tpl-previews-empty strong {
    display: block;
    color: var(--color-text);
    margin-bottom: 4px;
}

/* ─── Mensagem — bolha estilo chat ─── */
.tpl-msg { display: flex; }
.tpl-msg[hidden] { display: none; }

.tpl-msg-bubble {
    width: 100%;
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08),
                0 1px 2px rgba(15, 23, 42, 0.06);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
}

/* Imagem placeholder do produto — gradient + emoji centralizado */
.tpl-msg-img {
    aspect-ratio: 4 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.92);
    position: relative;
    overflow: hidden;
}
.tpl-msg-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
}
.tpl-msg-img-emoji { font-size: 4.2rem; line-height: 1; }
.tpl-msg-img-tag {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 3px 10px;
    border-radius: 999px;
}

/* 5 tons de gradient pra dar variedade visual entre cards */
.tpl-msg-img[data-tone="0"] { background: linear-gradient(135deg, #6366f1, #a855f7); }
.tpl-msg-img[data-tone="1"] { background: linear-gradient(135deg, #f97316, #ef4444); }
.tpl-msg-img[data-tone="2"] { background: linear-gradient(135deg, #10b981, #14b8a6); }
.tpl-msg-img[data-tone="3"] { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.tpl-msg-img[data-tone="4"] { background: linear-gradient(135deg, #ec4899, #f97316); }

/* Texto da mensagem (renderizado pelo template) */
.tpl-msg-text {
    margin: 0;
    padding: 16px 18px 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 0.9rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--color-text);
    flex: 1;
}

/* Footer estilo chat — nome do template + horário fake */
.tpl-msg-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 18px 14px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-2);
}
.tpl-msg-author {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-primary);
}
.tpl-msg-time {
    font-size: 0.74rem;
    color: var(--color-text-soft);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ============================================================
   Auto-Pilot página — status bar + steps de "como funciona"
   ============================================================ */

/* ── Status pill: linha slim "● Ativo · Última: ... · Próxima: ..." ── */
.ap-status-bar {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    margin-top: 14px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    font-size: 0.84rem;
    line-height: 1.3;
    max-width: 100%;
}
.ap-status-bar .ap-status-content {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.ap-status-bar strong {
    color: var(--color-text);
    font-weight: 600;
    font-size: 0.84rem;
}
.ap-status-bar span {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}
.ap-status-bar code {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    padding: 1px 6px;
    font-size: 0.78rem;
}

/* Pulso verde indicando "rodando agora" */
.ap-status-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
    animation: apPulse 2s infinite;
    flex-shrink: 0;
}
@keyframes apPulse {
    0%   { box-shadow: 0 0 0 0   rgba(16, 185, 129, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0   rgba(16, 185, 129, 0); }
}

/* Empty-state cue: "👇 Escolha um canal" */
.ap-hint {
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-align: center;
}

/* Numbered "Como funciona" steps — modern & compact */
.ap-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 4px;
}
.ap-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ap-step:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}
.ap-step-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ap-step-body { flex: 1; min-width: 0; }
.ap-step-body strong {
    display: block;
    font-size: 0.9rem;
    color: var(--color-text);
    font-weight: 600;
    margin-bottom: 2px;
}
.ap-step-body span {
    display: block;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* ============================================================
   Channel picker (Auto-Pilot wizard step 1)
   ============================================================ */

.channel-picker {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
}

/* Wrapper agrupa card + painel pra animar como um bloco só */
.channel-block {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--t), box-shadow var(--t);
}
.channel-block:hover { box-shadow: var(--shadow); }
.channel-block.open {
    border-color: transparent;
    box-shadow: var(--shadow-md);
}
.channel-block.whatsapp.open  { box-shadow: 0 12px 32px rgba(37, 211, 102, 0.18); }
.channel-block.youtube.open   { box-shadow: 0 12px 32px rgba(255, 0, 0, 0.18); }

.channel-card {
    width: 100%;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--color-text);
    transition: background var(--t-fast);
}
.channel-card:hover { background: var(--color-surface-2); }
.channel-card:focus-visible {
    outline: 0;
    background: var(--color-surface-2);
    box-shadow: inset 0 0 0 2px var(--color-primary);
}

.channel-logo {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    transition: transform var(--t);
}
.channel-logo svg { width: 24px; height: 24px; }

.channel-card.whatsapp .channel-logo {
    background: #25d366;
    box-shadow: 0 6px 14px rgba(37, 211, 102, 0.32),
                inset 0 -2px 0 rgba(0,0,0,0.08);
}
.channel-card.youtube .channel-logo {
    background: #ff0000;
    box-shadow: 0 6px 14px rgba(255, 0, 0, 0.32),
                inset 0 -2px 0 rgba(0,0,0,0.12);
}
.channel-card:hover .channel-logo { transform: scale(1.04); }

.channel-name {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.channel-sub {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.channel-caret {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: transform var(--t), background var(--t-fast),
                color var(--t-fast);
}
.channel-card:hover .channel-caret {
    background: var(--color-border);
    color: var(--color-text);
}
.channel-block.open .channel-caret {
    transform: rotate(180deg);
    background: var(--color-text);
    color: #fff;
}

.channel-soon-badge {
    display: inline-block;
    padding: 3px 9px;
    background: var(--color-warning-soft);
    color: #92400e;
    border: 1px solid #fcd34d;
    border-radius: var(--radius-full);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.4;
}

/* Painel que abre embaixo do card, dentro do mesmo block */
.channel-panel {
    border-top: 1px solid var(--color-border);
    padding: 18px 22px 20px;
    display: none;
    gap: 12px;
    flex-wrap: wrap;
    background: linear-gradient(180deg, var(--color-surface-2) 0%, #fff 60%);
    animation: chPanelIn 220ms ease-out;
}
.channel-block.open .channel-panel { display: flex; }

.channel-block.whatsapp.open .channel-panel {
    background: linear-gradient(180deg, rgba(37, 211, 102, 0.08) 0%, #fff 70%);
}
.channel-block.youtube.open .channel-panel {
    background: linear-gradient(180deg, rgba(255, 0, 0, 0.06) 0%, #fff 70%);
}

@keyframes chPanelIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.dest-btn {
    flex: 1 1 160px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    cursor: pointer;
    font-family: inherit;
    color: var(--color-text);
    transition: border-color var(--t-fast), transform var(--t-fast),
                box-shadow var(--t-fast);
    text-align: left;
    box-shadow: var(--shadow-sm);
}
.dest-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}
.channel-block.whatsapp .dest-btn:hover  { border-color: #25d366; }

.dest-btn .icon {
    font-size: 1.4rem;
    line-height: 1;
    margin-bottom: 4px;
}
.dest-btn > span:nth-of-type(2) {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--color-text);
}
.dest-btn .sub {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.channel-soon {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--color-surface);
    border: 1px dashed #cbd5e1;
    border-radius: var(--radius);
    color: var(--color-text-muted);
    font-size: 0.92rem;
    font-weight: 500;
}

@media (max-width: 720px) {
    .channel-card { grid-template-columns: 44px 1fr auto; gap: 14px; padding: 14px 16px; }
    .channel-logo { width: 44px; height: 44px; border-radius: var(--radius); }
    .channel-logo svg { width: 24px; height: 24px; }
    .channel-name { font-size: 1.05rem; }
    .channel-panel { padding: 14px 16px 16px; }
    .dest-btn { padding: 12px 14px; }
}

/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 960px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: var(--sidebar-w);
        transform: translateX(-100%);
        transition: transform var(--t);
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 35;
        animation: fadeIn 160ms ease-out;
    }
    .topbar .mobile-toggle { display: inline-flex; }
    .container { padding: 18px; }
    .panel { padding: 22px; border-radius: var(--radius); }
    .grid-3 { grid-template-columns: 1fr; }
    h1 { font-size: 1.35rem; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
    .form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   Responsivo final — pacote consolidado p/ todas as larguras
   ============================================================ */

/* Sanity: nada estoura horizontalmente */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, canvas, svg { max-width: 100%; height: auto; }

/* Tablet portrait — refina padding e KPI grid */
@media (max-width: 720px) {
    .panel { padding: 18px; border-radius: var(--radius-lg); }
    .panel + .panel { margin-top: 14px; }
    .topbar { padding: 10px 14px; gap: 10px; }
    .page-title { font-size: 0.92rem; }
    .topbar-toggle { width: 36px; height: 36px; }
    .dash-hero-head { gap: 10px; }
    .dash-range-btn { padding: 6px 12px; }
    .stat-grid, .kpi-grid { gap: 10px; }
    .integ-pill, .dash-quick { padding: 12px; }
    .ch-strip { gap: 10px; }
    .tpl-previews { grid-template-columns: 1fr; gap: 14px; }
}

/* Mobile padrão (~iPhone) — compacta tudo, mantém legível */
@media (max-width: 480px) {
    body { font-size: 14px; }
    .panel { padding: 16px; border-radius: var(--radius); }
    .panel + .panel { margin-top: 12px; }
    .container { padding: 12px; }

    .topbar { padding: 8px 12px; gap: 8px; }
    .topbar-toggle { width: 34px; height: 34px; }
    .page-title { font-size: 0.88rem; }
    .page-title small { font-size: 0.72rem; }

    /* Sidebar drawer mais estreita pra caber em 320px */
    :root { --sidebar-w: 240px; }

    /* KPIs / cards: compactar paddings e fontes */
    .kpi-card { padding: 12px; gap: 10px; }
    .kpi-icon { width: 38px; height: 38px; font-size: 1.15rem; }
    .kpi-value { font-size: 1.4rem; }
    .kpi-label { font-size: 0.7rem; }
    .stat-card { padding: 14px; gap: 10px; }
    .stat-icon { width: 40px; height: 40px; font-size: 1.2rem; }
    .stat-value { font-size: 1.6rem; }

    /* Channel strip: 1 coluna, mais respiro */
    .ch-strip { grid-template-columns: 1fr; }
    .ch-card { padding: 12px 14px; }

    /* Auto-pilot channel cards mais compactos */
    .channel-card { grid-template-columns: 36px 1fr auto; gap: 10px; padding: 10px 12px; }
    .channel-logo { width: 36px; height: 36px; border-radius: var(--radius); }
    .channel-logo svg { width: 22px; height: 22px; }
    .channel-name { font-size: 0.95rem; }
    .channel-sub { font-size: 0.72rem; }
    .channel-panel { padding: 12px; }
    .dest-btn { padding: 10px 12px; flex: 1 1 100%; }

    /* Buttons em mobile: menor, mas tap target ainda OK (44px min) */
    .button, .button-small {
        min-height: 38px;
        padding: 9px 14px;
        font-size: 0.85rem;
    }
    .big-cta { padding: 14px 18px; font-size: 0.95rem; }

    /* Forms */
    .form-grid input,
    .form-grid select,
    .form-grid textarea,
    .af-dropdown-trigger { padding: 10px 12px; font-size: 16px; } /* 16px: evita zoom-on-focus do iOS (era 0.9rem) */
    .form-row { grid-template-columns: 1fr !important; }

    /* Dropdowns AF: ocupa quase a tela toda */
    .af-dropdown-menu { max-height: 60vh; }

    /* Templates de mensagem */
    .tpl-chips { gap: 6px; }
    .tpl-chip { padding: 6px 12px 6px 8px; font-size: 0.78rem; }
    .tpl-chip-tick { width: 16px; height: 16px; font-size: 0.62rem; }
    .tpl-msg-img-emoji { font-size: 3rem; }
    .tpl-msg-text { padding: 12px 14px 6px; font-size: 0.85rem; }

    /* Tables: já tem .table-wrap com overflow-x; reduz padding */
    thead th, tbody td { padding: 10px 10px; font-size: 0.84rem; }

    /* Heatmap: scroll horizontal forçado */
    .heatmap-row, .heatmap-hours {
        min-width: 540px;
    }
    .heatmap { overflow-x: auto; padding-bottom: 6px; }
    .heatmap-cell { min-height: 18px; }

    /* Modal full-bleed em mobile */
    .modal-overlay { padding: 12px; align-items: stretch; }
    .modal { border-radius: var(--radius-lg); max-height: 92vh; overflow-y: auto; }
    .modal-header, .modal-body, .modal-footer { padding-left: 14px; padding-right: 14px; }
    .modal-footer { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
    .modal-footer button, .modal-footer .button-secondary { width: 100%; }

    /* Auth (login/register) */
    body.auth-wrapper .panel { padding: 24px; }

    /* Charts wrappers */
    .chart-wrap { height: 220px; }
    .chart-donut { height: 200px; }

    /* Dashboard ranges */
    .dash-range-btn { padding: 5px 10px; font-size: 0.78rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Responsividade mobile — auditoria 2026-07 (8 agentes)
   Consolida fixes transversais: zoom-iOS, grids que estouram, topbar, alvos.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* iOS Safari dá ZOOM ao focar QUALQUER input <16px. Força 16px em todos os
       campos — cobre form-grid, rule-section, cfg-master, quick-import, busca,
       clonagem (.cln), telegram (.tg), dropdowns. É o defeito mais transversal. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select, textarea,
    .af-dropdown-trigger, .af-dropdown-search {
        font-size: 16px !important;
    }

    /* Grids com min fixo (minmax 260–340px) > largura útil em 360px → estouravam
       pro lado. Colapsam pra 1 coluna no celular. */
    .wa-cards-grid, .tg-clone-grid, .tpl-grid,
    .cln-acctgrid, .cln-dest-list, .cln-grpgrid {
        grid-template-columns: 1fr !important;
    }

    /* Hub WhatsApp: cabeçalho + stats empilham em vez de espremer o título. */
    .wa-hub-head { grid-template-columns: 1fr; gap: 12px; }
    .wa-hub-stats { flex-wrap: wrap; gap: 10px; }
    .wa-stat { flex: 1 1 auto; min-width: 0; }

    /* Topbar: título trunca (não empurra as ações), ações quebram, alvos ≥40px. */
    .topbar .page-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar .page-title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
    .topbar-toggle { width: 40px !important; height: 40px !important; }

    /* Tap targets de ícones pequenos → mínimo 40px (área, sem mudar o glifo). */
    .tg-icon-btn, .cln-icon-btn, .cln-q-skip, .sess2 .tg-grp-x, .cln-modal-x {
        min-width: 40px; min-height: 40px;
    }

    /* Nome longo no header do modal trunca em vez de empurrar o ✕. */
    .modal-header h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .modal-close { flex-shrink: 0; }

    /* Alvos de toque das ações de remover destino / fechar modal → piso 40px. */
    .sess2 .dest-row__remove, .modal-close { min-width: 40px; min-height: 40px; }
    /* Ellipsis correto do nome no card de sessão WhatsApp. */
    .wa-card-titles { min-width: 0; }
    /* Tabela "Últimos enviados": coluna de produto não domina a largura no celular. */
    .table-wrap td:first-child > div { max-width: 150px; }
}

/* Mobile MUITO pequeno (<360, ex: iPhone SE 1ª gen) */
@media (max-width: 360px) {
    .container { padding: 10px; }
    .panel { padding: 14px; }
    .kpi-grid { gap: 8px; }
    .kpi-card { padding: 10px; }
    .kpi-icon { width: 32px; height: 32px; font-size: 1rem; }
    .stat-card .stat-icon { width: 36px; height: 36px; }
    .topbar-toggle { width: 40px; height: 40px; } /* alvo de toque principal — nunca abaixo de 40px */
    .ap-step-num { width: 28px; height: 28px; font-size: 0.85rem; }
}

/* Large desktop / Full HD — mantém leitura confortável (não fica oceano) */
@media (min-width: 1600px) {
    .stat-grid, .kpi-grid { gap: 16px; }
    .ch-strip, .integ-grid, .dash-quick-grid { gap: 14px; }
    .tpl-previews { gap: 22px; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
}

/* Ultra-wide / 4K — limita estiramento de texto longo */
@media (min-width: 1920px) {
    body { font-size: 16px; }
    .panel { padding: 32px; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    .tpl-previews { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
}

/* Modo paisagem em mobile baixo (smartphones deitados) — encurta panels */
@media (max-height: 480px) and (orientation: landscape) {
    .panel { padding: 14px; }
    .modal { max-height: 86vh; }
    .chart-wrap { height: 180px; }
}

/* ============================================================
   Scrollbars custom — sidebar (dark) + body/containers (light)
   ============================================================ */

/* Firefox: declaracao global */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }

/* WebKit: scroll bar do body e qualquer overflow padrao */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background var(--t-fast);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
    background-clip: content-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* Sidebar — variante dark pra contrastar com o fundo navy */
.sidebar,
.sidebar-nav,
.sidebar-foot {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-dark) transparent;
}
.sidebar-nav::-webkit-scrollbar,
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-dark);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-dark-hover);
    background-clip: content-box;
}

/* Mantem layout estavel quando o scroll aparece/some na sidebar */
.sidebar-nav { scrollbar-gutter: stable; }

/* Scrollbars internas dos componentes — herdam o estilo light */
.modal-overlay,
.af-dropdown-options,
.tpl-msg-text,
.tpl-card-body,
.heatmap,
.ch-dest-list { scrollbar-gutter: auto; }

/* ============================================================
   Sidebar responsiva — escala largura conforme viewport
   ============================================================ */

@media (min-width: 1280px) { :root { --sidebar-w: 256px; } }
@media (min-width: 1600px) { :root { --sidebar-w: 272px; } }
@media (min-width: 1920px) { :root { --sidebar-w: 288px; } }
@media (min-width: 2400px) { :root { --sidebar-w: 312px; } }

/* Em telas estreitinhas onde o drawer eh a unica opcao, mantem
   uma largura confortavel mas que cabe em iPhones SE (320px). */
@media (max-width: 480px) {
    .sidebar { width: min(86vw, 280px); }
}

/* Animacao suave da largura quando o user expande/recolhe */
.app-shell { transition: grid-template-columns var(--t) ease; }
.sidebar-foot,
.sidebar-brand .brand-text,
.sidebar-nav a .label,
.sidebar-nav .nav-section,
.nav-group-toggle .label,
.nav-group-toggle .badge-soon,
.nav-group-toggle .caret,
.user-chip .meta,
.logout-link .label {
    transition: opacity var(--t-fast);
}

/* ============================================================
   DARK THEME — overrides aplicados quando <html data-theme="dark">
   ============================================================ */

[data-theme="dark"] {
    color-scheme: dark;

    /* Cinzas neutros (não azulados) — base zinc/neutral */
    --color-bg: #131316;
    --color-surface: #1c1c20;
    --color-surface-2: #26262b;
    --color-surface-3: #2f2f35;
    --color-border: #2d2d33;
    --color-border-strong: #3e3e46;

    --color-text: #e5e5e7;
    --color-text-muted: #a1a1a6;
    --color-text-soft: #6c6c72;

    --color-primary: #818cf8;
    --color-primary-hover: #a5b4fc;
    --color-primary-soft: #1f1d35;

    --color-success: #34d399;
    --color-success-hover: #6ee7b7;
    --color-success-soft: #0d2c20;

    --color-warning: #fbbf24;
    --color-warning-soft: #2e2208;

    --color-danger: #f87171;
    --color-danger-hover: #fca5a5;
    --color-danger-soft: #2c1414;

    --color-info: #38bdf8;
    --color-info-soft: #0a2030;

    --scrollbar-thumb: rgba(255, 255, 255, 0.14);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.28);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* Backgrounds especificos que mexem fora dos tokens */
[data-theme="dark"] .topbar { background: rgba(19, 19, 22, 0.85); border-bottom-color: var(--color-border); }
[data-theme="dark"] code { background: var(--color-surface-2); color: #d4d4d8; }

/* Heros e gradients sutis viram tons cinza */
[data-theme="dark"] .dash-hero,
[data-theme="dark"] .dash-pilot-cta,
[data-theme="dark"] .channel-page-head,
[data-theme="dark"] .yt-head,
[data-theme="dark"] .ch-soon-card {
    background: linear-gradient(135deg, var(--color-surface), var(--color-surface-2));
}
[data-theme="dark"] .dash-pilot-active { background: linear-gradient(135deg, #0d2c20, var(--color-surface)); border-color: #1a4731; }
[data-theme="dark"] .ap-status-bar { background: linear-gradient(135deg, #0d2c20, var(--color-surface)); border-color: #1a4731; color: #6ee7b7; }
[data-theme="dark"] .ap-status-bar code { background: rgba(255,255,255,0.06); color: #d1fae5; }

/* Quick imports */
[data-theme="dark"] .quick-import { background: var(--color-surface-2); border-color: var(--color-border-strong); }
[data-theme="dark"] .quick-import.success { background: linear-gradient(135deg, #0d2c20, var(--color-surface)); border-color: #1a4731; }
[data-theme="dark"] .quick-import h3 { color: #c7d2fe; }

/* Estados semânticos em dark — uso rgba translúcido sobre o surface
   pra contraste melhor: background sutil + borda visível + texto brilhante */
[data-theme="dark"] .flash-success { background: rgba(52, 211, 153, 0.10); color: #6ee7b7; border-color: rgba(52, 211, 153, 0.32); }
[data-theme="dark"] .flash-warning { background: rgba(251, 191, 36, 0.10); color: #fcd34d; border-color: rgba(251, 191, 36, 0.32); }
[data-theme="dark"] .flash-danger  { background: rgba(248, 113, 113, 0.10); color: #fca5a5; border-color: rgba(248, 113, 113, 0.32); }
[data-theme="dark"] .flash-info    { background: rgba(56, 189, 248, 0.10); color: #7dd3fc; border-color: rgba(56, 189, 248, 0.32); }

[data-theme="dark"] .badge-status.pending   { background: rgba(251, 191, 36, 0.14); color: #fcd34d; }
[data-theme="dark"] .badge-status.sent      { background: rgba(52, 211, 153, 0.14); color: #6ee7b7; }
[data-theme="dark"] .badge-status.failed    { background: rgba(248, 113, 113, 0.14); color: #fca5a5; }
[data-theme="dark"] .badge-status.cancelled { background: var(--color-surface-2); color: var(--color-text-soft); }

[data-theme="dark"] .status-item.ok   { background: rgba(52, 211, 153, 0.10); color: #6ee7b7; border-color: rgba(52, 211, 153, 0.32); }
[data-theme="dark"] .status-item.ok::before { color: #34d399; }
[data-theme="dark"] .status-item.warn { background: rgba(251, 191, 36, 0.10); color: #fcd34d; border-color: rgba(251, 191, 36, 0.32); }
[data-theme="dark"] .status-item.warn::before { color: #fbbf24; }
[data-theme="dark"] .status-item.warn span { color: #fcd34d; opacity: 0.85; }
[data-theme="dark"] .status-item.info { background: rgba(129, 140, 248, 0.10); color: #c7d2fe; border-color: rgba(129, 140, 248, 0.32); }

[data-theme="dark"] .integ-ok    { background: rgba(52, 211, 153, 0.10); border-color: rgba(52, 211, 153, 0.32); }
[data-theme="dark"] .integ-warn  { background: rgba(251, 191, 36, 0.10); border-color: rgba(251, 191, 36, 0.32); }
[data-theme="dark"] .integ-info  { background: rgba(56, 189, 248, 0.10); border-color: rgba(56, 189, 248, 0.32); }
[data-theme="dark"] .integ-pill .integ-text strong { color: var(--color-text); }

[data-theme="dark"] .stat-pending .stat-icon { background: rgba(251, 191, 36, 0.16); }
[data-theme="dark"] .stat-sent    .stat-icon { background: rgba(52, 211, 153, 0.16); }
[data-theme="dark"] .stat-failed  .stat-icon { background: rgba(248, 113, 113, 0.16); }

[data-theme="dark"] .kpi-sent    .kpi-icon { background: rgba(52, 211, 153, 0.16); }
[data-theme="dark"] .kpi-rate    .kpi-icon { background: rgba(129, 140, 248, 0.16); }
[data-theme="dark"] .kpi-pending .kpi-icon { background: rgba(251, 191, 36, 0.16); }
[data-theme="dark"] .kpi-failed  .kpi-icon { background: rgba(248, 113, 113, 0.16); }

/* yt-env-warn (header do YouTube com setup pendente) — texto e borda
   vermelhos hardcoded ficam ilegiveis no dark; rebrighten */
[data-theme="dark"] .yt-env-warn {
    background: rgba(251, 191, 36, 0.10);
    color: #fcd34d;
    border-color: rgba(251, 191, 36, 0.32);
}
[data-theme="dark"] .yt-env-warn strong { color: #fde047; }
[data-theme="dark"] .yt-env-warn a { color: #fde047; }

[data-theme="dark"] .stat-value,
[data-theme="dark"] .kpi-value { color: var(--color-text); }

/* Marketplace badges */
[data-theme="dark"] .marketplace-mercadolivre { background: #2e2208; color: #fcd34d; }
[data-theme="dark"] .marketplace-amazon       { background: #0a2030; color: #7dd3fc; }
[data-theme="dark"] .marketplace-shopee       { background: #2c1414; color: #fca5a5; }

/* Auth pages */
[data-theme="dark"] body.auth-wrapper {
    background: linear-gradient(135deg, #131316 0%, #1c1c20 50%, #232328 100%);
}

/* Search hero */
[data-theme="dark"] .search-hero {
    background: linear-gradient(135deg, #1f1d35 0%, #1c1c20 60%, #28232f 100%);
    border-color: #3e3a5a;
}
[data-theme="dark"] .search-hero-label { color: #c7d2fe; }
[data-theme="dark"] .search-hero-input {
    background: var(--color-surface) !important;
    color: var(--color-text);
    border-color: var(--color-border-strong) !important;
}

/* Inputs em geral */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .quick-import textarea,
[data-theme="dark"] .quick-import input[type="text"] {
    background: var(--color-surface) !important;
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
[data-theme="dark"] .form-grid input[readonly] { background: var(--color-surface-2) !important; color: var(--color-text-muted); }
[data-theme="dark"] .switch { background: var(--color-surface-2); border-color: var(--color-border); }

/* Dropdowns */
[data-theme="dark"] .af-dropdown-trigger { background: var(--color-surface); color: var(--color-text); }
[data-theme="dark"] .af-dropdown-menu { background: var(--color-surface); }
[data-theme="dark"] .af-dropdown-search { background: var(--color-surface-2); color: var(--color-text); }
[data-theme="dark"] .af-dropdown-toolbar button { background: var(--color-surface-2); color: var(--color-text-muted); border-color: var(--color-border); }
[data-theme="dark"] .af-dropdown-option:hover { background: var(--color-primary-soft); }

/* Modal */
[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.7); }
[data-theme="dark"] .modal { background: var(--color-surface); }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer { background: var(--color-surface-2); border-color: var(--color-border); }
[data-theme="dark"] .modal-close { background: var(--color-surface-3); color: var(--color-text); }

/* Tabela */
[data-theme="dark"] table { background: var(--color-surface); }
[data-theme="dark"] thead th { background: var(--color-surface-2); color: var(--color-text-muted); border-color: var(--color-border); }
[data-theme="dark"] tbody tr:hover { background: var(--color-surface-2); }
[data-theme="dark"] tbody td { border-color: var(--color-border); color: var(--color-text); }

/* Cards / containers gerais que precisam refletir o surface */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .integ-pill,
[data-theme="dark"] .dash-quick,
[data-theme="dark"] .ch-card,
[data-theme="dark"] .product-card,
[data-theme="dark"] .wa-session-card,
[data-theme="dark"] .channel-block,
[data-theme="dark"] .panel,
[data-theme="dark"] .ap-step,
[data-theme="dark"] .yt-job,
[data-theme="dark"] .yt-account-card,
[data-theme="dark"] .tpl-card,
[data-theme="dark"] .dest-row,
[data-theme="dark"] .tpl-msg-bubble,
[data-theme="dark"] .channel-soon {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .tpl-msg-foot { background: var(--color-surface-2); }

/* Pílulas / chips diversos */
[data-theme="dark"] .cat-pill { background: #1f1d35; color: #c7d2fe; }
[data-theme="dark"] .day-chip { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text-muted); }
[data-theme="dark"] .topcat-bar { background: var(--color-surface-2); }

/* Channel-block panels: gradient original termina em #fff (branco), no
   dark vira branco visivel. Override pra acabar no surface escuro. */
[data-theme="dark"] .channel-block.whatsapp.open .channel-panel {
    background: linear-gradient(180deg, rgba(37, 211, 102, 0.10) 0%, var(--color-surface) 70%);
}
[data-theme="dark"] .channel-block.youtube.open .channel-panel {
    background: linear-gradient(180deg, rgba(255, 0, 0, 0.10) 0%, var(--color-surface) 70%);
}

/* dest-btn (Grupos/Privado/Ambos) — fundo branco do tema light */
[data-theme="dark"] .dest-btn {
    background: var(--color-surface-2);
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .dest-btn:hover {
    background: var(--color-surface-3);
}
[data-theme="dark"] .dest-btn .sub { color: var(--color-text-muted); }
[data-theme="dark"] .channel-soon {
    background: var(--color-surface-2);
    border-color: var(--color-border-strong);
    color: var(--color-text-muted);
}

/* Channel logo do WA/YT mantém marca, só ajusta sombra no dark */
[data-theme="dark"] .channel-card.whatsapp .channel-logo,
[data-theme="dark"] .channel-card.youtube .channel-logo {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4),
                inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

/* Channel sub-badge "em breve" */
[data-theme="dark"] .channel-soon-badge {
    background: var(--color-warning-soft);
    color: #fcd34d;
    border-color: #6b4d0a;
}

/* AP steps — cinza escuro mais legivel */
[data-theme="dark"] .ap-step { background: var(--color-surface-2); border-color: var(--color-border); }
[data-theme="dark"] .ap-step-body strong { color: var(--color-text); }
[data-theme="dark"] .ap-hint {
    background: var(--color-surface-2);
    border-color: var(--color-border-strong);
    color: var(--color-text-muted);
}

/* tpl-msg-text (preview de template) — fundo branco hardcoded */
[data-theme="dark"] .tpl-msg-text { background: var(--color-surface); color: var(--color-text); }
[data-theme="dark"] .tpl-card-body { background: var(--color-surface); color: var(--color-text); }
[data-theme="dark"] .tpl-card-head { background: var(--color-surface-2); }
[data-theme="dark"] .tpl-card.selected .tpl-card-head { background: var(--color-primary-soft); }

/* tpl-chip selecionado — texto branco mantido */
[data-theme="dark"] .tpl-chip { background: var(--color-surface-2); color: var(--color-text-muted); }
[data-theme="dark"] .tpl-chip.selected { background: var(--color-primary); color: #fff; }

/* WhatsApp session/account cards */
[data-theme="dark"] .wa-session-link { color: var(--color-text); }
[data-theme="dark"] .wa-session-link:hover { color: var(--color-text); }
[data-theme="dark"] .wa-session-actions { background: var(--color-surface-2); border-top-color: var(--color-border); }
[data-theme="dark"] .wa-dest-item {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .wa-dest-item:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}

/* YouTube account avatar/cards */
[data-theme="dark"] .yt-account-avatar { background: var(--color-surface-2); }

/* Topbar mobile-toggle (hambúrguer antigo) — pode ainda aparecer */
[data-theme="dark"] .topbar .mobile-toggle {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* Form helpers */
[data-theme="dark"] .form-grid label { color: var(--color-text); }
[data-theme="dark"] .form-grid small,
[data-theme="dark"] .hint { color: var(--color-text-soft); }

/* Modal close X */
[data-theme="dark"] .modal-close:hover { background: var(--color-border); color: var(--color-text); }

/* Disabled states */
[data-theme="dark"] .ch-soon { color: var(--color-text-soft); }

/* Box do toggle de Google Trends (light + dark) */
.trends-box {
    padding: 14px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.trends-box .switch { background: var(--color-surface); }

/* Chip de termo do Top Trends (light + dark) */
.trend-term-pill {
    display: inline-block;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
}
[data-theme="dark"] .trend-term-pill {
    background: #2e2208;
    color: #fdba74;
    border-color: #6b4d0a;
}

/* Sidebar no dark — segue a paleta cinza neutra do tema */
[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
    box-shadow: 4px 0 18px rgba(0, 0, 0, 0.35);
    border-right: 1px solid var(--color-border);
}
[data-theme="dark"] .sidebar-brand {
    border-bottom-color: var(--color-border);
}
[data-theme="dark"] .sidebar-foot {
    border-top-color: var(--color-border);
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.16));
}
[data-theme="dark"] .user-chip {
    background: var(--color-surface-2);
}
[data-theme="dark"] .sidebar-nav .nav-section { color: var(--color-text-soft); }
[data-theme="dark"] .sidebar-nav a { color: var(--color-text-muted); }
[data-theme="dark"] .sidebar-nav a:hover {
    background: var(--color-surface-2);
    color: var(--color-text);
}
[data-theme="dark"] .sidebar-nav a.active {
    background: linear-gradient(135deg, rgba(129, 140, 248, 0.18), rgba(168, 85, 247, 0.14));
    color: var(--color-text);
    box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.3);
}
[data-theme="dark"] .nav-group-toggle { color: var(--color-text-muted); }
[data-theme="dark"] .nav-group-toggle:hover { background: var(--color-surface-2); color: var(--color-text); }
[data-theme="dark"] .nav-group.open .nav-group-toggle { color: var(--color-text); }
[data-theme="dark"] .nav-group-children a { color: var(--color-text-soft); }
[data-theme="dark"] .nav-group-children a:hover { background: var(--color-surface-2); color: var(--color-text); }
[data-theme="dark"] .nav-group-children a.active {
    background: rgba(129, 140, 248, 0.16);
    color: var(--color-text);
}
[data-theme="dark"] .sidebar-foot a.logout-link {
    color: var(--color-text-muted);
    border-color: var(--color-border);
}
[data-theme="dark"] .sidebar-foot a.logout-link:hover {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.3);
    color: var(--color-text);
}
[data-theme="dark"] .sidebar-toggle:hover { background: var(--color-surface-2); }
/* Scrollbar da sidebar usa o thumb global do dark (já é claro/translucido) */

[data-theme="dark"] details > summary { background: var(--color-surface-2); color: var(--color-text-muted); }
[data-theme="dark"] details > summary:hover { background: var(--color-surface-3); color: var(--color-text); }

[data-theme="dark"] .heatmap-cell { background: hsl(238, 30%, calc(18% + var(--ratio, 0) * 50%)); }

[data-theme="dark"] .topbar-toggle,
[data-theme="dark"] .button-secondary,
[data-theme="dark"] .button-link {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}
[data-theme="dark"] .topbar-toggle:hover {
    background: var(--color-surface-2);
    border-color: var(--color-border-strong);
}
/* theme-toggle no dark: continua sem bg, só clareia a opacidade */
[data-theme="dark"] .theme-toggle { color: var(--color-text); }

/* WhatsApp dest pills */
[data-theme="dark"] .ch-dest-pill.group   { background: #052e1f; color: #6ee7b7; border-color: #14532d; }
[data-theme="dark"] .ch-dest-pill.contact { background: #1e1b4b; color: #c7d2fe; border-color: #3730a3; }

/* ============================================================
   Theme toggle button (sol/lua) + WhatsApp FAB
   ============================================================ */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--color-text);
    flex-shrink: 0;
    padding: 0;
    transition: opacity var(--t-fast), transform var(--t-fast);
    font-size: 1.15rem;
    opacity: 0.75;
}
.theme-toggle:hover {
    opacity: 1;
    transform: scale(1.08);
}
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle .theme-icon-light,
.theme-toggle .theme-icon-dark {
    transition: transform 280ms cubic-bezier(.5, .2, .3, 1.4),
                opacity 200ms ease;
    display: inline-block;
}
.theme-toggle .theme-icon-dark { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-light { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-dark  { display: inline-block; }

/* WhatsApp FAB — botão circular fixo no canto inferior direito */
.wa-fab {
    position: fixed;
    bottom: 22px;
    right: 22px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    z-index: 80;
    text-decoration: none;
    transition: transform 160ms ease, background 160ms ease,
                box-shadow 160ms ease;
    border: 0;
    padding: 0;
}
.wa-fab:hover {
    background: #1faa54;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    text-decoration: none;
    color: #fff;
}
.wa-fab svg { width: 30px; height: 30px; }
.wa-fab .wa-fab-icon-close {
    display: none;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}
.wa-fab.is-open .wa-fab-icon-chat { display: none; }
.wa-fab.is-open .wa-fab-icon-close { display: inline-block; }

@media (max-width: 480px) {
    .wa-fab { width: 52px; height: 52px; bottom: 16px; right: 16px; }
    .wa-fab svg { width: 26px; height: 26px; }
}

/* ─── Chat widget (popup do FAB) ─── */
.chat-widget {
    position: fixed;
    bottom: 92px;        /* fica acima do FAB */
    right: 22px;
    width: min(380px, calc(100vw - 32px));
    max-height: min(560px, calc(100vh - 130px));
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.28),
                0 4px 14px rgba(15, 23, 42, 0.12);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 79;
    transform-origin: bottom right;
    animation: chatWidgetIn 240ms cubic-bezier(.2, .9, .3, 1.1);
}
.chat-widget.open { display: flex; }

@keyframes chatWidgetIn {
    from { opacity: 0; transform: translateY(20px) scale(.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 480px) {
    .chat-widget {
        right: 8px;
        left: 8px;
        bottom: 84px;
        width: auto;
        max-height: calc(100vh - 110px);
    }
}

.chat-widget-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: #fff;
    flex-shrink: 0;
}
.chat-widget-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.chat-widget-avatar svg { width: 22px; height: 22px; }
.chat-widget-info { flex: 1; line-height: 1.2; min-width: 0; }
.chat-widget-info strong { display: block; font-size: 0.95rem; }
.chat-widget-info small { font-size: 0.74rem; opacity: 0.92; display: flex; align-items: center; gap: 4px; }
.chat-online-dot {
    display: inline-block;
    width: 7px; height: 7px;
    background: #4ade80;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.3);
}

.chat-widget-close {
    background: rgba(255, 255, 255, 0.16);
    border: 0;
    width: 28px; height: 28px;
    border-radius: var(--radius-sm);
    color: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background var(--t-fast);
    line-height: 1;
}
.chat-widget-close:hover { background: rgba(255, 255, 255, 0.28); }

.chat-widget-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: linear-gradient(180deg, #f0f2f5 0%, #f7f8fa 100%);
}
[data-theme="dark"] .chat-widget-msgs {
    background: linear-gradient(180deg, var(--color-surface-2) 0%, var(--color-surface) 100%);
}

/* Bolhas estilo WA */
.chat-bubble {
    max-width: 82%;
    padding: 9px 12px;
    border-radius: var(--radius-lg);
    font-size: 0.88rem;
    line-height: 1.45;
    word-wrap: break-word;
    animation: chatBubbleIn 200ms ease-out;
}
@keyframes chatBubbleIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.chat-bubble.bot {
    align-self: flex-start;
    background: #fff;
    color: var(--color-text);
    border-radius: 4px 12px 12px 12px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .chat-bubble.bot {
    background: var(--color-surface);
    color: var(--color-text);
}
.chat-bubble.user {
    align-self: flex-end;
    background: #d9fdd3;
    color: #1f2937;
    border-radius: 12px 4px 12px 12px;
}
[data-theme="dark"] .chat-bubble.user {
    background: #056162;
    color: #d1fae5;
}

/* Indicador de "digitando" */
.chat-typing {
    align-self: flex-start;
    background: #fff;
    border-radius: 4px 12px 12px 12px;
    padding: 12px 14px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .chat-typing { background: var(--color-surface); }
.chat-typing span {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #94a3b8;
    margin-right: 3px;
    animation: chatDot 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; margin-right: 0; }
@keyframes chatDot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* Footer com choices ou input */
.chat-widget-foot {
    flex-shrink: 0;
    padding: 12px 14px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.chat-choices {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.chat-choice {
    padding: 9px 14px;
    border-radius: 999px;
    border: 1.5px solid #25d366;
    background: transparent;
    color: #128c7e;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background var(--t-fast), color var(--t-fast);
    font-family: inherit;
}
[data-theme="dark"] .chat-choice { color: #6ee7b7; border-color: #25d366; }
.chat-choice:hover {
    background: #25d366;
    color: #fff;
}

.chat-input-row {
    display: flex;
    gap: 6px;
    align-items: flex-end;
}
.chat-input-row textarea {
    flex: 1;
    resize: none;
    min-height: 38px;
    max-height: 80px;
    padding: 9px 12px !important;
    border-radius: 999px !important;
    border: 1px solid var(--color-border-strong) !important;
    background: var(--color-surface) !important;
    color: var(--color-text);
    font-family: inherit !important;
    font-size: 0.85rem !important;
}
.chat-input-row button {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 0;
    background: #25d366;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 1rem;
}
.chat-input-row button:hover { background: #128c7e; }
.chat-input-row button:disabled { opacity: 0.4; cursor: not-allowed; }

.chat-final-cta {
    display: block;
    text-align: center;
    padding: 12px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.36);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.chat-final-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
    text-decoration: none;
}
.chat-final-cta.disabled {
    pointer-events: none;
    opacity: 0.55;
    background: var(--color-text-soft);
    box-shadow: none;
}

/* ============================================================
   Animations
   ============================================================ */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.panel,
.flash { animation: fadeIn 220ms ease-out; }

/* ============================================================
   Calendário promocional (PARTE 13b — bloco verbatim)
   ============================================================ */
.promotional-calendar-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    overflow: visible;
}
.promotional-calendar-card[data-loading="1"] .calendar-grid {
    opacity: 0.72;
    pointer-events: none;
}

.promotional-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.promotional-calendar-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 260px;
}
.promotional-calendar-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 8px 18px rgba(99, 102, 241, 0.32);
    flex-shrink: 0;
}
.promotional-calendar-title {
    margin: 0;
    color: #0f172a;
    font-size: 1.16rem;
    letter-spacing: -0.02em;
}
.promotional-calendar-subtitle {
    margin: 3px 0 0;
    font-size: 0.84rem;
    color: #64748b;
}

.promotional-calendar-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.calendar-nav-button {
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    border: 1px solid #dbe0ea;
    background: #ffffff;
    color: #1e293b;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease,
        background 160ms ease;
}
.calendar-nav-button:hover {
    border-color: #c7d2fe;
    background: #eef2ff;
    box-shadow: 0 6px 14px rgba(99, 102, 241, 0.18);
}
.calendar-nav-button:active { transform: translateY(1px); }
.calendar-nav-button-icon { font-size: 0.95rem; }
.calendar-current-month {
    min-width: 134px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 8px;
}
.calendar-weekdays span {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    padding-left: 4px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 9px;
    overflow: visible;
}

.calendar-day {
    position: relative;
    z-index: 1;
    cursor: pointer;
    min-height: 132px;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 11px;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease,
        border-color 180ms ease;
}
.calendar-day.empty {
    visibility: hidden;
    pointer-events: none;
}
.calendar-day.has-event {
    border-color: rgba(239, 68, 68, 0.18);
}
.calendar-day.skeleton {
    background: linear-gradient(120deg, #f1f5f9 20%, #e2e8f0 38%, #f1f5f9 56%);
    background-size: 220% 100%;
    border-color: #e5e7eb;
    animation: calSkeleton 1.2s ease-in-out infinite;
}
.calendar-day-number {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.calendar-events {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
}
.calendar-event {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
    font-size: 0.74rem;
    line-height: 1.2;
}
.calendar-event-icon {
    width: 14px;
    flex-shrink: 0;
    text-align: center;
    line-height: 1;
}
.calendar-event-title {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.calendar-event.is-peak .calendar-event-title { font-weight: 700; }
.calendar-more-events {
    font-size: 0.67rem;
    font-weight: 600;
    opacity: 0.82;
}

.calendar-intensity {
    margin-top: auto;
    margin-left: auto;
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.calendar-mobile-dot {
    display: none;
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
}

.calendar-day.level-0 {
    background: #f8fafc;
    color: #64748b;
    border-color: #e2e8f0;
}
.calendar-day.level-1 {
    background: linear-gradient(135deg, #fff1f2, #fee2e2);
    color: #7f1d1d;
}
.calendar-day.level-2 {
    background: linear-gradient(135deg, #ffe4e6, #fecaca);
    color: #7f1d1d;
}
.calendar-day.level-3 {
    background: linear-gradient(135deg, #fecaca, #fca5a5);
    color: #7f1d1d;
}
.calendar-day.level-4 {
    background: linear-gradient(135deg, #fb7185, #ef4444);
    color: #ffffff;
}
.calendar-day.level-5 {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
}
.calendar-day.level-6 {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    color: #ffffff;
}

.calendar-day:not(.empty):hover {
    transform: translateY(-8px) scale(1.035);
    z-index: 30;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    filter: saturate(1.08);
}
.calendar-day:not(.empty):active {
    transform: translateY(-4px) scale(1.02);
}
.calendar-day:not(.empty):focus-visible {
    outline: 3px solid rgba(79, 70, 229, 0.35);
    outline-offset: 3px;
    z-index: 30;
}
.calendar-day.today {
    box-shadow: inset 0 0 0 2px #4f46e5;
}

.promo-cal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.calendar-legend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
}
.calendar-legend-box {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 1px solid rgba(148, 163, 184, 0.25);
}
.calendar-legend-box.level-1 { background: linear-gradient(135deg, #fff1f2, #fee2e2); }
.calendar-legend-box.level-2 { background: linear-gradient(135deg, #ffe4e6, #fecaca); }
.calendar-legend-box.level-3 { background: linear-gradient(135deg, #fecaca, #fca5a5); }
.calendar-legend-box.level-4 { background: linear-gradient(135deg, #fb7185, #ef4444); }
.calendar-legend-box.level-5 { background: linear-gradient(135deg, #ef4444, #dc2626); }
.calendar-legend-box.level-6 { background: linear-gradient(135deg, #dc2626, #991b1b); }

.calendar-feedback {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: auto;
}
.calendar-tooltip {
    font-size: 0.82rem;
    color: #64748b;
    min-height: 1.2em;
}

@keyframes calSkeleton {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (max-width: 1024px) {
    .calendar-grid { gap: 8px; }
    .calendar-day {
        min-height: 102px;
        padding: 8px 8px;
        gap: 6px;
    }
    .calendar-event { font-size: 0.67rem; }
    .calendar-intensity { font-size: 0.67rem; }
}

@media (max-width: 740px) {
    .promotional-calendar-header { gap: 12px; }
    .promotional-calendar-nav { width: 100%; justify-content: flex-end; }
    .calendar-current-month { min-width: 118px; font-size: 0.88rem; }
    .calendar-weekdays { gap: 6px; }
    .calendar-weekdays span { font-size: 0.63rem; padding-left: 2px; }
    .calendar-grid { gap: 6px; }
    .calendar-day {
        min-height: 88px;
        border-radius: var(--radius);
        padding: 7px 7px;
    }
    .calendar-event { font-size: 0.6rem; }
}

@media (max-width: 560px) {
    .promotional-calendar-title-wrap { min-width: 0; }
    .promotional-calendar-icon {
        width: 34px;
        height: 34px;
        border-radius: var(--radius);
        font-size: 0.92rem;
    }
    .promotional-calendar-title { font-size: 1rem; }
    .promotional-calendar-subtitle { font-size: 0.76rem; }
    .calendar-nav-button {
        width: 32px;
        height: 32px;
        border-radius: var(--radius-sm);
    }
    .calendar-current-month { min-width: 102px; font-size: 0.82rem; }
    .calendar-weekdays span { font-size: 0.58rem; }
    .calendar-day {
        min-height: 66px;
        padding: 6px 6px;
        gap: 4px;
    }
    .calendar-events,
    .calendar-more-events { display: none; }
    .calendar-mobile-dot { display: inline-block; }
    .calendar-intensity { font-size: 0.58rem; }
    .calendar-tooltip { width: 100%; font-size: 0.74rem; }
    .calendar-feedback { width: 100%; justify-content: space-between; }
}

/* Calendário promocional (dark) */
[data-theme="dark"] .promotional-calendar-card {
    background: var(--color-surface, #1f1f23);
    border-color: var(--color-border, #2c2d33);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
}
[data-theme="dark"] .promotional-calendar-title { color: var(--color-text, #f8fafc); }
[data-theme="dark"] .promotional-calendar-subtitle { color: var(--color-text-muted, #a1a1aa); }
[data-theme="dark"] .calendar-current-month { color: var(--color-text, #f8fafc); }
[data-theme="dark"] .calendar-weekdays span { color: #8f9aad; }
[data-theme="dark"] .calendar-nav-button {
    background: var(--color-surface-2, #2a2b31);
    border-color: var(--color-border, #3a3b43);
    color: var(--color-text, #f1f5f9);
}
[data-theme="dark"] .calendar-nav-button:hover {
    background: #323546;
    border-color: #6366f1;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.3);
}
[data-theme="dark"] .calendar-day.skeleton {
    background: linear-gradient(120deg, #2c2d34 20%, #373944 38%, #2c2d34 56%);
    border-color: #32343d;
}
[data-theme="dark"] .calendar-day.level-0 { background: #25272f; color: #9aa4b5; border-color: #313541; }
[data-theme="dark"] .calendar-day.level-1 { background: linear-gradient(135deg, #3a2028, #4a242f); color: #ffd1d8; }
[data-theme="dark"] .calendar-day.level-2 { background: linear-gradient(135deg, #4a222b, #612832); color: #ffd1d8; }
[data-theme="dark"] .calendar-day.level-3 { background: linear-gradient(135deg, #652832, #86303b); color: #ffe3e3; }
[data-theme="dark"] .calendar-day.level-4 { background: linear-gradient(135deg, #a13649, #c54252); color: #ffffff; }
[data-theme="dark"] .calendar-day.level-5 { background: linear-gradient(135deg, #bf2b3a, #d12c34); color: #ffffff; }
[data-theme="dark"] .calendar-day.level-6 { background: linear-gradient(135deg, #941d29, #6f1119); color: #ffffff; }
[data-theme="dark"] .calendar-day.has-event { border-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .calendar-day.today { box-shadow: inset 0 0 0 2px #818cf8; }
[data-theme="dark"] .calendar-legend-box { border-color: rgba(255, 255, 255, 0.16); }
[data-theme="dark"] .calendar-tooltip { color: var(--color-text-muted, #a1a1aa); }

/* ===================================================================== */
/* === Telegram (Sessões + Clonagem) — accent azul, moderno, animado === */
/* ===================================================================== */
:root {
    --tg-accent:   #229ED9;
    --tg-accent-2: #2AABEE;
    --tg-accent-3: #1d8fc4;
    --tg-soft:     #e8f5fc;
    --tg-on:       #1aa251;
    --tg-grad: linear-gradient(135deg, #2AABEE 0%, #229ED9 60%, #1d8fc4 100%);
}
[data-theme="dark"] {
    --tg-accent:   #2AABEE;
    --tg-accent-2: #54c6f5;
    --tg-accent-3: #1d8fc4;
    --tg-soft:     #0e2a3a;
    --tg-on:       #34d399;
}

@keyframes tgFloat   { 0%,100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-5px) rotate(-2deg); } }
@keyframes tgPulseOn { 0% { box-shadow: 0 0 0 0 rgba(26,162,81,.5); } 70% { box-shadow: 0 0 0 6px rgba(26,162,81,0); } 100% { box-shadow: 0 0 0 0 rgba(26,162,81,0); } }
@keyframes tgCardIn  { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tgSpin    { to { transform: rotate(360deg); } }
@keyframes tgSheen   { from { background-position: -180% 0; } to { background-position: 180% 0; } }

/* ---- Header / hub ---- */
.tg-hub-head { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
    background: linear-gradient(135deg, var(--tg-soft), var(--color-surface) 70%);
    border: 1px solid var(--color-border); position: relative; overflow: hidden; }
.tg-hub-head::after { content: ""; position: absolute; inset: 0 0 auto auto; width: 200px; height: 200px;
    background: radial-gradient(circle at 70% 30%, rgba(42,171,238,.18), transparent 60%); pointer-events: none; }
.tg-hub-title { display: flex; align-items: flex-start; gap: 16px; max-width: 640px; }
.tg-hub-logo { font-size: 2.3rem; line-height: 1; filter: drop-shadow(0 6px 14px rgba(34,158,217,.45));
    animation: tgFloat 4s ease-in-out infinite; display: inline-block; }
.tg-hub-logo--clone { animation: none; }
.tg-hub-title h1 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.tg-hub-stats { display: flex; gap: 12px; }
.tg-stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: 12px 18px; text-align: center; min-width: 78px; box-shadow: var(--shadow-sm); transition: transform var(--t); }
.tg-stat:hover { transform: translateY(-2px); }
.tg-stat strong { display: block; font-size: 1.7rem; font-weight: 800;
    background: var(--tg-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tg-stat span { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }

/* ---- Conectar bot ---- */
.tg-add-bot__intro { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.tg-add-bot__intro h2 { margin: 0; }
.tg-help summary { cursor: pointer; color: var(--tg-accent); font-weight: 600; font-size: .9rem; }
.tg-help[open] summary { margin-bottom: 8px; }
.tg-help ol { margin: 0; padding-left: 20px; color: var(--color-text-muted); font-size: .9rem; line-height: 1.7; }
.tg-help code { background: var(--color-surface-2); padding: 1px 6px; border-radius: var(--radius-sm); font-size: .85em; }
.tg-add-bot__form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.tg-field { display: flex; flex-direction: column; gap: 5px; }
.tg-field--grow { flex: 1 1 320px; }
.tg-field label { font-size: .8rem; font-weight: 600; color: var(--color-text-muted); }
.tg-field input { padding: 10px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
    background: var(--color-surface); color: var(--color-text); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.tg-field input:focus { outline: none; border-color: var(--tg-accent); box-shadow: 0 0 0 3px rgba(42,171,238,.18); }

.tg-btn-connect, .tg-btn-save { background: var(--tg-grad) !important; border: 0; position: relative; overflow: hidden; }
.tg-btn-connect::before, .tg-btn-save::before { content: ""; position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    background-size: 200% 100%; animation: tgSheen 3.5s linear infinite; pointer-events: none; }
.tg-btn-connect:hover, .tg-btn-save:hover { filter: brightness(1.05); box-shadow: 0 6px 18px rgba(34,158,217,.4); }
.tg-btn-spinner { width: 0; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
    display: inline-block; opacity: 0; transition: width var(--t-fast), opacity var(--t-fast); }
button.is-busy .tg-btn-spinner { width: 14px; opacity: 1; margin-right: 8px; animation: tgSpin .7s linear infinite; }
button.is-busy { opacity: .85; cursor: progress; }

/* ---- Cards de bot ---- */
.tg-bots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 18px; }
.tg-bot-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: 18px; box-shadow: var(--shadow); position: relative; overflow: hidden;
    animation: tgCardIn .42s cubic-bezier(.2,.9,.3,1.05) both; animation-delay: calc(var(--i, 0) * 60ms);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.tg-bot-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tg-grad); opacity: .9; }
.tg-bot-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(42,171,238,.4); }
.tg-bot-card.is-idle { opacity: .92; }
.tg-bot-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px dashed var(--color-border); }
.tg-bot-avatar { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 50%;
    background: var(--tg-grad); font-size: 1.2rem; box-shadow: 0 4px 12px rgba(34,158,217,.4); }
.tg-bot-meta { flex: 1; min-width: 0; }
.tg-bot-meta strong { display: block; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-bot-sub { font-size: .8rem; color: var(--color-text-soft); }

/* ---- Pills ---- */
.tg-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--radius-full);
    font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.tg-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tg-pill--on { background: rgba(26,162,81,.12); color: var(--tg-on); }
.tg-pill--on .tg-dot { animation: tgPulseOn 1.8s ease-out infinite; }
.tg-pill--idle { background: var(--color-surface-2); color: var(--color-text-soft); }

/* ---- Destinos ---- */
.tg-dests { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.tg-dest-row { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--radius);
    background: var(--color-surface-2); border: 1px solid transparent; transition: background var(--t-fast), border-color var(--t-fast), opacity var(--t); }
.tg-dest-row:hover { border-color: rgba(42,171,238,.35); background: var(--tg-soft); }
.tg-dest-row.is-off { opacity: .55; }
.tg-dest-info { display: flex; align-items: center; gap: 10px; flex: 1 1 150px; min-width: 0; }
.tg-dest-info > div { min-width: 0; }
.tg-dest-icon { font-size: 1.1rem; }
.tg-dest-icon--lg { font-size: 1.7rem; }
.tg-dest-title { display: block; font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-dest-chat { display: block; font-size: .76rem; color: var(--color-text-soft); font-family: ui-monospace, Menlo, Consolas, monospace; }
.tg-dest-status { flex: 0 0 auto; }
.tg-ap { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-full); }
.tg-ap--on { background: rgba(26,162,81,.12); color: var(--tg-on); }
.tg-ap--on .tg-dot { animation: tgPulseOn 1.8s ease-out infinite; }
.tg-ap--off { background: var(--color-surface-3); color: var(--color-text-soft); }
.tg-ap--wait { background: rgba(217,119,6,.14); color: var(--color-warning); }
.tg-dest-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.tg-dests-empty { font-size: .85rem; color: var(--color-text-soft); padding: 10px 4px; font-style: italic; }

/* ---- Switch custom ---- */
.tg-switch { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; }
.tg-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.tg-switch-track { position: absolute; inset: 0; border-radius: var(--radius-full); background: var(--color-border-strong);
    transition: background var(--t); }
.tg-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--t) cubic-bezier(.2,.9,.3,1.4); }
.tg-switch input:checked + .tg-switch-track { background: var(--tg-grad); }
.tg-switch input:checked + .tg-switch-track::after { transform: translateX(18px); }
.tg-switch input:focus-visible + .tg-switch-track { box-shadow: 0 0 0 3px rgba(42,171,238,.3); }

/* ---- Icon / link buttons ---- */
.tg-icon-btn { width: 28px; height: 28px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-soft);
    cursor: pointer; font-size: .95rem; line-height: 1; transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.tg-icon-btn:hover { background: var(--color-danger-soft); color: var(--color-danger); transform: scale(1.08); }
.tg-link-danger { background: none; border: 0; color: var(--color-danger); cursor: pointer; font-size: .82rem; font-weight: 600; padding: 4px 0; }
.tg-link-danger:hover { text-decoration: underline; }

/* ---- Add destino inline ---- */
.tg-add-dest { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.tg-add-dest input[type="text"] { flex: 1 1 140px; min-width: 0; padding: 8px 10px; border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: .86rem; transition: border-color var(--t-fast); }
.tg-add-dest input:focus { outline: none; border-color: var(--tg-accent); }
.tg-select { padding: 8px 10px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
    background: var(--color-surface); color: var(--color-text); font-size: .86rem; }
.tg-bot-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px;
    padding-top: 12px; border-top: 1px dashed var(--color-border); flex-wrap: wrap; }

/* ---- Empty state ---- */
.tg-empty { text-align: center; padding: 48px 20px; }
.tg-empty-art { font-size: 3.4rem; animation: tgFloat 4s ease-in-out infinite; display: inline-block; filter: drop-shadow(0 8px 18px rgba(34,158,217,.4)); }
.tg-empty h2 { margin: 14px 0 8px; }
.tg-empty p { max-width: 480px; margin: 0 auto; }

/* ---- Página de regras (sessão) ---- */
.tg-session-head { background: linear-gradient(135deg, var(--tg-soft), var(--color-surface) 75%); }
.tg-back { display: inline-block; margin-bottom: 12px; color: var(--tg-accent); font-weight: 600; font-size: .88rem; text-decoration: none; }
.tg-back:hover { text-decoration: underline; }
.tg-session-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tg-session-title h1 { margin: 0; }
.tg-rule-actions { display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }

/* ---- Clonagem grid ---- */
.tg-clone-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.tg-clone-col h2 { margin: 0 0 4px; }
.tg-clone-list { margin-top: 14px; }
.tg-ingest-note { line-height: 1.6; }

@media (max-width: 720px) {
    .tg-hub-head { flex-direction: column; align-items: flex-start; }
    .tg-add-bot__form { flex-direction: column; align-items: stretch; }
    .tg-bots-grid { grid-template-columns: 1fr; }
    .tg-dest-status { display: none; }
}

/* ============================================================
   App Android — neutraliza o transform de navegação no <body>
   ============================================================
   O WebShell do app injeta, durante a navegação:

       body.af-navigating { opacity: .94; transform: translateY(2px); }

   O `transform` no <body> cria um containing block e faz TODO
   `position: fixed` da página se ancorar no body em vez da viewport.
   Resultado medido no aparelho (DOM real, viewport 780px): o menu
   inferior, que deveria ficar em ~708px, renderizava em 103px — no meio
   da tela, por cima do conteúdo. Vale para o menu, o botão flutuante do
   WhatsApp e qualquer modal.

   Piora porque a classe é removida no `pageshow`, que nem sempre dispara
   — então o transform fica preso e a tela segue quebrada.

   Aqui só o `transform` é anulado; a `opacity` continua dando o feedback
   visual da navegação. Um deslocamento de 2px que ninguém enxerga não
   justifica quebrar o layout.

   Correção definitiva é no app (remover o transform do CSS injetado em
   WebShellActivity.kt) — este override conserta os aparelhos JÁ
   instalados, sem esperar release. Pode sair quando a versão corrigida
   do app estiver na frota.
   ============================================================ */
body.af-navigating {
    transform: none !important;
}

/* Períodos de envio (Janela de envio do catálogo): "das __ às __" × até 4 */
.sched-periods { margin-bottom: 12px; }
.sched-periods__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 6px; }
.sched-periods__head label { margin: 0; }
.sched-periods__rows { display: flex; flex-direction: column; gap: 6px; }
.sched-period { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sched-period .input-compact { width: auto; min-width: 0; margin: 0; }
.sched-period__lbl { font-size: 0.85rem; color: var(--color-text-muted); }
.sched-period__rm { color: var(--color-danger, #ef4444); text-decoration: none; font-weight: 800; padding: 0 6px; line-height: 1; }
.sched-period__rm:hover { text-decoration: none; opacity: .8; }
.sched-period__add { display: inline-block; margin-top: 8px; font-size: 0.85rem; font-weight: 700; color: var(--color-primary); text-decoration: none; }
.sched-period__add:hover { text-decoration: underline; }