/*
 * Funil CRM — Modern UI 2026
 * Camada visual única carregada após os estilos históricos.
 */

:root {
  --brand-navy: #003360;
  --brand-teal: #02c0b9;
  --brand-cyan: #028da2;
  --brand-blue: #00476e;
  --ui-bg: #f4f6f7;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f7f9f9;
  --ui-surface-muted: #edf1f2;
  --ui-surface-hover: #eef3f3;
  --ui-border: #e3e8ea;
  --ui-border-strong: #d5dcdf;
  --ui-text: #003360;
  --ui-text-soft: #66757a;
  --ui-text-faint: #9aa6aa;
  --ui-accent: #02c0b9;
  --ui-accent-strong: #028da2;
  --ui-accent-soft: #e3faf9;
  --ui-dark: #003360;
  --ui-danger: #e35454;
  --ui-warning: #e9a23b;
  --ui-radius-xs: 9px;
  --ui-radius-sm: 12px;
  --ui-radius-md: 18px;
  --ui-radius-lg: 24px;
  --ui-radius-xl: 30px;
  --ui-shadow-sm: 0 1px 2px rgba(15, 32, 36, .035);
  --ui-shadow-md: 0 14px 36px rgba(15, 32, 36, .07);
  --ui-shadow-lg: 0 24px 70px rgba(9, 25, 29, .18);
  --sidebar-width: 224px;
}

/* ================= Extensão WhatsApp ================= */
.suite-beta-label { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--ui-accent) 13%, transparent); color: var(--ui-accent-strong); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.extension-manager-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: 20px; margin-bottom: 20px; }
.extension-feature-card { display: flex; align-items: flex-start; gap: 18px; padding: 28px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); }
.extension-feature-card h2,.extension-feature-card h3 { margin: 0 0 8px; color: var(--ui-text); }
.extension-feature-card p { color: var(--ui-text-soft); line-height: 1.6; }
.extension-feature-hero { align-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-navy) 96%, white), color-mix(in srgb, var(--brand-blue) 86%, black)); color: white; overflow: hidden; }
.extension-feature-hero h2,.extension-feature-hero p,.extension-feature-hero .eyebrow { color: white; }
.extension-feature-hero p { opacity: .8; max-width: 620px; }
.extension-hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.extension-feature-hero .extension-hero-actions .btn-ghost { color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.08); }
.extension-feature-hero .extension-hero-actions .btn-ghost:hover { border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.15); }
.extension-download-status { display:flex; align-items:flex-start; gap:9px; margin-top:14px; padding:11px 13px; border:1px solid rgba(255,255,255,.2); border-radius:12px; color:#fff; background:rgba(255,255,255,.1); font-size:12px; line-height:1.45; }
.extension-download-status.hidden { display:none; }
.extension-download-status.success { border-color:rgba(124,240,222,.36); background:rgba(2,192,185,.15); }
.extension-download-status.error { border-color:rgba(255,154,170,.4); background:rgba(183,60,75,.22); }
.extension-web-only-note { margin:18px 0 0; }
.extension-feature-icon { display: grid; place-items: center; flex: 0 0 auto; width: 72px; height: 72px; border-radius: 22px; background: rgba(255,255,255,.13); font-size: 34px; }
.extension-install-steps { list-style: none; display: grid; gap: 16px; margin: 20px 0 12px; padding: 0; }
.extension-install-steps li { display: flex; gap: 12px; align-items: flex-start; }
.extension-install-steps li > span { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; background: var(--ui-accent-soft); color: var(--ui-accent-strong); font-size: 12px; font-weight: 800; }
.extension-install-steps li div { display: grid; gap: 3px; }
.extension-install-steps strong { color: var(--ui-text); font-size: 14px; }
.extension-install-steps small { color: var(--ui-text-soft); font-size: 12px; line-height: 1.45; }
.extension-install-steps code { padding: 2px 6px; border-radius: 6px; background: var(--ui-surface-soft); color: var(--ui-accent-strong); font-size: 12px; }
.extension-devices-panel { padding: 24px; }
.extension-devices-panel .suite-section-head { align-items: center; }
.extension-devices-panel .suite-section-head h2 { margin: 2px 0 4px; }
.extension-devices-list { display: grid; gap: 10px; margin-top: 20px; }
.extension-device-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 15px 16px; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-surface-soft); }
.extension-device-row > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--ui-accent-soft); color: var(--ui-accent-strong); font-size: 20px; }
.extension-device-row > div { display: grid; gap: 3px; }
.extension-device-row strong { color: var(--ui-text); font-size: 14px; }
.extension-device-row small { color: var(--ui-text-soft); font-size: 12px; }

.extension-auth-body { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 18% 5%, rgba(2,192,185,.13), transparent 34%), #f4f7f8; font-family: Inter, sans-serif; }
.extension-auth-card { width: min(560px, 100%); padding: 36px; border: 1px solid #dce5e8; border-radius: 24px; background: #fff; box-shadow: 0 24px 70px rgba(0,51,96,.15); }
.extension-auth-card > img { display: block; margin-bottom: 24px; }
.extension-auth-card h1 { margin: 5px 0 10px; color: #10202a; font-size: clamp(28px,5vw,38px); letter-spacing: -.04em; }
.extension-auth-card > .muted { line-height: 1.65; }
.extension-auth-form { display: grid; gap: 18px; margin-top: 24px; }
.extension-auth-form > label { display: grid; gap: 8px; color: #33454f; font-size: 13px; font-weight: 700; }
.extension-auth-form > label input { min-height: 52px; padding: 0 15px; border: 1px solid #ccd9de; border-radius: 12px; color: #003360; font: 750 20px/1 Inter,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.extension-auth-permissions { padding: 17px 18px; border-radius: 14px; background: #eff9f9; color: #30444d; }
.extension-auth-permissions span { font-size: 13px; font-weight: 800; }
.extension-auth-permissions ul { margin: 9px 0 0; padding-left: 20px; color: #50636c; font-size: 13px; line-height: 1.65; }
.extension-auth-warning { margin: 0; color: #6b7981; font-size: 12px; line-height: 1.55; }
.extension-auth-actions { display: flex; justify-content: flex-end; gap: 10px; }

[data-theme="dark"] .extension-feature-hero { background: linear-gradient(135deg,#002844,#004e68); }
@media (max-width: 900px) { .extension-manager-grid { grid-template-columns: 1fr; }.extension-feature-card { padding: 22px; } }
@media (max-width: 560px) { .extension-feature-hero { align-items: flex-start; flex-direction: column; }.extension-device-row { grid-template-columns: auto 1fr; }.extension-device-row .btn { grid-column: 1 / -1; }.extension-auth-card { padding: 25px 21px; border-radius: 20px; }.extension-auth-actions { flex-direction: column-reverse; }.extension-auth-actions .btn { width: 100%; } }

/* Equipes e cadeia de gestão */
.team-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}
.team-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--ui-border);
  border-radius: 18px;
  background: var(--ui-surface);
}
.team-card-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--ui-accent-strong);
  background: var(--ui-accent-soft);
}
.team-card-copy { min-width: 0; }
.team-card-copy strong,
.team-card-copy small { display: block; }
.team-card-copy small,
.hierarchy-level-hint { color: var(--ui-text-faint); font-size: 12px; margin-top: 3px; }
.team-card-copy p { color: var(--ui-text-soft); font-size: 13px; margin: 6px 0 0; }
.team-member-count {
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--ui-text-soft);
  background: var(--ui-surface-muted);
  font-size: 12px;
  font-weight: 700;
}
.user-team-select,
.user-manager-select { min-width: 180px; max-width: 230px; }
.hierarchy-level-hint { display: block; }

[data-theme="dark"] .team-card {
  background: var(--ui-surface);
  border-color: var(--ui-border);
}

@media (max-width: 820px) {
  .team-cards-grid { grid-template-columns: 1fr; }
  .team-card { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .team-card .table-action-group { grid-column: 2 / -1; justify-self: end; }
}

html[data-theme="dark"] {
  --ui-bg: #0c1214;
  --ui-surface: #151e21;
  --ui-surface-soft: #192428;
  --ui-surface-muted: #202d31;
  --ui-surface-hover: #253236;
  --ui-border: #2a373b;
  --ui-border-strong: #3a494d;
  --ui-text: #f3f7f7;
  --ui-text-soft: #a4b1b4;
  --ui-text-faint: #758589;
  --ui-accent-soft: rgba(2, 192, 185, .14);
  --ui-dark: #003360;
  --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, .22);
  --ui-shadow-md: 0 18px 44px rgba(0, 0, 0, .2);
  --ui-shadow-lg: 0 28px 78px rgba(0, 0, 0, .46);
}

html { background: var(--ui-bg); }
body {
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  letter-spacing: -.012em;
}

button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4, .metric-value { color: var(--ui-text); letter-spacing: -.045em; }
.muted, .metric-label, .metric-sub { color: var(--ui-text-soft); }
.eyebrow { color: var(--ui-accent-strong); font-size: 10px; font-weight: 800; letter-spacing: .17em; }

/* Estrutura principal */
.app-shell { background: var(--ui-bg); }
.sidebar-rail {
  width: var(--sidebar-width);
  padding: 18px 12px 14px;
  background: var(--ui-surface);
  border-right: 1px solid var(--ui-border);
  transition: width .22s ease, padding .22s ease;
}
.rail-brand { height: 46px; gap: 11px; margin: 0 9px 18px; }
.sidebar-collapse-btn {
  position: absolute;
  top: 31px;
  right: -13px;
  z-index: 35;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  color: var(--ui-text-soft);
  background: var(--ui-surface);
  box-shadow: 0 6px 16px rgba(15, 32, 36, .1);
  font-size:10px;
  transition: color .16s ease, background .16s ease, transform .22s ease;
}
.sidebar-collapse-btn:hover { color: var(--ui-accent-strong); background: var(--ui-accent-soft); }
.sidebar-rail .logo-box,
.sidebar-rail .brand-symbol {
  width: 38px;
  height: 38px;
}
.sidebar-rail .logo-box {
  border-radius: 13px;
  background: linear-gradient(145deg, #02c0b9, var(--ui-accent-strong));
  box-shadow: 0 9px 22px rgba(2, 141, 162, .24);
}
.sidebar-rail .brand-symbol { object-fit: contain; filter: drop-shadow(0 7px 12px rgba(0, 128, 158, .16)); }
.rail-brand-copy strong { color: var(--ui-text); font-size: 18px; font-weight: 750; }
.rail-brand-copy small, .rail-section-label { color: var(--ui-text-faint); }
.rail-section-label { padding: 0 12px; margin: 2px 0 8px; font-size: 11px; font-weight: 750; letter-spacing: .12em; }
.rail-nav { display: block; padding-right: 2px; }
.rail-menu-group { margin-bottom: 5px; }
.rail-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  color: var(--ui-text-faint);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 780;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: color .18s ease, background .18s ease;
}
.rail-group-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rail-group-main > i { width: 16px; color: inherit; font-size: 10px; text-align: center; }
.rail-group-chevron { font-size:10px; transition: transform .2s ease; }
.rail-group-toggle:hover { color: var(--ui-text); background: var(--ui-surface-soft); }
.rail-menu-group.has-active > .rail-group-toggle { color: var(--ui-accent-strong); }
.rail-menu-group.is-open > .rail-group-toggle { color: var(--ui-text-soft); }
.rail-menu-group.is-open > .rail-group-toggle .rail-group-chevron { transform: rotate(180deg); }
.rail-menu-items {
  display: grid;
  gap: 2px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-3px);
  transition: max-height .24s ease, opacity .18s ease, transform .18s ease;
}
.rail-menu-group.is-open > .rail-menu-items { max-height: 620px; opacity: 1; transform: translateY(0); }
.rail-item {
  min-height: 39px;
  padding: 7px 10px;
  border-radius: 11px;
  gap: 9px;
  color: var(--ui-text-soft);
  font-size: 13px;
  font-weight: 600;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.rail-item-icon { width: 23px; height: 23px; flex-basis: 23px; }
.rail-item i { font-size: 14px; }
.rail-item:hover { color: var(--ui-text); background: var(--ui-surface-soft); transform: translateX(2px); }
.rail-item.active {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-cyan));
  box-shadow: 0 8px 18px rgba(0, 71, 110, .2);
}
.rail-bottom { border-color: var(--ui-border); margin-top: 10px; padding-top: 10px; }
.sidebar-profile { padding: 7px 9px; border-radius: 12px; }
.sidebar-profile:hover { background: var(--ui-surface-soft); }
.sidebar-profile-copy strong { color: var(--ui-text); font-size: 13px; }
.sidebar-profile-copy small { color: var(--ui-text-faint); font-size: 11px; }

/* Menu recolhível: preserva os ícones e mostra o nome no hover. */
html.sidebar-collapsed { --sidebar-width: 76px; }
html.sidebar-collapsed .sidebar-rail { padding-inline: 10px; }
html.sidebar-collapsed .rail-brand { justify-content: center; margin-inline: 0; }
html.sidebar-collapsed .rail-brand-copy,
html.sidebar-collapsed .rail-section-label,
html.sidebar-collapsed .rail-item-label,
html.sidebar-collapsed .sidebar-profile-copy { display: none; }
html.sidebar-collapsed .rail-menu-group { margin: 0; padding: 4px 0; border-top: 1px solid var(--ui-border); }
html.sidebar-collapsed .rail-menu-group:first-child { padding-top: 0; border-top: 0; }
html.sidebar-collapsed .rail-group-toggle { display: none; }
html.sidebar-collapsed .rail-menu-items { max-height: none; overflow: visible; opacity: 1; transform: none; }
html.sidebar-collapsed .rail-item { justify-content: center; padding-inline: 0; }
html.sidebar-collapsed .rail-item:hover { transform: none; }
html.sidebar-collapsed .sidebar-profile { justify-content: center; padding-inline: 0; }
html.sidebar-collapsed .sidebar-collapse-btn i { transform: rotate(180deg); }
html.sidebar-collapsed .rail-item[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 13px);
  top: 50%;
  z-index: 300;
  display: block;
  visibility: hidden;
  width: max-content;
  max-width: 210px;
  padding: 7px 10px;
  border-radius: 9px;
  color: #fff;
  background: var(--ui-dark);
  box-shadow: var(--ui-shadow-md);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}
html.sidebar-collapsed .rail-item[data-tip]:hover::after {
  visibility: visible;
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.main-area { background: var(--ui-bg); }
.topbar {
  height: 68px;
  padding: 0 28px;
  gap: 22px;
  background: color-mix(in srgb, var(--ui-surface) 91%, transparent);
  border-color: var(--ui-border);
  box-shadow: 0 1px 0 rgba(15, 32, 36, .015);
  backdrop-filter: blur(18px) saturate(140%);
}
.topbar-crumb { min-width: 150px; font-size: 13px; }
.topbar-app-name { color: var(--ui-text); font-weight: 750; }
.topbar-page, .topbar-sep { color: var(--ui-text-faint); }
.topbar-search {
  width: min(520px, 48vw);
  max-width: 520px;
  min-height: 42px;
  padding: 7px 9px 7px 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--ui-surface-soft);
}
.topbar-search:focus-within { background: var(--ui-surface); border-color: var(--ui-accent); box-shadow: 0 0 0 4px rgba(2, 141, 162, .1); }
.topbar-search input { color: var(--ui-text); font-size: 12px; }
.topbar-search-icon { color: var(--ui-text-faint); }
.topbar-search-hint {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  color: var(--ui-text-faint);
  background: var(--ui-surface);
  font-size:10px;
  font-weight: 700;
}
.theme-toggle-btn, .notif-bell-btn {
  width: 38px;
  height: 38px;
  border-color: var(--ui-border);
  border-radius: 12px;
  color: var(--ui-text-soft);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}
.theme-toggle-btn:hover, .notif-bell-btn:hover { color: var(--ui-text); background: var(--ui-surface-soft); }
.topbar-profile {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 158px;
  padding: 5px 8px 5px 5px;
  border: 1px solid transparent;
  border-radius: 14px;
  transition: background .18s ease, border-color .18s ease;
}
.topbar-profile:hover { background: var(--ui-surface-soft); border-color: var(--ui-border); }
.topbar-profile .avatar-sm { width: 36px; height: 36px; border: 2px solid var(--ui-surface); box-shadow: 0 0 0 1px var(--ui-border); }
.topbar-profile-copy { display: grid; gap: 2px; min-width: 0; line-height: 1.1; }
.topbar-profile-copy strong { overflow: hidden; color: var(--ui-text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.topbar-profile-copy small { color: var(--ui-text-faint); font-size:10px; }
.topbar-profile > i { margin-left: auto; color: var(--ui-text-faint); font-size:10px; }

.main-content { background: var(--ui-bg); }
.page-wrap { padding: 30px 34px 42px; }
.page-header { margin-bottom: 22px; }
.page-header h1 { color: var(--ui-text); font-size: clamp(27px, 3vw, 37px); font-weight: 720; }
.page-header-row .muted { max-width: 600px; font-size: 13px; line-height: 1.55; }

/* Botões e campos */
.btn {
  min-height: 40px;
  padding: 9px 15px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 680;
  transition: transform .16s ease, color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-navy));
  box-shadow: 0 9px 20px rgba(0, 71, 110, .19);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--brand-navy), var(--brand-blue)); box-shadow: 0 12px 26px rgba(0, 51, 96, .25); }
.btn-ghost, .filter-select, .pipeline-picker-btn, .filter-group, .view-toggle {
  color: var(--ui-text);
  background: var(--ui-surface);
  border-color: var(--ui-border);
  box-shadow: var(--ui-shadow-sm);
}
.btn-ghost:hover { border-color: var(--ui-border-strong); background: var(--ui-surface-soft); }
.filter-select, .pipeline-picker-btn { min-height: 42px; border-radius: 12px; font-size: 12px; }
.view-toggle { min-height: 42px; padding: 4px; border-radius: 13px; }
.view-toggle-btn { min-height: 32px; padding: 7px 12px; border-radius: 9px; color: var(--ui-text-soft); font-size: 11px; }
.view-toggle-btn:hover { color: var(--ui-text); background: var(--ui-surface-soft); }
.view-toggle-btn.active { color: #fff; background: var(--ui-dark); box-shadow: 0 7px 16px rgba(15, 32, 36, .14); }
input, select, textarea, .modal form input, .modal form select, .modal form textarea {
  color: var(--ui-text);
  background: var(--ui-surface);
  border-color: var(--ui-border);
  border-radius: 11px;
}
input::placeholder, textarea::placeholder { color: var(--ui-text-faint); }

/* Cartões, tabelas e listas */
.panel, .metric-card, .data-table-wrap, .list-panel, .activity-row, .dup-group,
.timeline-wrap, .timeline-layout, .template-card, .report-widget, .inbox-layout {
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow-sm);
}
.panel { padding: 24px; border-radius: var(--ui-radius-lg); }
.panel h2 { color: var(--ui-text); font-size: 18px; font-weight: 700; }
.panel-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.panel-heading-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--ui-accent-strong); background: var(--ui-accent-soft); }
.data-table-wrap {
  max-width: 100%;
  border-radius: var(--ui-radius-md);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}
.data-table thead th { padding: 13px 16px; color: var(--ui-text-faint); background: var(--ui-surface-soft); border-color: var(--ui-border); font-size:10px; }
.data-table tbody td { padding: 14px 16px; color: var(--ui-text); border-color: var(--ui-border); font-size: 13px; }
.data-table tbody tr { transition: background .14s ease; }
.data-table tbody tr:hover { background: var(--ui-surface-soft); }

/* Mantém as ações dos diretórios acessíveis mesmo quando a tabela fica larga. */
#contacts-list .directory-table,
#orgs-list .directory-table { table-layout: fixed; }
#contacts-list .directory-table .data-table-name,
#orgs-list .directory-table .data-table-name { min-width: 0; }
#contacts-list .directory-table th,
#contacts-list .directory-table td,
#orgs-list .directory-table th,
#orgs-list .directory-table td { overflow: hidden; text-overflow: ellipsis; }
#contacts-list .directory-table .data-table-actions,
#orgs-list .directory-table .data-table-actions {
  position: sticky;
  right: 0;
  z-index: 2;
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  padding-inline: 14px;
  overflow: visible;
  background: var(--ui-surface);
  box-shadow: -10px 0 18px rgba(0, 51, 96, .04);
}
#contacts-list .directory-table thead .data-table-actions,
#orgs-list .directory-table thead .data-table-actions {
  z-index: 3;
  background: var(--ui-surface-soft);
}
#contacts-list .directory-table tbody tr:hover .data-table-actions,
#orgs-list .directory-table tbody tr:hover .data-table-actions { background: var(--ui-surface-soft); }
.list-panel, .activity-row { border-radius: var(--ui-radius-md); }
.list-row { border-color: var(--ui-border); }

/* Dashboard */
.dashboard-welcome { align-items: center; }
.dashboard-date-card { display: grid; gap: 3px; min-width: 164px; padding: 12px 15px; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); }
.dashboard-date-card span { color: var(--ui-text); font-size: 12px; font-weight: 750; }
.dashboard-date-card small { color: var(--ui-text-faint); font-size:10px; }
.dashboard-filter-bar { margin-bottom: 18px; padding: 6px; border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); }
.dashboard-filter-bar .filter-select { border-color: transparent; background: var(--ui-surface-soft); box-shadow: none; }
.dashboard-filter-bar .view-toggle { margin-left: auto; border-color: transparent; box-shadow: none; }
.metric-grid { gap: 14px; margin-bottom: 16px; }
.metric-card {
  min-height: 146px;
  padding: 19px;
  border-radius: var(--ui-radius-md);
  overflow: hidden;
  background: var(--ui-surface);
  border-color: var(--ui-border);
  box-shadow: var(--ui-shadow-sm);
}
.metric-card::after { display: none; content: none; }
.metric-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ui-accent) 32%, var(--ui-border)); box-shadow: var(--ui-shadow-md); }
.metric-card:first-child { color: #fff; background: linear-gradient(140deg, #163238 0%, #0e2429 100%); border-color: transparent; }
.metric-card:first-child .metric-value,
.metric-card:first-child h2,
.metric-card:first-child h3 { color: #fff; }
.metric-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 32px; margin-bottom: 13px; }
.metric-card-head .metric-label { margin: 4px 0 0; }
.metric-icon {
  display: block;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  margin: 0;
  border: 0;
  border-radius: 0;
  color: var(--ui-accent-strong);
  background: transparent !important;
}
.metric-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.metric-icon-open { color: rgba(255, 255, 255, .82); }
.metric-icon-won { color: #028da2; }
.metric-icon-pending { color: #d99124; }
.metric-icon-overdue { color: #d75767; }
.metric-label { font-size: 11px; }
.metric-value { font-size: clamp(23px, 2.2vw, 31px); font-weight: 740; }
.metric-sub { font-size: 10px; }
.dashboard-main-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); gap: 16px; }
.dashboard-stage-panel { min-height: 310px; }
.dashboard-stage-panel .bar-chart { margin-top: 23px; }
.dashboard-quick-links { display: grid; gap: 8px; margin-top: 20px; }
.dashboard-quick-links a { display: grid; grid-template-columns: 38px minmax(0, 1fr) 16px; align-items: center; gap: 11px; min-height: 60px; padding: 9px 11px; border: 1px solid transparent; border-radius: 14px; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.dashboard-quick-links a:hover { background: var(--ui-surface-soft); border-color: var(--ui-border); transform: translateX(2px); }
.dashboard-quick-links a > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--ui-accent-strong); background: var(--ui-accent-soft); }
.dashboard-quick-links a > div { display: grid; gap: 3px; min-width: 0; }
.dashboard-quick-links strong { color: var(--ui-text); font-size: 11px; }
.dashboard-quick-links small { color: var(--ui-text-faint); font-size:10px; }
.dashboard-quick-links a > i { color: var(--ui-text-faint); font-size:10px; }
.bar-row { grid-template-columns: 132px 1fr 100px; }
.bar-label, .bar-value { color: var(--ui-text-soft); font-size: 11px; }
.bar-track { height: 9px; background: var(--ui-surface-muted); }
.bar-fill { background: linear-gradient(90deg, var(--ui-accent), #028da2); }

/* Pipeline */
.pipeline-page-header { align-items: center; }
.pipeline-tabs { gap: 8px; }
.pipeline-tab { padding: 8px 13px; border: 1px solid transparent; border-radius: 12px; color: var(--ui-text-faint); font-size: 21px; font-weight: 680; }
.pipeline-tab:hover { color: var(--ui-text); background: var(--ui-surface-soft); }
.pipeline-tab.active { color: var(--ui-text); background: var(--ui-surface); border-color: var(--ui-border); box-shadow: var(--ui-shadow-sm); }
.pipeline-toolbar { gap: 8px; margin-bottom: 15px; padding: 6px; border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); }
.pipeline-toolbar .filter-select, .pipeline-toolbar .btn-ghost { border-color: transparent; background: var(--ui-surface-soft); box-shadow: none; }
.kanban-board { gap: 12px; padding-bottom: 18px; }
.stage-column {
  width: 294px;
  background: color-mix(in srgb, var(--ui-surface) 68%, transparent);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
}
.stage-column-header { padding: 13px 14px 11px; background: transparent; border-color: var(--ui-border); }
.stage-bar { height: 3px; margin-bottom: 11px; }
.stage-head h3 { color: var(--ui-text); font-size: 13px; font-weight: 700; }
.stage-count { color: var(--ui-text-soft); background: var(--ui-surface); border-color: var(--ui-border); font-size: 10px; }
.stage-total { color: var(--ui-text-faint); font-size: 11px; }
.stage-drop { gap: 9px; padding: 10px; }
.deal-card { padding: 14px; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease; }
.deal-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ui-accent) 34%, var(--ui-border)); box-shadow: var(--ui-shadow-md); }
.deal-title { color: var(--ui-text); font-size: 13px; font-weight: 680; }
.deal-subtitle { color: var(--ui-text-soft); font-size: 11px; }
.deal-value { color: var(--ui-text); font-size: 12px; }
.add-deal-btn { color: var(--ui-text-faint); font-size: 11px; }
.add-deal-btn:hover { color: var(--ui-accent-strong); background: var(--ui-accent-soft); }

/* Mantém o centro da atividade fixo ao ampliar no hover. */
.tl-marker-clickable:hover { transform: translate(-50%, -50%) scale(1.12); }

/* Modais e menus */
.modal-overlay { padding: 24px; background: rgba(5, 17, 20, .56); backdrop-filter: blur(9px); }
.modal { padding: 25px; border: 1px solid var(--ui-border); border-radius: 24px; color: var(--ui-text); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); }
.modal.modal-wide { border-radius: 26px; }
.modal-header { margin-bottom: 20px; }
.modal-header h3 { color: var(--ui-text); font-size: 20px; font-weight: 720; }
.modal-close { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--ui-text-faint); font-size: 20px; }
.modal-close:hover { color: var(--ui-text); background: var(--ui-surface-soft); }
.modal form label { color: var(--ui-text-soft); font-size: 10px; font-weight: 750; letter-spacing: .07em; }
.modal form input, .modal form select, .modal form textarea { min-height: 42px; padding: 10px 12px; font-size: 13px; }
.modal-col-side { padding: 16px; border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-surface-soft); }

/* Administração SaaS: formulários amplos, sem cortes nem rolagem horizontal. */
.modal.platform-modal-lg { max-width: none; }
.modal.platform-settings-modal {
  display: flex;
  flex-direction: column;
  width: min(1180px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  padding: 0;
  overflow: hidden;
}
.platform-settings-modal > .modal-header {
  flex: 0 0 auto;
  margin: 0;
  padding: 22px 28px;
  border-bottom: 1px solid var(--ui-border);
}
.platform-settings-modal > .alert-error,
.platform-settings-modal > .soft-note {
  flex: 0 0 auto;
  margin: 18px 28px 0;
}
.platform-settings-modal > form {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 24px 28px 28px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.platform-settings-modal .form-grid.two-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}
.platform-settings-modal .form-grid > label,
.platform-settings-modal .platform-feature-overrides,
.platform-settings-modal .platform-feature-grid,
.platform-settings-modal .platform-feature-option { min-width: 0; }
.platform-settings-modal input:not([type="checkbox"]),
.platform-settings-modal select,
.platform-settings-modal textarea { width: 100%; box-sizing: border-box; }
.platform-settings-modal .platform-feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.platform-settings-modal .platform-feature-option {
  min-height: 58px;
  padding: 12px 14px;
  overflow: hidden;
}
.platform-settings-modal .platform-feature-select,
.platform-settings-modal .platform-limit-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, auto);
  align-items: center;
}
.platform-settings-modal .platform-feature-select > span,
.platform-settings-modal .platform-limit-option > span {
  overflow-wrap: anywhere;
}
.platform-settings-modal .platform-feature-select select,
.platform-settings-modal .platform-limit-option input { min-width: 0; }
.platform-settings-modal .checkbox-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 2px;
  text-transform: none;
}
.platform-settings-modal input[type="checkbox"],
.platform-settings-modal .platform-feature-option input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  padding: 0;
}
.platform-settings-modal .modal-actions {
  position: sticky;
  z-index: 4;
  bottom: -28px;
  margin: 20px -28px -28px;
  padding: 16px 28px;
  border-top: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--ui-surface) 96%, transparent);
  backdrop-filter: blur(12px);
}

@media (max-width: 1040px) {
  .platform-settings-modal .platform-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .modal.platform-settings-modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 0;
  }
  .platform-settings-modal > .modal-header { padding: 18px; }
  .platform-settings-modal > .alert-error,
  .platform-settings-modal > .soft-note { margin: 14px 18px 0; }
  .platform-settings-modal > form { padding: 18px; }
  .platform-settings-modal .form-grid.two-cols,
  .platform-settings-modal .platform-feature-grid { grid-template-columns: 1fr; }
  .platform-settings-modal .platform-feature-select,
  .platform-settings-modal .platform-limit-option { grid-template-columns: minmax(0, 1fr) minmax(132px, auto); }
  .platform-settings-modal .modal-actions {
    bottom: -18px;
    margin: 18px -18px -18px;
    padding: 14px 18px;
  }
}

/* Domínios de envio: aproveita a largura disponível e mantém cabeçalho/ações visíveis. */
#sending-domain-modal .modal {
  display: flex;
  flex-direction: column;
  width: min(1180px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100vh - 48px);
  padding: 0;
  overflow: hidden;
}
#sending-domain-modal .modal-header {
  flex: 0 0 auto;
  margin: 0;
  padding: 22px 26px;
  border-bottom: 1px solid var(--ui-border);
}
#sending-domain-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 22px 26px 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#sending-domain-modal .dns-record-table { overflow-x: auto; }
#sending-domain-modal .dns-record-table .data-table {
  min-width: 940px;
  table-layout: fixed;
}
#sending-domain-modal .dns-record-table th:nth-child(1) { width: 120px; }
#sending-domain-modal .dns-record-table th:nth-child(2) { width: 105px; }
#sending-domain-modal .dns-record-table th:nth-child(3) { width: 210px; }
#sending-domain-modal .dns-record-table th:nth-child(5) { width: 115px; }
#sending-domain-modal .dns-record-table th:nth-child(6) { width: 100px; }
#sending-domain-modal .dns-record-table code {
  display: block;
  color: var(--ui-text-soft);
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
#sending-domain-modal .dns-record-table td:last-child { text-align: right; }

@media (max-width: 700px) {
  #sending-domain-modal .modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }
  #sending-domain-modal .modal-header { padding: 18px; }
  #sending-domain-modal-body { padding: 18px; }
}
.notif-panel, .global-search-results, .autocomplete-results, .ac-dropdown, .pipeline-picker-menu, .followers-dropdown, .fab-option, .tl-add-menu { color: var(--ui-text); background: var(--ui-surface); border-color: var(--ui-border); box-shadow: var(--ui-shadow-lg); }
#global-fab { width: 52px; height: 52px; background: linear-gradient(145deg, var(--brand-blue), var(--brand-navy)); box-shadow: 0 14px 30px rgba(0, 51, 96, .29); }
.support-launcher { border-radius: 16px; background: var(--ui-dark); box-shadow: var(--ui-shadow-md); }

/* Login */
.login-body { background: var(--ui-bg); }
.login-grid { background: var(--ui-bg); }
.login-brand {
  margin: 14px;
  min-height: calc(100vh - 28px);
  padding: 46px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 72% 18%, rgba(0, 224, 210, .24), transparent 27%),
    radial-gradient(circle at 15% 82%, rgba(2, 141, 162, .17), transparent 31%),
    linear-gradient(145deg, #00476e, #003360 72%);
}
.login-brand::after { content: ''; position: absolute; width: 380px; height: 380px; right: -150px; bottom: -170px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 56px rgba(255,255,255,.025), 0 0 0 112px rgba(255,255,255,.018); }
.login-brand-copy { position: relative; z-index: 1; max-width: 470px; }
.login-brand-copy h1 { color: #fff; font-size: clamp(38px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -.06em; }
.login-brand .muted { max-width: 450px; color: rgba(255,255,255,.63); font-size: 14px; }
.login-form-wrap { position: relative; padding: 48px; }
.login-form { max-width: 390px; gap: 17px; }
.login-form h2 { color: var(--ui-text); font-size: 31px; }
.login-form label { color: var(--ui-text-soft); font-size: 10px; font-weight: 750; letter-spacing: .08em; }
.login-form input { min-height: 48px; padding: 12px 14px; border-color: var(--ui-border); border-radius: 13px; color: var(--ui-text); background: var(--ui-surface); }
.login-form .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 13px; }
.btn-google { color: var(--ui-text); background: var(--ui-surface); border-color: var(--ui-border); }
.login-theme-toggle { position: absolute; top: 25px; right: 25px; }
.hint a { color: var(--ui-accent-strong); font-weight: 700; }

/* Tema escuro: nenhuma superfície clara fixa */
html[data-theme="dark"] .sidebar-rail,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .data-table-wrap,
html[data-theme="dark"] .data-table thead th,
html[data-theme="dark"] .list-panel,
html[data-theme="dark"] .activity-row,
html[data-theme="dark"] .stage-column,
html[data-theme="dark"] .deal-card,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .dashboard-date-card,
html[data-theme="dark"] .dashboard-filter-bar,
html[data-theme="dark"] .pipeline-toolbar,
html[data-theme="dark"] .report-widget,
html[data-theme="dark"] .topbar-profile:hover {
  color: var(--ui-text);
  background: var(--ui-surface);
  border-color: var(--ui-border);
}
html[data-theme="dark"] .metric-card:first-child { color: #fff; background: linear-gradient(140deg, #10343a, #081e23); border-color: #21454b; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .modal form input,
html[data-theme="dark"] .modal form select,
html[data-theme="dark"] .modal form textarea { color: var(--ui-text); background: var(--ui-surface-soft); border-color: var(--ui-border); }
html[data-theme="dark"] .login-brand { background: radial-gradient(circle at 72% 18%, rgba(2, 192, 185, .2), transparent 27%), linear-gradient(145deg, #00476e, #001f3b 72%); }

/* Loja de módulos do workspace */
.module-store-page { max-width: 1480px; margin: 0 auto; }
.module-store-hero { align-items: flex-end; }
.module-store-hero .muted { max-width: 720px; }
.module-store-plan { display: grid; gap: 3px; min-width: 150px; padding: 13px 16px; border: 1px solid var(--ui-border); border-radius: 15px; background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); }
.module-store-plan span { color: var(--ui-text-faint); font-size:10px; font-weight: 750; text-transform: uppercase; letter-spacing: .1em; }
.module-store-plan strong { color: var(--ui-text); font-size: 16px; }
.module-store-note { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.module-store-note > i { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; color: var(--ui-accent-strong); background: var(--ui-accent-soft); }
.module-store-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 0; }
.module-store-search { display: flex; align-items: center; gap: 9px; width: min(390px, 100%); min-height: 44px; padding: 0 14px; border: 1px solid var(--ui-border); border-radius: 14px; color: var(--ui-text-faint); background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); }
.module-store-search:focus-within { border-color: var(--ui-accent); box-shadow: 0 0 0 4px rgba(2,141,162,.1); }
.module-store-search input { width: 100%; padding: 0; border: 0; color: var(--ui-text); background: transparent; outline: 0; }
.module-store-filters { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--ui-border); border-radius: 14px; background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); }
.module-store-filters button { min-height: 34px; padding: 7px 12px; border: 0; border-radius: 10px; color: var(--ui-text-soft); background: transparent; cursor: pointer; }
.module-store-filters button:hover { color: var(--ui-text); background: var(--ui-surface-soft); }
.module-store-filters button.active { color: #fff; background: var(--ui-dark); }
.module-store-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.module-card { display: flex; min-height: 270px; flex-direction: column; padding: 20px; border: 1px solid var(--ui-border); border-radius: 20px; background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.module-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ui-accent) 32%, var(--ui-border)); box-shadow: var(--ui-shadow-md); }
.module-card-head,.module-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.module-card-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: var(--ui-accent-strong); background: var(--ui-accent-soft); font-size: 18px; }
.module-status-pill { padding: 6px 9px; border-radius: 999px; color: var(--ui-text-soft); background: var(--ui-surface-muted); font-size:10px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
.module-status-installed .module-status-pill { color: var(--brand-cyan); background: #e4f4f7; }
.module-status-coming_soon { opacity: .8; }
.module-card-copy { padding: 24px 0 18px; }
.module-category { color: var(--ui-accent-strong); font-size:10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.module-card h2 { margin: 7px 0 9px; font-size: 18px; }
.module-card p { margin: 0; color: var(--ui-text-soft); font-size: 12px; line-height: 1.6; }
.module-card-footer { margin-top: auto; padding-top: 15px; border-top: 1px solid var(--ui-border); }
.module-card-footer small { max-width: 48%; color: var(--ui-text-faint); font-size:10px; line-height: 1.4; }
.module-card-footer .btn { flex: 0 0 auto; min-height: 36px; padding: 8px 12px; }
.module-installed-actions { display:flex; align-items:center; gap:7px; }
.module-uninstall-btn { display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid var(--ui-border); border-radius:11px; color:var(--ui-text-soft); background:var(--ui-surface); cursor:pointer; }
.module-uninstall-btn:hover { color:#b42318; border-color:rgba(180,35,24,.28); background:rgba(180,35,24,.07); }
.module-store-loading,.module-store-empty { grid-column: 1/-1; display: grid; place-items: center; gap: 10px; min-height: 260px; padding: 30px; border: 1px dashed var(--ui-border-strong); border-radius: 20px; color: var(--ui-text-soft); text-align: center; background: var(--ui-surface); }
.module-store-empty > i { color: var(--ui-accent); font-size: 30px; }
.module-store-empty h2,.module-store-empty p { margin: 0; }
html[data-theme="dark"] .module-status-installed .module-status-pill { color: #78d4df; background: rgba(2,141,162,.18); }

/* Administração SaaS: módulos, limites e cards de catálogo */
.platform-plan-module-summary { display: flex; align-items: center; gap: 7px; margin: 12px 0; color: var(--ui-text-soft); font-size: 11px; }
.platform-plan-module-summary i { color: var(--ui-accent-strong); }
.platform-module-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.platform-module-card { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 18px; border: 1px solid var(--ui-border); border-radius: 18px; background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); }
.platform-module-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: var(--ui-accent-strong); background: var(--ui-accent-soft); }
.platform-module-card h3 { margin: 8px 0 5px; font-size: 15px; }
.platform-module-card p { margin: 0; font-size: 11px; line-height: 1.5; }
.platform-module-card footer { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 7px; padding-top: 12px; border-top: 1px solid var(--ui-border); }
.platform-module-card footer span { padding: 5px 8px; border-radius: 999px; color: var(--ui-text-soft); background: var(--ui-surface-soft); font-size:10px; }
.platform-feature-option span { min-width: 0; }
.platform-feature-option span strong,.platform-feature-option span small { display: block; }
.platform-feature-option span small { margin-top: 3px; color: var(--ui-text-faint); font-size:10px; }
.platform-feature-option.is-disabled { opacity: .58; }
.platform-limit-option { align-items: center; }
.platform-limit-option input { width: 120px; min-height: 36px; margin-left: auto; }

/* Aplicativos operacionais */
.module-workspace-header { align-items: flex-end; }
.module-onboarding { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,1.7fr); gap:18px; margin:0 0 16px; padding:20px; border:1px solid color-mix(in srgb,var(--ui-accent) 26%,var(--ui-border)); border-radius:20px; background:linear-gradient(135deg,var(--ui-surface),var(--ui-accent-soft)); box-shadow:var(--ui-shadow-sm); }
.module-onboarding.hidden { display:none; }
.module-onboarding-intro { display:flex; gap:13px; align-items:flex-start; }
.module-onboarding-icon { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; border-radius:14px; color:var(--brand-navy); background:var(--ui-accent); font-size:18px; }
.module-onboarding h2,.module-onboarding p { margin:0; }
.module-onboarding h2 { font-size:16px; }
.module-onboarding p { margin-top:5px; color:var(--ui-text-soft); font-size:11px; line-height:1.55; }
.module-onboarding-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.module-onboarding-step { display:flex; align-items:center; gap:9px; min-height:58px; padding:10px 12px; border:1px solid var(--ui-border); border-radius:13px; color:var(--ui-text-soft); background:var(--ui-surface); font-size:10px; font-weight:650; }
.module-onboarding-step > span { display:grid; place-items:center; flex:0 0 25px; width:25px; height:25px; border-radius:9px; color:var(--ui-text-faint); background:var(--ui-surface-muted); }
.module-onboarding-step.done { color:var(--ui-text); }
.module-onboarding-step.done > span { color:var(--brand-cyan); background:#e4f4f7; }
.module-onboarding-step button { margin-left:auto; border:0; color:var(--ui-accent-strong); background:transparent; font:inherit; cursor:pointer; }
.module-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-bottom:16px; }
.module-stat-card,.module-loading-card { min-height:112px; padding:18px; border:1px solid var(--ui-border); border-radius:18px; background:var(--ui-surface); box-shadow:var(--ui-shadow-sm); }
.module-stat-card { display:flex; flex-direction:column; justify-content:center; }
.module-stat-card small { color:var(--ui-text-faint); font-size:10px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }
.module-stat-card strong { margin-top:8px; color:var(--ui-text); font-size:25px; line-height:1.1; }
.module-stat-card span { margin-top:6px; color:var(--ui-text-soft); font-size:10px; }
.module-panel { overflow:hidden; border:1px solid var(--ui-border); border-radius:20px; background:var(--ui-surface); box-shadow:var(--ui-shadow-sm); }
.module-toolbar { display:flex; align-items:center; gap:10px; padding:14px; border-bottom:1px solid var(--ui-border); }
.module-search { display:flex; align-items:center; flex:1; gap:9px; min-height:42px; padding:0 13px; border:1px solid var(--ui-border); border-radius:12px; color:var(--ui-text-faint); background:var(--ui-surface-soft); }
.module-search input { width:100%; padding:0; border:0; color:var(--ui-text); background:transparent; outline:0; }
.module-toolbar select { width:auto; min-width:180px; min-height:42px; }
.module-content { min-height:260px; }
.module-empty-state,.module-locked-panel { display:grid; place-items:center; align-content:center; gap:9px; min-height:280px; padding:32px; color:var(--ui-text-soft); text-align:center; }
.module-empty-state > i,.module-locked-panel > span { display:grid; place-items:center; width:50px; height:50px; border-radius:15px; color:var(--ui-accent-strong); background:var(--ui-accent-soft); font-size:20px; }
.module-empty-state h3,.module-empty-state p,.module-locked-panel h1,.module-locked-panel p { margin:0; }
.module-locked-panel { min-height:520px; border:1px solid var(--ui-border); border-radius:22px; background:var(--ui-surface); }
.suite-table-wrap { overflow:auto; }
.suite-table { width:100%; min-width:850px; border-collapse:collapse; }
.suite-table th { padding:12px 16px; color:var(--ui-text-faint); background:var(--ui-surface-soft); font-size:10px; font-weight:780; text-align:left; text-transform:uppercase; letter-spacing:.08em; }
.suite-table td { padding:15px 16px; border-top:1px solid var(--ui-border); color:var(--ui-text-soft); font-size:11px; vertical-align:middle; }
.suite-table td strong,.suite-table td span { display:block; }
.suite-table td strong { color:var(--ui-text); font-size:12px; }
.suite-table td span { margin-top:4px; color:var(--ui-text-faint); font-size:10px; }
.suite-table a { color:var(--ui-accent-strong); font-weight:700; }
.suite-status { display:inline-flex; align-items:center; width:max-content; padding:5px 8px; border-radius:999px; color:var(--ui-text-soft); background:var(--ui-surface-muted); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.suite-status-accepted,.suite-status-signed,.suite-status-completed,.suite-status-delivered,.suite-status-read { color:var(--brand-cyan); background:#e4f4f7; }
.suite-status-sent,.suite-status-viewed,.suite-status-active,.suite-status-checked_in,.suite-status-answered { color:#1467b2; background:#e4f1fd; }
.suite-status-rejected,.suite-status-cancelled,.suite-status-failed,.suite-status-missed { color:#b73c4b; background:#fde9ec; }
.suite-status-scheduled,.suite-status-planned,.suite-status-queued,.suite-status-on_hold { color:#98630a; background:#fff2d9; }
.suite-row-actions { display:flex; justify-content:flex-end; gap:5px; }
.suite-icon-btn { display:inline-grid; place-items:center; flex:0 0 32px; width:32px; height:32px; padding:0; border:1px solid var(--ui-border); border-radius:10px; color:var(--ui-text-soft); background:var(--ui-surface); cursor:pointer; }
.suite-icon-btn:hover { color:var(--ui-accent-strong); border-color:var(--ui-accent); background:var(--ui-accent-soft); }
.suite-icon-btn.danger:hover { color:#d43b4f; border-color:#f4adb7; background:#fff0f2; }
.suite-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:14px; background:var(--ui-surface-soft); }
.suite-record-card { padding:17px; border:1px solid var(--ui-border); border-radius:17px; background:var(--ui-surface); box-shadow:var(--ui-shadow-sm); }
.suite-record-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.suite-record-card h3 { margin:10px 0 4px; color:var(--ui-text); font-size:14px; }
.suite-record-card p { margin:0; color:var(--ui-text-soft); font-size:10px; }
.suite-record-card footer { display:flex; justify-content:space-between; gap:8px; margin-top:12px; color:var(--ui-text-faint); font-size:10px; }
.suite-progress { overflow:hidden; height:7px; margin-top:18px; border-radius:999px; background:var(--ui-surface-muted); }
.suite-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--ui-accent),#028da2); }
.suite-data { display:grid; gap:10px; margin:16px 0 0; }
.suite-data div { display:flex; justify-content:space-between; gap:12px; }
.suite-data dt { color:var(--ui-text-faint); font-size:10px; }
.suite-data dd { margin:0; color:var(--ui-text); font-size:10px; text-align:right; }
.suite-card-actions { align-items:center; justify-content:flex-start!important; padding-top:12px; border-top:1px solid var(--ui-border); }
.attribution-grid,.suite-split { display:grid; grid-template-columns:1fr 1.35fr; gap:0; }
.attribution-grid>section,.suite-split>section { min-width:0; padding:20px; }
.attribution-grid>section+section,.suite-split>section+section { border-left:1px solid var(--ui-border); }
.attribution-grid h3,.suite-split h3,.ai-history h3 { margin:0 0 14px; font-size:14px; }
.channel-row { display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:12px 0; border-bottom:1px solid var(--ui-border); }
.channel-row span,.channel-row strong { color:var(--ui-text); font-size:11px; }
.channel-row small { grid-column:1/-1; color:var(--ui-text-faint); font-size:10px; }
.touchpoint-row,.message-row,.template-card { display:flex; align-items:flex-start; gap:11px; padding:12px 0; border-bottom:1px solid var(--ui-border); }
.touchpoint-row>div,.message-row>div,.template-card>div { flex:1; min-width:0; }
.touchpoint-row strong,.message-row strong,.template-card strong { display:block; color:var(--ui-text); font-size:11px; }
.touchpoint-row p,.message-row p,.template-card p { overflow:hidden; margin:4px 0; color:var(--ui-text-soft); font-size:10px; line-height:1.45; text-overflow:ellipsis; }
.touchpoint-row small,.message-row small,.template-card small { color:var(--ui-text-faint); font-size:10px; }
.suite-record-icon { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; border-radius:11px; color:var(--ui-accent-strong); background:var(--ui-accent-soft); }
.suite-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.suite-inline-tools { display:flex; justify-content:flex-end; gap:8px; padding:12px 14px 0; }
.campaign-roi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:14px; }
.campaign-roi-grid article { display:flex; flex-direction:column; gap:6px; min-width:0; padding:14px; border:1px solid var(--ui-border); border-radius:14px; background:var(--ui-surface-soft); }
.campaign-roi-grid small,.campaign-roi-grid span { overflow:hidden; color:var(--ui-text-soft); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.campaign-roi-grid strong { color:var(--ui-text); font-size:16px; }
.whatsapp-workspace { display:grid; grid-template-columns:.9fr 1fr 1.25fr; min-height:390px; }
.whatsapp-workspace>section { min-width:0; padding:18px; }
.whatsapp-workspace>section+section { border-left:1px solid var(--ui-border); }
.whatsapp-workspace h3 { margin:0 0 13px; color:var(--ui-text); font-size:13px; }
.conversation-row { display:flex; align-items:center; width:100%; gap:10px; padding:11px 0; border:0; border-bottom:1px solid var(--ui-border); color:var(--ui-text); background:transparent; text-align:left; cursor:pointer; }
.conversation-row>span:nth-child(2) { display:flex; overflow:hidden; flex:1; flex-direction:column; gap:3px; }
.conversation-row strong,.conversation-row small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversation-row small { color:var(--ui-text-faint); font-size:10px; }
.conversation-row b { display:grid; place-items:center; min-width:20px; height:20px; border-radius:999px; color:var(--brand-navy); background:var(--ui-accent); font-size:10px; }
.conversation-timeline { display:flex; flex-direction:column; gap:8px; max-height:55vh; margin-bottom:15px; overflow:auto; padding:12px; border-radius:14px; background:var(--ui-surface-soft); }
.conversation-timeline article { max-width:78%; padding:10px 12px; border:1px solid var(--ui-border); border-radius:14px; background:var(--ui-surface); }
.conversation-timeline article.outbound { align-self:flex-end; border-color:color-mix(in srgb,var(--ui-accent) 30%,var(--ui-border)); background:var(--ui-accent-soft); }
.conversation-timeline p { margin:0; color:var(--ui-text); font-size:10px; line-height:1.5; white-space:pre-wrap; }
.conversation-timeline small { display:block; margin-top:5px; color:var(--ui-text-faint); font-size:10px; }
.ai-workspace { padding:18px; background:var(--ui-surface-soft); }
.ai-quick-prompts,.ai-priority-list { margin-bottom:14px; padding:18px; border:1px solid var(--ui-border); border-radius:17px; background:var(--ui-surface); }
.ai-quick-prompts h3,.ai-priority-list h3 { margin:0 0 12px; color:var(--ui-text); font-size:13px; }
.ai-quick-prompts>div { display:flex; flex-wrap:wrap; gap:8px; }
.ai-quick-prompts button { display:flex; align-items:center; gap:7px; padding:9px 11px; border:1px solid var(--ui-border); border-radius:999px; color:var(--ui-text-soft); background:var(--ui-surface-soft); font-size:10px; cursor:pointer; }
.ai-priority-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ai-priority-list h3 { grid-column:1/-1; }
.ai-priority-list button { display:flex; justify-content:space-between; gap:8px; padding:11px; border:1px solid var(--ui-border); border-radius:12px; color:var(--ui-text); background:var(--ui-surface-soft); text-align:left; cursor:pointer; }
.ai-priority-list button span { display:flex; overflow:hidden; flex-direction:column; gap:3px; }
.ai-priority-list small { overflow:hidden; color:var(--ui-text-faint); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.ai-priority-list b { color:var(--ui-accent-strong); font-size:10px; white-space:nowrap; }
.ai-feedback { display:flex; gap:5px; margin-top:8px; }
.ai-feedback button { width:28px; height:28px; border:1px solid var(--ui-border); border-radius:9px; color:var(--ui-text-faint); background:var(--ui-surface-soft); cursor:pointer; }
.ai-feedback button.selected { color:var(--ui-accent-strong); border-color:var(--ui-accent); background:var(--ui-accent-soft); }
.ai-insight-panel,.ai-answer { display:flex; gap:14px; padding:18px; border:1px solid var(--ui-border); border-radius:17px; background:var(--ui-surface); }
.ai-insight-panel h3 { margin:0 0 7px; font-size:15px; }.ai-insight-panel p,.ai-answer p { margin:0; color:var(--ui-text-soft); font-size:11px; line-height:1.65; }
.ai-history { margin-top:14px; padding:18px; border:1px solid var(--ui-border); border-radius:17px; background:var(--ui-surface); }
.ai-history article { padding:14px 0; border-top:1px solid var(--ui-border); }.ai-history article strong { color:var(--ui-text); font-size:11px; }.ai-history article p { color:var(--ui-text-soft); font-size:10px; line-height:1.55; }.ai-history article small,.ai-answer small { color:var(--ui-text-faint); font-size:10px; }
/* O `width` sozinho não bastava: o `.modal` genérico limita a 460px, e sem um
   `max-width` à altura o modal dos aplicativos ficava com menos da metade da
   largura pensada — duas colunas de formulário espremidas em 200px cada. */
.module-suite-modal { width:min(840px,calc(100vw - 28px)); max-width:min(840px,calc(100vw - 28px)); max-height:min(880px,calc(100vh - 28px)); overflow:auto; }
.module-suite-detail { width:min(720px,calc(100vw - 28px)); }
.suite-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.suite-form-grid label { display:flex; flex-direction:column; gap:6px; color:var(--ui-text-soft); font-size:10px; font-weight:720; }
.suite-form-grid input,.suite-form-grid select,.suite-form-grid textarea,.project-task-form input,.project-task-form select { width:100%; min-height:42px; border:1px solid var(--ui-border-strong); border-radius:11px; color:var(--ui-text); background:var(--ui-surface); }
.suite-form-grid textarea { min-height:100px; padding:12px; resize:vertical; }
.suite-checkbox { flex-direction:row!important; align-items:center; }
.suite-checkbox input { width:auto; min-height:0; }
.field-wide { grid-column:1/-1; }
.suite-form-help { margin:0; color:var(--ui-text-soft); font-size:12px; line-height:1.55; }
.module-modal-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:18px; padding-top:16px; border-top:1px solid var(--ui-border); }
.form-help { display:flex; align-items:center; gap:8px; margin:14px 0 0; color:var(--ui-text-faint); font-size:10px; }
.proposal-items { padding:15px; border:1px solid var(--ui-border); border-radius:14px; background:var(--ui-surface-soft); }
.proposal-items h4 { margin:0; }
.proposal-item { display:grid; grid-template-columns:1.1fr 1.4fr .55fr .7fr .55fr auto; gap:7px; margin-top:9px; }
.proposal-item input,.proposal-item select { min-width:0; }
.proposal-total-preview { display:flex; justify-content:flex-end; gap:16px; margin-top:13px; color:var(--ui-text-soft); font-size:11px; }.proposal-total-preview strong { color:var(--ui-text); font-size:16px; }
.deal-context-card { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:14px; border:1px solid color-mix(in srgb,var(--ui-accent) 28%,var(--ui-border)); border-radius:14px; background:var(--ui-accent-soft); }
/* O aviso "selecione um negócio" é um item solto deste grid de quatro colunas:
   sem ocupar a linha inteira, ele caía numa coluna de 1/4 da largura e quebrava
   uma palavra por linha. */
.deal-context-card>span { grid-column:1 / -1; color:var(--ui-text-soft); font-size:12.5px; line-height:1.5; }
.deal-context-card>div { min-width:0; }.deal-context-card small,.deal-context-card strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.deal-context-card small { color:var(--ui-text-faint); font-size:9px; text-transform:uppercase; }.deal-context-card strong { margin-top:4px; color:var(--ui-text); font-size:11px; }
.document-builder,.contract-editor { padding:16px; border:1px solid var(--ui-border); border-radius:16px; background:var(--ui-surface-soft); }
.document-builder h4,.document-builder p,.contract-editor h4,.contract-editor p { margin:0; }.document-builder p,.contract-editor p { margin-top:3px; color:var(--ui-text-faint); font-size:10px; }
.document-builder-palette { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0; }.document-builder-palette button,.contract-editor-toolbar button { padding:7px 9px; border:1px solid var(--ui-border); border-radius:9px; color:var(--ui-text-soft); background:var(--ui-surface); font-size:10px; cursor:pointer; }
.document-orientation { width:150px; margin:0!important; font-size:10px!important; }.document-orientation select { min-height:34px!important; padding:5px 28px 5px 9px!important; }
.document-builder-palette .document-add-page { margin-left:auto; color:var(--ui-brand); border-color:var(--ui-brand-soft); font-weight:750; }.document-builder-hint { margin:-6px 0 12px!important; }
.document-builder-canvas { display:grid; gap:14px; }.document-builder-page { min-height:360px; padding:12px; border:2px solid var(--ui-border); border-radius:14px; background:var(--ui-surface); box-shadow:0 8px 24px rgb(8 39 61 / 6%); transition:border-color .15s,box-shadow .15s; }.document-builder-page.is-selected { border-color:var(--ui-brand); box-shadow:0 0 0 3px rgb(2 192 185 / 12%); }.document-builder-canvas.is-landscape .document-builder-page { min-height:280px; }.document-builder-page>header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 0 10px; border-bottom:1px solid var(--ui-border); }.document-builder-page>header span { min-width:0; flex:1; }.document-builder-page>header small { display:block; margin-bottom:3px; color:var(--ui-brand); font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.document-builder-page>header input { width:100%; min-height:30px!important; padding:4px 7px!important; border:0!important; background:transparent!important; font-weight:700; }.document-builder-page>header div { display:flex; }.document-builder-page>header button,.document-block-head button { width:28px; height:28px; border:0; border-radius:7px; color:var(--ui-text-faint); background:transparent; cursor:pointer; }.document-builder-page>header button:hover,.document-block-head button:hover { color:var(--ui-brand); background:var(--ui-surface-soft); }
.document-page-dropzone { min-height:290px; padding-top:10px; }.document-builder-block { display:block; margin-bottom:8px; padding:10px 12px; border:1px solid var(--ui-border); border-radius:11px; color:var(--ui-text-faint); background:var(--ui-surface-soft); cursor:default; }.document-builder-block.dragging { opacity:.45; }.document-block-head { display:flex; align-items:center; gap:7px; cursor:grab; }.document-block-head strong { color:var(--ui-text); }.document-block-head span { flex:1; }.document-builder-block textarea,.document-builder-block input,.document-builder-block select { margin-top:8px; min-height:36px!important; padding:7px 9px!important; font-size:11px!important; }.document-block-fields { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.document-block-fields textarea,.document-block-fields input:last-child { grid-column:1/-1; }.document-auto-content { display:block; margin:7px 0 0 24px; color:var(--ui-text-faint); }.document-empty-page { display:grid; place-items:center; min-height:220px; margin:0!important; color:var(--ui-text-faint); text-align:center; }.document-image-upload { display:flex!important; align-items:center; justify-content:center; gap:6px; min-height:36px; margin-top:8px!important; border:1px dashed var(--ui-border); border-radius:9px; color:var(--ui-brand)!important; cursor:pointer; }.document-image-upload input { display:none; }
.contract-editor-toolbar { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; padding:8px; border:1px solid var(--ui-border); border-bottom:0; border-radius:12px 12px 0 0; background:var(--ui-surface); }.contract-editor-page { min-height:360px; padding:42px 48px; border:1px solid var(--ui-border); border-radius:0 0 12px 12px; color:#142638; background:#fff; box-shadow:0 8px 24px rgba(0,51,96,.07); font:14px/1.65 Georgia,serif; outline:0; }.contract-editor-page h1,.contract-editor-page h2,.contract-editor-page h3 { color:#003360; }
.contract-editor-page:empty::before { color:#8b98a5; content:attr(data-placeholder); pointer-events:none; }
.contract-source-file small { color:var(--ui-text-faint); font-size:10px; font-weight:500; }.contract-source-file a { color:var(--ui-accent-strong); }.legal-signature-note { display:flex; flex-direction:row!important; align-items:flex-start; gap:11px!important; margin:0; padding:14px; border:1px solid color-mix(in srgb,var(--ui-accent) 32%,var(--ui-border)); border-radius:13px; color:var(--ui-text-soft)!important; background:var(--ui-accent-soft); font-weight:500!important; line-height:1.5; }.legal-signature-note i { color:var(--ui-accent-strong); font-size:17px; }.legal-signature-note strong { display:block; color:var(--ui-text); }
.project-board { display:grid; grid-template-columns:repeat(5,minmax(250px,1fr)); gap:12px; overflow-x:auto; padding:14px; background:var(--ui-surface-soft); }.project-board-column { min-height:420px; padding:10px; border:1px solid var(--ui-border); border-radius:16px; background:color-mix(in srgb,var(--ui-surface) 78%,transparent); }.project-board-column.drag-over { border-color:var(--ui-accent); background:var(--ui-accent-soft); }.project-board-column>header,.project-task-board section>header { display:flex; justify-content:space-between; align-items:center; padding:3px 3px 11px; color:var(--ui-text); font-size:11px; }.project-board-column>header span,.project-task-board section>header span { display:grid; place-items:center; min-width:22px; height:22px; border-radius:999px; background:var(--ui-surface-muted); }
.project-board-card { margin-bottom:9px; padding:13px; border:1px solid var(--ui-border); border-radius:13px; background:var(--ui-surface); box-shadow:var(--ui-shadow-sm); cursor:grab; }.project-board-card.dragging { opacity:.45; }.project-board-card h3 { margin:9px 0 4px; color:var(--ui-text); font-size:12px; }.project-board-card p { margin:0; color:var(--ui-text-faint); font-size:10px; }.project-board-card footer { display:flex; justify-content:space-between; gap:8px; margin-top:10px; color:var(--ui-text-faint); font-size:9px; }.project-card-actions { display:flex; align-items:center; justify-content:space-between; gap:7px; margin-top:11px; padding-top:10px; border-top:1px solid var(--ui-border); }.project-board-empty { margin:5px 0; padding:18px 8px; border:1px dashed var(--ui-border-strong); border-radius:11px; color:var(--ui-text-faint); font-size:9px; text-align:center; }
.project-task-board { display:grid; grid-template-columns:repeat(3,minmax(210px,1fr)); gap:10px; overflow-x:auto; }.project-task-board>section { min-height:270px; padding:10px; border:1px solid var(--ui-border); border-radius:14px; background:var(--ui-surface-soft); }.project-task-card { display:flex; flex-direction:column; gap:5px; margin-bottom:8px; padding:11px; border:1px solid var(--ui-border); border-radius:11px; background:var(--ui-surface); cursor:grab; }.project-task-card strong { color:var(--ui-text); font-size:11px; }.project-task-card small,.project-task-card label { color:var(--ui-text-faint); font-size:9px; }.project-task-card p { margin:3px 0; color:var(--ui-text-soft); font-size:10px; }.project-task-card.done strong { text-decoration:line-through; }
.project-task-form { display:grid; grid-template-columns:1fr 170px 150px 150px auto; gap:8px; margin-bottom:15px; }
.project-task { display:flex; gap:11px; padding:12px 0; border-top:1px solid var(--ui-border); }.project-task>span { display:flex; flex-direction:column; gap:4px; }.project-task strong { color:var(--ui-text); font-size:11px; }.project-task small { color:var(--ui-text-faint); font-size:10px; }.project-task.done strong { color:var(--ui-text-faint); text-decoration:line-through; }
.project-task p { margin:2px 0 0; color:var(--ui-text-soft); font-size:10px; }
.project-comments { margin-top:20px; padding-top:16px; border-top:1px solid var(--ui-border); }
.project-comments h4 { margin:0 0 10px; }
.project-comments form { display:flex; gap:8px; align-items:flex-end; }
.project-comments textarea { flex:1; min-height:70px; padding:10px; border:1px solid var(--ui-border); border-radius:11px; color:var(--ui-text); background:var(--ui-surface); resize:vertical; }
.project-comments article { padding:11px 0; border-bottom:1px solid var(--ui-border); }
.project-comments article p { margin:5px 0; color:var(--ui-text-soft); font-size:10px; white-space:pre-wrap; }
.project-comments article small { color:var(--ui-text-faint); font-size:10px; }
.document-history-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:20px; }
.document-history-grid h4 { margin:0 0 12px; }
.document-history-grid article { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--ui-border); }
.document-history-grid article>span:not(.suite-record-icon) { color:var(--ui-text); font-weight:750; }
.document-history-grid small { display:block; color:var(--ui-text-faint); font-size:10px; }
.module-integration-result { margin-top:14px; padding:11px 13px; border:1px solid var(--ui-border); border-radius:11px; color:var(--ui-text-soft); background:var(--ui-surface-soft); font-size:10px; }
.module-integration-result.hidden { display:none; }
.module-integration-result.success { color:var(--brand-cyan); border-color:#9bcfd8; background:#e7f5f7; }
.module-integration-result.error { color:#b73c4b; border-color:#f4adb7; background:#fff0f2; }
html[data-theme="dark"] .suite-status-accepted,html[data-theme="dark"] .suite-status-signed,html[data-theme="dark"] .suite-status-completed,html[data-theme="dark"] .suite-status-delivered,html[data-theme="dark"] .suite-status-read { color:#78d4df; background:rgba(2,141,162,.18); }
html[data-theme="dark"] .suite-status-rejected,html[data-theme="dark"] .suite-status-cancelled,html[data-theme="dark"] .suite-status-failed,html[data-theme="dark"] .suite-status-missed { color:#ff9aaa; background:rgba(207,53,78,.16); }
html[data-theme="dark"] .suite-status-sent,html[data-theme="dark"] .suite-status-viewed,html[data-theme="dark"] .suite-status-active,html[data-theme="dark"] .suite-status-checked_in,html[data-theme="dark"] .suite-status-answered { color:#8dcaff; background:rgba(45,140,224,.16); }
html[data-theme="dark"] .suite-status-scheduled,html[data-theme="dark"] .suite-status-planned,html[data-theme="dark"] .suite-status-queued,html[data-theme="dark"] .suite-status-on_hold { color:#ffd184; background:rgba(233,162,59,.16); }
html[data-theme="dark"] .suite-icon-btn.danger:hover { color:#ff9aaa; border-color:rgba(255,120,142,.35); background:rgba(207,53,78,.14); }
html[data-theme="dark"] .module-integration-result.success { color:#78d4df; border-color:rgba(2,141,162,.42); background:rgba(2,141,162,.15); }
html[data-theme="dark"] .module-integration-result.error { color:#ff9aaa; border-color:rgba(255,120,142,.35); background:rgba(207,53,78,.13); }

/* Rede de segurança do tema: componentes históricos que ainda usam superfícies próprias. */
html[data-theme="dark"] :where(
  .platform-panel,
  .platform-stat-card,
  .permission-option,
  .entity-notes-panel,
  .entity-notes-list,
  .entity-context-item,
  .support-drawer,
  .support-ticket-card,
  .support-message,
  .support-quick-list details,
  .platform-support-card,
  .platform-support-messages,
  .soft-note,
  .subnav-toolbar
) {
  color: var(--ui-text);
  background-color: var(--ui-surface);
  border-color: var(--ui-border);
}
html[data-theme="dark"] :where(.support-tabs, .support-quick-list details, .platform-support-messages, .entity-notes-list) { background-color: var(--ui-surface-soft); }
html[data-theme="dark"] :where(.support-tabs button.active, .support-ticket-card, .support-message, .entity-context-item) { background-color: var(--ui-surface); }
html[data-theme="dark"] :where(.data-table tbody tr, .suite-table tbody tr, .support-ticket-card, .entity-context-item) { border-color: var(--ui-border); }
html[data-theme="dark"] :where(code, pre, kbd) { color: #c7d5d7; background-color: var(--ui-surface-soft); border-color: var(--ui-border); }
html[data-theme="dark"] :where(input, select, textarea, button):disabled { color: var(--ui-text-faint); background-color: var(--ui-surface-muted); border-color: var(--ui-border); opacity: 1; }
html[data-theme="dark"] :where(input, textarea)::placeholder { color: var(--ui-text-faint); opacity: .9; }
html[data-theme="dark"] :where(.btn-ghost, .filter-select, .filter-group, .view-toggle, .entity-tab) { color: var(--ui-text-soft); background-color: var(--ui-surface); border-color: var(--ui-border); }
html[data-theme="dark"] :where(.btn-ghost, .filter-chip, .entity-tab):hover { color: var(--ui-text); background-color: var(--ui-surface-hover); }
html[data-theme="dark"] .filter-chip.active {
  color: var(--brand-navy);
  background: var(--ui-accent);
  box-shadow: 0 6px 18px rgba(2, 192, 185, .2);
}
html[data-theme="dark"] .filter-chip.active:hover { color:#fff; background:var(--brand-blue); }
html[data-theme="dark"] :where(.alert-success, .soft-note.success) { color:#78d4df; border-color:rgba(2,141,162,.42); background:rgba(2,141,162,.14); }
html[data-theme="dark"] .alert-error { color:#ff9aaa; border-color:rgba(255,120,142,.34); background:rgba(207,53,78,.13); }
html[data-theme="dark"] .soft-note.warning { color:#ffd184; border-color:rgba(233,162,59,.32); background:rgba(233,162,59,.11); }
html[data-theme="dark"] .cadence-palette-icon.wait { color:#ffd184; background:rgba(233,162,59,.15); }

/* Relatórios: visualizações configuráveis */
.report-columns { display:flex; align-items:stretch; gap:12px; min-height:190px; overflow-x:auto; padding:8px 2px 0; }
.report-column { display:grid; grid-template-rows:20px 1fr 34px; flex:1 0 54px; min-width:54px; gap:7px; text-align:center; }
.report-column>strong { overflow:hidden; color:var(--ui-text); font:750 10px var(--font-mono); text-overflow:ellipsis; white-space:nowrap; }
.report-column>div { position:relative; display:flex; align-items:flex-end; justify-content:center; min-height:120px; border-radius:9px; background:var(--ui-surface-soft); }
.report-column>div i { display:block; width:min(34px,64%); min-height:0; border-radius:8px 8px 3px 3px; transition:height .25s ease; }
.report-column>span { overflow:hidden; color:var(--ui-text-soft); font-size:10px; line-height:1.25; text-overflow:ellipsis; }
.report-line-wrap { width:100%; overflow-x:auto; }
.report-line-chart { display:block; width:100%; min-width:440px; height:auto; overflow:visible; }
.report-chart-grid line { stroke:var(--ui-border); stroke-width:1; }
.report-chart-line { fill:none; stroke:var(--ui-accent); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.report-chart-area { fill:color-mix(in srgb,var(--ui-accent) 22%,transparent); stroke:none; }
.report-chart-points circle { fill:var(--ui-surface); stroke:var(--ui-accent); stroke-width:3; }
.report-chart-points text { fill:var(--ui-text-soft); font:10px var(--font-sans); }
.report-pie::after { display:none; }
.report-funnel { display:grid; gap:7px; padding:3px 0; }
.report-funnel-row { display:flex; justify-content:center; width:100%; }
.report-funnel-row>div { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:110px; min-height:30px; padding:7px 11px; border-radius:7px; color:#fff; box-shadow:0 5px 14px rgba(8,24,28,.1); }
.report-funnel-row span { overflow:hidden; font-size:10px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.report-funnel-row strong { flex:none; font:750 10px var(--font-mono); }

/* Automações prontas: componente isolado para não herdar estilos dos módulos. */
.automation-template-card { display:grid; grid-template-rows:auto auto minmax(54px,1fr) auto; gap:12px; min-height:230px; padding:18px; border:1px solid var(--ui-border); border-radius:17px; background:var(--ui-surface); box-shadow:var(--ui-shadow-sm); }
.automation-template-card.is-active { border-color:color-mix(in srgb,var(--ui-accent) 44%,var(--ui-border)); background:color-mix(in srgb,var(--ui-accent) 5%,var(--ui-surface)); }
.automation-template-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; color:var(--ui-accent-strong); background:var(--ui-accent-soft); font-size:16px; }
.automation-template-name { margin:0; color:var(--ui-text); font-size:13px; line-height:1.35; }
.automation-template-desc { margin:0; color:var(--ui-text-soft); font-size:10px; line-height:1.55; }
.automation-template-action { display:flex; align-items:center; min-height:34px; padding-top:11px; border-top:1px solid var(--ui-border); }
.automation-template-action .muted { line-height:1.4; }
.automation-template-action .template-active { color:var(--ui-accent-strong); }
html[data-theme="dark"] hr { border-color: var(--ui-border); }

/* Escala tipográfica confortável: textos operacionais não devem exigir zoom. */
body:not(.login-body) { font-size: 14px; }
body:not(.login-body) small { font-size: 12px; line-height: 1.45; }
.page-header-row .muted { font-size: 14px; }
.topbar-search input { font-size: 14px; }
.topbar-profile-copy strong { font-size: 13px; }
.topbar-profile-copy small { font-size: 11px; }
.filter-select, .pipeline-picker-btn,
.entity-list-filters .filter-select { font-size: 14px; }
.view-toggle-btn { font-size: 13px; }
.entity-list-total { font-size: 14px; }
.entity-filter-clear { font-size: 12px; }
.data-table thead th { font-size: 12px; }
.data-table tbody td { font-size: 14px; }
.data-table-subtitle { font-size: 12px; }
.directory-avatar { font-size: 13px; }
.directory-primary strong { font-size: 15px; }
.directory-primary small, .directory-contact-lines small { font-size: 13px; }
.directory-contact-lines > span, .directory-owner { font-size: 13px; }
.directory-owner .avatar-sm { font-size: 11px; }
.table-sort-btn i { font-size: 11px; }
.dashboard-date-card span { font-size: 13px; }
.dashboard-date-card small { font-size: 12px; }
.metric-label { font-size: 13px; }
.metric-sub { font-size: 12px; }
.dashboard-quick-links strong { font-size: 14px; }
.dashboard-quick-links small { font-size: 12px; }
.dashboard-quick-links a > i { font-size: 12px; }
.bar-label, .bar-value { font-size: 13px; }
.stage-head h3 { font-size: 15px; }
.stage-count { font-size: 12px; }
.stage-total { font-size: 13px; }
.deal-title { font-size: 16px; }
.deal-subtitle { font-size: 13px; }
.deal-value { font-size: 14px; }
.add-deal-btn { font-size: 13px; }
.modal form label { font-size: 12px; }
.modal form input, .modal form select, .modal form textarea { font-size: 14px; }
.automation-template-name { font-size: 14px; }
.automation-template-desc { font-size: 12px; }

/* Opção persistente de login sem armazenar a senha no navegador. */
.login-form label { font-size: 12px; }
.login-remember {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 9px !important;
  color: var(--ui-text-soft) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
}
.login-form .login-remember input {
  width: 18px;
  height: 18px;
  min-height: 0;
  flex: 0 0 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--ui-accent);
}
.password-field { position:relative; display:block; width:100%; }
.login-form .password-field input { width:100%; padding-right:48px; }
.password-visibility { position:absolute; top:50%; right:7px; transform:translateY(-50%); width:38px; height:38px; display:grid; place-items:center; border:0; border-radius:10px; color:var(--ui-text-soft); background:transparent; cursor:pointer; }
.password-visibility:hover { color:var(--ui-accent-strong); background:var(--ui-accent-soft); }
.password-visibility:focus-visible { outline:2px solid var(--ui-accent); outline-offset:1px; }
.login-options { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.login-options > a { color:var(--ui-accent-strong); font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; }
.login-options > a:hover { text-decoration:underline; }
@media (max-width:420px) { .login-options { align-items:flex-start; flex-direction:column; } }

/* Responsividade */
@media (max-width: 1180px) {
  :root { --sidebar-width: 76px; }
  .sidebar-rail { padding-inline: 10px; }
  .rail-brand { justify-content: center; margin-inline: 0; }
  .rail-brand-copy, .rail-section-label, .rail-item-label, .sidebar-profile-copy { display: none; }
  .rail-menu-group { margin: 0; padding: 4px 0; border-top: 1px solid var(--ui-border); }
  .rail-menu-group:first-child { padding-top: 0; border-top: 0; }
  .rail-group-toggle { display: none; }
  .rail-menu-items { max-height: none; overflow: visible; opacity: 1; transform: none; }
  .rail-item { justify-content: center; padding-inline: 0; }
  .rail-item:hover { transform: none; }
  .sidebar-profile { justify-content: center; padding-inline: 0; }
  .sidebar-collapse-btn { display: none; }
  .dashboard-main-grid { grid-template-columns: minmax(0, 1.45fr) minmax(260px, .8fr); }
  .module-store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .module-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .suite-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .proposal-item { grid-template-columns:1fr 1fr .55fr .7fr; }
}

@media (max-width: 900px) {
  .topbar { padding: 0 18px; }
  .topbar-crumb { display: none; }
  .topbar-search { width: auto; flex: 1; }
  .topbar-profile { min-width: 0; padding: 0; border: 0; }
  .topbar-profile-copy, .topbar-profile > i { display: none; }
  .dashboard-main-grid { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --sidebar-width: 66px; }
  .sidebar-rail { padding: 12px 8px; }
  .sidebar-rail .logo-box, .sidebar-rail .brand-symbol { width: 36px; height: 36px; }
  .topbar { height: 62px; padding: 0 12px; gap: 8px; }
  .topbar-search-hint { display: none; }
  .theme-toggle-btn, .notif-bell-btn { width: 36px; height: 36px; }
  .page-wrap { padding: 22px 14px 32px; }
  .page-header h1 { font-size: 27px; }
  .dashboard-welcome { align-items: flex-start; }
  .dashboard-date-card { display: none; }
  .dashboard-filter-bar, .pipeline-toolbar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 7px; }
  .dashboard-filter-bar > *, .pipeline-toolbar > * { flex: 0 0 auto; }
  .modal-overlay { align-items: flex-end; padding: 10px; }
  .modal { max-height: calc(100vh - 20px); overflow-y: auto; padding: 21px; border-radius: 22px; }
  .modal.modal-wide { border-radius: 22px; }
  .module-store-toolbar { align-items: stretch; flex-direction: column; }
  .module-store-search { width: 100%; }
  .module-store-filters { overflow-x: auto; }
  .module-store-filters button { flex: 0 0 auto; }
  .module-workspace-header { align-items:flex-start; }
  .module-onboarding { grid-template-columns:1fr; }
  .module-onboarding-steps { grid-template-columns:1fr; }
  .module-toolbar { align-items:stretch; flex-direction:column; }
  .module-toolbar select { width:100%; }
  .suite-card-grid,.attribution-grid,.suite-split,.suite-form-grid { grid-template-columns:1fr; }
  .campaign-roi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .whatsapp-workspace,.document-history-grid { grid-template-columns:1fr; }
  .whatsapp-workspace>section+section { border-top:1px solid var(--ui-border); border-left:0; }
  .ai-priority-list { grid-template-columns:1fr; }
  .attribution-grid>section+section,.suite-split>section+section { border-top:1px solid var(--ui-border); border-left:0; }
  .proposal-item { grid-template-columns:1fr 1fr; }
  .project-task-form { grid-template-columns:1fr; }
  .deal-context-card { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contract-editor-page { min-height:300px; padding:24px 20px; }
  .field-wide { grid-column:auto; }
}

@media (max-width: 520px) {
  :root { --sidebar-width: 58px; }
  .sidebar-rail { padding-inline: 6px; }
  .rail-item { min-height: 38px; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 132px; }
  .deal-context-card { grid-template-columns:1fr; }
  .dashboard-main-grid { gap: 12px; }
  .panel { padding: 19px; border-radius: 20px; }
  .bar-row { grid-template-columns: 82px 1fr 72px; gap: 8px; }
  .login-grid { display: block; }
  .login-brand { display: none; }
  .login-form-wrap { min-height: 100vh; padding: 30px 22px; }
  .module-store-grid { grid-template-columns: 1fr; }
  .module-card { min-height: 240px; }
  .platform-module-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/*
 * Workspace premium 2026.2
 * Moldura e hierarquia inspiradas em painéis SaaS contemporâneos, mantendo a
 * identidade verde do Funil e todos os comportamentos do menu e tema atuais.
 */
:root {
  --ui-frame: #003360;
  --ui-frame-soft: #00476e;
  --ui-sidebar: #f0f3f4;
  --ui-canvas: #f7f8f8;
  --ui-panel-radius: 20px;
  --ui-shell-radius: 26px;
}

html[data-theme="dark"] {
  --ui-frame: #001b33;
  --ui-frame-soft: #003360;
  --ui-sidebar: #111a1d;
  --ui-canvas: #0d1518;
}

body:not(.login-body) {
  height: 100vh;
  min-height: 640px;
  padding: 10px;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% -12%, rgba(2, 192, 185, .28), transparent 29%),
    linear-gradient(135deg, var(--ui-frame), var(--ui-frame-soft));
}

body:not(.login-body) .app-shell {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--ui-shell-radius);
  background: var(--ui-canvas);
  box-shadow: 0 28px 80px rgba(1, 14, 18, .3);
}

.sidebar-rail {
  position: relative;
  top: auto;
  height: 100%;
  width: var(--sidebar-width);
  padding: 20px 14px 14px;
  background: var(--ui-sidebar);
  border-right: 1px solid var(--ui-border);
}

.rail-brand {
  height: 48px;
  margin: 0 9px 14px;
}

.sidebar-rail .logo-box,
.sidebar-rail .brand-symbol {
  width: 40px;
  height: 40px;
}
.sidebar-rail .logo-box {
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(2, 141, 162, .2);
}

.rail-brand-copy strong { font-size: 19px; }
.rail-brand-copy small { font-size: 11px; }

.rail-workspace-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  margin: 0 0 14px;
  padding: 8px 10px;
  border: 1px solid var(--ui-border);
  border-radius: 15px;
  color: var(--ui-text);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.rail-workspace-card:hover {
  border-color: color-mix(in srgb, var(--ui-accent) 38%, var(--ui-border));
  box-shadow: 0 10px 24px rgba(14, 38, 44, .08);
  transform: translateY(-1px);
}

.rail-workspace-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: var(--ui-accent-strong);
  background: var(--ui-accent-soft);
  font-size: 13px;
}
.rail-workspace-icon img { width:100%; height:100%; object-fit:contain; border-radius:8px; }
.rail-workspace-switcher { position:relative; }
.rail-workspace-card { width:100%; font:inherit; text-align:left; cursor:pointer; }
.workspace-switcher-menu { position:absolute; z-index:80; top:calc(100% + 7px); left:0; width:260px; padding:10px; border:1px solid var(--ui-border); border-radius:14px; background:var(--ui-surface); box-shadow:0 18px 45px rgb(8 39 61 / 18%); }
.workspace-switcher-menu header { display:flex; justify-content:space-between; gap:8px; padding:5px 6px 9px; }.workspace-switcher-menu header small { color:var(--ui-text-faint); font-size:9px; }.workspace-switcher-menu>div { display:grid; gap:4px; }.workspace-switcher-menu button { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:9px; width:100%; padding:8px; border:0; border-radius:10px; color:var(--ui-text); background:transparent; text-align:left; cursor:pointer; }.workspace-switcher-menu button:hover:not(:disabled){background:var(--ui-surface-soft)}.workspace-switcher-menu button:disabled{cursor:default;background:var(--ui-brand-soft)}.workspace-switcher-menu button span:nth-child(2) strong,.workspace-switcher-menu button span:nth-child(2) small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workspace-switcher-menu button small{margin-top:2px;color:var(--ui-text-faint);font-size:9px}.workspace-option-logo{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--ui-brand-soft);color:var(--ui-brand)}.workspace-option-logo img{width:100%;height:100%;object-fit:contain;border-radius:9px}.workspace-switcher-note{margin:8px 5px 2px!important;color:var(--ui-text-faint);font-size:9px;line-height:1.4}
.workspace-logo-setting { display:flex; align-items:center; gap:14px; }.workspace-logo-setting>span { display:grid; place-items:center; width:72px; height:72px; border:1px solid var(--ui-border); border-radius:16px; color:var(--ui-brand); background:var(--ui-brand-soft); font-size:24px; }.workspace-logo-setting img { width:100%; height:100%; padding:6px; border-radius:14px; object-fit:contain; }
.workspace-switcher-menu .workspace-create-button { display:flex; align-items:center; gap:10px; margin-top:7px; padding-top:11px; border-top:1px solid var(--ui-border); border-radius:0; color:var(--ui-brand); }.workspace-create-button>i { width:34px; }

.rail-workspace-copy { min-width: 0; line-height: 1.2; }
.rail-workspace-copy small,
.rail-workspace-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-workspace-copy small { margin-bottom: 3px; color: var(--ui-text-faint); font-size: 11px; font-weight: 650; }
.rail-workspace-copy strong { color: var(--ui-text); font-size: 13px; font-weight: 720; }
.rail-workspace-arrow { color: var(--ui-text-faint); font-size: 11px; }

.rail-section-label {
  margin-bottom: 7px;
  color: var(--ui-text-faint);
  font-size: 11px;
}

.rail-group-toggle {
  min-height: 38px;
  padding: 7px 10px;
  font-size: 12px;
  letter-spacing: .075em;
}

.rail-group-main > i { font-size: 12px; }
.rail-group-chevron { font-size: 11px; }
.rail-item {
  min-height: 42px;
  margin: 1px 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 14px;
}

.rail-item:hover {
  border-color: var(--ui-border);
  background: color-mix(in srgb, var(--ui-surface) 72%, transparent);
  transform: none;
}

.rail-item.active {
  color: var(--ui-accent-strong);
  border-color: var(--ui-border);
  background: var(--ui-surface);
  box-shadow: 0 8px 22px rgba(14, 38, 44, .08);
}

.rail-item.active .rail-item-icon {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-cyan));
}

.rail-item-icon {
  width: 27px;
  height: 27px;
  flex-basis: 27px;
  border-radius: 9px;
}

.rail-item i { font-size: 14px; }
.sidebar-collapse-btn { top: 30px; right: -15px; width: 30px; height: 30px; font-size: 11px; }

.main-area {
  min-height: 0;
  overflow: hidden;
  background: var(--ui-canvas);
}

.topbar {
  position: relative;
  top: auto;
  z-index: 20;
  height: 74px;
  padding: 0 24px 0 30px;
  gap: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 78% -120%, rgba(0, 214, 200, .32), transparent 36%),
    linear-gradient(120deg, #003360, #00476e);
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.topbar-crumb { min-width: 190px; font-size: 14px; }
.topbar-app-name { color: #fff; }
.topbar-page, .topbar-sep { color: rgba(255, 255, 255, .58); }

.topbar-search {
  width: min(590px, 50vw);
  max-width: 590px;
  min-height: 44px;
  padding: 6px 8px 6px 14px;
  border-color: rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.topbar-search:hover { background: rgba(255, 255, 255, .12); }
.topbar-search:focus-within {
  border-color: rgba(60, 224, 211, .72);
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 4px rgba(2, 141, 162, .18);
}
.topbar-search input { color: #fff; font-size: 14px; }
.topbar-search input::placeholder { color: rgba(255, 255, 255, .48); }
.topbar-search-icon { color: rgba(255, 255, 255, .58); }
.topbar-search-hint {
  color: rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .13);
  font-size: 11px;
}

.topbar-user { gap: 8px; }
.theme-toggle-btn,
.notif-bell-btn {
  width: 40px;
  height: 40px;
  color: rgba(255, 255, 255, .76);
  background: rgba(255, 255, 255, .075);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: none;
}
.theme-toggle-btn:hover,
.notif-bell-btn:hover { color: #fff; background: rgba(255, 255, 255, .13); }

.topbar-profile {
  min-width: 178px;
  padding: 4px 9px 4px 5px;
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .065);
  text-decoration: none;
}
.topbar-profile:hover { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .12); }
.topbar-profile .avatar-sm { border-color: rgba(255, 255, 255, .28); box-shadow: none; }
.topbar-profile-copy strong { color: #fff; font-size: 13px; }
.topbar-profile-copy small { color: rgba(255, 255, 255, .55); font-size: 11px; }
.topbar-profile > i { color: rgba(255, 255, 255, .45); font-size: 11px; }

.main-content {
  min-height: 0;
  overflow: auto;
  background: var(--ui-canvas);
  scrollbar-gutter: stable;
}

.page-wrap {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 28px 30px 38px;
}

.page-wrap-wide,
.page-wrap-fluid { max-width: none; }
.page-wrap-fluid { height: 100%; }
.page-header { margin-bottom: 20px; }
.page-header h1 { font-size: clamp(30px, 3vw, 42px); font-weight: 700; }
.page-header-row .muted { max-width: 720px; }

.filter-bar,
.subnav-toolbar,
.module-store-toolbar {
  border-radius: 16px;
}

.panel,
.metric-card,
.data-table-wrap,
.list-panel,
.activity-row,
.dup-group,
.timeline-wrap,
.timeline-layout,
.template-card,
.report-widget,
.inbox-layout,
.module-card,
.platform-panel,
.platform-stat-card {
  border-color: color-mix(in srgb, var(--ui-border) 88%, transparent);
  border-radius: var(--ui-panel-radius);
  box-shadow: 0 1px 2px rgba(13, 32, 38, .025), 0 12px 32px rgba(13, 32, 38, .035);
}

.panel { padding: 25px; }
.metric-grid { gap: 12px; }
.metric-card { min-height: 140px; padding: 20px; }
.metric-card:hover { transform: translateY(-2px); }
.dashboard-main-grid { gap: 14px; }
.data-table thead th { background: color-mix(in srgb, var(--ui-surface-soft) 72%, transparent); }

html.sidebar-collapsed .rail-workspace-card,
html.sidebar-collapsed .rail-section-label { display: none; }
html.sidebar-collapsed .sidebar-rail { padding-inline: 10px; }
html.sidebar-collapsed .rail-item.active { color: var(--ui-accent-strong); }

html[data-theme="dark"] .sidebar-rail { background: var(--ui-sidebar); }
html[data-theme="dark"] .main-area,
html[data-theme="dark"] .main-content { background: var(--ui-canvas); }
html[data-theme="dark"] .topbar {
  color: #fff;
  background: radial-gradient(circle at 78% -120%, rgba(2, 192, 185, .18), transparent 36%), linear-gradient(120deg, #001b33, #003360);
}
html[data-theme="dark"] .topbar-profile,
html[data-theme="dark"] .topbar-profile:hover { color: #fff; border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .rail-item.active { color: #78d4df; background: var(--ui-surface); }
html[data-theme="dark"] .status-active { color:#78d4df; background:rgba(2,141,162,.2); }
html[data-theme="dark"] .status-trial { color:#8ccbd6; background:rgba(0,71,110,.32); }

/* Visualizações salvas: componente comum de Negócios, Atividades e diretórios. */
.saved-view-mount { flex: 0 0 auto; }
.saved-view-trigger { max-width: 220px; }
.saved-view-trigger > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-view-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; color: var(--ui-accent-strong); background: color-mix(in srgb, var(--ui-accent) 12%, transparent); font-size: 11px; font-weight: 800; }
.saved-view-backdrop { position: fixed; z-index: 1190; inset: 0; background: rgba(0, 27, 51, .34); backdrop-filter: blur(2px); }
.saved-view-drawer { position: fixed; z-index: 1200; top: 0; right: 0; display: flex; flex-direction: column; width: min(430px, 100vw); height: 100dvh; color: var(--ui-text); background: var(--ui-surface); border-left: 1px solid var(--ui-border); box-shadow: -24px 0 60px rgba(0, 27, 51, .16); }
.saved-view-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 25px 24px 20px; border-bottom: 1px solid var(--ui-border); }
.saved-view-header h2 { margin: 3px 0 5px; font-size: 25px; }
.saved-view-header p:not(.eyebrow) { margin: 0; color: var(--ui-text-soft); font-size: 13px; line-height: 1.5; }
.saved-view-body { display: grid; gap: 14px; min-height: 0; padding: 20px 18px 30px; overflow: auto; }
.saved-view-form { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--ui-border); border-radius: 16px; background: var(--ui-surface-soft); }
.saved-view-form label { display: grid; gap: 7px; margin: 0; font-size: 12px; }
.saved-view-form .saved-view-favorite { grid-template-columns: auto 1fr; align-items: center; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 650; }
.saved-view-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.saved-view-search { position: relative; display: block; margin: 2px 0 0; }
.saved-view-search i { position: absolute; top: 50%; left: 14px; color: var(--ui-text-faint); transform: translateY(-50%); }
.saved-view-search input { width: 100%; padding-left: 40px; }
.saved-view-all { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 14px; color: var(--ui-text); border: 1px solid transparent; border-radius: 13px; background: transparent; font-size: 14px; font-weight: 700; text-align: left; }
.saved-view-all span { display: flex; align-items: center; gap: 11px; }
.saved-view-all > i { visibility: hidden; color: var(--ui-accent-strong); }
.saved-view-all:hover,.saved-view-all.active { background: var(--ui-surface-soft); border-color: var(--ui-border); }
.saved-view-all.active > i { visibility: visible; }
.saved-view-list { display: grid; gap: 17px; }
.saved-view-group { display: grid; gap: 6px; }
.saved-view-group > h3 { margin: 0 0 3px; padding: 0 8px; color: var(--ui-text-faint); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.saved-view-item { display: grid; grid-template-columns: minmax(0, 1fr) 36px 36px; align-items: center; min-height: 58px; border: 1px solid transparent; border-radius: 14px; }
.saved-view-item:not(:has(.saved-view-delete)) { grid-template-columns: minmax(0, 1fr) 36px; }
.saved-view-item:hover,.saved-view-item.active { border-color: var(--ui-border); background: var(--ui-surface-soft); }
.saved-view-item.active { box-shadow: inset 3px 0 var(--ui-accent); }
.saved-view-apply { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 8px 10px; color: inherit; text-align: left; }
.saved-view-item-icon { display: grid; flex: 0 0 34px; place-items: center; width: 34px; height: 34px; color: var(--ui-accent-strong); border-radius: 10px; background: color-mix(in srgb, var(--ui-accent) 10%, transparent); }
.saved-view-item-copy { display: grid; min-width: 0; gap: 3px; }
.saved-view-item-copy strong,.saved-view-item-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-view-item-copy strong { font-size: 13px; }
.saved-view-item-copy small { color: var(--ui-text-soft); font-size: 11px; }
.saved-view-star,.saved-view-delete { display: grid; place-items: center; width: 32px; height: 32px; color: var(--ui-text-faint); border-radius: 9px; }
.saved-view-star:hover,.saved-view-star.active { color: #d89000; background: rgba(216, 144, 0, .1); }
.saved-view-delete:hover { color: var(--danger, #c2413b); background: rgba(194, 65, 59, .1); }
.saved-view-empty { display: grid; justify-items: center; gap: 7px; padding: 34px 18px; color: var(--ui-text-soft); text-align: center; }
.saved-view-empty > i { margin-bottom: 4px; color: var(--ui-text-faint); font-size: 24px; }
.saved-view-empty strong { color: var(--ui-text); font-size: 14px; }
.saved-view-empty span { max-width: 300px; font-size: 12px; line-height: 1.5; }
body.saved-view-open { overflow: hidden; }
html[data-theme="dark"] .saved-view-backdrop { background: rgba(0, 12, 23, .64); }
html[data-theme="dark"] .saved-view-drawer { background: var(--ui-surface); box-shadow: -24px 0 60px rgba(0, 0, 0, .35); }

@media (max-width: 1180px) {
  .rail-workspace-card { display: none; }
  .topbar-crumb { min-width: 130px; }
}

@media (max-width: 900px) {
  body:not(.login-body) { padding: 6px; }
  body:not(.login-body) .app-shell { border-radius: 20px; }
  .topbar { height: 68px; padding-inline: 16px; }
  .page-wrap { padding: 24px 22px 34px; }
  .topbar-profile { min-width: 0; padding: 2px; border: 0; background: transparent; }
}

@media (max-width: 760px) {
  body:not(.login-body) { min-height: 540px; padding: 0; }
  body:not(.login-body) .app-shell { border: 0; border-radius: 0; }
  .topbar { height: 62px; padding-inline: 12px; }
  .page-wrap { padding: 22px 14px 32px; }
  .sidebar-rail { padding: 12px 8px; }
  .main-content { scrollbar-gutter: auto; }
  .saved-view-drawer { width: 100vw; }
}

/* ==========================================================================
   Extensão do WhatsApp — página de adoção
   --------------------------------------------------------------------------
   A página antes listava o que a extensão fazia. Agora ela responde à pergunta
   que a pessoa realmente faz ("por que eu instalaria isto hoje?"): promessa,
   antes/depois, ganhos concretos, instalação e dúvidas.
   ========================================================================== */
.ext-hero { margin-bottom: 20px; }
.ext-hero h2 { font-size: clamp(24px, 3.4vw, 32px); letter-spacing: -.02em; }
.ext-hero-fineprint {
  display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0;
  color: rgba(255,255,255,.72); font-size: 12.5px; line-height: 1.5; max-width: 620px;
}
.ext-hero-fineprint i { margin-top: 3px; }

.ext-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; }
.ext-compare-col { padding: 22px 24px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface); }
.ext-compare-col ul { list-style: none; display: grid; gap: 11px; margin: 14px 0 0; padding: 0; }
.ext-compare-col li { display: flex; align-items: flex-start; gap: 10px; color: var(--ui-text-soft); font-size: 13.5px; line-height: 1.5; }
.ext-compare-col li i { flex: 0 0 18px; margin-top: 3px; font-size: 12px; }
.ext-compare-before { background: var(--ui-surface-soft); }
.ext-compare-before li i { color: var(--ui-danger); }
/* A coluna "com a extensão" é a que deve puxar o olho — por isso a borda
   colorida e o texto em tom cheio. */
.ext-compare-after { border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border)); box-shadow: var(--ui-shadow-md); }
.ext-compare-after li { color: var(--ui-text); }
.ext-compare-after li i { color: var(--ui-accent-strong); }

.ext-section-head { margin-bottom: 18px; }
.ext-section-head h2 { margin: 0 0 4px; color: var(--ui-text); }
.ext-benefits { margin-bottom: 26px; }
.ext-benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ext-benefit {
  padding: 22px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg);
  background: var(--ui-surface); box-shadow: var(--ui-shadow-sm);
}
.ext-benefit > span {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px;
  border-radius: 13px; background: var(--ui-accent-soft); color: var(--ui-accent-strong); font-size: 18px;
}
.ext-benefit h3 { margin: 0 0 6px; color: var(--ui-text); font-size: 15px; }
.ext-benefit p { margin: 0; color: var(--ui-text-soft); font-size: 13.5px; line-height: 1.55; }

.ext-install-section { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 20px; margin-bottom: 20px; align-items: start; }
.ext-install-card { display: block; }
.ext-faq { padding: 24px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface-soft); }
.ext-faq h3 { margin: 0 0 12px; color: var(--ui-text); }
.ext-faq details { border-top: 1px solid var(--ui-border); padding: 12px 0 4px; }
.ext-faq details:first-of-type { border-top: none; }
.ext-faq summary { cursor: pointer; color: var(--ui-text); font-size: 14px; font-weight: 600; list-style: none; }
.ext-faq summary::-webkit-details-marker { display: none; }
/* Seta desenhada no ::after para poder girar na abertura sem trocar o texto. */
.ext-faq summary::after { content: '\002B'; float: right; color: var(--ui-accent-strong); font-weight: 700; }
.ext-faq details[open] summary::after { content: '\2212'; }
.ext-faq details p { margin: 8px 0 6px; color: var(--ui-text-soft); font-size: 13px; line-height: 1.55; }

.ext-final-cta {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
  margin-top: 22px; padding: 28px 30px; border-radius: var(--ui-radius-lg); color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-navy) 96%, white), color-mix(in srgb, var(--brand-blue) 86%, black));
}
.ext-final-cta h2 { margin: 0 0 6px; color: #fff; }
.ext-final-cta p { margin: 0; color: rgba(255,255,255,.8); font-size: 14px; line-height: 1.55; max-width: 520px; }
.ext-final-cta-actions { display: grid; gap: 10px; justify-items: stretch; }

@media (max-width: 900px) {
  .ext-compare, .ext-install-section { grid-template-columns: 1fr; }
}
/* O aviso herda `display:block` de .soft-note e o ícone ficava colado no
   texto. Aqui ele vira flex só nesta página. */
.extension-web-only-note { display: flex; align-items: flex-start; gap: 9px; }

/* ==========================================================================
   Celular: barra de abas, gaveta e convite de instalação
   --------------------------------------------------------------------------
   Até 760px a trilha de ícones da lateral sai de cena. Num aparelho de 390px
   ela comia 66px — 17% da largura — para mostrar ícones sem rótulo que ninguém
   consegue distinguir. No lugar entram a barra inferior (quatro destinos do dia
   a dia, com o polegar alcançando todos) e a gaveta com o menu completo.
   ========================================================================== */
.mobile-tabbar,
.mobile-drawer,
.mobile-drawer-backdrop { display: none; }

.pwa-convite {
  position: fixed;
  z-index: 880;
  right: 12px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  left: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--ui-border);
  border-radius: 18px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-lg);
}
.pwa-convite img { border-radius: 12px; }
.pwa-convite-copy { display: grid; gap: 2px; min-width: 0; flex: 1; }
.pwa-convite-copy strong { color: var(--ui-text); font-size: 13.5px; }
.pwa-convite-copy small { color: var(--ui-text-soft); font-size: 11.5px; line-height: 1.35; }
.pwa-convite-fechar {
  width: 28px; height: 28px; flex: 0 0 28px;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--ui-text-faint); font-size: 20px; line-height: 1; cursor: pointer;
}

@media (max-width: 760px) {
  /* A altura em `dvh` acompanha a barra de endereço aparecendo e sumindo; com
     `vh` o rodapé do app ficava escondido atrás dela no Safari e no Chrome. */
  body:not(.login-body) { height: 100dvh; }

  :root { --sidebar-width: 0px; }
  .sidebar-rail { display: none; }

  /* A barra fica por cima do conteúdo, então o conteúdo precisa terminar acima
     dela — senão o último item da lista nunca fica acessível. */
  .main-content { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  .mobile-tabbar {
    position: fixed;
    z-index: 860;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--ui-border);
    background: color-mix(in srgb, var(--ui-surface) 92%, transparent);
    backdrop-filter: blur(14px);
  }
  .mobile-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* 56px é o mínimo confortável para o polegar; abaixo disso erra o alvo. */
    min-height: 56px;
    padding: 7px 2px 8px;
    border: 0;
    background: transparent;
    color: var(--ui-text-soft);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-tab i { font-size: 17px; }
  .mobile-tab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-tab.active { color: var(--ui-accent-strong); }
  .mobile-tab.active i { transform: translateY(-1px); }

  /* O botão flutuante e o suporte sobem para não cobrir as abas. */
  #global-fab-wrap { right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); }
  .support-launcher { right: 82px; bottom: calc(84px + env(safe-area-inset-bottom)); }

  .mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 870;
    display: block;
    background: rgba(4, 13, 15, .5);
    backdrop-filter: blur(2px);
  }
  .mobile-drawer-backdrop.hidden { display: none; }

  /* Folha que sobe de baixo: é o gesto que o celular já ensinou a todo mundo,
     e mantém os alvos perto do polegar em vez de no topo da tela. */
  .mobile-drawer {
    position: fixed;
    z-index: 875;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    max-height: 88dvh;
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: 24px 24px 0 0;
    background: var(--ui-surface);
    box-shadow: 0 -20px 60px rgba(4, 13, 15, .28);
    transform: translateY(100%);
    transition: transform .24s ease;
  }
  .mobile-drawer.is-open { transform: translateY(0); }
  .mobile-drawer.hidden { display: none; }

  .mobile-drawer-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--ui-border);
  }
  .mobile-drawer-workspace { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; }
  .mobile-drawer-logo {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    overflow: hidden;
    border-radius: 13px;
    background: var(--ui-accent-soft);
    color: var(--ui-accent-strong);
  }
  .mobile-drawer-logo img { width: 100%; height: 100%; object-fit: cover; }
  .mobile-drawer-workspace-copy { display: grid; gap: 1px; min-width: 0; }
  .mobile-drawer-workspace-copy small { color: var(--ui-text-faint); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  .mobile-drawer-workspace-copy strong { color: var(--ui-text); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .mobile-drawer-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 12px 4px;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-drawer-group + .mobile-drawer-group { margin-top: 14px; }
  .mobile-drawer-group-title {
    margin: 0 0 4px;
    padding: 0 8px;
    color: var(--ui-text-faint);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .mobile-drawer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 8px 10px;
    border-radius: 13px;
    color: var(--ui-text-soft);
    font-size: 14.5px;
    text-decoration: none;
  }
  .mobile-drawer-item i { width: 20px; flex: 0 0 20px; text-align: center; font-size: 15px; color: var(--ui-text-faint); }
  .mobile-drawer-item.active { background: var(--ui-accent-soft); color: var(--ui-accent-strong); font-weight: 600; }
  .mobile-drawer-item.active i { color: var(--ui-accent-strong); }

  .mobile-drawer-foot {
    display: grid;
    gap: 10px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface-soft);
  }
  .mobile-install-ios {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 11px 13px;
    border: 1px dashed var(--ui-border-strong);
    border-radius: 13px;
    color: var(--ui-text-soft);
    font-size: 12.5px;
    line-height: 1.5;
  }
  .mobile-install-ios i { margin-top: 2px; color: var(--ui-accent-strong); }
  .mobile-drawer-profile {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 6px;
    color: var(--ui-text);
    text-decoration: none;
  }
  .mobile-drawer-profile-copy { display: grid; gap: 1px; min-width: 0; flex: 1; }
  .mobile-drawer-profile-copy strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-drawer-profile-copy small { color: var(--ui-text-faint); font-size: 11.5px; }
  .mobile-drawer-profile > i { color: var(--ui-text-faint); font-size: 12px; }
  .mobile-drawer-logout { margin: 0; }

  /* Gaveta aberta: a página atrás não deve rolar junto. */
  body.drawer-open { overflow: hidden; }
}

/* Instalado na tela inicial não há barra de endereço, então o topo do app
   encosta no relógio e no entalhe do aparelho. */
html[data-standalone="1"] .topbar { padding-top: env(safe-area-inset-top); height: calc(62px + env(safe-area-inset-top)); }
@media (min-width: 761px) {
  html[data-standalone="1"] .topbar { height: calc(74px + env(safe-area-inset-top)); }
}

/* ==========================================================================
   Toque rápido: ligar e WhatsApp
   --------------------------------------------------------------------------
   No desktop são dois ícones discretos ao lado do telefone. No celular viram
   botões com rótulo e altura de dedo — é lá que eles existem de verdade.
   ========================================================================== */
.toque-acoes { display: inline-flex; gap: 6px; margin-left: 10px; vertical-align: middle; }
.toque-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--ui-surface);
  color: var(--ui-text-soft);
  font: 600 12.5px/1 inherit;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.toque-btn span { display: none; }
.toque-btn:hover { border-color: var(--ui-accent); color: var(--ui-accent-strong); }
/* Verde do WhatsApp só no hover: colorir sempre faria a lista inteira piscar. */
.toque-btn-whats:hover { border-color: #25d366; color: #1da851; }

/* ==========================================================================
   Folha de etapas do funil (mover negócio sem arrastar)
   ========================================================================== */
.stage-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 940;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(4, 13, 15, .5);
  backdrop-filter: blur(2px);
}
.stage-sheet {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(520px, 100%);
  max-height: 80dvh;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: var(--ui-surface);
  box-shadow: 0 -20px 60px rgba(4, 13, 15, .3);
}
@media (min-width: 761px) {
  .stage-sheet-overlay { align-items: center; }
  .stage-sheet { border-radius: 22px; padding-bottom: 18px; }
}
.stage-sheet-title { margin: 0 0 4px; color: var(--ui-text-soft); font-size: 13.5px; }
.stage-sheet-title strong { color: var(--ui-text); }
.stage-sheet-list { display: grid; gap: 6px; min-height: 0; overflow-y: auto; }
.stage-sheet-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  background: var(--ui-surface);
  color: var(--ui-text);
  font: 500 14.5px/1.3 inherit;
  text-align: left;
  cursor: pointer;
}
.stage-sheet-item:hover:not(.is-current) { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.stage-sheet-item i { color: var(--ui-text-faint); font-size: 12px; }
.stage-sheet-item.is-current { background: var(--ui-surface-muted); color: var(--ui-text-faint); cursor: default; }
.stage-sheet-item small { color: var(--ui-text-faint); font-size: 11px; }

/* Botão de mover no cartão: só existe onde arrastar não funciona. */
.deal-move-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 38px;
  margin-top: 10px;
  border: 1px solid var(--ui-border);
  border-radius: 11px;
  background: var(--ui-surface-soft);
  color: var(--ui-text-soft);
  font: 600 12.5px/1 inherit;
  cursor: pointer;
}

@media (max-width: 760px) {
  /* ---------- Listas de contatos e empresas viram cartões ----------
     Sete colunas não cabem em 390px. Em vez de rolar a tabela de lado (onde o
     nome some da vista assim que se rola), cada linha vira um cartão com o que
     decide a ação: quem é, de qual empresa, e os dois botões de contato.

     Os seletores abaixo são mais longos do que pareceria necessário porque
     precisam vencer regras que existem para a tabela no computador: a largura
     mínima de 720px, as bordas entre células e a coluna de ação grudada na
     direita. Encurtá-los faz o cartão voltar a escapar da tela. */
  #contacts-list, #orgs-list, .data-table-wrap:has(.directory-table) {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
  /* Sem isto a tabela continua com 720px e o cartão sai pela lateral. */
  .data-table.directory-table { min-width: 0; width: 100%; }
  .directory-table,
  .directory-table tbody,
  .directory-table tr,
  .directory-table td { display: block; }
  .directory-table thead { display: none; }
  .directory-table tbody tr {
    position: relative;
    padding: 13px 46px 13px 14px;
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
  }
  .directory-table tbody tr + tr { margin-top: 10px; }
  .directory-table tbody tr:hover { background: var(--ui-surface); }
  /* As linhas divisórias da tabela viram riscos soltos dentro do cartão. */
  .directory-table tbody td {
    padding: 0;
    border: 0;
    overflow: visible;
    white-space: normal;
  }
  .directory-table .col-secundaria { display: none; }
  .directory-table .col-empresa { margin-top: 6px; color: var(--ui-text-soft); font-size: 12.5px; }
  .directory-table .col-contato { margin-top: 11px; }
  /* O número fica à vista acima dos botões — dá para ler e conferir antes de
     tocar. O e-mail sai daqui porque já aparece embaixo do nome. E a linha de
     quem não tem telefone some inteira, em vez de virar um "Sem telefone" solto
     ocupando espaço no cartão. */
  .directory-table .directory-contact-lines {
    display: block;
    margin-bottom: 9px;
    color: var(--ui-text-soft);
    font-size: 12.5px;
  }
  .directory-table .directory-contact-lines small { display: none; }
  .directory-table .col-contato:not(:has(.toque-acoes)) { display: none; }
  /* No computador esta célula fica colada na direita enquanto a tabela rola.
     No cartão ela vira só a seta no canto de cima. */
  #contacts-list .directory-table .data-table-actions,
  #orgs-list .directory-table .data-table-actions,
  .directory-table .data-table-actions {
    position: absolute;
    top: 13px;
    right: 10px;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
  .directory-table .directory-primary small { white-space: normal; word-break: break-word; }

  /* ---------- Cartão de atividade ----------
     Em coluna estreita a linha do computador (seleção, concluir, ícone, texto,
     anotação e avatar, tudo lado a lado) espremia o assunto em quatro linhas.
     Aqui o texto ocupa a largura, e as ações descem para uma faixa própria,
     com rótulo — num celular, um círculo vazio não diz o que faz. */
  .activity-row { flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 13px; }
  /* Seleção múltipla é tarefa de computador; no celular ela só roubava espaço
     e ficava ao lado de outro círculo, confundindo os dois. */
  .activity-row .bulk-select { display: none; }
  .activity-row .activity-icon { order: 1; }
  .activity-row .activity-body { order: 2; flex: 1 1 0; min-width: 0; }
  .activity-row .avatar-sm { order: 3; }
  /* Quebra de linha em flex: empurra o que vem depois para a faixa de baixo. */
  .activity-row::after { content: ''; order: 4; flex-basis: 100%; height: 0; }
  .activity-row .check-btn,
  .activity-row .icon-btn-note {
    order: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    height: auto;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    color: var(--ui-text-soft);
    font: 600 13px/1 inherit;
  }
  .activity-row .check-btn i { color: var(--ui-accent-strong); }
  .activity-row .acao-rotulo { display: inline; }

  /* Só na lista: ali os botões são a ação principal do cartão. Em linhas
     apertadas (contatos de um negócio) eles seguem ícones, com alvo maior. */
  .directory-table .toque-acoes { display: flex; width: 100%; margin: 0; gap: 8px; }
  .directory-table .toque-btn { flex: 1; width: auto; min-height: 42px; }
  .directory-table .toque-btn span { display: inline; }
  .relation-row .toque-btn, .entity-info-modal .toque-btn { width: 38px; height: 38px; }

  /* ---------- Funil ----------
     Uma etapa por tela, com a próxima espiando na borda para avisar que há mais
     para o lado. O encaixe (`scroll-snap`) faz o dedo parar sempre numa coluna
     inteira, em vez de deixar duas metades na tela. */
  .kanban-board {
    gap: 12px;
    padding: 0 14px 18px;
    cursor: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 14px;
  }
  .stage-column { width: min(86vw, 340px); scroll-snap-align: start; }
  .stage-column-header { position: sticky; top: 0; z-index: 2; }
  .deal-move-btn { display: flex; }

  /* O cartão de atividade é montado mais abaixo, no bloco dos cartões. Aqui
     ficou só o que é do texto — as medidas antigas de botão viviam neste ponto
     e, por virem depois, venciam as novas: o botão continuava com 30px e o
     rótulo "Concluir" vazava para fora da borda, por cima do botão ao lado. */
  .activity-meta { font-size: 12px; }

  /* Barras de filtro com muitos chips: rolam de lado em vez de virar parede. */
  .filter-bar > .filter-group { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .filter-bar > .filter-group > * { flex: 0 0 auto; }
  .filter-chip, .view-toggle-btn { min-height: 36px; }

  /* Importar CSV não é tarefa de celular: o arquivo está no computador, e o
     botão só ocupava a primeira dobra de todas as listas. */
  #open-deals-import-btn,
  #import-people-btn,
  #import-org-btn { display: none; }
}

/* ==========================================================================
   Aviso do modo offline
   --------------------------------------------------------------------------
   Fica embaixo à esquerda: o canto direito já é do botão de criar e do suporte,
   e o topo é da barra de busca. No celular ele atravessa a tela logo acima das
   abas, onde o olho passa sem precisar procurar.
   ========================================================================== */
.offline-barra {
  position: fixed;
  z-index: 900;
  bottom: 22px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: calc(100vw - 36px);
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--ui-dark);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: var(--ui-shadow-lg);
}
.offline-barra.hidden { display: none; }
.offline-barra i { font-size: 12px; opacity: .85; }
/* Fila esperando envio não é problema — é promessa. Por isso o tom da marca, e
   não o mesmo cinza-escuro de "sem conexão". */
.offline-barra-pendente { background: var(--ui-accent-strong); }
.offline-barra span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 760px) {
  .offline-barra {
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    left: 12px;
    max-width: none;
    justify-content: center;
  }
}

/* Aparelhos que recebem notificação (perfil) */
.push-aparelhos { list-style: none; display: grid; gap: 8px; margin: 14px 0 0; padding: 0; }
.push-aparelhos li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  background: var(--ui-surface-soft);
}
.push-aparelhos li > i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 11px;
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
  font-size: 15px;
}
.push-aparelhos li > span { display: grid; gap: 2px; min-width: 0; flex: 1; }
.push-aparelhos strong { color: var(--ui-text); font-size: 13.5px; }
.push-aparelhos small { color: var(--ui-text-soft); font-size: 11.5px; }

/* ==========================================================================
   Filtros no celular: um botão no lugar da barra
   ========================================================================== */
.filtros-mobile { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
/* O seletor de modo (kanban/lista, período) fica à mostra e rola sozinho se
   não couber; quem decide "como ver" não deveria abrir uma folha para isso. */
.filtros-mobile > .view-toggle { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.filtros-mobile > .bulk-actions-bar { flex: 1 1 100%; }
.filtros-abrir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  background: var(--ui-surface);
  color: var(--ui-text);
  font: 600 13.5px/1 inherit;
  cursor: pointer;
}
.filtros-abrir.tem-filtro { border-color: var(--ui-accent); color: var(--ui-accent-strong); }
.filtros-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ui-accent);
  color: #00303a;
  font-size: 11px;
  font-weight: 800;
}
.filtros-badge.hidden { display: none; }

.filtros-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 930;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(4, 13, 15, .5);
  backdrop-filter: blur(2px);
}
.filtros-sheet-overlay.hidden { display: none; }
.filtros-sheet {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-height: 86dvh;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: var(--ui-surface);
  box-shadow: 0 -20px 60px rgba(4, 13, 15, .28);
}
.filtros-sheet-head { display: flex; align-items: center; justify-content: space-between; }
.filtros-sheet-head strong { color: var(--ui-text); font-size: 17px; }
.filtros-sheet-body { flex: 1; min-height: 0; overflow-y: auto; }

/* Dentro da folha a barra vira uma coluna de campos largos: some a rolagem
   lateral, some o aperto, e cada controle ganha altura de dedo. */
.filtros-sheet-body .filter-bar,
.filtros-sheet-body .entity-list-filters,
.filtros-sheet-body .pipeline-toolbar,
.filtros-sheet-body .dashboard-filter-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.filtros-sheet-body .filter-select,
.filtros-sheet-body .btn,
.filtros-sheet-body .entity-filter-clear { width: 100%; min-height: 44px; }
.filtros-sheet-body .filter-group,
.filtros-sheet-body .filter-bar > .filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow: visible;
  padding: 0;
}
.filtros-sheet-body .filter-chip { flex: 0 0 auto; min-height: 38px; }
.filtros-sheet-body #pipeline-saved-views,
.filtros-sheet-body #contacts-saved-views,
.filtros-sheet-body #orgs-saved-views { width: 100%; }

@media (max-width: 760px) {
  /* Cabeçalho da página em coluna, mas alinhado à esquerda. O
     `.pipeline-page-header { align-items: center }` (pensado para a linha do
     desktop) centralizava tudo quando a coluna entrava, e o título do funil
     aparecia no meio da tela. */
  .page-header-row,
  .pipeline-page-header { align-items: stretch; flex-direction: column; }
  .page-header-actions { width: 100%; justify-content: flex-start; }
  /* Botão secundário não ocupa a largura toda: cheio demais, ele compete com o
     conteúdo e parece a ação principal da tela. */
  .page-header-actions .btn { flex: 0 0 auto; }
}

/* Rótulo das ações do cartão de atividade: só aparece no celular. */
.acao-rotulo { display: none; }

/* O atributo `hidden` do HTML esconde via `display:none` da folha do navegador,
   que qualquer `display` nosso vence. Sem esta regra, o botão de instalar e a
   dica do iPhone apareciam em todo aparelho — inclusive no Android, onde a dica
   não faz o menor sentido. */
.mobile-drawer-foot [hidden] { display: none; }

/* Linha do tempo: prévia rica sem abrir a atividade. O cartão fica fora do
   contêiner com rolagem para não ser cortado nas primeiras e últimas linhas. */
.tl-hover-card {
  position: fixed;
  z-index: 1200;
  width: min(360px, calc(100vw - 24px));
  padding: 14px;
  pointer-events: none;
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(4, 22, 30, .22);
}
.tl-hover-card.hidden { display: none; }
.tl-hover-card-head { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 10px; }
.tl-hover-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--ui-accent-strong); background: var(--ui-accent-soft); }
.tl-hover-card-head strong { display: block; font-size: 13px; line-height: 1.35; }
.tl-hover-card-head small { display: block; margin-top: 2px; color: var(--ui-text-faint); font-size: 10px; }
.tl-hover-status { padding: 4px 7px; color: #9a5400; background: #fff5d8; border-radius: 999px; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.tl-hover-status.is-done { color: #08765e; background: #dff9f2; }
.tl-hover-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px; margin-top: 12px; }
.tl-hover-meta span { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--ui-text-soft); font-size: 10px; }
.tl-hover-meta i { width: 12px; color: var(--ui-text-faint); text-align: center; }
.tl-hover-note, .tl-hover-meet { display: flex; gap: 8px; margin-top: 10px; padding: 9px 10px; border-radius: 10px; font-size: 10px; line-height: 1.45; }
.tl-hover-note { color: var(--ui-text-soft); background: var(--ui-surface-soft); }
.tl-hover-note span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.tl-hover-meet { color: var(--ui-accent-strong); background: var(--ui-accent-soft); font-weight: 700; }
.tl-hover-hint { margin-top: 10px; color: var(--ui-text-faint); font-size: 9px; text-align: right; }

.tl-activity-detail-modal { max-height: min(880px, calc(100dvh - 32px)); overflow-y: auto; }
.tl-activity-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.tl-detail-item { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 10px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface-soft); }
.tl-detail-item > i { width: 18px; flex: 0 0 18px; color: var(--ui-accent-strong); text-align: center; }
.tl-detail-item span { min-width: 0; }
.tl-detail-item small, .tl-detail-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-detail-item small { color: var(--ui-text-faint); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.tl-detail-item strong { margin-top: 2px; color: var(--ui-text); font-size: 11px; font-weight: 680; }
.tl-detail-notes { margin: 0 0 16px; padding: 12px; border: 1px solid var(--ui-border); border-radius: 14px; }
.tl-detail-section-title { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; color: var(--ui-text); font-size: 11px; font-weight: 750; }
.tl-detail-notes-content { max-height: 128px; overflow-y: auto; }
.tl-detail-notes-content p { margin: 0; }
.tl-detail-note { padding: 7px 0; color: var(--ui-text-soft); font-size: 10px; line-height: 1.45; border-top: 1px solid var(--ui-border); }
.tl-detail-note:first-child { padding-top: 0; border-top: 0; }
.tl-invite-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; padding: 11px; border-radius: 14px; background: var(--ui-accent-soft); }
.tl-invite-actions.hidden { display: none; }
.tl-invite-actions .btn { flex: 1 1 160px; justify-content: center; }
.tl-activity-detail-modal form > div:last-child { flex-wrap: wrap; }
.mini-activity-invites { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.mini-activity-invites .icon-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; color: var(--ui-accent-strong); background: var(--ui-accent-soft); border: 1px solid color-mix(in srgb, var(--ui-accent) 20%, var(--ui-border)); border-radius: 9px; }
.mini-activity-invites .icon-btn:hover { color: #fff; background: var(--ui-accent-strong); }
.mini-activity-invites .icon-btn:disabled { cursor: not-allowed; opacity: .38; }

@media (max-width: 680px) {
  .tl-activity-details { grid-template-columns: 1fr; }
  .tl-hover-meta { grid-template-columns: 1fr; }
  .tl-activity-detail-modal { padding: 18px; }
}