/* ===== Nouz — visual limpo: branco, azul e preto ===== */
:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --tint: 26%; --tint-h: 36%; /* força da cor nos posts do calendário */
  --surface-2: #f5f5f7;
  --surface-3: #ebebef;
  --chip: rgba(118, 118, 128, .12);
  --line: rgba(0, 0, 0, .07);
  --border: #e3e3e8;
  --text: #0b0b0f;
  --text-soft: #5c5c63;
  --text-faint: #8e8e93;
  --brand: #1236ff;
  --brand-2: #1ea7ff;
  --brand-hover: #0a2ae0;
  --brand-soft: rgba(18, 54, 255, .08);
  --ok: #1a9f53;
  --ok-soft: rgba(26, 159, 83, .12);
  --warn: #c27400;
  --warn-soft: rgba(255, 159, 10, .15);
  --danger: #e0352b;
  --danger-soft: rgba(224, 53, 43, .1);
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 12px rgba(0, 0, 0, .035);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .05), 0 10px 28px rgba(0, 0, 0, .07);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, .16);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
/* escuro: segue o sistema, a não ser que a pessoa escolha Clara ou Escura em Configurações */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --surface: #161618;
    --tint: 34%; --tint-h: 44%;
    --surface-2: #1f1f22;
    --surface-3: #2a2a2e;
    --chip: rgba(118, 118, 128, .24);
    --line: rgba(255, 255, 255, .08);
    --border: #2e2e33;
    --text: #f5f5f7;
    --text-soft: #b0b0b6;
    --text-faint: #7c7c83;
    --brand: #4f6bff;
    --brand-hover: #6680ff;
    --brand-soft: rgba(79, 107, 255, .16);
    --ok: #32d074;
    --ok-soft: rgba(50, 208, 116, .14);
    --warn: #ffb340;
    --warn-soft: rgba(255, 179, 64, .14);
    --danger: #ff5a4f;
    --danger-soft: rgba(255, 90, 79, .14);
    --shadow: 0 0 0 1px rgba(255, 255, 255, .04);
    --shadow-md: 0 0 0 1px rgba(255, 255, 255, .06), 0 10px 28px rgba(0, 0, 0, .5);
    --shadow-lg: 0 0 0 1px rgba(255, 255, 255, .06), 0 16px 48px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .brand img, :root:not([data-theme="light"]) .auth-logo, :root:not([data-theme="light"]) .cv-logo { filter: invert(1) hue-rotate(180deg) brightness(1.1); }
  :root:not([data-theme="light"]) .wa-btn { color: #3ddc84; background: rgba(61, 220, 132, .14); }
  :root:not([data-theme="light"]) .seg-b.active { background: #3a3a3e !important; }
  :root:not([data-theme="light"]) .wa-bubble { background: #1f5c3a !important; color: #e8f5ec !important; }
}
:root[data-theme="dark"] {
  --bg: #000000;
  --surface: #161618;
  --tint: 34%; --tint-h: 44%;
  --surface-2: #1f1f22;
  --surface-3: #2a2a2e;
  --chip: rgba(118, 118, 128, .24);
  --line: rgba(255, 255, 255, .08);
  --border: #2e2e33;
  --text: #f5f5f7;
  --text-soft: #b0b0b6;
  --text-faint: #7c7c83;
  --brand: #4f6bff;
  --brand-hover: #6680ff;
  --brand-soft: rgba(79, 107, 255, .16);
  --ok: #32d074;
  --ok-soft: rgba(50, 208, 116, .14);
  --warn: #ffb340;
  --warn-soft: rgba(255, 179, 64, .14);
  --danger: #ff5a4f;
  --danger-soft: rgba(255, 90, 79, .14);
  --shadow: 0 0 0 1px rgba(255, 255, 255, .04);
  --shadow-md: 0 0 0 1px rgba(255, 255, 255, .06), 0 10px 28px rgba(0, 0, 0, .5);
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, .06), 0 16px 48px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
:root[data-theme="dark"] .brand img, :root[data-theme="dark"] .auth-logo, :root[data-theme="dark"] .cv-logo { filter: invert(1) hue-rotate(180deg) brightness(1.1); }
:root[data-theme="dark"] .wa-btn { color: #3ddc84; background: rgba(61, 220, 132, .14); }
:root[data-theme="dark"] .seg-b.active { background: #3a3a3e !important; }
:root[data-theme="dark"] .wa-bubble { background: #1f5c3a !important; color: #e8f5ec !important; }

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; letter-spacing: -0.003em; }
h1, h2, h3, h4 { margin: 0; color: var(--text); }
p { margin: 0; }
a { color: var(--brand); text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }
svg.ic { flex: none; display: inline-block; vertical-align: -0.18em; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }
.grow { flex: 1 1 auto; min-width: 0; }
.muted { color: var(--text-faint); }
.small { font-size: 12.5px; }
.mono { font-family: var(--mono); font-size: .92em; }
.neg { color: var(--danger); }
.pos { color: var(--ok); }
.warnc { color: var(--warn); }
.mb { margin-bottom: 16px; }
.mt { margin-top: 12px; }
.center { text-align: center; padding: 12px; }
.btn-row, .row-gap { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.hscroll { overflow-x: auto; }
.clickable { cursor: pointer; }

/* ---------- campos ---------- */
input, select, textarea { font: inherit; font-size: 14px; color: var(--text); background: var(--surface); border: 0; box-shadow: inset 0 0 0 1px var(--border); border-radius: 10px; padding: 0 12px; height: 40px; width: 100%; outline: none; transition: box-shadow .15s; min-width: 0; }
textarea { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
select { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
input:focus, select:focus, textarea:focus { box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 4px var(--brand-soft); }
input[type="checkbox"] { width: 18px; height: 18px; padding: 0; box-shadow: none; accent-color: var(--brand); flex: none; cursor: pointer; }
input[type="search"]::-webkit-search-cancel-button { display: none; }
input[type="number"] { font-variant-numeric: tabular-nums; }
::placeholder { color: var(--text-faint); opacity: 1; }

/* ---------- botões ---------- */
.btn-primary, .btn-tint, .btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background .15s, box-shadow .15s, transform .1s; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-tint { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.btn-tint:hover { background: var(--surface-2); }
.btn-tint.on { background: var(--brand-soft); color: var(--brand); box-shadow: none; }
.btn-primary:active, .btn-tint:active { transform: scale(.98); }
.btn-primary.sm, .btn-tint.sm { height: 30px; padding: 0 12px; font-size: 12.5px; }
.btn-primary.wide, .btn-tint.wide { width: 100%; height: 44px; font-size: 15px; }
.btn-link { color: var(--brand); font-weight: 500; font-size: 13px; padding: 4px 8px; border-radius: 8px; white-space: nowrap; }
.btn-link:hover { background: var(--brand-soft); }
.btn-link.danger { color: var(--danger); }
.btn-link.danger:hover { background: var(--danger-soft); }
.icon-btn { width: 36px; height: 36px; border-radius: 10px; display: inline-grid; place-items: center; color: var(--text-soft); position: relative; flex: none; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); transition: background .15s, color .15s; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn.ghost { background: transparent; box-shadow: none; }
.icon-btn.ghost:hover { background: var(--chip); }
.icon-btn.sm { width: 28px; height: 28px; border-radius: 8px; }
.icon-btn.xs { width: 22px; height: 22px; border-radius: 6px; }
.icon-btn.primary { background: var(--brand); color: #fff; box-shadow: none; border-radius: 50%; }
.icon-btn.primary:hover { background: var(--brand-hover); color: #fff; }
.icon-btn.on { color: #ff9f0a; }
.chip-add { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; color: var(--text-soft); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.chip-add:hover { color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.filebtn { cursor: pointer; position: relative; }

/* ---------- estrutura ---------- */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 12px; margin: 12px 0 12px 12px; height: calc(100vh - 24px); background: var(--surface); border-radius: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; padding: 20px 10px 10px; z-index: 30; }
.brand { padding: 2px 12px 18px; }
.brand img { height: 21px; width: auto; display: block; }
#nav { flex: 1; overflow-y: auto; scrollbar-width: none; }
#nav::-webkit-scrollbar { display: none; }
.nav-label { font-size: 11.5px; color: var(--text-faint); font-weight: 500; padding: 16px 12px 6px; }
.cfg-menu { max-width: 720px; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 7px 10px; border-radius: 10px; color: var(--text-soft); font-size: 13.5px; font-weight: 500; margin: 1px 0; }
.nav-item .tx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.nav-item.kid { font-size: 13px; padding: 6px 10px; }
.nav-row { display: flex; align-items: center; }
.nav-row .nav-item { flex: 1; min-width: 0; }
.nav-exp { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--text-faint); flex: none; }
.nav-exp:hover { background: var(--surface-2); }
.nav-exp svg { transition: transform .2s; }
.nav-exp.open svg { transform: rotate(90deg); }
.nav-kids { padding-left: 16px; }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
/* número discreto (conversas novas no NouzChat) */
.badge.soft { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 10.5px; line-height: 1; color: var(--brand); background: var(--brand-soft); }
.nav-item.active .badge.soft { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.collapse-btn { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border-radius: 10px; color: var(--text-faint); font-size: 13px; margin-top: 6px; }
.collapse-btn:hover { background: var(--surface-2); color: var(--text); }
body.side-collapsed .app { grid-template-columns: 80px minmax(0, 1fr); }
body.side-collapsed .side { padding: 20px 10px 10px; }
body.side-collapsed .brand { padding: 2px 0 18px; display: flex; justify-content: center; }
body.side-collapsed .brand img { width: 22px; height: 22px; object-fit: cover; object-position: 0 50%; }
body.side-collapsed .nav-item .tx, body.side-collapsed .nav-label, body.side-collapsed .nav-exp, body.side-collapsed .collapse-btn .tx { display: none; }
body.side-collapsed .nav-item, body.side-collapsed .collapse-btn { justify-content: center; padding: 9px 0; position: relative; }
body.side-collapsed .nav-kids { padding-left: 0; }
body.side-collapsed .nav-label + * { margin-top: 12px; }
body.side-collapsed .badge { position: absolute; top: 2px; right: 6px; min-width: 16px; height: 16px; font-size: 10px; }
.side-scrim { display: none; }

.main { min-width: 0; padding: 0 32px 56px; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px 0; margin: 0 -4px; padding-left: 4px; padding-right: 4px; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.menu-btn { display: none; }
.search-wrap { flex: 1; max-width: 400px; position: relative; }
.search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
.search-inp { height: 38px; padding: 0 46px 0 36px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 500 11px/1 var(--font); color: var(--text-faint); background: var(--surface-2); padding: 4px 6px; border-radius: 6px; border: 0; pointer-events: none; }
.search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 300px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; display: none; z-index: 40; }
.search-results.show { display: block; }
.sr-item { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; cursor: pointer; color: var(--text-soft); }
.sr-item.sel, .sr-item:hover { background: var(--brand-soft); color: var(--brand); }
.sr-t { display: flex; flex-direction: column; color: var(--text); font-size: 13.5px; min-width: 0; }
.sr-t small { color: var(--text-faint); font-size: 12px; }
.sr-empty { padding: 14px; color: var(--text-faint); font-size: 13px; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.create-btn { margin-right: 6px; }
.nbadge { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--bg); }
.me-btn { margin-left: 6px; border-radius: 50%; }
.me-btn .av-sm { width: 32px; height: 32px; font-size: 12px; }
.wrap { max-width: 1240px; margin: 0 auto; outline: none; }

/* ---------- cabeçalho de página e barras ---------- */
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 20px 0 22px; flex-wrap: wrap; }
.ph-l { min-width: 0; }
.ph-crumb { font-size: 12.5px; color: var(--text-faint); margin-bottom: 4px; font-weight: 500; }
.ph h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.028em; line-height: 1.15; outline: none; }
.ph p { color: var(--text-soft); margin-top: 6px; font-size: 14px; }
.ph p b { color: var(--text); }
.ph-r { display: flex; gap: 8px; align-items: center; }
.tb { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.tb-l, .tb-r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.tb-l { flex: 1 1 auto; }
.seg { display: inline-flex; padding: 3px; background: var(--chip); border-radius: 10px; gap: 2px; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg-b { height: 30px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-soft); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: background .15s, color .15s; }
.seg-b:hover { color: var(--text); }
.seg-b.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .04); font-weight: 600; }
.seg.sm .seg-b { height: 26px; padding: 0 10px; font-size: 12.5px; }
.seg.icons .seg-b { padding: 0 9px; }
.tn { font-size: 11.5px; color: var(--text-faint); font-weight: 600; font-variant-numeric: tabular-nums; }
.month-nav { display: flex; align-items: center; gap: 4px; }
.month-nav b { font-size: 14px; font-weight: 600; min-width: 136px; text-align: center; }
.fpanel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; background: var(--surface); border-radius: 14px; margin-bottom: 14px; box-shadow: var(--shadow); }
.fsel { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 30px 0 12px; border-radius: 10px; background: var(--surface-2); font-size: 13px; cursor: pointer; }
.fsel > span { color: var(--text-faint); white-space: nowrap; }
.fsel select, .fsel input { height: 32px; border: 0; box-shadow: none !important; background: transparent; padding: 0; font-weight: 600; font-size: 13px; width: auto; color: var(--text); background-image: none; }
.fsel svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
.fsel.on { background: var(--brand-soft); }
.fsel.on select { color: var(--brand); }
.sbox { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); color: var(--text-faint); min-width: 220px; }
.sbox input { border: 0; box-shadow: none !important; background: transparent; padding: 0; height: 100%; font-size: 13px; }
.sbox:focus-within { box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 4px var(--brand-soft); }

/* ---------- cartões e listas ---------- */
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px 8px; min-height: 52px; }
.card-h h2 { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; letter-spacing: -0.01em; min-width: 0; }
.card-b { padding: 8px 20px 20px; }
.card-b > p.muted:first-child { margin-bottom: 14px; }
.card > .list { padding: 6px 8px; }
.card-h + .list { padding-top: 0; }
.card > .empty { padding: 44px 20px; }
.list { display: flex; flex-direction: column; }
.li2 { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; min-height: 52px; min-width: 0; }
.li2:hover { background: var(--surface-2); }
.li2.off { opacity: .55; }
.li2.read { opacity: .55; }
.li2.col { flex-direction: column; align-items: stretch; }
.li-main { flex: 1; min-width: 0; }
.li-t { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 7px; }
.li-sub { font-size: 12.5px; color: var(--text-faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li2.task.done .li-t { text-decoration: line-through; color: var(--text-faint); }
.lead-ic { width: 32px; height: 32px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; color: var(--text-soft); flex: none; }
.li2:hover .lead-ic { background: var(--surface-3); }
.num { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 13.5px; white-space: nowrap; }
.num small { color: var(--text-faint); font-weight: 500; font-size: 11.5px; }
.due { font-size: 12.5px; color: var(--text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.due.late { color: var(--danger); font-weight: 600; }
.cdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-soft); white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: var(--chip); flex: none; }
.pill, .pub-st { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--chip); color: var(--text-soft); white-space: nowrap; flex: none; }
.pill.blue, .pub-st.agendada { background: var(--brand-soft); color: var(--brand); }
.pill.green, .pub-st.publicada { background: var(--ok-soft); color: var(--ok); }
.pill.amber, .pub-st.incompleta { background: var(--warn-soft); color: var(--warn); }
.pill.red, .pub-st.erro { background: var(--danger-soft); color: var(--danger); }
.pill-btn { cursor: pointer; }
.pill-btn:hover { filter: brightness(.95); }
.ok-ic { color: var(--ok); display: inline-grid; width: 28px; place-items: center; }
.tcheck, .sub-row .box { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--text-faint); display: inline-grid; place-items: center; flex: none; color: #fff; transition: background .15s, box-shadow .15s; }
.sub-row .box { border-radius: 6px; }
.tcheck:hover, .sub-row .box:hover { box-shadow: inset 0 0 0 1.5px var(--brand); }
.tcheck.on, .sub-row .box.on { background: var(--brand); box-shadow: none; }
.pri-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--danger); flex: none; }
.av-sm { display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 600; flex: none; letter-spacing: .02em; }
.avs { display: inline-flex; flex: none; }
.avs .av-sm + .av-sm { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
.cav { border-radius: 30%; }
.empty { text-align: center; padding: 36px 16px; color: var(--text-faint); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty svg { opacity: .55; }
.empty p { font-size: 14px; }
.hint { color: var(--text-faint); font-size: 12.5px; margin: 12px 2px; display: flex; align-items: center; gap: 6px; }
.note { background: var(--brand-soft); color: var(--text); border-radius: 12px; padding: 10px 12px; font-size: 13px; margin: 12px 0; }
.callout { display: flex; gap: 14px; align-items: center; background: var(--brand-soft); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; color: var(--brand); flex-wrap: wrap; }
.callout b { color: var(--text); font-size: 14px; }
.callout p { margin-top: 2px; color: var(--text-soft); font-size: 13px; }
.warn-bar { display: flex; gap: 8px; align-items: center; background: var(--danger-soft); color: var(--danger); padding: 10px 14px; border-radius: 12px; font-size: 13px; font-weight: 500; margin-bottom: 16px; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.fold > summary, .fold-plain > summary { display: flex; align-items: center; gap: 8px; padding: 16px 20px; cursor: pointer; font-weight: 600; font-size: 14px; }
.fold > summary::after, .fold-plain > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--text-faint); border-bottom: 1.5px solid var(--text-faint); transform: rotate(-45deg); transition: transform .2s; }
.fold[open] > summary::after, .fold-plain[open] > summary::after { transform: rotate(45deg); }
.fold > .list { padding: 0 8px 8px; }
.fold-plain { margin-top: 18px; }
.fold-plain > summary { padding: 8px 4px; color: var(--text-soft); }
.fold-plain > summary::after { margin-left: 4px; }
.group-h { font-size: 12.5px; font-weight: 600; color: var(--text-soft); padding: 14px 20px 4px; display: flex; align-items: center; gap: 6px; cursor: default; }
.group-h.late { color: var(--danger); }
details.tgroup > .group-h { cursor: pointer; }
.tgroup .list { padding: 0 8px 4px; }
.card > .tgroup:last-child .list { padding-bottom: 8px; }

/* ---------- início ---------- */
.hello { margin: 28px 0 24px; }
.hello-d { font-size: 13px; color: var(--text-faint); font-weight: 500; }
.hello-d::first-letter { text-transform: uppercase; }
.hello h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; margin: 4px 0 6px; outline: none; }
.hello-s { color: var(--text-soft); font-size: 15px; }
.hello-s b { color: var(--text); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat { background: var(--surface); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; align-items: flex-start; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; text-align: left; }
.stat:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.stat-ic { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; margin-bottom: 14px; }
.stat-v { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat-l { font-size: 13px; color: var(--text-soft); margin-top: 2px; }
.grid-home { display: grid; grid-template-columns: 1.45fr 1fr; gap: 16px; align-items: start; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpis.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { background: var(--surface); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi-l { font-size: 12.5px; color: var(--text-soft); font-weight: 500; }
.kpi-v { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-s { font-size: 12px; color: var(--text-faint); }
.drawer .kpi { background: var(--surface-2); box-shadow: none; }
.drawer .kpi-v { font-size: 20px; }

/* ---------- cards em grade ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.ccard { background: var(--surface); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; text-align: left; min-width: 0; transition: transform .15s, box-shadow .15s; }
.ccard.clickable:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.ccard.off { opacity: .55; }
.cc-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-tx b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-top { display: flex; gap: 12px; align-items: flex-start; }
.cc-top b { font-size: 14.5px; font-weight: 600; }
.cc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-soft); margin-top: auto; }
.add-card { align-items: center; justify-content: center; flex-direction: row; gap: 6px; color: var(--brand); font-weight: 600; font-size: 14px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--border); min-height: 128px; }
.add-card:hover { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--brand); }
.snippet { font-size: 12.5px; color: var(--text-faint); line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: pre-line; }
.copy-row { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border-radius: 10px; padding: 4px 4px 4px 12px; min-width: 0; }
.copy-row code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12.5px var(--mono); color: var(--text-soft); }
.copy-row.big { padding: 16px; margin-bottom: 16px; }
.copy-row.big code { white-space: normal; word-break: break-all; font-size: 13px; color: var(--text); }

/* ---------- calendário e kanban ---------- */
.cal { min-width: 760px; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.cal-h, .cal-w { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-h div { padding: 10px 12px; font-size: 12px; color: var(--text-faint); font-weight: 500; }
.cal-d { min-height: 110px; padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line); transition: background .1s; }
.cal-w .cal-d:last-child { border-right: 0; }
.cal-d.out { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.cal-d.out .dn { opacity: .4; }
.cal-dh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.dn { font-size: 12.5px; font-weight: 500; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--text-soft); }
.cal-d.today .dn { background: var(--brand); color: #fff; font-weight: 600; }
.cal-d.drop { background: var(--brand-soft); }
.cal-add { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--text-faint); opacity: 0; }
.cal-d:hover .cal-add, .cal-add:focus { opacity: 1; }
.cal-add:hover { background: var(--brand-soft); color: var(--brand); }
.cal-chip { font-size: 12px; font-weight: 500; padding: 4px 8px; border-radius: 7px; background: color-mix(in srgb, var(--c) var(--tint), var(--surface)); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: grab; flex: none; transition: background .15s; }
.cal-chip:hover { background: color-mix(in srgb, var(--c) var(--tint-h), var(--surface)); }
.cal-chip.done { opacity: .5; text-decoration: line-through; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 2px 12px; font-size: 12.5px; color: var(--text-soft); }
.cal-legend .ctag i { width: 8px; height: 8px; }
.cal-legend .btn-link { padding: 0 4px; margin-left: -4px; font-size: 12.5px; }
.cb-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); width: 100%; }
.cb-seg .seg-b { justify-content: center; }
.cb-go { margin: 4px 0 0 -8px; }


.dragging { opacity: .4; }
.board { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 12px; }
.lane { width: 272px; flex: none; background: var(--chip); border-radius: 18px; display: flex; flex-direction: column; max-height: 76vh; }
.lane-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; }
.lane-h b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane-body { padding: 0 8px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 64px; border-radius: 14px; }
.lane-body.drop { background: var(--brand-soft); }
.kcard { background: var(--surface); border-radius: 14px; padding: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); cursor: grab; transition: box-shadow .15s; }
.kcard:hover { box-shadow: var(--shadow-md); }
.kname { font-size: 13.5px; font-weight: 500; line-height: 1.35; display: flex; gap: 8px; align-items: center; }
.kmeta { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--text-faint); }
.kmeta .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kval { margin-top: 6px; font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.kcard .pbar { margin-top: 10px; }
.idea-add { display: flex; gap: 8px; padding: 16px 20px 8px; }
.idea-add select { width: 200px; flex: none; }

/* ---------- barras e progresso ---------- */
.pbar { height: 6px; background: var(--chip); border-radius: 999px; overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--brand); border-radius: inherit; transition: width .3s; }
.pbar.sm { height: 4px; }
.pbar i.warn { background: var(--danger); }
.prog { display: flex; align-items: center; gap: 8px; width: 110px; font-size: 12px; color: var(--text-faint); flex: none; }
.prog .pbar { flex: 1; }
.load-bar { width: 120px; height: 6px; background: var(--chip); border-radius: 999px; overflow: hidden; flex: none; }
.load-bar i { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.load-bar i.warn { background: var(--warn); }
.quota { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-faint); }
.quota .pbar { width: 90px; }
.split { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 3px; margin: 4px 0 14px; }
.split i { display: block; min-width: 0; }
.s1 { background: var(--brand); }
.s2 { background: var(--brand-2); }
.s3 { background: var(--text); }
.split-leg { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--text-soft); }
.split-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.split-leg b { color: var(--text); font-weight: 600; margin-left: 4px; }
.chart { display: flex; align-items: flex-end; gap: 4px; height: 180px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; border-radius: 10px; padding: 6px 0; min-width: 0; }
.bar-col:hover, .bar-col.sel { background: var(--surface-2); }
.bars { display: flex; gap: 2px; align-items: flex-end; height: 100%; justify-content: center; width: 100%; }
.bars i { width: 7px; border-radius: 4px; min-height: 3px; }
.bars i.r, .legend i.r { background: var(--brand); }
.bars i.p, .legend i.p { background: rgba(118, 118, 128, .35); }
.ml { font-size: 11px; color: var(--text-faint); text-transform: capitalize; }
.bar-col.sel .ml { color: var(--brand); font-weight: 600; }
.legend { display: flex; gap: 12px; font-size: 12px; color: var(--text-soft); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.kind-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.kind-dot.receita { background: var(--ok); }
.kind-dot.despesa { background: var(--danger); }
.w-num { width: 130px; flex: none; }

/* ---------- dados em linhas ---------- */
.dls { display: flex; flex-direction: column; }
.dl { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.dl:last-child { border-bottom: 0; }
.dl > span { color: var(--text-soft); }
.dl b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.dl.col { flex-direction: column; gap: 3px; }
.dl.col b { text-align: left; font-weight: 500; }
.dl.big b { font-size: 17px; }
.na { color: var(--text-faint); font-weight: 400 !important; }
.result { margin-top: 14px; background: var(--surface-2); border-radius: 14px; padding: 4px 14px; }
.rl { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13.5px; gap: 12px; }
.rl > span { color: var(--text-soft); }
.rl b { font-variant-numeric: tabular-nums; }
.rl.big b { font-size: 20px; color: var(--brand); }
.rl small { font-size: 12px; color: var(--text-faint); font-weight: 500; }
.total-line { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-soft); }
.total-line b { font-size: 19px; color: var(--text); font-variant-numeric: tabular-nums; }
.box-card { background: var(--surface-2); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.box-card.hl { background: var(--brand-soft); }
.bc-h { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 13.5px; margin-bottom: 8px; }
.li { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.li:last-child { border-bottom: 0; }
.li b { flex: 1; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li.clickable:hover { background: var(--surface-2); border-radius: 8px; }
.mini-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.mini-kpis.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mini { background: var(--surface-2); border-radius: 12px; padding: 12px; min-width: 0; }
.mini .l { font-size: 11.5px; color: var(--text-soft); }
.mini .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mini .s { font-size: 11px; color: var(--text-faint); }
.chips-wrap { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- precificação e editores ---------- */
.steps { display: flex; gap: 4px; margin-bottom: 16px; overflow-x: auto; padding: 4px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); scrollbar-width: none; }
.steps .step { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--text-soft); white-space: nowrap; }
.steps .step:hover { background: var(--surface-2); }
.steps .step.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.steps .sn { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; box-shadow: inset 0 0 0 1.5px currentColor; flex: none; }
.steps .step.done .sn { background: var(--ok); color: #fff; box-shadow: none; }
.steps .step.active .sn { background: var(--brand); color: #fff; box-shadow: none; }
.wiz-nav { display: flex; justify-content: space-between; margin-top: 16px; }
.erows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; overflow-x: auto; }
.erow { display: grid; grid-template-columns: var(--cols); gap: 8px; align-items: center; }
.erow.eh span { font-size: 12px; color: var(--text-faint); font-weight: 500; padding: 0 2px; }
.erow > b { font-weight: 500; font-size: 14px; }
.ideas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.err-inp { box-shadow: inset 0 0 0 1.5px var(--danger) !important; }
.ed-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.ed-side { position: sticky; top: 76px; }
.contract { white-space: pre-wrap; font: 13.5px/1.7 Georgia, "Times New Roman", serif; padding: 4px 20px 20px; margin: 0; max-height: 70vh; overflow: auto; color: var(--text); }
.drawer-body .contract { padding: 0; max-height: none; }
.doc { font-size: 14px; }
.doc h2 { font-size: 24px; letter-spacing: -0.02em; margin: 6px 0 4px; }
.doc-brand { font-size: 12px; font-weight: 600; color: var(--brand); }
.doc-items { margin: 18px 0 4px; border-top: 1px solid var(--line); }
.doc-items .rl { border-bottom: 1px solid var(--line); }
.doc h4 { margin: 18px 0 4px; font-size: 14px; }
.q-row { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.qn { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; margin-top: 8px; }
.q-main { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.q-opts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.q-opts select { width: auto; }
.q-opts input:not([type="checkbox"]) { flex: 1; min-width: 160px; }
.errs { color: var(--danger); font-size: 12.5px; padding-left: 18px; }
.ob-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.ob-id { display: flex; gap: 10px; align-items: center; min-width: 0; flex: 1; }
.ob-id b { font-size: 15px; font-weight: 600; }
.ob-pct { font-size: 20px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.card > .pbar { margin: 4px 20px 8px; }
.ob-cat > summary { display: flex; justify-content: space-between; padding: 10px 0 6px; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.tn.ok { color: var(--ok); }
.ob-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 6px; border-radius: 8px; font-size: 13.5px; color: var(--text); }
.ob-item:hover { background: var(--surface-2); }
.ob-item.on { color: var(--text-faint); text-decoration: line-through; }
.sop > summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; border-radius: 12px; font-size: 14px; font-weight: 500; }
.sop > summary:hover { background: var(--surface-2); }
.sop-steps { margin: 4px 0 12px; padding: 0 16px 0 40px; display: flex; flex-direction: column; gap: 6px; color: var(--text-soft); font-size: 13.5px; }
.tl-day { padding: 0 8px 8px; }
.ev { display: flex; gap: 12px; padding: 10px; border-radius: 12px; align-items: flex-start; }
.ev:hover { background: var(--surface-2); }
.ev-ic { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); color: var(--text-soft); display: grid; place-items: center; flex: none; }
.ev:hover .ev-ic { background: var(--surface-3); }
.ev-tx { flex: 1; min-width: 0; font-size: 13.5px; }
.ev-meta { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.portal-item { display: flex; gap: 12px; padding: 14px; background: var(--surface-2); border-radius: 14px; margin-bottom: 8px; flex-wrap: wrap; align-items: center; }
.pi-main { flex: 1; min-width: 200px; }
.cap { font-size: 13px; color: var(--text-soft); margin-top: 6px; white-space: pre-wrap; }
.comment { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; font-size: 13px; }
.comment small { color: var(--text-faint); }
.hero-card { padding: 36px 28px; text-align: center; max-width: 560px; margin: 8px auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero-ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.hero-card h2 { font-size: 22px; letter-spacing: -0.02em; }
.ticks { list-style: none; padding: 0; margin: 4px 0 6px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.ticks li { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.ticks svg { color: var(--ok); }
.wa-bubble { background: #dcf8c6; color: #111; border-radius: 14px 14px 14px 4px; padding: 10px 12px; font-size: 13.5px; white-space: pre-wrap; max-width: 420px; }

/* ---------- chat ---------- */
.chat-wrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); height: calc(100vh - 92px); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-top: 16px; }
.ch-side { padding: 12px 10px; overflow-y: auto; border-right: 1px solid var(--line); }
.gl { font-size: 12px; color: var(--text-faint); font-weight: 500; padding: 14px 10px 4px; display: flex; align-items: center; justify-content: space-between; }
.ch-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; border-radius: 10px; font-size: 13.5px; color: var(--text-soft); text-align: left; }
.ch-item > .ch-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* conversa com mensagem nova: nome em destaque e o número ao lado */
.ch-item.unread { color: var(--text); }
.ch-badge { flex: none; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; line-height: 1; color: var(--brand); background: var(--brand-soft); font-variant-numeric: tabular-nums; }
.ch-item > svg, .ch-item .cdot, .ch-item .av-sm, .ch-item .hash { flex: none; }
.hash { width: 16px; text-align: center; color: var(--text-faint); font-weight: 600; }
.ch-item:hover { background: var(--surface-2); }
.ch-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.ch-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ch-head { padding: 12px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ch-head b { font-size: 15px; }
.ch-head .d { color: var(--text-faint); font-size: 12.5px; margin-left: 8px; }
.ch-msgs { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; }
.msg { display: flex; gap: 10px; padding: 8px; border-radius: 12px; position: relative; }
.msg:hover { background: var(--surface-2); }
.mx { flex: 1; min-width: 0; }
.mh { display: flex; align-items: baseline; gap: 8px; }
.mh b { font-size: 13.5px; }
.mtime { font-size: 11.5px; color: var(--text-faint); }
.mbody { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; margin-top: 1px; }
.msg blockquote { margin: 4px 0; padding: 2px 10px; border-left: 2px solid var(--border); color: var(--text-soft); font-size: 12.5px; }
.mention { color: var(--brand); font-weight: 600; }
.msg-acts { position: absolute; top: 6px; right: 8px; display: flex; gap: 2px; opacity: 0; background: var(--surface); border-radius: 8px; box-shadow: var(--shadow-md); padding: 2px; }
.msg:hover .msg-acts, .msg-acts:focus-within { opacity: 1; }
.msg-acts .danger:hover { color: var(--danger); }
/* NouzChat: mensagem que veio de um comentário de post */
.msg-post { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin: 3px 0 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; color: var(--brand); background: var(--brand-soft); text-align: left; }
.msg-post span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-post b { font-weight: 600; }
.msg-post:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.msg-post.off { color: var(--text-faint); background: var(--surface-2); }
.msg .pill { font-size: 10.5px; padding: 1px 7px; }
.msg.editing:hover { background: transparent; }
.msg-edit { margin-top: 4px; }
.msg-edit textarea { font-size: 14px; padding: 8px 12px; border-radius: 12px; resize: none; background: var(--surface); }
.msg-edit-acts { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.msg-edit-acts small { font-size: 11.5px; }
.composer-wrap { border-top: 1px solid var(--line); position: relative; }
.quote-prev { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 18px 0; font-size: 12.5px; color: var(--text-soft); }
.composer { display: flex; gap: 8px; align-items: flex-end; padding: 12px 14px; }
.composer textarea { resize: none; max-height: 140px; min-height: 40px; border-radius: 20px; padding: 9px 16px; }
.mention-box { position: absolute; bottom: 100%; left: 56px; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 4px; display: none; min-width: 220px; z-index: 5; }
.mention-box.show { display: block; }
.mb-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border-radius: 8px; font-size: 13.5px; }
.mb-item.sel, .mb-item:hover { background: var(--brand-soft); }

/* ---------- formulários ---------- */
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field.half { max-width: 260px; }
.flbl { font-size: 13px; font-weight: 500; color: var(--text-soft); }
.req { color: var(--danger); font-weight: 600; }
.fhelp { font-size: 12px; color: var(--text-faint); }
.fsec { grid-column: 1 / -1; font-size: 14px; font-weight: 600; padding-top: 12px; border-top: 1px solid var(--line); }
.fgrid > .fsec:first-child { border-top: 0; padding-top: 0; }
.field.err input, .field.err select, .field.err textarea { box-shadow: inset 0 0 0 1.5px var(--danger); }
.field.err .chipsel { box-shadow: 0 0 0 1.5px var(--danger); border-radius: 10px; }
.field.err .flbl { color: var(--danger); }
.chipsel { display: flex; gap: 6px; flex-wrap: wrap; }
.chipopt { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--text-soft); box-shadow: inset 0 0 0 1px var(--border); background: var(--surface); transition: background .15s; }
.chipopt:hover { box-shadow: inset 0 0 0 1px var(--brand); }
.chipopt.on { background: var(--brand); color: #fff; box-shadow: none; }
.checkline { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.sw { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.sw.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.full-w { width: 100%; margin: 8px 0; }
.sub-list { display: flex; flex-direction: column; gap: 2px; }
.sub-row { display: flex; align-items: center; gap: 8px; }
.sub-row.on .sub-inp { text-decoration: line-through; color: var(--text-faint); }
.sub-inp { box-shadow: none; height: 34px; padding: 0 8px; }
.sub-inp:hover { box-shadow: inset 0 0 0 1px var(--border); }
.sub-row .cnt { color: var(--text-faint); font-size: 12px; }
.sub-add { display: flex; gap: 8px; margin-top: 6px; }
.files { margin-top: 10px; }
.fchips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); font-size: 12.5px; max-width: 100%; }
.files-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.files-add input { flex: 1; min-width: 180px; }
.pub-row { display: flex; gap: 10px; align-items: center; padding: 8px 0; font-size: 13px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.pub-err { color: var(--danger); font-size: 12px; }
.pub-form .field { margin-bottom: 14px; }
.area-groups { display: flex; flex-direction: column; gap: 14px; background: var(--surface-2); border-radius: 14px; padding: 14px; }
.area-gh { font-size: 12px; color: var(--text-faint); font-weight: 500; margin-bottom: 6px; }

/* ---------- painel lateral ---------- */
.drawer-overlay { position: fixed; inset: 0; overflow: hidden; background: rgba(0, 0, 0, .2); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 50; } /* overflow: a gaveta fechada fica 28px pra fora e criava rolagem lateral no celular */
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer { position: absolute; top: 10px; right: 10px; bottom: 10px; width: min(480px, calc(100vw - 20px)); background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; transform: translateX(28px); opacity: 0; transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s; overflow: hidden; }
.drawer-overlay.open .drawer { transform: none; opacity: 1; }
.drawer.wide { width: min(640px, calc(100vw - 20px)); }
.drawer.xwide { width: min(880px, calc(100vw - 20px)); }
.drawer-head { padding: 20px 20px 12px 24px; flex: none; }
.dh-top { display: flex; gap: 12px; align-items: flex-start; }
.dh-title { flex: 1; min-width: 0; }
.dh-title h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.018em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dh-sub { color: var(--text-soft); font-size: 13px; margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dh-kicker { font-size: 12px; color: var(--text-faint); font-weight: 500; margin-bottom: 4px; }
.title-inp { font-size: 20px; font-weight: 700; box-shadow: none; padding: 0; height: 34px; background: transparent; letter-spacing: -0.018em; border-radius: 0; }
.title-inp:focus { box-shadow: inset 0 -2px 0 var(--brand); }
.dh-metrics { display: flex; gap: 24px; margin-top: 12px; }
.dh-metrics .l { font-size: 11.5px; color: var(--text-faint); }
.dh-metrics .v { font-size: 15px; font-weight: 600; }
.cf-id { display: flex; gap: 12px; align-items: center; }
.drawer-tabs { display: flex; gap: 4px; padding: 0 20px 10px; overflow-x: auto; flex: none; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.dt { height: 30px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-soft); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.dt:hover { background: var(--surface-2); }
.dt.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 24px 24px; }
.drawer-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); }
.drawer-sec { margin-top: 20px; }
.drawer-sec:first-child { margin-top: 0; }
.drawer-sec.boxed { background: var(--surface-2); border-radius: 14px; padding: 14px; margin-top: 12px; }
.sh { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.action-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cf-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; }
.wizard { display: grid; grid-template-columns: 200px minmax(0, 1fr); flex: 1; min-height: 0; }
.wizard .drawer-body { min-height: 0; }
.steps-rail { padding: 12px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line); }
.steps-rail .step { display: flex; gap: 10px; align-items: center; text-align: left; padding: 9px 10px; border-radius: 12px; }
.steps-rail .step b { display: block; font-size: 13px; font-weight: 600; }
.steps-rail .step small { display: block; font-size: 11.5px; color: var(--text-faint); }
.steps-rail .step:hover { background: var(--surface-2); }
.steps-rail .step.active { background: var(--brand-soft); }
.steps-rail .sn { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--text-faint); display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: var(--text-soft); flex: none; }
.steps-rail .step.active .sn { background: var(--brand); color: #fff; box-shadow: none; }

/* ---------- menus, modal, aviso ---------- */
.popover { position: fixed; z-index: 95; min-width: 220px; max-width: 300px; max-height: 70vh; overflow-y: auto; background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-radius: 14px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), var(--shadow-lg); padding: 6px; display: none; }
.popover.open { display: block; animation: pop .14s ease-out; }
@keyframes pop { from { opacity: 0; transform: scale(.97); } }
.pop-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; text-align: left; color: var(--text); }
.pop-item svg { color: var(--text-soft); flex: none; }
.pop-item:hover, .pop-item:focus-visible { background: var(--brand); color: #fff; outline: none; }
.pop-item:hover svg, .pop-item:focus-visible svg { color: #fff; }
.pop-item.danger { color: var(--danger); }
.pop-item.danger svg { color: var(--danger); }
.pop-item.danger:hover, .pop-item.danger:focus-visible { background: var(--danger); color: #fff; }
.pop-item.danger:hover svg, .pop-item.danger:focus-visible svg { color: #fff; }
.pop-item[disabled] { opacity: .4; pointer-events: none; }
.pl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-item .pchk { color: var(--brand); }
.pop-item:focus { outline: none; }
.pop-item:hover .pchk, .pop-item:focus-visible .pchk { color: #fff; }
.pop-item .psub { margin-left: auto; }
.pdot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin: 0 3px 0 4px; }
/* lista de um campo de opções: mesma largura do campo, nome inteiro visível */
.popover.sel-pop { max-width: min(360px, calc(100vw - 16px)); }
.popover.sel-pop .pop-item .pl { white-space: normal; }
.popover.sel-pop .pi-sp { display: none; }
/* item com cor: o nome fica na cor (sem bolinha) */
.pop-item .pl[style*="--c"] { color: color-mix(in srgb, var(--c) 85%, var(--text)); font-weight: 500; }
.pop-item:hover .pl[style*="--c"], .pop-item:focus-visible .pl[style*="--c"] { color: #fff; }
/* a opção escolhida continua na cor configurada, com a lista fechada também */
select.sel-c, .fsel.on select.sel-c { color: color-mix(in srgb, var(--sc) 85%, var(--text)); }
.field select.sel-c { font-weight: 500; }
.chipopt.cc { color: color-mix(in srgb, var(--c) 85%, var(--text)); }
.chipopt.cc:hover { box-shadow: inset 0 0 0 1px var(--c); }
.chipopt.cc.on { background: color-mix(in srgb, var(--c) 16%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--c); }

/* calendário */
input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { display: none; }
input[type="date"], input[type="time"] { cursor: pointer; }
.datepop { position: fixed; z-index: 96; width: 272px; padding: 10px; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), var(--shadow-lg); display: none; }
.datepop.open { display: block; animation: pop .14s ease-out; }
.dp-h { display: flex; align-items: center; justify-content: space-between; padding: 0 0 8px; }
.dp-h b { font-size: 14px; font-weight: 600; }
.dp-h button { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--text-soft); }
.dp-h button:hover { background: var(--surface-2); color: var(--text); }
.dp-w, .dp-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.dp-w span { display: block; text-align: center; font-size: 11px; font-weight: 600; color: var(--text-faint); padding: 2px 0 6px; }
.dp-d { height: 32px; width: 100%; display: grid; place-items: center; text-align: center; padding: 0; border-radius: 9px; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.dp-d:hover { background: var(--surface-2); }
.dp-d.o { color: var(--text-faint); }
.dp-d.t { color: var(--brand); font-weight: 700; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 35%, transparent); }
.dp-d.on, .dp-d.on:hover { background: var(--brand); color: #fff; font-weight: 600; box-shadow: none; }
.dp-d:disabled { opacity: .3; pointer-events: none; }
.dp-f { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.dp-f button { font-size: 13px; font-weight: 500; color: var(--brand); padding: 4px 8px; border-radius: 8px; }
.dp-f button:hover { background: var(--brand-soft); }
.timepop { width: 168px; }
.tp-head { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 0 6px; }
.tp-head span { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-faint); }
.tp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tp-col { height: 216px; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 2px; scroll-behavior: auto; }
.tp-col::-webkit-scrollbar { display: none; }
.tp-o { flex: none; height: 32px; width: 100%; display: grid; place-items: center; text-align: center; border-radius: 9px; font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.tp-o:hover { background: var(--surface-2); }
.tp-o.on, .tp-o.on:hover { background: var(--brand); color: #fff; font-weight: 600; }
.pi-sp { width: 16px; flex: none; }
.pop-sep { height: 1px; background: var(--line); margin: 5px 8px; }
.pop-h { padding: 8px 10px 4px; font-size: 12px; color: var(--text-faint); font-weight: 500; }
.pop-h b { display: block; color: var(--text); font-size: 14px; font-weight: 600; }
.pop-h small { display: block; font-size: 12px; color: var(--text-faint); }
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .25); display: none; place-items: center; z-index: 90; padding: 16px; }
.modal.open { display: grid; }
.modal-box { background: var(--surface); border-radius: 18px; padding: 22px; width: min(400px, 100%); box-shadow: var(--shadow-lg); }
.modal-box p { font-size: 14.5px; line-height: 1.5; }
.modal-box h4 { margin-bottom: 12px; font-size: 17px; }
.modal-box .flbl { display: block; margin-bottom: 6px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 16px); background: rgba(28, 28, 30, .92); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 100; backdrop-filter: blur(10px); max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- login e convite ---------- */
body.auth-mode .app, body.auth-mode .side-scrim { display: none; }
.auth { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: var(--bg); z-index: 70; overflow-y: auto; }
.auth[hidden] { display: none; }
.auth-card { width: min(400px, 100%); background: var(--surface); border-radius: 24px; padding: 36px 32px; box-shadow: var(--shadow-md); }
.auth-logo { height: 24px; width: auto; display: block; margin-bottom: 28px; }
.auth-card h1 { font-size: 26px; letter-spacing: -0.025em; margin-bottom: 6px; }
.auth-card > p { margin-bottom: 20px; font-size: 14px; }
.auth-card > p.small { margin: 18px 0 0; text-align: center; }
.auth-card .fgrid { grid-template-columns: 1fr; margin-bottom: 18px; }
.auth-areas { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 20px; }
.auth-err { color: var(--danger); font-size: 13px; min-height: 18px; margin: -8px 0 10px; }

/* ---------- WhatsApp, situação do cliente, foto ---------- */
.wa-btn { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #128c4a; background: rgba(37, 211, 102, .14); white-space: nowrap; flex: none; letter-spacing: 0; }
.wa-btn:hover { background: rgba(37, 211, 102, .26); }
.li-t .tt, .kname .tt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kname .tt { flex: 0 1 auto; }
.pnum { font-family: var(--mono); font-size: .95em; color: var(--text-soft); }
.pill-btn svg { margin-right: -3px; opacity: .7; }
.kpis.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.callout.soft { background: var(--surface); box-shadow: var(--shadow); color: var(--text-soft); }
.sit { display: flex; align-items: center; gap: 2px; margin-top: 10px; padding: 3px; background: var(--surface-2); border-radius: 10px; flex-wrap: wrap; width: fit-content; max-width: 100%; }
.sit-l { font-size: 10px; font-weight: 700; color: var(--text-faint); padding: 0 6px 0 6px; text-transform: uppercase; letter-spacing: .07em; }
.sit-b { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--text-faint); transition: background .15s, color .15s; }
.sit-b i { width: 7px; height: 7px; border-radius: 50%; flex: none; opacity: .55; }
.sit-b.green i { background: var(--ok); } .sit-b.blue i { background: var(--brand); } .sit-b.red i { background: var(--danger); }
.sit-b:hover { color: var(--text); }
.sit-b.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.sit-b.on i { opacity: 1; }
.cf-names { min-width: 0; }
.cf-photo { position: relative; display: inline-block; cursor: pointer; flex: none; border-radius: 30%; }
.cf-photo .cf-cam { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-md); display: grid; place-items: center; color: var(--text-soft); }
.cf-photo:hover .cf-cam { color: var(--brand); }
.cf-photo:focus-within { outline: 2px solid var(--brand); outline-offset: 3px; }
.photo-row { display: flex; gap: 16px; align-items: center; padding: 2px 0 18px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.photo-row .mt { margin-top: 8px; }

/* ---------- CRM: coluna Fazer contato ---------- */
.lane-fc { background: var(--warn-soft); }
.lane-fc .lane-h b { color: var(--warn); display: flex; align-items: center; gap: 6px; }
.kfc { font-size: 12px; color: var(--warn); margin-top: 7px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.kfc b { font-weight: 600; }
.kdone { margin-top: 10px; width: 100%; }
.lane-empty { font-size: 12.5px; color: var(--text-faint); padding: 6px 6px 10px; }
.kcard.inat { opacity: .8; }

/* ---------- slides (16:9; o texto acompanha a largura) ---------- */
/* ---------- slides: seguem a identidade visual (Configurações › Identidade visual) ---------- */
.slide { position: relative; aspect-ratio: 16 / 9; width: 100%; container-type: inline-size; overflow: hidden; display: flex; background: var(--bk-light, #fff); color: var(--bk-on-light, #0b0b0f); font-family: var(--bk-font, var(--font)); text-align: left; letter-spacing: -0.01em; line-height: 1.3; }
.slide.bg-escuro { background: var(--bk-dark, #0b0b0f); color: var(--bk-on-dark, #fff); }
.slide.bg-azul { background: var(--bk-accent, #1236ff); color: var(--bk-on-accent, #fff); }
.slide.panel { background: var(--bk-light, #fff); color: var(--bk-on-light, #0b0b0f); flex-direction: column; }
.sl-top { position: absolute; top: 3.6cqw; left: 5.5cqw; right: 5.5cqw; display: flex; align-items: center; justify-content: space-between; gap: 2cqw; z-index: 2; pointer-events: none; }
.sl-top .bk-logo { height: 2.2cqw; width: auto; max-width: 22cqw; object-fit: contain; object-position: left center; }
.sl-meta { font-size: 1cqw; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.sl-tr { display: flex; align-items: center; gap: 1.2cqw; }
.sl-pg { font-size: 1.1cqw; font-weight: 800; opacity: .5; font-variant-numeric: tabular-nums; }
.sl-arw { width: 3.4cqw; height: 3.4cqw; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--bk-accent); color: var(--bk-on-accent); }
.sl-arw svg { width: 52%; height: 52%; transform: rotate(45deg); }
.bg-azul .sl-arw { background: var(--bk-light); color: var(--bk-accent); }
.bg-escuro .sl-arw { background: var(--bk-accent2); color: var(--bk-on-accent2); }
.sl-bot { position: absolute; left: 5.5cqw; right: 5.5cqw; bottom: 3.2cqw; display: flex; justify-content: space-between; align-items: flex-end; gap: 3cqw; font-size: .95cqw; text-transform: uppercase; letter-spacing: .03em; z-index: 2; pointer-events: none; }
.sl-bot b { font-weight: 800; }
.sl-bot > span { opacity: .55; font-weight: 700; }
.sl-main { flex: 1; min-width: 0; padding: 9.5cqw 5.5cqw 7cqw; display: flex; flex-direction: column; gap: 1.5cqw; position: relative; z-index: 1; }
.sl-kicker { align-self: flex-start; display: inline-flex; align-items: center; padding: .5cqw 1.5cqw; border-radius: 99px; background: var(--bk-accent2); color: var(--bk-on-accent2); font-size: 1.05cqw; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.bg-azul .sl-kicker { background: var(--bk-light); color: var(--bk-on-light); }
.sl-h1, .sl-h2 { font-family: var(--bk-title, inherit); font-weight: var(--bk-tw, 700); text-transform: var(--bk-tt, none); letter-spacing: var(--bk-tls, -0.03em); line-height: var(--bk-tlh, 1); white-space: pre-wrap; }
.sl-h1 { font-size: calc(10cqw * var(--bk-tsz, 1)); }
.sl-h2 { font-size: calc(5.8cqw * var(--bk-tsz, 1)); color: var(--bk-tc, inherit); }
.bg-escuro .sl-h2, .bg-azul .sl-h2 { color: inherit; }
.sl-sub { font-family: var(--bk-serif, inherit); font-size: 2.1cqw; line-height: 1.25; opacity: .85; white-space: pre-wrap; }
.sl-p { font-size: 1.45cqw; line-height: 1.6; white-space: pre-wrap; opacity: .85; max-width: 52cqw; }
.sl-side { width: 38%; flex: none; position: relative; margin: 9.5cqw 5.5cqw 7cqw 0; border-radius: 1.4cqw; overflow: hidden; z-index: 1; }
.sl-side img, .sl-cimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.has-side .sl-p { max-width: none; }
/* capa e fechamento: painel grande colorido numa página clara */
.sl-panel { position: relative; z-index: 1; flex: 1; min-height: 0; margin: 7.4cqw 5.5cqw 5.5cqw; border-radius: 1.6cqw; display: flex; overflow: hidden; background: var(--bk-accent2); color: var(--bk-on-accent2); }
.bg-azul .sl-panel { background: var(--bk-accent); color: var(--bk-on-accent); }
.bg-escuro .sl-panel { background: var(--bk-dark); color: var(--bk-on-dark); }
.sl-pmain { position: relative; flex: 1; min-width: 0; padding: 3.6cqw 4cqw 3.4cqw; display: flex; flex-direction: column; justify-content: flex-end; gap: 1.3cqw; }
.sl-panel .sl-side { margin: 0; border-radius: 0; width: 40%; }
.sl-arw.big { position: absolute; right: 3.4cqw; bottom: 3.4cqw; width: 4.4cqw; height: 4.4cqw; }
.sl-panel .sl-h1 { padding-right: 7cqw; }
.l-capa .sl-sub { font-family: var(--bk-font, inherit); font-size: 1.4cqw; opacity: .85; padding-right: 7cqw; }
.l-fechamento .sl-pmain { justify-content: center; }
.sl-foot { font-size: 1.4cqw; opacity: .8; white-space: pre-wrap; }
.sl-contact { display: flex; gap: 4cqw; margin-top: 1.4cqw; font-size: 1.15cqw; }
.sl-contact span { display: flex; flex-direction: column; gap: .2cqw; }
.sl-contact small { font-size: .8em; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; opacity: .65; }
/* lista: pilares em barras coloridas (destaque 2, destaque e escura se revezando) */
.sl-list { list-style: none; padding: 0; margin: .8cqw 0 0; display: grid; gap: 1cqw; max-width: 58cqw; }
.sl-list.cols { grid-template-columns: 1fr 1fr; max-width: none; }
.has-side .sl-list { max-width: none; }
.sl-list li { display: flex; align-items: center; gap: 2cqw; min-height: 4cqw; font-size: 1.55cqw; font-weight: 600; line-height: 1.25; padding: .9cqw 1.8cqw; border-radius: .9cqw; background: var(--bk-accent2); color: var(--bk-on-accent2); }
.sl-list li:nth-child(3n+2) { background: var(--bk-accent); color: var(--bk-on-accent); }
.sl-list li:nth-child(3n) { background: var(--bk-dark); color: var(--bk-on-dark); }
.bg-escuro .sl-list li:nth-child(3n) { background: var(--bk-light); color: var(--bk-on-light); }
.bg-azul .sl-list li:nth-child(3n+2) { background: var(--bk-light); color: var(--bk-on-light); }
.sl-list li b { flex: none; min-width: 12cqw; font-weight: 700; }
.sl-list li span { font-size: .78em; font-weight: 500; opacity: .9; }
/* sumário: 1/ título, num cartão escuro */
.sl-toc { list-style: none; margin: .8cqw 0 0; padding: 2.4cqw 2.8cqw; counter-reset: toc; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5cqw 4cqw; border-radius: 1.4cqw; background: var(--bk-dark); color: var(--bk-on-dark); }
.bg-escuro .sl-toc { background: color-mix(in srgb, var(--bk-on-dark) 7%, transparent); box-shadow: inset 0 0 0 .12cqw color-mix(in srgb, var(--bk-on-dark) 18%, transparent); }
.sl-toc li { counter-increment: toc; display: flex; align-items: baseline; gap: 1cqw; font-size: 2.1cqw; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.sl-toc li::before { content: counter(toc) "/"; opacity: .4; }
/* cases: cartões sólidos com a /etiqueta no canto */
.sl-cases { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1.4cqw; margin-top: .8cqw; flex: 1; min-height: 0; align-items: stretch; }
.sl-case { position: relative; border-radius: 1.2cqw; overflow: hidden; display: flex; flex-direction: column; min-width: 0; padding-bottom: 3.4cqw; background: var(--bk-accent); color: var(--bk-on-accent); }
.sl-case:nth-child(3n+2) { background: var(--bk-dark); color: var(--bk-on-dark); }
.sl-case:nth-child(3n) { background: color-mix(in srgb, var(--bk-on-light) 7%, var(--bk-light)); color: var(--bk-on-light); box-shadow: inset 0 0 0 .1cqw color-mix(in srgb, var(--bk-on-light) 45%, transparent); }
.bg-escuro .sl-case:nth-child(3n+2) { background: var(--bk-accent2); color: var(--bk-on-accent2); }
.bg-azul .sl-case:nth-child(3n+1) { background: var(--bk-light); color: var(--bk-on-light); }
.sl-cimg { position: relative; aspect-ratio: 16 / 10; background: color-mix(in srgb, currentColor 12%, transparent); }
.sl-case .t { margin: 1.4cqw 1.6cqw 0; font-size: 2cqw; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.05; }
.sl-case .d { font-size: 1.3cqw; opacity: .85; padding: .7cqw 1.6cqw 0; white-space: pre-wrap; }
.sl-case .tag { position: absolute; right: 1.6cqw; bottom: 1.3cqw; font-size: 1cqw; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.l-imagem .sl-full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sl-cap { position: absolute; left: 6cqw; bottom: 5cqw; right: 6cqw; font-size: 3cqw; font-weight: 700; letter-spacing: -0.02em; color: #fff; text-shadow: 0 .2cqw 1.8cqw rgba(0, 0, 0, .45); }
.l-imagem:not(:has(.sl-full)) .sl-cap { color: inherit; text-shadow: none; }
/* proposta: serviços em caixas coloridas e o total grande */
.sl-prop { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 4cqw; align-items: end; }
.sl-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; }
.sl-box { border-radius: .9cqw; padding: 1.1cqw 1.4cqw; display: flex; align-items: center; gap: 1.2cqw; min-width: 0; background: var(--bk-accent2); color: var(--bk-on-accent2); }
.sl-box:nth-child(4n+2) { background: var(--bk-accent); color: var(--bk-on-accent); }
.sl-box:nth-child(4n+3) { background: var(--bk-dark); color: var(--bk-on-dark); }
.sl-box:nth-child(4n) { background: color-mix(in srgb, var(--bk-on-light) 8%, var(--bk-light)); color: var(--bk-on-light); }
.sl-box b { font-family: var(--bk-title, inherit); font-weight: var(--bk-tw, 700); letter-spacing: var(--bk-tls, 0); font-size: calc(2.3cqw * var(--bk-tsz, 1)); line-height: 1; white-space: nowrap; }
.sl-box span { font-size: 1cqw; font-weight: 600; line-height: 1.2; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sl-disc { font-size: 1.1cqw; opacity: .65; margin-top: 1cqw; }
.sl-total > span { display: block; font-size: 1.5cqw; font-weight: 600; }
.sl-total > b { display: block; margin-top: .4cqw; font-family: var(--bk-title, inherit); font-weight: var(--bk-tw, 700); text-transform: var(--bk-tt, none); letter-spacing: var(--bk-tls, 0); font-size: calc(5.6cqw * var(--bk-tsz, 1)); line-height: 1; color: var(--bk-tc, inherit); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bg-escuro .sl-total > b, .bg-azul .sl-total > b { color: inherit; }
.sl-total small { font-size: .4em; letter-spacing: 0; opacity: .7; }
.sl-pay { font-size: 1.2cqw; opacity: .7; margin-top: .8cqw; }
/* alinhamento do texto do slide (esquerda é o padrão) */
.slide.al-centro :is(.sl-main, .sl-pmain) { align-items: center; text-align: center; }
.slide.al-dir :is(.sl-main, .sl-pmain) { align-items: flex-end; text-align: right; }
.slide.al-centro :is(.sl-kicker, .sl-add) { align-self: center; }
.slide.al-dir :is(.sl-kicker, .sl-add) { align-self: flex-end; }
.slide.al-centro .sl-panel .sl-h1, .slide.al-centro .l-capa .sl-sub { padding-right: 0; }
.slide.al-centro .sl-contact { justify-content: center; }
.slide.al-dir .sl-contact { justify-content: flex-end; }
.slide.al-centro .sl-list li, .slide.al-dir .sl-list li { text-align: left; }
/* modo Mover do editor: cada texto vira um bloco que dá pra arrastar */
.slide.moving [data-mv] { cursor: grab; outline: 1.5px dashed rgba(30, 167, 255, .85); outline-offset: 4px; border-radius: 4px; user-select: none; touch-action: none; }
.slide.moving [data-mv]:hover, .slide.moving [data-mv]:focus { outline: 2px solid #1ea7ff; }
.slide.moving [data-mv].dragging { cursor: grabbing; outline: 2px solid #1ea7ff; z-index: 5; }

.sl-empty, .sl-note { font-size: 1.5cqw;
 border: .15cqw dashed rgba(127, 127, 127, .4); border-radius: 1.2cqw; padding: 2cqw; opacity: .7; margin-top: auto; }
.sl-note { margin-top: 1.5cqw; padding: 1cqw 1.4cqw; border-style: solid; border-color: rgba(127, 127, 127, .2); }
/* editando */
.slide.editing [contenteditable] { outline: none; border-radius: .5cqw; cursor: text; transition: box-shadow .12s; min-width: 4cqw; }
.slide.editing [contenteditable]:hover { box-shadow: 0 0 0 .18cqw rgba(30, 167, 255, .55); }
.slide.editing [contenteditable]:focus { box-shadow: 0 0 0 .22cqw #1ea7ff; }
.slide.editing .is-empty::before { content: attr(data-ph); opacity: .38; pointer-events: none; }
.slide.editing .sl-list li.is-empty::before { content: attr(data-ph); opacity: .38; position: static; width: auto; height: auto; background: none; }
.sl-add { align-self: flex-start; display: inline-flex; align-items: center; gap: .6cqw; font-size: 1.3cqw; font-weight: 600; padding: .6cqw 1.2cqw; border-radius: 99px; background: rgba(127, 127, 127, .14); color: inherit; min-height: 22px; }
.sl-add svg { width: max(1.4cqw, 12px); height: max(1.4cqw, 12px); }
.sl-imgadd { position: absolute; inset: 1.5cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8cqw; border: .2cqw dashed rgba(127, 127, 127, .45); border-radius: 1.2cqw; font-size: 1.4cqw; font-weight: 600; color: inherit; opacity: .65; }
.sl-imgadd:hover { opacity: 1; border-color: #1ea7ff; }
.sl-imgadd.full { inset: 3cqw; }
.sl-imgx, .sl-cx { position: absolute; top: 1.2cqw; right: 1.2cqw; width: max(2.8cqw, 26px); height: max(2.8cqw, 26px); border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; display: grid; place-items: center; z-index: 2; }
.sl-cx { top: .8cqw; right: .8cqw; }
.sl-cimg .sl-imgx { top: .8cqw; right: .8cqw; }

/* ---------- editor de apresentação ---------- */
.dk-top { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; flex-wrap: wrap; }
.dk-name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; height: 44px; flex: 1 1 240px; box-shadow: none; background: transparent; padding: 0 8px; text-overflow: ellipsis; }
.dk-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.dk-name:hover { box-shadow: inset 0 0 0 1px var(--border); }
.dk-saved { display: inline-flex; align-items: center; gap: 4px; }
.dk-link { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.dk-link .fsel { max-width: 100%; }
.dk-link .fsel select { max-width: 380px; overflow: hidden; text-overflow: ellipsis; }
.dk-grid { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 18px; align-items: start; }
.dk-rail { display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 120px); overflow-y: auto; padding: 3px; position: sticky; top: 76px; scrollbar-width: thin; }
.dk-thumb { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 6px; align-items: start; flex: none; border-radius: 8px; }
.dk-tn { border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--border); transition: box-shadow .15s; }
.dk-thumb:hover .dk-tn { box-shadow: 0 0 0 1px var(--text-faint); }
.dk-thumb.on .dk-tn { box-shadow: 0 0 0 2.5px var(--brand); }
.dk-thumb .slide, .dk-cover .slide { pointer-events: none; }
.dk-n { font-size: 11px; font-weight: 600; color: var(--text-faint); text-align: right; line-height: 1.2; font-variant-numeric: tabular-nums; }
.dk-thumb.on .dk-n { color: var(--brand); }
.dk-add { height: 40px; margin-left: 20px; border-radius: 10px; border: 1.5px dashed var(--border); color: var(--text-soft); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex: none; }
.dk-add:hover { border-color: var(--brand); color: var(--brand); }
.dk-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.dk-ops { display: flex; gap: 6px; margin-left: auto; }
.dk-tools .seg-b { padding: 0 10px; }
.bgdot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .5); }
.bgdot.claro { background: #fff; } .bgdot.escuro { background: #0b0b0f; } .bgdot.azul { background: #1236ff; }
.dk-stage .slide { border-radius: 14px; box-shadow: var(--shadow-md); }
.dk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.dk-cards.small { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.dk-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; min-width: 0; transition: box-shadow .15s, transform .15s; }
.dk-card:hover { box-shadow: var(--shadow-md); }
.dk-cover { display: block; }
.dk-meta { display: flex; align-items: center; gap: 6px; padding: 12px 10px 12px 16px; }
.dk-meta b { font-size: 14px; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-h { display: flex; align-items: baseline; gap: 10px; margin: 28px 2px 12px; flex-wrap: wrap; }
.sec-h h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }

/* ---------- modo apresentação ---------- */
.present { position: fixed; inset: 0; z-index: 95; background: #000; display: none; place-items: center; cursor: pointer; }
.present.open { display: grid; }
.pr-stage { width: min(100vw, calc(100vh * 16 / 9)); }
.pr-bar { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; background: rgba(30, 30, 32, .82); color: #fff; border-radius: 999px; padding: 4px; font-size: 13px; opacity: 0; transition: opacity .2s; backdrop-filter: blur(12px); cursor: default; }
.present:hover .pr-bar, .pr-bar:focus-within { opacity: 1; }
.pr-bar button { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.pr-bar button:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.pr-bar button:disabled { opacity: .35; }
.pr-bar span { padding: 0 8px; font-variant-numeric: tabular-nums; }
@media (hover: none) { .pr-bar { opacity: 1; } }

/* ---------- página do cliente (#ver/…) ---------- */
body.client-mode .app, body.client-mode .side-scrim { display: none; }
.cview { min-height: 100vh; }
.cview[hidden] { display: none; }
.cv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1100px; margin: 0 auto; padding: 24px 20px; }
.cv-logo { height: 22px; width: auto; display: block; }
.cv-deck { max-width: 1100px; margin: 0 auto; padding: 0 20px 32px; display: flex; flex-direction: column; gap: 20px; }
.cv-deck .slide { border-radius: 16px; box-shadow: var(--shadow-md); }
.cv-doc { max-width: 720px; margin: 0 auto; padding: 0 20px 32px; }
.cv-doc .doc { padding: 28px; }
.cv-foot { text-align: center; color: var(--text-faint); font-size: 12.5px; padding: 0 0 40px; }
.cv-empty { max-width: 420px; margin: 18vh auto 0; padding: 0 20px; display: flex; flex-direction: column; gap: 10px; }
.cv-empty .cv-logo { margin-bottom: 18px; }

/* ---------- editor de post: janela pequena no centro, campos curtos dividindo a linha ---------- */
/* ficha do post: mesma cabeça, caixas e botões dos outros painéis; as informações ficam em linhas (nome à esquerda, valor à direita) */
.title-inp.err { box-shadow: inset 0 -2px 0 var(--danger); }
.pp-path span { color: var(--text-faint); }
.pp-path { color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-sec.pp-props { margin-top: 0; display: flex; flex-direction: column; gap: 6px; }
.pp-prop { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 46px; padding: 5px 14px; border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 40%, var(--surface)); box-shadow: inset 0 0 0 1px var(--line); }
.pp-lbl { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-soft); }
.pp-lbl svg { color: var(--text-faint); flex: none; }
.pp-lbl .req { color: var(--danger); }
.pp-prop.err .pp-lbl { color: var(--danger); }
.pp-prop.err .pp-plain { box-shadow: inset 0 0 0 1.5px var(--danger); }
.pp-val { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
/* o valor parece texto e vira campo ao passar o mouse */
.pp-plain, .pp-sel { width: auto; max-width: 100%; height: 32px; padding: 0 10px; font-size: 13.5px; font-weight: 600; border-radius: 10px; box-shadow: none; background-color: transparent; text-overflow: ellipsis; }
.pp-plain { cursor: text; }
.pp-sel { padding-right: 28px; background-position: right 10px center; }
.pp-plain:hover, .pp-sel.plain:hover { background-color: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.pp-aux { color: var(--text-faint); font-size: 12px; }
.pp-pill { --c: var(--brand); position: relative; display: inline-flex; align-items: center; max-width: 100%; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, var(--surface)); transition: background .15s; }
.pp-pill:hover { background: color-mix(in srgb, var(--c) 22%, var(--surface)); }
.pp-pill .pp-sel { height: 28px; border-radius: 999px; padding: 0 26px 0 12px; font-size: 12.5px; background-position: right 9px center; color: color-mix(in srgb, var(--c) 70%, var(--text)); }
.pp-pill i { position: absolute; left: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--c); pointer-events: none; }
.pp-pill i + .pp-sel { padding-left: 24px; }
.pp-who { display: inline-flex; align-items: center; gap: 2px; padding-left: 4px; }
.chipsel.sm { gap: 4px; }
.chipsel.sm .chipopt { height: auto; min-height: 26px; padding: 4px 10px; font-size: 12px; line-height: 1.3; text-align: left; }
.pp .sh .btn-link { display: inline-flex; align-items: center; gap: 4px; margin-right: -8px; }
.pp .sh .tn { margin-left: 4px; }
.pp-linkadd { display: flex; gap: 8px; margin-bottom: 10px; }
.pp-files { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-file { position: relative; flex: 0 1 220px; min-width: 160px; display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 10px; border-radius: 12px; background: var(--surface-2); }
/* remover: bolinha no canto do cartão; baixar: botão à direita do nome */
.pp-file .pp-del { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-md); }
.pp-file .pp-down { flex: none; width: 28px; height: 28px; color: var(--text-soft); }
.pp-file .pp-down:hover { color: var(--brand); background: var(--surface); }
.pp-ext { width: 30px; height: 34px; border-radius: 7px; display: grid; place-items: center; flex: none; font: 700 9px/1 var(--font); letter-spacing: .02em; color: #fff; background: var(--c); }
.pp-fn { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pp-fn b, .pp-fn a { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-fn small { font-size: 11.5px; color: var(--text-faint); }
.pp-file.over { background: var(--danger-soft); }
.pp-file.over .pp-fn small { color: var(--danger); font-weight: 600; }
.pp-lim { display: block; margin-top: 6px; font-size: 11px; }
@media (hover: hover) { .pp-file .pp-del { opacity: 0; } .pp-file:hover .pp-del, .pp-file .pp-del:focus-visible { opacity: 1; } }
.pp-add { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--text-soft); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; transition: background .15s; }
.pp-add:hover { background: var(--surface-2); color: var(--brand); }
.pp-add:focus-within { box-shadow: inset 0 0 0 1.5px var(--brand); }
.pe-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--text-soft); background: var(--surface-2); border-radius: 10px; padding: 8px 10px; margin: 10px 0 0; }
.pe-note svg { margin-top: 2px; color: var(--brand); flex: none; }
.pp .drawer-sec .drawer-sec { margin-top: 12px; }
.pp .pub-row { font-size: 12.5px; padding: 6px 0; }
/* personalizar menu */
.nc-sec + .nc-sec { margin-top: 18px; }
.nc-sec .sh { justify-content: flex-start; gap: 6px; }
.nc-sec .sh svg { color: #f5a623; fill: #f5a623; }
.nc-row { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 10px; min-height: 40px; }
.nc-row:hover { background: var(--surface-2); }
.nc-row.kid { padding-left: 34px; }
.nc-row.dim .nc-l, .nc-row.dim .nc-ic { opacity: .5; }
.nc-ord { display: inline-flex; flex: none; width: 56px; }
.nc-row.kid .nc-ord { display: none; }
.nc-ic { color: var(--text-soft); display: grid; place-items: center; flex: none; }
.nc-l { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-row small { color: var(--text-faint); font-size: 11.5px; }
.nc-star { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--text-faint); flex: none; }
.nc-star:hover { background: var(--surface-3); color: var(--text); }
.nc-star.on { color: #f5a623; }
.nc-star.on svg { fill: #f5a623; }
/* catálogo: conta do custo e do preço sugerido pelo tempo de produção */
#svcPrev { display: flex; flex-direction: column; gap: 6px; }
/* tarefa: regra da repetição por extenso */
.rec-sum:not(:empty) { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; color: var(--text-soft); background: var(--surface); }
.rec-sum svg { flex: none; margin-top: 2px; color: var(--brand); }
.price-cat .li-sub { white-space: normal; overflow: visible; }
.price-cat .li-sub svg { vertical-align: -1px; }
.svc-calc { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.svc-calc > span { flex: 1; min-width: 0; }
.svc-calc small { color: var(--text-soft); }
.svc-calc .btn-link { padding: 0 4px; }
/* comentários no fim do post, com a cara do NouzChat, numa área própria de fundo cinza */
.drawer-body.pp { display: flex; flex-direction: column; }
.drawer-body.pp > .drawer-sec { flex: none; }
/* comentários: faixa cinza de ponta a ponta no fim do post, rolando junto com ele (sem rolagem própria) */
.drawer-body.pp > .drawer-sec.pp-chat { flex: 1 0 auto; margin: 32px -24px -24px; padding: 18px 24px 24px; background: var(--surface-2); border-top: 1px solid var(--border); }
.pc-title { display: inline-flex; align-items: center; gap: 7px; }
.pc-title svg { color: var(--text-soft); }
.pp-chat .pc-msgs { display: flex; flex-direction: column; gap: 2px; margin: 0 -6px; }
.pp-chat .msg:hover { background: var(--surface); }
.pp-chat .msg-acts { background: var(--surface); }
.pp-chat .msg .pill { font-size: 10.5px; padding: 1px 7px; }
.pc-empty { font-size: 13px; color: var(--text-faint); padding: 4px 0 2px; }
.pc-compose { border-top: 0; margin-top: 10px; }
.pc-compose textarea { background: var(--surface); }
.pc-compose .quote-prev { padding: 0 4px 6px; }
.pc-compose .composer { padding: 0; }
.pc-compose .mention-box { left: 0; }
.pp-chat .msg .fchip { margin-top: 4px; background: var(--surface); }
.pc-files { margin: 0; }
.pc-pend:not(:empty) { margin: 0 0 8px; padding: 8px 10px; border-radius: 12px; background: var(--brand-soft); border: 1px dashed color-mix(in srgb, var(--brand) 45%, transparent); }
.pc-pend .fchips { margin: 0; }
.pc-pend .fchip { background: var(--surface); color: var(--brand); font-weight: 500; }
.pc-pend .fchip small { color: color-mix(in srgb, var(--brand) 60%, var(--text-faint)); }
.fchip .fthumb { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; flex: none; }
.fchip .icon-btn[data-act="fileView"] { color: var(--text-soft); }
.fchip .icon-btn[data-act="fileView"]:hover { color: var(--brand); }
/* miniatura da imagem/vídeo dentro do comentário: clicar abre a prévia */
.cm-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cm-thumb { position: relative; display: block; padding: 0; border-radius: 10px; overflow: hidden; background: var(--surface-3); cursor: zoom-in; }
.cm-thumb img { display: block; max-width: 220px; max-height: 170px; object-fit: cover; }
.cm-thumb svg { position: absolute; inset: 0; margin: auto; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); }
/* imagem/vídeo no comentário: sem etiqueta embaixo, só o botão de baixar no canto da miniatura */
.cm-thumb-w { position: relative; }
.cm-thumb-dl { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .55); }
.cm-thumb-dl:hover { background: rgba(0, 0, 0, .75); }
/* janela de prévia do anexo */
.modal-box.viewer-box { width: min(900px, calc(100vw - 32px)); max-height: calc(100vh - 40px); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.viewer-head { display: flex; align-items: center; gap: 4px; padding: 0 2px 0 6px; font-size: 14px; min-width: 0; }
.viewer-head b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.viewer-body { flex: 1; min-height: 0; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); overflow: hidden; }
.viewer-body img, .viewer-body video { display: block; max-width: 100%; max-height: calc(100vh - 130px); }
.viewer-body iframe { width: 100%; height: calc(100vh - 130px); border: 0; background: #fff; }
.viewer-body audio { width: min(420px, 90%); margin: 32px 0; }
.viewer-body > p { padding: 40px 20px; }
.fchip .icon-btn[data-act="fileDown"] { color: var(--text-soft); }
.fchip .icon-btn[data-act="fileDown"]:hover { color: var(--brand); }
.pp .sh .pp-attach { display: inline-flex; align-items: center; gap: 4px; margin-right: -8px; cursor: pointer; }
.pp-sfiles:not(:empty) { margin: 8px 0 0; }
.pp-ext.pp-thumb { position: relative; padding: 0; overflow: hidden; background: var(--surface-3); }
.pp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-thumb svg { position: absolute; inset: 0; margin: auto; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
/* prévia do post: cartão no estilo do feed, à esquerda do painel */
/* o painel do post fica no centro; com prévia, abre espaço pra ela à direita quando a tela é mais estreita */
.drawer.pp { left: max(10px, calc(50% - 320px)); right: auto; transform: translateY(16px); transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s, left .3s cubic-bezier(.2, .8, .2, 1); }
.drawer-overlay:has(> .post-preview) .drawer.pp { left: max(10px, min(calc(50% - 320px), calc(100% - 970px))); }
.post-preview { position: absolute; top: 50%; left: calc(max(10px, min(50% - 320px, 100% - 970px)) + 660px); transform: translateY(-50%); width: 290px; max-height: calc(100% - 32px); overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; animation: pvIn .28s ease; }
/* mouse: mãozinha de clicar em cima da arte e dos botões; mão de arrastar no resto da prévia */
.post-preview .pv-media, .post-preview button { cursor: pointer; }
.post-preview.dragging, .post-preview.dragging * { cursor: grabbing; }
.post-preview.dragging { animation: none; transition: none; }
.pv-head { display: flex; align-items: center; gap: 6px; }
@keyframes pvIn { from { opacity: 0; } }
.pv-lbl, .pv-rst { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--text-soft); background: var(--surface); border-radius: 999px; padding: 2px 8px; box-shadow: var(--shadow); }
.pv-rst { line-height: inherit; }
.pv-rst:hover { color: var(--brand); }
/* a largura do cartão acompanha a altura da tela, pra arte caber sempre inteira na proporção certa */
.pv-card { width: min(100%, calc((100vh - 230px) * var(--ar) + 16px)); min-width: 180px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 10px 8px 2px; flex: none; }
.pv-top { display: flex; align-items: center; gap: 8px; padding: 0 4px 10px; }
.pv-av { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-3); flex: none; }
.pv-bar { width: 72px; height: 8px; border-radius: 4px; background: var(--surface-3); }
.pv-media { position: relative; width: 100%; aspect-ratio: var(--ar); background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.pv-media img, .pv-media video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.pv-snd { position: absolute; right: 10px; bottom: 10px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .6); }
.pv-snd:hover { background: rgba(0, 0, 0, .75); }
.pv-flash { position: absolute; inset: 0; margin: auto; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .45); pointer-events: none; animation: pvFlash .8s ease forwards; }
@keyframes pvFlash { 0% { opacity: 0; transform: scale(.7); } 15% { opacity: 1; transform: scale(1); } 60% { opacity: 1; } 100% { opacity: 0; transform: scale(1.08); } }
.pv-like { display: grid; place-items: center; padding: 0; color: var(--text); }
.pv-like.on { color: #ff3040; }
.pv-like.pop svg { animation: pvPop .4s cubic-bezier(.2, .8, .2, 1.4); }
@keyframes pvPop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.pv-big { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: #fff; }
.pv-big svg { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .35)); animation: pvBig .95s ease forwards; }
@keyframes pvBig { 0% { opacity: 0; transform: scale(.3); } 15% { opacity: 1; transform: scale(1.15); } 30% { transform: scale(.95); } 45% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1); } }
.pv-play { position: absolute; top: 10px; right: 10px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); }
.pv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #111; background: rgba(255, 255, 255, .9); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.pv-nav.prev { left: 8px; }
.pv-nav.next { right: 8px; }
.pv-count { position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .6); border-radius: 999px; padding: 3px 8px; }
.pv-acts { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 4px 8px; color: var(--text); }
.pv-acts svg { flex: none; }
.pv-dots { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 4px; }
.pv-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
.pv-dots i.on { background: var(--brand); }
.pv-cap { padding: 0 4px 10px; font-size: 12.5px; line-height: 1.45; }
.pv-capt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; }
.pv-cap.open .pv-capt { display: block; }
.pv-more { padding: 0; font-size: 12.5px; color: var(--text-faint); }
.pv-sk { display: block; height: 8px; border-radius: 4px; background: var(--surface-3); margin: 3px 0 7px; }
.pv-sk.short { width: 60%; }
/* tela estreita: a prévia vai pra dentro da ficha, logo abaixo da arte */
.pv-slot:empty { display: none; }
.pv-slot { margin-top: 12px; }
.pv-slot .post-preview { position: static; transform: none; width: 100%; max-width: 300px; max-height: none; margin: 0 auto; overflow: visible; animation: none; cursor: default; touch-action: auto; }
.pv-slot .pv-lbl, .pv-slot .pv-rst { box-shadow: none; background: var(--surface-2); }
.pv-slot .pv-card { box-shadow: 0 0 0 1px var(--line); }
.pv-slot .pv-card { width: 100%; }

.pe-cover-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.pe-cover { width: 64px; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); flex: none; display: grid; place-items: center; }
.pe-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-cover-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-faint); font-size: 10.5px; }
.pe-cover-act { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 8px; }
/* capa dentro da caixa de informações do post: miniatura menor e botões ao lado */
/* arquivo final e, ao lado, a capa do vídeo (só em formato de vídeo) */
.pp-art { display: flex; gap: 16px; align-items: flex-start; }
.pp-art-main { flex: 1; min-width: 0; }
.pp-art-cover { flex: none; width: 210px; }
.pp-art-cover .pe-cover-row { gap: 10px; flex-wrap: nowrap; align-items: flex-start; }
.pp-art-cover .pe-cover { width: 58px; border-radius: 8px; }
.pp-art-cover .pe-cover-act { min-width: 0; gap: 6px; }
.pp-art-cover .pe-cover-act p { margin: 0; font-size: 11.5px; line-height: 1.35; }
.pp-art-cover .row-gap { flex-direction: column; align-items: stretch; gap: 6px; }
.pp-art-cover .row-gap .btn-tint { justify-content: center; }
.pp-art-cover .row-gap .btn-link { align-self: flex-start; padding-left: 0; }
.modal-box p.small { font-size: 12.5px; }
.crop-box { width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.crop-box h4 { align-self: flex-start; margin-bottom: 0; }
.crop-box .modal-foot { align-self: stretch; margin-top: 4px; }
.crop-frame { position: relative; overflow: hidden; border-radius: 12px; background: #000; cursor: grab; touch-action: none; user-select: none; box-shadow: 0 0 0 1px var(--border); }
.crop-frame.dragging { cursor: grabbing; }
.crop-frame img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.crop-zoom { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 300px; color: var(--text-faint); }
.crop-zoom input { height: auto; box-shadow: none; padding: 0; accent-color: var(--brand); background: transparent; }
.crop-box video { width: 100%; max-height: 52vh; border-radius: 12px; background: #000; }
.metrics-box { width: min(460px, 100%); }
.metrics-box .mini-kpis { margin: 4px 0 12px; }

/* ---------- planejamento: filtros rápidos, cards e semana ---------- */
.qbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -4px 0 14px; }
.qsep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }
.vchip { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-soft); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.vchip:hover { color: var(--text); background: var(--surface-2); }
.vchip.on { background: var(--brand); color: #fff; box-shadow: none; }
.vchip.add { box-shadow: inset 0 0 0 1px var(--border); border: 0; background: transparent; color: var(--brand); }
.vchip.add:hover { background: var(--brand-soft); }
.cal-card { flex: none; padding: 8px 9px; border-radius: 10px; background: color-mix(in srgb, var(--c) var(--tint), var(--surface)); cursor: grab; display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: background .15s; }
.cal-card:hover { background: color-mix(in srgb, var(--c) var(--tint-h), var(--surface)); }
.pc-t { font-size: 12px; font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.pc-tag { font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 5px; background: var(--chip); color: var(--text-soft); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pc-st { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 500; color: var(--text-soft); min-width: 0; max-width: 100%; }
.pc-st i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.pc-foot { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-faint); min-width: 0; margin-top: 2px; }
.pc-foot .av-sm { flex: none; }
.pc-cli { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pc-time { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; font-variant-numeric: tabular-nums; flex: none; }
.pc-net { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcard .pc-tags { margin-top: 8px; }
.kcard .pc-foot { margin-top: 8px; font-size: 12px; }
.pcard { box-shadow: inset 3px 0 0 var(--c), 0 1px 2px rgba(0, 0, 0, .05); }
.pcard:hover { box-shadow: inset 3px 0 0 var(--c), var(--shadow-md); }
/* calendário e semana: o post vem todo pintado com a cor, sem a faixa do lado */
.board.week .pcard { background: color-mix(in srgb, var(--c) var(--tint), var(--surface)); box-shadow: none; transition: background .15s; }
.board.week .pcard:hover { background: color-mix(in srgb, var(--c) var(--tint-h), var(--surface)); box-shadow: none; }
.cal-card .pc-tag:not(.colored), .board.week .pcard .pc-tag:not(.colored) { background: color-mix(in srgb, var(--surface) 65%, transparent); }
.cal-card .pc-tag.colored, .board.week .pcard .pc-tag.colored { background: color-mix(in srgb, var(--surface) 65%, transparent); }
.cal-card .pc-foot, .board.week .pcard .pc-foot { color: var(--text-soft); }

.board.week .lane { width: 220px; }
.board.week .lane.today { background: var(--brand-soft); }
.board.week .lane.today .lane-h b { color: var(--brand); }
.board.week .lane-h .icon-btn { width: 26px; height: 26px; }
[data-open].kcard { cursor: pointer; }

/* ---------- financeiro: nota fiscal ---------- */
.nf-b { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--text-faint); box-shadow: inset 0 0 0 1px var(--border); white-space: nowrap; flex: none; }
.nf-b:hover { color: var(--text); }
.nf-b.on { background: var(--brand-soft); color: var(--brand); box-shadow: none; }
.drawer-sec.boxed + .mini-kpis { margin-top: 16px; }

/* ---------- configurações ---------- */
.theme-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.theme-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--border); text-align: center; }
.theme-opt:hover { background: var(--surface-2); }
.theme-opt.on { box-shadow: inset 0 0 0 2px var(--brand); background: var(--brand-soft); }
.theme-opt b { font-size: 13px; }
.theme-opt small { font-size: 11px; color: var(--text-faint); }
.th-sw { width: 64px; height: 42px; border-radius: 9px; overflow: hidden; display: flex; box-shadow: 0 0 0 1px var(--border); margin-bottom: 4px; }
.th-sw i { flex: 1; }
.th-sw.light i { background: #f5f5f7; } .th-sw.light i:first-child { background: #fff; }
.th-sw.dark i { background: #161618; } .th-sw.dark i:first-child { background: #000; }
.th-sw.auto i:first-child { background: #f5f5f7; } .th-sw.auto i:last-child { background: #161618; }
.stg-row { display: grid; grid-template-columns: 58px 28px minmax(140px, 1.4fr) minmax(150px, 1fr) 64px 32px; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.stg-row.stg-head { border-top: 0; padding: 0 0 4px; font-size: 11px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; }
.stg-row .fsel { height: 36px; width: 100%; min-width: 0; }
.stg-row .fsel { padding: 0 26px 0 10px; }
.stg-row .fsel select { width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.stg-color { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border); }
.stg-color.none { background: repeating-linear-gradient(135deg, var(--surface) 0 3px, var(--surface-3) 3px 6px); }
.fmt-row .stg-color, .ls-row .stg-color { flex: none; width: 20px; height: 20px; }
/* cor escolhida aparecendo nas telas */
.ctag { display: inline-flex; align-items: center; gap: 4px; }
.ctag i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.pc-tag.colored { background: color-mix(in srgb, var(--c) 16%, var(--surface)); color: color-mix(in srgb, var(--c) 75%, var(--text)); }
.lane-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lc); flex: none; margin-right: 2px; }
.lane[style*="--lc"] .lane-h { box-shadow: inset 0 2px 0 var(--lc); }
.cf-inp { height: 36px; }
.cf-n { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.cf-ord { display: flex; gap: 2px; }
.cf-ord .icon-btn { width: 26px; height: 26px; }
.fmt-row, .ls-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.fmt-row:first-child, .ls-row:first-child { border-top: 0; }
.fmt-row .cf-inp, .ls-row .cf-inp { flex: 1; min-width: 90px; }
.fmt-row .cf-inp[data-chg="finMName"] { min-width: 150px; }
.grid2.cfg-cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.grid2.cfg-cols.wide { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.cf-n { min-width: 50px; text-align: right; }
.cf-prob { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-faint); }
.cf-prob input { width: 58px; height: 36px; padding: 0 8px; }
.cfg-help { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; }
.cfg-help p { font-size: 13px; color: var(--text-soft); }
.cfg-help b { color: var(--text); }

/* ---------- telas menores ---------- */
@media (max-width: 1280px) {
  .stg-row { grid-template-columns: 58px 28px minmax(130px, 1.5fr) minmax(120px, 1fr) 32px; }
  .stg-row .cf-n, .stg-head span:nth-child(5) { display: none; }

}
@media (max-width: 1100px) {
  .ed-grid { grid-template-columns: minmax(0, 1fr); }
  .ed-side { position: static; }
  .kpis.four, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-home { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .app, body.side-collapsed .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; left: 0; top: 0; bottom: 0; margin: 0; height: 100%; width: 272px; border-radius: 0 22px 22px 0; transform: translateX(-105%); transition: transform .25s; z-index: 60; box-shadow: var(--shadow-lg); }
  body.side-open .side { transform: none; }
  body.side-collapsed .nav-item .tx, body.side-collapsed .nav-label, body.side-collapsed .nav-exp { display: revert; }
  body.side-collapsed .nav-item { justify-content: flex-start; padding: 7px 10px; }
  body.side-collapsed .brand { display: block; padding: 2px 12px 18px; }
  body.side-collapsed .brand img { width: auto; height: 21px; }
  .collapse-btn { display: none; }
  .side-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .3); z-index: 55; }
  body.side-open .side-scrim { display: block; }
  .menu-btn { display: inline-grid; }
  .main { padding: 0 16px 40px; }
  .grid-home, .grid2, .grid2.cfg-cols, .grid2.cfg-cols.wide, .cf-grid { grid-template-columns: minmax(0, 1fr); }
  .chat-wrap { grid-template-columns: minmax(0, 1fr); height: auto; }
  .ch-side { max-height: 200px; border-right: 0; border-bottom: 1px solid var(--line); }
  .ch-msgs { min-height: 50vh; }
  .wizard { grid-template-columns: minmax(0, 1fr); }
  .dk-grid { grid-template-columns: minmax(0, 1fr); }
  .dk-rail { flex-direction: row; overflow-x: auto; position: static; max-height: none; order: 2; }
  .dk-thumb { width: 150px; }
  .dk-add { width: 90px; height: auto; align-self: stretch; margin-left: 0; }
  .dk-saved { display: none; }
  .steps-rail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .steps-rail .step small { display: none; }
  .stg-row { grid-template-columns: 58px 28px minmax(0, 1fr) 32px; }
  .stg-row.stg-head { display: none; }
  .stg-row .fsel { grid-column: 3 / 4; }
  .stg-row .cf-n { grid-column: 3 / 4; }
}
@media (max-width: 600px) {
  .ph { margin: 14px 0 18px; }
  .ph h1 { font-size: 26px; }
  .hello h1 { font-size: 28px; }
  .fgrid { grid-template-columns: minmax(0, 1fr); }
  .kbd { display: none; }
  .create-btn span { display: none; }
  .create-btn { width: 36px; padding: 0; }
  #newsBtn { display: none; }
  .kpis, .kpis.four, .stats, .mini-kpis, .mini-kpis.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-v { font-size: 20px; }
  .tb-r { width: 100%; }
  .sbox { min-width: 0; flex: 1; }
  .li2 { gap: 10px; padding: 10px; }
  .li2 > .av-sm, .li2 > .avs, .li2 .prog, .li2 > .muted.small { display: none; }
  .steps .step .st { display: none; }
  .steps .step.active .st { display: inline; }
  .idea-add { flex-direction: column; }
  .idea-add select { width: 100%; }
  .drawer, .drawer.wide, .drawer.xwide { top: 0; right: 0; bottom: 0; left: auto; width: 100vw; max-height: none; border-radius: 0; }
  .pp-prop { grid-template-columns: 104px minmax(0, 1fr); gap: 8px; padding: 5px 12px; }
  .pp-art { flex-direction: column; gap: 4px; }
  .pp-art-cover { width: 100%; }
  .pp-file { flex: 1 1 140px; min-width: 0; }
  .drawer-body.pp > .drawer-sec.pp-chat { margin: 28px -18px -20px; padding: 16px 18px 20px; }
  .drawer-body { padding: 14px 18px 20px; }
  .auth-card { padding: 28px 22px; }
  .callout .btn-primary { width: 100%; }
  .dk-top .btn-tint { display: none; }
  .photo-row { align-items: flex-start; }
  .qsep { display: none; }
  .dh-top .btn-tint.sm { font-size: 0; gap: 0; width: 32px; padding: 0; }
  .board.week .lane { width: 82vw; }
  .theme-pick { gap: 6px; }
  .th-sw { width: 52px; }
}

/* =====================================================
   IDENTIDADE VISUAL — peças comuns às páginas do cliente
   (títulos grossos em caixa alta, cartões sólidos, /etiquetas e setas ↘, como nas referências)
   ===================================================== */
.bk-logo { display: block; height: 26px; width: auto; max-width: 180px; object-fit: contain; }
.bk-logo.mono { filter: brightness(0) invert(1); }
.bk-tag { align-self: flex-start; display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 99px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--bk-accent2); color: var(--bk-on-accent2); white-space: nowrap; }
.bk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 44px; padding: 0 22px; border-radius: 99px; font: 700 14px/1 var(--bk-font); background: var(--bk-accent); color: var(--bk-on-accent); transition: filter .15s, transform .15s; cursor: pointer; white-space: nowrap; }
.bk-btn:hover { filter: brightness(1.08); }
.bk-btn:active { transform: scale(.98); }
.bk-btn:focus-visible, .bk-page button:focus-visible { outline: 2px solid var(--bk-accent); outline-offset: 2px; }
.bk-btn.sm { height: 36px; padding: 0 16px; font-size: 13px; }
.bk-btn.big { height: 54px; padding: 0 30px; font-size: 16px; }
.bk-btn.dark { background: var(--bk-dark); color: var(--bk-on-dark); }
.bk-btn.alt { background: var(--bk-accent2); color: var(--bk-on-accent2); }
.bk-btn.light { background: var(--bk-light); color: var(--bk-on-light); }
.bk-btn.line { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.bk-btn.ghost { background: color-mix(in srgb, var(--bk-on-light) 8%, transparent); color: var(--bk-on-light); }
.bk-count { min-width: 30px; height: 30px; padding: 0 9px; border-radius: 99px; display: inline-grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--bk-accent2); color: var(--bk-on-accent2); }
.bk-page { min-height: 100vh; background: var(--bk-light); color: var(--bk-on-light); font-family: var(--bk-font); }
.bk-page :where(h1, h2, h3, h4) { color: inherit; }
.bk-page textarea { width: 100%; border: 0; border-radius: 14px; padding: 12px 14px; background: var(--bk-light); color: inherit; font: 14px/1.5 var(--bk-font); resize: vertical; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bk-on-light) 22%, transparent); }
.bk-page textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--bk-accent); }
.bk-page textarea::placeholder { color: inherit; opacity: .4; }
.bk-title, .bk-empty h1, .ca-hero h1, .ca-h h2, .ca-idea h2, .ca-info h2, .ca-stat b, .fp-side h1, .fp-q, .fp-start h2, .fp-end h2 { font-family: var(--bk-title); font-weight: var(--bk-tw); text-transform: var(--bk-tt); letter-spacing: var(--bk-tls); line-height: var(--bk-tlh); }
.bk-empty { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; max-width: 460px; margin: 0 auto; padding: 0 20px; }
.bk-empty h1 { font-size: calc(48px * var(--bk-tsz)); margin-top: 18px; }
.bk-empty p { opacity: .7; }
.cvp .cv-num { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; opacity: .65; }
.cvp .cv-foot { color: inherit; opacity: .55; }
.cvp .doc { background: var(--bk-light); color: var(--bk-on-light); }

/* ---------- área do cliente ---------- */
.ca-in { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.ca-top .ca-in { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ca-who { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 5px; border-radius: 99px; background: var(--bk-dark); color: var(--bk-on-dark); font-weight: 700; font-size: 12px; min-width: 0; }
.ca-who .cav { border-radius: 50%; }
.ca-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-hero { margin: 4px 0 20px; padding: 24px 28px 18px; border-radius: 22px; background: var(--bk-dark); color: var(--bk-on-dark); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ca-hero .bk-tag { height: 20px; padding: 0 9px; font-size: 9.5px; margin-bottom: 10px; }

.ca-hero h1 { font-size: calc(clamp(38px, 5vw, 60px) * var(--bk-tsz)); }
.ca-hero > p { font-size: 14.5px; opacity: .62; max-width: 560px; }
.ca-stats { align-self: stretch; margin-top: 6px; display: flex; align-items: center; gap: 24px; padding: 8px 8px 8px 20px; border-radius: 16px; background: color-mix(in srgb, var(--bk-on-dark) 8%, var(--bk-dark)); flex-wrap: wrap; }
.ca-stat { display: flex; align-items: baseline; gap: 7px; }
.ca-stat b { font-size: calc(30px * var(--bk-tsz)); }
.ca-stat span { font-size: 13px; opacity: .62; }
.ca-stats .bk-btn { height: 38px; padding: 0 18px; font-size: 13px; }
.ca-stats .bk-btn, .ca-ok { margin-left: auto; }
.ca-ok { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 99px; font-weight: 700; font-size: 13.5px; background: var(--bk-accent2); color: var(--bk-on-accent2); }
.ca-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 22px; align-items: start; }
.ca-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ca-card { border-radius: 22px; padding: 22px; min-width: 0; background: color-mix(in srgb, var(--bk-on-light) 5%, var(--bk-light)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bk-on-light) 85%, transparent); }
.ca-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ca-h h2, .ca-idea h2 { font-size: calc(36px * var(--bk-tsz)); }
/* o mês tem largura fixa: as setas não andam nem descem de linha quando o nome do mês muda */
.ca-h h2 { min-width: 0; }
.ca-mnav { flex: none; display: flex; align-items: center; gap: 4px; }
.ca-mnav b { width: 9.6em; text-align: center; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.ca-mnav button { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bk-dark); color: var(--bk-on-dark); }
.ca-mnav button svg { width: 14px; height: 14px; }
.st-ap { --st: var(--bk-accent); --st-on: var(--bk-on-accent); }
.st-ok { --st: var(--bk-accent2); --st-on: var(--bk-on-accent2); }
.st-prod { --st: color-mix(in srgb, var(--bk-on-light) 16%, var(--bk-light)); --st-on: var(--bk-on-light); }
.st-pub { --st: var(--bk-dark); --st-on: var(--bk-on-dark); }
.ca-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; font-weight: 600; margin-bottom: 14px; }
.ca-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ca-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--st); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bk-on-light) 20%, transparent); }
.ca-wd { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; opacity: .5; text-align: center; padding-bottom: 6px; }
.ca-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ca-day { min-height: 92px; border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 3px; background: var(--bk-light); min-width: 0; }
.ca-day.out { opacity: .35; }
.ca-day .n { font-size: 12px; font-weight: 800; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; flex: none; }
.ca-day.today .n { background: var(--bk-accent); color: var(--bk-on-accent); }
.ca-day.has { cursor: pointer; }
.ca-day.has:hover, .ca-day.sel { box-shadow: inset 0 0 0 1.5px var(--bk-on-light); }
.ca-chip { display: block; width: 100%; text-align: left; font: 600 11.5px/1.25 var(--bk-font); padding: 4px 7px; border-radius: 6px; background: var(--st); color: var(--st-on); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ca-more { font-size: 11px; font-weight: 700; opacity: .6; padding-left: 4px; }
.ca-daylist { margin-top: 14px; padding-top: 12px; border-top: 1.5px solid color-mix(in srgb, var(--bk-on-light) 12%, transparent); display: flex; flex-direction: column; gap: 4px; }
.ca-dl-h { display: flex; justify-content: space-between; align-items: center; padding: 0 8px 4px; }
.ca-dl-h b { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.ca-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; text-align: left; color: inherit; width: 100%; }
.ca-row:hover { background: var(--bk-light); }
.ca-row .grow { min-width: 0; }
.ca-row b { display: block; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-row small { font-size: 12px; opacity: .65; }
.ca-th, .ca-apth { position: relative; flex: none; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }
.ca-th { width: 44px; height: 44px; border-radius: 10px; }
.ca-apth { width: 78px; aspect-ratio: 3 / 4; border-radius: 12px; }
.ca-th > svg, .ca-apth > svg { opacity: .5; }
.ca-th img, .ca-apth img { width: 100%; height: 100%; object-fit: cover; }
.ca-play { position: absolute; right: 4px; bottom: 4px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; display: grid; place-items: center; }
.ca-st { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 99px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; background: var(--st); color: var(--st-on); white-space: nowrap; flex: none; }
.ca-st i { display: none; }
.ca-sec2 { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ca-sec2 .ca-h { margin-bottom: 4px; }
.ca-ap { position: relative; display: flex; gap: 14px; padding: 18px 18px 42px; border-radius: 18px; background: var(--bk-accent); color: var(--bk-on-accent); }
.ca-ap.c1 { background: var(--bk-dark); color: var(--bk-on-dark); }
.ca-ap-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ca-ap-b small { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; opacity: .72; }
.ca-ap-b b { font-size: 21px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.05; }
.ca-ap-b p { font-size: 13px; opacity: .82; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.ca-ap-a { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ca-tag { position: absolute; right: 18px; bottom: 15px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.ca-empty { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.ca-idea { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* prévia do feed: grade 3×3 no formato do perfil do Instagram (3:4) */
.ca-feed .ca-h { margin-bottom: 4px; }
.ca-handle { font-size: 12px; font-weight: 800; opacity: .6; white-space: nowrap; }
.ca-feed-sub { font-size: 12.5px; opacity: .6; margin-bottom: 12px; }
.ca-grid9 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; border-radius: 12px; overflow: hidden; }
.ca-ft { position: relative; aspect-ratio: 3 / 4; display: grid; place-items: center; overflow: hidden; padding: 0; background: color-mix(in srgb, var(--bk-on-light) 9%, var(--bk-light)); color: var(--bk-on-light); text-align: center; cursor: pointer; }
.ca-ft img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .15s; }
.ca-ft:hover img { filter: brightness(.88); }
.ca-ft-ph { padding: 8px; font-size: 10.5px; font-weight: 700; line-height: 1.25; opacity: .7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ca-ft-v { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: rgba(0, 0, 0, .55); color: #fff; }
.ca-ft-d { position: absolute; left: 5px; bottom: 5px; font-size: 9.5px; font-weight: 800; padding: 2px 6px; border-radius: 99px; background: rgba(0, 0, 0, .6); color: #fff; }
.ca-ft.st-ap::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2.5px var(--bk-accent); pointer-events: none; }
.ca-ft.st-ap .ca-ft-d { background: var(--bk-accent); color: var(--bk-on-accent); }
.ca-ft.empty { cursor: default; background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bk-on-light) 14%, transparent); border-radius: 4px; }

.ca-foot { text-align: center; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .5; padding: 40px 20px 44px; }
.ca-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: inherit; padding: 4px 8px; border-radius: 8px; }
.ca-link:hover { background: color-mix(in srgb, var(--bk-on-light) 7%, transparent); }
.ca-ov { position: fixed; inset: 0; z-index: 90; background: rgba(10, 10, 14, .6); display: grid; place-items: center; padding: 24px; }
.ca-modal { position: relative; width: min(980px, 100%); max-height: calc(100vh - 48px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--bk-light); color: var(--bk-on-light); border-radius: 24px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.ca-media { position: relative; background: var(--bk-dark); display: grid; place-items: center; aspect-ratio: 3 / 4; max-height: calc(100vh - 48px); }
.ca-media img, .ca-media video { width: 100%; height: 100%; object-fit: contain; display: block; }
.ca-noart { color: var(--bk-on-dark); opacity: .6; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13px; }
.ca-vplay { position: absolute; width: 64px; height: 64px; border-radius: 50%; background: var(--bk-accent); color: var(--bk-on-accent); display: grid; place-items: center; }
.ca-mnavb { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: var(--bk-light); color: var(--bk-on-light); display: grid; place-items: center; }
.ca-mnavb.l { left: 12px; } .ca-mnavb.r { right: 12px; }
.ca-mnavb:disabled { opacity: .3; }
.ca-mcount { position: absolute; top: 12px; left: 12px; font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: var(--bk-accent2); color: var(--bk-on-accent2); }
.ca-info { padding: 28px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.ca-info .ca-st { align-self: flex-start; }
.ca-info h2 { font-size: calc(44px * var(--bk-tsz)); padding-right: 34px; }
.ca-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; opacity: .7; flex-wrap: wrap; }
.ca-sec { display: flex; flex-direction: column; gap: 8px; }
.ca-lbl { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ca-lbl > span { opacity: .55; }
.ca-lbl .ca-link { text-transform: none; letter-spacing: 0; }
.ca-cap { font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--bk-on-light) 5%, var(--bk-light)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bk-on-light) 12%, transparent); }
.ca-muted { opacity: .55; }
.ca-msg { padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: color-mix(in srgb, var(--bk-accent2) 45%, var(--bk-light)); color: var(--bk-on-light); font-size: 13.5px; }
.ca-msg p { white-space: pre-wrap; }
.ca-msg small { font-size: 11.5px; opacity: .6; }
.ca-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 8px; flex-wrap: wrap; }
.ca-actions .bk-btn { flex: 1; }
.ca-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.ca-done { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 99px; font-size: 13.5px; font-weight: 700; background: var(--bk-accent2); color: var(--bk-on-accent2); margin-top: auto; }
.ca-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--bk-dark); color: var(--bk-on-dark); }
body.ca-lock { overflow: hidden; }
@media (max-width: 860px) {
  .ca-grid { grid-template-columns: 1fr; }
  .ca-ov { padding: 12px; }
  .ca-modal { grid-template-columns: 1fr; max-height: calc(100vh - 24px); overflow-y: auto; }
  .ca-media { aspect-ratio: auto; height: 52vh; max-height: none; }
  .ca-info { overflow: visible; }
}
@media (max-width: 640px) {
  .ca-in { padding: 0 14px; }
  .ca-top .ca-in { height: 62px; }
  .ca-hero { padding: 20px 18px 16px; border-radius: 18px; margin: 2px 0 14px; }
  .ca-hero h1 { font-size: calc(38px * var(--bk-tsz)); }
  .ca-hero > p { font-size: 13.5px; }
  .ca-stats { gap: 14px; padding: 10px 10px 10px 14px; border-radius: 14px; }
  .ca-stat b { font-size: calc(26px * var(--bk-tsz)); }
  .ca-stat span { font-size: 12px; }
  .ca-stats .bk-btn, .ca-ok { margin-left: 0; width: 100%; }
  .ca-card { padding: 16px; border-radius: 18px; }
  .ca-h { gap: 8px; }
  .ca-h h2, .ca-idea h2 { font-size: calc(26px * var(--bk-tsz)); }
  .ca-mnav b { font-size: 11px; }
  .ca-mnav button { width: 26px; height: 26px; }

  .ca-day { min-height: 52px; padding: 4px 2px; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 3px; }
  .ca-day .n { width: 100%; height: 22px; border-radius: 8px; }
  .ca-day.today .n { border-radius: 0; background: radial-gradient(circle at center, var(--bk-accent) 0 11px, transparent 11.5px); }
  .ca-chip { width: 8px; height: 8px; padding: 0; border-radius: 50%; font-size: 0; }
  .ca-more { display: none; }
  .ca-ap { flex-direction: column-reverse; }
  .ca-apth { width: 100%; aspect-ratio: 16 / 9; }
  .ca-info { padding: 20px; }
  .ca-info h2 { font-size: calc(34px * var(--bk-tsz)); }
}

/* ---------- formulário: tela dividida, uma pergunta por vez ---------- */
.fp { display: grid; grid-template-columns: minmax(320px, 38%) minmax(0, 1fr); }
.fp-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; padding: 30px 34px; background: var(--bk-dark) center / cover no-repeat; color: var(--bk-on-dark); }
.fp-side.img { color: #fff; }
.fp-side-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fp-side-top .bk-logo { height: 22px; }
.fp-count { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .6; }
.fp-side h1 { margin-top: auto; font-size: calc(clamp(42px, 4.6vw, 72px) * var(--bk-tsz)); }
.fp-steps { list-style: none; margin: 0; padding: 18px 20px; border-radius: 18px; display: flex; flex-direction: column; gap: 11px; background: color-mix(in srgb, currentColor 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); }
.fp-steps li { display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; opacity: .45; }
.fp-steps li .n { min-width: 26px; opacity: .7; font-variant-numeric: tabular-nums; }
.fp-steps li .t { flex: 1; min-width: 0; }
.fp-steps li svg { flex: none; align-self: center; color: var(--bk-accent2); }
.fp-steps li.done { opacity: .75; }
.fp-steps li.on { opacity: 1; color: var(--bk-accent2); }
.fp-side-foot { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .45; }
.fp-main { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 64px clamp(24px, 6vw, 96px); }
.fp-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: color-mix(in srgb, var(--bk-on-light) 10%, transparent); }
.fp-bar i { display: block; height: 100%; background: var(--bk-accent); transition: width .35s ease; }
.fp-body { width: 100%; max-width: 640px; }
.fp-step { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.fp-step.in-up { animation: fpUp .35s ease both; }
.fp-step.in-down { animation: fpDown .35s ease both; }
@keyframes fpUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fpDown { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
.fp-q { font-size: calc(clamp(34px, 4vw, 56px) * var(--bk-tsz)); }
.fp-req { color: var(--bk-tc); margin-left: 6px; }
.fp-start h2, .fp-end h2 { font-size: calc(clamp(48px, 5.6vw, 84px) * var(--bk-tsz)); color: var(--bk-tc); }
.fp-intro { font-family: var(--bk-serif); font-size: clamp(20px, 2vw, 25px); line-height: 1.3; opacity: .8; max-width: 540px; white-space: pre-wrap; }
.bk-page .fp-inp { width: 100%; height: auto; border: 0; border-radius: 16px; padding: 17px 20px; background: color-mix(in srgb, var(--bk-on-light) 3%, var(--bk-light)); box-shadow: inset 0 0 0 1.5px var(--bk-on-light); font: 500 clamp(17px, 1.8vw, 20px)/1.4 var(--bk-font); color: inherit; resize: none; }
.bk-page .fp-inp:focus { outline: none; box-shadow: inset 0 0 0 2.5px var(--bk-accent); }
.fp-inp::placeholder { color: inherit; opacity: .35; }
.fp-hint { font-size: 12.5px; opacity: .55; }
.fp-opts { align-self: stretch; display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.fp-opt { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-radius: 14px; text-align: left; font: 800 15.5px/1.25 var(--bk-font); text-transform: uppercase; letter-spacing: -0.01em; color: inherit; background: color-mix(in srgb, var(--bk-on-light) 4%, var(--bk-light)); box-shadow: inset 0 0 0 1.5px var(--bk-on-light); transition: background .12s; }
.fp-opt:hover { background: color-mix(in srgb, var(--bk-on-light) 9%, var(--bk-light)); }
.fp-opt.on { background: var(--bk-accent); color: var(--bk-on-accent); box-shadow: none; }
.fp-opt kbd { font: 800 13px var(--bk-font); opacity: .4; min-width: 26px; }
.fp-opt.on kbd { opacity: .7; }
.fp-opt span { flex: 1; }
.fp-scale { align-self: stretch; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; }
.fp-scale button { height: 54px; border-radius: 12px; font: 800 17px var(--bk-font); color: inherit; background: color-mix(in srgb, var(--bk-on-light) 4%, var(--bk-light)); box-shadow: inset 0 0 0 1.5px var(--bk-on-light); }
.fp-scale button:hover { background: color-mix(in srgb, var(--bk-on-light) 9%, var(--bk-light)); }
.fp-scale button.on { background: var(--bk-accent); color: var(--bk-on-accent); box-shadow: none; }
.fp-scale-l { align-self: stretch; display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .55; }
.fp-go { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.fp-err { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 8px; background: #fde8e7; color: #b42318; }
.fp-end p { font-family: var(--bk-serif); font-size: 22px; opacity: .8; }
.fp-ok { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--bk-accent2); color: var(--bk-on-accent2); }
.fp-nav { position: absolute; right: 24px; bottom: 24px; display: flex; gap: 2px; border-radius: 99px; overflow: hidden; }
.fp-nav button { width: 44px; height: 40px; display: grid; place-items: center; background: var(--bk-dark); color: var(--bk-on-dark); }
.fp-nav button:disabled { opacity: .4; cursor: default; }
@media (max-width: 860px) {
  .fp { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .fp-side { position: static; height: auto; padding: 18px 18px 20px; gap: 10px; }
  .fp-side h1 { margin-top: 8px; font-size: calc(34px * var(--bk-tsz)); }
  .fp-steps, .fp-side-foot { display: none; }
  .fp-main { min-height: 0; justify-content: flex-start; padding: 32px 18px 100px; }
  .fp-nav { position: fixed; right: 16px; bottom: 16px; }
  .fp-scale { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- Configurações › Identidade visual ---------- */
.bk-cfg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.bk-right { position: sticky; top: 16px; }
.bk-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px; border-radius: 14px; border: 1.5px dashed var(--border); background: var(--surface-2); cursor: pointer; text-align: center; padding: 16px; position: relative; overflow: hidden; transition: border-color .15s, background .15s; }
.bk-drop:hover, .bk-drop.over { border-color: var(--brand); background: var(--brand-soft); }
.bk-drop.has { padding: 0; min-height: 0; border-style: solid; border-color: var(--line); }
.bk-drop.has img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.bk-drop-t { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 99px; background: rgba(0, 0, 0, .65); color: #fff; }
.bk-pal-h { font-size: 12.5px; color: var(--text-faint); margin: 14px 0 8px; }
.bk-pal { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-pc { width: 36px; height: 36px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .3); transition: transform .12s; }
.bk-pc:hover { transform: scale(1.08); }
.bk-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.bk-row:first-child { border-top: 0; padding-top: 0; }
.bk-row:last-child { padding-bottom: 0; }
.bk-sw { width: 40px; height: 40px; border-radius: 12px; flex: none; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .3); }
.bk-hex { font-size: 12px; color: var(--text-soft); background: var(--chip); padding: 3px 7px; border-radius: 6px; }
.bk-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bk-lg { height: 84px; border-radius: 12px; display: grid; place-items: center; padding: 16px; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .2); }
.bk-lg .bk-logo { max-height: 34px; max-width: 80%; height: auto; }
.bk-fonts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bk-font { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 12px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.bk-font .aa { grid-row: span 2; font-family: var(--ff); font-weight: var(--fw); text-transform: var(--ftt, none); font-size: 28px; letter-spacing: -0.02em; width: 44px; }
.bk-font b { font-size: 13.5px; }
.bk-font small { font-size: 12px; color: var(--text-faint); }
.bk-font.on { box-shadow: inset 0 0 0 2px var(--brand); background: var(--brand-soft); }
.bk-prev { display: flex; flex-direction: column; gap: 10px; }
.bk-ph { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; font-size: 13px; }
.bk-slides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bk-sl .slide { border-radius: 10px; box-shadow: 0 0 0 1px var(--line); pointer-events: none; }
.bk-mini { border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); font-family: var(--bk-font); color: var(--bk-on-light); background: var(--bk-light); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.bk-mini .m-tag { align-self: flex-start; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 7px; border-radius: 99px; background: var(--bk-accent2); color: var(--bk-on-accent2); }
.bk-mini .m-hero > b, .bk-mini .m-panel > b, .bk-mini .m-stats b { font-family: var(--bk-title); font-weight: var(--bk-tw); text-transform: var(--bk-tt); letter-spacing: var(--bk-tls); line-height: var(--bk-tlh); }
.ca-mini .m-top, .fp-mini .m-meta { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; }
.ca-mini .bk-logo, .fp-mini .bk-logo { height: 13px; }
.ca-mini .m-who { width: 64px; height: 16px; border-radius: 99px; background: var(--bk-dark); }
.ca-mini .m-hero { border-radius: 14px; padding: 14px; background: var(--bk-dark); color: var(--bk-on-dark); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ca-mini .m-hero > b { font-size: calc(24px * var(--bk-tsz)); }

.ca-mini .m-hero small { font-size: 10px; opacity: .6; }
.ca-mini .m-stats { align-self: stretch; display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--bk-on-dark) 8%, var(--bk-dark)); font-size: 9px; }
.ca-mini .m-stats span { opacity: .85; }
.ca-mini .m-stats b { font-size: calc(16px * var(--bk-tsz)); margin-right: 3px; }
.ca-mini .m-cta { margin-left: auto; font-style: normal; font-weight: 700; padding: 4px 9px; border-radius: 99px; background: var(--bk-accent); color: var(--bk-on-accent); }
.ca-mini .m-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bk-on-light) 70%, transparent); }
.ca-mini .m-cal span { height: 14px; border-radius: 3px; background: color-mix(in srgb, var(--bk-on-light) 6%, var(--bk-light)); }
.ca-mini .m-cal .ap { background: var(--bk-accent); }
.ca-mini .m-cal .ok { background: var(--bk-accent2); }
.ca-mini .m-cal .pub { background: var(--bk-dark); }
.fp-mini { flex-direction: row; gap: 0; padding: 0; min-height: 150px; }
.fp-mini .m-side { width: 42%; flex: none; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--bk-dark); color: var(--bk-on-dark); }
.fp-mini .m-side .bk-logo { height: 11px; }
.fp-mini .m-side > b { margin-top: auto; font-family: var(--bk-title); font-weight: var(--bk-tw); text-transform: var(--bk-tt); letter-spacing: var(--bk-tls); line-height: var(--bk-tlh); font-size: calc(20px * var(--bk-tsz)); }
.fp-mini .m-side ol { list-style: none; margin: 0; padding: 7px 8px; border-radius: 8px; background: color-mix(in srgb, var(--bk-on-dark) 7%, transparent); display: flex; flex-direction: column; gap: 3px; font-size: 8.5px; font-weight: 700; }
.fp-mini .m-side li { opacity: .45; } .fp-mini .m-side li.d { opacity: .75; } .fp-mini .m-side li.on { opacity: 1; color: var(--bk-accent2); }
.fp-mini .m-q { flex: 1; min-width: 0; padding: 14px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 7px; }
.fp-mini .m-q > b { font-family: var(--bk-title); font-weight: var(--bk-tw); text-transform: var(--bk-tt); letter-spacing: var(--bk-tls); line-height: var(--bk-tlh); font-size: calc(19px * var(--bk-tsz)); }
.fp-mini .m-box { align-self: stretch; display: block; height: 24px; border-radius: 7px; box-shadow: inset 0 0 0 1.2px var(--bk-on-light); }
.fp-mini .m-ok { font-style: normal; font-size: 9px; font-weight: 700; padding: 4px 11px; border-radius: 99px; background: var(--bk-accent); color: var(--bk-on-accent); }
.fm-cover { height: 110px; border-radius: 12px; background: var(--bk-accent) center / cover no-repeat; color: var(--bk-on-accent); display: grid; place-items: center; font-size: 12.5px; text-align: center; padding: 12px; }
@media (max-width: 1100px) { .bk-cfg { grid-template-columns: 1fr; } .bk-right { position: static; } }
@media (max-width: 640px) { .bk-fonts, .bk-slides { grid-template-columns: 1fr; } }

/* ---------- Início: saudação num cartão, no estilo do sistema; cada número com a sua cor ---------- */
.hm-hello { display: flex; align-items: center; gap: 20px; padding: 26px 28px; margin: 8px 0 16px; }
.hm-hello h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; margin: 8px 0 4px; outline: none; }
.hm-date { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 99px; font-size: 12.5px; font-weight: 600; background: var(--brand-soft); color: var(--brand); }
.stats .stat:nth-child(4n+2) .stat-ic { background: color-mix(in srgb, #8b5cf6 14%, transparent); color: #8b5cf6; }
.stats .stat:nth-child(4n+3) .stat-ic { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #d97706; }
.stats .stat:nth-child(4n) .stat-ic { background: color-mix(in srgb, #10b981 15%, transparent); color: #0f9f6e; }
@media (max-width: 640px) {
  .hm-hello { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
  .hm-hello h1 { font-size: 26px; }
  .hm-hello .btn-primary { width: 100%; justify-content: center; }
}

/* ---------- login: painel da marca à esquerda, formulário à direita ---------- */
.auth { padding: 0; place-items: stretch; }
.auth-split { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 42%) minmax(0, 1fr); }
.auth-side { display: flex; flex-direction: column; gap: 18px; padding: 34px 40px; background: var(--bk-dark); color: var(--bk-on-dark); }
.auth-side .bk-logo { height: 24px; width: auto; align-self: flex-start; }
.auth-side-b { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.auth-side h2 { font-family: var(--bk-title); font-weight: var(--bk-tw); text-transform: var(--bk-tt); letter-spacing: var(--bk-tls); line-height: var(--bk-tlh); font-size: calc(clamp(44px, 5vw, 76px) * var(--bk-tsz)); color: inherit; }
.auth-side p { font-family: var(--bk-serif); font-size: 22px; line-height: 1.3; opacity: .75; max-width: 420px; }
.auth-side small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .45; }
.auth-main { display: grid; place-items: center; padding: 32px 24px; }
.auth-card { box-shadow: none; background: transparent; padding: 0; width: min(380px, 100%); }
.auth-card h1 { font-size: 28px; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -6px 0 12px; }
.auth-show { font-size: 13px; color: var(--text-soft); }
.auth-card form > .auth-show { margin: -6px 0 12px; }
.auth-code { display: flex; align-items: center; gap: 8px; margin: 4px 0 16px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line); }
.auth-code code { flex: 1; font-size: 18px; font-weight: 700; letter-spacing: .06em; }
@media (max-width: 860px) {
  .auth-split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-side { padding: 20px 20px 22px; gap: 10px; }
  .auth-side-b { margin-top: 6px; gap: 8px; }
  .auth-side h2 { font-size: calc(34px * var(--bk-tsz)); }
  .auth-side p, .auth-side small { display: none; }
  .auth-main { place-items: start center; padding: 28px 20px; }
}

/* ---------- Métricas ---------- */
.mt-sample { background: color-mix(in srgb, #f59e0b 12%, var(--surface)); color: #b45309; }
/* barras: uma cor (o azul do sistema), pontas arredondadas, grade discreta, número só ao passar o mouse */
.mt-yax { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--text-faint); text-align: right; font-variant-numeric: tabular-nums; }

.mt-xax { grid-column: 2; display: flex; justify-content: space-between; font-size: 11px; color: var(--text-faint); }
/* tabelas */
.mt-table { padding: 0 12px 12px; }
.mt-tr { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, .6fr)); align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.mt-tr > span:not(.mt-name) { text-align: right; }
.mt-tr.mt-th > span:first-child { text-align: left; }
.mt-th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); padding-top: 0; }
.mt-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mt-name > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-posts .mt-tr { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, .55fr)) repeat(2, minmax(0, .85fr)); }
.mt-posts .mt-tr.clickable:hover { background: var(--surface-2); }
.mt-posts .mt-tr.on { background: var(--brand-soft); }
.mt-pt { display: flex; flex-direction: column; min-width: 0; }
.mt-pt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-pt small { font-size: 11.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* notas: cor de status sempre junto de ícone e texto */
.mt-grade { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.mt-grade.good { background: color-mix(in srgb, #1a9f53 14%, transparent); color: #15803d; }
.mt-grade.warn { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; }
.mt-grade.bad { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
/* retenção */
.mt-video { margin-bottom: 16px; }
.mt-video .card-h .fsel select { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.mt-vbody { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr); gap: 20px; padding: 6px 20px 20px; }
.mt-cplot { display: grid; grid-template-columns: auto 1fr; gap: 10px; height: 230px; }
.mt-cbox { position: relative; cursor: crosshair; }
.mt-cbox svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mt-cbox .gl { stroke: var(--line); vector-effect: non-scaling-stroke; }
.mt-cbox .hook { fill: color-mix(in srgb, var(--brand) 7%, transparent); }
.mt-cbox .area { fill: color-mix(in srgb, var(--brand) 10%, transparent); }
.mt-cbox .ln { fill: none; stroke: var(--brand); stroke-width: 2.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--brand) 55%, transparent)); }
.mt-cbox .avg { stroke: var(--text-soft); stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.mt-mark { position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--brand); box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
.mt-mark.avgm { background: var(--text); }
.mt-lab { position: absolute; top: -2px; transform: translateX(6px); font-size: 11px; font-weight: 600; color: var(--text-soft); white-space: nowrap; pointer-events: none; }
.mt-lab.r { top: auto; bottom: 4px; }
.mt-cross { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--text-faint); pointer-events: none; }
.mt-ctip { position: absolute; top: 8px; transform: translateX(8px); padding: 6px 9px; border-radius: 8px; background: var(--text); color: var(--surface); font-size: 11.5px; white-space: nowrap; pointer-events: none; }
.mt-curve .mt-xax { margin: 6px 0 0 34px; }
.mt-note { display: flex; gap: 6px; align-items: flex-start; margin-top: 12px; font-size: 12px; color: var(--text-faint); line-height: 1.45; }
.mt-note svg { flex: none; margin-top: 2px; }
.mt-side { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.mt-stat { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.mt-stat > span { font-size: 12px; color: var(--text-soft); }
.mt-stat b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mt-stat b em { font-style: normal; font-size: 13px; font-weight: 500; color: var(--text-faint); }
.mt-stat small { font-size: 12px; color: var(--text-faint); line-height: 1.4; }
.mt-how ul, .mt-how ol { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.5; }
.mt-how code { font-size: 12px; background: var(--chip); padding: 1px 5px; border-radius: 5px; }
@media (max-width: 1180px) { .mt-vbody { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .mt-posts .mt-tr { grid-template-columns: minmax(0, 1fr) auto; }
  .mt-posts .mt-tr > span:nth-child(n+3) { display: none; }
  .mt-tr { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, .6fr)); font-size: 12px; gap: 6px; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mt-grade.good { color: #4ade80; } :root:not([data-theme="light"]) .mt-grade.warn, :root:not([data-theme="light"]) .mt-sample { color: #fbbf24; } }
:root[data-theme="dark"] .mt-grade.good { color: #4ade80; } :root[data-theme="dark"] .mt-grade.warn, :root[data-theme="dark"] .mt-sample { color: #fbbf24; }

/* ---------- painéis em "bandejas" (graficos.js): Financeiro e Métricas ----------
   bandeja cinza com título, cartões brancos dentro; as cores vêm de NU.brandVars() no .ix */
.ix { --ix-tray: #ececf0; --ix-card: var(--surface); --ix-soft: #f3f3f6; --ix-neutral: #dfe2ee; --ix-acc: var(--bk-accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ix { --ix-tray: #121214; --ix-card: #1d1d20; --ix-soft: #26262a; --ix-neutral: #33343d; --ix-acc: color-mix(in srgb, var(--bk-accent) 70%, #fff); } }
:root[data-theme="dark"] .ix { --ix-tray: #121214; --ix-card: #1d1d20; --ix-soft: #26262a; --ix-neutral: #33343d; --ix-acc: color-mix(in srgb, var(--bk-accent) 70%, #fff); }
.ix-row { display: grid; gap: 16px; margin-bottom: 16px; align-items: stretch; }
.ix-row.a { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.ix-row.b { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); align-items: start; }
.ix-row.c { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ix-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ix-tray { background: var(--ix-tray); border-radius: 30px; padding: 18px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ix-th { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 2px 2px 0; }
.ix-th h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.ix-th p { font-size: 12.5px; color: var(--text-faint); margin-top: 3px; }
.ix-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.ix-card { background: var(--ix-card); border-radius: 24px; padding: 18px 20px; min-width: 0; }
.ix-rb { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ix-card); color: var(--text); transition: transform .2s, box-shadow .2s, background .2s; }
.ix-rb:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.ix-rb.acc { background: var(--bk-accent); color: var(--bk-on-accent); }
.ix-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--ix-soft); color: var(--text); }
.ix-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; height: 44px; padding: 0 16px; border-radius: 99px; background: var(--ix-card); font-size: 12.5px; font-weight: 500; color: var(--text-soft); }
.ix-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ix-legend i, .ix-tr i { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ix-neutral); }
.ix-legend i.on, .ix-tr i.on { background: var(--ix-acc); }
/* variação com seta diagonal */
.ix-d { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 500; color: var(--text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ix-d svg { stroke-width: 2.2; }
.ix-d.up svg { color: var(--ix-acc); } .ix-d.down svg { color: var(--text); }
.ix-d.none { visibility: hidden; }
/* dois números no topo do cartão */
.ix-pair { display: flex; align-items: center; }
.ix-pk { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; }
.ix-pk + .ix-pk { margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--line); }
.ix-pk small { display: block; font-size: 11.5px; color: var(--text-faint); }
.ix-pk b { display: block; font-size: 21px; font-weight: 600; letter-spacing: -0.025em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ix-pd { display: block; margin-top: 2px; } .ix-pd .ix-d { font-size: 11.5px; }
/* barras arredondadas */
.ix-pills { display: flex; align-items: flex-end; gap: 8px; height: calc(var(--ph) + 22px); margin-top: 20px; }
.ix-pill { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; padding: 0; }
.ix-bar { display: block; width: 100%; max-width: 46px; border-radius: 999px 999px 12px 12px; background: var(--ix-neutral); transform-origin: bottom; transition: filter .2s, transform .2s; }
.ix-pill.on .ix-bar { background: linear-gradient(to top, var(--ix-acc), color-mix(in srgb, var(--ix-acc) 78%, #fff)); }
.ix-pill:hover .ix-bar, .ix-pill:focus-visible .ix-bar { filter: brightness(1.08); transform: scaleY(1.02); }
.ix-pill:focus-visible { outline: none; } .ix-pill:focus-visible .ix-bar { box-shadow: 0 0 0 3px var(--brand-soft); }
.ix-pill.sel .ix-bar { box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--ix-acc) 70%, transparent); }
.ix-pill:not(.on).sel .ix-bar { box-shadow: inset 0 0 0 2px var(--ix-acc); }
.ix-pl { font-size: 11px; line-height: 14px; color: var(--text-faint); white-space: nowrap; }
.ix-pill.sel .ix-pl { color: var(--text); font-weight: 700; }
.ix-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; z-index: 5; flex-direction: column; gap: 4px; min-width: 170px; padding: 10px 12px; border-radius: 14px; background: var(--text); color: var(--surface); font-size: 12px; line-height: 1.35; text-align: left; white-space: nowrap; box-shadow: var(--shadow-lg); pointer-events: none; display: none; transform: translateX(-50%); }
.ix-pill.first .ix-tip { left: 0; transform: none; } .ix-pill.last .ix-tip { left: auto; right: 0; transform: none; }
/* o balão só existe enquanto o mouse está em cima (escondido ele empurrava a página pro lado no celular) */
@keyframes ix-tipin { from { opacity: 0; translate: 0 6px; } }
.ix-pill:hover .ix-tip, .ix-pill:focus-visible .ix-tip { display: flex; animation: ix-tipin .15s ease-out; }
.ix-tip > b:first-child { font-weight: 700; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.ix-tip small { opacity: .65; font-size: 11.5px; }
.ix-tr { display: flex; align-items: center; gap: 6px; }
.ix-tr b { margin-left: auto; padding-left: 14px; font-variant-numeric: tabular-nums; }
/* cartões de atividade com a onda */
.ix-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; flex: 1; }
.ix-act { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 0 0; border-radius: 24px; background: var(--ix-card); transition: transform .2s, box-shadow .2s; }
.ix-act:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ix-act > :not(.ix-wave) { margin: 0 16px; }
.ix-ah { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.ix-av { font-size: 25px; font-weight: 600; letter-spacing: -0.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ix-act .ix-wave { margin-top: auto; }
.ix-act.dark { background: var(--bk-dark); color: var(--bk-on-dark); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); --ix-acc: var(--bk-accent2); --text-faint: rgba(255, 255, 255, .55); --text: #fff; }
.ix-act.dark .ix-ic { background: rgba(255, 255, 255, .12); color: #fff; }
.ix-act.dark .ix-d.down svg { color: #fff; }
/* no tema escuro o cartão de destaque vira azul, pra não sumir no fundo */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ix-act.dark { background: linear-gradient(160deg, color-mix(in srgb, var(--bk-accent) 80%, #fff), var(--bk-accent) 60%); } }
:root[data-theme="dark"] .ix-act.dark { background: linear-gradient(160deg, color-mix(in srgb, var(--bk-accent) 80%, #fff), var(--bk-accent) 60%); }
.ix-wave { display: block; width: 100%; height: var(--wh); }
.ix-wave svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ix-wave .l { fill: none; stroke: var(--ix-acc); stroke-width: 2.2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ix-g0 { stop-color: var(--ix-acc); stop-opacity: .22; } .ix-g1 { stop-color: var(--ix-acc); stop-opacity: 0; }
/* cartões cinza pequenos */
.ix-minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ix-mini { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 10px; padding: 16px 18px 18px; border-radius: 26px; background: var(--ix-tray); min-width: 0; transition: transform .2s; }
.ix-mini:hover { transform: translateY(-2px); }
.ix-mini .ix-ic { background: var(--ix-card); }
.ix-ml { font-size: 13px; font-weight: 600; line-height: 1.25; }
.ix-ms { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; min-height: 18px; font-size: 12px; color: var(--text-faint); margin-top: 4px; }
.ix-ms > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-mv { grid-column: 1 / -1; font-size: 25px; font-weight: 600; letter-spacing: -0.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; margin-top: -6px; }
.ix-mv.neg { color: var(--danger); }
/* aviso em cartão branco com botão redondo */
.ix-note { display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 20px; border-radius: 26px; background: var(--ix-card); box-shadow: var(--shadow); }
.ix-note p { flex: 1; font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.ix-note p small { display: block; font-size: 12.5px; font-weight: 400; color: var(--text-faint); margin-top: 2px; letter-spacing: 0; }
.ix-note .ix-rb { background: var(--ix-tray); flex: none; }
.ix-note.alert p { color: var(--danger); } .ix-note.alert .ix-rb { background: var(--danger-soft); color: var(--danger); }
/* tabela em cartão branco */
.ix-table { padding: 8px 20px 10px; }
.ix-tr2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, .9fr) minmax(92px, .9fr) minmax(44px, .6fr) minmax(86px, .9fr); align-items: center; gap: 12px; padding: 11px 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.ix-tr2 + .ix-tr2 { border-top: 1px solid var(--line); }
.ix-tr2.h { font-size: 11.5px; color: var(--text-faint); padding: 8px 0 10px; }
.ix-tr2 > span:last-child { text-align: right; }
.ix-tr2.click { cursor: pointer; } .ix-tr2.click:hover { background: linear-gradient(90deg, transparent, var(--ix-soft) 8%, var(--ix-soft) 92%, transparent); }
.ix-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ix-who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.ix-who small { display: block; font-size: 11.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-who > span:last-child { min-width: 0; }
.ix-who .ix-ic { width: 30px; height: 30px; }
.ix-st { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--border); font-size: 12px; font-weight: 500; white-space: nowrap; }
.ix-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ix-st.ok { color: var(--ok); } .ix-st.warn { color: var(--warn); } .ix-st.bad { color: var(--danger); } .ix-st.info { color: var(--ix-acc); }
.ix-amt { font-weight: 600; white-space: nowrap; } .ix-amt.in { color: var(--ix-acc); }
.ix-more { display: block; width: 100%; padding: 12px 0 4px; font-size: 13px; font-weight: 600; color: var(--ix-acc); text-align: center; }
/* barra dividida (competência) e categorias */
.ix-seg { display: flex; gap: 4px; height: 14px; margin: 6px 0 16px; }
.ix-seg i { display: block; height: 100%; border-radius: 99px; transform-origin: left; }
.ix-seg i.on { background: var(--ix-acc); } .ix-seg i.soft { background: color-mix(in srgb, var(--ix-acc) 35%, var(--ix-card)); } .ix-seg i.bad { background: var(--danger); } .ix-seg i.none { background: var(--ix-neutral); flex: 1; }
.ix-keys { display: flex; flex-direction: column; gap: 2px; }
.ix-key { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 40px; align-items: center; gap: 10px; padding: 8px 0; font-size: 13.5px; }
.ix-key + .ix-key { border-top: 1px solid var(--line); }
.ix-key i { width: 10px; height: 10px; border-radius: 50%; }
.ix-key i.on { background: var(--ix-acc); } .ix-key i.soft { background: color-mix(in srgb, var(--ix-acc) 35%, var(--ix-card)); } .ix-key i.bad { background: var(--danger); }
.ix-key span { color: var(--text-soft); } .ix-key b { font-weight: 600; font-variant-numeric: tabular-nums; } .ix-key small { color: var(--text-faint); text-align: right; font-size: 12px; }
.ix-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: var(--ix-soft); font-size: 13px; color: var(--text-soft); }
.ix-total b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.ix-total b.neg { color: var(--danger); } .ix-total b.pos { color: var(--ok); }
.ix-meter { display: block; height: 10px; border-radius: 99px; background: var(--ix-neutral); overflow: hidden; }
.ix-meter i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--ix-acc) 70%, #fff), var(--ix-acc)); transform-origin: left; }
.ix-cats { display: flex; flex-direction: column; gap: 16px; }
.ix-cat { display: flex; flex-direction: column; gap: 8px; }
.ix-cat-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13.5px; }
.ix-cat-h span { color: var(--text-soft); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-cat-h b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .ix-cat-h small { color: var(--text-faint); font-weight: 500; margin-left: 6px; }
.ix-empty { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-soft); }
.ix-empty svg { color: var(--ok); }
/* bandejas que embrulham os cartões antigos (retenção, posts) */
.ix-tray > .card { border-radius: 24px; box-shadow: none; background: var(--ix-card); }
.ix-wrap { padding: 10px; margin-bottom: 16px; }

/* ---------- efeitos de entrada (só quando a tela abre ou muda de mês/período) ---------- */
@keyframes ix-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes ix-grow { from { transform: scaleY(0); } }
@keyframes ix-fill { from { transform: scaleX(0); } }
@keyframes ix-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.vz-anim .ix-in, .vz-anim .ix-mini, .vz-anim .ix-note { animation: ix-up .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d, 0) * 80ms); }
.vz-anim .ix-bar { animation: ix-grow .85s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(200ms + var(--i, 0) * 45ms); }
.vz-anim .ix-wave svg { animation: ix-reveal 1.3s cubic-bezier(.3, .7, .2, 1) both .35s; }
.vz-anim .ix-meter i, .vz-anim .ix-seg i { animation: ix-fill 1s cubic-bezier(.2, .8, .2, 1) both .3s; }
@media (prefers-reduced-motion: reduce) { .ix *, .ix *::before { animation: none !important; transition: none !important; } }

@media (max-width: 1180px) { .ix-row.a, .ix-row.b, .ix-row.c { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .ix-tray { padding: 12px; border-radius: 24px; } .ix-card { padding: 16px; }
  .ix-acts { grid-template-columns: 1fr 1fr; } .ix-act.dark { grid-column: 1 / -1; }
  .ix-pair { flex-direction: column; align-items: stretch; gap: 12px; } .ix-pk + .ix-pk { margin: 0; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  /* com muitas barras, um rótulo sim, um não (o escolhido sempre aparece e os vizinhos dele somem) */
  .ix-pills { gap: 5px; } .ix-pills:has(> :nth-child(8)) :is(.ix-pill:nth-last-child(even):not(.sel), .ix-pill.sel + .ix-pill, .ix-pill:has(+ .ix-pill.sel)) .ix-pl { visibility: hidden; }
  .ix-tr2 { grid-template-columns: minmax(0, 1fr) auto; } .ix-tr2 > :nth-child(2), .ix-tr2 > :nth-child(4) { display: none; } .ix-tr2 > :nth-child(3) { display: none; }
  .ix-legend { height: auto; padding: 8px 12px; }
}